Utilización de Dreamweaver PDF

Utilizacin de Dreamweaver
Marcas comerciales
Add Life to the Web, Afterburner, Aftershock, Andromedia, Allaire, Animation PowerPack, Aria, Attain, Authorware,
Authorware Star, Backstage, Bright Tiger, Clustercats, Cold Fusion, Contribute, Design in Motion, Director, Dream Templates,
Dreamweaver, Drumbeat 2000, EDJE, EJIPT, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, Generator, HomeSite,
JFusion, JRun, Kawa, Know Your Site, Knowledge Objects, Knowledge Stream, Knowledge Track, LikeMinds, Lingo, Live
Effects, el logotipo y el diseo de MacRecorder, Macromedia, Macromedia Action!, Macromedia Flash, el logotipo y el diseo de
Macromedia M, Macromedia Spectra, el logotipo y el diseo de Macromedia xRes, MacroModel, Made with Macromedia, el
logotipo y el diseo de Made with Macromedia, el logotipo y el diseo de MAGIC, Mediamaker, Movie Critic, Open Sesame!,
Roundtrip HTML, Shockwave, Sitespring, SoundEdit, Titlemaker, UltraDev, Web Design 101, what the web can be y Xtra son
marcas registradas o marcas comerciales de Macromedia, Inc. y pueden estar registradas en los Estados Unidos de Amrica o en
otras jurisdicciones internacionales. Otros nombres de productos, logotipos, diseos, ttulos, palabras o frases mencionados en
esta publicacin pueden ser marcas comerciales, marcas de servicio o nombres comerciales de Macromedia, Inc. u otras entidades
y pueden estar registrados en determinadas jurisdicciones.
Informacin de otros proveedores
Este manual contiene vnculos con sitios Web de terceros que no estn bajo el control de Macromedia, por lo que Macromedia no
es responsable del contenido de ninguno de los sitios vinculados. Si obtiene acceso a un sitio Web de terceros mencionado en este
manual, lo har por su cuenta y riesgo. Macromedia proporciona estos vnculos exclusivamente para su comodidad, por lo que la
inclusin del vnculo no implica la aceptacin de responsabilidad alguna por parte de Macromedia por el contenido de dichos
sitios de terceros.
En http://www.macromedia.com/go/thirdparty_es/ encontrar avisos de software de terceros y/u otros trminos y condiciones.
Navegador Opera Copyright 1995-2002 Opera Software ASA y sus proveedores. Todos los derechos reservados.
Advertencia de Apple
APPLE COMPUTER, INC. NO OFRECE GARANTAS DE NINGN TIPO, NI EXPRESAS NI IMPLCITAS, EN
RELACIN CON EL PAQUETE DE SOFTWARE INFORMTICO ADJUNTO, SU COMERCIABILIDAD O SU
ADECUACIN PARA UN PROPSITO ESPECFICO. ALGUNOS ESTADOS NO ADMITEN LA EXCLUSIN DE
GARANTAS IMPLCITAS. ES POSIBLE QUE LA EXCLUSIN ANTERIOR NO SE APLIQUE EN SU CASO. ESTA
GARANTA PROPORCIONA AL USUARIO DERECHOS LEGALES ESPECFICOS. OTROS DERECHOS QUE LE
PUEDAN CORRESPONDER VARAN DE UN ESTADO A OTRO.
Copyright 2003 Macromedia, Inc. Todos los derechos reservados. Este manual no se puede copiar, fotocopiar,
reproducir, traducir ni convertir a ningn formato electrnico o legible por mquina, en parte o en su totalidad, sin el
permiso previo y por escrito de Macromedia, Inc. Nmero de componente ZDW70M200SP
Agradecimientos
Directora jefe: Sheila McGinn
Direccin del proyecto: Charles Nadeau
Redaccin: Jed Hartman, Jennifer Rowe, Chris Bedford, Charles Nadeau
Edicin: Lisa Stanziano, Mary Ferguson, Noreen Maher
Administracin de la produccin: Patrice ONeill
Produccin y diseo multimedia: Adam Barnett, Aaron Begley, Chris Basmajian, John Francis, Jeff Harmon
Un agradecimiento especial para Jay London, Alain Dumesny, Lori Hylan-Cho, Jack Herrington, Vic Mitnick, Rebecca Hyatt,
Russ Helfand, Erik Bergman, Luciano Arruda, Sho Kuwamoto, Ken Karleskint, Scott Richards, Bonnie Loo, David Deming,
Jennifer Taylor, Rosana Francescato, Randy Nielsen, Liliana Ramirez-Cortes, Masayo Noda, Scott Richards, Seungmin Lee,
Vincent Truong, Veronica Luongo, a los responsables de verificar la versin beta y a los equipos de ingeniera y control de calidad
de Dreamweaver.
Primera edicin: septiembre de 2003
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
3
CONTENIDO
PARTE I: Aspectos bsicos de Dreamweaver
INTRODUCCIN: Bienvenido a Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Novedades de Dreamweaver MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Por dnde empezar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Flujo de trabajo de Dreamweaver para la creacin de sitios Web . . . . . . . . . . . . . . 23
Utilizacin de Dreamweaver con otras aplicaciones . . . . . . . . . . . . . . . . . . . . . . . . 27
Dreamweaver y accesibilidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Gua de recursos de formacin de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Convenciones tipogrficas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Recursos tecnolgicos HTML y Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
CAPTULO 1: Exploracin del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . 33
Espacio de trabajo de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Utilizacin de la ventana de documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Utilizacin de barras de herramientas, inspectores y mens contextuales . . . . . . . . 44
Utilizacin de paneles y grupos de paneles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Utilizacin de las funciones de accesibilidad de Dreamweaver . . . . . . . . . . . . . . . . 52
Optimizacin del espacio de trabajo para el diseo de pginas accesibles . . . . . . . . 56
Utilizacin de guas visuales en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Aspectos bsicos de personalizacin de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . 58
CAPTULO 2: Configuracin de un sitio de Dreamweaver . . . . . . . . . . . . . . . . . . 63
Acerca de los sitios de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Configuracin de un sitio de Dreamweaver nuevo. . . . . . . . . . . . . . . . . . . . . . . . . 65
Utilizacin de las opciones Avanzadas para configurar un sitio de Dreamweaver . . 66
Edicin de la configuracin de un sitio de Dreamweaver . . . . . . . . . . . . . . . . . . . 70
Edicin de sitios Web existentes con Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . 71
4 Contenido
CAPTULO 3: Cmo crear y abrir documentos . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Creacin de documentos nuevos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Cmo guardar un nuevo documento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Configuracin de un tipo de documento nuevo predeterminado. . . . . . . . . . . . . . 76
Cmo abrir documentos existentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Importacin de un archivo HTML de Microsoft Word. . . . . . . . . . . . . . . . . . . . . 78
PARTE II: Utilizacin de los sitios de Dreamweaver
CAPTULO 4: Administracin de archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Administracin de sitios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Acceso a sitios, a un servidor y a unidades locales. . . . . . . . . . . . . . . . . . . . . . . . . . 84
Visualizacin de archivos y carpetas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Administracin de archivos y carpetas en el panel Archivos . . . . . . . . . . . . . . . . . . 90
Utilizacin de un mapa visual del sitio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Importacin y exportacin de sitios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Eliminacin de un sitio de Dreamweaver de la lista de sitios . . . . . . . . . . . . . . . . 101
Desproteccin y proteccin de archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Obtencin y colocacin de archivos en el servidor . . . . . . . . . . . . . . . . . . . . . . . . 104
Sincronizacin de los archivos de los sitios local y remoto . . . . . . . . . . . . . . . . . . 107
Cmo ocultar carpetas y archivos en el sitio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Almacenamiento de informacin sobre archivos en Design Notes . . . . . . . . . . . . 111
Comprobacin del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
CAPTULO 5: Administracin de activos y bibliotecas . . . . . . . . . . . . . . . . . . . . 119
Elementos de biblioteca. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Utilizacin de activos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Creacin y administracin de una lista de activos favoritos . . . . . . . . . . . . . . . . . 127
Utilizacin de los elementos de biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
CAPTULO 6: Administracin de sitios de Contribute con Dreamweaver . . . . . 137
Administracin de sitios de Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Preparacin de un sitio para su uso con Contribute . . . . . . . . . . . . . . . . . . . . . . . 142
Administrar un sitio de Contribute con Dreamweaver. . . . . . . . . . . . . . . . . . . . . 142
Solucin de problemas de un sitio de Contribute . . . . . . . . . . . . . . . . . . . . . . . . 144
Administracin de archivos de Contribute con Dreamweaver . . . . . . . . . . . . . . . 145
Contenido 5
PARTE III: Diseo de pginas
CAPTULO 7: Diseo de pginas con CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Acerca de las capas en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Insercin de bloques de contenido para diseo . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Cambio del color de resaltado de los bloques de contenido . . . . . . . . . . . . . . . . . 154
Utilizacin de bloques de contenido para diseo . . . . . . . . . . . . . . . . . . . . . . . . . 155
Insercin de una capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Configuracin de preferencias y propiedades de capa. . . . . . . . . . . . . . . . . . . . . . 158
Administracin de capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Manipulacin de capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Conversin de capas en tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Utilizacin de reglas y cuadrculas para disear pginas . . . . . . . . . . . . . . . . . . . . 166
Utilizacin de una imagen de rastreo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
CAPTULO 8: Presentacin de contenido en tablas . . . . . . . . . . . . . . . . . . . . . . 169
Tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Insercin de una tabla y adicin de contenido . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Importacin y exportacin de datos de tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Seleccin de elementos de una tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Utilizacin del modo de tablas expandidas para facilitar la edicin de tablas . . . . 176
Aplicacin de formato a tablas y celdas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Cambio de tamao de tablas, columnas y filas . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Adicin y eliminacin de filas y columnas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Divisin y combinacin de celdas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Cmo copiar, pegar y eliminar celdas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Ordenacin de tablas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
CAPTULO 9: Diseo de pginas en el modo de diseo. . . . . . . . . . . . . . . . . . . 189
Modo de diseo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Alternancia entre modo estndar y modo de diseo. . . . . . . . . . . . . . . . . . . . . . . 193
Dibujo en el modo de diseo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Adicin de contenido a una celda de diseo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Cmo borrar los altos de celdas establecidos automticamente . . . . . . . . . . . . . . 198
Cambio de tamao y desplazamiento de celdas y tablas de diseo . . . . . . . . . . . . 198
Aplicacin de formato a celdas y tablas de diseo . . . . . . . . . . . . . . . . . . . . . . . . 200
Establecimiento del ancho de columna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Configuracin de preferencias para el modo de diseo. . . . . . . . . . . . . . . . . . . . . 203
6 Contenido
CAPTULO 10: Utilizacin de marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Marcos y conjuntos de marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Utilizacin de conjuntos de marcos en la ventana de documento. . . . . . . . . . . . . 209
Creacin de marcos y conjuntos de marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Seleccin de marcos y conjuntos de marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Cmo abrir un documento en un marco . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Almacenamiento de archivos de marcos y conjuntos de marcos . . . . . . . . . . . . . . 215
Visualizacin y configuracin de las propiedades y los atributos de los marcos. . . 216
Visualizacin y configuracin de las propiedades de un conjunto de marcos . . . . 218
Control del contenido de los marcos con vnculos . . . . . . . . . . . . . . . . . . . . . . . . 218
Manipulacin de navegadores que no pueden mostrar marcos . . . . . . . . . . . . . . . 219
Utilizacin de comportamientos JavaScript con marcos . . . . . . . . . . . . . . . . . . . . 220
CAPTULO 11: Administracin de plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Plantillas de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Creacin de una plantilla de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Creacin de plantillas para un sitio de Contribute . . . . . . . . . . . . . . . . . . . . . . . . 236
Creacin de regiones editables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Creacin de regiones repetidas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Utilizacin de regiones opcionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Definicin de atributos de etiqueta editables . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Creacin de una plantilla anidada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Edicin y actualizacin de plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Administracin de plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Exportacin e importacin de contenido XML de plantillas . . . . . . . . . . . . . . . . 252
Exportacin de un sitio sin formato de plantilla . . . . . . . . . . . . . . . . . . . . . . . . . 253
Aplicacin o eliminacin de una plantilla de un documento existente . . . . . . . . . 253
Edicin de contenido de un documento basado en plantilla . . . . . . . . . . . . . . . . 254
PARTE IV: Adicin de contenido a las pginas
CAPTULO 12: Utilizacin de pginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Utilizacin de pginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Almacenamiento de pginas Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Especificacin de HTML en lugar de CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Configuracin de propiedades de la pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Utilizacin de colores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Seleccin de elementos en la ventana de documento . . . . . . . . . . . . . . . . . . . . . . 268
Automatizacin de tareas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Utilizacin de comportamientos de JavaScript para detectar navegadores
y plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Vista previa y comprobacin de pginas en los navegadores . . . . . . . . . . . . . . . . . 277
Configuracin de las preferencias de tiempo de descarga y tamao . . . . . . . . . . . 279
Contenido 7
CAPTULO 13: Insercin y formato de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Aplicacin de formato a texto en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Insercin de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Aplicacin de formato a prrafos y a la estructura de la pgina. . . . . . . . . . . . . . . 291
Aplicacin de formato al texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Utilizacin de estilos de hojas de estilos en cascada . . . . . . . . . . . . . . . . . . . . . . . 299
Actualizacin de hojas de estilos CSS en un sitio de Contribute . . . . . . . . . . . . . 307
Comprobacin de la ortografa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Cmo buscar y reemplazar texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
CAPTULO 14: Insercin de imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Insercin de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Cambio del tamao de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Recorte de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Optimizacin de una imagen mediante Fireworks . . . . . . . . . . . . . . . . . . . . . . . . 319
Ajuste del brillo y del contraste de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Perfilado de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Creacin de una imagen de sustitucin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
Utilizacin de un editor de imgenes externo. . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Aplicacin de comportamientos a imgenes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
CAPTULO 15: Establecimiento de vnculos y navegacin . . . . . . . . . . . . . . . . . 325
Aspectos bsicos de ubicacin y rutas de documentos . . . . . . . . . . . . . . . . . . . . . 326
Mens de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Barras de navegacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Mapas de imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Creacin de vnculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Administracin de vnculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Insercin de mens de salto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Utilizacin de las barras de navegacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
Utilizacin de los mapas de imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Cmo adjuntar comportamientos JavaScript a vnculos . . . . . . . . . . . . . . . . . . . . 347
Comprobacin de vnculos rotos, externos y hurfanos . . . . . . . . . . . . . . . . . . . . 347
Reparacin de vnculos rotos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Apertura de documentos vinculados en Dreamweaver . . . . . . . . . . . . . . . . . . . . . 350
CAPTULO 16: Utilizacin con otras aplicaciones. . . . . . . . . . . . . . . . . . . . . . . . 351
Integracin de Fireworks y Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Optimizacin del entorno de trabajo para Fireworks y Flash . . . . . . . . . . . . . . . . 352
Utilizacin de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Utilizacin de Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
8 Contenido
CAPTULO 17: Adicin de audio, vdeo y elementos interactivos . . . . . . . . . . . . 365
Archivos multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
Insercin y edicin de objetos multimedia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
Inicio de un editor externo de archivos multimedia . . . . . . . . . . . . . . . . . . . . . . . 369
Utilizacin de Design Notes con objetos multimedia. . . . . . . . . . . . . . . . . . . . . . 371
Insercin y modificacin de un objeto de botn Flash . . . . . . . . . . . . . . . . . . . . 371
Insercin de un objeto de texto Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
Insercin de contenido de Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
Descarga e instalacin de elementos Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
Insercin de elementos Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Edicin de atributos de elementos Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Insercin de pelculas Shockwave. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
Adicin de vdeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
Adicin de sonido a una pgina. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
Insercin de contenido de plug-in de Netscape Navigator . . . . . . . . . . . . . . . . . . 377
Insercin de un control ActiveX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
Insercin de un applet de Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Utilizacin de comportamientos para controlar elementos multimedia . . . . . . . . 380
CAPTULO 18: Utilizacin de comportamientos JavaScript . . . . . . . . . . . . . . . . 381
Utilizacin del panel Comportamientos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
Aplicacin de un comportamiento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383
Cmo adjuntar un comportamiento a un texto . . . . . . . . . . . . . . . . . . . . . . . . . . 384
Cambio de un comportamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385
Actualizacin de un comportamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385
Creacin de nuevas acciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
Descarga e instalacin de comportamientos de terceros . . . . . . . . . . . . . . . . . . . . 386
Utilizacin de las acciones de comportamiento incluidas con Dreamweaver . . . . 386
PARTE V: Utilizacin del cdigo de las pginas
CAPTULO 19: Configuracin del entorno de codificacin . . . . . . . . . . . . . . . . . 413
Visualizacin del cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
Utilizacin del espacio de trabajo orientado al codificador (slo en Windows). . . 414
Configuracin de las preferencias de visualizacin . . . . . . . . . . . . . . . . . . . . . . . . 415
Configuracin de las preferencias de codificacin . . . . . . . . . . . . . . . . . . . . . . . . 415
Personalizacin de los mtodos abreviados de teclado . . . . . . . . . . . . . . . . . . . . . 417
Cmo abrir archivos en la vista de cdigo de forma predeterminada . . . . . . . . . . 417
Configuracin de las preferencias del validador . . . . . . . . . . . . . . . . . . . . . . . . . . 418
Administracin de bibliotecas de etiquetas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418
Importacin de etiquetas personalizadas a Dreamweaver . . . . . . . . . . . . . . . . . . . 422
Utilizacin de un editor de HTML externo con Dreamweaver . . . . . . . . . . . . . . 424
Contenido 9
CAPTULO 20: Codificacin en Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . 427
Codificacin en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428
Escritura y edicin de cdigo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436
Bsqueda y reemplazo de etiquetas y atributos. . . . . . . . . . . . . . . . . . . . . . . . . . . 441
Cambios rpidos en una seleccin de cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443
Utilizacin del material de consulta para lenguajes . . . . . . . . . . . . . . . . . . . . . . . 444
Impresin del cdigo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445
CAPTULO 21: Optimizacin y depuracin del cdigo . . . . . . . . . . . . . . . . . . . . 447
Limpieza del cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447
Verificacin de que las etiquetas y llaves estn equilibradas . . . . . . . . . . . . . . . . . 448
Comprobacin de la compatibilidad con los navegadores . . . . . . . . . . . . . . . . . . 448
Validacin de etiquetas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451
Creacin de pginas compatibles con XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . 452
Utilizacin del depurador de ColdFusion (slo Windows). . . . . . . . . . . . . . . . . . 453
CAPTULO 22: Edicin de cdigo en la vista Diseo. . . . . . . . . . . . . . . . . . . . . 455
Edicin de cdigo con el inspector de propiedades . . . . . . . . . . . . . . . . . . . . . . . 455
Cambio de atributos con el inspector de etiquetas . . . . . . . . . . . . . . . . . . . . . . . . 456
Edicin de cdigo con Quick Tag Editor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
Edicin de cdigo con el selector de etiquetas . . . . . . . . . . . . . . . . . . . . . . . . . . . 460
Edicin de scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460
Utilizacin de server-side includes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
Utilizacin de comportamientos JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Visualizacin y edicin del contenido de Head . . . . . . . . . . . . . . . . . . . . . . . . . . 463
PARTE VI: Preparacin para crear sitios dinmicos
CAPTULO 23: Configuracin de una aplicacin Web. . . . . . . . . . . . . . . . . . . . 467
Lo que necesita para crear aplicaciones Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467
Configuracin de un servidor Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
Configuracin de un servidor de aplicaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
Creacin de una carpeta raz para la aplicacin . . . . . . . . . . . . . . . . . . . . . . . . . . 471
Definicin de un sitio de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
Conexin con una base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475
CAPTULO 24: Conexiones de base de datos para desarrolladores
de ColdFusion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
Edicin o eliminacin de una conexin de base de datos . . . . . . . . . . . . . . . . . . . 478
10 Contenido
CAPTULO 25: Conexiones de base de datos para desarrolladores
de ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479
CAPTULO 26: Conexiones de base de datos para desarrolladores de ASP. . . 485
Conexiones de base de datos en ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486
Creacin de una conexin con DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487
Creacin de una conexin sin DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 490
Conexin con una base de datos en un ISP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491
CAPTULO 27: Conexiones de base de datos para desarrolladores de JSP. . . 495
Conexiones de base de datos en JSP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
Conexin mediante un controlador ODBC . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498
CAPTULO 28: Conexiones de base de datos para desarrolladores de PHP . . 503
CAPTULO 29: Solucin de problemas de conexiones de base de datos . . . . . 505
Solucin de problemas relacionados con permisos . . . . . . . . . . . . . . . . . . . . . . . . 505
Solucin de problemas relacionados con mensajes de error de Microsoft . . . . . . . 507
PARTE VII: Creacin de pginas dinmicas
CAPTULO 30: Optimizacin del espacio de trabajo para desarrollo visual . . . . 515
Visualizacin de paneles de desarrollo de aplicaciones Web . . . . . . . . . . . . . . . . . 515
Visualizacin de la base de datos en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . 517
Visualizacin de live data en la vista de Diseo . . . . . . . . . . . . . . . . . . . . . . . . . . 518
Utilizacin de la vista de Diseo sin datos dinmicos. . . . . . . . . . . . . . . . . . . . . . 523
Vista previa de pginas dinmicas en un navegador . . . . . . . . . . . . . . . . . . . . . . . 523
Restriccin de la informacin de base de datos que se muestra en
Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524
CAPTULO 31: Flujo de trabajo para el diseo de pginas dinmicas . . . . . . . . 525
Diseo de la pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526
Creacin de una fuente de contenido dinmico. . . . . . . . . . . . . . . . . . . . . . . . . . 526
Adicin de contenido dinmico a una pgina Web . . . . . . . . . . . . . . . . . . . . . . . 528
Mejora de la funcionalidad de una pgina dinmica . . . . . . . . . . . . . . . . . . . . . . 528
Comprobacin y depuracin de la pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529
Contenido 11
CAPTULO 32: Obtencin de datos para la pgina . . . . . . . . . . . . . . . . . . . . . . 533
Utilizacin de una base de datos para almacenar contenido . . . . . . . . . . . . . . . . . 533
Recopilacin de los datos enviados por los usuarios . . . . . . . . . . . . . . . . . . . . . . . 534
Acceso a datos almacenados en variables de sesin . . . . . . . . . . . . . . . . . . . . . . . . 539
CAPTULO 33: Definicin de fuentes de contenido dinmico . . . . . . . . . . . . . . 545
Fuentes de contenido dinmico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546
Definicin de un juego de registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551
Definicin de parmetros de URL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554
Definicin de parmetros de formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555
Definicin de variables de sesin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556
Definicin de variables de aplicacin para ASP y ColdFusion . . . . . . . . . . . . . . . 557
Utilizacin de una variable como fuente de datos para un juego de registros
ColdFusion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 558
Definicin de variables de servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559
Creacin de un cach de las fuentes de contenido . . . . . . . . . . . . . . . . . . . . . . . . 562
Cambio o eliminacin de fuentes de contenido . . . . . . . . . . . . . . . . . . . . . . . . . . 563
Copia de un juego de registros de una pgina a otra . . . . . . . . . . . . . . . . . . . . . . 564
CAPTULO 34: Adicin de contenido dinmico a pginas Web . . . . . . . . . . . . 565
Adicin de contenido dinmico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566
Conversin de texto en contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567
Conversin de imgenes en contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . 568
Conversin de atributos HTML en contenido dinmico . . . . . . . . . . . . . . . . . . 569
Conversin de parmetros de ActiveX, Flash y de otros objetos en contenido
dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571
Edicin del contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571
Eliminacin de contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572
Creacin de pginas dinmicas en un sitio de Contribute . . . . . . . . . . . . . . . . . . 572
CAPTULO 35: Visualizacin de registros de la base de datos . . . . . . . . . . . . . 575
Visualizacin de registros de la base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575
Utilizacin de formatos de datos predefinidos . . . . . . . . . . . . . . . . . . . . . . . . . . . 582
Creacin de vnculos de navegacin por conjuntos de registros . . . . . . . . . . . . . . 583
Visualizacin y ocultacin de registros segn los resultados del juego de registros 586
Visualizacin de varios resultados de juego de registros . . . . . . . . . . . . . . . . . . . . 586
Creacin de una tabla con un comportamiento del servidor Repetir regin . . . . . 587
Creacin de un contador de registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 588
Creacin de controles Web Cuadrcula de datos y Lista de datos de ASP.NET . . 590
CAPTULO 36: Utilizacin de componentes de ColdFusion . . . . . . . . . . . . . . . 595
Componentes de ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595
Creacin visual de un componente en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . 596
Visualizacin de componentes de ColdFusion en Dreamweaver . . . . . . . . . . . . . 597
Edicin de componentes de ColdFusion en Dreamweaver. . . . . . . . . . . . . . . . . . 598
Creacin de pginas Web que utilicen componentes de ColdFusion . . . . . . . . . . 599
12 Contenido
CAPTULO 37: Utilizacin de servicios Web (slo Windows) . . . . . . . . . . . . . . 601
Servicios Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602
Configuracin de generadores proxy para utilizarlos con Dreamweaver . . . . . . . . 605
Adicin de un proxy de servicios Web utilizando la descripcin WSDL. . . . . . . . 607
Adicin de un servicio Web a una pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608
Edicin de la lista de sitios de servicios Web UDDI. . . . . . . . . . . . . . . . . . . . . . . 610
CAPTULO 38: Adicin de comportamientos de servidor personalizados. . . . . 611
Comportamientos de servidor personalizados . . . . . . . . . . . . . . . . . . . . . . . . . . . 611
Instalacin de comportamientos de servidor de terceros . . . . . . . . . . . . . . . . . . . 620
Utilizacin del Creador de comportamientos de servidor. . . . . . . . . . . . . . . . . . . 621
Utilizacin de parmetros en comportamientos de servidor . . . . . . . . . . . . . . . . . 624
Colocacin de bloques de cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 625
Creacin de un cuadro de dilogo para un comportamiento de servidor
personalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 626
Edicin y modificacin de comportamientos de servidor. . . . . . . . . . . . . . . . . . . 628
CAPTULO 39: Creacin de formularios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631
Formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631
Creacin de formularios HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 635
Insercin de objetos de formulario HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 637
Insercin de objetos de formulario HTML dinmicos . . . . . . . . . . . . . . . . . . . . . 641
Validacin de datos de formulario HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 644
Cmo adjuntar comportamientos JavaScript a objetos de formulario HTML . . . 645
Cmo adjuntar scripts personalizados a botones de formulario HTML . . . . . . . . 645
Creacin de formularios HTML accesibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 646
Creacin de formularios ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647
PARTE VIII: Desarrollo rpido de aplicaciones
CAPTULO 40: Creacin rpida de aplicaciones de ColdFusion . . . . . . . . . . . . 653
Desarrollo rpido de aplicaciones (todos los servidores) . . . . . . . . . . . . . . . . . . . . 653
Creacin de pginas maestra-detalle (ColdFusion). . . . . . . . . . . . . . . . . . . . . . . . 658
Creacin de pginas de bsqueda/resultados (ColdFusion, ASP, JSP, PHP) . . . . . 665
Creacin de una pgina de insercin de registro (todos los servidores) . . . . . . . . . 671
Creacin de pginas para actualizar un registro (ColdFusion) . . . . . . . . . . . . . . . 673
Creacin de pginas para eliminar un registro (ColdFusion) . . . . . . . . . . . . . . . . 679
Utilizacin de procedimientos almacenados para modificar bases de datos
(ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687
Creacin de pginas que restrinjan el acceso al sitio
(ColdFusion, ASP, JSP Y PHP). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 689
Contenido 13
CAPTULO 41: Creacin rpida de aplicaciones ASP.NET . . . . . . . . . . . . . . . . 699
Creacin de pginas maestra-detalle (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . 699
Creacin de una pgina de bsqueda en la base de datos (ASP.NET). . . . . . . . . . 705
Creacin de una pgina de insercin de registro (ASP.NET) . . . . . . . . . . . . . . . . 710
Creacin de pginas para actualizar un registro (ASP.NET) . . . . . . . . . . . . . . . . . 710
Creacin de pginas para eliminar un registro (ASP.NET) . . . . . . . . . . . . . . . . . . 717
(ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 725
Creacin de pginas que restrinjan el acceso al sitio (ASP.NET) . . . . . . . . . . . . . 726
CAPTULO 42: Creacin rpida de aplicaciones ASP y JSP. . . . . . . . . . . . . . . 729
Creacin de pginas maestra-detalle (ASP y JSP) . . . . . . . . . . . . . . . . . . . . . . . . . 729
Creacin de pginas de bsqueda/resultados (ASP y JSP) . . . . . . . . . . . . . . . . . . 732
Creacin de una pgina de insercin de registro (ASP y JSP) . . . . . . . . . . . . . . . . 733
Creacin de pginas para actualizar un registro (ASP y JSP) . . . . . . . . . . . . . . . . 733
Creacin de pginas para eliminar un registro (ASP y JSP) . . . . . . . . . . . . . . . . . 738
Creacin de pginas con objetos de manipulacin de datos avanzados
(ASP y JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 741
Creacin de pginas que restrinjan el acceso al sitio (ASP y JSP) . . . . . . . . . . . . . 745
CAPTULO 43: Creacin rpida de aplicaciones PHP. . . . . . . . . . . . . . . . . . . . 747
Creacin de pginas maestra-detalle (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 747
Creacin de pginas de bsqueda/resultados (PHP). . . . . . . . . . . . . . . . . . . . . . . 752
Creacin de una pgina de insercin de registros (PHP) . . . . . . . . . . . . . . . . . . . 752
Creacin de pginas para actualizar un registro (PHP). . . . . . . . . . . . . . . . . . . . . 753
Creacin de pginas para eliminar un registro (PHP) . . . . . . . . . . . . . . . . . . . . . 759
Creacin de pginas que restrinjan el acceso al sitio (PHP) . . . . . . . . . . . . . . . . . 766
PARTE IX: Apndices
APNDICE A: Gua de bases de datos para principiantes . . . . . . . . . . . . . . . . . 769
Bases de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 769
Aspectos bsicos del diseo de bases de datos. . . . . . . . . . . . . . . . . . . . . . . . . . . . 770
Aspectos bsicos de las conexiones de bases de datos . . . . . . . . . . . . . . . . . . . . . . 776
APNDICE B: Nociones bsicas de SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 781
Aspectos bsicos de la sintaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 781
Definicin de las columnas en un juego de registros . . . . . . . . . . . . . . . . . . . . . . 783
Limitacin de los registros en un juego de registros . . . . . . . . . . . . . . . . . . . . . . . 783
Clasificacin de los registros en un juego de registros. . . . . . . . . . . . . . . . . . . . . . 786
Unin de tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 787
NDICE ALFABTICO. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 789
14 Contenido
PARTE I
Aspectos bsicos de Dreamweaver
Aprenda a utilizar la documentacin y otros recursos de Macromedia Dreamweaver MX 2004 y
configure el espacio de trabajo de Dreamweaver de acuerdo con su mtodo de trabajo.
Posteriormente, planifique y configure un sitio y comience a crear pginas.
Esta parte contiene los siguientes captulos:
Introduccin, Bienvenido a Dreamweaver, en la pgina 17
Captulo 1, Exploracin del espacio de trabajo, en la pgina 33
Captulo 2, Configuracin de un sitio de Dreamweaver, en la pgina 63
Captulo 3, Cmo crear y abrir documentos, en la pgina 73
P
A
R
T
E

I
17
INTRODUCCIN
Bienvenido a Dreamweaver
Macromedia Dreamweaver MX 2004 es un editor HTML profesional para disear, codificar y
desarrollar sitios, pginas y aplicaciones Web. Tanto si desea controlar manualmente el cdigo
HTML como si prefiere trabajar en un entorno de edicin visual, Dreamweaver le proporciona
tiles herramientas que mejorarn su experiencia de creacin Web.
Las funciones de edicin visual de Dreamweaver permiten crear pginas de forma rpida, sin
escribir una sola lnea de cdigo. Puede ver todos los elementos o activos del sitio y arrastrarlos
desde un panel fcil de usar directamente hasta un documento. Puede agilizar el flujo de trabajo
de desarrollo mediante la creacin y edicin de imgenes en Macromedia Fireworks o en otra
aplicacin de grficos y su posterior importacin directa a Dreamweaver, o bien aadir objetos
Macromedia Flash.
Dreamweaver tambin ofrece un entorno de codificacin con todas las funciones, que incluye
herramientas para la edicin de cdigo (tales como coloreado de cdigo y terminacin automtica
de etiquetas) y material de referencia sobre HTML, hojas de estilos en cascada (CSS), JavaScript,
ColdFusion Markup Language (CFML), Microsoft Active Server Pages (ASP) y JavaServer Pages
(JSP). La tecnologa Roundtrip HTML de Macromedia importa los documentos con cdigo
manual HTML sin modificar el formato del cdigo. Posteriormente, si lo desea, puede formatear
el cdigo con el estilo que prefiera.
Dreamweaver le permite crear aplicaciones Web dinmicas basadas en bases de datos empleando
tecnologas de servidor como CFML,ASP.NET, ASP, JSP y PHP.
Dreamweaver se puede personalizar totalmente. Puede crear sus propios objetos y comandos,
modificar mtodos abreviados de teclado e incluso escribir cdigo JavaScript para ampliar las
posibilidades que ofrece Dreamweaver con nuevos comportamientos, inspectores de propiedades
e informes de sitios.
Este captulo contiene las secciones siguientes:
Novedades de Dreamweaver MX 2004 en la pgina 18
Por dnde empezar en la pgina 20
Flujo de trabajo de Dreamweaver para la creacin de sitios Web en la pgina 23
Utilizacin de Dreamweaver con otras aplicaciones en la pgina 27
Dreamweaver y accesibilidad en la pgina 27
Gua de recursos de formacin de Dreamweaver en la pgina 28
Convenciones tipogrficas en la pgina 30
Recursos tecnolgicos HTML y Web en la pgina 30
18 Introduccin: Bienvenido a Dreamweaver
Novedades de Dreamweaver MX 2004
Dreamweaver MX 2004 contiene una nueva interfaz mejorada, junto con un mejor rendimiento
del producto. Tambin hay una gran variedad de funciones nuevas que mejoran el uso y ayudan a
crear pginas, tanto si trabaja en el entorno de diseo como si lo hace en el entorno de
codificacin.
Interfaz de desarrollo y diseo optimizada
La interfaz de Dreamweaver es ms accesible para ayudarle a mejorar la productividad y la calidad
del trabajo.
Las mejoras de la barra Insertar confieren a la barra Insertar un nuevo aspecto optimizado que
ocupa menos en el espacio de trabajo. Adems, se incluye la nueva categora Favoritos, que se
puede emplear para personalizar una barra Insertar con los objetos ms frecuentemente utilizados.
Para ms informacin, consulte Barra Insertar en la pgina 39.
Los comandos Copiar y Pegar de Microsoft Word y Microsoft Excel le permiten copiar y pegar
un documento de Microsoft Word o Excel directamente en Dreamweaver. Cuando se pega un
documento de Word o Excel, Dreamweaver conserva el formato y genera HTML de calidad. Para
ms informacin, consulte Cmo copiar y pegar texto de documentos de MS Office en
la pgina 290.
La respuesta visual de la edicin de tablas permite ver los efectos que las operaciones de cambio
de tamao de las columnas tendrn en las tablas. La respuesta visual tambin simplifica la
seleccin de elementos de tabla. Para ms informacin sobre cmo cambiar el tamao, consulte
Cambio de tamao de tablas, columnas y filas en la pgina 178. Para ms informacin acerca
del uso del modo de tablas expandidas para la seleccin de elementos, consulte Utilizacin del
modo de tablas expandidas para facilitar la edicin de tablas en la pgina 176.
La renovacin de la interfaz de usuario maximiza el espacio de trabajo utilizable, mostrando
ms claramente el contexto y el foco, a la vez que la hace ms lgica y accesible. Para ms
informacin sobre el objeto espacio de trabajo de Dreamweaver, consulte Espacio de trabajo de
Dreamweaver en la pgina 34.
La pgina de inicio permite acceder a los archivos utilizados recientemente, crear archivos nuevos
y acceder a los recursos de Dreamweaver. La pgina de inicio aparece cuando se inicia
Dreamweaver o cuando no se tiene abierto ningn documento. Para ms informacin sobre cmo
ocultar o mostrar la pgina de inicio, consulte Cmo ocultar y mostrar la pgina de inicio en
la pgina 59.
La opcin del escritorio guardado ofrece la posibilidad de que Dreamweaver vuelva a abrir los
documentos con los que estaba trabajando al reiniciar Dreamweaver. Para ms informacin sobre
cmo configurar esta opcin, consulte Configuracin de las preferencias generales para
Gracias a la compatibilidad total con Unicode, Dreamweaver en Windows admite todas las
codificaciones de texto con las que es compatible Internet Explorer. Puede utilizar casi cualquier
fuente de idioma instalada en el sistema en Dreamweaver, y Dreamweaver la procesar y guardar
adecuadamente. Para ms informacin sobre cmo configurar codificaciones de fuente, consulte
Configuracin de las preferencias de fuentes para la visualizacin de Dreamweaver en
la pgina 60.
Novedades de Dreamweaver MX 2004 19
El FTP seguro permite cifrar completamente todas las transferencias y evitar los accesos no
autorizados a sus datos, archivos, nombres de usuario y contraseas. Para ms informacin sobre
el establecimiento de una conexin remota mediante FTP, consulte Configuracin de una
carpeta remota en la pgina 69.
Diseo de pgina y entorno de diseo modernizados
Dreamweaver incluye las siguientes funciones mejoradas de CSS que ofrecen un modo ms
sofisticado para dar estilo y aadir interactividad a los diseos, adems de informacin para
mejorar la edicin visual.
La validacin dinmica entre navegadores comprueba automticamente la compatibilidad
entre navegadores del documento actual al guardarlo. El usuario especifica los navegadores que
desee y Dreamweaver comprueba que las pginas no utilicen etiquetas o construcciones CSS que
dichos navegadores no admitan. Para ms informacin, consulte Comprobacin de la
compatibilidad con los navegadores en la pgina 448.
La ficha CSS relevante muestra las reglas CSS que se aplican a la seleccin actual en vista de
cdigo o vista de diseo. Haga clic en cualquier regla para ver qu atributos especifica (estilo de
bordes, margen, relleno, tamao del texto, etc). Una marca especial le indica si se ha omitido un
atributo concreto y la edicin en contexto permite editar rpidamente reglas que se aplican al
momento en la vista de diseo. Para ms informacin, consulte Ficha Propiedades de CSS en
la pgina 288.
La visualizacin de diseo CSS simplifica enormemente el diseo de pginas en CSS. Puede
seleccionar con facilidad div y otros bloques de contenido en la vista Diseo para modificar sus
propiedades en la ficha Propiedades de CSS. Para ms informacin, consulte Captulo 7, Diseo
de pginas con CSS, en la pgina 151.
La presentacin de CSS mejorada implica que Dreamweaver puede presentar disposiciones y
diseos basados en CSS ms complicados y de forma ms precisa. La presentacin de CSS
mejorada permite realizar diseos ms sofisticados y utilizar las herramientas de diseo de
Dreamweaver para diversas manipulaciones visuales.
El panel mejorado Estilos CSS proporciona ms opciones para la edicin de estilos en el
documento actual. Ahora tambin puede aplicar estilos directamente desde el inspector de
propiedades de texto. Para ms informacin, consulte Utilizacin de estilos de hojas de estilos en
cascada en la pgina 299.
El inspector de propiedades de texto basado en CSS lista todos los estilos disponibles para su
uso en texto, e incluye una vista previa que muestra el aspecto que tendr el texto una vez se
aplique el estilo. Para ms informacin, consulte Inspector de propiedades y aplicacin de
formato a texto en la pgina 286.
Las propiedades de pgina basadas en CSS ofrecen un mayor control de las propiedades de la
pgina, como el aspecto de los encabezados y los vnculos, mediante modernas construcciones de
codificacin de CSS. Para ms informacin, consulte Configuracin de propiedades de la
pgina en la pgina 260.
La barra de herramientas de edicin de imgenes integrada permite llevar a cabo
manipulaciones bsicas en la imagen y editarla desde Dreamweaver mediante la tecnologa de
Macromedia Fireworks. Podr recortar, cambiar el tamao y volver a muestrear, entre otras
funciones, sin salir de Dreamweaver. Para ms informacin, consulte Edicin de imgenes en
Entorno de codificacin potente y abierto
Dreamweaver proporciona las siguientes nuevas funciones para codificadores, entre las que se
incluyen las mejoras en la vista Cdigo y la posibilidad de editar archivos sin crear un sitio de
Dreamweaver. Dreamweaver tambin incluye compatibilidad actual para las tecnologas de
servidor.
El inspector de etiquetas mejorado muestra una lista de las propiedades disponibles para la
seleccin actual, y permite llevar a cabo ediciones rpidas y de gran amplitud. Para ms
informacin, consulte Cambio de atributos con el inspector de etiquetas en la pgina 456.
La edicin de archivo sin sitio permite trabajar directamente en un servidor FTP o RDS sin
crear un sitio de Dreamweaver. Para ms informacin sobre cmo hacer que Dreamweaver
funcione en un servidor, vase Configuracin de Dreamweaver para que funcione sin definir un
sitio en la pgina 85. Para ms informacin sobre la configuracin de un sitio de Dreamweaver,
consulte Configuracin de un sitio de Dreamweaver nuevo en la pgina 65.
Los comportamientos del servidor PHP permiten crear un juego de pginas maestra/detalle y
pginas de autenticacin de usuarios. Para ms informacin, consulte Creacin de pginas
maestra-detalle (PHP) en la pgina 747 y Creacin de pginas que restrinjan el acceso al sitio
(PHP) en la pgina 766.
La admisin mejorada para controles de formulario ASP.NET ofrece nuevas y mejoradas
maneras, entre las que se incluyen nuevos inspectores de propiedades, de crear y manipular
formularios Web ASP.NET en la vista Diseo. Para ms informacin, consulte Captulo 42,
Creacin rpida de aplicaciones ASP y JSP, en la pgina 729.
El men contextual de la vista de cdigo permite aplicar rpidamente cambios de formato al
cdigo seleccionado. Para ms informacin, consulte Cambios rpidos en una seleccin de
cdigo en la pgina 443.
Por dnde empezar
La documentacin de Dreamweaver contiene informacin para usuarios de distintos niveles. Para
sacarle el mximo provecho a la documentacin, comience leyendo las partes que sean ms
relevantes para su nivel.
Para ms informacin sobre los recursos de Dreamweaver, consulte Gua de recursos de
formacin de Dreamweaver en la pgina 28.
Principiantes en el diseo Web
Si usted es un principiante en el diseo Web, esta seccin le informar de las secciones de la
documentacin de Dreamweaver ms adecuadas para su nivel.
Para principiantes en el diseo Web:
1 Comience por leer los tutoriales para la creacin de un sitio esttico en el apartado Primeros
pasos de la Ayuda.
2 En el apartado Utilizacin de Dreamweaver de la Ayuda (Ayuda > Utilizacin de
Dreamweaver), vase el Captulo 1, Exploracin del espacio de trabajo, en la pgina 33, el
Captulo 2, Configuracin de un sitio de Dreamweaver, en la pgina 63, Captulo 4,
Administracin de archivos, en la pgina 81 y el Captulo 3, Cmo crear y abrir
documentos, en la pgina 73.
Por dnde empezar 21
3 Para aprender sobre el diseo de las pginas, vase el Captulo 9, Diseo de pginas en el modo
de diseo, en la pgina 189.
4 Para obtener informacin sobre la aplicacin de formato al texto y la insercin de imgenes en
las pginas, vase el Captulo 13, Insercin y formato de texto, en la pgina 281 y el
Captulo 14, Insercin de imgenes, en la pgina 311.
5 Eso es todo lo que necesita para comenzar a crear sitios Web de gran calidad. Cuando est
preparado para aprender a utilizar herramientas ms avanzadas, podr continuar con el resto de
los captulos sobre pginas estticas en el apartado Utilizacin de Dreamweaver de la Ayuda. Es
aconsejable que lea los captulos de pginas dinmicas slo cuando se haya familiarizado con la
creacin de pginas Web.
Diseadores de sitios Web con experiencia
Si usted es un diseador de sitios Web con experiencia, esta seccin le informar de las secciones
de la documentacin de Dreamweaver ms adecuadas para su nivel. Existen dos mtodos
distintos: uno para diseadores sin experiencia en Dreamweaver y otro para diseadores que estn
familiarizados con Dreamweaver pero que desean obtener ms informacin sobre la creacin de
pginas dinmicas.
Para diseadores de sitios Web con experiencia que empiezan a usar Dreamweaver:
1 Comience por leer los tutoriales para la creacin de un sitio esttico en el apartado Primeros
pasos de la Ayuda.
2 En el apartado Utilizacin de Dreamweaver de la Ayuda, consulte el Captulo 1, Exploracin
del espacio de trabajo, en la pgina 33 para ms informacin sobre la interfaz de usuario de
Dreamweaver.
3 Aunque probablemente ya conoce una buena parte del material del Captulo 2, Configuracin
de un sitio de Dreamweaver, en la pgina 63 y el Captulo 4, Administracin de archivos, en
la pgina 81, puede hojear estos captulos para ver cmo se aplican en Dreamweaver estos
conceptos. Preste especial atencin a las secciones que tratan sobre la configuracin de un sitio
de Dreamweaver.
4 Para informacin til y detallada sobre el uso de Dreamweaver para crear pginas HTML
bsicas, consulte el Captulo 13, Insercin y formato de texto, en la pgina 281 y Captulo 14,
Insercin de imgenes, en la pgina 311.
5 Para informacin sobre la codificacin en Dreamweaver, vase Configuracin del entorno de
codificacin en la pgina 413, Codificacin en Dreamweaver en la pgina 427,
Optimizacin y depuracin del cdigo en la pgina 447 y Edicin de cdigo en la vista
Diseo en la pgina 455.
6 Lea la introduccin que aparece al comienzo de los dems captulos del apartado Utilizacin de
Dreamweaver de la Ayuda para determinar si le interesan los temas que se abordan en ellos.
Para diseadores de sitios Web con experiencia, familiarizados con Dreamweaver, que
deseen obtener informacin sobre la creacin de pginas dinmicas:
1 Comience leyendo Aspectos bsicos de las aplicaciones Web y el Tutorial: Desarrollo de una
aplicacin Web en el apartado Primeros pasos de la Ayuda.
Dreamweaver y, a continuacin, lea el apartado Optimizacin del espacio de trabajo para
desarrollo visual en la pgina 515.
3 Familiarcese con el flujo de trabajo de Dreamweaver en las pginas dinmicas leyendo Flujo
de trabajo para el diseo de pginas dinmicas en la pgina 525.
4 Configure un servidor Web y un servidor de aplicaciones. (Vase Captulo 23, Configuracin
de una aplicacin Web, en la pgina 467.)
5 Conecte con una base de datos. (Vase Conexin con una base de datos en la pgina 475.)
6 Lea la introduccin que aparece al comienzo de cada uno de los captulos del apartado
Utilizacin de Dreamweaver de la Ayuda para determinar si le interesan los temas que se
abordan en ellos.
7 Si est interesado en la personalizacin manual de Dreamweaver, lea Personalizacin de
Dreamweaver en el Centro de soporte de Macromedia en www.macromedia.com/go/
customizing_dreamweaver_es. Si desea escribir extensiones para Dreamweaver, consulte el
apartado Ampliacin de Dreamweaver de la Ayuda.
Usuarios con experiencia en codificacin manual
Si usted es un usuario con experiencia en codificacin manual, esta seccin le informar de las
secciones de la documentacin de Dreamweaver ms adecuadas para su nivel.
Para usuarios con experiencia en codificacin manual:
1 Comience leyendo el Tutorial: Edicin del cdigo en el apartado Primeros pasos de la Ayuda.
Dreamweaver.
conceptos. Preste especial atencin a las secciones sobre la configuracin de un sitio de
Dreamweaver.
4 Encontrar ms informacin sobre codificacin con Dreamweaver en Captulo 19,
Configuracin del entorno de codificacin, en la pgina 413, Captulo 20, Codificacin en
Dreamweaver, en la pgina 427, Captulo 21, Optimizacin y depuracin del cdigo, en
la pgina 447 y Captulo 22, Edicin de cdigo en la vista Diseo, en la pgina 455.
abordan en ellos.
Diseadores de aplicaciones Web
Si es un diseador de aplicaciones Web con experiencia, esta seccin le informar de las secciones
de la documentacin de Dreamweaver ms adecuadas para su nivel. Hay dos mtodos distintos,
dependiendo de si ha usado Dreamweaver con anterioridad.
Para los diseadores de aplicaciones Web que no hayan utilizado Dreamweaver:
1 Comience con una lectura rpida del apartado Primeros pasos de la Ayuda para familiarizarse
con los aspectos bsicos del uso de Dreamweaver.
Dreamweaver.
Flujo de trabajo de Dreamweaver para la creacin de sitios Web 23
conceptos. Preste especial atencin a las secciones sobre la configuracin de un sitio de
Dreamweaver.
4 Configure un servidor Web y un servidor de aplicaciones utilizando Dreamweaver. (Vase
Captulo 23, Configuracin de una aplicacin Web, en la pgina 467.)
5 Conecte con una base de datos. (Vase Conexin con una base de datos en la pgina 475.)
abordan en ellos.
Para diseadores de aplicaciones Web con experiencia que hayan utilizado Dreamweaver:
1 Para empezar, consulte el Novedades de Dreamweaver MX 2004 en la pgina 18.
2 En el apartado Utilizacin de Dreamweaver de la Ayuda, lea el Captulo 1, Exploracin del
espacio de trabajo, en la pgina 33 para ms informacin sobre nuevos aspectos de la interfaz
de usuario de Dreamweaver.
3 Si est interesado en la personalizacin manual de Dreamweaver, lea Personalizacin de
Dreamweaver en el Centro de soporte de Macromedia en www.macromedia.com/go/
customizing_dreamweaver_es. Si desea escribir extensiones para Dreamweaver, consulte el
apartado Ampliacin de Dreamweaver de la Ayuda.
Flujo de trabajo de Dreamweaver para la creacin de sitios Web
Existen muchos mtodos distintos para crear un sitio Web. El flujo de trabajo que se presenta en
esta documentacin comienza por la definicin 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
continuacin, debe disear el aspecto y el funcionamiento del sitio. Una vez que el diseo est
finalizado, debe crear el sitio y codificar las pginas, aadiendo el contenido y la interactividad; a
continuacin, vincular las pginas y comprobar si el sitio funciona y si cumple los objetivos para
los que ha sido diseado. Adems, si lo desea, puede incluir pginas dinmicas. Para terminar el
ciclo, publicar el sitio en un servidor. Muchos ingenieros de desarrollo tambin programan
operaciones de mantenimiento peridico para asegurarse de que el sitio contina estando
actualizado y operativo.
Planificacin del sitio
Planificar y organizar cuidadosamente el sitio desde el primer momento puede ayudar a ahorrar
tiempo ms adelante. La organizacin del sitio no slo implica la determinacin de los archivos
que van a incluirse, sino que tambin requiere un examen de las necesidades del sitio, el perfil de
la audiencia y sus objetivos. Adems, deben tenerse en cuenta requisitos tcnicos tales como el
acceso de los usuarios, o limitaciones del navegador, los plug-ins o la descarga de archivos.
Una vez que haya organizado la informacin y determinado una estructura, podr comenzar a
crear el sitio.
Utilice el panel Archivos de Dreamweaver para establecer la estructura organizativa del sitio. En
el panel Archivos puede aadir, borrar y cambiar el nombre de los archivos y carpetas
fcilmente con el fin de modificar la organizacin segn resulte necesario. (Vase Captulo 2,
Configuracin de un sitio de Dreamweaver, en la pgina 63 y Captulo 4, Administracin
de archivos, en la pgina 81.)
Puede empezar por crear pginas simples que ms adelante convertir en diseos ms
complejos. Cree pginas vacas nuevas o pginas basadas en diseos predefinidos. (Vase
Captulo 3, Cmo crear y abrir documentos, en la pgina 73.)
Si trabaja en un equipo de desarrollo Web, es posible que tambin le interesen estos temas:
Configurar un sistema de forma que los miembros del equipo no puedan sobrescribir los
archivos. (Vase Desproteccin y proteccin de archivos en la pgina 101.)
Utilizar Design Notes para comunicarse con los miembros del equipo Web. (Vase
Almacenamiento de informacin sobre archivos en Design Notes en la pgina 111.)
Administracin de los archivos del sitio
Los paneles Archivos y Activos de Dreamweaver facilitan la administracin de los archivos del
sitio.
En el panel Archivos de Dreamweaver encontrar numerosas herramientas que le ayudarn a
administrar el sitio, transferir archivos desde y hacia un servidor remoto, configurar un proceso
de desproteccin/proteccin que evite que se sobrescriban archivos y sincronizar los archivos de
los sitios local y remoto. (Vase Administracin de archivos en la pgina 81.)
El panel Activos permite organizar fcilmente los activos de un sitio. A continuacin, se
pueden arrastrar directamente desde el panel Activos hasta un documento de Dreamweaver.
(Vase Captulo 5, Administracin de activos y bibliotecas, en la pgina 119.)
Puede utilizar Dreamweaver para administrar diversos aspectos de sus sitios de Contribute.
(Vase Captulo 6, Administracin de sitios de Contribute con Dreamweaver, en la pgina
137.)
Diseo de las pginas Web
Dreamweaver le ofrece flexibilidad para crear pginas de muestra y trabajar en el diseo definitivo
de sus pginas. Elija el diseo ms apropiado, o combine las opciones de diseo de Dreamweaver
para definir el aspecto de su sitio.
Puede utilizar capas o estilos de posicin CSS de Dreamweaver para crear su diseo. (Vase
Captulo 7, Diseo de pginas con CSS, en la pgina 151.)
Las herramientas de tabla y el modo de diseo de Dreamweaver permiten disear rpidamente
pginas Web y, posteriormente, reorganizar la estructura de las pginas. (Vase Captulo 8,
Presentacin de contenido en tablas, en la pgina 169 y Captulo 9, Diseo de pginas en el
modo de diseo, en la pgina 189.)
Para mostrar varios documentos de forma simultnea en un navegador, pueden utilizarse
marcos para su organizacin. (Vase Captulo 10, Utilizacin de marcos, en la pgina 205.)
Las plantillas de Dreamweaver le permiten aplicar fcilmente contenidos y diseos de pgina
reutilizables a su sitio. Puede crear pginas nuevas basadas en una plantilla de Dreamweaver y
actualizar su diseo de forma automtica cuando cambie la plantilla. (Vase Captulo 11,
Administracin de plantillas, en la pgina 221.)
Flujo de trabajo de Dreamweaver para la creacin de sitios Web 25
Adicin de contenido a las pginas
Mediante Dreamweaver, podr aadir fcilmente a las pginas Web una gran variedad de
contenidos. Aada activos y elementos de diseo, como texto, imgenes, colores, pelculas, sonido
y otros elementos multimedia.
Las funciones de creacin de pginas de Dreamweaver le permiten especificar propiedades de
la pgina Web tales como ttulos de pgina o imagen y color de fondo. Adems, Dreamweaver
le proporciona herramientas para optimizar el rendimiento de su sitio Web y probar las pginas
para asegurar la compatibilidad con distintos navegadores Web. (Vase Captulo 12,
Utilizacin de pginas, en la pgina 259.)
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. Tambin puede crear fcilmente sus propias CSS (Hojas de estilos en cascada,
Cascading Style Sheets). (Vase Captulo 13, Insercin y formato de texto, en la pgina 281.)
Inserte imgenes, incluidas imgenes de sustitucin, mapas de imgenes e imgenes por capas
de Fireworks y utilice las herramientas de alineacin para situar las imgenes en la pgina.
Tambin puede cambiar el tamao de las imgenes directamente en Dreamweaver. (Vase
Captulo 14, Insercin de imgenes, en la pgina 311 y Captulo 16, Utilizacin con otras
aplicaciones, en la pgina 351.)
Con Dreamweaver puede crear vnculos HTML estndar, incluidos vnculos de anclaje y
vnculos de correo electrnico, o establecer sistemas de navegacin grfica, como los mens de
salto y las barras de navegacin. (Vase Captulo 15, Establecimiento de vnculos y
navegacin, en la pgina 325.)
Inserte cualquier otro tipo de elementos multimedia en una pgina Web, como pelculas Flash,
Shockwave y QuickTime, sonido y applets. (Vase Captulo 17, Adicin de audio, vdeo y
elementos interactivos, en la pgina 365.)
Los comportamientos permiten realizar tareas en respuesta a eventos especficos como, por
ejemplo, resaltar un botn cuando el puntero pasa por encima de l, validar un formulario
cuando el usuario hace clic en el botn Enviar o abrir una segunda ventana del navegador
cuando la pgina principal ha terminado de cargarse. (Vase Captulo 18, Utilizacin de
comportamientos JavaScript, en la pgina 381.)
Codificacin manual
La codificacin manual de pginas Web es otro mtodo para crear las pginas. Dreamweaver
ofrece sencillas herramientas de edicin visual, pero tambin ofrece un entorno de codificacin
ms sofisticado. Puede utilizar el mtodo que prefiera, o una combinacin de ambos, para crear y
editar sus pginas.
Puede trabajar en un entorno de codificacin sin herramientas visuales; las herramientas de
codificacin le permiten crear y editar cdigo, asignarle un formato y comprobar que se ajusta
a determinadas normas. (Vase Captulo 19, Configuracin del entorno de codificacin, en
la pgina 413, Captulo 20, Codificacin en Dreamweaver, en la pgina 427 y Captulo 21,
Optimizacin y depuracin del cdigo, en la pgina 447.)
Tambin puede utilizar algunas herramientas de codificacin de Dreamweaver en la vista
Diseo, el entorno de diseo visual. (Vase Captulo 22, Edicin de cdigo en la vista
Diseo, en la pgina 455.)
Configuracin de una aplicacin Web
Muchos sitios Web contienen pginas dinmicas que permiten a los visitantes ver informacin
almacenada en bases de datos, y normalmente algunos de ellos pueden aadir nueva informacin
y editar informacin de estas bases de datos. Para crear este tipo de pginas, primero debe realizar
una serie de pasos preliminares.
Configure un servidor Web y un servidor de aplicaciones y, a continuacin, cree o modifique
un sitio de Dreamweaver. (Vase Captulo 23, Configuracin de una aplicacin Web, en
la pgina 467.)
Conecte con una base de datos. (Vase Conexin con una base de datos en la pgina 475).
Creacin de pginas dinmicas
En Dreamweaver se pueden definir diversas fuentes de contenido dinmico, incluidos juegos de
registros extrados de bases de datos, parmetros de formularios y componentes JavaBeans. Para
aadir el contenido dinmico a una pgina, basta con arrastrarlo a ella.
Puede definirse que los registros de la pgina aparezcan de uno en uno o en grupos, mostrar varias
pginas de registros, aadir vnculos especiales para pasar de una pgina de registros a la siguiente
(o a la anterior) y crear contadores para que los usuarios puedan llevar un control de los registros.
Si no est familiarizado con la creacin de aplicaciones Web en Dreamweaver, aprenda cmo
utilizar Dreamweaver para crear pginas dinmicas. (Vase Captulo 30, Optimizacin del
espacio de trabajo para desarrollo visual, en la pgina 515 y Captulo 31, Flujo de trabajo
para el diseo de pginas dinmicas, en la pgina 525.)
Defina y muestre el contenido dinmico de sus pginas. (Vase Captulo 32, Obtencin de
datos para la pgina, en la pgina 533, Captulo 33, Definicin de fuentes de contenido
dinmico, en la pgina 545, Captulo 34, Adicin de contenido dinmico a pginas Web, en
la pgina 565 y Captulo 35, Visualizacin de registros de la base de datos, en la pgina 575.)
Puede incorporar la lgica de aplicaciones o empresarial mediante tecnologas innovadoras,
como los componentes ColdFusion de Macromedia y los servicios Web. (Vase Captulo 36,
Utilizacin de componentes de ColdFusion, en la pgina 595 y Captulo 37, Utilizacin de
servicios Web (slo Windows), en la pgina 601.)
Si necesita ms flexibilidad, puede crear sus propios comportamientos de servidor y
formularios interactivos. (Vase Captulo 38, Adicin de comportamientos de servidor
personalizados, en la pgina 611 y Captulo 39, Creacin de formularios, en la pgina 631.)
Desarrollo rpido de aplicaciones
Dreamweaver ofrece algunas herramientas de desarrollo rpido de aplicaciones (RAD), como
comportamientos de servidor y objetos de aplicaciones, que permiten crear sofisticadas
aplicaciones Web sin necesidad de escribir el cdigo del lado del servidor.
Cree con rapidez pginas que realicen bsquedas y modifiquen bases de datos, y muestren los
resultados. Proporcione seguridad mediante la limitacin del acceso a las pginas. (Vase
Creacin rpida de aplicaciones de ColdFusion en la pgina 653, Creacin rpida de
aplicaciones ASP.NET en la pgina 699, Creacin rpida de aplicaciones ASP y JSP en
la pgina 729 y Creacin rpida de aplicaciones PHP en la pgina 747.)
Dreamweaver y accesibilidad 27
Utilizacin de Dreamweaver con otras aplicaciones
Dreamweaver facilita el proceso de diseo y desarrollo de pginas Web al permitirle trabajar con
otras aplicaciones. Para informacin sobre cmo trabajar con otras aplicaciones, como los
navegadores, los editores HTML, los editores de imgenes y las herramientas de animacin,
vanse los temas siguientes:
Para informacin sobre el uso de Dreamweaver con otros editores HTML, como HomeSite o
BBEdit, vase Utilizacin de un editor de HTML externo con Dreamweaver en
la pgina 424.
Puede especificar sus navegadores preferidos para previsualizar el sitio. (Vase Vista previa y
comprobacin de pginas en los navegadores en la pgina 277.)
Puede iniciar un editor de imgenes externo, como Macromedia Fireworks o Adobe
Photoshop, desde Dreamweaver. (Vase Utilizacin de un editor de imgenes externo en
la pgina 322.)
Puede configurar Dreamweaver para que inicie un editor distinto para cada tipo de archivo.
(Vase Inicio de un editor externo de archivos multimedia en la pgina 369.)
Para ms informacin sobre cmo aadir interactividad al sitio mediante pelculas Macromedia
Flash, vase Insercin y modificacin de un objeto de botn Flash en la pgina 371,
Insercin de un objeto de texto Flash en la pgina 373 o Descarga e instalacin de
elementos Flash en la pgina 374.
Para aprender a aadir animacin al sitio mediante pelculas Macromedia Shockwave, vase
Insercin de pelculas Shockwave en la pgina 376.
Para informacin sobre el uso de ColdFusion, vase la ayuda de ColdFusion en Dreamweaver
(Ayuda > Utilizacin de ColdFusion).
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 grficos, los accesos directos del teclado y el uso
de colores de pantalla con alto contraste, entre otros.
Nota: para ms informacin 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
Seccin 508 de la Ley federal de insercin (Federal Rehabilitation Act) (www.section508.gov).
Dreamweaver contiene herramientas que dotan al producto de accesibilidad y herramientas que le
ayudan a crear contenido accesible:
Utilizacin de las funciones de accesibilidad de Dreamweaver Para diseadores Web
usuarios de Dreamweaver que necesiten utilizar funciones de accesibilidad, Dreamweaver ofrece
lectores de pantalla, navegacin mediante el teclado y funciones de accesibilidad del sistema
operativo.
Para ms informacin, consulte el Utilizacin de las funciones de accesibilidad de Dreamweaver
en la pgina 52.
Creacin de sitios Web accesibles Para diseadores Web usuarios de Dreamweaver que
necesiten crear contenido accesible, Dreamweaver ayuda a crear pginas accesibles que incluyen
contenido til para lectores de pantalla y que cumplen las directrices gubernamentales.
Dreamweaver proporciona cuadros de dilogo que le permiten introducir atributos de
accesibilidad al insertar elementos de pgina (vase Optimizacin del espacio de trabajo para el
diseo de pginas accesibles en la pgina 56). Por ejemplo, el cuadro de dilogo para la
accesibilidad de imgenes le recuerda que aada texto equivalente para los grficos. De esta forma,
cuando la imagen aparezca en una pgina para un usuario con discapacidades visuales, el lector de
pantalla leer la descripcin de la imagen.
Dreamweaver tambin incluye pginas Web de muestra pensadas con fines de accesibilidad (vase
Creacin de un documento basado en un archivo de diseo de Dreamweaver en la pgina 74) y
un informe de accesibilidad que puede ejecutar para probar si sus pginas o sitios siguen las
directrices de accesibilidad de la Seccin 508 (vase Comprobacin del sitio en la pgina 115).
Nota: recuerde que ninguna herramienta de creacin puede automatizar el proceso de desarrollo.
Para disear sitios Web accesibles deber comprender cules son los requisitos de accesibilidad y
tomar numerosas decisiones subjetivas sobre cmo los usuarios con discapacidades interactan con
las pginas Web. La mejor forma de garantizar que un sitio Web sea accesible consiste en realizar
una planificacin, un desarrollo, una comprobacin y una evaluacin deliberadas.
Funcin de validacin de la accesibilidad de Dreamweaver
La funcin de validacin de la accesibilidad de Dreamweaver MX utiliza tecnologa de UsableNet.
UsableNet es una empresa lder en el desarrollo de software fcil de utilizar para automatizar la
comprobacin y la reparacin de problemas de usabilidad y accesibilidad. Para obtener ms ayuda
con la comprobacin de la accesibilidad, pruebe LIFT for Macromedia Dreamweaver de
UsableNet, una solucin completa para desarrollar sitios Web utilizables y accesibles. Lift for
Macromedia Dreamweaver de UsableNet incluye asistentes para tablas, formularios e imgenes
complejas, un editor de ALT global, informes personalizables y un nuevo modo de supervisin
activo que asegura la accesibilidad al contenido a medida que se escriben las pginas. Solicite una
versin de demostracin de Lift for Macromedia Dreamweaver en www.usablenet.com
Gua de recursos de formacin de Dreamweaver
Dreamweaver incluye diversos recursos para ayudarle a aprender rpidamente el funcionamiento
del programa y a dominar la creacin de sitios y pginas Web:
Sistemas de ayuda de Dreamweaver en la pgina 28
Recursos del sitio Web de Macromedia en la pgina 29
Manuales y formacin adicionales en la pgina 29
Para sacar el mximo provecho de los recursos de Dreamweaver, vase Por dnde empezar en
la pgina 20.
Nota: para obtener una lista de recursos HTML y Web, vase Recursos tecnolgicos HTML y
Web en la pgina 30.
Sistemas de ayuda de Dreamweaver
Para acceder a los sistemas de ayuda de Dreamweaver, utilice el men Ayuda. La Ayuda de
Dreamweaver aparece en el visor de la ayuda de su sistema operativo: Microsoft HTML Help
(Windows) o Apple Help (Macintosh).
La ayuda de Dreamweaver incluye los siguientes sistemas de ayuda:
Gua de recursos de formacin de Dreamweaver 29
El apartado Primeros pasos de la Ayuda se ha diseado para conducirle por el proceso de
creacin de un sitio Web sencillo, pero funcional, utilizando Dreamweaver. Va dirigido a usuarios
que han creado pginas Web pero no estn familiarizados con determinados aspectos de
Dreamweaver. Contiene tutoriales sobre la creacin y edicin de pginas estticas sencillas,
edicin manual de cdigo y creacin de aplicaciones Web dinmicas. Esta gua se proporciona
como un manual impreso, como parte del sistema de ayuda y como un archivo PDF.
El apartado Utilizacin de Dreamweaver de la Ayuda proporciona informacin completa sobre
todas las funciones de Dreamweaver, optimizada para su uso en lnea.
El apartado Ampliacin de Dreamweaver de la Ayuda ofrece informacin sobre el modelo de
objeto de documento de Dreamweaver.
El apartado Referencia API de Dreamweaver de la Ayuda ofrece informacin sobre las API
(interfaces de programacin de aplicacin) que permiten que los desarrolladores de JavaScript y C
creen extensiones para Dreamweaver.
Temas relacionados
Manuales y formacin adicionales en la pgina 29
Recursos del sitio Web de Macromedia
El sitio Web de Macromedia contiene los siguientes recursos como ayuda a los usuarios de
Dreamweaver:
El sitio Web del Centro de soporte de Dreamweaver le ayuda a sacar el mximo partido de
Dreamweaver. El sitio Web del Centro de soporte de Dreamweaver en www.macromedia.com/go/
dreamweaver_support_es/ se actualiza de forma peridica con la informacin ms reciente sobre
Dreamweaver, as como con sugerencias de usuarios expertos, ejemplos, consejos, actualizaciones
e informacin sobre temas avanzados. Visite este sitio Web con frecuencia para conocer las
ltimas noticias sobre Dreamweaver y aprender a sacar el mximo provecho del programa.
Centro de desarrolladores de Macromedia en www.macromedia.com/go/developer_es/
proporciona herramientas y tutoriales, entre otras cosas, para todos los productos Macromedia.
Los foros en lnea de Dreamweaver le permiten intercambiar ideas sobre aspectos tcnicos y
compartir consejos tiles con otros usuarios de Dreamweaver. Si desea informacin sobre cmo
acceder a los foros consulte el sitio Web de Macromedia en www.macromedia.com/go/
dreamweaver_newsgroup.
Encontrar grficos que describen los mtodos abreviados de teclado en la configuracin
predeterminada de Dreamweaver en el sitio Web de Macromedia en www.macromedia.com/go/
dreamweaver_mx_shortcuts.
Temas relacionados
Manuales y formacin adicionales
Puede utilizar manuales y formacin adicionales para mejorar su dominio de Dreamweaver;
tambin puede encontrar documentacin de Dreamweaver en formato PDF e impreso en lnea:
Los manuales de Macromedia Press permiten mejorar sus conocimientos de Dreamweaver.
Consulte los ltimos manuales escritos por expertos en el sitio Web de Macromedia en
www.macromedia.com/go/dw2004_help_mmp.
Formacin y certificacin de Macromedia Dreamweaver contiene ejercicios prcticos y
situaciones del mundo real. Elija entre formacin con profesor o en lnea, o combine ambas
posibilidades para crear la ruta de aprendizaje que le resulte ms eficaz. Aprenda ms en el sitio
Web de Macromedia en www.macromedia.com/go/dreamweaver_training_es.
Los PDF de Dreamweaver, disponibles en el CD del producto, constituyen un juego completo
de documentacin de Dreamweaver. Algunos temas de referencia no se incluyen en la versin
PDF de Utilizacin de Dreamweaver; para ms informacin sobre ellos, consulte el apartado
Utilizacin de Dreamweaver de la Ayuda.
Los manuales de Dreamweaver, que no se proporcionan con el producto, estn disponibles para
su compra en lnea. Para adquirir copias impresas de la documentacin de Dreamweaver, vase el
sitio Web de Macromedia en www.macromedia.com/go/books_and_training/.
Temas relacionados
Recursos del sitio Web de Macromedia en la pgina 29
Convenciones tipogrficas
En esta gua se utilizan las convenciones tipogrficas siguientes:
Los elementos de los mens se muestran en este formato: nombre del men > nombre del
elemento del men. Los elementos de los submens se muestran en este formato: nombre del
men > nombre del submen > nombre del elemento del men.
La fuente de cdigo indica nombres de etiquetas y atributos HTML, as como el texto literal
empleado en los ejemplos.
La fuente de cdigo en cursiva indica elementos reemplazables (tambin denominados
metasmbolos) en el cdigo.
El texto Roman en negrita permite distinguir el texto que debe introducirse literalmente.
Para una lista completa de recursos de Dreamweaver, vase Gua de recursos de formacin de
Recursos tecnolgicos HTML y Web
A continuacin se indican algunos recursos tiles disponibles en la Web:
Nota: para obtener una lista de recursos de Dreamweaver, vase Gua de recursos de formacin de
La especificacin de hojas de estilos en cascada de nivel 1 (CSS1) (www.w3.org/TR/REC-
CSS1) y la especificacin de nivel 2 (CSS2) (www.w3.org/TR/REC-CSS2/) son las
especificaciones oficiales para hojas de estilos del World Wide Web Consortium.
La especificacin HTML 4.01 (www.w3.org/TR/REC-html40/) es la especificacin 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.
Recursos tecnolgicos HTML y Web 31
La especificacin XHTML 1.0( www.w3.org/TR/xhtml1/) es la especificacin oficial para
XHTML (Lenguaje de formato de hipertexto ampliable).
El sitio de OReilly XML.com (www.xml.com/) proporciona informacin, tutoriales y sugerencias
sobre XML (Lenguaje de formato ampliable) y sobre otras tecnologas Web.
Las pginas de introduccin a Microsoft ASP (http://msdn.microsoft.com/workshop/server/
asp/ASPover.asp) proporcionan informacin sobre Active Server Pages (ASP).
La pgina Microsoft ASP.NET (www.asp.net/) proporciona informacin sobre ASP.NET.
La pgina Sun JSP (http://java.sun.com/products/jsp/) proporciona informacin sobre
JavaServer Pages (JSP).
El sitio Web de PHP (www.php.net/) proporciona informacin sobre PHP.
El sitio Web de MySQL (www.mysql.com/) proporciona informacin sobre MySQL.
La tabla de entidades (www.bbsinc.com/iso8859.html) ofrece una relacin de los nombres de
entidades empleados en ISO 8859-1 (Latin-1).
La pgina del producto Macromedia ColdFusion (www.macromedia.com/go/coldfusion/)
proporciona informacin sobre ColdFusion.
La pgina del producto Macromedia JRun Server (www.macromedia.com/software/jrun/)
ofrece informacin sobre el servidor de aplicaciones JRun Java.
La pgina de IBM WebSphere (www.ibm.com/software/webservers/appserv/) proporciona
informacin sobre el servidor de aplicaciones WebSphere.
La pgina del producto Sun ONE (www.Chilisoft.com/products/) ofrece informacin sobre el
servidor de aplicaciones Sun ONE ASP.
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 (OReilly &
Associates), proporciona informacin sobre todas las funciones, objetos, mtodos, 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, documentacin, libros e incluso
contratacin de programadores.
El sitio de Common Gateway Interface (http://hoohoo.ncsa.uiuc.edu/cgi/) incluye una
introduccin a CGI.
33
CAPTULO 1
Exploracin del espacio de trabajo
Para sacar el mximo provecho de Macromedia Dreamweaver MX 2004, deber conocer cules
son los conceptos que subyacen al rea de trabajo de Dreamweaver y cmo seleccionar opciones,
utilizar inspectores y paneles y establecer las preferencias que mejor se adapten a su forma de
trabajar.
Este captulo contiene los siguientes temas:
Espacio de trabajo de Dreamweaver en la pgina 34
Utilizacin de la ventana de documento en la pgina 42
Utilizacin de barras de herramientas, inspectores y mens contextuales en la pgina 44
Utilizacin de paneles y grupos de paneles en la pgina 50
Utilizacin de las funciones de accesibilidad de Dreamweaver en la pgina 52
Optimizacin del espacio de trabajo para el diseo de pginas accesibles en la pgina 56
Utilizacin de guas visuales en Dreamweaver en la pgina 57
Aspectos bsicos de personalizacin de Dreamweaver en la pgina 58
Temas relacionados
Optimizacin del espacio de trabajo para desarrollo visual en la pgina 515
34 Captulo 1: Exploracin del espacio de trabajo
Espacio de trabajo de Dreamweaver
El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los
objetos. Adems, coloca muchas de las operaciones ms frecuentes en barras de herramientas para
que pueda realizar cambios en los documentos rpidamente.
Diseo del espacio de trabajo
En Windows, Dreamweaver proporciona un diseo integrado en una nica ventana. En el espacio
de trabajo integrado, todas las ventanas y paneles estn integrados en una nica ventana de la
aplicacin de mayor tamao.
Nota: el espacio de trabajo de Windows tambin dispone de la opcin Codificador, que acopla los
grupos de paneles en la parte izquierda y muestra la ventana de documento en la vista Cdigo de
forma predeterminada. Para ms informacin, consulte Utilizacin del espacio de trabajo orientado
al codificador (slo en Windows) en la pgina 414. Para utilizar esta opcin, vase Seleccin del
diseo del espacio de trabajo (slo en Windows) en la pgina 59.
Panel de archivos Inspector de propiedades Seleccin de
etiqueta
Barra de herramientas de documento
Barra Insertar Ventana de documento
Grupos de paneles
Espacio de trabajo de Dreamweaver 35
En Macintosh, Dreamweaver proporciona un diseo flotante del espacio de trabajo, en el que
cada documento aparece en una ventana distinta. Los grupos de paneles aparecen apilados en
principio, pero pueden separarse en sus propias ventanas. Las ventanas se ajustan
automticamente, a los lados de la pantalla y en la ventana Documento, al arrastrarlas o cambiar
su tamao.
Temas relacionados
Elementos del espacio de trabajo de Dreamweaver en la pgina 35
Utilizacin de paneles y grupos de paneles en la pgina 50.
Elementos del espacio de trabajo de Dreamweaver
En esta seccin 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.
Ventana de documento
Barra de herramientas de documento
Selector de
etiquetas
Barra Insertar
Inspector de propiedades
Panel de archivos
Grupos de paneles
La pgina de inicio permite abrir un documento reciente o crear un documento nuevo. Desde la
pgina de inicio tambin puede profundizar sus conocimientos sobre Dreamweaver mediante una
visita guiada o un tutorial del producto.
La barra Insertar contiene botones para la insercin de diversos tipos de objetos, como
imgenes, tablas y capas, en un documento. Cada objeto es un fragmento de cdigo HTML que
le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla
haciendo clic en el botn Tabla de la barra Insertar. Si lo prefiere, puede insertar objetos
utilizando el men Insertar en lugar de la barra Insertar.
La barra de herramientas de documento contiene botones que proporcionan opciones para
diferentes vistas de la ventana de documento (como la vista Diseo y la vista Cdigo), diversas
opciones de visualizacin y algunas operaciones comunes como la obtencin de una vista previa
en un navegador.
La barra de herramientas Estndar (que no aparece en el diseo de espacio de trabajo
predeterminado) contiene botones para las operaciones ms habituales de los mens Archivo y
Edicin: Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para
mostrar la barra de herramientas Estndar, seleccione Ver > Barras de herramientas > Estndar.
La ventana de documento muestra el documento actual mientras lo est creando y editando.
El 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 diseo del espacio de trabajo del codificador.
El selector de etiquetas, que aparece en la barra de estado en la parte inferior de la ventana de
documento, muestra la jerarqua de etiquetas que rodean a la seleccin actual. Haga clic en
cualquier etiqueta de la jerarqua para seleccionar la etiqueta y todo su contenido.
Los grupos de paneles son conjuntos de paneles relacionados apilados bajo un encabezado
comn. Para ampliar un grupo de paneles, haga clic en la flecha de ampliacin situada a la
izquierda del nombre del grupo; para desacoplar un grupo de paneles, arrastre el punto de
sujecin situado en el borde izquierdo de la barra de ttulo del grupo.
El 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 tambin
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
Utilizacin de paneles y grupos de paneles en la pgina 50
Administracin de archivos y carpetas en el panel Archivos en la pgina 90
Ventana de documento
La ventana de documento muestra el documento actual. Puede elegir entre una de las vistas
siguientes:
La vista Diseo es un entorno de diseo para el diseo visual de la pgina, la edicin visual y el
desarrollo rpido de aplicaciones. En esta vista, Dreamweaver muestra una representacin visual
del documento completamente editable, similar a la que aparecera en un navegador. Puede
configurar la vista de diseo para que muestre el contenido dinmico mientras trabaja en el
documento (vase Visualizacin de live data en la vista de Diseo en la pgina 518).
La vista Cdigo es un entorno de codificacin manual para escribir y editar cdigo HTML,
JavaScript, cdigo de lenguaje de servidor, como por ejemplo PHP o ColdFusion Markup
Language (CFML) y otros tipos de cdigo. Para ms informacin, consulte el Captulo 20,
Codificacin en Dreamweaver, en la pgina 427.
Es posible ver el mismo documento en las dos vistas, Cdigo y Diseo, en una sola ventana de
documento.
Cuando la ventana de documento tiene una barra de ttulo, sta muestra el ttulo de la pgina y,
entre parntesis, el nombre y la ruta del archivo. Si se han realizado cambios que an no se han
guardado, despus del nombre del archivo Dreamweaver incluye un asterisco.
Cuando se maximiza la ventana de documento en el diseo integrado de espacio de trabajo (slo
Windows), no aparece la barra de ttulo; en este caso, el ttulo de la pgina y el nombre y la ruta
del archivo aparecen en la barra de ttulo de la ventana principal del espacio de trabajo.
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
Barra de herramientas Documento
La barra de herramientas Documento contiene botones que permiten alternar entre diferentes
vistas del documento rpidamente: vista Cdigo, vista Diseo y una vista dividida que muestra las
vistas Cdigo y Diseo.
La barra de herramientas contiene tambin algunos comandos y opciones relativos a la
visualizacin del documento y a su transferencia entre los sitios local y remoto.
En la barra de herramientas Documento, aparecen las siguientes opciones:
Mostrar vista de cdigo slo muestra la vista Cdigo en la ventana de documento.
Mostrar vistas de cdigo y diseo muestra la vista Cdigo en una parte de la ventana de
documento y la vista Diseo en la otra parte. Cuando seleccione esta vista combinada, se
encontrar disponible la opcin Vista de diseo encima del men Ver. Utilice esta opcin para
especificar qu vista debe aparecer en la parte superior de la ventana de documento.
Mostrar vista de cdigo
Mostrar vista de diseo
Ttulo del documento Actualizar vista de diseo
No hay errores de comprobacin de navegador
Ver opciones
Mostrar vistas de cdigo y diseo
Vista previa/Depurar en explorador
Administracin de archivos
Depuracin del servidor
Mostrar vista de diseo slo muestra la vista Diseo en la ventana de documento.
Depuracin del servidor muestra un informe que le ayudar a depurar la pgina de ColdFusion
actual. El informe contiene los errores de la pgina, si los hay.
Ttulo permite introducir un ttulo para el documento, que aparecer en la barra de ttulo del
navegador. Si el documento ya tiene ttulo, ste aparecer en dicho campo.
No hay errores de comprobacin de navegador permite comprobar la compatibilidad con
distintos navegadores.
Administracin de archivos muestra el men emergente Administracin 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 diseo actualiza la vista Diseo tras realizar cambios en la vista Cdigo. Los
cambios realizados en la vista Cdigo no aparecern de forma automtica en la vista Diseo hasta
que se efecten determinadas acciones, como guardar el archivo o hacer clic en este botn.
Ver opciones permite definir las opciones de las vistas Cdigo y Diseo, y establecer qu vista va
a aparecer en la parte superior de la ventana. Las opciones del men corresponden a la vista actual:
la vista Diseo, la vista Cdigo o ambas. Para informacin sobre las opciones de la vista Cdigo,
vase Configuracin de las preferencias de visualizacin en la pgina 415. Para informacin
sobre las opciones de la vista de diseo, vase Seleccin de elementos en la ventana de
documento en la pgina 268, Visualizacin y edicin del contenido de Head en la pgina 463
y Utilizacin de guas visuales en Dreamweaver en la pgina 57.
Temas relacionados
Visualizacin de barras de herramientas en la pgina 44
Barra de herramientas Estndar
La barra de herramientas Estndar contiene botones para las operaciones ms habituales de los
mens Archivo y Edicin: Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer
y Rehacer. Estos botones se utilizan del mismo modo que los comandos de men equivalentes.
Para ms informacin sobre operaciones como Abrir y Guardar, consulte el Captulo 3, Cmo
crear y abrir documentos, en la pgina 73.
Temas relacionados
Visualizacin de barras de herramientas en la pgina 44
Barra de estado
La barra de estado, situada en la parte inferior de la ventana de documento, proporciona
informacin adicional sobre el documento que est creando.
El selector de etiquetas muestra la jerarqua de etiquetas que rodea a la seleccin actual. Haga clic en
cualquier etiqueta de la jerarqua para seleccionar la etiqueta y todo su contenido. Haga clic en
<body> para seleccionar todo el cuerpo del documento. Para definir los atributos class o id para
una etiqueta en el selector de etiquetas, haga clic con el botn de derecho del ratn (Windows) o
mantenga presionada la tecla Control y haga clic (Macintosh) en la etiqueta y elija una clase o un
ID del men contextual.
El men emergente Tamao de ventana (que slo aparece en la vista Diseo) permite cambiar el
tamao de la ventana de documento para que adopte dimensiones predeterminadas o
personalizadas. Para ms informacin, consulte Cambio del tamao de la ventana de
documento en la pgina 43.
A la derecha del men emergente Tamao de ventana aparecen la estimacin del tamao del
documento y del tiempo de descarga de la pgina, incluidos todos los archivos dependientes,
como imgenes y otros archivos multimedia. Para ms informacin, consulte Configuracin de
las preferencias de tiempo de descarga y tamao en la pgina 279.
Temas relacionados
Configuracin de las preferencias de la barra de estado en la pgina 44
Barra Insertar
La barra Insertar contiene botones para la creacin e insercin de diversos tipos de objetos, como
tablas, capas e imgenes. Al pasar el puntero sobre un botn, aparece una descripcin de la
herramienta con el nombre del botn.
Los botones estn organizados en categoras, a las que puede cambiar en la parte izquierda de la
barra Insertar. Si el documento actual contiene cdigo de servidor, como los documentos ASP o
CFML, aparecen tambin otras categoras. Cuando se inicia Dreamweaver, se abre la ltima
categora con la que ha trabajado.
Nota: si prefiere ver las categoras como fichas en la parte superior de la barra Insertar, puede
cambiar el diseo de dicha barra (vase Configuracin de las preferencias de fuentes para la
visualizacin de Dreamweaver en la pgina 60).
Tamao del documento y tiempo de
descarga estimado
Selector de etiquetas Men emergente Tamao de ventana
Algunas categoras tienen botones con mens emergentes. Al seleccionar una opcin de un men
emergente, dicha opcin se convierte en la accin predeterminada del botn. Por ejemplo, si
selecciona Marcador de posicin de imagen en el men emergente del botn Imagen, la siguiente
vez que haga clic en el botn Imagen, Dreamweaver insertar un marcador de posicin de imagen.
Siempre que seleccione una nueva opcin del men emergente cambiar la accin predeterminada
del botn.
La barra Insertar est organizada en las categoras siguientes:
La categora Comn permite crear e insertar los objetos que se utilizan con ms frecuencia, como
las imgenes y las tablas.
La categora Diseo permite insertar tablas, etiquetas div, capas y marcos. Tambin puede elegir
entre las tres vistas de las tablas: Estndar (valor predeterminado), Tablas expandidas y Diseo. Si
se selecciona el modo de diseo, se pueden utilizar las herramientas de diseo de Dreamweaver:
Dibujar celda de diseo y Dibujar tabla de diseo.
La categora Formularios contiene botones que permiten crear formularios e insertar elementos
de formulario.
La categora Texto permite insertar diversas etiquetas de formato de texto y listas, como b, em, p,
h1 y ul.
La categora HTML permite insertar etiquetas HTML para las reglas horizontales, el contenido
de la seccin head, las tablas, los marcos y los scripts.
Las categoras de cdigo de servidor slo estn disponibles para las pginas que emplean un
lenguaje de servidor determinado, como ASP, ASP.NET, CFML Basic, CFML Flow, CFML
Advanced, JSP y PHP. Cada una de estas categoras contiene objetos de cdigo de servidor que
pueden insertarse en la vista Cdigo.
La categora Aplicacin permite insertar elementos dinmicos como juegos de registros, regiones
repetidas y grabar formularios de insercin y actualizacin.
La categora Elementos Flash permite insertar elementos Flash.
La categora Favoritos le permite agrupar y organizar los botones de la barra Insertar que utiliza
con ms frecuencia en un lugar comn.
Se puede modificar cualquier objeto de la barra Insertar o crear objetos nuevos (vase
Personalizacin de Dreamweaver en el Centro de soporte de Macromedia Dreamweaver en
www.macromedia.com/go/customizing_dreamweaver).
Temas relacionados
Utilizacin de la barra Insertar en la pgina 45
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 especfico en las etiquetas. Para buscar su
cdigo, vase Bsqueda y reemplazo de etiquetas y atributos en la pgina 441.
Validacin permite comprobar si existen errores de cdigo o de sintaxis. Para validar su cdigo,
vase Validacin de etiquetas en la pgina 451.
Revisin del navegador de destino permite probar el cdigo HTML en los documentos para
comprobar si hay alguna etiqueta o atributo que sean incompatibles con los navegadores de
destino. Para ejecutar una revisin del navegador de destino, vase Comprobacin de la
compatibilidad con los navegadores en la pgina 448.
Verificador de vnculos permite encontrar y arreglar vnculos rotos, externos y hurfanos. Para
ejecutar el verificador de vnculos, vase Comprobacin de vnculos rotos, externos y hurfanos
en la pgina 347.
Informes de sitios permite mejorar el flujo de trabajo y probar los atributos HTML del sitio. Los
informes de flujo de trabajo incluyen informacin sobre proteccin, sobre documentos
modificados recientemente sobre Design Notes; los informes HTML incluyen etiquetas de
fuentes anidadas combinables, la opcin de accesibilidad, texto alternativo que falta, etiquetas
anidadas repetidas, etiquetas vacas eliminables y documentos sin ttulo. Para ejecutar informes de
sitios, vase Comprobacin del sitio en la pgina 115.
Registro FTP permite ver toda la actividad de transferencia de archivos mediante FTP. Para ver el
registro FTP, vase Obtencin de archivos de un servidor remoto en la pgina 104 o
Colocacin de archivos en un servidor remoto en la pgina 106.
Depuracin del servidor permite ver informacin para depurar una aplicacin ColdFusion. Para
ver informacin de depuracin, vase Utilizacin del depurador de ColdFusion (slo Windows)
en la pgina 453.
Personalizacin 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 configuracin personalizada de un usuario afecte a la configuracin
personalizada de otro usuario. Para lograr este objetivo, la primera vez que ejecute Dreamweaver
en uno de los sistemas operativos multiusuario que reconoce, la aplicacin crear para usted
copias de diversos archivos de configuracin. Estos archivos de configuracin se almacenan en una
carpeta de su propiedad.
Por ejemplo, en Windows XP se almacenan en C:\Documents and Settings\nombre del
usuario\Application Data\Macromedia\Dreamweaver MX\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 MX/Configuration.
Nota: en sistemas operativos ms antiguos (Windows 98, Windows ME y Mac OS 9.x), todos los
usuarios comparten un mismo conjunto de archivos de configuracin de Dreamweaver aunque el
sistema operativo est configurado para mltiples usuarios.
Si reinstala o actualiza Dreamweaver, Dreamweaver crear automticamente copias de seguridad
de los archivos de configuracin de usuario existentes para que, en el caso de que haya
personalizado dichos archivos manualmente, contine teniendo acceso a los cambios realizados.
Temas relacionados
Aspectos bsicos de personalizacin de Dreamweaver
Utilizacin de la ventana de documento
La ventana de documento muestra el documento actual. Puede ver un documento en la vista
Diseo, la vista Cdigo o las vistas Cdigo y Diseo. La barra de estado de la ventana de
documento proporciona informacin sobre el documento actual.
Temas relacionados
Ventana de documento en la pgina 36
Barra de estado en la pgina 39
Cambio de vista en la ventana de documento
Puede ver un documento en la ventana de documento con la vista Cdigo, con la vista Diseo o
con ambas.
Para pasar de una vista a otra en la ventana de documento, siga uno de estos
procedimientos:
Utilice el men Ver:
Seleccione Ver > Cdigo.
Seleccione Ver > Diseo.
Seleccione Ver > Cdigo y diseo.
Utilice la barra de herramientas Documento:
Haga clic en el botn Mostrar vista de cdigo.
Haga clic en el botn Mostrar vistas de cdigo y diseo.
Haga clic en el botn Mostrar vista de diseo.
Para pasar de la vista Cdigo a la vista Diseo y viceversa:
Presione Control+tilde (~) (Windows) o Comando+comilla simple () (Macintosh).
Nota: si aparecen ambas vistas en la ventana de documento, este mtodo abreviado de teclado
permite pasar de una vista a otra.
Temas relacionados
Ventana de documento en la pgina 36
Utilizacin de la ventana de documento 43
Cambio del tamao de la ventana de documento
La barra de estado muestra las dimensiones actuales de la ventana de documento (en pxeles). Para
disear una pgina cuyo mejor aspecto se logra con un tamao especfico, puede ajustar la
ventana de documento con cualquiera de los tamaos predeterminados, editar dichos tamaos
predeterminados o crear nuevos tamaos.
Para establecer un tamao predeterminado para la ventana de documento:
Elija uno de los tamaos del men emergente Tamao 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 tamao.
El tamao de la ventana indicado corresponde a las dimensiones internas de la ventana del
navegador, sin bordes. El tamao del monitor figura entre parntesis. Por ejemplo, la opcin 536
x 196 (640 x 480, Predeterminado) es el tamao de ventana que se debe utilizar si los visitantes
van a hacer uso de Microsoft Internet Explorer o Netscape Navigator en su configuracin
predeterminada con un monitor de 640 x 480.
Sugerencia: si no desea asignar un tamao tan preciso, utilice los mtodos estndar de su sistema
operativo, como arrastrar la esquina inferior derecha de una ventana.
Para cambiar los valores que aparecen en el men emergente Tamao de ventana:
1 Elija Editar tamaos en el men emergente Tamao de ventana.
2 Haga clic en cualquiera de los valores de ancho o altura de la lista de tamaos de ventana y
escriba un valor nuevo.
Para hacer que la ventana de documento se ajuste slo a un ancho especfico (sin modificar la
altura), seleccione un valor de altura y elimnelo.
3 Haga clic en el cuadro de texto Descripcin para introducir texto descriptivo sobre un tamao
especfico.
4 Haga clic en Aceptar para guardar el cambio y regresar a la ventana de documento.
Para aadir un valor al men emergente Tamao de ventana:
1 Elija Editar tamaos en el men emergente Tamao 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 slo el Ancho o la Altura, sencillamente deje un campo vaco.
4 Haga clic en el campo Descripcin para introducir el texto descriptivo sobre el tamao aadido.
5 Haga clic en Aceptar para guardar el cambio y regresar a la ventana de documento.
Por ejemplo, puede escribir SVGA o PC estndar junto a la entrada para un monitor de 800 x
600 pxeles, y Mac 17 pulg. junto a la entrada correspondiente a un monitor de 832 x 624
pxeles. La mayora de los monitores se pueden ajustar a varias dimensiones de pxeles.
Configuracin de las preferencias de la barra de estado
Establezca las preferencias de la barra de estado utilizando al cuadro de dilogo Preferencias.
Para establecer las preferencias para la barra de estado:
1 Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).
Aparece el cuadro de dilogo Preferencias.
2 Seleccione Barra de estado en la lista Categora de la izquierda.
3 Establezca las opciones de preferencias
Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
4 Haga clic en Aceptar.
Temas relacionados
Barra de estado en la pgina 39
Utilizacin de barras de herramientas, inspectores y mens
contextuales
Dreamweaver contiene varias herramientas que permiten realizar cambios rpidamente mientras
se crea o edita un documento.
Las barras de herramientas Documento y Estndar 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 imgenes, mientras que el inspector de propiedades permite editar las propiedades de
dichos objetos.
Nota: tambin puede utilizar el inspector de etiquetas para ver y editar las propiedades (vase
Cambio de atributos con el inspector de etiquetas en la pgina 456). El inspector de etiquetas
permite ver y editar todos los atributos asociados con una etiqueta determinada, mientras que el
inspector de propiedades slo muestra los atributos ms habituales.
Los mens contextuales constituyen un mtodo alternativo a la utilizacin de la barra Insertar y el
inspector de propiedades en la creacin y edicin de objetos.
Visualizacin de barras de herramientas
Utilice las barras de herramientas Documento y Estndar para realizar operaciones relacionadas
con documentos y de edicin estndar. Si lo desea, puede seleccionar la opcin de mostrar las
barras de herramientas. La configuracin para mostrar u ocultar las barras de herramientas es
especfica de cada documento; la configuracin se aplica nicamente al documento actual.
Para mostrar u ocultar la barra de herramientas Documento, siga uno de estos
procedimientos:
Seleccione Ver > Barras de herramientas > Documento.
Haga clic con el botn derecho del ratn (Windows) o haga clic mientras presiona la tecla
Control (Macintosh) en la barra Insertar o en la barra de herramientas Documento o Estndar
y, a continuacin, seleccione Barra de herramientas Documento.
Utilizacin de barras de herramientas, inspectores y mens contextuales 45
Para mostrar u ocultar la barra de herramientas Estndar, siga uno de estos
procedimientos:
Seleccione Ver > Barras de herramientas > Estndar.
y, a continuacin, seleccione Barra de herramientas Estndar.
Temas relacionados
Barra de herramientas Documento en la pgina 37
Barra de herramientas Estndar en la pgina 38
Utilizacin de la barra Insertar
La barra Insertar contiene botones para crear e insertar objetos tales como tablas e imgenes. Los
botones estn organizados en categoras. Al pasar el puntero sobre un botn, aparece una
descripcin de la herramienta con el nombre del botn.
Temas relacionados
Barra Insertar en la pgina 39
Visualizacin de la barra Insertar y sus categoras y mens
correspondientes
Si lo desea, puede ocultar o mostrar y contraer o ampliar la barra Insertar. Tambin puede mostrar
las distintas categoras de la barra Insertar. Algunas categoras de la barra Insertar tienen botones
que constan de mens con comandos comunes.
Si prefiere ver las categoras como fichas en la parte superior de la barra Insertar, puede cambiar el
diseo de dicha barra.
Para ocultar o mostrar la barra Insertar, siga uno de estos procedimientos:
Seleccione Ventana > Insertar.
y, a continuacin, seleccione Barra Insertar.
Para mostrar los botones de una categora determinada:
Haga clic en la flecha del men desplegable situada junto al nombre de la categora, en el
extremo izquierdo de la barra Insertar y, a continuacin, seleccione otra categora en el men
emergente.
Para mostrar el men emergente de un botn:
Haga clic en la flecha abajo, situada junto al icono del botn.
Para mostrar las categoras de la barra Insertar en forma de fichas:
Haga clic en la flecha situada junto al nombre de categora en el extremo izquierdo de la barra
Insertar y, a continuacin, seleccione Mostrar como fichas.
La barra Insertar muestra las categoras como fichas en la parte superior.
Nota: es posible que tenga que hacer clic en la barra de ttulo de la barra Insertar para volver a abrirla.
Para mostrar las categoras de la barra Insertar en forma de men:
Control (Macintosh) en la barra Insertar y, a continuacin, seleccione Mostrar como mens.
La barra Insertar muestra las categoras en un men en lugar de mostrarlas en forma de fichas.
Temas relacionados
Personalizacin y utilizacin de la categora Favoritos en la barra Insertar en la pgina 47
Utilizacin de la barra Insertar para insertar objetos
La barra Insertar constituye un mtodo prctico para crear e insertar objetos.
Para insertar un objeto:
1 Seleccione la categora adecuada en el lado izquierdo de la barra Insertar.
2 Siga uno de estos procedimientos:
Haga clic en un botn de objeto o arrastre el icono correspondiente hasta la ventana de
documento.
Haga clic en la flecha de un botn y seleccione una opcin del men.
Dependiendo del objeto que se trate, aparecer un cuadro de dilogo de insercin de objeto, que
solicitar que se busque un archivo o se especifiquen los parmetros del objeto. O bien,
Dreamweaver puede insertar cdigo en el documento o abrir un panel o un editor de etiquetas
(vase Edicin de etiquetas mediante editores de etiquetas en la pgina 439) para especificar
informacin antes de insertar el cdigo.
Para algunos objetos no aparece ningn cuadro de dilogo si se inserta el objeto en vista Diseo,
pero aparece un editor de etiquetas si se utiliza la vista Cdigo. Con algunos objetos, al insertar el
objeto en vista Diseo, Dreamweaver cambia a la vista Cdigo antes de insertar el objeto.
Nota: algunos objetos, como anclajes con nombre, no aparecen cuando se abre la pgina en la
ventana de un navegador. Para mostrar iconos en la vista de diseo que marquen las ubicaciones de
dichos objetos invisibles, vase Visualizacin y ocultacin de elementos invisibles en
la pgina 269.
Para omitir el cuadro de dilogo de insercin de objetos e insertar un objeto marcador de
posicin vaco:
Haga clic con mientras presiona la tecla Control (Windows) u Opcin (Macintosh) en el
botn del objeto.
Por ejemplo, para insertar un marcador de posicin para una imagen sin especificar un archivo
de imagen, haga clic en el botn Imagen mientras presiona la tecla Control u Opcin.
Nota: este procedimiento no permite omitir todos los cuadros de dilogo de insercin de objetos.
Muchos objetos, incluidas barras de navegacin, capas, botones Flash y conjuntos de marcos, no
permiten insertar marcadores de posicin ni objetos con valores predeterminados.
Para modificar las preferencias de la barra Insertar:
El cuadro de dilogo Preferencias aparece y muestra la categora de preferencias General.
2 Desactive Mostrar dilogo al insertar objetos para suprimir cuadros de dilogo al insertar objetos
tales como imgenes, tablas, scripts y elementos de encabezado, o mantenga presionada la tecla
Control (Windows) o la tecla Opcin (Macintosh) mientras est creando el objeto.
Sugerencia: cuando se inserta un objeto con esta opcin desactivada, el objeto recibe valores de
atributo predeterminados. Despus de insertar el objeto, utilice el inspector de propiedades para
cambiar sus propiedades.
Temas relacionados
Visualizacin de la barra Insertar y sus categoras y mens correspondientes en la pgina 45
Personalizacin y utilizacin de la categora Favoritos en la barra Insertar
La categora Favoritos de la barra Insertar permite agrupar y organizar los botones ms utilizados
de la barra Insertar. Puede aadir, administrar y eliminar botones de la categora Favoritos.
Para aadir, eliminar o administrar elementos de la categora Favoritos:
1 Seleccione una categora en la barra Insertar.
2 Haga clic con el botn derecho del ratn (Windows) o haga clic mientras presiona la tecla
Control (Macintosh) en el rea donde aparecen los botones (no en el nombre de la categora) y,
a continuacin, seleccione Personalizar objetos.
Aparece el cuadro de dilogo Personalizar objetos favoritos.
3 Realice los cambios necesarios.
La categora Favoritos refleja los cambios realizados.
Sugerencia: si no se encuentra en la categora Favoritos, seleccinela para ver los cambios que
haya realizado.
Para insertar objetos mediante los botones de la categora Favoritos:
Seleccione la categora Favoritos en el lado izquierdo de la barra Insertar y, a continuacin, haga
clic en el botn correspondiente a un objeto que haya aadido a Favoritos.
Nota: La categora Favoritos no contiene ningn botn hasta que se personaliza y se aaden
objetos.
Temas relacionados
Visualizacin de la barra Insertar y sus categoras y mens correspondientes en la pgina 45
Utilizacin de la barra Insertar para insertar objetos en la pgina 46
Utilizacin del inspector de propiedades
El inspector de propiedades permite examinar y editar las propiedades ms comunes del elemento
de pgina seleccionado actualmente, como texto o un objeto insertado. El contenido del inspector
de propiedades es distinto en funcin del elemento seleccionado.
Nota: utilice el inspector de etiquetas para ver y editar todos los atributos asociados con una
propiedad de etiqueta determinada (vase Cambio de atributos con el inspector de etiquetas en
la pgina 456).
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. Tambin puede
convertirlo en un panel flotante en el espacio de trabajo. Para ms informacin sobre el
desplazamiento del inspector de propiedades, consulte Acoplamiento y desacoplamiento de
paneles y grupos de paneles en la pgina 51.
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 ampliacin, situada en la esquina inferior derecha del inspector de
propiedades.
Para ver las propiedades de un elemento de pgina:
Seleccione el elemento de pgina en la ventana de documento.
Nota: es posible que deba ampliar el inspector de propiedades para ver todas las propiedades del
elemento seleccionado.
Para cambiar las propiedades de un elemento de pgina:
1 Seleccione el elemento de pgina en la ventana de documento.
2 Cambie las propiedades que desee en el inspector de propiedades.
Nota: para informacin sobre propiedades especficas, seleccione un elemento en la ventana de
documento y, a continuacin, haga clic en el icono de ayuda, situado en la esquina superior
derecha del inspector de propiedades.
La mayora de los cambios realizados en las propiedades se aplicarn 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 edicin de propiedades.
Presione Intro (Windows) o Retorno (Macintosh).
Presione el tabulador para cambiar a otra propiedad.
Utilizacin de mens contextuales
Dreamweaver emplea de forma extensiva los mens contextuales, que proporcionan acceso rpido
a los comandos y las propiedades ms tiles relacionados con la ventana o el objeto con el que est
trabajando. En los mens contextuales slo aparecen los comandos pertinentes para la seleccin
actual.
Para utilizar un men contextual:
1 Haga clic con el botn derecho del ratn (Windows) o haga clic mientras presiona la tecla
Control (Macintosh) en el objeto o ventana.
Aparecer el men contextual para el objeto o la ventana seleccionados.
2 Seleccione un comando en el men contextual.
Utilizacin 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 tambin se pueden acoplar a la ventana de aplicacin integrada (slo 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 documentacin, el trmino, barra de ttulo del grupo
de paneles hace referencia al rea en la que aparece el nombre del grupo de paneles y no a esta
barra en blanco estrecha.
Visualizacin 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 ampliacin, situada en el lado izquierdo de la barra de ttulo del grupo
de paneles.
Haga clic en el ttulo 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 ttulo 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 continuacin, elija un nombre de panel en el men.
Una marca de verificacin al lado de un elemento de este men indica que el elemento
sealado se encuentra abierto, aunque puede estar oculto detrs de otras ventanas.
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:
Ample el grupo de paneles haciendo clic en el nombre o en la flecha de ampliacin.
El men Opciones slo est visible cuando el grupo de paneles est ampliado.
Sugerencia: algunas opciones estn disponibles en el men contextual del grupo de paneles
incluso si el grupo est ampliado; haga clic con el botn derecho del ratn (Windows) o mientras
pulsa la tecla Control (Macintosh) en la barra de ttulo del grupo de paneles para ver el men
contextual.
Utilizacin de paneles y grupos de paneles 51
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 mayora de los paneles slo pueden acoplarse a la derecha o a la izquierda del rea de la ventana
de documento del espacio de trabajo integrado, mientras que otros (como el inspector de
propiedades y la barra Insertar) slo pueden acoplarse a la parte superior o inferior de la ventana
integrada.
Para desacoplar un grupo de paneles:
Arrstrelo por los puntos de sujecin (situados en el borde izquierdo de la barra de ttulo 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 (slo en Windows):
Arrstrelo 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 ttulo
del grupo de paneles. El nombre del comando Agrupar con cambia en funcin 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 funcin 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 ttulo. El grupo de
paneles no se acopla mientras no se arrastre por sus puntos de sujecin.
Cambio de tamao y de nombre de los grupos de paneles
Puede cambiar el tamao y el nombre de los grupos de paneles en funcin de sus necesidades.
Para cambiar el tamao de los grupos de paneles:
Para los paneles flotantes, arrastre el conjunto de grupos de paneles para ajustar su tamao de la
misma manera que lo hara con una ventana del sistema operativo.
Por ejemplo, puede arrastrar el rea de ajuste de tamao de la esquina inferior derecha del
conjunto de grupos de paneles.
Para los paneles acoplados, arrastre la barra de separacin 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 ttulo del grupo de
paneles.
Haga doble clic en cualquier lugar de la barra de ttulo del grupo de paneles.
El grupo de paneles crece verticalmente hasta ocupar todo el espacio vertical disponible.
Para cambiar el nombre de un grupo de paneles:
1 Seleccione Cambiar nombre de grupo de paneles en el men Opciones de la barra de ttulo del
grupo de paneles.
2 Introduzca un nuevo nombre y haga clic en Aceptar.
Configuracin de las preferencias de los paneles
Puede establecer preferencias para especificar qu paneles e inspectores deben aparecer siempre
sobre la ventana de documento y cules pueden quedar ocultos por dicha ventana.
Para establecer preferencias para los paneles:
2 Seleccione Paneles en la lista Categora de la izquierda.
3 Seleccione las opciones.
Utilizacin de las funciones de accesibilidad de Dreamweaver
Dreamweaver ofrece funciones que lo hacen accesible a los usuarios con discapacidades. En
concreto, Dreamweaver es compatible con lectores de pantallas, con las funciones de accesibilidad
del sistema operativo y con la navegacin mediante el teclado.
Temas relacionados
Utilizacin de lectores de pantalla con Dreamweaver
Un lector de pantalla recita el texto que aparece en la pantalla del equipo. Tambin lee
informacin no textual, como los rtulos de los botones o las descripciones de las imgenes de la
aplicacin que se suministran en etiquetas o atributos de accesibilidad durante el proceso de
creacin.
En tanto que usuario de Dreamweaver, puede utilizar un lector de pantalla como ayuda para crear
sus pginas Web. El lector de pantalla comienza a leer por la esquina superior izquierda de la
Utilizacin de las funciones de accesibilidad de Dreamweaver 53
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).
Temas relacionados
Utilizacin del teclado para desplazarse por Dreamweaver en la pgina 53
Compatibilidad con las funciones de accesibilidad del sistema operativo (slo
Windows)
Dreamweaver es compatible con la configuracin de alto contraste del sistema operativo
Windows. Esta opcin se activa a travs del Panel de control de Windows. Cuando el alto
contraste est activado, afecta a Dreamweaver de la siguiente manera:
Los cuadros de dilogo y los paneles utilizan la configuracin de color del sistema.
Por ejemplo, si establece el color como Blanco sobre negro, todos los cuadros de dilogo y los
paneles de Dreamweaver se mostrarn con el blanco como color de primer plano y el negro
como color de fondo.
La aplicacin de color a la sintaxis de la vista Cdigo est desactivada.
La vista Cdigo utiliza el color de ventana y de texto del sistema y omite la configuracin de
color establecida en Preferencias. Por ejemplo, si define el color del sistema como Blanco sobre
negro y, a continuacin, cambia los colores del texto en Preferencias > Colores de cdigo,
Dreamweaver omite los colores establecidos en Preferencias y muestra el texto del cdigo con el
blanco como color de primer plano y el negro como color de fondo.
La vista Diseo utiliza los colores de fondo y de texto establecidos en Modificar > Propiedades
de la pgina. As, las pginas que disea presentan los colores como lo har el navegador.
Temas relacionados
Utilizacin de lectores de pantalla con Dreamweaver en la pgina 52
Utilizacin del teclado para desplazarse por Dreamweaver
Puede utilizar el teclado para navegar por los paneles, los inspectores, los cuadros de dilogo, los
marcos y las tablas de Dreamweaver sin necesidad de utilizar el ratn.
Temas relacionados
Utilizacin de lectores de pantalla con Dreamweaver en la pgina 52
Compatibilidad con las funciones de accesibilidad del sistema operativo (slo Windows) en
la pgina 53
Desplazamiento por los paneles
Puede desplazarse por los paneles mediante el teclado.
Nota: el uso de la tecla de tabulacin y las teclas de flecha slo es compatible con Windows.
Para desplazarse por los paneles:
1 En la ventana de documento, presione Control+Alt+Tab para entrar en un panel.
Un contorno blanco alrededor de la barra de ttulo del panel indica el panel en el que ha
entrado. El lector de pantalla lee la barra de ttulo del panel en el que ha entrado.
2 Presione de nuevo la combinacin de teclas Control+Alt+Tab para entrar en el siguiente panel.
Siga hacindolo hasta que alcance el panel en el que desea trabajar.
3 Presione la combinacin de teclas Control+Alt+Mays+Tab para regresar al panel previo, si
fuese necesario.
4 Si el panel en el que quiere trabajar no est abierto, utilice los mtodos abreviados de teclado
listados en el men Ventana para mostrar el panel apropiado y, a continuacin, presione
Control+Alt+Tab para entrar en dicho panel.
Si el panel en el que desea trabajar est abierto pero no ampliado, desplcese hasta la barra de
ttulo 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 travs de las opciones.
Un contorno punteado alrededor de la opcin indica que la opcin a la que ha accedido.
6 Utilice las teclas de flecha como convenga:
Si una opcin tiene varias opciones, utilice las teclas de flecha para desplazarse por las
opciones y, a continuacin, presione la barra espaciadora para seleccionar una.
Si en el grupo de paneles hay fichas que dan acceso a otros paneles, sitese en la ficha abierta
y, a continuacin, utilice las teclas de flecha izquierda o derecha para abrir otras fichas. Una
vez haya abierto una nueva ficha, presione la tecla Tab para desplazarse a travs de las
opciones de dicho panel.
Temas relacionados
Desplazamiento por los cuadros de dilogo en la pgina 55
Desplazamiento por los marcos en la pgina 55
Desplazamiento por las tablas en la pgina 56
Desplazamiento por el inspector de propiedades
Puede utilizar el teclado para desplazarse por el inspector de propiedades y modificar el
documento.
Para desplazarse por el inspector de propiedades:
1 Presione la tecla Control+F3 para mostrar el inspector de propiedades, si no est visible.
2 Presione Control+Alt+Tab hasta que haya entrado en el inspector de propiedades.
3 Presione la tecla Tab para desplazarse a travs de las opciones del inspector de propiedades.
4 Utilice las teclas de flecha como mejor convenga para desplazarse a travs de las distintas
opciones y presione la tecla Intro (Windows) o Retorno (Macintosh) para seleccionar una.
5 Si lo desea, presione Control+Tab (Windows) u Opcin+Tab (Macintosh) para abrir y cerrar la
seccin ampliada del inspector de propiedades o sitese en la flecha de ampliacin, situada en la
esquina inferior derecha, y presione la barra espaciadora.
Temas relacionados
Desplazamiento por los paneles en la pgina 53
Utilizacin de las funciones de accesibilidad de Dreamweaver 55
Desplazamiento por los cuadros de dilogo
Puede utilizar el teclado para desplazarse por los cuadros de dilogo.
Para desplazarse por un cuadro de dilogo:
1 Para desplazarse a travs de las opciones de un cuadro de dilogo, presione la tecla Tab.
2 Utilice las teclas de flecha para desplazarse a travs de los valores de cada opcin.
Por ejemplo, si una opcin tiene un men emergente, acceda a dicha opcin y, a continuacin,
utilice la flecha abajo para desplazarse por sus valores.
3 Si el cuadro de dilogo tiene una lista Categora, presione Control+Tab (Windows) u
Opcin+Tab (Macintosh) para entrar en dicha lista de categoras y, a continuacin, utilice las
teclas de flecha para desplazarse hacia arriba o hacia abajo en la lista.
4 Vuelva a presionar Control+Tab (Windows) u Opcin+Tab (Macintosh) para cambiar a las
opciones de una categora.
5 Para salir del cuadro de dilogo presione Intro (Windows) o Retorno (Macintosh).
Temas relacionados
Desplazamiento por el inspector de propiedades en la pgina 54
Desplazamiento por los marcos
Si el documento contiene marcos, puede utilizar las teclas de flechas para entrar en un marco.
Para seleccionar un marco:
1 Site el punto de insercin en la ventana de documento.
2 Presione Alt+Flecha arriba para seleccionar el marco en el que se encuentra en este momento.
Una lnea punteada indica el marco en el que se encuentra.
3 Siga presionando Alt+Flecha arriba para entrar en el conjunto de marcos y, a continuacin, en
el conjunto de marcos padre, si existen conjuntos de marcos anidados.
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 insercin en la ventana de documento.
Temas relacionados
Desplazamiento por las tablas
Tras seleccionar una tabla, puede utilizar el teclado para desplazarse por ella.
Para desplazarse por una tabla:
1 En la ventana de documento, siga uno de estos procedimientos para seleccionar la tabla:
Si el punto de insercin se encuentra en la parte izquierda de la celda, presione
Mays+Flecha derecha.
Si el punto de insercin se encuentra en la parte derecha de la celda, presione Mays+Flecha
izquierda.
2 Presione la flecha abajo para situar el punto de insercin en la primera celda.
3 Utilice las teclas de flecha o presione Tab para desplazarse a otras celdas, segn sea necesario.
Sugerencia: al presionar la tecla Tab mientras se est en una celda de la derecha, se aade otra
fila a la tabla.
4 Para seleccionar una celda, coloque el punto de insercin en dicha celda y presione Control+A.
5 Para salir de la tabla, utilice el comando Seleccionar todo (Control+A en Windows u Opcin+A
en Macintosh) dos veces y, a continuacin, presione la tecla de flecha arriba, izquierda, derecha
o abajo.
Temas relacionados
Optimizacin del espacio de trabajo para el diseo de pginas
accesibles
Al crear pginas accesibles, debe asociar informacin en forma de rtulos y descripciones a los
objetos de su pgina para que el contenido sea accesible a todos los usuarios.
Para ello, active el cuadro de dilogo Accesibilidad de cada objeto para que Dreamweaver solicite
la informacin de accesibilidad al insertar objetos. Puede activar el cuadro de dilogo
correspondiente a cualquiera de los objetos de la categora Accesibilidad en Preferencias.
Para activar los cuadros de dilogo de accesibilidad:
2 Seleccione Accesibilidad en la lista Categora de la izquierda.
Utilizacin de guas visuales en Dreamweaver 57
El cuadro de dilogo Preferencias muestra las opciones de accesibilidad.
3 Seleccione los objetos para los que desee activar los cuadros de dilogo Accesibilidad.
Nota: al insertar una nueva tabla, los atributos de accesibilidad aparecen automticamente en el
cuadro de dilogo Insertar tabla.
Cada vez que seleccione un objeto, un cuadro de dilogo Accesibilidad le solicitar que introduzca
etiquetas y atributos de accesibilidad al insertar dicho objeto en un documento.
Temas relacionados
Insercin de una imagen en la pgina 313
Validacin de datos de formulario HTML en la pgina 644
Creacin de marcos y conjuntos de marcos en la pgina 210
Insercin y edicin de objetos multimedia en la pgina 368
Insercin de una tabla y adicin de contenido en la pgina 171
Utilizacin de guas visuales en Dreamweaver
Dreamweaver proporciona varios tipos de guas visuales para ayudarle a disear documentos y
predecir (de forma aproximada) cul ser su apariencia en los navegadores. Puede seguir uno de
estos procedimientos:
Ajustar instantneamente el tamao deseado para una ventana de documento y comprobar si
caben los elementos en la pgina. (Vase Cambio del tamao de la ventana de documento en
la pgina 43.)
Utilizar reglas que sirvan de pista visual para la colocacin y el cambio de tamao de las capas o
las tablas. (Vase Utilizacin de reglas y cuadrculas para disear pginas en la pgina 166.)
Utilizar una imagen de rastreo como fondo de la pgina para ayudarle a copiar un diseo
creado en una aplicacin de edicin de ilustraciones o imgenes como Macromedia Fireworks.
(Vase Utilizacin de una imagen de rastreo en la pgina 167.)
Utilizar la cuadrcula para lograr una mayor precisin en la colocacin y ajuste del tamao de
las capas. (Vase Utilizacin de reglas y cuadrculas para disear pginas en la pgina 166.)
Las marcas de cuadrcula de la pgina le ayudan a alinear las capas y, cuando est activada la
funcin de ajuste, permiten ajustar automticamente las capas con el punto ms prximo de la
cuadrcula al moverlas o ajustar su tamao. (Los dems objetos, como las imgenes y los
prrafos, no se ajustan a la cuadrcula.) El ajuste funciona independientemente de que la
cuadrcula est visible.
Aspectos bsicos de personalizacin de Dreamweaver
Existen algunas tcnicas bsicas que permiten personalizar Dreamweaver para que se ajuste a sus
necesidades sin necesidad de conocer cdigo complejo o editar archivos de texto. Por ejemplo,
puede cambiar el diseo del espacio de trabajo, ocultar o mostrar la pgina de inicio, establecer las
preferencias, crear sus propios mtodos abreviados de teclado y aadir extensiones a
Dreamweaver.
Para informacin sobre la personalizacin del diseo de los paneles en el espacio de trabajo, vase
Utilizacin de paneles y grupos de paneles en la pgina 50.
Nota: para informacin sobre cmo personalizar manualmente los archivos de configuracin, vase
Personalizacin de Dreamweaver en el Centro de soporte de Macromedia en
www.macromedia.com/go/customizing_dreamweaver_es.
En esta seccin se describen slo las opciones de las preferencias que se utilizan con mayor
frecuencia. Para informacin sobre una opcin de preferencias especfica que no est incluida en
esta seccin, busque el tema correspondiente en el apartado Utilizacin de Dreamweaver de la
Ayuda.
Temas relacionados
Personalizacin de Dreamweaver en sistemas multiusuario
Apartado Ampliacin de Dreamweaver de la Ayuda
Aspectos bsicos de personalizacin de Dreamweaver 59
Seleccin del diseo del espacio de trabajo (slo en Windows)
En Windows, puede escoger el diseo del espacio de trabajo del codificador o el del diseador. La
primera vez que se inicia Dreamweaver aparece un cuadro de dilogo que permite elegir un diseo
para el espacio de trabajo. Puede pasar de un espacio de trabajo a otro en cualquier momento.
Para elegir un diseo del espacio de trabajo la primera vez que se inicia Dreamweaver:
1 Seleccione uno de los diseos siguientes:
Diseador es un espacio de trabajo integrado que utiliza MDI (Interfaz para Mltiples
Documentos, Multiple Document Interface) en el que todas las ventanas de documentos y
todos los paneles estn integrados en una ventana de aplicacin ms 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 diseo similar al que utiliza Macromedia HomeSite y Macromedia
ColdFusion Studio, en el que las ventanas de documentos muestran de forma predeterminada
la vista de cdigo.
Nota: puede acoplar los grupos de paneles a ambos lados del espacio de trabajo en cualquiera de
los diseos del espacio de trabajo.
Para cambiar a un espacio de trabajo distinto del que ha elegido:
2 Seleccione la categora General en la lista Categora, si no est ya seleccionada.
3 Haga clic en el botn Cambiar espacio de trabajo.
4 Seleccione un diseo del espacio de trabajo y, a continuacin, haga clic en Aceptar.
Aparece un mensaje de alerta para indicarle que tras reiniciar Dreamweaver, aparecer el nuevo
diseo.
5 Haga clic en Aceptar en el mensaje de aviso.
6 Haga clic en Aceptar de nuevo para cerrar el cuadro de dilogo Preferencias.
7 Salga de Dreamweaver y reincielo.
Temas relacionados
Diseo del espacio de trabajo en la pgina 34
Cmo ocultar y mostrar la pgina de inicio
La pgina de inicio de Dreamweaver aparece al iniciar Dreamweaver y siempre que no se tiene
abierto ningn documento. Puede optar por ocultar la pgina de inicio y volver a mostrarla
posteriormente. Cuando la pgina 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 ms informacin, consulte Configuracin de las
preferencias generales para Dreamweaver en la pgina 60.
Para ocultar la pgina de inicio:
Seleccione en la pgina de inicio la casilla de verificacin No volver a mostrar.
La pgina de inicio no aparecer al iniciar Dreamweaver ni despus de abrir y cerrar un
documento.
Para mostrar la pgina de inicio:
2 Seleccione la casilla de verificacin Mostrar pgina de inicio.
La pgina de inicio aparece al iniciar Dreamweaver o despus de abrir y cerrar un documento.
Configuracin de las preferencias generales para Dreamweaver
Las preferencias generales controlan el aspecto global de Dreamweaver.
Para cambiar las preferencias generales:
2 Establezca las opciones de preferencias
Para ms informacin, haga clic en Ayuda.
Configuracin de las preferencias de fuentes para la visualizacin de
Dreamweaver
La codificacin 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 codificacin
determinada con la fuente y el tamao 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 codificacin:
2 Seleccione Fuentes en la lista Categora de la izquierda.
3 Seleccione un tipo de codificacin (por ejemplo, Occidental (Latin1) o Japons) en la lista de
configuracin de fuentes y, a continuacin, elija las fuentes que desea utilizar en Dreamweaver
para esa codificacin en los mens emergentes situados debajo de la lista de configuracin de
fuentes.
Nota: las fuentes que elija no afectan al aspecto que tendr el documento cuando se muestre en
un navegador.
Temas relacionados
Aspectos bsicos de la codificacin del documento en la pgina 262
Aspectos bsicos de personalizacin de Dreamweaver 61
Personalizacin de los mtodos abreviados de teclado
Utilice el editor de mtodos abreviados de teclado para crear sus propias teclas de mtodo
abreviado, incluidos los mtodos abreviados de teclado para los fragmentos de cdigo. En el editor
de mtodos abreviados de teclado tambin puede quitar mtodos abreviados, editar mtodos
abreviados existentes y seleccionar un conjunto predefinido de mtodos abreviados.
Nota: encontrar grficos que describen los mtodos abreviados de teclado en la configuracin
predeterminada de Dreamweaver en el sitio Web de Macromedia en www.macromedia.com/go/
dreamweaver_mx_shortcuts.
Para personalizar los mtodos abreviados de teclado:
1 Seleccione Edicin > Mtodos abreviados de teclado (Windows) o Dreamweaver > Mtodos
abreviados de teclado (Macintosh).
Aparece el cuadro de dilogo Mtodos abreviados de teclado.
2 Aada, elimine o edite los mtodos abreviados de teclado.
Adicin de extensiones a Dreamweaver
Las extensiones son funciones nuevas que se pueden aadir fcilmente a Dreamweaver. Se pueden
utilizar muchos tipos de extensiones; por ejemplo, hay extensiones que permiten cambiar el
formato de las tablas, conectar con bases de datos back-end o que ayudan a escribir scripts para
navegadores.
Nota: para instalar extensiones a las que puedan acceder todos los usuarios en un sistema operativo
multiusuario, debe conectarse como Administrador (Windows) o usuario raz (Mac OS X). Para ms
informacin sobre sistemas multiusuario, consulte Personalizacin de Dreamweaver en sistemas
multiusuario en la pgina 41.
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.
Botn Juego repetido
Botn Cambiar nombre del conjunto
Botn Eliminar el juego
Botn Exportar conjunto como HTML
Extension Manager es una aplicacin 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 vnculo de descarga de una extensin.
Es posible que el navegador le permita elegir entre abrirla e instalarla directamente desde el sitio
o guardarla en disco.
Si abre la extensin directamente desde el sitio, Extension Manager controla la instalacin
de forma automtica.
Si guarda la extensin en el disco, un lugar adecuado para guardar el archivo de paquete de
extensin (.mxp) es la carpeta Downloaded Extensions dentro de la carpeta de la aplicacin
Dreamweaver en su equipo.
2 Haga doble clic en el archivo de paquete de extensin o abra Extension Manager y seleccione
Archivo > Instalar extensin.
La extensin ya est instalada en Dreamweaver. Algunas extensiones no se encuentran
accesibles hasta despus de reiniciar Dreamweaver; es posible que se le pida que salga de la
aplicacin y vuelva a iniciarla.
Nota: utilice Extension Manager para eliminar extensiones o para consultar ms informacin sobre la
extensin.
63
CAPTULO 2
Configuracin de un sitio de Dreamweaver
Un sitio Web es un conjunto de documentos y activos vinculados con atributos compartidos,
como temas relacionados, un diseo similar o un objetivo comn. Macromedia Dreamweaver
MX 2004 es una herramienta de creacin y administracin de sitios, por lo que puede utilizarla
para crear sitios Web completos, adems de documentos por separado.
El primer paso al crear un sitio Web consiste en planificarlo. Para obtener resultados ptimos,
disee y planifique la estructura del sitio Web antes de crear las pginas que va a contener.
El siguiente paso consiste en configurar Dreamweaver para poder trabajar con la estructura bsica
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, plantese basar las pginas en plantillas
de Dreamweaver. Vase Plantillas de Dreamweaver en la pgina 222 y Creacin de una plantilla
de Dreamweaver en la pgina 233.
Este captulo incluye las siguientes secciones:
Acerca de los sitios de Dreamweaver en la pgina 63
Configuracin de un sitio de Dreamweaver nuevo en la pgina 65
Utilizacin de las opciones Avanzadas para configurar un sitio de Dreamweaver en
la pgina 66
Edicin de la configuracin de un sitio de Dreamweaver en la pgina 70
Edicin de sitios Web existentes con Dreamweaver en la pgina 71
Acerca de los sitios de Dreamweaver
Un sitio de Dreamweaver permite organizar todos los documentos asociados con un sitio Web. La
organizacin de los archivos en un sitio permite utilizar Dreamweaver para cargar el sitio en el
servidor Web, controlar y mantener los vnculos de forma automtica, administrar y compartir
archivos. Para aprovechar al mximo las funciones de Dreamweaver, debe definir un sitio.
Un sitio de Dreamweaver consta de un mximo de tres partes o carpetas, segn 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.
64 Captulo 2: Configuracin de un sitio de Dreamweaver
Para definir un sitio de Dreamweaver, tan slo debe configurar una carpeta local. Para transferir
archivos a un servidor Web o desarrollar aplicaciones Web, tambin necesita aadir datos para un
sitio remoto y un servidor de prueba.
En la carpeta remota se almacenan los archivos, segn el entorno de desarrollo, para fines de
prueba, produccin, colaboracin, etctera. 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 administracin de los archivos en los sitios de Dreamweaver.
En la carpeta del servidor de prueba, Dreamweaver procesa pginas dinmicas. Para ms
informacin, consulte Especificacin de dnde pueden procesarse las pginas dinmicas en
la pgina 474.
Temas relacionados
Aspectos bsicos de la estructura de carpetas locales y remotas
Cuando configure el acceso a la carpeta remota del sitio de Dreamweaver (vase Configuracin
de una carpeta remota en la pgina 69), debe determinar el directorio de servidor de la carpeta
remota. El directorio de servidor especificado debe corresponder a la carpeta raz de la carpeta
local. El siguiente diagrama muestra un ejemplo de una carpeta local a la izquierda y de una
carpeta remota a la derecha.
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 podrn verlos. Adems, se rompern
las rutas de imgenes y vnculos.
El directorio raz remoto deber haberse creado antes de que Dreamweaver intente conectar con
l. Si no dispone de un directorio raz para la carpeta remota, cree uno o pida al administrador del
servidor que le cree uno.
Aunque slo desee editar una parte del sitio remoto, deber duplicar toda la estructura de la rama
correspondiente del sitio, desde su carpeta raz hasta los archivos que desea editar.
sitio local
(carpeta raz)
Assets
HTML
directorio de inicio de sesin
(no debe ser el directorio
host en este caso)
no
s
no
public_html
(directorio host)
Assets
(no debe ser el
directorio host)
HTML
Configuracin de un sitio de Dreamweaver nuevo 65
Por ejemplo, si la carpeta raz del sitio remoto, denominada public_html, contiene dos carpetas,
Project1 y Project2, y desea trabajar nicamente con los archivos HTML de Project1, no ser
necesario que descargue los archivos de Project2, pero deber asignar su carpeta raz local a
public_html, no a Project1.
Temas relacionados
Configuracin de una carpeta remota en la pgina 69
Configuracin de un sitio de Dreamweaver nuevo
Despus 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 ms informacin, consulte
Acerca de los sitios de Dreamweaver en la pgina 63.
Nota: tambin puede editar archivos sin configurar un sitio de Dreamweaver. Para ms informacin,
consulte Acceso a sitios, a un servidor y a unidades locales en la pgina 84.
Despus de configurar un sitio de Dreamweaver, es recomendable exportar el sitio para disponer
de una copia de seguridad local. Para ms informacin, consulte Importacin y exportacin de
sitios en la pgina 100.
Para definir un sitio de Dreamweaver:
1 Seleccione Sitio > Administrar sitios.
Aparece el cuadro de dilogo Administrar sitios.
public_html
Project 1
Assets
HTML
Project 2
Assets
HTML
carpeta raz local
(asigne a public.html, no
a Project1 o Project/HTML)
HTML
(debe estar en sitio local;
corresponde a Project1/HTML
en sitio remoto)
SITIO REMOTO SITIO LOCAL
Project 1
(debe estar en sitio local;
corresponde a Project1 en sitio remoto)
Nota: si no tiene ningn sitio de Dreamweaver definido, aparecer el cuadro de dilogo Definicin
del sitio y podr omitir este paso y continuar con el siguiente.
2 Haga clic en el botn Nuevo.
Aparecer el cuadro de dilogo Definicin del sitio.
Haga clic en la ficha Bsicas para utilizar el asistente para la Definicin del sitio, que le
guiar a travs del proceso de configuracin.
Nota: se recomienda que los nuevos usuarios de Dreamweaver utilicen el asistente para la
Definicin del sitio. Es probable que los usuarios que tengan ms experiencia con
Dreamweaver prefieran las opciones Avanzadas.
Haga clic en la ficha Avanzadas para utilizar las opciones avanzadas que le permiten
configurar carpetas locales, remotas y de prueba por separado segn convenga.
Nota: para empezar, puede configurar un sitio de Dreamweaver completo, o simplemente
realizar el primer paso, la configuracin de la carpeta local.
4 Realice el proceso de definicin del sitio de Dreamweaver:
En el asistente para la Definicin del sitio, responda a las preguntas de cada pantalla y, a
continuacin, haga clic en Siguiente para avanzar en el proceso de configuracin o haga clic
en Atrs para regresar a una pantalla anterior.
Como opciones avanzadas, complete las categoras Datos locales, Datos remotos y Servidor
de prueba segn convenga (vase Utilizacin de las opciones Avanzadas para configurar un
sitio de Dreamweaver en la pgina 66).
Sugerencia: despus de configurar un sitio de Dreamweaver, es recomendable exportar el sitio para
disponer de una copia de seguridad local. Para ms informacin, consulte Importacin y exportacin
de sitios en la pgina 100.
si est configurando un sitio de Dreamweaver para una aplicacin Web, vase Captulo 23,
Configuracin de una aplicacin Web, en la pgina 467.
Utilizacin de las opciones Avanzadas para configurar un sitio de
Dreamweaver
Puede utilizar las opciones Avanzadas del cuadro de dilogo Definicin del sitio para configurar
un sitio de Dreamweaver. Las opciones Avanzadas permiten configurar las carpetas locales,
remotas y de prueba (para procesar pginas dinmicas) por separado segn convenga. Se
recomienda este mtodo para usuarios con experiencia en el uso de Dreamweaver.
Nota: para empezar rpidamente, puede empezar simplemente con el primer paso de configuracin
de un sitio de Dreamweaver, configurar la carpeta local. A continuacin, puede aadir datos remotos
y de prueba. Para poder empezar a trabajar con Dreamweaver, como mnimo, es necesario
configurar una carpeta local.
Si no tiene experiencia en Dreamweaver, puede utilizar el asistente para la Definicin del sitio
para que le gue por el proceso de configuracin. (Vase Configuracin de un sitio de
Dreamweaver nuevo en la pgina 65.)
Si est configurando un sitio de Dreamweaver para una aplicacin Web, sltese esta seccin y vea
Captulo 23, Configuracin de una aplicacin Web, en la pgina 467.
Utilizacin de las opciones Avanzadas para configurar un sitio de Dreamweaver 67
Sugerencia: despus de configurar un sitio de Dreamweaver, es recomendable exportar el sitio para
disponer de una copia de seguridad local. Para ms informacin, consulte Importacin y exportacin
de sitios en la pgina 100.
Temas relacionados
Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 474
Configuracin 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:
Nota: si no tiene ningn sitio de Dreamweaver definido, aparecer el cuadro de dilogo Definicin
del sitio y podr omitir este paso y continuar con el siguiente.
2 Haga clic en Nuevo.
3 Haga clic en el botn Avanzadas, si las opciones Avanzadas no estn visibles.
La ficha Avanzadas del cuadro de dilogo Definicin del sitio muestra las opciones de la
categora Datos locales.
4 Introduzca las opciones de Datos locales.
5 Opcional: si ya est listo para configurar el servidor remoto, omita el paso restante; seleccione la
categora Datos remotos de la izquierda y complete el cuadro de dilogo.
Dreamweaver crea la cach inicial del sitio y el nuevo sitio de Dreamweaver aparece en el panel
Archivos.
Despus de configurar una carpeta local, tambin puede aadir carpetas de datos remotos y de
prueba (vase Configuracin de una carpeta remota en la pgina 69 y Especificacin de dnde
pueden procesarse las pginas dinmicas en la pgina 474).
Temas relacionados
Administracin de archivos en la pgina 81
Utilizacin de las opciones Avanzadas para configurar un sitio de Dreamweaver 69
Configuracin de una carpeta remota
Tras definir una carpeta local para un sitio Dreamweaver (vase Configuracin de una carpeta
local en la pgina 67), puede configurar una carpeta remota. En funcin del entorno de
desarrollo, la carpeta remota es el lugar en el que se almacenan los archivos para fines de prueba,
colaboracin, produccin, implementacin, 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 cmo acceder a la carpeta remota y anote la informacin de conexin. En esta seccin
se describe cmo configurar una carpeta remota y conectarse a ella.
Para configurar una carpeta remota:
2 Seleccione un sitio de Dreamweaver existente.
Si no ha definido ningn sitio de Dreamweaver, cree una carpeta local antes de continuar
(vase Configuracin de una carpeta local en la pgina 67).
3 Haga clic en Editar.
5 Seleccione Datos remotos en la lista Categora que aparece en la parte izquierda.
6 Seleccione una opcin de acceso.
Dreamweaver crea una conexin con la carpeta remota. Si est desarrollando un sitio dinmico,
puede aadir una carpeta de servidor de prueba para procesar pginas dinmicas (vase
Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 474).
Para conectarse a una carpeta remota con acceso FTP:
En el panel Archivos, haga clic en el botn Conectar al servidor remoto en la barra de
herramientas.
Si el sitio utiliza FTP con SSH para acceder a la carpeta remota, cuando intente conectar con el
servidor remoto, se iniciar un indicador de comando para que se conecte con el servidor SSH.
Haga clic en Aceptar en el cuadro de dilogo de Dreamweaver una vez establecida la conexin.
Nota: si utiliza acceso de red para la carpeta remota, no es necesario conectarse a la carpeta
remota; estar siempre conectado. Haga clic en el botn Actualizar para ver los archivos remotos.
Para desconectarse de una carpeta remota:
En el panel Archivos, haga clic en el botn Desconectar en la barra de herramientas.
Temas relacionados
Aspectos bsicos de la estructura de carpetas locales y remotas en la pgina 64
Solucin de problemas de configuracin de carpetas remotas en la pgina 70
Solucin de problemas de configuracin de carpetas remotas
Un servidor Web se puede configurar de varias formas. En la siguiente lista se ofrece informacin
sobre algunos problemas habituales que pueden surgir al configurar una carpeta remota (vase
Configuracin de una carpeta remota en la pgina 69) y cmo solucionarlos:
Es posible que la implementacin FTP de Dreamweaver no funcione correctamente con
algunos servidores proxy, cortafuegos multinivel y otras formas de acceso indirecto al servidor.
Si surgen problemas con el acceso FTP, solicite ayuda al administrador del sistema local.
Para la implementacin FTP de Dreamweaver, debe conectar con la carpeta raz del sistema
remoto. (En muchas aplicaciones, puede conectar con cualquier directorio remoto y luego
navegar por el sistema de archivos remoto para localizar el directorio deseado.)
Asegrese de indicar la carpeta raz del sistema remoto como el directorio del servidor.
Si tiene algn problema para conectar y ha especificado el directorio del servidor utilizando
una sola barra inclinada (/), es posible que tenga que especificar una ruta relativa desde el
directorio con el que est conectando y la carpeta raz remota.
Por ejemplo, si la carpeta raz remota es un nivel de directorio superior, puede que tenga que
especificar ../../ para el directorio del servidor.
Los nombres de archivo y carpeta que contienen espacios y caracteres especiales suelen
ocasionar problemas al transferirse a sitios remotos.
Utilice caracteres de subrayado en lugar de espacios y evite los caracteres especiales en los
nombres de archivo y carpeta siempre que pueda. En concreto, algunos caracteres que pueden
causar problemas en los nombres de archivo son los dos puntos, las barras, el punto y el
apstrofo. Los caracteres especiales en los nombres de archivo o carpeta tambin pueden
impedir que Dreamweaver cree un mapa del sitio.
Si experimenta problemas con nombres de archivo largos, acrtelos. En Macintosh, los
nombres de archivo no pueden tener ms de 31 caracteres.
Muchos servidores utilizan vnculos simblicos (UNIX), accesos abreviados (Windows) o alias
(Macintosh) para conectar una carpeta de una parte del disco del servidor con otra carpeta
situada en otro emplazamiento.
Por ejemplo, el subdirectorio public_html del directorio principal del servidor puede ser en
realidad un vnculo con cualquier parte del servidor. En la mayora de los casos, estos alias no
tienen ninguna repercusin sobre la capacidad de establecer conexin 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 ms informacin, 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
continuacin, haga clic en la etiqueta Registro FTP.
Edicin de la configuracin de un sitio de Dreamweaver
En el cuadro de dilogo Definicin del sitio, utilice las opciones de la ficha Avanzadas para editar
los sitios Dreamweaver.
Edicin de sitios Web existentes con Dreamweaver 71
Para editar la configuracin de un sitio de Dreamweaver, siga uno de estos procedimientos:
Seleccione Sitio > Administrar sitios, seleccione un sitio en el cuadro de dilogo 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 dilogo Administrar
sitios y haga clic en Editar.
Temas relacionados
Edicin 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.
Edicin de un sitio Web local con Dreamweaver
Puede usar Dreamweaver para editar un sitio Web de su disco local, aunque no lo haya creado con
Dreamweaver.
Nota: en esta seccin, se configura un sitio de Dreamweaver para editar un sitio Web local existente.
Tambin puede editar el sitio existente sin crear un sitio de Dreamweaver. Para ms informacin,
consulte Acceso a sitios, a un servidor y a unidades locales en la pgina 84.
Para editar un sitio Web local:
2 Haga clic en Nuevo.
La ficha Avanzadas del cuadro de dilogo Definicin del sitio muestra las opciones de la
categora Datos locales.
4 Complete este cuadro de dilogo.
Edicin de un sitio Web remoto con Dreamweaver
Puede utilizar Dreamweaver para copiar un sitio remoto (o una de sus ramas) en el disco local y
editarlo, aunque no lo haya creado con Dreamweaver.
Nota: en esta seccin se configura un sitio de Dreamweaver para editar un sitio Web remoto
existente. Tambin puede editar el sitio existente sin crear un sitio de Dreamweaver. Para ms
informacin, consulte Acceso a sitios, a un servidor y a unidades locales en la pgina 84.
Para editar un sitio remoto existente:
1 Cree una carpeta local que contenga el sitio y configrela como carpeta local del sitio (vase
Configuracin de una carpeta local en la pgina 67).
Nota: debe duplicar localmente toda la estructura de la rama correspondiente del sitio remoto
existente. Para ms informacin, consulte Aspectos bsicos de la estructura de carpetas locales
y remotas en la pgina 64.
2 Configure una carpeta remota (vase Configuracin de una carpeta remota en la pgina 69)
con la informacin del sitio existente.
Asegrese de elegir la carpeta raz correcta para el sitio remoto.
3 En el panel Archivos (Ventana > Archivos), haga clic en el botn Conectar al servidor remoto
(para el acceso a travs de FTP) o en el botn Actualizar (para el acceso a travs de la red) de la
barra de herramientas para ver el sitio remoto.
4 Segn la parte del sitio remoto que desee editar, siga uno de estos procedimientos:
Si desea trabajar con el sitio completo, seleccione la carpeta raz del sitio remoto en el panel
Archivos y, a continuacin, haga clic en Obtener en la barra de herramientas para descargar
todo el sitio en el disco local.
Si desea trabajar slo con uno de los archivos o carpetas del sitio, localcelo 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 automticamente la parte de la estructura del sitio remoto que sea
necesaria para situar el archivo descargado en el lugar adecuado dentro de la jerarqua del sitio.
Para editar nicamente una parte de un sitio, generalmente debe incluir los archivos
dependientes.
5 Utilice Dreamweaver para trabajar en su sitio.
Temas relacionados
Edicin de un sitio Web local con Dreamweaver en la pgina 71
73
CAPTULO 3
Cmo crear y abrir documentos
Macromedia Dreamweaver MX 2004 ofrece un entorno flexible para trabajar con una gran
variedad de documentos de diseo y desarrollo de pginas Web. Adems de documentos HTML,
es posible crear y abrir una gran variedad de documentos basados en texto, incluidos archivos
CFML, ASP, JavaScript y CSS. Dreamweaver tambin admite archivos de cdigo fuente, como
Visual Basic, .NET, C# y Java.
Dreamweaver proporciona varias opciones para crear un documento nuevo. Puede crear
cualquiera de los tipos de documento siguientes:
Un nuevo documento o plantilla en blanco
Un documento basado en uno de los diseos de pgina prediseados que se incluyen con
Dreamweaver
Un documento basado en una de las plantillas existentes
Tambin se encuentran disponibles otras opciones de documento. Por ejemplo, si suele trabajar
con un tipo de documento, puede establecerlo como tipo de documento predeterminado para las
pginas nuevas que cree.
En Dreamweaver puede definir fcilmente las propiedades del documento, como etiquetas meta,
ttulo del documento, colores de fondo, as como otras propiedades de la pgina en la vista Diseo
o en la vista Cdigo.
Creacin de documentos nuevos en la pgina 73
Cmo guardar un nuevo documento en la pgina 76
Configuracin de un tipo de documento nuevo predeterminado en la pgina 76
Cmo abrir documentos existentes en la pgina 77
Importacin de un archivo HTML de Microsoft Word en la pgina 78
Creacin de documentos nuevos
Dreamweaver ofrece distintas posibilidades de seleccin de un nuevo documento para trabajar en
l. Puede crear un documento nuevo de la siguiente forma:
Empiece con un documento en blanco (vase Creacin de un nuevo documento en blanco
en la pgina 74).
74 Captulo 3: Cmo crear y abrir documentos
Cree un documento o una plantilla en blanco a partir de un archivo de diseo de Dreamweaver
(vase Creacin de un documento basado en un archivo de diseo de Dreamweaver en
la pgina 74).
Utilice una plantilla que defina el aspecto del documento y que establezca las partes del
documento que se pueden modificar (vase Creacin de un documento basado en una
plantilla existente en la pgina 75).
Sugerencia: si suele trabajar con un tipo concreto de documento, puede establecer un documento
como predeterminado y abrir automticamente un documento nuevo basado en el tipo
predeterminado que ha definido. Para informacin, vase Configuracin de un tipo de documento
nuevo predeterminado en la pgina 76.
Creacin de un nuevo documento en blanco
Puede seleccionar el tipo de documento en blanco que desea crear.
Para crear un documento nuevo en blanco:
1 Seleccione Archivo > Nuevo.
Aparecer el cuadro de dilogo Nuevo documento. La ficha General ya aparece seleccionada.
2 En la lista Categora, seleccione Pgina bsica, Pgina dinmica, Pgina de plantilla, Otro o
Conjuntos de marcos. A continuacin, en la lista de la derecha, seleccione el tipo de documento
que desea crear.
Por ejemplo, seleccione Pgina bsica para crear un documento HTML o elija Pgina dinmica
para crear un documento ColdFusion o ASP, etc.
Para ms informacin sobre las opciones de este cuadro de dilogo, haga clic en el botn Ayuda
del mismo.
3 Haga clic en el botn Crear.
El documento nuevo se abrir en la ventana del documento.
4 Guarde el documento (vase Cmo guardar un nuevo documento en la pgina 76).
Temas relacionados
Creacin de un documento basado en una plantilla existente en la pgina 75
Creacin de un documento basado en un archivo de diseo de Dreamweaver
Dreamweaver se suministra con distintos archivos de elementos de diseo y diseos de pgina
profesionales. Puede utilizar estos archivos de diseo como punto de partida para el diseo de las
pginas de sus sitios. Cuando crea un documento basado en un archivo de diseo, Dreamweaver
crea una copia del archivo.
Nota: si crea un documento a partir de un conjunto de marcos predefinido, slo se copiar la
estructura del conjunto de marcos, no el contenido. Asimismo, deber guardar cada archivo de
marco por separado. Para informacin sobre el almacenamiento de marcos, vase Almacenamiento
de archivos de marcos y conjuntos de marcos en la pgina 215.
Creacin de documentos nuevos 75
Para crear un documento nuevo a partir de un archivo de diseo de Dreamweaver:
Aparecer el cuadro de dilogo Nuevo documento. La ficha General ya aparece seleccionada.
2 En la lista Categora, seleccione Hojas de estilos CSS, Diseos basados en tablas, Diseos de
pginas (CSS), Diseos de pginas o Diseos de pginas (accesibles); a continuacin, seleccione
un archivo de diseo de la lista de la derecha.
Puede obtener una vista previa de un archivo de diseo y leer una descripcin breve de los
elementos de diseo de un documento.
del mismo.
El documento nuevo se abrir en la ventana del documento. Si ha seleccionado una hoja de
estilos CSS, el documento CSS aparecer en la ventana del documento y la hoja de estilos CSS
se abrir en la vista Cdigo.
Si el archivo contiene vnculos a archivos de activos, aparecer el cuadro de dilogo Copiar
archivos dependientes para que pueda guardar una copia de los archivos dependientes.
5 Si aparece el cuadro de dilogo Copiar archivos dependientes, defina las opciones y haga clic en
Copiar para copiar los activos en la carpeta seleccionada.
Puede elegir su propia ubicacin para los archivos dependientes o utilizar la ubicacin
predeterminada de carpeta que genera Dreamweaver (basada en el nombre original del archivo
de diseo).
Temas relacionados
Creacin de un nuevo documento en blanco en la pgina 74
Creacin de un documento basado en una plantilla existente
Puede seleccionar una plantilla existente, obtener una vista previa y crear un documento nuevo a
partir de la misma. Puede utilizar el cuadro de dilogo Nuevo documento para seleccionar una
plantilla de cualquiera de los sitios definidos de Dreamweaver o puede utilizar el panel Activos
para crear un documento nuevo a partir de una plantilla existente.
para informacin sobre la creacin de plantillas, vase Creacin de una plantilla de
Sugerencia: si el sitio no dispone de plantillas, puede guardar un documento como plantilla en una
de las categoras de archivos de diseo del cuadro de dilogo Nuevo documento; a continuacin,
puede crear pginas basadas en dicha plantilla. Para informacin sobre cmo guardar un archivo de
diseo como plantilla, vase Creacin de un documento basado en un archivo de diseo de
Para crear un nuevo documento basado en una plantilla:
Se abrir el cuadro de dilogo Nuevo documento.
2 Haga clic en la ficha Plantillas.
3 En la lista Plantillas para, seleccione el sitio de Dreamweaver que contiene la plantilla que desea
utilizar; a continuacin, seleccione una plantilla de la lista de la derecha.
del mismo.
4 Haga clic en Crear.
El documento nuevo se abrir en la ventana del documento.
Para crear un documento a partir de una plantilla en el panel Activos:
1 Abra el panel Activos (Ventana > Activos), si no est abierto.
2 En el panel Activos, haga clic en el icono Plantillas de la izquierda para ver la lista de plantillas
del sitio actual.
Sugerencia: si acaba de crear la plantilla que desea aplicar, quiz necesite hacer clic en el botn
Actualizar para verla.
3 Haga clic con el botn derecho (Windows) o haga clic mientras presiona la tecla Control
(Macintosh) en la plantilla que desea aplicar y, a continuacin, seleccione Nuevo desde plantilla.
El documento se abrir en la ventana de documento.
Temas relacionados
Creacin de un nuevo documento en blanco en la pgina 74
Creacin de un documento basado en un archivo de diseo de Dreamweaver en la pgina 74
Cmo guardar un nuevo documento
Al crear un documento nuevo, es necesario guardarlo.
Para guardar un documento nuevo:
1 Seleccione Archivo > Guardar.
2 En el cuadro de dilogo que aparece a continuacin, vaya hasta la carpeta en la que desea guardar
el archivo.
Sugerencia: es recomendable guardar el archivo en un sitio de Dreamweaver. Para ms
informacin, consulte Configuracin de un sitio de Dreamweaver nuevo en la pgina 65.
3 En el cuadro de texto Nombre de archivo, introduzca un nombre para el archivo.
Evite utilizar espacios y caracteres especiales en los nombres de archivos y carpetas. Asimismo,
no comience los nombres de los archivos con nmeros. En concreto, no utilice caracteres
especiales (como , o ) ni signos de puntuacin (como dos puntos, barras inclinadas o
puntos) en los nombres de archivos que desee colocar en un servidor remoto; muchos
servidores cambian estos caracteres durante la carga, lo que provoca que se rompan los vnculos
existentes con los archivos.
4 Haga clic en Guardar.
Configuracin de un tipo de documento nuevo predeterminado
Puede definir qu tipo de documento desea que Dreamweaver utilice como documento
predeterminado para el sitio.
Por ejemplo, si la mayora de las pginas de su sitio van a ser de un tipo de archivo concreto (como
documentos ColdFusion, HTML o ASP), puede configurar las preferencias del documento de
modo que se creen nuevos documentos del tipo especificado de forma automtica.
Cmo abrir documentos existentes 77
Para configurar las preferencias y el tipo de documento nuevo:
Sugerencia: tambin puede hacer clic en el botn Preferencias del cuadro de dilogo Nuevo
documento para configurar las preferencias del documento cuando cree un documento nuevo
(vase Creacin de un nuevo documento en blanco en la pgina 74).
2 Haga clic en Nuevo documento en la lista Categora de la izquierda.
3 Establezca o cambie las preferencias segn convenga.
Para ms informacin sobre las opciones del cuadro de dilogo, haga clic en el botn Ayuda.
Dreamweaver guarda las preferencias.
Cmo abrir documentos existentes
En Dreamweaver, puede abrir una pgina Web existente o un documento basado en texto,
aunque no hayan sido creados en Dreamweaver. Puede abrir el documento y utilizar
Dreamweaver para editarlo en las vistas Diseo o Cdigo.
Si el documento que abre es un archivo de Microsoft Word guardado como HTML, debe utilizar
el comando Limpiar HTML de Word para eliminar las etiquetas de formato sobrantes que Word
inserta en los archivos HTML.
Sugerencia: en lugar de utilizar el procedimiento descrito en esta seccin para abrir un archivo de
Microsoft Word guardado como HTML, puede importar el documento a Dreamweaver (vase
Importacin de un archivo HTML de Microsoft Word en la pgina 78) de modo que Dreamweaver
le solicite automticamente que limpie el archivo.
Tambin puede abrir archivos de texto no HTML, como archivos JavaScript, archivos XML,
hojas de estilos CSS o archivos de texto guardados con procesadores de texto o editores de texto.
Para abrir un sitio existente:
1 Seleccione Archivo > Abrir.
Aparecer el cuadro de dilogo Abrir.
Sugerencia: tambin puede utilizar el panel Archivos para abrir los archivos. Para ms
informacin, consulte Utilizacin de archivos en el panel Archivos en la pgina 91.
2 Localice y seleccione el documento que desea abrir.
Nota: si todava no lo ha hecho, es recomendable organizar los archivos que va a abrir y editar en
un sitio de Dreamweaver, en lugar de abrirlos desde otra ubicacin. Para informacin sobre la
configuracin de un sitio de Dreamweaver, vase Configuracin de un sitio de Dreamweaver
nuevo en la pgina 65.
3 Haga clic en Abrir.
El documento se abrir en la ventana de documento.
Los archivos JavaScript, archivos de texto y las hojas de estilos CSS se abren de forma
predeterminada en la vista Cdigo. Puede actualizar el documento mientras trabaja con
Dreamweaver y luego guardar los cambios en el archivo. Para informacin sobre la
configuracin de un editor de texto externo para la visualizacin de estos tipos de archivos,
vase Inicio de un editor externo de archivos multimedia en la pgina 369.
4 Si ha abierto un documento de Microsoft Word, seleccione Comandos > Limpiar HTML de
Word, desactive las opciones que desee del cuadro de dilogo y, a continuacin, haga clic en
Aceptar.
Puede producirse una pequea demora mientras Dreamweaver intenta determinar la versin de
Word con la que se ha guardado el archivo. Si Dreamweaver no logra determinar de qu
versin se trata, seleccione la versin correcta en el men emergente.
Para ms informacin sobre las opciones del cuadro de dilogo Limpiar HTML de Word, haga
clic en el botn Ayuda.
Dreamweaver aplica la configuracin de limpieza al nuevo documento y se abre un registro en
el que se reflejan los cambios (a menos que desactive dicha opcin del cuadro de dilogo).
Importacin de un archivo HTML de Microsoft Word
En Dreamweaver puede importar documentos guardados con Microsoft Word como archivos
HTML y, a continuacin, utilizar el comando Limpiar HTML de Word para eliminar los cdigos
HTML sobrantes o innecesarios generados por Word. El comando Limpiar HTML de Word se
encuentra disponible para documentos guardados como archivos HTML por Word 97 o superior.
El cdigo que Dreamweaver elimina lo utiliza Word principalmente para aplicar formato y
mostrar documentos en Word, por lo que no es necesario para ver el archivo HTML. Conserve
una copia del archivo original de Word (.doc) como copia de seguridad, ya que es posible que no
pueda volver a abrir el documento HTML en Word una vez aplicada la funcin Limpiar HTML
de Word.
Para limpiar HTML o XHTML no generados por Microsoft Word, vase Limpieza del cdigo
en la pgina 447.
Para importar y limpiar un archivo HTML de Microsoft Word:
1 Si todava no ha guardado el documento, gurdelo como archivo HTML en Microsoft Word.
2 En Dreamweaver seleccione Archivo > Importar > Documento de Word.
Se abrir el cuadro de dilogo Abrir.
3 Localice y seleccione el archivo HTML de Word que desea abrir.
Se abrir el documento y aparecer el cuadro de dilogo Limpiar HTML de Word.
Puede producirse una pequea demora mientras Dreamweaver intenta determinar la versin de
Word con la que se ha guardado el archivo. Si Dreamweaver no logra determinar de qu
versin se trata, seleccione la versin correcta en el men emergente.
4 Desactive las opciones que desee del cuadro de dilogo.
Para ms informacin sobre las opciones del cuadro de dilogo, haga clic en el botn Ayuda.
Dreamweaver aplicar la configuracin de limpieza al nuevo documento y se abrir un registro
en el que se reflejan los cambios (a menos que desactive dicha opcin del cuadro de dilogo).
Temas relacionados
Cmo copiar y pegar texto de documentos de MS Office en la pgina 290
PARTE II
Utilizacin de los sitios de Dreamweaver
Aprenda a administrar sitios Macromedia Dreamweaver MX 2004 y activos especficos de sitio.
Captulo 4, Administracin de archivos, en la pgina 81
Captulo 5, Administracin de activos y bibliotecas, en la pgina 119
Captulo 6, Administracin de sitios de Contribute con Dreamweaver, en la pgina 137
P
A
R
T
E

I
I
81
CAPTULO 4
Administracin de archivos
Macromedia Dreamweaver MX 2004 ayuda a organizar y administrar los archivos.
Dreamweaver dispone de una serie de funciones para administrar archivos y transferirlos a un
servidor remoto y desde ste. Al transferir archivos entre sitios locales y remotos, Dreamweaver
mantiene estructuras de archivos y carpetas paralelas en ambos sitios. Cuando se transfieren
archivos entre sitios, Dreamweaver crea automticamente las carpetas necesarias si an no existen
en un sitio. Tambin se pueden sincronizar los archivos entre los sitios local y remoto; si es
necesario, Dreamweaver copia los archivos en ambos sentidos y elimina los no deseados.
Dreamweaver incluye funciones que facilitan el trabajo en colaboracin en un sitio Web. Puede
proteger y desproteger archivos de un servidor remoto de forma que otros miembros de un equipo
de diseo Web puedan ver quin est trabajando con un archivo. Puede aadir Design Notes a los
archivos para compartir informacin con los miembros del equipo acerca del estado del archivo,
su prioridad, etc. Tambin puede utilizar la funcin Informes de flujo de trabajo para ejecutar
informes sobre el sitio y ver informacin sobre el estado de proteccin/desproteccin, as como
para buscar las Design Notes adjuntas a los archivos.
Administracin de sitios en la pgina 82
Acceso a sitios, a un servidor y a unidades locales en la pgina 84
Visualizacin de archivos y carpetas en la pgina 87
Utilizacin de un mapa visual del sitio en la pgina 93
Importacin y exportacin de sitios en la pgina 100
Eliminacin de un sitio de Dreamweaver de la lista de sitios en la pgina 101
Desproteccin y proteccin de archivos en la pgina 101
Obtencin y colocacin de archivos en el servidor en la pgina 104
Sincronizacin de los archivos de los sitios local y remoto en la pgina 107
Cmo ocultar carpetas y archivos en el sitio en la pgina 108
Almacenamiento de informacin sobre archivos en Design Notes en la pgina 111
Comprobacin del sitio en la pgina 115
82 Captulo 4: Administracin de archivos
Administracin de sitios
Dreamweaver incluye una serie de funciones para administrar un sitio y transferir archivos a un
servidor remoto y desde ste. Dreamweaver tambin dispone de funciones que facilitan el trabajo
en colaboracin en un sitio Web, como Desproteger/proteger y Design Notes.
Sistema de desproteccin/proteccin
Si trabaja en un entorno de colaboracin, puede desproteger y proteger archivos en los servidores
local y remoto.
Nota: las funciones Obtener y Colocar pueden utilizarse con un servidor de prueba, a diferencia del
sistema de desproteccin/proteccin. Para ms informacin sobre la utilizacin de las funciones
Obtener y Colocar, consulte Obtencin y colocacin de archivos en el servidor en la pgina 104.
Proteger un archivo equivale a decir: Estoy trabajando con este archivo. No lo toquen! Cuando
un archivo se encuentra protegido, Dreamweaver muestra el nombre del usuario que lo ha
protegido junto al icono del archivo en el panel Archivos, adems de una marca de verificacin
roja (si un miembro del equipo ha protegido el archivo) o verde (si usted ha protegido el archivo).
Al desproteger un archivo, ste queda a disposicin de otros miembros del equipo, que podrn
protegerlo y editarlo. Al desproteger un archivo despus de editarlo, la versin local se convierte
en archivo de slo lectura y aparece un smbolo de candado junto al archivo en el panel Archivos
para evitar que realice cambios en l.
Dreamweaver no convierte los archivos protegidos en archivos de slo lectura en el servidor
remoto. Si transfiere archivos con una aplicacin distinta de Dreamweaver, es posible que se
sobrescriban los archivos protegidos. Sin embargo, en aplicaciones distintas de Dreamweaver, el
archivo .lck figura al lado del archivo protegido en la jerarqua de archivos para evitar errores de
ese tipo.
Temas relacionados
Configuracin del sistema de desproteccin/proteccin en la pgina 101
Desproteccin y proteccin de archivos en una carpeta remota en la pgina 102
Cmo ocultar elementos en el sitio
La posibilidad de ocultar elementos de un sitio permite excluir carpetas y tipos de archivos al
realizar operaciones como Obtener o Colocar. Es posible ocultar carpetas individuales, pero no
archivos individuales. Para ocultar archivos, deber seleccionar un tipo de archivo. Dreamweaver
ocultar todos los archivos de ese tipo. Dreamweaver recordar los valores de cada sitio, de forma
que el usuario no tendr que realizar selecciones cada vez que trabaje con ese sitio.
Por ejemplo, si est trabajando en un sitio grande y no quiere cargar los archivos multimedia
todos los das, puede utilizar esta funcin para ocultar la carpeta multimedia de forma que el
sistema excluya los archivos de dicha carpeta de las operaciones realizadas en el sitio.
Es posible ocultar carpetas y tipos de archivos en el sitio remoto o en el sitio local. Se pueden
ocultar carpetas y archivos para excluirlos de las siguientes operaciones:
Colocar, obtener, desproteger y proteger
Generar informes
Buscar archivos locales y remotos ms recientes
Administracin de sitios 83
Operaciones en todo el sitio, como comprobar y cambiar vnculos
Sincronizar
Utilizacin del contenido del panel Activos
Actualizar plantillas y bibliotecas
Nota: Dreamweaver slo excluye las plantillas y los elementos de biblioteca ocultos de las
operaciones Obtener y Colocar. Dreamweaver no excluye dichos elementos de las operaciones de
proceso por lotes, puesto que podra provocar fallos de sincronizacin con sus instancias.
Temas relacionados
Cmo ocultar carpetas y archivos en el sitio en la pgina 108
Design Notes
Las Design Notes son notas que el usuario crea para un archivo. Se asocian al archivo que
describen, pero se guardan en un archivo aparte. Puede averiguar qu archivos tienen Design
Notes adjuntas en el panel Archivos ampliado: aparece un icono de Design Notes en la columna
Notas.
Puede utilizar Design Notes para mantener informacin adicional asociada a los documentos,
como los nombres de los archivos de imagen y comentarios sobre el estado del archivo. Por
ejemplo, si copia un documento de un sitio en otro, puede aadir Design Notes para advertir que
el documento original se encuentra en la otra carpeta del sitio.
Tambin puede emplear Design Notes para realizar el seguimiento de la informacin confidencial
que no puede introducir en un documento por motivos de seguridad, como por ejemplo notas
sobre cmo se calcul un determinado precio o se estableci una configuracin o qu factores de
marketing han intervenido en una decisin de diseo.
Si abre un archivo en Macromedia Fireworks o Macromedia Flash y lo exporta con otro formato,
Fireworks y Flash guardarn automticamente el nombre del archivo original en un archivo de
Design Notes. Por ejemplo, si abre myhouse.png en Fireworks y lo exporta como myhouse.gif,
Fireworks crear automticamente un archivo Design Notes llamado myhouse.gif.mno que
contendr el nombre del archivo original como un archivo absoluto file: URL. As, las Design
Notes para myhouse.gif podran contener la lnea siguiente:
fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"
Una Design Note similar de Flash podra contener la lnea siguiente:
fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla"
Nota: para compartir Design Notes, los usuarios deben definir la misma ruta para la raz del sitio (por
ejemplo, sites/assets/orig).
Cuando importe el grfico a Dreamweaver, el archivo de Design Notes se copiar
automticamente en el sitio junto con el grfico. Al seleccionar la imagen en Dreamweaver y
editarlo usando Fireworks (vase Inicio de un editor externo de archivos multimedia en
la pgina 369), Fireworks abrir el archivo original para editarlo.
Temas relacionados
Activacin y desactivacin de Design Notes para un sitio en la pgina 112
Asociacin de Design Notes a archivos en la pgina 112
Acceso a sitios, a un servidor y a unidades locales
Puede acceder, modificar y guardar archivos y carpetas en los sitios de Dreamweaver, as como
archivos y carpetas que no forman parte de un sitio de Dreamweaver. Adems de los sitios de
Dreamweaver, tambin puede acceder a un servidor, a una unidad local o a su escritorio.
Para poder acceder a un servidor remoto, antes debe configurar Dreamweaver para que funcione
con dicho servidor (vase Configuracin de Dreamweaver para que funcione sin definir un sitio
en la pgina 85).
Nota: la mejor manera de administrar los archivos consiste en crear un sitio Dreamweaver (vase
Configuracin de un sitio de Dreamweaver nuevo en la pgina 65).
Para abrir un sitio Dreamweaver existente:
En el panel Archivos (Ventana > Archivos), seleccione un sitio en el men emergente (donde
aparece el sitio, el servidor o la unidad actual).
Para ms informacin sobre cmo cambiar la vista del sitio (por ejemplo, para ver la carpeta
remota), consulte Visualizacin de archivos y carpetas en la pgina 87. Para informacin sobre
cmo abrir archivos en el sitio, vase Utilizacin de archivos en el panel Archivos en
la pgina 91.
Para abrir una carpeta de un servidor RDS o un servidor FTP remoto:
1 En el panel Archivos (Ventana > Archivos), elija un nombre de servidor en el men emergente
(donde aparece el sitio, el servidor o la unidad actual).
Nota: aparecen los nombres de los servidores con los que Dreamweaver est configurado para
funcionar. Si todava no ha configurado un servidor, vase Configuracin de Dreamweaver para
que funcione sin definir un sitio en la pgina 85.
2 Desplcese por los archivos y edtelos de la forma habitual.
Para ms informacin, consulte Utilizacin de archivos en el panel Archivos en la pgina 91.
Acceso a sitios, a un servidor y a unidades locales 85
Para acceder a una unidad local o a su escritorio:
1 En el panel Archivos (Ventana > Archivos), elija Escritorio, Disco local o Disco compacto en el
men emergente (donde aparece el sitio, el servidor o la unidad actual).
2 Navegue a un archivo y siga uno de estos procedimientos:
Abrir archivos en Dreamweaver u otras aplicaciones
Cambiar el nombre de los archivos
Copiar archivos
Eliminar archivos
Arrastrar archivos
Cuando se arrastra un archivo de un sitio de Dreamweaver a otro o a una carpeta no
asociada a un sitio de Dreamweaver, Dreamweaver copia el archivo en la ubicacin donde se
ha soltado. Si arrastra un archivo dentro del mismo sitio de Dreamweaver, Dreamweaver
mover el archivo a la ubicacin donde lo suelte. Si arrastra un archivo que no forma parte
de un sitio de Dreamweaver a una carpeta que no forma parte de un sitio Dreamweaver,
Dreamweaver mover el archivo a la ubicacin donde lo suelte.
Nota: para mover un archivo que Dreamweaver copia de forma predeterminada, mantenga
presionada la tecla Mays (Windows) o la tecla Comando (Macintosh) mientras lo arrastra.
Para copiar un archivo que Dreamweaver mueve de forma predeterminada, mantenga
presionada la tecla Control (Windows) o la tecla Opcin (Macintosh) mientras lo arrastra.
Temas relacionados
Configuracin de Dreamweaver para que funcione sin definir un sitio
Dreamweaver permite conectar con un servidor FTP o RDS para poder trabajar en documentos
sin tener que crear un sitio de Dreamweaver.
Nota: si trabaja con archivos sin crear un sitio de Dreamweaver, no podr realizar operaciones en
todo el sitio, tales como comprobar vnculos. Para configurar un sitio de Dreamweaver, vase
Configuracin de un sitio de Dreamweaver nuevo en la pgina 65.
Para configurar Dreamweaver de modo que funcione con un servidor desde la ventana de
documento:
2 Haga clic en Nuevo y seleccione Servidores FTP y RDS.
Aparecer el cuadro de dilogo Configurar servidor.
Nota: slo debe completar este cuadro de dilogo una vez para cada servidor al que quiera
conectarse.
En el panel Archivos se muestra el contenido de la carpeta del servidor remoto al que se ha
conectado, y el nombre del servidor aparece en el men emergente de la parte superior del
panel.
Para configurar Dreamweaver de modo que funcione con un servidor mediante el panel
Archivos:
1 En el panel Archivos (Ventana > Archivos), elija Escritorio en el men emergente (donde aparece
el sitio, el servidor o la unidad actual).
2 Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y
haga clic (Macintosh) en el nodo Servidores FTP y RDS del panel Archivos y, a continuacin,
seleccione Aadir servidor FTP o Aadir servidor RDS.

Aparecer el cuadro de dilogo Configurar servidor.
Nota: slo debe completar este cuadro de dilogo una vez para cada servidor al que quiera
conectarse.
En el panel Archivos se muestra el contenido de la carpeta del servidor remoto al que se ha
conectado, y el nombre del servidor aparece en el men emergente de la parte superior del panel.
Nota: si las carpetas son grandes, el panel Archivos puede tardar unos instantes en mostrar la carpeta.
Visualizacin de archivos y carpetas 87
Temas relacionados
Visualizacin de archivos y carpetas
Puede abrir archivos y carpetas en el panel Archivos, tanto si estn asociados a un sitio de
Dreamweaver como si no. Al visualizar sitios, archivos o carpetas en el panel Archivos, puede
cambiar el tamao del rea de visualizacin y, para los sitios de Dreamweaver, puede expandir o
contraer el panel Archivos.
Para sitios de Dreamweaver, tambin puede personalizar el panel Archivos cambiando la vista
(sitio local o sitio remoto) que aparece de forma predeterminada en el panel contrado. Tambin
puede cambiar de vista de contenido en el panel Archivos expandido mediante la opcin Mostrar
siempre (vase Configuracin de preferencias para el panel Archivos en la pgina 90).
Para abrir o cerrar el panel Archivos:
Seleccione Ventana > Archivos.
Para cambiar el tamao del rea de visualizacin del panel Archivos expandido:
En el panel Archivos (Ventana > Archivos) expandido, siga uno de estos procedimientos:
Arrastre la barra que separa las dos vistas para aumentar o reducir el rea de visualizacin del
panel derecho o izquierdo.
Utilice las barras de desplazamiento situadas en la parte inferior del panel Archivos para
desplazarse por el contenido de las vistas.
En el mapa del sitio, arrastre la flecha situada encima de un archivo para cambiar el espacio
entre archivos.
Para ampliar o contraer el panel Archivos (slo sitios de Dreamweaver):
En el panel Archivos (Ventana > Archivos), haga clic en el botn Expandir/contraer situado en
la barra de herramientas.
Nota: si hace clic en el botn Expandir/contraer para ampliar el panel mientras se encuentra
apilado, el panel se maximiza de modo que no es posible trabajar en la ventana de documento.
Para regresar a la ventana de documento, vuelva a hacer clic en el botn Expandir/contraer para
contraer el panel. Si hace clic en el botn Expandir/contraer para expandir el panel mientras no se
encuentra apilado, todava puede trabajar en la ventana de documento. Para poder apilar el panel
de nuevo, deber contraerlo primero.
Cuando el panel Archivos se contrae, muestra el contenido del sitio local, el sitio remoto o el
servidor de prueba como una lista de archivos. Cuando se expande, muestra el sitio local, adems
del sitio remoto o el servidor de prueba. El panel Archivos tambin puede mostrar un mapa visual
del sitio local.
Para cambiar la vista del sitio en el panel Archivos, siga uno de estos procedimientos (slo
sitios de Dreamweaver):
En el panel Archivos contrado (Ventana > Archivos), seleccione Vista local, Vista remota,
Servidor de prueba o Vista de mapa en el men emergente de vistas del sitio.
Nota: vista local aparece en el men emergente de forma predeterminada.
En el panel Archivos expandido (Ventana > Archivos), haga clic en el botn Archivos del sitio
(para el sitio remoto), el botn Servidor de prueba o el botn Mapa del sitio, situados en la
barra de herramientas.
Si utiliza el botn Mapa del sitio, puede elegir si desea incluir los archivos del sitio con el mapa
del sitio o bien ver slo el mapa del sitio. Para ms informacin, consulte Visualizacin de un
mapa del sitio en la pgina 94.
Nota: para ver un sitio remoto o un servidor de prueba, primero hay que configurar un sitio remoto o
un servidor de prueba (vase Configuracin de una carpeta remota en la pgina 69 o
Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 474). Para ver un
mapa del sitio, es necesario configurar una pgina principal (vase Visualizacin de un mapa del
sitio en la pgina 94).
Temas relacionados
Personalizacin de los datos de archivo y carpeta visualizados en el panel
Archivos expandido
Al visualizar un sitio de Dreamweaver en el panel Archivos expandido (vase Visualizacin de
archivos y carpetas en la pgina 87), Dreamweaver muestra informacin sobre los archivos y las
carpetas en columnas. Por ejemplo, puede ver el tipo de archivo o la fecha en que se modific un
archivo.
Puede personalizar las columnas siguiendo uno de estos procedimientos (algunas operaciones slo
estn disponibles para las columnas que ha aadido, no para las predeterminadas):
Reordenar o realinear columnas
Aadir nuevas columnas (hasta un mximo de 10)
Ocultar columnas (excepto la columna de nombre de archivo)
Designar columnas para compartirlas con todos los usuarios conectados a un sitio
Archivos del sitio
Servidor de prueba
Mapa del sitio
Visualizacin de archivos y carpetas 89
Eliminar columnas (slo columnas personalizadas)
Cambiar el nombre de columnas (slo columnas personalizadas)
Asociar a una Design Note (slo columnas personalizadas)
Para ordenar por cualquier columna de datos en el panel Archivos:
Haga clic en el encabezado de la columna que desea ordenar.
Sugerencia: vuelva a hacer clic en el encabezado para invertir el orden (ascendente o
descendente) en que Dreamweaver ordenar la columna.
Para aadir, eliminar o cambiar columnas de datos:
2 Seleccione un sitio y haga clic en Editar.
3 Seleccione Columnas vista archivo en la lista de categoras de la izquierda.
Aparece el cuadro de dilogo Definicin del sitio con las opciones de Columnas vista archivo.
Administracin de archivos y carpetas en el panel Archivos
Puede organizar y administrar los archivos y carpetas de su sitio tanto si forman parte de un sitio
de Dreamweaver como si se encuentran en un servidor al que se ha conectado o en la unidad local
o el escritorio.
Nota: en versiones anteriores de Dreamweaver, el panel Archivos se denominaba panel Sitio.
Esta seccin trata sobre los siguientes temas:Temas relacionados
Configuracin de preferencias para el panel Archivos
Puede seleccionar preferencias para controlar las funciones de transferencia de archivos en el panel
Archivos.
Para editar las preferencias del panel Archivos:
2 Seleccione Sitio en la lista de categoras que aparece en la parte izquierda.
Aparecen las opciones de preferencias del sitio.
3 Realice los cambios apropiados en las opciones.
Sugerencia: puede definir si los archivos se transfieren como archivos de tipo ASCII (texto) o
binarios; para ello, debe personalizar el archivo FTPExtensionMap.txt en la carpeta
Dreamweaver/Configuration (en Macintosh, FTPExtensionMapMac.txt). Para ms informacin,
consulte el apartado Ampliacin de Dreamweaver de la Ayuda.
Administracin de archivos y carpetas en el panel Archivos 91
Utilizacin de archivos en el panel Archivos
Puede abrir archivos o cambiarles el nombre, puede aadir, mover o eliminar archivos, o puede
actualizar el panel Archivos tras realizar los cambios.
Para los sitios de Dreamweaver, tambin se puede determinar qu archivos (del sitio local o
remoto) se han actualizado desde la ltima vez que se transfirieron. Para informacin sobre la
sincronizacin del sitio local con el remoto, vase Sincronizacin de los archivos de los sitios local
y remoto en la pgina 107.
Para abrir un archivo:
1 En el panel Archivos (Ventana > Archivos), seleccione un sitio, un servidor o una unidad en el
men emergente (donde aparece el sitio, el servidor o la unidad actual).
2 Localice y seleccione el archivo que desea abrir.
Haga doble clic en el icono del archivo.
Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control y haga
clic (Macintosh) en el icono del archivo y elija Abrir.
Dreamweaver abre el archivo en la ventana de documento.
Para crear un nuevo archivo o carpeta:
1 En el panel Archivos (Ventana > Archivos), seleccione un archivo o una carpeta.
Dreamweaver crear el archivo o carpeta dentro de la carpeta seleccionada, o en la misma
carpeta que el archivo seleccionado.
haga clic (Macintosh) y seleccione Nuevo archivo o Nueva carpeta.
3 Introduzca un nombre para el nuevo archivo o carpeta.
4 Presione Intro (Windows) o Retorno (Macintosh).
Para eliminar un archivo o una carpeta:
1 En el panel Archivos (Ventana > Archivos), seleccione el archivo o la carpeta que desea eliminar.
haga clic (Macintosh) y seleccione Eliminar.
Para cambiar el nombre de un archivo o de una carpeta:
1 En el panel Archivos (Ventana > Archivos), seleccione el archivo o la carpeta cuyo nombre desee
cambiar.
2 Siga uno de estos procedimientos para activar el nombre del archivo o la carpeta:
Haga clic en el nombre del archivo, haga una pausa y vuelva a hacer clic en el nombre.
Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla
Control y haga clic (Macintosh) en el icono del archivo y luego seleccione Cambiar nombre.
3 Escriba el nuevo nombre encima del anterior.
Para mover un archivo o una carpeta:
1 En el panel Archivos (Ventana > Archivos), seleccione el archivo o la carpeta que desea mover.
Copie el archivo o carpeta y pguelo en una nueva ubicacin.
Arrastre el archivo o carpeta a una nueva ubicacin.
3 Actualice el panel Archivos para ver el archivo o carpeta en su nueva ubicacin.
Para actualizar el panel Archivos, siga uno de estos procedimientos:
Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y
haga clic (Macintosh) en cualquier archivo o carpeta y luego seleccione Actualizar.
Slo sitios de Dreamweaver: haga clic en el botn Actualizar en la barra de herramientas del
panel Archivos (con esta opcin se actualizan ambos paneles).
Nota: Dreamweaver actualiza de forma automtica el panel Archivos cuando se realizan cambios en
otra aplicacin y luego se regresa a Dreamweaver.
Temas relacionados
Configuracin de preferencias para el panel Archivos en la pgina 90
Bsqueda de archivos en el sitio de Dreamweaver
Dreamweaver permite buscar archivos seleccionados, abiertos, protegidos o modificados
recientemente en el sitio. Tambin pueden buscarse los archivos ms recientes en el sitio local o
remoto.
Para buscar un archivo abierto en el sitio:
1 Abra el archivo en la ventana de documento.
2 Seleccione Sitio > Localizar en sitio.
Dreamweaver selecciona el archivo en el panel Archivos.
Nota: si el archivo abierto en la ventana de documento no forma parte del sitio actual del panel
Archivos, Dreamweaver intenta determinar a cul de los sitios de Dreamweaver pertenece el archivo;
si el archivo actual pertenece a un solo sitio local, Dreamweaver abrir ese sitio en el panel Archivos y
resaltar el archivo.
Para localizar y seleccionar archivos protegidos en un sitio de Dreamweaver:
En el panel Archivos contrado (Ventana > Archivos), haga clic en el men de opciones situado
en la esquina superior derecha del panel Archivos y elija Edicin > Seleccionar archivos
protegidos.
Dreamweaver selecciona los archivos en el panel Archivos.
Para buscar un archivo seleccionado en el sitio local o remoto:
1 Seleccione el archivo en la vista local o remota del panel Archivos (Ventana > Archivos).
Utilizacin de un mapa visual del sitio 93
haga clic (Macintosh) y seleccione Localizar en sitio local o Localizar en sitio remoto (segn
dnde seleccion el archivo).
Dreamweaver selecciona el archivo en el panel Archivos.
Para localizar y seleccionar archivos con versiones ms recientes en el sitio local que en el
remoto:
en la esquina superior derecha del panel Archivos y elija Edicin > Seleccionar local ms
reciente.
Para localizar y seleccionar archivos con versiones ms recientes en el sitio remoto que en
el local:
en la esquina superior derecha del panel Archivos y elija Edicin > Seleccionar remoto ms
reciente.
Para buscar los archivos modificados recientemente en el sitio:
1 En el panel Archivos contrado (Ventana > Archivos), haga clic en el men de opciones situado
en la esquina superior derecha del panel Archivos y elija Edicin > Seleccionar modificados
recientemente.
Aparece el cuadro de dilogo Seleccionar modificados recientemente.
3 Haga clic en Aceptar para guardar la configuracin.
Dreamweaver selecciona los archivos que han sido modificados dentro del intervalo de tiempo
seleccionado en el panel Archivos.
Temas relacionados
Utilizacin de archivos en el panel Archivos en la pgina 91
Utilizacin de un mapa visual del sitio
Puede visualizar una carpeta local para un sitio de Dreamweaver en forma de mapa visual de
iconos vinculados, denominado mapa del sitio. Utilice el mapa del sitio para aadir nuevos
archivos a un sitio de Dreamweaver, o para aadir, modificar o eliminar vnculos.
El mapa del sitio muestra dos niveles de la estructura del sitio, empezando por la pgina principal.
Muestra las pginas en forma de iconos y visualiza los vnculos en el orden en que se encuentran
en el cdigo fuente.
El mapa del sitio resulta idneo para establecer la estructura de un sitio. Puede configurar
rpidamente la estructura completa del sitio y, seguidamente, obtener una imagen grfica del
mapa del sitio.
Nota: el mapa del sitio slo se aplica a los sitios locales. Para crear un mapa de un sitio remoto, copie
el contenido del sitio remoto en una carpeta del disco local y utilice el comando Administrar sitios
para definir el sitio como sitio local (vase Configuracin de una carpeta local en la pgina 67).
Temas relacionados
Establecimiento de vnculos con documentos utilizando el mapa del sitio en la pgina 333
Visualizacin de un mapa del sitio
Para poder ver el mapa del sitio, debe definir una pgina principal. La pgina principal puede ser
cualquier pgina del sitio. No es necesario que sea la pgina inicial. En este caso, la pgina
principal del sitio es simplemente el punto de partida del mapa.
Para definir una pgina principal para el sitio:
1 En el panel Archivos (Ventana > Archivos), elija un sitio en el men emergente donde aparece
el sitio, el servidor o la unidad actual.
2 Haga clic con el botn derecho (Windows) o haga clic con la tecla Control presionada
(Macintosh) en el archivo que desea convertir en pgina principal y luego elija Establecer como
pgina principal.
Nota: tambin puede establecer la pgina principal mediante las opciones de Mapa de diseo del
sitio en el cuadro de dilogo Definicin del sitio (vase Modificacin del diseo del mapa del sitio en
la pgina 95).
Para ver un mapa del sitio:
1 Para visualizar el mapa del sitio, en el panel Archivos (Ventana > Archivos), siga uno de estos
procedimientos:
En el panel Archivos contrado, seleccione Vista de mapa en el men emergente de vistas del
sitio.
En el panel Archivos expandido, haga clic en el botn Mapa del sitio de la barra de
herramientas y seleccione Slo mapa o Mapa y archivos.
Seleccione Slo mapa para ver el mapa del sitio sin la estructura de archivos local, o Mapa y
archivos para verlo con la estructura de archivos local.
Nota: si no ha definido una pgina principal o si Dreamweaver no puede encontrar una pgina
index.html o index.htm en el sitio actual para utilizarla como pgina principal, Dreamweaver le
solicitar que seleccione una.
El panel Archivos muestra el mapa del sitio con dos niveles de estructura.
Nota: de forma predeterminada, el mapa del sitio no muestra los archivos ocultos y dependientes.
Para ms informacin, consulte Mostrar y ocultar archivos de mapa de un sitio en la pgina 98.
2 Haga clic en los signos ms (+) y menos () situados junto al nombre de archivo para mostrar u
ocultar las pginas vinculadas por debajo del segundo nivel.
3 Los distintos colores que aparecen en el mapa del sitio indican lo siguiente:
El texto en rojo indica que se trata de un vnculo roto.
El texto en azul y marcado con un icono de globo terrqueo indica que se trata de un
archivo de otro sitio o un vnculo especial (como un vnculo de correo electrnico o de
script).
Una marca de verificacin verde indica que se trata de un archivo protegido por usted.
Una marca de verificacin roja indica que se trata de un archivo protegido por otro usuario.
Un icono de candado indica que se trata de un archivo de slo lectura (Windows) o
bloqueado (Macintosh).
Temas relacionados
Manipulacin de pginas en el mapa del sitio en la pgina 96
Mostrar y ocultar archivos de mapa de un sitio en la pgina 98
Visualizacin del sitio desde una rama en la pgina 99
Modificacin del diseo del mapa del sitio
Utilice las opciones de Mapa de diseo del sitio para personalizar el aspecto del mapa del sitio.
Puede cambiar la pgina principal, el nmero de columnas mostradas, si las etiquetas de los iconos
deben mostrar el nombre del archivo o el ttulo de pgina y si deben mostrarse los archivos ocultos
y dependientes.
Para modificar el mapa de diseo del sitio:
1 Siga uno de estos procedimientos para abrir el cuadro de dilogo Definicin del sitio:
Seleccione Sitio > Administrar sitios.
En el panel Archivos, seleccione Administrar sitios en el men emergente donde aparece el
sitio, el servidor o la unidad actual.
2 Haga clic en Editar.
3 Seleccione Mapa de diseo del sitio en la lista Categora de la izquierda.
El cuadro de dilogo Definicin del sitio muestra las opciones de Mapa de diseo del sitio.
5 Haga clic en Aceptar para cerrar el cuadro de dilogo Definicin del sitio.
6 Haga clic en Listo para cerrar el cuadro de dilogo Administrar sitios, si se encuentra abierto.
Temas relacionados
Visualizacin de un mapa del sitio en la pgina 94
Mostrar y ocultar archivos de mapa de un sitio en la pgina 98
Almacenamiento del mapa del sitio en la pgina 100
Manipulacin de pginas en el mapa del sitio
Al trabajar en el mapa del sitio, puede seleccionar pginas, abrir una pgina para editarla, aadir
nuevas pginas al sitio, crear vnculos entre archivos y cambiar ttulos de pgina.
Para seleccionar varias pginas en el mapa del sitio, siga uno de estos procedimientos:
Haga clic mientras presiona la tecla Mays para seleccionar un rango de pginas contiguas.
Comenzando desde un lugar vaco de la vista, arrastre el puntero alrededor de un grupo de
archivos para seleccionarlos.
Haga clic mientras presiona la tecla Control (Windows) o Comando (Macintosh) para
seleccionar pginas que no son contiguas.
Para abrir una pgina en el mapa del sitio para su edicin, siga uno de estos
procedimientos:
Haga doble clic en el archivo.
Haga clic con el botn derecho (Windows) o haga clic con la tecla Control presionada
(Macintosh) en el archivo y seleccione Abrir.
Para aadir un archivo existente al sitio, siga uno de estos procedimientos:
Arrastre un archivo desde el Explorador de Windows o el Finder de Macintosh y colquelo
sobre un archivo en el mapa del sitio. La pgina se aade al sitio y se crea un vnculo entre ella
y el archivo sobre el cual la ha colocado.
(Macintosh) en el archivo del mapa del sitio, seleccione Vincular a archivo existente y localice
el archivo.
Para crear un nuevo archivo y aadir un vnculo al mapa del sitio:
1 Seleccione un archivo en el mapa del sitio.
(Macintosh) y seleccione Vincular a nuevo archivo.
Aparece el cuadro de dilogo Vincular a nuevo archivo.
3 Introduzca un nombre, un ttulo y texto para el vnculo.
Dreamweaver guarda el archivo en la misma carpeta que el archivo seleccionado. Si aade un
archivo a una rama oculta, el nuevo archivo tambin se oculta (vase Mostrar y ocultar
archivos de mapa de un sitio en la pgina 98).
Para modificar el ttulo de una pgina en el mapa del sitio:
1 Asegrese de que se muestran los ttulos de las pginas. Para ello, haga clic en el men Opciones
de la esquina superior derecha del panel Archivos contrado y seleccione Ver > Mostrar ttulos de
pginas.
2 Seleccione un archivo en el mapa del sitio y siga uno de estos procedimientos:
Haga clic en el ttulo. Cuando se pueda editar el ttulo, introduzca el que desee.
Haga clic en el men Opciones de la esquina superior derecha y seleccione Archivo >
Cambiar nombre.
3 Presione Intro (Windows) o Retorno (Macintosh) despus de introducir el nuevo nombre.
Nota: al trabajar en el panel Archivos, Dreamweaver actualiza automticamente todos los vnculos
con archivos cuyos nombres han cambiado.
Para cambiar la pgina principal en el mapa del sitio, siga uno de estos procedimientos:
En la vista local del panel Archivos, seleccione un archivo; haga clic con el botn derecho
(Windows) o haga clic con la tecla Control presionada (Macintosh) y seleccione Establecer
como pgina principal.
En el panel Archivos, seleccione Administrar sitios en el men emergente donde aparece el
sitio, el servidor o la unidad actual y, a continuacin, haga clic en Editar. Seleccione Mapa de
diseo del sitio en la lista de categoras del cuadro de dilogo Definicin del sitio. Localice una
nueva pgina principal y haga clic en Aceptar.
Para actualizar la visualizacin del mapa del sitio despus de realizar cambios:
1 Haga clic en cualquier lugar del mapa del sitio para anular la seleccin de archivos.
2 Haga clic en el botn Actualizar de la barra de herramientas del panel Archivos.
Temas relacionados
Modificacin del diseo del mapa del sitio en la pgina 95
Mostrar y ocultar archivos de mapa de un sitio
Puede modificar el diseo del mapa del sitio para mostrar u ocultar los archivos ocultos y
dependientes. Esto le ser de utilidad cuando desee destacar temas o contenido clave y relegar a un
segundo plano otros materiales menos importantes.
Para ocultar un archivo utilizando el mapa del sitio, primero deber marcar el archivo como
oculto. Cuando se oculta un archivo, tambin se ocultan sus vnculos. Al mostrar un archivo
marcado como oculto, el icono y sus vnculos se encontrarn visibles en el mapa del sitio, aunque
los nombres aparecern en cursiva.
Nota: de forma predeterminada, los archivos dependientes estn ocultos.
Para marcar archivos como ocultos en el mapa del sitio:
1 En el mapa del sitio, seleccione uno o varios archivos.
(Macintosh) y seleccione Mostrar/ocultar vnculo.
Para eliminar la marca de los archivos marcados como ocultos en el mapa del sitio:
1 En el mapa del sitio, seleccione uno o varios archivos.
Haga clic con el botn derecho del ratn (Windows) o haga clic con la tecla Control
presionada (Macintosh) en el mapa del sitio y seleccione Mostrar/ocultar vnculo.
En el panel Archivos contrado (Ventana > Archivos), haga clic en el men de opciones
situado en la esquina superior derecha y luego seleccione Ver > Mostrar archivos marcados
como ocultos.
situado en la esquina superior derecha y luego seleccione Ver > Mostrar/ocultar vnculo.
Para mostrar u ocultar archivos marcados como ocultos en el mapa del sitio:
en la esquina superior derecha.
Seleccione Ver > Mostrar archivos marcados como ocultos.
Seleccione Ver > Diseo para abrir el cuadro de dilogo Definicin del sitio y, a
continuacin, seleccione la opcin Mostrar archivos marcados como ocultos.
Para mostrar los archivos dependientes en el mapa del sitio:
en la esquina superior derecha.
Seleccione Ver > Mostrar archivos dependientes.
Seleccione Ver > Diseo para abrir el cuadro de dilogo Definicin del sitio y, a
continuacin, seleccione la opcin Mostrar archivos dependientes.
Temas relacionados
Visualizacin del sitio desde una rama
Puede ver los detalles de una seccin especfica de un sitio convirtiendo una rama en el centro del
mapa del sitio.
Para ver otra rama en el mapa del sitio:
1 Seleccione la pgina que desea visualizar.
(Macintosh) en el mapa del sitio y luego seleccione Ver como raz.
situado en la esquina superior derecha y luego seleccione Ver > Ver como raz.
El mapa del sitio se vuelve a trazar en la ventana como si la pgina especificada fuera la raz del
sitio. El cuadro de texto Exploracin del sitio, situado encima del mapa del sitio, muestra la ruta
desde la pgina principal hasta la pgina especificada. Para seleccionar cualquier elemento de la
ruta para ver el mapa del sitio desde dicho nivel, haga clic una vez.
Para ampliar y contraer ramas en el mapa del sitio:
Haga clic en el botn de signo ms (+) o menos () de la rama.
Temas relacionados
Almacenamiento del mapa del sitio
Puede guardar el mapa del sitio con formato de imagen para verlo (o imprimirlo) desde un editor
de imgenes.
Para crear un archivo de imagen basado en el mapa del sitio actual:
en la esquina superior derecha y seleccione Archivo > Guardar mapa del sitio.
Aparece el cuadro de dilogo Guardar mapa del sitio.
2 Escriba un nombre en el cuadro de texto Nombre de archivo.
3 En el men emergente Tipo de archivo, seleccione .bmp o .png.
4 Elija la ubicacin donde desea guardar el archivo e introduzca un nombre para la imagen.
Temas relacionados
Importacin y exportacin de sitios
Con Dreamweaver puede exportar un sitio como archivo XML y luego volver a importarlo a
Dreamweaver. As, podr mover sitios entre sistemas y versiones diferentes del producto y
compartirlos con otros usuarios.
Sugerencia: resulta conveniente exportar los sitios con regularidad de modo que disponga de una
copia de seguridad por si ocurre algn problema con el sitio.
Para exportar un sitio:
2 Haga clic en el botn Exportar.
Se mostrar el cuadro de dilogo Exportar sitio.
3 Localice y seleccione la ubicacin donde desea guardar el sitio.
Dreamweaver guarda el sitio como un archivo XML en la ubicacin especificada, con la
extensin STE.
5 Haga clic en Listo para cerrar el cuadro de dilogo Administrar sitios.
Para importar un sitio:
2 Haga clic en el botn Importar.
Aparecer el cuadro de dilogo Importar sitio.
Desproteccin y proteccin de archivos 101
3 Localice y seleccione un sitio (guardado como archivo XML) para su importacin.
Nota: es necesario exportar el sitio desde Dreamweaver, con lo que se guarda como archivo
XML, para poder volver a importarlo.
4 Haga clic en Abrir.
Dreamweaver importa el sitio y el nombre del mismo aparece en el cuadro de dilogo
Administrar sitios.
Eliminacin de un sitio de Dreamweaver de la lista de sitios
Si no desea seguir trabajando con un sitio en Dreamweaver, puede quitarlo de la lista de sitios. Los
archivos del sitio no se eliminan.
Nota: cuando se quita un sitio de la lista, toda su informacin de configuracin se pierde de forma
permanente.
Para quitar un sitio de la lista de sitios:
2 Seleccione el nombre de un sitio.
3 Haga clic en Quitar.
Aparece un cuadro de dilogo pidiendo confirmacin.
4 Haga clic en S para quitar el sitio de la lista o en No para dejar su nombre en la lista.
Si selecciona S, el nombre del sitio desaparecer de la lista.
Desproteccin y proteccin de archivos
Si trabaja en un entorno de colaboracin, puede utilizar el sistema de proteccin/desproteccin
para proteger y desproteger archivos de servidores locales y remotos.
Si es usted la nica persona que trabaja en el servidor remoto, puede utilizar los comandos
Obtener y Colocar para transferir los archivos sin desprotegerlos ni protegerlos (vase Obtencin
y colocacin de archivos en el servidor en la pgina 104).
Temas relacionados
Sistema de desproteccin/proteccin en la pgina 82
Configuracin del sistema de desproteccin/proteccin
Antes de utilizar el sistema de desproteccin/proteccin, deber asociar el sitio local a un servidor
remoto (vase Configuracin de una carpeta remota en la pgina 69).
Para configurar el sistema de desproteccin/proteccin:
3 Seleccione Datos remotos en la lista de categoras de la izquierda.
El cuadro de dilogo Definicin del sitio muestra las opciones de Datos remotos. La seccin
Desproteger/proteger aparece en la parte inferior del cuadro de dilogo.
Nota: si no aparecen las opciones de Desproteger/proteger, no ha configurado el servidor remoto
(vase Configuracin de una carpeta remota en la pgina 69).
4 Complete la seccin Desproteger/proteger.
Temas relacionados
Cmo deshacer la proteccin de un archivo en la pgina 104
Desproteccin y proteccin de archivos en una carpeta remota
Tras configurar el sistema de proteccin/desproteccin (vase Configuracin del sistema de
desproteccin/proteccin en la pgina 101), puede proteger y desproteger archivos de un
servidor remoto mediante el panel Archivos o desde la ventana de documento.
Para proteger archivos mediante el panel Archivos:
1 En el panel Archivos (Ventana > Archivos), seleccione los archivos que desea proteger en el
servidor remoto.
Nota: puede seleccionar los archivos en la vista local o remota, pero no en el servidor de prueba.
Una marca de verificacin roja indica que otro miembro del equipo tiene protegido el archivo,
mientras que un smbolo de candado indica que el archivo es de slo lectura (Windows) o
bloqueado (Macintosh).
Desproteccin y proteccin de archivos 103
2 Siga uno de estos procedimientos para proteger los archivos:
Haga clic en el botn Proteger de la barra de herramientas del panel Archivos.
(Macintosh) y elija Proteger en el men contextual.
Aparece el cuadro de dilogo Archivos dependientes.
3 Haga clic en S para descargar los archivos dependientes junto con los archivos seleccionados, o
en No si prefiere no descargar dichos archivos.
Nota: suele resultar conveniente descargar archivos dependientes cuando se protege un archivo
nuevo, pero si las ltimas versiones de los archivos dependientes ya se encuentran en el disco
local no hay necesidad de volver a descargarlos.
Aparece una marca de verificacin verde junto al icono del archivo local para indicar que lo ha
protegido usted.
Para desproteger archivos mediante el panel Archivos:
1 En el panel Archivos (Ventana > Archivos), seleccione archivos protegidos o nuevos.
Nota: puede seleccionar los archivos en la vista local o remota, pero no en el servidor de prueba.
2 Siga uno de estos procedimientos para desproteger los archivos:
Haga clic en el botn Desproteger de la barra de herramientas del panel Archivos.
(Macintosh) y elija Desproteger en el men contextual.
3 Haga clic en S para descargar los archivos dependientes junto con los archivos seleccionados, o
en No si prefiere no descargar dichos archivos.
Nota: suele resultar conveniente cargar archivos dependientes cuando se desprotege un archivo
nuevo, pero si las ltimas versiones de los archivos dependientes ya se encuentran en el servidor
remoto no hay necesidad de volver a cargarlos.
El smbolo de candado junto al icono del archivo local indica que el archivo ha pasado a ser de
slo lectura.
Para proteger o desproteger un archivo abierto desde la ventana de documento:
1 Asegrese de que el archivo que desea desproteger o proteger est activo en la ventana de
documento.
Nota: slo es posible desproteger un archivo abierto a la vez.
Elija Sitio > Desproteger o Sitio > Proteger.
Haga clic en el icono Administracin de archivos en la barra de herramientas de la ventana
de documento y, a continuacin, elija Desproteger o Proteger en el men emergente.
Nota: si el archivo actual no forma parte del sitio actual del panel Archivos, Dreamweaver intentar
determinar a qu sitio definido localmente pertenece el archivo actual. Si el archivo actual
pertenece a un solo sitio local, Dreamweaver abre ese sitio y realiza la operacin de desproteccin
o proteccin.
Si protege el archivo activo, la nueva versin protegida sobrescribir la versin del archivo abierta
actualmente. Si desprotege el archivo activo, es posible que ste se guarde automticamente antes
de desprotegerse. Depender de las opciones que haya configurado (vase Configuracin de
preferencias para el panel Archivos en la pgina 90).
Temas relacionados
Cmo deshacer la proteccin de un archivo
Si protege un archivo y luego decide no editarlo (o descartar los cambios efectuados), puede
deshacer la operacin de proteccin para que el archivo recupere su estado original.
Para deshacer la proteccin de un archivo, siga uno de estos procedimientos:
Abra el archivo en la ventana de documento y seleccione Sitio > Deshacer proteger.
En el panel Archivos (Ventana > Archivos), haga clic con el botn derecho (Windows) o
presione Control y haga clic (Macintosh) y seleccione Deshacer proteger.
La copia local del archivo se convertir en copia de slo lectura y se perdern los cambios
realizados.
Temas relacionados
Obtencin y colocacin de archivos en el servidor
Si trabaja en colaboracin con otros usuarios, utilice el sistema de desproteccin/proteccin para
transferir archivos entre los sitios local y remoto (vase Desproteccin y proteccin de archivos
en la pgina 101). Sin embargo, si es la nica persona que trabaja en el sitio remoto, puede utilizar
los comandos Obtener y Colocar para transferir los archivos sin desprotegerlos ni protegerlos.
Obtencin de archivos de un servidor remoto
Utilice el comando Obtener para copiar archivos del sitio remoto a su sitio local. Puede utilizar el
panel Archivos o la ventana de documento para obtener los archivos.
Dreamweaver registra toda la actividad de transferencia de archivos mediante FTP. Si se produce
un error mientras transfiere un archivo con FTP, el registro de FTP del sitio podr ayudarle a
determinar el problema.
Para obtener archivos de un servidor remoto mediante el panel Archivos:
1 En el panel Archivos (Ventana > Archivos), seleccione los archivos que desea descargar.
Generalmente estos archivos se seleccionan en la vista remota, pero puede seleccionar los
archivos correspondientes en la vista local si lo prefiere. Si est activa la vista remota,
Dreamweaver copia los archivos seleccionados en el sitio local. Si, por el contrario, se encuentra
activa la vista local, Dreamweaver copia las versiones remotas de los archivos locales
seleccionados en el sitio local.
Obtencin y colocacin de archivos en el servidor 105
Nota: para obtener slo aquellos archivos cuya versin remota sea ms reciente que la versin
local, utilice el comando Sincronizar (vase Sincronizacin de los archivos de los sitios local y
remoto en la pgina 107).
2 Siga uno de estos procedimientos para obtener el archivo:
Haga clic en el botn Obtener de la barra de herramientas del panel Archivos.
En el panel Archivos, haga clic con el botn derecho (Windows) o haga clic con la tecla
Control presionada (Macintosh) en el archivo y luego seleccione Obtener en el men
contextual.
3 Para descargar archivos dependientes, haga clic en S. Para omitirlos, haga clic en No.
Nota: si ya dispone de copias locales de los archivos dependientes, haga clic en No.
Dreamweaver descarga los archivos seleccionados de la siguiente manera:
Si utiliza el sistema de desproteccin/proteccin, al obtener un archivo se genera una copia
local de slo lectura; el archivo permanecer disponible en el sitio remoto o en el servidor de
prueba para que otros miembros del equipo puedan protegerlo (vase Desproteccin y
proteccin de archivos en la pgina 101).
Si no utiliza el sistema de desproteccin/proteccin, al obtener un archivo se transfiere una
copia que tiene privilegios de lectura y escritura.
Nota: si trabaja en colaboracin con otros usuarios en los mismos archivos, no es recomendable
desactivar la opcin Permitir desproteger y proteger archivo. Si otros usuarios utilizan el sistema
de desproteccin/proteccin con el sitio, usted tambin debe emplear ese sistema.
Para interrumpir la transferencia de archivos en cualquier momento, haga clic en el botn
Cancelar del cuadro de dilogo de estado. Es posible que la transferencia no se detenga
inmediatamente.
Para obtener un archivo de un servidor remoto mediante la ventana de documento:
1 Asegrese de que el documento est activo en la ventana de documento.
2 Siga uno de estos procedimientos para obtener el archivo:
Seleccione Sitio > Obtener.
Haga clic en el icono Administracin de archivos de la barra de herramientas de la ventana
de documento y luego seleccione Obtener en el men emergente.
pertenece a un solo sitio local, Dreamweaver abre ese sitio y realiza la operacin de obtencin.
Para mostrar el registro FTP:
Haga clic en el men de opciones situado en la esquina superior derecha del panel Archivos y
elija Ver > Registro FTP del sitio.
Temas relacionados
Colocacin de archivos en un servidor remoto
Puede colocar archivos del sitio local en el sitio remoto, generalmente sin tener que cambiar su
estado protegido.
Hay dos situaciones frecuentes en las que se podra utilizar el comando Colocar en lugar de
Desproteger:
Si no trabaja en un entorno de colaboracin y no est utilizando el sistema de
desproteccin/proteccin.
Si desea colocar la versin actual del archivo en el servidor, pero va a seguir editndola.
Nota: si coloca un archivo que anteriormente no estaba presente en el sitio remoto y utiliza el
sistema de desproteccin/proteccin, el archivo se copiar en el sitio remoto y, a continuacin,
quedar protegido para que pueda seguir editndolo.
Puede utilizar el panel Archivos o la ventana de documento para colocar archivos. Dreamweaver
registra toda la actividad de transferencia de archivos mediante FTP. Si se produce un error
mientras transfiere un archivo con FTP, el registro de FTP del sitio podr ayudarle a determinar el
problema.
Para colocar archivos en un sitio remoto o un servidor de prueba mediante el panel
Archivos:
1 En el panel Archivos (Ventana > Archivos), seleccione los archivos que desea cargar.
Generalmente se seleccionan en la Vista local, pero puede seleccionar los archivos
correspondientes en la Vista remota si lo prefiere.
Nota: para colocar slo aquellos archivos cuya versin local sea ms reciente que la versin
remota, vase Sincronizacin de los archivos de los sitios local y remoto en la pgina 107.
2 Siga uno de estos procedimientos para colocar el archivo:
Haga clic en el botn Colocar de la barra de herramientas del panel Archivos.
Haga clic con el botn derecho del ratn (Windows) o haga clic con la tecla Control
presionada (Macintosh) en el archivo del panel Archivos y, a continuacin, seleccione
Colocar en el men contextual.
Si el archivo no se ha guardado, aparecer un cuadro de dilogo (en funcin de la opcin de
preferencias de la categora Sitio del cuadro de dilogo Preferencias) que le permitir guardar el
archivo antes de colocarlo en el servidor remoto.
3 Si aparece un cuadro de dilogo, haga clic en S para guardar el archivo o en No para colocar la
versin guardada anteriormente en el servidor remoto.
Nota: si no guarda el archivo, todos los cambios que haya realizado desde la ltima vez que lo
guard no se incluirn en el servidor remoto. Sin embargo, si el archivo permanece abierto, podr
guardar los cambios despus de colocar el archivo en el servidor si lo desea.
4 Para cargar archivos dependientes, haga clic en S. Para omitirlos, haga clic en No.
Nota: si el sitio remoto ya contiene copias de los archivos dependientes, haga clic en No.
Para interrumpir la transferencia de archivos, haga clic en el botn Cancelar del cuadro de dilogo
de estado. Es posible que la transferencia no se detenga inmediatamente.
Sincronizacin de los archivos de los sitios local y remoto 107
Para colocar archivos en un servidor remoto mediante la ventana de documento:
1 Asegrese de que el documento est activo en la ventana de documento.
2 Siga uno de estos procedimientos para colocar el archivo:
Seleccione Sitio > Colocar.
Haga clic en el icono Administracin de archivos de la barra de herramientas de la ventana
de documento y, a continuacin, seleccione Colocar en el men emergente.
pertenece a un solo sitio local, Dreamweaver abre ese sitio y realiza la operacin de colocacin.
Para mostrar el registro FTP:
Haga clic en el men de opciones situado en la esquina superior derecha del panel Archivos y
elija Ver > Registro FTP del sitio.
Temas relacionados
Obtencin de archivos de un servidor remoto en la pgina 104
Sincronizacin de los archivos de los sitios local y remoto
Despus de crear archivos en los sitios local y remoto, puede sincronizar los archivos de ambos
sitios.
Nota: si el sitio remoto es un servidor FTP (en lugar de un servidor de red), utilice FTP para
sincronizar los archivos.
Antes de sincronizar los sitios, puede verificar los archivos que desea colocar en el servidor remoto
u obtener del mismo. Dreamweaver tambin confirma los archivos que se han actualizado despus
de completar la sincronizacin.
Para averiguar cules son los archivos con fecha ms reciente en el sitio local o remoto sin
sincronizar, siga uno de estos procedimientos:
En el panel Archivos, haga clic en el men de opciones situado en la esquina superior derecha y,
a continuacin, seleccione Seleccionar > Seleccionar local ms reciente o Seleccionar >
Seleccionar remoto ms reciente.
En el panel Archivos, haga clic con el botn derecho del ratn (Windows) o haga clic con la
tecla Control presionada (Macintosh) y, a continuacin, seleccione Seleccionar > Seleccionar
local ms reciente o Seleccionar > Seleccionar remoto ms reciente.
Para sincronizar los archivos:
1 En el panel Archivos (Ventana > Archivos), seleccione un sitio del men emergente donde
aparece el sitio, el servidor o la unidad actuales.
2 Opcional: seleccione archivos o carpetas especficos.
Si desea sincronizar el sitio completo, omita este paso.
3 Haga clic con el botn derecho (Windows) o mientras presiona la tecla Control (Macintosh) y
seleccione Sincronizar en el men contextual.
Aparece el cuadro de dilogo Sincronizar archivos.
Dreamweaver sincroniza los archivos de forma automtica. Si los archivos ya estn
sincronizados, Dreamweaver le comunica que no es necesario realizar la sincronizacin.
Temas relacionados
Obtencin de archivos de un servidor remoto en la pgina 104
Colocacin de archivos en un servidor remoto en la pgina 106
Cmo ocultar carpetas y archivos en el sitio
La posibilidad de ocultar elementos de un sitio permite excluir carpetas y tipos de archivos al
realizar operaciones en todo el sitio como Obtener o Colocar.
Temas relacionados
Cmo ocultar elementos en el sitio en la pgina 82
Activacin y desactivacin de la ocultacin en el sitio
La ocultacin est activada de forma predeterminada en el sitio. Es posible desactivar la ocultacin
de archivos de forma permanente o provisional para poder realizar operaciones con todos los
archivos, incluidos los ocultos. Al desactivar la ocultacin del sitio, se muestran todos los archivos.
Al volver a activar la ocultacin, todos los archivos que estaban ocultos anteriormente vuelven a
ocultarse.
Nota: tambin puede utilizar la opcin Anular ocultacin de todo, para anular la ocultacin de todos
los archivos, pero esta opcin no desactiva la funcin de ocultacin. Adems, no existe ninguna
manera de volver a ocultar todas las carpetas y archivos que estaban ocultos anteriormente, salvo
activando de nuevo esta opcin para cada carpeta y tipo de archivo.
Para activar o desactivar la ocultacin del sitio:
1 En el panel Archivos (Ventana > Archivos), seleccione un sitio del men emergente donde
aparece el sitio, el servidor o la unidad actuales.
2 Seleccione un archivo o carpeta.
3 Haga clic con el botn derecho del ratn (Windows) o haga clic mientras pulsa la tecla Control
(Macintosh) y, a continuacin, siga uno de estos procedimientos:
Cmo ocultar carpetas y archivos en el sitio 109
Seleccione Activar/desactivar ocultacin.
Haga clic en Configuracin y seleccione Ocultacin en la lista de categoras que aparece en
la parte izquierda de la ficha Avanzadas del cuadro de dilogo Definicin del sitio.
Seleccione o deseleccione Activar ocultacin y, a continuacin, haga clic en Aceptar.
La ocultacin se activa o se desactiva para el sitio.
Temas relacionados
Cmo ocultar y anular la ocultacin de tipos de archivo especficos en la pgina 109
Cmo anular la ocultacin de todas las carpetas y archivos en la pgina 111
Cmo ocultar y anular la ocultacin de las carpetas del sitio
Puede ocultar carpetas especficas, pero no es posible ocultar todas las carpetas ni el sitio entero. Se
pueden ocultar varias carpetas concretas de forma simultnea.
Para ocultar o anular la ocultacin de carpetas especficas dentro de un sitio:
1 En el panel Archivos (Ventana > Archivos), seleccione un sitio que tenga activada la funcin de
ocultacin en el men emergente donde aparece el sitio, el servidor o la unidad actuales.
2 Seleccione las carpetas que desee ocultar, o cuya ocultacin desee anular.
3 Haga clic con el botn derecho (Windows) o mientras presiona la tecla Control (Macintosh) y
elija Ocultacin > Ocultar u Ocultacin > Anular ocultacin en el men contextual.
Aparece o desaparece una lnea roja que atraviesa el icono de la carpeta, lo cual indica si la carpeta
se encuentra oculta o no.
Nota: para realizar una operacin con una carpeta oculta determinada, puede seleccionar el
elemento en el panel Archivos y efectuar dicha operacin. Al realizar una operacin directamente con
un archivo o carpeta, se anula la ocultacin.
Temas relacionados
Activacin y desactivacin de la ocultacin en el sitio en la pgina 108
Cmo anular la ocultacin de todas las carpetas y archivos en la pgina 111
Cmo ocultar y anular la ocultacin de tipos de archivo especficos
Es posible indicar tipos de archivo especficos para su ocultacin para que Dreamweaver oculte
todos los archivos que tengan una determinada terminacin. Por ejemplo, puede ocultar todos los
archivos que terminen con la extensin .txt. Los tipos de archivo introducidos no tienen por qu
ser extensiones de archivo; pueden ser cualquier terminacin de un nombre de archivo.
Para ocultar tipos de archivo especficos dentro de un sitio:
2 Haga clic con el botn derecho del ratn (Windows) o mientras presiona la tecla Control
(Macintosh) y seleccione Configuracin.
El cuadro de dilogo Definicin del sitio muestra las opciones de ocultacin.
3 Active la casilla de verificacin Ocultar archivos que terminen en.
4 En el cuadro de texto, introduzca los tipos de archivo que desee ocultar.
Por ejemplo, podra introducir .jpg para ocultar todos los archivos del sitio que terminen en
.jpg.
Nota: separe los distintos tipos de archivo con un espacio. No utilice comas ni signos de punto y
coma.
Los nombres de los archivos afectados aparecen tachados con una lnea roja, que indica que se
encuentran ocultos.
Sugerencia: algunos productos de software crean archivos de copia de seguridad que terminan con
un sufijo determinado, como .bak. Es posible ocultar los archivos de este tipo.
Nota: para realizar una operacin con una carpeta oculta determinada, puede seleccionar el
elemento en el panel Archivos y efectuar dicha operacin. Al realizar una operacin directamente con
un archivo o carpeta, se anula la ocultacin.
Para anular la ocultacin de determinados tipos de archivos dentro de un sitio:
(Macintosh) y seleccione Ocultacin > Configuracin.
Aparece la ficha Avanzadas del cuadro de dilogo Definicin del sitio.
Desactive la casilla de verificacin Ocultar archivos que terminen en para anular la
ocultacin de todos los tipos de archivos que aparecen en el cuadro de texto.
Elimine algunos tipos de archivos del cuadro de texto para anular la ocultacin de dichos
tipos.
Almacenamiento de informacin sobre archivos en Design Notes 111
Las lneas rojas desaparecen de los nombres de los archivos afectados, indicando que ya no se
encuentran ocultos.
Temas relacionados
Cmo ocultar y anular la ocultacin de las carpetas del sitio en la pgina 109
Cmo anular la ocultacin de todas las carpetas y archivos
Es posible anular la ocultacin de todas las carpetas y archivos de un sitio de forma simultnea.
No es posible deshacer esta accin. No existe ninguna manera de volver a ocultar todos los
elementos ocultos anteriormente. Es necesario volver a ocultarlos de forma individual.
Sugerencia: si desea anular la ocultacin de todas las carpetas y archivos de forma provisional y
volver a ocultar dichos elementos, desactive la funcin de ocultacin en el sitio (vase Activacin y
desactivacin de la ocultacin en el sitio en la pgina 108).
Para anular la ocultacin de todas las carpetas y archivos dentro de un sitio:
2 Seleccione cualquier archivo o carpeta de ese sitio.
(Macintosh) y elija Ocultacin > Anular ocultacin de todo.
Nota: tambin se desactiva la casilla de verificacin Ocultar archivos que terminen en del cuadro
de dilogo que aparece tras elegir Sitio > Ocultacin > Configuracin.
Desaparecen las lneas rojas que atraviesan los iconos de carpetas y archivo, lo cual indica que se
ha anulado la ocultacin de todos los archivos y carpetas del sitio.
Temas relacionados
Cmo ocultar y anular la ocultacin de las carpetas del sitio en la pgina 109
Cmo ocultar y anular la ocultacin de tipos de archivo especficos en la pgina 109
Almacenamiento de informacin sobre archivos en Design
Notes
Design Notes son notas asociadas a un archivo, pero se almacenan en un archivo por separado.
Puede utilizar Design Notes para mantener informacin adicional asociada a los documentos,
como los nombres de los archivos de imagen y comentarios sobre el estado del archivo.
Temas relacionados
Design Notes en la pgina 83
Activacin y desactivacin de Design Notes para un sitio
Es posible activar y desactivar Design Notes para un sitio en la categora Design Notes del cuadro
de dilogo Definicin del sitio. Al activar Design Notes puede optar por utilizarlas slo de forma
local si lo desea.
Para activar o desactivar Design Notes para el sitio o para utilizar Design Notes de forma
local:
3 Seleccione Design Notes en la lista Categora de la izquierda.
Aparecer el cuadro de dilogo Definicin del sitio con las opciones de Design Notes.
Temas relacionados
Utilizacin de Design Notes en la pgina 113
Asociacin de Design Notes a archivos
Puede crear un archivo de Design Notes para cada documento o plantilla del sitio. Tambin
puede crear Design Notes para applets, controles ActiveX, imgenes, contenido Flash, objetos
Shockwave y campos de imagen en los documentos.
Nota: si aade Design Notes a un archivo de plantilla, los documentos creados con dicha plantilla no
heredarn las Design Notes.
Almacenamiento de informacin sobre archivos en Design Notes 113
Para aadir Design Notes a un documento:
Abra el archivo en la ventana de documento y seleccione Archivo > Design Notes.
tecla Control presionada (Macintosh) en el archivo y, a continuacin, seleccione Design
Notes.
Nota: si el archivo reside en un sitio remoto, primero debe proteger u obtener el archivo y, a
continuacin, seleccionarlo en la carpeta local (vase Desproteccin y proteccin de archivos en
una carpeta remota en la pgina 102 o Obtencin y colocacin de archivos en el servidor en
la pgina 104).
Aparece el cuadro de dilogo Design Notes.
3 Haga clic en Aceptar para guardar las notas.
Dreamweaver guardar las notas en una carpeta llamada _notes en la misma ubicacin que el
archivo actual. El nombre de archivo ser el nombre del documento ms la extensin .mno.
Por ejemplo, si el nombre del archivo es index.html, el archivo de Design Notes asociado se
llamar index.html.mno.
Temas relacionados
Utilizacin de Design Notes
Una vez que haya asociado una Design Note a un archivo (vase Asociacin de Design Notes a
archivos en la pgina 112), puede abrirla, cambiar su estado o eliminarla.
Para abrir las Design Notes asociadas a un archivo, siga uno de estos procedimientos:
Abra el archivo en la ventana de documento y seleccione Archivo > Design Notes.
tecla Control presionada (Macintosh) en el archivo y, a continuacin, seleccione Design Notes.
En la columna Notas del panel Archivos, haga doble clic en el icono amarillo de Design Notes.
Para asignar un estado personalizado a Design Notes:
1 Abra Design Notes para un archivo u objeto (vase el procedimiento anterior).
2 Haga clic en la ficha Toda la informacin.
3 Haga clic en el botn de signo ms (+).
4 En el campo Nombre, escriba la palabra status.
5 En el campo Valor, introduzca el estado.
Si ya existe un valor de estado, ser sustituido por el nuevo.
6 Haga clic en la ficha Informacin bsica y observe que el nuevo valor de estado aparece en el
men emergente Estado.
Nota: slo puede haber un valor personalizado en el men de estado a la vez. Si sigue este
procedimiento otra vez, Dreamweaver sustituir el valor de estado que introdujo la primera vez por el
nuevo valor que introduzca.
Para eliminar del sitio las Design Notes no asociadas:
2 Seleccione el sitio y, a continuacin, haga clic en Editar.
3 Seleccione Design Notes en la lista de categoras de la izquierda.
4 Haga clic en el botn Limpiar.
Dreamweaver le pedir que confirme si desea eliminar las Design Notes que ya no estn
asociadas a ningn archivo del sitio.
Si utiliza Dreamweaver para eliminar un archivo que tiene un archivo de Design Notes
asociado, tambin se eliminar el archivo de Design Notes. Por lo tanto, slo pueden
producirse archivos de Design Notes hurfanos si elimina o cambia el nombre de un archivo
fuera de Dreamweaver.
Nota: si desactiva la opcin Mantener Design Notes antes de hacer clic en Limpiar, Dreamweaver
eliminar todos los archivos de Design Notes del sitio.
Temas relacionados
Comprobacin del sitio 115
Comprobacin del sitio
Dreamweaver ofrece varias funciones para ayudarle a probar el sitio, incluidas la previsualizacin y
la comprobacin de pginas en los navegadores. Tambin puede ejecutar varios informes, como
los informes de vnculos rotos.
Directrices para la comprobacin del sitio
Antes de cargar el sitio en un servidor y dejarlo listo para visitas, conviene comprobarlo
localmente. En realidad, lo ideal es comprobar frecuentemente el sitio a medida que se crea para
detectar y solucionar los problemas cuanto antes para evitar que se repitan.
Deber asegurarse de que las pginas tienen la apariencia y el funcionamiento esperado en los
navegadores de destino, que no hay vnculos rotos y que las pginas no tardan demasiado en
cargarse. Tambin puede comprobar todo el sitio y solucionar los problemas ejecutando un
informe del sitio.
Las directrices siguientes le ayudarn a hacer ms sencilla la visita al sitio:
Compruebe que las pginas funcionan de la forma deseada en los navegadores de destino y que
funcionan correctamente o experimentan fallos mnimos en otros navegadores.
Las pginas debern ser legibles y funcionales en los navegadores que no admiten estilos, capas,
plug-ins o JavaScript (vase Comprobacin de la compatibilidad con los navegadores en
la pgina 448). Si las pginas muestran un funcionamiento muy deficiente en navegadores
antiguos, puede utilizar el comportamiento Comprobar navegador para remitir
automticamente a los visitantes a otra pgina (vase Comprobar navegador en
la pgina 388).
Obtenga una vista previa de las pginas en todos los navegadores y plataformas posibles.
De este modo podr observar las diferencias en diseo, color, tamao de fuentes y tamao
predeterminado de la ventana del navegador, diferencias que no podr detectar en una revisin
con un navegador de destino (vase Vista previa y comprobacin de pginas en los
navegadores en la pgina 277).
Compruebe si hay vnculos rotos en el sitio y reprelos.
Otros sitios tambin experimentan cambios de diseo y organizacin, por lo que es posible que
se hayan movido o borrado las pginas con las que se han establecido vnculos. Puede ejecutar
un informe de comprobacin para verificar los vnculos (vase Comprobacin de vnculos
rotos, externos y hurfanos en la pgina 347 y Reparacin de vnculos rotos en
la pgina 349).
Vigile el tamao de archivo de las pginas y el tiempo que tardan en descargarse (vase
Configuracin de las preferencias de tiempo de descarga y tamao en la pgina 279).
Recuerde que si una pgina se compone de una tabla grande, en algunos navegadores los
visitantes no vern nada hasta que termine de cargarse toda la tabla. Puede resultar conveniente
dividir las tablas grandes. Si no es posible, puede colocar algo de contenido, como un mensaje
de bienvenida o un rtulo publicitario, fuera de la tabla, en la parte superior de la pgina, de
modo que los usuarios puedan verlo mientras se descarga la tabla.
Genere varios informes del sitio para comprobar su funcionamiento y solucionar los
problemas.
Puede comprobar todo el sitio para detectar problemas como documentos sin ttulo, etiquetas
vacas y etiquetas anidadas repetidas (vase Comprobacin del sitio en la pgina 115).
Valide el cdigo para localizar errores en las etiquetas o la sintaxis del cdigo (vase Validacin
de etiquetas en la pgina 451).
Una vez publicado el grueso del sitio, no deje de actualizarlo y mantenerlo.
La publicacin del sitio (es decir, su activacin) puede llevarse a cabo de distintas formas y es
un proceso continuo. Una parte importante del proceso consiste en definir e implementar un
sistema de control de versiones, ya sea con las herramientas incluidas en Dreamweaver o
mediante otra aplicacin de control de versiones externa.
Utilice los foros de debate de Dreamweaver del sitio Web de Macromedia en
www.macromedia.com/go/dreamweaver_newsgroup.
Los foros son una importante fuente de recursos en la que, por ejemplo, podr obtener
informacin sobre los distintos navegadores y plataformas. Tambin podr intercambiar ideas
sobre aspectos tcnicos y compartir consejos con otros usuarios de Dreamweaver.
Utilizacin de informes para comprobar un sitio
Puede ejecutar informes de sitio sobre el flujo de trabajo o los atributos HTML, incluida la
accesibilidad, para el documento actual, los archivos seleccionados o todo el sitio.
Los informes de flujo de trabajo pueden mejorar la colaboracin entre los miembros de un equipo
Web. Puede ejecutar informes de flujo de trabajo que muestren a la persona que ha protegido un
archivo, los archivos que Design Notes ha asociado a dichos informes y los archivos que se han
modificado recientemente. Puede generar informes de Design Notes ms precisos especificando
parmetros de nombre/valor.
Nota: debe tener definida una conexin con el sitio remoto para ejecutar informes de flujo de trabajo.
Para definir un sitio remoto, vase Configuracin de una carpeta remota en la pgina 69.
Los informes HTML permiten compilar y generar informes para varios atributos HTML. Puede
comprobar etiquetas de fuentes anidadas combinables, la accesibilidad, etiquetas anidadas
redundantes, el texto alternativo que falta, las etiquetas vacas que pueden borrarse y los
documentos sin ttulo.
Despus de ejecutar un informe, puede guardarlo como archivo XML y, posteriormente,
importarlo a una instancia de plantilla, una base de datos o una hoja de clculo e imprimirlo o
mostrarlo en un sitio Web.
Nota: tambin puede aadir distintos tipos de informes a Dreamweaver a travs del sitio Web de
Macromedia Dreamweaver Exchange (vase Adicin de extensiones a Dreamweaver en
la pgina 61).
Para utilizar el comando Informes para comprobar los vnculos del sitio, vase Comprobacin de
vnculos rotos, externos y hurfanos en la pgina 347.
Comprobacin del sitio 117
Para ejecutar informes para probar un sitio:
1 Seleccione Sitio > Informes.
Sugerencia: si desea ejecutar slo un informe de accesibilidad para el sitio, puede seleccionar
Archivo > Comprobar pgina > Comprobar accesibilidad y el informe aparecer en el panel
Informes de sitios del grupo de paneles Resultados.
Se abre el cuadro de dilogo Informes.
2 Seleccione una categora sobre la que se elaborar el informe y el tipo de informe que desea
ejecutar.
3 Haga clic en Ejecutar para crear el informe.
En funcin del tipo de informe que ejecute, es posible que se le solicite que guarde el archivo,
defina el sitio o seleccione una carpeta (si todava no ha seleccionado ninguna).
Aparecer una lista de resultados en el panel Informes de sitios (en el grupo de paneles
Resultados).
Para utilizar y guardar un informe:
1 Ejecute un informe (vase el procedimiento anterior).
2 En el panel Informes de sitios, siga uno de estos procedimientos para visualizar el informe:
Haga clic en el encabezado de columna segn el cual desea ordenar los resultados.
Puede ordenar por nombre de archivo, nmero de lnea o descripcin. Tambin puede
ejecutar varios informes y mantenerlos abiertos.
Seleccione cualquier lnea del informe y, a continuacin, haga clic en el botn Ms info. en
la parte izquierda del panel Informes de sitios para ver una descripcin del problema.
La informacin aparece en el panel Referencia (en el grupo de paneles Cdigo).
Haga doble clic en cualquier lnea del informe para visualizar el cdigo correspondiente en
la ventana de documento.
Nota: si est en la vista Diseo, Dreamweaver cambia la visualizacin a la vista dividida para
mostrar el problema detectado en el cdigo.
3 Haga clic en Guardar informe para guardar el informe.
Al guardar un informe, puede importarlo a un archivo de plantilla existente. A continuacin,
puede importar el archivo de plantilla a una base de datos u hoja de clculo para imprimirlo o
utilizar el archivo para mostrar el informe en un sitio Web.
Sugerencia: despus de ejecutar los informes HTML, utilice el comando Limpiar HTML para
corregir los errores HTML notificados en los informes (vase Limpieza del cdigo en
la pgina 447).
Temas relacionados
Informes en Dreamweaver en la pgina 40
119
CAPTULO 5
Administracin de activos y bibliotecas
Conforme desarrolle sitios Web acumular un nmero cada vez mayor de activos. En algunos
casos quiz use los mismos activos en varios sitios y tambin es posible que disponga de un
conjunto de activos seleccionados que utilice en todos los sitios. Macromedia Dreamweaver MX
2004 se puede utilizar para administrar los activos del sitio. A travs de este panel puede realizar
un fcil seguimiento y obtener vistas previas de diversos tipos de activos almacenados en el sitio,
como imgenes, pelculas, colores, scripts y vnculos. Adems puede arrastrar un activo y soltarlo
directamente en el documento actual para insertarlo en una pgina.
Dreamweaver tambin proporciona acceso a dos tipos de activos especiales: las bibliotecas y las
plantillas. Los elementos de biblioteca y las plantillas son activos vinculados: al editar un elemento
de biblioteca o una plantilla se actualizan todos los documentos a los que se han aplicado esos
activos. Los elementos de biblioteca estn concebidos para elementos de diseo individuales,
como la informacin de copyright de un sitio o un logotipo. Las plantillas permiten controlar un
rea de diseo ms amplia. (Para ms informacin, consulte el Captulo 11, Administracin de
plantillas, en la pgina 221.)
Este captulo trata los temas siguientes:
Elementos de biblioteca en la pgina 120
Utilizacin de activos en la pgina 121
Creacin y administracin de una lista de activos favoritos en la pgina 127
Utilizacin de los elementos de biblioteca en la pgina 129
120 Captulo 5: Administracin de activos y bibliotecas
Elementos de biblioteca
Una biblioteca es un archivo especial de Dreamweaver que contiene un conjunto de activos
individuales o copias de activos que se han creado para colocar en las pginas Web. Estos activos
de una biblioteca se denominan elementos de biblioteca. Puede actualizar todas las pginas que
utilizan un elemento de biblioteca cada vez que cambie el contenido del elemento. En una
biblioteca, puede almacenar todo tipo de elementos de pgina, como imgenes, tablas, sonidos y
archivos Flash.
Este es un ejemplo de cmo se debe usar un elemento de biblioteca: suponga que est creando un
sitio grande para una empresa. La empresa tiene un eslogan que desea que aparezca en todas las
pginas del sitio, pero el departamento de marketing todava est dando los ltimos toques al
texto. Si crea un elemento de biblioteca para contener el eslogan y usa ese elemento de biblioteca
en todas las pginas, cuando el departamento de marketing proporcione el eslogan final, bastar
con cambiar el elemento de biblioteca y actualizar automticamente todas las pginas que lo
utilicen.
Dreamweaver almacena los elementos de biblioteca en una carpeta llamada Library dentro de la
carpeta raz local del sitio en cuestin. Cada sitio dispone de una biblioteca propia.
Nota: si el elemento de biblioteca contiene vnculos, es posible que stos no funcionen en el sitio
nuevo. Adems, las imgenes de un elemento de biblioteca no se copian en el sitio nuevo.
Cuando se utiliza un elemento de biblioteca, Dreamweaver no inserta el elemento de biblioteca en
la pgina Web, sino que inserta un vnculo en el elemento de biblioteca. Esto es, Dreamweaver
inserta una copia del cdigo fuente HTML para dicho elemento en el documento y aade un
comentario HTML que contiene una referencia al elemento externo original.
La referencia al elemento de biblioteca externo hace posible la actualizacin del contenido en todo el
sitio de una sola vez. Para ello, cambie el elemento de biblioteca y, seguidamente, utilice los
comandos de actualizacin del submen Modificar > Biblioteca. Si tiene que cambiar un texto o una
imagen, cuando se actualice el elemento de biblioteca, la instancia de la biblioteca se actualizar
automticamente en todas las pginas en las que se haya insertado el elemento de biblioteca.
Cuando se crea un elemento de biblioteca con un comportamiento de Dreamweaver adjunto,
Dreamweaver copia el elemento y su manejador de eventos (el atributo que especifica el evento
que desencadena la accin, como onClick, onLoad u onMouseOver, y la accin que se debe
llamar cuando se produce el evento) en el archivo de elemento de biblioteca. Dreamweaver no
copia en el elemento de biblioteca las funciones JavaScript asociadas. Cuando se inserta un
elemento de biblioteca en un documento, Dreamweaver inserta automticamente las funciones
JavaScript correspondientes en la seccin head de ese documento (si no se encontraban all).
Nota: si crea cdigo JavaScript manualmente (es decir, si lo crea sin usar los comportamientos de
Dreamweaver), puede incluirlo en un elemento de biblioteca utilizando el comportamiento Llamar
JavaScript para ejecutar el cdigo. Si no utiliza un comportamiento de Dreamweaver para ejecutar el
cdigo, el cdigo no se conserva como parte del elemento de biblioteca.
Se deben tener en cuenta requisitos especiales al editar los comportamientos de los elementos de
biblioteca (vase Edicin de un comportamiento en un elemento de biblioteca en
la pgina 135). Los elementos de biblioteca no pueden contener hojas de estilos, ya que el cdigo
de dichos elementos forma parte de la seccin head.
Temas relacionados
Utilizacin de activos 121
Utilizacin de activos
Los activos pueden ser diversos elementos que se almacenan en un sitio, como archivos de imagen
o de pelcula.
Puede obtener activos de distintas fuentes. Por ejemplo, puede crear activos en una aplicacin
como Macromedia Fireworks o Macromedia Flash, se los puede proporcionar un compaero, los
puede copiar de un CD de ilustraciones o copiarlos de un sitio Web de grficos.
Temas relacionados
Creacin y administracin de una lista de activos favoritos en la pgina 127
Visualizacin de activos en el panel Activos
Los activos del sitio actual se pueden ver y administrar con el panel Activos. En el panel Activos se
muestran los activos del sitio asociados al documento activo en la ventana de documento.
Nota: deber definir un sitio local antes de ver los activos en el panel Activos. Para ms informacin
sobre la configuracin de un sitio, consulte Configuracin de un sitio de Dreamweaver nuevo en
la pgina 65.
El panel Activos proporciona dos vistas:
La lista Sitio enumera todos los activos del sitio, incluidos los colores y los URL que se utilizan en
los documentos del sitio.
La lista Favoritos enumera nicamente los activos que haya elegido de forma explcita.
En ambas listas, los activos se dividen en categoras (en la parte izquierda del panel Activos). Tanto
la lista Sitio como la lista Favoritos estn disponibles para todas las categoras de activos, salvo las
plantillas y los elementos de biblioteca.
Nota: la mayor parte de las operaciones del panel Activos tienen el mismo funcionamiento en la lista
Sitio que en la lista Favoritos. Sin embargo, algunas tareas slo se pueden realizar en la lista
Favoritos (vase Creacin y administracin de una lista de activos favoritos en la pgina 127).
De forma predeterminada, los activos de una determinada categora aparecen ordenados
alfabticamente por nombre. Se puede ordenar la lista de activos segn otros criterios y se puede
cambiar el tamao de las columnas. Se puede obtener una vista previa de los activos de una
categora y cambiar el tamao de la zona de vista previa.
Para abrir el panel Activos:
Seleccione Ventana > Activos.
Aparecer el panel Activos. La categora Imgenes aparece seleccionada de forma
predeterminada.
Para ver la lista Sitio:
En el panel Activos (Ventana > Activos), seleccione la opcin Sitio que hallar en la parte
superior del panel.
Nota: en la categora Plantillas y Biblioteca (situada en la parte izquierda del panel Activos), las
opciones Sitio y Favoritos aparecen desactivadas.
Para ver la lista Favoritos:
En el panel Activos (Ventana > Activos), seleccione la opcin Favoritos que hallar en la parte
superior del panel.
La lista Favoritos permanece vaca hasta que expresamente le aada activos.
Nota: en la categora Plantillas y Biblioteca (situada en la parte izquierda del panel Activos), las
opciones Sitio y Favoritos aparecen desactivadas.
Para mostrar activos de una determinada categora:
Haga clic en el icono correspondiente situado en la parte izquierda del panel Activos (Ventana
> Activos).
Para presentar los activos en un orden distinto:
Haga clic en uno de los encabezados de columna.
Por ejemplo, para ordenar la lista de imgenes por tipo (de modo que todas las imgenes GIF,
JPEG, etc. aparezcan juntas), haga clic en el encabezado de columna Tipo.
Para cambiar el ancho de una columna:
Arrastre la lnea que separa los dos encabezados de columna.
Para obtener una vista previa de un activo:
Seleccione el activo en el panel Activos.
En el rea de la parte superior del panel se mostrar una vista previa del activo.
Por ejemplo, cuando se selecciona un activo de pelcula, el rea de vista previa muestra un
icono. Para ver la pelcula, haga clic en el botn Reproducir (el tringulo verde) en la esquina
superior derecha del rea de vista previa.
Para cambiar el tamao del rea de vista previa:
Arrastre la barra de separacin (entre el rea de vista previa y la lista de activos) hacia arriba o
hacia abajo.
Temas relacionados
Adicin de un activo a un documento en la pgina 124
Seleccin y edicin de activos en la pgina 125
Actualizacin del panel Activos
El panel Activos puede tardar unos segundos en crear la lista Sitio, pues debe leer la cach del sitio.
Algunos cambios no aparecen inmediatamente en el panel Activos.
Al aadir o eliminar un activo del sitio, los cambios no se reflejan en el panel Activos hasta que
se actualiza la lista Sitio haciendo clic en el botn Actualizar lista del sitio. Si aade o elimina
un activo fuera de Dreamweaver, utilizando el Explorador de Windows o el Finder, por
ejemplo, deber volver a generar la cach del sitio para actualizar el panel Activos.
Si elimina la nica instancia de un determinado color o URL en el sitio o si guarda un archivo
nuevo que contiene un color o URL que an no se usa en el sitio, los cambios no se reflejarn
en el panel Activos hasta que actualice la lista Sitio.
Para actualizar manualmente la lista Sitio:
1 En el panel Activos (Ventana > Activos), seleccione la opcin Sitio situada en la parte superior
del panel para ver la lista Sitio.
2 Haga clic en el botn Actualizar lista del sitio en la parte inferior del panel Activos.
Dreamweaver crea o actualiza la cach del sitio y el panel Activos se actualiza para mostrar los
activos del sitio.
Para volver a generar manualmente la cach del sitio y actualizar la lista Sitio:
En el panel Activos (Ventana > Activos), haga clic con el botn derecho del ratn (Windows) o
presione Comando y haga clic (Macintosh) en la lista Activos y seleccione Actualizar lista del
sitio.
Temas relacionados
Reutilizacin de activos en otro sitio en la pgina 126
Adicin de un activo a un documento
Puede insertar la mayora de los tipos de activos en un documento arrastrndolos a la ventana de
documento en la vista Cdigo o Diseo o utilizando el botn Insertar. Puede insertar colores y
URL o aplicarlos al texto seleccionado en la vista Diseo. Los URL tambin se pueden aplicar a
otros elementos, como las imgenes, en la vista Diseo.
Para insertar un activo en un documento:
1 Site el punto de insercin en la vista Diseo donde desea que aparezca el activo.
2 En el panel Activos (Ventana > Activos), seleccione la categora situada en la parte izquierda del
panel para el tipo de activo que desee insertar.
Nota: seleccione cualquier categora salvo Plantillas. Las plantillas slo se pueden aplicar al
documento completo, no se pueden insertar en el documento. Para ms informacin sobre
plantillas, consulte el Captulo 11, Administracin de plantillas, en la pgina 221.
3 Seleccione Sitio o Favoritos en la parte superior del panel y, a continuacin, seleccione el activo
que desee insertar.
No hay listas Sitio o Favoritos para elementos de biblioteca. Omita este paso si desea insertar
un elemento de biblioteca.
Arrastre el activo desde el panel hasta el documento.
Puede arrastrar scripts y soltarlos en el rea de contenido de encabezado de la ventana de
documento. Si el rea est oculta, elija Ver > Contenido de Head.
Seleccione el activo en el panel y haga clic en el botn Insertar situado en la parte inferior del
panel.
El activo se insertar en el documento. Si el activo es un color, se aplicar a partir del punto de
insercin. Es decir, lo prximo que escriba aparecer con ese color.
Temas relacionados
Aplicacin de un URL a una imagen o texto con el panel Activos en la pgina 125
Aplicacin de color a un texto con el panel Activos
Los colores del panel Activos representan colores que se han aplicado a diversos elementos del
sitio, como texto, borde de tabla, fondo, etc. Puede utilizar las muestras de color de la categora
Color para aplicar constantemente las opciones de color a objetos de una pgina.
Para informacin sobre cmo aadir un color a la categora Color, vase Adicin y eliminacin
de activos de la lista Favoritos en la pgina 127.
Para cambiar el color del texto seleccionado en un documento:
1 Seleccione texto en el documento.
2 En el panel Activos (Ventana > Activos), seleccione la categora Colores situada en la parte
izquierda del panel.
3 Seleccione el color deseado.
4 Haga clic en el botn Aplicar del panel.
Temas relacionados
Aplicacin de un URL a una imagen o texto con el panel Activos
Mediante el panel Activos puede convertir el texto o la imagen seleccionados en un vnculo activo.
Para aadir un vnculo a la seleccin actual en un documento:
1 Seleccione el texto o la imagen donde desee aplicar el URL.
2 En el panel Activos (Ventana > Activos), seleccione la categora URL situada en la parte
3 Seleccione el URL que desee.
Arrastre el URL desde el panel hasta la seleccin en la vista Diseo.
Seleccione el URL y, a continuacin, haga clic en el botn Insertar.
Temas relacionados
Aplicacin de color a un texto con el panel Activos en la pgina 124
Seleccin y edicin de activos
El panel Activos permite seleccionar mltiples activos simultneamente. Asimismo, constituye un
mtodo rpido para comenzar a editar activos.
Para seleccionar mltiples activos:
1 En el panel Activos (Ventana > Activos), seleccione uno de los activos.
2 Seleccione los otros activos de una de estas formas:
Presione la tecla Mays mientras hace clic para seleccionar una serie de activos consecutivos.
Presione Control (Windows) o Comando (Macintosh) mientras hace clic para aadir un
activo individual a la seleccin (aunque no sea adyacente a la seleccin existente). Presione la
tecla Control o Comando mientras hace clic en un activo seleccionado para dejar de
seleccionarlo.
Para editar un activo:
1 En el panel Activos (Ventana > Activos), siga uno de estos procedimientos:
Haga doble clic en el activo.
Seleccione el activo y haga clic en el botn Editar situado en la parte inferior del panel.
La edicin de algunos tipos de activos, como las imgenes, inicia una aplicacin de edicin
externa. La edicin de activos de colores y URL slo permite cambiar su valor en la lista
Favoritos. No se pueden editar colores y URL en la lista Sitio. La edicin de activos de
plantillas y elementos de biblioteca permite realizar cambios en el activo dentro de
Dreamweaver.
Nota: si no se abre el editor externo para a un activo que necesita utilizar un editor, elija Edicin >
Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh), seleccione la categora
Tipos de archivo/editores y compruebe que dispone de un editor externo definido para el tipo de
archivo del activo. (Vase Inicio de un editor externo de archivos multimedia en la pgina 369.)
2 Realice los cambios deseados en el activo.
3 Cuando termine de editar el activo, siga uno de estos procedimientos:
Si el activo est basado en archivos (cualquier activo salvo un color o un URL), gurdelo
(utilizando el editor que emple para editarlo) y cirrelo.
Si el activo es un URL, haga clic en Aceptar cuando termine de editarlo en el cuadro de
dilogo Editar URL.
Si el activo es un color, el selector de color de Dreamweaver se ocultar automticamente
cuando elija un color.
Nota: para ocultar el selector de color sin elegir un color, presione la tecla Esc.
Temas relacionados
Visualizacin de activos en el panel Activos en la pgina 121
Actualizacin del panel Activos en la pgina 123
Reutilizacin de activos en otro sitio
El panel Activos muestra todos los activos (de tipos reconocidos) presentes en el sitio actual. Para
utilizar un activo del sitio actual en otro sitio deber copiarlo. Puede copiar un activo individual,
un conjunto de activos individuales o toda la carpeta Favoritos al mismo tiempo.
Antes de transferir el activo al sitio remoto o desde ste, es posible que tenga que localizar en el
panel Archivos el archivo correspondiente a un activo del panel Activos.
Nota: el panel Archivos puede mostrar un sitio distinto del que aparece en el panel Activos. Esto se
debe a que el panel Activos est asociado al documento activo.
Para localizar el archivo de un activo en el panel Archivos:
panel para el tipo de activo que desee buscar.
2 Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control y haga clic
(Macintosh) en el nombre o el icono del activo del panel Activos y elija Localizar en sitio en el
men contextual.
Nota: la opcin Localizar en sitio no est disponible para colores o URL, pues estos no
corresponden a archivos del sitio.
Aparecer el panel Archivos con el archivo del activo seleccionado. El comando Localizar en
sitio localiza el archivo correspondiente al activo, no un archivo que haga uso de ste.
Para copiar activos desde la lista Sitio o Favoritos del panel Activos en otro sitio:
panel para el tipo de activo que desee copiar.
(Macintosh) en el activo o activos para copiar, seleccione Copiar en sitio y, despus, seleccione
el nombre del sitio de destino en el submen. El submen muestra todos los sitios que ha
definido.
Creacin y administracin de una lista de activos favoritos 127
Nota: en la lista Favoritos, puede copiar una carpeta Favoritos y activos individuales. Para
informacin sobre la carpeta Favoritos, vase Agrupamiento de activos en una carpeta
Favoritos en la pgina 129.
Los activos se copian en el sitio especificado, en ubicaciones correspondientes a sus ubicaciones
en el sitio actual. Dreamweaver crea las carpetas necesarias en la jerarqua del sitio de destino.
Los activos tambin se aaden a la lista Favoritos del sitio especificado.
Cuando se abre un documento en el sitio de destino, el panel Activos cambia a ese sitio y muestra
el activo copiado.
Nota: si el activo que ha copiado es un color o un URL slo aparecer en la lista Favoritos del otro
sitio, no en la lista Sitio. Esto se debe a que no hay un archivo correspondiente al color o al URL, por
lo que no hay ningn archivo que copiar en el otro sitio.
Temas relacionados
Actualizacin del panel Activos en la pgina 123
Creacin y administracin de una lista de activos favoritos
Dado que la lista Sitio del panel Activos siempre muestra todos los activos reconocidos en el sitio,
puede estar sobrecargada en los sitios grandes. Puede aadir activos usados a menudo a la lista
Favoritos, agrupar activos relacionados, asignarles apodos para recordar su funcin y localizarlos
rpidamente en el panel Activos.
Nota: los activos favoritos no se almacenan como archivos aparte en el disco, ya que son referencias
a los activos de la lista Sitio. Dreamweaver realiza un seguimiento de los activos de la lista Sitio que
se muestran en la lista Favoritos.
La mayor parte de las operaciones del panel Activos tienen el mismo funcionamiento en la lista
Favoritos que en la lista Sitio. Sin embargo, hay algunas tareas que slo se pueden realizar en la
lista Favoritos.
Adicin y eliminacin de activos de la lista Favoritos
Los activos se pueden aadir a la lista Favoritos del panel Activos de diversas formas.
Para aadir un color o un URL a la lista Favoritos se requiere un paso adicional. No se pueden
aadir colores o URL nuevos a la lista Sitio, pues sta contiene nicamente los activos que ya se
estn usando en el sitio.
Nota: no hay listas Favoritos para plantillas y elementos de biblioteca.
Para aadir activos a la lista Favoritos, siga uno de estos procedimientos:
Seleccione uno o varios activos de la lista Sitio del panel Activos, haga clic en el botn Aadir a
favoritos situado en la parte inferior del panel.
Seleccione uno o ms activos en la lista Sitio del panel Activos, haga clic con el botn derecho
(Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y elija Aadir a
Favoritos.
Seleccione uno o ms archivos del panel Archivos, haga clic con el botn derecho (Windows) o
mantenga presionada la tecla Control y haga clic (Macintosh) y elija Aadir a Favoritos.
Dreamweaver omite los archivos que no correspondan a una categora del panel Activos.
Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control y haga clic
(Macintosh) en un elemento en la vista de Diseo de la ventana de documento y elija el
comando del men contextual para aadir el elemento a la categora Favoritos correspondiente.
Observe que el men contextual para texto contiene Aadir a colores favoritos o Aadir a URL
favoritos, en funcin de si el texto tiene un vnculo o no. Cabe destacar asimismo que slo los
elementos que corresponden a una de las categoras del panel Activos se pueden aadir a la lista
Favoritos.
Para aadir un nuevo color o URL a la lista Favoritos:
1 En el panel Activos (Ventana > Activos), seleccione la categora URL situada en la parte
2 Seleccione la opcin Favoritos en la parte superior del panel para que aparezca la lista Favoritos.
3 Haga clic en el botn Nuevo color o Nuevo URL situado en la parte inferior del panel.
Seleccione un color en el selector y, si lo desea, asgnele un apodo (vase Creacin de un
apodo para un activo favorito en la pgina 128).
Para salir del selector de color sin seleccionar ningn color, presione la tecla Esc o haga clic
en la barra gris situada en la parte superior del selector de color. Para ms informacin sobre
el uso del selector de color, consulte Utilizacin de colores en la pgina 267.
Introduzca un URL y un apodo en el cuadro de dilogo Aadir nuevo URL y haga clic en
Aceptar.
Para eliminar activos de la lista Favoritos:
1 En el panel Activos (Ventana > Activos), seleccione la opcin Favoritos que hallar en la parte
superior del panel.
2 Seleccione uno o varios activos (o una carpeta) en la lista Favoritos.
3 Haga clic en el botn Quitar de favoritos situado en la parte inferior del panel Activos.
Los activos se eliminarn de la lista Favoritos, pero seguirn presentes en la lista Sitio. Si
elimina una carpeta Favoritos, tanto la carpeta como todos los activos que contiene
desaparecern de la lista Favoritos.
Temas relacionados
Creacin de un apodo para un activo favorito en la pgina 128
Creacin de un apodo para un activo favorito
Puede asignar apodos a los activos de la lista Favoritos. El apodo se mostrar en lugar del nombre
de archivo o el valor del activo. Por ejemplo, si tiene un color llamado #999900, puede emplear
un apodo ms descriptivo, como ColorFondoPgina o ColorTextoImportante.
Puede asignar apodos a los activos de la lista Favoritos del panel Activos. En la lista Sitio, los
activos se muestran con sus nombres de archivo reales (o con sus valores, en el caso de colores o
URL).
Para asignar un apodo a un activo favorito:
1 En el panel Activos (Ventana > Activos), seleccione la categora que contiene el activo situada
en la parte izquierda del panel.
Utilizacin de los elementos de biblioteca 129
2 Seleccione la opcin Favoritos situada en la parte superior del panel para que aparezca la lista
Favoritos.
Control y haga clic (Macintosh) en el nombre o el icono del activo del panel Activos y
seleccione Editar apodo.
Haga clic en el nombre del activo, espere y vuelva a hacer clic.
4 Escriba un apodo para el activo y, a continuacin, presione la tecla Intro (Windows) o Retorno
(Macintosh).
El apodo aparecer en la columna Apodo.
Temas relacionados
Adicin y eliminacin de activos de la lista Favoritos en la pgina 127
Agrupamiento de activos en una carpeta Favoritos
Puede agrupar activos de la lista Favoritos en carpetas del panel Activos. Por ejemplo, si tiene una
serie de imgenes que utiliza en muchas pginas de catlogo de un sitio de comercio electrnico,
puede agruparlas en una carpeta llamada ImgenesCatlogo.
Nota: al colocar un activo en una carpeta Favoritos no cambia la ubicacin del archivo del activo en el
disco.
Para crear una carpeta Favoritos:
1 En el panel Activos (Ventana > Activos), seleccione la opcin Favoritos situada en la parte
superior del panel.
2 Haga clic en el botn Nueva carpeta de favoritos situada en la parte inferior del panel.
3 Escriba un nombre para la carpeta y presione la tecla Intro (Windows) o Retorno (Macintosh).
4 Arrastre los activos a la carpeta.
Temas relacionados
Adicin y eliminacin de activos de la lista Favoritos en la pgina 127
Creacin de un apodo para un activo favorito en la pgina 128
Utilizacin de los elementos de biblioteca
Las bibliotecas son un modo de almacenar elementos de pgina tales como imgenes, texto y otros
objetos que desee reutilizar o actualizar frecuentemente en el sitio Web. Dichos elementos se
denominan elementos de biblioteca.
Temas relacionados
Elementos de biblioteca en la pgina 120
Creacin de un elemento de biblioteca
Puede crear un elemento de biblioteca a partir de cualquier elemento de la seccin body de un
documento, incluyendo texto, tablas, formularios, applets de Java, plug-ins, elementos ActiveX,
barras de navegacin e imgenes.
En el caso de elementos vinculados como imgenes, la biblioteca solamente almacena una
referencia al elemento. El archivo original debe permanecer en la ubicacin especificada para que
el elemento de biblioteca funcione correctamente.
Sin embargo, puede resultar til almacenar una imagen en un elemento de biblioteca; por
ejemplo, puede almacenar una etiqueta img completa en un elemento de biblioteca, lo que le
permitir cambiar fcilmente el texto alt de la imagen, o incluso su atributo src, en todo el sitio.
(No utilice esta tcnica para cambiar los atributos width y height de la imagen, a no ser que
utilice adems un editor de imgenes para cambiar el tamao real de la imagen.)
Para crear un elemento de biblioteca basado en una seleccin:
1 En la ventana de documento, seleccione una parte de un documento que vaya a guardar como
elemento de biblioteca.
Arrastre la seleccin a la categora Biblioteca del panel Activos (Ventana > Activos).
Haga clic en el botn Nuevo elemento de biblioteca que se encuentra en la parte inferior de
la categora Biblioteca del panel Activos (Ventana > Activos).
Elija Modificar > Biblioteca > Aadir objeto a Biblioteca.
3 Escriba un nombre para el nuevo elemento de biblioteca y presione Intro (Windows) o Retorno
(Macintosh).
Dreamweaver guarda cada elemento de biblioteca como archivo independiente (con la
extensin de archivo .lbi) en la carpeta Library de la carpeta raz local del sitio.
Para crear un elemento de biblioteca vaco:
1 Compruebe que no hay nada seleccionado en la ventana de documento.
Si hay algo seleccionado, se colocar en el nuevo elemento de biblioteca.
2 En el panel Activos (Ventana > Activos), seleccione la categora Biblioteca situada en la parte
3 Haga clic en el botn Nuevo elemento de biblioteca, situado en la parte inferior del panel
Activos.
Se aadir un elemento de biblioteca nuevo y sin ttulo a la lista del panel.
4 Con el elemento an seleccionado, escrbale un nombre y presione Intro (Windows) o Retorno
(Macintosh).
Temas relacionados
Edicin de un elemento de biblioteca en la pgina 131
Configuracin de preferencias de resaltado de bibliotecas en la pgina 133
Insercin de un elemento de biblioteca en un documento
Cuando aada un elemento de biblioteca a una pgina, se insertar el contenido en el documento
junto con una referencia al elemento de biblioteca.
Para insertar un elemento de biblioteca en un documento:
1 Site el punto de insercin en la ventana de documento.
Arrastre un elemento de biblioteca del panel Activos y sultelo en la ventana del documento.
Sugerencia: para insertar el contenido de un elemento de biblioteca sin incluir una referencia al
elemento en el documento, presione Control (Windows) u Opcin (Macintosh) mientras
arrastra el elemento fuera del panel Activos. Si inserta un elemento de esta forma, puede
editarlo en el documento, pero el documento no se actualizar cuando usted actualice las
pginas que utilizan ese elemento de biblioteca.
Seleccione un elemento de biblioteca y haga clic en el botn Insertar situado en la parte
inferior del panel.
Temas relacionados
Creacin de un elemento de biblioteca en la pgina 130
Edicin de las propiedades de un elemento de biblioteca en la pgina 134
Conversin de elementos de biblioteca en editables en un documento en la pgina 134
Edicin de un elemento de biblioteca
Al editar un elemento de biblioteca, se pueden actualizar todos los documentos que lo utilizan.
Aunque decida no actualizarlos, los documentos siguen asociados al elemento de biblioteca y, por
tanto, podr actualizarlos ms adelante.
Otros tipos de modificaciones de los elementos de biblioteca incluyen el cambio de nombre de los
elementos para romper su conexin con documentos o plantillas, la eliminacin de elementos de
la biblioteca del sitio y la creacin de nuevo de un elemento de biblioteca perdido.
Nota: el panel Estilos CSS no se encuentra disponible al editar elementos de biblioteca, ya que estos
elementos slo pueden contener elementos body y cdigo de las hojas de estilos CSS en la seccin
head de un documento. El cuadro de dilogo Propiedades de pgina tampoco se encuentra
disponible, pues un elemento de biblioteca no puede incluir una etiqueta body ni sus atributos.
Para editar un elemento de biblioteca:
2 Seleccione un elemento de biblioteca.
En la parte superior del panel Activos aparecer una vista previa del elemento de biblioteca.
(No se puede editar nada en la vista previa.)
Haga clic en el botn Editar situado en la parte inferior del panel.
Haga doble clic en el elemento de biblioteca.
Dreamweaver abrir una nueva ventana para que edite el elemento de biblioteca. La ventana se
parece mucho a la ventana de documento, pero su Vista de Diseo tiene un fondo gris que
indica que se est editando un elemento de biblioteca en lugar de un documento.
4 Edite el elemento de biblioteca y guarde los cambios.
5 En el cuadro de dilogo que aparece, seleccione si desea actualizar los documentos del sitio local
que utiliza el elemento de biblioteca editado:
Elija Actualizar para actualizar todos los documentos del sitio local con el elemento de
biblioteca editado.
Elija No actualizar para impedir que se modifiquen los documentos hasta que utilice
Modificar > Biblioteca > Actualizar pgina actual o Actualizar pginas.
Para actualizar el documento actual para que utilice la versin actual de todos los
elementos de biblioteca:
Elija Modificar > Biblioteca > Actualizar pgina actual.
Para actualizar el sitio completo o todos los documentos que usen un elemento de
biblioteca concreto:
1 Elija Modificar > Biblioteca > Actualizar pginas.
Aparecer el cuadro de dilogo Actualizar pginas.
2 En el men emergente Buscar en, siga uno de estos procedimientos:
Seleccione Todo el sitio y, a continuacin, el nombre del sitio en el men emergente que
aparece al lado.
De esta manera se actualizarn todas las pginas del sitio seleccionado para que utilicen la
versin actual de todos los elementos de biblioteca.
Elija Archivos que usan y luego seleccione el nombre del elemento de biblioteca en el men
emergente que aparece al lado.
Se actualizarn todas las pginas del sitio actual que usen el elemento de biblioteca seleccionado.
3 Asegrese de que Elementos de biblioteca est seleccionado en la opcin Actualizar.
Sugerencia: para actualizar plantillas al mismo tiempo, asegrese de que tambin est
seleccionada la opcin Plantillas. Para ms informacin, consulte Apertura de una plantilla para
editarla en la pgina 248.
4 Haga clic en Iniciar.
Dreamweaver actualizar los archivos como se ha indicado. Si selecciona la opcin Mostrar
registro, Dreamweaver proporcionar informacin sobre los archivos que intenta actualizar,
indicando si se han actualizado satisfactoriamente.
Para cambiar el nombre de un elemento de biblioteca:
2 Seleccione el elemento de biblioteca al que desee cambiar el nombre, haga una pausa y vuelva a
hacer clic.
3 Cuando se pueda editar el nombre, introduzca el que desee.
Nota: este mtodo para cambiar el nombre funciona igual que en el Explorador de Windows
(Windows) o el Finder (Macintosh). Al igual que en el Explorador de Windows y el Finder, no
olvide hacer una breve pausa entre los dos clics del ratn. No haga doble clic en el nombre, ya que
se abrira el elemento de biblioteca para su edicin.
4 Haga clic en cualquier lugar o presione la tecla Intro (Windows) o Retorno (Macintosh).
5 Dreamweaver le preguntar si desea actualizar los documentos que usan el elemento.
Para actualizar todos los documentos del sitio que usan el elemento, haga clic en Actualizar.
Para que no se actualice ninguno de los documentos que usan el elemento, haga clic en No
actualizar.
Para eliminar un elemento de una biblioteca:
2 Seleccione el elemento de biblioteca que desee eliminar.
Haga clic en el botn Eliminar situado en la parte inferior del panel y confirme que desea
eliminar el elemento.
Haga clic en el botn Eliminar y confirme que desea eliminar el elemento.
Atencin: tenga presente que cuando se elimina un elemento de biblioteca, no se puede emplear
el comando Deshacer para recuperarlo. Sin embargo, puede volver a crearlo, como se describe en
el procedimiento siguiente.
Dreamweaver quita el elemento de la biblioteca, pero no cambia el contenido de los
documentos que lo utilizan.
Para volver a crear un elemento de biblioteca que falta o se ha eliminado:
1 Seleccione una instancia del elemento en uno de los documentos.
2 Haga clic en el botn Volver a crear del inspector de propiedades (Ventana > Propiedades).
Temas relacionados
Conversin de elementos de biblioteca en editables en un documento en la pgina 134
Edicin de un comportamiento en un elemento de biblioteca en la pgina 135
Configuracin de preferencias de resaltado de bibliotecas
Puede personalizar el color de resaltado de los elementos de biblioteca y mostrar u ocultar el
resaltado de los elementos de biblioteca configurando las preferencias de Resaltando.
Para cambiar el color de resaltado de los elementos de biblioteca:
2 Seleccione la categora Resaltando de la lista de la izquierda.
3 Haga clic en el cuadro de color de Elementos de biblioteca y seleccione un color de resaltado
con el selector de color (o introduzca el valor hexadecimal correspondiente al color de resaltado
en el cuadro de texto).
Para informacin sobre cmo utilizar el selector de color, vase Utilizacin de colores en
la pgina 267.
4 Seleccione Mostrar para ver el color de la biblioteca resaltada en la ventana de documento.
Para ver los colores de resaltado en la ventana de documento:
Seleccione Ver > Ayudas visuales > Elementos invisibles.
Los colores de resaltado aparecen en la ventana de documento slo cuando Ver > Ayudas
visuales > Elementos invisibles est activado y las opciones adecuadas estn activadas en las
preferencias de Resaltando.
Temas relacionados
Edicin de las propiedades de un elemento de biblioteca
El inspector de propiedades de los elementos de biblioteca se puede utilizar para abrir un elemento
de biblioteca con el objeto de editarlo, separar un elemento de biblioteca determinado de su archivo
fuente o sobrescribir un elemento con el elemento de biblioteca actualmente seleccionado.
Para editar las propiedades de un elemento de biblioteca:
1 Seleccione un elemento de biblioteca en un documento.
2 Haga clic en el botn del inspector de propiedades (Ventana > Propiedades) que corresponda a
la accin que desee realizar.
Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades.
Temas relacionados
Insercin de un elemento de biblioteca en un documento en la pgina 131
Configuracin de preferencias de resaltado de bibliotecas en la pgina 133
Conversin de elementos de biblioteca en editables en un documento
Si ha aadido un elemento de biblioteca al documento y desea editar el elemento concretamente
para dicha pgina, deber romper el vnculo existente entre el elemento del documento y la
biblioteca. Una vez convertida una instancia del elemento de biblioteca en editable, dicha
instancia no podr ser actualizada cuando se modifica el elemento de biblioteca.
Para convertir un elemento de biblioteca en editable:
1 Seleccione un elemento de biblioteca en el documento actual.
2 Haga clic en Separar del original en el inspector de propiedades (Ventana > Propiedades).
La instancia seleccionada del elemento de biblioteca perder su resaltado (si estaba visible) y
dejar de poder actualizarse cuando se modifique el elemento de biblioteca original.
Temas relacionados
Edicin de un comportamiento en un elemento de biblioteca
Para editar un comportamiento en un elemento de biblioteca, el elemento debe insertarse
previamente en un documento, y luego convertir el elemento en editable en ese documento. Una
vez realizados los cambios deseados, se puede volver a crear el elemento de biblioteca,
sustituyendo el elemento de la biblioteca con el elemento editado desde el documento.
Para ms informacin sobre comportamientos, consulte Utilizacin de comportamientos
JavaScript en la pgina 381.
Para editar un comportamiento en un elemento de biblioteca:
1 Abra un documento que contenga el elemento de biblioteca.
Anote el nombre del elemento de biblioteca, as como las etiquetas exactas que contiene. Ms
adelante necesitar esta informacin.
2 Seleccione el elemento de biblioteca y haga clic en Separar del original en el inspector
depropiedades (Ventana >Propiedades).
3 Seleccione el elemento que tiene el comportamiento adjunto.
4 En el panel Comportamientos (Ventana > Comportamientos), haga doble clic en la accin que
desea cambiar.
5 En el cuadro de dilogo que aparece, realice los cambios necesarios y haga clic en Aceptar.
7 Asegrese de haber anotado el nombre exacto del elemento de biblioteca original; seleccinelo
y haga clic en el botn Eliminar de la parte inferior del panel.
8 En la ventana de documento, seleccione todos los elementos que representan al elemento de
biblioteca.
Tenga cuidado de seleccionar exactamente los mismos elementos que haba en el elemento de
biblioteca original.
9 En el panel Activos, haga clic en el botn Nuevo elemento de biblioteca y asigne al nuevo
elemento el nombre que tena el elemento que ha eliminado.
Asegrese de que utiliza exactamente el mismo texto (incluidas maysculas y minsculas).
10 Para actualizar el elemento de biblioteca en los dems documentos del sitio, elija Modificar >
Biblioteca > Actualizar pginas.
11 En el men emergente Buscar en del cuadro de dilogo Actualizar pginas, seleccione Arch. que
usan.
12 En el men emergente que aparece al lado, elija el nombre del elemento de biblioteca que acaba
de crear.
13 En la opcin Actualizar, compruebe que est seleccionado Elementos de biblioteca y luego haga
clic en Iniciar.
14 Cuando haya completado todas las actualizaciones, haga clic en Cerrar para salir del cuadro de
dilogo Actualizar pginas.
Temas relacionados
137
CAPTULO 6
Administracin de sitios de Contribute con
Dreamweaver
Macromedia Contribute combina un navegador Web con un editor de pginas Web bsico.
Permite a sus colegas o clientes navegar hasta una pgina de un sitio que usted ha creado y editarla
o actualizarla, siempre y cuando tengan permiso para hacerlo. Los usuarios de Contribute pueden
aadir y actualizar contenido Web bsico, incluido texto con formato, imgenes, tablas y vnculos.
Los administradores del sitio de Contribute pueden limitar lo que los usuarios normales (aquellos
que no sean administradores) pueden hacer en un sitio.
Nota: la mayora de los usuarios de Macromedia Dreamweaver MX 2004 que se conectan a un sitio
de Contribute son administradores de sitio. En este captulo se presupone que el usuario es un
administrador de sitio.
Antes de facilitar a los usuarios de Contribute la informacin de conexin que necesitan para
editar pginas, debe llevar cabo varias tareas de configuracin en Dreamweaver. Despus, puede
exportar la informacin de definicin del sitio como una clave de conexin, un archivo que los
usuarios de Contribute utilizan para conectarse al sitio.
Nota: en este captulo se presupone que usted sabe configurar un sitio de Dreamweaver. Para ms
informacin, consulte Configuracin de un sitio de Dreamweaver en la pgina 63. Si se configura
un sitio dinmico para su uso con Contribute, vase el apartado Administracin de Contribute de la
Ayuda en Contribute para ms informacin.
Puede conectarse a un sitio de Contribute mediante Dreamweaver y modificar los archivos del
sitio de la misma forma que lo hara en cualquier otro sitio de Dreamweaver.
Administracin de sitios de Contribute en la pgina 138
Preparacin de un sitio para su uso con Contribute en la pgina 142
Administrar un sitio de Contribute con Dreamweaver en la pgina 142
Solucin de problemas de un sitio de Contribute en la pgina 144
Administracin de archivos de Contribute con Dreamweaver en la pgina 145
138 Captulo 6: Administracin de sitios de Contribute con Dreamweaver
Administracin de sitios de Contribute
Puede utilizar Dreamweaver para conectarse a un sitio de Contribute y modificar los archivos del
sitio como lo hara en cualquier otro sitio de Dreamweaver. La mayora de las funciones de
Dreamweaver se usan del mismo modo en un sitio de Contribute que en cualquier otro sitio. Sin
embargo, hay algunas diferencias a la hora de trabajar con archivos en un sitio de Contribute.
Estructura del sitio y diseo de pgina para un sitio de Contribute
Para preparar el sitio Web que editarn los usuarios de Contribute, debe dar una estructura
adecuada al sitio.
Cree las carpetas que los usuarios de Contribute deben utilizar para sus pginas, cree las pginas
de ndice para dichas carpetas y aada a las pginas elementos de navegacin bsicos. Si lo desea,
puede crear carpetas especficas de usuario para que stos practiquen en ellas. Asimismo, puede
crear hojas de estilos CSS que definan los estilos para cada pgina o carpeta. Puede llevar a cabo
parte de este trabajo de configuracin en Contribute, pero es ms sencillo configurar un sitio
mediante Dreamweaver.
Adems, puede crear plantillas que los usuarios de Contribute pueden utilizar para crear nuevas
pginas (vase Creacin de plantillas para un sitio de Contribute en la pgina 236).
Las siguientes sugerencias pueden ayudarle a la hora de crear un sitio que facilite la tarea a los
usuarios de Contribute:
Mantenga una estructura sencilla para el sitio.
Evite anidar demasiados niveles de carpetas. Agrupe los elementos relacionados en una carpeta.
Configure en el servidor los permisos de lectura y escritura adecuados para las carpetas.
Para ms informacin, consulte Activacin de usuarios de Contribute para acceder a las
plantillas sin acceder a la carpeta raz en la pgina 146.
Conforme cree la estructura de carpetas, aada pginas de ndice a las carpetas para animar a
los usuarios de Contribute a que coloquen pginas nuevas en las carpetas correctas.
Por ejemplo, si los usuarios de Contribute van a suministrar pginas que contengan actas de
reuniones, puede crear una carpeta en la carpeta raz del sitio con el nombre actas_reuniones y
crear una pgina de ndice en dicha carpeta. Luego puede proporcionar un vnculo que lleve de
la pgina principal del sitio a la pgina de ndice de actas de reuniones. De esta forma, un
usuario de Contribute podr navegar hasta la pgina de ndice y crear una nueva pgina con un
acta para una reunin concreta con un vnculo desde dicha pgina; la nueva pgina se crear
automticamente dentro de la carpeta actas_reuniones.
En la pgina de ndice de cada carpeta, proporcione una lista de vnculos con las pginas de
contenido y los documentos independientes existentes en dicha carpeta.
Mantenga un diseo de pgina lo ms sencillo posible, evitando formatos complicados.
Asigne a los estilos CSS nombres que permitan identificarlos claramente.
Si los usuarios de Contribute que trabajan en el sitio utilizan un conjunto de estilos estndar en
Microsoft Word, asigne a los estilos CSS los mismos nombres que los correspondientes estilos
de Word, de manera que Contribute pueda establecer asignaciones de estilos cuando un
usuario copie informacin de un documento de Word y la pegue en una pgina de Contribute.
Administracin de sitios de Contribute 139
Para evitar que un estilo CSS est disponible para los usuarios de Contribute, cambie el
nombre del estilo de manera que comience por mmhide_.
Por ejemplo, si utiliza un estilo denominado RightJustified en una pgina pero no desea que los
usuarios de Contribute puedan utilizar dicho estilo, cambie el nombre del estilo por
mmhide_RightJustified.
Nota: deber aadir mmhide_ al nombre del estilo en la vista de cdigo; no podr hacerlo en el
panel CSS.
Utilice CSS en vez de etiquetas HTML.
Contribute reconoce los estilos de CSS y permite que los usuarios los apliquen.
Utilice el menor nmero posible de estilos CSS con el fin de mantener un formato sencillo y
limpio.
Si utiliza server-side includes para los elementos de pgina HTML, tales como encabezados o
pies, cree una sencilla pgina HTML no vinculada que contenga vnculos a los archivos
include.
Los usuarios de Contribute podrn aadir un marcador a esa pgina y emplearla para navegar a
los archivos include para editarlos.
Temas relacionados
Captulo 2, Configuracin de un sitio de Dreamweaver, en la pgina 63
Utilizacin de estilos de hojas de estilos en cascada en la pgina 299
Utilizacin de server-side includes en la pgina 462
Conexin con el sitio y compatibilidad con Contribute
En Dreamweaver, se puede conectar con un sitio de Contribute existente y modificar los archivos
del sitio del mismo modo que lo hara en cualquier sitio de Dreamweaver (Configuracin de un
sitio de Dreamweaver nuevo en la pgina 65). Al conectar con un sitio configurado como sitio de
Contribute (y que ya cuenta con administrador), Dreamweaver le pedir que active la
compatibilidad con Contribute.
Si est preparando un sitio de Dreamweaver existente para los usuarios de Contribute, debe
activar de forma explcita la compatibilidad con Contribute para poder utilizar las funciones
relacionadas con Contribute; Dreamweaver no se lo solicitar. Para ms informacin, consulte
Preparacin de un sitio para su uso con Contribute en la pgina 142.
Dreamweaver le permite conectar con un sitio remoto, incluido un sitio de Contribute, de
diversas formas, aunque no todos los tipos de conexin admiten la compatibilidad con
Contribute. En concreto, existen las siguientes restricciones para los tipos de conexin:
Si se est conectando con el sitio remoto mediante WebDAV o SourceSafe, no podr activar la
compatibilidad con Contribute, ya que dichos sistemas de control de cdigo fuente no son
compatibles con Design Notes ni con el sistema de proteccin/desproteccin que
Dreamweaver utiliza para los sitios de Contribute.
Si utiliza RDS para conectar con el sitio remoto, puede activar la compatibilidad con
Contribute, pero deber personalizar la conexin para poder compartirla con los usuarios de
Contribute.
Si utiliza su equipo local como servidor Web, debe configurar el sitio empleando una conexin
FTP o de red con el equipo (en lugar de una simple ruta de carpeta local) para poder compartir
la conexin con los usuarios de Contribute.
Transferencia de archivos a un sitio de Contribute y desde l
Contribute utiliza un sistema muy semejante al sistema Desproteger/Proteger de Dreamweaver
para asegurarse de que slo un usuario pueda editar una pgina Web determinada en todo
momento. Al activar la compatibilidad con Contribute en Dreamweaver, se activa
automticamente el sistema Desproteger/Proteger de Dreamweaver.
Para transferir archivos desde y hacia un sitio de Contribute mediante Dreamweaver, utilice
siempre los comandos Desproteger y Proteger. Si, en lugar de estos comandos, utiliza los
comandos Obtener y Colocar para transferir archivos, puede que sobrescriba las modificaciones
realizadas recientemente en un archivo por un usuario de Contribute.
Nota: si utiliza el comando Colocar en un sitio de Contribute, Dreamweaver desproteger
automticamente el archivo y luego lo volver a proteger con el fin de reducir las posibilidades de que
los cambios que usted realice entren en conflicto con los realizados por otro usuario.
La proteccin de un archivo de un sitio de Contribute funciona exactamente igual que en
cualquier otro sitio.
Al desproteger un archivo en un sitio de Contribute, Dreamweaver crea automticamente una
copia de seguridad de la versin previamente desprotegida del archivo en la carpeta _baks y aade
su nombre de usuario y un sello de fecha a un archivo de Design Notes para que los dems
usuarios puedan ver quin desprotegi el archivo y cundo lo hizo. Para ms informacin sobre
copias de seguridad automticas, consulte Activacin de usuarios de Contribute para acceder a las
plantillas sin acceder a la carpeta raz en la pgina 146.
Temas relacionados
Desproteccin y proteccin de archivos en la pgina 101
Preparacin de un sitio para su uso con Contribute en la pgina 142
Permisos de Contribute para carpetas y archivos del servidor
Contribute le ofrece un medio para administrar permisos sobre archivos y carpetas para cada
grupo de usuarios que defina. Para ms informacin, consulte el apartado Administracin de
Contribute de la Ayuda de Contribute. Los usuarios de Dreamweaver no se ven afectados por
estos permisos, pero Contribute aplica dichos permisos a los usuarios de Contribute.
No obstante, Contribute no ofrece ningn medio para administrar los permisos de lectura y
escritura subyacentes asignados a los archivos y carpetas por el servidor. Puede administrar dichos
permisos directamente en el servidor.
Los grupos de permisos de Contribute pueden concebirse como una superposicin a los permisos
de lectura y escritura del servidor; por ejemplo, si un usuario carece de permiso de escritura en una
carpeta del servidor, no podr guardar archivos en dicha carpeta aunque sea miembro de un grupo
de permisos autorizado a escribir en dicha carpeta (conforme a los permisos de Contribute).
Administracin de sitios de Contribute 141
Si un usuario de Contribute no dispone de acceso de lectura en el servidor para un archivo
dependiente, como por ejemplo una imagen que aparece en una pgina, el contenido del archivo
dependiente no aparecer en la ventana de Contribute. Por ejemplo, si un usuario no dispone de
acceso de lectura para una carpeta de imgenes, las imgenes de dicha carpeta aparecern como
iconos de imagen rota en Contribute. De igual forma, las plantillas de Dreamweaver estn
almacenadas en una subcarpeta de la carpeta raz del sitio, por lo que, si un usuario de Contribute
no dispone de acceso de lectura para la carpeta raz, no podr utilizar las plantillas de dicho sitio a
no ser que usted copie las plantillas en una carpeta adecuada.
Cuando configure un sitio, es recomendable conceder a los usuarios acceso de lectura en el
servidor a la carpeta /_mm (la subcarpeta _mm de la carpeta raz), la carpeta /Templates y todas
las carpetas que contengan activos que deban utilizar.
Si por algn motivo no puede otorgar a los usuarios permiso de lectura para la carpeta /Templates,
vase Activacin de usuarios de Contribute para acceder a las plantillas sin acceder a la carpeta
raz en la pgina 146 para averiguar cmo facilitar las plantillas a los usuarios.
Archivos especiales de Contribute
Contribute emplea diversos archivos especiales que no estn pensados para que los vean los
visitantes del sitio. Dichos archivos son:
El archivo de configuracin compartido, un archivo XML con un nombre como
contribute.xml, que aparece en una carpeta denominada _mm en la carpeta raz del sitio y que
contiene informacin que Contribute utiliza para administrar el sitio.
Versiones anteriores de los archivos, que se encuentran en carpetas _baks (vase Activacin de
usuarios de Contribute para acceder a las plantillas sin acceder a la carpeta raz en
la pgina 146)
Versiones temporales de las pginas, que permiten que los usuarios puedan obtener una vista
previa de los cambios realizados.
Archivos de bloqueo temporales, que indican que una determinada pgina est siendo editada
o mostrada en una vista previa.
Archivos de Design Notes, que contienen metadatos sobre las pginas del sitio.
Por lo general, no debe editar estos archivos especiales de Contribute mediante Dreamweaver, ya
que Dreamweaver los administra automticamente.
Si no desea que estos archivos especiales de Contribute aparezcan en su servidor de acceso pblico,
puede establecer un servidor de realizacin de pruebas para que los usuarios de Contribute
manipulen en l las pginas. Posteriormente, podr copiar peridicamente dichas pginas Web del
servidor de realizacin de pruebas a un servidor de produccin conectado a la Web. Si adopta este
enfoque de servidor de realizacin de pruebas, copie en el servidor de produccin slo las pginas
Web, no los archivos especiales de Contribute enumerados ms arriba. En particular, no copie en
el servidor de produccin las carpetas _mm y _baks.
Nota: para informacin acerca de la configuracin de un servidor de forma que impida que los
visitantes vean los archivos de las carpetas que comiencen con subrayado, vase Seguridad del
sitio Web en el apartado Administracin de Contribute de la Ayuda de Contribute.
Si no est utilizando un servidor de realizacin de pruebas, de vez en cuando elimine
manualmente las versiones antiguas existentes en las carpetas _baks para asegurarse de que los
visitantes no pueden ver las versiones antiguas de los archivos. En determinadas circunstancias,
puede que tenga que eliminar manualmente otros archivos especiales de Contribute.
Por ejemplo, puede ocurrir que Contribute no elimine archivos temporales de vistas previas
cuando el usuario finaliza una vista previa; en este caso, deber eliminar manualmente dichas
pginas temporales. Las pginas temporales de vista previa tienen nombres de archivo que
comienzan por TMP.
De igual forma, es posible que, en algunos casos, un archivo de bloqueo caducado permanezca
accidentalmente en el servidor. En este caso, deber eliminar manualmente el archivo de bloqueo
para permitir que otros usuarios editen la pgina. Para informacin de cmo eliminar el archivo
de bloqueo, vase Desbloqueo de un archivo en un sitio de Contribute en la pgina 146.
Preparacin de un sitio para su uso con Contribute
Primero debe activar la compatibilidad con Contribute si tiene la intencin de utilizar
Dreamweaver para administrar un sitio de Contribute. En funcin del sitio al que est conectado,
se le solicitar automticamente que active la compatibilidad con Contribute.
Nota: cuando active la compatibilidad con Contribute, Dreamweaver activar automticamente las
Design Notes (incluida la opcin Cargar Design Notes para compartir) y el sistema Desproteger/
Proteger.
Para activar las funciones de compatibilidad con Contribute para un sitio de Dreamweaver
definido:
3 Haga clic en la ficha Avanzadas.
4 Seleccione la categora Contribute de la lista Categora de la izquierda.
5 Seleccione la opcin Activar compatibilidad con Contribute y rellene el cuadro de dilogo.
Para ms informacin, haga clic en el botn Ayuda.
Temas relacionados
Conexin con el sitio y compatibilidad con Contribute en la pgina 139
Administrar un sitio de Contribute con Dreamweaver
Una vez que haya activado la compatibilidad con Contribute (vase Preparacin de un sitio para
su uso con Contribute en la pgina 142), puede utilizar Dreamweaver para iniciar Contribute a
fin de realizar las tareas de administracin del sitio.
Nota: Contribute debe estar instalado en la misma mquina que Dreamweaver.
Como administrador de un sitio de Contribute, puede seguir uno de estos procedimientos:
Cambiar la configuracin de todo el sitio.
La configuracin de todo el sitio abarca la contrasea del administrador, el correo electrnico
de contacto del administrador o el nmero de revisiones guardadas en el servidor.
Cambiar el permiso otorgado a los grupos de usuarios de Contribute.
Administrar un sitio de Contribute con Dreamweaver 143
Configurar usuarios de Contribute.
Los usuarios de Contribute necesitan cierta informacin sobre el sitio para poder conectarse a
l. Puede empaquetar toda esta informacin en un archivo que se conoce como clave de
conexin para enviarla a los usuarios de Contribute.
Nota: una clave de conexin no es lo mismo que un archivo de sitio exportado desde
Dreamweaver. Si desea exportar la informacin del sitio para utilizarla con Dreamweaver, vase
Importacin y exportacin de sitios en la pgina 100.
Sugerencia: antes de facilitar a los usuarios de Contribute la informacin de conexin necesaria
para editar pginas, debe utilizar Dreamweaver para crear la jerarqua bsica de carpetas del sitio
(vase Estructura del sitio y diseo de pgina para un sitio de Contribute en la pgina 138), y
tambin debe crear las plantillas y hojas de estilo CSS necesarias para el sitio (vase Creacin de
plantillas para un sitio de Contribute en la pgina 236).
Para administrar un sitio Web de Contribute en Dreamweaver:
4 Seleccione la categora Contribute de la lista de categoras de la izquierda.
5 Haga clic en el botn Administrar sitio en Contribute.
Nota: este botn no aparece si no ha activado la compatibilidad con Contribute. Para informacin
acerca de cmo activar esta opcin, vase Preparacin de un sitio para su uso con Contribute
en la pgina 142.
Si el sitio est protegido por contrasea, aparecer un cuadro de dilogo que le solicitar su
nombre y contrasea. Escriba su nombre de usuario y su contrasea y haga clic en Aceptar.
Aparecer el cuadro de dilogo Contrasea de administrador.
6 Escriba la contrasea del administrador y haga clic en Aceptar.
Si el sitio no tiene administrador, aparecer un cuadro de dilogo que le preguntar si desea
convertirse en el administrador del sitio Web. Haga clic en S, luego escriba y confirme una
contrasea de administrador para el sitio Web y haga clic en Aceptar.
Aparecer el cuadro de dilogo Administrar sitio Web.
Para cambiar la configuracin de la administracin, haga clic en el botn Configuracin
para todo el sitio y cambie la configuracin a su conveniencia en el cuadro de dilogo
Configuracin para todo el sitio.
Para cambiar los grupos de permisos, seleccione un grupo de permisos (si procede) y haga
clic en uno de los botones de la seccin Grupos de permisos y rellene el cuadro de dilogo.
Para enviar una clave de conexin a fin de configurar usuarios, haga clic en el botn Enviar
clave de conexin y siga las instrucciones del Asistente de conexin.
Nota: para ms informacin sobre la configuracin y la administracin de usuarios y permisos
en todo el sitio, o sobre la creacin de una clave de conexin, consulte el apartado
Administracin de Contribute de la Ayuda en Contribute.
8 Haga clic en Aceptar para cerrar el cuadro de dilogo Administrar sitio Web.
10 Haga clic en Listo para cerrar el cuadro de dilogo Editar sitios.
Temas relacionados
Administracin de archivos de Contribute con Dreamweaver en la pgina 145
Solucin de problemas de un sitio de Contribute
Si experimenta algn problema con un sitio de Contribute, vanse los siguientes temas especficos
para obtener informacin sobre cmo resolver el problema:
En el caso de problemas relacionados con la conexin con un sitio de Contribute, vase
Solucin de problemas de conexin con un sitio de Contribute en la pgina 144.
En el caso de problemas relacionados con la utilizacin de las herramientas de administracin,
vase Solucin de problemas con las herramientas de administracin de Contribute en
la pgina 144.
Para ms informacin sobre la solucin de problemas, consulte dicha seccin en el apartado
Administracin de Contribute de la Ayuda en Contribute.
Solucin de problemas de conexin con un sitio de Contribute
Al hacer clic en cualquier botn relacionado con la administracin de un sitio de Contribute,
Dreamweaver comprueba que puede conectar con su sitio remoto y que el URL de raz del sitio
que ha facilitado para el sitio es vlido. Si Dreamweaver no logra conectar o si el URL no es
vlido, aparecer un mensaje de error.
Para comprobar una conexin de Contribute:
1 Compruebe el URL de raz del sitio de la categora Contribute del cuadro de dilogo Definicin
del sitio; para ello, abra el URL en un navegador y compruebe que se abre la pgina correcta.
2 Utilice el botn Prueba de la categora Datos remotos del cuadro de dilogo Definicin del sitio
para asegurarse de que puede conectar con el sitio.
3 Si el URL es correcto pero el botn Prueba da como resultado un mensaje de error, pida ayuda
al administrador del sistema.
Solucin de problemas con las herramientas de administracin de Contribute
Si las herramientas de administracin no funcionan correctamente, es posible que exista algn
problema en la carpeta _mm.
Para comprobar la carpeta _mm:
1 En el servidor, asegrese de que dispone de permisos de lectura y escritura para la carpeta _mm.
2 Compruebe que en la carpeta haya un archivo de configuracin compartido cuyo nombre sea
contribute.xml.
3 Si no est, utilice el Asistente de conexin para crear una conexin con el sitio y ser
administrador del sitio.
El archivo de configuracin compartido se crea automticamente cuando usted se convierte en
administrador. Para ms informacin sobre cmo convertirse en administrador de un sitio Web
existente de Contribute, consulte el apartado Administracin de Contribute de la Ayuda en
Contribute.
Administracin de archivos de Contribute con Dreamweaver 145
Temas relacionados
Solucin de problemas de conexin con un sitio de Contribute en la pgina 144
Administracin de archivos de Contribute con Dreamweaver
La mayora de las funciones de Dreamweaver se usan del mismo modo en un sitio de Contribute
que en cualquier otro sitio. No obstante, cuando utilice Dreamweaver con un sitio de Contribute,
Dreamweaver realizar automticamente ciertas operaciones de administracin de archivos, como
el almacenamiento de mltiples versiones de un documento.
En este captulo se describen aquellos aspectos de trabajar con archivos de un sitio de Contribute
diferentes de trabajar con archivos de otros sitios.
Para informacin sobre la transferencia de archivos a un sitio de Contribute y desde ste, vase
Transferencia de archivos a un sitio de Contribute y desde l en la pgina 140. Para informacin
sobre los archivos especiales de Contribute, vase Archivos especiales de Contribute en
la pgina 141.
Nota: un administrador de Contribute puede asignar usuarios a grupos conocidos como grupos de
permisos, as como especificar aquellas acciones que puede realizar cada grupo. Cuando utilice
Dreamweaver para administrar archivos en un sitio de Contribute, las restricciones impuestas por los
grupos de permisos no surtirn efecto; las nicas restricciones que se aplicarn sern las de permisos
de lectura y escritura para el servidor. Para ms informacin sobre los distintos tipos de permisos,
consulte Permisos de Contribute para carpetas y archivos del servidor en la pgina 140.
Eliminacin, traslado y cambio de nombre de un archivo remoto de un sitio de
Contribute
La eliminacin de un archivo del servidor remoto que aloja un sitio de Contribute funciona de
forma muy semejante a la eliminacin de un archivo del servidor para cualquier sitio de
Dreamweaver. No obstante, cuando elimine un archivo de un sitio de Contribute, Dreamweaver
le preguntar si deben eliminarse todas las versiones anteriores del archivo. Si opta por conservar
las versiones anteriores, Dreamweaver guardar tambin una copia de la versin actual de manera
que pueda restaurarla posteriormente si es preciso.
El cambio de nombre de un archivo remoto o su traslado de una carpeta a otra en un sitio de
Contribute funciona de la misma forma que en cualquier sitio de Dreamweaver. En un sitio de
Contribute, Dreamweaver tambin cambia de nombre o mueve las versiones anteriores asociadas
al archivo que estn almacenadas en la carpeta _baks.
Para eliminar un archivo remoto:
1 Seleccione el archivo en la seccin remota del panel Archivos (Ventana > Archivos) y presione
Retroceso (Windows) o Eliminar (Macintosh).
Aparecer un cuadro de dilogo que le pedir confirmacin de que desea eliminar el archivo.
2 Si aparece la opcin Eliminar versiones anteriores en el cuadro de dilogo de confirmacin, siga
uno de estos procedimientos:
Para eliminar todas las versiones anteriores del archivo adems de la versin actual,
seleccione la opcin Eliminar versiones anteriores.
Para conservar las versiones anteriores en el servidor, desactive la opcin Eliminar versiones
anteriores.
3 Haga clic en S para eliminar el archivo.
El archivo quedar eliminado. Si opt por eliminar las versiones anteriores, stas tambin
quedarn eliminadas. Si opt por no eliminar las versiones anteriores, se guardar una copia de
la versin actual en la carpeta _baks como nueva revisin del archivo.
Temas relacionados
Desbloqueo de un archivo en un sitio de Contribute en la pgina 146
Activacin de usuarios de Contribute para acceder a las plantillas sin acceder
a la carpeta raz
En un sitio de Contribute, debe administrar directamente en el servidor los permisos de lectura y
escritura subyacentes que el servidor ha asignado a los archivos y a las carpetas. Para ms
informacin, consulte Permisos de Contribute para carpetas y archivos del servidor en
la pgina 140.
Cuando configure un sitio, es recomendable conceder a los usuarios acceso de lectura en el
servidor a la carpeta /_mm (la subcarpeta _mm de la carpeta raz), la carpeta /Templates y todas
las carpetas que contengan activos que deban utilizar.
Si por algn motivo no puede otorgar a los usuarios permiso de lectura a la carpeta /Templates,
puede poner las plantillas a disposicin de los usuarios de otro modo.
Para permitir que los usuarios de Contribute utilicen las plantillas sin acceso de lectura a la
carpeta raz del sitio principal:
1 Configure el sitio de Contribute de manera que su carpeta raz sea la carpeta que desea que los
usuarios vean como raz.
2 Copie manualmente la carpeta de plantillas de la carpeta raz del sitio principal en la carpeta raz
del sitio de Contribute a travs del panel Archivos.
3 Despus de actualizar las plantillas para el sitio principal, vuelva a copiar las plantillas copiadas
en las subcarpetas correspondientes segn sea necesario.
Si adopta este enfoque de subsitio, no utilice vnculos relativos a la raz del sitio en los subsitios.
Los vnculos relativos a la raz del sitio son relativos a la carpeta raz principal en el servidor, no a
la carpeta raz que usted define en Dreamweaver. Los usuarios de Contribute no pueden crear
vnculos relativos a la raz del sitio. Para ms informacin sobre vnculos relativos a la raz del sitio,
consulte Aspectos bsicos de ubicacin y rutas de documentos en la pgina 326.
Si los vnculos de una pgina de Contribute aparecen rotos, es posible que exista un problema de
permisos de carpetas, sobre todo si los vnculos sealan a pginas situadas fuera de la carpeta raz
del usuario de Contribute. Compruebe en el servidor los permisos de lectura y escritura para las
carpetas.
Desbloqueo de un archivo en un sitio de Contribute
En ocasiones, un archivo remoto de un sitio de Contribute aparece como si estuviera protegido
cuando en realidad el archivo no est bloqueado en el equipo del usuario. Cuando suceda esto,
desbloquee el archivo para permitir que los usuarios lo editen.
Nota: antes de seguir este procedimiento, asegrese de que el archivo no est realmente protegido.
Si desbloquea un archivo mientras un usuario de Contribute lo est editando, podra ocurrir que varios
usuarios estuvieran editando el archivo a la vez, lo que podra provocar una prdida de datos.
Administracin de archivos de Contribute con Dreamweaver 147
Para desbloquear un archivo protegido:
Abra el archivo en la ventana Documento y seleccione Sitio > Deshacer proteger.
En el panel Archivos (Ventana > Archivos), haga clic con el botn derecho (Windows) o
mantenga presionada la tecla Control y haga clic (Macintosh) y seleccione Deshacer
proteger.
Puede que aparezca un cuadro de dilogo que indica quin ha protegido el archivo y que le
pide que confirme que desea desbloquear el archivo.
2 Si aparece dicho cuadro de dilogo, haga clic en S para confirmar.
El archivo quedar desbloqueado en el servidor.
PARTE III
Diseo de pginas
Utilice las herramientas de diseo visual de Macromedia Dreamweaver MX 2004 para crear
sofisticados diseos de pgina.
Captulo 7, Diseo de pginas con CSS, en la pgina 151
Captulo 8, Presentacin de contenido en tablas, en la pgina 169
Captulo 9, Diseo de pginas en el modo de diseo, en la pgina 189
Captulo 10, Utilizacin de marcos, en la pgina 205
Captulo 11, Administracin de plantillas, en la pgina 221
P
A
R
T
E

I
I
I
151
CAPTULO 7
Diseo de pginas con CSS
En Macromedia Dreamweaver MX 2004 puede emplear CSS para aadir bloques de contenido
en el diseo del documento. Puede insertar etiquetas div y aplicarles estilos de posicin CSS, o
puede utilizar capas de Dreamweaver para crear su diseo.
Nota: Dreamweaver trata todas las etiquetas div con posicin absoluta o relativa como capas.
Sugerencia: puede utilizar un archivo de diseo de Dreamweaver como punto de partida para el
diseo de CSS. Seleccione un archivo en la categora Diseos de pginas (CSS) del cuadro de
dilogo Nuevo documento (vase Creacin de un documento basado en un archivo de diseo de
Dreamweaver en la pgina 74).
Independientemente de si usa CSS, tablas o marcos para disear las pginas, Dreamweaver tiene
reglas y cuadrculas para ayudarle a crear sus diseos. Dreamweaver tambin tiene una opcin de
imagen de rastreo, que puede utilizar para volver a crear un diseo de pgina creado en una
aplicacin grfica.
Nota: si no est familiarizado con el uso de capas y hojas de estilos en cascada (CSS) pero s lo est
con el uso de tablas, pruebe a utilizar tablas o el modo de diseo para el diseo de la pgina (vase
Presentacin de contenido en tablas en la pgina 169 y Diseo de pginas en el modo de diseo
en la pgina 189).
Acerca de las capas en Dreamweaver en la pgina 152
Insercin de bloques de contenido para diseo en la pgina 153
Cambio del color de resaltado de los bloques de contenido en la pgina 154
Utilizacin de bloques de contenido para diseo en la pgina 155
Insercin de una capa en la pgina 156
Configuracin de preferencias y propiedades de capa en la pgina 158
Administracin de capas en la pgina 159
Manipulacin de capas en la pgina 162
Conversin de capas en tablas en la pgina 165
Utilizacin de reglas y cuadrculas para disear pginas en la pgina 166
Utilizacin de una imagen de rastreo en la pgina 167
152 Captulo 7: Diseo de pginas con CSS
Acerca de las capas en Dreamweaver
Una capa es un elemento de pgina HTML que se puede colocar en cualquier lugar del
documento. Las capas pueden contener texto, imgenes u otros contenidos que se pueden situar
en el cuerpo de un documento HTML.
Nota: en Dreamweaver, una capa es una etiqueta div con una posicin absoluta o relativa. Las
capas, tal y como se describen en este captulo, se refieren al concepto de diseo de Dreamweaver, y
no a la etiqueta layer.
Aspectos bsicos de las capas
Con Dreamweaver puede emplear capas para disear la pgina. Puede colocar unas capas delante
o detrs de otras, ocultar algunas capas mientras muestra otras y mover capas por la pantalla.
Puede colocar una imagen de fondo en una capa y, a continuacin, insertar una segunda capa, con
texto y un fondo transparente, delante de la primera.
Las capas proporcionan una gran flexibilidad a la hora de colocar contenido. Sin embargo, los
navegadores Web anteriores a Microsoft Internet Explorer 4.0 y Netscape Navigator 4.0 no
pueden mostrar capas y los navegadores de la versin 4 no muestran las capas de una forma
totalmente coherente.
Si desea asegurarse de que todos los usuarios pueden ver su pgina Web, disela utilizando capas
y, posteriormente, convierta las capas en tablas. Para ms informacin, consulte Conversin de
capas en tablas en la pgina 165. Si cree que los visitantes de la pgina van a usar navegadores
ms recientes, puede realizar el diseo con capas, sin convertirlas en tablas.
Temas relacionados
Cdigo HTML para capas
Al insertar una capa en un documento, Dreamweaver inserta la etiqueta HTML de dicha capa en
el cdigo. Puede configurar Dreamweaver para que utilice la etiqueta div o span para las capas.
Dreamweaver crea las capas utilizando de forma predeterminada la etiqueta div. Para cambiar la
etiqueta predeterminada, vase Configuracin de las preferencias de capa en la pgina 158.
Nota: puede utilizar otras dos etiquetas para crear capas: layer e ilayer. Sin embargo, estas
etiquetas slo son compatibles con Netscape Navigator 4; Internet Explorer no las reconoce y
Netscape dej de ofrecer soporte a stas en las versiones posteriores del navegador. Dreamweaver
reconoce las etiquetas layer e ilayer, pero no las utiliza para crear capas.
La diferencia entre la etiqueta div y la etiqueta span estriba en que los navegadores que no
admiten capas introducen saltos de lnea adicionales antes y despus de la etiqueta div. Es decir,
la etiqueta div es un elemento de nivel de bloque, mientras que la etiqueta span es un elemento
en lnea. En la mayora de los casos es ms conveniente que el contenido de la capa aparezca en un
prrafo independiente en los navegadores que no admiten capas. Por tanto, la mayora de las veces
ser preferible usar div en lugar de span.
Insercin de bloques de contenido para diseo 153
Para facilitar la lectura en navegadores antiguos, tenga cuidado dnde inserta el cdigo de una
capa. El cdigo que define una capa puede situarse en cualquier lugar del cuerpo de un archivo
HTML. Cuando dibuja una capa en Dreamweaver, sta se muestra donde la ha dibujado, pero
Dreamweaver inserta su cdigo al principio de la pgina, inmediatamente despus de la etiqueta
body. Si utiliza el comando Insertar capa en lugar de dibujar una capa, el cdigo se colocar en el
punto de insercin. Si crea una capa anidada, Dreamweaver insertar el cdigo dentro de la
etiqueta que define la capa padre.
Nota: independientemente de la etiqueta que utilice, las versiones de Internet Explorer y Netscape
Navigator anteriores a la 4.0 muestran el contenido de la capa, pero no la capa. El contenido de la
capa aparecer en el punto de la pgina donde se encuentre el cdigo de la capa. Por ejemplo, si el
cdigo de la capa se encuentra al principio de la pgina, su contenido aparecer al principio de la
pgina en los navegadores que no admiten capas.
A continuacin se ofrece un ejemplo de cdigo HTML de una capa:
<div id="Layer1" style="position:absolute; visibility:inherit; width:200px;
height:115px; z-index:1">
</div>
A continuacin se ofrece un ejemplo de cdigo HTML de una capa anidada en otra:
<div id="Parent" style="position:absolute; left:56px; top:54px; width:124px;
height:158px; z-index:1;">
Contenido situado en el interior de la capa padre.
<div id="Nested" style="position:absolute; left:97px; top:114px; width:54px;
height:69px; z-index:1;">
Contenido situado en el interior de la capa anidada.
</div>
</div>
Puede definir las propiedades de colocacin de las capas en la pgina, incluidas las coordenadas x e
y, ndice z (tambin denominado orden de apilamiento) y visibilidad. Para ms informacin,
consulte Configuracin de preferencias y propiedades de capa en la pgina 158.
Temas relacionados
Aspectos bsicos de las capas en la pgina 152
Insercin de bloques de contenido para diseo
Puede utilizar etiquetas div para situar bloques de contenido en el documento. Esto es
especialmente til si ya tiene una hoja de estilo CSS con estilos de posicin adjunta al documento.
Dreamweaver le permite insertar rpidamente una etiqueta div y aplicarle estilos existentes.
Nota: puede utilizar un archivo de diseo de Dreamweaver como punto de partida para el diseo de
CSS. Seleccione un archivo en la categora Diseos de pginas (CSS) del cuadro de dilogo Nuevo
documento (vase Creacin de un documento basado en un archivo de diseo de Dreamweaver
en la pgina 74).
Para insertar una etiqueta div:
1 En la ventana de documento, site el punto de insercin en el lugar donde desea que aparezca
la etiqueta div.
Seleccione Insertar > Objetos de diseo > Etiqueta Div.
En la categora Diseo de la barra Insertar, haga clic en el botn Etiqueta Div.
Aparece el cuadro de dilogo Insertar etiqueta Div.
La etiqueta div tendr el aspecto de un cuadro en el documento con texto de marcador de
posicin. Al desplazar el puntero sobre el cuadro, Dreamweaver lo resaltar.
Si la etiqueta div se sita absolutamente o relativamente, acta como una capa de Dreamweaver.
Para informacin sobre el uso de capas, vase Configuracin de preferencias y propiedades de
capa en la pgina 158, Administracin de capas en la pgina 159 o Manipulacin de capas en
la pgina 162.
Para informacin acerca del trabajo con etiquetas div que no tengan una posicin absoluta o
relativa, vase Utilizacin de bloques de contenido para diseo en la pgina 155.
Temas relacionados
Utilizacin de bloques de contenido para diseo en la pgina 155
Cambio del color de resaltado de los bloques de contenido
Cuando se desplaza el puntero sobre un bloque de contenido, Dreamweaver lo resalta.
Dreamweaver resalta los bloques que tengan una clase, un identificador o un estilo asociado.
Puede activar o desactivar el resaltado segn sea necesario y cambiar su color en las preferencias.
Para cambiar las preferencias de resaltado de los bloques de contenido:
2 Seleccione Resaltando en la lista de categoras de la izquierda.
3 Realice uno de estos cambios:
Para cambiar el color de resaltado de los bloques de contenido, haga clic en el cuadro Color
al pasar el ratn por encima y seleccione un color mediante el selector de color (o bien
escriba el valor hexadecimal del color de resaltado en el cuadro de texto).
la pgina 267.
Para activar o desactivar el resaltado de los bloques de contenido, active o desactive la
seleccin de la casilla Mostrar correspondiente a Ratn por encima.
Nota: estas opciones afectan a todos los objetos, como tablas, que Dreamweaver resalta cuando
pasa el puntero del ratn sobre ellos.
Utilizacin de bloques de contenido para diseo 155
Utilizacin de bloques de contenido para diseo
Despus de insertar una etiqueta div (vase Insercin de bloques de contenido para diseo en
la pgina 153), puede manipular el bloque de contenido o aadirle contenido.
Nota: las etiquetas div de bloque de contenido cuya posicin es absoluta o relativa actan como
capas de Dreamweaver. Para informacin acerca del trabajo con estas etiquetas div, omita esta
seccin y vea Configuracin de preferencias y propiedades de capa en la pgina 158,
Administracin de capas en la pgina 159 o Manipulacin de capas en la pgina 162.
Las etiquetas div de bloque de contenido cuya posicin no es absoluta o relativa no tienen bordes
visibles, pero si pasa el cursor por encima de un bloque de contenido, Dreamweaver resalta el
bloque (siempre y cuando tenga clase, id y estilo asociados). Para cambiar el color de resaltado
o para desactivarlo, vase Cambio del color de resaltado de los bloques de contenido en
la pgina 154.
Cuando selecciona un bloque de contenido cuya posicin no es absoluta o relativa, puede ver y
editar las reglas para el bloque en el inspector de etiquetas. Para aadir contenido al bloque, site
el punto de insercin en el bloque y, a continuacin, aada contenido como lo hara en una
pgina.
Para ver y editar reglas aplicadas a un bloque de contenido:
1 Siga uno de estos procedimientos para seleccionar la etiqueta div:
Haga clic en el borde del bloque.
Sugerencia: busque el resaltado para ver el borde.
Haga clic en el interior de los bordes del bloque y seleccione la etiqueta div del selector de
etiquetas en la parte inferior de la ventana de documento.
2 Seleccione Ventana > Inspector de etiquetas para abrir el inspector de etiquetas, si no est
abierto, y haga clic en la ficha CSS, si no est abierta.
Las reglas que se aplican a la etiqueta div aparecen en el panel.
3 Lleve a cabo los cambios necesarios.
Para colocar el punto de insercin en un bloque para aadir contenido:
Haga clic en cualquier lugar dentro de los bordes del bloque.
Para cambiar el texto del marcador de posicin en un bloque de contenido:
Seleccione el texto y escriba encima o presione la tecla Suprimir.
Nota: puede aadir contenido al bloque de la misma forma que le aadira contenido a una pgina.
Temas relacionados
Insercin de bloques de contenido para diseo en la pgina 153
Insercin de una capa
Dreamweaver permite crear capas en la pgina fcilmente y colocarlas con precisin. Tambin
puede crear capas anidadas. Para ms informacin, consulte Anidacin de capas en
la pgina 157.
Nota: puede utilizar un archivo de diseo de Dreamweaver como punto de partida para el diseo de
CSS. Seleccione un archivo en la categora Diseos de pginas (CSS) del cuadro de dilogo Nuevo
documento (vase Creacin de un documento basado en un archivo de diseo de Dreamweaver
en la pgina 74).
Cuando se inserta una capa, aparece una marca de cdigo de capa en la vista de diseo.
Dreamweaver muestra de manera predeterminada el borde de la capa y resalta el bloque (siempre
que tenga asociado una clase, id, o estilo) cuando se desplaza el puntero por encima. Puede
desactivar el marcador de cdigo de capa desactivando los elementos invisibles y ocultando los
bordes de las capas. Para cambiar el color del resaltado o para desactivarlo, vase Cambio del
color de resaltado de los bloques de contenido en la pgina 154.
Nota: cuando la opcin Elementos invisibles est activada, los elementos de la pgina pueden
cambiar de posicin. Sin embargo, los elementos invisibles no se muestran en los navegadores. Por
ello, cuando se ve la pgina en un navegador, todos los elementos invisibles aparecen en la posicin
correcta.
Despus de crear una capa, puede aadirle contenido situando el punto de insercin en la capa; a
continuacin, aada contenido cmo lo hara en una pgina.
Para dibujar una sola capa o varias capas consecutivamente:
1 En la categora Diseo de la barra Insertar, haga clic en el botn Dibujar capa.
2 En la vista de diseo de la ventana de documento, siga uno de estos procedimientos:
Arrastre para crear una sola capa.
Arrastre el ratn mientras presiona la tecla Control (Windows) o Comando (Macintosh)
para dibujar varias capas consecutivamente.
Podr continuar dibujando nuevas capas mientras no suelte la tecla Control o Comando.
Para insertar una capa en un lugar concreto del documento:
Site el punto de insercin en la ventana de documento y seleccione Insertar > Capa.
Para colocar el punto de insercin en una capa:
Haga clic en cualquier lugar dentro de los bordes de la capa.
Se resaltarn los bordes de la capa y aparecer el manejador de seleccin, pero la capa no quedar
seleccionada. Para informacin sobre la seleccin de capas, vase Seleccin de capas en
la pgina 160.
Para mostrar u ocultar marcas de cdigo de capa:
Para mostrar u ocultar bordes de capa:
Seleccione Ver > Ayudas visuales > Bordes de capa.
Insercin de una capa 157
Temas relacionados
Anidacin de capas
Una capa anidada es aquella cuyo cdigo se encuentra dentro de otra capa. La anidacin se usa a
menudo para agrupar capas. Una capa anidada se mueve junto con su capa padre y puede
configurarse para que herede la visibilidad de sta.
Puede activar la opcin Anidacin para anidar automticamente una capa al dibujar una capa
dentro de otra capa.
Para dibujar una capa anidada:
1 En la categora Diseo de la barra Insertar, haga clic en el botn Dibujar capa.
2 En la vista de diseo de la ventana de documento, arrastre el cursor para dibujar una capa dentro
de una capa existente:
Si Anidar est desactivado en las preferencias de Capas, arrastre el ratn mientras presiona la
tecla Alt (Windows) u Opcin (Macintosh) para anidar una capa dentro de otra existente.
Sugerencia: las capas anidadas pueden ofrecer distinto aspecto segn el navegador. Al crear
capas anidadas, compruebe con frecuencia su aspecto en distintos navegadores durante el
proceso de diseo.
Para insertar una capa anidada:
Coloque el punto de insercin en el interior de una capa existente en la vista de diseo de la
ventana de documento y seleccione Insertar > Capa.
Para anidar una capa existente dentro de otra utilizando el panel Capas:
1 Seleccione Ventana > Capas para abrir el panel Capas.
2 Seleccione una capa en el panel Capas y, a continuacin, mientras presiona la tecla Control
(Windows) o Comando (Macintosh) arrastre la capa con el ratn hasta la capa de destino del
panel Capas.
3 Suelte el botn del ratn cuando se resalte el nombre de la capa de destino.
Para anidar automticamente las capas cuando se dibuja una capa que comienza dentro de
otra:
Seleccione la opcin Anidar en las preferencias de Capas.
Para ms informacin, consulte Configuracin de las preferencias de capa en la pgina 158.
Temas relacionados
Configuracin de preferencias y propiedades de capa
Puede especificar una configuracin predeterminada para las capas. Tambin puede ver y
configurar diversos atributos de una o ms capas en el inspector de propiedades.
Configuracin de las preferencias de capa
Use la categora Capas del cuadro de dilogo Preferencias para definir la configuracin
predeterminada de las capas nuevas.
Para ver o definir las preferencias de capas:
2 Seleccione Capas en la lista Categora de la izquierda.
Temas relacionados
Visualizacin y configuracin de propiedades para mltiples capas en la pgina 159
Visualizacin y configuracin de propiedades para una sola capa
Cuando selecciona una capa, el inspector de propiedades muestra las propiedades de capa.
Para ver y configurar propiedades de capa:
1 Seleccione una capa (vase Seleccin de capas en la pgina 160).
2 En el Inspector de propiedades (Ventana > Propiedades), haga clic en la flecha de ampliacin de
la esquina inferior derecha para ver todas las propiedades en caso de que no estuviese ya
ampliado.
3 Cambie los atributos de la capa estableciendo sus propiedades.
Para ms informacin, haga clic en el botn Ayuda del inspector de propiedades.
Administracin de capas 159
Temas relacionados
Configuracin de las preferencias de capa en la pgina 158
Visualizacin y configuracin de propiedades para mltiples capas
Cuando se seleccionan dos o ms capas, el inspector de propiedades de capas muestra las
propiedades de texto y un subconjunto de todas las propiedades de las capas, lo que permite
modificar varias capas de una sola vez.
Para seleccionar mltiples capas:
Mantenga presionada la tecla Mays mientras selecciona las capas (vase Seleccin de capas
en la pgina 160).
Para ver y establecer las propiedades de varias capas:
1 Seleccione varias capas.
2 En el Inspector de propiedades (Ventana > Propiedades), haga clic en la flecha de ampliacin de
la esquina inferior derecha para ver todas las propiedades en caso de que no estuviese ya
ampliado.
3 Cambie los atributos de las capas definiendo sus propiedades.
Temas relacionados
Configuracin de las preferencias de capa en la pgina 158
Visualizacin y configuracin de propiedades para una sola capa en la pgina 158
Administracin de capas
Puede seleccionar capas para trabajar con ellas. Puede cambiar el orden de apilamiento y la
visibilidad de las capas. El panel Capas proporciona una forma prctica de administrar las capas.
Utilizacin del panel Capas
El panel Capas proporciona un medio para manejar las capas del documento. Use el panel Capas
para evitar solapamientos, cambiar la visibilidad de las capas, anidar o apilar capas y para
seleccionar una o ms capas.
Las capas se muestran en forma de lista de nombres; en orden de ndice z. La primera capa que se
cre estar situada al final de la lista, mientras que la ltima que se cre aparecer en la primera
posicin de la lista.
Para abrir el panel Capas:
Seleccione Ventana > Capas.
Para mostrar u ocultar capas anidadas:
Haga clic en los botones de signo ms (+) o signo menos () (Windows) o la flecha de
ampliacin (Macintosh) que se encuentra junto al nombre de la capa.
Las capas anidadas aparecen como nombres relacionados con las capas padres.
Temas relacionados
Cambio del orden de apilamiento de las capas en la pgina 161
Cambio de la visibilidad de una capa en la pgina 162
Seleccin de capas
Puede seleccionar una o varias capas para manipularlas o cambiar sus propiedades.
Para seleccionar una capa del panel Capas:
En el panel Capas (Ventana > Capas), haga clic en el nombre de la capa.
Para seleccionar una capa de la ventana Documento, siga uno de estos procedimientos:
Haga clic en un manejador de seleccin de capa.
Si el manejador de seleccin no est visible, haga clic en cualquier punto dentro de la capa para
hacerlo visible.
Haga clic en un borde de la capa.
Haga clic dentro de una capa mientras presiona las teclas Control y Mays (Windows) o
Comando y Mays (Macintosh).
Si hay mltiples capas seleccionadas, esta operacin desactivar todas las dems capas y slo
dejar seleccionada aquella en la que ha hecho clic.
En la vista de Diseo, haga clic en la marca de cdigo de capa que representa la ubicacin de la
capa en el cdigo HTML.
Si no ve la marca de cdigo de capa, seleccione Ver > Ayudas visuales > Elementos invisibles.
Administracin de capas 161
Para seleccionar mltiples capas, siga uno de estos procedimientos:
En el panel Capas (Ventana > Capas), presione Mays y haga clic en dos o ms nombres de
capa.
En la ventana Documento, presione Mays y haga clic en la parte interior o el borde de dos o
ms capas.
Cuando haya mltiples capas seleccionadas, los manejadores de la ltima capa seleccionada se
resaltarn en negro. Los manejadores de cambio de tamao de las dems capas se resaltarn en
blanco.
Temas relacionados
Cambio del orden de apilamiento de las capas
Utilice el inspector de propiedades o el panel Capas para cambiar el orden de apilamiento de las
capas. La capa que figura en la parte superior de la lista del panel Capas es la primera en el orden
de apilamiento y aparece delante de las otras capas.
En el cdigo HTML, el orden de apilamiento o el ndice z de las capas determina el orden en que
se dibujan las capas en un navegador. Puede cambiar el ndice z para cada capa mediante el panel
Capas o el inspector de propiedades.
Para cambiar el orden de apilamiento de capas en la paleta de capas:
Arrastre una capa hacia arriba o hacia abajo hasta el nivel deseado dentro del orden de
apilamiento.
A medida que mueve la capa aparece una lnea que indica dnde se mostrar la capa. Suelte
el botn del ratn cuando la lnea de colocacin aparezca en el lugar deseado dentro del
orden apilamiento.
En la columna Z, haga clic en el nmero de la capa que desea cambiar; escriba un nmero
mayor para desplazar la capa hacia arriba en el orden de la pila, o un nmero menor para
desplazarla hacia abajo.
Para cambiar el orden de apilamiento de capas utilizando el inspector de propiedades:
1 Seleccione Ventana > Capas para abrir el panel Capas y ver el orden de apilamiento actual.
2 Seleccione una capa del panel Capas o de la ventana de documento.
3 En el inspector de propiedades de capas (Ventana > Propiedades), escriba un nmero en el
cuadro de texto ndice Z.
Escriba un nmero superior para colocar la capa en un nivel superior del orden de apilamiento.
Escriba un nmero inferior para colocar la capa en un nivel inferior en el orden de apilamiento.
Temas relacionados
Utilizacin del panel Capas en la pgina 159
Seleccin de capas en la pgina 160
Cambio de la visibilidad de una capa
Mientras trabaja con un documento, puede mostrar y ocultar capas manualmente utilizando el
panel Capas para ver qu aspecto tendr la pgina en distintas condiciones.
Nota: al seleccionar una capa se hace visible y aparece delante de las otras.
Para cambiar la visibilidad de las capas:
2 Haga clic en la columna con el icono de ojo para cambiar su visibilidad.
Si el ojo est abierto significa que la capa es visible.
Si est cerrado, la capa es invisible.
Si no hay icono de ojo, generalmente la capa hereda la visibilidad de su padre. (Cuando las
capas no estn anidadas, el padre es el cuerpo del documento, que siempre est visible.)
Asimismo, el icono de ojo no aparece cuando no se especifica visibilidad (lo que se indica en
el inspector de propiedades como visibilidad predeterminada).
Para cambiar la visibilidad de todas las capas a la vez:
En el panel Capas (Ventana > Capas), haga clic en el icono de ojo del encabezado que se
encuentra en la parte superior de la columna.
Nota: este procedimiento puede establecer que todas las capas estn visibles u ocultas, pero no
que hereden esta propiedad.
Temas relacionados
Utilizacin del panel Capas en la pgina 159
Cambio del orden de apilamiento de las capas en la pgina 161
Manipulacin de capas
Cuando trabaja con el diseo de la pgina puede seleccionar, mover, cambiar el tamao y alinear
capas. Debe seleccionarse una capa para que sea posible moverla, cambiar su tamao o alinearla.
Para evitar el solapamiento de unas capas con otras al moverlas o cambiar su tamao, use la
opcin Evitar solapamiento (vase Cmo evitar el solapamiento de capas en la pgina 165).
Manipulacin de capas 163
Cambio del tamao de capas
Puede cambiar el tamao de una capa individual o de mltiples capas simultneamente para
asignarles la misma anchura y altura.
Si est activada la opcin Evitar solapamientos, no podr cambiar el tamao de una capa para que
se superponga a otra (vase Cmo evitar el solapamiento de capas en la pgina 165).
Para cambiar el tamao de una capa:
1 En la vista de diseo, seleccione una capa (vase Seleccin de capas en la pgina 160).
2 Siga uno de estos procedimientos para cambiar el tamao de la capa:
Puede cambiar el tamao arrastrando uno de los manejadores de cambio de tamao de la
capa.
Para cambiar el tamao pxel a pxel, mantenga presionada la tecla Control (Windows) u
Opcin (Macintosh) mientras presiona una tecla de flecha.
las teclas de flecha mueven los bordes derecho e inferior de la capa. Esta tcnica no permite
cambiar el tamao utilizando los bordes superior e izquierdo.
Para cambiar el tamao en el incremento de ajuste a la cuadrcula, mantenga presionadas las
teclas Mays-Control (Windows) o Mays-Opcin (Macintosh) mientras presiona una tecla
de flecha.
Para informacin sobre la configuracin del incremento de ajuste a la cuadrcula, vase
Utilizacin de reglas y cuadrculas para disear pginas en la pgina 166.
En el inspector de propiedades (Ventana > Propiedades), escriba los valores de anchura (An)
y altura (Al).
Al cambiar el tamao de una capa cambiarn su anchura y altura. Esta operacin, sin embargo, no
define qu cantidad de contenido de la capa queda visible. Para definir la regin visible de una
capa, vase Configuracin de preferencias y propiedades de capa en la pgina 158.
Para cambiar el tamao de mltiples capas a la vez:
1 En la vista de Diseo, seleccione dos o ms capas (vase Seleccin de capas en la pgina 160).
Elija Modificar > Alinear > Asignar mismo ancho o Modificar > Alinear > Asignar mismo
alto.
Las primeras capas seleccionadas se ajustarn a la anchura o la altura de la ltima capa
seleccionada (resaltada en negro).
En el inspector de propiedades, bajo Varias capas (Ventana > Propiedades), introduzca los
valores de anchura y altura.
Estos valores se aplicarn a todas las capas seleccionadas.
Temas relacionados
Alineacin de capas en la pgina 164
Cmo mover capas
Puede mover las capas en la vista de Diseo de forma muy similar a como se mueven los objetos
en las aplicaciones grficas ms bsicas.
Si est activada la opcin Evitar solapamientos, no podr mover una capa para que se superponga
a otra. (Vase Cmo evitar el solapamiento de capas en la pgina 165.)
Para mover una o ms de las capas seleccionadas:
1 En la vista de diseo, seleccione una o varias capas (vase Seleccin de capas en la pgina 160).
Puede moverlas arrastrando el manejador de seleccin de la ltima capa seleccionada
(resaltada en negro).
Para mover la capa pxel a pxel, utilice las teclas de flecha.
Mantenga presionada la tecla Mays mientras presiona una tecla de flecha para mover la
capa en el incremento actual de ajuste a la cuadrcula. Para informacin sobre la
configuracin del incremento de ajuste a la cuadrcula, vase Utilizacin de reglas y
cuadrculas para disear pginas en la pgina 166.
Temas relacionados
Cambio del tamao de capas en la pgina 163
Alineacin de capas
Utilice los comandos de alineacin de capas para alinear una o varias capas con el borde de la
ltima capa seleccionada.
Cuando se alinean capas, las capas hijas que no estn seleccionadas pueden moverse si se
selecciona y se mueve su capa padre. Para evitarlo, no utilice capas anidadas.
Para alinear dos o ms capas:
1 Seleccione la capa en la vista de diseo (vase Seleccin de capas en la pgina 160).
2 Elija Modificar > Alinear y seleccione una opcin de alineacin.
Por ejemplo, si selecciona Superior, se movern todas las capas de modo que sus bordes
superiores queden en la misma posicin vertical que el borde superior de la ltima capa
seleccionada (resaltada en negro).
Temas relacionados
Cmo mover capas en la pgina 164
Conversin de capas en tablas 165
Conversin de capas en tablas
En vez de utilizar tablas o el modo de diseo para crear el diseo, algunos diseadores de sitios
Web prefieren trabajar con capas. Dreamweaver permite crear el diseo con capas para despus, si
se desea, convertirlas en tablas. Por ejemplo, quiz necesite convertir las capas en tablas si se
precisa la compatibilidad con navegadores anteriores a la versin 4.0.
Nota: no puede convertir las capas en tablas o viceversa en una plantilla de documento o en un
documento al que se haya aplicado una plantilla. Deber crear su diseo en un documento sin
plantilla y convertirlo antes de guardarlo como plantilla.
Puede alternar entre capas y tablas para ajustar y optimizar el diseo de la pgina. No puede
convertir una tabla o capa concreta de una capa, deber convertir las capas en tablas y las tablas en
capas en toda la pgina.
Nota: la conversin de capas en tablas puede dar lugar a tablas con un gran nmero de celdas
vacas.
Cmo evitar el solapamiento de capas
Dado que las celdas de las tablas no se pueden solapar, Dreamweaver no puede crear una tabla a
partir de capas solapadas. Si tiene previsto convertir las capas de un documento en tablas, utilice la
opcin Evitar solapamiento a fin de limitar el movimiento y la ubicacin de las capas y evitar su
solapamiento.
Cuando est activada esta opcin, no podr crear capas delante de otras capas existentes, ni
tampoco mover, cambiar el tamao o anidar capas en otras ya existentes. Si activa esta opcin
despus de crear capas solapadas, separe todas las capas solapadas de las otras capas. Dreamweaver
no arregla automticamente las capas solapadas existentes en la pgina cuando se activa la opcin
Evitar solapamiento de capas.
Cuando esta opcin y la de ajuste de posicin estn activadas, las capas no se ajustan a la
cuadrcula si esto da lugar al solapamiento de dos capas. Ms bien se ajustan al borde de la capa
ms prxima.
Nota: algunas acciones le permiten superponer capas incluso cuando est activada la opcin Evitar
solapamientos. Si inserta una capa utilizando el men Insertar, introduce nmeros en el inspector de
propiedades o cambia las capas de posicin editando el cdigo HTML, puede provocar que las
capas se solapen o aniden mientras esta opcin est activada. Si se produce el solapamiento,
arrastre las capas solapadas en la vista de Diseo para separarlas.
Para evitar el solapamiento de las capas, siga uno de estos procedimientos:
En el panel Capas (Ventana > Capas), seleccione la opcin Evitar solapamiento.
En la ventana Documento, seleccione Modificar > Organizar > Evitar solapamiento de capas.
Conversin entre capas y tablas
Puede crear el diseo utilizando capas y luego convertir las capas en tablas para que el diseo
pueda verse en los navegadores antiguos.
Antes de la conversin en tablas, asegrese de que las capas no se solapan (vase Cmo evitar el
solapamiento de capas en la pgina 165).
Para convertir las capas en una tabla:
1 Seleccione Modificar > Convertir > Capas a tabla.
Se mostrar el cuadro de dilogo de convertir capas en tablas.
2 Seleccione las opciones que desee.
Las capas se convertirn en una tabla.
Para convertir tablas en capas:
1 Seleccione Modificar > Convertir > Tablas en capas.
Se mostrar el cuadro de dilogo Convertir tablas a capas.
2 Seleccione las opciones que desee.
Las tablas se convertirn en capas. Las celdas vacas no se convierten en capas a menos que
tengan colores de fondo.
Nota: los elementos de la pgina que estaban situados fuera de las tablas tambin se colocarn
en capas.
Utilizacin de reglas y cuadrculas para disear pginas
Utilice las reglas y cuadrculas como ayudas visuales para dibujar, ubicar o cambiar el tamao de
los elementos en la vista de diseo de la ventana de documento.
Las reglas pueden aparecer en los bordes izquierdo y superior de la pgina expresadas en pxeles,
pulgadas o centmetros.
Puede hacer que los elementos de la pgina se ajusten automticamente a la cuadrcula cuando los
mueva y cambiar la cuadrcula o controlar el comportamiento de ajuste especificando la
configuracin de la cuadrcula. El ajuste funciona independientemente de si la cuadrcula se
encuentra o no visible.
Para cambiar la configuracin de la regla, siga uno de estos procedimientos:
Para activar y desactivar las reglas, elija Ver > Reglas > Mostrar.
Para cambiar el origen, arrastre a cualquier parte de la pgina el icono de origen de la regla
situado en la esquina superior izquierda de la vista Diseo de la ventana Documento.
Para restablecer el origen a su posicin predeterminada, seleccione Ver > Reglas > Restablecer
origen.
Para cambiar la unidad de medida, seleccione Pxeles, Pulgadas o Centmetros en el submen
Ver > Reglas.
Para mostrar u ocultar la cuadrcula:
Seleccione Ver > Cuadrcula > Mostrar cuadrcula.
Para activar o desactivar el ajuste:
Seleccione Ver > Cuadrcula > Ajustar a cuadrcula.
Para cambiar la configuracin de la cuadrcula:
1 Seleccione Ver > Cuadrcula > Configuracin de cuadrcula.
Utilizacin de una imagen de rastreo 167
Aparecer el cuadro de dilogo Configuracin de la cuadrcula.
2 Seleccione las opciones deseadas.
Temas relacionados
Cmo mover capas en la pgina 164
Alineacin de capas en la pgina 164
Utilizacin de una imagen de rastreo
Puede utilizar una imagen de rastreo como gua para recrear un diseo de pgina creado en una
aplicacin grfica como Macromedia Freehand o Fireworks.
Una imagen de rastreo es una imagen JPEG, GIF o PNG que se sita en el fondo de la ventana de
documento. Puede ocultar la imagen, configurar su opacidad y cambiar su posicin.
Para colocar una imagen de rastreo en la ventana de documento:
Seleccione Ver > Imagen de rastreo > Cargar.
Seleccione Modificar > Propiedades de la pgina y haga clic en el botn Examinar situado
junto al cuadro de texto Imagen de rastreo.
2 En el cuadro de dilogo que aparece, seleccione un archivo de imagen y haga clic en Seleccionar
(Windows) o Elegir (Macintosh).
Aparecer el cuadro de dilogo Propiedades de la pgina.
3 Especifique la transparencia para la imagen arrastrando el control deslizante Transparencia de
imagen y, a continuacin, haga clic en Aceptar.
Para cambiar a otra imagen de rastreo o cambiar la transparencia de la imagen de rastreo actual en
cualquier momento, seleccione Modificar > Propiedades de la pgina.
Para mostrar u ocultar la imagen de rastreo:
Seleccione Ver > Imagen de rastreo > Mostrar.
La imagen de rastreo slo se encuentra visible en Dreamweaver. sta nunca puede verse en la
pgina desde un navegador. Cuando est visible la imagen de rastreo, la imagen y el color de
fondo reales no estn visibles en la ventana de documento; no obstante, se encontrarn visibles
cuando la pgina se muestre en un navegador.
Para cambiar la posicin de una imagen de rastreo:
1 Seleccione Ver > Imagen de rastreo > Ajustar posicin.
Para especificar de forma precisa la posicin de la imagen de rastreo, introduzca valores de
coordenadas en los cuadros X e Y.
Para mover la imagen de pxel en pxel, utilice las teclas de flecha.
Para mover la imagen de cinco en cinco pxeles, presione Mays y una tecla de flecha.
Para restablecer la posicin de la imagen de rastreo:
Seleccione Ver > Imagen de rastreo > Restablecer posicin.
La imagen de rastreo regresar a la esquina superior izquierda de la ventana de documento
(0,0).
Para alinear la imagen de rastreo con un elemento seleccionado:
1 Seleccione un elemento de la ventana de documento.
2 Seleccione Ver > Imagen de rastreo > Alinear con seleccin.
La esquina superior izquierda de la imagen de rastreo se alinear con la esquina superior
izquierda del elemento seleccionado.
169
CAPTULO 8
Presentacin de contenido en tablas
Las tablas constituyen una herramienta muy eficaz para presentar datos de tabla y establecer el
diseo de texto y grficos en una pgina.
Muchos diseadores utilizan tablas para establecer el diseo de pginas Web. Macromedia
Dreamweaver MX 2004 ofrece dos mtodos de visualizacin y manipulacin de tablas: el modo
estndar, en el que las tablas se presentan en forma de cuadrcula de filas y columnas, y el modo de
diseo, que permite dibujar, cambiar el tamao y mover cuadros en la pgina mientras se siguen
utilizando tablas para la estructura subyacente (vase Captulo 9, Diseo de pginas en el modo
de diseo, en la pgina 189).
Nota: tambin puede disear las pginas con el posicionamiento de CSS (vase Captulo 7, Diseo
de pginas con CSS, en la pgina 151).
Tablas en la pgina 170
Importacin y exportacin de datos de tabla en la pgina 172
Seleccin de elementos de una tabla en la pgina 173
Utilizacin del modo de tablas expandidas para facilitar la edicin de tablas en la pgina 176
Aplicacin de formato a tablas y celdas en la pgina 176
Cambio de tamao de tablas, columnas y filas en la pgina 178
Adicin y eliminacin de filas y columnas en la pgina 182
Divisin y combinacin de celdas en la pgina 184
Cmo copiar, pegar y eliminar celdas en la pgina 185
Anidacin de tablas en la pgina 187
Ordenacin de tablas en la pgina 187
170 Captulo 8: Presentacin de contenido en tablas
Tablas
Las tablas constituyen una herramienta muy eficaz para presentar datos de tabla y establecer el
diseo de texto y grficos en una pgina HTML. Una tabla consta de una o varias filas, cada una
de las cuales consta, a su vez, de una o ms celdas. Aunque las columnas no suelen especificarse
explcitamente en el cdigo HTML, Dreamweaver permite manipular tanto columnas como filas
y celdas.
Dreamweaver muestra el ancho de la tabla y de cada columna cuando se selecciona una tabla o
cuando el punto de insercin est en ella. Junto a los anchos se encuentran flechas para el men de
encabezado de la tabla y los mens de encabezado de las columnas. Utilice los mens para acceder
rpidamente a determinados comandos relacionados con tablas. Puede activar o desactivar los
anchos y los mens segn sea necesario (vase Visualizacin del ancho y los mens de tablas y
columnas en la pgina 182).
Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no tienen un ancho
especificado en el cdigo HTML. Si aparecen dos nmeros, el ancho visual que aparece en la vista
de diseo no corresponde con el ancho especificado en el cdigo HTML. Esto puede ocurrir al
cambiar el tamao de una tabla arrastrando la esquina inferior derecha o al aadir contenido a la
celda cuyo ancho es superior al establecido.
Por ejemplo, si establece un ancho de columna en 200 pxeles y aade contenido que se ajusta al
ancho de 250 pxeles, se mostrarn dos nmeros para dicha columna: 200 (ancho especificado en
el cdigo) y (250) entre parntesis (ancho visual de la columna tal como aparece en la pantalla).
Para igualar los anchos de columna, vase Cmo igualar los anchos de columna del cdigo con
los anchos de columna visuales en la pgina 181.
Temas relacionados
Prioridad de formato de tabla en HTML
A la hora de dar formato a tablas en la vista Diseo, puede definir propiedades que se apliquen a
toda la tabla o a filas, columnas o celdas seleccionadas de la misma. Al definir el valor de una
propiedad como, por ejemplo, el color de fondo o la alineacin, para toda la tabla y otro valor
para celdas individuales, el formato de celda tiene prioridad sobre el formato de fila, que a su vez
tiene prioridad sobre el formato de tabla.
El orden de prioridad en el formato de tabla es el siguiente:
1 Celdas
2 Filas
3 Tabla
Por ejemplo, si establece un color de fondo azul para una sola celda y, a continuacin, establece el
color de fondo de toda la tabla como amarillo, la celda azul no cambiar a amarillo, ya que el
formato de celda tiene prioridad sobre el formato de tabla.
Nota: al establecer las propiedades de una columna, Dreamweaver modifica los atributos de la
etiqueta td correspondientes a cada celda de la columna.
Temas relacionados
Insercin de una tabla y adicin de contenido 171
Divisin y combinacin de celdas de tabla
Podr combinar cualquier nmero de celdas contiguas, siempre que toda la seleccin sea una lnea
o un rectngulo de celdas, para obtener una sola celda que se extienda a lo largo de varias
columnas o filas. Una celda puede dividirse en las filas o columnas que sea necesario, aunque haya
sido combinada anteriormente. Dreamweaver reestructura automticamente la tabla (aadiendo
los atributos colspan o rowspan correspondientes) para crear el diseo especificado.
En la ilustracin siguiente, las celdas en la mitad de las dos primeras filas se han combinado en
una nica celda que ocupa dos filas.
Temas relacionados
Divisin y combinacin de celdas en la pgina 184
Insercin de una tabla y adicin de contenido
Utilice la barra o el men Insertar para crear una tabla. A continuacin, aada texto e imgenes a
las celdas de una tabla del mismo modo que lo hara fuera de una tabla (vase Captulo 13,
Insercin y formato de texto, en la pgina 281 y Captulo 14, Insercin de imgenes, en
la pgina 311).
Para insertar una tabla:
1 En la vista Diseo de la ventana de documento, site el punto de insercin donde desee que
aparezca la tabla.
Nota: si el documento est en blanco, la nica ubicacin posible ser el principio del mismo.
Seleccione Insertar > Tabla.
En la categora Comn de la barra Insertar, haga clic en el botn Tabla.
Se mostrar el cuadro de dilogo Insertar tabla.
La tabla aparece en el documento.
Temas relacionados
Visualizacin y configuracin de las propiedades de tabla, celda, fila y columna en
la pgina 177
Edicin de los atributos de accesibilidad para una tabla en la pgina 177
Importacin y exportacin de datos de tabla
Los datos de tabla creados con otra aplicacin (por ejemplo, Microsoft Excel) y guardados en un
formato de texto delimitado (con elementos separados por tabuladores, comas, dos puntos,
puntos y comas u otros delimitadores) se pueden importar a Dreamweaver y aplicarles formato de
tabla.
Tambin puede exportar los datos de tabla desde Dreamweaver a un archivo de texto, con el
contenido de las celdas contiguas separado por un delimitador. Se pueden utilizar comas, dos
puntos, puntos y comas o espacios como delimitadores. No se pueden exportar partes de una
tabla, por lo que es necesario exportar la tabla entera en todos los casos.
Sugerencia: si slo le interesan algunos de los datos de una tabla (por ejemplo, las seis primeras filas
o columnas), copie las celdas que contienen dichos datos y pguelas fuera de la tabla para crear una
nueva tabla y, a continuacin, exporte la nueva tabla.
Para importar datos de tabla:
Seleccione Archivo > Importar > Datos de tabla.
Seleccione Insertar > Objetos de tabla > Importar datos de tabla.
Aparece el cuadro de dilogo Importar datos de tabla.
2 En el cuadro de dilogo introduzca informacin acerca del archivo que contiene los datos.
Seleccin de elementos de una tabla 173
Para exportar una tabla:
1 Site el punto de insercin en cualquier celda de la tabla.
2 Seleccione Archivo > Exportar > Tabla.
Se mostrar el cuadro de dilogo Exportar tabla.
3 En este cuadro de dilogo, especifique las opciones para la exportacin de la tabla.
4 Haga clic en Exportar.
Aparecer el cuadro de dilogo Exportar tabla.
5 Introduzca un nombre para el archivo.
Seleccin de elementos de una tabla
Puede seleccionar toda una tabla, fila o columna al mismo tiempo. Tambin puede seleccionar
una o varias celdas individuales.
Cuando se desplaza el puntero sobre una tabla, fila, columna o celda, Dreamweaver resalta todas
las celdas de esa seleccin para que sepa exactamente qu celdas se seleccionarn si hace clic en la
seleccin. Esto puede resultar til si utiliza tablas sin bordes, celdas que ocupan varias columnas o
filas, o bien tablas anidadas. Puede cambiar el color de resaltado en las preferencias.
Sugerencia: si coloca el puntero encima del borde de una tabla, mantenga presionada la tecla
Control (Windows) o la tecla Comando (Macintosh) y toda la estructura de la tabla, es decir las celdas
de la misma, quedarn resaltadas. Esto puede resultar til si utiliza tablas anidadas y desea ver la
estructura de una de las tablas.
Para cambiar el color de resaltado para seleccionar elementos de la tabla:
3 Realice uno de los siguientes cambios:
Para cambiar el color de resaltado de los elementos de tabla, haga clic en el cuadro Color al
pasar el ratn por encima y seleccione un color de resaltado con el selector de color (o bien
escriba el valor hexadecimal del color de resaltado en el cuadro de texto).
la pgina 267.
Para activar o desactivar el resaltado de los elementos de tabla, active o desactive la casilla de
verificacin Mostrar correspondiente a Ratn por encima.
Nota: estas opciones afectan a todos los objetos, como las capas y las tablas y celdas del modo
de vista de diseo que Dreamweaver resalta cuando pasa el puntero por encima.
Temas relacionados
Cmo copiar, pegar y eliminar celdas en la pgina 185
Seleccin de una tabla
Existen varios modos de seleccionar una tabla entera de una sola vez.
Para seleccionar toda la tabla, siga uno de estos procedimientos:
Haga clic en la esquina superior izquierda de la tabla, en cualquier punto del borde derecho o
inferior de la tabla o en el borde de una fila o de una columna.
Nota: cuando pueda seleccionar la tabla, el puntero se convertir en el icono de cuadrcula de
tabla (a menos que haga clic en el borde de una fila o columna).
Haga clic en una celda de la tabla y, a continuacin, seleccione la etiqueta <Tabla> en el
selector de etiquetas situado en la esquina inferior izquierda de la ventana de documento.
Haga clic en una celda de la tabla y, a continuacin, seleccione Modificar > Tabla > Seleccionar
tabla.
Haga clic en una celda de la tabla, despus en el men del encabezado de tabla y, a
continuacin, seleccione Seleccionar tabla.
Aparecern manejadores de seleccin en los bordes inferior y derecho de la tabla.
Temas relacionados
Seleccin de celdas en la pgina 175
Seleccin de filas y columnas
Puede seleccionar una o varias filas y columnas.
Para seleccionar una o varias filas y columnas:
1 Site el puntero en el borde izquierdo de una fila o en el borde superior de una columna.
2 Cuando el puntero se convierta en una flecha de seleccin, haga clic para seleccionar una fila o
columna, o arrastre para seleccionar varias filas o columnas.
Seleccin de elementos de una tabla 175
Para seleccionar una sola columna:
1 Haga clic en la columna.
2 Haga clic en el men de encabezado de columna y, a continuacin, seleccione Seleccionar
columna.
Temas relacionados
Seleccin de una tabla en la pgina 174
Seleccin de celdas
Puede seleccionar celdas individuales, una lnea, un bloque de celdas o celdas no contiguas. Para
seleccionar filas o columnas enteras, vase Seleccin de filas y columnas en la pgina 174.
Para seleccionar una sola celda, siga uno de estos procedimientos:
Haga clic en la celda y, a continuacin, seleccione la etiqueta <td> en el selector de etiquetas
situado en la esquina inferior izquierda de la ventana de documento.
Presione la tecla Control (Windows) o Comando (Macintosh) y haga clic en la celda.
Haga clic en la celda y, a continuacin, seleccione Edicin > Seleccionar todo.
Sugerencia: para seleccionar toda una tabla, vuelva a seleccionar Edicin > Seleccionar todo
cuando una celda est seleccionada.
Para seleccionar un bloque de celdas lineal o rectangular, siga uno de estos procedimientos:
Arrastre de una celda a otra.
Haga clic en una celda, presione Control y haga clic (Windows) o presione Comando y haga
clic (Macintosh) en la misma celda para seleccionarla y, a continuacin, presione Mays y haga
clic en otra celda.
Todas las celdas de la regin lineal o rectangular definida por las dos celdas quedarn seleccionadas.
Para seleccionar celdas no contiguas:
Presione Control (Windows) o Comando (Macintosh) mientras hace clic en las celdas, filas o
columnas que desea seleccionar.
Las celdas, filas o columnas que no estn todava seleccionadas se aadirn a la seleccin. Las
que ya lo estn, se eliminarn de la seleccin.
Temas relacionados
Seleccin de una tabla en la pgina 174
Utilizacin del modo de tablas expandidas para facilitar la
edicin de tablas
El modo de tablas expandidas aade temporalmente relleno y espaciado de celda a las tablas de un
documento y aumenta los bordes de las tablas para facilitar la edicin. Este modo permite
seleccionar elementos de las tablas o colocar el punto de insercin de forma precisa.
Por ejemplo, puede ampliar una tabla para colocar el punto de insercin en la parte izquierda o
derecha de una imagen, sin seleccionar por error la imagen o la celda de tabla.
Nota: una vez que haya realizado su seleccin o haya colocado el punto de insercin, vuelva al modo
Estndar de la vista Diseo para llevar a cabo sus modificaciones. Algunas operaciones visuales
como el cambio de tamao no darn los resultados esperados en el modo de tablas expandidas.
Para pasar al modo de tablas expandidas:
1 Si est trabajando en la vista Cdigo, seleccione Ver > Diseo o Ver > Cdigo y diseo.
No puede pasar al modo de tablas expandidas desde la vista de cdigo.
Seleccione Ver > Modo de tabla > Modo de tablas expandidas.
En la categora Diseo de la barra Insertar, haga clic en el botn Modo de tablas expandidas.
Aparecer una barra etiquetada Modo de tablas expandidas en la parte superior de la ventana
Documento. Dreamweaver aade relleno y espaciado de celdas a todas las tablas de la pgina y
aumenta sus bordes.
Para salir del modo de tablas expandidas, siga uno de estos procedimientos:
Haga clic en Salir en la barra etiquetada Modo de tablas expandidas de la parte superior de la
ventana Documento.
Seleccione Ver > Modo de tabla > Modo estndar.
En la categora Diseo de la barra Insertar, haga clic en el botn Modo estndar.
Dreamweaver regresa al modo estndar.
Aplicacin de formato a tablas y celdas
Puede cambiar el aspecto de una tabla configurando las propiedades de la misma y de sus celdas o
aplicndole un diseo predefinido. Antes de definir las propiedades de la tabla y de las celdas, es
recomendable que comprenda qu propiedades tienen preferencia sobre otras (vase Prioridad de
formato de tabla en HTML en la pgina 170).
Sugerencia: para aplicar formato al texto de una celda de tabla, utilice los mismos procedimientos
que utilizara para aplicar formato al texto fuera de una tabla. Para ms informacin, consulte el
Captulo 13, Insercin y formato de texto, en la pgina 281.
Temas relacionados
Aplicacin de formato a tablas y celdas 177
Visualizacin y configuracin de las propiedades de tabla, celda, fila y columna
Al seleccionar una tabla o celda, el inspector de propiedades permite ver y modificar sus
propiedades.
Nota: antes de cambiar las propiedades de los elementos de la tabla, es recomendable que
comprenda que hay propiedades que tienen preferencia sobre otras (vase Prioridad de formato de
tabla en HTML en la pgina 170).
Para visualizar y configurar las propiedades de una tabla o de un elemento de la tabla:
1 Seleccione una tabla, celda, fila o columna (vase Seleccin de elementos de una tabla en
la pgina 173).
2 En el inspector de propiedades (Ventana > Propiedades), haga clic en la flecha de ampliacin
situada en la esquina inferior derecha para ver todas las propiedades.
3 Cambie las propiedades segn convenga.
Nota: al establecer las propiedades de una columna, Dreamweaver modifica los atributos de la
etiqueta td correspondientes a cada celda de la columna. Sin embargo, al establecer algunas de
las propiedades de una fila, Dreamweaver modifica los atributos de la etiqueta tr en lugar de los
atributos de cada etiqueta td de la fila. Al aplicar el mismo formato a todas las celdas de una fila
mediante la etiqueta tr se obtiene un cdigo HTML ms claro y conciso.
Edicin de los atributos de accesibilidad para una tabla
Si no ha aadido los atributos de accesibilidad para una tabla al insertarla (vase Insercin de una
tabla y adicin de contenido en la pgina 171) y debe aadirlos ms adelante, o si necesita editar
dichos atributos, puede hacerlo en las vistas Cdigo y Diseo.
Para aadir o editar valores de accesibilidad para una tabla en la vista Cdigo:
Edite los atributos adecuados en el cdigo.
Sugerencia: para localizar rpidamente las etiquetas en el cdigo, haga clic en la etiqueta <table>
en el selector de etiquetas que se encuentra en la parte inferior de la ventana de documento.
Para aadir y editar los valores de accesibilidad para una tabla en la vista Diseo, siga uno
de estos procedimientos:
Para editar el texto de la tabla, resltelo y escriba uno nuevo.
Para editar la alineacin del texto, coloque el punto de insercin en el texto de la tabla, haga
clic con el botn derecho (Windows) o mantenga presionada la tecla Control y haga clic
(Macintosh) y seleccione Editar cdigo de etiqueta.
Para editar el resumen de la tabla, seleccinela, haga clic con el botn derecho (Windows) o
mantenga presionada la tecla Control y haga clic (Macintosh) y seleccione Editar cdigo de
etiqueta.
Temas relacionados
Visualizacin y configuracin de las propiedades de tabla, celda, fila y columna en
la pgina 177
Utilizacin de un esquema de diseo para aplicar formato a una tabla
Utilice el comando Formatear tabla para aplicar fcilmente un diseo predefinido a una tabla. A
continuacin, podr seleccionar opciones para personalizar ms el diseo.
Nota: slo se pueden aplicar formatos de diseos predefinidos a las tablas sencillas. No puede
utilizar estos diseos para aplicar formato a las tablas que contienen celdas combinadas (colspan o
rowspan), grupos de columnas o tablas que no se compongan de una cuadrcula rectangular de
celdas.
Para utilizar un diseo de tabla predefinido:
1 Seleccione una tabla (vase Seleccin de una tabla en la pgina 174).
2 Seleccione Comandos > Formatear tabla.
Se mostrar el cuadro de dilogo Formatear tabla.
3 Personalice las opciones como desee.
4 Haga clic en Aplicar o en Aceptar para dar formato a la tabla con el diseo seleccionado.
Cambio de tamao de tablas, columnas y filas
Puede cambiar el tamao de una tabla completa o de filas y columnas individuales. Si encuentra
problemas para cambiar el tamao, borre el ancho de la columna y el alto de la fila y empiece de
nuevo.
En ocasiones, los anchos de columna de tabla establecidos en cdigo HTML no coinciden con los
anchos que aparecen en la pantalla. Cuando esto sucede, puede hacer que los anchos coincidan.
Los anchos y los mens de encabezado de las tablas y columnas se muestran en Dreamweaver para
ayudarle a disear las tablas, y puede activarlos y desactivarlos segn sea necesario.
Cambio de tamao de una tabla
Puede cambiar el tamao de una tabla arrastrando uno de sus manejadores de seleccin.
Dreamweaver muestra el ancho de la tabla junto con un men de encabezado de tabla en la parte
superior o inferior de la tabla cuando sta se selecciona o el punto de insercin est en ella.
Cambio de tamao de tablas, columnas y filas 179
Nota: puede desactivar el ancho de la tabla y el men de encabezado si es necesario (vase
Visualizacin del ancho y los mens de tablas y columnas en la pgina 182).
Al cambiar el tamao de toda la tabla, el tamao de todas sus celdas cambiar proporcionalmente.
Si el alto y el ancho de las celdas de una tabla estn explcitamente especificados, al cambiar el
tamao de la tabla tambin lo har el tamao visual de las celdas en la ventana de documento,
aunque no el alto y el ancho especificado para las celdas. Para borrar cualquier alto o ancho
establecido, vase Cmo borrar los anchos y altos establecidos en la pgina 181.
Para cambiar el tamao de una tabla:
1 Seleccione la tabla (vase Seleccin de una tabla en la pgina 174).
Aparecen manejadores de seleccin en la tabla.
Para cambiar el tamao horizontal de la tabla, arrastre el manejador de seleccin de la
derecha.
Para cambiar el tamao vertical de la tabla, arrastre el manejador de seleccin de la parte
inferior.
Para cambiar ambos, arrastre el manejador de seleccin de la esquina inferior derecha.
Cambio de tamao de columnas y filas
Puede cambiar el ancho de una columna o el alto de una fila en el inspector de propiedades o
arrastrando los bordes de la columna o fila. Si encuentra problemas para cambiar el tamao, borre
el ancho de la columna y el alto de la fila y empiece de nuevo (vase Cmo borrar los anchos y
altos establecidos en la pgina 181).
Nota: tambin puede cambiar directamente el ancho y el alto de la celda en los cdigos HTML
utilizando la vista Cdigo. Para ms informacin, consulte Codificacin en Dreamweaver en
la pgina 427.
Dreamweaver muestra el ancho de las columnas junto con mens de encabezado en su parte
superior o inferior cuando se selecciona la tabla o el punto de insercin est en ella. Para ms
informacin, consulte Tablas en la pgina 170.
Nota: si es necesario puede desactivar los anchos y los mens de encabezado de las columnas
(vase Visualizacin del ancho y los mens de tablas y columnas en la pgina 182).
Para cambiar el ancho de una columna y mantener el ancho general de la tabla:
Arrastre el borde derecho de la columna que desee cambiar.
El ancho de la columna contigua tambin vara; en consecuencia, cambia el tamao de las dos
columnas. Se mostrar cmo se ajustan las columnas, pero el ancho general de la tabla no
variar.
Nota: en las tablas con ancho basados en porcentajes (no pxeles), si arrastra el borde derecho de
la columna que se encuentra ms a la derecha, variar todo el ancho de la tabla y las columnas se
harn ms anchas o estrechas proporcionalmente.
Para cambiar el ancho de una columna y mantener el tamao de las dems:
Mantenga pulsada la tecla Mays mientras arrastra el borde de la columna.
Cambiar el ancho de una columna. Las ayudas visuales le mostrarn cmo se ajustan las
columnas. El ancho total de la tabla cambia para dar cabida a la columna que ha cambiado de
tamao.
Para cambiar el alto de una fila visualmente:
Arrastre el borde inferior de la fila.
Para establecer el ancho de una columna o el alto de una fila utilizando el inspector de
propiedades:
1 Seleccione la columna o fila (vase Seleccin de filas y columnas en la pgina 174).
2 En el inspector de propiedades (Ventana > Propiedades), introduzca un valor en el campo de
texto An para el ancho de columna o en el campo de texto Al para el alto de la misma.
Sugerencia: el alto y el ancho pueden especificarse en pxeles o porcentajes y puede convertirse
de una unidad a otra.
3 Presione el tabulador o la tecla Intro (Windows) o Retorno (Macintosh) para aplicar el valor.
Temas relacionados
Cambio de tamao de una tabla en la pgina 178
Cmo borrar los anchos y altos establecidos en la pgina 181
Visualizacin del ancho y los mens de tablas y columnas en la pgina 182
Cambio de tamao de tablas, columnas y filas 181
Cmo igualar los anchos de columna del cdigo con los anchos de columna
visuales
Si existen dos nmeros para el ancho de una columna, el ancho de columna definido en el cdigo
HTML no coincide con el ancho de columna que aparece en la pantalla. Puede igualar el ancho
especificado en el cdigo con el ancho visual. Para ms informacin, consulte Tablas en
la pgina 170.
Para homogeneizar los anchos:
1 Haga clic en una celda.
2 Haga clic en el men del encabezado de tabla y, a continuacin, seleccione Igualar todos los
anchos.
Dreamweaver restablece el ancho especificado en el cdigo para que coincida con el ancho
visual.
Temas relacionados
Cambio de tamao de columnas y filas en la pgina 179
Cmo borrar los anchos y altos establecidos
Si lo desea, puede borrar los anchos y altos establecidos antes de cambiar el tamao de una tabla o
si tiene problemas para cambiar el tamao de columnas o filas individuales de una tabla y desea
volver a empezar.
Nota: al cambiar el tamao de una tabla arrastrando uno de los manejadores de seleccin de la
misma, se modifica el tamao visual de las celdas de la tabla; sin embargo, no se modifican los
anchos y altos especificados de las celdas. Es recomendable borrar los anchos y altos especificados
antes de cambiar el tamao de la tabla.
Para borrar los anchos y altos especificados de una tabla:
Seleccione Modificar > Tabla > Borrarancho de celda o Modificar > Tabla > Borrar alto de
celda.
En el inspector de propiedades (Ventana > Propiedades), haga clic en el botn Borrar alto de
fila o en el botn Borrar ancho de columna.
Haga clic en el men del encabezado de tabla y, a continuacin, seleccione Borrar todos los
altos o Borrar todos los anchos.
Para borrar el ancho establecido de una columna:
1 Haga clic en la columna.
2 Haga clic en el men del encabezado de columna y, a continuacin, seleccione Borrar ancho de
columna.
Temas relacionados
Cmo igualar los anchos de columna del cdigo con los anchos de columna visuales en
la pgina 181
Visualizacin del ancho y los mens de tablas y columnas
Dreamweaver muestra los anchos de tablas y columnas junto con flechas para acceder al men del
encabezado de la tabla y los mens de encabezado de columna cuando se selecciona una tabla o el
punto de insercin est en ella. (Para obtener ms informacin, consulte Tablas en
la pgina 170.) Puede activar y desactivar los anchos y los mens segn sea necesario.
Para activar o desactivar los anchos y mens de tablas y columnas, siga uno de estos
procedimientos:
Seleccione Ver > Ayudas visuales > Anchos de tabla.
haga clic (Macintosh) en la tabla, y seleccione Tabla > Anchos de tabla.
Temas relacionados
Adicin y eliminacin de filas y columnas
Para aadir o eliminar filas y columnas, utilice Modificar > Tabla o el men de encabezado de
columna.
Sugerencia: si presiona la tecla Tab en la ltima celda de una tabla se aadir automticamente otra
fila a la tabla.
Para aadir una sola fila o columna:
Adicin y eliminacin de filas y columnas 183
Seleccione Modificar > Tabla > Insertar fila o bien Modificar > Tabla > Insertar columna.
Aparecer una fila encima del punto de insercin o una columna a la izquierda del punto de
insercin.
Haga clic en el men del encabezado de columna y, a continuacin, seleccione Insertar
columna izquierda o Insertar columna derecha.
Aparecer una columna a la izquierda o a la derecha del punto de insercin.
Para aadir varias filas o columnas:
2 Seleccione Modificar > Tabla > Insertar filas o columnas.
Aparece el cuadro de dilogo Insertar filas o columnas.
3 Elija Filas o Columnas y, a continuacin, complete el cuadro de dilogo.
Las filas o columnas aparecen en la tabla.
Para eliminar una fila o una columna, siga uno de estos procedimientos:
Haga clic en una celda dentro de la fila o de la columna que desea eliminar y, a continuacin,
seleccione Modificar > Tabla > Eliminar fila o Modificar > Tabla > Eliminar columna.
Seleccione una fila o columna completa (vase Seleccin de filas y columnas en
la pgina 174) y, a continuacin, seleccione Edicin > Borrar o presione Supr.
Toda la fila o la columna desaparecer de la tabla.
Para aadir o eliminar filas o columnas utilizando el inspector de propiedades:
2 En el inspector de propiedades (Ventana > Propiedades), siga uno de estos procedimientos:
Aumente o disminuya el valor de Filas para aadir o eliminar filas.
Dreamweaver aade y elimina filas del final de la tabla.
Aumente o disminuya el valor de Cols para aadir o eliminar columnas.
Dreamweaver aade y elimina columnas de la derecha de la tabla.
Nota: Dreamweaver no advertir de que las filas o las columnas que desea eliminar contienen
datos.
Temas relacionados
Insercin de una tabla repetida en la pgina 242
Visualizacin de varios resultados de juego de registros en la pgina 586
Divisin y combinacin de celdas
Utilice el inspector de propiedades o los comandos del submen Modificar > Tabla para dividir o
combinar celdas. Para ms informacin, consulte Divisin y combinacin de celdas de tabla en
la pgina 171.
Como alternativa a la divisin y combinacin de celdas, Dreamweaver incluye tambin
herramientas que permiten aumentar o disminuir el nmero de filas o columnas que ocupa una
celda.
Para combinar dos o ms celdas en una tabla:
1 Seleccione las celdas en una lnea contigua y en forma de un rectngulo.
En la siguiente ilustracin, la seleccin es un rectngulo de celdas, por lo que stas se pueden
combinar.
En la siguiente ilustracin, la seleccin no es un rectngulo, por lo que las celdas no se pueden
combinar.
Seleccione Modificar > Tabla > Combinar celdas.
En el inspector de propiedades ampliado (Ventana > Propiedades), haga clic en el botn
Combinar celdas.
Nota: si no se muestra el men, haga clic en la flecha de la esquina inferior derecha del
inspector de propiedades para ver todas las opciones.
El contenido de las celdas individuales se sita en la celda combinada resultante. Las
propiedades de la primera celda seleccionada se aplicarn a la celda combinada.
Para dividir una celda:
1 Haga clic en la celda.
Seleccione Modificar > Tabla > Dividir celda.
En el inspector de propiedades ampliado (Ventana > Propiedades), haga clic en el botn
Dividir celda.
Cmo copiar, pegar y eliminar celdas 185
Nota: si no se muestra el men, haga clic en la flecha de la esquina inferior derecha del
inspector de propiedades para ver todas las opciones.
3 En el cuadro de dilogo Dividir celda, especifique cmo desea dividir la celda.
Para aumentar o disminuir el nmero de filas o columnas que ocupa una celda:
1 Seleccione una celda.
Seleccione Modificar > Tabla > Aumentar tamao de fila, o bien Modificar > Tabla >
Aumentar tamao de columna.
Seleccione Modificar > Tabla > Reducir tamao de fila, o bien Modificar > Tabla > Reducir
tamao de columna.
Cmo copiar, pegar y eliminar celdas
Puede copiar, pegar o eliminar una o varias celdas de una tabla al mismo tiempo, conservando el
formato de las celdas.
Las celdas se pueden pegar en el punto de insercin o en el lugar de una seleccin en una tabla
existente. Para pegar varias celdas de una tabla, el contenido del Portapapeles debe ser compatible
con la estructura de la tabla o la seleccin de la tabla en la que se van a pegar las celdas.
Para cortar o copiar celdas de una tabla:
1 Seleccione una o varias celdas en una lnea contigua y en forma de un rectngulo.
En la siguiente ilustracin, la seleccin es un rectngulo de celdas, por lo que stas se pueden
cortar o copiar.
En la siguiente ilustracin, la seleccin no es un rectngulo de celdas, por lo que stas no se
pueden cortar ni copiar.
2 Seleccione Edicin > Cortar, o bien Edicin > Copiar.
Nota: si selecciona una fila o columna completa y selecciona Edicin > Cortar, se eliminar toda la
columna o fila de la tabla (no slo el contenido de las celdas).
Para pegar celdas de una tabla:
1 Elija dnde desea pegar las celdas:
Para reemplazar las celdas actuales por las celdas que desea pegar, seleccione un grupo de
celdas que tengan el mismo diseo que las del portapapeles.
Por ejemplo, si ha copiado o cortado un bloque de celdas de 3 x 2, podr reemplazarlo por
otro bloque de celdas de 3 x 2.
Para pegar toda una fila de celdas encima de una celda concreta, haga clic en dicha celda.
Para pegar toda una columna de celdas a la izquierda de una celda concreta, haga clic en
dicha celda.
Nota: si no dispone de toda una fila o columna de celdas en el portapapeles y hace clic en una
celda y, a continuacin, pega las celdas del portapapeles, puede reemplazar la celda en la que
ha hecho clic y las que la rodean (dependiendo de su ubicacin en la tabla) por las celdas que
est pegando.
Para crear una nueva tabla con las celdas pegadas, site el punto de insercin fuera de la tabla.
2 Seleccione Edicin > Pegar.
Si pega filas o columnas completas en una tabla existente, stas se aadirn a la tabla. Si pega
una sola celda, se reemplazar el contenido de la celda seleccionada. Si pega fuera de una tabla,
las filas, columnas o celdas se utilizarn para definir una tabla nueva.
Para eliminar el contenido y dejar las celdas intactas:
1 Seleccione una o ms celdas.
Nota: asegrese de que la seleccin no consta slo de filas o columnas completas.
2 Seleccione Edicin > Borrar o presione Supr.
Nota: si nicamente estn seleccionadas filas o columnas completas, cuando seleccione Edicin >
Borrar o presione Supr, se eliminarn de la tabla todas las filas o columnas, y no slo su contenido.
Para eliminar filas o columnas que contienen celdas combinadas:
1 Seleccione la fila o columna.
2 Seleccione Modificar > Tabla > Eliminar fila o Modificar > Tabla > Eliminar columna.
Ordenacin de tablas 187
Anidacin de tablas
Una tabla anidada es una tabla dentro de una celda o de otra tabla. Puede aplicar formato a una
tabla anidada como lo hara con cualquier otra tabla; no obstante, su ancho estar limitado por el
ancho de la celda en la que aparece.
Para anidar una tabla en una celda de otra tabla:
1 Haga clic en una celda de la tabla.
2 Seleccione Insertar > Tabla.
Se mostrar el cuadro de dilogo Insertar tabla.
La tabla aparecer en la tabla existente.
Ordenacin de tablas
Puede ordenar las filas de una tabla en funcin del contenido de una sola columna. Tambin
puede realizar una operacin ms compleja ordenndola en funcin del contenido de dos
columnas.
No se pueden ordenar tablas que contengan atributos colspan o rowspan, es decir, tablas con
celdas combinadas. Para ms informacin, consulte Divisin y combinacin de celdas en
la pgina 184.
Para ordenar una tabla:
1 Seleccione la tabla (vase Seleccin de una tabla en la pgina 174) o haga clic en cualquiera de
las celdas.
2 Seleccione Comandos > Ordenar tabla.
Se abre el cuadro de dilogo Ordenar tabla.
189
CAPTULO 9
Diseo de pginas en el modo de diseo
Un mtodo frecuente para crear el diseo de una pgina consiste en utilizar tablas HTML para
colocar los elementos. No obstante, las tablas pueden resultar difciles de usar como mtodo de
diseo, ya que inicialmente se crearon para mostrar datos tabulares y no para establecer el diseo
de pginas Web. Para optimizar el uso de tablas para establecer el diseo de pginas, Macromedia
Dreamweaver MX 2004 ofrece el modo de diseo.
En el modo de diseo puede establecer el diseo de una pgina utilizando tablas como estructura
subyacente, al tiempo que evita algunos de los problemas que suelen presentarse al crear diseos
basados en tablas con medios tradicionales.
Nota: para ms informacin sobre la utilizacin de tablas en modo estndar, consulte el Captulo 8,
Presentacin de contenido en tablas, en la pgina 169. Si lo desea, en lugar de utilizar tablas en
modo estndar o de diseo, puede utilizar la funcin de posicin CSS para definir el diseo de las
pginas (vase Insercin de bloques de contenido para diseo en la pgina 153).
Este captulo contiene las siguientes secciones:
Modo de diseo en la pgina 190
Alternancia entre modo estndar y modo de diseo en la pgina 193
Dibujo en el modo de diseo en la pgina 194
Adicin de contenido a una celda de diseo en la pgina 197
Cmo borrar los altos de celdas establecidos automticamente en la pgina 198
Cambio de tamao y desplazamiento de celdas y tablas de diseo en la pgina 198
Aplicacin de formato a celdas y tablas de diseo en la pgina 200
Establecimiento del ancho de columna en la pgina 200
Configuracin de preferencias para el modo de diseo en la pgina 203
190 Captulo 9: Diseo de pginas en el modo de diseo
Modo de diseo
En el modo de diseo, se utilizan celdas y tablas de diseo para definir el diseo de la pgina antes
de aadir contenido. Por ejemplo, puede dibujar una celda a lo largo de la parte superior de la
pgina para insertar un grfico de encabezado, otra celda en la parte izquierda de la pgina para
insertar una barra de navegacin y una tercera celda en la parte derecha para insertar contenido. A
medida que aada contenido, puede mover las celdas segn convenga para ajustar el diseo.
Sugerencia: para obtener la mxima flexibilidad, puede dibujar cada celda slo cuando est listo
para colocar contenido en ella. Ello permite disponer de ms espacio vaco en la tabla de diseo
durante ms tiempo para poder mover las celdas o cambiar su tamao con ms facilidad.
Las tablas de diseo aparecen con un contorno de color verde en la pgina; las celdas de diseo
aparecen con un contorno de color azul. (Para cambiar los colores predeterminados de los
contornos, vase Configuracin de preferencias para el modo de diseo en la pgina 203.)
Cuando el puntero se pasa por encima de una celda de una tabla, Dreamweaver resalta la celda.
(Para activar o desactivar el resaltado o para cambiar el color del resaltado, vase Dibujo de celdas
y tablas de diseo en la pgina 194.)
Puede establecer el diseo de la pgina utilizando varias celdas de diseo dentro de una tabla de
diseo, lo cual resulta ser el mtodo ms empleado. Para crear diseos ms complejos, puede
utilizar varias tablas de diseo separadas. El uso de varias tablas de diseo asla secciones de la
distribucin para evitar que se vean afectadas por los cambios que afectan a otras secciones.
Tambin puede anidar las tablas de diseo situando una nueva tabla de diseo dentro de otra
existente (vase Dibujo de una tabla de diseo anidada en la pgina 195). Esta estructura le
permite simplificar la estructura de la tabla cuando las filas o columnas de una parte del diseo no
estn alineadas con las filas o columnas de otra parte. Por ejemplo, el uso de tablas de diseo
anidadas le permite crear de forma sencilla un diseo de dos columnas con cuatro lneas en la
columna izquierda y tres filas en la columna derecha.
Alternancia entre modo estndar y modo de diseo en la pgina 193
Dibujo en el modo de diseo en la pgina 194
Modo de diseo 191
Visualizacin del ancho de tabla y celda en modo de diseo
El ancho de las tablas y las celdas de diseo (en pxeles o en forma de porcentaje del ancho de la
pgina) aparece en la parte superior o en la parte inferior de la tabla cuando sta se selecciona o
cuando el punto de insercin est dentro de la tabla. Al lado del ancho hay flechas para el men
de encabezado de tabla y el men de encabezado de columna. Utilice los mens para acceder
rpidamente a determinados comandos.
Nota: para desactivar el ancho de columna, junto con las fichas de tabla y los mens de encabezado,
debe desactivar todas las ayudas visuales (Ver > Ayudas visuales > Ocultar todo).
En algunas ocasiones es posible que no aparezca el ancho de una columna; puede que aparezca
algo de lo siguiente:
Ningn ancho. Si no ve el ancho de una columna o de una tabla, esta tabla o columna no tiene
un ancho especificado en el cdigo HTML. Para especificar un ancho fijo, vase Definicin
de una columna como autoampliable o de ancho fijo en la pgina 201.
Dos nmeros. Si aparecen dos nmeros, el ancho visual que aparece en la vista de diseo no
coincide con el ancho especificado en el cdigo HTML. Esto puede ocurrir al cambiar el
tamao de una tabla arrastrando la esquina inferior derecha o al aadir contenido a la celda
cuyo ancho es superior al establecido.
Por ejemplo, si establece un ancho de columna en 200 pxeles y aade contenido que se ajusta
al ancho de 250 pxeles, la parte superior de dicha columna mostrar dos nmeros: 200 (ancho
especificado en el cdigo) y (250) entre parntesis (ancho visual de la columna tal como
aparece en la pantalla).
Para igualar los anchos de columna, vase Cmo igualar los anchos de columna del cdigo con
los anchos de columna visuales en la pgina 203.
Lnea ondulada. En las columnas definidas como autoampliables aparece una lnea ondulada.
Para informacin sobre la definicin de una columna como autoampliable, vase Definicin
de una columna como autoampliable o de ancho fijo en la pgina 201.
Barras dobles. Las columnas que contienen imgenes de espaciador tienen barras dobles
alrededor del ancho de columna. Para informacin sobre las imgenes de espaciador, vase
Utilizacin de imgenes de espaciador en la pgina 202.
Temas relacionados
Establecimiento del ancho de columna en la pgina 200
Lneas de la cuadrcula de las tablas y las celdas de diseo
Cuando dibuja una celda de diseo en una tabla de diseo, aparece una cuadrcula de lneas de un
color claro que va desde los bordes de las celdas de diseo nuevas hasta los bordes de la tabla de
diseo que la contienen. Estas lneas le ayudan a alinear las celdas nuevas con las celdas existentes
y le ayudan a visualizar la estructura subyacente de la tabla HTML.
Dreamweaver alinea automticamente los bordes de las nuevas celdas con los bordes de las celdas
existentes cercanas. (Las celdas de diseo no pueden solaparse.) Si dibuja una celda cerca del borde
de la tabla, los bordes de la celda tambin se ajustan automticamente a los bordes de la tabla de
diseo que la contiene.
Tambin puede utilizar la cuadrcula de Dreamweaver, que est definida y no cambia en funcin
de la colocacin de las celdas, para que resulte ms sencillo crear el diseo de la pgina (vase
Utilizacin de reglas y cuadrculas para disear pginas en la pgina 166).
Temas relacionados
Modo de diseo en la pgina 190
Ancho de columna fijo y columnas autoampliables
En el modo de diseo, una columna de tabla puede tener bien un ancho fijo o bien un ancho que
aumenta automticamente hasta ocupar tanto espacio de la ventana del navegador como resulte
posible (autoampliar).
Las columnas de ancho fijo tienen un ancho numrico especfico, como por ejemplo 300 pxeles.
Dreamweaver muestra el ancho de cada columna de ancho fijo en la parte superior o en la parte
inferior de la columna.
Las columnas autoampliables cambian automticamente en funcin del ancho de la ventana del
navegador. Al incluir una columna autoampliable en el diseo de una pgina, el diseo ocupa
siempre el ancho completo de la ventana del navegador del visitante. En una tabla de diseo slo
puede haber una columna autoampliable. Una columna autoampliable muestra una lnea
ondulada en el rea del ancho de columna.
Con frecuencia, se suele establecer como autoampliable la columna que contiene el contenido
principal de la pgina, lo cual establece automticamente el resto de las columnas de la pgina con
un ancho fijo. Por ejemplo, suponga que su diseo incluye una imagen grande en la parte
izquierda de la pgina y una columna de texto en la derecha. Puede establecer la columna de la
izquierda con un ancho fijo y el rea de la barra lateral como autoampliable.
Al establecer una columna como autoampliable, Dreamweaver inserta imgenes de espaciador en
las columnas de ancho fijo de modo que dichas columnas mantengan el ancho que deben tener, a
menos que se especifique que no se deben usar imgenes de espaciador. Una imagen de espaciador
es una imagen transparente que se utiliza para controlar el espaciado y no es visible en la ventana
del navegador.
Temas relacionados
Definicin de una columna como autoampliable o de ancho fijo en la pgina 201
Alternancia entre modo estndar y modo de diseo 193
Imgenes de espaciador
Una imagen de espaciador (tambin conocida como GIF espaciador) es una imagen transparente
que se utiliza para controlar el espaciado en las tablas autoampliables. Una imagen de espaciador
es una imagen GIF transparente de pxel nico que se ha ampliado para tener un nmero
determinado de pxeles de ancho. Un navegador no puede dibujar una columna de tabla ms
estrecha que la imagen ms ancha contenida en una celda de dicha columna, de modo que al
colocar una imagen de espaciador en una columna de tabla se exige a los navegadores que
mantengan la columna al menos tan ancha como la imagen.
Dreamweaver aade imgenes de espaciador automticamente al establecer una columna como
autoampliable a menos que usted especifique que no se deben usar imgenes de espaciador. Puede
insertar y quitar manualmente las imgenes de espaciador de cada columna, si lo prefiere. Las
columnas que contienen imgenes de espaciador presentan una barra doble donde aparece el
ancho de columna.
Puede insertar y quitar manualmente las imgenes de espaciador de determinadas columnas o
quitar todas las imgenes de espaciador de la pgina.
Temas relacionados
Utilizacin de imgenes de espaciador en la pgina 202
Alternancia entre modo estndar y modo de diseo
Antes de poder dibujar tablas o celdas de diseo, debe cambiar del modo estndar al modo de
diseo. Es ms fcil crear tablas para diseo en el modo de diseo, pero es recomendable volver al
modo estndar antes de editar la tabla o aadirle contenido.
Nota: si crea una tabla en el modo estndar y a continuacin cambia al modo de diseo, es posible
que la tabla de diseo resultante contenga celdas de diseo vacas. Es posible que necesite eliminar
dichas celdas antes de poder crear nuevas celdas de diseo o moverlas de sitio.
Para cambiar al modo de diseo:
1 Si est trabajando en la vista Cdigo, seleccione Ver > Diseo o Ver > Cdigo y diseo.
En la vista Cdigo no puede pasar al modo de diseo.
Seleccione Ver > Modo de tabla > Modo de diseo.
En la categora Diseo de la barra Insertar, haga clic en el botn Modo de diseo.
En la parte superior de la ventana de documento aparece una barra etiquetada como Modo de
diseo. Si la pgina contiene tablas, aparecen como tablas de diseo.
Para salir del modo de diseo, siga uno de estos procedimientos:
Haga clic en Salir en la barra etiquetada como Modo de diseo situada en la parte superior de
la ventana de documento.
Seleccione Ver > Modo de tabla > Modo estndar.
En la categora Diseo de la barra Insertar, haga clic en el botn Modo estndar.
Dreamweaver regresa al modo estndar.
Dibujo en el modo de diseo
El modo de diseo le permite dibujar celdas y tablas, incluidas tablas anidadas en otras tablas.
Puede alinear las celdas ajustndolas a la cuadrcula (vase Utilizacin de reglas y cuadrculas para
disear pginas en la pgina 166).
Dibujo de celdas y tablas de diseo
En el modo de diseo puede dibujar celdas y tablas de diseo en la pgina. Al dibujar una celda de
diseo fuera de una tabla de diseo, Dreamweaver crea automticamente una tabla de diseo
como contenedor para la celda. Una celda de diseo no puede existir fuera de una tabla de diseo.
Nota: en el modo de diseo no puede utilizar las herramientas Insertar tabla y Dibujar capa que se
utilizan en el modo estndar. Para utilizar dichas herramientas, primero debe cambiar al modo
estndar.
Cuando Dreamweaver crea automticamente una tabla de diseo, al principio parece que la tabla
ocupa toda la vista Diseo, aunque cambie el tamao de la ventana de documento. Esta tabla de
diseo predeterminada que ocupa toda la ventana le permite dibujar celdas de diseo en cualquier
lugar de la vista Diseo. Para establecer un tamao especfico para la tabla haga clic en el borde de
la tabla y, a continuacin, arrastre los manejadores de cambio de tamao.
Cuando el puntero se pasa por encima de una celda de diseo, Dreamweaver resalta la celda.
Puede activar o desactivar el resaltado y cambiar el color del resaltado en las preferencias.
Para dibujar una celda de diseo:
1 Asegrese que est en el modo de diseo (vase Alternancia entre modo estndar y modo de
diseo en la pgina 193).
2 En la categora Diseo de la barra Insertar, haga clic en el botn Dibujar celda de diseo.
El puntero del ratn se convertir en un puntero en cruz (+).
3 Site el puntero del ratn en la parte de la pgina en la que desee que comience la celda y, a
continuacin, arrastre para crear la celda de diseo.
Sugerencia: para dibujar ms de una celda de diseo sin tener que seleccionar Dibujar celda de
diseo repetidamente, arrastre el ratn mientras presiona la tecla Control (Windows) o Comando
(Macintosh) para dibujar la celda de diseo. Si mantiene presionada la tecla Control o Comando
puede dibujar una celda de diseo tras otra.
Si dibuja la celda cerca del borde de la tabla de diseo, los bordes de la celda se ajustarn
automticamente a los bordes de la tabla de diseo que la contiene. Para desactivar
temporalmente el ajuste, mantenga presionada la tecla Alt (Windows) u Opcin (Macintosh)
mientras arrastra la celda.
La celda aparece en la pgina con un contorno azul. Para cambiar el color del contorno, vase
Configuracin de preferencias para el modo de diseo en la pgina 203.
Para dibujar una tabla de diseo:
2 En la categora Diseo de la barra Insertar, haga clic en el botn Dibujar tabla de diseo.
3 Coloque el puntero en la pgina y arrastre para crear la tabla de diseo.
Dibujo en el modo de diseo 195
Sugerencia: para dibujar ms de una tabla de diseo sin tener que seleccionar Dibujar tabla de
diseo repetidamente, arrastre el ratn con la tecla Control (Windows) o Comando (Macintosh)
presionada al dibujar la tabla de diseo. Si mantiene presionada la tecla Control o Comando puede
dibujar una tabla de diseo tras otra.
Puede crear una tabla de diseo en un rea vaca de la pgina, alrededor de celdas y tablas de
diseo existentes o anidada en una tabla de diseo existente. Si la pgina tiene contenido y
desea aadir una tabla de diseo en un rea vaca de la pgina, puede dibujarla slo por debajo
del contenido existente.
Sugerencia: si intenta dibujar una tabla de diseo junto a contenido existente y aparece un
puntero distinto al puntero de dibujo, intente cambiar el tamao de la ventana de documento para
crear ms espacio en blanco entre el final del contenido existente y el final de la ventana.
Nota: las tablas no pueden solaparse. Sin embargo, una tabla puede contener otra tabla. Para ms
informacin, consulte Dibujo de una tabla de diseo anidada en la pgina 195.
La tabla de diseo aparecer en la pgina con un contorno verde. Para cambiar el color del
contorno, vase Configuracin de preferencias para el modo de diseo en la pgina 203.
Para cambiar las preferencias de resaltado de las celdas de diseo:
3 Realice uno de estos cambios:
Para cambiar el color de resaltado, haga clic en el cuadro de color Ratn por encima y
seleccione un color de resaltado utilizando el selector de color (o introduzca el valor
hexadecimal correspondiente al color de resaltado en el cuadro de texto).
la pgina 267.
Para activar o desactivar el resaltado, active o desactive la seleccin de la casilla Mostrar
correspondiente a Ratn por encima.
Nota: estas opciones afectan a todos los objetos, como tablas y capas, que Dreamweaver resalta
cuando pasa el puntero del ratn sobre ellos.
Dibujo de una tabla de diseo anidada
Puede dibujar una tabla de diseo dentro de otra tabla de diseo para crear una tabla anidada. Las
celdas contenidas en una tabla anidada tambin estn aisladas de los cambios realizados a la tabla
externa; por ejemplo, al cambiar el tamao de una fila o columna en la tabla externa, las celdas de
la tabla interna no cambian de tamao.
Puede insertar varios niveles de tablas anidadas. Una tabla de diseo anidada no puede ser mayor
que la tabla que la contiene.
Nota: si dibuja una tabla de diseo en el centro de la pgina antes de dibujar una celda de diseo, la
tabla que dibuja queda automticamente anidada dentro de una tabla mayor.
Para dibujar una tabla de diseo anidada:
3 Seale un rea vaca (gris) en la tabla de diseo existente y, a continuacin, arrastre para crear la
tabla de diseo anidada.
Nota: no puede crear una tabla de diseo dentro de una celda de diseo. Puede crear una tabla de
diseo anidada slo en un rea vaca de una tabla de diseo existente o alrededor de celdas de
diseo existentes.
Para dibujar una tabla de diseo alrededor de tablas o celdas de diseo existentes:
3 Arrastre para dibujar un rectngulo en torno a un conjunto de celdas o tablas de diseo
existentes.
Aparece una nueva tabla de diseo anidada que encierra las celdas o tablas existentes.
Sugerencia: para que una celda de diseo existente se ajuste perfectamente a una esquina de la
nueva tabla anidada, empiece a arrastrar desde cerca de la esquina de la celda. De este modo la
esquina de la nueva tabla se ajusta a la esquina de la celda. No puede empezar a arrastrar desde el
centro de una celda de diseo porque no se puede crear una tabla de diseo al completo dentro
de una celda de diseo.
Adicin de contenido a una celda de diseo 197
Adicin de contenido a una celda de diseo
En el modo de diseo puede aadir texto, imgenes y otro contenido a las celdas de diseo de la
misma forma que aadira contenido a las celdas de tablas en el modo estndar. Haga clic en la
celda en la que desee aadir contenido y, a continuacin, escriba el texto o inserte otro contenido.
Puede insertar contenido slo en una celda de diseo, no en un rea vaca (gris) de una tabla de
diseo. As, antes de poder aadir contenido, debe crear celdas de diseo (vase Dibujo en el
modo de diseo en la pgina 194).
Para aadir texto a una celda de diseo:
1 Site el punto de insercin en la celda de diseo en la que desea aadir texto.
Escriba texto en la celda.
Si es necesario, la celda se ampla a medida que escribe.
Copie texto de otro documento y pguelo.
Para ms informacin, consulte Insercin de texto en la pgina 289.
Una celda de diseo se ampla automticamente al aadir contenido que ocupe ms espacio que la
celda. A medida que la celda se ampla, la columna que la contiene tambin se ampla, lo cual
puede afectar al tamao de las celdas adyacentes. El ancho de columna cambia para mostrar el
ancho que aparece en el cdigo, seguido del ancho visual de la columna (el ancho tal como
aparece en la pantalla) entre parntesis. Para ms informacin sobre los anchos de columna,
consulte Establecimiento del ancho de columna en la pgina 200.
Para aadir una imagen a una celda de diseo:
1 Site el punto de insercin en la celda de diseo en la que desea aadir la imagen.
Seleccione Insertar > imagen.
En la categora Comn de la barra Insertar, haga clic en la flecha del botn Imgenes y
seleccione Imagen.
Sugerencia: si en la barra Insertar aparece el botn Imagen (como en el ejemplo siguiente),
puede hacer clic en el botn en lugar de utilizar el men emergente.
Aparecer el cuadro de dilogo Seleccionar origen de imagen.
3 Seleccione un archivo de imagen.
Para ms informacin, consulte Insercin de una imagen en la pgina 313.
La imagen aparece en la celda de diseo.
Cmo borrar los altos de celdas establecidos automticamente
Al crear una celda de diseo, Dreamweaver especifica automticamente una altura para que la
celda se muestre con el alto que dibuj incluso aunque la celda est vaca. Tras insertar contenido
en la celda, es posible que ya no necesite especificar la altura, de modo que puede borrar de la
tabla las alturas de celdas explcitas.
Para borrar los altos de celdas, siga uno de estos procedimientos:
Haga clic en el men de encabezado de tabla y seleccione Borrar todos los altos.
Seleccione una tabla de diseo; para ello, haga clic en la ficha de la parte superior de la tabla y, a
continuacin, haga clic en el botn Borrar alto de fila del inspector de propiedades (Ventana >
Propiedades).
Dreamweaver borra todos los altos especificados en la tabla. Es posible que algunas de las celdas de
la tabla se contraigan verticalmente.
Cambio de tamao y desplazamiento de celdas y tablas de diseo
Para ajustar la distribucin de la pgina, puede mover y cambiar el tamao de las celdas de diseo
y de las tablas de diseo anidadas. (En la tabla de diseo externa slo se puede cambiar el tamao.)
Nota: para utilizar la cuadrcula de Dreamweaver como gua para mover o cambiar el tamao de
celdas y tablas, vase Utilizacin de reglas y cuadrculas para disear pginas en la pgina 166.
Cambio de tamao y desplazamiento de celdas de diseo
Puede cambiar el tamao y desplazar las celdas de diseo, pero no pueden solaparse. No puede
mover o cambiar el tamao de una celda de modo que exceda los lmites de la tabla de diseo que
la contiene. Una celda de diseo no puede ser ms pequea que su contenido.
Para informacin sobre cmo cambiar el tamao y desplazar tablas de diseo, vase Cambio de
tamao y desplazamiento de tablas de diseo en la pgina 199.
Para cambiar el tamao de una celda de diseo:
1 Seleccione una celda haciendo clic en el borde de la celda o manteniendo presionada la tecla
Control (Windows) o Comando (Macintosh) mientras hace clic en cualquier lugar de la celda.
Aparecen manejadores de seleccin alrededor de la celda.
2 Arrastre un manejador de seleccin para cambiar el tamao de la celda.
Los bordes de la celda se alinean automticamente con los bordes de otras celdas.
Cambio de tamao y desplazamiento de celdas y tablas de diseo 199
Para mover una celda de diseo:
Aparecen manejadores de seleccin alrededor de la celda.
Arrastre la celda a otra ubicacin dentro de su tabla de diseo.
Presione las teclas de flecha para mover la celda de pxel en pxel.
Sugerencia: mantenga presionada la tecla Mays a la vez que presiona una tecla de flecha
para mover la celda de diseo de 10 en 10 pxeles.
Cambio de tamao y desplazamiento de tablas de diseo
No se puede cambiar el tamao de una tabla de diseo de modo que sea ms pequea que el
menor de los rectngulos que pueda contener todas sus celdas. Tampoco se puede cambiar el
tamao de una tabla de diseo de modo que se solape con otras tablas o celdas.
Para cambiar el tamao o desplazar celdas de diseo, vase Cambio de tamao y desplazamiento
de celdas de diseo en la pgina 198.
Para cambiar el tamao de una tabla de diseo:
1 Seleccione una tabla haciendo clic en la ficha que se encuentra en la parte superior de la tabla.
Aparecen manejadores de seleccin alrededor de la tabla.
2 Arrastre un manejador de seleccin para cambiar el tamao de la tabla.
Los bordes de la tabla se alinean automticamente con los bordes de otras celdas y tablas.
Para mover una tabla de diseo:
Aparecen manejadores de seleccin alrededor de la tabla.
Nota: puede mover una tabla de diseo slo si est anidada dentro de otra tabla de diseo.
Arrastre la tabla a otra ubicacin de la pgina.
Presione las teclas de flecha para mover la tabla de pxel en pxel.
Sugerencia: mantenga presionada la tecla Mays a la vez que presiona una tecla de flecha
para mover la tabla de 10 en 10 pxeles.
Aplicacin de formato a celdas y tablas de diseo
Puede cambiar el aspecto de cualquier celda o tabla de diseo en el inspector de propiedades.
Aplicacin de formato a celdas de diseo
Puede establecer varios atributos de una celda de diseo en el inspector de propiedades, incluido
el ancho y el alto, el color de fondo y la alineacin de los contenidos de la celda.
Para aplicar formato a una celda de diseo en el inspector de propiedades:
2 Abra el inspector de propiedades (Ventana > Propiedades), si an no est abierto.
3 Para cambiar el formato de la celda establezca las propiedades.
Aplicacin de formato a tablas de diseo
Puede establecer varios atributos de una tabla de diseo en el inspector de propiedades,
incluyendo el ancho, la altura, el relleno y el espaciado.
Para aplicar formato a una tabla de diseo:
3 Para cambiar el formato de la tabla establezca las propiedades.
Establecimiento del ancho de columna
Puede establecer el ancho exacto de una columna o expandirla hasta llenar el mximo espacio de
la ventana del navegador. Tambin puede especificar un ancho mnimo para la columna
utilizando una imagen de espaciador.
En ocasiones, los anchos de columna de tabla establecidos en cdigo HTML no coinciden con los
anchos que aparecen en la pantalla. Cuando esto sucede, puede hacer que los anchos coincidan.
Establecimiento del ancho de columna 201
Definicin de una columna como autoampliable o de ancho fijo
Una columna de una tabla puede ser de ancho fijo o autoampliable. Para ms informacin,
consulte Ancho de columna fijo y columnas autoampliables en la pgina 192.
Establecer una columna como autoampliable antes de que el diseo est terminado podra afectar
de forma imprevisible al diseo de la tabla. Para impedir que las columnas se ensanchen o se
estrechen de forma inesperada, cree el diseo completo de la pgina antes de establecer una
columna como autoampliable y utilice imgenes de espaciador cuando establezca una columna
como autoampliable. (No obstante, si las columnas ya tienen contenido que mantiene el ancho
deseado, no ser preciso utilizar imgenes de espaciador.)
Para definir una columna como autoampliable:
Haga clic en el men del encabezado de columna y, a continuacin, seleccione Hacer que la
columna sea autoampliable.
Haga clic en el borde de una celda de la columna para seleccionarla y, a continuacin, haga
clic en Autoampliar en el inspector de propiedades.
Nota: en una tabla de diseo determinada, slo se puede establecer una columna como
autoampliable.
Si no ha definido una imagen de espaciador para este sitio, aparecer el cuadro de dilogo
Elegir imagen de espaciador.
2 Si aparece el cuadro de dilogo Elegir imagen de espaciador, seleccione una opcin y haga clic
en Aceptar.
En la parte superior o en la parte inferior de la columna autoampliable aparece una lnea
ondulada. En la parte superior o en la parte inferior de las columnas que contienen imgenes de
espaciador aparecen barras dobles.
Para establecer un ancho fijo en una columna, siga uno de estos procedimientos:
Haga clic en el men del encabezado de columna y, a continuacin, seleccione Hacer que la
columna tenga ancho fijo.
La opcin Hacer que la columna tenga ancho fijo especifica un ancho para la columna (en el
cdigo) que coincide con el ancho visual actual de la columna.
Haga clic en el borde de una celda de la columna para seleccionarla y, a continuacin, haga clic
en Fijo e introduzca un valor numrico en el inspector de propiedades.
Si escribe un valor numrico menor que el ancho del contenido de la columna, Dreamweaver
establece automticamente el ancho para que coincida con el ancho del contenido.
El ancho de la columna aparece en la parte superior o en la parte inferior de la columna.
Temas relacionados
Cmo igualar los anchos de columna del cdigo con los anchos de columna visuales en
la pgina 203
Utilizacin de imgenes de espaciador
Para que una columna tenga un ancho mnimo, puede insertar una imagen de espaciador en la
columna. Para ms informacin, consulte Imgenes de espaciador en la pgina 193. Puede
eliminar las imgenes de espaciador de una sola columna o de toda la tabla.
La primera vez que inserte una imagen de espaciador, configurar una imagen de espaciador para
el sitio. Puede definir las preferencias para las imgenes de espaciador (vase Configuracin de
preferencias para el modo de diseo en la pgina 203).
Para insertar una imagen de espaciador en una columna:
1 Haga clic en el men de encabezado de columna y seleccione Aadir imagen de espaciador.
Si no ha definido una imagen de espaciador para este sitio, aparecer el cuadro de dilogo
Elegir imagen de espaciador.
2 Si aparece el cuadro de dilogo Elegir imagen de espaciador, seleccione una opcin y haga clic
en Aceptar.
Dreamweaver inserta la imagen de espaciador en la columna. Esta imagen no es visible, pero es
posible que la columna se desplace ligeramente y que aparezca una doble barra en la parte superior
o inferior de la columna indicando que contiene una imagen de espaciador.
Para quitar una imagen de espaciador de una nica columna:
Haga clic en el men de encabezado de columna y seleccione Quitar imagen de espaciador.
Dreamweaver elimina la imagen de espaciador. Es posible que la columna se desplace.
Para eliminar todas las imgenes de espaciador de una tabla, siga uno de estos
procedimientos:
Haga clic en el men de encabezado de tabla y seleccione Quitar todas las imgenes de
espaciador.
Seleccione la tabla, haga clic en el botn Quitar todos los espaciadores del inspector de
propiedades (Ventana > Propiedades).
Es posible que el diseo de la tabla completa se desplace. Si no hay contenido en algunas
columnas, es posible que desaparezcan por completo de la vista Diseo.
Configuracin de preferencias para el modo de diseo 203
Cmo igualar los anchos de columna del cdigo con los anchos de columna
visuales
Si existen dos nmeros para el ancho de una columna, el ancho de columna definido en el cdigo
HTML no coincide con el ancho de columna que aparece en la pantalla. Puede igualar el ancho
especificado en el cdigo con el ancho visual. Para ms informacin, consulte Visualizacin del
ancho de tabla y celda en modo de diseo en la pgina 191.
Para homogeneizar los anchos:
Haga clic en el men del encabezado de tabla y, a continuacin, seleccione Igualar todos los
anchos.
Seleccione la tabla, haga clic en el botn Quitar todos los espaciadores del inspector de
propiedades (Ventana > Propiedades).
Dreamweaver restablece el ancho especificado en el cdigo para que coincida con el ancho visual.
Temas relacionados
Definicin de una columna como autoampliable o de ancho fijo en la pgina 201
Configuracin de preferencias para el modo de diseo
Puede especificar las preferencias para los archivos de imgenes de espaciador y para los colores
que Dreamweaver utiliza para dibujar las tablas y las celdas de diseo.
Para establecer las preferencias del modo de diseo:
2 Seleccione Modo de diseo en la lista de categoras de la izquierda.
205
CAPTULO 10
Utilizacin de marcos
Los marcos permiten dividir la ventana de un navegador en varias regiones, cada una de las cuales
puede mostrar un documento HTML diferente. Por lo general, un marco muestra un documento
que contiene controles de navegacin, mientras que otro muestra un documento con contenido.
Nota: en este captulo no se incluye una descripcin pormenorizada de todos los mtodos de diseo
y utilizacin de marcos, ni de los cdigos necesarios para su codificacin manual. Si necesita
informacin detallada sobre los cdigos utilizados en los diseos de marcos avanzados, vase la
bibliografa sobre marcos y conjuntos de marcos.
Marcos y conjuntos de marcos en la pgina 206
Utilizacin de conjuntos de marcos en la ventana de documento en la pgina 209
Seleccin de marcos y conjuntos de marcos en la pgina 213
Cmo abrir un documento en un marco en la pgina 215
Almacenamiento de archivos de marcos y conjuntos de marcos en la pgina 215
Visualizacin y configuracin de las propiedades y los atributos de los marcos en
la pgina 216
Visualizacin y configuracin de las propiedades de un conjunto de marcos en la pgina 218
Control del contenido de los marcos con vnculos en la pgina 218
Manipulacin de navegadores que no pueden mostrar marcos en la pgina 219
Utilizacin de comportamientos JavaScript con marcos en la pgina 220
206 Captulo 10: Utilizacin de marcos
Marcos y conjuntos de marcos
Un marco es una zona de una ventana de navegador que puede mostrar un documento HTML
independiente de lo que se muestra en el resto de la ventana.
Un conjunto de marcos es un archivo HTML que define el diseo y las propiedades de un grupo de
marcos, que incluyen el nmero, el tamao, la ubicacin de los marcos y el URL de la pgina que
aparece inicialmente en cada marco. El archivo de conjunto de marcos no incluye el contenido
HTML que se muestra en el navegador, excepto en la seccin noframes (vase Manipulacin de
navegadores que no pueden mostrar marcos en la pgina 219). El archivo nicamente ofrece al
navegador informacin sobre cmo debe mostrarse un conjunto de marcos y los documentos que
deben incluirse en los marcos.
Temas relacionados
Utilizacin de conjuntos de marcos en la ventana de documento en la pgina 209
Funcionamiento de los marcos y los conjuntos de marcos
Un marco es una zona de una ventana de navegador que puede mostrar un documento HTML
independiente de lo que se muestra en el resto de la ventana. Un conjunto de marcos es un archivo
HTML que define el diseo y las propiedades de un conjunto de marcos.
Para ver un conjunto de marcos en un navegador, introduzca el URL del archivo de conjunto de
marcos; el navegador abre entonces los documentos que deben mostrarse en los marcos. El
archivo de conjunto de marcos de un sitio suele llamarse index.html. As, cuando el visitante no
especifica ningn nombre de archivo, este archivo se muestra de forma predeterminada.
En el ejemplo siguiente se muestra un diseo de marcos formado por tres marcos: un marco
estrecho a un lado que contiene una barra de navegacin, un marco que se extiende por la parte
superior y contiene el logotipo y el ttulo del sitio Web, y un marco grande que ocupa el resto de
la pgina y presenta el contenido principal. Cada uno de estos marcos muestra un documento
HTML diferente.
Marcos y conjuntos de marcos 207
En este ejemplo, el documento mostrado en el marco superior nunca cambia cuando el visitante
explora el sitio. El marco lateral de la barra de navegacin contiene vnculos; al hacer clic en uno
de ellos, cambia el contenido del marco de contenido principal, aunque el del marco lateral
permanecer esttico. El marco de contenido principal de la derecha mostrar el documento
correspondiente a cualquier vnculo de la izquierda seleccionado por el visitante.
Tenga en cuenta que un marco no es un archivo. Podra pensarse que el documento mostrado en
un marco forma parte integral del mismo, pero en realidad esto no es as. El marco es el contendor
que alberga el documento (cualquier marco puede mostrar cualquier documento).
Nota: la palabra pgina, en un sentido amplio, puede utilizarse para hacer referencia a un nico
documento HTML o a todo el contenido de una ventana del navegador en un momento determinado,
aunque se estn mostrando varios documentos HTML al mismo tiempo. Por ejemplo, la frase una
pgina que utiliza marcos suele hacer referencia a un conjunto de marcos y a los documentos que
aparecen en ellos inicialmente.
Un sitio que aparece en un navegador como una sola pgina compuesta de tres marcos consta
realmente de al menos cuatro documentos HTML distintos: el archivo de conjunto de marcos y
los tres documentos que albergan el contenido que aparece inicialmente en los marcos. Al disear
una pgina utilizando conjuntos de marcos en Dreamweaver, deber guardar cada uno de estos
cuatro archivos para que la pgina funcione correctamente en el navegador.
Temas relacionados
Aspectos bsicos de los conjuntos de marcos anidados en la pgina 208
Cundo utilizar marcos
El uso ms comn de los marcos es la navegacin. Un conjunto de marcos suele incluir un marco
con una barra de navegacin y otro que muestra las pginas de contenido principal.
Sin embargo, el diseo con marcos puede resultar complicado y, en ocasiones, las pginas Web
que no los incluyen logran prcticamente los mismos objetivos. Por ejemplo, si desea que la barra
de navegacin aparezca a la izquierda, puede reemplazar la pgina por un conjunto de marcos o,
simplemente, incluir la barra de navegacin en todas las pginas del sitio. (Dreamweaver le ayuda
a crear varias pginas con el mismo diseo; vase Plantillas de Dreamweaver en la pgina 222.)
Aunque no utiliza marcos, la siguiente imagen muestra un diseo de pgina que los imita.
Hay muchos diseadores Web profesionales que prefieren no utilizar marcos y muchas personas
que navegan por la Web a las que no les gustan. Esto suele deberse a que encontraron sitios que
utilizaban los marcos incorrecta o innecesariamente (por ejemplo, un conjunto de marcos que
vuelve a cargar el contenido de los marcos de navegacin cada vez que el visitante hace clic en un
botn de navegacin). Cuando se utilizan bien los marcos (por ejemplo, para incluir controles de
navegacin estticos en un marco permitiendo al mismo tiempo que cambie el contenido de
otro), pueden resultar muy tiles.
No todos los navegadores son compatibles con el uso de marcos y algunos visitantes pueden
experimentar dificultades para navegar por pginas con marcos. Por eso, si los utiliza, incluya
siempre una seccin noframes en su conjunto de marcos para los visitantes que no pueden verlos
(vase Manipulacin de navegadores que no pueden mostrar marcos en la pgina 219). Si lo
desea, puede incluir tambin un vnculo a una versin sin marcos del sitio para los visitantes con
navegadores que no admitan marcos o que no deseen utilizarlos.
Entre las ventajas de utilizar marcos se incluyen:
El navegador de un visitante no tendr que volver a cargar los grficos de navegacin para cada
pgina.
Cada marco dispone de su propia barra de desplazamiento (si el contenido es demasiado
grande para una ventana), permitiendo al visitante desplazarse por los marcos de forma
independiente.
Por ejemplo, si la barra de navegacin se encuentra en otro marco, cuando el visitante se
desplaza al final de una pgina de contenido muy grande en un marco no es necesario que
vuelva al principio de la pgina para acceder a la barra de navegacin.
Entre los inconvenientes de utilizar marcos se incluyen:
Lograr una alineacin grfica precisa de los elementos en distintos marcos puede resultar difcil.
Comprobar las opciones de navegacin puede llevar mucho tiempo.
Los URL de las pginas con marcos no aparecen en el navegador, por lo que puede resultar
complicado para un visitante marcar una pgina concreta (salvo que incluya cdigo de servidor
que le permita cargar la versin con marcos de una determinada pgina).
Temas relacionados
Funcionamiento de los marcos y los conjuntos de marcos en la pgina 206
Manipulacin de navegadores que no pueden mostrar marcos en la pgina 219
Aspectos bsicos de los conjuntos de marcos anidados
Un conjunto de marcos dentro de otro conjunto recibe el nombre de conjunto de marcos
anidado. Un archivo de conjunto de marcos puede contener varios conjuntos de marcos anidados.
La mayora de las pginas Web con marcos utilizan en realidad marcos anidados y la mayora de
los conjuntos de marcos predefinidos en Dreamweaver tambin utilizan la anidacin. Cualquier
conjunto de marcos que contenga nmeros de marcos diferentes en distintas filas o columnas
requiere un conjunto de marcos anidado.
Utilizacin de conjuntos de marcos en la ventana de documento 209
Por ejemplo, el diseo de marcos ms habitual emplea un marco en la primera fila (donde aparece
el logotipo de la empresa) y dos marcos en la ltima fila (uno de navegacin y otro de contenido).
Este diseo requiere un conjunto de marcos anidado: un conjunto de marcos de dos filas con un
conjunto de marcos anidado de dos columnas en la segunda fila.
Dreamweaver se ocupa de todos los conjuntos de marcos anidados que sean necesarios; si utiliza
las herramientas de divisin de marcos de Dreamweaver, no tendr que preocuparse de qu
marcos son anidados y cules no. Para ms informacin sobre las herramientas de divisin de
marcos, consulte Diseo de un conjunto de marcos en la pgina 212.
Hay dos formas de anidar conjuntos de marcos en HTML: el conjunto de marcos interior puede
definirse en el mismo archivo que el exterior o un archivo independiente. Los conjuntos de
marcos predefinidos en Dreamweaver definen todos sus conjuntos de marcos en el mismo
archivo.
Ambos tipos de anidacin producen los mismos resultados visuales; sin ver el cdigo, no resulta
sencillo distinguir cul se est utilizando. En Dreamweaver suele recurrirse a un archivo de
conjunto de marcos externo cuando se utiliza el comando Abrir en marco para abrir un archivo de
conjunto de marcos dentro de un marco, lo cual puede dificultar la tarea de establecer los destinos
de los vnculos. Suele resultar ms sencillo definir todos los conjuntos de marcos en un mismo
archivo.
Temas relacionados
Funcionamiento de los marcos y los conjuntos de marcos en la pgina 206
Cundo utilizar marcos en la pgina 207
Utilizacin de conjuntos de marcos en la ventana de documento
Dreamweaver permite ver y editar todos los documentos asociados a un conjunto de marcos en
una misma ventana de documento. Este enfoque permite obtener una visin aproximada de cmo
se mostrarn las pginas con marcos en un navegador a medida que las edita. Sin embargo,
algunos aspectos de este enfoque pueden resultar confusos hasta que se acostumbre a ellos.
En especial, recuerde que cada marco muestra un documento HTML distinto. Aunque los
documentos estn vacos, deber guardarlos antes de obtener una vista previa de los mismos (ya
que slo puede obtenerse una vista previa del conjunto de marcos si ste contiene el URL del
documento que se muestra en cada marco).
Conjunto de marcos principal
El marco de men y el marco de
contenido se anidan en el
conjunto de marcos principal.
Para comprobar si un conjunto de marcos aparece correctamente en los navegadores:
1 Cree el conjunto de marcos y especifique el documento que debe aparecer en cada marco (vase
Creacin de marcos y conjuntos de marcos en la pgina 210).
2 Guarde todos los archivos que se van a mostrar en un marco (vase Almacenamiento de
archivos de marcos y conjuntos de marcos en la pgina 215).
Recuerde que cada marco muestra un documento HTML distinto y que debe guardar cada
documento junto con el archivo de conjunto de marcos.
3 Establezca las propiedades de los marcos y del conjunto de marcos (vase Visualizacin y
configuracin de las propiedades y los atributos de los marcos en la pgina 216 y Visualizacin
y configuracin de las propiedades de un conjunto de marcos en la pgina 218).
Esto incluye asignar un nombre a cada marco, establecer las opciones de desplazamiento, etc.
4 No olvide establecer la propiedad Dest. del inspector de propiedades para todos los vnculos de
forma que el contenido vinculado se muestre en el rea correspondiente (vase Control del
contenido de los marcos con vnculos en la pgina 218).
Creacin de marcos y conjuntos de marcos
Hay dos formas de crear un conjunto de marcos en Dreamweaver: puede seleccionar entre varios
conjuntos de marcos predefinidos o puede disear uno propio.
Al elegir un conjunto de marcos predefinido, se configuran automticamente todos los marcos y
conjuntos de marcos necesarios para crear el diseo. sta es la forma ms sencilla de crear
rpidamente un diseo basado en marcos. Slo se puede insertar un conjunto de marcos
predefinido en la vista Diseo de la ventana de documento.
Utilizacin de un conjunto de marcos predefinido
Los conjuntos de marcos predefinidos facilitan la seleccin del tipo de conjunto de marcos que
desea crear. Si prefiere disear un conjunto de marcos propio, vase Diseo de un conjunto de
marcos en la pgina 212.
Hay dos formas de crear un conjunto de marcos predefinido:
Con la barra Insertar puede crear un conjunto de marcos y mostrar el documento actual en
uno de los nuevos marcos.
El cuadro de dilogo Nuevo documento crea un conjunto de marcos vaco nuevo.
Para crear un conjunto de marcos predefinido y mostrar un documento en un marco:
1 Site el punto de insercin en un documento.
Seleccione un conjunto de marcos predefinido en el submen Insertar > HTML > Marcos.
En la categora Diseo de la barra Insertar, haga clic en la flecha situada bajo el botn
Marcos y, a continuacin, seleccione un conjunto de marcos predefinido.
Creacin de marcos y conjuntos de marcos 211
Los iconos de conjunto de marcos proporcionan una representacin visual del conjunto de
marcos aplicado al documento actual. El rea azul de un icono de conjunto de marcos
representa el documento actual y las reas blancas representan marcos que mostrarn otros
documentos.
Nota: cuando se aplica un conjunto de marcos, Dreamweaver configura automticamente el
conjunto de marcos para mostrar el documento actual (el documento en el que se encuentra el
punto de insercin) en uno de los marcos.
Aparecer el cuadro de dilogo Atributos de accesibilidad de la etiqueta de marco en el caso de
que haya configurado Dreamweaver para que le solicite los atributos de accesibilidad de los
marcos (vase Optimizacin del espacio de trabajo para el diseo de pginas accesibles en
la pgina 56).
3 Si el cuadro de dilogo Atributos de accesibilidad de la etiqueta de marco aparece, complete el
cuadro de dilogo para cada marco y haga clic en Aceptar.
Nota: si hace clic en Cancelar, el conjunto de marcos aparece en el documento, pero
Dreamweaver no le asocia etiquetas o atributos de accesibilidad.
Para editar atributos de accesibilidad de la etiqueta de marco, vase Visualizacin y
configuracin de las propiedades y los atributos de los marcos en la pgina 216.
Para crear un conjunto de marcos predefinido vaco:
2 En el cuadro de dilogo Nuevo documento, seleccione la categora Conjuntos de marcos.
3 Seleccione un conjunto de marcos de la lista Conjuntos de marcos.
4 Haga clic en Crear.
El conjunto de marcos se muestra en el documento y aparece el cuadro de dilogo Atributos de
accesibilidad de la etiqueta de marco si se ha activado el cuadro de dilogo en Preferencias
(vase Optimizacin del espacio de trabajo para el diseo de pginas accesibles en
la pgina 56).
5 Si el cuadro de dilogo Atributos de accesibilidad de la etiqueta de marco aparece, rellene la
informacin para cada marco y haga clic en Aceptar.
Nota: si presiona Cancelar, el conjunto de marcos aparece en el documento, pero Dreamweaver
no le asocia etiquetas o atributos de accesibilidad.
Para editar atributos de accesibilidad de la etiqueta de marco, vase Visualizacin y
Diseo de un conjunto de marcos
Puede disear un conjunto de marcos propios en Dreamweaver; para ello, aada barras divisorias
a la ventana. Si prefiere utilizar un conjunto de marcos predefinido, vase Utilizacin de un
conjunto de marcos predefinido en la pgina 210.
Sugerencia: antes de crear un conjunto de marcos o utilizar marcos, haga visibles los bordes de los
marcos en la vista Diseo de la ventana de documento seleccionando Ver > Ayudas visuales > Bordes
de marco.
Para crear un conjunto de marcos:
Seleccione Modificar > Conjunto de marcos y seleccione en el submen un elemento divisor,
como por ejemplo Dividir marco a la izquierda o Dividir marco a la derecha.
Dreamweaver divide la ventana en marcos. Si hay un documento abierto, ste aparecer en uno
de los marcos.
Para dividir un marco en otros ms pequeos, siga uno de estos procedimientos:
Para dividir el marco donde se encuentra el punto de insercin, elija un elemento divisor del
submen Modificar > Conjunto de marcos.
Para dividir un marco o conjunto de marcos vertical u horizontalmente, arrastre el borde del
marco desde el extremo hasta el centro de la vista Diseo.
Para dividir un marco utilizando un borde de marco que no se encuentra en el extremo de la
vista Diseo, arrastre el borde del marco mientras mantiene presionada la tecla Alt (Windows)
u Opcin (Macintosh).
Para dividir un marco en cuatro, arrastre el borde del marco desde una esquina de la vista
Diseo al centro de un marco.
Sugerencia: para crear tres marcos, empiece con dos marcos y, a continuacin, divida uno de
ellos. No resulta fcil combinar dos marcos contiguos sin editar el cdigo del conjunto de marcos,
por lo que convertir cuatro marcos en tres es ms difcil que convertir dos marcos en tres.
Para eliminar un marco:
Arrastre el borde del marco fuera de la pgina o hasta el borde del marco padre.
Cuando un documento de un marco que se va a eliminar incluye contenido no guardado,
Dreamweaver le pedir que guarde el documento.
Nota: no se puede eliminar totalmente un conjunto de marcos arrastrando los bordes. Para
eliminar un conjunto de marcos, cierre la ventana de documento que lo muestra. Si se ha guardado
el archivo de conjunto de marcos, elimine el archivo.
Para cambiar el tamao de un marco, siga uno de estos procedimientos:
Para establecer el tamao aproximado de los marcos, arrastre los bordes del marco en la vista
Diseo de la ventana de documento.
Seleccin de marcos y conjuntos de marcos 213
Para especificar los tamaos exactos y el espacio que el navegador debe asignar a una fila o
columna de marcos cuando el tamao de la ventana del navegador no permita mostrar todo el
marco, utilice el inspector de propiedades (vase Visualizacin y configuracin de las
propiedades de un conjunto de marcos en la pgina 218).
Seleccin de marcos y conjuntos de marcos
Para realizar cambios en las propiedades de un marco o conjunto de marcos, comience
seleccionando el marco o conjunto de marcos que desea modificar. Puede seleccionar un marco o
un conjunto de marcos en la ventana de documento o utilizando el panel Marcos.
Seleccin de marcos y conjuntos de marcos en el panel Marcos
El panel Marcos proporciona una representacin grfica de los marcos de un conjunto de marcos.
Muestra la jerarqua de la estructura del conjunto de marcos de una forma quiz difcil de percibir
en la ventana de documento. En dicho panel, puede observar que mientras los conjuntos de
marcos estn rodeados por un borde grueso, los marcos estn rodeados por una lnea delgada gris
y aparecen identificados por sus nombres.
Para mostrar el panel Marcos:
Seleccione Ventana > Marcos.
Para seleccionar un marco en el panel Marcos:
Haga clic en el panel Marcos.
Aparecer un contorno de seleccin alrededor del marco en el panel Marcos y en la vista
Diseo de la ventana de documento.
Para seleccionar un conjunto de marcos en el panel Marcos:
Haga clic en el borde que rodea al conjunto de marcos.
Aparecer un contorno de seleccin alrededor del conjunto de marcos en el panel Marcos y en
la vista Diseo de la ventana de documento.
Temas relacionados
Visualizacin y configuracin de las propiedades y los atributos de los marcos en la pgina 216
Seleccin de marcos y conjuntos de marcos en la ventana de documento
Al seleccionar un marco en la ventana de documento de la vista Diseo, sus bordes muestran un
contorno de lnea de puntos; al seleccionar un conjunto de marcos, todos los bordes de los marcos
contenidos en el conjunto de marcos muestran un contorno de lnea de puntos fina.
Nota: no es lo mismo situar el punto de insercin en un documento mostrado en un marco que
seleccionar un marco. Para algunas operaciones (por ejemplo, establecer las propiedades del marco)
es necesario seleccionar un marco.
Para seleccionar un marco en la ventana de documento:
En la vista Diseo, haga clic dentro de un marco mientras mantiene presionada la tecla Alt
(Windows) o las teclas Opcin-Mays (Macintosh).
Aparecer un contorno de seleccin alrededor del marco.
Para seleccionar un conjunto de marcos en la ventana de documento:
Haga clic en uno de los bordes del marco interior del conjunto de marcos en la vista Diseo.
(Para ello, los bordes de los marcos deben estar visibles; si no lo estn, seleccione Ver > Ayudas
visuales > Bordes de marco.)
Aparecer un contorno de seleccin alrededor del conjunto de marcos.
Nota: suele ser ms fcil seleccionar conjuntos de marcos en el panel Marcos que en la ventana
de documento. Para ms informacin, consulte Seleccin de marcos y conjuntos de marcos en el
panel Marcos en la pgina 213.
Para seleccionar otro marco o conjunto de marcos, siga uno de estos procedimientos:
Para seleccionar el marco o conjunto de marcos siguiente o anterior en el mismo nivel
jerrquico que la seleccin actual, presione Alt-flecha izquierda o Alt-flecha derecha
(Windows), o Comando-flecha izquierda o Comando-flecha derecha (Macintosh). El uso de
estas teclas le permite pasar por los distintos marcos y conjuntos de marcos en el orden en que
estn definidos en el archivo de conjunto de marcos.
Para seleccionar el conjunto de marcos padre (el que contiene la seleccin actual), presione
Alt+flecha arriba (Windows) o Comando+flecha arriba (Macintosh).
Para seleccionar el primer marco o conjunto de marcos hijo del conjunto de marcos
seleccionado actualmente (es decir, el primero en el orden en que estn definidos en el archivo
de conjunto de marcos), presione Alt-flecha abajo (Windows) o Comando-flecha abajo
(Macintosh).
Temas relacionados
Seleccin de marcos y conjuntos de marcos en el panel Marcos en la pgina 213
Visualizacin y configuracin de las propiedades y los atributos de los marcos en
la pgina 216
Almacenamiento de archivos de marcos y conjuntos de marcos 215
Cmo abrir un documento en un marco
Puede especificar el contenido inicial de un marco insertando contenido nuevo en un documento
vaco en un marco o abriendo un documento existente en un marco.
Para abrir un documento existente en un marco:
1 Site el punto de insercin en un marco.
2 Elija Archivo > Abrir en marco.
3 Seleccione el documento que desea abrir en el marco y haga clic en Aceptar (Windows) o
Escoger (Macintosh).
El documento se muestra en el marco.
4 Opcional: para convertir este documento en el documento predeterminado que se mostrar en
el marco al abrir el conjunto de marcos en un navegador, guarde el conjunto de marcos.
Almacenamiento de archivos de marcos y conjuntos de marcos
Para obtener una vista previa de un conjunto de marcos en un navegador, deber guardar antes el
archivo de conjunto de marcos y todos los documentos que se mostrarn en los marcos. Puede
guardar cada archivo de conjunto de marcos y documento con marcos individualmente, o guardar
al mismo tiempo el archivo de conjunto de marcos y todos los documentos que aparecen en los
marcos.
Nota: cuando utiliza herramientas visuales de Dreamweaver para crear un conjunto de marcos, a
cada nuevo documento que aparece en un marco se le asigna un nombre de archivo
predeterminado. Por ejemplo, el primer archivo de conjunto de marcos se llamar UntitledFrameset-
1, mientras que el primer documento en un marco se llamar UntitledFrame-1.
Para guardar un archivo de conjunto de marcos:
1 Seleccione el conjunto de marcos en el panel Marcos o en la ventana de documento (vase
Seleccin de marcos y conjuntos de marcos en la pgina 213).
Para guardar el archivo de conjunto de marcos, elija Archivo > Guardar conjunto de marcos.
Para guardar el archivo de conjunto de marcos como un archivo nuevo, elija Archivo >
Guardar conjunto de marcos como.
Si el archivo de conjunto de marcos no se ha guardado anteriormente, estos dos comandos
sern iguales.
Para guardar un documento que aparece dentro de un marco:
Haga clic en el marco y seleccione Archivo > Guardar marco o Archivo > Guardar marco como.
Para guardar todos los archivos asociados a un conjunto de marcos:
Elija Archivo > Guardar todo.
Se guardarn todos los documentos abiertos en el conjunto de marcos, incluidos el archivo de
conjunto de marcos y todos los documentos con marco. Si el archivo de conjunto de marcos no
se ha guardado todava, en la vista Diseo aparecer un borde grueso alrededor del conjunto de
marcos y un cuadro de dilogo que le permitir seleccionar un nombre de archivo. Alrededor
de cada marco que no se haya guardado an aparecer un borde grueso y un cuadro de dilogo
que le permitir elegir un nombre de archivo.
Nota: si ha utilizado Archivo > Abrir en marco para abrir un documento en un marco, cuando
guarde el conjunto de marcos, este documento se convertir en el predeterminado para mostrarse
en dicho marco. Si no desea que este documento sea el predeterminado, no guarde el archivo de
conjunto de marcos.
Visualizacin y configuracin de las propiedades y los atributos
de los marcos
Utilice el inspector de propiedades para ver y establecer las propiedades de un marco.
Si lo desea, tambin puede definir algunos atributos de marco, como el atributo de ttulo (que no
es lo mismo que el atributo de nombre), para mejorar la accesibilidad. Puede activar la opcin de
creacin de accesibilidad para los marcos para definir los atributos cuando se crean los marcos
(vase Optimizacin del espacio de trabajo para el diseo de pginas accesibles en la pgina 56),
o bien puede definir los atributos despus de insertar un marco. Para editar los atributos de
accesibilidad de un marco, puede utilizar el inspector de etiquetas para editar el cdigo HTML
directamente.
Para establecer las propiedades de un conjunto de marcos, vase Visualizacin y configuracin de
las propiedades de un conjunto de marcos en la pgina 218.
Para ver o establecer las propiedades de un marco:
1 Seleccione un marco siguiendo uno de estos procedimientos:
Haga clic en un marco en la ventana de documento mientras presiona la tecla Alt
(Windows) o las teclas Mays-Opcin (Macintosh).
Haga clic en un marco en el panel Marcos (Ventana > Marcos).
Visualizacin y configuracin de las propiedades y los atributos de los marcos 217
situada en la esquina inferior derecha para ver todas las propiedades del marco.
Sugerencia: para cambiar el color de fondo de un marco, establezca el color de fondo del
documento en el marco en las propiedades de la pgina.
Para establecer los valores de accesibilidad de un marco:
1 En el panel Marcos (Ventana > Marcos), seleccione un marco colocando el punto de insercin
en uno de los marcos.
2 Seleccione Modificar > Editar etiqueta.
Aparece el editor de etiquetas.
3 Seleccione Hoja de estilos/Accesibilidad en la lista de categoras de la izquierda.
4 Introduzca los valores que desee.
Para editar los valores de accesibilidad de un marco:
1 Abra la vista Cdigo o bien las vistas Cdigo y Diseo de su documento en el caso de que
actualmente est en modo Diseo.
2 En el panel Marcos (Ventana > Marcos), seleccione un marco colocando el punto de insercin
en uno de los marcos.
Dreamweaver resalta la etiqueta de marco en el cdigo.
haga clic (Macintosh) en el cdigo y seleccione Editar etiqueta.
Aparece el editor de etiquetas.
Para cambiar el color de fondo de un documento en un marco:
1 Site el punto de insercin en el marco.
2 Seleccione Modificar > Propiedades de la pgina.
Aparecer el cuadro de dilogo Propiedades de la pgina.
3 Haga clic en el men emergente Color de fondo y seleccione un color.
Temas relacionados
Visualizacin y configuracin de las propiedades de un conjunto
de marcos
Utilice el inspector de propiedades para ver y establecer la mayor parte de las propiedades de un
conjunto de marcos. Para establecer las propiedades de un marco, vase Visualizacin y
Para ver o establecer las propiedades de un conjunto de marcos:
1 Seleccione un conjunto de marcos siguiendo uno de estos procedimientos:
Haga clic en uno de los bordes que se encuentran entre dos marcos en el conjunto de marcos
de la vista Diseo de la ventana de documento.
Haga clic en el borde que rodea a un conjunto de marcos en el panel Marcos (Ventana >
Marcos).
situada en la esquina inferior derecha para ver todas las propiedades del conjunto de marcos.
Para establecer el ttulo de un documento de conjunto de marcos:
1 Seleccione un conjunto de marcos siguiendo uno de estos procedimientos:
Haga clic en uno de los bordes que se encuentran entre dos marcos en el conjunto de marcos
de la vista Diseo de la ventana de documento.
Haga clic en el borde que rodea a un conjunto de marcos en el panel Marcos (Ventana >
Marcos).
2 En el campo Ttulo de la barra de herramientas de documento, introduzca un nombre para el
documento del conjunto de marcos.
Cuando un visitante vea el conjunto de marcos en un navegador, el ttulo aparecer en la barra
de ttulo del navegador.
Temas relacionados
Control del contenido de los marcos con vnculos
Para incluir un vnculo en un marco que abra un documento en otro marco, deber establecer el
destino del vnculo. El atributo target de un vnculo especifica el marco o ventana en la que se
abrir el contenido vinculado.
Manipulacin de navegadores que no pueden mostrar marcos 219
Por ejemplo, si la barra de navegacin est en el marco de la izquierda y desea que el material
vinculado aparezca en el marco de contenido principal de la derecha, deber especificar el nombre
del marco de contenido principal como destino de todos los vnculos de la barra de navegacin.
Cuando un visitante haga clic en un vnculo de navegacin, el contenido especificado se abrir en
el marco principal.
Para establecer un marco como destino:
1 En la vista Diseo, seleccione texto o un objeto.
2 En el campo Vnculo del inspector de propiedades (Ventana > Propiedades), siga uno de estos
procedimientos:
Haga clic en el icono de carpeta y seleccione el archivo con el que debe establecerse el
vnculo.
Arrastre el icono Sealar archivo al panel Archivos para seleccionar el archivo con el que
debe establecerse el vnculo.
3 En el men emergente Dest. del inspector de propiedades, seleccione el marco o ventana donde
debe aparecer el documento vinculado:
_blank abre el documento vinculado en una nueva ventana del navegador, sin modificar la
ventana actual.
_parent abre el documento vinculado en el conjunto de marcos padre del marco en el que
aparece el vnculo, sustituyendo todo el conjunto de marcos.
_self abre el vnculo en el marco actual y sustituye el contenido de dicho marco.
_top abre el documento vinculado en la ventana actual del navegador, eliminando de esta
forma todos los marcos.
En este men tambin aparecen los nombres de los marcos. Seleccione un marco con nombre
para abrir el documento vinculado en el marco seleccionado.
Nota: los nombres de marcos slo aparecen al editar un documento dentro de un conjunto de
marcos. Cuando edita un documento en su propia ventana de documento, los nombres de marcos
no aparecern en el men emergente Dest. Si edita un documento fuera del conjunto de marcos,
puede introducir el nombre del marco de destino en el cuadro de dilogo Dest.
Sugerencia: si desea establecer un vnculo con una pgina que no se encuentra en su sitio Web,
utilice siempre target="_top" o target="_blank" para que la pgina no parezca formar parte
del mismo.
Manipulacin de navegadores que no pueden mostrar marcos
Dreamweaver permite especificar el contenido que se visualizar en navegadores basados en texto
y en navegadores grficos antiguos que no admiten marcos. Este contenido se almacena en el
archivo de conjunto de marcos, entre etiquetas noframes. Cuando un navegador que no admite
marcos carga un archivo de conjunto de marcos, solamente mostrar el contenido que aparece
entre etiquetas noframes.
Nota: el contenido del rea noframes no debera limitarse a un mensaje que diga Debe actualizar a
un navegador que admita marcos. Para algunas personas est ms que justificado el uso de un
sistema que no permite la visualizacin de marcos. Procure que el contenido sea accesible para
dichas personas.
Para ofrecer contenido para navegadores que no admiten marcos:
1 Seleccione Modificar > Conjunto de marcos > Editar contenido sin marcos.
Dreamweaver borra la vista de diseo, al tiempo que aparecen las palabras Contenido sin
marcos en la parte superior de la misma.
2 Para crear el contenido sin marcos, siga uno de estos procedimientos:
En la ventana de documento, escriba o inserte el contenido como lo hara en cualquier
documento normal.
Seleccione Ventana > Inspector de cdigo, site el punto de insercin entre las etiquetas
body que aparecen dentro de las etiquetas noframes y escriba el cdigo HTML para el
contenido.
3 Seleccione de nuevo Modificar > Conjunto de marcos > Editar contenido sin marcos para volver
a la vista normal del documento de conjunto de marcos.
Utilizacin de comportamientos JavaScript con marcos
Existen varios comportamientos JavaScript y comandos de navegacin especialmente apropiados
para su uso con marcos:
Definir texto de marco sustituye el contenido y el formato de un marco por el contenido que
usted especifique. Dicho contenido puede incluir cualquier cdigo HTML. Utilice esta accin
para mostrar informacin de forma dinmica en un marco. (Vase Definir texto de marco en
la pgina 399.)
Ir a URL abre una nueva pgina en la ventana actual o en el marco especificado. Esta accin
resulta especialmente til para cambiar el contenido de dos o ms marcos con un solo clic. (Vase
Ir a URL en la pgina 394.)
El comando Insertar barra de navegacin aade una barra de navegacin a la pgina; a
continuacin, podr adjuntar comportamientos a las imgenes y establecer las imgenes que se
mostrarn dependiendo de las acciones del visitante. Por ejemplo, quizs desee mostrar una
imagen de botn en su estado presionado y sin presionar para indicar al visitante qu pgina del
sitio est viendo. (Vase Insercin de una barra de navegacin en la pgina 343.)
Insertar men de salto configura una lista de men con vnculos que abren archivos en una
ventana del navegador al hacer clic en ellos. Tambin puede definir como destino una ventana o
un marco concreto para que se abra en el mismo el documento. (Vase Insercin de mens de
salto en la pgina 341.)
221
CAPTULO 11
Administracin de plantillas
Una plantilla de Macromedia Dreamweaver MX 2004 es un tipo especial de documento que sirve
para crear un diseo de pgina fijo; puede crear documentos basados en la plantilla que heredan
el diseo de pgina de la plantilla. Al disear una plantilla, especifica qu reas de los documentos
basados en esa plantilla pueden ser editadas por los usuarios.
Nota: las plantillas permiten controlar un rea de diseo amplia y reutilizar diseos completos. Si
desea reutilizar elementos de diseo individuales, como la informacin de copyright de un sitio o un
logotipo, puede crear elementos de biblioteca. Para ms informacin, consulte el Captulo 5,
Administracin de activos y bibliotecas, en la pgina 119.
Plantillas de Dreamweaver en la pgina 222
Creacin de una plantilla de Dreamweaver en la pgina 233
Creacin de plantillas para un sitio de Contribute en la pgina 236
Creacin de regiones editables en la pgina 239
Creacin de regiones repetidas en la pgina 241
Utilizacin de regiones opcionales en la pgina 243
Definicin de atributos de etiqueta editables en la pgina 245
Creacin de una plantilla anidada en la pgina 246
Edicin y actualizacin de plantillas en la pgina 248
Administracin de plantillas en la pgina 251
Exportacin e importacin de contenido XML de plantillas en la pgina 252
Exportacin de un sitio sin formato de plantilla en la pgina 253
Aplicacin o eliminacin de una plantilla de un documento existente en la pgina 253
Edicin de contenido de un documento basado en plantilla en la pgina 254
222 Captulo 11: Administracin de plantillas
Plantillas de Dreamweaver
Un autor de plantillas crea un diseo de pgina fijo en una plantilla. El autor crea a
continuacin regiones en la plantilla que son editables en los documentos que se basan en esa
plantilla; si el autor no define una regin como editable, los usuarios de la plantilla no podrn
editar el contenido de esa rea. Las plantillas permiten a los autores controlar qu elementos de la
pgina pueden editar los usuarios de la plantilla (como los redactores, los artistas grficos y otros
desarrolladores Web). El autor de una plantilla puede incluir varios tipos de regiones de plantilla
en un documento.
Uno de los aspectos ms interesantes de las plantillas radica en la posibilidad de actualizar
mltiples pginas de una vez. Un documento que se crea a partir de una plantilla permanece
conectado a ella (a menos que separe el documento posteriormente). Puede modificar una
plantilla e inmediatamente actualizar el diseo en todos los documentos basados en ella.
Temas relacionados
Tipos de regiones de plantillas
Dreamweaver bloquea automticamente la mayora de las regiones de documento cuando ste se
guarda como plantilla. Como autor de la plantilla, debe especificar qu regiones del documento
basado en plantilla sern editables insertando regiones editables o parmetros editables en la
plantilla.
A medida que cree la plantilla, podr realizar cambios tanto en las regiones editables como en las
bloqueadas. Sin embargo, en un documento basado en plantilla, el usuario de la plantilla slo
podr realizar cambios en las regiones editables, no en las regiones bloqueadas.
Una plantilla contiene cuatro tipos de regiones:
Una regin editable es una regin no bloqueada de un documento basado en plantilla, es decir,
una seccin que el usuario de la plantilla puede editar. El autor de una plantilla puede especificar
cualquier rea de la plantilla como editable. Para que una plantilla sea efectiva, deber contener al
menos una regin editable. En caso contrario, las pginas basadas en la plantilla no se podrn
editar. Para informacin sobre cmo insertar una regin editable, vase Insercin de una regin
editable en la pgina 239.
Una regin repetida es una seccin del diseo del documento que se define para que se repita.
Por ejemplo, puede definir que una fila de una tabla se repita. Normalmente, las secciones
repetidas son editables para que el usuario de la plantilla pueda editar el contenido del elemento
repetido, mientras que el diseo propiamente dicho est controlado por el autor de la plantilla. El
usuario de la plantilla utiliza las opciones de control de regin repetida para aadir o eliminar
copias de la regin repetida segn convenga en un documento que est basado en la plantilla.
Existen dos tipos de regiones repetidas que se pueden insertar en una plantilla: regin repetida y
tabla repetida. Para informacin sobre cmo insertar una regin repetida en una plantilla, vase
Creacin de una regin repetida en una plantilla en la pgina 241. Para informacin sobre
cmo crear una tabla de repeticin, vase Insercin de una tabla repetida en la pgina 242. Para
informacin sobre cmo utilizar una regin repetida en una pgina basada en plantilla, vase
Adicin, eliminacin y cambio del orden de una entrada de regin repetida en la pgina 256.
Plantillas de Dreamweaver 223
Una regin opcional es una seccin de la plantilla que se especifica como opcional para
contenido como texto opcional o una imagen que puede aparecer o no en un documento basado
en la plantilla. En la pgina basada en la plantilla, el usuario de la plantilla suele controlar si el
contenido se mostrar. Para informacin sobre cmo establecer regiones opcionales en una
plantilla, vase Insercin de una regin opcional en la pgina 243. Para informacin sobre cmo
editar regiones opcionales en una pgina basada en plantilla, vase Modificacin de propiedades
de plantilla en la pgina 255.
Un atributo de etiqueta editable permite desbloquear un atributo de etiqueta de una plantilla de
modo que ste se pueda editar en una pgina basada en plantilla. Por ejemplo, puede bloquear
qu imagen aparece en el documento, pero dejar que el usuario de la plantilla establezca
alineacin izquierda, derecha o central. Para informacin sobre cmo configurar atributos de
etiqueta editables, vase Especificacin de atributos de etiqueta editables en una plantilla en
la pgina 245. Para informacin sobre cmo editar las etiquetas de una pgina basada en plantilla,
vase Modificacin de propiedades de plantilla en la pgina 255.
Temas relacionados
Creacin de regiones editables en la pgina 239
Plantillas y documentos basados en plantillas en las vistas Diseo y Cdigo
Puede ver plantillas y documentos basados en plantillas en las vistas Diseo y Cdigo.
Visualizacin de plantillas en la vista Diseo
En las plantillas, las regiones editables aparecen en la vista Diseo de la ventana de documento
rodeadas por contornos rectangulares del color de resaltado predefinido. En la esquina superior
izquierda de cada regin aparece una pequea ficha, en la que se muestra el nombre de la regin.
Nota: para informacin sobre la configuracin de las preferencias de color de resaltado, vase
Configuracin de preferencias de resaltado en regiones de plantillas en la pgina 235.
Puede identificar un archivo de plantilla observando la barra de ttulo de la ventana de
documento. La barra de ttulo de un archivo de plantilla contiene la palabra <<Plantilla>> y la
extensin del archivo es .dwt.
Temas relacionados
Visualizacin de documentos basados en plantilla en la vista Diseo en la pgina 225
Visualizacin de documentos basados en plantilla en la vista Cdigo en la pgina 226
Visualizacin de plantillas en la vista Cdigo
En la vista Cdigo puede cambiar tanto el cdigo HTML editable como el bloqueado de una
plantilla.
Sugerencia: puede utilizar las preferencias de colores para definir su propia combinacin de colores
con el fin de distinguir fcilmente las regiones de plantilla al ver un documento en la vista Cdigo
(vase Personalizacin de las preferencias de colores de cdigo para una plantilla en
la pgina 235).
Las regiones de contenido editable se marcan en HTML mediante los comentarios siguientes:

Todo lo que se encuentra entre estos comentarios ser editable en documentos basados en la
plantilla. El cdigo HTML para una regin editable tendra el siguiente aspecto:
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>

<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>

</table>
Nota: al editar el cdigo de plantilla en la vista Cdigo, tenga cuidado de no cambiar ninguna de las
etiquetas de comentario relacionadas con la plantilla en las que se basa Dreamweaver.
Temas relacionados
Visualizacin de plantillas en la vista Diseo en la pgina 223
Visualizacin de documentos basados en plantilla en la vista Cdigo en la pgina 226
Visualizacin de documentos basados en plantilla en la vista Diseo
En un documento basado en una plantilla, las regiones editables aparecen en la vista Diseo de la
ventana de documento marcadas con rectngulos de un color de resaltado predefinido. En la
esquina superior izquierda de cada regin aparece una pequea ficha, en la que se muestra el
nombre de la regin.
Nota: para informacin sobre la configuracin de las preferencias de color de resaltado, vase
Adems de los contornos de las regiones editables, toda la pgina aparece rodeada por un
contorno de otro color, con una ficha en la parte superior derecha en la que figura el nombre de la
plantilla en la que se basa el documento. Este rectngulo resaltado le recuerda que el documento
est basado en una plantilla y que no se puede cambiar nada que est fuera de las regiones
editables.
Temas relacionados
Visualizacin de plantillas en la vista Cdigo en la pgina 224
Visualizacin de documentos basados en plantilla en la vista Cdigo
En la vista Cdigo, las regiones editables de un documento derivado de una plantilla aparecen en
un color distinto del cdigo existente en las regiones no editables. Puede realizar cambios
nicamente en el cdigo que est en las regiones editables o en los parmetros editables;
Dreamweaver impide la escritura en las regiones bloqueadas.
El contenido editable se marca en HTML mediante los siguientes comentarios de Dreamweaver:

Todo lo que hay entre estos comentarios es editable en un documento basado en una plantilla. El
cdigo HTML para una regin editable tendra el siguiente aspecto:
<body bgcolor="#FFFFFF" leftmargin="0">
<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>

<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>

</table>
</body>
El color predeterminado para texto no editable es gris. Puede definir un color distinto para las
regiones editables y no editables en el cuadro de dilogo Preferencias. Para ms informacin,
consulte Personalizacin de las preferencias de colores de cdigo para una plantilla en
la pgina 235.
Temas relacionados
Visualizacin de plantillas en la vista Cdigo en la pgina 224
Visualizacin de documentos basados en plantilla en la vista Diseo en la pgina 225
Sintaxis de las etiquetas de plantilla
En esta seccin se describen las reglas generales de la sintaxis y se ofrece una lista de las etiquetas
de comentario HTML que Dreamweaver utiliza para especificar regiones en las plantillas y los
documentos basados en plantillas. Dreamweaver inserta automticamente etiquetas de plantilla en
el cdigo cuando se inserta un objeto de plantilla.
Nota: Dreamweaver utiliza etiquetas de comentario HTML para definir regiones de plantilla, por lo
que los documentos basados en plantillas son archivos HTML vlidos.
Reglas generales de sintaxis
A continuacin se indican las reglas generales de sintaxis:
Cada vez que aparece un espacio puede sustituir los espacios en blanco que desee (espacios,
tabulaciones, saltos de lnea). El espacio en blanco es obligatorio, salvo al principio o al final de
un documento.
Los atributos se pueden proporcionar en cualquier orden. Por ejemplo, en un TemplateParam,
puede especificar el tipo delante del nombre.
Los nombres de comentarios y atributos tienen en cuenta el uso de maysculas y minsculas.
Todos los atributos deben estar entre comillas. Se pueden utilizar comillas dobles o simples.
Para informacin sobre cmo revisar la sintaxis, vase Comprobacin de la sintaxis de la
plantilla en la pgina 250.
Temas relacionados
Etiquetas de instancia en la pgina 228
Etiquetas de plantilla
Dreamweaver utiliza las etiquetas de plantilla siguientes:

















 (equivalente a @@...@@)


Temas relacionados
Reglas generales de sintaxis en la pgina 227
Etiquetas de instancia
Dreamweaver utiliza las etiquetas de instancia siguientes:









Temas relacionados
Reglas generales de sintaxis en la pgina 227
Etiquetas de plantilla en la pgina 227
Vnculos de plantillas
Para crear un vnculo en un archivo de plantilla, utilice el icono de la carpeta o el icono de
sealizacin de archivo en el inspector de propiedades; no escriba el nombre del archivo con el
que desea establecer el vnculo. Si lo escribe, es posible que el vnculo no funcione. En esta seccin
se explica cmo gestiona Dreamweaver los vnculos de las plantillas.
Cuando se crea una archivo de plantilla a partir de una pgina existente y luego se guarda esa
pgina como plantilla, Dreamweaver actualiza los vnculos de modo que sealen a los mismos
archivos que anteriormente. Dado que las plantillas se guardan en la carpeta Templates, la ruta de
un vnculo relativo al documento cambia cuando la pgina se guarda como plantilla. Cuando en
Dreamweaver se crea un documento basado en esa plantilla y luego se guarda, se actualizan todos
los vnculos relativos al documento para que continen sealando a los archivos correctos.
Sin embargo, si se aade un nuevo vnculo relativo al documento a un archivo de plantilla y se
escribe la ruta en el cuadro de texto del vnculo en el inspector de propiedades, es fcil introducir
una ruta equivocada. La ruta correcta es la ruta desde la carpeta Templates hasta el documento
vinculado, no la ruta desde la carpeta del documento basado en plantilla hasta el documento
vinculado.
Para informacin sobre cmo vincular utilizando el icono de sealizacin de archivos, vase
Vinculacin de archivos y documentos en la pgina 331.
Nota: en algunos casos (como las rutas de archivo de los manejadores de eventos en plantillas) no es
posible usar el icono de carpeta ni el icono de sealizacin de archivos; en estos casos, introduzca la
ruta correcta.
Plantillas anidadas
Una plantilla anidada es una plantilla cuyo diseo y cuyas regiones editables se basan en otra
plantilla. Para crear una plantilla anidada, deber guardar en primer lugar la plantilla original o
base, crear un documento nuevo basado en la plantilla y, por ltimo, guardar ese documento
como plantilla. En la nueva plantilla puede definir regiones editables en reas definidas
originalmente como editables en la plantilla base.
Las plantillas anidadas resultan tiles para controlar el contenido de las pginas de un sitio que
comparten muchos elementos de diseo, pero que tienen algunas variaciones entre las pginas.
Por ejemplo, una plantilla base puede contener reas de diseo ms amplias y ser utilizada por
muchos proveedores de contenido para un sitio, mientras que una plantilla anidada puede definir
las regiones editables en pginas de una seccin especfica del sitio.
Las regiones editables de una plantilla base se transfieren a la plantilla anidada y siguen siendo
editables en las pginas creadas a partir de la plantilla anidada a menos que se inserten nuevas
regiones de plantilla en estas regiones.
Los cambios realizados en la plantilla base se actualizan automticamente en las plantillas basadas
en ella y en todos los documentos basados en las plantillas principal y anidada.
En el ejemplo siguiente, la plantilla contiene tres regiones editables, llamadas Body, Nav Bar y
Footer:
Para crear una plantilla anidada, hemos creado un documento nuevo basado en la plantilla y, a
continuacin, hemos guardado el documento como plantilla y lo hemos llamado TrioNested. En la
plantilla anidada, hemos aadido dos regiones editables, con contenido, en la regin editable
llamada Body.
Cuando se aade una nueva regin editable a una regin editable transferida a la plantilla anidada,
el color de resaltado de la regin editable cambia a naranja. El contenido aadido a una regin
editable, como el grfico de editableColumn, deja de ser editable en los documentos basados en
la plantilla anidada. Las reas editables resaltadas en azul, tanto si se han aadido a la plantilla
anidada como si se han transferido desde la plantilla base, siguen siendo editables en los
documentos basados en la plantilla anidada. Las regiones de plantilla donde no inserte una regin
editable se transferirn a los documentos basados en plantilla como regiones editables.
Temas relacionados
Creacin de una plantilla anidada en la pgina 246
Scripts de servidor en plantillas y documentos basados en plantillas
Algunos scripts de servidor se insertan al principio o al final del documento (antes de la etiqueta
<html> o despus de la etiqueta </html>). Estos scripts requieren un tratamiento especial en
plantillas y documentos basados en plantilla. Normalmente, si realiza cambios en el cdigo del
script antes de la etiqueta <html> o despus de la etiqueta </html> de una plantilla, los cambios
no se copian en documentos basados en esa plantilla. Esto puede ocasionar errores en el servidor si
otros scripts de servidor que se encuentran en el cuerpo principal de la plantilla dependen de los
scripts que no se copian. Como consecuencia, Dreamweaver le advertir si realiza cambios en los
scripts antes de la etiqueta <html> o despus de la etiqueta </html> en una plantilla.
Para evitar este problema puede insertar el cdigo siguiente en la seccin head de la plantilla.

Cuando este cdigo se encuentra en una plantilla, los cambios realizados en los script antes de la
etiqueta <html> o despus de la etiqueta </html> se copiarn en documentos basados en esa
plantilla. Sin embargo, no podr volver a editar esos scripts en documentos basados en la plantilla.
De este modo, debe elegir entre editar estos scripts en la plantilla o en los documentos basados en
la plantilla, pero no en ambos.
Parmetros de plantilla
Los parmetros de plantilla contienen valores para controlar el contenido de los documentos
basados en una plantilla. Puede utilizar los parmetros de plantilla para definir regiones opcionales
y atributos de etiqueta editables o para establecer valores que desea transferir a un documento
adjunto. Seleccione un nombre, un tipo de datos y un valor predeterminado para cada parmetro.
Cada parmetro debe tener un nombre exclusivo; cada nombre distingue el uso de maysculas y
minsculas.
Los parmetros de plantilla se pasan al documento como parmetros de instancia. En la mayora
de los casos el usuario de la plantilla puede editar el valor predeterminado del parmetro para
personalizar lo que aparece en un documento basado en plantilla. En otros casos, el autor de la
plantilla puede determinar lo que va a aparecer en el documento, en funcin del valor de una
expresin de plantilla.
Temas relacionados
Expresiones de plantilla
Las expresiones de plantilla son declaraciones que se utilizan para calcular o evaluar un valor.
Puede utilizar una expresin para almacenar un valor y mostrarlo en un documento. Por ejemplo,
una expresin puede ser tan simple como el valor de un parmetro, como @@(Param)@@, o lo
bastante compleja para calcular valores que alternan el color de fondo de la fila de una tabla, como
@@((_index & 1) ? red : blue)@@.
Tambin puede definir expresiones para las condiciones if y multiple-if (para un ejemplo, vase
Condicin "multiple if" en el cdigo de plantilla en la pgina 233). Cuando se utiliza una
expresin en una declaracin condicional, Dreamweaver la evala como verdadera o falsa. Si la
condicin es verdadera, la regin opcional aparece en el documento basado en plantilla; si es falsa,
no aparece.
Puede definir expresiones en la vista Cdigo o en el cuadro de dilogo Regin opcional al insertar
una regin opcional. Para ms informacin sobre cmo escribir expresiones de plantilla, consulte
Lenguaje de expresiones de plantilla en la pgina 232.
En la vista Cdigo, existen dos maneras de definir las expresiones de plantilla: utilice el
comentario  o @@(su expresin)@@. Cuando
se inserta la expresin en el cdigo de plantilla, aparece un marcador de expresin en la vista
Diseo. Cuando aplique la plantilla, Dreamweaver evaluar la expresin y mostrar el valor en el
documento basado en plantilla.
Lenguaje de expresiones de plantilla
El lenguaje de expresiones de plantilla es un pequeo subconjunto de JavaScript y utiliza la
sintaxis y las reglas de prioridad de JavaScript. Puede utilizar operadores JavaScript para escribir
una expresin como esta:
@@(firstName+lastName)@@
Se admiten los siguientes operadores y funciones:
literales numricos, literales de cadena (slo sintaxis de comillas dobles), literales booleanos
(true o false)
referencia de variable (vanse las variables definidas en Modelo de objetos de expresin)
referencia de campo (el operador dot)
operadores unarios: +, -, ~, !
operadores binarios: +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>
operador condicional: ?:
parntesis: ()
Se utilizan los siguientes tipos de datos: booleanos, coma flotante IEEE de 64 bits, cadena y
objeto. Las plantillas de Dreamweaver no admiten el uso de tipos JavaScript nulos o no
definidos. Tampoco permiten convertir implcitamente tipos escalares en un objeto. Por tanto, la
expresin "abc".length desencadenara un error, en lugar de producir el valor 3.
Los nicos objetos disponibles son los definidos por el modelo de objetos de expresin. Se definen
las variables siguientes:
_document
Contiene los datos de plantilla correspondientes al nivel del documento. Hay un campo para cada
parmetro de la plantilla, as como varios campos que proporcionan informacin incorporada
sobre el documento.
_repeat
Slo se define para expresiones que aparecen dentro de una regin repetida. Proporciona
informacin incorporada sobre la regin.
_index ndice numrico (desde 0) de la entrada actual
_numRows Nmero total de entradas de esta regin repetida
_isFirst Verdadero si la entrada actual es la primera de su regin repetida
_isLast Verdadero si la entrada actual es la ltima de su regin repetida
_prevRecord Objeto _repeat de la entrada anterior. Es un error acceder a esta propiedad para
la primera entrada de la regin.
_nextRecord Objeto _repeat de la entrada siguiente. Es un error acceder a esta propiedad para
la ltima entrada de la regin.
_parent En una regin repetida anidada, proporciona el objeto _repeat para la regin repetida
exterior. Es un error acceder a esta propiedad fuera de una regin repetida anidada.
Creacin de una plantilla de Dreamweaver 233
Durante una evaluacin de expresin, todos los campos de los objetos _document y _repeat estn
disponibles implcitamente. Por ejemplo, puede introducir title en lugar de _document.title
para acceder al parmetro de ttulo del documento.
En los casos en que haya un conflicto entre campos, los campos del objeto _repeat tienen
prioridad sobre los campos del objeto _document. Por tanto, no debera ser necesario hacer
referencia explcita a _document o _repeat salvo que se necesite _document dentro de una regin
repetida para hacer referencia a parmetros de documento que estn ocultos debido a parmetros
de regin repetida.
Cuando se utilizan regiones repetidas anidadas, slo estn disponibles implcitamente los campos
de las regiones repetidas ms interiores. Para hacer referencia explcita a las regiones exteriores se
debe utilizar _parent.
Condicin "multiple if" en el cdigo de plantilla
Puede definir expresiones de plantilla para las condiciones if y multiple-if (vase Expresiones de
plantilla en la pgina 231). En este ejemplo se define un parmetro llamado "Dept", se establece
un valor inicial y se define una condicin Multiple If que determina qu logotipo se debe mostrar.
A continuacin se proporciona un ejemplo del cdigo que puede introducir en la seccin head de
la plantilla:

La declaracin condicional siguiente comprueba el valor asignado al parmetro Dept. Cuando la
condicin es verdadera o coincide, se mostrar la imagen apropiada.


 <img src=".../sales.gif"> 
 <img src=".../support.gif">

 <img src=".../hr.gif"> 
 <img src=".../spacer.gif">


Cuando se crea un documento basado en una plantilla, se le transfieren automticamente los
parmetros de plantilla. El usuario de la plantilla determina qu imagen se mostrar (vase
Modificacin de propiedades de plantilla en la pgina 255).
Creacin de una plantilla de Dreamweaver
Puede crear una plantilla a partir de un documento existente (por ejemplo, un documento
HTML, Macromedia ColdFusion o Microsoft Active Server Pages) o a partir de un documento
nuevo y en blanco.
Despus de crear una plantilla, puede insertar regiones de plantilla (vase Tipos de regiones de
plantillas en la pgina 222). Tambin puede definir las preferencias de plantilla en lo que respecta
a los colores del cdigo y al color de resaltado de la regin de plantilla (vase Personalizacin de
las preferencias de colores de cdigo para una plantilla en la pgina 235 y Configuracin de
preferencias de resaltado en regiones de plantillas en la pgina 235).
Sugerencia: puede almacenar informacin adicional sobre una plantilla (como el nombre de su autor,
la fecha en que se modific por ltima vez o la explicacin de algunas decisiones sobre su diseo) en
un archivo de Design Notes para la plantilla (vase Asociacin de Design Notes a archivos en
la pgina 112). Los documentos basados en plantilla no heredan las Design Notes de la plantilla.
Para crear una plantilla:
1 Abra el documento que desea guardar como plantilla:
Para abrir un documento existente, seleccione Archivo > Abrir y seleccione el documento.
Para abrir un documento nuevo en blanco, elija Archivo > Nuevo. En el cuadro de dilogo
que aparece, seleccione Pgina bsica o Pgina dinmica, seleccione el tipo de pgina con el
que desea trabajar y haga clic en Crear.
Nota: para ms informacin sobre la creacin de un nuevo documento, consulte Creacin de
un nuevo documento en blanco en la pgina 74.
2 Cuando el documento se abre, siga uno de estos procedimientos:
Seleccione Archivo > Guardar como plantilla.
En la categora Comn de la barra Insertar, haga clic en la flecha del botn Plantillas y, a
continuacin, seleccione Crear plantilla.
Nota: a menos que anteriormente haya seleccionado No volver a mostrar este mensaje, recibir
una advertencia que indica que el documento que est guardando no contiene regiones editables.
Haga clic en Aceptar para guardar el documento como plantilla o en Cancelar para cerrar el
cuadro de dilogo sin crear una plantilla.
Se abre el cuadro de dilogo Guardar como plantilla.
3 Seleccione un sitio para guardar la plantilla del men emergente Sitio y, a continuacin,
introduzca un nombre exclusivo para la plantilla en el cuadro de texto Guardar como.
Dreamweaver guarda el archivo de plantilla en la carpeta Templates del sitio en la carpeta raz
local del sitio, con la extensin de archivo .dwt. Si no existe la carpeta Templates en el sitio,
Dreamweaver la crear automticamente cuando guarde una plantilla nueva.
Nota: no saque las plantillas de la carpeta Templates ni guarde en ella archivos que no sean
plantillas. Tampoco debe sacar la carpeta Templates de su carpeta raz local. Si lo hace se
producirn errores en las rutas de las plantillas.
Para utilizar el panel Activos para crear una plantilla nueva:
1 En el panel Activos (Ventana > Activos), seleccione la categora Plantillas situada en la parte
Creacin de una plantilla de Dreamweaver 235
Aparecer la categora Plantillas del panel Activos.
2 Haga clic en el botn Editar plantilla que se encuentra en la parte inferior del panel Activos.
Se aadir una plantilla nueva sin ttulo a la lista de plantillas del panel Activos.
3 Con la plantilla an seleccionada, escriba un nombre y presione Intro (Windows) o Retorno
(Macintosh).
Dreamweaver crea una plantilla nueva en blanco en el panel Activos y la carpeta Plantillas.
Temas relacionados
Configuracin de preferencias de resaltado en regiones de plantillas en la pgina 235
Insercin de una regin editable en la pgina 239
Personalizacin de las preferencias de colores de cdigo para una plantilla
Las preferencias de colores de cdigo sirven para controlar el texto, el color de fondo y los
atributos de estilo del texto que se muestra en la vista Cdigo. Puede definir su propia
combinacin de colores con el fin de distinguir fcilmente las regiones de plantilla al ver un
documento en la vista Cdigo.
Para definir una combinacin de colores de la vista Cdigo para plantillas:
2 Seleccione Colores de cdigo en la lista de categoras de la izquierda.
3 Seleccione HTML en la lista Tipo de documento y, a continuacin, haga clic en el botn Editar
combinacin de colores.
Aparecer el cuadro de dilogo Editar combinacin de colores de cdigo.
4 En la lista Estilos para, seleccione Etiquetas de plantilla.
5 Defina el color, el color de fondo y los atributos de estilo para el texto de la vista Cdigo
siguiendo este procedimiento:
Si desea cambiar el color del texto, escriba en el cuadro de texto Color de texto el valor
hexadecimal del color que desea aplicar al texto seleccionado o utilice el selector de color.
Repita la operacin en el campo Fondo para aadir o cambiar un color de fondo existente
para el texto seleccionado.
Si desea aadir un atributo de estilo al cdigo seleccionado, haga clic en los botones B
(negrita), I (cursiva) o U (subrayado) para establecer el estilo deseado.
Configuracin de preferencias de resaltado en regiones de plantillas
Puede utilizar las preferencias de resaltado de Dreamweaver para personalizar el color de resaltado
del contorno de las regiones editables y bloqueadas de una plantilla en vista Diseo. El color de las
regiones editables aparece en la plantilla y en los documentos basados en ella.
Para ms informacin sobre la visualizacin de plantillas y de documentos basados en plantillas en
la vista Diseo, consulte Visualizacin de plantillas en la vista Diseo en la pgina 223 y
Visualizacin de documentos basados en plantilla en la vista Diseo en la pgina 225.
Para cambiar el color de resaltado de la plantilla:
3 Haga clic en el cuadro de color de Regiones editables, Regiones anidadas o Regiones bloqueadas
y seleccione un color de resaltado utilizando el selector de color (o introduzca el valor
hexadecimal correspondiente al color de resaltado en el cuadro de texto).
la pgina 267.
4 Opcional: repita el proceso con otros tipos de regin de plantilla, segn convenga.
5 Haga clic en la opcin Mostrar para activar o desactivar la visualizacin de colores en la ventana
de documento.
Nota: regin anidada no tiene una opcin Mostrar. Su visualizacin depende de la opcin Regin
editable.
Para ver los colores de resaltado en la ventana de documento:
Los colores de resaltado aparecen en la ventana de documento slo cuando Ver > Ayudas
visuales > Elementos invisibles est activado y las opciones adecuadas estn activadas en las
preferencias de Resaltando.
Nota: si se muestran elementos invisibles pero los colores de resaltado no lo son, seleccione
Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh) y, a continuacin,
seleccione la categora Resaltando. Asegrese de que la opcin Mostrar que hay junto al color de
resaltado en cuestin est seleccionada. Verifique tambin que el color elegido sea claramente
visible sobre el color de fondo de la pgina.
Temas relacionados
Personalizacin de las preferencias de colores de cdigo para una plantilla en la pgina 235
Creacin de plantillas para un sitio de Contribute
Puede crear plantillas mediante Dreamweaver para ayudar a los usuarios de Macromedia
Contribute a crear nuevas pginas, lograr un aspecto coherente para el sitio y permitir una
actualizacin del diseo de muchas pginas a la vez.
Al crear una plantilla y cargarla en el servidor, sta se encontrar a disposicin de todos los
usuarios de Contribute que conecten con el sitio, a no ser que haya establecido restricciones de
utilizacin de la plantilla para grupos de permisos de Contribute. Si ha establecido restricciones de
utilizacin de plantillas, es posible que tenga que aadir cada nueva plantilla a la lista de plantillas
que puede utilizar un usuario de Contribute (vase Administracin de Contribute en la Ayuda de
Macromedia Contribute).
Nota: asegrese de que la carpeta raz del sitio establecida en la definicin de sitio de cada usuario
de Contribute es la misma que la carpeta raz del sitio establecida en su definicin del sitio en
Dreamweaver. Si la carpeta raz del sitio de un usuario no coincide con la suya, el usuario no podr
utilizar las plantillas.
Creacin de plantillas para un sitio de Contribute 237
Adems de plantillas de Dreamweaver, puede crear plantillas externas a Dreamweaver mediante
las herramientas de administracin de Contribute. Una plantilla externa a Dreamweaver es una
pgina existente que los usuarios de Contribute utilizan para crear pginas; es similar a una
plantilla de Dreamweaver, con la diferencia de que las pginas basadas en ella no se actualizan
cuando se modifica la plantilla. Asimismo, las plantillas externas a Dreamweaver no pueden
incluir elementos de plantilla de Dreamweaver, como las regiones editables, bloqueadas, repetidas
y opcionales.
Cuando un usuario de Contribute crea un nuevo documento dentro de un sitio que contiene
plantillas de Dreamweaver, Contribute enumera las plantillas disponibles (tanto las plantillas de
Dreamweaver como las externas a Dreamweaver) en el cuadro de dilogo New Page (nueva
pgina).
Para incluir en el sitio pginas que utilicen codificaciones distintas de Latin-1, deber crear
plantillas (de Dreamweaver o externas a Dreamweaver). Contribute permite editar pginas que
empleen cualquier codificacin. Sin embargo, cuando un usuario de Contribute crea una nueva
pgina en blanco, sta utiliza la codificacin Latin-1. Para crear una pgina que utilice una
codificacin diferente, un usuario de Contribute puede crear una copia de una pgina existente
que emplee una codificacin diferente o utilizar una plantilla que utilice una codificacin
diferente. No obstante, si no hay ninguna pgina o plantilla en el sitio que utilice otras
codificaciones, deber crear primero en Dreamweaver una pgina o plantilla que utilice otra
codificacin.
Para informacin sobre la creacin, edicin y actualizacin de plantillas de Dreamweaver, vase
Plantillas de Dreamweaver en la pgina 222.
Para crear una plantilla externa a Dreamweaver:
4 Seleccione la categora Contribute de la lista de categoras de la izquierda.
5 Si no lo ha hecho todava, deber activar la compatibilidad de Contribute.
Seleccione la opcin Activar compatibilidad con Contribute y, a continuacin, introduzca un
URL de raz del sitio.
6 Haga clic en el botn Administrar sitio en Contribute.
Si aparece el cuadro de dilogo Contrasea de administrador, escriba la contrasea de
administrador y haga clic en Aceptar.
convertirse en el administrador del sitio Web. Haga clic en S, luego escriba y confirme una
8 Seleccione un grupo de permisos y haga clic en el botn Editar grupo.
9 Seleccione la categora Nuevas pginas y aada pginas existentes a la lista situada bajo la opcin
Crear una nueva pgina copiando una pgina de esta lista.
Para ms informacin, consulte el apartado Administracin de Contribute de la Ayuda en
Contribute.
10 Haga clic en Aceptar para cerrar el cuadro de dilogo Grupo de permisos.
Temas relacionados
Creacin de regiones editables 239
Creacin de regiones editables
Las regiones de plantilla editables controlan qu reas de una pgina basada en plantilla puede
editar el usuario.
Temas relacionados
Tipos de regiones de plantillas en la pgina 222
Insercin de una regin editable
Antes de insertar una regin editable deber guardar como plantilla el documento en el que est
trabajando (vase Creacin de una plantilla de Dreamweaver en la pgina 233).
Nota: si inserta una regin editable en un documento en lugar de hacerlo en un archivo de plantilla,
Dreamweaver le advertir que el documento se guardar automticamente como plantilla.
Puede colocar una regin editable en cualquier lugar de la pgina, pero tenga en cuenta lo
siguiente si va a hacer que una tabla o una capa sea editable:
Puede marcar una tabla entera o una celda individual de una tabla como editable, pero no
podr marcar varias celdas de una tabla como una sola regin editable. Si hay una etiqueta
<td> seleccionada, la regin editable incluir la regin alrededor de la celda. Si no, la regin
editable afectar slo al contenido de la celda.
Las capas y el contenido de las capas son elementos distintos. Al convertir una capa en editable
es posible cambiar la posicin de la capa y su contenido, mientras que al convertir el contenido
de una capa en editable slo puede cambiarse el contenido de la capa, no su posicin.
Para insertar una regin de plantilla editable:
1 En la ventana de documento, siga uno de estos procedimientos para seleccionar la regin:
Seleccione el texto o el contenido que desea definir como regin editable.
Site el punto de insercin en la posicin en la que desea insertar una regin editable.
2 Siga uno de estos procedimientos para insertar una regin editable:
Seleccione Insertar > Objetos de plantilla > Regin editable.
clic (Macintosh) y seleccione Plantillas > Nueva regin editable.
En la categora Comn de la barra Insertar, haga clic en la flecha del botn Plantillas y
seleccione Regin editable.
Aparecer el cuadro de dilogo Regin editable.
3 En el cuadro de texto Nombre, introduzca un nombre exclusivo para la regin. (No se puede
usar el mismo nombre para ms de una regin editable en una plantilla determinada.)
Nota: no utilice caracteres especiales en el cuadro de texto Nombre.
La regin editable aparece limitada por un contorno rectangular resaltado en la plantilla con el
color de resaltado definido en las preferencias. En la esquina superior izquierda de la regin
ver una ficha con el nombre de la regin. Si ha insertado una regin editable vaca en el
documento, el nombre de la regin tambin aparecer dentro de la regin.
Nota: para informacin sobre la configuracin de las opciones de resaltado de plantilla, vase
Temas relacionados
Eliminacin de una regin editable en la pgina 240
Cambio del nombre de una regin editable en la pgina 241
Seleccin de regiones editables
Puede identificar y seleccionar fcilmente regiones de plantilla en el documento de plantilla y en
los documentos basados en la plantilla.
Para seleccionar una regin editable en la ventana de documento:
Haga clic en la ficha situada en la esquina superior izquierda de la regin editable.
Para buscar una regin editable y seleccionarla en el documento:
Seleccione Modificar > Plantillas y elija el nombre de la regin en la lista que aparece al final de
ese submen.
Nota: las regiones editables que se encuentran dentro de una regin repetida no aparecen en el
men. Deber localizar estas regiones buscando los bordes con fichas de la ventana de
documento.
Las regiones editables estn seleccionadas en el documento.
Temas relacionados
Configuracin de preferencias de resaltado en regiones de plantillas en la pgina 235
Cambio del nombre de una regin editable en la pgina 241
Eliminacin de una regin editable
Si ha marcado una regin del archivo de plantilla como editable y despus desea bloquearla de
nuevo (convertirla en no editable en los documentos basados en la plantilla), utilice el comando
Quitar formato de plantilla.
Para eliminar una regin editable:
1 Haga clic en la ficha situada en la esquina superior izquierda de la regin editable para
seleccionarla.
Elija Modificar > Plantillas > Quitar formato de plantilla.
clic (Macintosh) y seleccione Plantillas > Quitar formato de plantilla.
La regin dejar de ser editable.
Temas relacionados
Creacin de regiones repetidas 241
Cambio del nombre de una regin editable
Despus de insertar una regin editable, puede cambiarle el nombre.
Para cambiar el nombre de una regin editable:
1 Haga clic en la ficha situada en la esquina superior izquierda de la regin editable para
seleccionarla.
2 En el inspector de propiedades (Ventana > Propiedades), escriba un nuevo nombre.
Dreamweaver aplica el nombre nuevo a la regin editable.
Temas relacionados
Creacin de regiones repetidas
Una regin repetida es una seleccin de una plantilla que se puede duplicar con la frecuencia
deseada en una pgina basada en plantilla. Las regiones repetidas suelen utilizarse con tablas. Sin
embargo, tambin es posible definir una regin repetida para otros elementos de la pgina.
Las regiones repetidas permiten controlar el diseo de la pgina mediante la repeticin de
determinados elementos, como un elemento de catlogo y un diseo de descripcin, o la
repeticin de una fila de datos como una lista de elementos.
Puede utilizar dos objetos de plantilla de regin repetida: regin repetida y tabla repetida.
Temas relacionados
Creacin de una regin repetida en una plantilla
Las regiones repetidas permiten a los usuarios de las plantillas duplicar una regin especificada en
una plantilla tantas veces como deseen. Una regin repetida no es una regin editable.
Para convertir en editable el contenido de una regin repetida (por ejemplo, para que un usuario
pueda introducir texto en una celda de la tabla en un documento basado en una plantilla), deber
insertar una regin editable en la regin repetida (vase Insercin de una regin editable en
la pgina 239).
Para informacin sobre cmo crear una tabla de repeticin editable, vase Insercin de una tabla
repetida en la pgina 242.
Para insertar una regin repetida en una plantilla:
1 En la ventana de documento, siga uno de estos procedimientos:
Seleccione el texto o el contenido que desea definir como regin repetida.
Site el punto de insercin en el documento en el que desea insertar la regin repetida.
2 Siga uno de estos procedimientos para crear una regin repetida:
Elija Insertar > Objetos de plantilla > Regin repetida.
clic (Macintosh) y seleccione Plantillas > Nueva regin repetida.
seleccione Regin repetida.
Aparecer el cuadro de dilogo Nueva regin repetida.
3 En el cuadro de texto Nombre, introduzca un nombre exclusivo para la regin de plantilla. (No
se puede usar el mismo nombre para ms de una regin repetida en una plantilla.)
Nota: no utilice caracteres especiales al asignar un nombre a una regin.
La regin repetida se insertar en la plantilla.
Nota: una regin repetida no es editable en el documento basado en plantilla a menos que
contenga una regin editable. Para informacin sobre cmo insertar una regin editable, vase
Insercin de una regin editable en la pgina 239.
Insercin de una tabla repetida
Puede utilizar una tabla repetida para crear una regin editable (en formato de tabla) con filas
repetidas. Puede definir atributos de tabla y establecer qu celdas de la tabla son editables.
Para insertar una tabla de repeticin:
1 En la ventana de documento, site el punto de insercin en el documento donde desea insertar
la tabla de repeticin.
Seleccione Insertar > Objetos de plantilla > Tabla repetida.
seleccione Tabla repetida.
Se mostrar el cuadro de dilogo Insertar tabla repetida.
3 Introduzca los nuevos valores que desee.
La tabla repetida aparece en la plantilla.
Utilizacin de regiones opcionales 243
Configuracin de colores de fondo alternativos en una tabla repetida
Despus de insertar una tabla repetida en una plantilla (vase Insercin de una tabla repetida en
la pgina 242), puede personalizarla alternando el color de fondo de las filas de la tabla.
Para definir colores de fondo alternativos para filas de una tabla:
1 En la ventana de documento, seleccione una fila en la tabla repetida.
2 Haga clic en el botn Mostrar vista de cdigo o el botn Mostrar vistas de cdigo y diseo de
la barra de herramientas Documento para acceder al cdigo de la fila de la tabla seleccionada.
3 En la vista Cdigo, edite la etiqueta <tr> para incluir el cdigo siguiente:
<tr bgcolor="@@(_index & 1) ? '#FFFFFF' : '#CCCCCC' @@">
Puede sustituir los valores hexadecimales #FFFFFF y #CCCCCC por otras opciones de color.
4 Guarde la plantilla.
A continuacin se muestra un ejemplo de cdigo de tabla que incluye colores de fondo
alternativos para las filas de una tabla:
<tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>

<tr bgcolor="@@(_index & 1) ? '#FFFFFF' : '#CCCCCC' @@">
<td>  name 
</td>
<td>  phone  email 
</table>
Utilizacin de regiones opcionales
Una regin opcional es una regin de una plantilla que los usuarios pueden definir como visible u
oculta en un documento basado en plantilla. Utilice una regin opcional cuando desee establecer
condiciones para mostrar contenido en un documento.
Cuando se inserta una regin opcional, puede definir valores especficos para un parmetro de
plantilla o definir declaraciones condicionales en una plantilla; posteriormente se puede modificar
la regin opcional si es necesario. Segn las condiciones que defina, los usuarios de la plantilla
podrn editar los parmetros en los documentos basados en la plantilla que creen o controlar si se
muestra la regin opcional (vase Modificacin de propiedades de plantilla en la pgina 255).
Temas relacionados
Insercin de una regin opcional
Utilice una regin opcional para controlar contenido que puede mostrarse o no en un documento
basado en plantilla. Hay dos objetos de regin opcional:
Una regin opcional permite a los usuarios de las plantillas mostrar y ocultar regiones marcadas
de forma especial sin permitirles editar el contenido.
La ficha de plantilla de una regin opcional va precedida de la palabra if. Segn la condicin
establecida en la plantilla, el usuario de la plantilla puede definir si la regin se puede ver en las
pginas que cree.
Una regin opcional editable permite a los usuarios de las plantillas definir si la regin se
muestra o se oculta, as como editar el contenido de la regin.
Por ejemplo, si la regin opcional incluye una imagen o texto, el usuario de la plantilla podr
establecer si el contenido se muestra, as como editarlo si lo desea. Una regin opcional se
controla mediante una declaracin condicional.
Nota: para definir si las regiones opcionales se muestran o se ocultan en un documento basado en
una plantilla, vase Modificacin de propiedades de plantilla en la pgina 255.
Para insertar una regin opcional:
1 En la ventana de documento, seleccione el elemento que desea definir como regin opcional.
Elija Insertar > Objetos de plantilla > Regin opcional.
Control y haga clic (Macintosh) en el contenido seleccionado y, a continuacin, seleccione
Plantillas > Nueva regin opcional.
seleccione Regin opcional.
Aparecer el cuadro de dilogo Regin opcional.
3 Especifique opciones para la regin opcional.
Para informacin sobre cmo definir una regin opcional, haga clic en el botn Ayuda del
cuadro de dilogo.
Para insertar una regin opcional editable:
1 En la ventana de documento, coloque el punto de insercin en el lugar en el que desea insertar
la regin opcional.
Sugerencia: no es posible realizar una seleccin para crear una regin opcional editable. Inserte la
regin y, a continuacin, inserte el contenido en la regin.
2 Siga uno de estos procedimientos para abrir el cuadro de dilogo Regin opcional:
Elija Insertar > Objetos de plantilla > Regin opcional editable.
seleccione Regin opcional editable.
3 Introduzca un nombre para la regin opcional y haga clic en la ficha Avanzado si desea definir
otras opciones.
Definicin de atributos de etiqueta editables 245
Para informacin sobre cmo definir una regin opcional, haga clic en el botn Ayuda del
cuadro de dilogo.
Modificacin de una regin opcional
Cuando inserte la regin opcional en una plantilla podr definir su configuracin. Por ejemplo,
podr cambiar si el contenido se muestra u oculta de forma predeterminada, vincular un
parmetro a una regin opcional existente o modificar una expresin de plantilla.
Nota: para definir si las regiones opcionales se muestran o se ocultan en un documento basado en
una plantilla, vase Modificacin de propiedades de plantilla en la pgina 255.
Para volver a abrir el cuadro de dilogo Regin opcional:
En la vista Diseo, haga clic en la ficha de plantilla de la regin opcional que desea
modificar.
En la vista Diseo, coloque el punto de insercin en la regin de plantilla; a continuacin,
en el selector de etiquetas existente en la parte inferior de la ventana de documento,
seleccione la etiqueta de plantilla, <mmtemplate:if>.
En la vista Cdigo, haga clic en la etiqueta de comentario de la regin de plantilla que desea
modificar.
2 En el inspector de propiedades (Ventana > Propiedades), haga clic en Editar.
Para informacin sobre una opcin del cuadro de dilogo, haga clic en el botn Ayuda del
cuadro de dilogo.
Definicin de atributos de etiqueta editables
Puede permitir que un usuario de plantilla modifique determinados atributos de etiqueta en un
documento creado a partir de una plantilla.
Por ejemplo, puede definir un color de fondo en el documento de plantilla y, sin embargo,
permitir que los usuarios de la plantilla definan colores de fondo distintos para las pginas que
ellos creen. Los usuarios solamente pueden actualizar los atributos que especifique como editables.
Nota: para modificar los atributos de etiqueta editables en los documentos basados en plantillas,
vase Modificacin de propiedades de plantilla en la pgina 255.
Temas relacionados
Especificacin de atributos de etiqueta editables en una plantilla
Puede definir distintos atributos editables en una pgina para que los usuarios de la plantilla
puedan modificar los atributos en los documentos basados en la plantilla. Se admiten los
siguientes tipos de datos: texto, booleano (true/false), color y URL.
Para definir un atributo de etiqueta editable:
1 En la ventana de documento, seleccione un elemento para el que desee definir un atributo de
etiqueta editable.
2 Elija Modificar > Plantillas > Hacer editable el atributo.
Se abre el cuadro de dilogo Atributos de etiqueta editables.
3 Complete el cuadro de dilogo de cada atributo que desea convertir en editable.
Para informacin sobre cmo completar el cuadro de dilogo, haga clic en el botn Ayuda del
cuadro de dilogo.
Al crear un atributo de etiqueta editable se inserta una parmetro de plantilla en el cdigo. Se
establece un valor inicial para el atributo en el documento de plantilla. Cuando se crea el
documento basado en la plantilla, hereda el parmetro. Entonces un usuario de la plantilla
podr editar el parmetro en el documento basado en la plantilla (vase Modificacin de
propiedades de plantilla en la pgina 255).
Conversin de un atributo de etiqueta editable en no editable
Una etiqueta marcada anteriormente como editable se puede marcar como no editable.
Para restablecer el atributo de etiqueta editable:
1 En el documento de plantilla, haga clic en elemento asociado con el atributo editable o utilice
el selector de etiqueta para seleccionar la etiqueta.
2 Elija Modificar > Plantillas > Hacer editable el atributo.
Se abre el cuadro de dilogo Atributos de etiqueta editables.
3 En el men emergente Atributos, seleccione el atributo que desea modificar.
4 Desactive la casilla de verificacin Hacer editable el atributo.
6 Actualice los documentos basados en la plantilla.
Temas relacionados
Especificacin de atributos de etiqueta editables en una plantilla en la pgina 245
Creacin de una plantilla anidada
Las plantillas anidadas permiten crear variaciones de una plantilla base. Puede crear una plantilla
anidada guardando un documento basado en plantilla y, a continuacin, guardando ese
documento como una plantilla nueva. Puede anidar mltiples plantillas para definir un diseo
cada vez ms especfico. Para ms informacin, consulte Plantillas anidadas en la pgina 228.
De forma predeterminada, todas las regiones de plantilla editables de la plantilla base se
transfieren desde la plantilla anidada hasta el documento basado en sta. Esto supone que si usted
crea una regin editable en una plantilla base y, a continuacin, crea una plantilla anidada, la
regin editable aparecer en los documentos basados en la plantilla anidada (si no insert regiones
de plantilla nuevas en esa regin de la plantilla anidada).
Creacin de una plantilla anidada 247
En las plantillas anidadas, el borde de las regiones editables de paso es azul. Puede insertar el
formato de plantilla en una regin editable para que no se transfiera como regin editable en los
documentos basados en la plantilla anidada. Estas regiones tienen un borde de color naranja en
lugar de azul.
Para crear una plantilla anidada:
1 Cree un documento a partir de la plantilla en la que desea que se base la plantilla anidada:
En la categora Plantillas del panel Activos, haga clic con el botn derecho del ratn
(Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en la plantilla a
partir de la que desea crear un documento nuevo y seleccione Nuevo desde plantilla en el
men contextual.
Seleccione Archivo > Nuevo. En el cuadro de dilogo Nuevo documento, haga clic en la
ficha Plantillas y seleccione el sitio que contiene la plantilla que desea utilizar; en la lista de
documentos, haga doble clic en la plantilla para crear un documento.
Un documento nuevo aparecer en la ventana de documento.
2 Siga uno de estos procedimientos para guardar el documento nuevo como plantilla anidada:
Seleccione Archivo > Guardar como plantilla.
En la categora Comn de la barra Insertar, haga clic en la flecha del botn Plantillas y, a
continuacin, seleccione Crear plantilla anidada.
Se abre el cuadro de dilogo Guardar como plantilla.
3 Escriba un nombre en el cuadro de texto Guardar como y, a continuacin, haga clic en Aceptar.
En los documentos basados en la plantilla anidada puede aadir o cambiar el contenido de las
regiones editables transferidas desde la plantilla base, adems del de las regiones editables creadas
en la nueva plantilla.
Para evitar que una regin editable se transfiera a una regin anidada:
1 En la vista Cdigo, localice la regin editable que desea evitar que se transfiera.
Las regiones editables estn definidas mediante etiquetas de comentario de plantilla.
2 Ajuste la regin editable (incluidas las etiquetas de comentario) con los marcadores siguientes:
@@" "@@
Edicin y actualizacin de plantillas
Al realizar cambios en una plantilla y guardarlos, Dreamweaver actualiza automticamente todos
los documentos adjuntos a la plantilla. Tambin puede actualizar manualmente los documentos
basados en una plantilla, si es necesario.
Nota: para editar una plantilla de un sitio de Contribute, debe utilizar Dreamweaver; no se pueden
editar plantillas en Contribute.
Dreamweaver comprueba automticamente la sintaxis cuando guarda la plantilla. Si lo desea,
tambin puede comprobar la sintaxis de la plantilla al editarla.
Nota: para informacin sobre la edicin de los documentos basados en plantillas, vase Edicin de
contenido de un documento basado en plantilla en la pgina 254.
Apertura de una plantilla para editarla
Puede abrir un archivo de plantilla directamente para editarla, o bien puede abrir un documento
basado en la plantilla y, a continuacin, abrir la plantilla adjunta para editarla.
Al realizar un cambio en una plantilla, Dreamweaver le pedir que actualice los documentos
basados en esa plantilla.
Nota: tambin puede actualizar manualmente los documentos con los cambios en la plantilla si es
necesario (vase Actualizacin manual de documentos basados en plantillas en la pgina 249).
Para abrir y editar un archivo de plantilla:
En el panel Activos se enumeran todas las plantillas disponibles para el sitio y se muestra una
vista previa de la plantilla seleccionada.
2 En la lista de plantillas disponibles, siga uno de estos procedimientos:
Haga doble clic en el nombre de la plantilla que desea editar.
Seleccione una plantilla para editarla y haga clic en el botn Editar de la parte inferior del
panel Activos.
La plantilla se abrir en la ventana de documento.
3 Modifique el contenido de la plantilla que desee.
Sugerencia: para modificar las propiedades de pgina de la plantilla, seleccione Modificar >
Propiedades de la pgina. (Los documentos basados en una plantilla heredan las propiedades de
pgina de la plantilla.)
Dreamweaver le pedir que actualice las pginas basadas en la plantilla.
5 Haga clic en Actualizar para actualizar todos los documentos basados en la plantilla modificada;
haga clic en No actualizar si no desea actualizarlos.
Dreamweaver muestra un registro en el que se indican los archivos que se han actualizado.
Para abrir y modificar la plantilla adjunta al documento actual:
1 Abra el documento basado en la plantilla en la ventana de documento.
Seleccione Modificar > Plantillas > Abrir plantilla adjunta.
Edicin y actualizacin de plantillas 249
clic (Macintosh) y seleccione Plantillas > Abrir plantilla adjunta.
3 Modifique el contenido de la plantilla que desee.
Sugerencia: para modificar las propiedades de pgina de la plantilla, seleccione Modificar >
Propiedades de la pgina. (Los documentos basados en una plantilla heredan las propiedades de
pgina de la plantilla.)
Dreamweaver le pedir que actualice las pginas basadas en la plantilla.
5 Haga clic en Actualizar para actualizar todos los documentos basados en la plantilla modificada;
haga clic en No actualizar si no desea actualizarlos.
Dreamweaver muestra un registro en el que se indican los archivos que se han actualizado.
Temas relacionados
Actualizacin de plantillas en un sitio de Contribute en la pgina 250
Comprobacin de la sintaxis de la plantilla en la pgina 250
Actualizacin manual de documentos basados en plantillas
Cuando realiza un cambio en una plantilla, Dreamweaver le solicita que actualice los documentos
basados en la plantilla, pero puede actualizar manualmente el documento actual o el sitio entero si
es necesario. Actualizar manualmente los documentos basados en plantilla es lo mismo que volver
a aplicar la plantilla.
Para aplicar al documento los cambios realizados en el documento basado en la plantilla
actual:
1 Abra el documento en la ventana de documento.
2 Seleccione Modificar > Plantillas > Actualizar pgina actual.
Dreamweaver actualiza el documento con todos los cambios de la plantilla.
Para actualizar el sitio completo o todos los documentos que utilicen una plantilla
determinada:
1 Seleccione Modificar > Plantillas > Actualizar pginas.
Aparecer el cuadro de dilogo Actualizar pginas.
2 Complete el cuadro de dilogo y, a continuacin, haga clic en Iniciar.
Dreamweaver actualizar los archivos como se ha indicado. Si selecciona la opcin Mostrar
registro, Dreamweaver proporcionar informacin sobre los archivos que intenta actualizar,
indicando si se han actualizado satisfactoriamente.
3 Haga clic en Cerrar para cerrar el cuadro de dilogo.
Temas relacionados
Apertura de una plantilla para editarla en la pgina 248
Comprobacin de la sintaxis de la plantilla en la pgina 250
Actualizacin de plantillas en un sitio de Contribute
Los usuarios de Contribute no pueden realizar cambios en una plantilla de Dreamweaver. Sin
embargo, puede utilizar Dreamweaver para cambiar una plantilla para un sitio de Contribute.
A continuacin se enumeran factores importantes que debe tener en cuenta a la hora de actualizar
plantillas en un sitio de Contribute:
Contribute recupera las plantillas nuevas y modificadas del sitio slo cuando se inicia
Contribute y cuando un usuario de Contribute cambia su informacin de conexin. Si realiza
cambios en una plantilla mientras un usuario de Contribute est editando un archivo basado
en dicha plantilla, el usuario no ver los cambios realizados en la plantilla hasta que reinicie
Contribute.
Si quita una regin editable de una plantilla, un usuario de Contribute que est editando una
pgina basada en dicha plantilla podra dudar sobre qu hacer con el contenido que se
encontraba en dicha regin editable.
Para editar una plantilla en un sitio de Contribute:
1 Edite la plantilla con Dreamweaver.
Para ms informacin, consulte Apertura de una plantilla para editarla en la pgina 248.
2 Solicite a todos los usuarios de Contribute que estn trabajando en el sitio que salgan de
Contribute y vuelvan a iniciarlo.
Comprobacin de la sintaxis de la plantilla
Dreamweaver comprueba automticamente la sintaxis de las plantillas al guardarlas, pero tambin
puede comprobarla manualmente antes de guardar las plantillas. Por ejemplo, si aade un
parmetro o una expresin de plantilla en la vista Cdigo, puede comprobar si el cdigo tiene la
sintaxis correcta.
Para verificar la sintaxis de la plantilla:
1 Abra el documento que desea comprobar en la ventana de documento.
2 Elija Modificar > Plantillas > Comprobar sintaxis de plantilla.
Si la sintaxis es incorrecta, aparece un mensaje de error. El mensaje describe el error e indica la
lnea de cdigo donde se encuentra.
Temas relacionados
Sintaxis de las etiquetas de plantilla en la pgina 226
Expresiones de plantilla en la pgina 231
Administracin de plantillas 251
Administracin de plantillas
Utilice la categora Plantillas del panel Activos para administrar las plantillas existentes, incluido el
cambio de nombre y la eliminacin de los archivos de plantilla.
Nota: tambin puede utilizar el panel Activos para aplicar una plantilla a un documento (vase
Edicin y actualizacin de plantillas en la pgina 248) o editar una plantilla (vase Apertura de una
plantilla para editarla en la pgina 248).
Para cambiar el nombre de una plantilla en el panel Activos:
2 Haga clic en el nombre de la plantilla para seleccionarla.
3 Vuelva a hacer clic en el nombre para que el texto sea seleccionable y, a continuacin, introduzca
un nombre nuevo.
Este mtodo para cambiar el nombre funciona igual que en el Explorador de Windows
(Windows) o el Finder (Macintosh). Al igual que en el Explorador de Windows y el Finder, no
olvide hacer una breve pausa entre los dos clics del ratn. No haga doble clic en el nombre, ya
que se abrira la plantilla para su edicin.
4 Haga clic en otra rea del panel Activos o presione la tecla Intro (Windows) o Retorno
(Macintosh) para que el cambio surta efecto.
Dreamweaver le preguntar si desea actualizar los documentos basados en esa plantilla.
5 Para actualizar todos los documentos del sitio basados en esa plantilla, haga clic en Actualizar.
Para que no se actualice ninguno de los documentos basados en la plantilla, haga clic en No
actualizar.
Para eliminar un archivo de plantilla:
2 Haga clic en el nombre de la plantilla para seleccionarla.
3 Haga clic en el botn Eliminar situado en la parte inferior del panel y confirme que desea
eliminar la plantilla.
Atencin: una vez que haya eliminado un archivo de plantilla, no podr recuperarlo. El archivo de
plantilla queda eliminado del sitio.
Los documentos que se basan en una plantilla que se ha eliminado no se separan de la misma,
sino que conservan la estructura y las regiones editables que tena el archivo de plantilla antes
de ser eliminado. Para convertir este tipo de documentos en archivos HTML normales sin
regiones editables ni bloqueadas, vase Separacin de un documento de una plantilla en
la pgina 254.
Temas relacionados
Aplicacin o eliminacin de una plantilla de un documento existente en la pgina 253
Edicin y actualizacin de plantillas en la pgina 248
Exportacin e importacin de contenido XML de plantillas
Los documentos basados en plantillas pueden considerarse como documentos que contienen
datos representados por pares de nombre y valor. Cada par consta del nombre de una regin
editable y del contenido de sta.
Dreamweaver le permite exportar los pares de nombre/valor a un archivo XML para que pueda
trabajar con los datos fuera de Dreamweaver (por ejemplo, en un editor de XML, un editor de
textos o una aplicacin de bases de datos). Y a la inversa, si tenemos un documento XML que est
estructurado adecuadamente, se pueden importar los datos que contiene a un documento basado
en una plantilla de Dreamweaver.
Para exportar las regiones editables de un documento como XML:
1 Abra un documento basado en plantilla que contenga regiones editables.
2 Elija Archivo > Exportar > Datos de plantilla como XML.
Se abre el cuadro de dilogo Exportar datos de plantilla como XML.
3 Seleccione una de las opciones de Notacin:
Si la plantilla contiene regiones repetidas o parmetros de plantilla, seleccione Etiquetas
XML estndar Dreamweaver.
Si la plantilla no contiene regiones repetidas o parmetros de plantilla, seleccione Nombres
reg. editables como etiq. XML.
Se abre un cuadro de dilogo para que guarde el archivo XML.
5 Seleccione una ubicacin de carpeta, introduzca un nombre para el archivo XML y haga clic en
Guardar.
Dreamweaver genera un archivo XML que contiene el material de los parmetros del
documento y regiones editables, incluidas las que estn dentro de regiones repetidas u
opcionales. El archivo XML incluye el nombre de la plantilla original, as como el nombre y el
contenido de cada regin de plantilla.
Nota: el contenido de las regiones no editables no se exporta al archivo XML.
Para importar contenido XML:
1 Elija Archivo > Importar > Importar XML en plantilla.
Aparecer el cuadro de dilogo Importar XML.
2 Seleccione el archivo XML y haga clic en Abrir.
Dreamweaver crea un nuevo documento basado en la plantilla especificada en el archivo XML.
Despus rellena el contenido de cada regin editable de ese documento con los datos del archivo
XML. El documento resultante aparece en una nueva ventana de documento.
Sugerencia: si el archivo XML no est configurado exactamente de la forma adecuada para
Dreamweaver, es posible que no se puedan importar los datos. Una posible solucin a este problema
consiste en exportar un archivo XML ficticio desde Dreamweaver, para tener as un archivo XML
exactamente con la estructura correcta. Luego, bastar con copiar los datos desde el archivo original
XML al archivo exportado XML. El resultado es un archivo XML con la estructura correcta que
contiene los datos adecuados, listo para importar.
Aplicacin o eliminacin de una plantilla de un documento existente 253
Exportacin de un sitio sin formato de plantilla
Si no desea incluir el formato de plantilla en los documentos basados en plantilla que exporta a
otro sitio, utilice el comando Exportar sitio sin formato de plantilla.
Para exportar un sitio sin formato de plantilla:
1 Elija Modificar > Plantillas > Exportar sin formato.
Aparecer el cuadro de dilogo Exportar sitio sin formato de plantilla.
2 Seleccione la carpeta a la que se exportar el sitio y, a continuacin, seleccione las opciones de
exportacin adicionales que desee.
Nota: debe seleccionar una carpeta que no se encuentre en el sitio actual.
Aplicacin o eliminacin de una plantilla de un documento existente
Al aplicar una plantilla a un documento existente, Dreamweaver establece las coincidencias entre
el contenido y las regiones de la plantilla o solicita que solucione las discrepancias. Ms adelante,
puede eliminar la plantilla, en caso de que sea necesario efectuar cambios en las regiones
bloqueadas.
Aplicacin de una plantilla a un documento existente
Cuando se aplica una plantilla a un documento con contenido, Dreamweaver intenta ajustar el
contenido existente a una regin de la plantilla. Si se aplica una versin revisada de una de las
plantillas existentes, es posible que los nombres coincidan.
Si aplica una plantilla a un documento al que todava no se ha aplicado ninguna plantilla, no
habr regiones editables para comparar y se producir una discrepancia. Dreamweaver hace un
seguimiento de estas discordancias de forma que pueda seleccionar a qu regiones desea desplazar
el contenido de la pgina actual o bien puede eliminar el contenido discrepante.
Puede aplicar una plantilla a un documento existente mediante el panel Activos o desde la ventana
de documento. Puede deshacer la aplicacin de una plantilla si es necesario.
Para aplicar una plantilla a un documento existente mediante el panel Activos:
1 Abra el documento en el que desea aplicar la plantilla.
Arrastre la plantilla que desea aplicar desde el panel Activos a la ventana de documento.
Seleccione la plantilla que desea aplicar y haga clic en el botn Aplicar del panel Activos.
Si hay contenido en el documento que no se puede asignar automticamente a una regin de
plantilla, aparecer el cuadro de dilogo Nombres de regiones no coincidentes.
4 Si tiene contenido no resuelto, seleccione el destino del contenido y haga clic en Aceptar.
Para informacin sobre cmo mover contenido existente a regiones editables del documento,
vase Resolucin de nombres de regiones no coincidentes en el apartado Utilizacin de
Dreamweaver de la Ayuda.
Para aplicar una plantilla a un documento existente desde la ventana de documento:
1 Abra el documento en el que desea aplicar la plantilla.
2 Seleccione Modificar > Plantillas > Aplicar plantilla a pgina.
Aparecer el cuadro de dilogo Seleccionar plantilla.
3 Elija una plantilla de la lista y haga clic en Seleccionar.
Si hay contenido en el documento que no se puede asignar automticamente a una regin de
plantilla, aparecer el cuadro de dilogo Nombres de regiones no coincidentes.
4 Si tiene contenido no resuelto, seleccione el destino del contenido y haga clic en Aceptar.
Para informacin sobre cmo mover contenido existente a regiones editables del documento,
vase Resolucin de nombres de regiones no coincidentes en el apartado Utilizacin de
Dreamweaver de la Ayuda.
Para deshacer los cambios realizados en la plantilla:
Seleccione Edicin > Deshacer aplicar plantilla.
El documento vuelve al estado previo a que se aplicara la plantilla.
Separacin de un documento de una plantilla
Para realizar cambios en las regiones bloqueadas de un documento basado en plantilla, deber
separar el documento de la plantilla. Al separarlo, todo el documento ser editable.
Para separar un documento de una plantilla:
1 Abra el documento basado en plantilla que desea separar.
2 Seleccione Modificar > Plantillas > Separar de plantilla.
El documento se separar de la plantilla y se eliminar todo el cdigo de plantilla.
Temas relacionados
Aplicacin de una plantilla a un documento existente en la pgina 253
Edicin de contenido de un documento basado en plantilla
Las plantillas de Dreamweaver especifican regiones que estn bloqueadas (no son editables) y
regiones que s son editables para los documentos basados en plantillas (vase Plantillas de
Dreamweaver en la pgina 222).
En las pginas basadas en plantillas (vase Creacin de un documento basado en una plantilla
existente en la pgina 75), los usuarios de las plantillas pueden editar el contenido de las regiones
editables nicamente. Puede identificar y seleccionar fcilmente las regiones editables para editar
su contenido (vase Seleccin de regiones editables en la pgina 240). Los usuarios de las
plantillas no pueden editar el contenido de las regiones bloqueadas.
Nota: si se intenta editar una regin bloqueada en un documento basado en una plantilla cuando se
desactiva el resaltado, el puntero del ratn cambiar para indicar que no se puede hacer clic en una
regin bloqueada.
Los usuarios de las plantillas tambin pueden modificar las propiedades y editar las entradas de
una regin repetida en los documentos basados en plantillas.
Edicin de contenido de un documento basado en plantilla 255
Modificacin de propiedades de plantilla
Cuando los autores de plantillas crean parmetros en una plantilla (vase Parmetros de plantilla
en la pgina 231), los documentos basados en la plantilla heredan automticamente los
parmetros y sus valores iniciales. El usuario de una plantilla puede actualizar atributos de etiqueta
editables y otros parmetros de plantilla (como la configuracin de una regin opcional).
Para modificar un atributo de etiqueta editable:
1 Abra el documento basado en la plantilla.
2 Seleccione Modificar > Propiedades de plantilla.
Se abre el cuadro de dilogo Propiedades de plantilla, que muestra una lista de las propiedades
disponibles. El cuadro de dilogo muestra las regiones opcionales y los atributos de etiqueta
editables.
3 En la lista Nombre, seleccione la propiedad.
El rea inferior del cuadro de dilogo se actualizar para mostrar la etiqueta de la propiedad
seleccionada y su valor asignado.
4 En el campo situado a la derecha de la etiqueta de propiedad, edite el valor para modificar la
propiedad en el documento.
Nota: en la plantilla se definen el nombre del campo y los valores actualizables. Los atributos que
no aparecen en la lista Nombre no son actualizables en el documento basado en la plantilla.
5 Active la casilla de verificacin Permitir que las plantillas anidadas controlen esto si desea
transferir la propiedad editable a documentos basados en la plantilla anidada.
Para modificar los parmetros de plantilla de una regin opcional:
1 Abra el documento basado en la plantilla.
2 Seleccione Modificar > Propiedades de plantilla.
Se abre el cuadro de dilogo Propiedades de plantilla, que muestra una lista de las propiedades
disponibles. El cuadro de dilogo muestra las regiones opcionales y los atributos de etiqueta
editables.
3 En la lista Nombre, seleccione una propiedad.
El cuadro de dilogo se actualizar para mostrar la etiqueta de la propiedad seleccionada y su
valor asignado.
4 Active la casilla de verificacin Mostrar para hacer visible la regin opcional del documento o
desactvela para ocultarla.
Nota: en la plantilla se definen el nombre del campo y los valores predeterminados.
5 Active la casilla de verificacin Permitir que las plantillas anidadas controlen esto si desea
transferir la propiedad editable a documentos basados en la plantilla anidada.
Temas relacionados
Adicin, eliminacin y cambio del orden de una entrada de regin repetida
Utilice los controles de regin repetida para aadir, eliminar o cambiar el orden de las entradas en
los documentos basados en una plantilla. Cuando aade una entrada de regin repetida, se aade
una copia de toda la regin repetida. Para actualizar el contenido de las regiones repetidas, la
plantilla original deber incluir una regin editable en la regin repetida.
Para aadir, eliminar o cambiar el orden de una regin repetida:
1 Site el punto de insercin en la regin repetida para seleccionarla.
Haga clic en el botn de signo ms (+) para aadir una entrada de regin repetida debajo de
la entrada seleccionada actualmente.
Haga clic en el botn de signo menos (-) para eliminar la entrada de regin repetida
seleccionada.
Haga clic en el botn Flecha abajo para bajar una posicin la entrada seleccionada.
Haga clic en el botn Flecha arriba para subir una posicin la entrada seleccionada.
Nota: tambin puede seleccionar Modificar > Plantilla y, a continuacin, seleccionar una de las
opciones de entrada repetida cerca de la parte inferior del men contextual. Puede utilizar este
men para insertar una nueva entrada de repeticin o mover la posicin de la entrada de
repeticin.
Para cortar, copiar y eliminar entradas:
1 Site el punto de insercin en la regin repetida para seleccionarla.
Para cortar una entrada repetida, seleccione Edicin > Entradas repetidas > Cortar entradas
de repeticin.
Para copiar una entrada repetida, seleccione Edicin > Entradas repetidas > Copiar entradas
de repeticin.
Para eliminar una entrada repetida, seleccione Edicin > Entradas repetidas > Eliminar
entradas de repeticin.
Para pegar una entrada repetida, seleccione Edicin > Pegar.
Nota: al pegar se insertar una nueva entrada, no se sustituir una existente.
Temas relacionados
PARTE IV
Adicin de contenido a las pginas
Utilice las herramientas visuales de Macromedia Dreamweaver MX 2004 para aadir toda una
gama de contenidos a las pginas Web. Aada y aplique formato a elementos como texto,
imgenes, colores, pelculas, sonido y otros elementos multimedia. Asegrese de que las personas
con discapacidades puedan acceder a las pginas.
Captulo 12, Utilizacin de pginas, en la pgina 259
Captulo 13, Insercin y formato de texto, en la pgina 281
Captulo 14, Insercin de imgenes, en la pgina 311
Captulo 15, Establecimiento de vnculos y navegacin, en la pgina 325
Captulo 16, Utilizacin con otras aplicaciones, en la pgina 351
Captulo 17, Adicin de audio, vdeo y elementos interactivos, en la pgina 365
Captulo 18, Utilizacin de comportamientos JavaScript, en la pgina 381
P
A
R
T
E

I
V
259
CAPTULO 12
Utilizacin de pginas
Macromedia Dreamweaver MX 2004 proporciona muchas funciones para ayudarle a crear nuevas
pginas Web. Estas funciones de creacin de pginas le facilitarn la definicin de las propiedades
de las pginas Web, como por ejemplo los ttulos de pginas, las imgenes y los colores de fondo,
as como los colores del texto y los vnculos. Adems, Dreamweaver MX 2004 proporciona
herramientas para ayudarle a sacar el mximo rendimiento del sitio Web, as como crear y probar
pginas para garantizar la compatibilidad con diferentes navegadores Web.
Utilizacin de pginas en la pgina 260
Almacenamiento de pginas Web en la pgina 263
Especificacin de HTML en lugar de CSS en la pgina 264
Configuracin de propiedades de la pgina en la pgina 265
Utilizacin de colores en la pgina 267
Seleccin de elementos en la ventana de documento en la pgina 268
Utilizacin del panel Historial en la pgina 270
Automatizacin de tareas en la pgina 271
Utilizacin de comportamientos de JavaScript para detectar navegadores y plug-ins en
la pgina 276
Vista previa y comprobacin de pginas en los navegadores en la pgina 277
Configuracin de las preferencias de tiempo de descarga y tamao en la pgina 279
260 Captulo 12: Utilizacin de pginas
Utilizacin de pginas
Al crear una pgina Web, debe tener en cuenta los sistemas operativos y navegadores que los
usuarios utilizarn para ver la pgina Web y las especificaciones de idiomas con las que deber ser
compatible. Las secciones siguientes le ayudarn a entender cmo debe seleccionar colores para
que se muestren correctamente en navegadores Web diferentes, la codificacin de caracteres
diferentes (formatos de letra) para idiomas diferentes y cmo comprobar que un navegador Web
es compatible con el sitio Web.
Configuracin de propiedades de la pgina
Para cada pgina que cree en Dreamweaver, puede especificar las propiedades de diseo y formato
mediante el cuadro de dilogo Propiedades de la pgina (Modificar > Propiedades de la pgina).
El cuadro de dilogo Propiedades de la pgina permite especificar la familia y el tamao de fuente
predeterminados, el color de fondo, los mrgenes, los estilos de los vnculos y otros muchos
aspectos relacionados con el diseo de pginas. Puede asignar nuevas propiedades de pgina a cada
pgina que cree, as como modificar las propiedades de las pginas existentes.
De forma predeterminada, Dreamweaver aplica formato al texto mediante CSS (Hojas de estilos en
cascada, Cascading Style Sheets). Puede cambiar las preferencias de formato de pgina a formato
HTML con el cuadro de dilogo Preferencias (Edicin > Preferencias). Cuando utiliza las
propiedades de pgina de CSS, Dreamweaver emplea etiquetas CSS para todas las propiedades
definidas en las categoras Aspecto, Vnculos y Encabezados del cuadro de dilogo Propiedades de la
pgina. Las etiquetas CSS que definen estos atributos estn incluidas en la seccin head de la pgina.
Nota: las propiedades de pgina que elija slo se aplican al documento actual. Si una pgina utiliza
una hoja de estilos CSS externa, Dreamweaver no sobrescribir las etiquetas definidas en la hoja de
estilos, ya que esto afecta al resto de las pginas que utilizan dicha hoja de estilos.
Utilizacin de pginas 261
Propiedades de pgina CSS frente a propiedades de pgina HTML
De forma predeterminada, Dreamweaver utiliza CSS para asignar propiedades de pgina. Si en su
lugar desea utilizar etiquetas HTML, debe especificarlo en el cuadro de dilogo Preferencias (para
ms informacin, vase Especificacin de HTML en lugar de CSS en la pgina 264).
Si decide utilizar HTML en lugar de CSS, el inspector de propiedades seguir mostrando el men
emergente Estilo. Sin embargo, los controles de fuente, tamao, color y alineacin slo mostrarn
las propiedades definidas mediante las etiquetas HTML. Los valores de las propiedades CSS
aplicadas a la seleccin actual dejarn de ser visibles y el men emergente Tamao quedar
desactivado.
Temas relacionados
Especificacin de HTML en lugar de CSS en la pgina 264
Panel Historial
El panel Historial muestra una lista de todos los pasos realizados en el documento activo desde
que ste se cre o se abri, hasta un determinado nmero de pasos. (El panel Historial no muestra
los pasos dados en otros marcos, en otras ventanas de documento o en el panel Sitio.) Permite
deshacer uno o varios pasos, as como repetir pasos y crear nuevos comandos para automatizar
tareas repetitivas.
El control deslizante, o el pulgar, del panel Historial seala inicialmente el ltimo paso realizado.
Temas relacionados
Utilizacin del panel Historial en la pgina 270
Colores seguros para la Web
En HTML, los colores se expresan en forma de valores hexadecimales (por ejemplo, #FF0000) o
con nombres (red). Un color seguro para la Web es aqul que se muestra de la misma forma en
Netscape Navigator y en Microsoft Internet Explorer, tanto en Windows como en Macintosh,
con un modo de 256 colores. Suele decirse que existen 216 colores comunes y que cualquier valor
hexadecimal que combine los pares 00, 33, 66, 99, CC o FF (valores RGB 0, 51, 102, 153, 204 y
255, respectivamente) representa a un color seguro para la Web.
Al realizar pruebas, sin embargo, se descubre que hay slo 212 colores seguros para la Web, y no
216, ya que Internet Explorer en Windows no muestra correctamente los colores #0033FF
(0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) y #33FF00 (51,255,0).
Botn Reproducir
Botn Copiar pasos
Botn Guardar como comando
Control deslizante
Pasos
Cuando aparecieron los primeros navegadores Web, la mayor parte de los equipos mostraban
nicamente 265 colores (8 bits). Actualmente, la mayora de los equipos muestran miles o
millones de colores (16 y 32 bits), por lo que queda mucho menos justificado el uso de la paleta
de colores vlidos para los navegadores si desarrolla el sitio para usuarios que disponen de equipos
actualizados.
Un motivo para utilizar la paleta de colores aptos para la Web es el desarrollo orientado a los
dispositivos Web alternativos, como los PDA y las pantallas de los telfonos mviles. Muchos de
estos dispositivos ofrecen pantallas en blanco y negro (1 bit) o de 256 colores (8 bits) solamente.
Las paletas Cubos de color (predeterminado) y Tono continuo en Dreamweaver utilizan la paleta
de 216 colores seguros para la Web; al seleccionar un color de estas paletas, se muestra el valor
hexadecimal del color.
Para seleccionar un color situado fuera de la gama segura para la Web, abra los colores del sistema
haciendo clic en el botn Rueda de color situado en la esquina superior derecha del selector de
color de Dreamweaver. Los colores del sistema no se limitan a los colores seguros para la Web.
Las versiones de Netscape Navigator para UNIX usan una paleta de colores distinta a la de las
versiones para Windows y Macintosh. Si est desarrollando el sitio Web para navegadores UNIX
exclusivamente (o si los destinatarios sern usuarios de Windows o Macintosh con monitores de
24 bits y usuarios de UNIX con monitores de 8 bits), es recomendable utilizar valores
hexadecimales que combinen los pares 00, 40, 80, BF o FF para lograr colores seguros para la
Web en SunOS.
Temas relacionados
Utilizacin de colores en la pgina 267
Aspectos bsicos de la codificacin del documento
La codificacin del documento especifica la codificacin empleada para los caracteres del
documento. La codificacin del documento se almacena en una etiqueta meta en el rea de
encabezado del documento. Indica al navegador y a Dreamweaver cmo se debe descodificar el
documento y qu fuentes se deben utilizar para mostrar el texto descodificado.
Por ejemplo, si especifica Occidental Europeo (Latin1), se insertar esta etiqueta meta: <meta
http-equiv="Content-Type" content="text/html; charset=iso-8859-1">. Dreamweaver
mostrar el documento utilizando las fuentes que haya especificado en las preferencias de fuentes
para la codificacin Occidental Europeo (Latin1). Los navegadores mostrarn el documento
utilizando las fuentes que los usuarios de estos programas hayan especificado para la codificacin
Occidental Europeo (Latin1).
Si especifica Japons (Shift JIS), se insertar esta etiqueta meta: <meta http-equiv="Content-
Type" content="text/html; charset=Shift_JIS">. Dreamweaver mostrar el documento
utilizando las fuentes que haya especificado para la codificacin japonesa. Los navegadores
mostrarn el documento utilizando las fuentes que los usuarios de estos programas hayan
especificado para la codificacin japonesa.
Para cambiar la codificacin del documento de una pgina, vase Configuracin de propiedades
de la pgina en la pgina 265. Para cambiar la codificacin predeterminada que Dreamweaver
utiliza para crear documentos nuevos, vase Configuracin de un tipo de documento nuevo
predeterminado en la pgina 76. Para cambiar las fuentes que Dreamweaver utiliza para mostrar
cada una de las codificaciones, vase Configuracin de las preferencias de fuentes para la
visualizacin de Dreamweaver en la pgina 60.
Almacenamiento de pginas Web 263
Utilizacin de comandos guardados en contraposicin a la reproduccin de
pasos
Dreamweaver permite grabar un comando temporal para usarlo a corto plazo o tambin puede
reproducir pasos desde el panel Historial.
Cuando grabe un comando temporal:
Los pasos se graban a medida que los ejecuta, por lo que no tiene que seleccionarlos en el panel
Historial antes de reproducirlos.
Durante la grabacin, Dreamweaver impide realizar movimientos del ratn que no se pueden
grabar (como hacer clic para seleccionar algo en una ventana o arrastrar un elemento de pgina
a otra ubicacin).
Si cambia a otro documento mientras est grabando, Dreamweaver no grabar los cambios
realizados en el otro documento. Observe el puntero para determinar si en un determinado
momento se est grabando o no.
Temas relacionados
Automatizacin de tareas en la pgina 271
Repeticin de pasos en la pgina 272
Grabacin de comandos en la pgina 276
Almacenamiento de pginas Web
Puede guardar un documento utilizando su nombre y ubicacin actual o guardar una copia de un
documento con un nombre y ubicacin diferentes.
Al asignar un nombre a un archivo, evite utilizar espacios y caracteres especiales en los nombres de
archivos y carpetas. En concreto, no utilice caracteres especiales (como , o ) ni signos de
puntuacin (como dos puntos, barras inclinadas o puntos) en los nombres de archivos que desee
colocar en un servidor remoto; muchos servidores cambian estos caracteres durante la carga, lo
que provoca que se rompan los vnculos existentes con los archivos. Asimismo, no comience los
nombres de los archivos con nmeros.
Para guardar un documento:
Para sobrescribir la versin actual en el disco y guardar los cambios realizados, seleccione
Archivo > Guardar.
Para guardar el archivo en una carpeta diferente o utilizar un nombre diferente, seleccione
Archivo > Guardar como.
2 En el cuadro de dilogo Guardar como que aparece a continuacin, vaya a la carpeta en la que
desea guardar el archivo.
4 Haga clic en Guardar para guardarlo.
Para guardar todos los documentos abiertos:
1 Seleccione Archivo > Guardar todo.
2 Si tiene abiertos documentos sin guardar, se mostrar el cuadro de dilogo Guardar como para
cada uno de ellos.
En el cuadro de dilogo que aparece a continuacin, vaya hasta la carpeta en la que desea
guardar el archivo.
4 Haga clic en Guardar para guardarlo.
Para volver a la ltima versin guardada de un documento:
1 Seleccione Archivo > Descartar cambios.
Aparecer un cuadro de dilogo que le preguntar si desea descartar los cambios y volver a la
ltima versin guardada.
2 Haga clic en S para volver a la ltima versin; haga clic en No para mantener los cambios.
Nota: si desea guardar un documento y, a continuacin, salir de Dreamweaver, no podr volver a
la ltima versin de dicho documento al reiniciar Dreamweaver.
Temas relacionados
Cmo guardar un nuevo documento en la pgina 76
Especificacin de HTML en lugar de CSS
De forma predeterminada, Dreamweaver utiliza etiquetas CSS para asignar propiedades de
pgina. Si por contra desea utilizar etiquetas HTML, debe desactivar la opcin Utilizar CSS en
lugar de etiquetas HTML en la categora General del cuadro de dilogo Preferencias.
Para especificar HTML en lugar de etiquetas CSS para las propiedades de pgina:
1 Seleccione Edicin > Preferencias.
Se mostrar el cuadro de dilogo Preferencias.
2 En la categora General del cuadro de dilogo Propiedades de la pgina, desactive la casilla de
verificacin Utilizar CSS en lugar de etiquetas HTML.
La casilla de verificacin se encuentra en la categora Opciones de edicin del panel de
preferencias generales.
Temas relacionados
Configuracin de propiedades de la pgina 265
Configuracin de propiedades de la pgina
Los ttulos de pgina, las imgenes y colores de fondo, as como los colores del texto y de los
vnculos son propiedades bsicas de todos los documentos Web. Puede establecer o cambiar las
propiedades de pgina mediante el cuadro de dilogo Propiedades de la pgina.
Para establecer las propiedades del documento:
1 Seleccione Modificar > Propiedades de la pgina o haga clic en el botn Propiedades de la pgina
del inspector de propiedades de texto.
Se abrir el cuadro de dilogo Propiedades de la pgina.
2 Efecte los cambios oportunos en las propiedades de la pgina.
Temas relacionados
Configuracin de estilos de subrayado de vnculos CSS en la pgina 266
Configuracin de una imagen de fondo o un color de fondo de pgina en la pgina 266
Cambio del ttulo de un documento
El ttulo de una pgina HTML ayuda a los visitantes del sitio a realizar un seguimiento de lo que
ven mientras navegan, al tiempo que identifica la pgina en listas de historial y de marcadores. Si
no asigna ningn ttulo a una pgina, sta aparecer en la ventana del navegador y en las listas de
marcadores y de historial como Documento sin ttulo.
Nota: asignar un nombre de archivo al documento (al guardarlo) no equivale a asignar un ttulo a la
pgina.
Para encontrar todos los documentos sin ttulo, utilice el comando Sitio > Informes. (Vase
Comprobacin del sitio en la pgina 115.)
Para cambiar el ttulo de una pgina:
1 Con el documento abierto, siga uno de estos procedimientos:
Seleccione Modificar > Propiedades de la pgina.
Seleccione Ver > Barra de herramientas > Documento (si es que no est ya seleccionado).
clic (Macintosh) en un rea vaca del documento y luego elija Propiedades de la pgina.
2 En el cuadro de texto Ttulo, introduzca el ttulo de la pgina y presione Intro (Windows) o
Retorno (Macintosh).
3 Si est editando el ttulo en el cuadro de dilogo Propiedades de la pgina, haga clic en Aceptar.
El ttulo aparecer en la barra de ttulo de la ventana de documento (y en la barra de
herramientas Documento, si sta se encuentra visible). El nombre de archivo de la pgina y la
carpeta en la que est guardado el archivo aparecen entre parntesis junto al ttulo en la barra
de ttulo. Un asterisco indica que el documento contiene cambios que no se han guardado an.
Temas relacionados
Configuracin de estilos de subrayado de vnculos CSS
Si utiliza el cuadro de dilogo Propiedades de la pgina de CSS predeterminado, Dreamweaver
facilita que pueda especificar el estilo de un vnculo CSS especial. Si utiliza las opciones de
vnculos CSS, puede elegir no subrayar nunca los vnculos, subrayarlos slo cuando el puntero
pase por encima o desactivarlos cuando el puntero pase por encima.
Para definir un estilo de vnculo CSS:
1 Seleccione Modificar > Propiedades de la pgina o seleccione Propiedades de la pgina en el
men contextual de la vista Diseo de la ventana de documento.
2 Seleccione la categora Vnculos del cuadro de dilogo Propiedades de la pgina de CSS.
3 En el men emergente Estilo subrayado, seleccione el estilo de vnculo que deseara utilizar
como predeterminado en la pgina.
Temas relacionados
Configuracin de una imagen de fondo o un color de fondo de pgina
Para definir una imagen o un color para el fondo de la pgina, utilice el cuadro de dilogo
Propiedades de la pgina.
Si utiliza tanto una imagen como un color de fondo, el color aparecer mientras se descarga la
imagen y luego la imagen cubrir el color. Si la imagen de fondo contiene pxeles transparentes, el
color de fondo se ver a travs de ellos.
Para definir una imagen o un color de fondo:
1 Seleccione Modificar > Propiedades de la pgina o seleccione Propiedades de la pgina en el
men contextual de la vista Diseo de la ventana de documento.
2 Seleccione la categora Aspecto del cuadro de dilogo Propiedades de la pgina.
3 Para establecer una imagen de fondo, haga clic en el botn Examinar, vaya hasta la imagen y
seleccinela. Como alternativa, introduzca la ruta de acceso a la imagen de fondo en el cuadro
Imagen de fondo.
Dreamweaver forma un mosaico con la imagen de fondo (la repite) si sta no ocupa toda la
ventana del navegador. (Para evitar que se forme un mosaico con la imagen de fondo, utilice
hojas de estilo en cascada (CSS) para desactivar la formacin de mosaicos con la imagen. Vase
Definicin de propiedades de fondo de estilos CSS en la Ayuda de Dreamweaver.)
4 Para definir un color de fondo, haga clic en el cuadro Color de fondo y seleccione un color del
selector de color.
Temas relacionados:
Utilizacin de colores 267
Utilizacin de colores
En Dreamweaver, muchos de los cuadros de dilogo, as como el inspector de propiedades de
muchos elementos de pgina, contienen un cuadro de color que abre un selector de color. Utilice
el selector de color para elegir el color de un elemento de la pgina.
Para seleccionar un color en Dreamweaver:
1 Haga clic en un cuadro de color en cualquier cuadro de dilogo o en el inspector de propiedades.
Aparecer el selector de color.
Use el cuentagotas para seleccionar un color de la paleta. Todos los colores de las paletas
Cubos de color (predeterminado) y Tono continuo son seguros para la Web; los de otras
paletas no lo son. Para ms informacin, consulte Colores seguros para la Web en
la pgina 261.
Utilice el cuentagotas para seleccionar un color de cualquier punto de la pantalla, incluso
fuera de las ventanas de Dreamweaver. Para seleccionar un color del escritorio o de otra
aplicacin, mantenga presionado el botn del ratn; de este modo el cuentagotas seguir
estando activado y se podr seleccionar un color fuera de Dreamweaver. Si hace clic en el
escritorio o en otra aplicacin, Dreamweaver selecciona el color del lugar en el que ha hecho
clic. Sin embargo, si pasa a otra aplicacin, es posible que tenga que hacer clic en una
ventana de Dreamweaver para seguir trabajando en Dreamweaver.
Para ampliar la seleccin de color, utilice el men emergente situado en la esquina superior
derecha del selector de color. Puede seleccionar Cubos de color, Tono continuo, SO
Windows, Mac OS, Escala de grises y Ajustar a Web Safe.
Nota: las paletas Cubos de color y Tono continuo son seguras para la Web, mientras que
Sistema Windows, Sistema Mac y Escala de grises no lo son. Si utiliza una paleta que no es
segura para la Web y, a continuacin, elige Ajustar a Web Safe, Dreamweaver sustituir el color
seleccionado por el color seguro para la Web que ms se le parece. Dicho de otro modo, es
posible que no consiga el color deseado.
Para quitar el color actual sin elegir ningn otro color, haga clic en el botn Color
predeterminado.
Para abrir el selector de color del sistema, haga clic en el botn Rueda de color. Para ms
informacin, consulte Colores seguros para la Web en la pgina 261.
Definicin de colores predeterminados de texto
Defina colores predeterminados para el texto normal, vnculos, vnculos visitados y vnculos
activos en el cuadro de dilogo Propiedades de la pgina o bien elija una combinacin de colores
preestablecida para definir los colores del fondo de la pgina y del texto. (Vase Utilizacin de
colores en la pgina 267.)
Nota: el color del vnculo activo es el que adopta el vnculo cuando se hace clic en l. Es posible que
algunos navegadores Web no utilicen el color especificado.
Para definir los colores predeterminados del texto, siga uno de estos procedimientos:
Seleccione Modificar > Propiedades de la pgina y, a continuacin, seleccione colores para las
opciones Color del texto, Color de los vnculos, Vnculos visitados y Vnculos activos.
Seleccione Comandos > Establecer combinacin de colores y seleccione un color de fondo y
una combinacin de colores de texto y vnculos.
El cuadro de muestra da una idea de cul ser la apariencia de la combinacin de colores en el
navegador.
Nota: si define estos valores mediante el cuadro de dilogo Propiedades de la pgina, con las
etiquetas CSS predeterminadas, el comando Establecer combinacin de colores no afectar el
aspecto de la pgina. Ello se debe a que las etiquetas CSS tienen prioridad sobre las etiquetas
HTML.
Temas relacionados
Seleccin de elementos en la ventana de documento
Para seleccionar un elemento de la vista de Diseo de la ventana de documento, normalmente
tendr que hacer clic en l. Si un elemento es invisible, tendr que convertirlo en visible para
poder seleccionarlo. Para ms informacin sobre los elementos invisibles, consulte Visualizacin
y ocultacin de elementos invisibles en la pgina 269.
Para seleccionar elementos, utilice estas tcnicas:
Para seleccionar un elemento visible de la ventana de documento, haga clic en el elemento o
arrastre el puntero hasta el elemento.
Para seleccionar un elemento invisible, seleccione Ver > Ayudas visuales > Elementos invisibles
(si no est seleccionado) y haga clic en el marcador del elemento en la ventana de documento.
Algunos objetos aparecen en un lugar de la pgina distinto a aqul en el que se ha insertado el
cdigo. Por ejemplo, una capa puede situarse en cualquier lugar de la pgina, pero el cdigo
que define la capa se encuentra en un lugar fijo. Cuando los elementos invisibles se encuentran
visibles, Dreamweaver muestra marcadores en la ventana de documento para indicar la
posicin del cdigo correspondiente a los elementos invisibles. Al seleccionar un marcador, se
selecciona el elemento completo; por ejemplo, al seleccionar el marcador de una capa se
selecciona la capa completa. (Vase Visualizacin y ocultacin de elementos invisibles en
la pgina 269.)
Seleccin de elementos en la ventana de documento 269
Para seleccionar una etiqueta completa (incluido su contenido, si lo hay), haga clic en una
etiqueta del selector de etiquetas, situado en la parte inferior izquierda de la ventana de
documento. (El selector de etiquetas aparece tanto en la vista Diseo como en la vista Cdigo.)
El selector de etiquetas siempre muestra las etiquetas que rodean a la seleccin actual o al punto
de insercin. La etiqueta situada ms a la izquierda es la etiqueta ms externa que contiene la
seleccin actual o el punto de insercin. La siguiente etiqueta est contenida en la etiqueta ms
externa, y as sucesivamente; la etiqueta situada ms a la derecha es la etiqueta ms interna que
contiene la seleccin actual o el punto de insercin.
En el siguiente ejemplo, el punto de insercin se sita en una etiqueta de prrafo, <p>. Para
seleccionar la tabla que contiene el prrafo que desea seleccionar, seleccione la etiqueta
<table> situada a la izquierda de la etiqueta <p>.
Para ver el cdigo HTML asociado al texto u objeto seleccionado, siga uno de estos
procedimientos:
En la barra de herramientas Documento, haga clic en el botn Mostrar vista de cdigo.
En la barra de herramientas Documento, haga clic en el botn Mostrar vistas de cdigo y
diseo.
Seleccione Ver > Cdigo y diseo.
Seleccione Ventana > Inspector de cdigo.
Para ms informacin sobre la vista Cdigo, consulte Visualizacin del cdigo en la pgina 413.
Cuando seleccione un elemento en el editor de cdigo (la vista Cdigo o el inspector de cdigo),
normalmente tambin se seleccionar en la ventana de documento. Es posible que tenga que
sincronizar las dos vistas antes de que aparezca la seleccin; vase Visualizacin del cdigo en
la pgina 413.
Visualizacin y ocultacin de elementos invisibles
Algunos cdigos HTML no tienen representacin visible en los navegadores. Por ejemplo, las
etiquetas comment no aparecen en los navegadores. No obstante, mientras crea una pgina, puede
resultar til poder seleccionar este tipo de elementos invisibles, editarlos, moverlos o borrarlos.
Dreamweaver permite especificar si debe mostrar iconos que marquen la ubicacin de los
elementos invisibles en la vista Diseo de la ventana de documento. Para indicar los marcadores
de elementos que deben aparecer cuando seleccione Ver > Ayudas visuales > Elementos invisibles,
puede establecer las opciones en las preferencias de Elementos invisibles. Por ejemplo, puede
especificar que sean visibles los anclajes con nombre, pero no los saltos de lnea.
Puede crear determinados elementos invisibles (como comentarios y anclajes con nombre)
utilizando los botones de la categora Comn de la barra Insertar (vase Utilizacin de la barra
Insertar en la pgina 45). Despus podr modificar estos elementos utilizando el inspector de
propiedades.
Para mostrar u ocultar iconos de marcadores para elementos invisibles:
Nota: al mostrar elementos invisibles, el diseo de la pgina puede cambiar ligeramente, ya que se
desplazarn otros elementos unos pocos pxeles; de manera que, para lograr un diseo preciso,
oculte los elementos invisibles.
Para cambiar las preferencias de Elementos invisibles:
1 Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh) y
haga clic en Elementos invisibles.
2 Seleccione los elementos que debern ser visibles.
Una marca de verificacin junto al nombre del elemento en el cuadro de dilogo indica que ese
elemento se encontrar visible cuando seleccione Ver > Ayudas visuales > Elementos invisibles.
Si desea obtener una explicacin de cada preferencia para los Elementos invisibles, vase
Configuracin de preferencias de Elementos invisibles en la Ayuda de Dreamweaver.
Utilizacin del panel Historial
El panel Historial realiza un seguimiento de todos los pasos de trabajo en Dreamweaver. Puede
utilizar el panel Historial para deshacer varios pasos a la vez.
Si desea deshacer la ltima operacin realizada en un documento, seleccione Edicin > Deshacer,
como en cualquier otra aplicacin. (El nombre del comando Deshacer cambiar en el men
Edicin para reflejar la ltima operacin realizada.)
El panel Historial tambin permite volver a reproducir pasos ya realizados y automatizar tareas
mediante la creacin de nuevos comandos. Para ms informacin, consulte Automatizacin de
tareas en la pgina 271.
Para abrir el panel Historial:
Seleccione Ventana > Historial.
Para deshacer el ltimo paso:
Arrastre el control deslizante del panel Historial hasta el paso superior en la lista. Esta
operacin tiene el mismo efecto que elegir Edicin > Deshacer.
El paso deshecho adopta el color gris.
Para deshacer varias pasos al mismo tiempo, siga uno de estos procedimientos:
Arrastre el control deslizante para sealar cualquier paso.
Haga clic a la izquierda de un paso de la ruta del control deslizante; el control deslizante se
desplazar automticamente hasta dicho paso y deshar pasos conforme se desplace.
Nota: para desplazarse automticamente a un determinado paso, deber hacer clic a la izquierda del
paso; si hace clic en el paso mismo, se seleccionar el paso. Seleccionar un paso no es lo mismo que
volver a ese paso en el historial de deshacer.
Como ocurre al deshacer un solo paso, si deshace una serie de pasos y, a continuacin, realiza una
nueva operacin en el documento, no podr rehacer los pasos deshechos, pues habrn
desaparecido del panel Historial.
Automatizacin de tareas 271
Para definir el nmero de pasos que el panel Historial mantiene y muestra:
2 Seleccione General en la lista Categora de la izquierda.
3 Introduzca un nmero para Nmero mximo de pasos de historial.
El valor predeterminado suele ser vlido para la mayora de las necesidades de los usuarios.
Cuanto mayor sea el nmero, ms memoria necesitar el panel Historial. Esto puede afectar al
rendimiento y reducir considerablemente la velocidad de funcionamiento del equipo. Cuando
el panel Historial alcanza el nmero mximo de pasos, los pasos ms antiguos se borran.
Nota: no se puede modificar el orden de los pasos en el panel Historial. El panel Historial no es un
conjunto arbitrario de comandos, sino una forma de ver los pasos en el orden en que se han dado.
Para borrar la lista de historial para el documento actual:
En el men contextual del panel Historial, seleccione Borrar historial.
Este comando tambin borra toda la informacin de deshacer del documento actual. Despus
de elegir Borrar historial, no podr deshacer los pasos borrados. (La opcin Borrar historial no
deshace los pasos dados, sino que simplemente quita el registro de esos pasos de la memoria de
Dreamweaver.)
Temas relacionados
Panel Historial en la pgina 261
Automatizacin de tareas
Al crear documentos, es posible que desee realizar la misma tarea muchas veces.
Para repetir una serie de pasos una o dos veces, reprodzcalos directamente desde el panel
Historial, que graba los pasos conforme trabaja en un documento. (Para informacin bsica acerca
del panel Historial, vase Panel Historial en la pgina 261.) Para automatizar una tarea que
realiza a menudo, puede crear un nuevo comando que lleve a cabo esa tarea de manera
automtica.
Algunos movimientos del ratn, como hacer clic o arrastrar para seleccionar algn elemento de la
ventana de documento, no se pueden reproducir ni guardar como parte de comandos guardados.
Al realizar un movimiento de ese tipo, aparece una lnea negra en el panel Historial (si bien esa
lnea no es visible hasta que realice otra accin). Para evitar movimientos que no pueden
reproducirse, utilice las teclas de flecha en lugar del ratn para mover el punto de insercin dentro
de la ventana de documento. Para realizar o ampliar una seleccin, mantenga presionada la tecla
Mays mientras presiona una tecla de flecha.
Sugerencia: si aparece una lnea negra que indica un movimiento del ratn mientras est realizando
una tarea y desea repetirla ms tarde, puede deshacer este paso e intentarlo de otra forma, quiz
mediante la utilizacin de las teclas de flecha.
Hay otros pasos que tampoco pueden repetirse, como arrastrar un elemento a otro lugar de la
pgina. Al dar un paso de ese tipo, aparece un icono de comando de men con una pequea X
roja en el panel Historial.
Temas relacionados
Aplicacin de pasos a otro objeto en la pgina 273
Aplicacin de pasos a varios objetos en la pgina 273
Cmo copiar y pegar pasos entre documentos en la pgina 274
Creacin de comandos nuevos a partir del historial en la pgina 275
Grabacin de comandos en la pgina 276
Repeticin de pasos
Puede utilizar el panel Historial para repetir el ltimo paso que ha realizado, repetir una serie de
pasos consecutivos o repetir una serie de pasos no consecutivos. (Para informacin bsica sobre el
panel Historial, vase Panel Historial en la pgina 261.)
Para repetir un paso, siga uno de estos procedimientos:
Seleccione Edicin > Rehacer.
El nombre de este comando cambia en el men Edicin para reflejar el ltimo paso que ha
dado. Por ejemplo, si ha escrito texto, el nombre del comando ser Repetir Escritura.
En el panel Historial, seleccione el paso y haga clic en el botn Reproducir.
El paso se reproducir y aparecer una copia suya en el panel Historial.
Para repetir una serie de pasos adyacentes:
1 Seleccione los pasos en el panel Historial siguiendo uno de estos procedimientos:
Arrastre desde un paso hasta otro. (No arrastre el dispositivo deslizante, sino tan slo desde
la etiqueta de texto de un paso hasta la etiqueta de texto de otro paso.)
Seleccione el primer paso y luego haga clic en el ltimo paso mientras mantiene presionada
la tecla Mays, o bien seleccione el ltimo paso y luego haga clic en el primer paso mientras
mantiene presionada la tecla Mays.
Los pasos reproducidos son los pasos que se han seleccionado (resaltado) y no necesariamente
el paso que seala el control deslizante.
Nota: aunque puede seleccionar una serie de pasos que incluyan una lnea negra que indica el
movimiento del ratn, dicho movimiento del ratn se omitir cuando se reproduzcan los pasos.
2 Haga clic en Reproducir.
Los pasos se reproducirn en orden y aparecer un nuevo paso, Reproducir pasos, en el panel
Historial.
Para repetir pasos no adyacentes:
1 Seleccione un paso y, a continuacin, haga clic en otros pasos mientras presiona la tecla Control
(Windows) o la tecla Comando (Macintosh).
Tambin puede hacer clic mientras mantiene presionada la tecla Control o Comando para
desactivar un paso seleccionado.
2 Haga clic en Reproducir.
Los pasos seleccionados se reproducirn en orden y aparecer un nuevo paso en el panel
Historial con la etiqueta Reproducir pasos.
Temas relacionados
Aplicacin de pasos a varios objetos en la pgina 273
Aplicacin de pasos a otro objeto
Puede aplicar una serie de pasos del panel Historial a cualquier objeto de la ventana de
documento.
Para aplicar los pasos del panel Historial a un objeto nuevo:
1 Seleccione el objeto.
2 Seleccione los pasos pertinentes en el panel Historial y, a continuacin, haga clic en Reproducir.
Aplicacin de pasos a varios objetos
Si selecciona varios objetos en un documento y, a continuacin, les aplica pasos desde el panel
Historial, los objetos se considerarn como una nica seleccin a la que Dreamweaver intentar
aplicar los pasos.
Por ejemplo, no puede seleccionar cinco imgenes y aplicar el mismo cambio de tamao a cada
una de ellas a la vez; el cambio de tamao es una operacin que debe aplicarse a cada imagen
individual y no a una combinacin colectiva de imgenes.
Para aplicar una serie de pasos a cada objeto de un conjunto de objetos, compruebe que el ltimo
paso de la serie selecciona el siguiente objeto del conjunto. El siguiente procedimiento demuestra
este principio en un escenario concreto: establecer el espaciado vertical y horizontal de una serie
de imgenes:
Para establecer el espaciado vertical y horizontal de una serie de imgenes:
1 Comience con un documento en el que cada lnea contenga una pequea imagen (por ejemplo,
una vieta grfica o un icono) seguida de texto. El objetivo es separar las imgenes del texto y
de otras imgenes situadas por encima y por debajo de ellas.
3 Seleccione la primera imagen.
4 En el inspector de propiedades, introduzca nmeros en los cuadros de texto Espacio V y Espacio
H para definir el espaciado de la imagen.
5 Haga clic de nuevo en la imagen para activar la ventana de documento sin tener que mover el
punto de insercin.
6 Presione la tecla Flecha izquierda para mover el punto de insercin a la izquierda de la imagen.
A continuacin, presione la tecla Flecha abajo para mover el punto de insercin una lnea hacia
abajo, dejndolo justo a la izquierda de la segunda imagen de la serie. Seguidamente, presione
Mays+Flecha derecha para seleccionar esa segunda imagen.
Nota: no seleccione la imagen haciendo clic en ella. De lo contrario, no podr reproducir todos los
pasos.
7 Seleccione en el panel Historial los pasos correspondientes al cambio de espaciado de la imagen
y la seleccin de la imagen siguiente. Haga clic en el botn Reproducir para reproducir esos
pasos.
El espaciado de la imagen actual cambiar y se seleccionar la imagen siguiente.
8 Siga haciendo clic en Reproducir hasta que haya establecido correctamente el espaciado de todas
las imgenes.
Para aplicar pasos a un objeto de otro documento, utilice el botn Copiar pasos.
Cmo copiar y pegar pasos entre documentos
Todos los documentos abiertos tienen su propio historial de pasos. Puede copiar los pasos de un
documento y pegarlos en otro.
Al cerrar un documento se borra su historial. Si sabe que va a querer utilizar los pasos de un
documento despus de cerrarlo, cpielos con Copiar pasos (o gurdelos como un comando; vase
Creacin de comandos nuevos a partir del historial en la pgina 275) antes de cerrar el
documento.
Para reutilizar los pasos de un documento en otro:
1 Comience desde el documento que contiene los pasos que desea reutilizar.
2 Seleccione los pasos del panel Historial.
3 Haga clic en el botn Copiar pasos del panel Historial para copiar dichos pasos.
Nota: copiar pasos (un botn del panel Historial) es diferente a Copiar (en el men Edicin). No
puede utilizar Edicin > Copiar para copiar pasos, aunque utilice Edicin > Pegar para pegarlos.
Hay que tener cuidado al copiar pasos que incluyan los comandos Copiar o Pegar.
No utilice Copiar pasos si uno de los pasos es un comando Copiar, ya que es posible que no
pueda pegar dichos pasos de la manera deseada.
Si entre los pasos figura un comando Pegar, no podr pegar dichos pasos a no ser que los
pasos tambin incluyan un comando Copiar antes del comando Pegar.
4 Abra el otro documento.
5 Coloque el punto de insercin donde desee o seleccione un objeto para aplicarle los pasos.
6 Seleccione Edicin > Pegar para pegar los pasos.
Los pasos se reproducirn a medida que se peguen en el panel Historial del documento. El
panel Historial los muestra como un solo paso, denominado Pegar pasos.
Si ha pegado pasos en un editor de texto o en la vista Cdigo o el inspector de cdigo,
aparecern como cdigo JavaScript. Esta opcin puede resultar til para aprender a escribir
scripts. Para ms informacin sobre el uso de JavaScript en Dreamweaver, consulte Escritura y
edicin de cdigo en la pgina 436.
Creacin de comandos nuevos a partir del historial
Puede guardar un conjunto de pasos de historial como un comando con nombre y acceder a l
desde el men Comandos.
Cree y guarde un comando si es posible que vaya a utilizar un conjunto determinado de pasos en
el futuro, especialmente si desea usar esos pasos la prxima vez que inicie Dreamweaver. Los
comandos guardados se conservan de manera permanente (a menos que los borre), mientras que
los comandos grabados (vase ) se eliminan al salir de Dreamweaver y las secuencias copiadas de
los pasos se eliminan al copiar otro objeto.
Puede editar los nombres de comandos que ha colocado en el men Comandos y borrarlos del
men Comandos. Es ms complicado editar y borrar comandos incorporados en el men
Comandos (es decir, que usted no ha aadido explcitamente).
Para crear un comando:
1 Seleccione un paso o un conjunto de pasos en el panel Historial.
2 Haga clic en el botn Guardar como comando o seleccione Guardar como comando en el men
contextual del panel Historial.
3 Introduzca un nombre para el comando y haga clic en Aceptar.
el comando aparecer en el men Comandos.
Nota: el comando se guardar como archivo JavaScript (o, en ocasiones, como un archivo
HTML) en la carpeta Dreamweaver/Configuration/Commands. Si utiliza Dreamweaver en un
sistema operativo multiusuario, el archivo se guardar en la carpeta Commands especfica del
usuario.
Para utilizar un comando guardado:
1 Seleccione un objeto al que aplicar el comando o coloque el punto de insercin donde desee.
2 Seleccione el comando en el men Comandos.
Para editar los nombres de comandos del men Comandos.
1 Seleccione Comandos > Editar lista de comandos.
2 Seleccione un comando para cambiar su nombre e introduzca un nombre nuevo.
3 Haga clic en Cerrar.
Para eliminar un nombre del men Comandos:
1 Seleccione Comandos > Editar lista de comandos.
2 Seleccione un comando.
3 Haga clic en Eliminar y, seguidamente, en Cerrar.
Grabacin de comandos
Puede grabar un comando temporal para usarlo a corto plazo. Dreamweaver slo conserva un
comando grabado simultneamente. En cuanto comience a grabar otro, se perder el antiguo.
Para guardar un comando sin perder otro grabado, gurdelo desde el panel Historial. Para ms
informacin sobre las diferencias de uso de los comandos grabados y los pasos de reproduccin en
el panel Historial, consulte Utilizacin del panel Historial en la pgina 270.
Para grabar temporalmente una serie de pasos usados con frecuencia:
1 Seleccione Comandos > Iniciar grabacin o presione Control+Mays+X (Windows) o
Comando+Mays+X (Macintosh).
El puntero cambiar para indicar que se est grabando un comando.
2 Cuando termine de grabar, seleccione Comandos > Detener grabacin o presione
Control+Mays+X (Windows) o Comando+Mays+X (Macintosh).
Para reproducir un comando grabado:
Seleccione Comandos > Reproducir comando grabado o presione Control+Mays+R
(Windows) o Comando+Mays+R (Macintosh).
Para guardar un comando grabado:
1 Seleccione Comandos > Reproducir comando grabado para volver a ejecutar el comando.
En la lista de pasos del panel Historial aparecer un paso llamado Ejecutar comando.
2 Seleccione el paso Ejecutar comando y haga clic en el botn Guardar como comando.
3 Introduzca un nombre para el comando y haga clic en Aceptar.
El comando aparecer en el men Comandos.
Utilizacin de comportamientos de JavaScript para detectar
navegadores y plug-ins
Puede utilizar comportamientos para determinar qu navegador utilizan los visitantes y si tienen
un determinado plug-in instalado. Para ms informacin sobre comportamientos, consulte el
Captulo 18, Utilizacin de comportamientos JavaScript, en la pgina 381.
Comprobar navegador enva a los visitantes a distintas pginas, segn la marca y versin de su
navegador (vase Comprobar navegador en la pgina 388). Por ejemplo, puede resultar
conveniente que los visitantes vayan a una pgina si su navegador es Netscape Navigator 4.0 o una
versin posterior, que vayan a otra pgina si utilizan Microsoft Internet Explorer 4.0 o una versin
posterior o que permanezcan en la pgina actual si su navegador es de algn otro tipo.
Comprobar plug-in remite a los visitantes a distintas pginas, dependiendo de si tienen instalado
el plug-in especificado (vase Comprobar plug-in en la pgina 389). Por ejemplo, puede resultar
conveniente que los visitantes vayan a una pgina si tienen Macromedia Shockwave y a otra
distinta si no lo tienen.
Vista previa y comprobacin de pginas en los navegadores 277
Vista previa y comprobacin de pginas en los navegadores
Puede obtener la vista previa de un documento en los navegadores de destino en cualquier
momento. Para ello, no es necesario guardar previamente el documento.
Puede definir hasta 20 navegadores para realizar vistas previas. Es recomendable obtener una vista
previa en los siguientes navegadores: Internet Explorer 6.0, Netscape Navigator 7.0 y el navegador
exclusivo para Macintosh denominado Safari. Adems de estos navegadores grficos ms
conocidos, puede probar las pginas con navegadores de slo texto, como Lynx.
Para obtener una vista previa del documento y comprobarlo en un navegador:
1 Siga uno de estos procedimientos para obtener una vista previa de la pgina:
Seleccione Archivo > Vista previa en el navegador y elija uno de los navegadores que
aparecen en la lista.
Nota: si an no ha seleccionado un navegador, seleccione Edicin > Preferencias o
Dreamweaver > Preferencias (Macintosh) y, a continuacin, seleccione la categora Vista previa
en el navegador a la izquierda para seleccionar un navegador.
Presione F12 para mostrar el documento actual en el navegador principal.
Presione Control+F12 (Windows) o Comando+F12 (Macintosh) para mostrar el
documento actual en el navegador secundario.
2 Haga clic en los vnculos y el contenido de prueba de la pgina.
Podr activar todas las funciones relacionadas con el navegador, como los comportamientos
JavaScript, los vnculos absolutos y relativos al documento, los controles ActiveX y los plug-ins
de Netscape Navigator, siempre que haya instalado los plug-ins o los controles ActiveX
necesarios en los navegadores.
Nota: el contenido vinculado a rutas relativas a la raz no aparece cuando se realiza una vista
previa de documentos en un navegador local, a menos que seleccione la opcin Vista previa
utilizando el archivo temporal en Preferencias. (Vase Vista previa y comprobacin de pginas en
los navegadores en la pgina 277.) Esto es as porque los navegadores no reconocen la raz de
los sitios.
Sugerencia: para obtener una vista previa del contenido vinculado con las rutas relativas a la raz,
coloque el archivo en el servidor remoto y, a continuacin, seleccione Archivo > Vista previa en el
navegador (vase Rutas relativas a la raz del sitio en la pgina 328).
3 Cierre la pgina del navegador al finalizar la prueba.
Para definir o cambiar las preferencias de los navegadores principal y secundario:
1 Siga uno de estos procedimientos para abrir las opciones de Vista previa en el navegador:
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh) y,
a continuacin, seleccione Vista previa en el navegador en la lista de categoras de la
izquierda.
Seleccione Archivo > Vista previa en el navegador > Editar lista de navegadores.
Aparecer el cuadro de dilogo Preferencias con las opciones de Vista previa en el navegador.
Configuracin de las preferencias de tiempo de descarga y tamao 279
Configuracin de las preferencias de tiempo de descarga y
tamao
Dreamweaver calcula el tamao basndose en todo el contenido de la pgina, incluidos los objetos
vinculados, como las imgenes y los plug-ins. Dreamweaver realiza una estimacin del tiempo de
descarga en base a la velocidad de conexin introducida en las preferencias de barra de estado. El
tiempo de descarga real depender de las condiciones generales de Internet.
Sugerencia: la regla de los ocho segundos es una buena norma para controlar el tiempo de descarga
de una pgina Web concreta: la mayora de los usuarios no esperarn ms de ocho segundos a que
la pgina se cargue.
Para establecer las preferencias de tiempo y tamao de descarga:
2 Seleccione Barra de estado en la lista Categora de la izquierda.
Aparecern las opciones de preferencias de la barra de estado.
3 Seleccione una velocidad de conexin para calcular el tiempo de descarga.
La velocidad media de conexin en Estados Unidos es 28,8. Si el diseo se realiza para una
intranet, puede seleccionar 1.500 (velocidad T1).
Para ms informacin sobre las preferencias de la barra de estado, consulte Configuracin de
las preferencias de la barra de estado en la pgina 44.
281
CAPTULO 13
Insercin y formato de texto
Macromedia Dreamweaver MX 2004 ofrece varias formas de aadir texto y aplicarle formato en
un documento. Puede insertar texto, establecer la fuente, el tamao, el color y los atributos de
alineacin. Asimismo, puede crear y aplicar sus propios estilos personalizados mediante el uso de
estilos CSS (hoja de estilos en cascada).
Este captulo trata los siguientes temas:
Aplicacin de formato a texto en Dreamweaver en la pgina 282
Insercin de texto en la pgina 289
Aplicacin de formato a prrafos y a la estructura de la pgina en la pgina 291
Aplicacin de formato al texto en la pgina 294
Actualizacin de hojas de estilos CSS en un sitio de Contribute en la pgina 307
Comprobacin de la ortografa en la pgina 309
Cmo buscar y reemplazar texto en la pgina 309
282 Captulo 13: Insercin y formato de texto
Aplicacin de formato a texto en Dreamweaver
Dreamweaver ofrece varios comandos y herramientas que permiten aplicar formato a texto
mediante estilos CSS o etiquetas HTML.
Insercin de texto
Dreamweaver permite aadir texto a pginas Web escribiendo el texto directamente en una
pgina, copiando y pegando texto de otro documento o arrastrando texto de otra aplicacin.
Entre los tipos de documentos que los profesionales de la Web reciben con contenido de texto que
debe incorporarse en las pginas Web, se incluyen los archivos de texto ASCII, los archivos en
formato de texto enriquecido y los documentos de MS Office. Dreamweaver permite extraer texto
de cualquiera de estos tipos de documentos e incorporarlo a una pgina Web.
Temas relacionados
Adicin de texto a un documento en la pgina 289
Importacin de documentos de datos de tabla en la pgina 290
Cmo copiar y pegar texto de documentos de MS Office en la pgina 290
Aplicacin de formato al texto
La aplicacin de formato a texto en Dreamweaver es similar a la utilizacin de un programa
estndar de tratamiento de texto. Puede establecer estilos de formato predeterminados (Prrafo,
Encabezado 1, Encabezado 2, etc.) para un bloque de texto, cambiar la fuente, el tamao, el color
y la alineacin del texto seleccionado o aplicar estilos de texto, como negrita, cursiva,
monoespacio y subrayado.
De forma predeterminada, Dreamweaver aplica formato a texto mediante hojas de estilos en
cascada (CSS). Los estilos CSS ofrecen a los diseadores y desarrolladores Web un mayor control
sobre el diseo de la pgina Web, a la vez que les permite utilizar funciones mejoradas que
optimizan la accesibilidad y reducen el tamao de archivo. Puesto que el estilo y la alineacin se
aplican mediante los comandos de formato de Dreamweaver, las reglas CSS estn incrustadas en
el documento actual. Esto permite reutilizar de forma ms fcil los estilos existentes que cree,
adems de permitir asignar un nombre a los estilos que utilice. CSS se est convirtiendo en el
mtodo preferido para aplicar formato a texto y presentar pginas Web.
Si lo prefiere, puede optar por utilizar etiquetas de formato HTML para aplicar formato y alinear
el texto de las pginas Web. Si necesita utilizar etiquetas HTML en lugar de estilos CSS, debe
cambiar las preferencias de formato de texto predeterminadas de Dreamweaver. (Para ms
informacin, consulte Especificacin de HTML en lugar de CSS en la pgina 264.)
El uso de estilos CSS es una manera de controlar el estilo de una pgina Web sin comprometer su
estructura. Al separar los elementos visuales de diseo (fuentes, colores, mrgenes, etc.) de la
estructura lgica de una pgina Web, el estilo CSS permite a los diseadores Web tener un control
visual y tipogrfico de la pgina Web sin que ello repercuta negativamente en la integridad del
contenido. Adems, al definir el diseo tipogrfico y el diseo de la pgina a partir de un solo
bloque de cdigo, sin tener que recurrir a mapas de imagen, etiquetas <font>, tablas y GIF
espaciadores, se pueden llevar a cabo descargas ms rpidamente, mejorar el mantenimiento del
sitio Web y establecer un punto central desde el que se pueden controlar los atributos de diseo de
varias pginas Web.
Aplicacin de formato a texto en Dreamweaver 283
Los estilos CSS definen el formato del texto de una determinada clase o redefinen el formato de
una etiqueta HTML especfica (como h1, h2, p o li).
Puede almacenar estilos CSS directamente en el documento o, si desea tener mayor control y
flexibilidad, en una hoja de estilos externa. Si adjunta una hoja de estilos externa a varias pginas
Web, todas las pginas reflejarn automticamente los cambios realizados en la hoja. Para acceder
a estilos CSS, utilice el panel Estilos CSS o el men emergente Estilo del inspector de propiedades
de texto. Para ms informacin sobre la utilizacin del inspector de propiedades de texto para
aplicar estilos HTML y CSS, consulte Configuracin de opciones de propiedades de texto en la
Ayuda de Dreamweaver.
Nota: puede combinar estilos CSS y opciones de formato HTML 3.2 en la misma pgina. La
aplicacin de formato se realiza de forma jerrquica: el formato HTML 3.2 anula el formato de hojas
de estilo CSS externas y los estilos CSS incrustados en un documento anulan los estilos CSS
externos. Vase Utilizacin de estilos de hojas de estilos en cascada en la pgina 299.
Temas relacionados
Aplicacin de formato al texto en la pgina 294
Aspectos bsicos de las hojas de estilos en cascada
Las hojas de estilos en cascada (CSS) son un conjunto de reglas de formato que controlan el
aspecto del contenido de una pgina Web. Los estilos CSS aportan gran flexibilidad y control al
aspecto exacto que se busca en una pgina, desde la posicin precisa de elementos hasta el diseo
de fuentes y estilos concretos.
Los estilos CSS permiten definir muchas propiedades que no se pueden controlar utilizando slo
HTML. Por ejemplo, puede asignar vietas de lista personalizadas y especificar distintos tamaos
y unidades de fuente (pxeles, puntos, etc.). Si utiliza estilos CSS y define el tamao de fuente en
pxeles, conseguir un tratamiento ms coherente del diseo y el aspecto de la pgina en mltiples
navegadores. Adems del formato del texto, puede controlar el formato y la posicin de elementos
de nivel de bloque (block-level) de una pgina Web. Por ejemplo, puede ajustar mrgenes, bordes,
texto flotante sobre texto fijo, etc.
Una regla de estilo CSS consta de dos partes: el selector y la declaracin. El selector es el nombre
del estilo (TR o P, por ejemplo) y la declaracin define qu elementos forman el estilo. La
declaracin, a su vez, consta de dos partes: la propiedad (por ejemplo, font-family) y el valor
(por ejemplo, Helvetica). La expresin en cascada hace referencia a la posibilidad de aplicar
varias hojas de estilos a una misma pgina Web. Por ejemplo, puede crear una hoja de estilos que
aplique color y otra que aplique los mrgenes. Puede aplicar las dos a la misma pgina y crear as el
diseo que desea.
Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de
actualizacin; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese
estilo se actualiza automticamente.
Puede definir los siguientes tipos de estilo CSS en Dreamweaver:
Los estilos CSS personalizados, tambin llamados estilos de clase, permiten configurar
atributos de estilo a cualquier rango o bloque de texto (vase Aplicacin de un estilo de clase
en la pgina 303).
Los estilos de etiquetas HTML redefinen el formato de una determinada etiqueta, como h1.
Cuando se crea o cambia un estilo CSS para la etiqueta h1, todo el texto formateado con la
etiqueta h1 se actualiza inmediatamente.
Los estilos del selector CSS redefinen el formato de una determinada combinacin de etiquetas
(por ejemplo, td h2 se aplica cada vez que aparece un encabezado h2 dentro de una celda de
tabla) o de todas las etiquetas que contienen un atributo id especfico (por ejemplo,
#miEstilo se aplica a todas las etiquetas que contienen el par atributo-valor ID=miEstilo).
Las etiquetas CSS pueden residir en las ubicaciones siguientes:
Las hojas de estilos CSS externas son conjuntos de estilos CSS almacenados en un archivo .css
externo (no un archivo HTML). Este archivo se vincula con una o varias pginas de un sitio Web
mediante un vnculo situado en la seccin head de un documento.
Las hojas de estilos CSS internas (o incrustadas) son grupos de estilos CSS incluidos en una
etiqueta style en la seccin head de un documento HTML.
Los estilos en lnea se definen con instancias especficas de etiquetas en un documento HTML.
Los estilos CSS pueden definir los atributos de formato de etiquetas HTML o rangos de texto
identificados mediante un atributo class. Dreamweaver MX reconoce los estilos definidos en
documentos existentes siempre que se ajusten a las directrices de los estilos CSS.
Sugerencia: para mostrar la gua de referencia CSS de OReilly incluida con Dreamweaver,
seleccione Ayuda > Referencia y seleccione OReilly CSS Reference en el men emergente del panel
Referencia.
El formato HTML aplicado manualmente prevalece sobre el formato aplicado con estilos CSS.
Para que los estilos CSS controlen el formato de un prrafo, deber quitar todo el formato HTML
aplicado manualmente.
La mayora de los atributos de estilo que aplique se pueden ver en la ventana de documento.
Tambin puede obtener una vista previa del documento en la ventana del navegador para
comprobar el resultado. Algunos de los atributos de estilo CSS se reproducen de forma distinta en
Microsoft Internet Explorer, Netscape Navigator, Opera y Apple Safari, y otros no son
compatibles actualmente con ningn navegador.
Estilos CSS en conflicto
Cuando se aplican dos o ms estilos CSS al mismo texto, estos pueden entrar en conflicto y
producir resultados imprevistos. Los navegadores aplican atributos de estilo de acuerdo con las
reglas siguientes:
Si se aplican dos estilos al mismo texto, el navegador muestra todos los atributos de ambos
estilos a menos que entren en conflicto. Por ejemplo, un estilo puede especificar azul como
color de texto y el otro estilo puede especificar rojo.
Si los atributos de dos estilos aplicados al mismo texto entran en conflicto, el navegador
mostrar el atributo del estilo ms interno (el ms prximo al texto). De este modo, si un
elemento del texto se ve afectado por una hoja de estilos externa y un estilo CSS en lnea, este
ltimo ser el que se aplique.
Si hay un conflicto directo, los atributos de estilos CSS (estilos aplicados con el atributo class)
prevalecern sobre los atributos correspondientes a estilos de etiquetas HTML.
En el ejemplo siguiente, el estilo definido para h1 podra especificar la fuente, el tamao y el color
de todos los prrafos h1, pero el estilo CSS personalizado .Blue aplicado a este prrafo prevalece
sobre la configuracin de color del estilo H1. El segundo estilo CSS personalizado .Red prevalece
sobre .Blue porque se encuentra dentro del estilo .Blue.
<h1><span class="Blue">Este prrafo est controlado por el estilo
personalizado .Blue y el estilo de la
etiqueta HTML h1.<span class="Red">Excepto esta frase, que est controlada por
el estilo .Red.</span>
Ahora volvemos al estilo .Blue.</span></h1>
Propiedades de CSS en forma abreviada
La especificacin CSS permite crear estilos mediante una sintaxis abreviada conocida como CSS
en forma abreviada. CSS en forma abreviada permite especificar los valores de diversas
propiedades con una sola etiqueta de propiedad. Por ejemplo, la propiedad font permite definir
las propiedades font-style, font-variant, font-weight, font-size, line-height y font-
family en una nica lnea de sintaxis.
Un aspecto esencial que debe tenerse en cuenta cuando se utiliza CSS en forma abreviada es que a
los valores omitidos en una propiedad CSS en forma abreviada se le asignan sus valores
predeterminados. Esto puede hacer que las pginas se muestren de forma incorrecta cuando hay
dos o ms estilos CSS asignados a la misma etiqueta.
Por ejemplo, la etiqueta H1 que se muestra a continuacin utiliza la sintaxis CSS sin abreviar.
Observe que a las propiedades font-variant, font-stretch, font-size-adjust y font-
style se les han asignado sus valores predeterminados.
H1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
La misma etiqueta tiene el aspecto siguiente si se especifica como nica propiedad en forma
abreviada:
H1 { font: bold 16pt/18pt Arial }
Al especificarlos con la notacin abreviada, a los valores omitidos se les asignan sus valores
predeterminados. As, en el ejemplo de notacin abreviada anterior se omiten las etiquetas font-
variant, font-stretch, font-size-adjust y font-style.
Si tiene estilos definidos en ms de una ubicacin (por ejemplo, incluidos en una pgina HTML e
importados de una hoja de estilos externa) y se ha utilizado tanto el formato abreviado como el
formato no abreviado en la sintaxis CSS, tenga en cuenta que las propiedades omitidas puede
tener prioridad (cascada) sobre las propiedades que estn definidas explcitamente en otras
ubicaciones.
Por este motivo, Dreamweaver utiliza la notacin CSS no abreviada de forma predeterminada.
Esto evita la aparicin de problemas en el caso de que un estilo CSS en notacin abreviada tenga
prioridad sobre un estilo con formato no abreviado. Si abre una pgina Web codificada con
notacin CSS abreviada en Dreamweaver, tenga en cuenta que Dreamweaver crear los estilos
CSS nuevos en formato no abreviado. Puede especificar el modo en que Dreamweaver crea y edita
los estilos CSS mediante la modificacin de las preferencias de edicin de CSS en la categora
Estilos CSS del cuadro de dilogo Preferencias (Edicin > Preferencias en Windows;
Dreamweaver > Preferencias en Macintosh).
Nota: las fichas CSS relevante y Propiedades de CSS crean los estilos CSS nicamente en forma no
abreviada. Si crea una pgina o una hoja de estilos CSS mediante las fichas CSS relevante o
Propiedades de CSS, tenga en cuenta que la codificacin manual de estilos CSS en forma abreviada
puede provocar que las propiedades en forma abreviada tengan prioridad sobre las creadas con la
notacin no abreviada. Por este motivo, utilice la notacin CSS no abreviada para crear sus estilos
CSS.
Temas relacionados
Estilos CSS en conflicto en la pgina 284
Ficha CSS relevante en la pgina 287
Ficha Propiedades de CSS en la pgina 288
Inspector de propiedades y aplicacin de formato a texto
El inspector de propiedades de texto permite aplicar un estilo y un formato al texto seleccionado
actualmente. Puesto que el inspector de propiedades se utiliza para aplicar un estilo y un formato
al texto, Dreamweaver realiza un seguimiento de las propiedades de formato que el usuario asigna
a todos los elementos del texto y asigna una etiqueta a cada uno de ellos mediante una convencin
de asignacin de nombres: Style1, Style2, Style3, Stylen. Si asigna los mismos atributos de
formato a dos o ms elementos del texto, Dreamweaver asigna una etiqueta a los elementos que
tengan el mismo ttulo; de este modo, se eliminan los nombres de estilo redundantes. La etiqueta
que Dreamweaver aplica a un cuerpo de texto determinado se puede aplicar posteriormente
mediante el men emergente Estilo, lo que permite crear una biblioteca de estilos dentro de una
pgina y aplicar esos mismos estilos simplemente seleccionando el elemento de texto en la pgina
y seleccionando un estilo en el men emergente Estilos. Puede cambiar el nombre de los estilos
por texto con ms significado, como Encabezado1, Encabezado2, Cuerpo y CuerpoTabla.
El men emergente Estilo muestra ambos nombres de estilos en la pgina, adems de una vista
previa de las propiedades del estilo. Las propiedades mostradas en la vista previa son la familia de
fuentes, el tamao y el grosor de la fuente, el color del texto y el color de fondo.
Temas relacionados
Aplicacin de formato a prrafos en la pgina 292
Configuracin y cambio de fuentes y estilos en la pgina 294
Cambio del nombre de un estilo en la pgina 295
Ficha CSS relevante
La ficha CSS relevante permite realizar un seguimiento de las reglas CSS que afectan al elemento
del texto seleccionado actualmente, adems de modificar las propiedades de la regla. Situada en el
inspector de etiquetas (Ventana > Inspector de etiquetas), la ficha CSS relevante consta de dos
secciones. En la parte superior de la ficha CSS relevante se muestran las reglas que afectan a la
seleccin actual, as como las etiquetas a las que afectan. En la parte inferior de la ficha CSS
relevante se muestran las propiedades del elemento seleccionado actualmente en una cuadrcula
editable. Las propiedades se disponen en orden alfabtico, con las propiedades establecidas
ordenadas en la parte superior de la ficha. Las propiedades establecidas aparecen en color azul; las
propiedades que no son relevantes para la seleccin aparecen tachadas por una lnea de color rojo.
Al pasar el cursor por encima de una regla que no es importante aparecer un mensaje que le
explicar el motivo por el cual dicha regla no tiene importancia. Normalmente las propiedades
son irrelevantes porque se anulan o porque no son propiedades que se han heredado.
Tambin puede utilizar la parte inferior de la ficha CSS relevante para modificar las propiedades
de una seleccin. La cuadrcula editable permite cambiar los valores de cualquiera de las
propiedades que se muestran. Todos los cambios que realice a una seleccin se aplican de forma
inmediata; de este modo, puede previsualizar el trabajo a medida que lo vaya llevando a cabo.
Temas relacionados
Utilizacin del panel Estilos CSS en la pgina 299
Utilizacin de la ficha CSS relevante en la pgina 300
Creacin de un nuevo estilo CSS en la pgina 302
Cambio de atributos con el inspector de etiquetas en la pgina 456
Ficha Propiedades de CSS
La ficha Propiedades de CSS muestra las propiedades de la regla que est seleccionada en el panel
Estilos CSS (Ventana > Estilos CSS), en la vista Cdigo (Ver > Cdigo) o, si se hace doble clic en
una regla o propiedad, en la ficha CSS relevante (Ventana > Inspector de etiquetas).
Nota: la ficha Propiedades de CSS slo se muestra cuando se selecciona una regla en el panel
Estilos CSS, cuando se selecciona una regla en la vista Cdigo o cuando se hace doble clic en una
regla o propiedad en la ficha CSS relevante. Para regresar a la ficha CSS relevante, seleccione un
elemento de texto en una pgina HTML activa.
La ficha Propiedades de CSS permite ver fcilmente la configuracin de las propiedades de una
regla y proporciona una manera rpida de modificar cualquier estilo CSS incluido en el
documento actual o vinculado mediante una hoja de estilos adjunta. La cuadrcula editable
permite cambiar los valores de cualquiera de las propiedades que se muestran. Todos los cambios
que lleve a cabo en una seleccin se aplican inmediatamente; de este modo, puede previsualizar su
trabajo a medida que lo lleve a cabo.
Puede optar por visualizar las propiedades en una lista ordenada alfabticamente o en categoras
de propiedades haciendo clic en los botones Mostrar vista de categora y Mostrar vista de lista, que
se encuentran en la esquina superior izquierda de la ficha Propiedades de CSS.
Insercin de texto 289
La Vista de categora divide las propiedades CSS compatibles con Dreamweaver en ocho
categoras: fuente, fondo, bloque, borde, cuadro, lista, posicin y extensiones. Las propiedades de
cada categora se encuentran en una lista desplegable que se puede expandir o contraer haciendo
clic en el botn con el signo ms que aparece al lado del nombre de cada una. Las propiedades de
una categora estn clasificadas alfabticamente, con propiedades establecidas ordenadas en la
parte superior de la lista y que aparecen en color azul. La vista de categora es la vista
predeterminada.
La Vista de lista muestra todas las propiedades CSS compatibles con Dreamweaver en orden
alfabtico descendente, con las propiedades establecidas ordenadas en la parte superior de la lista
en color azul (vase la ilustracin siguiente).
Temas relacionados:
Utilizacin de la ficha Propiedades de CSS en la pgina 301
Insercin de texto
Dreamweaver permite insertar texto fcilmente en un documento escribindolo directamente,
copindolo y pegndolo o importndolo. Tambin puede insertar espacio adicional entre
caracteres y lneas en el texto.
Adicin de texto a un documento
Para aadir texto a un documento de Dreamweaver puede escribir texto directamente en la
ventana de documento de Dreamweaver o puede cortar y pegar texto. Tambin puede importar
texto de otros documentos (vase Importacin de documentos de datos de tabla en
la pgina 290).
Para aadir texto al documento, siga uno de estos procedimientos:
Escriba texto directamente en la ventana de documento.
Copie texto de otra aplicacin, cambie a Dreamweaver, coloque el punto de insercin en la
vista Diseo de la ventana de documento y seleccione Edicin > Pegar.
Dreamweaver no mantiene el formato de texto aplicado en la otra aplicacin, pero conserva los
saltos de lnea.
Importacin de documentos de datos de tabla
Puede importar datos de tabla en el documento guardando en primer lugar los archivos (por
ejemplo, archivos de Microsoft Excel o archivos de base de datos) en formato de texto delimitado.
Para informacin sobre cmo importar y aplicar formato a datos de tabla, vase Importacin y
exportacin de datos de tabla en la pgina 172. Para informacin sobre cmo importar texto
desde documentos HTML de Microsoft Word, vase Cmo abrir documentos existentes en
la pgina 77.
Tambin puede aadir texto de documentos de MS Excel a un documento de Dreamweaver
copiando y pegando el contenido del archivo de Excel en una pgina Web (vase Cmo copiar y
pegar texto de documentos de MS Office en la pgina 290).
Para importar datos tabulares:
1 Seleccione Archivo > Importar > Importar datos de tabla o bien Insertar > Objetos de tabla >
Importar datos de tabla.
Aparecer el cuadro de dilogo Importar datos de tabla.
2 Localice el archivo deseado o introduzca su nombre en el cuadro de texto.
3 Seleccione el delimitador empleado cuando se guard el archivo como texto delimitado. Las
opciones disponibles son: Tabulacin, Coma, Punto y coma, Dos puntos y Otro.
Si selecciona Otro, aparecer un campo en blanco al lado de la opcin. Introduzca el carcter
empleado como delimitador.
4 Utilice las restantes opciones para aplicar formato o definir la tabla en la que se importarn los
datos.
5 Haga clic en Aceptar cuando termine.
Cmo copiar y pegar texto de documentos de MS Office
Puede aadir contenido de un documento de Word o Excel a una pgina Web nueva o existente.
Nota: el tamao de archivo, una vez que Dreamweaver lo haya convertido en HTML, debe ser
inferior a 300 KB.
Al aadir contenido a una pgina, Dreamweaver convierte el contenido en HTML y lo copia en
una pgina Web. Puede editar el contenido en Dreamweaver; los cambios que lleve a cabo en el
archivo original de su equipo no aparecern en el sitio Web.
Nota: si utiliza Microsoft Office 97, no podr aadir el contenido de un documento de Word ni de
Excel; debe insertar un vnculo al documento. Para informacin, vase Insercin de un vnculo a un
documento de Word o Excel en la pgina 291.
Para aadir el contenido de un documento de Word o de Excel a una pgina Web nueva o
existente:
1 Abra la pgina Web en la que desea copiar el contenido del archivo Word o Excel.
2 Siga uno de estos procedimientos para seleccionar el archivo:
Arrastre el archivo desde su ubicacin actual a la pgina en la que desea que aparezca el
contenido. Si aparece el cuadro de dilogo Insertar un documento de Microsoft Word o
Excel, haga clic en la opcin para insertar el contenido del documento en la pgina Web y, a
continuacin, haga clic en Aceptar.
Aplicacin de formato a prrafos y a la estructura de la pgina 291
Seleccione Archivo > Importar > Documento de Word, o bien Archivo > Importar >
Documento de Excel. En el cuadro de dilogo Abrir, localice el archivo que desea aadir y, a
continuacin, haga clic en Abrir.
El contenido del documento de Word o Excel aparecer en la pgina.
Insercin de un vnculo a un documento de Word o Excel
Puede insertar un vnculo a un documento de Microsoft Word o Excel en una pgina existente.
Para crear un vnculo a un documento de Word o Excel:
1 Abra la pgina en la que desea que aparezca el vnculo.
2 Arrastre el archivo desde su ubicacin actual a la pgina Web de Dreamweaver en la que desea
que aparezca el vnculo.
Aparecer el cuadro de dilogo Insertar un documento de Microsoft Word o Excel.
3 Seleccione Crear un vnculo y, a continuacin, haga clic en Aceptar.
4 Si el documento para el que est creando un vnculo se encuentra fuera de la carpeta raz del
sitio, Dreamweaver le solicitar que copie el documento en dicha carpeta.
Al copiar el documento en la carpeta raz del sitio garantiza que el documento se encontrar
disponible en el momento de publicar el sitio Web.
5 Aparecer un vnculo al documento de Word o Excel en la pgina.
El texto del vnculo ser el nombre del archivo al que hace referencia. Para cambiar el texto del
vnculo despus de crear el vnculo, vase Administracin de vnculos en la pgina 338.
Aplicacin de formato a prrafos y a la estructura de la pgina
Dreamweaver admite todas las normas de Web que se utilizan para aplicar formato a pginas y
objetos. En esta seccin se describe cmo aplicar formato a prrafos, adems de cmo insertar
fechas y reglas horizontales.
Temas relacionados
Alineacin de texto en la pgina 292
Sangrar texto en la pgina 292
Adicin de espaciado de prrafo en la pgina 293
Utilizacin de reglas horizontales en la pgina 293
Insercin de fechas en la pgina 297
Aplicacin de formato a prrafos
Utilice el men Formato del inspector de propiedades o el submen Texto > Formato de prrafo
para aplicar las etiquetas estndar de prrafo y encabezado.
Para aplicar una etiqueta de prrafo o encabezado:
1 Site el punto de insercin en el prrafo o seleccione parte del texto del prrafo.
2 En el submen Texto > Formato de prrafo o en el men emergente Formato del inspector de
propiedades, elija una opcin:
Elija un formato de prrafo (por ejemplo, Encabezado 1, Encabezado 2, Texto con formato
predeterminado, etc.). La etiqueta HTML asociada con el estilo seleccionado (por ejemplo,
h1 para Encabezado 1, h2 para Encabezado 2, pre para Formato predeterminado, etc.) se
aplicar a todo el prrafo.
Seleccione Ninguno para quitar un formato de prrafo.
Cuando aplica una etiqueta de encabezado a un prrafo, Dreamweaver aade automticamente la
siguiente lnea de texto como un prrafo sencillo. Para cambiar esta configuracin, seleccione
Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh); a continuacin, en
la categora General, en la seccin Opciones de edicin, compruebe que la casilla Cambiar a
prrafo sencillo tras el encabezado no est activada.
Alineacin de texto
Puede alinear texto en la pgina utilizando el inspector de propiedades o el submen Texto >
Alinear. Asimismo, puede centrar cualquier elemento en una pgina usando el comando Texto >
Alinear > Centro.
Para alinear texto:
1 Seleccione el texto que desea alinear o, simplemente, inserte el puntero al principio del texto.
2 Haga clic en una opcin de alineacin (Izquierda, Derecha o Centro) en el inspector de
propiedades, o seleccione Texto > Alinear y seleccione un comando.
Para centrar elementos:
1 Seleccione el elemento que desea centrar (imagen, plug-in, tabla u otro elemento de pgina).
2 Seleccione Texto > Alinear > Centro.
Nota: se pueden alinear y centrar bloques completos de texto, pero no partes de un encabezado o de
un prrafo.
Sangrar texto
El comando Sangra aplica la etiqueta HTML blockquote al prrafo de texto, y aplica sangra a
ambos lados de la pgina.
Para aplicar y quitar sangra al texto:
1 Site el punto de insercin en el prrafo al que desea aplicar sangra.
2 Haga clic en el botn Sangra o Anular sangra del inspector de propiedades, seleccione Texto >
Sangra o Anular sangra, o seleccione Lista > Sangra o Anular sangra en el men contextual.
Nota: puede aplicar varias sangras a un prrafo. Cada vez que seleccione este comando, la sangra
del texto aumenta a ambos lados del documento.
Aplicacin de formato a prrafos y a la estructura de la pgina 293
Adicin de espaciado de prrafo
Dreamweaver funciona de forma similar a muchas aplicaciones de tratamiento de textos: presione
Intro (Windows) o Retorno (Macintosh) para crear un nuevo prrafo. Los navegadores Web
insertan automticamente una lnea en blanco de espacio entre los prrafos. Puede aadir una
nica lnea de espacio entre los prrafos mediante la insercin de un salto de lnea.
Para aadir un retorno de prrafo:
Presione Intro (Windows) o Retorno (Macintosh).
Para aadir un salto de lnea, siga uno de estos procedimientos:
Presione Mays+Intro (Windows) o Mays+Retorno (Macintosh).
En la categora Texto de la barra Insertar, seleccione Carcter y haga clic en el icono Salto de
lnea.
Seleccione Insertar > HTML > Caracteres especiales > Salto de lnea.
Utilizacin de reglas horizontales
Las reglas horizontales (lneas) son tiles para organizar la informacin. Puede separar visualmente
el texto y los objetos de una pgina con una o ms reglas.
Para crear una regla horizontal:
1 En la ventana de documento, site el punto de insercin en el lugar donde desea insertar una
regla horizontal.
Seleccione Insertar > HTML > Regla horizontal.
En la categora HTML de la barra Insertar, haga clic en el botn Regla horizontal.
Para modificar una regla horizontal:
1 En la ventana de documento, seleccione la regla horizontal.
2 Seleccione Ventana > Propiedades para abrir el inspector de propiedades y modificar las
propiedades que desee:
An y Al especifican el ancho y el alto de la regla en pxeles o como porcentaje del tamao de la
pgina.
Alinear especifica la alineacin de la regla (Predet., Izquierda, Centro o Derecha). Esta
configuracin slo es aplicable si el ancho de la regla es inferior al ancho de la ventana del
navegador.
Sombreado especifica si la regla debe trazarse con sombreado. Desactive esta opcin para
trazar la regla con un color slido.
Creacin de listas ordenadas y sin ordenar
Puede crear listas ordenadas (numeradas), listas sin ordenar (con vietas) y listas de definicin a
partir de texto existente o de texto nuevo que escriba en la ventana de documento.
Las listas de definicin no utilizan caracteres iniciales como puntos de vieta o nmeros y suelen
utilizarse en glosarios o descripciones. Adems, las listas se pueden anidar. Una lista anidada es
aqulla que contiene otras listas. Por ejemplo, en algunos casos puede resultar conveniente anidar
una lista ordenada o con vietas en otra numerada u ordenada.
Para informacin sobre un tipo concreto de lista y otras opciones para toda la lista o un elemento
especfico (por ejemplo, restablecer la numeracin, utilizar nmeros romanos en una lista
ordenada o establecer vietas cuadradas), vase Configuracin de opciones de propiedades de lista
en la Ayuda de Dreamweaver.
Para crear una lista nueva:
1 En el documento de Dreamweaver, coloque el punto de insercin en el lugar en el que desea
aadir la lista y siga uno de estos procedimientos:
Haga clic en el botn Lista ordenada o Lista sin ordenar del inspector de propiedades
Seleccione Texto > Lista y elija el tipo de lista deseado: Lista sin ordenar (con vietas), Lista
ordenada (numerada) o Lista de definicin.
El carcter inicial del elemento especificado de la lista aparecer en la ventana de documento.
2 Escriba el texto del elemento de la lista y presione Intro (Windows) o Retorno (Macintosh) para
crear otro elemento de la lista.
3 Para terminar la lista, presione dos veces Intro (Windows) o Retorno (Macintosh).
Para crear una lista usando texto existente:
1 Seleccione una serie de prrafos para convertirlos en una lista.
2 Haga clic en el botn Lista sin ordenar o Lista ordenada del inspector de propiedades, o
seleccione Texto > Lista y seleccione el tipo de lista deseado: Lista sin ordenar, Lista ordenada o
Lista de definicin.
Para crear una lista anidada:
1 Seleccione los elementos de lista que desea anidar.
2 Haga clic en el botn Sangra del inspector de propiedades o elija Texto > Sangra.
Dreamweaver sangrar el texto y crear una lista distinta con los atributos HTML de la lista
original.
3 Aplique un nuevo estilo o tipo de lista al texto sangrado siguiendo el procedimiento detallado.
Aplicacin de formato al texto
Puede aplicar formato de texto a una letra o a prrafos y bloques de texto enteros de un sitio.
Temas relacionados
Modificacin de combinaciones de fuentes en la pgina 296
Cambio del color del texto en la pgina 297
Insercin de fechas en la pgina 297
Insercin de caracteres especiales en la pgina 298
Adicin de espacio entre caracteres en la pgina 298
Configuracin y cambio de fuentes y estilos
Utilice las opciones del inspector de propiedades o el men Texto para establecer o cambiar las
caractersticas de fuente del texto seleccionado. Puede establecer el tipo, estilo (negrita, cursiva) y
el tamao de la fuente.
Aplicacin de formato al texto 295
Para establecer o cambiar las caractersticas de fuente:
1 Seleccione el texto. Si no hay texto seleccionado, el cambio se aplicar al texto que escriba a
continuacin.
2 Elija entre las opciones siguientes:
Para cambiar la fuente, seleccione una combinacin de fuentes en el inspector de
propiedades o en el submen Texto > Fuente.
Seleccione Predeterminada para quitar los tipos de fuente aplicados anteriormente y aplicar
la fuente predeterminada al texto seleccionado (la fuente predeterminada por el navegador o
la fuente asignada a la etiqueta en la hoja de estilos CSS).
Para cambiar el estilo de fuente, haga clic en Negrita o Cursiva en el inspector de
propiedades o elija un estilo de fuente (Negrita, Cursiva, Subrayado, etc.) en el submen
Texto > Estilo.
Nota: cuando utiliza el inspector de propiedades para aplicar el estilo en negrita o cursiva,
Dreamweaver aplica automticamente las etiquetas <strong> o <em>, respectivamente. Si
disea pginas para navegadores de la versin 3.0 o anterior, debe cambiar esta preferencia
en la categora General del cuadro de dilogo Preferencias (Edicin > Preferencias).
Para cambiar el tamao de fuente, elija un tamao (de 1 a 7) en el inspector de propiedades
o en el submen Texto > Tamao.
Los tamaos de fuente HTML son tamaos relativos, no de puntos. Los usuarios establecen
el tamao de puntos de la fuente predeterminada para sus navegadores. ste ser el tamao
de fuente que vern cuando elijan Predeterminada o 3 en el inspector de propiedades o el
submen Texto > Tamao. Los tamaos 1 y 2 aparecern ms pequeos que el tamao de
fuente predeterminado; los tamaos 4 a 7 aparecern ms grandes. Asimismo, las fuentes
suelen aparecer con un mayor tamao en Windows que en Macintosh, si bien Macintosh
Internet Explorer 5 utiliza el mismo tamao predeterminado que Windows.
Sugerencia: una forma de asegurar el uso del mismo tamao de fuente consiste en utilizar
estilos CSS con el tamao de fuente definido en pxeles. Para ms informacin sobre CSS,
consulte Utilizacin de estilos de hojas de estilos en cascada en la pgina 299.
Para aumentar o reducir el tamao del texto seleccionado, elija un tamao relativo (desde +
o 1 hasta +4 o 3) en el inspector de propiedades o en el men Texto > Cambio de tamao.
Nota: estos nmeros indican una diferencia relativa respecto al tamao de la fuente base. El
valor predeterminado de basefont es 3. Por tanto, un valor de +4 produce un tamao de fuente
de 3 + 4, es decir, 7. El valor mximo del tamao de fuente es 7. Si intenta definir uno ms alto,
se mostrar como 7. Dreamweaver no muestra la etiqueta basefont (que se encuentra en la
seccin head), aunque el tamao de fuente se mostrar correctamente en un navegador. Para
comprobarlo, compare el texto definido en 3 con el texto definido en +3.
Cambio del nombre de un estilo
Al aplicar formato a texto, Dreamweaver realiza un seguimiento de los estilos que crea en cada
pgina y crea una biblioteca de estilos que puede volver a utilizar. Esto facilita mucho la labor de
aplicar el mismo formato a un bloque de texto. Asimismo, se puede dar un aspecto ms coherente
a las pginas.
Para cambiar el nombre de un estilo:
1 Seleccione Cambiar nombre en el men emergente Estilo del inspector de propiedades de texto.
Aparecer el cuadro de dilogo Cambiar nombre de estilo.
2 Seleccione el estilo cuyo nombre desee cambiar en el men emergente Cambiar nombre de
estilo.
3 Introduzca un nombre nuevo en el campo de texto Nuevo nombre.
Modificacin de combinaciones de fuentes
Utilice el comando Editar lista de fuentes para establecer las combinaciones de fuentes que
aparecen en el inspector de propiedades y el submen Texto > Fuente.
Las combinaciones de fuentes determinan cmo muestra un navegador el texto de la pgina Web.
Un navegador utiliza la primera fuente de la combinacin que se encuentre en el sistema del
usuario; si no est instalada ninguna de las fuentes de la combinacin, el navegador mostrar el
texto de acuerdo con las preferencias que tenga definidas.
Para modificar las combinaciones de fuentes:
1 Seleccione Texto > Fuente > Editar lista de fuentes.
2 Seleccione la combinacin de fuentes en la lista de la parte superior del cuadro de dilogo.
Las fuentes de la combinacin seleccionada aparecern en la lista Fuentes elegidas, situada en la
esquina inferior izquierda del cuadro de dilogo. A la derecha se encuentra una lista con todas
las fuentes disponibles instaladas en el sistema.
Para aadir o quitar fuentes de una combinacin, haga clic en los botones de flecha (<< o
>>) entre las listas Fuentes elegidas y Fuentes disponibles.
Para aadir o quitar una combinacin de fuentes, haga clic en los botones ms (+) y menos
(-) de la parte superior del cuadro de dilogo.
Para aadir una fuente que no est instalada en el sistema, escriba el nombre de la fuente en
el cuadro de texto situado bajo la lista Fuentes disponibles y haga clic en el botn << para
aadirla a la combinacin. Aadir una fuente que no est instalada en el sistema resulta til,
por ejemplo, para especificar una fuente slo para Windows cuando desarrolla pginas con
Macintosh.
Para desplazarse por la lista de combinaciones de fuentes, haga clic en los botones de flecha
de la parte superior del cuadro de dilogo.
Para aadir una nueva combinacin a la lista de fuentes:
1 Seleccione Texto > Fuente > Editar lista de fuentes.
2 Seleccione una fuente de la lista de Fuentes disponibles y haga clic en el botn << para aadir la
fuente a la lista de Fuentes elegidas.
3 Repita el paso 2 con cada fuente de la combinacin.
Para aadir una fuente que no est instalada en el sistema, escriba el nombre de la fuente en el
campo de texto situado bajo la lista Fuentes disponibles y haga clic en el botn << para aadirla
a la combinacin. Aadir una fuente que no est instalada en el sistema resulta til, por
ejemplo, para especificar una fuente slo para Windows cuando desarrolla pginas con
Macintosh.
4 Cuando termine de seleccionar fuentes especficas, seleccione una familia genrica de fuentes en
el men Fuentes disponibles y haga clic en el botn << para pasar la familia genrica de fuentes
a la lista Fuentes elegidas.
Aplicacin de formato al texto 297
Las familias genricas de fuentes son: cursiva, fantasa, monoespacio, sans-serif y serif. Si
ninguna de las fuentes de la lista Fuentes elegidas est disponible en el sistema del usuario, el
texto aparecer en la fuente predeterminada asociada con la familia genrica de fuentes. Por
ejemplo, la fuente monoespacio predeterminada en la mayora de los sistemas es Courier.
Cambio del color del texto
Puede cambiar el color del texto seleccionado de modo que el nuevo color prevalezca sobre el
color establecido en Propiedades de la pgina. Si no se ha establecido ningn color de texto en
Propiedades de la pgina, se utilizar el negro como color predeterminado.
Para cambiar el color del texto:
1 Seleccione el texto.
Seleccione un color en la paleta de colores aptos haciendo clic en el selector de color del
inspector de propiedades.
Seleccione Texto > Color. Aparecer el cuadro de dilogo del selector de color del sistema.
Seleccione un color y haga clic en Aceptar.
Escriba el nombre del color o un nmero hexadecimal directamente en el campo del
Para definir el color predeterminado del texto, utilice el comando Modificar > Propiedades
de la pgina (vaseDefinicin de colores predeterminados de texto en la pgina 268).
Para restablecer el color predeterminado del texto:
1 En el inspector de propiedades, haga clic en el cuadro de color para abrir la paleta de colores
seguros para la Web.
2 Haga clic en el botn Tachado (el botn cuadrado blanco y atravesado por una lnea roja que
se encuentra en la esquina superior derecha).
Insercin de fechas
Dreamweaver proporciona un objeto Fecha que permite insertar la fecha actual con el formato
que prefiera (con o sin la hora) y ofrece la posibilidad de actualizarla cada vez que guarde el
archivo.
Nota: las fechas y horas que aparecen en el cuadro de dilogo Insertar fecha no son las actuales y
tampoco reflejan las que ver el usuario cuando visite el sitio. Slo son ejemplos de la forma en que
se puede presentar esta informacin.
Para insertar la fecha actual en un documento:
1 En la ventana de documento, site el punto de insercin en el lugar donde desea insertar la
fecha.
Seleccione Insertar > Fecha.
En la categora Comn de la barra Insertar, haga clic en el icono Fecha.
3 En el cuadro de dilogo que aparece, seleccione el formato de da de la semana, fecha y hora.
4 Si desea que la fecha insertada se actualice cada vez que guarde el documento, seleccione
Actualizar automticamente al guardar. Si desea que la fecha se convierta en texto normal
cuando se inserte y no se actualice automticamente, desactive esa opcin.
5 Haga clic en Aceptar para insertar la fecha.
Sugerencia: si ha seleccionado Actualizar automticamente al guardar, puede editar el formato de
fecha despus de insertarlo en el documento haciendo clic en el texto formateado y seleccionando
Editar formato de fecha en el inspector de propiedades.
Insercin de caracteres especiales
Algunos caracteres especiales se representan en HTML mediante un nombre o un nmero,
denominado entidad. HTML incluye nombres de entidad para caracteres como el smbolo de
copyright (©) el signo & (&) y el smbolo de marca comercial registrada (®). Cada
entidad tiene un nombre (como —) y un equivalente numrico (como ).
Sugerencia: HTML utiliza parntesis angulares <> en el cdigo, pero quiz necesite expresar los
caracteres especiales mayor que y menor que sin que Dreamweaver los interprete como cdigo.
En este caso, utilice > para mayor que (>) y ⁢ para menor que (<).
Desgraciadamente, muchos navegadores (especialmente los navegadores antiguos y los que no son
Netscape Navigator ni Internet Explorer) no muestran correctamente muchas de las entidades con
nombre.
Para insertar un carcter especial en un documento:
1 En la ventana de documento, site el punto de insercin en el lugar donde desea insertar un
carcter especial.
Seleccione el nombre del carcter en el submen Insertar > HTML > Caracteres especiales.
En la categora Texto de la barra Insertar, haga clic en el botn Caracteres y seleccione el
carcter que desea.
Sugerencia: existen otros muchos caracteres especiales disponibles; para seleccionar uno de ellos,
seleccione Insertar > HTML > Caracteres especiales > Otro o seleccione la categora HTML de la barra
Insertar, haga clic en el men Caracteres y seleccione Otros caracteres. Seleccione un carcter en el
cuadro de dilogo Insertar otro carcter y haga clic en Aceptar.
Adicin de espacio entre caracteres
HTML slo permite un espacio entre caracteres; para aadir espacio adicional en un documento
debe insertar un espacio indivisible. Puede establecer una preferencia para que se aadan espacios
indivisibles en un documento de forma automtica.
Para insertar un espacio indivisible, siga uno de estos procedimientos:
En la categora HTML de la barra Insertar, haga clic en el botn Caracteres y seleccione
Insertar espacio indivisible.
Seleccione Insertar > HTML > Caracteres especiales > Espacio indivisible.
Pulse Control+Mays+Espacio (Windows) o Comando+Mays+Espacio (Macintosh).
Para establecer una preferencia para aadir espacios indivisibles:
2 En la categora General, asegrese de que se ha seleccionado la opcin Permitir mltiples
espacios consecutivos.
Utilizacin de estilos de hojas de estilos en cascada 299
Utilizacin de estilos de hojas de estilos en cascada
De forma predeterminada, Dreamweaver utiliza hojas de estilos en cascada (CSS) para aplicar
formato al texto. Los estilos que aplique al texto mediante el inspector de propiedades o los
comandos de men crean reglas CSS que se incrustan en el encabezado del documento actual. Los
estilos CSS aportan gran flexibilidad y control al aspecto de la pgina, desde la posicin precisa de
elementos hasta el diseo de fuentes y estilos de texto concretos.
Adems de los estilos y de las hojas de estilos que crea, puede usar hojas de estilos suministradas
con Dreamweaver para aplicarlas a los documentos. (Vase Creacin de un documento basado en
un archivo de diseo de Dreamweaver en la pgina 74.)
Utilizacin del panel Estilos CSS
El panel Estilos CSS le permite crear, editar y quitar estilos CSS, adems de adjuntar hojas de
estilos externas a los documentos.
Abra el panel Estilos CSS:
Siga uno de estos procedimientos:
Seleccione Ventana > Estilos CSS.
Presione Mays+F11.
El panel Estilos CSS permite visualizar la definicin de los estilos asociados al documento
actual, adems de mostrar la jerarqua de los estilos. El panel Estilos CSS muestra la definicin
de los estilos CSS personalizados (de clase), las etiquetas HTML redefinidas y los estilos CSS
del selector.
Al crear o adjuntar hojas de estilos CSS, el nombre y los atributos del estilo aparecern en el
panel Estilos CSS. En este panel aparece una lista de todos los selectores definidos en todas las
etiquetas de estilo y hojas de estilo importadas o vinculadas externamente. Cuando se crea un
estilo personalizado (clase), aparece en el panel Estilos CSS, el men emergente Estilos del
inspector de propiedades y en el submen Texto > Estilos CSS.
Los botones que se muestran a continuacin se encuentran en la parte inferior del panel Estilos
CSS:
Adjuntar hoja de estilos abre el cuadro de dilogo Vincular hoja de estilos externa. Seleccione
una hoja de estilos externa para adjuntar o para importar al documento actual. Para informacin
sobre cmo adjuntar una hoja de estilos externa, vase Exportacin de estilos para crear una hoja
de estilos CSS en la pgina 304.
Nuevo estilo CSS abre el cuadro de dilogo Nuevo estilo CSS. Puede utilizar el cuadro de
dilogo Nuevo estilo CSS para seleccionar el tipo de estilo que va a crear, por ejemplo, para crear
un estilo de clase, redefinir una etiqueta HTML o definir un selector CSS. Para informacin sobre
la creacin de un nuevo estilo, vase Creacin de un nuevo estilo CSS en la pgina 302.
Editar hoja de estilos abre el cuadro de dilogo Editar hoja de estilos. Edite los estilos en el
documento actual o en una hoja de estilos externa. Para informacin sobre la actualizacin de una
hoja de estilos, vase Edicin de un estilo CSS en la pgina 306.
Eliminar estilo CSS elimina el estilo seleccionado del panel Estilos CSS, as como el formato de
cualquier elemento al que se haya aplicado dicho estilo.
Nota: haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control y haga clic
(Macintosh) en el panel Estilos CSS para abrir un men contextual de opciones de trabajo con
comandos de la hoja de estilos CSS.
Temas relacionados
Aplicacin de un estilo de clase en la pgina 303
Vinculacin o importacin de una hoja de estilos CSS externa en la pgina 304
Edicin de un estilo CSS en la pgina 306
Edicin de una hoja de estilos CSS en la pgina 307
Utilizacin de la ficha CSS relevante
Utilice la ficha CSS relevante para visualizar y modificar las propiedades de los elementos CSS
seleccionados en el documento actual. La ficha CSS relevante permite ver las reglas que afectan a
la seleccin actual, as como las etiquetas a las que hacen referencia.
Para abrir la ficha CSS relevante:
1 Seleccione Ventana > Inspector de etiquetas.
Aparecer el inspector de etiquetas.
2 Haga clic en la ficha CSS relevante para mostrar las propiedades de la pgina actual.
3 Seleccione un elemento del texto de la pgina actual para visualizar las propiedades del mismo.
La ficha CSS relevante muestra las reglas CSS de la seleccin actual, el nombre y la ubicacin
del archivo que contiene las reglas CSS y las propiedades relevantes de la regla.
Para editar una regla CSS mediante la ficha CSS relevante, siga uno de estos
procedimientos:
Haga doble clic en la regla de la ficha CSS relevante para empezar a editar el cdigo de la regla
y mostrar el inspector de propiedades de CSS.
Edite las propiedades de la regla mediante los controles que aparecen en la mitad inferior de la
ventana ficha CSS relevante.
Temas relacionados
Utilizacin de la ficha Propiedades de CSS
La ficha Propiedades de CSS permite editar directamente las propiedades y los valores de una regla
CSS. De forma predeterminada, las propiedades CSS se organizan en categoras. Para modificar
las propiedades de cada regla CSS, introduzca valores en los campos de texto y seleccione valores
de los mens emergentes asociados a cada propiedad.
Nota: mientras la ficha Propiedades de CSS muestra las propiedades de las hojas de estilos CSS de
slo lectura, estas propiedades no pueden modificarse. Esto permite visualizar las propiedades de
las hojas de estilos bloqueadas o de slo lectura, a la vez que se protegen los valores CSS que stas
definen. Dreamweaver intentar proteger todas las hojas de estilos que estn bloqueadas. Asimismo,
es posible que el programa le solicite que configure las preferencias del sitio de modo que pueda
protegerse el archivo.
Apertura de la ficha Propiedades de CSS:
1 Seleccione Ventana > Estilos CSS para mostrar el panel Estilos CSS.
2 Seleccione Ventana > Inspector de etiquetas para mostrar el panel Inspector de etiquetas.
3 Seleccione un estilo CSS en una de las ubicaciones siguientes:
Panel Estilos CSS
Hoja de estilos CSS abierta en la ventana de documento
Pgina HTML en la vista Cdigo con CSS incluido en la seccin head de la pgina
4 Cuando se selecciona un estilo CSS en una de estas ubicaciones, en el panel Inspector de
etiquetas se muestra la ficha Propiedades de CSS y las propiedades de ese estilo.
Puede seleccionar el modo en que desea visualizar las propiedades de CSS; para hacerlo, haga
clic en el botn Mostrar vista de categora o Mostrar vista de lista, que se encuentran en la
esquina superior izquierda de la ficha Propiedades de CSS.
La Vista de categora divide las propiedades CSS compatibles con Dreamweaver en ocho
categoras: fuente, fondo, bloque, borde, cuadro, lista, posicin y extensiones. Las propiedades
de cada categora se encuentran en una lista desplegable que se puede expandir o contraer
haciendo clic en el botn con el signo ms que aparece al lado del nombre de cada una. Las
propiedades de una categora estn clasificadas alfabticamente, con propiedades establecidas
ordenadas en la parte superior de la lista y que aparecen en color azul. La vista de categora es la
vista predeterminada.
La Vista de lista muestra todas las propiedades CSS compatibles con Dreamweaver en orden
alfabtico descendente, con las propiedades configuradas ordenadas en la parte superior de la
lista en texto de color azul.
Temas relacionados
Creacin de un nuevo estilo CSS
Puede crear un estilo CSS para automatizar la aplicacin de formato a etiquetas HTML o a rangos
de texto identificados mediante un atributo class.
Para crear un estilo CSS nuevo:
1 Site el punto de insercin en el documento y siga uno de estos procedimientos para abrir el
cuadro de dilogo Nuevo estilo CSS.
En el panel Estilos CSS (Ventana > Estilos CSS), haga clic en el botn Nuevo estilo CSS (+)
situado en la parte inferior derecha del panel.
En el inspector de propiedades de texto, seleccione Administrar estilos en el men
emergente Estilo y haga clic en Nuevo en el cuadro de dilogo que se abre.
En la ficha CSS relevante (seleccione Ventana > Inspector de etiquetas y haga clic en la ficha
CSS relevante), haga clic con el botn derecho del ratn y seleccione Nueva regla en el men
contextual.
Seleccione Texto > Estilos CSS > Nuevo estilo CSS.
Aparecer el cuadro de dilogo Nuevo estilo CSS.
2 Defina el tipo de estilo CSS que desea crear:
Para crear un estilo personalizado que se pueda aplicar como atributo class a un rango o un
bloque de texto, seleccione Clase (puede aplicarse a cualquier etiqueta) y escriba el nombre
del estilo en el cuadro de texto Nombre.
Nota: los nombres de clase deben comenzar por un punto y pueden contener cualquier
combinacin alfanumrica (por ejemplo .myhead1). Si no introduce el punto inicial,
Dreamweaver lo har de forma automtica.
Para redefinir el formato predeterminado de una etiqueta HTML especfica, seleccione
Redefinir etiqueta HTML. En el campo Etiqueta, introduzca una etiqueta HTML o elija
una en el men emergente.
Para redefinir el formato predeterminado de una combinacin concreta de etiquetas que
contengan un cdigo especfico de atributo Id, seleccione Utilizar selector CSS. En el
campo Selector, introduzca una o ms etiquetas HTML o eljalas en el men emergente. Los
selectores (conocidos como selectores de seudo-clase) disponibles en el men emergente son
a:activos, a:activable, a:vnculo y a:visitado.
3 Seleccione la ubicacin donde se definir el estilo:
Para crear una hoja de estilos externa, elija Nuevo archivo de hoja de estilos.
Para incrustar el estilo en el documento actual, seleccione Slo este documento.
Aparecer el cuadro de dilogo Definicin de estilos.
5 Seleccione las opciones de estilo que desea establecer para el estilo CSS nuevo.
6 Cuando termine de configurar los atributos de estilo, haga clic en Aceptar.
Para informacin sobre la configuracin de estilos CSS especficos, vanse los siguientes temas en
la Ayuda de Dreamweaver:
Definicin de propiedades de tipo CSS
Definicin de propiedades de fondo de estilos CSS
Definicin de propiedades de bloque de estilos CSS
Definicin de propiedades de cuadro de estilos CSS
Definicin de propiedades de borde de estilos CSS
Definicin de propiedades de lista de estilos CSS
Definicin de propiedades de posicin de estilos CSS
Definicin de propiedades de extensiones de estilos CSS
Temas relacionados
Aplicacin de un estilo de clase en la pgina 303
Aplicacin de un estilo de clase
Los estilos de clase son los nicos tipos de estilo CSS que se pueden aplicar a cualquier texto del
documento, independientemente de las etiquetas que controlen dicho texto. Todos los estilos de
clase asociados con el documento actual se muestran en el panel Estilos CSS (con un punto (.) al
principio del nombre) y en el men emergente Estilo del inspector de propiedades de texto.
La mayora de los estilos se actualiza inmediatamente; sin embrago, es recomendable que obtenga
una vista previa de su pgina en un navegador para comprobar que el estilo se ha aplicado
correctamente. Cuando se aplican dos o ms estilos al mismo texto, stos pueden entrar en
conflicto y producir resultados imprevistos. Para ms informacin, consulte Estilos CSS en
conflicto en la pgina 284.
Sugerencia: al obtener una vista previa de los estilos definidos en una hoja de estilos CSS externa,
no olvide guardar la hoja de estilos para asegurarse de que los cambios se vern reflejados en la vista
previa de la pgina en un navegador.
Para aplicar un estilo CSS personalizado:
1 En el documento, seleccione el texto al que desea aplicar un estilo CSS.
Site el punto de insercin en un prrafo para aplicar el estilo a todo el prrafo.
Si selecciona un rango de texto dentro de un prrafo, el estilo CSS slo afectar al rango
seleccionado.
Para especificar la etiqueta exacta a la que se deber aplicar el estilo CSS, seleccinela con el
selector de etiquetas situado en la parte inferior izquierda de la ventana de documento.
2 Para aplicar un estilo de clase, siga uno de estos procedimientos:
En el panel Estilos CSS (Ventana > Estilos CSS), haga clic con el botn derecho del ratn en
el nombre del estilo que desea aplicar y seleccione Aplicar en el men contextual.
En el inspector de propiedades de texto, seleccione el estilo de clase que desea aplicar en el
men emergente Estilo.
En la ventana de documento, haga clic con el botn derecho del ratn (Windows) o
mantenga presionada la tecla Control y haga clic (Macintosh) en el texto seleccionado y, en
el men contextual que aparece, seleccione Estilos CSS. A continuacin, seleccione el estilo
que desea aplicar.
Seleccione Texto > Estilos CSS y, en el submen, seleccione el estilo que desea aplicar.
Para borrar un estilo personalizado de una seleccin:
1 Seleccione el objeto o texto cuyo estilo desea eliminar.
En el inspector de propiedades de texto, seleccione Ninguno en el men emergente Estilo.
Haga clic con el botn derecho del ratn en la regla aplicada que desea eliminar en el
seguimiento de regla CSS y seleccione Establecer clase > Ninguno en el men contextual.
Temas relacionados
Exportacin de estilos para crear una hoja de estilos CSS
Puede exportar estilos desde un documento para crear una nueva hoja de estilos CSS. A
continuacin, puede establecer vnculos con otros documentos para aplicar estos estilos.
Para exportar estilos CSS desde un documento y crear una hoja de estilos CSS:
1 Seleccione Archivo > Exportar > Estilos CSS o seleccione Texto > Estilos CSS > Exportar.
Aparecer el cuadro de dilogo Exportar estilos como archivo CSS.
2 Introduzca un nombre para la hoja de estilos y haga clic en Guardar.
El estilo se guardar como una hoja de estilos CSS.
Temas relacionados
Utilizacin de hojas de estilo de tiempo de diseo en la pgina 308
Vinculacin o importacin de una hoja de estilos CSS externa
Si edita una hoja de estilos CSS externa, todos los documentos vinculados a esa hoja se
actualizarn para reflejar los cambios. Puede exportar los estilos CSS de un documento para crear
una nueva hoja de estilos CSS, as como adjuntar o vincular dichos estilos a una hoja de estilos
externa para aplicarlos.
Naturalmente, puede adjuntar a las pginas las hojas de estilo que cree o copie en el sitio. Adems,
Dreamweaver se entrega con hojas de estilos prediseadas que pueden trasladarse
automticamente al sitio y adjuntarse a las pginas. Para informacin sobre la utilizacin de hojas
de estilos de diseo suministradas con Dreamweaver, vase Creacin de un documento basado en
un archivo de diseo de Dreamweaver en la pgina 74.
Para informacin sobre cmo aplicar un estilo, vase Aplicacin de un estilo de clase en
la pgina 303.
Para establecer vnculos o importar una hoja de estilos CSS externa:
1 Abra el panel Estilos CSS siguiendo uno de estos procedimientos:
Presione Mays + F11.
2 En panel Estilos CSS, haga clic en el botn Adjuntar hoja de estilos.
Aparecer el cuadro de dilogo Vincular hoja de estilos externa.
3 En el cuadro de dilogo Adjuntar hoja de estilos externa, siga uno de estos procedimientos:
Haga clic en Examinar para localizar una hoja de estilos CSS externa.
Escriba la ruta de la hoja de estilos en el cuadro Archivo/URL.
4 En Aadir como, seleccione una de las siguientes opciones:
Para crear un vnculo entre el documento actual y la hoja de estilos externa, seleccione
Vincular. De esta forma se crea una etiqueta de vnculo href en el cdigo HTML y conduce
al URL al lugar en el que se encuentra la hoja de estilos publicada. Este mtodo es
compatible con Microsoft Internet Explorer y Netscape Navigator.
No puede utilizar una etiqueta de vnculo para aadir una referencia de una hoja de estilos
externa a otra. Si desea anidar hojas de estilos, utilice una directiva de importacin. Algunos
navegadores tambin reconocen la directiva de importacin en una pgina (en lugar de en
hojas de estilos solamente). Existen diferencias sutiles en el modo en que se solucionan las
propiedades en conflicto cuando se solapan reglas en hojas de estilos externas que estn
vinculadas y en el modo que en que solucionan cuando estn importadas a una pgina. Si
desea importar una hoja de estilos externa, en lugar de crear un vnculo a la misma,
seleccione Importar.
5 Haga clic en el botn Vista previa para verificar que la hoja de estilos aplica los estilos que desea
en la pgina actual.
Si los estilos aplicados no tienen el efecto que esperaba, haga clic en Cancelar para eliminar la
hoja de estilos. La pgina recuperar su aspecto anterior.
El nombre de la hoja de estilos CSS externa aparece en el panel Estilos CSS y los estilos
personalizados (clase) aparecen precedidos por el identificador de la hoja de estilos externa.
Temas relacionados
Exportacin de estilos para crear una hoja de estilos CSS en la pgina 304
Utilizacin de hojas de estilos de muestra de Dreamweaver
Dreamweaver dispone de hojas de estilos de muestra que pueden aplicarse a las pginas o que se
pueden utilizar como puntos de partida para desarrollar estilos propios.
Para aplicar hojas de estilos de Dreamweaver:
1 Abra el panel Estilos CSS siguiendo uno de estos procedimientos:
Presione Mays+F11.
2 En panel Estilos CSS, haga clic en el botn Adjuntar hoja de estilos externa.
Aparecer el cuadro de dilogo Vincular hoja de estilos externa.
3 En el cuadro de dilogo Adjuntar hoja de estilos externa, haga clic en Hojas de estilos de
muestra.
Aparecer el cuadro de dilogo Hojas de estilos de muestra.
4 Seleccione una hoja de estilos del cuadro de lista.
Al seleccionar las hojas de estilos del cuadro de lista, el panel Vista previa mostrar el formato
de texto y de color de la hoja de estilos seleccionada.
5 Haga clic en el botn Vista previa para aplicar la hoja de estilos y verificar que se aplican los
estilos que desea en la pgina actual.
Si los estilos aplicados no tienen el efecto que esperaba, seleccione otra hoja de estilos de la lista
y haga clic en el botn Vista previa para aplicar dichos estilos.
6 De forma predeterminada, Dreamweaver guarda la hoja de estilos en una carpeta denominada
CSS justo debajo de la raz del sitio definido para la pgina. Si esa carpeta no existe,
Dreamweaver la crear. Para guardar el archivo en otra ubicacin, haga clic en Examinar y
busque otra carpeta.
7 Cuando encuentre una hoja de estilos cuyas reglas de formato coincidan con sus criterios de
diseo, haga clic en Aceptar.
Edicin de un estilo CSS
Puede editar fcilmente tanto estilos internos como externos que haya aplicado al documento.
Al editar una hoja de estilos CSS que controla el texto del documento, cambiar inmediatamente
el formato de todo el texto controlado por dicha hoja de estilos. La edicin de una hoja de estilos
externa afecta a todos los documentos vinculados a ella.
Puede configurar un editor externo para la edicin de las hojas de estilos. Para informacin sobre
la configuracin de un editor externo, vase Inicio de un editor externo de archivos multimedia
en la pgina 369.
Para editar un estilo CSS:
1 Seleccione Ventana > Inspector de etiquetas.
2 En el inspector de seleccin, haga clic en la ficha CSS para visualizar los estilos CSS en el
documento actual.
3 Coloque el punto de insercin en el texto cuyo estilo CSS desea editar.
Cada estilo CSS que seleccione en la pgina aparece en el panel CSS.
4 Haga clic en el estilo que desea editar para seleccionarlo y luego siga uno de estos
procedimientos:
Haga doble clic en el estilo seleccionado en el panel Estilos CSS.
Control y haga clic (Macintosh) y, a continuacin, seleccione Editar regla en el men de
contenido.
Haga clic en el botn Editar estilo, que se encuentra en la parte inferior del panel CSS.
Seleccione el estilo en el panel CSS y edite las propiedades del mismo en el inspector de
propiedades CSS.
Los cambios que realice se aplican inmediatamente al documento actual; de este modo, puede
obtener una vista previa de los cambios a medida que los lleve a cabo. Si edita estilos
almacenados en una hoja de estilos externa, asegrese de guardar los cambios para que se
apliquen las actualizaciones.
5 Cuando haya terminado de editar el estilo, guarde el trabajo realizado.
Si modifica los estilos CSS de una hoja de estilos que se utiliza en varios documentos, dichos
cambios tambin se reflejarn en estas pginas.
Actualizacin de hojas de estilos CSS en un sitio de Contribute 307
Temas relacionados
Utilizacin de la ficha Propiedades de CSS en la pgina 301
Edicin de una hoja de estilos CSS
Una hoja de estilos CSS suele incluir uno o varios estilos. Puede editarlos por separado en una
hoja de estilos CSS (vase Edicin de un estilo CSS en la pgina 306), pero en ciertas ocasiones
es posible que desee editar varios estilos.
El cuadro de dilogo Editar hoja de estilos le permite trabajar con hojas de estilos de distintas
maneras. Utilice este cuadro de dilogo para crear un vnculo a una hoja de estilos CSS externa,
para crear una hoja de estilos CSS nueva o para editar, duplicar o eliminar una hoja de estilos
CSS.
Para editar una hoja de estilos CSS:
1 En el panel Estilos CSS, haga clic en la hoja de estilos que desea editar para seleccionarla y, a
continuacin, siga uno de estos procedimientos:
Haga clic en el botn Editar hoja de estilos situado en la parte inferior del panel Estilos CSS.
Haga clic con el botn derecho del ratn en la hoja de estilos y seleccione Editar hoja de
estilos en el men contextual. En el cuadro de dilogo que aparece a continuacin,
seleccione el estilo que desea editar y haga clic en Editar.
Se abrirn los estilos para la hoja de estilos CSS seleccionada.
2 En el cuadro de dilogo, seleccione el estilo que desea editar y haga clic en Editar.
Aparecer el cuadro de dilogo Definicin de estilo CSS.
3 Modifique los estilos como desee y haga clic en Aceptar.
Temas relacionados
Actualizacin de hojas de estilos CSS en un sitio de Contribute
Los usuarios de Contribute no pueden realizar cambios en hojas de estilos CSS. Para cambiar una
hoja de estilos para un sitio de Contribute, utilice Dreamweaver.
A continuacin se enumeran factores importantes que debe tener en cuenta a la hora de actualizar
hojas de estilos para un sitio de Contribute:
Si realiza cambios en una hoja de estilos mientras un usuario de Contribute est editando una
pgina que emplea dicha hoja de estilos, el usuario no ver los cambios realizados en la hoja de
estilos hasta que publique la pgina.
Si elimina un estilo de una hoja de estilos, el nombre del estilo no se eliminar de las pginas
que utilicen dicha hoja de estilos, pero, dado que ya no existe, no se mostrar tal como espera el
usuario de Contribute. Por consiguiente, si un usuario le informa de que no ocurre nada
cuando aplica un estilo concreto, es posible que el problema se deba a que el estilo ha sido
eliminado de la hoja de estilos.
Para editar una hoja de estilos CSS en un sitio de Contribute:
1 Edite la hoja de estilos utilizando las herramientas de edicin de hojas de estilos de
Dreamweaver. Para ms informacin, consulte Utilizacin de estilos de hojas de estilos en
cascada en la pgina 299.
2 Solicite a todos los usuarios de Contribute que estn trabajando en el sitio que publiquen las
pginas que emplean dicha hoja de estilos y que, a continuacin, vuelvan a editar las pginas
para ver la nueva hoja de estilos.
Utilizacin de hojas de estilo de tiempo de diseo
Las hojas de estilos de tiempo de diseo le permiten mostrar u ocultar el diseo aplicado por una
hoja de estilos CSS mientras trabaja con un documento de Dreamweaver. Por ejemplo, puede
utilizar esta opcin para aprovechar o evitar el efecto de las hojas de estilos exclusivas de
Macintosh o Windows mientras disea una pgina.
Las hojas de estilos de tiempo de diseo slo se aplican mientras se trabaja en el diseo de un
documento de Dreamweaver; cuando la pgina se muestra en la ventana de un navegador,
aparecen slo los estilos que realmente estn adjuntos o incrustados en el documento que aparece
en un navegador.
Para mostrar u ocultar la hoja de estilos CSS de tiempo de diseo:
1 Abra el cuadro de dilogo Hojas de estilo de tiempo de diseo siguiendo uno de estos
procedimientos:
Haga clic con el botn derecho en el panel Estilos CSS y, en el men contextual, seleccione
Tiempo de diseo.
Seleccione Texto > Estilos CSS > Tiempo de diseo.
2 En el cuadro de dilogo, defina las opciones para que se muestre o se oculte la hoja de estilos
seleccionada:
Para mostrar una hoja de estilos en tiempo de diseo, haga clic en el botn ms (+) situado
sobre Mostrar slo en tiempo de diseo. En el cuadro de dilogo Seleccionar archivo, vaya a
la hoja de estilos CSS que desea mostrar.
Para ocultar una hoja de estilos CSS, haga clic en el botn ms (+) situado sobre Ocultar en
tiempo de diseo. En el cuadro de dilogo Seleccionar archivo, vaya a la hoja de estilos CSS
que desea ocultar.
Para eliminar una hoja de estilos de cualquier lista, haga clic en la hoja de estilos que desea
eliminar y haga clic en el botn menos () correspondiente.
3 Haga clic en Aceptar para cerrar el cuadro de dilogo.
El panel Estilos CSS se actualiza con el nombre de la hoja de estilos seleccionada y con un
indicador, oculto o diseo, que refleja el estado de la hoja de estilos.
Temas relacionados
Exportacin de estilos para crear una hoja de estilos CSS en la pgina 304
Vinculacin o importacin de una hoja de estilos CSS externa en la pgina 304
Cmo buscar y reemplazar texto 309
Comprobacin de la ortografa
Utilice el comando Ortografa del men Texto para revisar la ortografa del documento actual. El
comando Ortografa no tiene en cuenta las etiquetas HTML ni los valores de atributo.
De forma predeterminada, el corrector ortogrfico utiliza el diccionario de ingls de Estados
Unidos. Para cambiar el diccionario, seleccione Edicin > Preferencias > General (Windows) o
Dreamweaver > Preferencias > General (Macintosh) y, a continuacin, seleccione el diccionario
que desea utilizar en el men emergente Diccionario ortogrfico. Se pueden descargar
diccionarios de otros idiomas desde el Centro de soporte de Dreamweaver Support en
www.macromedia.com/dreamweaver_support_es/.
Para comprobar y corregir la ortografa:
1 Seleccione Texto > Ortografa o presione Mays+F7.
Cuando Dreamweaver encuentra una palabra que no reconoce, aparece el cuadro de dilogo
Ortografa.
2 Seleccione la opcin adecuada teniendo en cuenta las discrepancias mostradas.
Cmo buscar y reemplazar texto
Puede utilizar el comando Buscar y reemplazar para buscar texto as como etiquetas HTML y
atributos en un documento o en un conjunto de documentos.
Nota: para buscar archivos en un sitio, utilice diferentes comandos: Localizar en sitio local y Localizar
en sitio remoto.
Para buscar texto y cdigo HTML dentro de los documentos:
1 Abra el documento en el que se debe realizar la bsqueda o seleccione los documentos o una
carpeta del panel Archivos.
2 Seleccione Edicin > Buscar y reemplazar.
Se abre el cuadro de dilogo Buscar y reemplazar.
3 Especifique los archivos en los que se debe buscar y, a continuacin, indique el tipo de bsqueda
que desea realizar, as como el texto o las etiquetas que desea buscar. Opcionalmente, especifique
el texto de sustitucin. A continuacin, haga clic en uno de los botones de bsqueda o uno de
los botones de sustitucin.
4 Una vez que haya terminado, haga clic en el botn Cerrar para cerrar el cuadro de dilogo.
Para volver a buscar sin visualizar el cuadro de dilogo Buscar y reemplazar:
Presione F3 (Windows) o Comando+G (Macintosh).
311
CAPTULO 14
Insercin de imgenes
En Macromedia Dreamweaver MX 2004, puede trabajar en la vista Diseo o en la vista Cdigo
para insertar imgenes en un documento. Al aadir imgenes a un documento de Dreamweaver,
puede establecer o modificar las propiedades de imagen y ver los cambios directamente en la
Para establecer un flujo de trabajo eficaz durante el diseo Web, puede seleccionar una preferencia
de editor de imgenes e iniciarlo automticamente para editar imgenes mientras trabaja en
Dreamweaver.
Imgenes en la pgina 312
Cambio del tamao de una imagen en la pgina 318
Recorte de una imagen en la pgina 319
Optimizacin de una imagen mediante Fireworks en la pgina 319
Ajuste del brillo y del contraste de una imagen en la pgina 320
Perfilado de una imagen en la pgina 320
Creacin de una imagen de sustitucin en la pgina 321
Utilizacin de un editor de imgenes externo en la pgina 322
Aplicacin de comportamientos a imgenes en la pgina 322
312 Captulo 14: Insercin de imgenes
Imgenes
Existen muy diversos formatos de archivo grfico, aunque para pginas Web generalmente se
utilizan tres formatos de archivo grfico: GIF, JPEG y PNG. Actualmente, GIF y JPEG son los
formatos de archivo que cuentan con mayor compatibilidad y pueden verse en la mayora de los
navegadores.
Los archivos PNG son los ms adecuados para casi cualquier tipo de grfico Web debido a su
flexibilidad y su tamao de archivo reducido; no obstante, la visualizacin de imgenes PNG slo
es parcialmente compatible con los navegadores Microsoft Internet Explorer (4.0 y posteriores) y
Netscape Navigator (4.04 y posteriores). De manera que, a no ser que est diseando para un tipo
de usuario concreto que utilice un navegador compatible con el formato PNG, deber utilizar
archivos GIF o JPEG para poder llegar a ms usuarios.
Los archivos GIF (Formato de intercambio de grficos, Graphic Interchange Format) utilizan
un mximo de 256 colores y son idneos para visualizar imgenes con tonos no continuos o
imgenes con grandes reas de color homogneo, como barras de navegacin, botones, iconos,
logotipos u otras imgenes con colores y tonos uniformes.
El formato de archivo JPEG (Grupo conjunto de expertos fotogrficos, Joint Photographic
Experts Group) es el mejor para imgenes fotogrficas o de tonos continuos, ya que puede
contener millones de colores. A medida que la calidad de un archivo JPEG aumenta, tambin lo
hace su tamao y el tiempo que tarda en descargarse. A menudo es posible conseguir un equilibrio
adecuado entre la calidad de la imagen y el tamao de archivo comprimiendo el archivo JPEG.
El formato de archivo PNG (Grupo de redes porttiles, Portable Network Group) es un
sustituto del formato GIF sin patente compatible con imgenes con color indexado, escala de
grises y color verdadero, adems de ser compatible con el canal alfa para transparencias. PNG es el
formato de archivo nativo de Macromedia Fireworks. Los archivos PNG conservan la
informacin original de capa, vector, color y efectos (como por ejemplo las sombras), y todos los
elementos pueden editarse siempre que se desee. Los archivos se deben guardar con la extensin
.png para que Dreamweaver pueda reconocerlos como tales.
Edicin de imgenes en Dreamweaver
Dreamweaver proporciona unas funciones bsicas de edicin de imgenes que permiten modificar
las imgenes sin tener que iniciar una aplicacin externa de edicin de imgenes como
Macromedia Fireworks. Las herramientas de edicin de imgenes de Dreamweaver estn
diseadas para trabajar con diseadores de contenido que crean archivos de imgenes que se
pueden utilizar en el sitio Web.
Nota: no es necesario tener instalado Macromedia Fireworks en el equipo para poder utilizar las
funciones de edicin de imgenes de Dreamweaver.
Dreamweaver incluye las siguientes funciones de edicin de imgenes:
Nuevo muestreo de imgenes aade o quita pxeles en archivos de imagen JPEG y GIF cuyo
tamao se ha cambiado a fin de que se parezcan lo mximo posible a la imagen original. Al
muestrear de nuevo una imagen, se reduce el tamao del archivo de imagen, lo cual mejora el
rendimiento de la descarga.
Insercin de una imagen 313
Cuando cambie el tamao de una imagen en Dreamweaver, puede volver a muestrearla para
adaptarla a sus nuevas dimensiones. Al muestrear de nuevo un objeto de mapa de bits, se aaden
o quitan pxeles en la imagen para hacerla mayor o menor. Si se muestrea una imagen con una
resolucin ms alta, la prdida de calidad suele ser poco importante. Sin embargo, si se muestrea
con una resolucin ms baja, siempre se pierden datos y se reduce la calidad.
Recorte permite editar imgenes mediante la reduccin del rea de la imagen. Normalmente,
suele recortarse una imagen para poner ms nfasis en el tema de la imagen y eliminar aspectos no
deseados alrededor del centro de inters de la imagen.
Brillo/Contraste modifica el contraste o el brillo de los pxeles de la imagen. Esto afecta a los
resaltados, sombras y medios tonos de la imagen. Normalmente, la funcin Brillo/Contraste se
utiliza para corregir imgenes que son demasiado oscuras o demasiado claras.
Perfilado ajusta el enfoque de una imagen mediante el aumento del contraste de los bordes de
dentro de la imagen. Cuando se explora una imagen o se realiza una foto digital, la accin
predeterminada de la mayora del software de captura de imgenes consiste en suavizar los bordes
de los objetos que aparecen en la imagen. Esto evita que se pierdan detalles minsculos en los
pxeles de los que se componen las imgenes digitales. Sin embargo, para mostrar estos detalles en
los archivos de imagen digital, a menudo es necesario perfilar la imagen, con lo que aumenta el
contraste de los bordes y la imagen aparece ms definida.
Nota: las funciones de edicin de imgenes de Dreamweaver slo se aplican a los formatos de
archivo de imagen JPEG y GIF. Los dems formatos de archivo de imagen de mapa de bits no
pueden editarse mediante estas funciones.
Temas relacionados
Insercin de una imagen
Al insertar una imagen en un documento de Dreamweaver, el programa genera automticamente
una referencia al archivo de imagen en el cdigo HTML. Para asegurarse de que esta referencia es
correcta, el archivo de imagen deber estar en el sitio actual. Si no lo est, Dreamweaver le
preguntar si desea copiar el archivo en el sitio.
Asimismo, las imgenes se pueden insertar de forma dinmica. Las imgenes dinmicas son
aquellas que cambian con frecuencia. Por ejemplo, en los sistemas de rotacin de rtulos
publicitarios es necesario seleccionar de forma aleatoria un nico rtulo de una lista de posibles
rtulos y, despus, mostrar dinmicamente la imagen del rtulo seleccionado cuando se solicite
una pgina. Para ms informacin, consulte Conversin de imgenes en contenido dinmico en
la pgina 568.
Para insertar una imagen:
1 Coloque el punto de insercin en el lugar de la ventana de documento en el que desea que
aparezca la imagen y, a continuacin, siga uno de estos procedimientos:
En la categora Comn de la barra Insertar, haga clic en el icono Imagen.
En la categora Comn de la barra Insertar, arrastre el icono Imagen a la ventana de
documento (o a la ventana de vista Cdigo si est trabajando en el cdigo).
Seleccione Insertar > imagen.
Arrastre una imagen desde el panel Activos (Ventana > Activos) hasta la posicin deseada de
la ventana de documento. A continuacin, siga con el paso 3.
Arrastre una imagen desde el panel Sitio hasta la posicin deseada de la ventana de
documento. A continuacin, siga con el paso 3.
Arrastre una imagen desde el escritorio hasta la posicin deseada de la ventana de
documento. A continuacin, siga con el paso 3.
2 En el cuadro de dilogo que aparece, siga uno de estos procedimientos:
Seleccione Sistema de archivos para elegir un archivo grfico.
Seleccione Fuente de datos para elegir un origen de imagen dinmica.
3 Busque y seleccione el origen de imagen o contenido que desee insertar.
Si est trabajando en un documento que no est guardado, Dreamweaver genera una referencia
de archivo:// para el archivo de imagen. Al guardar el documento en cualquier lugar del sitio,
Dreamweaver convierte la referencia en una ruta relativa al documento. Haga clic en el botn
Ayuda del cuadro de dilogo para ver informacin sobre sus opciones.
Aparece el cuadro Atributos de accesibilidad de la etiqueta de imagen si se ha activado el cuadro
de dilogo en Preferencias (vase Optimizacin del espacio de trabajo para el diseo de
pginas accesibles en la pgina 56).
5 Introduzca los valores en los cuadros de texto Texto alternativo y Descripcin larga y haga clic
en Aceptar.
Nota: puede completar uno o ambos cuadros de texto, en funcin de sus necesidades.
La imagen aparece en el documento.
Nota: si presiona Cancelar, la imagen aparece en el documento, pero Dreamweaver no le asocia
etiquetas o atributos de accesibilidad.
6 En el inspector de propiedades (Ventana > Propiedades), establezca las propiedades de la
imagen.
Para ms informacin, consulte Configuracin de propiedades de imagen en la Ayuda de
Dreamweaver.
Para editar los atributos de accesibilidad de la imagen, vase Edicin de los atributos de
accesibilidad de una imagen en la pgina 315.
Temas relacionados
Configuracin de una imagen de fondo o un color de fondo de pgina en la pgina 266
Edicin de los atributos de accesibilidad de una imagen
Si ha insertado los atributos de accesibilidad de una imagen (vase Insercin de una imagen en
la pgina 313), puede editar dichos valores en cdigo HTML.
Para editar los valores de accesibilidad de una imagen:
1 En la ventana de documento, seleccione la imagen.
Edite los atributos de imagen apropiados en la vista Cdigo.
Control y haga clic (Macintosh) y, a continuacin, seleccione Editar cdigo de etiqueta.
En el inspector de propiedades, edite el valor de Alt (Alternativo).
Insercin de un marcador de posicin de imagen
Un marcador de posicin de imagen es un grfico que se utiliza hasta que el grfico definitivo est
listo para su incorporacin a la pgina Web.
Para insertar un marcador de posicin de imagen:
el grfico del marcador de posicin.
En la categora Comn de la barra Insertar, haga clic en el icono Marcador de posicin de
imagen.
Seleccione Insertar > Marcador de posicin de imagen.
Aparecer el cuadro de dilogo Marcador de posicin de imagen.
3 En dicho cuadro de dilogo, seleccione las opciones para el marcador de posicin de imagen.
Puede establecer el tamao y el color del marcado de posicin y asignarle una etiqueta de texto.
El color, los atributos de tamao y la etiqueta del marcador de posicin se presentan del modo
siguiente:
Cuando se visualiza en un navegador, el texto de etiqueta y tamao no aparecen.
Temas relacionados
Utilizacin de Fireworks para modificar marcadores de posicin de imagen de Dreamweaver
en la pgina 355.
Sustitucin de un marcador de posicin de imagen
Un marcador de posicin de imagen no es la imagen grfica que aparece en un navegador. Antes
de publicar el sitio, debe reemplazar todos los marcadores de posicin de imgenes que haya
aadido por archivos grficos aptos para la Web, como son los archivos GIF o JPEG.
Si dispone de Fireworks, puede crear un nuevo grfico desde el marcador de posicin de imagen
de Dreamweaver. La nueva imagen se configura con el mismo tamao que la imagen del marcador
de posicin. Puede editar la imagen y luego reemplazarla en Dreamweaver. Para informacin
sobre la creacin con Fireworks de una imagen que reemplace al marcador de posicin, vase
Utilizacin de Fireworks para modificar marcadores de posicin de imagen de Dreamweaver en
la pgina 355.
Para actualizar el origen de la imagen:
Haga doble clic en el marcador de posicin de imagen.
Haga clic en el marcador de posicin de imagen para seleccionarlo y, a continuacin, en el
inspector de propiedades (Ventana > Propiedades), haga clic en el icono de carpeta situado
junto al campo Orig.
Se abre el cuadro de dilogo Seleccionar origen de imagen.
2 En el cuadro de dilogo, desplcese hasta la imagen con la que desea reemplazar el marcador de
posicin de imagen.
La imagen seleccionada aparece en el documento.
Alineacin de una imagen
Puede alinear una imagen con el texto, con otra imagen, con un plug-in o con otros elementos de
la misma lnea. Adems puede alinear horizontalmente una imagen.
Para alinear una imagen:
1 Seleccione la imagen en la vista de diseo.
2 Establezca los atributos de alineacin de la imagen en el inspector de propiedades.
Puede establecer la alineacin con relacin a otros elementos del mismo prrafo o de la misma
lnea.
Nota: HTML no ofrece ningn mtodo para ajustar texto alrededor del contorno de una imagen,
como ocurre con algunos procesadores de textos.
stas son las opciones de alineacin:
Predeterminado suele especificar una alineacin con la lnea de base. (El valor predeterminado
puede variar en funcin del navegador del visitante del sitio.)
Lnea de base e Inferior alinean la lnea de base del texto (u otro elemento del mismo prrafo)
con la parte inferior del objeto seleccionado.
Superior alinea la parte superior de una imagen con la parte superior del elemento ms alto
(imagen o texto) de la lnea actual.
Medio alinea la parte central de la imagen con la lnea de base de la lnea actual.
Texto superior alinea la parte superior de la imagen con la parte superior del carcter ms alto de
la lnea de texto.
Medio absoluta alinea la parte central de la imagen con la parte central del texto de la lnea
actual.
Inferior absoluta alinea la parte inferior de la imagen con la parte inferior de la lnea de texto
(incluidos los trazos descendentes, como en el caso de la letra g).
Izquierda sita la imagen seleccionada en el margen izquierdo, ajustando a la derecha el texto que
la rodea. Si hay texto alineado a la izquierda delante del objeto, los objetos alineados a la izquierda
suelen pasar a una nueva lnea.
Derecha sita la imagen en el margen derecho, ajustando a la izquierda el texto que la rodea. Si
hay texto alineado a la derecha delante del objeto, los objetos alineados a la derecha suelen pasar a
una nueva lnea.
Cambio del tamao de una imagen
Se puede cambiar visualmente el tamao de elementos como por ejemplo las imgenes, los plug-ins,
los archivos de Macromedia Shockwave o Flash, los applets y los controles ActiveX en Dreamweaver.
El cambio de tamao visual de una imagen en Dreamweaver permite ver cmo afecta la imagen al
diseo en diferentes dimensiones. Al cambiar el tamao de una imagen visualmente, no se escala el
archivo de imagen a las proporciones que se especifican. Si cambia el tamao de una imagen
visualmente en Dreamweaver, pero no utiliza una aplicacin de edicin de imgenes (como por
ejemplo Macromedia Fireworks) para escalar el archivo de imagen al tamao deseado, el navegador
del usuario deber escalar la imagen cuando se cargue la pgina. Esto puede hacer aumentar el
tiempo de descarga de la pgina y puede provocar que la imagen no se vea correctamente en el
navegador del usuario. Si desea reducir el tiempo de descarga y conseguir que todas las instancias de
una imagen tengan el mismo tamao, utilice una aplicacin de edicin de imgenes.
Para cambiar visualmente el tamao de un elemento:
1 Seleccione el elemento (por ejemplo, una imagen o un archivo SWF) en la ventana de
documento.
Aparecen manejadores de cambio de tamao en los lados inferior y derecho del elemento y en
la esquina inferior derecha. Si no aparecen, haga clic en cualquier punto fuera del elemento
cuyo tamao desea cambiar y vuelva a seleccionarlo o haga clic en la etiqueta correspondiente
del selector de etiquetas para seleccionar el elemento.
2 Cambie el tamao del elemento siguiendo uno de estos procedimientos:
Para ajustar el ancho del elemento, arrastre el manejador de seleccin del lado derecho.
Para ajustar el alto del elemento, arrastre el manejador de seleccin de la parte inferior.
Para ajustar al mismo tiempo el ancho y el alto del elemento, arrastre el manejador de
seleccin de la esquina.
Para conservar las proporciones del elemento (su relacin ancho/alto) al ajustar sus
dimensiones, arrastre el manejador de seleccin de la esquina mientras presiona la tecla Mays.
Puede cambiar visualmente el tamao de los elementos hasta un mnimo de 8 por 8 pxeles. Si
desea ajustar el ancho y el alto de un elemento a un tamao menor (por ejemplo, 1 por 1 pxel),
utilice el inspector de propiedades para introducir un valor numrico.
Para restaurar las dimensiones originales de un elemento, elimine los valores de los cuadros de
texto An (Ancho) y Al (Alto) o haga clic en el botn Restab. tamao (Restablecer tamao) en el
Para devolver una imagen a su tamao original:
Haga clic en el botn Restab. tamao del inspector de propiedades de imagen.
Para volver a muestrear una imagen cuyo tamao se ha cambiado:
1 Cambie el tamao de la imagen tal como se ha descrito anteriormente.
2 Haga clic en el botn Volver a muestrear del inspector de propiedades de imagen.
Nota: no es posible volver a muestrear elementos o marcadores de posicin de imagen que no
sean imgenes de mapa de bits.
Temas relacionados
Edicin de imgenes en Dreamweaver en la pgina 312
Optimizacin de una imagen mediante Fireworks 319
Recorte de una imagen
Dreamweaver permite recortar imgenes de archivos de mapa de bits.
Nota: cuando se recorta una imagen mediante Dreamweaver, se cambia el archivo de imagen de
origen en el disco. Por esta razn, debe conservar una copia de seguridad del archivo de imagen en
caso de que necesite volver a la imagen original.
Para recortar un archivo de imagen:
1 Abra la pgina que contiene la imagen que desea recortar, seleccione la imagen y siga uno de
Haga clic en el icono Herramienta Recortar del inspector de propiedades de imagen.
Seleccione Modificar > Imagen > Recortar.
Aparecern manejadores de recorte alrededor de la imagen seleccionada.
2 Ajuste los manejadores de recorte de modo que el recuadro de lmite rodee el rea de la imagen
de mapa de bits que desea mantener.
3 Haga doble clic en el recuadro de lmite o presione Intro para recortar la seleccin.
Un cuadro de dilogo le informa de que el archivo de imagen que est cortando cambiar en el
disco. Haga clic en Aceptar.
Los pxeles del mapa de bits seleccionado que se encuentren fuera del recuadro de lmite, se
eliminarn, pero el resto de los objetos de la imagen permanecern.
4 Muestre una vista previa de la imagen para comprobar que la imagen ha quedado como
esperaba.
Para deshacer los efectos del comando de recorte:
Seleccione Edicin > Deshacer Recortar para volver a la imagen original.
Puede deshacer el efecto del comando de recorte (y con ello volver al archivo de imagen
original) hasta el momento en que salga de Dreamweaver, o puede editar el archivo en una
aplicacin de edicin de imgenes externa.
Temas relacionados
Optimizacin de una imagen mediante Fireworks
Puede optimizar imgenes de pginas Web desde Dreamweaver.
Para optimizar una imagen:
1 Abra la pgina que contiene la imagen que desea optimizar, seleccione la imagen y siga uno de
Haga clic en el botn Optimizar en Fireworks del inspector de propiedades de imagen.
Seleccione Modificar > Imagen > Optimizar imagen en Fireworks.
Aparecer el cuadro de dilogo Optimizar imagen en Fireworks.
Temas relacionados
Ajuste del brillo y del contraste de una imagen
Brillo/Contraste modifica el contraste o el brillo de los pxeles de la imagen. Esto afecta a los
resaltados, sombras y medios tonos de la imagen. Normalmente, la funcin Brillo/Contraste se
utiliza para corregir imgenes que son demasiado oscuras o demasiado claras.
Para ajustar el brillo y el contraste de una imagen:
1 Abra la pgina que contiene la imagen que desea ajustar, seleccione la imagen y siga uno de estos
procedimientos:
Haga clic en el botn Brillo/Contraste en el inspector de propiedades de imagen.
Seleccione Modificar > Imagen > Brillo y contraste.
Aparecer el cuadro de dilogo Brillo/Contraste.
2 Arrastre los controles deslizantes de Brillo y Contraste para ajustar los valores.
El rango de valores posibles es de -100 a 100.
Temas relacionados
Perfilado de una imagen
El perfilado aumenta el contraste de los pxeles situados alrededor de los bordes de los objetos para
aumentar la definicin o nitidez de la imagen.
Para perfilar una imagen:
1 Abra la pgina que contiene la imagen que desea perfilar, seleccione la imagen y siga uno de estos
procedimientos:
Haga clic en el botn Perfilar del inspector de propiedades de imagen.
Seleccione Modificar > Imagen > Perfilar.
Aparecer el cuadro de dilogo Perfilado.
2 Para especificar el grado de perfilado que Dreamweaver aplicar a la imagen, puede arrastrar el
control deslizante o bien introducir un valor entre el 0 y el 10 en el cuadro de texto.
Mientras ajusta la nitidez de la imagen mediante el cuadro de dilogo Nitidez, puede obtener
una vista previa del cambio en la imagen.
Creacin de una imagen de sustitucin 321
4 Guarde los cambios; para ello, seleccione Archivo > Guardar, o recupere la imagen original
seleccionando Edicin > Deshacer perfilar.
Para deshacer los efectos del comando de perfilado:
Seleccione Edicin > Deshacer Perfilar para volver a la imagen original.
Slo puede deshacer el efecto del comando de perfilado (y con ello volver al archivo de imagen
original) antes de guardar la pgina que contiene la imagen. Una vez que haya guardado la
pgina, los cambios realizados en la imagen quedarn guardados de forma permanente.
Temas relacionados
Creacin de una imagen de sustitucin
Se pueden insertar imgenes de sustitucin en la pgina. Una imagen de sustitucin es una imagen
que, al visualizarse en un navegador, cambia cuando el puntero pasa sobre ella.
Antes de empezar, localice un par o varios pares de imgenes para la imagen de sustitucin. Se
puede crear una imagen de sustitucin con dos archivos de imgenes: la imagen principal (la que
aparece al cargarse inicialmente la pgina) y la imagen secundaria (la que aparece al pasar el
puntero sobre la imagen principal). Ambas imgenes deben tener el mismo tamao. Si tienen
tamaos distintos, Dreamweaver cambia automticamente el tamao de la segunda imagen para
que se ajuste a las propiedades de la primera.
Las imgenes de sustitucin estn automticamente configuradas para que respondan al evento
onMouseOver. Para informacin sobre la configuracin de una imagen para que responda a otro
evento (por ejemplo, un clic del ratn) o sobre la edicin de una imagen de sustitucin para que
muestre otra imagen, vase Intercambiar imagen en la pgina 407.
Para crear una imagen de sustitucin:
1 En la ventana de documento, site el punto de insercin en el lugar donde desea que aparezca
la imagen de sustitucin.
2 Introduzca la imagen de sustitucin mediante uno de estos mtodos:
En la barra Insertar, seleccione Comn y luego haga clic en el icono Imagen de sustitucin.
En la barra Insertar, seleccione Comn, arrastre el icono Imagen de sustitucin hasta la
posicin deseada de la ventana de documento.
Elija Insertar > Objetos de imagen > Imagen de sustitucin.
Se abre el cuadro de dilogo Insertar imagen de sustitucin.
5 Elija Archivo > Vista previa en el navegador o presione F12.
No se puede ver el efecto que causa una imagen de sustitucin en la vista de diseo.
6 En el navegador, desplace el puntero sobre la imagen original.
Debe aparecer la imagen de sustitucin.
Temas relacionados
Insercin de una barra de navegacin en la pgina 343
Utilizacin de un editor de imgenes externo
Desde Dreamweaver puede abrir una imagen seleccionada en un editor de imgenes externo. Al
regresar a Dreamweaver despus de guardar el archivo de imagen editado, los cambios realizados
sern visibles en la ventana de documento.
Puede configurar Fireworks como editor externo principal. Para ms informacin, consulte
Utilizacin de Fireworks en la pgina 353.
Para iniciar el editor de imgenes externo, siga uno de estos procedimientos:
Haga doble clic en la imagen que desea editar.
haga clic (Macintosh) en la imagen que desea editar y elija Editar con > Examinar y seleccione
un editor.
Seleccione la imagen que desea editar y haga clic en Editar en el inspector de propiedades.
Haga doble clic en el archivo de imagen en el panel Sitio para iniciar el editor de imgenes
principal. Si no ha especificado ningn editor de imgenes, Dreamweaver iniciar el editor
predeterminado para el tipo de archivo en cuestin.
Nota: al abrir una imagen desde el panel Sitio, las funciones de integracin de Fireworks no surten
efecto y Fireworks no abre el archivo PNG original. Para utilizar las funciones de integracin de
Fireworks, abra las imgenes desde la ventana de documento.
Si tras regresar a la ventana de Dreamweaver no ve una imagen actualizada, seleccione la imagen y,
a continuacin, haga clic en el botn Actualizar en el inspector de propiedades.
Temas relacionados
Especificacin del editor que se iniciar desde Dreamweaver en la pgina 370
Aplicacin de comportamientos a imgenes
Puede aplicar cualquier comportamiento disponible a una imagen o zona interactiva de imagen.
Al aplicar un comportamiento a una zona interactiva, Dreamweaver inserta el cdigo HTML en
la etiqueta area. Hay tres comportamientos que se aplican especficamente a las imgenes: Carga
previa de imgenes, Intercambiar imagen y Restaurar imagen intercambiada.
Carga previa de imgenes carga en la memoria cach del navegador las imgenes que no
aparecen en la pgina de inmediato (como aquellas que se intercambiarn por comportamientos,
capas o scripts de JavaScript). Esto contribuye a evitar las demoras debidas a la descarga cuando
llega el momento de que aparezcan las imgenes. (Vase Carga previa de imgenes en
la pgina 397.)
Intercambiar imagen intercambia una imagen por otra cambiando el atributo SRC de la etiqueta
img. Use esta accin para crear sustituciones de botones y otros efectos de imgenes (incluido el
intercambio de varias imgenes a la vez). (Vase Intercambiar imagen en la pgina 407.)
Aplicacin de comportamientos a imgenes 323
Restaurar imagen intercambiada restaura los archivos de origen del ltimo conjunto de
imgenes intercambiadas. Esta accin se aade automticamente siempre que se adjunta la accin
Intercambiar imagen a un objeto de forma predeterminada. No suele ser necesario seleccionarla
manualmente. (Vase Restaurar imagen intercambiada en la pgina 408.)
Tambin puede utilizar comportamientos para crear sistemas de navegacin ms sofisticados,
como una barra de navegacin o un men de salto. (Vase Utilizacin de las barras de
navegacin en la pgina 343 e Insercin de mens de salto en la pgina 341.)
325
CAPTULO 15
Establecimiento de vnculos y navegacin
Una vez que haya creado pginas HTML y haya configurado un sitio de Macromedia
Dreamweaver MX 2004 para almacenar los documentos, deber establecer conexiones entre sus
documentos y otros documentos.
Macromedia Dreamweaver MX 2004 ofrece varios mtodos para crear vnculos de hipertexto con
documentos, imgenes, archivos multimedia o software transferible. Puede establecer vnculos
con cualquier texto o imagen de cualquier lugar del documento, incluidos el texto y las imgenes
situados en un encabezado, lista, tabla, capa o marco.
Para obtener una representacin visual de la vinculacin de los archivos, utilice el mapa del sitio.
En el mapa del sitio puede aadir nuevos documentos al sitio, crear y eliminar vnculos con
documentos y comprobar los vnculos con archivos dependientes. Para ms informacin, consulte
Visualizacin de un mapa del sitio en la pgina 94.
Los vnculos se pueden crear y administrar de varias forma distintas. Algunos diseadores de sitios
Web prefieren crear vnculos con pginas o archivos que todava no existen cuando estn
trabajando, mientras que otros prefieren crear primero todos los archivos y las pginas y aadir los
vnculos ms tarde. Otra forma de administrar vnculos consiste en crear pginas marcadoras de
posicin que representan el archivo final y permiten aadir vnculos rpidamente y comprobarlos
antes de terminar todas las pginas. Para ms informacin sobre la comprobacin de vnculos,
consulte Comprobacin de vnculos rotos, externos y hurfanos en la pgina 347.
Aspectos bsicos de ubicacin y rutas de documentos en la pgina 326
Mens de salto en la pgina 328
Barras de navegacin en la pgina 329
Mapas de imgenes en la pgina 330
Creacin de vnculos en la pgina 330
Administracin de vnculos en la pgina 338
Insercin de mens de salto en la pgina 341
Utilizacin de las barras de navegacin en la pgina 343
Utilizacin de los mapas de imagen en la pgina 345
Cmo adjuntar comportamientos JavaScript a vnculos en la pgina 347
Comprobacin de vnculos rotos, externos y hurfanos en la pgina 347
326 Captulo 15: Establecimiento de vnculos y navegacin
Reparacin de vnculos rotos en la pgina 349
Apertura de documentos vinculados en Dreamweaver en la pgina 350
Aspectos bsicos de ubicacin y rutas de documentos
A la hora de crear vnculos resulta fundamental conocer la ruta de archivo entre el documento
desde el que establece el vnculo y el documento con el que lo establece.
Cada pgina Web tiene una direccin exclusiva, denominada URL (Localizador Uniforme de
Recursos, Uniform Resource Locator). Para ms informacin sobre los URL, consulte la pgina
del World Wide Web Consortium sobre asignacin de nombres y direcciones en www.w3.org/
Addressing/.
Sin embargo, cuando se crea un vnculo local (un vnculo de un documento con otro documento
del mismo sitio), no suele ser necesario especificar el URL completo del documento de destino. En
este caso se especifica una ruta relativa desde el documento actual o desde la carpeta raz del sitio.
Existen tres tipos de rutas de vnculos:
Rutas absolutas (como http://www.macromedia.com/support/dreamweaver/contents.html).
Para ms informacin, consulte Rutas absolutas en la pgina 326.
Rutas relativas al documento (como dreamweaver/contents.html). Para ms informacin,
consulte Rutas relativas al documento en la pgina 327.
Rutas relativas a la raz del sitio (como /support/dreamweaver/contents.html). Para ms
informacin, consulte Rutas relativas a la raz del sitio en la pgina 328.
Con Dreamweaver puede seleccionar fcilmente el tipo de ruta de documento que desee crear
para los vnculos (vase Vinculacin de archivos y documentos en la pgina 331).
Nota: utilice el tipo de vnculo que prefiera y le resulte ms cmodo, ya sea relativo al sitio o al
documento. En lugar de escribir las rutas, conviene acceder a los vnculos a travs del botn
Examinar, mtodo que asegura la correcta introduccin de la ruta.
Rutas absolutas
Las rutas absolutas proporcionan el URL completo del documento vinculado, incluido el
protocolo que se debe usar (generalmente, http:// para pginas Web). Por ejemplo, http://
www.macromedia.com/support/dreamweaver/contents.html es una ruta absoluta.
Para vincular un documento situado en otro servidor, es preciso emplear una ruta absoluta.
Aunque tambin puede utilizar vnculos de rutas absolutas para vnculos locales (de documentos
del mismo sitio), se desaconseja utilizar este sistema, ya que si mueve el sitio a otro dominio se
rompern todos los vnculos de las rutas absolutas locales. El uso de rutas relativas para vnculos
locales tambin ofrece una mayor flexibilidad si necesita mover archivos dentro del sitio.
Nota: al insertar imgenes (no vnculos): si utiliza una ruta absoluta a una imagen que se encuentra en
un servidor remoto y que no est disponible en la unidad de disco duro local, no podr ver la imagen
en la ventana de documento. Deber obtener una vista previa del documento en un navegador para
verla. Si es posible, utilice rutas relativas a la raz del sitio o del documento para las imgenes. Para
ms informacin, consulte Insercin de una imagen en la pgina 313.
Aspectos bsicos de ubicacin y rutas de documentos 327
Rutas relativas al documento
Las rutas relativas al documento son las ms adecuadas para utilizar con vnculos locales en la
mayora de los sitios Web. Resultan particularmente tiles cuando el documento actual y el
documento con el que se establece el vnculo se encuentran en la misma carpeta y es probable que
vayan a permanecer juntos. Tambin puede utilizar una ruta relativa al documento para establecer
un vnculo con un documento de otra carpeta, pero especificando la ruta a travs de la jerarqua
de carpetas desde el documento actual hasta el vinculado.
En una ruta relativa al documento se omite la parte del URL absoluto que coincide en los
documentos actual y vinculado y se indica nicamente la parte de la ruta que difiere.
Por ejemplo, supongamos que tiene un sitio con la siguiente estructura:
La creacin de vnculos desde contents.html hasta otros archivos se hace de la siguiente forma:
Para establecer un vnculo desde contents.html hasta horas.html (ambos archivos se encuentran
en la misma carpeta), el nombre de archivo ser la ruta relativa: horas.html.
Para establecer un vnculo con tips.html (en la subcarpeta llamada resources), utilice la ruta
relativa resources/tips.html.
Cada barra diagonal (/) representa un nivel por debajo en la jerarqua de carpetas.
Para establecer un vnculo con index.html (en la carpeta padre, un nivel por encima de
contents.html), utilice la ruta relativa ../index.html.
Cada ../ representa un nivel por encima en la jerarqua de carpetas.
Para establecer un vnculo con catalog.html (en una subcarpeta distinta de la carpeta padre),
utilice la ruta relativa ../products/catalog.html.
../ sube a la carpeta padre; products/ baja a la subcarpeta de productos.
No es necesario actualizar las rutas relativas al documento entre archivos que se mueven como un
grupo (por ejemplo, al mover una carpeta completa, de forma que todos los archivos de esa
carpeta conserven las mismas rutas relativas entre s). Sin embargo, cuando se mueve un archivo
individual que contiene vnculos relativos al documento o un archivo individual que est
vinculado en relacin con el documento, no necesitar actualizar esos vnculos. (Si mueve o
cambia el nombre de los archivos utilizando el panel Archivos, Dreamweaver actualizar
automticamente todos los vnculos relevantes.)
Rutas relativas a la raz del sitio
Las rutas relativas a la raz del sitio indican la ruta desde la carpeta raz del sitio hasta un
documento. Puede utilizar este tipo de rutas si trabaja con un sitio Web grande que usa varios
servidores o un servidor que alberga varios sitios distintos. Sin embargo, si no est familiarizado
con este tipo de ruta, le resultar ms cmodo mantener las rutas relativas al documento.
Una ruta relativa a la raz del sitio comienza por una barra diagonal, que representa la carpeta raz
del sitio. Por ejemplo, /support/tips.html es una ruta relativa a la raz del sitio de un archivo
(tips.html) situado en la subcarpeta de soporte de la carpeta raz del sitio.
A menudo, una ruta relativa a la raz del sitio es la mejor forma de especificar vnculos en un sitio
Web en el que necesita mover con frecuencia archivos HTML de una carpeta a otra. Al mover un
documento que contiene vnculos relativos a la raz, no es preciso cambiar los vnculos. Por
ejemplo, si los archivos HTML utilizan vnculos relativos a la raz para archivos dependientes
(como imgenes) y se mueve un archivo HTML, sus vnculos de archivos dependientes seguirn
siendo vlidos.
Sin embargo, al mover o cambiar el nombre de documentos con vnculos relativos a la raz, deber
actualizar esos vnculos, incluso aunque las rutas de los documentos no hayan cambiado en su
relacin mutua. Por ejemplo, si mueve una carpeta, deber actualizar todos los vnculos relativos a
la raz de los archivos de esa carpeta. (Si mueve o cambia el nombre de los archivos utilizando el
panel Archivos, Dreamweaver actualizar automticamente todos los vnculos relevantes.)
Mens de salto
Un men de salto es un men emergente de un documento que pueden ver los visitantes del sitio
y que ofrece opciones vinculadas a documentos o archivos. Puede crear vnculos con documentos
del sitio Web, documentos de otros sitios, correo electrnico, grficos o cualquier tipo de archivo
se pueda abrir en un navegador.
Un men de salto puede contener tres componentes bsicos:
Opcional: un mensaje de seleccin de men, como la descripcin de una categora para los
elementos del men o instrucciones, como Elija uno.
Obligatorio: una lista de elementos de men vinculados: el usuario elige una opcin y se abre
un documento o un archivo vinculado.
Opcional: un botn Ir.
Temas relacionados
Barras de navegacin 329
Barras de navegacin
Una barra de navegacin se compone de una imagen o un conjunto de imgenes cuya
visualizacin cambia segn las acciones que realice el usuario. Las barras de navegacin
proporcionan a menudo una forma fcil de desplazarse por las pginas y los archivos de un sitio.
Un elemento de la barra de navegacin puede tener cuatro estados:
Arriba: la imagen que aparece cuando el usuario an no ha hecho clic o interactuado con el
elemento.
Por ejemplo, este estado ofrece la impresin de que an no se ha hecho clic en el elemento.
Sobre: la imagen que aparece cuando el puntero pasa sobre la imagen Arriba. El aspecto del
elemento cambia (por ejemplo, puede ponerse ms clara) para que los usuarios sepan que
pueden interactuar con l.
Abajo: la imagen que aparece despus de hacer clic en el elemento.
Por ejemplo, cuando un usuario hace clic en un elemento, se carga una pgina nueva y la barra
de navegacin sigue mostrndose, pero el elemento se oscurece para indicar que est
seleccionado.
Sobre mientras abajo: la imagen que aparece cuando el puntero pasa sobre la imagen Abajo
despus de hacer clic en el elemento.
Por ejemplo, el elemento aparece atenuado o gris. Puede utilizar este estado como indicador
visual para que los usuarios sepan que no pueden volver a hacer clic en este elemento mientras
se encuentren en esa parte del sitio.
No es necesario que incluya imgenes de barra de navegacin para los cuatro estados. Quiz slo
necesite, por ejemplo, los estados Arriba y Abajo.
Temas relacionados
Utilizacin de las barras de navegacin en la pgina 343
Mapas de imgenes
Un mapa de imagen es una imagen que se ha dividido en regiones o zonas interactivas. Cuando el
usuario hace clic en una zona interactiva, se realiza una accin (se abre un archivo nuevo, por
ejemplo).
Los mapas de imagen del lado del cliente almacenan la informacin acerca de los vnculos de
hipertexto en el documento HTML en lugar de hacerlo por separado en un archivo de mapa
como hacen los mapas de imagen del lado del servidor. Cuando el visitante de un sitio hace clic en
una zona interactiva, el URL asociado se enva directamente al servidor. Esto hace que los mapas
de imagen del lado del cliente sean ms rpidos que los mapas del lado del servidor, pues el
servidor no necesita interpretar dnde ha hecho clic el usuario. Los mapas de imagen del lado del
cliente son compatibles con Netscape Navigator 2.0 y versiones posteriores, NCSA Mosaic 2.1 y
3.0 y todas las versiones de Internet Explorer.
Dreamweaver no modifica las referencias a mapas de imagen del lado del servidor en documentos
existentes. Puede utilizar mapas de imagen del lado del cliente y del servidor en el mismo
documento. Sin embargo, los navegadores que admiten ambos tipos de mapas de imagen dan
prioridad a los mapas de imagen del lado del cliente. Para incluir un mapa de imagen del lado del
servidor en un documento, deber escribir el cdigo HTML correspondiente.
Temas relacionados
Utilizacin de los mapas de imagen en la pgina 345
Creacin de vnculos
Puede crear varios tipos de vnculos en un documento:
Un vnculo con otro documento o archivo, como un archivo grfico, de pelcula, PDF o de
sonido. (Vase Vinculacin de archivos y documentos en la pgina 331.)
Un vnculo de anclaje con nombre, que salta a un emplazamiento especfico dentro de un
documento. (Vase Establecimiento de vnculos con una parte especfica de un documento
en la pgina 334.)
Un vnculo de correo electrnico, que crea un mensaje de correo electrnico en blanco con la
direccin del destinatario ya rellenada. (Vase Creacin de un vnculo de correo electrnico
en la pgina 336.)
Vnculos nulos y de script, que permiten adjuntar comportamientos a un objeto o crear un
vnculo que ejecuta cdigo JavaScript. (Vase Creacin de vnculos de script y nulos en
la pgina 337.)
Nota: antes de crear vnculos, deber saber cmo funcionan las rutas relativas al documento, las
rutas relativas a la raz del sitio y las rutas absolutas. (Vase Aspectos bsicos de ubicacin y rutas
de documentos en la pgina 326.)
Creacin de vnculos 331
Vinculacin de archivos y documentos
Puede utilizar el inspector de propiedades y el icono de sealizacin de archivos para crear
vnculos desde una imagen, un objeto o texto hasta otro documento o archivo. Para ms
informacin sobre el uso del mapa del sitio para la creacin de vnculos, consulte Modificacin
de vnculos en el mapa del sitio en la pgina 339.
Para utilizar rutas relativas a la raz del sitio, defina en primer lugar una carpeta local en
Dreamweaver eligiendo una carpeta raz local que servir como el equivalente de la raz del
documento en un servidor (vase Configuracin de un sitio de Dreamweaver nuevo en
la pgina 65). Dreamweaver utiliza esta carpeta para determinar las rutas relativas a la raz del sitio
de los archivos.
Nota: guarde siempre un archivo nuevo antes de crear una ruta relativa al documento, pues sta no
es vlida sin un punto de partida preciso. Si crea una ruta relativa al documento antes de guardar el
archivo, Dreamweaver utilizar temporalmente una ruta absoluta que comenzar por archivo:// hasta
que guarde el archivo. Cuando guarde el archivo, Dreamweaver convertir la ruta archivo:// en una
ruta relativa.
Vinculacin de documentos mediante el inspector de propiedades
Puede utilizar el icono de carpeta o el cuadro de texto Vnculo del inspector de propiedades para
crear vnculos desde una imagen, un objeto o texto hasta otro documento o archivo.
Para vincular documentos utilizando el icono de carpeta o el cuadro de texto Vnculo del
inspector de propiedades:
1 Seleccione texto o una imagen en la vista Diseo de la ventana de documento.
2 Abra el inspector de propiedades (Ventana > Propiedades) y siga uno de estos procedimientos:
Haga clic en el icono de carpeta situado a la derecha del cuadro de texto Vnculo para
localizar y seleccionar un archivo.
La ruta del documento vinculado aparecer en el cuadro de texto URL. Utilice el men
emergente Relativa a del cuadro de dilogo Seleccionar archivo HTML para indicar si la
ruta es relativa al documento o a la raz del sitio. A continuacin, haga clic en Seleccionar.
Nota: al cambiar el tipo de ruta en el cuadro de texto Relativo a, Dreamweaver utiliza este valor
como tipo de ruta predeterminada para futuros vnculos hasta que vuelva a cambiar el tipo de ruta.
Escriba la ruta y el nombre de archivo del documento en el cuadro de texto Vnculo.
Para establecer un vnculo con un documento del sitio, introduzca una ruta relativa al
documento o relativa a la raz del sitio. Para establecer un vnculo con un documento externo
al sitio, introduzca una ruta absoluta que incluya el protocolo (por ejemplo, http://). Puede
utilizar este mtodo para introducir un vnculo para un archivo que an no se ha creado.
Para rutas relativas a documentos, omita la parte del URL absoluto que tengan en comn el
documento actual y el vinculado: Si el archivo vinculado se encuentra en la misma carpeta que
el documento actual, especifique el nombre de archivo; si se encuentra en una subcarpeta,
facilite el nombre de la subcarpeta, a continuacin una barra inclinada (/) y despus el nombre
de archivo; si se encuentra en una carpeta padre, escriba ../ antes del nombre de archivo (donde
.. indica subir un nivel en la jerarqua de carpetas).
3 En el men emergente Dest., seleccione una ubicacin para abrir el documento.
Para que el documento vinculado aparezca en un lugar distinto de la ventana o el marco actual,
seleccione una opcin en el men emergente Dest. del inspector de propiedades:
_blank carga el documento vinculado en una nueva ventana sin nombre del navegador.
_parent carga el documento vinculado en el marco padre o en la ventana padre del marco
que contiene el vnculo. Si el marco que contiene el vnculo no est anidado, el documento
vinculado se cargar en la ventana completa del navegador.
_self carga el documento vinculado en el mismo marco o la misma ventana que el vnculo.
Este destino es el predeterminado, por lo que normalmente no es preciso especificarlo.
_top carga el documento vinculado en la ventana completa del navegador, eliminando de
esta forma todos los marcos.
Sugerencia: si va a establecer todos los vnculos de la pgina al mismo objetivo, puede
especificar este objetivo una vez seleccionando Insertar > Etiqueta Head > Base y seleccionando la
informacin de destino. Para informacin sobre el establecimiento de vnculos con marcos, vase
Control del contenido de los marcos con vnculos en la pgina 218.
Vinculacin de documentos mediante el icono de sealizacin de archivos
El icono de sealizacin de archivos permite crear vnculos desde una imagen, un objeto o texto
hasta otro documento o archivo.
Para establecer vnculos con documentos utilizando el icono de sealizacin de archivos:
2 Arrastre el icono de sealizacin de archivos situado a la derecha del cuadro de texto Vnculo
del inspector de propiedades y seale otro documento abierto, un anclaje visible en un
documento abierto o un documento del panel Archivos.
El cuadro de texto Vnculo se actualizar para mostrar el vnculo.
Nota: slo puede establecer un vnculo con un documento abierto si los documentos no estn
maximizados en la ventana de documento. Cuando se seala a un documento abierto, ste pasa al
primer plano de la pantalla mientras se realiza la seleccin.
3 Libere el botn del ratn.
Para crear un vnculo desde una seleccin en un documento abierto:
1 Seleccione texto o una imagen en la ventana de documento.
2 Presione la tecla Mays mientras arrastra la seleccin.
Al arrastrar la seleccin, aparecer el icono de sealizacin de archivos.
3 Seale otro documento abierto, un anclaje visible en un documento abierto o un documento
del panel Archivos.
Nota: slo puede establecer un vnculo con un documento abierto si los documentos no estn
maximizados en la ventana de documento. Cuando se seala a un documento abierto, ste pasa al
primer plano de la pantalla mientras se realiza la seleccin.
Establecimiento de vnculos con documentos utilizando el mapa del sitio
Puede crear vnculos utilizando el mapa del sitio. Los vnculos creados se colocan en la parte inferior
de los archivos HTML seleccionados, lo cual permite crear rpidamente vnculos en un sitio.
Para establecer vnculos con documentos utilizando el mapa del sitio y el icono de
sealizacin de archivos:
1 Expanda el panel Archivos y, a continuacin, muestre las vistas Archivos del sitio y Mapa del
sitio, para lo cual deber mantener presionado el icono del mapa del sitio y seleccionar Mapa y
archivos.
2 Seleccione un archivo HTML en el mapa del sitio.
Aparecer el icono de sealizacin de archivos junto al archivo.
3 Arrastre el icono de sealizacin de archivos y seale a otro archivo del mapa del sitio o a un
archivo local en la vista Archivos del sitio.
En la parte inferior del archivo HTML seleccionado se colocar un vnculo de hipertexto con el
nombre del archivo vinculado. Este mtodo ofrece buenos resultados cuando crea el sitio y
desea crear vnculos rpidamente en el sitio.
Para establecer vnculos con documentos en el mapa del sitio, siga uno de estos
procedimientos:
Arrastre una pgina desde el Explorador de Windows o el Finder de Macintosh y colquela
sobre una pgina del mapa del sitio.
Nota: compruebe que el panel Archivos est acoplado y, a continuacin, haga clic en la flecha
Expandir. Mantenga presionado el botn Mapa del sitio y seleccione Archivos y mapa.
Seleccione una pgina HTML en el mapa del sitio y elija Sitio > Vincular a archivo existente
(Windows) o Sitio > Ver mapa del sitio > Vincular a archivo existente (Macintosh), o bien
seleccione Vincular a archivo existente en el men contextual.
Seleccione una pgina HTML en el mapa del sitio y elija Sitio > Vincular a nuevo archivo
(Windows) o Sitio > Ver mapa del sitio > Vincular a nuevo archivo (Macintosh), o bien
seleccione Vincular a nuevo archivo en el men contextual.
Utilizacin del comando Hipervnculo
El comando Hipervnculo permite crear un vnculo de texto hasta una imagen, un objeto u otro
documento o archivo.
Para aadir un hipervnculo mediante el comando Hipervnculo:
1 Site el punto de insercin en el documento donde desea que aparezca el hipervnculo.
2 Siga uno de estos procedimientos para mostrar el cuadro de dilogo Insertar hipervnculo:
Seleccione Insertar > Hipervnculo.
En la categora Comn de la barra Insertar, haga clic en el botn Hipervnculo.
Aparecer el cuadro de dilogo Hipervnculo.
Temas relacionados
Modificacin de vnculos en el mapa del sitio en la pgina 339
Creacin de un vnculo de correo electrnico en la pgina 336
Creacin de vnculos de script y nulos en la pgina 337
Establecimiento de vnculos con una parte especfica de un documento
Puede utilizar el inspector de propiedades para establecer un vnculo con una determinada seccin
de un documento creando en primer lugar anclajes con nombre. Los anclajes con nombre
permiten establecer marcadores en un documento, que a menudo se colocan en un tema
especfico o en la parte superior del documento. Posteriormente podr crear vnculos con esos
anclajes con nombre que llevarn rpidamente al visitante a la posicin especificada.
Para crear un vnculo con un anclaje con nombre, siga este procedimiento de dos pasos. En
primer lugar, cree un anclaje con nombre. A continuacin, cree un vnculo con dicho anclaje.
Para crear un anclaje con nombre:
1 En la vista de diseo de la ventana de documento, coloque el anclaje en el lugar donde desea
insertar el anclaje con nombre.
Seleccione Insertar > Anclaje con nombre.
Presione Control+Alt+A (Windows) o Comando+Opcin+A (Macintosh).
En la categora Comn de la barra Insertar, haga clic en el botn Anclaje con nombre.
Aparecer el cuadro de dilogo Anclaje con nombre.
3 En el cuadro de texto Nombre de anclaje, escriba un nombre para el anclaje y haga clic en
Aceptar.
El marcador del anclaje aparecer en el punto de insercin.
Nota: si no aparece el marcador del anclaje Ver > Ayudas visuales > Elementos invisibles.
Para establecer un vnculo con un anclaje con nombre:
1 En la vista Diseo de la ventana de documento, seleccione texto o una imagen para crear un
vnculo a partir de ellos.
2 En el cuadro de texto Vnculo del inspector de propiedades, introduzca un signo de nmero (#)
y el nombre del anclaje. Por ejemplo:
Para establecer un vnculo con un anclaje denominado superior en el archivo actual,
escriba #superior.
Para establecer un vnculo con un anclaje denominado superior en un archivo distinto de
la misma carpeta, escriba nombrearchivo.html#superior.
Nota: los nombres de anclaje distinguen entre maysculas y minsculas.
Para establecer un vnculo con un anclaje con nombre mediante el mtodo de sealizacin
de archivo:
1 Abra el documento que contiene el anclaje con nombre deseado.
Nota: si no ve el anclaje, seleccione Ver > Ayudas visuales > Elementos invisibles para poder verlo.
2 En la vista Diseo de la ventana de documento, seleccione texto o una imagen para crear un
vnculo a partir de ellos. (Si es otro documento abierto, deber cambiar a l.)
Haga clic en el icono de sealizacin de archivos situado a la derecha del cuadro de texto
Vnculo del inspector de propiedades y arrstrelo hasta el anclaje con el que desea establecer
el vnculo: un anclaje en el mismo documento o un anclaje en otro documento abierto.
En la ventana de documento, presione la tecla Mays mientras arrastra el texto o la imagen
seleccionada hasta el anclaje con el que desea establecer el vnculo: un anclaje en el mismo
documento o un anclaje en otro documento abierto.
Temas relacionados
Vinculacin de archivos y documentos en la pgina 331
Creacin de vnculos de script y nulos en la pgina 337
Creacin de un vnculo de correo electrnico
Cuando el usuario hace clic en un vnculo de correo electrnico se abre una nueva ventana de
mensaje en blanco (utilizando el programa de correo asociado al navegador del usuario). En la
ventana de mensaje de correo electrnico, el cuadro de texto Para se rellena automticamente con
la direccin especificada en el vnculo del mensaje de correo electrnico.
Para crear un vnculo de correo electrnico utilizando el comando Insertar vnculo de correo
electrnico:
1 En la vista Diseo de la ventana de documento, coloque el punto de insercin donde desea que
aparezca el vnculo de correo electrnico o seleccione el texto o la imagen que desea que aparezca
como vnculo de correo electrnico.
2 Siga uno de estos procedimientos para insertar el vnculo:
Seleccione Insertar > Vnculo de correo electrnico.
En la categora Comn de la barra Insertar, haga clic en el botn Insertar vnculo de correo
electrnico.
Aparecer el cuadro de dilogo Vnculo de correo electrnico.
Para crear un vnculo de correo electrnico mediante el inspector de propiedades:
2 En el cuadro de texto Vnculo del inspector de propiedades, escriba mailto: seguido de una
direccin de correo electrnico.
No escriba espacios entre los dos puntos y la direccin de correo electrnico. Por ejemplo,
escriba mailto:jlydon@macromedia.com.
Temas relacionados
Establecimiento de vnculos con una parte especfica de un documento en la pgina 334
Creacin de vnculos de script y nulos
Los vnculos ms utilizados son los que se establecen con documentos y anclajes con nombre
(vase Vinculacin de archivos y documentos en la pgina 331 y Establecimiento de vnculos
con una parte especfica de un documento en la pgina 334), aunque tambin hay otros tipos.
Un vnculo nulo es un vnculo no designado. Los vnculos nulos se utilizan para adjuntar
comportamientos a objetos o texto de una pgina. Una vez creado el vnculo nulo, puede
adjuntarle un comportamiento para cambiar una imagen o para mostrar una capa cuando el
puntero se desplaza sobre el vnculo. Para informacin sobre los sitios remotos, vase Aplicacin
de un comportamiento en la pgina 383.
Los vnculos de script ejecutan cdigo JavaScript o llaman a una funcin JavaScript. Sirven para
proporcionar a los usuarios informacin adicional sobre un elemento sin salir de la pgina actual.
Los vnculos de script tambin pueden emplearse para realizar clculos, validar formularios y otras
tareas de procesamiento cuando el usuario hace clic en un elemento especfico.
Para crear un vnculo nulo:
1 Seleccione texto, una imagen o un objeto en la vista Diseo de la ventana de documento.
2 En el inspector de propiedades, escriba javascript:; (la palabra javascript, seguida de dos puntos,
seguido de punto y coma) en el cuadro de texto Vnculo.
Para crear un vnculo de script:
1 Seleccione texto, una imagen o un objeto en la vista Diseo de la ventana de documento.
2 En el cuadro de texto Vnculo del inspector de propiedades, escriba javascript: y, a
continuacin, cdigo JavaScript o una llamada de funcin.
Por ejemplo, si escribe javascript:alert('Este vnculo lleva al ndice') en el cuadro de texto
Vnculo, se crear un vnculo que al activarse mostrar un cuadro de texto de advertencia
JavaScript con el mensaje Este vnculo lleva al ndice.
Nota: dado que el cdigo JavaScript aparece en el cdigo HTML entre comillas dobles (como el
valor del atributo href), deber utilizar comillas simples en el cdigo de script o anular el valor de
las comillas dobles introduciendo barras invertidas delante de ellas (por ejemplo, \"Este
vnculo lleva al ndice\").
Temas relacionados
Creacin de un vnculo de correo electrnico en la pgina 336
Administracin de vnculos
Para evitar que se rompan los vnculos en el sitio, puede activar la administracin de vnculos de
manera que Dreamweaver los actualice de forma automtica cuando se realice algn cambio.
Tambin puede utilizar una representacin visual del sitio para modificar los vnculos o bien
puede actualizar todos los vnculos con un determinado archivo realizando un nico cambio.
Actualizacin automtica de vnculos
Dreamweaver puede actualizar los vnculos con origen y destino en un documento cada vez que
ste se mueva o cambie de nombre en un sitio local. Esta funcin funciona mejor cuando se
almacena todo el sitio (o una seccin completa e independiente de ste) en el disco local.
Dreamweaver no cambia los archivos de la carpeta remota hasta que se colocan o desprotegen los
archivos locales en el servidor remoto.
Para acelerar el proceso de actualizacin, Dreamweaver puede crear un archivo de cach en el que
almacenar informacin sobre todos los vnculos de la carpeta local. El archivo de cach se
actualiza de manera invisible a medida que se van aadiendo, modificando o eliminando vnculos
a archivos del sitio local.
Para activar la administracin de vnculos en Dreamweaver:
2 Seleccione General en la lista de categoras de la izquierda.
Aparecern las opciones de preferencias generales.
3 En la seccin Opciones de documento, seleccione Siempre o Mensaje en el men emergente
Actualizar vnculos al mover archivos.
Si elige Siempre, Dreamweaver actualizar automticamente todos los vnculos con origen y
destino en un documento seleccionado cada vez que ste se mueva o cambie de nombre. Para
instrucciones especficas sobre cmo proceder en caso de eliminar un archivo, vase Cambio
de un vnculo en todo el sitio en la pgina 340.
Administracin de vnculos 339
Si elige Mensaje, Dreamweaver mostrar primero un cuadro de dilogo en el que aparecen
todos los archivos afectados por el cambio. Haga clic en Actualizar si desea actualizar los
vnculos de estos archivos o en No actualizar si desea dejar los archivos como estaban.
Para crear un archivo de cach para el sitio:
Aparece el cuadro de dilogo Editar sitios.
3 Haga clic en la ficha Avanzadas para ver la categora Avanzadas del cuadro de dilogo Definicin
del sitio.
4 Seleccione Datos locales en la lista de categoras de la izquierda.
El cuadro de dilogo Definicin del sitio muestra las opciones de Datos locales.
5 En la categora Datos locales, seleccione la casilla de verificacin Activar cach.
La primera vez que cambie o quite vnculos a archivos de la carpeta local despus de iniciar
Dreamweaver, Dreamweaver le pedir que cargue la cach. Si hace clic en S, se cargar la cach y
Dreamweaver actualizar todos los vnculos al archivo que acaba de modificar. Si hace clic en No,
el cambio se anotar en la cach, pero sta no se cargar y Dreamweaver no actualizar los
vnculos.
La cach puede tardar unos minutos en cargarse en sitios grandes. La mayor parte de este tiempo
se dedicar a comparar las marcas de hora de los archivos del sitio local con las marcas grabadas en
la cach, con el fin de comprobar si sta est desfasada. Si no ha cambiado ningn archivo fuera de
Dreamweaver, puede hacer clic en el botn Detener cuando aparezca.
Para volver a crear la cach del sitio:
En el panel Archivos, seleccione Sitio > Avanzadas > Volver a crear cach de sitio.
Modificacin de vnculos en el mapa del sitio
Puede modificar la estructura del sitio en el mapa de ste aadiendo, cambiando y eliminando
vnculos. Dreamweaver actualiza automticamente el mapa del sitio y muestra los cambios
realizados.
Para cambiar un vnculo:
1 En el mapa del sitio, seleccione la pgina de destino del vnculo que desea cambiar (de modo
que el documento que est vinculado a esa pgina seale a otra pgina) y, a continuacin, siga
uno de estos procedimientos:
Elija Sitio > Cambiar vnculo (Windows) o Sitio > Ver mapa del sitio > Cambiar vnculo
(Macintosh).
Nota: utilice el men Sitio del panel Archivos.
Control y haga clic (Macintosh) y elija Cambiar vnculo en el men contextual.
2 Acceda al archivo al que desea que seale el vnculo o introduzca un URL.
Para eliminar un vnculo:
1 Seleccione la pgina en el mapa del sitio.
Seleccione Sitio > Quitar vnculo (Windows) o Sitio > Ver mapa del sitio > Quitar vnculo
(Macintosh).
Nota: utilice el men Sitio del panel Archivos.
Control y haga clic (Macintosh) y elija Quitar vnculo en el men contextual.
Al quitar un vnculo no se elimina el archivo, slo desaparece el vnculo del cdigo HTML de la
pgina que seala al vnculo.
Para abrir el origen de un vnculo:
1 Seleccione un archivo en el mapa del sitio.
Elija Sitio > Abrir origen del vnculo (Windows) o Sitio > Ver mapa del sitio > Abrir origen
del vnculo (Macintosh).
Control y haga clic (Macintosh) y elija Abrir origen del vnculo en el men contextual.
Se abrirn el inspector de propiedades y el archivo de origen que contiene el vnculo en la ventana
de documento, con el vnculo resaltado.
Temas relacionados
Vinculacin de archivos y documentos en la pgina 331
Utilizacin de un mapa visual del sitio en la pgina 93
Cambio de un vnculo en todo el sitio
Adems de configurar Dreamweaver para que actualice los vnculos automticamente cada vez
que mueva o cambie de nombre un archivo, puede cambiar manualmente todos los vnculos
(incluidos los vnculos nulos, de correo electrnico, FTP y script) para que sealen a otro lugar.
Puede utilizar esta opcin en cualquier momento. Por ejemplo, puede vincular las palabras
"pelculas del mes" a /pelculas/julio.html en todo el sitio y el 1 de agosto deber cambiar esos
vnculos para que sealen a /pelculas/agosto.html. Sin embargo, esta funcin resulta
particularmente til para eliminar un archivo con el que estn vinculados otros archivos.
Para cambiar un vnculo en todo el sitio:
1 Seleccione un archivo en la vista Local del panel Archivos.
Nota: si cambia un vnculo nulo, de correo electrnico, FTP o script, no necesita seleccionar un
archivo.
2 Elija Sitio > Cambiar vnculo en todo el sitio.
Insercin de mens de salto 341
Aparecer el cuadro de dilogo Cambiar vnculo en todo el sitio.
Dreamweaver actualizar todos los documentos vinculados al archivo seleccionado, haciendo
que sealen al nuevo archivo y usando el formato de ruta empleado por el documento (por
ejemplo, si la ruta antigua era relativa al documento, la nueva tambin deber serlo). No
importa si el tipo de vnculo es relativo al documento o a la raz. Dreamweaver actualizar el
vnculo automticamente.
Despus de cambiar un vnculo en todo el sitio, el archivo seleccionado quedar hurfano (es
decir, ningn archivo del disco local estar vinculado a l). Entonces podr eliminarlo sin romper
ningn vnculo del sitio local de Dreamweaver.
Nota: dado que estos cambios se realizan localmente, deber eliminar manualmente el archivo
hurfano correspondiente en la carpeta remota y colocar o desproteger los archivos cuyos vnculos
haya modificado para que los visitantes del sitio puedan ver los cambios efectuados.
Insercin de mens de salto
Los mens de salto permiten asociar los URL con las opciones de una lista de men emergente. Al
elegir un elemento de la lista, al usuario se le remite (o salta) al URL especificado. Los mens de
salto se insertan dentro del objeto de formulario Men de salto.
Para insertar un men de salto:
1 Abra un documento y, a continuacin, site el punto de insercin en la ventana de documento.
Seleccione Insertar > Formulario > Men de salto.
En la categora Formulario de la barra Insertar, haga clic en el botn Men de salto.
Aparecer el cuadro de dilogo Insertar men de salto.
El men de salto aparecer en el documento.
Temas relacionados
Solucin de problemas relacionados con los mens de salto en la pgina 343
Edicin de los elementos del men de salto
Para editar los elementos del men de salto, puede cambiar el orden de la lista o el archivo con el
que est vinculado un elemento. Tambin puede aadir, eliminar o cambiar el nombre de un
elemento.
Para cambiar la ubicacin en la que se abre un archivo vinculado o para aadir o cambiar un
mensaje de seleccin de men deber utilizar el panel Comportamientos (vase Men de salto
en la pgina 394).
Para editar un elemento del men de salto mediante el inspector de propiedades:
1 Elija Ventana > Propiedades para abrir el inspector de propiedades si no est abierto.
2 En la vista Diseo de la ventana de documento, haga clic en el objeto Men de salto para
seleccionarlo.
El icono Lista/men aparecer en el inspector de propiedades.
3 En el inspector de propiedades, haga clic en el botn Valores de lista.
Aparecer el cuadro de dilogo Lista de valores.
4 Realice cambios necesarios en los elementos del men y, a continuacin, haga clic en Aceptar.
Temas relacionados
Utilizacin de las barras de navegacin 343
Solucin de problemas relacionados con los mens de salto
Una vez que el usuario selecciona un elemento del men de salto no podr volver a seleccionarlo si
regresa a esa pgina o si el campo Abrir URL en especifica un marco. Hay dos formas de
solucionar este problema:
Utilice un mensaje de seleccin de men, como una categora, o instrucciones para el usuario,
como Elija una opcin. Un mensaje de seleccin de men vuelve a seleccionarse
automticamente despus de cada seleccin del men.
Utilice un botn Ir, que permite al usuario volver a visitar el vnculo seleccionado actualmente.
Nota: seleccione slo una de estas opciones por men de salto en el cuadro de dilogo Insertar
men de salto, ya que se aplican a todo el men de salto.
Temas relacionados
Edicin de los elementos del men de salto en la pgina 342
Utilizacin de las barras de navegacin
Una barra de navegacin se compone de una imagen o un conjunto de imgenes cuya
visualizacin cambia segn las acciones que realice el usuario.
Antes de usar el comando Insertar barra de navegacin, debe crear un conjunto de imgenes para
los estados de visualizacin de cada elemento de navegacin. (Considere el elemento de la barra de
navegacin como si fuera un botn, ya que cuando el usuario hace clic en l, le lleva a otra
pgina.)
Una vez creada una barra de navegacin para un documento, puede aadir o quitar imgenes de la
barra utilizando el comando Modificar barra de navegacin. Utilice este comando para cambiar
una imagen o un conjunto de imgenes, para determinar qu archivo se abre cuando se hace clic
en un elemento, para seleccionar otra ventana o marco para abrir un archivo o para reordenar las
imgenes.
Temas relacionados
Insercin de una barra de navegacin
Cuando inserte una barra de navegacin, asigne nombres a los elementos de la barra y seleccione
imgenes para ellas.
Sugerencia: puede crear una barra de navegacin, copiarla en otras pginas del sitio, utilizarla con
marcos y editar los comportamientos de la pgina para mostrar distintos estados a medida que se
accede a las pginas.
Para crear una barra de navegacin:
Seleccione Insertar > Objetos de imagen > Barra de navegacin.
En la categora Comn de la barra Insertar, haga clic en el men Imgenes y seleccione el
botn Insertar barra de navegacin.
Aparecer el cuadro de dilogo Insertar barra de navegacin.
Temas relacionados
Modificacin de una barra de navegacin
Una vez creada una barra de navegacin para un documento, puede aadir o quitar imgenes de la
barra utilizando el comando Modificar barra de navegacin.
Para modificar una barra de navegacin:
1 Seleccione la barra de navegacin en la pgina activa.
2 Seleccione Modificar > Barra de navegacin.
Aparecer el cuadro de dilogo Modificar barra de navegacin.
Utilizacin de los mapas de imagen 345
3 En la lista Elementos de barra de navegacin, seleccione el elemento que desea editar.
Temas relacionados
Insercin de una barra de navegacin en la pgina 343
Utilizacin de los mapas de imagen
Un mapa de imagen es una imagen que se ha dividido en regiones o zonas interactivas. Cuando el
usuario hace clic en una zona interactiva, se realiza una accin, por ejemplo, se abre un archivo
nuevo.
Temas relacionados
Insercin de mapas de imagen del lado del cliente
Cuando inserte un mapa de imagen del lado del cliente, cree una zona interactiva y, a
continuacin, defina un vnculo que se abra cuando el usuario haga clic en la zona interactiva.
Nota: puede crear mltiples zonas interactivas, pero formarn parte del mismo mapa de imagen.
Para crear un mapa de imagen del lado del cliente:
1 En la ventana de documento, seleccione la imagen.
2 En el inspector de propiedades, haga clic en la flecha de ampliacin, situada en la esquina
inferior derecha, para ver todas las propiedades.
3 En el cuadro de texto Mapa, introduzca un nombre exclusivo para el mapa de imagen.
Nota: si utiliza mltiples mapas de imagen en el mismo documento, asigne un nombre exclusivo a
cada uno.
4 Para definir las reas de mapas de imagen, siga uno de estos procedimientos:
Seleccione la herramienta circular y arrastre el puntero sobre la imagen para crear una zona
interactiva circular.
Seleccione la herramienta de rectngulo y arrastre el puntero sobre la imagen para crear una
zona interactiva rectangular.
Seleccione la herramienta poligonal y defina una zona interactiva con forma irregular
haciendo clic una vez en cada esquina. Haga clic en la herramienta de flecha para cerrar la
forma.
Despus de crear la zona interactiva, aparecer el inspector de propiedades de zonas
interactivas.
5 Seleccione las opciones deseadas del inspector de propiedades de zonas interactivas.
6 Cuando termine de definir el mapa de imagen, haga clic en un rea en blanco del documento
para cambiar el inspector de propiedades.
Temas relacionados
Modificacin de un mapa de imagen
Puede editar fcilmente las zonas interactivas creadas en un mapa de imagen. Puede mover un rea
de zonas interactivas, cambiar el tamao de las zonas interactivas o adelantar o retrasar una zona
interactiva en una capa.
Tambin puede copiar una imagen con zonas interactivas de un documento a otro o copiar una o
ms zonas interactivas de una imagen y pegarlas en otra imagen. Las zonas interactivas asociadas a
la imagen tambin se copiarn en el nuevo documento.
Para seleccionar mltiples zonas interactivas en un mapa de imagen:
1 Utilice la herramienta de puntero para seleccionar una zona interactiva.
Mantenga presionada la tecla Mays mientras hace clic en las otras zonas interactivas que
desea seleccionar.
Presione Control+A (Windows) o Comando+A (Macintosh) para seleccionar todas las zonas
interactivas.
Para mover una zona interactiva:
1 Utilice la herramienta de puntero para seleccionar la zona interactiva que desea mover.
Arrastre la zona interactiva a una nueva rea.
Utilice Mays y las teclas de flecha para mover una zona interactiva 10 pxeles en la
direccin seleccionada.
Utilice las teclas de flecha para mover una zona interactiva un pxel en la direccin
seleccionada.
Para cambiar el tamao de una zona interactiva:
1 Utilice la herramienta de puntero para seleccionar la zona interactiva cuyo tamao desea
cambiar.
2 Arrastre el manejador de zona interactiva para cambiar el tamao o la forma de la zona
interactiva.
Temas relacionados
Insercin de mapas de imagen del lado del cliente en la pgina 345
Comprobacin de vnculos rotos, externos y hurfanos 347
Cmo adjuntar comportamientos JavaScript a vnculos
Puede adjuntar un comportamiento a cualquier vnculo de un documento (vase Aplicacin de
un comportamiento en la pgina 383). Puede emplear los comportamientos siguientes a la hora
de insertar elementos vinculados a los documentos:
Establecer texto de la barra de estado determina el texto de un mensaje y lo muestra en la barra
de estado, que se encuentra en la parte inferior izquierda de la ventana del navegador. Por
ejemplo, puede usar esta accin para describir el destino de un vnculo en la barra de estado en
lugar de mostrar el URL al que est asociado. (Vase Establecer texto de la barra de estado en
la pgina 400.)
Abrir ventana del navegador abre un URL en una nueva ventana. Se pueden especificar las
propiedades de la nueva ventana, incluidos su tamao, sus atributos (si se puede cambiar su
tamao, si tiene barra de mens, etc.) y su nombre. (Vase Abrir ventana del navegador en
la pgina 395.)
Men de salto edita un men de salto. Puede cambiar la lista del men, especificar otro archivo
vinculado o cambiar la ubicacin del navegador en el que se abre el documento vinculado. (Vase
Men de salto en la pgina 394.)
Establecer imagen de barra de navegacin cambia el comportamiento de una barra de
navegacin. Utilcelo para personalizar la visualizacin de las imgenes en una barra de
navegacin. Por ejemplo, cuando el puntero se encuentra sobre parte de la barra de navegacin,
cambia la visualizacin de las otras imgenes de la barra de navegacin o del documento. (Vase
Establecer imagen de barra de navegacin en la pgina 398.)
Comprobacin de vnculos rotos, externos y hurfanos
Utilice la funcin Comprobar vnculos para buscar vnculos rotos y archivos sin referencia (tambin
denominados hurfanos, es decir, archivos que todava existen en el sitio sin vnculo con ningn otro
archivo del sitio) en archivos abiertos, partes de un sitio local o sitios locales completos.
Los nicos vnculos que Dreamweaver verifica son los establecidos con documentos del sitio.
Asimismo, Dreamweaver recopila una lista de vnculos externos que aparecen en el documento o
documentos seleccionados, pero no los verifica.
Para comprobar los vnculos del documento actual:
1 Guarde el archivo en una ubicacin dentro del sitio local de Dreamweaver.
2 Elija Archivo > Comprobar pgina > Comprobar vnculos.
El informe Vnculos rotos aparecer en el panel Verificador de vnculos (en el grupo de paneles
Resultados).
3 En el panel Verificador de vnculos, seleccione Vnculos externos en el men emergente Ver
para visualizar otro informe.
El informe Vnculos externos aparecer en el panel Verificador de vnculos (en el grupo de
paneles Resultados).
Sugerencia: slo podr comprobar la existencia de archivos hurfanos si comprueba los vnculos
de todo el sitio.
4 Para guardar el informe, haga clic en el botn Guardar informe del panel Verificador de
vnculos.
Nota: el informe del navegador de destino es un archivo temporal que se perder si no lo guarda.
Para comprobar los vnculos de una parte de un sitio local:
1 En el panel Archivos, seleccione un sitio en el men emergente Sitios actuales.
2 En la vista Local, seleccione los archivos o las carpetas que desea comprobar.
3 Inicie la comprobacin siguiendo uno de estos procedimientos:
Control y haga clic (Macintosh) en uno de los archivos seleccionados y elija Comprobar
vnculos > Archivos/carpetas seleccionados en el men contextual.
Elija Archivo > Comprobar pgina > Comprobar vnculos.
Resultados).
4 En el panel Verificador de vnculos, seleccione Vnculos externos en el men emergente Ver
para visualizar otro informe.
El informe Vnculos externos aparecer en el panel Verificador de vnculos (en el grupo de
paneles Resultados).
Sugerencia: slo podr comprobar los archivos hurfanos si comprueba los vnculos de todo el
sitio (vase el siguiente procedimiento).
vnculos.
Para comprobar los vnculos de todo el sitio:
1 En el panel Archivos, seleccione un sitio en el men emergente Sitios actuales.
2 Elija Sitio > Comprobar vnculos en todo el sitio.
Resultados).
3 En el panel Verificador de vnculos, seleccione Vnculos externos o Archivos hurfanos del
men emergente Ver para visualizar otro informe.
La lista de archivos correspondientes al tipo de informe seleccionado aparecer en el panel
Verificador de vnculos.
Nota: si selecciona el tipo de informe Archivos hurfanos, podr eliminar directamente los
archivos hurfanos desde el panel Verificador de vnculos. Para ello, seleccione un archivo de la
lista y presione la tecla Supr.
vnculos.
Reparacin de vnculos rotos 349
Reparacin de vnculos rotos
Puede ejecutar un informe sobre vnculos, reparar las referencias de imagen y los vnculos rotos
directamente en el panel Verificador de vnculos, o abrir los archivos desde la lista y reparar los
vnculos en el inspector de propiedades.
Para reparar los vnculos en el panel Verificador de vnculos:
1 Ejecute un informe de comprobacin de vnculos (vase Comprobacin de vnculos rotos,
externos y hurfanos en la pgina 347).
2 En la columna Vnculos rotos (no en la columna Archivos) del panel Verificador de vnculos (en
el grupo de paneles Resultados), seleccione el vnculo roto.
Aparecer un icono de carpeta junto al vnculo roto.
3 Haga clic en el icono de carpeta para localizar el archivo con el que desea establecer el vnculo o
escriba su ruta y nombre.
4 Presione la tecla Tab o Intro (Windows) o Retorno (Macintosh).
Si hay otras referencias rotas a ese mismo archivo, aparecer un cuadro de dilogo pidindole
que repare las referencias en los otros archivos. Haga clic en S para actualizar todos los
documentos de la lista que hacen referencia al archivo. Haga clic en No si desea actualizar
nicamente la referencia actual.
Nota: si est activada la funcin Permitir desproteger y proteger archivo para este sitio,
Dreamweaver intentar proteger los archivos que requieren cambios. Si no puede proteger un
archivo, Dreamweaver mostrar un cuadro de dilogo de advertencia y no cambiar las referencias
rotas. Vase Desproteccin y proteccin de archivos en la pgina 101.
Para reparar vnculos en el inspector de propiedades:
1 Ejecute un informe de comprobacin de vnculos (vase Comprobacin de vnculos rotos,
externos y hurfanos en la pgina 347).
2 En el panel Verificador de vnculos (en el grupo de paneles Resultados), haga doble clic en una
entrada de la columna Archivo.
Dreamweaver abrir el documento, seleccionar la imagen o el vnculo problemticos y
resaltar la ruta y el nombre de archivo en el inspector de propiedades. (Si el inspector de
propiedades no est visible, elija Ventana > Propiedades para abrirlo).
3 Si desea establecer una ruta y un nombre de archivo nuevos en el inspector de propiedades, haga
clic en el icono de carpeta para localizar el archivo correspondiente o sobrescriba el texto
resaltado.
Si est actualizando una referencia de imagen y la nueva imagen aparece con un tamao
incorrecto, haga clic en las etiquetas An y Al del inspector de propiedades o en el botn
Actualizar para restablecer los valores de altura y anchura. Las etiquetas An y Al cambiarn de
negrita a tipo normal.
4 Guarde el archivo.
A medida que los vnculos se van reparando, sus entradas desaparecen de la lista Verificador de
vnculos. Si sigue apareciendo una entrada en la lista despus de introducir una ruta o un nombre
de archivo nuevo en el Verificador de vnculos (o despus de guardar los cambios realizados en el
inspector de propiedades), significa que Dreamweaver no encuentra el archivo nuevo y sigue
considerando roto el vnculo.
Apertura de documentos vinculados en Dreamweaver
Los vnculos no estn activos en Dreamweaver, es decir, no se puede abrir un documento
vinculado haciendo doble clic en el vnculo en la ventana de documento.
Para abrir documentos vinculados en Dreamweaver, siga uno de estos procedimientos:
Seleccione el vnculo y elija Modificar > Abrir pgina vinculada.
Presione Control (Windows) o Comando (Macintosh) y haga doble clic en el vnculo.
Nota: el documento vinculado debe encontrarse en el disco local.
Temas relacionados
Vista previa y comprobacin de pginas en los navegadores en la pgina 277
Comprobacin de vnculos rotos, externos y hurfanos en la pgina 347
Reparacin de vnculos rotos en la pgina 349
351
CAPTULO 16
Utilizacin con otras aplicaciones
Macromedia Fireworks MX 2004, Macromedia Flash MX 2004 y Macromedia Flash MX
Professional 2004 son unas potentes herramientas de desarrollo Web que permiten crear grficos y
pelculas SWF que se visualizarn en pginas Web. Macromedia Dreamweaver 2004 puede
integrarse completamente con dichas herramientas para simplificar el flujo de trabajo de diseo de
sitios Web.
Insertar imgenes o tablas de Fireworks y contenido Flash (archivos SWF) en un documento de
Dreamweaver es sencillo. Tambin puede utilizar las funciones de integracin entre Dreamweaver
y Fireworks o Flash para modificar una imagen o pelcula una vez la haya insertado en un
documento de Dreamweaver.
Nota: para utilizar Dreamweaver junto con Fireworks y Flash, debe tener instaladas las tres
aplicaciones en su equipo.
Integracin de Fireworks y Flash en la pgina 352
Optimizacin del entorno de trabajo para Fireworks y Flash en la pgina 352
Utilizacin de Fireworks en la pgina 353
Utilizacin de Flash en la pgina 361
352 Captulo 16: Utilizacin con otras aplicaciones
Integracin de Fireworks y Flash
La edicin Roundtrip y las Design Notes permiten a Dreamweaver integrar su funcionamiento
con el de Fireworks y Flash. La edicin Roundtrip asegura que las actualizaciones de cdigo se
transfieran correctamente entre Dreamweaver y estas aplicaciones para preservar, por ejemplo,
comportamientos de sustitucin o vnculos a otros archivos.
Design Notes son archivos pequeos que permiten a Dreamweaver localizar el documento de
origen adecuado para un archivo de imagen o de pelcula importado. Al exportar archivos
directamente desde Fireworks o Flash a un sitio de Dreamweaver definido, se exportan
automticamente al sitio las Design Notes que contienen referencias al archivo PNG o Flash
(FLA) junto con el archivo preparado para la Web (GIF, JPEG o SWF). Para informacin, vase
Design Notes en la pgina 83.
Adems de la informacin de localizacin, las Design Notes contienen otra informacin relevante
acerca de los archivos exportados. Por ejemplo, al exportar una tabla de Fireworks, Fireworks
escribe una Design Note para cada archivo de imagen exportado de la tabla. Si el archivo exportado
contiene zonas interactivas o imgenes de sustitucin, el cdigo JavaScript correspondiente a dichas
zonas o imgenes est contenido en el documento HTML que Fireworks exporta.
Optimizacin del entorno de trabajo para Fireworks y Flash
La clave para desarrollar un proceso de trabajo que se integre perfectamente con Fireworks o Flash
consiste en optimizar el entorno de trabajo.
Para optimizar el entorno de trabajo para Fireworks y Flash:
1 Compruebe que las Design Notes estn activadas para el sitio de Dreamweaver.
Las Design Notes se activan automticamente, salvo que modifique la configuracin
predeterminada del sitio. Para informacin sobre la activacin de Design Notes, vase
Activacin y desactivacin de Design Notes para un sitio en la pgina 112. Para informacin
sobre la funcin de las Design Notes, vase Integracin de Fireworks y Flash en
la pgina 352.
2 Para iniciar Fireworks rpidamente desde Dreamweaver, configure Fireworks como el editor
principal de imgenes externo de Dreamweaver.
Defina Fireworks como el editor principal para los tipos de archivo grfico GIF, PNG y JPEG.
Para ms informacin, consulte Utilizacin de un editor de imgenes externo en
la pgina 322 o bien el apartado Configuracin de las preferencias del editor de imgenes
externo en la Ayuda de Dreamweaver.
3 Guarde los archivos de origen y los archivos preparados para la Web de Fireworks y Flash en la
carpeta que haya definido del sitio de Dreamweaver.
De esta forma se asegura que cualquier usuario que comparta el sitio ser capaz de localizar el
documento de origen al editar una imagen o una tabla de Fireworks o una pelcula SWF en
Dreamweaver.
4 Cuando exporte archivos de imagen de Fireworks, hgalo a la carpeta del sitio de Dreamweaver.
Al exportar un grfico GIF o JPEG de Fireworks a una carpeta de un sitio de Dreamweaver,
Fireworks crea una carpeta llamada _notes en la misma carpeta. Esta carpeta contiene las
Design Notes que necesita Dreamweaver para trabajar con Fireworks.
Utilizacin de Fireworks 353
Utilizacin de Fireworks
Dreamweaver y Fireworks reconocen y comparten muchas de las mismas funciones de edicin de
archivos, incluyendo la modificacin de vnculos, los mapas de imgenes y las capas de tablas,
entre otras. Juntas, las dos aplicaciones le ofrecen un flujo de trabajo racionalizado para editar,
optimizar y colocar archivos grficos Web en pginas HTML.
Insercin de una imagen de Fireworks
Los grficos de Fireworks se pueden colocar en un documento de Dreamweaver de distintas
formas. Puede colocar un grfico de Fireworks exportado directamente en un documento de
Dreamweaver mediante el comando de insercin de imagen o crear un nuevo grfico de Fireworks
a partir de un marcador de posicin de imagen de Dreamweaver (vase Utilizacin de Fireworks
para modificar marcadores de posicin de imagen de Dreamweaver en la pgina 355).
Para insertar una imagen de Fireworks en un documento de Dreamweaver:
1 En el documento de Dreamweaver, coloque el punto de insercin en el lugar en el que desea que
aparezca la imagen y siga uno de estos procedimientos:
Seleccione Insertar > Imagen.
En la categora Comn de la barra Insertar, haga clic en el botn Imagen o arrstrelo al
documento.
2 Desplcese hasta el archivo exportado de Fireworks que desea y haga clic en Aceptar (Windows)
o Abrir (Macintosh).
Nota: si el archivo Fireworks no se encuentra en el sitio de Dreamweaver actual, aparece un
mensaje que le pregunta si desea copiar el archivo en la carpeta raz. Haga clic en S.
Edicin de una imagen o una tabla de Fireworks desde Dreamweaver
Desde Dreamweaver puede iniciar Fireworks para editar imgenes insertadas en un documento de
Dreamweaver. Cuando se abre o edita una imagen o un corte de imagen que forma parte de una
tabla de Fireworks, Dreamweaver inicia Fireworks, que abre el archivo PNG desde el que se ha
exportado la imagen o la tabla.
Cuando la imagen forma parte de una tabla de Fireworks, puede abrir la tabla completa de
Fireworks para editarla, siempre y cuando el comentario  exista en el cdigo
HTML. Si el PNG origen se export desde Fireworks a un sitio de Dreamweaver utilizando la
configuracin para imgenes y HTML Estilo Dreamweaver, el comentario de la tabla de
Fireworks se inserta automticamente en el cdigo HTML.
Para iniciar y editar una imagen de Fireworks colocada en Dreamweaver:
1 En Dreamweaver, elija Ventana > Propiedades para abrir el inspector de propiedades, si es que
no est ya abierto.
2 Haga clic en la imagen o en el corte de imagen para seleccionarla.
Al seleccionar una imagen exportada desde Fireworks, el inspector de propiedades identifica la
seleccin como imagen o tabla de Fireworks y muestra el nombre del archivo PNG de origen.
3 Para iniciar Fireworks para editar, siga uno de estos procedimientos:
En el inspector de propiedades, haga clic en Editar.
Mantenga presionada la tecla Control (Windows) o Comando (Macintosh) y haga doble
clic en la imagen seleccionada.
Control y haga clic (Macintosh) en la imagen deseada, y seleccione Editar con Fireworks en
el men contextual.
Fireworks se inicia y abre el archivo PNG asociado para editarlo.
Nota: si Fireworks no puede localizar el archivo origen, le solicita que indique la ubicacin del
archivo PNG origen. Al trabajar con el archivo origen de Fireworks, los cambios se guardan tanto
en el archivo origen como en el archivo exportado. De otro modo, slo se actualiza el archivo
exportado.
4 En Fireworks, edite el PNG origen.
5 Cuando haya terminado de hacer cambios, haga clic en Listo.
Fireworks guarda los cambios en el archivo PNG, exporta la imagen actualizada (o HTML e
imgenes), y devuelve la atencin a Dreamweaver. En Dreamweaver, aparece la imagen o la
tabla actualizada.
Optimizacin de una imagen de Fireworks desde Dreamweaver
Puede iniciar Fireworks desde Dreamweaver para realizar rpidos cambios de exportacin, como
cambiar el tamao de una imagen o cambiar el tipo de archivo, en las imgenes y animaciones de
Fireworks colocadas. Fireworks le permite cambiar la configuracin de optimizacin y animacin,
y el tamao y el rea de la imagen exportada.
Para cambiar la configuracin de optimizacin de una imagen de Fireworks colocada en
Dreamweaver:
1 En Dreamweaver, seleccione la imagen deseada y elija Comandos > Optimizar imagen en
Fireworks.
2 Si el sistema lo solicita, especifique si desea iniciar un archivo origen de Fireworks para la imagen
colocada.
3 En Fireworks, realice las modificaciones que desee en el cuadro de dilogo Optimizacin:
Para modificar la configuracin de optimizacin, haga clic en la ficha Opciones. Para ms
informacin, vase Utilizacin de Fireworks.
Para modificar el tamao y el rea de la imagen exportada, haga clic en la ficha Archivo.
4 Cuando termine de editar la imagen, haga clic en Actualizar.
Al hacer clic en Actualizar, la imagen se exporta con la nueva configuracin de optimizacin, el
archivo GIF o JPEG colocado en Dreamweaver se actualiza y el archivo PNG origen, en caso
de haber seleccionado uno, se guarda.
Si ha cambiado el formato de la imagen, el verificador de vnculos de Dreamweaver le solicita
que actualice las referencias a la imagen. Por ejemplo, si cambia el formato de la imagen
mi_imagen de GIF a JPEG, el hecho de hacer clic en Aceptar respondiendo a la solicitud del
verificador cambia todas las referencias a mi_imagen.gif del sitio por mi_imagen.jpg.
Utilizacin de Fireworks para modificar marcadores de posicin de imagen de
Dreamweaver
Puede crear un marcador de posicin de imagen en un documento de Dreamweaver y, a
continuacin, iniciar Fireworks para disear una imagen grfica o una tabla de Fireworks para
sustituirlo. Para informacin sobre cmo insertar un marcador de posicin de imagen, vase
Insercin de un marcador de posicin de imagen en la pgina 315.
Para crear una nueva imagen a partir de un marcador de posicin de imagen, debe tener tanto
Dreamweaver MX como Fireworks MX instalados en el sistema.
Para editar un marcador de posicin de imagen de Dreamweaver en Fireworks:
1 Compruebe que ya ha definido Fireworks como el editor de imgenes para los archivos .png.
Para informacin, vase Configuracin de las preferencias del editor de imgenes externo en la
2 En la ventana de documento, haga clic en el marcador de posicin de imagen para seleccionarlo.
3 Para iniciar Fireworks y comenzar a editar, siga uno de estos procedimientos:
En el inspector de propiedades, haga clic en Crear.
Presione Control (Windows) o Comando (Macintosh) y haga doble clic en el marcador de
posicin de imagen.
Haga clic con el botn derecho del ratn (Windows) o mantenga pulsada la tecla Control y
haga clic (Macintosh) en el marcador de posicin de imagen y, a continuacin, seleccione
Crear imagen en Fireworks.
Fireworks se inicia en el modo Editar desde Dreamweaver.
4 Utilice las opciones de Fireworks para disear la imagen.
Fireworks reconoce la siguiente configuracin del marcador de posicin de imagen que ha
establecido al trabajar con el marcador de posicin de imagen en Dreamweaver: el tamao de
imagen (que guarda correlacin con el tamao de lienzo de Fireworks), el identificador de
imagen (que Fireworks utiliza como nombre de documento predeterminado para el archivo
origen y el archivo de exportacin que crea), la alineacin del texto y los comportamientos que
reconoce Fireworks (como por ejemplo la imagen intercambiada, el men emergente, la barra
de navegacin y la definicin de texto). Fireworks tambin reconoce los vnculos que ha
adjuntado al marcador de posicin de imagen mientras trabajaba en Dreamweaver.
Nota: aunque los vnculos aadidos a un marcador de posicin de imagen no se pueden ver en
Fireworks, se mantienen. Si dibuja una zona interactiva y aade un vnculo en Fireworks MX, no
eliminar el vnculo que ha aadido al marcador de posicin de imagen en Dreamweaver. No
obstante, si realiza un corte en Fireworks en la nueva imagen, eliminar el vnculo en el documento
de Dreamweaver al sustituir el marcador de posicin de imagen.
Estos parmetros del marcador de posicin de imagen se desactivan en el inspector de
propiedades de marcadores de imagen puesto que Fireworks no los reconoce: Alinear, Color,
Espacio V, Espacio H y Mapa.
5 Cuando haya terminado, haga clic en Listo.
Se abre el cuadro de dilogo Guardar como. Fireworks le solicita que guarde el archivo PNG.
6 En el cuadro de texto Guardar en, seleccione la carpeta que ha definido como la carpeta del sitio
local Dreamweaver.
Si ha nombrado el marcador de posicin de imagen al insertarlo en el documento de
Dreamweaver, Fireworks completa el cuadro de texto Nombre de archivo con dicho nombre.
Puede cambiar el nombre si desea hacerlo.
7 Haga clic en Guardar para guardar el archivo PNG.
Se abre el cuadro de dilogo Exportar. Utilice este cuadro de dilogo para exportar la imagen
como GIF, JPEG o, si se trata de imgenes con cortes, HTML e imgenes.
8 En el cuadro de dilogo Exportar, elija la carpeta del sitio local Dreamweaver como valor para
el campo Guardar en.
9 El cuadro de texto Nombre se actualiza automticamente con el mismo nombre que ha utilizado
para el archivo PNG. Escriba otro texto para cambiar el nombre si desea hacerlo.
10 En el campo Guardar como tipo, seleccione el tipo de archivo o archivos que desea exportar; por
ejemplo Slo imgenes o HTML e imgenes.
11 Haga clic en Guardar para guardar el archivo exportado.
El archivo se guarda y el usuario vuelve a Dreamweaver. En el documento de Dreamweaver, el
archivo o la tabla de Fireworks exportados sustituyen al marcador de posicin de imagen.
Apertura de un men emergente de Fireworks en Dreamweaver
Fireworks admite los mens emergentes basados en imgenes y los mens emergentes basados en
HTML. Dreamweaver slo admite mens emergentes basados en HTML. En Dreamweaver,
puede abrir un men emergente de Fireworks y editar todas las propiedades de los elementos de
men excepto las imgenes de fondo de los mens emergentes basados en imgenes.
Para editar imgenes de fondo en un men emergente basado en imgenes, seleccione la imagen
que desea actualizar en Dreamweaver y haga clic en Editar. Para informacin sobre cmo editar
una imagen en Fireworks, vase Edicin de una imagen o una tabla de Fireworks desde
Si el men emergente que desea editar es un men emergente basado en imgenes y desea
conservar los fondos de celda basados en imgenes, debe editar el men emergente en Fireworks y
no en Dreamweaver.
Para abrir el men emergente de Fireworks:
1 En el documento de Dreamweaver, seleccione la zona interactiva o la imagen que activa el men
emergente.
2 Abra el panel Comportamientos (Mays+F3), si no est ya abierto y, en la lista Acciones, haga
doble clic en Mostrar men emergente.
Se abre el cuadro de dilogo Mostrar men emergente. El comportamiento Mostrar men
emergente permite editar o actualizar los contenidos de un men emergente de Fireworks
basado en HTML. Puede aadir, eliminar o cambiar elementos de men, reorganizarlos y
definir la posicin del men en la pgina. Para informacin sobre cmo configurar y modificar
opciones del men emergente, vase Mostrar men emergente en la pgina 403.
3 Realice las modificaciones que desee en el men emergente.
4 Al terminar de modificar el men emergente, haga clic en Aceptar.
Especificacin de preferencias de ejecucin y edicin de archivos de origen
de Fireworks
Al utilizar Fireworks para editar imgenes, Fireworks normalmente exporta las imgenes que
coloque en las pginas Web desde un archivo PNG de origen. Al abrir (ejecutar) un archivo de
imagen de Dreamweaver para su edicin, Fireworks abre automticamente el archivo PNG de
origen, y si no lo encuentra le solicita que lo localice. Si lo prefiere, puede establecer las
preferencias en Fireworks para que Dreamweaver abra la imagen insertada, o puede hacer que
Fireworks ofrezca la opcin de utilizar el archivo de imagen insertado o el archivo Fireworks de
origen cada vez que abra una imagen en Dreamweaver.
Nota: Dreamweaver reconoce las preferencias de ejecucin y edicin de Fireworks nicamente en
determinados casos. En concreto, debe abrir y optimizar una imagen que no sea parte de una tabla
de Fireworks y que contenga una ruta de acceso correcta de Design Notes a un archivo PNG origen.
Para especificar las preferencias de ejecucin y edicin de Fireworks:
1 En Fireworks, seleccione Edicin > Preferencias o Fireworks > Preferencias (Macintosh) y, a
continuacin, haga clic en la ficha Ejecutar y editar (Windows) o seleccione Ejecutar y editar en
el men emergente (Macintosh).
2 Especifique las opciones de preferencia que se utilizarn al editar u optimizar imgenes de
Fireworks colocadas en una aplicacin externa:
Utilizar siempre origen PNG abre automticamente el archivo PNG de Fireworks definido en
la Design Note como origen de la imagen colocada. Las actualizaciones se realizan tanto en el
archivo PNG origen como en su correspondiente imagen colocada.
No utilizar nunca PNG origen abre automticamente la imagen de Fireworks colocada, exista
o no un archivo PNG origen. Las actualizaciones slo se realizan en la imagen colocada.
Preguntar al ejecutar permite especificar cada vez si debe abrirse o no el archivo PNG origen.
Al editar u optimizar una imagen colocada, Fireworks muestra un mensaje solicitndole que
tome una decisin de ejecucin y edicin. Tambin es posible especificar preferencias de
ejecucin y edicin globales a partir de este mensaje.
Insercin de cdigo HTML de Fireworks en un documento de Dreamweaver
El comando Exportar de Fireworks permite exportar y guardar los archivos de imagen y de cdigo
HTML optimizados a una ubicacin deseada de la carpeta del sitio de Dreamweaver. A
continuacin puede insertar el archivo en Dreamweaver. Para informacin sobre cmo exportar
archivos de Fireworks como HTML, vase Utilizacin de Fireworks.
Dreamweaver le permite insertar en un documento el cdigo HTML generado por Fireworks
junto con las imgenes asociadas, los cortes y el cdigo JavaScript. Esta funcin de insercin
facilita la tarea de crear elementos de diseo en Fireworks para incorporarlos a continuacin a un
documento de Dreamweaver existente.
Para insertar HTML de Fireworks en un documento de Dreamweaver:
1 En Dreamweaver, coloque el punto de insercin en el documento en el que desee que comience
el cdigo HTML.
Elija Insertar > Objetos de imagen > HTML de Fireworks.
En la categora Comn de la barra Insertar, haga clic en el botn HTML de Fireworks.
3 En el cuadro de dilogo que aparece a continuacin, haga clic en Examinar para seleccionar el
archivo HTML de Fireworks que desee.
4 Seleccione la opcin Borrar archivo despus de insertar para mover el archivo HTML original
de Fireworks a la Papelera de reciclaje (Windows) o a la Papelera (Macintosh) cuando termine
la operacin.
Utilice esta opcin cuando tras insertar el archivo de HTML de Fireworks no vaya a
necesitarlo. Esta opcin no afecta al archivo PNG origen asociado con el archivo HTML.
Nota: si el archivo HTML est en una unidad de red, se borrar de forma irreversible y no se
mover a la Papelera de reciclaje o Papelera.
5 Haga clic en Aceptar para insertar el cdigo HTML, junto con sus imgenes, cortes y cdigos
JavaScript asociados, en el documento de Dreamweaver.
Cmo pegar HTML de Fireworks en Dreamweaver
Un mtodo rpido para colocar imgenes y tablas generadas por Fireworks en Dreamweaver
consiste en copiar y pegar el cdigo HTML de Fireworks directamente en el documento de
Dreamweaver.
Para copiar y pegar cdigo HTML de Fireworks en Dreamweaver:
1 En Fireworks, seleccione Edicin > Copiar cdigo HTML.
2 Siga los pasos del asistente conforme le gua en el proceso de configuracin de la exportacin del
cdigo HTML y las imgenes. Cuando el sistema lo solicite, especifique la carpeta del sitio de
Dreamweaver como destino de las imgenes exportadas.
El asistente exporta las imgenes al destino especificado y copia el cdigo HTML en el
Portapapeles.
3 En Dreamweaver, coloque el punto de insercin en el documento en el que desee pegar el cdigo
HTML y seleccione Edicin > Pegar.
Todo el cdigo HTML y JavaScript asociado con los archivos de Fireworks exportados se copia
en el documento de Dreamweaver y todos los vnculos a imgenes se actualizan.
Para exportar y pegar cdigo HTML de Fireworks en Dreamweaver:
1 En Fireworks, elija Archivo > Exportar.
2 En el cuadro de dilogo Exportar, especifique la carpeta del sitio de Dreamweaver como destino
de las imgenes exportadas.
3 En el men emergente Guardar como, seleccione HTML e imgenes.
4 En el men emergente HTML, seleccione Copiar al Portapapeles y, a continuacin, haga clic
en Guardar.
5 En Dreamweaver, coloque el punto de insercin en el documento en el que desee pegar el cdigo
HTML exportado y seleccione Edicin > Pegar.
Todo el cdigo HTML y JavaScript asociado con los archivos de Fireworks exportados se copia
en el documento de Dreamweaver y todos los vnculos a imgenes se actualizan.
Actualizacin de cdigo HTML de Fireworks colocado en Dreamweaver
En Fireworks, el comando Archivo > Actualizar HTML ofrece una alternativa al mtodo de
ejecucin y edicin para actualizar archivos de Fireworks colocados en Dreamweaver. La opcin
Actualizar HTML permite editar una imagen PNG origen en Fireworks y, a continuacin,
actualizar automticamente cualquier archivo de cdigo HTML y de imagen exportado que est
colocado en un documento de Dreamweaver. Este comando permite actualizar archivos de
Dreamweaver aunque Dreamweaver no est ejecutndose.
Para actualizar cdigo HTML de Fireworks colocado en Dreamweaver:
1 En Fireworks, abra el PNG origen y realice las modificaciones que desee.
2 Seleccione Archivo > Guardar.
3 En Fireworks, seleccione Archivo > Actualizar HTML.
4 Desplcese al archivo de Dreamweaver que contenga el cdigo HTML que desee actualizar y
haga clic en Abrir.
5 Desplcese a la carpeta de destino en la que desea colocar los archivos de imagen actualizados y
haga clic en Seleccionar (Windows) o Elegir (Macintosh)
Fireworks actualiza el cdigo HTML y JavaScript en el documento de Dreamweaver. Fireworks
exporta tambin las imgenes actualizadas asociadas con el cdigo HTML y coloca las
imgenes en la carpeta de destino especificada.
Si Fireworks no encuentra el cdigo HTML correspondiente, ofrece la opcin de insertar el
nuevo cdigo HTML en el documento de Dreamweaver. Fireworks coloca la seccin JavaScript
del nuevo cdigo al comienzo del documento y la tabla HTML o el vnculo con la imagen al
final.
Creacin de un lbum de fotos Web
Puede generar automticamente un sitio Web que contenga un lbum de imgenes ubicado en
una carpeta determinada. Dreamweaver utiliza Fireworks para crear una imagen en miniatura y
otra de mayor tamao de cada una de las imgenes de la carpeta. A continuacin, Dreamweaver
crea una pgina Web que contiene todas las miniaturas, as como vnculos con las imgenes ms
grandes. Para crear un lbum de fotos Web, es necesario tener instalados en el sistema
Dreamweaver y Fireworks 4, o una versin superior.
Antes de empezar, coloque todas las imgenes del lbum de fotos en una sola carpeta. (No es
necesario que la carpeta se encuentre dentro de un sitio.) Asegrese tambin de que los nombres
de archivo de las imgenes tengan alguna de las siguientes extensiones: .gif, .jpg, .jpeg, .png, .psd,
.tif o .tiff. Las imgenes con extensiones de archivo no reconocidas no se incluyen en el lbum de
fotos.
Para crear un lbum de fotos Web:
1 En Dreamweaver, seleccione Comandos > Crear lbum de fotos Web.
2 En el cuadro de texto Ttulo del lbum de fotos, introduzca un ttulo. El ttulo aparecer en un
rectngulo gris en la parte superior de la pgina que contiene las miniaturas.
Si lo desea, puede introducir hasta dos lneas de texto adicional para que aparezcan
directamente debajo del ttulo, en los cuadros de texto Informacin de subencabezado y Otra
informacin.
3 Seleccione la carpeta que contiene las imgenes de origen; para hacerlo, haga clic en el botn
Examinar situado junto al cuadro de texto Carpeta de imgenes de origen. A continuacin,
seleccione (o cree) la carpeta de destino en la que colocar todas las imgenes y archivos HTML
exportados; para ello, haga clic en el botn Examinar situado junto al cuadro de texto Carpeta
de destino.
La carpeta de destino no debe contener ya un lbum de fotos; en tal caso, y si cualquiera de las
nuevas imgenes tuviera el mismo nombre que las previamente utilizadas, podran
sobrescribirse los archivos de miniaturas e imgenes existentes.
4 Especifique las opciones de visualizacin de las imgenes en miniatura:
Elija un tamao para las imgenes en miniatura en el men emergente Tamao de
miniatura. Las imgenes se ajustan a escala de forma proporcional para crear miniaturas que
se adaptan a un cuadrado que tiene las dimensiones en pxeles indicadas.
Para visualizar el nombre del archivo de cada imagen original debajo de la miniatura
correspondiente, seleccione Mostrar nombres de archivos.
Introduzca el nmero de columnas de la tabla que muestra las miniaturas.
5 Elija un formato para las imgenes en miniatura en el men emergente Formato de miniatura:
GIF WebSnap 128 crea miniaturas GIF que utilizan una paleta Web adaptable de hasta 128
colores.
GIF WebSnap 256 crea miniaturas GIF que utilizan una paleta Web adaptable de hasta 256
colores.
JPEG - Calidad superior crea miniaturas JPEG con calidad relativamente mayor y archivos
ms grandes.
JPEG - Archivo ms pequeo crea miniaturas JPEG con calidad relativamente inferior y
archivos ms pequeos.
6 Elija un formato para las imgenes de tamao grande en el men emergente Formato de foto.
Para cada una de las imgenes originales se crea una imagen de gran tamao con el formato
especificado. Es posible especificar un formato para las imgenes de gran tamao que difiera del
formato especificado para las miniaturas.
Nota: el comando Crear lbum de fotos Web no permite utilizar los archivos de imgenes
originales como las imgenes de gran tamao, ya que es posible que los formatos de las imgenes
originales que no sean GIF y JPEG no se visualicen apropiadamente en todos los navegadores.
Tenga en cuenta que si las imgenes originales son archivos JPEG, las imgenes de gran tamao
generadas pueden tener un tamao de archivo mayor o menor calidad que los archivos originales.
7 Elija un porcentaje de escala para las imgenes de gran tamao.
Establecer la escala en 100% crea imgenes de gran tamao del mismo tamao que las
originales. Tenga en cuenta que el porcentaje de escala se aplica a todas las imgenes; si las
imgenes originales no son todas del mismo tamao, el ajuste a escala por el mismo porcentaje
puede producir resultados no deseados.
8 Seleccione Crear pgina de navegacin para cada foto para crear una pgina Web individual para
cada imagen de origen que contenga vnculos de navegacin etiquetados como Anterior, Inicio
y Siguiente.
Si selecciona esta opcin, las miniaturas se vincularn con las pginas de navegacin. Si no la
selecciona, las miniaturas se vincularn directamente con las imgenes de gran tamao.
Utilizacin de Flash 361
9 Haga clic en Aceptar para crear los archivos de cdigo HTML e imagen para el lbum de fotos
Web.
Fireworks se inicia (si todava no est abierto) y crea las miniaturas y las imgenes de gran
tamao. Este proceso puede llevar varios minutos si se ha incluido un gran nmero de archivos
de imagen. Una vez finalizado el proceso, Dreamweaver vuelve a activarse y crea la pgina que
contiene las miniaturas.
10 Cuando aparezca el cuadro de dilogo con el mensaje lbum creado, haga clic en Aceptar.
Puede que tenga que esperar unos segundos hasta visualizar la pgina del lbum de fotos. Las
miniaturas se muestran ordenadas alfabticamente por nombre de archivo.
Nota: una vez iniciado el proceso de creacin del lbum de fotos, el hecho de hacer clic en el
botn Cancelar del cuadro de dilogo de Dreamweaver no lo detiene sino que simplemente evita
que Dreamweaver presente la pgina principal del lbum de fotos.
Utilizacin de Flash
Puede utilizar Dreamweaver para establecer las opciones de reproduccin y visualizacin de un
archivo Flash en una pgina Web o actualizar los vnculos de la pelcula. Si tiene instalado
Macromedia Flash MX 2004, tambin puede seleccionar un archivo Flash de un documento
Dreamweaver e iniciar Flash para editarlo.
Edicin de contenido de Flash en Dreamweaver
Si tiene instalado Macromedia Flash MX, puede seleccionar un archivo SWF de un documento
Dreamweaver y abrir Flash para editarlo. Flash no edita directamente el archivo SWF, sino que
edita el documento de origen (el archivo FLA) y, a continuacin, vuelve a exportar el archivo
SWF.
Para abrir y editar contenido de Flash insertado desde Dreamweaver:
1 En Dreamweaver, elija Ventana > Propiedades para abrir el inspector de propiedades, si es que
no est ya abierto.
2 En el documento de Dreamweaver, siga uno de estos procedimientos:
Haga clic en el marcador de posicin del archivo SWF para seleccionarlo y, a continuacin,
en el inspector de propiedades, haga clic en Editar.
Nota: si no dispone de Flash MX, el botn Editar aparece desactivado.
Mantenga presionada la tecla Control (Windows) o Comando (Macintosh) mientras hace
doble clic en el marcador de posicin de la pelcula correspondiente a la pelcula que desea
editar.
Control y haga clic (Macintosh) en la imagen deseada y seleccione Editar con Flash en el
men contextual.
Dreamweaver inicia Flash y Flash intenta localizar el archivo de creacin Flash (FLA)
correspondiente al archivo SWF seleccionado. Si Flash no encontrase el archivo de creacin
Flash, le solicitara que indicase su ubicacin. No puede actualizar un archivo SWF
directamente. Primero debe modificar el archivo origen y, a continuacin, exportarlo como un
archivo SWF.
Nota: si el archivo FLA o el archivo SWF est bloqueado, Dreamweaver le solicita que
compruebe el archivo, anule la solicitud o visualice el archivo.
Utilizacin de Flash 363
3 En Flash, edite la pelcula. La ventana de documento indicar que est modificando una pelcula
desde Dreamweaver.
4 Cuando haya terminado de hacer cambios, haga clic en Listo.
Flash actualiza el documento de creacin de Flash (el archivo FLA), vuelve a exportar el archivo
de pelcula (el archivo SWF), se cierra y el usuario vuelve al documento de Dreamweaver.
5 Puede ver el SWF actualizado en el documento haciendo clic en Reproducir en el inspector de
propiedades o presionando F12 para obtener una vista previa de su pgina en una ventana de
navegador.
Actualizacin de vnculos en un archivo SWF
Puede utilizar Dreamweaver para actualizar un vnculo de un archivo Flash (archivo SWF) y
despus actualizar el cambio en el documento de creacin de Flash (el archivo FLA).
Para actualizar un vnculo de URL en un archivo SWF:
1 Defina una pgina principal del sitio, si no lo ha hecho an.
Para construir un mapa del sitio, debe configurar una pgina principal. En la vista del mapa del
sitio, debe mostrar los archivos dependientes para actualizar un vnculo en un archivo SWF. De
forma predeterminada el mapa del sitio est configurado para que no muestre los archivos
dependientes. Para informacin sobre cmo mostrar archivos dependientes, vase Mostrar y
ocultar archivos de mapa de un sitio en la pgina 98. Para informacin sobre la vista del mapa
del sitio, vase Visualizacin de un mapa del sitio en la pgina 94.
2 Abra la vista del mapa del sitio.
3 Para mostrar los archivos dependientes, siga uno de estos procedimientos:
Seleccione Ver > Mostrar archivos dependientes.
Seleccione Ver > Diseo para abrir el cuadro de dilogo Definicin del sitio, y luego elija la
opcin Mostrar archivos dependientes.
El vnculo aparece bajo el archivo SWF.
4 Para modificar el vnculo siga uno de estos procedimientos:
Para cambiar el vnculo en el archivo SWF seleccionado, haga clic con el botn derecho del
ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en el
vnculo; a continuacin, seleccione Cambiar vnculo y, despus, en el cuadro de dilogo que
aparece, en el cuadro de texto URL, escriba la nueva ruta de URL.
Para actualizar todas las instancias del vnculo, seleccione Sitio > Cambiar vnculo en todo el
sitio. A continuacin, en el cuadro de dilogo que se abre, en el cuadro de texto Cambiar
todos los vnculos a, desplcese hasta la ruta del vnculo que va a modificar o escrbala y, en
el cuadro de texto Por vnculos a, desplcese hasta la ruta del nuevo URL o escrbala.
Cualquier vnculo actualizado por Dreamweaver en el archivo SWF se actualiza en el archivo FLA
origen al realizar una operacin de ejecucin y edicin. Dreamweaver registra automticamente
cualquier cambio de los vnculos del archivo SWF en las Design Notes y, cuando Flash actualiza
los cambios en el archivo FLA, los elimina de las Design Notes.
365
CAPTULO 17
Adicin de audio, vdeo y elementos interactivos
Macromedia Dreamweaver MX 2004 permite aadir sonido y pelculas al sitio Web de forma
rpida y sencilla. Puede adjuntar Design Notes a dichos objetos, lo que le permitir comunicarse
con el resto del equipo de diseo. Tambin puede insertar objetos de texto y de botn de
Macromedia Flash MX 2004 desde dentro de Dreamweaver.
Archivos multimedia en la pgina 366
Insercin y edicin de objetos multimedia en la pgina 368
Inicio de un editor externo de archivos multimedia en la pgina 369
Utilizacin de Design Notes con objetos multimedia en la pgina 371
Insercin y modificacin de un objeto de botn Flash en la pgina 371
Insercin de un objeto de texto Flash en la pgina 373
Insercin de contenido de Flash en la pgina 374
Descarga e instalacin de elementos Flash en la pgina 374
Insercin de elementos Flash en la pgina 375
Edicin de atributos de elementos Flash en la pgina 375
Insercin de pelculas Shockwave en la pgina 376
Adicin de vdeo en la pgina 376
Adicin de sonido a una pgina en la pgina 376
Insercin de contenido de plug-in de Netscape Navigator en la pgina 377
Insercin de un control ActiveX en la pgina 379
Insercin de un applet de Java en la pgina 380
Utilizacin de comportamientos para controlar elementos multimedia en la pgina 380
366 Captulo 17: Adicin de audio, vdeo y elementos interactivos
Archivos multimedia
Pueden aadirse los siguientes archivos multimedia en las pginas de Dreamweaver: pelculas
Flash y Shockwave, QuickTime, AVI, applets Java, controles Active X y archivos de audio de
diversos formatos.
Tipos de archivo Flash
Dreamweaver se entrega con objetos Flash que pueden utilizarse con independencia de que tenga
Flash instalado en su equipo o no lo tenga. Si dispone de Flash, vase Utilizacin de Flash en
la pgina 361 para ms informacin sobre la utilizacin de estas aplicaciones de manera integrada.
Antes de utilizar los comandos Flash que estn disponibles en Dreamweaver conviene conocer los
distintos tipos de archivos Flash que existen:
El archivo Flash (.fla) es el archivo de origen de cualquier proyecto y se crea en el programa Flash.
Este tipo de archivo slo se puede abrir en Flash (no en Dreamweaver ni en los navegadores).
Puede abrir el archivo Flash en Flash y, a continuacin, exportarlo a SWF o SWT para utilizarlo
en los navegadores.
El archivo SWF de Flash (.swf) es una versin comprimida del archivo Flash (.fla) optimizada
para la Web. Este archivo se puede reproducir en navegadores y ver en Dreamweaver, pero no se
puede editar en Flash. ste es el tipo de archivo que se crea utilizando objetos de texto y de botn
de Flash. Para ms informacin, consulte Insercin y modificacin de un objeto de botn Flash
en la pgina 371, Insercin de un objeto de texto Flash en la pgina 373 e Insercin de
contenido de Flash en la pgina 374.
Los archivos de plantilla Flash (.swt) permiten modificar y reemplazar informacin de un
archivo de pelcula Flash. Estos archivos se utilizan en el objeto de botn Flash, que permite
modificar la plantilla con texto o vnculos propios, para crear un SWF personalizado e insertarlo
en el documento. En Dreamweaver, estos archivos de plantilla se encuentran en las carpetas
Dreamweaver/Configuration/Flash Objects/Flash Buttons y Flash Text.
Tambin puede descargar nuevas plantillas de botones del sitio Web Macromedia Exchange for
Dreamweaver (www.macromedia.com/go/dreamweaver_exchange_es/) y colocarlas en la carpeta
Flash Button. Para ms informacin sobre la creacin de plantillas de botones, consulte el artculo
sobre este tema que se encuentra en el sitio Web de Macromedia en www.macromedia.com/go/
flash_buttons.
Un elemento Flash (.swc) es un archivo Flash SWF que permite crear aplicaciones de Internet
completas mediante su incorporacin en una pgina Web. Los elementos Flash tienen parmetros
personalizables que pueden modificarse para realizar diferentes funciones de la aplicacin. Para
ms informacin, consulte Insercin de elementos Flash en la pgina 375 y Edicin de
atributos de elementos Flash en la pgina 375.
Archivos multimedia 367
Formatos de archivo de audio
La siguiente lista describe los formatos de archivo de audio ms comunes junto con algunas de sus
ventajas y desventajas en relacin con el diseo Web.
El formato .midi o .mid (Interfaz digital para instrumentos musicales, Musical Instrument
Digital Interface) es un formato de msica instrumental. Los archivos MIDI son compatibles con
numerosos navegadores y no precisan ningn plug-in. Aunque su calidad de sonido es muy alta,
sta puede variar en funcin de la tarjeta de sonido del visitante. Un archivo MIDI pequeo es
capaz de proporcionar un clip de sonido largo. Los archivos MIDI no se pueden grabar y deben
sintetizarse en un ordenador con hardware y software especiales.
Los archivos de formato .wav (Extensin de forma de onda, Waveform Extension) ofrecen
una buena calidad de sonido, son compatibles con numerosos navegadores y no requieren ningn
plug-in. Puede grabar sus propios archivos WAV desde un CD, una cinta, a travs de un
micrfono, etc. Sin embargo, el gran tamao de archivo limita considerablemente la duracin de
los clips de sonido que se pueden utilizar en las pginas Web.
El formato .aif (Formato de archivo de intercambio de audio, Audio Interchange File Format
o AIFF), al igual que el formato WAV, ofrece buena calidad de sonido, se puede reproducir en la
mayora de los navegadores y no requiere plug-in. Tambin se pueden grabar archivos AIFF desde
un CD, una cinta, a travs de un micrfono, etc. Sin embargo, el gran tamao de archivo limita
considerablemente la duracin de los clips de sonido que se pueden utilizar en las pginas Web.
El formato .mp3 (Audio del Grupo de Expertos en Imgenes en Movimiento, Motion Picture
Experts Group Audio o MPEG-Audio Nivel-3) es un formato comprimido que reduce
considerablemente el tamao de los archivos de sonido. La calidad de sonido es excelente: si se
graba y comprime correctamente un archivo MP3, su calidad es equiparable a la de un CD. La
tecnologa MP3 permite reproducir el archivo en flujo de modo que el visitante no tenga que
esperar a que se descargue todo el archivo para escucharlo. Sin embargo, el tamao del archivo es
superior al de un archivo Real Audio, por lo que una cancin entera puede tardar bastante en
descargarse en una conexin de mdem de acceso telefnico (lnea telefnica) tpica. Para
reproducir archivos MP3, los visitantes debern descargar e instalar una aplicacin auxiliar o un
plug-in como QuickTime, Windows Media Player o RealPlayer.
El formato .ra, .ram, .rpm o Real Audio tiene un alto grado de compresin con tamaos de
archivo ms pequeos que MP3. Permite descargar archivos de canciones completas en un
perodo de tiempo razonable. Dado que los archivos se pueden reproducir en flujo desde un
servidor Web normal, los visitantes pueden comenzar a escuchar el sonido antes de que el archivo
se haya descargado por completo. Los visitantes debern descargar e instalar la aplicacin auxiliar
o plug-in RealPlayer para reproducir estos archivos.
.qt, .qtm, .mov o QuickTime es un formato de audio y de vdeo desarrollado por Apple
Computer. QuickTime est incluido con los sistemas operativos Apple Macintosh, y lo utilizan la
mayora de las aplicaciones de Macintosh que emplean audio, vdeo o animacin. Los PC
tambin pueden reproducir archivos en formato QuickTime, pero requieren un controlador de
QuickTime especial. QuickTime admite la mayora de los formatos de codificacin, como
Cinepak, JPEG y MPEG.
Nota: adems de los formatos ms comunes enumerados anteriormente, existen muchos otros
formatos de archivo de audio y vdeo que pueden utilizarse en la Web. Si encuentra un formato de
archivo multimedia que no conoce, localice al creador del formato para obtener informacin sobre
cul es la mejor manera de utilizarlo e implementarlo.
Insercin y edicin de objetos multimedia
Puede insertar en un documento de Flash una pelcula o un objeto Dreamweaver, una pelcula
QuickTime o Shockwave, un applet de Java, un control ActiveX y otros objetos de audio o vdeo.
Para insertar un objeto multimedia en una pgina:
1 Site el punto de insercin en la ventana de documento en la que desea insertar el objeto.
2 Inserte el objeto siguiendo uno de estos procedimientos:
En la categora Comn de la barra Insertar, haga clic en el botn Media y seleccione el botn
para el tipo de objeto que desea insertar.
Seleccione el objeto adecuado en el submen Insertar > Media.
Si el objeto que desea insertar no es Flash, Shockwave, Applet ni ActiveX, utilice el botn de
plug-in de Netscape Navigator (el icono que parece una pieza de puzzle de la barra Insertar)
para insertarlo. Para ms informacin, consulte Insercin de contenido de plug-in de
Netscape Navigator en la pgina 377.
En la mayora de los casos, aparecer un cuadro de dilogo que le permitir seleccionar un
archivo origen y especificar diversos parmetros para el objeto multimedia.
Sugerencia: para evitar que aparezcan estos cuadros de dilogo, seleccione Edicin >
Preferencias > General (Windows) o Dreamweaver > Preferencias > General (Macintosh) y
desactive la opcin Mostrar dilogo al insertar objetos. Para anular las preferencias de
presentacin de cuadros de dilogo, mantenga presionada la tecla Control (Windows) u Opcin
(Macintosh) mientras inserta el objeto. Por ejemplo, para insertar un marcador de posicin para
una pelcula Shockwave sin especificar el archivo, mantenga presionada la tecla Control u Opcin
y haga clic en el botn Shockwave en el men emergente Media de la categora Comn de la barra
Insertar, o bien seleccione Insertar > Media > Shockwave.
3 Seleccione las opciones deseadas en el cuadro de dilogo Seleccionar archivo o Insertar Flash.
El cuadro de dilogo Atributos de accesibilidad de la etiqueta de objeto aparecer si ha activado
el cuadro de dilogo correspondiente en Preferencias (vase Optimizacin del espacio de
trabajo para el diseo de pginas accesibles en la pgina 56).
Inicio de un editor externo de archivos multimedia 369
5 Si aparece el cuadro de dilogo Atributos de accesibilidad de la etiqueta de objeto, seleccione las
opciones que desee y haga clic en Aceptar.
El objeto multimedia aparece en el documento.
Nota: si presiona Cancelar, en el documento aparece un marcador de posicin de objeto
multimedia pero Dreamweaver no le asocia etiquetas o atributos de accesibilidad.
Utilice el inspector de propiedades para especificar un archivo de origen o para establecer las
dimensiones y otros parmetros y atributos de cada objeto.
Edicin de atributos de accesibilidad para objetos multimedia
Si ha insertado atributos de accesibilidad con un objeto multimedia (vase Insercin y edicin de
objetos multimedia en la pgina 368), puede editar dichos valores en el cdigo HTML.
Para editar los valores de accesibilidad de un objeto multimedia:
1 En la ventana de documento, seleccione el objeto.
Edite los atributos apropiados en la vista Cdigo.
clic (Macintosh) y seleccione Editar cdigo de etiqueta.
Inicio de un editor externo de archivos multimedia
Puede iniciar un editor externo desde Dreamweaver para editar la mayora de los archivos
multimedia. Tambin es posible especificar el editor que Dreamweaver debe iniciar para editar el
archivo.
Inicio de un editor externo desde Dreamweaver
Puede iniciar un editor externo desde Dreamweaver para editar la mayora de los archivos
multimedia.
Para iniciar un editor externo desde Dreamweaver:
1 Asegrese de que el tipo de archivo est asociado a un editor de su sistema.
Para averiguar qu editor est asociado a cada tipo de archivo, seleccione Edicin > Preferencias
en Dreamweaver y elija Tipos de archivo/editores de la lista Categora. Haga clic en la
extensin de archivo de la columna Extensiones para ver el editor o (editores) asociado en la
columna Editores. Puede cambiar el editor asociado a un determinado tipo de archivo. Para
ms informacin, consulte Especificacin del editor que se iniciar desde Dreamweaver en
la pgina 370.
2 Haga doble clic en el archivo multimedia del panel Sitio para abrirlo en el editor externo.
El editor que se inicia al hacer doble clic en el archivo del panel Sitio se denomina editor
principal. Si hace doble clic en un archivo de imagen, por ejemplo, Dreamweaver ejecutar el
archivo en el editor de imgenes externo principal, como Macromedia Fireworks.
3 Si no desea utilizar el editor externo principal para editar el archivo, puede utilizar otro editor
del sistema para ello, siguiendo uno de estos procedimientos:
En el panel Sitio, haga clic con el botn derecho del ratn (Windows) o mantenga
presionada la tecla Control y haga clic (Macintosh) en el archivo y elija Abrir con en el
men contextual.
En la vista Diseo, haga clic con el botn derecho del ratn (Windows) o mantenga
presionada la tecla Control y haga clic (Macintosh) en el elemento multimedia de la pgina
actual y, a continuacin, seleccione Editar con en el men contextual.
Especificacin del editor que se iniciar desde Dreamweaver
Puede especificar el editor que utilizar Dreamweaver para editar cada tipo de archivo y aadir o
eliminar los tipos de archivo reconocidos por Dreamweaver.
Para especificar concretamente los editores externos que deben iniciarse para un tipo de
archivo determinado:
1 Seleccione Edicin > Preferencias y elija Tipos de archivo/editores de la lista Categora.
Las extensiones de nombres de archivo, como .gif, .wav y .mpg, aparecen a la izquierda, bajo
Extensiones. Los editores asociados a una extensin seleccionada figuran en la parte derecha,
bajo Editores.
2 Elija la extensin del tipo de archivo en la lista Extensiones y siga uno de estos procedimientos:
Para asociar un nuevo editor al tipo de archivo, haga clic en el botn de signo ms (+)
situado sobre la lista Editores y seleccione las opciones deseadas en el cuadro de dilogo que
aparece.
Por ejemplo, puede seleccionar el icono de aplicacin de Acrobat para asociarlo a ese tipo de
archivos.
Para convertir un editor en el editor principal de un tipo de archivo determinado (es decir,
en el editor que se abrir al hacer doble clic en el tipo de archivo en el panel Sitio), seleccione
el editor en la lista Editores y haga clic en Convertir en principal.
Para anular la asociacin de un editor con un tipo de archivo, seleccione el editor en la lista
Editores y haga clic en el botn de signo menos (-) situado sobre la lista Editores.
Para aadir un nuevo tipo de archivo y el editor asociado correspondiente:
1 Haga clic en botn de signo ms (+) situado sobre la lista Extensiones e introduzca una extensin
de tipo de archivo (incluido el punto inicial de la extensin) o varias extensiones relacionadas
separadas entre s por un espacio.
Por ejemplo, puede introducir .xml .xsl si desea asociar estas extensiones al editor XML
instalado en el sistema.
2 Seleccione un editor para el tipo de archivo; para ello haga clic en el botn de signo ms (+)
situado sobre la lista Editores y seleccione las opciones deseadas en el cuadro de dilogo que
aparece.
Para eliminar un tipo de archivo:
Seleccione el tipo de archivo en la lista Extensiones y haga clic en el botn de signo menos (-)
situado sobre dicha lista.
Nota: la eliminacin de un tipo de archivo no se puede deshacer. Por tanto, asegrese antes de
ejecutarla.
Insercin y modificacin de un objeto de botn Flash 371
Utilizacin de Design Notes con objetos multimedia
Al igual que ocurre con otros objetos de Dreamweaver, puede aadir Design Notes a un objeto
multimedia. Design Notes son notas asociadas a un archivo determinado que se almacenan en un
archivo independiente. Puede utilizar Design Notes para mantener informacin adicional de los
archivos asociada a los documentos, como los nombres de los archivos de imagen y comentarios
sobre el estado del archivo. Para ms informacin sobre la utilizacin de Design Notes, consulte
Almacenamiento de informacin sobre archivos en Design Notes en la pgina 111.
Para aadir Design Notes a un objeto multimedia:
(Macintosh) en el objeto de la ventana de documento.
Nota: deber definir el sitio antes de aadir Design Notes a ningn objeto (vase Activacin y
desactivacin de Design Notes para un sitio en la pgina 112).
2 Elija Design Notes en el men contextual.
3 Introduzca la informacin deseada en la Design Note.
Sugerencia: tambin puede aadir una Design Note a un objeto multimedia desde el panel Sitio
seleccionando el archivo, abriendo el men contextual y eligiendo Design Notes en el men
contextual.
Insercin y modificacin de un objeto de botn Flash
Puede crear, insertar y modificar botones Flash en los documentos mientras trabaja con
Dreamweaver; Macromedia Flash no es necesario. El objeto de botn Flash es un botn
actualizable basado en una plantilla Flash. Puede personalizar un objeto de botn Flash
aadindole texto, color de fondo y vnculos con otros archivos.
Creacin e insercin de un botn Flash
Puede crear e insertar botones Flash en los documentos mientras trabaja en la vista Diseo o en la
vista Cdigo.
Nota: deber guardar el documento antes de insertar un objeto de texto o de botn Flash.
Para insertar un objeto de botn Flash:
el botn Flash.
2 Para abrir el cuadro de dilogo Insertar botn Flash, siga uno de estos procedimientos:
En la categora Comn de la barra Insertar, seleccione Media y haga clic en el icono Botn
Flash.
Seleccione Insertar > Media > Botn Flash.
Aparecer el cuadro de dilogo Insertar botn Flash.
3 Seleccione las opciones deseadas del cuadro de dilogo Insertar botn Flash y haga clic en
Aplicar o Aceptar para insertar el botn Flash en la ventana de documento.
Sugerencia: para obtener una vista previa de la vista Diseo, haga clic en Aplicar. El cuadro de
dilogo se quedar abierto y podr obtener una vista previa del botn en el documento.
Modificacin de un objeto de botn Flash
Puede modificar las propiedades y el contenido del objeto de botn Flash.
Para modificar un objeto de botn Flash:
1 En la ventana de documento, haga clic en el objeto de botn Flash para seleccionarlo.
2 Abra el inspector de propiedades si es que no est abierto an.
El inspector de propiedades muestra las propiedades del botn Flash. Puede utilizar el inspector
de propiedades para modificar los atributos HTML del botn, como su ancho, alto y color de
fondo.
3 Para realizar cambios en el contenido, muestre el cuadro de dilogo Insertar botn Flash
siguiendo uno de estos procedimientos:
Haga doble clic en el objeto de botn Flash.
Haga clic en Editar en el inspector de propiedades.
Control y haga clic (Macintosh) y elija Editar en el men contextual.
4 En el cuadro de dilogo Insertar botn Flash, edite los campos descritos en Insercin y
modificacin de un objeto de botn Flash en la pgina 371.
En la vista Diseo, puede cambiar el tamao del objeto fcilmente utilizando los manejadores
de cambio de tamao. Puede restaurar el tamao original del objeto seleccionando Restab.
tamao (Restablecer tamao) en el inspector de propiedades (vase Cambio del tamao de
una imagen en la pgina 318).
Insercin de un objeto de texto Flash 373
Reproduccin de un botn Flash en el documento
Puede obtener una vista previa de un botn Flash en la ventana de documento de Dreamweaver.
Para ver cmo se reproduce el objeto de botn Flash en la ventana de documento:
1 En la vista Diseo, seleccione el objeto de botn Flash en el documento.
2 En el inspector de propiedades, haga clic en Reproducir.
3 Haga clic en Detener para poner fin a la vista previa.
Nota: no se puede editar el objeto de botn Flash mientras se est reproduciendo.
Conviene obtener siempre una vista previa del documento en el navegador para comprobar
exactamente el aspecto que tendr el botn Flash.
Insercin de un objeto de texto Flash
El objeto de texto Flash permite crear e insertar una pelcula Flash que slo contiene texto. Esto
permite crear una pequea pelcula de grficos vectoriales con fuentes de diseo y el texto que
elija.
Para insertar un objeto de texto Flash:
1 En la ventana de documento, site el punto de insercin en el lugar en el que desea insertar el
texto Flash.
2 Para abrir el cuadro de dilogo Insertar texto Flash, siga uno de estos procedimientos:
En la categora Comn de la barra Insertar, seleccione Media y haga clic en el icono Texto
Flash.
Seleccione Insertar > Media > Texto Flash.
Aparecer el cuadro de dilogo Insertar texto Flash.
3 Seleccione las opciones deseadas del cuadro de dilogo Insertar texto Flash y haga clic en Aplicar
o Aceptar para insertar texto Flash en la ventana de documento.
Si hace clic en Aplicar, el cuadro de dilogo permanecer abierto y podr obtener una vista
previa del texto en el documento.
Para modificar o reproducir el objeto de texto Flash, siga el procedimiento utilizado para el botn
Flash (vase Modificacin de un objeto de botn Flash en la pgina 372).
Insercin de contenido de Flash
Puede utilizar Dreamweaver para insertar contenido Flash en las pginas.
Para insertar un archivo SWF (contenido de Flash):
1 En la vista Diseo de la ventana de documento, site el punto de insercin en el lugar donde
desea insertar la pelcula y, a continuacin, siga uno de estos procedimientos.
En la categora Comn de la barra Insertar, seleccione Media y haga clic en el icono Insertar
Flash.
Seleccione Insertar > Media > Flash.
2 En el cuadro de dilogo que aparece, seleccione un archivo Flash (.swf).
En la ventana de documento aparecer un marcador de posicin Flash (al contrario que en el
caso de los objetos de botn y texto Flash). Para informacin sobre la configuracin de las
propiedades de una pelcula Flash seleccione el marcador de posicin y haga clic en el botn
Ayuda del inspector de propiedades.
Para obtener una vista previa de la pelcula Flash en la ventana de documento:
1 En la ventana de documento, haga clic en el marcador de posicin Flash para seleccionar la
pelcula Flash de la que desea obtener una vista previa.
2 En el inspector de propiedades, haga clic en el botn Reproducir. Haga clic en Detener para
poner fin a la vista previa. Tambin puede obtener una vista previa de la pelcula Flash en un
navegador presionando F12.
Sugerencia: para obtener una vista previa de todo el contenido Flash de una pgina, presione
Control+Alt+Mays+P (Windows) o Mays+Opcin+Comando+P (Macintosh). Al hacerlo, todos los
objetos y pelculas Flash estn configurados para Reproducir.
Descarga e instalacin de elementos Flash
Para utilizar elementos Flash en sus pginas Web, antes debe aadir los elementos a Dreamweaver
mediante Extension Manager. Extension Manager es una aplicacin independiente que permite
instalar y administrar extensiones en aplicaciones de Macromedia. Inicie Extension Manager
desde Dreamweaver; para ello, seleccione Comandos > Administrar extensiones.
Para obtener los ltimos elementos para Dreamweaver, utilice el sitio Web de Macromedia
Exchange en www.macromedia.com/go/dreamweaver_exchange_es/. Una vez all, podr
conectarse y descargar elementos Flash y otras extensiones Dreamweaver (muchas de ellas
gratuitas), incorporarse a grupos de debate, ver calificaciones y comentarios de los usuarios e
instalar y utilizar Extension Manager. Para poder instalar nuevos elementos Flash u otras
extensiones de Dreamweaver, antes debe instalar Extension Manager.
Para informacin sobre la utilizacin de Extension Manager para instalar elementos Flash (as
como otras extensiones de Dreamweaver), vase Adicin de extensiones a Dreamweaver en
la pgina 61.
Edicin de atributos de elementos Flash 375
Insercin de elementos Flash
Puede utilizar Dreamweaver para insertar elementos Flash en sus documentos. Los elementos
Flash permiten crear rpida y fcilmente aplicaciones de Internet completas utilizando elementos
precreados. Para ms informacin sobre los elementos Flash y sobre su utilizacin en pginas Web,
consulte Tipos de archivo Flash en la pgina 366.
Para insertar un elemento Flash:
un elemento Flash y siga uno de estos procedimientos.
En la categora Elemento Flash de la barra Insertar, haga clic en el icono del elemento Flash
que desea insertar.
Seleccione Insertar > Elemento Flash > Nombre del elemento Flash.
Aparecer el cuadro de dilogo Guardar elemento Flash.
2 Introduzca un nombre de archivo para el elemento Flash y gurdelo en una ubicacin adecuada
de su sitio.
Aparece el marcador de posicin del elemento Flash en el documento. Puede modificar las
propiedades del elemento Flash mediante el inspector de etiquetas y el inspector de
propiedades.
4 Seleccione Archivo > Vista previa en el navegador para obtener una vista previa del elemento
Flash.
Edicin de atributos de elementos Flash
Para editar los atributos de elementos Flash, utilice el inspector de propiedades y el inspector de
etiquetas.
Para editar atributos de elementos Flash:
1 Siga uno de estos procedimientos en la ventana de documento:
En la vista Diseo, seleccione el elemento Flash.
En la vista Cdigo, haga clic en cualquier punto del nombre de un componente Flash o en
su contenido.
2 Si todava no se muestra, abra el inspector de etiquetas (Ventana > Inspector de etiquetas).
3 Edite los atributos del elemento Flash mediante el inspector de etiquetas y el inspector de
propiedades.
4 Presione Intro (Windows) o Retorno (Macintosh) o haga clic en cualquier punto del inspector
de etiquetas para actualizar la etiqueta en el documento.
Para ms informacin, haga clic en el botn Ayuda del panel Inspector de etiquetas.
Insercin de pelculas Shockwave
Puede utilizar Dreamweaver para insertar pelculas Shockwave en los documentos. Shockwave, el
estndar de Macromedia para multimedia interactivo en la Web, es un formato comprimido que
permite la descarga rpida de los archivos multimedia creados en Macromedia Director y su
reproduccin en los navegadores de uso ms frecuente.
Para insertar una pelcula Shockwave:
una pelcula Shockwave y siga uno de estos procedimientos:
En la categora Comn de la barra Insertar, haga clic en el botn Media y seleccione el icono
Shockwave del men.
Seleccione Insertar > Media > Shockwave.
2 En el cuadro de dilogo que aparece, seleccione un archivo de pelcula.
3 En el inspector de propiedades, introduzca el ancho y el alto de la pelcula en los cuadros An y
Al.
Adicin de vdeo
Puede aadir vdeo a su pgina Web de distintas formas y empleando diferentes formatos. El
vdeo puede descargarse al usuario o reproducirse en flujo (streaming) mientras se descarga.
Para incluir en la pgina un videoclip corto que los usuarios puedan descargar:
1 Coloque el videoclip en la carpeta del sitio.
Estos vdeo-clips suelen tener el formato de archivo AVI o MPEG.
2 Establezca un vnculo con el videoclip o incrstelo en la pgina.
Para establecer un vnculo con el videoclip, introduzca un texto para el vnculo, como
Descargar videoclip, seleccione el texto y haga clic en el icono de carpeta del inspector de
propiedades. Localice la ubicacin del archivo de vdeo y seleccinelo.
Para informacin sobre cmo incluir flujo de vdeo en la pgina, vase Insercin de contenido de
plug-in de Netscape Navigator en la pgina 377.
Nota: el usuario debe descargarse una aplicacin de ayuda para ver los formatos de flujo ms
habituales, como por ejemplo RealMedia, QuickTime o Windows media.
Adicin de sonido a una pgina
Si lo desea, puede aadir sonido a una pgina Web. Existen distintos tipos de archivos de sonido,
como .wav, .midi y .mp3 entre otros. Para ms informacin, consulte Formatos de archivo de
audio en la pgina 367. Los factores que hay que tener en cuenta antes de optar por un formato y
un mtodo para aadir sonido son: su finalidad, el tipo de usuarios a los que est destinado, el
tamao de archivo, la calidad de sonido y las diferencias en los navegadores.
Nota: cada navegador trata los archivos de sonido de una forma muy distinta. Si lo desea, puede
aadir un archivo de sonido a una pelcula Flash y luego incrustar el archivo SWF para mejorar la
coherencia.
Insercin de contenido de plug-in de Netscape Navigator 377
Establecimiento de un vnculo con archivos de audio
El establecimiento de vnculos con archivos de audio es una forma sencilla y eficaz de aadir
sonido a una pgina Web. Este mtodo de incorporar archivos de sonido permite a los visitantes
decidir si quieren escuchar el archivo o no y poner el archivo a disposicin de un mayor nmero
de usuarios.
Para establecer un vnculo con un archivo de audio:
1 Seleccione el texto o la imagen que desea usar como vnculo con el archivo de audio.
2 En el inspector de propiedades, haga clic en el icono de carpeta para acceder al archivo de audio
o escriba la ruta y el nombre del archivo en el cuadro de texto Vnculo.
Incrustacin de un archivo de sonido
Al incrustar audio se incorpora el sonido directamente en la pgina, pero el sonido slo se
reproduce si los visitantes del sitio disponen del plug-in adecuado para el archivo de sonido
elegido. Puede incrustar archivos si desea utilizar msica de fondo o si quiere controlar el
volumen, el aspecto del reproductor en la pgina o los fragmentos de inicio y final del archivo de
sonido.
Sugerencia: al incorporar archivos de sonido en pginas Web, medite detenidamente cul ser su
uso en el sitio Web y cmo utilizarn los visitantes del sitio estos recursos multimedia. Proporcione
siempre un control para desactivar o silenciar la reproduccin de sonido, por si los visitantes no
desean escuchar el contenido de audio.
Para incrustar un archivo de audio:
1 En la vista Diseo, site el punto de insercin en el lugar en el que desea colocar el archivo y
luego siga uno de estos procedimientos:
En la categora Comn de la barra Insertar, haga clic en el botn Media y seleccione el icono
Plug-in.
Seleccione Insertar > Media > Plug-in.
Para ms informacin sobre el objeto Plug-in, consulte Insercin de contenido de plug-in de
Netscape Navigator en la pgina 377.
2 En el inspector de propiedades, haga clic en el icono de carpeta para acceder al archivo de audio
o escriba la ruta y el nombre del archivo en el cuadro de texto Vnculo.
3 Especifique el ancho y el alto introduciendo los valores en los cuadros de texto correspondientes
o cambiando el tamao del marcador de posicin del plug-in en la ventana de documento.
Estos valores determinan con qu tamao se muestran los controles de audio en el navegador.
Insercin de contenido de plug-in de Netscape Navigator
Puede crear contenido, como una pelcula QuickTime para un plug-in de Netscape Navigator, y
despus utilizar Dreamweaver para insertar dicho contenido en un documento HTML.
RealPlayer y QuickTime son plug-ins muy comunes; adems, algunos archivos de contenido
incluyen archivos en formato MP3 y pelculas QuickTime.
Insercin de contenido de plug-in en la pgina
La pgina puede incluir contenido que se ejecute en un plug-in dentro del navegador del usuario.
Para insertar contenido de plug-in de Netscape Navigator:
1 En la vista Diseo de la ventana de documento, site el punto de insercin en el lugar donde
desea insertar el contenido y luego siga uno de estos procedimientos.
En la categora Comn de la barra Insertar, seleccione Media y haga clic en el icono Plug-in.
Seleccione Insertar > Media > Plug-in.
2 En el cuadro de dilogo que aparece, seleccione un archivo de contenido para un plug-in de
Netscape Navigator.
Reproduccin de plug-ins en la ventana de documento
Es posible obtener vistas previas de pelculas y animaciones que emplean plug-ins de Netscape
Navigator directamente en la vista Diseo de la ventana de documento. Puede reproducir todos
los elementos de plug-in a la vez para ver el aspecto que presentar la pgina ante el usuario, o
bien puede reproducirlos uno por uno para asegurarse de que se han incrustado los elementos
multimedia correctos.
Nota: no es posible obtener vistas previas de pelculas o animaciones que empleen controles
ActiveX.
Para reproducir pelculas en la vista Diseo, debern estar instalados en el sistema los plug-ins
adecuados.
Para reproducir el contenido de plug-ins en la ventana de documento:
1 Inserte uno o ms elementos multimedia seleccionado Insertar > Media > Shockwave, Insertar
> Media > Flash o Insertar > Media > Plug-in.
Seleccione uno de los elementos multimedia que ha insertado y seleccione Ver > Plug-ins >
Reproducir o haga clic en el botn Reproducir del inspector de propiedades.
Seleccione Ver > Plug-ins > Reproducir todo para reproducir todos los elementos
multimedia de la pgina seleccionada que emplean plug-ins.
Nota: la opcin Reproducir todo se aplica al documento actual, no a otros documentos de un
conjunto de marcos, por ejemplo.
Para detener la reproduccin del contenido de plug-ins:
Seleccione un elemento multimedia y seleccione Ver > Plug-ins > Detener o haga clic en el
botn Detener del inspector de propiedades.
Tambin es posible seleccionar Ver > Plug-ins > Detener todo para detener totalmente la
reproduccin del contenido de plug-in.
Insercin de un control ActiveX 379
Solucin de problemas de plug-ins de Netscape Navigator
Si ha seguido los pasos indicados para reproducir contenido de plug-ins en la ventana de
documento pero parte del contenido de plug-ins no se reproduce, intente los procedimientos
siguientes:
Asegrese de que el plug-in asociado est instalado en el ordenador y que el contenido es
compatible con la versin del plug-in que usted tiene.
Abra el archivo Configuration/Plugins/UnsupportedPlugins.txt en un editor de texto y
compruebe si en la lista aparece el plug-in en cuestin. Este archivo contiene informacin sobre
aquellos plug-ins que pueden causar problemas en Dreamweaver y, por tanto, no tienen
soporte. (Si algn plug-in concreto ocasiona problemas, es recomendable aadirlo a este
archivo.)
Compruebe si el sistema dispone de suficiente memoria. Algunos plug-ins necesitan entre 2 y 5
MB adicionales para poder ejecutarse.
Insercin de un control ActiveX
Puede insertar un control Active X en la pgina. Los controles ActiveX (anteriormente
denominados controles OLE) son componentes reutilizables, semejantes a aplicaciones en
miniatura, que tienen capacidad para actuar a modo de plug-ins de navegador. Se ejecutan en
Internet Explorer con Windows, pero no en Macintosh ni en Netscape Navigator. El objeto
ActiveX de Dreamweaver permite proporcionar atributos y parmetros para un control ActiveX
en el navegador del visitante.
Para insertar contenido de controles ActiveX:
1 En la ventana de documento, site el punto de insercin en el lugar donde desea insertar el
contenido y siga uno de estos procedimientos:
En la categora Comn de la barra Insertar, haga clic en la flecha desplegable del botn
Media y seleccione el icono ActiveX.
Media y seleccione el icono ActiveX. Con el icono ActiveX visualizado en la barra Insertar,
puede arrastrar el icono hasta la ventana de documento.
Seleccione Insertar > Media > ActiveX.
Un icono marca el lugar de la pgina de Internet Explorer donde aparecer el control ActiveX.
Insercin de un applet de Java
Puede insertar un applet de Java en un documento HTML utilizando Dreamweaver. Java es un
lenguaje de programacin que permite el desarrollo de aplicaciones pequeas (applets) que pueden
incrustarse en pginas Web.
Para insertar un applet de Java:
el applet y siga uno de estos procedimientos.
Media y seleccione el icono Applet.
Seleccione Insertar > Media > Applet.
2 En el cuadro de dilogo que aparece, seleccione un archivo que contenga un applet de Java.
Utilizacin de comportamientos para controlar elementos
multimedia
Puede aadir comportamientos a su pgina para iniciar y detener diversos objetos multimedia.
Controlar Shockwave o Flash permite reproducir, detener, rebobinar o ir a un fotograma de una
pelcula Shockwave o Flash (vase Controlar Shockwave o Flash en la pgina 390).
Reproducir sonido permite reproducir sonido; por ejemplo, puede reproducir un efecto sonoro
cuando el usuario mueva el puntero del ratn sobre un vnculo (vase Reproducir sonido en
la pgina 396).
Comprobar plug-in le permite comprobar si los visitantes del sitio disponen del plug-in necesario
y luego los gua a URL distintos en funcin de si disponen o no del plug-in adecuado. El
comportamiento Comprobar plug-in slo se aplica a los plug-ins de Netscape Navigator, ya que
no comprueba los controles ActiveX. Para ms informacin, consulte Comprobar plug-in en
la pgina 389.
381
CAPTULO 18
Utilizacin de comportamientos JavaScript
Los comportamientos de Macromedia Dreamweaver MX 2004 introducen cdigo JavaScript en
los documentos para permitir a los visitantes interactuar con una pgina Web para modificarla de
diversas maneras o para que se realicen determinadas tareas. Un comportamiento es una
combinacin de un evento con una accin que desencadena ese evento. En el panel
Comportamientos, un comportamiento se aade a una pgina especificando en primer lugar una
accin y, a continuacin, el evento que desencadena esa accin.
Nota: el cdigo del comportamiento es cdigo JavaScript del lado del cliente; es decir, se ejecuta en
los navegadores, no en los servidores.
Los eventos son mensajes generados por los navegadores que indican que un visitante de la pgina
ha hecho algo. Por ejemplo, cuando un visitante mueve el puntero sobre un vnculo, el navegador
genera un evento onMouseOver para ese vnculo. A continuacin, comprueba si hay cdigo
JavaScript (especificado en la pgina mostrada) al que deba llamar cuando se genere ese evento para
ese vnculo. Los distintos elementos de la pgina tienen definidos diferentes eventos. Por ejemplo,
en la mayora de los navegadores onMouseOver y onClick son eventos asociados a vnculos,
mientras que onLoad es un evento asociado a imgenes y a la seccin body del documento.
Una accin consta de cdigo JavaScript ya definido que realiza una tarea especfica, como abrir la
ventana de un navegador, mostrar u ocultar una capa, reproducir un sonido o detener una pelcula
Macromedia Shockwave. Las acciones que incorpora Dreamweaver MX han sido cuidadosamente
desarrolladas por los ingenieros de Dreamweaver para proporcionar la mxima compatibilidad
con los distintos navegadores.
Despus de adjuntar un comportamiento a un elemento de pgina, siempre que el elemento
especificado se produce para ese elemento, el navegador llama a la accin (el cdigo JavaScript)
que se haya asociado con ese evento. (Los eventos que puede utilizar para desencadenar una
accin determinada varan en funcin del navegador de que se trate.) Por ejemplo, si adjunta la
accin Mensaje emergente a un vnculo y especifica que el evento onMouseOver desencadena esa
accin, cada vez que un visitante pase el puntero del ratn sobre ese vnculo en el navegador
aparecer el mensaje en un cuadro de dilogo.
Un mismo evento puede desencadenar varias acciones distintas, y se puede especificar el orden en
que esas acciones tienen lugar.
382 Captulo 18: Utilizacin de comportamientos JavaScript
DreamweaverMX 2004 incluye unas 24 acciones de comportamiento. Encontrar otras acciones
en el sitio Web de Macromedia Exchange, as como en los sitios Web de otros desarrolladores.
(Vase Descarga e instalacin de comportamientos de terceros en la pgina 386.) Si dispone de
los conocimientos necesarios sobre JavaScript, puede escribir sus propias acciones de
comportamiento. Para ms informacin sobre cmo escribir acciones de comportamiento,
consulte el apartado Ampliacin deDreamweaver de la Ayuda (Ayuda > Ampliacin de
Dreamweaver).
Nota: los trminos comportamiento y accin son trminos de Dreamweaver, no de HTML. En lo que
se refiere al navegador, una accin es igual que cualquier otro elemento de cdigo JavaScript.
Utilizacin del panel Comportamientos en la pgina 382
Eventos en la pgina 382
Aplicacin de un comportamiento en la pgina 383
Cmo adjuntar un comportamiento a un texto en la pgina 384
Cambio de un comportamiento en la pgina 385
Actualizacin de un comportamiento en la pgina 385
Creacin de nuevas acciones en la pgina 386
Descarga e instalacin de comportamientos de terceros en la pgina 386
Utilizacin de las acciones de comportamiento incluidas con Dreamweaver en la pgina 386
Utilizacin del panel Comportamientos
El panel Comportamientos sirve para adjuntar comportamientos a los elementos de una pgina
(ms concretamente, a las etiquetas) y para modificar parmetros de otros comportamientos
adjuntados anteriormente.
Para abrir el panel Comportamientos:
Seleccione Ventana > Comportamientos.
Los comportamientos que ya se han adjuntado al elemento de pgina actualmente seleccionado
aparecen en la lista de comportamientos (el rea principal del panel), en orden alfabtico por
eventos. Si hay varias acciones para un mismo evento, las acciones se ejecutarn en el orden en que
aparecen en la lista. Si en la lista de comportamientos no aparece ningn comportamiento,
significa que no hay ningn comportamiento adjunto al elemento actualmente seleccionado.
Para ms informacin sobre las opciones del panel Comportamientos, seleccione Ayuda en el
men Opciones, situado en la barra de ttulo del grupo de paneles.
Eventos
Cada navegador proporciona un conjunto de eventos que pueden asociarse a las acciones que
figuran en el men emergente Acciones (+) del panel Comportamientos. Cuando un visitante de
la pgina Web interacta con la pgina (por ejemplo, haciendo clic en una imagen) el navegador
genera sucesos que pueden utilizarse para llamar a funciones JavaScript que, a su vez, provocan la
ejecucin de una accin. Los eventos tambin pueden generarse sin interaccin del usuario, como
por ejemplo cuando se configura una pgina para que vuelva a cargarse cada 10 segundos.
Dreamweaver proporciona numerosas acciones comunes que pueden desencadenarse utilizando
estos eventos.
Aplicacin de un comportamiento 383
Para conocer los nombres y las descripciones de los eventos que proporciona cada navegador, vase
el Dreamweaver Centro de soporte de en www.macromedia.com/go/dreamweaver_support_es/.
En el men emergente Eventos aparecen diferentes eventos en funcin del objeto seleccionado y
de los navegadores especificados en el submen Mostrar eventos para. Para conocer cules son los
eventos que admite un navegador determinado para un elemento de pgina concreto, inserte el
elemento de pgina en su documento, adjntele un comportamiento y luego mire el men
emergente Eventos del panel Comportamientos. Los eventos pueden aparecer atenuados si an no
existen en la pgina los objetos pertinentes o si el objeto seleccionado no puede recibir eventos. Si
no aparecen los eventos esperados, asegrese de que est seleccionado el objeto correcto o cambie
los navegadores de destino en el men emergente Mostrar eventos para.
Al adjuntar un comportamiento a una imagen, algunos eventos (como onMouseOver) aparecen
entre parntesis. Estos eventos solamente estn disponibles para vnculos. Cuando se elige uno de
ellos, Dreamweaver ajusta una etiqueta a alrededor de la imagen para definir un vnculo nulo. El
vnculo nulo es representado por javascript:; en el cuadro de texto Vnculos del inspector de
propiedades. Puede cambiar el valor del vnculo si desea convertirlo en un vnculo real con otra
pgina, pero si borra el vnculo JavaScript sin sustituirlo por otro vnculo, borrar el
comportamiento.
Para saber con exactitud cules son las etiquetas que se pueden usar con un evento en un
navegador determinado, busque el evento en uno de los archivos de la carpeta Dreamweaver/
Configuration/Behaviors/Events.
Aplicacin de un comportamiento
Se pueden adjuntar comportamientos al documento completo (es decir, a la etiqueta body) o a
vnculos, imgenes, elementos de formulario o cualquier otro elemento HTML.
El navegador de destino que elija determina los eventos compatibles con un elemento
determinado. Internet Explorer 4.0, por ejemplo, tiene una gama de eventos para cada elemento
mucho ms amplia que Netscape Navigator 4.0 o que la versin 3.0 de cualquier otro navegador.
Nota: no se puede adjuntar un comportamiento a texto normal. Para ms informacin, consulte
Cmo adjuntar un comportamiento a un texto en la pgina 384.
Se puede especificar ms de una accin para cada evento. Las acciones tienen lugar en el orden en
el que se enumeran en la columna Acciones del panel Comportamientos. Para informacin sobre
la manera de cambiar el orden de las acciones, vase Cambio de un comportamiento en
la pgina 385.
Para adjuntar un comportamiento:
1 Seleccione un elemento de la pgina, como una imagen o un vnculo.
Para adjuntar un comportamiento a la pgina completa, haga clic en la etiqueta <body> en el
selector de etiquetas, situado en la parte inferior izquierda de la ventana de documento.
2 Elija Ventana > Comportamientos para abrir el panel de comportamientos.
3 Haga clic en el botn ms (+) y seleccione una accin en el men emergente Acciones.
No se pueden seleccionar las acciones que aparecen atenuadas en el men. Pueden mostrarse
atenuadas porque no exista un objeto necesario en el documento actual. Por ejemplo, la accin
Controlar Shockwave o Flash aparece atenuada si el documento no contiene ningn archivo
SWF Macromedia Flash o Shockwave. Si no hay eventos para el objeto seleccionado, todas las
acciones aparecern atenuadas.
Cuando se selecciona una accin, aparece un cuadro de dilogo que muestra parmetros e
instrucciones para dicha accin.
4 Introduzca los parmetros de la accin y haga clic en Aceptar.
Todas las acciones proporcionadas con Dreamweaver funcionan con los navegadores de la
versin 4.0 y posteriores. Algunas acciones no funcionan en los navegadores antiguos. Vase
Utilizacin de las acciones de comportamiento incluidas con Dreamweaver en la pgina 386.
5 El evento predeterminado que desencadena la accin aparece en la columna Eventos. Si no es
ste el evento de desencadenamiento que desea, seleccione otro en el men emergente Eventos.
(Para abrir el men emergente Eventos, seleccione un evento o una accin en el panel
Comportamientos y haga clic en la flecha negra que seala hacia abajo y que aparece entre el
nombre del evento y el nombre de la accin.)
Cmo adjuntar un comportamiento a un texto
No se puede adjuntar un comportamiento a texto normal. Las etiquetas como p y span no
generan eventos en los navegadores, por lo que no es posible desencadenar una accin a partir de
esas etiquetas.
Sin embargo, s se puede adjuntar un comportamiento a un vnculo. Por ello, la manera ms fcil
de adjuntar un comportamiento a texto consiste en aadir un vnculo nulo (que no seala a nada)
al texto, y luego adjuntar el comportamiento al vnculo. Tenga en cuenta que al hacerlo, el texto
tendr aspecto de vnculo. Si no desea que parezca un vnculo, puede cambiarle el color y eliminar
el subrayado, pero si lo hace es posible que los visitantes del sitio no se den cuenta de que hay una
razn para hacer clic en ese texto.
Para adjuntar un comportamiento al texto seleccionado:
1 En el inspector de propiedades, introduzca javascript:; en el cuadro de texto Vnculo.
Asegrese de incluir tanto los dos puntos como el punto y coma.
Nota: si lo desea, como alternativa, puede usar un signo de almohadilla (#) en el cuadro de texto
Vnculo. El problema de usar un signo de almohadilla es que cuando un visitante hace clic en un
vnculo, algunos navegadores pueden saltar a la parte superior de la pgina. Hacer clic en el
vnculo nulo de JavaScript no produce efecto alguno en la pgina, por lo que la solucin de
JavaScript suele ser la preferible.
2 Con el texto todava seleccionado, abra el panel Comportamientos (Ventana >
Comportamientos).
3 Elija una accin en el men emergente Acciones, introduzca los parmetros de la accin y
seleccione un evento que desencadene la accin. Para informacin detallada, vase Aplicacin
de un comportamiento en la pgina 383.
Para cambiar el aspecto de texto vinculado de modo que no parezca un vnculo:
1 Abra la vista Cdigo en la ventana Documento seleccionando Ver > Cdigo.
2 Busque el vnculo
3 En la etiqueta a href del vnculo, inserte este atributo: style="text-decoration:none;
color:black".
Al incluir este atributo, se desactiva el subrayado y el color del texto se establece en negro. (Por
supuesto, si el texto contiguo es de un color distinto, use ese color en lugar del negro.)
Actualizacin de un comportamiento 385
Observe que este atributo es un estilo CSS en lnea. Un estilo en lnea aplicado a un vnculo
anula los otros estilos CSS que se aplican a ese vnculo, pero no tiene efecto fuera de ste. Para
cambiar el aspecto del texto vinculado en todos los lugares en que aparece en la pgina o en
todo el sitio, use los estilos CSS para crear un nuevo estilo de vnculo. Para informacin
detallada, vase Captulo 13, Insercin y formato de texto, en la pgina 281.
Cambio de un comportamiento
Despus de adjuntar un comportamiento, se puede cambiar el evento que desencadena la accin,
aadir o eliminar acciones y cambiar los parmetros de las acciones.
Para cambiar un comportamiento:
1 Seleccione un objeto con un comportamiento adjunto.
2 Elija Ventana > Comportamientos para abrir el panel de comportamientos.
Los comportamientos aparecern en el panel ordenados alfabticamente por eventos. Si hay
varias acciones para un mismo evento, las acciones aparecen en el orden en que se ejecutarn.
Para editar los parmetros de una accin, haga doble clic en el nombre del comportamiento
o seleccinelo y presione la tecla Entrar (Windows) o Retorno (Macintosh); seguidamente,
cambie los parmetros en el cuadro de dilogo y haga clic en Aceptar.
Para cambiar el orden de las acciones de un evento dado, seleccione una accin y haga clic
en los botones de flecha arriba o abajo. Tambin puede seleccionar la accin, cortarla y
pegarla en la posicin deseada entre las otras acciones.
Para eliminar un comportamiento, seleccinelo y haga clic en el botn de signo menos () o
presione Suprimir.
Actualizacin de un comportamiento
Si sus pginas contienen comportamientos creados con Dreamweaver 1 o Dreamweaver 2, dichos
comportamientos no se actualizarn automticamente al abrir las pginas con la versin actual de
Dreamweaver. No obstante, al actualizar una aparicin de un comportamiento en una pgina
(siguiendo el procedimiento que se indica en esta seccin) se actualizarn todas las dems
apariciones de dicho comportamiento en la pgina. Los comportamientos creados en
Dreamweaver 3 funcionan correctamente en Dreamweaver 4 sin necesidad de modificacin.
Nota: como se ha dicho anteriormente, cuando actualice la aparicin de un comportamiento en una
pgina, se actualizarn tambin las dems apariciones de dicho comportamiento en esa pgina. No
obstante, debe actualizar los comportamientos incluidos en cada pgina del sitio Web.
Para actualizar un comportamiento en una pgina:
1 Seleccione un elemento que tenga el comportamiento adjunto.
2 Abra el panel Comportamientos.
3 Haga doble clic en el comportamiento.
4 Haga clic en Aceptar en el cuadro de dilogo del comportamiento.
Se actualizarn todas las apariciones del comportamiento en esa pgina.
Creacin de nuevas acciones
Las acciones constan de cdigo JavaScript y HTML. Si posee los conocimientos necesarios sobre
JavaScript, puede escribir nuevas acciones y aadirlas al men emergente Acciones del panel
Comportamientos. Para ms informacin, consulte Ampliacin de Dreamweaver.
Descarga e instalacin de comportamientos de terceros
Una de las caractersticas ms interesantes de Dreamweaver es su capacidad de ampliacin. Es
decir, ofrece a aquellos usuarios que disponen de suficientes conocimientos de JavaScript la
oportunidad de escribir cdigo JavaScript y ampliar as las posibilidades de Dreamweaver.
Muchos de estos usuarios han decidido compartir sus extensiones con otros usuarios envindolas
al sitio Web de Dreamweaver Macromedia Exchange (www.macromedia.com/go/
dreamweaver_exchange_es/).
Para descargar e instalar nuevos comportamientos desde el sitio Web de Macromedia
Exchange:
1 Abra el panel Comportamientos y elija Obtener ms comportamientos en el men emergente
Acciones (+).
Se abrir su navegador principal y aparecer el sitio Exchange. (Para descargar
comportamientos es necesario estar conectado a la Web.)
2 Examine o busque los paquetes.
3 Descargue e instale el paquete de extensiones que desee.
Para informacin detallada, vase Adicin de extensiones a Dreamweaver en la pgina 61.
Utilizacin de las acciones de comportamiento incluidas con
Dreamweaver
Las acciones de comportamiento incluidas con Dreamweaver han sido desarrolladas para que
funcionen con todas las versiones de Netscape Navigator 4.0 e Internet Explorer 4.0 y posteriores.
La mayora de estas acciones de comportamiento tambin funcionan con Netscape Navigator
versin 3.0 y posteriores. (Los comportamientos relacionados con capas no funcionan con
Netscape Navigator 3.0.) La mayora de estas acciones de comportamiento no producen
resultados con Internet Explorer versin 3.0.
Nota: las acciones de Dreamweaver han sido cuidadosamente desarrolladas para funcionar en el
mayor nmero posible de navegadores. Si elimina manualmente cdigo de una accin de
Dreamweaver o lo sustituye por su propio cdigo, puede perderse la compatibilidad con mltiples
navegadores.
Aunque las acciones de Dreamweaver han sido escritas para maximizar la compatibilidad con
mltiples navegadores, hay algunas que no funcionan en los navegadores ms antiguos. Por otra
parte, algunos navegadores no son compatibles con JavaScript y, adems, muchos usuarios
navegan por la Web con JavaScript desactivado en sus navegadores. Para obtener la mejor
compatibilidad en distintas plataformas, incorpore interfaces alternativas incluidas en etiquetas
noscript para que puedan usar el sitio las personas que no tienen JavaScript.
Utilizacin de las acciones de comportamiento incluidas con Dreamweaver 387
Llamar JavaScript
La accin Llamar JavaScript permite usar el panel Comportamientos para indicar que debe
ejecutarse una funcin personalizada o lnea de cdigo JavaScript cuando se produce un evento
determinado. (Puede escribir el cdigo JavaScript usted mismo o usar el cdigo que tiene a su
disposicin en diversas bibliotecas JavaScript de acceso gratuito en la Web.)
Para usar la accin Llamar JavaScript:
1 Seleccione un objeto y abra el panel Comportamientos.
2 Haga clic en el botn de signo ms (+) y elija Llamar JavaScript en el men emergente Acciones.
3 Escriba el cdigo JavaScript exacto que se ejecutar o el nombre de una funcin.
Por ejemplo, para crear un botn Atrs, podra escribir if (history.length > 0){history.back()}.
Si ha encapsulado el cdigo en una funcin, escriba solamente el nombre de la funcin (por
ejemplo, hogback()).
5 Compruebe que el evento predeterminado es el que usted desea.
Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen
en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.
Cambiar propiedad
Utilice la accin Cambiar propiedad para cambiar el valor de una de las propiedades de un objeto
(por ejemplo, el color de fondo de una capa o la accin de un formulario). El navegador
determina las propiedades que se pueden cambiar. Este comportamiento puede cambiar muchas
ms propiedades en Internet Explorer 4.0 que en Internet Explorer 3.0 o Netscape Navigator 3.0
o 4.0. Por ejemplo, puede configurar el color de fondo de una capa de forma dinmica.
Nota: utilice esta accin slo si posee buenos conocimientos de HTML y JavaScript.
Para usar la accin Cambiar propiedad:
2 Haga clic en el botn de signo ms (+) y elija Cambiar propiedad del men emergente Acciones.
3 En el men emergente Tipo de objeto, elija el tipo de objeto cuyas propiedades desea cambiar.
El men emergente Objeto con nombre muestra ahora todos los objetos con nombre del tipo
elegido.
4 Seleccione un objeto en el men emergente Objeto con nombre.
5 Seleccione una propiedad en el men emergente Propiedad, o introduzca el nombre de la
propiedad en el cuadro de texto.
Para ver las propiedades que se pueden cambiar en cada navegador, elija diferentes navegadores
o versiones de navegadores en el men emergente de navegadores. Si introduce manualmente
un nombre de propiedad, asegrese de usar el nombre exacto JavaScript de la propiedad (y
recuerde que las propiedades de JavaScript distinguen maysculas de minsculas).
6 Introduzca el nuevo valor de la propiedad en el cuadro de texto Nuevo valor y haga clic en
Aceptar.
7 Compruebe que el evento predeterminado es el que usted desea. (Cuando tiene lugar el evento,
la accin se ejecuta y cambia la propiedad.)
Comprobar navegador
Use la accin Comprobar navegador para enviar a los visitantes a distintas pginas, dependiendo
de las marcas y versiones de sus navegadores. Por ejemplo, puede resultar conveniente que los
visitantes vayan a una pgina si su navegador es Netscape Navigator 4.0 o una versin posterior,
que vayan a otra pgina si utilizan Internet Explorer 4.0 o una versin posterior o que
permanezcan en la pgina actual si su navegador es de algn otro tipo.
Resulta til adjuntar este comportamiento a la etiqueta body de una pgina que sea compatible
prcticamente con cualquier navegador (y que no use ninguna otra secuencia JavaScript). De esta
manera, los visitantes que visiten la pgina con JavaScript desactivado podrn ver algo de
contenido.
Otra posibilidad consiste en adjuntar este comportamiento a un vnculo nulo (como <a
href="javascript:;">) y que la accin determine el destino del vnculo en funcin de la marca
y la versin del navegador del visitante.
Para usar la accin Comprobar navegador:
2 Haga clic en el botn de signo ms (+) y seleccione Comprobar navegador en el men emergente
Acciones.
3 Determine el criterio de separacin que desea aplicar a los visitantes: por tipo de navegador, por
versin de navegador o por ambas.
Por ejemplo, desea que todos los usuarios que tengan un navegador de la versin 4.0 vean una
pgina y que los dems vean otra pgina distinta? O prefiere quiz que los usuarios de
Netscape Navigator vean una pgina y que los usuarios de Internet Explorer vean otra distinta?
4 Especifique una versin de Netscape Navigator.
5 En los mens emergentes adyacentes, seleccione las opciones sobre cmo proceder si el
navegador corresponde a la versin de Netscape Navigator especificada o una versin posterior
y cmo proceder en caso contrario.
Las opciones son Ir a URL, Ir a Alt URL y Permanecer en esta pgina.
6 Especifique una versin de Internet Explorer.
7 En los mens emergentes contiguos, elija las opciones sobre cmo se debe proceder si el
navegador corresponde a la versin de Internet Explorer especificada o es una versin posterior,
y cmo se debe proceder en caso contrario.
Las opciones son Ir a URL, Ir a Alt URL y Permanecer en esta pgina.
8 Elija una opcin en el men emergente Otros navegadores para especificar cmo se debe
proceder si el navegador no es Netscape Navigator ni Internet Explorer. (Por ejemplo, el
visitante puede estar utilizando un navegador basado en texto como Lynx.)
Permanecer en esta pgina es la mejor opcin para los navegadores distintos de Netscape
Navigator e Internet Explorer, ya que la mayora de ellos no son compatibles con JavaScript y,
si no pueden leer este comportamiento, permanecern en la misma pgina de todos modos.
9 Introduzca las rutas y los nombres de archivo del URL y del URL alternativo en los cuadros de
texto situados en la parte inferior del cuadro de dilogo. Si introduce un URL remoto, deber
introducir el prefijo http:// adems de la direccin www.
Recuerde que el objetivo de este comportamiento es comprobar las distintas versiones de los
navegadores; por lo tanto, lo mejor es elegir un evento que funcione en los navegadores de la
versin 3.0 y posteriores.
Comprobar plug-in
Use la accin Comprobar plug-in para remitir a los visitantes a distintas pginas dependiendo de
si tienen instalado el plug-in en cuestin. Por ejemplo, puede resultar conveniente que los
visitantes vayan a una pgina si tienen Shockwave y a otra distinta si no lo tienen.
Nota: no es posible detectar plug-ins especficos en Internet Explorer con JavaScript. No obstante,
la seleccin de Flash o Director har que se aada el cdigo VBScript adecuado a la pgina para
detectar los plug-ins en Internet Explorer en Windows. La deteccin de plug-ins es imposible con
Internet Explorer en Macintosh.
Para usar la accin Comprobar plug-in:
2 Haga clic en el botn de signo ms (+) y elija Comprobar plug-in del men emergente Acciones.
3 Seleccione un plug-in en el men emergente Plug-in o haga clic en Intro y escriba el nombre
exacto del plug-in en el cuadro de texto contiguo.
Deber utilizar el nombre exacto del plug-in tal como se especifica en negrita en la pgina
Acerca de los complementos en Netscape Navigator. En Windows, seleccione Ayuda > Acerca
de los complementos en Navigator; en Macintosh, elija Acerca de los complementos en el
men Apple.
4 En el cuadro de texto Si se encuentra, ir a URL, especifique un URL para los visitantes que
dispongan del plug-in.
Si especifica un URL remoto, deber incluir el prefijo http:// en la direccin.
Para hacer que los visitantes que disponen del plug-in permanezcan en la misma pgina, deje
vaco este campo.
5 En el campo De lo contrario, ir a URL, especifique un URL alternativo para los visitantes que
no dispongan del plug-in.
Para hacer que los visitantes que no disponen del plug-in permanezcan en la misma pgina,
deje en blanco este campo.
6 La deteccin de plug-ins no es posible en Internet Explorer para Macintosh; adems, Internet
Explorer para Windows no permite detectar la mayora de los plug-ins. De forma
predeterminada, cuando la deteccin resulta imposible, se enva al visitante al URL indicado en
el cuadro de texto De lo contrario. Para enviar al visitante al primer URL (Si se encuentra),
seleccione la opcin Ir siempre al primer URL si no es posible detectar. Cuando est
seleccionada, esta opcin hace que se d por hecho que el visitante dispone del plug-in, a no ser
que el navegador indique explcitamente que el plug-in no est presente.
En general, si el contenido del plug-in es parte integrante de la pgina, seleccione la opcin Ir
siempre al primer URL si no es posible detectar; los visitantes que no dispongan del plug-in
recibirn normalmente un mensaje del navegador para indicarles que deben descargar el plug-
in. Si el contenido del plug-in no es esencial para la pgina, desactive esta opcin.
Esta opcin afecta slo a Internet Explorer; Netscape Navigator siempre detecta los plug-ins.
Controlar Shockwave o Flash
Use la accin Controlar Shockwave o Flash para reproducir, detener, rebobinar o ir a un
fotograma de un archivo SWF de Macromedia Flash o Macromedia Shockwave. Para utilizar la
accin Controlar Shockwave o Flash:
1 Seleccione Insertar > Media > Shockwave o Insertar > Media > Flash para insertar un archivo
Shockwave o SWF de Flash respectivamente.
2 Seleccione Ventana > Propiedades e introduzca un nombre para la pelcula en el cuadro de texto
situado en la parte superior izquierda (junto al icono Shockwave o Flash). Debe asignar un
nombre a la pelcula para poder controlarla con la accin Controlar Shockwave o Flash.
3 Seleccione el elemento que desea usar para controlar el archivo SWF de Flash o Shockwave. Por
ejemplo, si tiene una imagen de un botn Reproducir que se utilizar para reproducir la pelcula,
seleccione esa imagen.
4 Abra el panel Comportamientos (Ventana > Comportamientos).
5 Haga clic en el botn de signo ms (+) y seleccione Controlar Shockwave o Flash en el men
emergente Acciones.
Aparecer un cuadro de dilogo de parmetros.
6 Seleccione una pelcula en el men emergente Pelcula.
Dreamweaver presenta automticamente una lista con los nombres de todos los archivos SWF
Flash o Shockwave que hay actualmente en el documento. (En concreto, Dreamweaver
presenta una lista con todos los nombres de los archivos con las extensiones .dcr, .dir, .swf o .spl
que estn en las etiquetas object o embed.)
7 Elija si desea reproducir, detener, rebobinar o ir a un fotograma de la pelcula. La opcin
Reproducir reproduce la pelcula empezando en el fotograma en que se produce la accin.
en la lista, cambie el navegador de destino en el submen Mostrar eventos para del men
emergente Eventos.
Arrastrar capa
La accin Arrastrar capa permite al visitante arrastrar una capa. Use esta accin para crear puzles,
controles deslizantes y otros elementos mviles de interfaz.
Se puede especificar la direccin en la que el visitante puede arrastrar la capa (en horizontal,
vertical o en cualquier direccin), un destino hasta el que el visitante debe arrastrar la capa, si la
capa debe ajustarse al destino cuando aquella se encuentra a un cierto nmero de pxeles de ste y
qu suceder cuando la capa llegue al destino, entre otras opciones.
Dado que la llamada a la accin Arrastrar capa debe producirse antes de que el visitante pueda
arrastrar la capa, asegrese de que el evento que desencadena la accin se produce antes de que el
visitante intente arrastrar la capa. Es recomendable adjuntar la accin Arrastrar capa al objeto
body (con el evento onLoad), aunque tambin puede adjuntarla a un vnculo que llene toda la
capa (como, por ejemplo, un vnculo alrededor de una imagen) usando el evento onMouseOver.
Para usar la accin Arrastrar capa:
1 Seleccione Insertar > Capa, o haga clic en el botn Dibujar capa de la barra Insertar y dibuje una
capa en la vista de diseo de la ventana del documento.
2 Seleccione la etiqueta body haciendo clic en <body> en el selector de etiquetas que se encuentra
en la parte inferior de la ventana de documento.
3 Abra el panel Comportamientos.
4 Haga clic en el botn de signo ms (+) y seleccione Arrastrar capa del men emergente Acciones.
Si la accin Arrastrar capa no est disponible, es muy probable que haya una capa seleccionada.
Dado que las capas no aceptan eventos en la versin 4.0 de ninguno de los dos navegadores,
deber seleccionar un objeto diferente, como por ejemplo la etiqueta body o un vnculo
(etiqueta a), o bien cambiar el navegador de destino por Internet Explorer 4.0 en el men
emergente Mostrar eventos para.
5 Seleccione la capa que desea hacer desplazable en el men emergente Capa.
6 Seleccione Restringido o Sin restriccin en el men emergente Movimiento.
El movimiento no restringido es adecuado para puzzles y otros juegos de arrastrar y soltar. Para
los controles deslizantes y los escenarios mviles, como cajones de archivos, cortinas y
minipersianas, elija movimiento restringido.
7 Para movimiento restringido, introduzca valores (en pxeles) en los cuadros de texto Arriba,
Abajo, Derecha e Izquierda.
Los valores son relativos a la posicin inicial de la capa. Para restringir el movimiento a una
regin rectangular, introduzca valores positivos en los cuatro cuadros de texto. Para permitir
solamente el movimiento vertical, introduzca valores positivos para Arriba y Abajo, y 0 para
Izquierda y Derecha. Para permitir slo el movimiento horizontal, introduzca valores positivos
para Izquierda y Derecha, y 0 para Arriba y Abajo.
8 Introduzca valores (en pxeles) en los cuadros de texto Izquierdo y Superior para definir el
destino de la capa.
El destino de la capa es la zona hasta la que usted desea que el visitante arrastre la capa. Se
considera que una capa ha alcanzado el destino cuando sus coordenadas izquierda y superior
coinciden con los valores introducidos en los cuadros de texto Izquierdo y Superior. Los valores
son relativos a la esquina superior izquierda de la ventana del navegador. Haga clic en la opcin
Obtener posicin actual para rellenar automticamente los campos con la posicin actual de la
capa.
9 Introduzca un valor (en pxeles) en el campo Ajustar si a menos de para determinar a qu
distancia del destino el visitante debe soltar la capa para que sta se ajuste al destino.
Los valores grandes facilitan al visitante la localizacin del destino para soltar la capa.
10 Para obtener puzles sencillos y manipulacin de escenarios, puede detenerse aqu. Para definir
el manejador de arrastre de una capa, controlar el movimiento de una capa mientras se arrastra
y desencadenar una accin al soltar la capa, haga clic en la ficha Avanzado.
11 Para definir una zona determinada de la capa en la que el visitante debe hacer clic para
arrastrarla, elija Interior de capa en el men emergente Arrastrar selector; luego introduzca las
coordenadas izquierda y superior, as como los valores de ancho y alto del selector de arrastre.
Esta opcin resulta til cuando la imagen contenida en la capa incluye un elemento que sugiere
la posibilidad de arrastrarla, como una barra de ttulo o un asa de cajn. No configure esta
opcin si desea que el visitante pueda hacer clic en algn lugar de la capa para arrastrarla.
12 Elija las opciones Al arrastrar que desee utilizar:
Seleccione Traer la capa al frente si la capa debe desplazarse a la primera posicin en el orden
de apilamiento mientras se est arrastrando. Si selecciona esta opcin, utilice el men
emergente para determinar si desea dejar la capa en la primera posicin o devolverla a su
posicin original en el orden de apilamiento.
Introduzca cdigo JavaScript o un nombre de funcin (por ejemplo, monitorLayer()) en
el cuadro de texto Llamar JavaScript para ejecutar repetidamente el cdigo o funcin
mientras se est arrastrando la capa. Por ejemplo, podra escribir una funcin que controle
las coordenadas de la capa y muestre mensajes y consejos como ya est cerca o est
lejsimos del destino donde soltar la capa en el cuadro de texto. Para ms informacin,
consulte Recopilacin de informacin sobre la capa desplazable en la pgina 392.
13 Introduzca cdigo JavaScript o un nombre de funcin (por ejemplo, evaluateLayerPos()) en el
segundo cuadro de texto Llamar JavaScript para ejecutar el cdigo o la funcin cuando se suelte
la capa. Seleccione la opcin Slo si se ajusta cuando el cdigo JavaScript deba ejecutarse
solamente si la capa ha alcanzado a su destino.
Recuerde que las capas no son compatibles con los navegadores de la versin 3.0.
Nota: no se puede adjuntar la accin Arrastrar capa a un objeto con los eventos onMouseDown u
onClick.
Recopilacin de informacin sobre la capa desplazable
Cuando se adjunta a un objeto la accin Arrastrar capa, Dreamweaver inserta la funcin
MM_dragLayer() en la seccin head del documento. Adems de registrar la capa como
desplazable, esta funcin define tres propiedades para cada capa desplazable (MM_LEFTRIGHT,
MM_UPDOWN y MM_SNAPPED) que usted puede usar en sus propias funciones JavaScript para
determinar la posicin horizontal relativa de la capa, la posicin vertical relativa de la capa y si la
capa ha alcanzado el destino en el que debe soltarse.
Nota: la informacin que se ofrece en esta seccin est destinada exclusivamente a programadores
expertos de JavaScript.
Por ejemplo, la siguiente funcin muestra el valor de la propiedad MM_UPDOWN (la posicin vertical
actual de la capa) en un campo de formulario llamado curPosField. Los campos de formulario
son tiles para mostrar informacin que se actualiza continuamente, ya que son dinmicos; es
decir, se puede cambiar el contenido de los mismos una vez que la pgina ha terminado de
cargarse, tanto en Netscape Navigator como en Internet Explorer.
function getPos(layername){
var layerRef = MM_findObj(layername);
var curVertPos = layerRef.MM_UPDOWN;
document.tracking.curPosField.value = curVertPos;
}
En lugar de mostrar el valor de MM_UPDOWN o MM_LEFTRIGHT en un campo de formulario, puede
utilizar dichos valores de muchas otras maneras. Por ejemplo, puede crear una funcin que
presente un mensaje en el campo de formulario dependiendo de lo prximo que est el valor de la
zona donde debe soltarse la capa, o bien puede llamar a otra funcin para que muestre u oculte
una capa dependiendo del valor.
Resulta especialmente til leer la propiedad MM_SNAPPED cuando se tienen varias capas en la
pgina y todas ellas deben alcanzar sus objetivos antes de que el visitante pueda pasar a la siguiente
pgina o tarea. Por ejemplo, puede crear una funcin para determinar cuntas capas tienen un
valor MM_SNAPPED igual a true (verdadero) y llamarlas cada vez que se suelte una capa. Cuando el
recuento de capas ajustadas alcanza el nmero deseado, puede enviar al visitante a la pgina
siguiente o presentarle un mensaje emergente de felicitacin.
Si ha utilizado el evento onMouseOver para adjuntar la accin Arrastrar capa a vnculos
contenidos en distintas capas, deber realizar un pequeo cambio en la funcin MM_dragLayer()
para evitar que la propiedad MM_SNAPPED de una capa ajustada se restablezca con el valor false al
pasar el puntero del ratn sobre la capa. (Esto puede ocurrir si ha utilizado Arrastrar capa para
crear un puzzle de imagen, ya que es probable que el visitante pase el puntero del ratn por
encima de las piezas ajustadas al colocar otras piezas.) La funcin MM_dragLayer() no impide este
comportamiento, ya que ste resulta a veces deseable (por ejemplo, si desea establecer mltiples
destinos para soltar una misma capa).
Para evitar que se vuelvan a registrar las capas ajustadas:
1 Realice una copia de seguridad del documento antes de modificar algn modo el cdigo. (Puede
hacerlo en el panel Sitio de Dreamweaver, o en el Explorador de Windows (Windows) o en el
Finder (Macintosh).)
2 Seleccione Edicin > Buscar.
3 Seleccione Cdigo HTML en el men emergente Buscar.
4 Escriba (!curDrag), incluidos los parntesis, en el cuadro de texto adyacente.
5 Haga clic en Buscar siguiente.
Si Dreamweaver le pregunta si desea continuar buscando desde el principio del documento,
haga clic en S. Dreamweaver encontrar una declaracin con el siguiente contenido:
if (!curDrag) return false;
6 Cierre el cuadro de dilogo Buscar y modifique la declaracin en la vista Cdigo de la ventana
de documento o en el inspector de cdigos, para que quede de la siguiente forma:
if (!curDrag || curDrag.MM_SNAPPED != null) return false;
Las dos barras paralelas verticales (||) significan O y curDrag es una variable que representa la
capa que se est registrando como desplazable. La declaracin viene a significar "Si curDrag no
es un objeto o si ya tiene un valor MM_SNAPPED, no se ejecutar el resto de la funcin."
Ir a URL
La accin Ir a URL abre una nueva pgina en la ventana actual o en el marco especificado. Esta
accin resulta especialmente til para cambiar el contenido de dos o ms marcos con un solo clic.
Para usar la accin Ir a URL:
2 Haga clic en el botn de signo ms (+) y seleccione Ir a URL del men emergente Acciones.
3 Elija un destino para el URL en la lista Abrir en.
La lista Abrir en muestra automticamente los nombres de todos los marcos del conjunto de
marcos actual y de la ventana principal. Si no hay marcos, la ventana principal es la nica
opcin posible.
Nota: esta accin puede dar lugar a resultados inesperados si hay algn marco que se llame top,
blank, self o parent. Los navegadores a veces confunden estos nombres con nombres de destino
reservados.
4 Haga clic en Examinar para seleccionar el documento que desea abrir o introduzca la ruta y el
nombre de archivo del documento en el cuadro de texto URL.
5 Repita los pasos 3 y 4 para abrir ms documentos en otros marcos.
Men de salto
Al crear un men de salto mediante Insertar > Objetos de formulario > Men de salto,
Dreamweaver crea un objeto de men y le adjunta el comportamiento del Men de salto (o Men
de salto Ir). Normalmente no es preciso adjuntar manualmente la accin Men de salto a un
objeto. Para informacin sobre los mens de salto y la manera de crearlos, vase Mens de salto
en la pgina 328.
Un men de salto existente se puede editar de dos formas:
Se pueden editar y reorganizar los elementos del men, cambiar los archivos a los que se salta y
cambiar la ventana en la que esos archivos se abren haciendo doble clic en una accin de Men
de salto existente en el panel Comportamientos.
Los elementos de este men se editan igual que los de cualquier men, es decir, seleccionando
el men y usando el botn Valores de lista del inspector de propiedades. Para ms informacin,
consulte Insercin de mens de formulario HTML en la pgina 639.
Para editar un men de salto utilizando el panel Comportamientos:
1 Cree un objeto de men de salto si es que no hay todava ninguno en el documento.
2 Seleccione el objeto de men de salto y abra el panel Comportamientos.
3 Haga doble clic en Men de salto en la columna Acciones.
4 Lleve a cabo los cambios pertinentes en el cuadro de dilogo Men de salto y luego haga clic en
Aceptar.
Men de salto Ir
La accin Men de salto Ir est estrechamente relacionada con la accin Men de salto. Men de
salto Ir le permite asociar un botn Ir con un men de salto. (Para utilizar esta accin debe existir
ya un men de salto en el documento.) Al hacer clic en el botn Ir, se abre el vnculo seleccionado
en el men de salto. Los mens de salto generalmente no necesitan un botn Ir; al seleccionar un
elemento de un men de salto, normalmente se carga un URL sin necesidad de que el visitante
lleve a cabo ninguna otra accin. No obstante, si el visitante selecciona el mismo elemento que se
encuentra ya seleccionado en el men de salto, el salto no se producir. En general, eso no
importa, pero si aparece el men de salto en un marco y los elementos del men de salto
contienen vnculos con pginas de otros marcos, suele ser til disponer de un botn Ir para
permitir a los visitantes volver a elegir un elemento que ya est seleccionado en el men de salto.
Para aadir una accin Men de salto Ir:
1 Seleccione un objeto para utilizarlo como botn Ir (generalmente una imagen de un botn) y
abra el panel Comportamientos.
2 Haga clic en el botn de signo ms (+) y elija Men de salto Ir del men emergente Acciones.
3 En el men emergente Elegir men de salto, elija un men para que se active el botn Ir.
Abrir ventana del navegador
Use la accin Abrir ventana del navegador para abrir un URL en una nueva ventana. Se pueden
especificar las propiedades de la nueva ventana, incluidos su tamao, sus atributos (si se puede
cambiar su tamao, si tiene barra de mens, etc.) y su nombre. Por ejemplo, este comportamiento
se puede usar para abrir una imagen ms grande en otra ventana distinta cuando el visitante hace
clic en una imagen en miniatura. Con este comportamiento, puede hacer que la nueva ventana
tenga el mismo tamao que la imagen.
Si no se especifican los atributos de la ventana, se abrir con el mismo tamao y los mismos
atributos de la ventana que la abri. Al especificar algn atributo de la ventana, se desactivan
automticamente todos los dems atributos que no se activen explcitamente. Por ejemplo, si no
se establecen los atributos de la ventana, puede abrirse con un tamao de 640 x 480 pxeles y tener
barra de navegacin, barra de herramientas de ubicacin, barra de estado y barra de mens. Si se
establece explcitamente la anchura en 640 pxeles y la altura en 480 pxeles y no se establece
ningn otro atributo, la ventana se abrir con un tamao de 640 x 480 pxeles y carecer de barra
de navegacin, de barra de herramientas de ubicacin, de barra de estado, de barra de mens, de
manejadores de cambio de tamao y de barras de desplazamiento.
Para usar la accin Abrir ventana del navegador:
2 Haga clic en el botn de signo ms (+) y elija Abrir ventana del navegador en el men emergente
Acciones.
3 Haga clic en Examinar para seleccionar un archivo o introduzca el URL que desea ver.
4 Configure las siguientes opciones:
Ancho de la ventana especifica el ancho de la ventana en pxeles.
Alto de la ventana especifica el alto de la ventana en pxeles.
Barra de herramientas de navegacin es la fila de botones del navegador que incluye Atrs,
Adelante, Inicio y Actualizar.
Barra de herramientas de ubicacin es la fila de opciones del navegador que incluye el
cuadro de texto de ubicacin.
Barra de estado es la zona situada en la parte inferior de la ventana del navegador en la que
aparecen mensajes (como el tiempo de carga restante y los URL asociados a los vnculos).
Barra de mens es la zona de la ventana del navegador (Windows) o del escritorio
(Macintosh) en la que aparecen mens tales como Archivo, Edicin, Ver, Ir a y Ayuda. Esta
opcin debe establecerse explcitamente si desea que los visitantes puedan navegar desde la
nueva ventana. Si no establece esta opcin, el usuario slo podr cerrar o minimizar la ventana
(Windows) o cerrar la ventana y salir de la aplicacin (Macintosh) desde la nueva ventana.
Barras despl. si son necesarias especifica que debern aparecer las barras de desplazamiento
que sean precisas si el contenido se extiende ms all de la zona visible. Si no se establece
explcitamente esta opcin, no aparecern barras de desplazamiento. Si la opcin Selectores de
cambio de tamao tambin est desactivada, los visitantes no tendrn una forma fcil de ver el
contenido situado ms all del tamao original de la ventana. (Aunque siempre pueden
desplazar la ventana arrastrando el borde de la misma.)
Selectores de cambio de tamao especifica que el usuario tiene la posibilidad de cambiar el
tamao de la ventana, bien arrastrando la esquina inferior derecha de la ventana, o bien
haciendo clic en el botn Maximizar (Windows) o en el cuadro de tamao (Macintosh) situado
en la esquina superior derecha. Si esta opcin no se establece explcitamente, los controles de
cambio de tamao no estarn disponibles y la esquina inferior derecha no se podr arrastrar.
Nombre de la ventana es el nombre de la nueva ventana. Es imprescindible asignar un
nombre a la ventana si desea usarla como destino de vnculos o controlarla con cdigo
JavaScript. Este nombre no puede contener espacios ni caracteres especiales.
Reproducir sonido
Utilice la accin Reproducir sonido para reproducir un sonido. Por ejemplo, puede hacer que se
reproduzca un efecto sonoro cuando el puntero del ratn pase por encima de un vnculo o que se
reproduzca msica al cargarse la pgina.
Nota: es posible que los navegadores precisen algn tipo de compatibilidad adicional con audio
(como un plug-in de audio, por ejemplo) para reproducir sonidos. Por ello, es frecuente que
diferentes navegadores con diferentes plug-ins reproduzcan el sonido de forma diferente. Es difcil
predecir de manera fiable la manera en que las personas que visiten el sitio percibirn los sonidos que
usted haya incluido.
Para usar la accin Reproducir sonido:
2 Haga clic en el botn de signo ms (+) y seleccione Reproducir sonido en el men emergente
Acciones.
3 Haga clic en Examinar para seleccionar un archivo de sonido o introduzca la ruta y el nombre
del archivo en el campo Reproducir sonido.
Mensaje emergente
La accin Mensaje emergente presenta una alerta de JavaScript con el mensaje que usted
especifique. Dado que las alertas de JavaScript slo tienen un botn (Aceptar), esta accin resulta
ms adecuada para proporcionar informacin que para proponer una eleccin.
Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra expresin de
funcin JavaScript vlida. Para incrustar una expresin JavaScript, encirrela entre llaves ({}). Para
que aparezca una llave, antepngale una barra invertida (\{).
Ejemplo
El URL correspondiente a esta pgina es {window.location} y hoy es {new
Date()}.
Nota: no se puede controlar el aspecto de la alerta de JavaScript, puesto que est determinada por
el navegador del visitante. Si desea tener un mayor control sobre el aspecto de su mensaje, puede
usar el comportamiento Abrir ventana del navegador. Para informacin detallada, vase Abrir
ventana del navegador en la pgina 395.
Para usar la accin Mensaje emergente:
2 Haga clic en el botn de signo ms (+) y seleccione Mensaje emergente del men emergente
Acciones.
3 Introduzca el mensaje en el cuadro de texto Mensaje.
Carga previa de imgenes
La accin Carga previa de imgenes carga imgenes que no aparecen de inmediato en la pgina
(como aquellas que se intercambiarn por comportamientos o cdigo JavaScript) en la memoria
cach del navegador. Esto contribuye a evitar las demoras debidas a la descarga cuando llega el
momento de que aparezcan las imgenes.
Nota: la accin Intercambiar imagen carga automticamente todas las imgenes resaltadas cuando
se selecciona la opcin Carga previa de imgenes en el cuadro de dilogo Intercambiar imagen, por
lo que no es necesario aadir manualmente la accin Carga previa de imgenes al usar Intercambiar
imagen.
Para usar la accin Carga previa de imgenes:
2 Haga clic en el botn de signo ms (+) y seleccione Carga previa de imgenes del men
emergente Acciones.
3 Haga clic en Examinar para seleccionar el archivo de imagen que se va a precargar, o introduzca
la ruta y el nombre de archivo de una imagen en el cuadro de texto Archivo de origen de imagen.
4 Haga clic en el botn de signo ms (+), situado en la parte superior del cuadro de dilogo, para
aadir la imagen a la lista Carga previa de imgenes.
Nota: si no hace clic en el botn de signo ms antes de introducir la siguiente imagen, la imagen
elegida ser reemplazada en la lista por la siguiente imagen que elija.
5 Repita los pasos 3 y 4 para todas las imgenes restantes que desee cargar en la pgina actual.
6 Para eliminar una imagen de la lista Carga previa de imgenes, seleccione la imagen en la lista y
haga clic en el botn de signo menos ().
Establecer imagen de barra de navegacin
Utilice la accin Establecer imagen de barra de navegacin para convertir una imagen en una
imagen de barra de navegacin o para cambiar la visualizacin y las acciones de imgenes en una
barra de navegacin. (Para ms informacin, consulte Insercin de una barra de navegacin en
la pgina 343.)
Utilice la ficha Bsico del cuadro de dilogo Establecer imagen de barra de navegacin para crear
o actualizar una imagen o grupo de imgenes de barra de navegacin, cambiar el URL que debe
mostrarse al hacer clic en un botn de una barra de navegacin y seleccionar una ventana distinta
para mostrar un URL.
Utilice la ficha Avanzado del cuadro de dilogo Establecer imagen de barra de navegacin para
cambiar el estado de las imgenes de un documento en funcin del estado del botn actual. De
forma predeterminada, al hacer clic en un elemento de una barra de navegacin, todos los dems
elementos recuperan su estado Arriba. Utilice la ficha Avanzado si desea establecer un estado
diferente para una imagen cuando la imagen seleccionada se encuentre su estado Abajo o Sobre.
Para editar una accin Establecer imagen de barra de navegacin:
1 Seleccione una imagen en la barra de navegacin para editarla y abra el panel Comportamientos.
2 En la columna Acciones del panel Comportamientos, haga doble clic en la accin Establecer
imagen de barra de navegacin asociada al evento que est modificando.
3 En la ficha Bsico del cuadro de dilogo Establecer imagen de barra de navegacin, seleccione
opciones de edicin de la imagen.
Para configurar varias imgenes para un botn de la barra de navegacin:
1 Seleccione una imagen en la barra de navegacin para editarla y abra el panel Comportamientos.
2 En la columna Acciones del panel Comportamientos, haga doble clic en la accin Establecer
imagen de barra de navegacin asociada al evento que est modificando.
3 Haga clic en la ficha Avanzado del cuadro de dilogo Establecer imagen de barra de navegacin.
4 En el men emergente Cuando el elemento est mostrado, elija un estado de imagen.
Elija Imagen abajo si desea cambiar la visualizacin de otra imagen cuando un usuario haya
hecho clic en la imagen seleccionada.
Elija Sobre imagen o Sobre mientras imagen abajo si desea cambiar la visualizacin de otra
imagen cuando el puntero pase sobre la imagen seleccionada.
Para informacin sobre los estados de las imgenes, vase Utilizacin de las barras de
navegacin en la pgina 343
5 En la lista Tambin establecer imagen, seleccione otra imagen de la pgina que desee configurar.
6 Haga clic en Examinar para seleccionar el archivo de imagen que desea que aparezca o escriba la
ruta del archivo de imagen en el cuadro de texto A archivo de imagen.
7 Si seleccion Sobre imagen o Sobre mientras imagen abajo en el paso 4, dispondr de otra
opcin. En el cuadro de texto Si abajo, a archivo de imagen, haga clic en Examinar para
seleccionar el archivo de imagen o escriba la ruta del archivo de imagen que debe aparecer.
Definir texto de marco
La accin Definir texto de marco permite definir de forma dinmica el texto de un marco
mediante la sustitucin del contenido y el formato de un marco con el contenido que usted
especifique. Dicho contenido puede incluir cualquier cdigo HTML vlido. Utilice esta accin
para mostrar informacin de forma dinmica.
Aunque la accin Definir texto de marco sustituye el formato de un marco, puede seleccionar
Conservar color de fondo para conservar los atributos de color del fondo y el texto de la pgina.
Ejemplo
Date()}.
Para crear un conjunto de marcos:
Elija Modificar > Conjunto de marcos > Dividir marco a la izquierda, a la derecha, hacia arriba
o hacia abajo.
Para ms informacin, consulte Creacin de marcos y conjuntos de marcos en la pgina 210.
Para utilizar la accin Definir texto de marco:
2 Haga clic en el botn de signo ms (+) y seleccione Definir texto > Definir texto de marco en el
men emergente Acciones.
3 En el cuadro de dilogo Establecer texto de marco, seleccione el marco de destino del men
emergente Marco.
4 Haga clic en el botn Obtener HTML actual para copiar el contenido actual de la seccin body
del marco de destino.
5 Introduzca un mensaje en el cuadro de texto Nuevo HTML y haga clic en Aceptar.
6 Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro
evento en el men emergente.
Si no aparecen los eventos que desea, cambie el navegador de destino en el men emergente
Mostrar eventos para.
Definir texto de capa
La accin Definir texto de capa reemplaza el contenido y el formato de una capa existente en una
pgina con el contenido que usted especifique. Dicho contenido puede incluir cualquier cdigo
HTML vlido.
Definir texto de capa sustituye el contenido y el formato de la capa, pero mantiene sus atributos,
incluido el color. Puede aplicar formato al contenido mediante la inclusin de etiquetas HTML
en el cuadro de texto Nuevo HTML del cuadro de dilogo Definir texto de capa.
Ejemplo
Date()}.
Para crear una capa:
1 Seleccione Insertar > Capa.
Para ms informacin, consulte Insercin de una capa en la pgina 156.
2 En el inspector de propiedades, escriba un nombre para la capa.
Para utilizar la accin Definir texto de capa:
2 Haga clic en el botn de signo ms (+) y elija Definir texto > Definir texto de capa en el men
emergente Acciones.
3 En el cuadro de dilogo Definir texto de capa, utilice el men emergente Capa para elegir la capa
de destino.
4 Introduzca un mensaje en el cuadro de texto Nuevo HTML y haga clic en Aceptar.
Establecer texto de la barra de estado
La accin Establecer texto de la barra de estado muestra un mensaje en la barra de estado, situada
en la parte inferior izquierda de la ventana del navegador. Por ejemplo, puede usar esta accin para
describir el destino de un vnculo en la barra de estado en lugar de mostrar el URL al que est
asociado. Para ver un ejemplo de mensaje de estado, pase el ratn por encima de cualquiera de los
botones de exploracin de la Ayuda de Dreamweaver. A menudo los visitantes omiten o no
advierten los mensajes de la barra de estado (adems, no todos los navegadores proporcionan
soporte completo para introducir texto en la barra de estado). Si el mensaje es importante, puede
mostrarlo en forma de mensaje emergente o como texto de una capa.
Ejemplo
Date()}.
Para utilizar la accin Establecer texto de la barra de estado:
2 Haga clic en el botn de signo ms (+) y elija Definir texto > Establecer texto de la barra de
estado en el men emergente Acciones.
3 En el cuadro de dilogo Establecer texto de la barra de estado, escriba el mensaje en el cuadro
de texto Mensaje.
Escriba un mensaje corto. El navegador cortar el mensaje si no cabe en la barra de estado.
Definir texto de campo de texto
La accin Definir texto de campo de texto sustituye el contenido del campo de texto de un
formulario por el contenido que usted especifique.
Ejemplo
Date()}.
Para crear un campo de texto con nombre:
1 Elija Insertar > Objetos de formulario > Campo de texto.
Si Dreamweaver le pregunta si desea aadir una etiqueta de formulario, haga clic en S. Para
ms informacin, consulte Creacin de formularios en la pgina 631.
2 En el inspector de propiedades, introduzca un nombre para el campo de texto. Asegrese de que
el nombre no se repite en la pgina (no utilice el mismo nombre para varios elementos de la
misma pgina aunque se encuentren en formularios distintos).
Para utilizar la accin Definir texto de campo de texto:
1 Seleccione un campo de texto y abra el panel Comportamientos.
2 Haga clic en el botn de signo ms (+) y seleccione Definir texto > Definir texto de campo de
texto en el men emergente Acciones.
3 En el cuadro de dilogo Definir texto de campo de texto, seleccione el campo de texto de destino
en el men emergente Campo de texto.
4 Introduzca texto en el cuadro de texto Nuevo texto y luego haga clic en Aceptar.
Mostrar-Ocultar capas
La accin Mostrar-Ocultar capas muestra, oculta o restaura la visibilidad predeterminada de una o
ms capas. Esta accin resulta til para mostrar informacin a medida que el usuario va
interactuando con la pgina. Por ejemplo, cuando el usuario pasa el puntero del ratn por encima
de la imagen de una planta, se puede mostrar una capa que le ofrezca informacin sobre la poca
y regin de crecimiento de la planta, las horas de sol que necesita, el tamao que suele alcanzar,
etc.
La accin Mostrar-Ocultar capas tambin es til para crear una capa de carga previa, es decir, una
capa grande que en un principio oculta el contenido de la pgina y luego desaparece cuando todos
los componentes de la pgina se han terminado de cargar.
Para utilizar la accin Mostrar-Ocultar capas:
1 Elija Insertar > Capa, o haga clic en el botn Capa de la barra Insertar y dibuje una capa en la
Repita este paso para crear capas adicionales.
2 Haga clic en la ventana de documento para anular la seleccin de la capa y luego abra el panel
Comportamientos.
3 Haga clic en el botn de signo ms (+) y elija Mostrar-Ocultar capas en el men emergente
Acciones.
Si la accin Mostrar-Ocultar capas no est disponible, es muy probable que haya una capa
seleccionada. Dado que las capas no aceptan eventos en la versin 4.0 de ninguno de los dos
navegadores, deber seleccionar un objeto diferente, como por ejemplo la etiqueta body o un
vnculo (etiqueta a), o bien cambiar el navegador de destino por Internet Explorer 4.0 en el
men emergente Mostrar eventos para.
4 Seleccione la capa cuya visibilidad desea cambiar en la lista Capas con nombre.
5 Haga clic en Mostrar para mostrar la capa, en Ocultar para ocultarla o en Predeterminada para
restaurar la visibilidad predeterminada de la capa.
6 Repita los pasos 4 y 5 para todas las capas restantes cuya visibilidad desee cambiar en este
momento. (Se puede cambiar la visibilidad de mltiples capas con un solo comportamiento.)
Puede que las capas reduzcan su tamao para ajustarse al contenido cuando se muestren en una
ventana de Netscape Navigator. Para evitar que esto ocurra, aada texto o imgenes a las capas o
establezca valores de recorte de capa.
Para crear una capa de carga previa:
1 Haga clic en el botn Dibujar capa de la categora Comn de la barra Insertar y dibuje una capa
grande en la vista Diseo de la ventana de documentos.
Asegrese de que la capa cubra todo el contenido de la pgina.
2 En el panel Capas, arrastre el nombre de la capa hasta la primera posicin de la lista de capas
para especificar que la capa debe estar encima de todas las dems en el orden de apilamiento.
3 Seleccione la capa si no est ya seleccionada, y asgnele el nombre loading, usando para ello el
campo situado ms a la izquierda del inspector de propiedades.
4 Con la capa todava seleccionada, establezca el color de fondo de la capa con el mismo color que
el del fondo de la pgina del inspector de propiedades.
5 Haga clic dentro de la capa (que ahora debe estar ocultando el resto del contenido de la pgina)
y, si lo desea, escriba un mensaje.
Por ejemplo, los mensajes Espere a que se cargue la pgina o Cargando... informan a los
visitantes de lo que est ocurriendo para que sepan que la pgina tiene contenido.
6 Haga clic en la etiqueta <body> en el selector de etiquetas, situado en la esquina inferior
izquierda de la ventana de documento.
7 En el panel Comportamientos, seleccione Mostrar-Ocultar capas en el men emergente
Acciones.
8 Seleccione la capa llamada loading en la lista de Capas con nombre.
9 Haga clic en Ocultar.
11 Compruebe que el evento que aparece junto a la accin Mostrar-Ocultar capas en la lista de
comportamientos es onLoad. (Si no lo es, seleccione el evento y haga clic en el tringulo que
seala hacia abajo que aparece entre el evento y la accin. Elija onLoad en la lista de eventos del
men emergente.)
Mostrar men emergente
El comportamiento Mostrar men emergente sirve para crear o editar un men emergente de
Dreamweaver o para abrir y modificar un men emergente de Fireworks insertado en un
documento de Dreamweaver.
Defina las opciones del cuadro de dilogo Mostrar men emergente para crear un men
emergente horizontal o vertical. Puede utilizar este cuadro de dilogo para establecer o modificar
el color, el texto y la posicin de un men emergente.
Nota: deber utilizar el botn Editar del inspector de propiedades de Dreamweaver para editar las
imgenes de un men emergente basado en imgenes de Fireworks. Sin embargo, puede utilizar el
comando Mostrar men emergente para cambiar el texto de un men emergente basado en
imgenes. Para informacin sobre la edicin de imgenes en Fireworks, vase Captulo 16,
Utilizacin con otras aplicaciones, en la pgina 351.
Para ver un men emergente en un documento deber abrir el documento en la ventana de una
navegador y, a continuacin, pasar el puntero sobre la imagen o el vnculo desencadenante.
Para utilizar la accin Mostrar men emergente:
1 Seleccione un objeto para adjuntar el comportamiento y abra el panel Comportamientos
(Mays+F3).
2 Haga clic en el botn de signo ms (+) y elija Mostrar men emergente en el men emergente
Acciones.
3 En el cuadro de dilogo Mostrar men emergente, utilice las fichas siguientes para establecer las
opciones del men emergente.
Contenido permite establecer el nombre, la estructura, el URL y el destino de elementos de
men individuales.
Aspecto permite establecer el aspecto del Estado Arriba y del Estado Sobre del men y definir
la seleccin de fuentes para el texto del elemento del men.
Avanzadas permite definir las propiedades de las celdas del men. Por ejemplo, puede definir
el alto, el ancho, el color y el ancho del borde de las celdas, la sangra del texto y la duracin del
perodo que debe transcurrir antes de que el men aparezca cuando el usuario mueve el
puntero sobre el desencadenante.
Posicin permite establecer dnde se sita el men en relacin con la imagen o el vnculo
desencadenante.
Adicin, eliminacin y cambio del orden de los elementos de un men
emergente
Utilice la ficha Contenido del cuadro de dilogo Mostrar men emergente para crear elementos
de men. Tambin puede emplear esta ficha para eliminar elementos existentes o para cambiar su
orden de aparicin en el men.
Para aadir elementos al men emergente:
1 En la ficha Contenido, cree un elemento de men emergente siguiendo este procedimiento:
En el cuadro de texto Texto, seleccione el texto predeterminado (Nuevo elemento) e introduzca
el texto que desea que aparezca en el men emergente.
2 Establezca las opciones adicionales deseadas:
Si desea que el elemento de men abra otro archivo al hacer clic en l, escriba la ruta del
archivo en el cuadro de texto Vnculo o haga clic en el icono de carpeta y acceda al documento
que desea abrir.
Si desea establecer una ubicacin para abrir el documento, por ejemplo, una nueva ventana o
un marco especfico, elija la ubicacin deseada en el men emergente Destino.
Nota: si el marco deseado no aparece en el men emergente Destino, cierre el cuadro de dilogo
Mostrar men emergente y, en la ventana de documento, seleccione el marco y asgnele un
nombre.
3 Haga clic en el botn de signo ms (+) para aadir entradas adicionales a la lista de vista previa
Mostrar men emergente.
Cuando termine de aadir elementos de men, haga clic en Aceptar para aceptar la
configuracin predeterminada o seleccione otra ficha de Mostrar men emergente para definir
opciones adicionales.
Para crear un elemento de submen:
En la lista Mostrar men emergente, seleccione el elemento que desea convertir en un elemento
de submen y, a continuacin, lleve a cabo una de estas operaciones:
Para aplicar sangra a un elemento de la lista de men, haga clic en el botn Aplicar sangra a
elemento.
Para eliminar una sangra, haga clic en el botn Anular sangra de elemento.
Nota: no es posible convertir el primer elemento de men de una lista en un elemento de
submen.
Para cambiar el orden de un elemento del men:
En la lista Mostrar men emergente, seleccione el elemento que desea desplazar hacia arriba o
hacia abajo y, a continuacin, haga clic en la flecha arriba o abajo para mover el elemento a la
posicin deseada.
Para eliminar un elemento del men:
1 En la ficha Contenido, seleccione la entrada de men que desea eliminar de la lista Mostrar
men emergente.
2 Haga clic en el botn de signo menos (-).
Configuracin del aspecto de un men emergente
Despus de crear los elementos del men, utilice la ficha Aspecto de Mostrar men emergente
para definir la orientacin, los atributos de fuente y los atributos de estado de botn del men
emergente.
Nota: el panel de vista previa de la ficha Aspecto ofrece una representacin aproximada de las
opciones definidas en esta ficha.
Para definir el aspecto de un men emergente:
1 En el men emergente situado en la parte superior de la ficha Aspecto, elija Men Vertical o
Men Horizontal para establecer la orientacin del men.
2 Defina las opciones de formato de texto que desee:
En el men emergente Fuente, seleccione la fuente que desea aplicar a los elementos del men.
Nota: si la fuente que desea aplicar no figura en la lista, utilice la opcin Editar lista de fuentes para
aadir la fuente deseada a la lista. Para asegurarse de que el men aparecer de la forma deseada,
elija una fuente que puedan tener los visitantes del sitio.
Defina el tamao de la fuente, los atributos de estilo, la alineacin del texto y las opciones de
justificacin para el elemento de men.
3 En los cuadros Estado Arriba y Estado Sobre, utilice el selector de color para establecer los
colores del texto y las celdas de los botones del elemento de men.
4 Cuando termine de definir las opciones de aspecto, haga clic en Aceptar o seleccione otra ficha
de Mostrar men emergente para definir opciones adicionales.
Configuracin de opciones avanzadas de aspecto
Utilice las opciones de la ficha Avanzadas para especificar atributos adicionales de las celdas del
men. Por ejemplo, puede establecer el ancho, el alto, el espaciado de las celdas o el relleno del
botn del men, la sangra de texto y atributos del borde.
Para definir los atributos de formato avanzados de un men emergente:
1 Haga clic en la ficha Avanzadas y defina las opciones que desea aplicar a los elementos del men:
Ancho de celda establece el ancho especfico, en pxeles, de los botones del men. El ancho de
celda se establece automticamente basndose en el elemento ms ancho. Para incrementar el
ancho de celda, seleccione Pxeles en el men emergente e introduzca un valor mayor que el
que aparece en el cuadro de texto Ancho de celda.
Alto de celda establece el alto especfico, en pxeles, de los botones del men. Para incrementar
el alto de celda, seleccione Pxeles en el men emergente e introduzca un valor mayor que el
que aparece en el cuadro de texto Alto de celda.
Relleno celda especifica el nmero de pxeles entre el contenido de una celda y sus lmites.
Espacio celda especifica el nmero de pxeles entre celdas contiguas.
Sangra de texto permite especificar, en pxeles, la cantidad de sangra que se aplica al texto de
un elemento de men en la celda.
Demora de men establece el perodo de tiempo entre el momento en que el usuario mueve el
puntero sobre la imagen o el vnculo desencadenante y el momento de aparicin del men. Los
valores se expresan en milisegundos, por lo que la opcin predeterminada, 1000, equivale a un
segundo. Por cada segundo de demora que desee definir, aada 000. Por ejemplo, para una
demora de tres segundos, escriba 3000.
Bordes de ventana emergente determina si aparece un borde alrededor de los elementos del
men. Si desea que aparezca un borde alrededor de los elementos del men, active la casilla de
verificacin Mostrar bordes.
Ancho del borde establece el ancho del borde en pxeles.
Sombra, Color del borde y Resaltado permite seleccionar un color para estas opciones de
borde. Sombra y resaltado no se reflejan en la vista previa.
2 Cuando termine de definir las opciones de aspecto avanzadas, haga clic en Aceptar o seleccione
otra ficha de Mostrar men emergente para definir opciones adicionales.
Configuracin de la posicin de un men emergente en un documento
Utilice las opciones de posicin para establecer dnde desea mostrar el men emergente en
relacin con la imagen o el vnculo desencadenante. Tambin puede establecer si el men se
oculta o no cuando el usuario aleja el puntero del desencadenante.
Para definir las opciones de posicin del men emergente:
1 En el cuadro de dilogo Mostrar men emergente, haga clic en la ficha Posicin.
2 Establezca la ubicacin del men emergente siguiendo uno de estos procedimientos:
Seleccione una de las opciones predefinidas.
Establezca coordenadas de posicin personalizadas escribiendo un nmero en el cuadro de
texto X para establecer la coordenada horizontal, y un nmero en el cuadro de texto Y para
establecer la coordenada vertical. Las coordenadas se cuentan a partir de la esquina superior
izquierda del men.
3 Para ocultar el men emergente cuando el puntero no est sobre l, compruebe que la opcin
Ocultar men con evento onMouseOut est activada. Para dejar que el men siga mostrndose,
desactive esta opcin.
4 Cuando termine de crear o modificar el men emergente, haga clic en Aceptar.
Modificacin de un men emergente
El comportamiento Mostrar men emergente permite editar o actualizar el contenido de un
men emergente. Puede aadir, eliminar o cambiar elementos del men, reorganizarlos y
establecer dnde se sita un men en relacin con la imagen o el vnculo desencadenante.
Para abrir un men emergente existente basado en HTML:
1 En el documento de Dreamweaver, seleccione el vnculo o la imagen que desencadena el men
emergente.
2 Abra el panel Comportamientos (Mays+F3), si no est ya abierto y, en la lista Acciones, haga
doble clic en Mostrar men emergente.
Se abre el cuadro de dilogo Mostrar men emergente.
3 Realice las modificaciones que desee en el men emergente.
4 Al terminar de modificar el men emergente, haga clic en Aceptar.
Para informacin detallada sobre la configuracin de las opciones de men emergente, vase
Mostrar men emergente en la pgina 403.
Intercambiar imagen
La accin Intercambiar imagen sustituye una imagen por otra cambiando el atributo src de la
etiqueta img. Use esta accin para crear sustituciones de botones y otros efectos de imgenes
(incluido el intercambio de varias imgenes a la vez). Al insertar una imagen dinmica se aade
automticamente un comportamiento Intercambiar imagen a la pgina.
Nota: dado que slo el atributo src se ve afectado por esta accin, el intercambio debe hacerse con
imgenes que tengan las mismas dimensiones (altura y anchura) que la imagen original. En caso
contrario, la imagen que se intercambia aparecer reducida o ampliada para adaptarse a las
dimensiones de la imagen original.
Para usar la accin Intercambiar imagen:
1 Elija Insertar > Imagen o haga clic en el botn Imagen de la barra Insertar para insertar una
imagen.
2 En el inspector de propiedades, introduzca un nombre para la imagen en el cuadro de texto
situado ms a la izquierda.
La accin Intercambiar imagen continuar funcionando aunque no asigne nombres a las
imgenes, ya que asigna un nombre automticamente a las imgenes sin nombre cuando se
adjunta el comportamiento a un objeto. No obstante, resultar ms fcil distinguir las
imgenes en el cuadro de dilogo Intercambiar imagen si todas ellas disponen ya de un
nombre.
3 Repita los pasos 1 y 2 para insertar ms imgenes.
4 Seleccione un objeto (normalmente, la imagen que va a intercambiar) y abra el panel
Comportamientos.
5 Haga clic en el botn de signo ms (+) y seleccione Intercambiar imagen del men emergente
Acciones.
6 Seleccione en la lista Imgenes la imagen cuyo origen desea cambiar.
7 Haga clic en Examinar para seleccionar el archivo de la nueva imagen o introduzca la ruta y el
nombre de archivo de la nueva imagen en el cuadro de texto Definir origen como.
8 Repita los pasos 6 y 7 para todas las dems imgenes que desee cambiar. Puede usar la misma
accin Intercambiar imagen para todas las imgenes que desee cambiar a la vez; en caso
contrario, la accin correspondiente Restaurar imagen intercambiada no las restaurar todas.
9 Seleccione la opcin Carga previa de imgenes para cargar las nuevas imgenes en la memoria
cach del navegador al cargar la pgina.
Esto contribuye a evitar las demoras debidas a la descarga cuando llega el momento de que
aparezcan las imgenes.
Restaurar imagen intercambiada
La accin Restaurar imagen intercambiada restaura el ltimo conjunto de imgenes
intercambiadas a sus archivos de origen anteriores. Esta accin se aade automticamente siempre
que se adjunta la accin Intercambiar imagen a un objeto; si dej seleccionada la opcin Restaurar
al adjuntar Intercambiar imagen, no tendr que seleccionar manualmente la accin Restaurar
imagen intercambiada.
Validar formulario
La accin Validar formulario comprueba el contenido de los campos de texto especificados para
asegurarse de que el usuario ha introducido el tipo correcto de datos. Adjunte esta accin a
campos de texto individuales con el evento onBlur para validar los campos conforme el usuario
vaya rellenando el formulario, o adjntela al formulario con el evento onSubmit para evaluar
varios campos de texto cuando el usuario haga clic en el botn Enviar. Al adjuntar esta accin a un
formulario se evita que ste sea enviado al servidor si alguno de los campos de texto especificados
contiene datos no vlidos.
Para usar la accin Validar formulario:
1 Elija Insertar > Formulario, o haga clic en el botn Formulario de la barra Insertar para insertar
un formulario.
2 Elija Insertar > Objetos de formulario > Campo de texto, o haga clic en el botn Campo de texto
de la barra Insertar para insertar un campo de texto.
Repita este paso para insertar ms campos de texto.
Para validar campos individuales conforme el usuario va rellenndolos en el formulario,
seleccione un campo de texto y elija Ventana > Comportamientos.
Para validar mltiples campos cuando el usuario enva el formulario, haga clic en la etiqueta
<form> en el selector de etiquetas, situado en la esquina inferior izquierda de la ventana de
documento, y elija Ventana > Comportamientos.
4 Seleccione Validar formulario en el men emergente Acciones.
Si est validando campos individuales, seleccione el mismo campo que seleccion en la
ventana de documento en la lista de Campos con nombre.
Si est validando mltiples campos, seleccione un campo de texto en la lista de Campos con
nombre.
6 Seleccione la opcin Obligatorio si el campo debe contener algn dato.
7 Elija una de las siguientes opciones de Aceptar:
Use Cualquier cosa si el campo es obligatorio pero no tiene que contener ningn tipo de dato
determinado. (Si no est seleccionado Obligatorio, esta opcin carece de sentido; es lo mismo
que si la accin Validar formulario no se hubiera adjuntado al campo.)
Use Direccin de correo electrnico para comprobar si el campo contiene un smbolo arroba
(@).
Use Nmero para comprobar que el campo contiene solamente caracteres numricos.
Use Nmero del para comprobar que el campo contiene solamente caracteres numricos
dentro de un rango determinado.
8 Si est validando mltiples campos, repita los pasos 6 y 7 para cada uno de los campos que desee
validar.
Si est validando mltiples campos cuando el usuario enva el formulario, en el men
emergente Eventos aparecer automticamente el evento onSubmit.
10 Si est validando campos individuales, compruebe que el evento predeterminado sea onBlur u
onChange.
En caso de que no lo sea, seleccione onBlur o onChange en el men emergente Eventos.
Cualquiera de estos dos eventos desencadena la accin Validar formulario cuando el usuario
abandona el campo. La diferencia entre ellos estriba en que onBlur tiene lugar
independientemente de que el usuario haya escrito algo en el campo, mientras que onChange
slo tiene lugar si el usuario ha cambiado el contenido del campo. El evento onBlur es
preferible si ha configurado el campo como obligatorio.
PARTE V
Utilizacin del cdigo de las pginas
Utilice las herramientas avanzadas de codificacin de Macromedia Dreamweaver MX 2004 para
crear o modificar pginas.
Captulo 19, Configuracin del entorno de codificacin, en la pgina 413
Captulo 20, Codificacin en Dreamweaver, en la pgina 427
Captulo 21, Optimizacin y depuracin del cdigo, en la pgina 447
Captulo 22, Edicin de cdigo en la vista Diseo, en la pgina 455
P
A
R
T
E

V
413
CAPTULO 19
Configuracin del entorno de codificacin
Puede adaptar el entorno de codificacin de Macromedia Dreamweaver MX 2004 para ajustarlo a
su manera de trabajar. Por ejemplo, puede cambiar la visualizacin de los cdigos, configurar
distintos mtodos abreviados de teclado o importar y utilizar la biblioteca de etiquetas que desee.
Visualizacin del cdigo en la pgina 413
Utilizacin del espacio de trabajo orientado al codificador (slo en Windows) en
la pgina 414
Configuracin de las preferencias de visualizacin en la pgina 415
Configuracin de las preferencias de codificacin en la pgina 415
Personalizacin de los mtodos abreviados de teclado en la pgina 417
Cmo abrir archivos en la vista de cdigo de forma predeterminada en la pgina 417
Configuracin de las preferencias del validador en la pgina 418
Administracin de bibliotecas de etiquetas en la pgina 418
Importacin de etiquetas personalizadas a Dreamweaver en la pgina 422
Utilizacin de un editor de HTML externo con Dreamweaver en la pgina 424
Visualizacin del cdigo
Puede ver el cdigo fuente del documento actual de varias formas: mostrarlo en la ventana de
documento activando la vista Cdigo, dividir la ventana de documento para mostrar tanto la
pgina como el cdigo asociado o trabajar en el Inspector de cdigo, una ventana de codificacin
independiente. El inspector de cdigo funciona igual que la vista de cdigo; puede concebirlo
como una vista de cdigo separable para el documento actual.
Esta seccin contiene instrucciones para cambiar la forma de visualizacin de los cdigos.
Para ver los cdigos en la ventana de documento:
Para codificar y editar visualmente una pgina en la ventana de documento al mismo tiempo:
1 Seleccione Ver > Cdigo y diseo.
El cdigo aparecer en el panel superior y la pgina en el inferior.
414 Captulo 19: Configuracin del entorno de codificacin
2 Para mostrar la pgina en la parte superior, elija Ver > Vista de diseo encima.
3 Para ajustar el tamao de los paneles en la ventana de documento, arrastre la barra de separacin
hasta la posicin deseada.
La barra de separacin se encuentra entre los dos paneles.
La vista Cdigo se actualiza automticamente al realizar cambios en la vista Diseo. Sin
embargo, despus de realizar cambios en la vista de cdigo, deber actualizar manualmente el
documento en la vista de diseo; para ello haga clic en la vista de diseo o presione F5.
Para ver los cdigos en una ventana independiente:
Elija Ventana > Otros > Inspector de cdigo.
Utilizacin del espacio de trabajo orientado al codificador (slo
en Windows)
En Windows, puede utilizar un espacio de trabajo muy parecido al de Macromedia HomeSite,
pero con los grupos de paneles apilados en la parte izquierda de la ventana principal en lugar de en
la parte derecha. En este diseo del espacio de trabajo, de forma predeterminada el inspector de
propiedades est contrado y la ventana Documento aparecen en vista Cdigo. Para informacin
sobre la utilizacin de esta opcin, vase Seleccin del diseo del espacio de trabajo (slo en
Windows) en la pgina 59.
Temas relacionados
Cmo abrir archivos en la vista de cdigo de forma predeterminada en la pgina 417.
Barra de herramientas Documento Barra Insertar Panel Archivos
Grupos de paneles
Ventana de documento Inspector de propiedades
(contrado)
Selector de
etiquetas
Configuracin de las preferencias de codificacin 415
Configuracin de las preferencias de visualizacin
Puede establecer ajuste de texto, mostrar los nmeros de lnea del cdigo, resaltar el cdigo
HTML no vlido, establecer la aplicacin de color a la sintaxis de los elementos del cdigo y
establecer la aplicacin de sangra desde el men Ver > Opciones de vista de Cdigo.
Para establecer las opciones de la vista Cdigo y del Inspector de cdigo:
1 Visualice un documento en la vista de cdigo o en el inspector de cdigo.
2 Haga clic en el men Ver opciones, en la barra de herramientas situada en la parte superior de
la vista de cdigo o el inspector de cdigo.
Aparecer un men emergente con una marca de verificacin junto a cada opcin establecida.
3 Para activar o desactivar opciones, seleccinelas en el men.
Configuracin de las preferencias de codificacin
Puede personalizar el entorno de codificacin de Dreamweaver para adaptarlo a sus necesidades.
Para ello, configure las preferencias de formato de cdigo, de reescritura, de aplicacin de color,
etc.
Nota: para establecer preferencias avanzadas, utilice el Editor de la biblioteca de etiquetas (vase
Administracin de bibliotecas de etiquetas en la pgina 418).
Configuracin de preferencias de formato de cdigo
Puede cambiar la apariencia de los cdigos especificando preferencias de formato tales como la
sangra, la longitud de lnea y el uso de maysculas y minsculas en nombres de etiquetas y
atributos.
Observe que todas las preferencias salvo Anular may/min de slo afectan a documentos nuevos y
a adiciones nuevas a los documentos existentes. Es decir, cuando abra un documento HTML
creado previamente, estas opciones de formato no le afectarn. Para cambiar el formato de
documentos HTML existentes, utilice el comando Aplicar formato de origen. Para ms
informacin, consulte Aplicacin de nuevas preferencias de formato a documentos existentes en
la pgina 416.
Para establecer las preferencias de formato del cdigo:
2 Seleccione Formato de cdigo en la lista Categora de la izquierda.
Aparecen las preferencias de Formato de cdigo.
3 Ajuste los valores de configuracin que desee en el cuadro de dilogo.
Aplicacin de nuevas preferencias de formato a documentos existentes
Las opciones de formato de cdigo que especifique en las preferencias Formato de cdigo se
aplicarn automticamente slo a los documentos nuevos que cree posteriormente con
Dreamweaver. No obstante, puede aplicar nuevas preferencias de formato a los documentos
existentes.
Para aplicar nuevas preferencias de formato a un documento existente:
1 Abra el documento en Dreamweaver.
2 Elija Comandos > Aplicar formato de origen.
Configuracin de las preferencias de sugerencias para el cdigo
Las sugerencias para el cdigo permiten insertar fcilmente nombres de etiquetas, atributos y
valores mientras introduce los cdigos. Para ms informacin, consulte Utilizacin de
sugerencias para el cdigo en la pgina 436.
Sugerencia: aunque las sugerencias para el cdigo estn desactivadas, puede visualizar una
sugerencia emergente en la vista de cdigo presionando Control+Barra espaciadora.
Para establecer las preferencias de sugerencias para el cdigo:
2 Seleccione Sugerencias para el cdigo en la lista Categora de la izquierda.
Aparecen las preferencias de las sugerencias para el cdigo.
Temas relacionados
Utilizacin de sugerencias para el cdigo en la pgina 436
Configuracin de las preferencias de reescritura del cdigo
Al abrir un documento, Dreamweaver soluciona (o reescribe) diversos tipos de cdigo
tcnicamente ilegales, en funcin de las preferencias de reescritura de cdigo especificadas. Estas
preferencias no tienen ningn efecto cuando se edita cdigo HTML o scripts en la vista Cdigo.
Si desactiva las opciones de reescritura, Dreamweaver mostrar elementos de formato no vlidos
en la ventana de documento para el cdigo HTML que habra reescrito.
Para establecer las preferencias de reescritura del cdigo:
2 Seleccione Reescritura de cdigo en la lista Categora de la izquierda.
Aparecen las preferencias de Reescritura de cdigo.
Temas relacionados
Importacin de un archivo HTML de Microsoft Word en la pgina 78
Cmo abrir archivos en la vista de cdigo de forma predeterminada 417
Configuracin de las preferencias de colores de cdigo
Las preferencias de colores de cdigo sirven para especificar colores para las categoras generales de
etiquetas y elementos de cdigo, como por ejemplo las etiquetas relacionadas con formularios o
los identificadores de JavaScript. Para establecer las preferencias de colores de una etiqueta
determinada, edite la definicin de la etiqueta en el Editor de la biblioteca de etiquetas. Para ms
informacin, consulte Edicin de bibliotecas, etiquetas y atributos en la pgina 420.
Para establecer las preferencias de colores del cdigo:
2 Seleccione Colores de cdigo en la lista Categora de la izquierda.
Aparecen las preferencias de Colores de cdigo.
Temas relacionados
Personalizacin de las preferencias de colores de cdigo para una plantilla en la pgina 235
Personalizacin de los mtodos abreviados de teclado
En Dreamweaver puede utilizar los mtodos abreviados de teclado que desee. Si est
acostumbrado a utilizar mtodos abreviados de teclado especficos, por ejemplo Control+Intro
para aadir un salto de lnea, Control+G para ir a una posicin concreta del cdigo o Mays+F6
para validar un archivo, puede aadirlos a Dreamweaver mediante el editor de mtodos
abreviados de teclado. Para ms informacin, consulte Personalizacin de los mtodos abreviados
de teclado en la pgina 61.
Temas relacionados
Utilizacin de fragmentos de cdigo en la pgina 437
Cmo abrir archivos en la vista de cdigo de forma
predeterminada
Cuando abre un tipo de archivo que no suele contener HTML (por ejemplo, un archivo
JavaScript), ste se abre en la vista Cdigo (o en el Inspector de cdigo) en lugar de en la vista
Diseo. Puede especificar qu tipos de archivo desea abrir en la vista de cdigo.
Para establecer la vista predeterminada para archivos no HTML:
2 Seleccione Tipos de archivo/editores en la lista Categora de la izquierda.
Aparecen las preferencias de Tipos de archivo/editores.
3 En el cuadro de texto Abrir en vista de cdigo, aada la extensin de nombre de archivo del tipo
de archivo que desea abrir automticamente en la vista de cdigo.
Deje un espacio entre las extensiones de nombre de archivo. Puede aadir tantas extensiones
como desee.
Configuracin de las preferencias del validador
Puede utilizar el validador de Dreamweaver para localizar rpidamente errores en las etiquetas o la
sintaxis del cdigo (vase Validacin de etiquetas en la pgina 451). Puede especificar los
lenguajes basados en etiquetas que debe utilizar el validador durante la comprobacin, los
problemas especficos que debe comprobar y los tipos de errores sobre los que debe informar.
Para establecer las preferencias del validador:
2 Seleccione Validador en la lista Categora de la izquierda.
Aparecen las preferencias del Validador.
3 Seleccione las bibliotecas de etiquetas que desea utilizar para la validacin y establezca las
opciones para dichas bibliotecas.
Administracin de bibliotecas de etiquetas
En Dreamweaver, una biblioteca de etiquetas es una coleccin de etiquetas de un tipo
determinado que, adems, contiene informacin sobre la manera en que Dreamweaver debe
formatearlas. Las bibliotecas de etiquetas proporcionan la informacin sobre las etiquetas que
Dreamweaver utiliza para las sugerencias para el cdigo, la revisin del navegador de destino, el
selector de etiquetas y otras posibilidades de codificacin. El Editor de la biblioteca de etiquetas
permite aadir y eliminar bibliotecas de etiquetas, etiquetas y atributos, as como establecer las
propiedades de una biblioteca de etiquetas y editar etiquetas y atributos.
Esta seccin trata sobre los siguientes temas:Vase tambin Importacin de etiquetas
personalizadas a Dreamweaver en la pgina 422.
Apertura y cierre del Editor de la biblioteca de etiquetas.
El Editor de la biblioteca de etiquetas sirve para administrar bibliotecas de etiquetas.
Para abrir el Editor de la biblioteca de etiquetas:
Seleccione Edicin > Bibliotecas de etiquetas.
Administracin de bibliotecas de etiquetas 419
Aparece el Editor de la biblioteca de etiquetas. El contenido de este cuadro de dilogo vara en
funcin de la etiqueta seleccionada.
Para cerrar el Editor de la biblioteca de etiquetas y guardar los cambios:
Haga clic en Aceptar.
Para cerrar el Editor de la biblioteca de etiquetas sin guardar los cambios:
Haga clic en Cancelar.
Nota: al hacer clic en Cancelar, se descartarn todos los cambios realizados en el Editor de la
biblioteca de etiquetas. Las etiquetas o bibliotecas de etiquetas que se hayan eliminado, se
restaurarn.
Adicin de bibliotecas, etiquetas y atributos
El Editor de la biblioteca de etiquetas sirve para aadir bibliotecas de etiquetas, etiquetas y
atributos a las bibliotecas de etiquetas de Dreamweaver.
Nota: para importar una etiqueta, vase Importacin de etiquetas personalizadas a Dreamweaver
en la pgina 422.
Para aadir una biblioteca de etiquetas:
1 En el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas), haga clic en el
botn de signo ms (+) y elija Nueva biblioteca de etiquetas.
Aparecer el cuadro de dilogo Nueva biblioteca de etiquetas.
2 En el cuadro de texto Nombre de la biblioteca, escriba un nombre (por ejemplo, Etiquetas
varias).
Para aadir etiquetas a una biblioteca de etiquetas:
botn de signo ms (+) y elija Nuevas etiquetas.
Aparecer el cuadro de dilogo Nuevas etiquetas.
Para aadir uno o varios atributos a una etiqueta:
botn de signo ms (+) y elija Nuevos atributos.
Aparecer el cuadro de dilogo Nuevos atributos.
Temas relacionados
Eliminacin de bibliotecas, etiquetas y atributos en la pgina 422
Edicin de bibliotecas, etiquetas y atributos
El Editor de la biblioteca de etiquetas sirve para establecer las propiedades de una biblioteca de
etiquetas y editar las etiquetas y atributos de sta, tanto los atributos y sus valores como su
formato (lo que facilita su identificacin en el cdigo).
Para establecer las propiedades de una biblioteca de etiquetas:
1 En el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas), seleccione una
biblioteca de etiquetas (no una etiqueta) en la lista de etiquetas.
Nota: las propiedades de las bibliotecas de etiquetas slo aparecen cuando hay una biblioteca de
etiquetas seleccionada. Las bibliotecas de etiquetas se representan mediante las carpetas de
nivel superior de la lista de etiquetas. Por ejemplo, la carpeta Etiquetas HTML representa una
biblioteca de etiquetas, mientras que la carpeta abbr de la carpeta Etiquetas HTML representa
una etiqueta.
2 En la lista Utilizado en, seleccione todos los tipos de documento que deban utilizar dicha
biblioteca de etiquetas.
En funcin de los tipos de documento que seleccione en la lista se determinar cules de ellos
proporcionan sugerencias para el cdigo de la biblioteca de etiquetas seleccionada. Por ejemplo,
si para una biblioteca de etiquetas determinada no se selecciona la opcin HTML, las
sugerencias para el cdigo de dicha biblioteca de etiquetas no aparecern en los archivos
HTML.
3 Si las etiquetas de la biblioteca de etiquetas necesitan un prefijo, introdzcalo en el cuadro de
texto Prefijo de etiqueta.
Nota: para identificar que una etiqueta del cdigo forma parte de una biblioteca de etiquetas
determinada, se utiliza un prefijo. Algunas bibliotecas de etiquetas no utilizan prefijos.
Administracin de bibliotecas de etiquetas 421
4 Cuando haya terminado de realizar cambios en el Editor de la biblioteca de etiquetas, haga clic
en Aceptar.
Para editar una etiqueta de una biblioteca de etiquetas:
1 En el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas), expanda una
biblioteca de etiquetas en la lista de etiquetas y seleccione una etiqueta.
2 Establezca las siguientes opciones de Formato de etiqueta:
Saltos de lnea especifica dnde inserta Dreamweaver los saltos de lnea de una etiqueta.
Contenido especifica cmo inserta Dreamweaver el contenido de una etiqueta; es decir, si
aplica en el contenido el salto de lnea, el formato y las reglas de sangra.
Mayscula/minscula especifica si una etiqueta debe aparecer en maysculas o en minsculas.
Elija una de las siguientes opciones: Predeterminado, Minsculas, Maysculas o Combinacin
de maysculas/minsculas. Si elige Combinacin de maysculas/minsculas, aparecer el
cuadro de dilogo Combinacin de maysculas/minsculas en el nombre de la etiqueta.
Escriba la etiqueta con el tipo de letra que Dreamweaver vaya a utilizar al insertarlo (por
ejemplo, getProperty) y haga clic en Aceptar.
Establecer valor predeterminado establece si todas las etiquetas deben aparecer en
maysculas o minsculas de forma predeterminada. En el cuadro de dilogo Maysculas /
minsculas de etiqueta predeterminada que aparece, seleccione <MAYSCULAS> o
<minsculas> y haga clic en Aceptar.
Sugerencia: si lo desea, puede establecer que el valor predeterminado sea minsculas para
ajustarse a las normas XML y XHTML.
Para editar un atributo de una etiqueta:
1 En el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas), expanda una
biblioteca de etiquetas en el cuadro Etiquetas, expanda una etiqueta y seleccione un atributo.
2 En el men emergente Maysculas/minsculas de atributo, elija Predeterminado, Minsculas,
Maysculas o Combinacin de maysculas/minsculas.
Si elige Combinacin de maysculas/minsculas, aparecer el cuadro de dilogo Combinacin
de maysculas/minsculas en el nombre del atributo. Escriba el atributo con el tipo de letra
que Dreamweaver vaya a utilizar al insertarlo (por ejemplo, onClick) y haga clic en Aceptar.
Haga clic en el vnculo Establecer valor predeterminado para establecer que todos los nombres
de atributo vayan en maysculas o minsculas de forma predeterminada.
3 En el men emergente Tipo de atributo, seleccione el tipo de atributo.
Si elige Enumerado(s), introduzca los valores admitidos para el atributo en el cuadro de texto
Valores. Separe los valores por comas, no con espacios. Por ejemplo, los valores enumerados del
atributo showborder de la etiqueta cfchart figuran como yes,no.
Temas relacionados
Adicin de bibliotecas, etiquetas y atributos en la pgina 419
Eliminacin de bibliotecas, etiquetas y atributos
El Editor de la biblioteca de etiquetas sirve para eliminar bibliotecas de etiquetas, etiquetas y
atributos.
Para eliminar una biblioteca, etiqueta o atributo:
1 En el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas), seleccione una
biblioteca de etiquetas, una etiqueta o un atributo en el cuadro Etiquetas.
3 Si se le solicita que confirme la eliminacin, haga clic en Aceptar para eliminar el elemento de
forma permanente.
Se eliminar el elemento del cuadro Etiquetas.
4 Haga clic en Aceptar para cerrar el Editor de la biblioteca de etiquetas y completar el proceso de
eliminacin.
Temas relacionados
Adicin de bibliotecas, etiquetas y atributos en la pgina 419
Edicin de bibliotecas, etiquetas y atributos en la pgina 420
Importacin de etiquetas personalizadas a Dreamweaver
Puede importar etiquetas personalizadas a Dreamweaver para que formen parte del entorno de
creacin. Por ejemplo, al empezar a escribir una etiqueta personalizada importada en la vista
Cdigo, aparece un men de sugerencias para el cdigo en el que se enumeran los atributos de la
etiqueta y en el que podr seleccionar uno de ellos.
Importacin de etiquetas de archivos XML
Puede importar etiquetas de un archivo XML DTD (Definicin de tipo de documento,
Document Type Definition) o de un esquema.
Para importar etiquetas de un archivo XML DTD o de esquema:
1 Abra el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas).
2 Haga clic en el botn de signo ms (+) y seleccione Esquema DTD > Importar XML DTD o
archivo de esquema.
3 Introduzca el nombre de archivo o el URL del archivo DTD o de esquema.
4 Introduzca el prefijo que se utilizar con las etiquetas.
Nota: para identificar que una etiqueta del cdigo forma parte de una biblioteca de etiquetas
determinada, se utiliza un prefijo. Algunas bibliotecas de etiquetas no utilizan prefijos.
Importacin de etiquetas personalizadas a Dreamweaver 423
Importacin de etiquetas ASP.NET personalizadas
Puede importar etiquetas ASP.NET personalizadas en Dreamweaver.
Antes de comenzar, asegrese de que la etiqueta personalizada est instalada en el servidor de
prueba definido en el cuadro de dilogo Definicin del sitio (vase Especificacin de dnde
pueden procesarse las pginas dinmicas en la pgina 474). Las etiquetas compiladas (archivos
.dll) deben colocarse en la carpeta bin del directorio raz del sitio. Las etiquetas no compiladas
(archivos .ascx) pueden residir en cualquier directorio virtual o subdirectorio del servidor. Para
ms informacin, consulte la documentacin de Microsoft ASP.NET.
Para importar etiquetas personalizadas ASP.NET en Dreamweaver:
1 Abra una pgina ASP.NET en Dreamweaver.
3 Haga clic en el botn de signo ms (+) y siga uno de estos procedimientos:
Para importar todas las etiquetas ASP.NET personalizadas del servidor de aplicaciones, elija
ASP.NET > Importar todas las etiquetas ASP.NET personalizadas.
Para importar slo algunas de las etiquetas personalizadas del servidor de aplicaciones, elija
ASP.NET > Importar las etiquetas ASP.NET personalizadas seleccionadas.
Aparecer el cuadro de dilogo Importar las etiquetas ASPNet personalizadas seleccionadas,
mostrando todas las etiquetas ASPNet personalizadas instaladas en el servidor de aplicaciones.
Haga clic en las etiquetas de la lista mientras presiona la tecla Control (Windows) o Comando
(Macintosh) y, a continuacin, haga clic en Aceptar.
Importacin de etiquetas JSP de un archivo
Puede importar una biblioteca de etiquetas JSP en Dreamweaver desde varios tipos de archivo.
Para importar una biblioteca de etiquetas JSP en Dreamweaver:
1 Abra una pgina JSP en Dreamweaver.
3 Haga clic en el botn de signo ms (+) y elija JSP > Importar de archivo (*.tld, *.jar, *.zip).
4 Introduzca un nombre de archivo, un URI y un prefijo.
Importacin de etiquetas JSP de un servidor (web.xml)
Puede importar una biblioteca de etiquetas JSP en Dreamweaver desde un archivo web.xml de un
servidor JSP.
Para importar etiquetas JSP de un servidor:
3 Haga clic en el botn de signo ms (+) y elija JSP > Importar del servidor (web.xml).
Aparecer el cuadro de dilogo Importar del servidor (web.xml).
4 Introduzca un nombre de archivo y un URI.
Importacin de etiquetas JRun
Si utiliza Macromedia JRun, puede importar etiquetas JRun en Dreamweaver.
Para importar etiquetas JRun en Dreamweaver:
3 En el Editor de la biblioteca de etiquetas, haga clic en el botn de signo ms (+) y elija JSP >
Importar etiquetas de JRun Server de la carpeta.
4 Introduzca un nombre de carpeta, un URI y un prefijo.
Utilizacin de un editor de HTML externo con Dreamweaver
Puede iniciar un editor de texto o de HTML externo desde Dreamweaver para editar el cdigo
fuente del documento actual y despus volver a Dreamweaver para continuar realizando la edicin
de forma grfica. Dreamweaver detecta los cambios guardados externamente en el documento y
solicita que vuelva a cargar el documento al regresar.
Puede utilizar los siguientes editores de HTML integrados: Macromedia HomeSite (slo
Windows) o BBEdit (slo Macintosh). Tambin puede utilizar cualquier otro editor de texto,
como por ejemplo Notepad, WordPad, TextPad, TextEdit, SimpleText, vi o emacs.
Utilizacin de un editor de HTML integrado
Al instalar Dreamweaver, puede instalar HomeSite en Windows o una versin de prueba de
BBEdit en Macintosh. Dreamweaver se integra perfectamente con ambos productos.
Esto permite editar un documento tanto en Dreamweaver como en HomeSite/BBEdit, cambiando
de una aplicacin a otra, y el documento se mantiene sincronizado automticamente en ambas
aplicaciones. Adems, ambas aplicaciones realizan un seguimiento de la seleccin actual. Por ejemplo,
si selecciona texto en Dreamweaver y cambia a BBEdit, en BBEdit se seleccionar el mismo elemento.
Desde Dreamweaver puede abrir otros editores externos (aparte de HomeSite o BBEdit) pero el
documento no se mantendr sincronizado en ambas aplicaciones, como ocurre con HomeSite o
BBEdit. Cuando haya terminado de realizar cambios en un editor externo distinto de HomeSite o
BBEdit, deber actualizar manualmente el documento en Dreamweaver.
Utilizacin de HomeSite (slo Windows)
No es necesario activar la integracin con HomeSite: se integra automticamente al instalar ambas
aplicaciones.
Para utilizar HomeSite:
1 Seleccione Edicin > Editar con HomeSite.
2 Edite el documento en HomeSite y guarde los cambios.
3 Para regresar a Dreamweaver, haga clic en Dreamweaver en la barra de herramientas del editor.
Utilizacin de un editor de HTML externo con Dreamweaver 425
Utilizacin de BBEdit (slo Macintosh)
Si prefiere no utilizar BBEdit, puede desactivar la integracin con BBEdit. Si se desactiva la
integracin con BBEdit, no se realizar un seguimiento de las selecciones entre Dreamweaver y
BBEdit. No obstante, la edicin en Dreamweaver puede ser ms rpida si se desactiva la
integracin con BBEdit.
Para utilizar BBEdit con Dreamweaver:
1 Seleccione Edicin > Editar con BBEdit.
2 Edite el documento en BBEdit.
3 Haga clic en el botn Dreamweaver de la paleta Herramientas HTML de BBEdit para regresar
a Dreamweaver.
Para desactivar la integracin con BBEdit:
1 Seleccione Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X), y elija Tipos de
archivo/editores.
2 Desactive Activar integracin con BBEdit y haga clic en Aceptar.
Configuracin de las preferencias del tipo de archivo y el editor externo
Puede especificar la aplicacin externa que desea utilizar para editar cada una de las extensiones de
nombre de archivo.
Para seleccionar un editor de HTML externo:
2 Seleccione Tipos de archivo/editores en la lista Categora de la izquierda.
Aparecen las preferencias de Tipos de archivo/editores.
Para iniciar un editor de HTML externo:
Elija Edicin > Editar con [nombre del editor].
Temas relacionados
Cmo abrir archivos en la vista de cdigo de forma predeterminada en la pgina 417
Inicio de un editor externo de archivos multimedia en la pgina 369
Utilizacin de un editor de HTML integrado en la pgina 424
427
CAPTULO 20
Codificacin en Dreamweaver
Macromedia Dreamweaver MX 2004 ofrece un entorno de codificacin completo diseado para
cualquier tipo de desarrollo Web, desde la creacin de pginas HTML sencillas hasta el diseo,
comprobacin e implementacin de aplicaciones Web complejas.
Nota: para informacin sobre la migracin de Macromedia HomeSite a Dreamweaver, visite el
Centro de soporte de Dreamweaver en www.macromedia.com/go/migrate_from_homesite.
.Este captulo contiene los siguientes temas:
Codificacin en Dreamweaver en la pgina 428
Escritura y edicin de cdigo en la pgina 436
Bsqueda y reemplazo de etiquetas y atributos en la pgina 441
Cambios rpidos en una seleccin de cdigo en la pgina 443
Utilizacin del material de consulta para lenguajes en la pgina 444
Impresin del cdigo en la pgina 445
Temas relacionados
Configuracin del entorno de codificacin en la pgina 413
Optimizacin y depuracin del cdigo en la pgina 447
Edicin de cdigo en la vista Diseo en la pgina 455
428 Captulo 20: Codificacin en Dreamweaver
Codificacin en Dreamweaver
El entorno de codificacin en Dreamweaver permite escribir, editar y comprobar el cdigo (en
diversos lenguajes) de sus pginas. Dreamweaver no cambia el cdigo escrito por el usuario a
menos que active opciones especficas de reescritura de determinados tipos de cdigo que no sean
vlidos.
Temas relacionados
Visualizacin del cdigo en la pgina 413
Lenguajes compatibles
Adems de las posibilidades de edicin de texto, Dreamweaver proporciona diversas funciones,
como por ejemplo sugerencias para el cdigo, a fin de ayudarle a codificar en determinados
lenguajes. Estos lenguajes son:
HTML
XHTML
CSS
JavaScript
ColdFusion Markup Language (CFML)
Visual Basic (para ASP y ASP.NET)
C# (para ASP.NET)
JSP
PHP
Otros lenguajes, como Perl, no son compatibles con las funciones de codificacin especficas del
lenguaje de Dreamweaver; puede crear y editar archivos en Perl mediante Dreamweaver, pero las
sugerencias para el cdigo (por ejemplo) no son aplicables a ese lenguaje.
Temas relacionados
Modificacin automtica del cdigo en Dreamweaver en la pgina 429
Utilizacin de sugerencias para el cdigo en la pgina 436
Reparacin de formatos no vlidos
Si el documento contiene cdigo que no es vlido, Dreamweaver muestra dicho cdigo en la vista
Diseo y, opcionalmente, lo resalta en la vista Cdigo. Si selecciona el cdigo en alguna de las
vistas, el inspector de propiedades muestra informacin sobre por qu no es vlido y cmo se
puede arreglar.
Puede especificar preferencias en Dreamweaver para la reescritura automtica de diversos tipos de
cdigo no vlido al abrir un documento.
Temas relacionados
Codificacin en Dreamweaver 429
Modificacin automtica del cdigo en Dreamweaver
Puede establecer opciones que indiquen a Dreamweaver que limpie automticamente el cdigo
escrito por el usuario segn los criterios que se hayan especificado. No obstante, Dreamweaver
nunca reescribe el cdigo a menos que se hayan activado las opciones de reescritura de cdigo o
que realice una accin que cambie el cdigo. Por ejemplo, Dreamweaver no modifica los espacios
en blanco ni el uso de maysculas o minsculas en los atributos a menos que utilice el comando
Aplicar formato de origen.
Algunas de estas opciones de reescritura de cdigo estn activadas de forma predeterminada. Para
informacin sobre cmo desactivar estas opciones, o cmo activar otras, vase Configuracin de
las preferencias de reescritura del cdigo en la pgina 416.
Roundtrip HTML en Dreamweaver permite pasar los documentos de un editor de HTML
basado en texto a Dreamweaver y a la inversa sin que se vean prcticamente afectados el contenido
y la estructura del cdigo fuente HTML original del documento. Entre dichos recursos figuran los
siguientes:
Dreamweaver permite iniciar un editor de texto de otro proveedor para editar el documento
actual. Para ms informacin, consulte Utilizacin de un editor de HTML externo con
De forma predeterminada, Dreamweaver no realiza cambios en cdigo creado o editado en
otros editores de HTML, aunque el cdigo no sea vlido, a menos que se activen las opciones
de reescritura de cdigo.
Dreamweaver no cambia las etiquetas que no reconoce (incluidas las etiquetas XML), ya que
carece de criterios para juzgar cules son vlidas o no. Si una etiqueta no reconocida se
superpone a otra (por ejemplo, <MyNewTag><em>text</MyNewTag></em>), Dreamweaver la
marca como un error, pero no reescribe el cdigo.
Opcionalmente, puede establecer que Dreamweaver resalte en amarillo los cdigos HTML no
vlidos en la vista Cdigo. Al seleccionar una seccin resaltada, el inspector de propiedades
muestra informacin sobre cmo corregir el error.
Temas relacionados
Cdigo de comportamiento de servidor en la pgina 435
Cdigo XHTML generado por Dreamweaver
Dreamweaver genera cdigo XHTML y limpia el cdigo existente, de forma que cumpla la
mayora de los requisitos del lenguaje XHTML. Dreamweaver tambin proporciona las
herramientas que necesita para cumplir los requisitos XHTML restantes.
Nota: algunos requisitos descritos en esta seccin tambin son obligatorios en distintas versiones de
HTML.
En la siguiente tabla se describen los requisitos XHTML que Dreamweaver cumple
automticamente.
Requisito XHTML Acciones que Dreamweaver realiza para
cumplir este requisito
Cuando la codificacin de caracteres de un
documento no es UTF-8 predeterminado, el
documento deber incluir una declaracin XML.
Aade una declaracin XML a un documento
XHTML y especifica la codificacin, por ejemplo:
<?xml version="1.0" encoding="iso-8859-1"?>
Antes del elemento raz del documento, debe
haber una declaracin DOCTYPE que haga
referencia a uno de los tres archivos DTD
(Definicin de tipo de documento, Document
Type Definition) para XHTML: strict (estricta),
transitional (transitoria) o frameset (conjunto de
marcos).
Aade una declaracin DOCTYPE de XHTML a
un documento XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
O, si el documento XHTML tiene un conjunto de
marcos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-frameset.dtd">
El elemento raz del documento debe ser html, y
el elemento html debe designar el atributo
namespace de XHTML.
Aade el atributo namespace al elemento html de
la siguiente forma:
<html xmlns="http://www.w3.org/1999/xhtml">
Un documento estndar debe incluir los
elementos estructurales head, title y body. Un
documento de conjunto de marcos debe incluir
los elementos estructurales head, title y
frameset.
En un documento estndar, incluye los
elementos head, title y body. En un documento
de conjunto de marcos, incluye los elementos
head, title y frameset.
Todos los elementos de un documento deben
estar correctamente anidados.
<p>This is a <i>bad example.</p></i>
<p>This is a <i>good example.</i></p>
Genera cdigo correctamente anidado y, cuando
limpia el XHTML, corrige la anidacin de
cualquier cdigo no generado por Dreamweaver.
Todos los nombres de elementos y atributos
deben estar en minsculas.
Obliga a utilizar las minsculas en los nombres de
elementos y atributos HTML del cdigo XHTML
que genera y cuando limpia el XHTML, al margen
de las preferencias especificadas para las
etiquetas y atributos.
Todos los elementos deben incluir una etiqueta
de cierre, salvo que se especifique EMPTY
(vaco) en la DTD.
Inserta etiquetas de cierre en el cdigo que
genera, y cuando limpia el XHTML.
Los elementos vacos deben incluir una etiqueta
de cierre o la etiqueta de apertura debe terminar
con />. Por ejemplo, <br> no es vlido, la forma
correcta es <br></br> o <br/>. Los elementos
vacos son los siguientes: area, base, basefont,
br, col, frame, hr, img, input, isindex, link, meta y
param.
Y para la compatibilidad con navegadores que no
admiten XML, debe haber un espacio delante de
/> (por ejemplo, <br />, no <br/>).
Inserta elementos vacos con un espacio delante
de la barra diagonal de cierre en el cdigo que
genera, y cuando limpia el XHTML.
Los atributos no pueden abreviarse; por ejemplo,
<td nowrap> no es vlido; la forma correcta es <td
nowrap="nowrap">.
Esto afecta a los siguientes atributos: checked,
compact, declare, defer, disabled, ismap,
multiple, noresize, noshade, nowrap, readonly y
selected.
Inserta pares completos atributo-valor en el
cdigo que genera, y cuando limpia el XHTML.
Nota: si un navegador HTML no admite HTML 4,
podra no interpretar estos atributos booleanos
cuando aparecen en su forma completa.
Todos los valores de atributo deben estar entre
comillas.
Coloca comillas en los valores de atributo en el
cdigo que genera y cuando limpia el XHTML.
Los siguientes elementos deben incluir un
atributo id y un atributo name: a, applet, form,
frame, iframe, img y map. Por ejemplo, <a
name="intro">Introduction</a> no es vlido; la
forma correcta es
<a id="intro">Introduction</a> o
<a id="section1" name="intro">
Introduction</a>.
Establece el mismo valor para los atributos name e
id, siempre que el atributo name est definido por
un inspector de propiedades, en el cdigo que
genera Dreamweaver y cuando limpia el XHTML.
Para atributos con valores type enumerados,
stos deben aparecer en minsculas.
Un valor type enumerado forma parte de una lista
especificada de valores permitidos; por ejemplo,
los valores posibles del atributo align son:
center, justify, left y right.
Obliga a utilizar minsculas en los valores type
enumerados del cdigo que genera, y cuando
limpia el XHTML.
Todos los elementos script y style deben incluir
un atributo type.
El atributo type del elemento script es
obligatorio desde HTML 4, cuando el atributo
language dej de utilizarse.
Establece los atributos type y language de los
elementos script, y el atributo type de los
elementos style, en el cdigo que genera y
cuando limpia el XHTML.
Todos los elementos img y area deben incluir un
atributo alt.
Establece estos atributos en el cdigo que
genera y, cuando limpia el XHTML, informa de
los atributos alt que faltan.
Requisito XHTML Acciones que Dreamweaver realiza para
cumplir este requisito
Server-side includes
Un server-side include es un archivo que el servidor incorpora en el documento cuando un
navegador solicita el documento del servidor.
Cuando el navegador de un visitante solicita el documento que contiene la instruccin del
include, el servidor la procesa y crea un documento nuevo en el que la instruccin del include se
sustituye por el contenido del archivo incluido. A continuacin, el servidor enva este nuevo
documento al navegador del visitante. Sin embargo, al abrir un documento local directamente en
un navegador, no hay ningn servidor que procese las instrucciones del include en dicho
documento, por lo que el navegador abre el documento sin procesar esas instrucciones y el archivo
que supuestamente debera ser incluido no aparece en el navegador. Por eso, puede resultar difcil,
sin usar Dreamweaver, mirar archivos locales y verlos tal como los vern los visitantes una vez que
se hayan colocado en el servidor.
Con Dreamweaver se puede obtener una vista previa de los documentos tal como aparecern en el
servidor, tanto en la vista Diseo como al realizar una vista previa en un navegador.
Al colocar un server-side include en un documento se inserta una referencia a un archivo externo
y no se inserta el contenido del archivo especificado en el documento actual. Dreamweaver
muestra el contenido del archivo externo en la vista Diseo, lo cual facilita el diseo de pginas.
No puede editar el archivo incluido directamente en un documento. Para editar el contenido de
un server-side include, deber editar directamente el archivo que desea incluir. Los cambios
realizados en el archivo externo se reflejarn automticamente en todos los documentos que lo
incluyan.
Hay dos tipos de server-side include: Virtual y Archivo. Seleccione el ms adecuado para el tipo de
servidor Web que utilice:
Si se trata de un servidor Web Apache, elija el tipo Virtual. sta es la opcin predeterminada en
Dreamweaver. En Apache, Virtual funciona en todos los casos, mientras que Archivo slo
funciona en algunos casos.
Si su servidor es Microsoft Internet Information Server (IIS), elija Archivo. (Virtual funciona
con IIS slo en ciertos casos.)
Nota: lamentablemente, IIS no le permitir incluir un archivo en una carpeta de una jerarqua
superior a la de la carpeta actual, salvo en el caso de que se haya instalado un software especial en
el servidor. Si es necesario incluir un archivo desde una carpeta de una jerarqua superior en un
servidor IIS, pregunte al administrador del sistema si est instalado el software necesario.
Para otros tipos de servidores, o si desconoce el tipo de servidor que est usando, pregunte al
administrador del sistema la opcin que debe emplear.
Algunos servidores estn configurados de manera que examinan todos los archivos para ver si
contienen server-side includes; otros servidores estn configurados para examinar solamente los
archivos con una extensin determinada, como .shtml, .shtm o .inc. Si un server-side include no
le funciona, pregunte al administrador del sistema si es necesario utilizar una extensin concreta
en el nombre del archivo que usa el server-side include. (Por ejemplo, si el archivo se llama
canoe.html, puede ser necesario cambiarle el nombre por canoe.shtml.) Si desea que los archivos
conserven las extensiones .html o .htm, solicite al administrador del sistema que configure el
servidor para examinar todos los archivos (no slo los archivos con extensiones determinadas) para
comprobar si contienen server-side includes. Sin embargo, el anlisis de un archivo para
comprobar si contiene server-side includes implica un poco ms de tiempo de proceso, por lo que
las pginas que el servidor analiza tardan un poco ms en estar disponibles que las otras; por ello,
algunos administradores de sistemas no proporcionarn la opcin de analizar todos los archivos.
Temas relacionados
Insercin de un server-side include en la pgina 462
Edicin del contenido de un server-side include en la pgina 462
Expresiones regulares
Las expresiones regulares son modelos que describen las combinaciones de caracteres en el texto.
Utilcelas en las bsquedas para describir conceptos como frases que comiencen por El y
valores de atributo que contengan un nmero. Para ms informacin sobre las bsquedas,
consulte Bsqueda y reemplazo de etiquetas y atributos en la pgina 441.
La tabla siguiente contiene los caracteres especiales de las expresiones regulares, su significado y
ejemplos de uso. Para buscar texto que contenga uno de los caracteres especiales de la tabla, anule
el valor del carcter colocando una barra invertida delante de l. Por ejemplo, para buscar el
asterisco en la frase some conditions apply*, el modelo de bsqueda deber ser el siguiente:
apply\*. Si no anula el valor del asterisco, encontrar todas las apariciones de apply (as como de
appl, applyy y applyyy), no slo las que van seguidas de asterisco.
Carcter Texto buscado Ejemplo
^ Principio de entrada o lnea. ^T encontrar T en This good earth,
pero no en Uncle Toms Cabin
$ Fin de entrada o lnea. h$ encontrar h en teach, pero no en
teacher
* El carcter anterior cero o ms veces. um* encontrar um en rum, umm
en yummy y u en huge
+ El carcter anterior una o ms veces. um+ encontrar um en rum y umm
en yummy, pero no en huge
? El carcter anterior una vez como
mximo (es decir, indica que el carcter
anterior es opcional).
st?on encontrar son en Johnson y
ston en Johnston, pero no en
Appleton o tension
. Cualquier carcter individual, salvo el de
salto de lnea.
.an encontrar ran y can en la frase
bran muffins can be tasty
x|y x o y. FF0000|0000FF encontrar FF0000
en bgcolor=#FF0000 y 0000FF en
font color=#0000FF
{n} Exactamente n apariciones del carcter
anterior.
o{2} encontrar oo en loom y las
dos primeras oes de mooooo, pero no
money
{n,m} Como mnimo n y como mximo m
apariciones del carcter anterior.
F{2,4} encontrar FF en #FF0000
y las cuatro primeras efes de #FFFFFF
[abc] Cualquiera de los caracteres entre
parntesis angulares. Especifique un
rango de caracteres con un guin (por
ejemplo, [a-f] es equivalente a
[abcdef]).
[e-g] encontrar e en bed, f en
folly, y g en guard
[âbc] Cualquier carcter que no est entre
parntesis angulares. Especifique un
rango de caracteres con un guin (por
ejemplo, [â-f] es equivalente a
[âbcdef]).
[âeiou] encontrar inicialmente r en
orange, b en book y k en eek!
\b Lmite de palabra (como un espacio o
un retorno de carro).
\bb encontrar b en book, pero no
en goober ni snob
\B Cualquiera que no sea un lmite de
palabra.
\Bb encontrar b en goober, pero no
en book
\d Cualquier carcter de dgito.
Equivalente a [0-9].
\d encontrar 3 en C3PO y 2 en
apartment 2G
\D Cualquier carcter que no sea de dgito.
Equivalente a [^0-9].
\D encontrar S en 900S y Q en
Q45
\f Salto de pgina.
\n Salto de lnea.
\r Retorno de carro.
\s Cualquier carcter individual de espacio
en blanco (espacios, tabulaciones,
saltos de pgina o saltos de lnea).
\sbook encontrar book en blue
book, pero no en notebook
\S Cualquier carcter individual que no sea
un espacio en blanco.
\Sbook encontrar book en
notebook, pero no en blue book
\t Tabulacin.
\w Cualquier carcter alfanumrico,
incluido el de subrayado. Equivalente a
[A-Za-z0-9_].
b\w* encontrar barking en the
barking dog y big y black en the
big black dog
Utilice parntesis para destacar agrupaciones dentro de la expresin regular a las que podr hacer
referencia posteriormente. A continuacin, utilice $1, $2, $3, etc. en el campo Reemplazar con
para hacer referencia a la primera, segunda, tercera y posteriores agrupaciones entre parntesis.
Nota: en el campo Buscar, para hacer referencia a una agrupacin entre parntesis anterior en la
expresin regular, utilice \1, \2, \3, etc. en lugar de $1, $2, $3.
Por ejemplo, si busca (\d+)\/(\d+)\/(\d+) y lo reemplaza por $2/$1/$3, cambiar el da y el mes de
una fecha separada por barras y, de esta manera, el formato de fechas americano se convertir en
formato europeo.
Temas relacionados
Bsqueda de etiquetas, atributos o texto contenidos en etiquetas especficas en la pgina 441
Almacenamiento de modelos de bsqueda en la pgina 442
Cdigo de comportamiento de servidor
Cuando desarrolla una pgina dinmica o elige un comportamiento del servidor en el panel
Comportamientos del servidor, Dreamweaver inserta uno o varios bloques de cdigo en la pgina
para que funcione el comportamiento del servidor.
Si cambia manualmente el cdigo dentro de un bloque de cdigo, ya no podr utilizar paneles
tales como Vinculaciones o Comportamientos del servidor para editar el comportamiento del
servidor. Dreamweaver busca patrones especficos en el cdigo de la pgina para detectar
comportamientos del servidor y mostrarlos en el panel Comportamientos del servidor. Si cambia
el cdigo de un bloque de cdigo, Dreamweaver ya no puede detectar el comportamiento del
servidor y mostrarlo en el panel Comportamientos del servidor. Sin embargo, el comportamiento
del servidor se encuentra an en la pgina y podr editarlo en el entorno de codificacin de
Dreamweaver.
\W Cualquier carcter que no sea
alfanumrico. Equivalente a [Â-Za-z0-
9_].
\W encontrar & en Jake&Mattie y
% en 100%
Control+Intro o
Mays+Intro
(Windows), o
Control+Retorno
o
Mays+Retorno
o
Comando+Retor
no (Macintosh)
Carcter de retorno. Desactive la
opcin Omitir espacio en blanco
cuando realice esta bsqueda si no
utiliza expresiones regulares. Observe
que este mtodo busca un determinado
carcter, no un salto de lnea. Por
ejemplo, no busca etiquetas <br> o <p>.
Los caracteres de retorno aparecen
como espacios en la vista Diseo, no
como saltos de lnea.
Escritura y edicin de cdigo
Dreamweaver incluye varias funciones para ayudarle a escribir y editar cdigo de forma eficaz.
Utilizacin de sugerencias para el cdigo
Esta funcin le ayuda a insertar y editar cdigo rpidamente y sin errores. Cuando escribe
determinados caracteres en la vista Cdigo, como las primeras letras de una etiqueta o atributo o
nombre de propiedades CSS, se muestra una lista en la que se sugieren opciones para completar la
entrada. Puede utilizar esta funcin para insertar o editar cdigo, o simplemente para ver los
atributos disponibles para una etiqueta, los parmetros disponibles para una funcin o los
mtodos disponibles para un objeto.
Las sugerencias para el cdigo estn disponibles para diversos tipos de cdigo. Si escribe un
determinado carcter que indica el principio de una parte de cdigo, se muestra la lista
correspondiente de elementos. Por ejemplo, si desea ver una lista de sugerencias para cdigo de
nombres de etiquetas HTML, teclee un parntesis angular de apertura (<).
Sugerencia: para obtener los mejores resultados, especialmente cuando se utilizan sugerencias
para cdigo de funciones y objetos, establezca la opcin Demora, en el cuadro de dilogo de
preferencias de sugerencias para cdigo, con una demora de 0 segundos. Para ms informacin,
consulte Configuracin de las preferencias de sugerencias para el cdigo en la pgina 416.
La lista de sugerencias para el cdigo desaparece cuando se presiona Retroceso (Windows) o
Eliminar (Macintosh).
Para ver un men de sugerencias para el cdigo si no aparece automticamente:
Presione Control+Barra espaciadora.
Para insertar formato u otro cdigo en la vista Cdigo mediante sugerencias para el cdigo:
1 Escriba el principio de una parte del cdigo. Por ejemplo, para insertar una etiqueta, teclee un
parntesis angular de apertura (<). Para insertar un atributo, site el punto de insercin
inmediatamente despus de un nombre de etiqueta y presione la barra espaciadora.
Se muestra una lista de elementos (como nombres de etiqueta o nombres de atributo).
Sugerencia: para cerrar la lista, presione la tecla Escape.
2 Desplcese por la lista mediante la barra de desplazamiento o con las teclas de flecha arriba y
flecha abajo.
3 Para insertar un elemento de la lista, haga doble clic en l o seleccinelo y presione Intro
(Windows) o Retorno (Macintosh).
Sugerencia: si un estilo CSS creado recientemente no aparece en una lista de sugerencias para
el cdigo de estilos CSS, seleccione Actualizar lista de estilos en la lista de sugerencias para el
cdigo. Si se tiene visualizada la vista Diseo, es posible que aparezca temporalmente algn
cdigo no vlido en dicha vista tras seleccionar Actualizar lista de estilos; para eliminar dicho
cdigo no vlido de la vista Diseo, una vez que haya insertado el estilo, presione F5 para
actualizar de nuevo la vista Diseo.
Para editar una etiqueta a partir de sugerencias para el cdigo, siga uno de estos
procedimientos:
Para reemplazar un atributo por otro, primero elimine el atributo y su valor y, a continuacin,
aada un nuevo atributo y su valor tal como se describe en el procedimiento anterior.
Para cambiar un valor, primero elimine el valor y, a continuacin, aada el nuevo valor tal
como se describe en el procedimiento anterior.
Escritura y edicin de cdigo 437
Temas relacionados
Configuracin de las preferencias de sugerencias para el cdigo en la pgina 416.
Utilizacin de fragmentos de cdigo
Los fragmentos de cdigo permiten almacenar contenido para volverlo a utilizar posteriormente.
Puede crear e insertar fragmentos de HTML, JavaScript, CFML, ASP y JSP, entre otros.
Dreamweaver tambin contiene algunos fragmentos predefinidos que puede utilizar como punto
de partida.
En esta seccin se describe cmo insertar, crear, editar o eliminar fragmentos de cdigo. Tambin
se describe cmo administrar los fragmentos de cdigo y compartirlos con otros miembros del
equipo.
Para insertar un fragmento de cdigo:
1 Site el punto de insercin donde desee insertar el fragmento de cdigo, o seleccione cdigo para
ajustar un fragmento alrededor.
2 En el panel Fragmentos (Ventana > Fragmentos), haga doble clic en el fragmento.
Tambin puede hacer clic con el botn derecho del ratn (Windows) o presionar la tecla
Control y hacer clic (Macintosh) en el fragmento y, a continuacin, elegir Insertar en el men
emergente.
Para crear un fragmento de cdigo:
1 En el panel Fragmentos, haga clic en el icono Nuevo fragmento situado en la parte inferior del
panel.
Aparecer el cuadro de dilogo Fragmento.
2 Rellene el cuadro de dilogo y haga clic en Aceptar.
Para editar un fragmento de cdigo:
En el panel Fragmentos, seleccione un fragmento y haga clic en el botn Editar fragmento
situado en la parte inferior del panel.
Para eliminar un fragmento de cdigo:
En el panel Fragmentos, seleccione un fragmento y haga clic en el botn Quitar situado en la
parte inferior del panel.
Para crear carpetas de fragmentos de cdigo y administrar fragmentos de cdigo.
1 En el panel Fragmentos, haga clic en el icono Nueva carpeta de fragmentos situado en la parte
inferior del panel.
2 Arrastre los fragmentos que desee a la nueva carpeta o a otras carpetas.
Para aadir o editar un mtodo abreviado de teclado para un fragmento:
1 En el panel Fragmentos, haga clic con el botn derecho del ratn (Windows) o mantenga
presionada la tecla Control y haga clic (Macintosh) y seleccione Editar mtodos abreviados de
teclado.
2 Aparecer el editor de mtodos abreviados de teclado.
3 En el men emergente Comandos, seleccione Fragmentos.
4 Aparecer una lista de fragmentos.
5 Seleccione un fragmento y asgnele un mtodo abreviado de teclado. Para ms informacin,
consulte Personalizacin de los mtodos abreviados de teclado en la pgina 61.
Para compartir un fragmento con otros miembros del equipo:
1 Busque el archivo correspondiente al fragmento que desea compartir en la carpeta
Configuration\Snippets de la carpeta de la aplicacin DreamweaverMX.
2 Copie el archivo del fragmento en una carpeta compartida de su equipo o de un equipo de red.
3 Solicite a los dems miembros del equipo que copien el archivo del fragmento en sus carpetas
Configuration\Snippets.
Utilizacin de la barra Insertar para insertar cdigo fcilmente
Puede utilizar la barra Insertar para aadir cdigo fcilmente a una pgina.
Para insertar cdigo rpidamente:
1 Site el punto de insercin en el cdigo.
2 Seleccione una categora en la barra Insertar.
3 Haga clic en un botn de la barra Insertar, o seleccione un elemento de un men emergente de
la barra Insertar.
Cuando hace clic en un icono, puede que aparezca inmediatamente el cdigo en la pgina o
que un cuadro de dilogo solicite informacin adicional para completar el cdigo.
Para saber qu realiza cada botn, seale al botn con el puntero del ratn y espere a que aparezca
una descripcin de herramienta. El nmero y el tipo de botones disponibles en la barra Insertar
vara en funcin del tipo de documento actual. Tambin depende de si utiliza la vista Cdigo o la
vista Diseo.
Aunque la barra Insertar proporciona una coleccin de las etiquetas utilizadas habitualmente, no
se incluyen todas. Para elegir entre una seleccin ms completa de etiquetas, utilice el Selector de
etiquetas.
Temas relacionados
Barra Insertar en la pgina 39
Utilizacin del Selector de etiquetas para insertar etiquetas
Puede utilizar el Selector de etiquetas para insertar en una pgina cualquier etiqueta de las
bibliotecas de etiquetas de Dreamweaver (incluidas las bibliotecas de etiquetas de ColdFusion y
ASP.NET). Para ms informacin sobre las bibliotecas de etiquetas, consulte Administracin de
bibliotecas de etiquetas en la pgina 418.
Para insertar una etiqueta mediante el Selector de etiquetas:
1 Site el punto de insercin en el cdigo, haga clic con el botn derecho del ratn (Windows) o
mantenga presionada la tecla Control y haga clic (Macintosh) y elija Insertar etiqueta.
Aparecer el Selector de etiquetas. El panel izquierdo contiene una lista de las bibliotecas de
etiquetas admitidas y el derecho las etiquetas de la carpeta de biblioteca de etiquetas seleccionada.
2 Seleccione e inserte una etiqueta.
3 Para cerrar el Selector de etiquetas, haga clic en el botn Cerrar.
Escritura y edicin de cdigo 439
Edicin de etiquetas mediante editores de etiquetas
Los editores de etiquetas permiten ver, especificar y editar los atributos de una etiqueta.
Para editar una etiqueta mediante un editor de etiquetas:
haga clic (Macintosh) en una etiqueta de la vista Cdigo o en un objeto de la vista Diseo y
seleccione Editar etiqueta en el men emergente.
2 Especifique o edite los atributos de la etiqueta y haga clic en Aceptar.
Sugerencia: para ms informacin sobre la etiqueta en el editor de etiquetas, haga clic en Datos de
etiqueta.
Aplicacin de sangra a los bloques de cdigo
A medida que escribe y edita cdigo en la vista Cdigo o en el inspector de cdigo, puede cambiar
el nivel de sangra de un bloque o lnea de cdigo seleccionados, desplazndolo una tabulacin
hacia la derecha o hacia la izquierda.
Para aplicar una sangra al bloque de cdigo seleccionado, siga uno de estos procedimientos:
Presione la tecla Tab.
Seleccione Edicin > Sangrar cdigo.
Para anular la sangra del bloque de cdigo seleccionado, siga uno de estos procedimientos:
Presione Mays+Tab.
Seleccione Edicin > Anular sangra de cdigo.
Temas relacionados
Cambios rpidos en una seleccin de cdigo en la pgina 443
Cmo copiar y pegar cdigo
Puede copiar y pegar cdigo desde otra aplicacin o desde la vista Cdigo. El cdigo se puede copiar
y pegar como texto (de modo que aparezca en la pgina cuando se visualice en un navegador) o
como cdigo (para que el navegador lo interprete como, por ejemplo, etiquetas HTML).
Para copiar y pegar cdigo como texto:
1 Copie el cdigo desde Dreamweaver u otra aplicacin.
2 Site el punto de insercin en la vista Diseo y elija Edicin > Pegar.
El cdigo aparece en la vista Diseo. Todos los parntesis angulares se codifican como
entidades HTML, de modo que los navegadores interpretan el cdigo como texto en lugar de
como etiquetas.
Para copiar y pegar cdigo como cdigo:
1 Copie el cdigo desde Dreamweaver u otra aplicacin.
Para copiar desde la vista Diseo, elija Edicin > Copiar como HTML.
En la vista Cdigo, site el punto de insercin y elija Edicin > Pegar. Para actualizar la
visualizacin de la vista Diseo, presione F5.
Site el punto de insercin en la vista Diseo y elija Edicin > Pegar como HTML.
Insercin de comentarios HTML
Un comentario es un texto descriptivo que se inserta en el cdigo HTML para explicar el cdigo
o facilitar otra informacin. El texto del comentario aparece slo en la vista Cdigo y no se
muestra en los navegadores.
Para insertar un comentario en el punto de insercin:
Seleccione Insertar > Comentario.
En la vista Cdigo, Dreamweaver inserta una etiqueta de comentario y sita el punto de
insercin en medio de la etiqueta. Escriba el comentario.
En la vista Diseo, Dreamweaver muestra el cuadro de dilogo Comentario. Introduzca el
comentario y haga clic en Aceptar.
Para ver los marcadores de comentario en la vista Diseo:
No olvide seleccionar la opcin Comentarios en las preferencias de los elementos invisibles ya
que, de lo contrario, no aparecer el marcador de comentario.
Para editar un comentario existente, siga uno de estos procedimientos:
En la vista Diseo, seleccione el marcador de comentario y edite el texto del comentario en el
En la vista Cdigo, busque el comentario y edite el texto correspondiente.
Bsqueda y reemplazo de etiquetas y atributos 441
Visualizacin de funciones JavaScript y VBScript en un documento
Puede ver una lista de todas las funciones JavaScript o VBScript de un documento, y puede saltar
a cualquier funcin.
Para ver los nombres de las funciones de script de un documento:
1 Visualice el documento en la vista Cdigo.
haga clic (Macintosh) en cualquier punto de la vista Cdigo. En el men contextual, seleccione
el submen Funciones.
Nota: el submen Funciones no aparece en la vista Diseo.
Si el cdigo contiene funciones JavaScript o VBScript, aparecern en el submen.
Sugerencia: para ver las funciones clasificadas por orden alfabtico, haga clic con el botn
derecho del ratn mientras pulsa la tecla Control (Windows) o mantenga presionadas las teclas
Opcin y Control y haga clic (Macintosh) en la vista Cdigo y, a continuacin, seleccione el
submen Funciones.
Para ver una funcin que se encuentra en el cdigo:
Seleccione un nombre de funcin en el submen Funciones.
La vista Cdigo muestra la funcin con el nombre resaltado.
Bsqueda y reemplazo de etiquetas y atributos
Puede utilizar Dreamweaver para buscar y reemplazar etiquetas y atributos en el cdigo.
Temas relacionados
Expresiones regulares en la pgina 433
Cmo buscar y reemplazar texto en la pgina 309
Bsqueda de etiquetas, atributos o texto contenidos en etiquetas especficas
Puede buscar etiquetas, atributos y valores de atributo especficos. Por ejemplo, puede buscar
todas las etiquetas img que no tengan ningn atributo alt.
Tambin puede buscar cadenas de texto especficas que estn dentro o fuera de una serie de
etiquetas contenedoras. Por ejemplo, puede buscar la palabra sin ttulo entre etiquetas title
para localizar todas las pginas sin ttulo del sitio.
Para buscar etiquetas, atributos o texto en el cdigo:
1 Abra el documento en el que se debe realizar la bsqueda o seleccione los documentos o una
carpeta del panel Archivos.
Se abre el cuadro de dilogo Buscar y reemplazar.
3 Especifique los archivos en los que se debe buscar y, a continuacin, indique el tipo de bsqueda
que desea realizar, as como el texto o las etiquetas que desea buscar. Opcionalmente, especifique
el texto de sustitucin. A continuacin, haga clic en uno de los botones de bsqueda o uno de
los botones de sustitucin.
4 Una vez que haya terminado, haga clic en el botn Cerrar para salir de este cuadro de dilogo.
Para volver a buscar sin visualizar el cuadro de dilogo Buscar y reemplazar:
Presione F3 (Windows) o Comando+G (Macintosh).
Temas relacionados
Almacenamiento de modelos de bsqueda
Puede guardar un modelo de bsqueda y utilizarlo ms adelante.
Para guardar un modelo de bsqueda:
1 En el cuadro de dilogo Buscar y reemplazar (Edicin > Buscar y reemplazar), establezca los
parmetros de la bsqueda.
Si realiza una bsqueda avanzada de texto o de etiquetas, vase Bsqueda de etiquetas,
atributos o texto contenidos en etiquetas especficas en la pgina 441 para informacin sobre
la configuracin de parmetros adicionales de bsqueda.
2 Haga clic en el botn Guardar consulta (icono de disco).
3 En el cuadro de dilogo que aparece a continuacin, vaya hasta la carpeta en la que desea guardar
las consultas. A continuacin, escriba un nombre de archivo por el que se identificar la consulta
y haga clic en Guardar.
Por ejemplo, si el modelo de bsqueda implica buscar etiquetas img sin el atributo alt, puede
asignar el nombre img_no_alt.dwr a la consulta.
Nota: las consultas guardadas tienen la extensin de nombre de archivo .dwr. Algunas consultas
guardadas de versiones anteriores de Dreamweaver pueden tener la extensin .dwq.
Para recuperar un modelo de bsqueda:
2 Haga clic en el botn Cargar consulta (identificado con un icono de carpeta).
3 Vaya a la carpeta donde se guardan las consultas. Seleccione un archivo de consulta y haga clic
en Abrir.
4 Haga clic en Buscar siguiente, Buscar todos, Reemplazar o Reemplazar todos para iniciar la
bsqueda.
Temas relacionados
Bsqueda de etiquetas, atributos o texto contenidos en etiquetas especficas en la pgina 441
Cambios rpidos en una seleccin de cdigo 443
Cambios rpidos en una seleccin de cdigo
Puede seleccionar cdigo y realizar cambios rpidos mediante un men contextual.
Para realizar cambios rpidos en el cdigo seleccionado:
1 En la vista Cdigo, seleccione el cdigo y haga clic con el botn derecho del ratn (Windows)
o mantenga presionada la tecla Control y haga clic (Macintosh). En el men contextual,
seleccione el submen Seleccin.
2 Seleccione una de las siguientes opciones del submen.
Comentar lneas aade etiquetas de comentario al principio y final de las lneas seleccionadas.
Si una lnea se ha seleccionado slo parcialmente, se comenta toda la lnea. Puede utilizar esta
herramienta para comentar cdigo que puede ser incorrecto al depurar una pgina.
Anular comentario de lneas elimina las marcas de comentario del principio y final de las
lneas que se encuentren dentro de la seleccin comentada. Slo funciona en lneas completas,
no en comentarios dentro de las lneas.
Convertir tabulaciones en espacios convierte cada etiqueta de la seleccin en un nmero de
espacios igual al valor de Tamao de tabulacin definido en las preferencias de formato de
cdigo. Para ms informacin, consulte Configuracin de preferencias de formato de cdigo
en la pgina 415.
Convertir espacios en tabulaciones convierte las series de espacios de la seleccin en
tabulaciones. Cada serie de espacios que tiene un nmero de espacios igual al tamao de
etiqueta se convierte en una tabulacin.
Sangra sangra la seleccin, desplazndola a la derecha. Para ms informacin sobre las
sangras, consulte Aplicacin de sangra a los bloques de cdigo en la pgina 439.
Anular sangra desplaza la seleccin a la izquierda.
Quitar todas las etiquetas elimina todas las etiquetas de la seleccin.
Convertir lneas en tabla especifica la seleccin en una etiqueta table sin atributos.
Aadir saltos de lnea aade una etiqueta br al final de cada lnea de la seleccin.
Convertir en maysculas convierte todas las letras de la seleccin (incluidos los nombres de
atributos y etiquetas y los valores) en maysculas.
Convertir en minsculas convierte todas las letras de la seleccin (incluidos los nombres de
atributos y etiquetas y los valores) en minsculas.
Convertir etiquetas en maysculas convierte todos los nombres de atributos y etiquetas y los
valores de atributo de la seleccin en maysculas.
Convertir etiquetas en minsculas convierte todos los nombres de atributos y etiquetas y los
valores de atributo de la seleccin en minsculas.
Utilizacin del material de consulta para lenguajes
El panel Referencia proporciona una herramienta de consulta rpida para los lenguajes de
formato, lenguajes de programacin y estilos CSS; se proporciona informacin sobre las etiquetas,
los objetos y los estilos especficos que utiliza en la vista Cdigo (o el inspector de cdigo).
Para abrir el panel Referencia:
1 Siga uno de estos procedimientos en la vista Cdigo:
Control y haga clic (Macintosh) en una etiqueta, un atributo o una palabra clave y
seleccione Referencia en el men contextual.
Site el punto de insercin en una etiqueta, un atributo o una palabra clave y presione F1.
Se abrir el panel Referencia, mostrando informacin sobre la etiqueta, el objeto o estilo que ha
seleccionado.
2 Para ajustar el tamao del texto en el panel Referencia, seleccione Fuente grande, Fuente
mediana o Fuente pequea en el men de opciones (una flecha pequea situada en la parte
superior derecha del panel).
3 El men emergente Libro muestra el nombre del libro del que procede el material de referencia.
Para mostrar etiquetas, objetos o estilos de otro libro, seleccione el libro que desee en el men
emergente Libro.
4 El men emergente Etiqueta, Objeto, Estilo o CFML (segn el libro que haya seleccionado)
muestra la etiqueta, el objeto, el estilo o la funcin que se ha seleccionado en la vista Cdigo (o
el inspector de cdigo). Para ver informacin sobre otro elemento, seleccione otro elemento en
el men.
5 Para ver informacin sobre un atributo del elemento seleccionado, seleccione el atributo del
men emergente que aparece junto al men emergente Etiqueta, Objeto o Estilo.
Este men contiene la lista de atributos del elemento seleccionado. La seleccin
predeterminada es Descripcin, que muestra una descripcin del elemento seleccionado.
Impresin del cdigo 445
Impresin del cdigo
Puede imprimir el cdigo para editarlo fuera de lnea, archivarlo o distribuirlo.
Para imprimir cdigo:
1 Abra una pgina en la vista de Cdigo.
2 Seleccione Archivo > Imprimir cdigo.
3 Especifique las opciones de impresin y haga clic en Aceptar (Windows) o en Imprimir
(Macintosh).
447
CAPTULO 21
Optimizacin y depuracin del cdigo
Puede utilizar Macromedia Dreamweaver MX 2004 para optimizar y depurar el cdigo. Por
ejemplo, puede validar etiquetas, hacer un documento compatible con XHTML o depurar cdigo
de ColdFusion.
Limpieza del cdigo en la pgina 447
Verificacin de que las etiquetas y llaves estn equilibradas en la pgina 448
Comprobacin de la compatibilidad con los navegadores en la pgina 448
Validacin de etiquetas en la pgina 451
Creacin de pginas compatibles con XHTML en la pgina 452
Utilizacin del depurador de ColdFusion (slo Windows) en la pgina 453
Limpieza del cdigo
Dreamweaver puede eliminar automticamente etiquetas vacas, combinar etiquetas font
anidadas y en general mejorar cdigos HTML o XHTML desordenados o ilegibles.
Para informacin sobre cmo limpiar HTML generado a partir de un documento de Microsoft
Word, vase Cmo abrir documentos existentes en la pgina 77.
Para limpiar el cdigo:
1 Abra un documento:
Si el documento est en HTML, seleccione Comandos > Limpiar HTML.
Si el documento est en XHTML, elija Comandos > Limpiar XHTML.
En un documento XHTML, el comando Limpiar XHTML soluciona errores de sintaxis,
establece que los atributos de etiqueta aparezcan en minsculas y aade o informa de los
atributos obligatorios de una etiqueta que faltan, adems de realizar operaciones de limpieza
de HTML.
2 En el cuadro de dilogo que aparece, seleccione una de las opciones.
Segn el tamao del documento y el nmero de opciones seleccionadas, la operacin de
limpieza puede tardar varios segundos en realizarse.
448 Captulo 21: Optimizacin y depuracin del cdigo
Temas relacionados
Configuracin de preferencias de formato de cdigo en la pgina 415
Configuracin de las preferencias de colores de cdigo en la pgina 417
Verificacin de que las etiquetas y llaves estn equilibradas
Puede realizar una comprobacin para asegurarse de que las etiquetas, parntesis (()), llaves ({ }) y
corchetes ([ ]) de la pgina estn equilibrados. Equilibrados significa que todos los parntesis,
etiquetas, llaves y corchetes de apertura tienen uno de cierre, y viceversa.
Para comprobar si las etiquetas estn equilibradas:
1 Abra el documento en la vista Cdigo.
2 Site el punto de insercin en el cdigo anidado que desea comprobar.
3 Seleccione Edicin > Seleccionar etiqueta padre.
Se resaltarn las etiquetas de apertura y cierre (y su contenido) en el cdigo. Si elige Edicin >
Seleccionar etiqueta padre y las etiquetas estn equilibradas, Dreamweaver resaltar las
etiquetas html y /html ms externas.
Para comprobar si los parntesis, llaves y corchetes estn equilibrados:
1 Abra el documento en la vista Cdigo.
2 Site el punto de insercin en el cdigo que desea comprobar.
3 Seleccione Edicin > Equilibrar llaves.
Se resaltar todo el cdigo comprendido dentro de los parntesis, llaves y corchetes. Si vuelve a
elegir Edicin > Equilibrar llaves se resaltar todo el cdigo comprendido dentro de los
parntesis, llaves y corchetes de la nueva seleccin.
Comprobacin de la compatibilidad con los navegadores
Dreamweaver permite crear pginas Web con elementos que admiten todos los navegadores (por
ejemplo, imgenes y texto), as como con elementos que slo admiten los navegadores ms
recientes (por ejemplo, estilos CSS).
Debe determinar el pblico potencial de su pgina, y qu navegadores es probable que utilicen. Si
la mayora de sus usuarios usan Netscape 4 (como sucede en la mayora de entornos intranet
acadmicos, por ejemplo), debe evitar utilizar etiquetas que este navegador no acepta.
La funcin Comprobar navegadores de destino prueba el cdigo de los documentos para ver si
hay etiquetas, atributos, propiedades CSS o valores CSS que el navegador de destino no acepta. La
comprobacin no altera el documento.
El navegador de destino ofrece informacin sobre tres niveles de problemas potenciales: errores,
advertencias y mensajes informativos. En las descripciones siguientes se explican las diferencias
entre estos niveles:
Un error indica cdigo que puede causar un problema visible grave en un navegador concreto,
como hacer desaparecer partes de una pgina. (En algunos casos, tambin se marca como error
el cdigo con un efecto desconocido.)
Una advertencia seala una parte de cdigo que no se visualizar correctamente en un
navegador concreto, pero eso no causar ningn problema de visualizacin grave.
Comprobacin de la compatibilidad con los navegadores 449
Un mensaje informativo seala cdigo que no es compatible con un navegador determinado,
pero que no tiene ningn efecto visible; por ejemplo, el atributo galleryimg de la etiqueta
img no es compatible con algunos navegadores, pero algunos navegadores pasan por alto ese
atributo, as que no tiene ningn efecto visible.
De forma predeterminada, Dreamweaver realiza automticamente una comprobacin del
navegador de destino siempre que abre un documento. Tambin puede comprobar manualmente
un documento, un directorio o todo el sitio con el navegador de destino.
Nota: la revisin del navegador de destino no se actualiza continuamente. Despus de realizar
cambios en el cdigo, ejecute manualmente la revisin del navegador de destino para confirmar que
ha eliminado cdigo que no funciona con los navegadores de destino.
La revisin del navegador de destino no verifica los scripts del sitio. Adems, la revisin del
navegador de destino no es un validador de sintaxis; slo detecta formatos no aceptados por los
navegadores de destino.
Nota: la funcin Comprobar navegadores de destino utiliza archivos de texto denominados perfiles
de navegador para determinar qu etiquetas son compatibles con navegadores especficos.
Dreamweaver incluye perfiles predefinidos para Netscape Navigator 3.0 y posteriores, para
Microsoft Internet Explorer 3.0 y posteriores y para Opera 2.1 y posteriores. Para informacin sobre
cmo modificar los perfiles existentes o crear perfiles nuevos, vase el artculo Personalizacin de
Dreamweaver en www.macromedia.com/go/dreamweaver_support_es/.
Para seleccionar navegadores para que Dreamweaver los compruebe:
1 Seleccione Configuracin en el men Comprobar navegadores de destino en la barra de
herramientas Documento.
Aparecer el cuadro de dilogo Comprobar navegadores de destino.
2 Seleccione la casilla de verificacin de los navegadores que desee comprobar.
3 Para cada navegador, seleccione una versin mnima para comprobar el correspondiente men
emergente.
Por ejemplo, si desea verificar que todo el formato del documento es compatible con Microsoft
Internet Explorer 3.0 y posteriores y Netscape Navigator 4.0 y posteriores, seleccione las
casillas de verificacin que aparecen junto a los nombres de los navegadores, y seleccione 3.0
del men emergente Microsoft Internet Explorer y 4.0 del men emergente Netscape
Navigator.
Para ver los resultados de una comprobacin automtica de navegador, siga uno de estos
procedimientos:
Abra un archivo y examnelo en vista de cdigo (Ver > Cdigo o Ver > Cdigo y diseo).
Despus de realizar un cambio en la vista de cdigo, haga clic en el botn Actualizar del
inspector de propiedades o presione F5.
Aparecer una lnea roja ondulada debajo del nombre de cada elemento que se considere un error
en uno de los navegadores destino. (Las advertencias y los mensajes informativos no se marcan en
la vista Cdigo; para ver las advertencias y los mensajes informativos, visualice el informe para
todo el documento.) Si Dreamweaver no encuentra formatos incompatibles, entonces no se
subraya nada, y cambia el icono de men Revisin del navegador de destino de la barra de
herramientas Documento para indicar que no hay errores.
Sugerencia: para utilizar fcilmente comandos relacionados con la revisin de navegadores de
destino, seleccione un comando del men contextual haciendo clic con el botn derecho del ratn
(Windows) o haciendo clic mientras presiona la tecla Control (Macintosh) sobre cualquier elemento
subrayado en rojo.
Para comprobar qu navegadores no admiten un elemento concreto subrayado en rojo:
Site el puntero sealando el texto subrayado en rojo.
Aparecer una descripcin de herramienta que le indicar qu navegadores no admiten este
elemento.
Para ver el informe de Comprobar navegador de destino para todo el documento:
En el men Comprobar navegador de destino de la barra de herramientas Documento,
seleccione Mostrar todos los errores.
Aparecer el grupo de paneles Resultado, con el panel Revisin del navegador de destino
seleccionado. Los errores se marcan con un icono de signo de exclamacin rojo, las advertencias se
marcan con un icono de signo de exclamacin amarillo y los mensajes informativos, con un icono
de globo de palabras.
Para ver un mensaje de error largo en el panel Revisin del navegador de destino:
1 Abra el panel Revisin del navegador de destino.
2 Seleccione un mensaje de error que sea demasiado largo para leerlo en el panel.
3 Haga clic en el botn Ms info.
Aparecer un cuadro de dilogo de descripcin que mostrar el texto completo del mensaje de
error seleccionado.
Para desactivar la comprobacin automtica de navegador de destino:
Desactive Comprobacin automtica al abrir en el men Comprobar navegadores de destino
de la barra de herramientas Documento.
Para saltar al error siguiente o anterior del cdigo:
Seleccione Error siguiente o Error anterior del men Revisin del navegador de destino de la
barra de herramientas Documento.
Para saltar a un error especfico del panel Revisin del navegador de destino:
Haga doble clic sobre el mensaje de error.
El formato incompatible queda seleccionado en la vista de cdigo.
Para ejecutar manualmente una revisin del navegador de destino en el archivo actual:
Seleccione Archivo > Comprobar pgina > Comprobar navegadores de destino.
El informe aparecer en el panel Revisin del navegador de destino (en el grupo de paneles
Resultados).
Para ejecutar manualmente una revisin del navegador de destino en un sitio o un conjunto
de archivos seleccionados:
1 En la vista local del panel Archivos, seleccione un conjunto de archivos o seleccione la carpeta
que contiene todo el sitio.
2 Seleccione Archivo > Comprobar pgina > Comprobar navegadores de destino.
El informe aparecer en el panel Revisin del navegador de destino (en el grupo de paneles
Resultados).
3 Para cancelar un informe en ejecucin, haga clic en el botn Detener del panel Revisin del
navegador de destino.
Validacin de etiquetas 451
Para alternar entre la vista del informe del documento actual y la vista del informe del sitio
entero:
En el panel Revisin del navegador de destino, seleccione Documento actual o Informe del
sitio del men emergente.
Para guardar un informe de comprobacin de navegadores de destino:
Haga clic en el botn Guardar informe del panel Revisin del navegador de destino.
Nota: el informe de comprobacin de navegadores de destino no se guarda automticamente. Si
desea tener una copia como referencia en el futuro, gurdelo.
Para ver un informe de comprobacin de navegadores de destino en un navegador:
Haga clic en el botn Examinar informe del panel Revisin del navegador de destino.
Para reparar un error:
Elimine el cdigo incompatible o cmbielo por otro cdigo que sea compatible con sus
navegadores de destino.
Para especificar que Dreamweaver pase por alto un tipo concreto de error:
haga clic (Macintosh) en el cdigo subrayado en rojo y seleccione Omitir error del men
contextual.
Ese tipo de error pasa a ser una advertencia y Dreamweaver para de subrayar ese tipo de error en
todos los documentos.
Validacin de etiquetas
Puede utilizar Dreamweaver para descubrir si su cdigo contiene errores de etiquetas o de sintaxis.
Dreamweaver puede validar documentos en varios lenguajes, entre ellos HTML, XHTML,
ColdFusion Markup Language (CFML), JavaServer Pages (JSP), Wireless Markup Language
(WML) y XML.
Nota: para informacin sobre la manera de validar su documento para su accesibilidad, vase
Comprobacin del sitio en la pgina 115.
Puede validar el documento actual o una etiqueta seleccionada.
Para validar sus etiquetas:
Para un archivo XML (o XHTML), seleccione > Comprobar pgina > Validar como XML.
O seleccione Archivo > Comprobar pgina > Validar formato.
La ficha Validacin del panel Resultados mostrar el mensaje No se han encontrado errores ni
advertencias o una lista de los errores de sintaxis encontrados.
2 Haga doble clic sobre un mensaje de error para seleccionar el error en el documento.
3 Para guardar el informe como un archivo XML, haga clic en el botn Guardar informe.
4 Para ver el informe en su navegador principal (as podr imprimir el informe), haga clic en el
botn Examinar informe.
Puede establecer las preferencias del validador, por ejemplo especificar el lenguaje basado en
etiquetas que debe utilizarse para la validacin, los problemas especficos que deben comprobarse
y los tipos de errores de los que debe informarse. Para ms informacin, consulte Configuracin
de las preferencias del validador en la pgina 418.
Temas relacionados
Comprobacin de la compatibilidad con los navegadores en la pgina 448
Creacin de pginas compatibles con XHTML
Cuando crea una pgina nueva, puede hacer que sea compatible con XHTML. Tambin puede
hacer que un documento HTML existente sea compatible con XHTML.
Para crear un nuevo documento compatible con XHTML:
Aparecer el cuadro de dilogo Nuevo documento.
2 Seleccione un tipo de documento.
3 Seleccione la opcin Hacer el documento compatible con XHTML.
Nota: no todas las clases de documentos pueden hacerse compatibles con XHTML.
Para crear documentos compatibles con XHTML de forma predeterminada:
1 Seleccione Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X) y seleccione la
categora Nuevo documento.
2 En la categora Nuevo documento, elija un tipo de documento y seleccione la opcin Hacer el
documento compatible con XHTML.
Para crear un documento compatible con XHTML a partir de un documento HTML:
Abra un documento y siga uno de estos procedimientos:
Para un documento sin marcos, seleccione Archivo > Convertir > XHTML.
Para un documento con marcos, seleccione un marco y elija Archivo > Convertir >
XHTML. Para convertir todo el documento, repita este paso con todos los marcos y con el
documento de conjunto de marcos.
Nota: no se puede convertir una instancia (copia) de una plantilla, ya que debe estar en el mismo
lenguaje que la plantilla en que se basa. Por ejemplo, un documento basado en una plantilla XHTML
siempre estar en XHTML, y un documento basado en una plantilla HTML no compatible con
XHTML siempre ser HTML y no se podr convertir a XHTML o cualquier otro lenguaje.
Temas relacionados
Cdigo XHTML generado por Dreamweaver en la pgina 430
Utilizacin del depurador de ColdFusion (slo Windows) 453
Utilizacin del depurador de ColdFusion (slo Windows)
Si es desarrollador de ColdFusion y utiliza Macromedia ColdFusion MX como servidor de prueba
de Dreamweaver, podr ver esta informacin y reparar la pgina sin salir de Dreamweaver.
Nota: esta funcin no puede utilizarse en un Macintosh. Los desarrolladores de Macintosh pueden
utilizar Vista previa en el navegador (F12) para abrir una pgina de ColdFusion en otro navegador. Si
la pgina contiene errores, aparecer informacin acerca de las posibles causas de los errores en la
parte inferior de la pgina.
Antes de comenzar la depuracin, asegrese de que la configuracin de depuracin est activada
en ColdFusion Administrator. Para ms informacin, consulte la documentacin de ColdFusion
en la Ayuda de Dreamweaver (Ayuda > Utilizacin de ColdFusion). Asegrese tambin de que su
servidor de pruebas de Dreamweaver est ejecutando ColdFusionMX. Para ms informacin
sobre el servidor de pruebas de Dreamweaver, consulte Especificacin de dnde pueden
procesarse las pginas dinmicas en la pgina 474.
Sugerencia: para garantizar que la informacin de depuracin se actualiza al mostrar una pgina en
el navegador interno, asegrese de que Internet Explorer comprueba si hay nuevas versiones del
archivo cada vez que ste se solicita. En Internet Explorer, seleccione Herramientas > Opciones de
Internet, seleccione la ficha General y haga clic en el botn Configuracin del rea Archivos
temporales de Internet. En el cuadro de dilogo Configuracin, seleccione la opcin Cada vez que se
visita la pgina.
Para depurar una pgina de ColdFusion:
1 Abra la pgina de ColdFusion en Dreamweaver.
2 Haga clic en el icono Depuracin del servidor en la barra de herramientas Documento.
Dreamweaver solicita el archivo del servidor de ColdFusion MX y lo muestra en una ventana
de navegador interna de Internet Explorer. Si la pgina contiene errores, aparecern las posibles
causas en la parte inferior de la misma.
Al mismo tiempo, se abrir un panel de Depuracin del servidor. Dicho panel ofrece una gran
cantidad de informacin til, por ejemplo todas las pginas procesadas por el servidor para
mostrar la pgina, todas las consultas SQL ejecutadas en la pgina y todas las variables de
servidor con sus valores, si los hubiere. El panel incluye tambin un resumen de los tiempos de
ejecucin.
3 Si aparece una categora Excepciones en el panel Depuracin del servidor, haga clic en el icono
de signo Ms (+) para ampliar la categora.
La categora Excepciones aparece si el servidor tiene algn problema con la pgina. Ample la
categora para averiguar ms sobre el problema.
4 En la columna Ubicacin del panel Depuracin del servidor, haga clic en el URL de la pgina
para abrirla en la vista de cdigo y repararla.
Si Dreamweaver puede localizar la pgina, sta se abrir con las lneas en las que se encuentra el
problema resaltadas. Si Dreamweaver no puede localizar la pgina, le pedir que lo haga usted.
5 Solucione el error, guarde el archivo en el servidor y haga clic en Examinar.
Dreamweaver volver a mostrar la pgina en el navegador interno y actualizar el panel
Depuracin del servidor. Si no hay ms problemas en la pgina, la categora Excepciones no
aparecer de nuevo en el panel.
6 Para salir del modo de depuracin, cambie a la vista Cdigo (Ver > Cdigo) o a la vista Diseo
(Ver > Diseo).
455
CAPTULO 22
Edicin de cdigo en la vista Diseo
Macromedia Dreamweaver MX 2004 permite crear y editar visualmente pginas Web sin tener
que preocuparse del cdigo fuente subyacente, pero a veces es necesario editar el cdigo para tener
un mayor control o para resolver problemas de la pgina Web. Dreamweaver permite editar parte
del cdigo desde la vista Diseo.
Este captulo est pensado para quienes prefieren trabajar en la vista Diseo pero tambin desean
poder acceder al cdigo con rapidez.
Este captulo contiene los siguientes temas:
Edicin de cdigo con el inspector de propiedades en la pgina 455
Edicin de cdigo con Quick Tag Editor en la pgina 457
Edicin de cdigo con el selector de etiquetas en la pgina 460
Edicin de scripts en la pgina 460
Utilizacin de server-side includes en la pgina 462
Utilizacin de comportamientos JavaScript en la pgina 463
Visualizacin y edicin del contenido de Head en la pgina 463
Edicin de cdigo con el inspector de propiedades
Puede utilizar el inspector de propiedades para inspeccionar y editar los atributos del texto o de los
objetos de la pgina. Las propiedades mostradas en el inspector de propiedades se suelen
corresponder con los atributos de las etiquetas: si se cambia una propiedad en el inspector de
propiedades, normalmente esto produce el mismo efecto que si se cambia el atributo
correspondiente en la vista Cdigo.
Nota: el inspector de etiquetas y el inspector de propiedades permiten ver y editar los atributos de las
etiquetas. El inspector de etiquetas permite ver y editar cada atributo asociado a una determinada
etiqueta. El inspector de propiedades muestra slo los atributos ms habituales, pero proporciona un
conjunto ms amplio de controles para cambiar dichos valores de atributo; adems, permite editar
determinados objetos (como columnas de tabla) que no corresponden a etiquetas especficas.
456 Captulo 22: Edicin de cdigo en la vista Diseo
Para utilizar el inspector de propiedades:
1 Haga clic en el texto o seleccione un objeto de la pgina.
El inspector de propiedades del texto o el objeto aparece bajo la ventana de documento. Si el
inspector de propiedades no est visible, seleccione Ventana > Propiedades.
2 Modifique los atributos en el inspector de propiedades.
Temas relacionados
Utilizacin del inspector de propiedades en la pgina 48
Cambio de atributos con el inspector de etiquetas
Puede utilizar el inspector de etiquetas para editar etiquetas y objetos mediante una hoja de
propiedades parecida a las que se pueden encontrar en otros IDE (Entorno de desarrollo
integrado, Integrated Development Environment).
Nota: el inspector de etiquetas y el inspector de propiedades permiten ver y editar los atributos de las
etiquetas. El inspector de etiquetas permite ver y editar cada atributo asociado a una determinada
etiqueta. El inspector de propiedades muestra slo los atributos ms habituales, pero proporciona un
conjunto ms amplio de controles para cambiar dichos valores de atributo; adems, permite editar
determinados objetos (como columnas de tabla) que no corresponden a etiquetas especficas.
Para editar atributos mediante el inspector de etiquetas:
1 Siga uno de estos procedimientos en la ventana de documento:
En la vista Cdigo (o en el inspector de cdigo), haga clic en un nombre de etiqueta o en su
contenido.
En la vista Diseo, seleccione un objeto o elija una etiqueta en el selector de etiquetas.
2 Abra el Inspector de etiquetas (Ventana > Inspector de etiquetas) y seleccione la ficha Atributos.
Los atributos de la seleccin y sus valores actuales aparecen en el inspector de etiquetas.
3 Siga uno de estos procedimientos en el inspector de etiquetas:
Para ver los atributos organizados por categora, haga clic en el botn Mostrar vista de
categora.
Para ver los atributos en una lista ordenada alfabticamente, haga clic en el botn Mostrar
vista de lista.
Para cambiar un valor de atributo, seleccione el valor y edtelo (vase el siguiente
procedimiento).
Para aadir un valor para un atributo sin un valor, haga clic en la columna atributo-valor a la
derecha del atributo y aada un valor (vase el siguiente procedimiento).
Para eliminar un valor de atributo, seleccione el valor y presione Retroceso (Windows) o
Eliminar (Macintosh).
Para cambiar el nombre de un atributo, seleccione el atributo y edtelo.
Nota: si cambia el nombre de un atributo estndar y a continuacin aade un valor para dicho
atributo, el atributo y su nuevo valor pasan a la categora adecuada.
Para aadir un atributo nuevo que no aparece enumerado, haga clic en el espacio vaco que
se encuentra debajo del ltimo nombre de atributo enumerado y escriba el nombre del
nuevo atributo.
Edicin de cdigo con Quick Tag Editor 457
4 Presione Intro (Windows) o Retorno (Macintosh) o haga clic en cualquier punto del inspector
de etiquetas para actualizar la etiqueta en el documento.
Para editar o aadir un valor de atributo, siga uno de estos procedimientos:
Escriba un valor nuevo para el atributo en la columna atributo-valor, a la derecha del nombre
de atributo.
Si el atributo toma valores predefinidos, seleccione un valor en el men emergente (o el selector
de color) a la derecha de la columna atributo-valor.
Si el atributo toma un valor de URL, haga clic en el botn Examinar o utilice el icono de
sealizacin de archivo para seleccionar un archivo o bien escriba el URL en el cuadro de texto.
Si el atributo toma un valor de una fuente de contenido dinmico (como una base de datos),
haga clic en el botn Datos dinmicos a la derecha de la columna atributo-valor. A
continuacin, seleccione una fuente.
Para informacin sobre cmo definir fuentes de contenido dinmico, vase Definicin de
fuentes de contenido dinmico en la pgina 545.
Temas relacionados
Edicin de cdigo con el inspector de propiedades en la pgina 455
Utilizacin de comportamientos JavaScript en la pgina 381
Edicin de cdigo con Quick Tag Editor
Puede utilizar Quick Tag Editor para inspeccionar y editar etiquetas HTML de forma rpida sin
salir de la vista Diseo. Para abrir Quick Tag Editor, presione Control+T (Windows) o
Comando+T (Macintosh)..Para ms informacin, consulte la Ayuda de Dreamweaver.
Insercin de una etiqueta HTML con Quick Tag Editor
Puede utilizar Quick Tag Editor para insertar una etiqueta HTML en el documento.
Para insertar una etiqueta HTML con Quick Tag Editor:
1 En la vista Diseo, haga clic en la pgina para colocar el punto de insercin donde desee insertar
cdigo.
2 Presione Control+T (Windows) o Comando+T (Macintosh).
Quick Tag Editor se abre en modo Insertar HTML.
3 Introduzca la etiqueta HTML y, a continuacin, presione Intro.
La etiqueta se inserta en el cdigo junto con la correspondiente etiqueta de cierre, si procede.
4 Presione Escape para salir sin realizar ningn cambio.
Temas relacionados
Aplicacin de HTML a una seleccin con Quick Tag Editor en la pgina 458
Utilizacin del men de sugerencias en la pgina 459
Edicin de una etiqueta HTML con Quick Tag Editor
Puede utilizar Quick Tag Editor para editar una etiqueta HTML en el documento.
Para editar una etiqueta HTML con Quick Tag Editor:
1 Seleccione un objeto en la vista Diseo.
Tambin puede seleccionar la etiqueta que desea editar en el selector de etiquetas situado en la
parte inferior de la ventana de documento. Para ms informacin, consulte Edicin de cdigo
con el selector de etiquetas en la pgina 460.
2 Presione Control+T (Windows) o Comando+T (Macintosh).
Quick Tag Editor se abre en modo Editar etiqueta.
3 Introduzca nuevos atributos, edite atributos existentes o edite el nombre de la etiqueta.
4 Presione Tab para pasar de un atributo al siguiente; presione Mays+Tab para retroceder.
De forma predeterminada, los cambios se aplican al documento al presionar Tab o Mays+Tab.
Para desactivar las actualizaciones automticas, seleccione Edicin > Preferencias > Quick Tag
Editor o Dreamweaver > Preferencias > Quick Tag Editor (Mac OS X). Se abre el cuadro de
dilogo Preferencias de Quick Tag Editor. Desactive la opcin Aplicar cambios
inmediatamente al editar y haga clic en Aceptar.
5 Para cerrar Quick Tag Editor y aplicar todos los cambios, presione Intro.
6 Para salir sin hacer ningn otro cambio, presione Escape.
Temas relacionados
Insercin de una etiqueta HTML con Quick Tag Editor en la pgina 457
Utilizacin del men de sugerencias en la pgina 459
Aplicacin de HTML a una seleccin con Quick Tag Editor
Puede utilizar Quick Tag Editor para encerrar la seleccin actual entre etiquetas HTML de
apertura y cierre.
Para aplicar HTML a una seleccin con Quick Tag Editor:
1 Seleccione texto sin formato o un objeto en la vista Diseo.
Nota: si ha seleccionado texto o un objeto que incluya una etiqueta HTML de apertura o cierre,
Quick Tag Editor se abrir en modo Editar etiqueta en lugar del modo Ajustar etiqueta.
2 Presione Control+T (Windows) o Comando+T (Macintosh), o bien haga clic en el botn
Quick Tag Editor del inspector de propiedades.
Quick Tag Editor se abre en modo Ajustar etiqueta.
3 Especifique una etiqueta de apertura, como strong, y presione Intro (Windows) o Retorno
(Macintosh).
La etiqueta se insertar al principio de la seleccin actual y se insertar la correspondiente
etiqueta de cierre al final.
4 Para salir sin realizar ningn cambio, en lugar de presionar Intro, presione Escape.
Edicin de cdigo con Quick Tag Editor 459
Utilizacin del men de sugerencias
Mientras se encuentra en Quick Tag Editor, puede acceder a un men de sugerencias sobre
atributos que muestra todos los atributos vlidos de la etiqueta que est editando o insertando.
Tambin puede desactivar el men de sugerencias o ajustar el tiempo que debe transcurrir antes
de que aparezca el men en Quick Tag Editor.
Para ver un men de sugerencias que enumere los atributos vlidos para una etiqueta, no olvide
hacer una breve pausa al editar un nombre de atributo en Quick Tag Editor. Aparecer un men
de sugerencias con todos los atributos vlidos para la etiqueta que est editando.
De modo parecido, para ver un men de sugerencias con los nombres de etiqueta vlidos, haga
una breve pausa al especificar o editar un nombre de etiqueta en Quick Tag Editor.
Nota: las preferencias de sugerencias de cdigo de Quick Tag Editor se controlan en un cuadro de
dilogo independiente de las preferencias de sugerencias de cdigo de la vista Cdigo. Para ms
informacin, consulte Utilizacin de sugerencias para el cdigo en la pgina 436.
Para utilizar un men de sugerencias:
Empiece a escribir un nombre de etiqueta o atributo. La seleccin del men Sugerencias
para el cdigo salta al primer elemento que empieza por las letras que ha escrito.
Utilice las teclas de flecha hacia arriba y flecha hacia abajo para seleccionar un elemento.
Utilice la barra de desplazamiento para buscar un elemento.
2 Presione Intro para insertar el elemento seleccionado o haga doble clic en un elemento para
insertarlo.
3 Para prescindir del men de sugerencias sin insertar ningn elemento, presione Escape o bien
contine escribiendo.
Para prescindir del men de sugerencias o modificar el tiempo que debe transcurrir antes
de que aparezca:
1 Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh) y
seleccione Quick Tag Editor.
Se abre el cuadro de dilogo Preferencias de Quick Tag Editor.
2 Para desactivar el men de sugerencias, anule la seleccin de la opcin Activar sugerencias de
etiquetas.
3 Para modificar el tiempo que debe transcurrir antes de que el men aparezca, ajuste el control
deslizante Demora.
Temas relacionados
Edicin de una etiqueta HTML con Quick Tag Editor en la pgina 458
Edicin de cdigo con el selector de etiquetas
Puede utilizar el selector de etiquetas para seleccionar, editar o quitar etiquetas sin salir de la vista
Diseo. El selector de etiquetas est situado en la barra de estado de la parte inferior de la ventana
de documento y muestra una serie de etiquetas, como se detalla a continuacin:
Para editar una etiqueta:
1 Haga clic en el documento.
Las etiquetas presentes en el punto de insercin aparecen en el selector de etiquetas.
(Macintosh) en una etiqueta del selector de etiquetas.
Aparece un men emergente.
3 En dicho men, seleccione Editar etiqueta.
Se abre Quick Tag Editor. Para ms informacin, consulte Edicin de una etiqueta HTML con
Quick Tag Editor en la pgina 458.
Para eliminar una etiqueta:
(Macintosh) en una etiqueta del selector de etiquetas.
Aparece un men emergente.
3 En dicho men, seleccione Quitar etiqueta.
Para seleccionar un objeto correspondiente a una etiqueta:
2 Haga clic en una etiqueta del selector de etiquetas.
El objeto representado por la etiqueta se selecciona en la pgina.
Sugerencia: utilice esta tcnica para seleccionar filas (etiquetas tr) o celdas (etiquetas td) de tabla.
Edicin de scripts
Puede trabajar con JavaScripts y VBScripts en el lado del cliente tanto en la vista Cdigo como en
la vista Diseo.
Cmo escribir un script en el lado del cliente en la vista Diseo
Puede escribir un script JavaScript o VBScript para la pgina sin salir de la vista Diseo.
Antes de empezar, seleccione Ver > Ayudas visuales > Elementos invisibles para garantizar que los
marcadores de scripts aparecern en la pgina.
Edicin de scripts 461
Para insertar un script en el lado del cliente en la vista Diseo:
1 Site el punto de insercin en el lugar donde desea introducir el script.
2 Seleccione Insertar > Objetos de script > Script.
Se abre el cuadro de dilogo Script.
Vinculacin con un archivo de script externo
En el documento, puede crear un vnculo con un archivo de script externo sin salir de la vista
Diseo.
Para establecer un vnculo con un archivo de script externo:
1 Site el punto de insercin en el lugar donde desea introducir el script.
2 Seleccione Insertar > Objetos de script > Script.
Se abre el cuadro de dilogo Script.
3 Haga clic en Aceptar sin escribir nada en el cuadro Contenido.
4 Seleccione el marcador de scripts en la vista Diseo de la ventana de documento.
5 En el inspector de propiedades, haga clic en el icono de carpeta para acceder y seleccionar el
archivo de script externo o escriba el nombre de archivo en el cuadro Origen.
Edicin de un script en la vista Diseo
Puede editar un script sin salir de la vista Diseo.
Para editar el script en la vista Diseo:
1 Seleccione el marcador de scripts.
2 En el inspector de propiedades, haga clic en el botn Editar.
El script aparece en el cuadro de dilogo Propiedades del script.
Si ha establecido un vnculo con un archivo de script externo, dicho archivo se abre en la vista
Cdigo, donde podr editarlo.
Nota: si hay cdigo entre las etiquetas de script, se abre el cuadro de dilogo Propiedades del
script, incluso aunque haya tambin un vnculo con un archivo de script externo.
3 Edite el script y haga clic en Aceptar.
Utilizacin de server-side includes
Server-side includes son instrucciones al servidor Web para que incluya un archivo especificado en
una pgina Web antes de servir la pgina al navegador. Para ms informacin, consulte Server-
side includes en la pgina 432.
Puede utilizar Dreamweaver para insertar server-side includes en sus pginas, editar los includes u
obtener una vista previa de pginas que contengan includes.
Insercin de un server-side include
Puede utilizar Dreamweaver para insertar server-side includes en la pgina.
Para insertar un server-side include:
1 Seleccione Insertar > Objetos de script > Server-Side Include.
2 En el cuadro de dilogo que aparece, localice y seleccione un archivo.
Para cambiar el archivo incluido:
1 Seleccione el server-side include en la ventana de documento.
2 Abra el inspector de propiedades (Ventana > Propiedades).
Haga clic en el icono de carpeta para localizar y seleccionar un nuevo archivo para incluir.
En el cuadro de texto, escriba la ruta y el nombre del nuevo archivo para incluir.
Temas relacionados
Server-side includes en la pgina 432
Edicin del contenido de un server-side include
Puede utilizar Dreamweaver para editar server-side includes. Para editar el contenido asociado al
archivo incluido, deber abrir el archivo.
Para editar un server-side include:
1 Seleccione el server-side include en la vista Diseo o la vista Cdigo y haga clic en Editar en el
El archivo incluido se abrir en una nueva ventana de documento.
2 Edite el archivo y, a continuacin, gurdelo.
Los cambios se reflejarn inmediatamente en el documento actual y en los documentos que
abra posteriormente que contengan el archivo.
3 Cargue el archivo include en el sitio remoto, si es necesario.
Temas relacionados
Server-side includes en la pgina 432
Visualizacin y edicin del contenido de Head 463
Utilizacin de comportamientos JavaScript
La ficha Comportamientos del inspector de etiquetas permite adjuntar fcilmente
comportamientos JavaScript (lado del cliente) a elementos de pgina. Para ms informacin,
consulte Utilizacin de las acciones de comportamiento incluidas con Dreamweaver en
la pgina 386.
Visualizacin y edicin del contenido de Head
Puede ver los elementos de la seccin head de un documento utilizando el men Ver, la vista de
Cdigo de la ventana de documento o el inspector de cdigo.
Para ver los elementos de la seccin head de un documento:
Seleccione Ver > Contenido de Head. Por cada elemento del contenido de la seccin head,
aparecer una marca en la parte superior de la vista Diseo de la ventana de documento.
Nota: si la ventana de documento est configurada para mostrarse slo en la vista Cdigo, la opcin
Ver > Contenido de Head aparecer atenuada.
Para insertar un elemento en la seccin head de un documento:
En la categora Head de la barra Insertar, haga clic en uno de los botones.
Seleccione un elemento en el submen Insertar > Etiquetas Head.
2 Introduzca opciones para el elemento en el cuadro de dilogo que aparece a continuacin o en
el inspector de propiedades.
Para editar un elemento de la seccin head de un documento:
1 Seleccione Ver > Contenido de Head.
2 Haga clic en uno de los iconos de la seccin head para seleccionarlo.
3 Defina o modifique las propiedades del elemento en el inspector de propiedades.
Para informacin acerca de las propiedades de elementos concretos de la seccin head, vase la
PARTE VI
Preparacin para crear sitios dinmicos
Si desea crear una aplicacin Web dinmica, deber en primer lugar configurar un servidor de
aplicaciones y conectar con una base de datos.
Captulo 23, Configuracin de una aplicacin Web, en la pgina 467
Captulo 24, Conexiones de base de datos para desarrolladores de ColdFusion, en la pgina 477
Captulo 25, Conexiones de base de datos para desarrolladores de ASP.NET, en la pgina 479
Captulo 26, Conexiones de base de datos para desarrolladores de ASP, en la pgina 485
Captulo 27, Conexiones de base de datos para desarrolladores de JSP, en la pgina 495
Captulo 28, Conexiones de base de datos para desarrolladores de PHP, en la pgina 503
Captulo 29, Solucin de problemas de conexiones de base de datos, en la pgina 505
P
A
R
T
E

V
I
467
CAPTULO 23
Configuracin de una aplicacin Web
En este captulo se describe cmo configurar el sistema para crear aplicaciones Web en
Macromedia Dreamweaver MX 2004.
Lo que necesita para crear aplicaciones Web
Para crear aplicaciones Web en Dreamweaver, necesitar el siguiente software:
Un servidor Web (vase Configuracin de un servidor Web en la pgina 468)
Un servidor de aplicaciones que se ejecute en el servidor Web (vase Configuracin de un
servidor de aplicaciones en la pgina 468)
Nota: en el contexto de las aplicaciones Web, los trminos servidor Web y servidor de aplicaciones se
refieren a software y no a hardware.
Si desea utilizar una base de datos con la aplicacin, necesitar adems el siguiente software:
Un sistema de bases de datos
Un controlador de base de datos compatible con la base de datos
Para informacin sobre cmo configurar una base de datos para la aplicacin Web, vase
Conexin con una base de datos en la pgina 475.
Varias empresas que proporcionan alojamiento Web ofrecen planes que le permitirn utilizar su
software para probar e implementar aplicaciones Web. En algunos casos, puede instalar el software
necesario en el mismo equipo que Dreamweaver para realizar tareas de desarrollo. Tambin puede
instalarlo en un equipo de red (habitualmente en un equipo con Windows 2000 o XP) para que
otros desarrolladores puedan trabajar en el mismo proyecto.
468 Captulo 23: Configuracin de una aplicacin Web
Configuracin de un servidor Web
Para ejecutar aplicaciones Web, necesitar un servidor Web. Un servidor Web es una aplicacin de
software que suministra archivos en respuesta a las peticiones de los navegadores Web. En
ocasiones, tambin se hace referencia a un servidor Web como servidor HTTP. Entre los
servidores Web ms utilizados se incluyen Microsoft Internet Information Server (IIS), Netscape
Enterprise Server, Sun ONE Web Server y Apache HTTP Server.
Si no utiliza un servicio de alojamiento Web, elija un servidor Web e instlelo en el equipo local o
en un equipo remoto. Los usuarios de Windows que deseen desarrollar aplicaciones Web
ColdFusion pueden utilizar el servidor Web incluido en la edicin del desarrollador del servidor
de aplicaciones ColdFusion MX, que se puede instalar y utilizar gratuitamente. Para ms
informacin, consulte Instalacin de un servidor de aplicaciones ColdFusion en la pgina 469.
Otros usuarios de Windows pueden ejecutar un servidor Web en su equipo local instalando IIS;
los usuarios de Windows 98 pueden instalar Microsoft Personal Web Server (PWS), una versin
reducida de IIS. Es posible que ya haya instalado uno de estos servidores Web en su equipo.
Compruebe la estructura de carpetas para averiguar si contiene una carpeta denominada
C:\Inetpub o D:\Inetpub. PWS e IIS crean esta carpeta durante su instalacin. Si desea instalar
PWS o IIS, vase Instalacin de un servidor Web en Windows en el apartado Primeros pasos de
la Ayuda.
Las pginas ASP.NET slo funcionan con un servidor Web: Microsoft IIS 5 o posterior. Como
IIS 5 es un servicio de los sistemas operativos Windows 2000 y Windows XP Professional, slo
podr utilizar estas dos versiones de Windows para hospedar aplicaciones ASP.NET. Windows 98
no es compatible. No obstante, podr desarrollar (aunque no hospedar) aplicaciones ASP.NET en
cualquier equipo que ejecute Dreamweaver, incluido un Macintosh.
Si es usuario de Macintosh, puede utilizar un servicio de alojamiento Web o instalar el software
necesario en un equipo remoto. Tambin puede desarrollar localmente sitios PHP mediante el
servidor Web Apache y un servidor de aplicaciones PHP instalado con el sistema operativo. Para
ms informacin, consulte Instalacin de un servidor de aplicaciones PHP en la pgina 471.
Para informacin sobre cmo instalar y configurar otros servidores Web, vase la documentacin
del proveedor del servidor o solicite ayuda al administrador del sistema.
Configuracin de un servidor de aplicaciones
Para ejecutar aplicaciones Web, el servidor Web deber funcionar con un servidor de aplicaciones.
Un servidor de aplicaciones es una aplicacin de software que ayuda a un servidor Web a procesar
pginas dinmicas.
Eleccin de un servidor de aplicaciones
El servidor de aplicaciones que seleccione depende de varios factores, entre los que se incluyen el
presupuesto, la tecnologa de servidor que desea utilizar (ColdFusion, ASP.NET, ASP, JSP o PHP)
y el servidor Web elegido.
Presupuesto Algunos proveedores disponen de servidores de aplicaciones de gama alta que
resultan muy costosos de adquirir y administrar. Otros ofrecen soluciones ms econmicas y
sencillas (por ejemplo, Macromedia ColdFusion Server y JRun Server). Algunos servidores de
aplicaciones estn integrados en servidores Web (por ejemplo, Microsoft IIS) y otros pueden
descargarse gratuitamente de Internet (por ejemplo, Jakarta Tomcat y PHP).
Configuracin de un servidor de aplicaciones 469
Tecnologa de servidor Los servidores de aplicacin utilizan distintas tecnologas.
Dreamweaver admite cinco de ellas: ColdFusion, ASP.NET, ASP, JSP y PHP. Para ms
informacin, consulte Eleccin de una tecnologa de servidor en el apartado Primeros pasos de
la Ayuda. La siguiente tabla muestra algunos de los servidores de aplicaciones ms utilizados para
las cinco tecnologas de servidor admitidas por Dreamweaver:
Servidor Web La eleccin de un servidor de aplicaciones tambin puede depender del servidor
Web que desee utilizar. Compruebe que la aplicacin es compatible con el servidor Web. Por
ejemplo, .NET Framework slo funciona con IIS 5 o posterior.
Instalacin de un servidor de aplicaciones ColdFusion
Para ejecutar pginas de ColdFusion, necesitar el servidor de aplicaciones ColdFusion. Este
servidor est disponible para los sistemas operativos Windows, Linux, Solaris y HP-UX.
Los usuarios de Windows pueden descargar e instalar una edicin de desarrollador completa, la
edicin del desarrollador de ColdFusion MX desde el sitio Web de Macromedia en
www.macromedia.com/software/coldfusion/. Tambin dispone de una copia de ColdFusion MX
Server Developer Edition en el CD de Dreamweaver (slo para Windows).
Nota: Developer Edition es una edicin de uso no comercial que se utiliza para desarrollar y probar
aplicaciones Web. No tiene licencia para implementarla. Admite peticiones del host local y una
direccin IP remota, e incluye todas las funciones de la edicin Enterprise Edition para empresas
excepto Macromedia ClusterCATS y la bsqueda de documentos Verity de 10K. Despus de 30
das, slo admitir peticiones de una direccin IP, pero puede seguir utilizndola para desarrollar y
probar todo el tiempo que la necesite. El software no caduca.
Durante la instalacin, puede configurar ColdFusion para utilizar el servidor Web incorporado en
ColdFusion u otro servidor instalado en el sistema. Por lo general, es mejor que el entorno de
desarrollo y el entorno de produccin se correspondan lo mximo posible. Por tanto, si dispone de
un servidor Web como Microsoft IIS en el equipo de desarrollo, seleccinelo en lugar de utilizar el
servidor Web de ColdFusion incorporado.
Nota: si opta por seleccionar el servidor Web de ColdFusion, podr configurar manualmente
ColdFusion ms adelante para utilizarlo con IIS. Para ms informacin, consulte el sitio Web de
Macromedia en www.macromedia.com/go/coldfusion_iis4/.
Tecnologa de servidor Servidor de aplicaciones
ColdFusion Macromedia ColdFusion MX
ASP.NET Microsoft IIS 6 con .NET Framework
ASP Microsoft IIS o PWS
SUN ONE Active Server Pages
JSP Macromedia JRun
Sun ONE Application Server
IBM WebSphere
Apache Tomcat
BEA WebLogic
PHP Servidor PHP
Los usuarios de Macintosh pueden utilizar un servicio de alojamiento Web con un plan
ColdFusion o instalar ColdFusion en un equipo Windows, Linux, Solaris o HP-UX remoto que
ejecute un servidor Web. Tambin puede instalar ColdFusion en un equipo Mac OS X que
ejecute un servidor J2EE, como JRun o Tomcat. Para ms informacin, consulte el sitio Web de
Macromedia en www.macromedia.com/go/coldfusion_macintosh/.
Despus de instalar el servidor de aplicaciones, cree una carpeta raz para la aplicacin Web. Vase
Creacin de una carpeta raz para la aplicacin en la pgina 471.
Instalacin de un servidor de aplicaciones ASP.NET
Para ejecutar pginas ASP.NET, necesitar el siguiente software:
Un equipo Windows 2000 o Windows XP Professional que ejecute IIS 5 o posterior
Microsoft .NET Framework, que puede descargarse desde el sitio Web de Microsoft
Descargue .NET Framework del sitio Web de Microsoft en http://asp.net/download.aspx y siga
las instrucciones de instalacin del sitio Web.
Se recomienda encarecidamente instalar tambin el paquete Microsoft Data Access Components
(MDAC) 2.7 despus de instalar .NET Framework. Puede descargar e instalar gratuitamente el
paquete MDAC 2.7 del sitio Web de Microsoft en www.microsoft.com/data/download.htm.
Los usuarios de Macintosh o Windows 98 pueden utilizar un servicio de alojamiento Web con un
plan ASP.NET o instalar .NET Framework en un equipo Windows 2000 o Windows XP
Professional remoto que ejecute IIS 5 o posterior.
Despus de instalar .NET Framework, cree una carpeta raz para la aplicacin Web. Vase
Creacin de una carpeta raz para la aplicacin en la pgina 471.
Instalacin de un servidor de aplicaciones ASP
Para ejecutar pginas ASP, necesitar un servidor de aplicaciones compatible con Microsoft Active
Server Pages 2.0. Entre los ms utilizados se encuentran los siguientes:
Microsoft IIS, que se incluye en Windows 2000 y Windows XP Professional.
Microsoft PWS, una versin reducida de IIS que puede ejecutarse en equipos Windows 98.
Sun ONE Active Server Pages, versiones del cual se ejecutan en Windows NT o 2000, Linux o
Solaris. Para ms informacin, consulte el sitio Web de Sun en wwws.sun.com/software/
chilisoft/index.html.
Los usuarios de Windows pueden instalar y ejecutar IIS o PWS en un equipo local. Para
instrucciones, vase Instalacin de un servidor Web en el apartado Primeros pasos de la Ayuda.
Los usuarios de Macintosh pueden utilizar un servicio de alojamiento Web con un plan ASP o
instalar IIS en un equipo remoto.
Despus de instalar IIS o PWS, cree una carpeta raz para la aplicacin Web. Vase Creacin de
una carpeta raz para la aplicacin en la pgina 471.
Creacin de una carpeta raz para la aplicacin 471
Instalacin de un servidor de aplicaciones JSP
Para ejecutar pginas JSP, necesitar un servidor de aplicaciones compatible con JavaServer Pages.
Entre los ms utilizados se encuentran los siguientes:
Macromedia JRun para Windows, Mac OS X, Linux, Solaris o UNIX. Puede descargar una
versin de prueba de JRun del sitio Web de Macromedia en www.macromedia.com/software/
jrun/.
Tomcat para Windows y UNIX (incuido Mac OS X). Puede descargar una copia de Tomcat
del sitio Web Jakarta Project en la direccin http://jakarta.apache.org/tomcat/. Para ms
informacin sobre la instalacin de Tomcat en un Macintosh, consulte el sitio Web de Apple
en http://developer.apple.com/internet/java/tomcat1.html.
IBM WebSphere para distintos sistemas operativos. Puede descargar una versin de prueba del
sitio Web de IBM en http://www7b.software.ibm.com/wsdd/downloads/
WASsupport.html#download.
Despus de instalar un servidor de aplicaciones JSP, cree una carpeta raz para la aplicacin Web.
Vase Creacin de una carpeta raz para la aplicacin en la pgina 471.
Instalacin de un servidor de aplicaciones PHP
Para ejecutar pginas PHP, necesitar el servidor de aplicaciones PHP, una aplicacin de software
de cdigo fuente abierto que est disponible en la Web. Existen ediciones de esta aplicacin para
los sistemas Windows, Linux, UNIX, HP-UX, Solaris y Mac OS X. Los servidores de aplicaciones
son compatibles con los siguientes servidores Web: Apache, Microsoft IIS o PWS, Netscape y Sun
ONE, y casi todos los servidores Web que admiten la interfaz CGI.
Puede descargar un servidor de aplicaciones PHP del sitio Web PHP en www.php.net/
downloads.php. Para informacin sobre cmo instalar el servidor, vase la documentacin de
PHP que tambin puede descargarse del sitio Web de PHP en www.php.net/download-docs.php.
Los usuarios de Macintosh, pueden utilizar el servidor de aplicaciones PHP instalado con el
sistema operativo. Para ms informacin, consulte los siguientes sitios Web:
www.macromedia.com/go/php_macintosh/
http://developer.apple.com/internet/macosx/php.html
Despus de instalar el servidor de aplicaciones PHP, cree una carpeta raz para la aplicacin Web.
Creacin de una carpeta raz para la aplicacin
Despus de suscribirse en una empresa de servicios de alojamiento Web o configurar el software
del servidor, cree una carpeta raz para su aplicacin Web en el equipo que vaya a ejecutar el
servidor Web.
Compruebe que la carpeta est publicada por el servidor Web, es decir, que el servidor Web puede
suministrar cualquier archivo de esta carpeta o sus subcarpetas en respuesta a una peticin HTTP
de un navegador Web. Por ejemplo, en un equipo que ejecute ColdFusion MX, podr
suministrarse a un servidor Web cualquier archivo de la carpeta \CFusionMX\wwwroot o de sus
subcarpetas.
A continuacin, se indican las carpetas raz predeterminadas de los servidores Web seleccionados:
Para probar el servidor Web, coloque una pgina HTML de prueba en la carpeta raz
predeterminada e intente abrirla introduciendo el URL de la pgina en un navegador. El URL se
compone del nombre de dominio, como www.mysite.com, y el nombre del archivo de la pgina
HTML, como se indica a continuacin:
www.mysite.com/testpage.htm
Si el servidor Web se ejecuta en un equipo local, puede utilizar localhost en lugar del nombre de
dominio. Utilizando el ejemplo anterior, introduzca el URL localhost siguiente, segn cul sea el
servidor Web:
Nota: de forma predeterminada, el servidor Web de ColdFusion MX se ejecuta en el puerto 8500 y
el servidor Web Jarkarta Tomcat, en el puerto 8080.
Si la pgina no se abre como se esperaba, compruebe los siguientes errores posibles:
El servidor Web no se ha iniciado. Consulte las instrucciones de inicio en la documentacin del
servidor Web.
La extensin del archivo no es .htm o .html.
Ha indicado la ruta de archivo de la pgina (por ejemplo,
c:\CFusionMX\wwwroot\testpage.htm), no su URL (por ejemplo, http://localhost:8500/
testpage.htm), en el cuadro de texto Direccin del navegador.
El URL contiene un error de escritura. Compruebe si hay errores y no introduzca una barra
diagonal despus del nombre de archivo, como http://localhost:8080/testpage.htm/.
Tras crear una carpeta raz para la aplicacin, defina un sitio de Dreamweaver para administrar los
archivos.
Servidor Web Carpeta raz predeterminada
ColdFusion MX \CFusionMX\wwwroot
IIS o PWS \Inetpub\wwwroot
Apache (Windows) \apache\htdocs
Apache (Macintosh) Users:MyUserName:Sites
Jakarta Tomcat (Windows) \jakarta-tomcat-4.x.x\webapps\ROOT\
Servidor Web URL Localhost
ColdFusion MX http://localhost:8500/testpage.htm
IIS o PWS http://localhost/testpage.htm
Apache (Windows) http://localhost:80/testpage.htm
Apache (Macintosh) http://localhost/~MyUserName/testpage.htm (donde
MyUserName es su nombre de usuario Macintosh)
Jakarta Tomcat (Windows) http://localhost:8080/testpage.htm
Definicin de un sitio de Dreamweaver 473
Definicin de un sitio de Dreamweaver
Despus de configurar el sistema para que desarrolle aplicaciones Web, defina un sitio de
Dreamweaver para que administre los archivos.
Antes de empezar, compruebe que se cumplen los siguientes requisitos:
Tiene acceso a un servidor Web. El servidor Web puede ejecutarse en un equipo local, en un
equipo remoto (por ejemplo, un servidor de desarrollo) o en un servidor mantenido por una
empresa que ofrezca alojamiento Web. Vase Configuracin de un servidor Web en
la pgina 468.
Un servidor de aplicaciones est instalado y se ejecuta en el sistema donde se encuentra el
servidor Web. Vase Configuracin de un servidor de aplicaciones en la pgina 468.
Ha creado una carpeta raz para la aplicacin Web en el sistema que ejecuta el servidor Web.
Para ms informacin, consulte Creacin de una carpeta raz para la aplicacin en
la pgina 471.
Para definir un sitio de Dreamweaver para la aplicacin Web, siga estos tres pasos:
1 Defina una carpeta en el disco duro como carpeta local de Dreamweaver, donde se almacenarn
las copias de trabajo de los archivos del sitio (vase Definicin de una carpeta local en
la pgina 473).
2 Defina una carpeta en el equipo que ejecuta el servidor Web como carpeta remota de
Dreamweaver (vase Definicin de una carpeta remota en la pgina 474).
3 Especifique dnde debera enviar Dreamweaver las pginas dinmicas para que se procesen
mientras trabaja (vase Especificacin de dnde pueden procesarse las pginas dinmicas en
la pgina 474).
Una vez definido el sitio de Dreamweaver, podr empezar a crear la aplicacin Web.
Definicin de una carpeta local
Puede definir una carpeta local de Dreamweaver para cada nueva aplicacin Web creada. sta ser
la carpeta utilizada para almacenar copias de trabajo de los archivos del sitio en el disco duro.
Adems, podr administrar archivos y transferirlos entre el disco local y el servidor Web con un
solo clic.
Para definir una carpeta local de Dreamweaver:
1 Cree una carpeta en el disco local para almacenar las copias de trabajo de los archivos.
Si lo desea, cree subcarpetas para almacenar archivos de imagen y otros activos.
2 En Dreamweaver, seleccione Sitio > Administrar sitios, haga clic en el botn Nuevo del cuadro
de dilogo Administrar sitios y seleccione Sitio en el men contextual.
3 Si se muestra el asistente, haga clic en Avanzadas y seleccione Datos locales en la lista Categora
(que debe ser la opcin predeterminada).
4 En el cuadro de texto Nombre del sitio, introduzca un nombre descriptivo para el sitio de
Dreamweaver.
5 En el cuadro de texto Carpeta raz local, especifique la carpeta creada en el paso 1.
Puede introducir una ruta o hacer clic en el icono de la carpeta para examinar y seleccionar la
carpeta.
6 Si lo desea, complete las dems opciones de la categora Datos locales (no son imprescindibles
para que el sitio funcione).
Para ms informacin sobre estas opciones, haga clic en el botn Ayuda del cuadro de dilogo.
Deje abierto el cuadro de dilogo Definicin del sitio. A continuacin, deber especificar una
carpeta remota.
Definicin de una carpeta remota
Despus de definir una carpeta local, puede definir una carpeta remota para el sitio de
Dreamweaver. La carpeta remota es la creada para la aplicacin Web en el servidor Web (vase
Creacin de una carpeta raz para la aplicacin en la pgina 471).
No es necesario definir una carpeta remota si la carpeta definida en Definicin de una carpeta
local en la pgina 473 puede hacer las veces de carpeta raz de la aplicacin Web. (Lo cual implica
que el servidor Web se ejecuta en el equipo local.)
Para definir una carpeta remota de Dreamweaver:
1 Si el cuadro de dilogo Definicin del sitio no est abierto, debe abrirlo; para hacerlo, seleccione
Sitio > Administrar sitios, seleccione su sitio de la lista del cuadro de dilogo Administrar sitios
y, a continuacin, haga clic en Editar.
2 Si se muestra el asistente, haga clic en Avanzadas y seleccione Datos remotos en la lista
Categora.
Aparecer el cuadro de dilogo Datos remotos.
3 En el men emergente Acceso, elija una de las siguientes opciones: Local/red, FTP o RDS.
La opcin elegida dir a Dreamweaver cmo desea transferir archivos entre la carpeta local y la
carpeta remota.
Nota: para utilizar RDS, la carpeta remota debe estar en un equipo que ejecute ColdFusion.
Tambin puede enviar los archivos a una aplicacin SourceSafe seleccionando Base de datos
SourceSafe. (SourceSafe se utiliza para mantener un control de versiones de los archivos.) Si
elige esta opcin, deber definir otra carpeta independiente. Para instrucciones, vase
Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 474.
4 Una vez seleccionado el mtodo de acceso, establezca las opciones de acceso apropiadas.
Para ms informacin sobre estas opciones, haga clic en el botn Ayuda del cuadro de dilogo.
Deje abierto el cuadro de dilogo Definicin del sitio. A continuacin, deber definir una carpeta
donde procesar las pginas dinmicas.
Especificacin de dnde pueden procesarse las pginas dinmicas
Despus de definir la carpeta remota en Dreamweaver, especifique la carpeta donde se pueden
procesar las pginas dinmicas. Dreamweaver utilizar esta carpeta para generar contenido
dinmico y conectar con las bases de datos mientras trabaja.
Normalmente se especifica la carpeta raz que se cre en el servidor Web (vase Creacin de una
carpeta raz para la aplicacin en la pgina 471) porque quizs el servidor tambin ejecuta un
servidor de aplicaciones que puede gestionar las pginas dinmicas.
Nota: la carpeta raz puede ser local o remota, dependiendo de dnde se ejecute el servidor Web.
Conexin con una base de datos 475
Para especificar dnde puede Dreamweaver procesar las pginas dinmicas:
1 Si el cuadro de dilogo Definicin del sitio no est abierto, debe abrirlo; para hacerlo, seleccione
Sitio > Administrar sitios, seleccione su sitio de la lista del cuadro de dilogo Administrar sitios
y, a continuacin, haga clic en Editar.
2 Si se muestra el asistente, haga clic en Avanzadas y seleccione Servidor de prueba en la lista
Categora.
Aparecer el cuadro de dilogo Servidor de prueba. Dreamweaver necesita los servicios de un
servidor de prueba para generar y mostrar contenido dinmico mientras trabaja. El servidor de
prueba puede ser el equipo local, un servidor de desarrollo, un servidor en funcionamiento o
un servidor de produccin. Mientras que pueda procesar el tipo de pginas dinmicas que tiene
intencin de desarrollar, el servidor elegido no importa.
Tras definir una sitio de Dreamweaver, puede conectarse a una base de datos.
Conexin con una base de datos
Si desea utilizar una base de datos con la aplicacin Web, deber conectarse antes con ella. Para
informacin general sobre las conexiones de bases de datos, vase Aspectos bsicos de las
conexiones de bases de datos en la pgina 776.
Dreamweaver gestiona las conexiones de base de datos de forma diferente en funcin de la
tecnologa de servidor seleccionada. Vanse los siguientes captulos:
477
CAPTULO 24
Conexiones de base de datos para desarrolladores
de ColdFusion
Puede conectarse a las bases de datos al desarrollar aplicaciones de Macromedia ColdFusion con
Macromedia Dreamweaver MX 2004.
En este captulo se presupone que ha configurado una aplicacin Web de ColdFusion (vase
Captulo 23, Configuracin de una aplicacin Web, en la pgina 467). Asimismo, se presupone
que ha configurado una base de datos en su equipo local o en un sistema al cual tiene acceso a
travs de la red o del FTP.
Para conectarse a la base de datos de muestra suministrada por Dreamweaver, vase
Configuracin del sitio ColdFusion de muestra en el apartado Primeros pasos de la Ayuda. Para
obtener ms informacin sobre bases de datos y conexiones de base de datos, vase Apndice A,
Gua de bases de datos para principiantes, en la pgina 769.
Al desarrollar una aplicacin Web de ColdFusion en Dreamweaver, deber conectar con una base
de datos seleccionando una fuente de datos ColdFusion definida en ColdFusion Administrator, la
consola de administracin del servidor.
Antes de conectar con una base de datos, compruebe que Dreamweaver conoce la ubicacin de las
fuentes de datos ColdFusion. Para recuperar las fuentes de datos ColdFusion en tiempo de diseo,
Dreamweaver incluye scripts en una carpeta del equipo que ejecuta ColdFusion. Deber
especificar dicha carpeta en la categora Servidor de prueba del cuadro de dilogo Definicin del
sitio. Para ms informacin, consulte Especificacin de dnde pueden procesarse las pginas
dinmicas en la pgina 474.
A continuacin, cree una fuente de datos ColdFusion en ColdFusion Administrator (si no existe
ninguna). Para ms informacin, consulte Creacin de una fuente de datos ColdFusion en
la pgina 478.
Tras crear una fuente de datos ColdFusion, podr utilizarla en Dreamweaver para conectar con la
base de datos. Para ms informacin, consulte Conexin con la base de datos en Dreamweaver
en la pgina 478.
478 Captulo 24: Conexiones de base de datos para desarrolladores de ColdFusion
Creacin de una fuente de datos ColdFusion
Para poder conectar con una base de datos, deber crear antes una fuente de datos ColdFusion en
ColdFusion Administrator, la consola de administracin del servidor.
Nota: si ejecuta ColdFusion 4 o 5 en un equipo Windows, podr tambin configurar un DSN en el
equipo. En ColdFusion 4 o 5, los DSN del sistema se consideran automticamente fuentes de datos.
Para ms informacin, consulte Utilizacin de un DSN en la pgina 780.
Para crear una fuente de datos ColdFusion:
1 Abra una pgina de ColdFusion en Dreamweaver.
2 En el panel Bases de datos (Ventana > Bases de datos) de Dreamweaver, haga clic en el icono
Modificar fuentes de datos de la barra de herramientas del panel.
Se abrir ColdFusion Administrator en una ventana del navegador.
3 Conecte con ColdFusion Administrator y cree la fuente de datos.
Para instrucciones, vase la documentacin de ColdFusion incluida en Dreamweaver (Ayuda >
Utilizacin de ColdFusion).
Para crear la fuente de datos ColdFusion, deber proporcionar algunos valores de parmetros. Para
conocer los valores de parmetros especficos del controlador de base de datos, vase la
documentacin del fabricante del controlador o pregunte al administrador del sistema.
Una vez creada la fuente de datos ColdFusion, podr utilizarla en Dreamweaver.
Conexin con la base de datos en Dreamweaver
Tras crear una fuente de datos ColdFusion en ColdFusion Administrator, podr utilizarla en
Dreamweaver para conectar con la base de datos.
Abra cualquier pgina de ColdFusion en Dreamweaver y, a continuacin, abra el panel Bases de
datos (Ventana > Bases de datos). Las fuentes de datos ColdFusion deben aparecer en el panel.
Si las fuentes de datos no aparecen, asegrese de completar la lista de verificacin en el panel.
Asegrese tambin de que Dreamweaver sepa dnde encontrar las fuentes de datos de
ColdFusion. En la categora Servidor de prueba del cuadro de dilogo Definicin del sitio,
especifique la carpeta raz del sitio en el equipo que ejecuta ColdFusion. Para ms informacin,
consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 474.
Temas relacionados
Edicin o eliminacin de una conexin de base de datos
Las fuentes de datos ColdFusion se editan o eliminan en ColdFusion Administrator. En el panel
Bases de datos (Ventana > Bases de datos) de Dreamweaver, haga clic en el icono Modificar
fuentes de datos de la barra de herramientas del panel. Se abrir ColdFusion Administrator en una
ventana del navegador. Conecte y modifique la fuente de datos. Para instrucciones, vase el
apartado Utilizacin de ColdFusion de la Ayuda.
Para evitar errores al eliminar o cambiar el nombre de una fuente de datos ColdFusion, deber
actualizar todos los juegos de registros que utilicen la antigua fuente de datos en Dreamweaver;
para ello, haga doble clic en el nombre del juego de registros en el panel Vinculaciones y
seleccione una nueva fuente de datos.
479
CAPTULO 25
de ASP.NET
Para utilizar una base de datos con una aplicacin ASP.NET, deber crear una conexin de base de
datos en Macromedia Dreamweaver MX 2004. En este captulo se describe cmo hacerlo.
Nota: si est desarrollando aplicaciones ASP (Active Server Pages) de Microsoft, vase
Captulo 26, Conexiones de base de datos para desarrolladores de ASP, en la pgina 485.
En este captulo se presupone que ha configurado una aplicacin ASP.NET (vase Captulo 23,
Configuracin de una aplicacin Web, en la pgina 467). Asimismo, se presupone que ha
configurado una base de datos en su equipo local o en un sistema al cual tiene acceso a travs de la
red o del FTP.
Configuracin para el sitio ASP.NET de muestra en el apartado Primeros pasos de la Ayuda.
Para obtener ms informacin sobre bases de datos y conexiones de base de datos, vase
Apndice A, Gua de bases de datos para principiantes, en la pgina 769.
En esta seccin se describe cmo conectar con una base de datos durante el desarrollo de una
aplicacin ASP.NET en Dreamweaver.
Antes de conectar con una base de datos, debe obtener un proveedor de OLE DB para su base de
datos. Si desea conectar con una base de datos Microsoft SQL Server, puede utilizar el proveedor
de datos administrados para SQL Server, suministrado por .NET Framework. Para ms
informacin, consulte Obtencin de un proveedor de base de datos OLE en la pgina 479.
Una vez instalado el proveedor de la base de datos, puede utilizarlo para conectar con la misma.
Para instrucciones, vanse las siguientes secciones:
Creacin de una conexin de base de datos de ASP.NET en Dreamweaver en la pgina 480
Creacin de una conexin utilizando Propiedades del vnculo de datos en la pgina 480
Obtencin de un proveedor de base de datos OLE
Una aplicacin ASP.NET debe conectar con una base de datos a travs de un proveedor de OLE
DB. ste acta como un intrprete que permite a la aplicacin ASP.NET comunicarse con una
base de datos. Para ms informacin sobre OLE DB y la funcin de los proveedores de base de
datos, consulte Comunicacin con la base de datos en la pgina 776.
480 Captulo 25: Conexiones de base de datos para desarrolladores de ASP.NET
Si desea conectar con una base de datos Microsoft SQL Server, puede utilizar el proveedor de
datos administrados para SQL Server, suministrado por .NET Framework. Este proveedor, que ha
sido optimizado para SQL Server y es muy rpido, se instala junto con .NET Framework.
Si desea conectar con otra base de datos distinta de SQL Server, compruebe que en el equipo que
ejecuta .NET Framework hay instalado un proveedor de OLE DB para la base de datos. Puede
obtener un proveedor OLE DB para Microsoft Access descargando e instalando el paquete
Microsoft Data Access Components (MDAC) 2.7 del sitio Web de Microsoft en
www.microsoft.com/data/download.htm.
Puede descargar proveedores OLE DB para bases de datos Oracle del sitio Web de Oracle en
http://otn.oracle.com/software/tech/windows/ole_db/content.html (es obligatorio registrarse).
Tambin podr adquirir proveedores OLE DB de otros proveedores independientes.
Cuando disponga de un proveedor para la base de datos, podr utilizarlo para crear conexiones de
base de datos en Dreamweaver.
Creacin de una conexin de base de datos de ASP.NET en Dreamweaver
Despus de obtener un proveedor de OLE DB para la base de datos , puede utilizarlo para crear
una conexin de base de datos en Dreamweaver.
Otra opcin consiste en utilizar el cuadro de dilogo Propiedades del vnculo de datos de
Microsoft para que le ayude a crear la conexin. Para instrucciones, vase Creacin de una
conexin utilizando Propiedades del vnculo de datos en la pgina 480.
Para crear una conexin de base de datos para ASP.NET:
1 Abra una pgina ASP.NET en Dreamweaver y, a continuacin, abra el panel Bases de datos
(Ventana > Bases de datos).
En el panel se mostrarn las conexiones definidas para dicho sitio.
2 Haga clic en el botn de signo ms (+) del panel y seleccione Conexin de base de datos OLE
o Conexin con SQL Server en el men emergente.
Nota: seleccione Conexin con SQL Server si desea slo conectar con una base de datos
Microsoft SQL Server.
Aparecer el cuadro de dilogo Conexin de base de datos OLE o Conexin con SQL Server.
La nueva conexin se mostrar en el panel Bases de datos.
Temas relacionados
Creacin de una conexin utilizando Propiedades del vnculo de datos
Despus de obtener un proveedor de base de datos OLE para la base de datos (vase Obtencin
de un proveedor de base de datos OLE en la pgina 479), podr crear una conexin de base de
datos utilizando el cuadro de dilogo Propiedades del vnculo de datos de Windows.
Importante: slo podr utilizar este mtodo si el proveedor de OLE DB que desea utilizar est
instalado en el mismo equipo Windows que Dreamweaver.
Para crear una conexin de base de datos utilizando Propiedades del vnculo de datos:
2 Haga clic en el botn del signo ms (+) del panel y seleccione Conexin de base de datos OLE
en el men emergente.
Aparecer el cuadro de dilogo Conexin de base de datos OLE.
Aparecer el cuadro de dilogo Propiedades del vnculo de datos. Este cuadro de dilogo de
Windows muestra los proveedores de OLE DB instalados actualmente en el equipo Windows
que ejecuta Dreamweaver.
4 Complete el cuadro de dilogo y haga clic en Aceptar.
Dreamweaver insertar una cadena de conexin en el cuadro de dilogo Conexin de base de
datos OLE.
5 Haga clic en Prueba.
Dreamweaver intentar conectar con la base de datos. Si falla la conexin, compruebe de nuevo
la cadena de conexin. Si la conexin contina fallando, compruebe la configuracin de la
carpeta que utiliza Dreamweaver para procesar las pginas dinmicas (vase Especificacin de
dnde pueden procesarse las pginas dinmicas en la pgina 474).
La nueva conexin se muestra en el panel Bases de datos.
Temas relacionados
Ejemplos de parmetros de conexin de base de datos OLE para ASP.NET
Una cadena de conexin de base de datos OLE combina toda la informacin que necesita la
aplicacin ASP.NET para conectar con una base de datos. Dreamweaver inserta esta cadena en los
scripts del lado del servidor de la pgina que el servidor de aplicaciones procesar posteriormente.
Dreamweaver proporciona plantillas de cadenas para crear cadenas de conexin de base de datos
OLE para aplicaciones ASP.NET (vase Creacin de una conexin de base de datos de ASP.NET
en Dreamweaver en la pgina 480). Para crear una cadena de conexin, deber sustituir los
marcadores de posicin de la plantilla por los valores de parmetros solicitados. En esta seccin se
ofrecen parmetros de muestra para bases de datos Microsoft Access y SQL Server.
Nota: para conocer los valores de parmetros especficos de otras bases de datos, vase la
documentacin del fabricante de la base de datos o pregunte al administrador del sistema.
Ejemplo 1: tiene instalado .NET Framework en el equipo local y desea conectar con una base de
datos Microsoft Access llamada sdSchool.mdb que se encuentra en la siguiente carpeta del disco
duro: c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb. Los parmetros para crear esta
cadena de conexin son los siguientes:
Proveedor=Microsoft.Jet.OLEDB.4.0;
Fuente de datos=c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb;
Ejemplo 2: utiliza .NET Framework en un servidor de desarrollo remoto y desea conectar con
una base de datos Microsoft Access llamada mtnSchool.mdb que se encuentra en la siguiente
carpeta del servidor: d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb. Los
parmetros para crear esta cadena de conexin son los siguientes:
Proveedor=Microsoft.Jet.OLEDB.4.0;
Fuente de datos=d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb;
Ejemplo 3: utiliza .NET Framework en un servidor de desarrollo de red llamado Savant y desea
conectar con una base de datos Microsoft SQL Server llamada pubs en el servidor. Su nombre de
usuario de SQL Server es sa y no hay contrasea. Si utiliza el proveedor de datos administrados
para SQL Server (es decir, si eligi Conexin con SQL Server en el panel Bases de datos), los
parmetros para crear esta cadena de conexin son los siguientes:
Fuente de datos=Savant;
Catlogo inicial=pubs;
ID de usuario=sa;
Contrasea=;
Al crear una conexin de base de datos, Dreamweaver almacena la informacin de conexin en un
archivo de inclusin (include) en la subcarpeta Connections de la carpeta raz del sitio local.
Puede editar o eliminar la informacin de conexin del archivo manualmente o como se indica a
continuacin.
Para actualizar una conexin:
En el panel aparece una lista de conexiones.
haga clic (Macintosh) en la conexin y seleccione Editar conexin en el men emergente.
Se muestra el cuadro de dilogo utilizado para crear la conexin.
3 Realice los cambios que desee y haga clic en Aceptar.
Dreamweaver actualiza automticamente el archivo de inclusin (include) que, a su vez, actualiza
automticamente todas las pginas del sitio que utilicen la conexin.
Si cambia el nombre de una conexin, actualice cada juego de registros que utilice el nombre de
conexin antiguo haciendo doble clic en el juego de registros del panel Vinculaciones y
seleccionando el nombre de la nueva conexin en el cuadro de dilogo Conjunto de datos.
Para eliminar una conexin:
haga clic (Macintosh) en la conexin y seleccione Eliminar conexin en el men emergente.
3 Confirme que desea eliminar la conexin.
Edicin o eliminacin de una conexin de base de datos 483
Nota: para evitar errores en la eliminacin de una conexin, deber actualizar todos los conjuntos de
datos que utilicen la antigua conexin haciendo doble clic en el nombre del conjunto de datos en el
panel Vinculaciones y seleccionando una nueva conexin en el cuadro de dilogo Conjunto de
datos.
485
CAPTULO 26
de ASP
Para utilizar una base de datos con la aplicacin ASP (Active Server Pages) de Microsoft, deber
crear una conexin de base de datos en Macromedia Dreamweaver MX 2004. Este captulo
describe cmo crear dicha conexin de base de datos.
Nota: si est desarrollando aplicaciones ASP.NET, vase Captulo 25, Conexiones de base de
datos para desarrolladores de ASP.NET, en la pgina 479.
En este captulo se presupone que ha configurado una aplicacin ASP (vase Captulo 23,
configurado una base de datos en su equipo local o en un sistema al cual tiene acceso a travs de la
red o del FTP.
Para conectar con la base de datos de muestra proporcionada por Dreamweaver, vase
Configuracin del sitio ASP de muestra en el apartado Primeros pasos de la Ayuda. Para obtener
ms informacin sobre bases de datos y conexiones de base de datos, vase Apndice A, Gua de
bases de datos para principiantes, en la pgina 769.
486 Captulo 26: Conexiones de base de datos para desarrolladores de ASP
Conexiones de base de datos en ASP
Una aplicacin ASP debe conectarse a una base de datos mediante un controlador ODBC o un
proveedor OLE DB. La creacin de una conexin de base de datos OLE puede aumentar la
velocidad de la conexin.
Conexiones de base de datos con ASP
Una aplicacin ASP debe conectar con una base de datos a travs de un controlador ODBC
(Controlador de conectividad de base de datos abierta, Open Database Connectivity) o de un
proveedor OLE DB (Base de datos de vinculacin e incrustacin de objetos, Object Linking and
Embedding Database). El controlador o proveedor acta como un intrprete que permite que la
aplicacin Web se comunique con la base de datos. Para ms informacin sobre la funcin de los
controladores de base de datos, consulte Comunicacin con la base de datos en la pgina 776.
La siguiente tabla muestra algunos de los controladores que se pueden utilizar con bases de datos
Microsoft Access, Microsoft SQL Server y Oracle:
Puede utilizar un DSN (Nombre de fuente de datos, Data Source Name) o una cadena de
conexin para conectarse a la base de datos.
Un DSN es un identificador de una palabra, como myConnection, que seala a la base de datos y
contiene toda la informacin necesaria para conectar con ella. Un DSN se define en Windows.
Puede utilizar un DSN si est conectando a travs de un controlador ODBC instalado en un
sistema Windows. Para instrucciones detalladas, vase Creacin de una conexin con DSN en
la pgina 487.
Una cadena de conexin es una expresin codificada manualmente que identifica la base de datos
y contiene la informacin necesaria para conectar con ella. El texto siguiente es un ejemplo:
Driver={SQL Server};Server=Socrates;Database=AcmeMktg;
UID=wiley;PWD=roadrunner
Debe utilizar una cadena de conexin si se conecta con la base de datos mediante uno de los
siguientes elementos:
Un proveedor OLE DB
Un controlador ODBC que no est instalado en un sistema Windows
Para instrucciones detalladas, vanse las siguientes secciones:
Creacin de una conexin sin DSN en la pgina 490
Conexin con una base de datos en un ISP en la pgina 491
Nota: tambin puede utilizar una cadena de conexin si conecta a travs de un controlador ODBC
instalado en un sistema Windows, pero en tal caso, resulta ms sencillo utilizar un DSN.
Base de datos Controlador de base de datos
Microsoft Access Controlador de Microsoft Access (ODBC)
Proveedor de Microsoft Jet para Access (OLE DB)
Microsoft SQL Server Controlador de Microsoft SQL Server (ODBC)
Proveedor de Microsoft SQL Server (OLE DB)
Oracle Controlador de Microsoft para Oracle (ODBC)
Proveedor de OLE DB para Oracle
Creacin de una conexin con DSN 487
Conexiones de base de datos OLE
Puede utilizar un proveedor OLE DB para comunicar con la base de datos. La creacin de una
conexin directa de base de datos OLE puede mejorar la velocidad de la conexin mediante la
eliminacin de la capa ODBC entre la aplicacin Web y la base de datos.
Si no especifica un proveedor OLE DB para la base de datos, ASP utilizar el proveedor OLE DB
predeterminado para controladores ODBC para comunicar con un controlador ODBC que, a su
vez, comunica con la base de datos.
OLE DB est disponible slo con Windows NT, 2000 o XP.
Existen distintos proveedores OLE DB para las distintas bases de datos. Puede obtener
proveedores OLE DB para Microsoft Access y SQL Server descargando e instalando los paquetes
Microsoft Data Access Components (MDAC) 2.5 y 2.7 en el equipo Windows que est
ejecutando IIS o PWS (cuando sea pertinente). Puede descargar gratuitamente los paquetes
MDAC del sitio Web de Microsoft en www.microsoft.com/data/download.htm.
Nota: instale MDAC 2.5 antes de instalar MDAC 2.7.
Puede descargar proveedores OLE DB para bases de datos Oracle del sitio Web de Oracle en
http://otn.oracle.com/software/tech/windows/ole_db/content.html (es obligatorio registrarse).
En Dreamweaver, una conexin de base de datos OLE se crea mediante la inclusin de un
parmetro Provider (proveedor) en una cadena de conexin (vase Creacin de una conexin
sin DSN en la pgina 490). Por ejemplo, a continuacin se incluyen parmetros para
proveedores OLE DB comunes para bases de datos Access, SQL Server y Oracle, respectivamente:
Provider=Microsoft.Jet.OLEDB.4.0;...
Provider=SQLOLEDB;...
Provider=OraOLEDB;...
Para conocer el valor del parmetro de su proveedor OLE DB, vase la documentacin del
fabricante o pregunte al administrador del sistema.
Temas relacionados
Creacin de una conexin con DSN
Puede utilizar un DSN para crear una conexin ODBC entre la aplicacin Web y la base de datos.
Un DSN es un nombre que contiene todos los parmetros necesarios para conectar con una base
de datos ODBC concreta. Para ms informacin, consulte Utilizacin de un DSN en
la pgina 780.
Nota: dado que slo puede especificar un controlador ODBC en un DSN, si desea utilizar un
proveedor OLE DB tendr que utilizar una cadena de conexin. Para ms informacin, consulte
Conexiones de base de datos OLE en la pgina 487.
Puede definir el DSN en un equipo Windows local o remoto.
Creacin de una conexin utilizando un DSN local
Puede utilizar un DSN definido en un equipo local para crear una conexin de base de datos en
Dreamweaver. Si desea utilizar un DSN local, el DSN debe estar definido en el equipo Windows
que est ejecutando Dreamweaver.
Para crear una conexin de base de datos con un DSN definido en el equipo local:
1 Defina un DSN en el equipo Windows que est ejecutando Dreamweaver.
Para instrucciones, vanse los artculos siguientes en el sitio Web de Microsoft:
Si el equipo se ejecuta en Windows 98, vase el artculo 300595 en http://
support.microsoft.com/default.aspx?scid=kb;en-us;300595
Si el equipo se ejecuta en Windows 2000, vase el artculo 300596 en http://
Si el equipo se ejecuta en Windows XP, vase el artculo 305599 en http://
2 Abra una pgina ASP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana
> Bases de datos).
Dreamweaver muestra todas las conexiones definidas para el sitio.
3 Haga clic en el botn de signo ms (+) en el panel y seleccione Nombre de fuente de datos
(DSN) en el men emergente.
Aparecer el cuadro de dilogo Nombre de fuente de datos (DSN).
4 Introduzca un nombre para la nueva conexin.
Nota: no utilice espacios ni caracteres especiales en el mismo.
5 En la parte inferior del cuadro de dilogo, seleccione la opcin Utilizando DSN local.
6 En el men emergente Nombre de fuente de datos (DSN), seleccione el DSN que desee utilizar.
Si desea utilizar un DSN local pero an no lo ha definido, haga clic en Definir para abrir el
Administrador de origen de datos ODBC de Windows. Para instrucciones, vase Creacin de
una conexin con DSN en la pgina 487.
7 Si es preciso, complete los cuadros de texto Nombre de usuario y Contrasea.
8 Si lo desea, restrinja el nmero de elementos de la base de datos que puede recuperar
Dreamweaver en tiempo de diseo haciendo clic en Avanzada e introduciendo un esquema o
nombre de catlogo.
Para ms informacin, consulte Restriccin de la informacin de base de datos que se muestra
en Dreamweaver en la pgina 524.
Nota: no se puede crear un esquema o catlogo en Microsoft Access.
Creacin de una conexin con DSN 489
el DSN. Si la conexin contina fallando, compruebe la configuracin de la carpeta que utiliza
Dreamweaver para procesar las pginas dinmicas (vase Especificacin de dnde pueden
procesarse las pginas dinmicas en la pgina 474).
Temas relacionados
Creacin de una conexin utilizando un DSN remoto
Puede utilizar un DSN definido en un equipo remoto para crear una conexin de base de datos en
Dreamweaver. Si desea utilizar un DSN remoto, el DSN debe estar definido en el equipo
Windows que est ejecutando el servidor de aplicaciones (probablemente IIS).
Para crear una conexin de base de datos con un DSN definido en un equipo remoto:
1 Defina un DSN en el sistema remoto que est ejecutando el servidor de aplicaciones.
Si el equipo remoto se ejecuta en Windows 98, vase el artculo 300595 en http://
Si el equipo remoto se ejecuta en Windows 2000, vase el artculo 300596 en http://
Si el equipo remoto se ejecuta en Windows XP, vase el artculo 305599 en http://
> Bases de datos).
3 Haga clic en el botn de signo ms (+) en el panel y seleccione Nombre de fuente de datos
(DSN) en el men emergente.
Aparecer el cuadro de dilogo Nombre de fuente de datos (DSN).
5 En la parte inferior del cuadro de dilogo, seleccione la opcin Utilizando DSN en el servidor
de prueba.
Los usuarios de Macintosh pueden pasar por alto este paso porque todas las conexiones de base
de datos utilizan DSN en el servidor de aplicaciones.
6 Introduzca el DSN.
Puede hacer clic en el botn DSN para conectar con el servidor y seleccionar uno de los DSN
definidos en l.
7 Si es preciso, complete los cuadros de texto Nombre de usuario y Contrasea.
8 Si lo desea, restrinja el nmero de elementos de la base de datos que puede recuperar
Dreamweaver en tiempo de diseo haciendo clic en Avanzada e introduciendo un esquema o
nombre de catlogo.
Para ms informacin, consulte Restriccin de la informacin de base de datos que se muestra
en Dreamweaver en la pgina 524.
Nota: no puede crear un esquema o catlogo en Microsoft Access.
el DSN. Si la conexin contina fallando, compruebe la configuracin de la carpeta que utiliza
Dreamweaver para procesar las pginas dinmicas (vase Especificacin de dnde pueden
procesarse las pginas dinmicas en la pgina 474).
Temas relacionados
Creacin de una conexin utilizando un DSN local en la pgina 488
Creacin de una conexin sin DSN
Puede utilizar una conexin sin DSN para crear una conexin ODBC u OLE DB entre la
aplicacin Web y la base de datos. Utilice una cadena de conexin para crear esta clase de
conexin. Una cadena de conexin combina toda la informacin que la aplicacin Web necesita
para conectar con la base de datos.
Para crear una conexin sin DSN:
> Bases de datos).
Dreamweaver muestra todas las conexiones definidas para el sitio, si las hubiera.
2 Haga clic en el botn de signo ms (+) del panel y seleccione Cadena de conexin personalizada
Aparecer el cuadro de dilogo Cadena de conexin personalizada.
Conexin con una base de datos en un ISP 491
Temas relacionados
Conexiones de base de datos OLE en la pgina 487
Utilizacin de una ruta virtual para conectar con una base de datos en la pgina 492
Conexin con una base de datos en un ISP
Si usted es un desarrollador de ASP que trabaja con un ISP (Proveedor de servicios de Internet,
Internet Service Provider), es probable que desconozca la ruta fsica de los archivos que carga,
incluyendo el archivo o archivos de base de datos. Si el ISP no define un DSN para usted o tarda
en hacerlo, debe encontrar una forma alternativa de crear las conexiones con los archivos de base
de datos. Una alternativa es crear una conexin sin DSN con un archivo de base de datos, pero
dicha conexin slo puede definirse si conoce la ruta fsica del archivo de base de datos en el
servidor del ISP.
En esta seccin se describe cmo obtener la ruta fsica de un archivo de base de datos en un
servidor utilizando el mtodo MapPath del objeto de servidor ASP.
Nota: las tcnicas que se describen en este captulo son aplicables slo si la base de datos est
basada en archivos, como la base de datos Microsoft Access, donde los datos se almacenan en un
archivo .mdb.
Aspectos bsicos de las rutas fsicas y virtuales
Despus de cargar los archivos en un servidor remoto mediante Dreamweaver, los archivos residen
en una carpeta en el rbol local de directorios del servidor. Por ejemplo, en un servidor que ejecute
Microsoft IIS, la ruta de la pgina principal podra ser la siguiente:
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
Esta ruta se conoce como la ruta fsica del archivo.
No obstante, el URL para abrir el archivo no utiliza la ruta fsica. Utiliza el nombre del servidor o
dominio seguido de una ruta virtual, como en el siguiente ejemplo:
www.plutoserve.com/jsmith/index.htm
La ruta virtual, /jsmith/index.htm, sustituye a la ruta fsica,
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm.
Temas relacionados
Utilizacin de una ruta virtual para conectar con una base de datos en la pgina 492
Localizacin de una ruta fsica de archivo con la ruta virtual
Si trabaja con un ISP, no siempre conocer la ruta fsica de los archivos que cargue. Los ISP suelen
proporcionarle un servidor FTP, posiblemente un directorio de servidor y un nombre de conexin
y la contrasea. Los ISP tambin especifican un URL para ver las pginas en Internet, como por
ejemplo www.plutoserve.com/jsmith/.
Si conoce el URL, puede obtener la ruta virtual del archivo (es la ruta que sigue al nombre de
servidor o de dominio en un URL). Una vez conoce la ruta virtual, puede obtener la ruta fsica del
archivo en el servidor mediante el mtodo MapPath.
Entre otras cosas, el mtodo MapPath toma la ruta virtual como un argumento y devuelve la ruta
fsica y el nombre del archivo. He aqu la sintaxis del mtodo:
Server.MapPath("/virtualpath")
Suponga que /jsmith/index.htm es una ruta virtual de archivo. La siguiente expresin devolver su
ruta fsica:
Server.MapPath("/jsmith/index.htm")
Puede experimentar con el mtodo MapPath como se explica a continuacin.
1 Abra una pgina ASP en Dreamweaver y cambie a la vista Cdigo (Ver > Cdigo).
2 Introduzca la siguiente expresin en el cdigo de la pgina HTML.
<%Response.Write(stringvariable)%>
3 Utilice el mtodo MapPath para obtener un valor para el argumento stringvariable.
He aqu un ejemplo:
<% Response.Write(Server.MapPath("/jsmith/index.htm")) %>
4 Cambie a la vista Diseo (Ver > Diseo) y active Live Data (Ver > Live Data) para ver la pgina.
La pgina muestra la ruta fsica del archivo en el servidor de aplicaciones. Utilizando el ejemplo
tratado en esta seccin, la pgina muestra la siguiente ruta fsica:
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
Para ms informacin sobre el mtodo MapPath, consulte la documentacin en lnea que viene
con Microsoft IIS o PWS.
Temas relacionados
Aspectos bsicos de las rutas fsicas y virtuales en la pgina 491
Utilizacin de una ruta virtual para conectar con una base de datos
Para escribir una cadena de conexin sin DSN en un archivo de base de datos situado en un
servidor remoto, debe conocer la ruta fsica del archivo. Por ejemplo, he aqu una cadena de
conexin sin DSN tpica para una base de datos Microsoft Access:
Driver={Microsoft Access Driver (*.mdb)};
DBQ=c:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
Si no conoce la ruta fsica de sus archivos en el servidor remoto, puede obtener la ruta utilizando
el mtodo MapPath de su cadena de conexin.
Para crear una conexin sin DSN con el mtodo MapPath:
1 Cargue el archivo de base de datos en el servidor remoto.
Anote su ruta virtual, como por ejemplo /jsmith/data/statistics.mdb.
> Bases de datos).
3 Haga clic en el botn de signo ms (+) del panel y seleccione Cadena de conexin personalizada
Conexin con una base de datos en un ISP 493
5 Escriba la cadena de conexin y utilice el mtodo MapPath para proporcionar el parmetro
DBQ.
Suponga que la ruta virtual de su base de datos Microsoft Access es /jsmith/data/statistics.mdb.
La cadena de conexin puede expresarse como se indica a continuacin si utiliza el lenguaje de
scripts VBScript:
Driver={Microsoft Access Driver (*.mdb)};DBQ= & Server.MapPath
("/jsmith/data/statistics.mdb")
El carcter ampersand (&) se utiliza para concatenar (combinar) dos cadenas. La primera
cadena va entre comillas y la segunda la devuelve la expresin Server.MapPath. Al combinar
dos cadenas, se crea la siguiente cadena:
DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
Si utiliza cdigo JavaScript, la expresin es idntica, salvo que el signo que se utiliza para
concatenar dos cadenas es ms (+) en lugar de ampersand (&):
Driver={Microsoft Access Driver (*.mdb)};DBQ= + Server.MapPath
("/jsmith/data/statistics.mdb")
6 Seleccione la opcin Utilizando un controlador del servidor de prueba.
Los usuarios de Macintosh pueden omitir este paso ya que todas las conexiones de base de
datos utilizan el servidor de aplicaciones.
la cadena de conexin.
Si la conexin sigue fallando, pngase en contacto con el ISP para comprobar si el controlador
de base de datos que ha especificado en la cadena de conexin est instalado en el servidor
remoto. Compruebe asimismo que el ISP tiene la versin ms reciente del controlador. Por
ejemplo, una base de datos creada en Microsoft Access 2000 no funciona con Microsoft Access
Driver 3.5. Necesita Microsoft Access Driver 4.0 o una versin posterior.
9 Actualice la conexin de base de datos de las pginas dinmicas existentes y utilice la nueva
conexin con las pginas que cree.
Para actualizar la conexin de una pgina dinmica, abra la pgina en Dreamweaver, haga
doble clic en el nombre del juego de registros en el panel Vinculaciones o en el panel
Comportamientos del servidor y seleccione la conexin que acaba de crear en el men
emergente Conexin.
Temas relacionados
Aspectos bsicos de las rutas fsicas y virtuales en la pgina 491
Localizacin de una ruta fsica de archivo con la ruta virtual en la pgina 491
continuacin.
> Bases de datos).
todas las pginas del sitio que utilicen la conexin.
> Bases de datos).
Nota: para evitar recibir errores despus de eliminar la conexin, actualice todos los conjuntos de
registros que utilicen la conexin antigua haciendo doble clic en el nombre del juego de registros
del panel Vinculaciones y eligiendo una nueva conexin.
495
CAPTULO 27
de JSP
Para utilizar una base de datos con una aplicacin JSP (JavaServer Pages), deber crear una
conexin de base de datos en Macromedia Dreamweaver MX 2004. En este captulo se describe
cmo hacerlo.
En este captulo se presupone que ha configurado una aplicacin JSP (vase Captulo 23,
Configuracin de una aplicacin Web, en la pgina 467). Se presupone tambin que dispone de
una base de datos configurada en su equipo local o en un sistema al que tiene acceso de red o FTP.
Para conectar con la base de datos de muestra proporcionada por Dreamweaver, vase
Configuracin del sitio JSP de muestra en la Ayuda de Introduccin. Para obtener ms
informacin sobre bases de datos y conexiones de base de datos, vase Apndice A, Gua de bases
de datos para principiantes, en la pgina 769.
Conexiones de base de datos en JSP
Una aplicacin JSP debe conectar con una base de datos mediante un controlador JDBC. El
controlador acta como un intrprete que permite a la aplicacin JSP comunicarse con una base
de datos.
Conexiones JSP
Una aplicacin JSP debe conectar con una base de datos mediante un controlador JDBC. Para
ms informacin sobre JDBC y la funcin de los controladores de base de datos, consulte
Comunicacin con la base de datos en la pgina 776.
Para conectar mediante un controlador JDBC, deber especificar algunos valores de parmetros.
Para ms informacin, consulte Parmetros de conexin JDBC en la pgina 496. Para conocer
los parmetros especficos del controlador, vase la documentacin del fabricante del controlador
o pregunte al administrador del sistema.
Tambin podr utilizar un controlador ODBC (y un DSN de Windows) si dispone de un
controlador puente JDBC-ODBC. Para ms informacin, consulte Conexin mediante un
controlador ODBC en la pgina 498.
496 Captulo 27: Conexiones de base de datos para desarrolladores de JSP
Parmetros de conexin JDBC
Al crear una conexin de base de datos de JSP en Dreamweaver, normalmente debe introducir los
parmetros de conexin JDBC (vase Creacin de una conexin de base de datos para JSP en
la pgina 497). Las conexiones JDBC constan normalmente de cuatro parmetros: el controlador,
el nombre de usuario, la contrasea y el URL (que especifica la ubicacin de la base de datos).
Habitualmente, los valores del parmetro de controlador y del parmetro de URL dependen del
controlador.
En esta seccin se muestra cmo definir los parmetros de conexin en Dreamweaver utilizando
como ejemplo el controlador Oracle Thin JDBC. Para conocer los parmetros de conexin de
otros controladores, consulte la documentacin del fabricante del controlador.
El controlador Oracle Thin JDBC admite bases de datos Oracle. Si desea utilizar dicho
controlador para conectarse con su base de datos Oracle, haga clic en el botn de signo ms (+)
del panel Bases de datos y seleccione el controlador Oracle Thin Driver (Oracle) en el men
emergente. Se mostrar el siguiente cuadro de dilogo, parcialmente completo:
Introduzca un nombre de conexin y sustituya los marcadores de posicin (entre corchetes
angulares) por parmetros de conexin vlidos. Para el marcador de posicin [hostname],
introduzca la direccin IP o el nombre asignado al servidor de la base de datos por el
administrador del sistema. Para el marcador de posicin [sid], introduzca el identificador del
sistema de base de datos. Si se est ejecutando ms de una base de datos Oracle en el mismo
sistema, deber utilizar el identificador SID para distinguirlas.
Por ejemplo, si el servidor se denomina Aristotle, el puerto de base de datos es 1521 y ha definido
un SID de base de datos llamado patients en dicho servidor, deber introducir los siguientes
valores de parmetros en Dreamweaver:
aplicacin JSP en Dreamweaver.
Se presupone que existe un servidor de aplicaciones JSP ejecutndose en un equipo local o
remoto. Para ms informacin, consulte Configuracin de una aplicacin Web en
la pgina 467.
Antes de conectar con una base de datos, debe obtener un controlador JDBC para su base de
datos. Para ms informacin, consulte Cmo obtener un controlador JDBC para la base de
datos en la pgina 497.
Una vez instalado el controlador de la base de datos, podr utilizarlo para conectar con la base de
datos. Para instrucciones, vase Creacin de una conexin de base de datos para JSP en
la pgina 497.
Cmo obtener un controlador JDBC para la base de datos
Antes de intentar crear una conexin de base de datos, compruebe que dispone de un controlador
JDBC para su base de datos. Entre los controladores JDBC ms habituales figuran el controlador
Oracle Thin JDBC, Oracle Java Driver y los controladores I-net JDBC para Microsoft SQL
Server.
Los proveedores de sistemas de bases de datos, como Oracle, suelen incluir controladores en sus
sistemas. Tambin podr adquirirlos de otros proveedores independientes. Por ejemplo, puede
obtener un controlador JDBC para Microsoft SQL Server en el sitio Web de i-net software en
www.inetsoftware.de/English/Produkte/JDBC_Overview/default.htm.
Sun tambin permite consultar una base de datos de controladores JDBC y sus proveedores en su
sitio Web en http://industry.java.sun.com/products/jdbc/drivers.
Cuando disponga de un controlador JDBC para la base de datos, podr crear una conexin de
base de datos.
Temas relacionados
Instalacin del controlador JDBC-ODBC Bridge de Sun en la pgina 499
Comunicacin con la base de datos en la pgina 776
Creacin de una conexin de base de datos para JSP
Una vez instalado el controlador JDBC apropiado para la base de datos en el equipo que ejecuta el
servidor de aplicaciones, puede crear una conexin de base de datos en Dreamweaver.
Para crear una conexin de base de datos para JSP:
1 Abra una pgina JSP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana
> Bases de datos).
Se muestran las conexiones definidas para el sitio.
2 Haga clic en el botn de signo ms (+) y seleccione el controlador en el men emergente.
Si no aparece el controlador, seleccione Conexin JDBC personalizada.
Aparecer un cuadro de dilogo de conexin.
3 Introduzca en el cuadro de dilogo los parmetros de conexin.
Para ms informacin, consulte Parmetros de conexin JDBC en la pgina 496.
4 Especifique la ubicacin del controlador JDBC que desea utilizar.
Si el controlador JDBC est instalado en el mismo equipo que Dreamweaver, seleccione la
opcin Utilizando un controlador de este equipo.
Si el controlador JDBC no est instalado en el mismo equipo que Dreamweaver, seleccione
la opcin Utilizando un controlador del servidor de prueba.
los parmetros de conexin. Si la conexin contina fallando, compruebe la configuracin de
la carpeta que utiliza Dreamweaver para procesar las pginas dinmicas (vase Especificacin
de dnde pueden procesarse las pginas dinmicas en la pgina 474).
Temas relacionados
Conexin mediante un controlador ODBC
Aunque las aplicaciones JSP deben conectar con las bases de datos mediante controladores JDBC,
tambin pueden utilizarse controladores ODBC si dispone de un controlador puente JDBC-
ODBC. El controlador puente acta como intrprete entre la aplicacin JSP, que utiliza JDBC, y
el controlador ODBC, que utiliza ODBC. Este canal de comunicacin permite a la aplicacin
JSP comunicarse con la base de datos.
Este tipo de conexin ofrece dos ventajas para los usuarios de Windows. En primer lugar, le
permite utilizar los controladores ODBC gratuitos de Microsoft. En segundo lugar, le permite
utilizar un DSN para facilitar el proceso de creacin de la conexin.
Los requisitos para poder conectar mediante un controlador ODBC son los siguientes:
Su aplicacin JSP deber ejecutarse en una equipo Windows.
El equipo Windows que ejecute el servidor de aplicaciones deber tener instalado un
controlador ODBC para la base de datos. Para ms informacin, consulte Comprobacin del
controlador ODBC en la pgina 499.
El equipo Windows que ejecute el servidor de aplicaciones deber tener instalado un
controlador puente JDBC-ODBC. Para ms informacin, consulte Instalacin del
controlador JDBC-ODBC Bridge de Sun en la pgina 499.
Si cumple estos requisitos, podr conectar mediante un controlador ODBC. Para instrucciones,
vase Creacin de una conexin ODBC en la pgina 499.
Conexin mediante un controlador ODBC 499
Comprobacin del controlador ODBC
Asegrese de que el equipo Windows que ejecuta el servidor de aplicaciones tiene instalado un
controlador ODBC para la base de datos. Para averiguar si el controlador ODBC ya est
instalado, vase Visualizacin de los controladores ODBC instalados en un sistema Windows
en la pgina 778. Si no est instalado el controlador apropiado, puede descargar e instalar los
paquetes Microsoft Data Access Components (MDAC) 2.5 y 2.7 en el equipo que ejecuta el
servidor de aplicaciones JSP. Puede descargar gratuitamente MDAC del sitio Web de Microsoft en
www.microsoft.com/data/download.htm. Estos paquetes contienen los controladores ODBC ms
recientes de Microsoft.
Nota: instale el paquete MDAC 2.5 antes de instalar MDAC 2.7.
Si dispone de un controlador ODBC para la base de datos, puede instalar a continuacin un
controlador JDBC-ODBC.
Instalacin del controlador JDBC-ODBC Bridge de Sun
Para conectar mediante un controlador ODBC, deber instalar el controlador puente JDBC-
ODBC de Sun en el equipo Windows que ejecuta el servidor de aplicaciones JSP. ste se
suministra con Sun Java 2 SDK, Standard Edition, para Windows.
Para averiguar si ya dispone de Java 2 SDK con el controlador, busque en el disco duro las carpetas
siguientes: jdk1.2, jdk1.3 o j2sdk1.4.
Si no dispone de SDK, puede descargarlo del sitio Web de Sun en http://java.sun.com/j2se/ e
instalarlo. El controlador se instalar automticamente cuando instale SDK.
Aunque puede utilizarse para el desarrollo de sistemas de bases de datos de gama baja, como por
ejemplo Microsoft Access, el controlador puente JDBC-ODBC de Sun no est pensado para
tareas de produccin. Por ejemplo, slo permite conectar con la base de datos a una pgina JSP a
la vez (no admite el uso compartido de varios threads. Para ms informacin sobre las limitaciones
del controlador, consulte el artculo 12409 del Centro de soporte de Macromedia en
www.macromedia.com/go/jdbc-odbc_problems.
Despus de instalar el controlador puente, podr crear la conexin de base de datos.
Creacin de una conexin ODBC
Antes de conectar mediante un controlador ODBC, compruebe que el controlador ODBC
adecuado y el controlador puente JDBC-ODBC de Sun estn instalados en el equipo Windows
que ejecuta el servidor de aplicaciones JSP .
Para conectar mediante un controlador ODBC en JSP:
1 Defina un DSN en el sistema Windows en el que se encuentra el servidor de aplicaciones.
Los usuarios de Windows 98 deben ver el artculo 300595 en http://support.microsoft.com/
default.aspx?scid=kb;en-us;300595
Los usuarios de Windows 2000 deben ver el artculo 300596 en http://
Los usuarios de Windows XP deben ver el artculo 305599 en http://
> Bases de datos).
3 Haga clic en el botn de signo ms (+) del panel y seleccione Base de datos ODBC (controlador
JDBC-ODBC Sun) en el men emergente.
Aparecer el cuadro de dilogo Base de datos ODBC (controlador JDBC-ODBC Sun).
5 En el cuadro URL, sustituya el contador de posicin [odbc dsn] por el DSN que defini en el
paso 1.
El cuadro URL debe tener este aspecto:
jdbc:odbc:myDSN
6 Especifique el nombre de usuario y la contrasea para acceder a la base de datos.
Si no necesita un nombre de usuario ni contrasea, deje los cuadros en blanco. Por ejemplo, si
el DSN se denomina Acme y no necesita nombre de usuario ni contrasea para obtener acceso
a la base de datos, introduzca los siguientes valores de parmetros:
Controlador: sun.jdbc.odbc.JdbcOdbcDriver
URL: jdbc:odbc:Acme
Nombre de usuario:
Contrasea:
7 Especifique la ubicacin del controlador puente JDBC-ODBC.
Si el controlador est instalado en el mismo equipo que Dreamweaver, seleccione la opcin
Utilizando un controlador de este equipo.
Si no est instalado en el mismo equipo que Dreamweaver, seleccione la opcin Utilizando
un controlador del servidor de prueba.
el DSN y los dems parmetros de conexin. Si la conexin contina fallando, compruebe la
configuracin de la carpeta que utiliza Dreamweaver para procesar las pginas dinmicas (vase
Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 474).
Temas relacionados
Edicin o eliminacin de una conexin de base de datos 501
continuacin.
> Bases de datos).
Si cambia el nombre de una conexin, deber actualizar todos los juegos de registros que utilizan
el antiguo nombre de conexin. Para ello, haga doble clic en el juego de registros del panel
Vinculaciones y, a continuacin, seleccione el nombre de la nueva conexin en el cuadro de
dilogo Juego de registros.
> Bases de datos).
Para evitar errores en la eliminacin de una conexin, deber actualizar todos los juegos de
registros que utilicen la antigua conexin haciendo doble clic en el nombre del juego de registros
en el panel Vinculaciones y seleccionando una nueva conexin en el cuadro de dilogo Juego de
registros.
503
CAPTULO 28
de PHP
Para utilizar una base de datos con una aplicacin PHP, deber crear una conexin de base de
datos en Macromedia Dreamweaver MX 2004. En este captulo se describe cmo hacerlo.
Para el desarrollo de PHP, Dreamweaver slo admite el sistema de base de datos MySQL. Otros
sistemas de bases de datos, por ejemplo Microsoft Access u Oracle no son compatibles. MySQL es
una aplicacin de software de origen abierto que puede descargarse gratuitamente de Internet para
uso no comercial. Para ms informacin, consulte el sitio Web de MySQL en www.mysql.com/
downloads/mysql.html.
En este captulo se presupone que ha configurado una aplicacin PHP (vase Captulo 23,
configurado una base de datos MySQL en su equipo local o en un sistema al cual tiene acceso a
travs de la red o del FTP.
Configuracin del sitio PHP de muestra en el apartado Primeros pasos de la Ayuda. Para
obtener ms informacin sobre bases de datos y conexiones de base de datos, vase Apndice A,
Gua de bases de datos para principiantes, en la pgina 769.
aplicacin PHP en Dreamweaver. Se presupone que dispone de una o varias bases de datos
MySQL y que se ha iniciado el servidor MySQL.
Para crear una conexin de base de datos con la base de datos MySQL:
1 Abra una pgina PHP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana
> Bases de datos).
2 Haga clic en el botn de signo ms (+) del panel y elija Conexin MySQL en el men
emergente.
Aparecer el cuadro de dilogo de Conexin MySQL.
La nueva conexin se mostrar en el panel Bases de datos.
504 Captulo 28: Conexiones de base de datos para desarrolladores de PHP
continuacin.
> Bases de datos).
> Bases de datos).
Para evitar errores en la eliminacin de una conexin, deber actualizar todos los juegos de
registros que utilicen la antigua conexin; para ello, haga doble clic en el nombre del juego de
registros en el panel Vinculaciones y seleccione una nueva conexin en el cuadro de dilogo Juego
de registros.
505
CAPTULO 29
Solucin de problemas de conexiones de base de
datos
En este captulo se describen algunos problemas comunes que pueden presentarse tras la creacin
de una conexin de base de datos y se describen las distintas formas de resolverlos.
Solucin de problemas relacionados con permisos
Una de las causas ms habituales de problemas se debe a los permisos insuficientes sobre archivos
y carpetas. Si la base de datos est ubicada en un equipo con Windows 2000 o Windows XP y
aparece un mensaje de error al intentar ver una pgina dinmica en un navegador Web o en modo
Live Data, dicho error puede deberse a un problema de permisos.
Estos son posibles mensajes de error que apuntan a un problema de permisos:
Microsoft OLE DB Provider for ODBC Drivers error '80004005' [Microsoft][ODBC
Microsoft Access 97 Driver] Couldn't use '(unknown)'; file already in use.
Microsoft OLE DB Provider for ODBC Drivers (0x80004005) [Microsoft][ODBC Microsoft
Access Driver] The Microsoft Jet database engine cannot open the file '(unknown)'. It is
already opened exclusively by another user, or you need permission to view its data.
Microsoft OLE DB Provider for ODBC Drivers error '80004005' [Microsoft][ODBC
Microsoft Access 97 Driver] Couldn't lock file.
La cuenta de Windows que est intentando acceder a la base de datos no dispone de permisos
suficientes. Podra tratarse de la cuenta annima de Windows (de manera predeterminada,
IUSR_nombre_del_equipo) o una cuenta de un usuario concreto, si la pgina est protegida
mediante acceso con autenticacin.
Debe cambiar los permisos para conceder a la cuenta IUSR_nombre_del_equipo los permisos
correctos de manera que el servidor Web pueda obtener acceso al archivo de base de datos.
Adems, la carpeta que contiene el archivo de base de datos tambin debe tener configurados
determinados permisos para escribir en dicha base de datos.
Si la pgina est pensada para que se obtenga acceso a ella de manera annima, asigne a la cuenta
IUSR_nombre_del_equipo control total sobre la carpeta y el archivo de base de datos como se
describe en el siguiente procedimiento.
Asimismo, si la ruta a la base de datos se expresa mediante UNC (\\Server\Share), asegrese de
que en Permisos de los recursos compartidos se concede acceso total a la cuenta
IUSR_nombre_del_equipo. Este paso debe realizarse aun en el caso de que la comparticin est
activada en el servidor Web local.
506 Captulo 29: Solucin de problemas de conexiones de base de datos
Si copia la base de datos de otra ubicacin, sta podra no heredar los permisos de su carpeta de
destino. Puede que tenga que cambiar los permisos para la base de datos.
Para comprobar o cambiar los permisos para el archivo de base de datos (Windows XP):
1 Asegrese de que tiene privilegios de administrador en el equipo.
2 En el Explorador de Windows, localice el archivo de base de datos o la carpeta que contiene la
base de datos, haga clic con el botn derecho del ratn en el archivo o carpeta y seleccione
Propiedades.
3 Seleccione la ficha Seguridad.
Nota: este paso slo debe darlo si dispone de un sistema de archivos NTFS. Si su sistema de
archivos es FAT, el cuadro de dilogo no incluir la ficha Seguridad.
4 Si la cuenta IUSR_nombre_del_equipo no aparece en la lista Grupo o Nombres de usuario, haga
clic en el botn Aadir para aadirla.
5 En el cuadro de dilogo Seleccionar usuarios o grupos, haga clic en el botn Avanzadas.
El cuadro de dilogo cambia para mostrar ms opciones.
6 Haga clic en el botn Ubicaciones y seleccione el nombre del equipo.
7 Haga clic en el botn Buscar ahora.
Aparecer una lista de nombres de cuentas asociadas al equipo.
8 Seleccione la cuenta IUSR_nombre_del_equipo y haga clic en Aceptar; a continuacin, haga clic
en Aceptar de nuevo para vaciar el cuadro de dilogo.
9 Para asignar a la cuenta IUSR los permisos completos, seleccione la casilla de verificacin
Control total y haga clic en Aceptar.
Para comprobar o cambiar los permisos para el archivo de base de datos (Windows 2000):
1 Asegrese de que tiene privilegios de administrador en el equipo.
2 En el Explorador de Windows, localice el archivo de base de datos o la carpeta que contiene la
base de datos, haga clic con el botn derecho del ratn en el archivo o carpeta y seleccione
Propiedades.
3 Seleccione la ficha Seguridad.
Nota: este paso slo debe darlo si dispone de un sistema de archivos NTFS. Si su sistema de
archivos es FAT, el cuadro de dilogo no incluir la ficha Seguridad.
4 Si la cuenta IUSR_nombre_del_equipo no figura entre las cuentas de Windows en el cuadro de
dilogo Permisos de archivos, haga clic en el botn Agregar para aadirla.
5 En el cuadro de dilogo Seleccionar usuarios, equipos o grupos, seleccione el nombre del equipo
del men emergente Buscar en.
Aparecer una lista de nombres de cuentas asociadas al equipo.
6 Seleccione la cuenta IUSR_nombre_del_equipo y, a continuacin, haga clic en Agregar.
7 Para asignar a la cuenta IUSR permisos completos, seleccione Control total del men emergente
Tipo de acceso y haga clic en Aceptar.
Para mayor seguridad, los permisos pueden establecerse de manera que el permiso Leer est
desactivado para la carpeta Web que contiene la base de datos. No se permitir examinar la
carpeta, pero las pginas Web continuarn teniendo acceso a la base de datos.
Solucin de problemas relacionados con mensajes de error de Microsoft 507
Para ms informacin sobre la cuenta IUSR y los permisos de servidor Web, consulte las
siguientes notas tcnicas en el Centro de soporte de Macromedia:
Entender una autenticacin annima y la cuenta IUSR en www.macromedia.com/go/
authentication
Configurar permisos de servidor Web con IIS en www.macromedia.com/go/
server_permissions
Solucin de problemas relacionados con mensajes de error de
Microsoft
En esta seccin se describen algunos de los mensajes de error de Microsoft ms habituales y las
formas de resolverlos. Estos mensajes pueden aparecer si utiliza Internet Information Server (IIS)
con un sistema de base de datos Microsoft como Access o SQL Server. Estos errores normalmente
ocurren al solicitar una pgina dinmica al servidor.
Nota: Macromedia no ofrece servicio tcnico para el software de otros fabricantes, como Microsoft
Windows e IIS. Si no logra resolver el problema consultando esta seccin, pngase en contacto con
el servicio tcnico de Microsoft o visite el sitio Web de Microsoft en http://support.microsoft.com/.
Para ms informacin sobre errores 80004005, consulte INFO: Troubleshooting Guide for
80004005 Errors in Active Server Pages and Microsoft Data Access Components (Q306518) en
el sitio Web de Microsoft en http://support.microsoft.com/default.aspx?scid=kb;en-us;Q306518.
80004005Data source name not found and no default driver specified
Este error se produce al intentar ver una pgina dinmica en un navegador Web o en modo Live
Data. El error puede variar dependiendo de la base de datos y del servidor Web. Otras variantes de
este mensaje de error son:
80004005Driver's SQLSetConnectAttr failed
80004005General error Unable to open registry key 'DriverId'
Estas son las posibles causas y soluciones:
La pgina no encuentra el DSN. Asegrese de que se ha creado un DSN tanto en el servidor
Web como en el equipo local. Para ms informacin, consulte Utilizacin de un DSN en
la pgina 780.
Puede que el DSN se haya configurado como un DSN de usuario y no como un DSN de
sistema. Elimine el DSN de usuario y cree un DSN de sistema en su lugar.
Nota: si no elimina el DSN de usuario, los nombres de DSN duplicados generarn un nuevo error
ODBC.
Si utiliza Microsoft Access, puede que el archivo de base de datos (.mdb) est bloqueado. El
bloqueo puede deberse a que un DSN con un nombre distinto est accediendo a la base de
datos. En el Explorador de Windows, busque el archivo de bloqueo (.ldb) en la carpeta que
contiene el archivo de base de datos (.mdb) y elimine el archivo .ldb. Si hay otro DSN que
seala al mismo archivo de base de datos, es recomendable eliminar el DSN para evitar el error
en el futuro. No olvide reiniciar el equipo despus de realizar estos cambios.
80004005Couldnt use (unknown); file already in use
Este error se produce cuando se utiliza una base de datos de Microsoft Access y se intenta ver una
pgina dinmica en un navegador Web o en modo Live Data. Otra variante de este mensaje de
error es 80004005Microsoft Jet database engine cannot open the file (unknown)
Lo ms probable es que este error se deba a un problema de permisos. Para ms informacin,
consulte Solucin de problemas relacionados con permisos en la pgina 505. Estas son algunas
causas y soluciones especficas:
Puede que la cuenta que est utilizando Internet Information Server (normalmente IUSR) no
disponga de los permisos correctos de Windows para una base de datos basada en archivo o
para la carpeta que contiene el archivo. Compruebe los permisos en la cuenta de IIS (IUSR) en
el administrador de usuarios.
Puede que carezca de permiso para crear o destruir archivos temporales. Compruebe los
permisos para el archivo y la carpeta. Asegrese de que dispone de permiso para crear o destruir
cualquier archivo temporal. Los archivos temporales normalmente se crean en la misma carpeta
que la base de datos, aunque el archivo tambin puede crearse en otras carpetas, como /Winnt,
por ejemplo.
En Windows 2000, es posible que sea necesario cambiar el valor de tiempo de espera para el
DSN de la base de datos Access. Para cambiar el valor de tiempo de espera, seleccione Inicio >
Configuracin > Panel de control > Herramientas administrativas > Orgenes de datos
(ODBC). Haga clic en la ficha DNS de sistema, resalte el DSN correcto y haga clic en el botn
Configurar. Haga clic en el botn Opciones y cambie el valor de tiempo de espera para la
pgina a 5000.
Si contina teniendo problemas, vanse los siguientes artculos de Microsoft Knowledge Base:
PRB: 80004005 Couldn't Use (unknown); File Already in Use en http://
support.microsoft.com/default.aspx?scid=kb;en-us;Q174943.
PRB: Microsoft Access Database Connectivity Fails in Active Server Pages en http://
PRB: Error Cannot Open File Unknown Using Access en http://support.microsoft.com/
default.aspx?scid=kb;en-us;Q166029.
80004005Logon Failed()
Este error se produce cuando se utiliza Microsoft SQL Server y se intenta ver una pgina dinmica
en un navegador Web o en modo Live Data.
El error lo genera SQL Server si ste no acepta o no reconoce la cuenta o la contrasea de inicio de
sesin enviada (si utiliza seguridad estndar) o si una cuenta de Windows no est asignada a
ninguna cuenta SQL (si utiliza seguridad integrada).
Estas son posibles soluciones:
Si utiliza seguridad estndar, puede que el nombre y la contrasea de la cuenta sean incorrectos.
Pruebe con la cuenta y la contrasea de Admin (UID= sa y sin contrasea), que debe
definirse en la lnea de la cadena de conexin. (Los DSN no almacenan nombres ni contraseas
de usuario.)
Si utiliza seguridad integrada, compruebe la cuenta de Windows que llama a la pgina y
localice la cuenta SQL que tiene asignada (en el caso de que la tenga).
SQL Server no permite el guin bajo en los nombres de cuentas SQL. Si alguien asigna
manualmente la cuenta IUSR_machinename de Windows a una cuenta SQL con el mismo
nombre, la asignacin fallar. Asigne cualquier cuenta que utilice un guin bajo a un nombre
de cuenta en SQL que no utilice ningn guin bajo.
80004005Operation must use an updateable query
Este error se produce cuando un evento est actualizando un juego de registros o insertando datos
en un juego de registros.
Los permisos establecidos para la carpeta que contiene la base de datos son excesivamente
restrictivos. Los privilegios IUSR deben establecerse para lectura y escritura (read/write). (Vase
Solucin de problemas relacionados con permisos en la pgina 505.)
Los permisos para el propio archivo de base de datos no incluyen privilegios completos de
lectura y escritura. (Vase Solucin de problemas relacionados con permisos en
la pgina 505.)
Puede que la base de datos est ubicada fuera del directorio Inetpub/wwwroot. Aunque puede
ver y buscar los datos, es posible que no pueda actualizarlos a no ser que la base de datos se
encuentre en el directorio wwwroot.
El juego de registros est basado en una consulta no actualizable. Los nexos son ejemplos de
consultas no actualizables en una base de datos. Reestructure sus consultas para que sean
actualizables.
Para ms informacin sobre este error, consulte PRB: ASP Error The Query Is Not Updateable
When You Update Table Record, en Microsoft Knowledge Base en http://
80040e07Data type mismatch in criteria expression
Este error se produce cuando el servidor intenta procesar una pgina que contiene un
comportamiento de servidor Insertar registro o Actualizar registro y el comportamiento de
servidor intenta establecer el valor de una columna de Fecha/Hora de una base de datos de
Microsoft Access con una cadena vaca ("").
Microsoft Access impone una serie de reglas rigurosas en lo que se refiere a la introduccin de
datos para los valores de determinadas columnas. El valor de cadena vaca en una consulta SQL
no se puede almacenar en una columna de Fecha/Hora de Access. Actualmente, la nica solucin
conocida consiste en evitar insertar o actualizar columnas de Fecha/Hora en Access con cadenas
vacas ("") o con cualquier otro valor que no se corresponda con la gama de valores especificados
para el tipo de datos.
80040e10Too few parameters
Este error se produce cuando una columna especificada en una consulta SQL no existe en la tabla
de la base de datos. Contraste los nombres de las columnas de la tabla de la base de datos con lo
especificado en la consulta SQL. Este error se debe normalmente a un error ortogrfico.
80040e10COUNT field incorrect
Este error se produce cuando obtiene una vista previa de una pgina que contiene un
comportamiento de servidor Insertar registro en un navegador Web e intenta utilizarlo para
insertar un registro en una base de datos de Microsoft Access.
Puede que est intentando insertar un registro en un campo de una base de datos que incluye un
signo de interrogacin (?) en su nombre de campo. El signo de interrogacin es un carcter
especial para algunos motores de base de datos, incluido Microsoft Access, por lo que no debe
utilizarse en los nombres de tablas o campos de una base de datos.
Abra el sistema de base de datos y elimine el signo de interrogacin (?) de los nombres de campos;
despus actualice los comportamientos de servidor de la pgina que hagan referencia al campo en
cuestin.
80040e14Syntax error in INSERT INTO statement
comportamiento de servidor Insertar registro.
Este error se debe normalmente a uno o varios de los siguientes problemas relacionados con el
nombre de un campo, un objeto o una variable de la base de datos:
Utilizacin de una palabra reservada como nombre. La mayora de las bases de datos tienen un
conjunto de palabras reservadas. Por ejemplo, date es una palabra reservada que no puede
utilizarse para nombres de columnas en una base de datos.
Utilizacin de caracteres especiales en el nombre. Estos son algunos ejemplos de caracteres
especiales:
. / * : ! # & - ?
Utilizacin de un espacio en el nombre.
El error tambin puede aparecer cuando hay una mscara de introduccin definida para un objeto
de la base de datos y los datos introducidos no cumplen los requisitos de la mscara.
Para resolver el problema, evite utilizar palabras reservadas tales como date, name, select,
where y level al especificar los nombres columnas en la base de datos. Asimismo, elimine
espacios y caracteres especiales.
Vanse las siguientes pginas Web para obtener las listas de palabras reservadas en los sistemas de
bases de datos ms habituales:
Microsoft Access en http://support.microsoft.com/default.aspx?scid=kb;en-us;Q209187
Microsoft SQL Server en http://msdn.microsoft.com/library/default.asp?url=/library/en-us/
tsqlref/ts_ra-rz_9oj7.asp
MySQL en www.mysql.com/doc/R/e/Reserved_words.html
80040e21ODBC error on Insert or Update
comportamiento de servidor Actualizar registro o Insertar registro. La base de datos no puede
realizar la operacin de actualizacin o insercin que el comportamiento de servidor est
intentando llevar a cabo.
El comportamiento de servidor est intentando actualizar un campo con numeracin
automtica de una tabla de la base de datos o intentando insertar un registro en un campo con
numeracin automtica. Dado que el sistema de base de datos completa los campos con
numeracin automtica, todo intento de completar externamente estos campos produce un
fallo.
Los datos que el comportamiento de servidor est actualizando o insertando son de un tipo
inadecuado para el campo de la base de datos, como, por ejemplo, insertar una fecha en un
campo booleano (s/no), insertar una cadena en un campo numrico o insertar una cadena con
formato incorrecto en un campo de Fecha/Hora.
800a0bcdEither BOF or EOF is true
Este error se produce al intentar ver una pgina dinmica en un navegador Web o en modo Live
Data.
El problema tiene lugar cuando la pgina intenta mostrar datos de un juego de registros vaco.
Para resolver el problema, aplique el comportamiento de servidor Mostrar regin al contenido
dinmico que debe mostrarse en la pgina de la siguiente forma:
1 Resalte el contenido dinmico en la pgina.
2 En el panel Comportamientos del servidor, haga clic en el botn de signo ms (+) y elija Mostrar
regin > Mostrar regin si el juego de registros no est vaco.
3 Seleccione el juego de registros que proporciona el contenido dinmico y haga clic en Aceptar.
4 Repita los pasos 1 a 3 para cada elemento de contenido dinmico de la pgina.
PARTE VII
Creacin de pginas dinmicas
Utilice las herramientas de desarrollo de aplicaciones de Dreamweaver para aadir contenido
dinmico a las pginas.
Captulo 30, Optimizacin del espacio de trabajo para desarrollo visual, en la pgina 515
Captulo 31, Flujo de trabajo para el diseo de pginas dinmicas, en la pgina 525
Captulo 32, Obtencin de datos para la pgina, en la pgina 533
Captulo 33, Definicin de fuentes de contenido dinmico, en la pgina 545
Captulo 34, Adicin de contenido dinmico a pginas Web, en la pgina 565
Captulo 35, Visualizacin de registros de la base de datos, en la pgina 575
Captulo 36, Utilizacin de componentes de ColdFusion, en la pgina 595
Captulo 37, Utilizacin de servicios Web (slo Windows), en la pgina 601
Captulo 38, Adicin de comportamientos de servidor personalizados, en la pgina 611
Captulo 39, Creacin de formularios, en la pgina 631
P
A
R
T
E

V
I
I
515
CAPTULO 30
Optimizacin del espacio de trabajo para desarrollo
visual
Puede optimizar el espacio de trabajo de Macromedia Dreamweaver MX 2004 para desarrollar
visualmente aplicaciones Web. Por ejemplo, puede utilizar paneles para crear rpidamente pginas
dinmicas y puede ver live data en las pginas mientras trabaja.
Visualizacin de paneles de desarrollo de aplicaciones Web en la pgina 515
Visualizacin de la base de datos en Dreamweaver en la pgina 517
Visualizacin de live data en la vista de Diseo en la pgina 518
Utilizacin de la vista de Diseo sin datos dinmicos en la pgina 523
Vista previa de pginas dinmicas en un navegador en la pgina 523
Restriccin de la informacin de base de datos que se muestra en Dreamweaver en
la pgina 524
Visualizacin de paneles de desarrollo de aplicaciones Web
Haga clic en la ficha Aplicacin de la barra Insertar para mostrar una serie de botones que
permiten aadir contenido dinmico y comportamiento del servidor a la pgina.
El nmero y el tipo de botones que aparecen varan en funcin del tipo de documento abierto en
la ventana de documento. La barra Insertar contiene botones para aadir los siguientes elementos
a la pgina:
Juegos de registros
Texto o tablas dinmicas
Formularios para insertar o actualizar registros en una base de datos
Barras de navegacin por registros
516 Captulo 30: Optimizacin del espacio de trabajo para desarrollo visual
Si pasa a la vista Cdigo (Ver > Cdigo), pueden aparecer ms paneles en su propia categora de la
barra Insertar, con lo que podr insertar cdigo en la pgina. Por ejemplo, si visualiza una pgina
ColdFusion en la vista Cdigo, aparece un panel CFML en la categora CFML de la barra
Insertar:
Para averiguar cul es la funcin de cada botn de la barra Insertar, mueva el ratn sobre un icono.
Aparecer una descripcin de herramienta:
Si desea definir los orgenes del contenido dinmico para la pgina y aadirle el contenido,
seleccione Ventana > Vinculaciones. Aparecer el panel Vinculaciones.
Para ms informacin, seleccione Ayuda en el men emergente del grupo de paneles.
Si desea aadir lgica del lado del cliente a las pginas dinmicas, seleccione Ventana >
Comportamientos del servidor. Aparecer el panel Comportamientos del servidor.
Un comportamiento del servidor es el conjunto de instrucciones insertadas en una pgina
dinmica durante el perodo de diseo y que se ejecutan en el servidor en tiempo de ejecucin.
Visualizacin de la base de datos en Dreamweaver 517
Si desea explorar bases de datos o crear conexiones de base de datos, seleccione Ventana > Bases de
datos. Aparecer el panel Bases de datos.
Si desea inspeccionar, aadir o modificar cdigo para componentes JavaBeans, Macromedia
ColdFusion o servicios Web, seleccione Ventana > Componentes. Aparecer el panel
Componentes.
Nota: el panel Componentes slo se activa si abre una pgina ColdFusion, JSP o ASP.NET. Es
posible que el documento no admita determinados componentes. Por ejemplo, los documentos
ColdFusion no admiten JavaBeans.
Visualizacin de la base de datos en Dreamweaver
Despus de conectarse a la base de datos, podr ver su estructura y sus datos en Dreamweaver.
Para visualizar la base de datos:
1 Abra el panel Bases de datos (Ventana > Bases de datos).
Dreamweaver muestra en el panel Bases de datos todas las bases de datos para las que se han
creado conexiones. Si est desarrollando un sitio ColdFusion, Dreamweaver mostrar en el
panel todas las bases de datos para las que se han definido fuentes de datos en ColdFusion
Administrator.
Nota: Dreamweaver examina el servidor ColdFusion que se ha definido para el sitio actual. (Vase
Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 474.)
Si no aparece ninguna base de datos en el panel, deber crear una conexin de base de datos.
Para ms informacin, consulte Conexin con una base de datos en la pgina 475.
2 Para mostrar las tablas, procedimientos almacenados y vistas de la base de datos, haga clic en el
icono de signo ms (+) situado junto a una conexin de la lista.
3 Para mostrar las columnas de la tabla, haga clic en un nombre de tabla.
Los iconos de columnas reflejan el tipo de datos y tambin indican la clave principal.
4 Para ver los datos en una tabla, haga clic con el botn derecho del ratn (Windows) o mantenga
presionada la tecla Control y haga clic (Macintosh) en el nombre de tabla de la lista y seleccione
Ver datos en el men emergente.
Dreamweaver tambin identifica la clave principal de cada tabla y los tipos de datos de cada
columna.
Visualizacin de live data en la vista de Diseo
Dreamweaver puede mostrar el contenido dinmico de la pgina mientras trabaja en la pgina en
vista de diseo. Para ms informacin sobre la vista Cdigo, consulte Cambio de vista en la
ventana de documento en la pgina 42.
Para mostrar el contenido dinmico en la vista Cdigo:
1 Asegrese de que Dreamweaver se ha configurado correctamente para mostrar datos dinmicos.
Para ms informacin, consulte Requisitos para mostrar datos dinmicos en la pgina 520.
2 Seleccione Ver > Live Data.
Dreamweaver muestra la pgina en la vista de Diseo con el contenido dinmico.
Cuando Live Data est activado en la vista de Diseo, puede llevar a cabo las siguientes
operaciones:
Ajuste el diseo de la pgina utilizando las herramientas de diseo de pginas.
Aada, edite o borre el contenido dinmico.
Aada, edite o borre comportamientos de servidor.
Nota: los vnculos no funcionan en la vista de Diseo. Para comprobar los vnculos, utilice la funcin
Vista previa en el navegador. (Vase Vista previa de pginas dinmicas en un navegador en
la pgina 523.)
Si realiza un cambio en la pgina que afecta al contenido dinmico, puede actualizar la pgina si
hace clic en el botn Actualizar (el icono de flecha circular). Dreamweaver tambin puede
actualizar la pgina automticamente.
Visualizacin de live data en la vista de Diseo 519
La ilustracin siguiente muestra una pgina dinmica con Live Data desactivado:
La ilustracin siguiente muestra la misma pgina con Live Data activado:
Temas relacionados
Copia de los archivos dependientes en la pgina 520
Suministro de parmetros esperados a la pgina en la pgina 521
Actualizacin de la pgina en la pgina 522
Solucin de problemas de la vista Live Data en la pgina 522
Requisitos para mostrar datos dinmicos
Para ver live data en la vista de Diseo, deber proceder de este modo:
Defina una carpeta para procesar pginas dinmicas. Para instrucciones, vase Especificacin
de dnde pueden procesarse las pginas dinmicas en la pgina 474.
Cuando active Live Data, se enviar a la carpeta una copia temporal del documento abierto
para su procesamiento. La pgina resultante se devolver y mostrar en la vista de Diseo,
mientras que la copia temporal existente en el servidor se borrar.
Si la pgina muestra un mensaje de error cuando activa Live Data, asegrese de que el prefijo
de URL del cuadro de dilogo Definicin del sitio es correcto. Para ms informacin, consulte
Conexin con una base de datos en la pgina 475.
Copie los archivos relacionados, si los hay, en la carpeta. Para ms informacin, consulte
Copia de los archivos dependientes en la pgina 520.
Suministre a la pgina los parmetros que suministrara normalmente un usuario. Para
instrucciones, vase Suministro de parmetros esperados a la pgina en la pgina 521.
Si experimenta dificultades para conseguir que funcione la vista de Live Data, vase Solucin de
problemas de la vista Live Data en la pgina 522.
Temas relacionados
Copia de los archivos dependientes
Algunas pginas dinmicas utilizan otros archivos para funcionar correctamente. Debe cargar
todos los archivos relacionados, incluidas las server-side includes y los archivos dependientes,
como los de imgenes y de clase JSP, en la carpeta que ha definido para procesar pginas
dinmicas (vase Especificacin de dnde pueden procesarse las pginas dinmicas en
la pgina 474). Dreamweaver no copia automticamente los archivos dependientes en la carpeta
al activar Live Data en la vista de Diseo.
Nota: Live Data admite cdigo de server-side includes y archivos de aplicaciones como global.asa
(ASP) y application.cfm (ColdFusion). Asegrese de que carga estos archivos en el servidor antes de
activar Live Data.
Para copiar archivos dependientes en el servidor de aplicaciones.
1 Abra el panel Sitio (Ventana > Archivos del sitio) y haga clic en el botn Expandir (el ltimo
icono de la barra de herramientas del panel).
El panel Sitio se ampliar hasta su tamao completo.
2 Haga clic en el icono Servidor de aplicaciones en la barra de herramientas del panel Sitio
ampliado (el segundo icono comenzando por la izquierda).
Aparecer la carpeta raz del servidor de aplicaciones bajo Sitio remoto.
3 Bajo Carpeta local, seleccione los archivos dependientes.
4 Haga clic en la flecha arriba de color azul de la barra de herramientas para copiar los archivos en
el servidor de aplicaciones o arrastre los archivos hasta la carpeta correspondiente bajo Sitio
remoto.
Slo tendr que realizar esta operacin una vez, a no ser que aada ms archivos dependientes, en
cuyo caso deber copiarlos tambin en la carpeta.
Visualizacin de live data en la vista de Diseo 521
Temas relacionados
Requisitos para mostrar datos dinmicos en la pgina 520
Suministro de parmetros esperados a la pgina
Para generar contenido dinmico, algunas pginas necesitan parmetros del usuario, por ejemplo,
una pgina necesita el nmero de ID de un registro para buscar y mostrar el registro. Sin esos
datos, Dreamweaver no puede generar contenido dinmico para mostrar en la vista de Diseo.
Si una pgina espera recibir parmetros del usuario, usted deber proporcionar los parmetros del
modo que se indica a continuacin.
Para proporcionar a la pgina los datos que espera recibir de los usuarios:
1 En la ventana de documento, seleccione Configuracin de Live Data en el men Ver.
Aparecer el cuadro de dilogo Configuracin de Live Data.
Si ha especificado el mtodo GET en el cuadro de dilogo Configuracin de Live Data, aparecer
un cuadro de texto en la barra de herramientas de la vista de Diseo. Utilice este cuadro de texto
para introducir distintos parmetros de URL y, a continuacin, haga clic en el botn Actualizar (el
icono de flecha circular) para ver cmo afectan los parmetros a la pgina.
Introduzca cada parmetro de URL con el siguiente formato:
name=value;
En este formato, name es el nombre del parmetro de URL que espera recibir la pgina y value es
el valor contenido en dicho parmetro. Para ms informacin, consulte Parmetros de URL en
la pgina 536.
Temas relacionados
Actualizacin de la pgina
Para actualizar una pgina:
Con Live Data activado, haga clic en el botn Actualizar (el icono de flecha circular) de la barra
de herramientas del documento si desea actualizar la pgina despus de realizar un cambio que
afecte al contenido dinmico.
Tambin puede seleccionar la opcin Actualizar automticamente de la barra de herramientas.
Cuando esta opcin est activada, la pgina se actualizar cada vez que realice un cambio que
afecte al contenido dinmico. Si dispone de una conexin de base de datos lenta, es
recomendable dejar desactivada esta opcin cuando trabaje en la ventana Live Data.
Temas relacionados
Solucin de problemas de la vista Live Data
Muchos problemas que surgen con la vista Live Data pueden deberse a valores incorrectos o que
faltan en el cuadro de dilogo Definicin del sitio (Sitio > Editar sitios).
Active la categora Servidor de prueba del cuadro de dilogo Definicin del sitio. El cuadro de
texto Carpeta remota deber especificar una carpeta capaz de procesar pginas dinmicas (vase
Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 474). A
continuacin se ofrece un ejemplo de carpeta remota adecuada si se ejecuta IIS o PWS en el disco
duro:
C:\Inetpub\wwwroot\myapp\
Compruebe que el cuadro Prefijo de URL especifica un URL que corresponde (o se asigna) a la
carpeta remota. Por ejemplo, si se est ejecutando PWS o IIS en el sistema local, las siguientes
carpetas remotas tienen los siguientes prefijos URL:
Para ms informacin, consulte Conexin con una base de datos en la pgina 475.
Carpeta remota Prefijo de URL
C:\Inetpub\wwwroot\ http://localhost/
C:\Inetpub\wwwroot\myapp\ http://localhost/myapp/
C:\Inetpub\wwwroot\fs\planes http://localhost/fs/planes
Vista previa de pginas dinmicas en un navegador 523
Temas relacionados
Utilizacin de la vista de Diseo sin datos dinmicos
Si est desactivado Live Data o se ha desconectado temporalmente del servidor de aplicaciones,
puede seguir trabajando en las pginas dinmicas en la vista de Diseo. Dreamweaver utiliza
marcadores de posicin para representar visualmente el contenido dinmico en la pgina. Por
ejemplo, el marcador de posicin para texto dinmico extrado de una base de datos utiliza la
sintaxis {RecordsetName.ColumnName}, donde Recordset es el nombre del juego de registros y
ColumnName, el nombre de la columna elegida en el juego de registros.
En ocasiones, la longitud de los marcadores de posicin de texto dinmico distorsiona el diseo de
la pgina en la vista de Diseo. Para resolver este problema, utilice llaves vacas a modo de
marcadores de posicin.
Para utilizar llaves vacas como marcadores de posicin de texto dinmico:
1 Seleccione Edicin > Preferencias > Elementos invisibles o Dreamweaver > Preferencias >
Elementos invisibles (Mac OS X).
2 En el men emergente Mostrar texto dinmico como, elija { }.
Temas relacionados
Vista previa de pginas dinmicas en un navegador
Los desarrolladores de aplicaciones Web suelen depurar sus pginas comprobndolas
frecuentemente en un navegador Web. Dreamweaver tiene en cuenta este estilo de trabajo con el
comando Vista previa en el navegador (F12). Este comando permite ver pginas dinmicas
rpidamente en una navegador sin cargarlas previamente en el servidor.
Sugerencia: tambin puede utilizar la vista de Diseo para comprobar rpidamente las pginas
mientras trabaja con ellas. La vista de Diseo ofrece una representacin visual completamente
editable de la pgina, incluso con live data. Para ms informacin, consulte Visualizacin de live data
en la vista de Diseo en la pgina 518.
Cuando se usa este comando, Dreamweaver ejecuta una copia temporal de la pgina en un
servidor Web antes de mostrarla en el navegador. (Dreamweaver borrar a continuacin el archivo
temporal del servidor.)
Para obtener una vista previa de pginas dinmicas, deber rellenar la categora Servidor de prueba
del cuadro de dilogo Definicin del sitio. Para ms informacin, consulte Especificacin de
dnde pueden procesarse las pginas dinmicas en la pgina 474.
La opcin Vista previa en el navegador no carga pginas relacionadas, como una pgina de
resultados o detalle, archivos dependientes, como los archivos de imagen, ni server-side includes.
Para cargar un archivo que falta, seleccione Ventana > Sitio para abrir el panel Sitio, seleccione el
archivo en Carpeta local y haga clic en la flecha de color azul que seala hacia arriba de la barra de
herramientas para copiar el archivo en la carpeta del servidor Web.
Restriccin de la informacin de base de datos que se muestra
en Dreamweaver
Los usuarios avanzados de sistemas de bases de datos grandes, como Oracle, deben restringir el
nmero de elementos de base de datos que recupera y muestra Dreamweaver en tiempo de diseo.
Una base de datos Oracle puede contener elementos que Dreamweaver no puede procesar en
tiempo de diseo. Puede crear un esquema en Oracle y utilizarlo despus en Dreamweaver para
filtrar los elementos innecesarios en tiempo de diseo.
Nota: no puede crear un esquema o catlogo en Microsoft Access.
Otros usuarios pueden beneficiarse de la restriccin de la cantidad de informacin que recupera
Dreamweaver en tiempo de diseo. Algunas bases de datos contienen decenas o incluso
centenares de tablas, por lo que quiz no convenga que Dreamweaver las muestre todas mientras
est trabajando. Un esquema o catlogo puede restringir el nmero de elementos de base de datos
que Dreamweaver obtiene en tiempo de diseo.
Deber crear un esquema o catlogo en el sistema de base de datos antes de poder aplicarlo en
Dreamweaver. Consulte la documentacin del sistema de base de datos o pregunte al
administrador del sistema.
No puede aplicar un esquema o catlogo en Dreamweaver si est desarrollando una aplicacin
ColdFusion.
Para aplicar un esquema o un catlogo de Dreamweaver a una aplicacin distinta de
ColdFusion:
1 Abra una pgina dinmica en Dreamweaver y, a continuacin, abra el panel Bases de datos
Si ya existe la conexin de base de datos, aparecer una lista de conexiones en el panel.
Aparecer el cuadro de dilogo correspondiente a su conexin.
Si la conexin no existe, haga clic en el botn de signo ms (+) de la parte superior del panel y
crela. Para ms informacin, consulte Conexin con una base de datos en la pgina 475.
3 En el cuadro de dilogo correspondiente a la conexin, haga clic en Avanzado.
Aparecer el cuadro de dilogo Restringir.
4 Especifique su esquema o catlogo.
525
CAPTULO 31
Flujo de trabajo para el diseo de pginas
dinmicas
Una ventaja importante que ofrece Macromedia Dreamweaver MX 2004 consiste en la
posibilidad de crear sitios Web dinmicos sin tener experiencia en los lenguajes de programacin.
Las herramientas visuales de Dreamweaver permiten desarrollar sitios Web dinmicos sin
necesidad de introducir manualmente cdigos complejos de programacin para crear un sitio que
muestre contenido dinmico almacenado en una base de datos. Dreamweaver permite crear sitios
Web dinmicos utilizando los lenguajes de programacin Web y las tecnologas de servidor ms
conocidos. Estos son Macromedia ColdFusion, ASP.NET, Microsoft Active Server Pages (ASP),
JavaServer Pages (JSP) y PHP.
En este captulo se indican los pasos principales que debe seguir para disear y crear un sitio Web
dinmico. Al final de cada seccin encontrar referencias a los procedimientos especficos
necesarios para desarrollar una pgina dinmica. Los cinco pasos principales para desarrollar una
pgina Web dinmica son:
Diseo de la pgina en la pgina 526
Creacin de una fuente de contenido dinmico en la pgina 526
Adicin de contenido dinmico a una pgina Web en la pgina 528
Mejora de la funcionalidad de una pgina dinmica en la pgina 528
Comprobacin y depuracin de la pgina en la pgina 529
526 Captulo 31: Flujo de trabajo para el diseo de pginas dinmicas
Diseo de la pgina
El diseo visual de la pgina constituye un paso importante a la hora de crear cualquier sitio Web,
tanto si es esttico como si es dinmico. Al aadir elementos dinmicos a una pgina Web, el
diseo de la pgina se convierte en un elemento fundamental para facilitar su uso. Piense
detenidamente cmo interactuarn los usuarios con cada una de las pginas y con el sitio Web en
su conjunto.
Un mtodo comn para incorporar contenido dinmico a una pgina Web consiste en crear una
tabla para presentar contenido y contenido dinmico importante en una o varias celdas de la
tabla. Con este mtodo puede presentar informacin de distintos tipos en un formato
estructurado.
Para informacin sobre el diseo de pginas, vanse los captulos siguientes:
Captulo 8, Presentacin de contenido en tablas, en la pgina 169
Captulo 9, Diseo de pginas en el modo de diseo, en la pgina 189
Captulo 12, Utilizacin de pginas, en la pgina 259
Captulo 13, Insercin y formato de texto, en la pgina 281
Captulo 14, Insercin de imgenes, en la pgina 311
Captulo 17, Adicin de audio, vdeo y elementos interactivos, en la pgina 365
Creacin de una fuente de contenido dinmico
Los sitios Web dinmicos requieren una fuente de contenido del que extraer datos antes de
mostrarlos en una pgina Web. En Dreamweaver, estas fuentes de datos pueden ser bases de datos,
variables de peticin, variables de servidor, variables de formulario o procedimientos almacenados.
Antes de utilizar estos orgenes de contenido en una pgina Web, deber seguir este
procedimiento:
Crear una conexin con la fuente del contenido dinmico (como una base de datos) y el
servidor de aplicaciones que procesa la pgina
Especificar qu informacin de la base de datos desea mostrar o qu variables desea incluir en la
pgina
Utilizar la interfaz de apuntar y sealar para seleccionar e insertar elementos de contenido
dinmico en la pgina seleccionada
Dreamweaver permite conectar fcilmente una base de datos y crear un juego de registros del que
extraer contenido dinmico. Un juego de registros es el resultado de una consulta de base de datos.
Extrae la informacin especifica solicitada y permite mostrarla en una pgina especificada. Defina
el juego de registros basndose en la informacin contenida en la base de datos y el contenido que
desea mostrar.
Distintos proveedores de tecnologa pueden emplear trminos distintos para referirse a un juego
de registros. En ASP y ColdFusion un juego de registros se define como una consulta. En JSP se
denomina conjunto de resultados (resultset) y en ASP.NET, conjunto de datos (DataSet). Si utiliza
otras fuentes de datos, como la entrada de usuario o variables de servidor, el nombre de la fuente
de datos que se define en Dreamweaver ser el mismo que el nombre de la fuente de datos
propiamente dicha.
Creacin de una fuente de contenido dinmico 527
Para utilizar una fuente de datos en Dreamweaver, abra el panel Vinculaciones para crear la fuente
de datos. El panel Vinculaciones, que se muestra a continuacin, permite crear fuentes de datos
para bases de datos y distintos tipos de variables. Al crear una fuente de datos, sta se almacena en
el panel Vinculaciones, donde se puede seleccionar e insertar en la pgina actual.
Para crear un juego de registros en Dreamweaver, utilice el cuadro de dilogo Juego de registros.
Puede abrir el cuadro de dilogo Juego de registros desde el panel Servidor de la barra Insertar o
desde el panel Vinculaciones. El cuadro de dilogo Juego de registros sencillo permite seleccionar
una conexin de base de datos existente y crear una consulta de base de datos seleccionando la
tabla o tablas cuyos datos desea incluir en el juego de registros. Puede incluso utilizar la seccin
Filtro del cuadro de dilogo para crear sencillos criterios de bsqueda y devolucin para la
consulta. Puede comprobar la consulta desde el cuadro de dilogo Juego de registros y realizar los
ajustes necesarios antes de aadirla al panel Vinculaciones.
Una vez establecida la conexin con la base de datos y definido el juego de registros, ste aparecer
en el panel Vinculaciones. Desde aqu podr importarlo a cualquier pgina Web del sitio definido.
La ilustracin siguiente muestra el panel Vinculaciones con el juego de registros de una base de
datos de empleados abierto. Puede insertar cualquiera de los valores mostrados en una pgina Web
seleccionando el elemento y haciendo clic en el botn Insertar, situado en la parte inferior del
panel. El elemento seleccionado se insertar en el marcador de posicin especificado dentro de la
pgina.
Para informacin sobre bases de datos y los procedimientos necesarios para crear una conexin de
base de datos, vanse los captulos siguientes:
Captulo 32, Obtencin de datos para la pgina, en la pgina 533
Apndice A, Gua de bases de datos para principiantes, en la pgina 769
Adicin de contenido dinmico a una pgina Web
Despus de definir un juego de registros u otra fuente de datos y aadirlos al panel Vinculaciones,
puede insertar en la pgina el contenido dinmico que representa el juego de registros. La interfaz
de mens de Dreamweaver permite aadir elementos de contenido dinmico con la misma
facilidad que se selecciona una fuente de datos de contenido dinmico en el panel Vinculaciones,
e insertarlos en el texto, una imagen o un objeto de formulario de la pgina actual.
Al insertar un elemento de contenido dinmico u otro comportamiento del servidor en una
pgina, Dreamweaver inserta un script del lado del servidor en el cdigo de origen de la pgina. El
script indica al servidor que recupere datos de la fuente de datos definida y los muestre en la
pgina Web.
Para colocar contenido dinmico en una pgina Web, puede seguir uno de estos
procedimientos:
Colocarlo en el punto de insercin en la vista Cdigo o Diseo.
Sustituir una cadena de texto u otro marcador de posicin.
Insertarlo en un atributo HTML. Por ejemplo, el contenido dinmico puede definir el atributo
src de una imagen o el atributo value de un campo de formulario.
Para obtener procedimientos detallados sobre la incorporacin de contenido dinmico a una
pgina, vanse los captulos siguientes:
Captulo 33, Definicin de fuentes de contenido dinmico, en la pgina 545
Captulo 39, Creacin de formularios, en la pgina 631
Mejora de la funcionalidad de una pgina dinmica
Adems de aadir contenido dinmico, Dreamweaver permite incorporar fcilmente lgica de
aplicacin compleja a las pginas Web utilizando comportamientos de servidor. Los
comportamientos del servidor son cdigos predefinidos del lado del servidor que aaden la lgica
de aplicacin a las pginas Web; de este modo, suministran una mayor interaccin y
funcionalidad. Los comportamientos del servidor de Dreamweaver permiten aadir lgica de
aplicacin a un sitio Web sin necesidad de escribir el cdigo manualmente. Los comportamientos
del servidor suministrados con Dreamweaver MX admiten tipos de documento ColdFusion, ASP,
ASP.NET, JSP y PHP.
Los comportamientos del servidor se escriben y comprueban para que sean rpidos, seguros y
robustos. Los comportamientos del servidor incorporados de Dreamweaver se han diseado para
ofrecer compatibilidad con pginas Web multiplataforma para todos los navegadores.
Adicin de comportamientos del servidor a una pgina
Para aadir comportamientos del servidor a una pgina, seleccinelos en la categora Aplicacin
de la barra Insertar o en el panel Comportamientos del servidor. Para utilizar el panel
Comportamientos del servidor, seleccione Ventana > Comportamientos del servidor, haga clic en
el botn del signo ms (+) del panel y seleccione un comportamiento de servidor en el men
emergente. La ilustracin siguiente muestra los botones Comportamiento del servidor disponibles
en la barra Insertar.
Comprobacin y depuracin de la pgina 529
Dreamweaver suministra una interfaz de apuntar y hacer clic que permite que aplicar contenido
dinmico y comportamientos complejos a una pgina resulte tan fcil como insertar elementos
textuales y de diseo. Estos son los comportamientos del servidor disponibles:
Defina un juego de registros a partir de base de datos existente. El juego de registros que defina
se almacenar en el panel Vinculaciones.
Muestre varios registros en una pgina. Seleccione toda la tabla o celdas o filas individuales con
contenido dinmico, y especifique el nmero de registros para mostrar en cada vista de pgina.
Cree e inserte una tabla dinmica en una pgina y asocie la tabla a un juego de registros.
Posteriormente podr modificar tanto el aspecto de las tablas como la regin repetida
utilizando el inspector de propiedades y el comportamiento del servidor Regin repetida,
respectivamente.
Inserte un objeto de texto dinmico en una pgina. El objeto de texto que inserte ser un
elemento de un juego de registros predefinido al que puede aplicar alguno de los formatos de
datos de Dreamweaver MX.
Cree controles de estado y navegacin para los registros, pginas maestra/detalle y formularios
para actualizar la informacin de una base de datos.
Visualice ms de un registro a partir de un registro de la base de datos.
Cree vnculos de navegacin para juegos de registros que permitan a los usuarios ver los
registros anteriores y siguientes de un registro de base de datos.
Aada un contador de registros para ayudar a los usuarios a conocer cuntos registros se han
devuelto y dnde se encuentran en los resultados devueltos.
Tambin puede ampliar los comportamientos del servidor de Dreamweaver escribiendo los suyos
propios o instalando comportamientos del servidor escritos por otros proveedores.
Para ms informacin sobre la mejora de la funcionalidad de las pginas Web utilizando
comportamientos del servidor, consulte los captulos siguientes:
Captulo 35, Visualizacin de registros de la base de datos, en la pgina 575
Captulo 40, Creacin rpida de aplicaciones de ColdFusion, en la pgina 653
Captulo 41, Creacin rpida de aplicaciones ASP.NET, en la pgina 699
Captulo 42, Creacin rpida de aplicaciones ASP y JSP, en la pgina 729
Captulo 43, Creacin rpida de aplicaciones PHP, en la pgina 747
Comprobacin y depuracin de la pgina
Antes de colocar una pgina dinmica o un sitio Web completo en la Web, conviene
comprobar su funcionalidad. Para directrices que le ayudarn a comprobar la facilidad de uso de
un sitio Web y la compatibilidad en mltiples plataformas, vase Directrices para la
comprobacin del sitio en la pgina 115. Para ms informacin sobre el diseo de sitios Web
para personas con discapacidad auditiva, visual o de otro tipo, consulte Utilizacin de las
funciones de accesibilidad de Dreamweaver en la pgina 52. Deber familiarizarse con los
problemas que se describen en esta seccin y pensar en cmo puede afectar la funcionalidad de su
aplicacin a personas con esas discapacidades.
Esta seccin trata sobre los siguientes temas:
Comprobacin del contenido dinmico en la pgina 530
Edicin de contenido dinmico en una pgina en la pgina 531
Eliminacin de contenido dinmico en la pgina 531
Comprobacin del contenido dinmico
Dreamweaver permite obtener una vista previa y editar contenido dinmico utilizando la ventana
Live Data.
Nota: los vnculos no funcionan en la ventana Live Data. Para comprobar los vnculos, utilice la
funcin Vista previa en el navegador. (Vase Comprobacin de la compatibilidad con los
navegadores en la pgina 448.)
Mientras se muestra el contenido dinmico, puede realizar las siguientes operaciones:
Ajuste el diseo de la pgina utilizando las herramientas de diseo de pginas de Dreamweaver.
Aada, edite o borre el contenido dinmico.
Aada, edite o borre comportamientos de servidor.
Para lograr este efecto, Dreamweaver ejecuta la pgina dinmica en el servidor antes de mostrarla
en la ventana Live Data. Cuando cambie a la ventana Live Data, se enviar al servidor de
aplicaciones una copia temporal del documento abierto para su procesamiento. La pgina
resultante se devuelve y se muestra en la ventana Live Data, mientras que la copia temporal
existente en el servidor se borra.
Puede alternar entre la ventana de documento y la ventana Live Data seleccionando Live Data en
el men Ver. Si una pgina espera recibir datos del usuario, por ejemplo, el nmero de ID de un
registro seleccionado en una pgina maestra, puede facilitar a la pgina dicho dato usted mismo a
travs del cuadro de dilogo Configuracin de Live Data.
Para introducir parmetros de Live Data:
1 Realice los cambios necesarios en la pgina.
2 Si la pgina espera recibir parmetros de URL de un formulario HTML con el mtodo GET,
introduzca los pares nombre/valor en el cuadro de texto de la barra de herramientas y haga clic
en el botn Actualizar (el icono de flecha circular).
Introduzca los datos de prueba en el siguiente formato:
name=value;
En este formato, name es el nombre del parmetro de URL que espera recibir la pgina y value
es el valor contenido en dicho parmetro.
Tambin puede definir pares de nombre/valor en el cuadro de dilogo Configuracin de Live
Data (Ver > Configuracin de Live Data) y guardarlos con la pgina.
3 Haga clic en el botn Actualizar si la pgina requiere actualizacin.
Temas relacionados
Comprobacin y depuracin de la pgina 531
Edicin de contenido dinmico en una pgina
Puede modificar o eliminar contenido dinmico de una pgina cambiando el comportamiento del
servidor que proporciona el contenido o eliminando el comportamiento por completo. Por
ejemplo, puede editar un comportamiento del servidor de un juego de registros para que devuelva
ms registros a la pgina.
El contenido dinmico de una pgina aparece en el panel Comportamientos del servidor. Por
ejemplo, si aade un juego de registros a la pgina, ste se incorporar a la lista del panel
Comportamientos del servidor de la siguiente forma:
Recordset(myRecordset)
Si aade otro juego de registros a la pgina, el panel Comportamientos del servidor mostrar
ambos conjuntos de registros de la siguiente forma:
Recordset(mySecondRecordset)
Para editar un comportamiento del servidor que proporciona contenido dinmico:
1 Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor).
2 Haga clic en el botn de signo ms (+) para mostrar los comportamientos de servidor y haga
doble clic en el comportamiento de servidor en el panel Comportamientos del servidor.
Aparecer el cuadro de dilogo utilizado para definir la fuente de datos original.
3 Realice los cambios deseados en el cuadro de dilogo y haga clic en Aceptar.
Tambin puede utilizar el inspector de propiedades para editar conjuntos de registros en la pgina.
Abra el inspector de propiedades (Ventana > Propiedades); a continuacin, seleccione el juego de
registros en el panel Comportamientos del servidor (Ventana > Comportamientos del servidor).
Temas relacionados
Eliminacin de contenido dinmico
Despus de aadir contenido dinmico a una pgina, puede eliminarlo seleccionando el
contenido dinmico en la pgina y presionando Suprimir. Tambin puede eliminarlo
seleccionando el contenido dinmico en el panel Comportamientos del servidor y haciendo clic
en el botn de signo menos (-).
Nota: esta operacin elimina de la pgina el script del lado del servidor que recupera el contenido
dinmico de la base de datos. No borra los datos de la base de datos.
Temas relacionados
533
CAPTULO 32
Obtencin de datos para la pgina
Las aplicaciones Web y los sitios con contenido dinmico requieren un origen de contenido desde
el que se recuperarn los datos. Tanto los datos como sus orgenes pueden adoptar muchas formas.
Los datos suelen constar de informacin numrica o textual que se devuelve a una pgina Web y
se muestra de algn modo al usuario.
Utilizacin de una base de datos para almacenar contenido en la pgina 533
Recopilacin de los datos enviados por los usuarios en la pgina 534
Acceso a datos almacenados en variables de sesin en la pgina 539
Utilizacin de una base de datos para almacenar contenido
El uso de una base de datos para almacenar contenido permite separar el diseo del sitio Web del
contenido que se desea mostrar a los usuarios del sitio. En lugar de escribir archivos HTML
individuales para cada pgina, slo se necesita escribir una pgina o plantilla para los
distintos tipos de informacin que se desea presentar. Utilizando una base de datos se puede
proporcionar contenido nuevo a un sitio Web cargando simplemente el contenido en la base de
datos y, a continuacin, dejar que el sitio Web recupere dicho contenido dinmicamente en
respuesta a la solicitud del usuario. Una ventaja importante del almacenamiento de contenido en
una base de datos reside en la posibilidad de actualizar la informacin en un nico origen y, a
continuacin, implantar ese cambio en todo el sitio Web sin necesidad de buscar en las pginas
que puedan contener la informacin y editar manualmente cada pgina.
Las bases de datos pueden tener muchos formatos distintos segn la cantidad y la complejidad de
los datos que almacenan. Microsoft Access es una base de datos que suele estar instalada en
sistemas con Windows. Si no tiene experiencia con bases de datos, Access proporciona una
interfaz sencilla que permite trabajar con tablas de bases de datos. Si bien puede utilizar Access
como fuente de datos para la mayor parte de las aplicaciones de sitios Web, hay que destacar que
Access tiene un lmite de tamao de archivo de 2 GB y de 255 usuarios simultneos. Por esta
razn, Access es una opcin razonable para el desarrollo de sitios Web y grupos de trabajo de
empresa. Sin embargo, si prev que va a acceder al sitio una gran comunidad de usuarios,
considere la posibilidad de usar una base de datos diseada para el nmero de visitantes previsto.
534 Captulo 32: Obtencin de datos para la pgina
Aquellos sitios que requieran un mayor grado de flexibilidad en el modelado de los datos y
capacidad para dar soporte a grandes comunidades de usuarios simultneos suelen emplear bases
de datos relacionales basadas en servidor (denominadas generalmente RDBMS). Las bases de
datos relacionales ms comunes que se utilizan para almacenar contenido para aplicaciones
basadas en la Web y sitios dinmicos son: MySQL, Microsoft SQL Server y Oracle.
Al margen de la base de datos que utilice para su sitio Web, puede utilizar Macromedia
Dreamweaver MX 2004 en el diseo de formularios Web para insertar, actualizar o eliminar datos
de la base de datos.
Para obtener ms informacin sobre las bases de datos, vase Apndice A, Gua de bases de datos
para principiantes, en la pgina 769.
Acceso a los datos almacenados en una base de datos
Las pginas Web no pueden acceder directamente a los datos almacenados en una base de datos.
Lo que hacen es interactuar con un juego de registros. Un juego de registros es un subconjunto de
la informacin, o registros, extrados de la base de datos. Este subconjunto de informacin se
extrae utilizando una consulta de base de datos. Una consulta es una declaracin de bsqueda
diseada para buscar y extraer informacin especfica de una base de datos. Macromedia
Dreamweaver 2004 utiliza el lenguaje SQL (Lenguaje de consulta estructurado, Structured Query
Language) para crear consultas. Si bien no es necesario conocer SQL para crear consultas sencillas
utilizando Dreamweaver, un conocimiento bsico de este sencillo lenguaje permite crear consultas
ms avanzadas y, por tanto, proporciona una mayor flexibilidad a la hora de disear pginas
dinmicas. Para conocer los aspectos bsicos de SQL, vase Apndice B, Nociones bsicas de
SQL, en la pgina 781.
Una consulta SQL produce un juego de registros que incluye slo determinadas columnas, slo
determinados registros o una combinacin de ambos. Un juego de registros tambin puede incluir
todos los registros y columnas de una tabla de la base de datos. No obstante, dado que las
aplicaciones pocas veces requieren la utilizacin de todos los datos de una base de datos, procure
hacer los conjuntos de registros tan pequeos como sea posible. Dado que el servidor Web guarda
temporalmente el juego de registros en la memoria, el uso de un juego ms pequeo consumir
menos memoria, lo que puede redundar en un mayor rendimiento del servidor.
Recopilacin de los datos enviados por los usuarios
Puede utilizar pginas Web para recoger informacin de los usuarios, almacenar esa informacin
en la memoria del servidor y, a continuacin, utilizar la informacin para crear una respuesta
dinmica basada en los datos introducidos por el usuario. Las herramientas ms comunes para
recoger informacin son los formularios HTML y las selecciones de vnculos de hipertexto.
Formularios HTML permiten recoger informacin de los usuarios y almacenarla en la memoria
del servidor. Un formulario HTML puede enviar la informacin como parmetros de formulario
o como parmetros de URL. Si define el atributo de mtodo del formulario como POST, el
navegador incluir los valores del formulario en el cuerpo del mensaje enviado al servidor. Si
define el atributo de mtodo del formulario como GET, el navegador aadir los valores del
formulario al URL especificado en el atributo de accin y enviar la informacin al servidor.
Recopilacin de los datos enviados por los usuarios 535
Vnculos de hipertexto tambin permiten recoger informacin de los usuarios y almacenarla en
la memoria del servidor. Especifique un valor (o valores) que se enviarn cuando un usuario haga
clic en un vnculo una preferencia, por ejemplo aadiendo el valor al URL especificado en la
etiqueta de anclaje. Cuando un usuario hace clic en el vnculo, el navegador enva el URL y el
valor aadido al servidor.
En esta seccin se explica cmo crear parmetros de formulario y de URL para uso en aplicaciones
Web.
Parmetros de formulario
Los parmetros de formulario se envan al servidor utilizando un formulario HTML mediante el
mtodo POST o GET. Cuando se utiliza el mtodo POST, los parmetros se envan en el cuerpo del
mensaje. Por el contrario, el mtodo GET aade los parmetros al URL solicitado.
Puede utilizar Dreamweaver para disear rpidamente formularios HTML que enven parmetros
de formulario al servidor. Para instrucciones, vase Captulo 39, Creacin de formularios, en
la pgina 631. Observe cul es el mtodo que utiliza para transmitir informacin desde el
navegador hasta el servidor.
Los parmetros de formulario adoptan los nombres de sus objetos de formulario
correspondientes. Por ejemplo, si el formulario contiene un campo de texto llamado
txtLastName, se enviarn los siguientes parmetros de formulario al servidor cuando el usuario
haga clic en el botn Enviar:
txtLastName=enteredvalue
En aquellos casos en que una aplicacin Web espere un valor de parmetro preciso (por ejemplo,
cuando realiza una accin basada en una opcin de varias posibles), utilice un objeto de
formulario de botones de opcin, casillas de verificacin o listas/mens para controlar los posibles
valores que puede enviar el usuario. De este modo evitar que los usuarios introduzcan
informacin incorrecta y se produzca un error de la aplicacin. El ejemplo siguiente muestra un
formulario de men emergente que ofrece tres opciones:
Cada opcin del men corresponde a un valor incorporado en el cdigo que se enva como
parmetro de formulario al servidor. El cuadro de dilogo Lista de valoresmostrado a
continuacin relaciona cada elemento de la lista con un valor (Aadir, Actualizar o Eliminar):
Temas relacionados
Parmetros de URL en la pgina 536
Creacin de parmetros de URL mediante vnculos HTML en la pgina 537
Recuperacin de parmetros de formulario y de URL en la pgina 538
Parmetros de URL
Un parmetro de URL es un par nombre/valor aadido a un URL. El parmetro comienza con un
signo de interrogacin (?) y adopta la forma de name=value. Si existen varios parmetros de URL,
cada parmetro se separa con un signo &. El ejemplo siguiente muestra un parmetro de URL
con dos pares de nombre/valor:
http://server/path/document?name1=value1&name2=value2
Los parmetros de URL permiten transmitir informacin suministrada por el usuario desde el
navegador hasta el servidor. Cuando un servidor recibe una solicitud y se aaden parmetros al
URL de la solicitud, el servidor pone los parmetros a disposicin de la pgina solicitada antes de
servir esa pgina al navegador.
En este ejemplo, imagine que la aplicacin es un escaparate basado en la Web. Puesto que los
diseadores del sitio quieren llegar al mayor nmero de usuarios posible, han diseado el sitio
para que admita monedas extranjeras. Cuando los usuarios se conectan al sitio, pueden seleccionar
en qu moneda desean ver los precios de los artculos disponibles.
1 El navegador solicita la pgina report.cfm al servidor. La solicitud incluye el parmetro de
URL Currency="euro". La variable Currency="euro" especifica que todos los importes
monetarios recuperados se mostrarn en euros.
2 El servidor almacena temporalmente el parmetro de URL en la memoria.
3 La pgina report.cfm recupera y utiliza el parmetro para recuperar el coste de los artculos en
euros. Estos importes monetarios se pueden almacenar en una tabla de base de datos de distintas
monedas o se puede convertir cada moneda que admita la aplicacin a partir de una moneda
nica asociada a cada artculo.
Recopilacin de los datos enviados por los usuarios 537
4 El servidor enva la pgina report.cfm al navegador y muestra el valor de los artculos en la
moneda solicitada. Cuando este usuario termina la sesin, el servidor destruye el valor del
parmetro de URL, liberando la memoria del servidor para que guarde las solicitudes de los
nuevos usuarios que accedan al sitio.
Los parmetros de URL se crean cuando se emplea el mtodo GET de HTTP juntamente con un
formulario HTML. El mtodo GET especifica que el valor del parmetro se aadir a la solicitud
de URL cuando se enve el formulario.
Los parmetros de URL suelen utilizarse para personalizar los sitios Web de acuerdo con las
preferencias del usuario. Por ejemplo, se puede emplear un parmetro de URL compuesto por un
nombre de usuario y una contrasea para autentificar al usuario, mostrando nicamente la
informacin a la que se ha suscrito dicho usuario. Los sitios Web financieros ofrecen algunos
ejemplos de este tipo, ya que muestran precios de acciones individuales basndose en los smbolos
de los mercados burstiles que el usuario ha elegido previamente. Los desarrolladores de
aplicaciones Web suelen utilizar parmetros de URL para transferir valores a variables dentro de
las aplicaciones. Por ejemplo, se pueden transferir trminos de bsqueda a variables SQL en una
aplicacin Web para generar resultados de bsqueda.
Temas relacionados
Creacin de parmetros de URL mediante vnculos HTML
Crear parmetros de URL en un vnculo HTML consiste en utilizar el atributo href de la
etiqueta de anclaje HTML. Puede introducir los parmetros de URL directamente en el atributo
pasando a la vista Cdigo (Ver > Cdigo) o aadiendo los parmetros de URL al final del vnculo
URL del cuadro de texto Vnculo del Inspector de propiedades.
En el ejemplo siguiente, tres vnculos crean un nico parmetro de URL (action) con tres valores
posibles (Add, Update y Delete). Segn el vnculo en el que haga clic el usuario, se enviar un
valor de parmetro distinto al servidor y se realizar la accin solicitada.
<a href="http://www.mysite.com/index.cfm?action=Add">Add a record</a>
<a href="http://www.mysite.com/index.cfm?action=Update">Update a record</a>
<a href="http://www.mysite.com/index.cfm?action=Delete">Delete a record</a>
Currency=""
http://www.mysite.com/
report.cfm?Currency=""
Navegador Web
SERVIDOR WEB
<HTML>
</HTML>
report.cfm
El Inspector de propiedades (Ventana > Propiedades) permite crear los mismos parmetros de
URL seleccionando el vnculo y aadiendo los valores de los parmetros URL al final del vnculo
URL del cuadro de texto Vnculo.
Temas relacionados
Aspectos bsicos de los parmetros de URL y de formulario en la pgina 548
Definicin de parmetros de URL en la pgina 554
Definicin de parmetros de formulario en la pgina 555
Recuperacin de parmetros de formulario y de URL
Despus de crear un parmetro de formulario o de URL, Dreamweaver puede recuperar el valor y
utilizarlo en una aplicacin Web. Para ms informacin, consulte Definicin de parmetros de
URL en la pgina 554.
Despus de definir el parmetro de formulario o de URL en Dreamweaver, puede insertar su valor
en una pgina. Para ms informacin, consulte Captulo 34, Adicin de contenido dinmico a
pginas Web, en la pgina 565.
Temas relacionados
Acceso a los datos almacenados en una base de datos en la pgina 534
Parmetros de formulario en la pgina 535
Acceso a datos almacenados en variables de sesin 539
Acceso a datos almacenados en variables de sesin
Las variables de sesin proporcionan un mecanismo mediante el cual las aplicaciones Web pueden
almacenar y recuperar la informacin del usuario. Las variables de sesin suelen almacenar
informacin (generalmente parmetros de formulario o de URL enviados por los usuarios) y
poner esa informacin a disposicin de todas las pginas de las aplicaciones mientras dure la visita
del usuario. Por ejemplo, cuando los usuarios visitan un portal Web que proporciona acceso a
correo electrnico, cotizaciones burstiles, informes meteorolgicos y noticias, la aplicacin Web
almacena la informacin de registro en una variable de sesin que identifica al usuario en todas las
pginas del sitio. Esto permite al usuario ver nicamente los tipos de contenidos que ha
seleccionado mientras navegaba por el sitio. Las variables de sesin tambin pueden proporcionar
un mecanismo de seguridad en forma de intervalo de espera que pone fin a la sesin del usuario si
la cuenta permanece inactiva durante demasiado tiempo. De este modo tambin se libera
memoria del servidor y recursos de procesamiento si los usuarios se olvidan de terminar la sesin
de un sitio Web.
Las variables de sesin se utilizan frecuentemente para almacenar preferencias de visualizacin del
usuario, respuestas a cuestionarios de varias partes, elementos elegidos para comprar en las
denominadas aplicaciones de carro de la compra y puntuaciones obtenidas en juegos en lnea.
Aspectos bsicos de las variables de sesin
Los servidores Web (o ms especficamente, el protocolo HTTP) no guardan el estado, es decir,
no realizan un seguimiento de los navegadores que se conectan a ellos ni de las solicitudes de
pginas individuales que realizan los usuarios. Cada vez que un servidor Web recibe una solicitud
de una pgina Web y responde enviando la pgina correspondiente al navegador del usuario, el
servidor Web olvida qu navegador ha efectuado la solicitud y qu pgina ha enviado. Cuando
ese mismo usuario solicita una pgina relacionada posteriormente, el servidor Web enva la pgina
sin saber cul es la ltima pgina que ha enviado a ese usuario.
Si bien esta caracterstica de HTTP contribuye a que sea un protocolo sencillo y fcil de
implementar, hace que las aplicaciones Web avanzadas, como la generacin de contenido
personalizado, sean ms difciles. Por ejemplo, para personalizar el contenido de un sitio para un
usuario individual, el usuario debe identificarse previamente. La mayora de los sitios Web
emplean algn tipo de inicio de sesin mediante nombre de usuario y contrasea para lograrlo. Si
se van a mostrar mltiples pginas personalizadas se necesita un mtodo para realizar un
seguimiento de los usuarios conectados, porque a la mayora de los usuarios les resultara
inaceptable tener que suministrar su nombre de usuario y contrasea para cada pgina del sitio.
Para permitir la creacin de aplicaciones Web complejas y el almacenamiento de los datos
suministrados por el usuario en todas las pginas de un sitio, la mayor parte de las tecnologas de
servidores de aplicaciones incluyen soporte para la administracin de sesiones. La administracin de
sesiones permite que las aplicaciones Web mantengan el estado entre varias solicitudes HTTP, lo
que permite al usuario realizar solicitudes de pginas Web durante un perodo determinado
dentro de la misma sesin interactiva.
Las variables de sesin almacenan informacin mientras dura la sesin del usuario. La sesin del
usuario comienza cuando abre por primera vez una pgina en la aplicacin. La sesin termina si el
usuario no abre otra pgina de la aplicacin durante un determinado perodo de tiempo o si pone
fin de manera explcita a la sesin (generalmente haciendo clic en un vnculo de desconexin).
Mientras dura, la sesin es especfica de un usuario individual y cada usuario tiene una sesin
independiente.
Utilice variables de sesin para almacenar informacin a la que pueda acceder cada pgina de una
aplicacin Web. La informacin puede ser muy diversa e incluir, por ejemplo, el nombre del
usuario, el tamao de fuente preferido o un indicador que especifique si el usuario ha iniciado
sesin de forma correcta. Otra utilizacin comn de las variables de la sesin consiste en mantener
en funcionamiento un registro que recopile informacin como el nmero de preguntas que el
usuario respondi correctamente hasta un momento determinado en un cuestionario en lnea o
los productos que el usuario seleccion de un catlogo en lnea hasta ese momento.
Observe que las variables de sesin slo pueden funcionar si el navegador del usuario est
configurado para aceptar cookies. El servidor crea un nmero de ID de sesin que identifica el
usuario cuando se inicia la sesin y, a continuacin, enva una cookie que contiene el nmero de
ID al navegador del usuario. Cuando el usuario solicita otra pgina al servidor, ste lee la cookie
en el navegador para identificar al usuario y recuperar las variables de sesin del usuario
almacenadas en la memoria del servidor.
Temas relacionados
Recopilacin de informacin para almacenarla en variables de sesin en la pgina 540
Almacenamiento de informacin en variables de sesin en la pgina 541
Ejemplo de informacin almacenada en variables de sesin en la pgina 542
Recuperacin de datos de variables de sesin en la pgina 543
Recopilacin de informacin para almacenarla en variables de sesin
Antes de crear una variable de sesin, deber obtener en primer lugar la informacin que desea
almacenar y, a continuacin, enviarla al servidor para su almacenamiento. En esta seccin se
explica cmo recoger y enviar informacin al servidor utilizando formularios HTML o vnculos
de hipertexto que contienen parmetros de URL. Tambin puede obtener informacin a partir de
cookies almacenadas en el equipo del usuario, en los encabezados HTTP enviados por el
navegador del usuario con una solicitud de pgina o en una base de datos.
Esta seccin trata sobre los siguientes temas:
Aspectos bsicos de las variables de sesin en la pgina 539
Almacenamiento de parmetros de URL en variables de sesin
Un ejemplo tpico de almacenamiento de parmetros de URL en las variables de sesin es un
catlogo de productos que emplea parmetros de URL incorporados en el cdigo creados
mediante un vnculo de hipertexto para devolver informacin sobre productos al servidor que
debe almacenarse en una variable de sesin. Cuando el usuario hace clic en el vnculo Aadir al
carro de la compra, el ID de producto se almacena en una variable de sesin mientras el usuario
sigue comprando. Cuando el usuario pasa a la pgina de caja, se recupera el ID de producto
almacenado en la variable de sesin.
Almacenamiento de parmetros de formulario en variables de sesin
Una encuesta basada en formulario es un ejemplo tpico de una pgina que guarda parmetros de
formulario en variables de sesin. El formulario devuelve la informacin seleccionada al servidor,
donde una pgina de aplicacin punta la encuesta y guarda las respuestas en una variable de
sesin que debe pasarse a una aplicacin que pueda registrar las respuestas recopiladas de la
muestra de encuestados. La informacin tambin puede guardarse en una base de datos para
usarla ms adelante.
Almacenamiento de informacin en variables de sesin
Cuando la informacin se enva al servidor, se almacena en variables de sesin aadiendo el
cdigo correspondiente al modelo de servidor en la pgina especificada por el parmetro de URL
o de formulario. Esta pgina, denominada pgina de destino, se especifica en el atributo action
del formulario HTML o el atributo href del vnculo de hipertexto en la pgina inicial.
La sintaxis HTML de cada uno ser la siguiente:
<form action="destination.html" method="get" name="myform"> </form>
<param name="href"value="destination.html">
El cdigo empleado para almacenar la informacin en una variable de sesin viene determinado
por la tecnologa del servidor y por el mtodo utilizado para obtener la informacin. La sintaxis
bsica de cada tecnologa del servidor ser la siguiente:
ColdFusion
<CFSET session.nombre_variable = value>
ASP y ASP.NET
<% Session("nombre_variable") = value %>
La expresin value suele ser una expresin de servidor como Request.Form(lastname). Por
ejemplo, si utiliza un parmetro de URL llamado product (o un formulario HTML con el
mtodo GET y un campo de texto llamado product) para recopilar informacin, las declaraciones
siguientes almacenarn la informacin en una variable de sesin llamada prodID:
ColdFusion
<CFSET session.prodID = url.product>
ASP y ASP.NET
<% Session("prodID") = Request.QueryString("producto") %>
Si utiliza un formulario HTML con el mtodo post y un campo de texto llamado txtProduct
para recoger la informacin, las declaraciones siguientes almacenarn la informacin en la variable
de sesin:
ColdFusion
<CFSET session.prodID = form.txtProduct>
ASP y ASP.NET
<% Session("prodID") = Request.Form("txtProduct") %>
Temas relacionados
Ejemplo de informacin almacenada en variables de sesin
Usted est trabajando en un sitio con un gran nmero de personas mayores. En Dreamweaver,
aada dos vnculos a la pgina inicial para que los usuarios personalicen el tamao del texto del
sitio. Para ver texto ms grande y fcil de leer, el usuario hace clic en un vnculo y, para ver texto
de tamao normal, hace clic en otro.
Cada vnculo tiene un parmetro de URL llamado fontsize que enva la preferencia de texto del
usuario al servidor, como muestra el siguiente ejemplo de Macromedia ColdFusion:
<a href="resort.cfm?fontsize=large">Larger Text</a><br>
<a href="resort.cfm?fontsize=small">Normal Text</a>
Usted decide almacenar la preferencia de texto del usuario en una variable de sesin y utilizarla
para establecer el tamao de fuente de cada pgina que solicite el usuario.
Cerca de la parte superior de la pgina de destino, introduzca el cdigo siguiente para crear una
sesin llamadafont_pref que almacene la preferencia de tamao de fuente del usuario.
ColdFusion
<CFSET session.font_pref = url.fontsize>
ASP y ASP.NET
<% Session("font_pref") = Request.QueryString("fontsize") %>
Cuando el usuario hace clic en el vnculo de hipertexto, la pgina enva la preferencia de texto del
usuario en un parmetro de URL a la pgina de destino. El cdigo de la pgina de destino
almacena en el parmetro de URL en la variable de sesin font_pref. Mientras dure la sesin del
usuario, todas las pginas de la aplicacin recuperarn este valor y mostrarn el tamao de fuente
seleccionado.
Temas relacionados
Recuperacin de datos de variables de sesin
Una vez almacenado un valor en una variable de sesin, puede utilizar Dreamweaver para
recuperar el valor de las variables de sesin y utilizarlo en una aplicacin Web. Para ms
informacin, consulte Definicin de variables de sesin en la pgina 556.
Despus de definir la variable de sesin en Dreamweaver, puede insertar su valor en una pgina.
Para ms informacin, consulte el Captulo 34, Adicin de contenido dinmico a pginas Web,
en la pgina 565.
Temas relacionados
545
CAPTULO 33
Definicin de fuentes de contenido dinmico
Los sitios Web dinmicos necesitan una fuente de datos para recuperar y mostrar contenido
dinmico. Macromedia Dreamweaver MX 2004 permite utilizar bases de datos, variables de
peticin, variables de URL, variables de servidor, variables de formulario, procedimientos
almacenados y otras fuentes de contenido dinmico. Segn cul sea la fuente de datos, podr
recuperar contenido nuevo para satisfacer una peticin o modificar la pgina a fin de atender las
necesidades de los usuarios.
En este captulo se describen los procedimientos para definir bases de datos y variables como
fuentes de contenido dinmico. Para obtener ms informacin sobre las tecnologas tratadas en
este captulo, vase Recursos tecnolgicos HTML y Web en la pgina 30.
Fuentes de contenido dinmico en la pgina 546
Definicin de variables de sesin en la pgina 556
Definicin de variables de aplicacin para ASP y ColdFusion en la pgina 557
Definicin de variables de servidor en la pgina 559
Creacin de un cach de las fuentes de contenido en la pgina 562
Cambio o eliminacin de fuentes de contenido en la pgina 563
Copia de un juego de registros de una pgina a otra en la pgina 564
546 Captulo 33: Definicin de fuentes de contenido dinmico
Fuentes de contenido dinmico
Una fuente de contenido dinmico es un almacn de informacin desde el que se puede recuperar
y mostrar contenido dinmico para utilizar en una pgina Web. Las fuentes de contenido
dinmico no slo incluyen informacin almacenada en una base de datos, sino tambin valores
enviados por formularios HTML, valores contenidos en objetos de servidor, valores de
propiedades JavaBeans y otras fuentes de contenido.
Las fuentes de contenido que defina en Dreamweaver se aadirn a la lista de fuentes en el panel
Vinculaciones. Una vez que haya creado una fuente de contenido y la haya incluido en el panel
Vinculaciones, podr insertarla fcilmente en la pgina seleccionada actualmente.
Temas relacionados
Aspectos bsicos de los juegos de registros en la pgina 546
Variables de sesin en la pgina 548
Variables de aplicacin de ASP y ColdFusion en la pgina 549
Variables de servidor ASP en la pgina 549
Variables de servidor ColdFusion en la pgina 549
JavaBeans y JSP en la pgina 550
Aspectos bsicos de los juegos de registros
Si utiliza una base de datos como fuente de contenido para una pgina Web dinmica, deber
crear en primer lugar un juego de registros para almacenar los datos recuperados. Los juegos de
registros actuarn como intermediarios entre la base de datos que almacena el contenido y el
servidor de aplicaciones que genera la pgina. Los juegos de registros se componen de datos
devueltos por una consulta de base de datos y se almacenan temporalmente en la memoria del
servidor de aplicaciones para una recuperacin ms rpida. El servidor descarta el juego de
registros cuando ya no se necesita.
Fuentes de contenido dinmico 547
El juego de registros es un conjunto de datos recuperados de una base de datos especfica. Puede
incluir una tabla de base de datos completa o un subconjunto de las filas y columnas de la tabla.
Estas filas y columnas se recuperan por medio de una consulta de base de datos que se define en el
juego de registros. Las consultas de base de datos se escriben en SQL (Lenguaje de consulta
estructurado, Structured Query Language), un sencillo lenguaje que permite recuperar, aadir y
eliminar datos de una base de datos. El generador de SQL que incluye Dreamweaver permite crear
consultas sencillas sin necesidad de conocer este lenguaje. Sin embargo, si desea crear consultas
SQL complejas, deber conocer el lenguaje y escribir manualmente declaraciones SQL para
introducirlas en Dreamweaver.
Nota: Microsoft ASP.NET denomina conjunto de registros (DataSet) al juego de registros. Si trabaja
con documentos de tipo ASP.NET, los cuadros de dilogo y las opciones de men especficos de
ASP.NET utilizan la etiqueta Conjunto de datos. La documentacin de Dreamweaver se refiere
genricamente a ambos tipos como juegos de registros, aunque utiliza Conjunto de datos cuando
describe especficamente funciones de ASP.NET.
Para ms informacin sobre cmo utilizar bases de datos y SQL, consulte el Apndice A, Gua de
bases de datos para principiantes, en la pgina 769 y Apndice B, Nociones bsicas de SQL, en
la pgina 781.
Si se dispone a escribir SQL para utilizar con ASP.NET, existen ciertas condiciones especficas de
ASP.NET que conviene tener en cuenta. Para obtener ms informacin sobre estas condiciones,
vase Escritura de SQL para ASP.NET en la pgina 547.
Antes de definir un juego de registros para utilizarlo con Dreamweaver, deber crear una conexin
con una base de datos y, si sta est vaca, introducir los datos. Si an no ha definido una conexin
de base de datos para el sitio, consulte la seccin correspondiente a la tecnologa de servidor con la
que est trabajando en el captulo que trata este tema y siga las instrucciones para crear una
conexin de base de datos.
En los captulos siguientes se describen las conexiones de base de datos de todas las tecnologas de
servidor que admite Dreamweaver:
Temas relacionados
Definicin de un juego de registros en la pgina 551
Escritura de SQL para ASP.NET
Cuando escriba declaraciones SQL en el cuadro de dilogo Conjunto de datos avanzado deber
tener en cuenta algunas condiciones especficas de ASP.NET. Estas condiciones se describen en las
secciones siguientes.
Parmetros
La sintaxis que se utiliza para hacer referencia a los parmetros vara segn la conexin de base de
datos que se utilice (por ejemplo, OLE DB o Microsoft SQL Server).
OLE DB
Al conectar una base de datos que utiliza OLE DB se debe hacer referencia a los parmetros
utilizando un signo de interrogacin (?). Por ejemplo:
SELECT * FROM Employees WHERE HireDate > ?
Microsoft SQL Server
Al conectar con Microsoft SQL Server utilizando el Managed Data Provider para SQL Server que
se suministra con .NET Framework, todos los parmetros deben tener nombre. Por ejemplo:
SELECT * FROM Employees WHERE HireDate > @hireDate
Insercin de cdigo en declaraciones SQL
Al insertar cdigo en declaraciones SQL escritas para ASP.NET, deber introducir todas las
cadenas entre comillas (" ") y el cdigo entre parntesis ( ):
SELECT * FROM Employees WHERE HireDate > "+ (Request.queryString("hireDate"))
Temas relacionados:
Captulo 25, Conexiones de base de datos para desarrolladores de ASP.NET, en la pgina
479.
Aspectos bsicos de los parmetros de URL y de formulario
Los parmetros de URL almacenan la informacin recuperada que han introducido los usuarios.
Para definir un parmetro de URL, cree un vnculo de hipertexto o formulario que utilice el
mtodo GET para enviar datos. La informacin se aadir al URL de la pgina solicitada y se
comunicar al servidor. Cuando se utilizan variables de URL, la cadena de consulta contiene uno
o ms pares de nombre/valor asociados con campos de formulario. Estos pares de nombre/valor se
aaden al URL.
Los parmetros de formulario almacenan informacin recuperada que se incluye en la peticin
HTTP de una pgina Web. Si crea un formulario que utiliza el mtodo POST, los datos enviados
por el formulario se transferirn al servidor. Antes de comenzar deber transferir un parmetro de
formulario al servidor. Para instrucciones, vase Captulo 32, Obtencin de datos para la
pgina, en la pgina 533.
Temas relacionados
Variables de sesin
Las variables de sesin permiten almacenar y mostrar informacin mantenida durante la visita (o
sesin) de un usuario. El servidor crea un objeto de sesin diferente para cada usuario y lo
mantiene durante un perodo de tiempo establecido o hasta que se pone fin al objeto
explcitamente. Para ms informacin, consulte Acceso a datos almacenados en variables de
sesin en la pgina 539.
Fuentes de contenido dinmico 549
Dado que las variables de sesin duran toda la sesin y se conservan cuando el usuario se desplaza
de una pgina a otra dentro del sitio Web, resultan idneas para almacenar las preferencias del
usuario. Las variables de sesin se pueden utilizar para insertar un valor en el cdigo HTML de la
pgina, asignar un valor a una variable local o suministrar un valor para evaluar una expresin
condicional.
Antes de definir las variables de sesin de una pgina deber crearlas en el cdigo fuente. Para
instrucciones, vase Recopilacin de los datos enviados por los usuarios en la pgina 534 y
Acceso a datos almacenados en variables de sesin en la pgina 539.
Despus de crear una variable de sesin en el cdigo fuente de la aplicacin Web, puede utilizar
Dreamweaver para recuperar su valor y utilizarlo en una pgina Web.
Temas relacionados
Variables de aplicacin de ASP y ColdFusion
En ASP y ColdFusion, puede utilizar variables de aplicacin para almacenar y mostrar
informacin que se mantiene mientras dure la aplicacin y que se conserva de un usuario a otro.
La aplicacin dura desde el momento en que el primer usuario solicita una pgina en la aplicacin
hasta el momento en que el servidor Web se detiene. (Se denomina aplicacin a todos los archivos
de un directorio virtual y sus subdirectorios.)
Dado que las variables de aplicacin se mantienen mientras dure la aplicacin y se conservan de
un usuario a otro, resultan idneas para almacenar informacin que debe existir para todos los
usuarios, como, por ejemplo, la hora y la fecha actuales. El valor de la variable de aplicacin se
define en el cdigo de la aplicacin.
Para ms informacin, consulte Definicin de variables de aplicacin para ASP y ColdFusion en
la pgina 557 y Adicin de contenido dinmico a pginas Web en la pgina 565.
Variables de servidor ASP
Puede definir las siguientes variables de servidor ASP como fuentes de contenido dinmico:
Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables y
Request.ClientCertificates.
Temas relacionados
Definicin de variables de servidor ASP en la pgina 559
Variables de servidor ColdFusion
Puede definir las siguientes variables de servidor ColdFusion:
Las variables de cliente asocian datos a un cliente especfico. Las variables de cliente mantienen
el estado de la aplicacin mientras el usuario se desplaza de una pgina a otra de la aplicacin, as
como de una sesin a otra. Mantener el estado significa conservar la informacin de una pgina
(o sesin) en la siguiente para que la aplicacin recuerde al usuario y las opciones y preferencias
anteriores del usuario.
Las variables de cookie acceden a cookies transferidas al servidor por el navegador.
Las variables CGI proporcionan informacin sobre el servidor que ejecuta ColdFusion, el
navegador que solicita una pgina y otro tipo de informacin sobre el entorno de procesamiento.
A las variables de servidor pueden acceder todos los clientes y las aplicaciones del servidor. Se
mantienen hasta que se detiene el servidor.
Las variables locales se crean con la etiqueta CFSET o CFPARAM en una pgina ColdFusion.
Temas relacionados
Definicin de variables de servidor ColdFusion en la pgina 560
Definicin de variables de servidor JSP en la pgina 560
Definicin de variables de servidor PHP en la pgina 560
JavaBeans y JSP
Los componentes JavaBeans son elementos de la arquitectura de las aplicaciones JSP multinivel.
Las JavaBeans suelen emplearse como parte de un nivel intermedio de lgica empresarial que
tiene como misin separar la lgica de presentacin de la lgica de acceso a los datos. En estas
aplicaciones, son las JavaBeans (tambin denominadas beans), y no las pginas JSP, las que
contienen la lgica que accede directamente a la base de datos.
En Dreamweaver, las JavaBeans reciben el tratamiento de fuentes de contenido dinmico para
pginas JSP y aparecen en el panel Vinculaciones. En el panel Vinculaciones puede hacer doble
clic en JavaBeans para ver sus propiedades y, a continuacin, arrastrar las propiedades a la pgina
para crear referencias de datos dinmicos.
Tambin puede definir una coleccin JavaBeans (un conjunto de JavaBeans) como fuente de
contenido dinmico. Sin embargo, Dreamweaver slo admite regiones repetidas y vinculaciones
dinmicas cuando se utilizan colecciones JavaBeans.
Las copias de la clase de bean (o el archivo .zip o .jar que contiene la clase de bean) deben residir
en las siguientes ubicaciones:
En el sistema que ejecuta Dreamweaver debe residir una copia de la clase de bean en la carpeta
Configuration/classes de Dreamweaver o en la ruta de clases del sistema. (Dreamweaver utiliza
esta copia de la clase en tiempo de diseo.)
En el sistema que ejecuta el servidor de aplicaciones JSP, la clase de bean debe residir en la ruta
de clases del servidor de aplicaciones. (El servidor de aplicaciones utiliza esta copia de la clase
en tiempo de ejecucin.) La ruta de clases del servidor de aplicaciones vara de un servidor de
aplicaciones a otro, pero generalmente se encuentra en una carpeta WEB-INF con una
subcarpeta classes/bean.
Si Dreamweaver y el servidor de aplicaciones se ejecutan en el mismo sistema y el servidor de
aplicaciones utiliza la ruta de clases del sistema (no una ruta de clases interna), puede haber una
sola copia de la clase de JavaBeans en la ruta de clases del sistema. Tanto el servidor de aplicaciones
como Dreamweaver utilizarn esta copia de la clase. En caso contrario, deber haber copias de la
clase de JavaBeans en dos rutas del equipo (como se ha explicado anteriormente).
La estructura de carpetas debe coincidir con el paquete de JavaBeans. Por ejemplo, si el paquete de
JavaBeans se denomina com.ardvark.myBean, deber estar almacenado en /com/ardvark/ dentro
de la ruta de clases o en la carpeta Configuration/classes de Dreamweaver.
Definicin de un juego de registros 551
Temas relacionados
Definicin de JavaBeans (slo JSP) en la pgina 561
Definicin de un juego de registros
Puede definir un juego de registros utilizando el cuadro de dilogo Juego de registros simple de
Dreamweaver, que permite construir con facilidad declaraciones SQL simples; utilizar el cuadro
de dilogo avanzado Juego de registros, que le permite escribir sus propias declaraciones SQL; o
utilizar el rbol Elementos de base de datos para crear una declaracin SQL.
Si no est familiarizado con la escritura de declaraciones SQL para recuperar informacin de una
base de datos, utilice el cuadro de dilogo simple Juego de registros.
Creacin de un juego de registros sin escribir SQL
En esta seccin se explica cmo definir un juego de registros utilizando el cuadro de dilogo Juego
de registros de Dreamweaver, que permite crear un juego de registros sin necesidad de introducir
manualmente declaraciones SQL. Definir un juego de registros mediante este mtodo consiste en
realidad en seleccionar una conexin de base de datos y una tabla en los mens emergentes del
cuadro de dilogo Juego de registros.
Si desea trabajar con sus propias declaraciones SQL, utilice la versin avanzada del cuadro de
dilogo Juego de registros. (Vase Creacin de un juego de registros avanzado escribiendo SQL
en la pgina 552.)
Para definir un juego de registros sin escribir SQL:
1 En la ventana de documento, abra la pgina que utilizar el juego de registros.
2 Seleccione Ventana > Vinculaciones para mostrar el panel Vinculaciones.
3 En el panel Vinculaciones, haga clic en el botn de signo ms (+) y seleccione Juego de registros
(consulta) en el men emergente.
Aparecer el cuadro de dilogo Juego de registros sencillo. Si est desarrollando un sitio
Macromedia ColdFusion MX o ASP.NET, el cuadro de dilogo Juego de registros ser ligeramente
distinto del ejemplo que se muestra a continuacin. (Si aparece la versin avanzada del cuadro de
dilogo Juego de registros, cambie a la versin sencilla haciendo clic en el botn Simple.)
Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo Juego de registros.
5 Haga clic en el botn Prueba para ejecutar la consulta y comprobar que recupera la informacin
deseada.
Si ha definido un filtro que utiliza parmetros introducidos por los usuarios, el botn Prueba
mostrar el cuadro de dilogo Valor de prueba. Introduzca un valor en el cuadro de texto Valor
de prueba y haga clic en Aceptar. Si se crea una instancia del juego de registros, aparecer una
tabla mostrando los datos extrados del juego de registros.
6 Haga clic en Aceptar para aadir el juego de registros a la lista de fuentes de contenido
disponibles en el panel Vinculaciones.
Creacin de un juego de registros avanzado escribiendo SQL
El cuadro de dilogo avanzado Juego de registros le permite escribir sus propias declaraciones SQL
o utilizar el rbol grfico Elementos de base de datos para crear una declaracin SQL.
Nota: si escribe declaraciones SQL para documentos de tipo ASP.NET, consulte enCreacin de
consultas SQL utilizando el rbol Elementos de base de datos en la pgina 553 las reglas
especficas de ASP.NET.
Si desea crear un juego de registros simple sin escribir SQL manualmente, vase Creacin de
consultas SQL utilizando el rbol Elementos de base de datos en la pgina 553.
Para definir un juego de registros escribiendo SQL:
1 En la ventana de documento, abra la pgina que utilizar el juego de registros.
3 En el panel Vinculaciones, haga clic en el botn de signo ms (+) y seleccione Juego de registros
(consulta) en el men emergente.
Aparecer el cuadro de dilogo avanzado Juego de registros. Si est desarrollando un sitio
ColdFusion MX o ASP.NET, el cuadro de dilogo Juego de registros ser ligeramente distinto
del ejemplo que se muestra a continuacin. (Si aparece la versin sencilla del cuadro de dilogo
Juego de registros, cambie a la versin avanzada haciendo clic en el botn Avanzado.)
Definicin de un juego de registros 553
Para instrucciones sobre cmo completar el cuadro de dilogo Juego de registros, haga clic en el
botn Ayuda del cuadro de dilogo Juego de registros.
5 Haga clic en el botn Prueba para ejecutar la consulta y comprobar que recupera la informacin
deseada.
Si ha definido un filtro que utiliza parmetros introducidos por los usuarios, el botn Prueba
mostrar el cuadro de dilogo Valor de prueba. Introduzca un valor en el cuadro de texto Valor
de prueba y haga clic en Aceptar. Si se crea una instancia del juego de registros, aparecer una
tabla mostrando los datos procedentes del juego de registros.
6 Haga clic en Aceptar para aadir el juego de registros a la lista de fuentes de contenido
disponibles en el panel Vinculaciones.
Creacin de consultas SQL utilizando el rbol Elementos de base de datos
En lugar de escribir manualmente las declaraciones SQL en el cuadro de texto SQL, puede utilizar
la interfaz de apuntar y sealar de Elementos de base de datos para crear consultas SQL complejas.
El rbol Elementos de base de datos permite seleccionar objetos de base de datos y vincularlos
utilizando las clusulas SQL SELECT, WHERE y ORDER BY. Despus de crear una consulta
SQL, puede definir las variables utilizando la seccin Variables del cuadro de dilogo.
Los ejemplos siguientes describen dos declaraciones SQL y los pasos que debe seguir para crearlas
en el rbol Elementos de base de datos del cuadro de dilogo avanzado Juego de registros.
Seleccin de una tabla
Este ejemplo selecciona todo el contenido de la tabla Empleados. La declaracin SQL que define
la consulta aparece de este modo:
SELECT * FROM Employees
Para crear esta consulta:
1 Ample la rama Tablas para ver todas las tablas de la base de datos seleccionada.
2 Seleccione la tabla Employees.
3 Haga clic en el botn Seleccionar.
4 Haga clic en Aceptar para aadir el juego de registros al panel Vinculaciones.
Seleccin de filas especficas de una tabla y ordenacin de los resultados
El ejemplo siguiente selecciona dos filas de la tabla Employees y selecciona el tipo de trabajo
utilizando una variable que usted debe definir. A continuacin, los resultados se ordenan por
nombre de empleado.
SELECT emplNo, emplName
FROM Employees
WHERE emplJob = 'varJob'
ORDER BY emplName
Para crear esta consulta:
1 Ample la rama Tablas para ver todas las tablas de la base de datos seleccionada y, a
continuacin, ample la tabla Employees para ver las filas de la tabla por separado.
2 Cree la declaracin SQL de la siguiente forma:
Seleccione emplNo y haga clic en el botn Seleccionar.
Seleccione emplName y haga clic en el botn Seleccionar.
Seleccionar emplJob y haga clic en el botn Dnde.
Seleccione emplName y haga clic en el botn Ordenar por.
3 Site el punto de insercin despus de WHERE emplJob en el rea de texto SQL y escriba
='varJob' (incluido el signo igual).
4 Haga clic en el botn de signo ms (+) en el rea Variables e introduzca los siguientes valores en
las columnas Nombre, Valor predeterminado y Valor de tiempo de ejecucin para definir la
variable 'varJob'. varJob, CLERK, Request("job").
5 Haga clic en Aceptar para aadir el juego de registros al panel Vinculaciones.
Definicin de parmetros de URL
Los parmetros de URL almacenan la informacin recuperada que han introducido los usuarios.
Antes de comenzar deber transferir un parmetro de URL o formulario al servidor. Para ms
informacin, consulte Parmetros de URL en la pgina 536 y Aspectos bsicos de los
parmetros de URL y de formulario en la pgina 548.
Para definir un parmetro de URL:
1 En la ventana de documento, abra la pgina que utilizar la variable.
3 En el panel Vinculaciones, haga clic en el botn de signo ms (+) y seleccione una de las
siguientes opciones en el men emergente.
Se mostrar el cuadro de dilogo Variable de URL.
4 Introduzca el nombre de la variable de URL en el cuadro de texto y haga clic en Aceptar.
El nombre de la variable de URL suele ser el nombre del campo de formulario HTML o del
objeto empleado para obtener su valor.
Tipos de
documento
Elemento del men en panel Vinculaciones para variable de URL
ASP Variable de peticin > Request.QueryString
ColdFusion Variable de URL
JSP Variable de peticin
PHP Variable de URL
Definicin de parmetros de formulario 555
5 La variable de URL aparecer en el panel Vinculaciones.
Despus de definir la variable de URL puede usar su valor en la pgina seleccionada
actualmente. Para ms informacin, consulte el Captulo 34, Adicin de contenido dinmico
a pginas Web, en la pgina 565.
Temas relacionados:
Definicin de parmetros de formulario
Los parmetros de formulario almacenan informacin recuperada que se incluye en la peticin
HTTP de una pgina Web. Si crea un formulario que utiliza el mtodo POST, los datos enviados
por el formulario se transferirn al servidor. Antes de comenzar deber transferir un parmetro de
formulario al servidor. Para ms informacin, consulte el Captulo 32, Obtencin de datos para
la pgina, en la pgina 533.
Para definir un parmetro de formulario:
1 En la ventana de documento, abra la pgina que utilizar la variable.
3 En el panel Vinculaciones, haga clic en el botn de signo ms (+) y seleccione una de las
siguientes opciones en el men emergente.
Se mostrar el cuadro de dilogo Variable de formulario. Introduzca el nombre de la variable de
formulario en el cuadro de dilogo y haga clic en Aceptar. El nombre de la variable de
formulario suele ser el nombre del campo de formulario HTML o del objeto empleado para
obtener su valor.
Tipos de
documento
Elemento del men en panel Vinculaciones para variable de
formulario
ASP Variable de peticin > Request.Form
ColdFusion Variable de formulario
JSP Variable de peticin
PHP Variable de formulario
4 El parmetro de formulario aparecer en el panel Vinculaciones.
Despus de definir el parmetro de formulario como una fuente de contenido, puede utilizar su
valor en la pgina. Para ms informacin, consulte el Captulo 32, Obtencin de datos para la
pgina, en la pgina 533.
Temas relacionados
Definicin de variables de sesin
Puede utilizar variables de sesin para almacenar y mostrar informacin mantenida durante la
visita (o sesin) de un usuario. El servidor crea un objeto de sesin diferente para cada usuario y lo
mantiene durante un perodo de tiempo establecido o hasta que se pone fin al objeto
explcitamente. Para ms informacin, consulte Aspectos bsicos de las variables de sesin en
la pgina 539.
Antes de definir las variables de sesin de una pgina deber crearlas en el cdigo fuente. Para
instrucciones, vanse las siguientes secciones:
Despus de crear una variable de sesin en el cdigo fuente de la aplicacin Web, puede utilizar
Dreamweaver para recuperar su valor y utilizarlo en una pgina Web.
Para definir una variable de sesin predefinida:
1 Cree una variable de sesin en el cdigo fuente y asgnele un valor.
Este ejemplo ColdFusion crea una instancia de una sesin llamada username y le asigna el
valor Cornelius:
<CFSET session.username = Cornelius>
2 Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones.
3 Haga clic en el botn de signo ms (+) y seleccione Variable de aplicacin en el men emergente.
Definicin de variables de aplicacin para ASP y ColdFusion 557
4 Introduzca el nombre de la variable definida en el cdigo fuente.
La variable de sesin aparecer en el panel Vinculaciones.
Despus de definir la variable de sesin puede usar su valor en la pgina. Para ms informacin,
consulte el Captulo 34, Adicin de contenido dinmico a pginas Web, en la pgina 565.
Temas relacionados
Definicin de variables de aplicacin para ASP y ColdFusion
En ASP y ColdFusion, puede utilizar variables de aplicacin para almacenar y mostrar
informacin que se mantiene mientras dure la aplicacin y que se conserva de un usuario a otro.
Nota: no hay objetos de variable de aplicacin en JSP o PHP.
Para definir una variable de aplicacin para una pgina:
1 Abra un documento de tipo dinmico en la ventana de documento.
3 Haga clic en el botn de signo ms (+) y seleccione Variable de aplicacin en el men emergente.
4 Introduzca el nombre de la variable definida en el cdigo fuente de la aplicacin.
La variable de aplicacin aparece en el panel Vinculaciones en el icono Aplicacin.
Despus de definir la variable de aplicacin puede usar su valor en la pgina. Para ms
informacin, consulte el Captulo 34, Adicin de contenido dinmico a pginas Web, en
la pgina 565.
Temas relacionados:
Utilizacin de una variable como fuente de datos para un juego
de registros ColdFusion
Al definir un juego de registros para una pgina en el panel Vinculaciones, Dreamweaver
introduce el nombre de la fuente de datos ColdFusion en la etiqueta cfquery de la pgina. Le
resultar prctico almacenar un nombre de fuente de datos en una variable y utilizar la variable en
la etiqueta cfquery. Dreamweaver proporciona un mtodo visual para especificar este tipo de
variables en los juegos de registros.
Para especificar visualmente una variable como fuente de datos para un juego de registros:
1 Compruebe que hay una pgina ColdFusion activa en la ventana de documento.
2 En el panel Vinculaciones, haga clic en el botn de signo ms (+) y seleccione Variable de
nombre de fuente de datos en el men emergente.
Aparecer el cuadro de dilogo Variable de nombre de fuente de datos.
3 Defina una variable y haga clic en Aceptar.
4 Al definir un juego de registros, seleccione la variable como Fuente de datos para el juego de
registros.
En el cuadro de dilogo Juego de registros, la variable aparece en el men emergente Fuente de
datos junto con las fuentes de datos ColdFusion del servidor.
5 Seleccione las opciones del cuadro de dilogo Juego de registros y haga clic en Aceptar.
6 Inicialice la variable.
Dreamweaver no inicializa la variable, de modo que usted puede inicializarla cmo y dnde
desee. Puede inicializar la variable en el cdigo de la pgina (antes de la etiqueta cfquery), en
un archivo de inclusin (include) o en otro archivo como variable de sesin o de aplicacin.
Definicin de variables de servidor 559
Definicin de variables de servidor
Puede definir variables de servidor como fuentes de contenido dinmico para utilizarlas en una
aplicacin Web.
Las variables de servidor varan segn el tipo de documento e incluyen variables de formulario,
variables de URL, variables de sesin y variables de aplicacin. Para ms informacin sobre estos
tipos de variables, consulte las siguientes secciones:
En esta seccin se explica cules son las variables de servidor que puede definir como fuente de
contenido para distintos tipos de documento. Los tipos de documentos y sus secciones
correspondientes son:
Definicin de variables de servidor ColdFusion en la pgina 560
Definicin de variables de servidor JSP en la pgina 560
Definicin de JavaBeans (slo JSP) en la pgina 561
Definicin de variables de servidor ASP
Puede definir las siguientes variables de servidor ASP como fuentes de contenido dinmico:
Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables y
Request.ClientCertificates.
Para definir una variable de servidor para una pgina ASP:
1 Abra el panel Vinculaciones (Ventana > Vinculaciones).
2 Haga clic en el botn de signo ms (+) y seleccione Variable de peticin en el men emergente.
Se mostrar el cuadro de dilogo Variable de peticin. Seleccione una de las colecciones de
peticin en el men emergente Tipo.
Por ejemplo, si desea acceder a la informacin de la coleccin Request.ServerVariables,
seleccione ServerVariables. Si desea acceder a la informacin de la coleccin Request.Form,
seleccione Form.
Para ms informacin sobre variables de servidor ASP, haga clic en el botn Ayuda.
3 Especifique la variable de la coleccin a la que desea obtener acceso.
Por ejemplo, si desea obtener acceso a la informacin de la variable
Request.ServerVariables("HTTP_USER_AGENT"), introduzca el argumento
HTTP_USER_AGENT. Si desea obtener acceso a la informacin de la variable
Request.Form("lastname"), introduzca el argumento lastname.
La variable de servidor aparecer en el panel Vinculaciones.
Definicin de variables de servidor ColdFusion
Puede definir las siguientes variables de servidor ColdFusion como fuentes de contenido
dinmico: cliente, cookie, CGI, servidor y variables locales. Para obtener ms informacin sobre
estas variables de servidor, vase Variables de servidor ASP en la pgina 549.
Para definir una variable de servidor para una pgina ColdFusion:
2 Haga clic en el botn de signo ms (+) y seleccione la variable de servidor en el men emergente.
3 Introduzca el nombre de la variable.
Para obtener ms informacin sobre las entradas de nombre posibles, haga clic en el botn Ayuda.
La variable de servidor ColdFusion aparecer en el panel Vinculaciones.
Temas relacionados:
Definicin de variables de servidor PHP
Puede definir una variable de servidor PHP como fuente de contenido dinmico para los tipos de
documento PHP.
Para definir una variable de servidor para una pgina PHP:
2 Haga clic en el botn de signo ms (+) y seleccione la variable en el men emergente.
La variable de servidor PHP aparecer en el panel Vinculaciones.
Temas relacionados:
Captulo 33, Definicin de parmetros de URL, en la pgina 554
Definicin de variables de servidor JSP
Puede definir una variable de peticin como fuente de contenido dinmico para pginas JSP.
Para definir una variable de peticin para una pgina JSP:
2 Haga clic en el botn de signo ms (+) y seleccione Variable de peticin en el men emergente.
La variable de servidor JSP aparecer en el panel Vinculaciones.
Definicin de variables de servidor 561
Temas relacionados:
Captulo 33, Definicin de parmetros de URL, en la pgina 554
Definicin de JavaBeans (slo JSP)
En Dreamweaver, los componentes JavaBeans reciben el tratamiento de fuentes de contenido
dinmico para pginas JSP y aparecen en el panel Vinculaciones. En el panel Vinculaciones puede
hacer doble clic en JavaBeans para ver sus propiedades y, a continuacin, arrastrar las propiedades
a la pgina para crear referencias de datos dinmicos.
Tambin puede definir una coleccin JavaBeans (un conjunto de JavaBeans) como fuente de
contenido dinmico. Sin embargo, Dreamweaver slo admite regiones repetidas y vinculaciones
dinmicas cuando se utilizan colecciones JavaBeans.
Las copias de la clase de bean (o el archivo .zip o .jar que contiene la clase de bean) deben residir
en las siguientes ubicaciones:
En el sistema que ejecuta Dreamweaver debe residir una copia de la clase de bean en la carpeta
Configuration/classes de Dreamweaver o en la ruta de clases del sistema. (Dreamweaver utiliza
esta copia de la clase en tiempo de diseo.)
En el sistema que ejecuta el servidor de aplicaciones JSP, la clase de bean debe residir en la ruta
de clases del servidor de aplicaciones. (El servidor de aplicaciones utiliza esta copia de la clase
en tiempo de ejecucin.) La ruta de clases del servidor de aplicaciones vara de un servidor de
aplicaciones a otro, pero generalmente se encuentra en una carpeta WEB-INF con una
subcarpeta classes/bean.
Si Dreamweaver y el servidor de aplicaciones se ejecutan en el mismo sistema y el servidor de
aplicaciones utiliza la ruta de clases del sistema (no una ruta de clases interna), puede haber una
sola copia de la clase de JavaBeans en la ruta de clases del sistema. Tanto el servidor de aplicaciones
como Dreamweaver utilizarn esta copia de la clase. En caso contrario, deber haber copias de la
clase de JavaBeans en dos rutas del equipo (como se ha explicado anteriormente).
La estructura de carpetas debe coincidir con el paquete de JavaBeans. Por ejemplo, si el paquete de
JavaBeans se denomina com.ardvark.myBean, deber estar almacenado en /com/ardvark/ dentro
de la ruta de clases o en la carpeta Configuration/classes de Dreamweaver.
Para definir una JavaBean para una pgina JSP:
2 Haga clic en el botn de signo ms (+) y seleccione JavaBean en el men emergente.
Aparecer el cuadro de dilogo Java Bean.
3 Seleccione las opciones del cuadro de dilogo y haga clic en Aceptar.
Para instrucciones sobre cmo completar el cuadro de dilogo JavaBean, haga clic en el botn
Ayuda del cuadro de dilogo.
4 La bean que acaba de definir aparecer en el panel Vinculaciones.
Para definir una coleccin JavaBean para una pgina JSP:
2 Haga clic en el botn de signo ms (+) y seleccione Coleccin JavaBean en el men emergente.
Aparecer el cuadro de dilogo Coleccin Java Bean.
Para obtener instrucciones sobre cmo completar el cuadro de dilogo JavaBean, haga clic en el
botn Ayuda del cuadro de dilogo.
4 La coleccin JavaBean que acaba de definir aparecer en el panel Vinculaciones.
Creacin de un cach de las fuentes de contenido
Puede crear un cach (o almacenar) fuentes de contenido dinmico en una Design Note. De este
modo podr trabajar en un sitio aunque no tenga acceso al servidor de bases de datos o
aplicaciones que almacena las fuentes de contenido dinmico. La creacin del cach tambin
puede acelerar el desarrollo al eliminar el acceso repetido a travs de la red al servidor de bases de
datos y aplicaciones.
Cambio o eliminacin de fuentes de contenido 563
Para crear una cach de las fuentes de contenido:
Haga clic en el botn de flecha situado en la esquina superior derecha del panel Vinculaciones
y seleccione la opcin Cach en el men emergente.
Si realiza cambios en alguna de las fuentes de contenido, deber actualizar el cach haciendo
clic en el botn Actualizar (el icono de flecha circular) situado en la esquina superior derecha
del panel Vinculaciones. (Ample el panel si no ve el botn.)
Cambio o eliminacin de fuentes de contenido
Puede cambiar o eliminar cualquier fuente de contenido dinmico, es decir, cualquier fuente de
contenido que figure en el panel Vinculaciones.
Al cambiar o borrar una fuente de contenido del panel Vinculaciones, no se cambia ni se borra
ninguna instancia de ese contenido en la pgina. Tan slo se cambia o se borra como posible
fuente de contenido para la pgina. Para editar o eliminar una instancia del contenido en la
pgina, vase Edicin del contenido dinmico en la pgina 571 y Eliminacin de contenido
dinmico en la pgina 572.
Para cambiar una fuente de contenido en el panel Vinculaciones:
1 En el panel Vinculaciones (Ventana > Vinculaciones), haga doble clic en el nombre de la fuente
de contenido que desea editar.
2 Realice los cambios en el cuadro de dilogo que aparece.
3 Cuando est satisfecho con los cambios realizados, haga clic en Aceptar.
Para eliminar una fuente de contenido en el panel Vinculaciones:
1 En el panel Vinculaciones (Ventana > Vinculaciones), seleccione la fuente de contenido de la
lista.
Temas relacionados
Copia de un juego de registros de una pgina a otra
Puede copiar un juego de registros de una pgina a otra dentro de un sitio definido.
Para copiar un juego de registros en otra pgina:
1 Seleccione el juego de registros en el panel Vinculaciones o el panel Comportamientos del
servidor.
2 Haga clic con el botn derecho en el juego de registros y seleccione Copiar en el men
emergente.
3 Abra la pgina en la que desea copiar el juego de registros.
4 Haga clic con el botn derecho en el panel Vinculaciones o la barra de herramientas
Comportamientos del servidor y seleccione Pegar en el men emergente.
Temas relacionados:
Cambio o eliminacin de fuentes de contenido en la pgina 563
565
CAPTULO 34
Adicin de contenido dinmico a pginas Web
En este captulo se describen las formas ms eficaces de hacer que los diversos elementos de pgina
sean dinmicos. Una vez que haya definido una o varias fuentes de contenido dinmico, podr
utilizarlas para aadir contenido dinmico a la pgina. Las fuentes de contenido pueden incluir
una columna de un juego de registros, un valor enviado por un formulario HTML o el valor
contenido en un objeto de servidor, entre otros datos. Para ms informacin, consulte el
Captulo 33, Definicin de fuentes de contenido dinmico, en la pgina 545.
Con Macromedia Dreamweaver MX 2004 puede colocar contenido dinmico prcticamente en
cualquier lugar de la pgina Web o de su cdigo fuente HTML. Puede colocar contenido
dinmico en el punto de insercin, sustituir una cadena de texto o insertarlo como un atributo
HTML. Por ejemplo, el contenido dinmico puede definir el atributo src de una imagen o el
atributo value de un campo de formulario.
Adicin de contenido dinmico en la pgina 566
Conversin de texto en contenido dinmico en la pgina 567
Conversin de imgenes en contenido dinmico en la pgina 568
Conversin de atributos HTML en contenido dinmico en la pgina 569
Conversin de parmetros de ActiveX, Flash y de otros objetos en contenido dinmico en
la pgina 571
Edicin del contenido dinmico en la pgina 571
Creacin de pginas dinmicas en un sitio de Contribute en la pgina 572
566 Captulo 34: Adicin de contenido dinmico a pginas Web
Adicin de contenido dinmico
Puede aadir contenido dinmico a una pgina seleccionando una fuente de contenido en el
panel Vinculaciones. Dreamweaver insertar un script del lado del servidor en el cdigo de la
pgina para indicar al servidor que transfiera los datos desde la fuente de datos hasta el cdigo
HTML de la pgina cuando un navegador solicite la pgina.
Normalmente existen varias formas de convertir en dinmico un elemento determinado de una
pgina. Por ejemplo, para hacer que una imagen sea dinmica, puede utilizar el panel
Vinculaciones, el inspector de propiedades o el comando Imagen del men Insertar.
De forma predeterminada, una pgina HTML slo puede mostrar registros de uno en uno. Para
ver los dems registros del juego de registros, puede aadir un vnculo para desplazarse por los
registros de uno en uno (vase Creacin de vnculos de navegacin por conjuntos de registros en
la pgina 583) o crear una regin repetida para mostrar ms de un registro en una sola pgina
(vase Visualizacin de varios resultados de juego de registros en la pgina 586).
Texto dinmico
El texto dinmico adopta el formato de texto aplicado al texto ya existente o al punto de
insercin. Por ejemplo, si un estilo CSS (Hoja de estilos en cascada) afecta al texto seleccionado, el
contenido dinmico que lo reemplace tambin se ver afectado por dicho estilo. Tambin puede
aadir o cambiar el formato de texto del contenido dinmico mediante cualquiera de las
herramientas de formato de texto de Dreamweaver. (Vase Aplicacin de elementos tipogrficos y
de diseo de pgina a los datos dinmicos en la pgina 576.)
Tambin puede aplicar formato de datos al texto dinmico. Por ejemplo, si los datos son fechas,
puede especificar un formato de fecha determinado, como, por ejemplo, 04/17/00 para los
visitantes de los Estado Unidos, o 17/04/00 para los visitantes europeos. (Vase Utilizacin de
formatos de datos predefinidos en la pgina 582.)
Puede reemplazar texto normal de la pgina por texto dinmico o aadir texto dinmico en un
determinado punto de insercin en la pgina.
Cambio de contenido dinmico
Puede cambiar el contenido dinmico de la pgina mediante la edicin del comportamiento de
servidor que proporciona dicho contenido. Por ejemplo, puede editar un comportamiento de
servidor de un juego de registros para que proporcione ms registros a la pgina.
El contenido dinmico de una pgina aparece en el panel Comportamientos del servidor. Por
ejemplo, si aade un juego de registros a la pgina, ste se incorporar a la lista del panel
Comportamientos del servidor de la siguiente forma:
Si aade otro juego de registros a la pgina, el panel Comportamientos del servidor mostrar
ambos conjuntos de registros de la siguiente forma:
Recordset(mySecondRecordset)
Temas relacionados:
Conversin de texto en contenido dinmico 567
Conversin de texto en contenido dinmico
Puede reemplazar el texto existente por texto dinmico o colocar texto dinmico en un
determinado punto de insercin en la pgina.
Para aadir texto dinmico:
1 Abra el panel Vinculaciones eligiendo Ventana > Vinculaciones.
2 Asegrese de que en el panel Vinculaciones est la fuente de contenido que desea utilizar.
La fuente de contenido debe contener texto normal (texto ASCII). El texto normal tambin
incluye HTML. Si no aparecen fuentes de contenido en la lista, o si las fuentes de contenido
disponibles no se adaptan a sus requisitos, haga clic en el botn de signo ms (+) para definir
una nueva fuente de contenido. (Vase Captulo 33, Definicin de fuentes de contenido
dinmico, en la pgina 545.)
3 En la vista Diseo, seleccione texto en la pgina o haga clic en el lugar en el que desea aadir
texto dinmico.
4 En el panel Vinculaciones, seleccione una fuente de contenido de la lista. Si selecciona un juego
de registros, especifique la columna que desea incluir en el juego de registros.
5 Haga clic en Insertar o arrastre la fuente de contenido hasta la pgina.
El contenido dinmico aparecer en la pgina si est trabajando en la vista de diseo con Live
Data activado (Ver > Live Data).
Si Live Data est desactivado, aparecer un marcador de posicin. (Si ha seleccionado texto en la
pgina, el marcador de posicin reemplazar al texto seleccionado.) El marcador de posicin de
contenido de un juego de registros utiliza la sintaxis {RecordsetName.ColumnName}, donde
Recordset es el nombre del juego de registros y ColumnName, el nombre de la columna elegida
del juego de registros.
En ocasiones, la longitud de los marcadores de posicin de texto dinmico distorsiona el diseo de
la pgina en la ventana de documento. Para resolver este problema, utilice llaves vacas a modo de
marcadores de posicin.
Para crear marcadores de posicin de texto dinmico:
1 Seleccione Edicin > Preferencias > Elementos invisibles (Windows) o Dreamweaver >
Preferencias > Elementos invisibles (Macintosh).
2 En el men emergente Mostrar texto dinmico como, elija { }.
Temas relacionados
Adicin de contenido dinmico en la pgina 566
Texto dinmico en la pgina 566
Conversin de imgenes en contenido dinmico
Puede convertir las imgenes de la pgina en contenido dinmico. Por ejemplo, supongamos que
disea una pgina que muestra artculos a la venta en una subasta benfica. Cada pgina incluira
un texto descriptivo y una fotografa del artculo en cuestin. El diseo general de la pgina sera
el mismo para todos los artculos, mientras que lo nico que cambiara sera la fotografa (y el
texto descriptivo).
Para hacer que una imagen sea dinmica:
1 Con la pgina abierta en la vista de diseo (Ver > Diseo), site el punto de insercin en el lugar
de la pgina en el que desea que aparezca la imagen y luego seleccione Insertar Imagen.
2 Seleccione Insertar > Imagen.
Aparecer el cuadro de dilogo Seleccionar origen de imagen.
3 Haga clic en la opcin Fuentes de datos (Windows) o en el botn Fuente de datos (Macintosh).
Aparecer una lista de fuentes de contenido.
4 Seleccione una fuente de contenido de la lista.
La fuente de datos debe ser un juego de registros que contenga las rutas de acceso a los archivos
de imagen. En funcin de la estructura de archivos del sitio, las rutas pueden ser absolutas,
relativas al documento o relativas a la raz.
Nota: Dreamweaver MX no admite actualmente imgenes binarias almacenadas en una base de
datos.
Conversin de atributos HTML en contenido dinmico 569
Si no aparece ningn juego de registros en la lista, o si los conjuntos de registros disponibles no
satisfacen sus necesidades, defina un nuevo juego de registros. Para instrucciones, vase
Aspectos bsicos de los juegos de registros en la pgina 546.
Conversin de atributos HTML en contenido dinmico
Puede cambiar dinmicamente el aspecto de una pgina vinculando atributos HTML a los datos.
Por ejemplo, puede cambiar la imagen de fondo de una tabla vinculando el atributo background
de la tabla a un juego de registros.
Puede vincular atributos HTML con el panel Vinculaciones o con el inspector de propiedades.
Para hacer que los atributos HTML sean dinmicos con el panel Vinculaciones:
1 Abra el panel Vinculaciones eligiendo Ventana > Vinculaciones.
2 Asegrese de que en el panel Vinculaciones est la fuente de datos que desea utilizar.
La fuente de contenido debe contener datos adecuados para el atributo HTML que desea
vincular. Si no aparecen fuentes de contenido en la lista, o si las fuentes de contenido
disponibles no se adaptan a sus requisitos, haga clic en el botn de signo ms (+) para definir
una nueva fuente de datos. Para instrucciones, vase Captulo 33, Definicin de fuentes de
contenido dinmico, en la pgina 545.
3 En la vista de Diseo, seleccione un objeto HTML.
Por ejemplo, para seleccionar una tabla HTML, haga clic dentro de la tabla y haga clic en la
etiqueta <table> en el selector de etiquetas situado en la parte inferior izquierda de la ventana
de documento.
4 En el panel Vinculaciones, seleccione una fuente de contenido de la lista.
5 En el cuadro Vincular con, seleccione un atributo HTML del men emergente.
6 Haga clic en Vincular.
La prxima vez que se ejecute la pgina en el servidor de aplicaciones, el valor de la fuente de
datos se asignar al atributo HTML.
Para hacer que los atributos HTML sean dinmicos con el inspector de propiedades:
1 En la vista de Diseo, seleccione un objeto HTML y abra el inspector de propiedades (Ventana
> Propiedades).
Por ejemplo, para seleccionar una tabla HTML, haga clic dentro de la tabla y haga clic en la
etiqueta <table> en el selector de etiquetas situado en la parte inferior izquierda de la ventana
Documento.
2 La manera de vincular una fuente de contenido dinmico al atributo HTML depende de dnde
est situada:
Si el atributo que desea vincular tiene un icono de carpeta en el Inspector de propiedades.
Haga clic en el icono de la carpeta para abrir un cuadro de dilogo de seleccin de archivos;
a continuacin, haga clic en la opcin Fuentes de datos para visualizar una lista de fuentes de
datos.
Si el atributo que desea vincular no tiene un icono de carpeta a su lado en la vista Estndar,
haga clic en la ficha Lista (la ficha situada ms abajo de las dos) en la parte izquierda del
inspector.
Aparecer la vista de Lista del inspector de propiedades.
Si el atributo que desea vincular no aparece en la vista Lista, haga clic en el botn de signo
ms (+) y luego introduzca el nombre del atributo o haga clic en el pequeo botn de flecha
y seleccione el atributo del men emergente.
3 Para hacer que el valor del atributo sea dinmico, haga clic en el atributo y luego en el icono de
rayo o icono de carpeta situado al final de la fila del atributo.
Si ha hecho clic en el icono de rayo, aparecer una lista de fuentes de datos.
He aqu un ejemplo:
Si ha hecho clic en el icono de carpeta, aparecer un cuadro de dilogo de seleccin de archivo.
Seleccione la opcin Fuentes de datos para ver una lista de fuentes de contenido.
4 Seleccione una fuente de contenido en la lista de fuentes de contenido.
La fuente de contenido debe tener datos adecuados para el atributo HTML que desea vincular.
Si no aparecen fuentes de contenido en la lista, o si las fuentes de contenido disponibles no
satisfacen sus necesidades, defina una nueva fuente de contenido. Para instrucciones, vase
Captulo 32, Obtencin de datos para la pgina, en la pgina 533.
La prxima vez que se ejecute la pgina en el servidor de aplicaciones, el valor de la fuente de
datos se asignar al atributo HTML.
Edicin del contenido dinmico 571
Conversin de parmetros de ActiveX, Flash y de otros objetos
en contenido dinmico
Puede hacer dinmicos los parmetros de applets de Java y de plugins, as como los parmetros de
los objetos ActiveX, Flash, Shockwave, Director y Generator.
Antes de comenzar, asegrese de que los campos del juego de registros contienen datos adecuados
para los parmetros del objeto que desea vincular.
Para hacer que los parmetros de un objeto sean dinmicos:
1 En la vista de Diseo, seleccione un objeto en la pgina y abra el inspector de propiedades
(Ventana > Propiedades).
2 Haga clic en el botn Parmetros.
Aparecer el cuadro de dilogo Parmetros.
3 Si el parmetro deseado no aparece en la lista, haga clic en el botn de signo ms (+) e introduzca
un nombre de parmetro en la columna Parmetro.
4 Haga clic en la columna Valor correspondiente al parmetro y luego haga clic en el icono de
rayo para especificar un valor dinmico.
Aparecer una lista de fuentes de datos.
5 Seleccione una fuente de datos de la lista.
La fuente de datos debe contener datos adecuados para el parmetro de objeto que desea
vincular. Si no aparecen fuentes de datos en la lista, o si las fuentes de datos disponibles no
satisfacen sus necesidades, defina una nueva fuente de datos. Para instrucciones, vase
Captulo 33, Definicin de fuentes de contenido dinmico, en la pgina 545.
Edicin del contenido dinmico
Para editar un comportamiento de servidor que proporciona contenido dinmico, haga doble clic
en el comportamiento del servidor en el panel Comportamientos del servidor. Aparecer el mismo
cuadro de dilogo que emple para definir la fuente de datos original. Realice los cambios
deseados en el cuadro de dilogo y haga clic en Aceptar.
Tambin puede utilizar el inspector de propiedades para editar conjuntos de registros en la pgina.
Abra el inspector de propiedades (Ventana > Propiedades); a continuacin, seleccione el juego de
registros en el panel Comportamientos del servidor (Ventana > Comportamientos del servidor).
Si edita un juego de registros en la ventana Live Data sin que la opcin Actualizar
automticamente est seleccionada, deber actualizar la pgina para ver los cambios. Para
actualizar la pgina, haga clic en el botn Actualizar o elija Ver > Actualizar Live Data.
Temas relacionados
Eliminacin de contenido dinmico
Despus de aadir contenido dinmico a una pgina, puede eliminarlo seleccionando el
contenido dinmico en la pgina y presionando Suprimir. Tambin puede eliminarlo
seleccionando el contenido dinmico en el panel Comportamientos del servidor y haciendo clic
en el botn de signo menos (-).
Nota: esta operacin elimina de la pgina el script del lado del servidor que recupera el contenido
dinmico de la base de datos. No borra los datos de la base de datos.
Temas relacionados
Creacin de pginas dinmicas en un sitio de Contribute
Cuando un usuario de Contribute edite una pgina que incluya contenido dinmico o elementos
invisibles (como scripts y comentarios, por ejemplo), Contribute mostrar el contenido dinmico
y los elementos invisibles como marcadores amarillos. De manera predeterminada, los usuarios de
Contribute no pueden seleccionar ni eliminar estos marcadores.
Si desea que los usuarios de Contribute puedan seleccionar y eliminar contenido dinmico y otros
elementos invisibles de una pgina, puede cambiar la configuracin de grupo de permisos para
permitirlo; los usuarios de Contribute no pueden editar contenido dinmico, aunque usted les
permita seleccionarlo.
Nota: al utilizar algunas tecnologas de servidor, puede mostrar texto esttico mediante una etiqueta
o funcin del servidor. Para permitir a los usuarios de Contribute editar texto esttico de una pgina
dinmica que emplea una tecnologa de servidor de este tipo, site el texto fuera de las etiquetas del
servidor.
Para permitir que un grupo de usuarios de Contribute elimine cdigo de las pginas:
1 Seleccione Sitio > Administrar sitio de Contribute.
2 Si no estn activadas algunas opciones necesarias para la compatibilidad con Contribute,
aparecer un cuadro de dilogo que le pedir que active dichas opciones. Haga clic en Aceptar
para activar dichas opciones y la compatibilidad con Contribute. Para ms informacin,
consulte Preparacin de un sitio para su uso con Contribute en la pgina 142.
Si aparece el cuadro de dilogo Contrasea de administrador, escriba la contrasea de
administrador y haga clic en Aceptar.
convertirse en el administrador el sitio Web. Haga clic en S, luego escriba y confirme una
4 Seleccione un grupo de permisos y haga clic en el botn Editar grupo.
Creacin de pginas dinmicas en un sitio de Contribute 573
5 Seleccione la categora Edicin y desactive la opcin para proteger scripts y formularios. Para
ms informacin, consulte Creacin de plantillas para un sitio de Contribute en la pgina 236
y Administracin de Macromedia Contribute.
6 Haga clic en Aceptar para cerrar el cuadro de dilogo Grupo de permisos.
Temas relacionados
Administracin de sitios de Contribute con Dreamweaver en la pgina 137
575
CAPTULO 35
Visualizacin de registros de la base de datos
Cuando se muestran registros de la base de datos se recupera la informacin almacenada en una
base de datos o en otra fuente de contenido y se presenta esa informacin en una pgina Web.
Macromedia Dreamweaver MX 2004 ofrece numerosos mtodos para mostrar contenido
dinmico y proporciona varios comportamientos del servidor incorporados que permiten mejorar
la presentacin del contenido dinmico y facilitan a los usuarios la bsqueda y el desplazamiento
por la informacin que devuelve la base de datos.
Visualizacin de registros de la base de datos en la pgina 575
Utilizacin de formatos de datos predefinidos en la pgina 582
Personalizacin de los formatos de datos existentes en la pgina 582
Creacin de vnculos de navegacin por conjuntos de registros en la pgina 583
Visualizacin y ocultacin de registros segn los resultados del juego de registros en
la pgina 586
Creacin de una tabla con un comportamiento del servidor Repetir regin en la pgina 587
Creacin de un contador de registros en la pgina 588
Creacin de controles Web Cuadrcula de datos y Lista de datos de ASP.NET en
la pgina 590
Creacin de un contador de registros en la pgina 588
Visualizacin de registros de la base de datos
Las bases de datos y otras fuentes de contenido dinmico proporcionan mayor control y
flexibilidad para buscar, ordenar y visualizar grandes cantidades de informacin. Almacenar
contenido para sitios Web en una base de datos resulta lgico cuando es necesario almacenar
grandes cantidades de informacin y, a continuacin, se debe recuperar y visualizar dicha
informacin de un modo comprensible. Dreamweaver ofrece varias herramientas y
comportamientos incorporados para ayudarle a recuperar y a visualizar de forma eficaz la
informacin almacenada en una base de datos. En las secciones siguientes se describen los
comportamientos del servidor y los elementos de formato de Dreamweaver y se explica cmo
utilizarlos para visualizar contenido dinmico.
576 Captulo 35: Visualizacin de registros de la base de datos
Comportamientos del servidor y los elementos de formato
Dreamweaver proporciona los siguientes comportamientos del servidor y elementos de formato
que mejoran la visualizacin de los datos dinmicos:
Formatos: permiten aplicar distintos tipos de valores numricos, monetarios y de porcentaje al
texto dinmico.
Por ejemplo, si el precio de un artculo de un juego de registros es 10,989, puede mostrarlo en la
pgina como 10,99 seleccionando el formato Divisa: 2 decimales de Dreamweaver. Este
formato muestra un nmero con dos decimales. Si el nmero consta de ms de dos decimales, el
formato de datos redondea el nmero al decimal ms cercano. Si no tiene decimales, el formato de
datos aade el separador decimal y dos ceros.
Regin repetida: estos comportamientos del servidor permiten mostrar mltiples elementos
devueltos por una consulta de base de datos, as como especificar el nmero de registros que se
muestran por pgina.
Navegacin por juego de registros: estos comportamientos del servidor permiten insertar
elementos de navegacin para que los usuarios puedan pasar al juego de registros siguiente o
anterior. Por ejemplo, si elige mostrar 10 registros por pgina utilizando el objeto de servidor
Regin repetida y el juego de registros devuelve 40 registros, podr navegar por los registros de
diez en diez.
Barra de navegacin por juego de registros: estos comportamientos del servidor permiten
incluir un contador que muestra a los usuarios dnde se encuentran dentro un juego de registros
en relacin con el nmero total de registros devueltos.
Mostrar regin: estos comportamientos del servidor permiten mostrar u ocultar los elementos de
la pgina segn la relevancia de los registros mostrados actualmente. Por ejemplo, si un usuario ha
accedido al ltimo registro de un juego de registros, puede ocultar el vnculo siguiente y mostrar
nicamente el vnculo anterior.
Aplicacin de elementos tipogrficos y de diseo de pgina a los datos
dinmicos
Dreamweaver ofrece amplias posibilidades para presentar datos dinmicos en una pgina
estructurada y aplicar formato tipogrfico utilizando HTML y CSS. Para aplicar formatos a los
datos dinmicos de Dreamweaver, formatee tablas y marcadores de posicin para los datos
dinmicos utilizando las herramientas de formato. Cuando se inserten los datos procedentes de su
fuente, adoptarn automticamente el formato de fuente, prrafo y tabla que haya especificado.
Para obtener informacin sobre las funciones de formato de Dreamweaver y cmo aplicarlas a los
elementos de datos dinmicos, vase Captulo 8, Presentacin de contenido en tablas, en
la pgina 169 y Captulo 13, Insercin y formato de texto, en la pgina 281.
Desplazamiento por los resultados de un juego de registros de base de datos
Los vnculos de navegacin por conjuntos de registros permiten al usuario desplazarse de un
registro al siguiente o de un juego de registros al siguiente. Por ejemplo, despus de disear una
pgina para que muestre cinco registros a la vez, puede aadir vnculos tales como Siguiente o
Anterior para permitir que los usuarios vean los cinco registros anteriores o siguientes.
Visualizacin de registros de la base de datos 577
Dreamweaver permite crear cuatro tipos de vnculos de navegacin para desplazarse por un juego
de registros: Primero, Anterior, Siguiente y ltimo. Una pgina puede contener un nmero
cualquiera de estos vnculos, siempre y cuando todos se refieran a un nico juego de registros. No
puede aadir vnculos para desplazarse por un segundo juego de registros en la misma pgina.
Nota: Microsoft ASP.NET denomina conjunto de registros (DataSet) al juego de registros. Si trabaja
con documentos de tipo ASP.NET, los cuadros de dilogo y las opciones de men especficos de
ASP.NET utilizan la etiqueta Conjunto de datos. La documentacin de Dreamweaver se refiere
genricamente a ambos tipos como juegos de registros, aunque utiliza Conjunto de datos cuando
describe especficamente funciones de ASP.NET.
Los vnculos de navegacin por conjuntos de registros requieren los siguientes elementos
dinmicos:
Un juego de registros por donde navegar.
Contenido dinmico en la pgina para mostrar el registro o registros.
Texto o imgenes en la pgina que sirvan como barra de navegacin en la que hacer clic.
Un conjunto de comportamientos de servidor Mover a registro para desplazarse por el juego
de registros.
Puede aadir los dos ltimos elementos empleando el objeto de servidor Barra de navegacin por
registros o aadirlos por separado utilizando las herramientas de diseo de Dreamweaver y el
panel Comportamientos del servidor.
Temas relacionados
Barras de navegacin de juego de registros personalizadas
Si desea crear una barra de navegacin de juego de registros que utilice estilos de diseo y de
formato ms complejos que los que ofrece la sencilla tabla creada por el objeto de servidor Barra
de navegacin de juego de registros, puede crear su propia barra de navegacin. Para ello, cree en
primer lugar los vnculos de navegacin necesarios en texto o imgenes, sitelos en la pgina en
vista Diseo y asigne comportamientos individuales de servidor a cada vnculo de navegacin.
Puede asignar los comportamientos individuales de servidor siguientes a los vnculos de
navegacin:
Mover a la primera pgina
Mover a la ltima pgina
Mover a la siguiente pgina
Mover a la pgina anterior
Si prefiere utilizar el objeto de servidor Barra de navegacin de juego de registros incorporado de
Dreamweaver para crear una barra de navegacin, vase Creacin de una barra de navegacin
utilizando el comportamiento del servidor Barra de navegacin de juego de registros en
la pgina 584.
Tareas de diseo de la barra de navegacin
Para crear una barra de navegacin personalizada, comience creando su representacin visual con
las herramientas de diseo de pginas de Dreamweaver. No es preciso que cree un vnculo para la
cadena de texto o la imagen. Dreamweaver se encargar de eso.
La pgina para la que crea la barra de navegacin debe contener un juego de registros por donde
navegar. Para ms informacin, consulte Aspectos bsicos de los juegos de registros en
la pgina 546.
Una barra de navegacin de juego de registros podra tener este aspecto, con los botones de
vnculos creados con imgenes u otros elementos de contenido.
Despus de aadir un juego de registros a la pgina y de crear una barra de navegacin, deber
aplicar comportamientos individuales de servidor a cada elemento de navegacin. Por ejemplo,
una barra de navegacin de juego de registros contiene representaciones de los siguientes vnculos
enlazados con el comportamiento adecuado:
Temas relacionados
Cmo visualizar y ocultar registros segn los resultados del juego de registros
Dreamweaver incluye una serie de comportamientos de servidor que permiten mostrar u ocultar
una regin segn los resultados que devuelva el juego de registros. Por ejemplo, en una pgina que
utilice los vnculos de registros Anterior y Siguiente para desplazarse por una pgina de
resultados, puede especificar que el vnculo de registros Anterior aparezca en todas las pginas de
resultados salvo la primera (que no tiene resultados anteriores), y que el vnculo de registros
Siguiente aparezca en todas las pginas salvo en la ltima (que no tiene resultados siguientes).
Tambin puede especificar que una regin se muestre u oculte en funcin de si el juego de
registros est vaco o no. Si un juego de registros est vaco (por ejemplo, no se han encontrado
registros que coincidan con la consulta), puede mostrar un mensaje que informe al usuario sobre
esta circunstancia. Este mensaje puede resultar especialmente til si crea pginas de bsqueda que
se basen en los trminos de bsqueda introducidos por el usuario para volver a ejecutar consultas.
Del mismo modo, puede mostrar un mensaje de error si se produce un problema al conectar con
una base de datos o si el nombre y la contrasea de un usuario no coinciden con los que reconoce
el servidor.
Los comportamientos del servidor Mostrar regin son:
Mostrar si el juego de registros est vaco
Mostrar si el juego de registros no est vaco
Vnculo de navegacin Comportamiento del servidor
Ir a la primera pgina Mover a la primera pgina
Ir a la pgina anterior Mover a la pgina anterior
Ir a la siguiente pgina Mover a la siguiente pgina
Ir a la ltima pgina Mover a la ltima pgina
Mostrar si es la primera pgina
Mostrar si no es la primera pgina
Mostrar si es la ltima pgina
Mostrar si no es la ltima pgina
Para obtener informacin sobre cmo aplicar los comportamientos del servidor Mostrar regin,
vase Visualizacin y ocultacin de registros segn los resultados del juego de registros en
la pgina 586.
Visualizacin de varios resultados de juego de registros
El comportamiento del servidor Repetir regin permite mostrar mltiples registros de un juego en
una pgina. Cualquier seleccin de datos dinmicos puede convertirse en una regin repetida. Sin
embargo, las regiones ms habituales son una tabla, una fila o una serie de filas de tabla.
El ejemplo siguiente ilustra cmo se aplica el comportamiento del servidor Repetir regin a la fila
de una tabla y especifica que se muestren nueve registros por pgina. La fila muestra cuatro
registros distintos: ciudad, estado, direccin y cdigo postal.
Para crear una tabla como la mostrada deber crear una tabla con contenido dinmico y aplicar el
comportamiento del servidor Repetir regin a la fila de la tabla con contenido dinmico. Cuando
el servidor de aplicaciones procesa la pgina, la fila se repite el nmero de veces especificado en el
objeto de servidor Repetir regin con un registro distinto insertado en cada nueva fila.
Para obtener informacin sobre cmo aplicar el comportamiento del servidor Repetir regin,
vase Visualizacin de varios resultados de juego de registros en la pgina 586 y Creacin de
una tabla con un comportamiento del servidor Repetir regin en la pgina 587.
Contadores de registros
Los contadores de registros dan a los usuarios un punto de referencia cuando navegan por una
serie de registros. Los contadores de registros suelen mostrar el nmero total de registros devuelto
y los registros actuales que se estn viendo. Por ejemplo, si un juego de registros devuelve 40
registros individuales y se muestran ocho registros por pgina, el contador de registros de la
primera pgina indicar Mostrando registros 1-8 de 40.
Para crear un contador de registros para una pgina deber crear primero un juego de registros
para la pgina, un diseo de pgina adecuado para el contenido dinmico y una barra de
navegacin de juego de registros. Para obtener ms informacin sobre cmo crear estos elementos
y aadirlos a una pgina, vanse las secciones siguientes:
Cuando tenga los elementos anteriores en la pgina podr crear un contador de registros.
Contadores de registros simples
Puede crear un contador de registros sencillo utilizando el objeto Estado de navegacin por juego
de registros. Este objeto del servidor inserta un contador de registros completo al que puede
aplicar formato de texto utilizando las herramientas de diseo de pginas de Dreamweaver. Para
obtener ms informacin sobre este contador de registros, vase Creacin de un contador de
registros utilizando el objeto Estado de navegacin por juego de registros en la pgina 589.
Contadores de registros personalizados
Puede utilizar los comportamientos individuales de contadores de registros para crear contadores
de registros personalizados. Estos contadores de registros ofrecen posibilidades ms avanzadas que
la sencilla tabla de una fila que inserta el objeto del servidor Estado de navegacin de juego de
registros. Puede organizar los elementos de diseo de varias formas creativas y aplicar un
comportamiento del servidor adecuado a cada elemento.
Los comportamientos del servidor Recuento de registros son:
Mostrar el nmero de registro inicial
Mostrar el nmero de registro final
Mostrar el total de registros
Creacin de contadores de registros personalizados en la pgina 589 le gua a travs del proceso
de creacin de un contador de registros mediante la aplicacin de determinados comportamientos
del servidor Contador de registros a los elementos de diseo de una pgina.
Controles Cuadrcula de datos y Lista de datos de ASP.NET
Los controles Cuadrcula de datos y Lista de datos de ASP.NET proporcionan numerosas
opciones para mostrar distintos tipos de datos (especialmente, contenido dinmico de una base de
datos) y simplifican el proceso de vincular las fuentes de datos con los controles. Dreamweaver
admite los controles Cuadrcula de datos y Lista de datos como comportamientos del servidor.
Los controles proporcionan las funciones siguientes:
Cuadrcula de datos crea una cuadrcula de mltiples columnas vinculada a datos. Este control
permite definir varios tipos de columnas, tanto para disear el contenido de la cuadrcula como
para aadir funcionalidad especfica (editar columnas de botones, columnas de hipervnculos,
etc.).
Lista de datos muestra elementos de una fuente de datos utilizando plantillas. Puede personalizar
el aspecto del control manipulando las plantillas que constituyen sus distintos componentes.
Temas relacionados
Creacin de controles Web Cuadrcula de datos y Lista de datos de ASP.NET en
la pgina 590
Adicin de una Cuadrcula de datos de ASP.NET a una pgina en la pgina 591
Adicin de una lista de datos de ASP.NET a una pgina en la pgina 591
Modificacin de un objeto Cuadrcula de datos o Lista de datos en la pgina 592
Control Web Cuadrcula de datos de ASP.NET
La Cuadrcula de datos de Dreamweaver permite insertar un control Web Cuadrcula de datos de
ASP.NET. El control Cuadrcula de datos presenta las tablas como cuadrculas de mltiples
columnas y puede incluir distintos tipos de columnas (heterogneas) para definir el diseo del
contenido de las celdas. Las columnas pueden ser vinculadas, de botones y de plantillas, entre
otras. Asimismo, la Cuadrcula de datos admite funcionalidad interactiva como orden de
columnas, edicin y comandos. Los tipos de columna disponibles en la Cuadrcula de datos
aparecen en la tabla siguiente:
Tipo de columna
Cuadrcula de datos
Descripcin
Campo de datos sencillo Denominada columna vinculada en ASP.NET, la columna Campo
de datos sencillo permite especificar qu campo de fuente de datos
se mostrar y qu formato de datos utilizar el campo con una
expresin de formato .NET.
Formato libre Denominada columna de plantilla en ASP.NET, el tipo de columna
Formato libre permite crear combinaciones de texto HTML y
controles de servidor para disear un diseo personalizado para una
columna. Los controles de una columna de formato libre pueden
estar vinculados a datos. Las columnas de formato libre ofrecen una
mayor flexibilidad a la hora de definir el diseo y la funcionalidad del
contenido de la cuadrcula, pues usted tiene control completo sobre
cmo se muestran los datos y qu ocurre cuando los usuarios
interactan con las filas de la cuadrcula.
Hipervnculo La columna Hipervnculo muestra la informacin como vnculos de
hipertexto. Suele utilizarse para mostrar datos (como el nmero de
cliente o el nombre del producto) como hipervnculo de modo que los
usuarios puedan hacer clic para acceder a otra pgina con detalles
sobre ese elemento.
Botones Editar,
Actualizar, Cancelar
Denominada columna Comando de edicin en ASP.NET, la columna
Botn Editar, Actualizar, Cancelar permite a los usuarios editar la
informacin de las filas de la Cuadrcula de datos. Para ello, cree una
columna Editar, Actualizar, Cancelar. Durante la ejecucin, esta
columna muestra un botn con la etiqueta Editar. Cuando el usuario
hace clic en el botn Editar, los datos de la fila se muestran en
controles editables tales como cuadros de texto, y el botn Editar es
sustituido por los botones Actualizar y Cancelar.
Botn Eliminar El botn Eliminar permite al usuario eliminar una determinada fila
haciendo clic en un botn.
Antes de utilizar el comportamiento del servidor Cuadrcula de datos, deber definir un conjunto
de datos (denominado juego de registros en otros tipos de documentos) para la Cuadrcula de
datos. Para ms informacin, consulte Aspectos bsicos de los juegos de registros en
la pgina 546.
Para obtener ms informacin sobre el control Cuadrcula de datos y cmo utilizarlo para
formatear datos dinmicos, visite los siguientes sitios Web:
Microsoft MSDN en: http://msdn.microsoft.com/library/en-us/cpgenref/html/
cpconDataGridWebServerControl.asp
Microsoft ASP.NET en: http://asp.net
Temas relacionados
Adicin de una Cuadrcula de datos de ASP.NET a una pgina en la pgina 591
Adicin de una lista de datos de ASP.NET a una pgina en la pgina 591
Utilizacin de formatos de datos predefinidos
Dreamweaver incorpora varios formatos de datos predefinidos que puede aplicar a elementos de
datos dinmicos. Los estilos de formato de datos incluyen formatos de fecha y hora, moneda,
nmero y porcentaje.
Para aplicar formatos de datos al contenido dinmico:
1 Seleccione el contenido dinmico en la ventana Live Data o en su marcador de posicin en la
3 Haga clic en el botn de flecha abajo en la columna Formato.
Si la flecha abajo no es visible, ample el panel.
4 En el men emergente Formato, seleccione la categora de formato de datos que desee.
Asegrese de que el formato de datos es adecuado para el tipo de datos que est formateando.
Por ejemplo, los formatos de divisa slo funcionan con datos dinmicos compuestos por
nmeros. Asimismo, no podr aplicar ms de un formato a los mismos datos.
5 Compruebe que el formato se ha aplicado correctamente obteniendo una vista previa de la
pgina en la ventana Live Data o en un navegador.
Temas relacionados
Creacin de formatos de datos en la pgina 583
Personalizacin de los formatos de datos existentes
Puede personalizar los formatos de datos existentes en Dreamweaver o crear los suyos propios.
Para personalizar un formato de datos:
1 Abra una pgina que contenga datos dinmicos en la vista Diseo.
2 Seleccione los datos dinmicos cuyo formato desea personalizar.
Se resaltar el elemento de datos vinculados cuyo texto dinmico ha seleccionado.
Creacin de vnculos de navegacin por conjuntos de registros 583
4 Haga clic en la flecha abajo en la columna Formato para ampliar el men emergente de formatos
de datos disponibles.
5 Seleccione Editar lista de formatos en el men emergente.
Aparecer el cuadro de dilogo Editar lista de formatos.
Temas relacionados
Utilizacin de formatos de datos predefinidos en la pgina 582
Creacin de formatos de datos
Puede crear formatos de datos que se ajusten a cualquier tipo de datos dinmicos que desee
mostrar.
Para crear un nuevo formato de datos:
1 Abra una pgina que contenga datos dinmicos en la vista Diseo.
2 Seleccione los datos dinmicos para los que desea crear un formato personalizado.
3 Seleccione Ventana > Vinculaciones para mostrar el panel Vinculaciones y haga clic en la flecha
abajo en la columna Formato.
4 Seleccione Editar lista de formatos en el men emergente.
Aparecer el cuadro de dilogo Editar lista de formatos.
5 Haga clic en el botn de signo ms (+) y seleccione un tipo de formato.
6 Defina el formato y haga clic en Aceptar.
7 Introduzca un nombre para el nuevo formato en la columna Nombre.
8 Haga clic en Aceptar para cerrar el cuadro de dilogo.
Temas relacionados
Personalizacin de los formatos de datos existentes en la pgina 582
Creacin de vnculos de navegacin por conjuntos de registros
Los vnculos de navegacin por conjuntos de registros permiten al usuario desplazarse de un
registro al siguiente o de un juego de registros al siguiente. Por ejemplo, despus de disear una
pgina para que muestre cinco registros a la vez, puede aadir vnculos tales como Siguiente o
Anterior para permitir que los usuarios vean los cinco registros anteriores o siguientes.
Puede crear vnculos de navegacin de juegos de registros utilizando el comportamiento de
servidor Barra de navegacin de juego de registros o bien puede crear una barra de navegacin de
juego de registros personalizada.
Temas relacionados
Desplazamiento por los resultados de un juego de registros de base de datos en la pgina 576
Barras de navegacin de juego de registros personalizadas en la pgina 577
Creacin de una barra de navegacin de juego de registros personalizada en la pgina 585
Creacin de una barra de navegacin utilizando el comportamiento del
servidor Barra de navegacin de juego de registros
Puede crear una barra de navegacin por el juego de registros en una sola operacin utilizando el
comportamiento del servidor Barra de navegacin de juego de registros. El objeto de servidor
aade los siguientes elementos a la pgina:
Una tabla HTML con vnculos de texto o imgenes.
Un conjunto de comportamientos de servidor Mover a.
Un conjunto de comportamientos de servidor Mostrar regin.
La versin de texto de Barra de navegacin de juego de registros tiene este aspecto:
La versin de imagen de Barra de navegacin de juego de registros tiene este aspecto:
Antes de colocar la barra de navegacin en la pgina, asegrese de que sta contiene un juego de
registros por donde navegar y un diseo de pgina para mostrar los registros.
Despus de situar la barra de navegacin en la pgina, puede utilizar las herramientas de diseo de
Dreamweaver para personalizar la barra segn sus gustos. Tambin puede editar los
comportamientos del servidor Mover a y Mostrar regin haciendo doble clic en ellos en el
panel Comportamientos del servidor.
Si desea crear la barra de navegacin elemento por elemento utilizando las herramientas de diseo
de Dreamweaver y el panel Comportamientos del servidor, vase Creacin de una barra de
navegacin de juego de registros personalizada en la pgina 585.
Para crear la barra de navegacin de juego de registros con el objeto de servidor:
1 En la vista Diseo, site el punto de insercin en el lugar de la pgina donde desea que aparezca
la barra de navegacin.
2 Abra el cuadro de dilogo Barra de navegacin de juego de registros (Insertar > Objetos de
aplicacin > Barra de navegacin de juego de registros).
Aparecer el cuadro de dilogo Barra de navegacin por juego de registros.
Creacin de vnculos de navegacin por conjuntos de registros 585
3 Seleccione el juego de registros por el que desea navegar en el men emergente Juego de
registros.
4 En la seccin Mostrar utilizando, seleccione el formato para mostrar los vnculos de navegacin
en la pgina. La opcin Texto coloca vnculos de texto en la pgina, mientras que Imgenes
permite utilizar imgenes grficas como vnculos.
En la versin de imagen de la barra de navegacin, Dreamweaver utiliza sus propios archivos de
imagen. Puede reemplazar estas imgenes por sus propios archivos de imagen despus de
colocar la barra en la pgina.
Dreamweaver crea una tabla que contiene los vnculos de texto o imgenes que permiten al
usuario desplazarse por el juego de registros seleccionado al hacer clic en ellos. Cuando aparece
el primer registro del juego de registros, quedarn ocultos los vnculos o imgenes Primero y
Anterior. Cuando aparece el ltimo registro del juego de registros, quedarn ocultos los
vnculos o imgenes Siguiente y ltimo.
Puede personalizar el diseo de la barra de navegacin utilizando las herramientas de diseo de
Dreamweaver.
Temas relacionados
Creacin de una barra de navegacin de juego de registros personalizada en la pgina 585
Creacin de una barra de navegacin de juego de registros personalizada
Puede crear una barra de navegacin del juego de registros personalizada que utilice estilos de
diseo y formato ms complejos que los que ofrece el objeto de servidor Barra de navegacin de
juego de registros.
Para crear su propia barra de navegacin de juego de registros, debe:
Disear vnculos de navegacin con texto o imgenes
Situar los vnculos en la pgina en la vista de diseo
Asignar comportamientos de servidor individuales a cada vnculo de navegacin
Para obtener ms informacin sobre cmo disear una barra de navegacin de juego de registros
personalizada, vase Barras de navegacin de juego de registros personalizadas en la pgina 577.
Si prefiere utilizar el objeto de servidor Barra de navegacin de juego de registros de Dreamweaver
para crear una barra de navegacin, vase Creacin de una barra de navegacin utilizando el
comportamiento del servidor Barra de navegacin de juego de registros en la pgina 584.
En este procedimiento se describe cmo asignar comportamientos de servidor individuales a los
vnculos de navegacin.
Para asignar comportamientos del servidor a vnculos de navegacin de juegos de registros:
1 En la vista de Diseo, seleccione la cadena de texto o imagen de la pgina que desea utilizar
como vnculo de navegacin por el juego de registros.
2 Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor) y haga
clic en el botn de signo ms (+).
3 Seleccione Paginacin de juego de registros en el men emergente y, a continuacin, seleccione
entre los comportamientos del servidor mostrados uno que sea adecuado para ese vnculo.
Si el juego de registros contiene un gran nmero de registros, el comportamiento del servidor
Mover al ltimo registro puede tardar bastante tiempo en ejecutarse cuando el usuario haga clic
en el vnculo
4 En el men emergente Juego de registros, seleccione el juego de registros que contiene los registros.
El comportamiento de servidor se asigna al vnculo de navegacin.
Temas relacionados
Desplazamiento por los resultados de un juego de registros de base de datos en la pgina 576
Barras de navegacin de juego de registros personalizadas en la pgina 577
Visualizacin y ocultacin de registros segn los resultados del
juego de registros
Dreamweaver incluye una serie de comportamientos de servidor que permiten mostrar u ocultar
una regin segn los resultados que devuelva el juego de registros. Para obtener ms informacin
sobre los comportamientos del servidor Mostrar regin y cmo pueden utilizarse para mostrar u
ocultar resultados de juego de registros, vase Cmo visualizar y ocultar registros segn los
resultados del juego de registros en la pgina 578.
Para mostrar una regin slo cuando sea necesaria:
1 En la vista Diseo, seleccione en la pgina la regin que se debe mostrar u ocultar.
2 En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga
clic en el botn de signo ms (+).
3 Seleccione Mostrar regin en el men emergente y, a continuacin, seleccione uno de los
comportamientos del servidor incluidos en la lista.
Temas relacionados
Visualizacin de varios resultados de juego de registros
El comportamiento del servidor Repetir regin permite mostrar mltiples registros de un juego en
una pgina. Cualquier seleccin de datos dinmicos puede convertirse en una regin repetida. Sin
embargo, las regiones ms comunes son tablas, filas de tablas o una serie de filas de tablas.
Para obtener ms informacin sobre cmo utilizar el comportamiento del servidor Repetir regin,
vase Visualizacin de varios resultados de juego de registros en la pgina 579 y Creacin de
una tabla con un comportamiento del servidor Repetir regin en la pgina 587.
Para crear una regin repetida:
1 En la vista Diseo, seleccione una regin que incluya contenido dinmico.
La seleccin puede ser una tabla, una fila de una tabla o incluso un prrafo de texto.
Creacin de una tabla con un comportamiento del servidor Repetir regin 587
Para seleccionar de forma precisa una regin de la pgina, puede utilizar el selector de etiquetas
que se encuentra en la esquina izquierda de la ventana de documento. Por ejemplo, si la regin
es una fila de una tabla, haga clic dentro de la fila en la pgina y luego haga clic en la etiqueta
<tr> situada en el extremo derecho del selector de etiquetas para seleccionar la fila de la tabla.
2 Seleccione Ventana > Comportamientos del servidor para mostrar el panel Comportamientos
del servidor.
3 Haga clic en el botn de signo ms (+) y seleccione Repetir regin.
Aparecer el cuadro de dilogo Repetir regin.
4 Seleccione el nombre del juego de registros que desea utilizar en el men emergente.
5 Seleccione el nmero de registros que desea mostrar por pgina.
En la ventana de documento, aparecer un contorno delgado de delimitado con tabulaciones
de color gris alrededor de la regin repetida. En la ventana Live Data (Ver > Live Data), el
contorno gris desaparecer y la seleccin se ampliar para mostrar el nmero de registros que
haya especificado.
Temas relacionados
Visualizacin y ocultacin de registros segn los resultados del juego de registros en
la pgina 586
Creacin de una tabla con un comportamiento del servidor
Repetir regin
El objeto de servidor Tabla dinmica permite crear una tabla con contenido dinmico y aplicar el
comportamiento Repetir regin desde un solo cuadro de dilogo. Este objeto de servidor resulta
especialmente til si simultneamente llena una tabla de contenido dinmico a partir del juego de
registros y aplica el comportamiento del servidor Repetir regin.
Nota: el objeto del servidor Tabla dinmica no est disponible cuando se utilizan tipos de documento
ASP.NET. Para crear una tabla con contenido dinmico y regiones repetidas, deber insertar
manualmente la tabla, insertar contenido dinmico desde el panel Vinculaciones y, si es necesario,
aplicar un comportamiento del servidor Repetir regin. Para ms informacin, consulte
Visualizacin de varios resultados de juego de registros en la pgina 586.
Para crear una tabla dinmica:
1 Para insertar una tabla dinmica:
Seleccione Insertar > Objetos de aplicacin > Datos dinmicos > Tabla dinmica para
mostrar el cuadro de dilogo Tabla dinmica.
Desde la categora Aplicacin de la barra Insertar, seleccione el botn Tabla dinmica del
men Datos dinmicos.
Aparecer el cuadro de dilogo Tabla dinmica.
2 Seleccione el juego de registros que desea utilizar en el men emergente Juego de registros.
3 Seleccione el nmero de registros que desea mostrar por pgina.
4 Puede introducir valores para el borde de la tabla y el relleno y espaciado de celdas.
El cuadro de dilogo Tabla dinmica conserva los valores introducidos para los bordes de la
tabla y el relleno y el espaciado de las celdas. Si trabaja en un proyecto que requerir varias
tablas dinmica con el mismo aspecto, puede introducir los valores de diseo de la tabla, lo que
permitir simplificar el desarrollo de las pginas. Puede ajustar estos valores despus de insertar
la tabla utilizando el inspector de propiedades de tablas.
Se insertarn en la pgina una tabla y los marcadores de posicin del contenido dinmico
definido en su juego de registros asociado.
En este ejemplo, el juego de registros contiene cuatro registros: FIRSTNAME, LASTNAME,
TITLE y DEPARTMENT. La fila de encabezado de la tabla se llena con los nombres de cada
elemento de registro. Puede editar los encabezados utilizando el texto descriptivo que desee o
reemplazarlos por imgenes representativas.
Creacin de un contador de registros
Los contadores de registros permiten a los usuarios saber en qu posicin se encuentran en un
juego de registros con relacin al nmero total de registros devueltos. Por esta razn, los
contadores de registros son un comportamiento til que puede facilitar significativamente el uso
de una pgina Web.
Para obtener ms informacin sobre los contadores de registros, vase Contadores de registros
en la pgina 579.
Creacin de un contador de registros 589
Creacin de un contador de registros utilizando el objeto Estado de
navegacin por juego de registros
El objeto Estado de navegacin por juego de registros crea una entrada de texto en la pgina para
mostrar el estado del registro actual.
Para utilizar el objeto del servidor Estado de navegacin por juego de registros:
1 Coloque el punto de insercin donde desee insertar el contador de registros.
2 Seleccione Insertar > Objetos de aplicacin > Estado de navegacin de juego de registros.
Aparecer el cuadro de dilogo Insertar estado de navegacin por juego de registros.
Seleccione el juego de registros que desea utilizar en el men emergente Juego de registros.
El objeto del servidor Insertar estado de navegacin por juego de registros inserta un contador
de registros de texto similar al siguiente:
Puede utilizar las herramientas de diseo de pginas de Dreamweaver para personalizar el
contador de registros.
Cuando el contador se ve en la ventana Live Data o en un navegador, tiene un aspecto similar
al que se muestra a continuacin:
Creacin de contadores de registros personalizados
Para crear un contador de registros personalizado para una pgina deber crear primero un juego
de registros para la pgina, un diseo de pgina adecuado para el contenido dinmico y una barra
de navegacin de juego de registros. Para obtener ms informacin sobre cmo crear estos
elementos y aadirlos a una pgina, vase Contadores de registros en la pgina 579. Una vez que
haya creado los elementos anteriores en la pgina, podr crear un contador de registros
personalizado.
Este ejemplo crea un contador de registros similar al creado en la seccin anterior, Creacin de
un contador de registros utilizando el objeto Estado de navegacin por juego de registros en
la pgina 589. El contador de registros de este ejemplo aparecer de este modo:
Displaying records StartRow thru EndRow of RecordSet.RecordCount.
En este ejemplo, el texto en fuente sans-serif representa los marcadores de posicin de los
contadores de registros que se insertarn en la pgina.
Para crear un contador de registros personalizado:
1 En la vista Diseo, introduzca el texto del contador en la pgina. Puede elegir el nombre que
desee. Por ejemplo:
Displaying records thru of .
2 Site el punto de insercin al final de la cadena de texto.
3 Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor).
4 Haga clic en el botn de signo ms (+) de la esquina superior izquierda y, a continuacin, haga
clic en Mostrar recuento de registros. En este submen, seleccione Mostrar el total de registros.
El comportamiento Mostrar el total de registros se inserta en la pgina y un marcador de posicin
se inserta donde estaba el punto de insercin. La cadena de texto deber aparecer ahora como:
Displaying records thru of {Recordset1.RecordCount}.
5 Site el punto de insercin detrs de la palabra records y seleccione Mostrar el nmero de
registros inicial en el panel Comportamiento del servidor > botn de signo ms (+) > Recuento
de registros. La cadena de texto deber aparecer ahora como:
Displaying records {StartRow_Recordset1} thru of {Recordset1.RecordCount}.
6 Site ahora el punto de insercin entre las palabras thru y of y seleccione Mostrar el nmero
de registros inicial en el panel Comportamientos del servidor > botn de signo ms (+) >
Recuento de registros. La cadena de texto deber aparecer ahora como:
Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of
{Recordset1.RecordCount}.
7 Compruebe que el contador funciona correctamente viendo la pgina en la ventana Live Data
(Ver > Live Data). El contador deber tener un aspecto similar al ejemplo siguiente:
Displaying records 1 thru 8 of 40.
Si la pgina de resultados tiene un vnculo de navegacin para desplazarse al siguiente juego de
registros, haga clic en el vnculo para actualizar el contador de registros, que ofrecer la
siguiente lectura:
Showing records 9 thru 16 of 40.
Los vnculos no funcionan en la ventana Live Data. Para comprobarlos, puede utilizar la funcin
Vista previa en el navegador de Dreamweaver. Asegrese de que est activada la opcin Vista
previa con servidor Live Data en Preferencias (Edicin > Preferencias > Vista previa en el
navegador (Windows) o Dreamweaver > Preferencias > Vista previa en el navegador (Mac OS X))
y, a continuacin, seleccione Archivo > Vista previa en el navegador.
Creacin de controles Web Cuadrcula de datos y Lista de datos
de ASP.NET
Los controles Cuadrcula de datos y Lista de datos de ASP.NET proporcionan numerosas
opciones para mostrar distintos tipos de datos (especialmente, contenido dinmico de una base de
datos) y simplifican el proceso de vincular las fuentes de datos con los controles. Dreamweaver
admite los controles Cuadrcula de datos y Lista de datos como comportamientos del servidor.
Para obtener ms informacin sobre los controles Cuadrcula de datos y Lista de datos de
ASP.NET, vase Controles Cuadrcula de datos y Lista de datos de ASP.NET en la pgina 580.
Creacin de controles Web Cuadrcula de datos y Lista de datos de ASP.NET 591
Adicin de una Cuadrcula de datos de ASP.NET a una pgina
Los controles de Cuadrcula de datos permiten dar formato y visualizar datos dinmicos en
cuadrculas de datos de varias columnas que se presentan como tablas. Para ms informacin
sobre las cuadrculas de datos y los tipos de control de formato que proporcionan, consulte
Controles Cuadrcula de datos y Lista de datos de ASP.NET en la pgina 580.
Nota: antes de insertar el comportamiento de servidor Cuadrcula de datos, deber definir un
conjunto de datos (denominado juego de registros en otros tipos de documentos) para la cuadrcula
de datos. Para ms informacin, consulte Aspectos bsicos de los juegos de registros en
la pgina 546.
Para aadir un objeto Cuadrcula de datos a una pgina:
1 Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga
clic en el botn de signo ms (+) y seleccione Cuadrcula de datos.
Aparecer el cuadro de dilogo Cuadrcula de datos.
2 Seleccione las opciones del cuadro de dilogo Cuadrcula de datos y haga clic en Aceptar.
En la ventana de documento, se muestra la cuadrcula de datos con un contorno gris de
tabuladores. En la ventana Live Data (Ver > Live Data), el contorno gris desaparecer y el
marcador de posicin del objeto quedar sustituido por la Cuadrcula de datos especificada.
Temas relacionados
Controles Cuadrcula de datos y Lista de datos de ASP.NET en la pgina 580
Adicin de una lista de datos de ASP.NET a una pgina
El comportamiento de servidor Lista de datos de Dreamweaver permite insertar un control Lista
de datos de ASP.NET en una pgina.
Nota: antes de insertar el comportamiento del servidor Lista de datos, deber definir un conjunto de
datos (denominado juego de registros en otros tipos de documentos) para la Lista de datos. Para
ms informacin, consulte Aspectos bsicos de los juegos de registros en la pgina 546.
Para aadir un objeto Lista de datos a una pgina:
1 Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga
clic en el botn de signo ms (+) y seleccione Lista de datos.
Aparecer el cuadro de dilogo Lista de datos.
2 Seleccione las opciones del cuadro de dilogo Lista de datos y haga clic en Aceptar.
En la ventana de documento, se muestra el objeto Lista de datos con un contorno gris de
tabuladores. En la ventana Live Data (Ver > Live Data), el contorno gris desaparecer y el
marcador de posicin del objeto se sustituir con la lista de datos especificada.
Modificacin de un objeto Cuadrcula de datos o Lista de datos
Siempre puede modificar los objetos Cuadrcula de datos y Lista de datos para ajustarlos a las
necesidades de diseo de su pgina.
Para modificar un objeto Cuadrcula de datos y Lista de datos:
En la vista Diseo, haga clic en el icono de la esquina superior izquierda de la Cuadrcula de
datos o la Lista de datos para cambiar al modo de edicin; a continuacin, aada o modifique
el contenido de cualquiera de las regiones de tabuladores que aparecen.
Nota: tambin puede arrastrar fuentes de contenido dinmico desde el panel Vinculaciones hasta
una regin de tabuladores.
Creacin de controles Web Cuadrcula de datos y Lista de datos de ASP.NET 593
En la vista de Diseo, seleccione el objeto y utilice el inspector de propiedades para cambiar sus
atributos.
Haga doble clic en el objeto en el panel Comportamientos del servidor y cambie sus
propiedades en el cuadro de dilogo que se abre.
En la vista Cdigo, seleccione la Cuadrcula de datos o la Lista de datos en la pgina y utilice su
cuadro de dilogo de etiquetas para cambiar sus atributos.
595
CAPTULO 36
Utilizacin de componentes de ColdFusion
Los componentes de Macromedia ColdFusion (CFC) permiten encapsular la lgica empresarial y
de aplicaciones en unidades reutilizables y autnomas. Los CFC tambin proporcionan una
forma rpida y sencilla de crear servicios Web.
Puede utilizar Macromedia Dreamweaver MX 2004 para crear y modificar CFC. Tambin puede
utilizar Dreamweaver para crear pginas Web que utilicen CFC.
Nota: puede utilizar CFC slo con Macromedia ColdFusion MX. Los CFC no se admiten en
ColdFusion 5.
Componentes de ColdFusion en la pgina 595
Creacin visual de un componente en Dreamweaver en la pgina 596
Visualizacin de componentes de ColdFusion en Dreamweaver en la pgina 597
Edicin de componentes de ColdFusion en Dreamweaver en la pgina 598
Creacin de pginas Web que utilicen componentes de ColdFusion en la pgina 599
Componentes de ColdFusion
Un componente de ColdFusion es una unidad de software reutilizable escrita en el lenguaje de
formato ColdFusion (CFML). Los CFC permiten que el cdigo sea reutilizable y fcil de
mantener.
En esta seccin se describen las ventajas de los CFC. En las secciones siguientes se explica cmo
puede Dreamweaver ayudar a trabajar con los CFC. Para informacin sobre las etiquetas y la
sintaxis CFC, vase la documentacin de ColdFusion que se encuentra en Dreamweaver (Ayuda >
Los componentes de ColdFusion proporcionan a los desarrolladores una forma sencilla y eficaz de
encapsular elementos de sus sitios Web. En general deber utilizar componentes para la lgica
empresarial de aplicaciones. Utilice etiquetas personalizadas para elementos de presentacin como
saludos personalizados, mens dinmicos, etc.
596 Captulo 36: Utilizacin de componentes de ColdFusion
Como ocurre con otros muchos tipos de construccin, los sitios dinmicos pueden a menudo
beneficiarse de los componentes intercambiables. Por ejemplo, un sitio dinmico puede ejecutar la
misma consulta repetidamente o calcular el precio total de las pginas de carros de la compra y
recalcularlo cada vez que se aada un artculo. Los componentes pueden realizar estas tareas.
Puede solucionar, mejorar, ampliar e incluso sustituir un componente con un mnimo impacto
sobre el resto de la aplicacin.
Supongamos que una tienda en lnea calcula los gastos de envo basndose en el precio de los
pedidos. Para pedidos de menos de 20 , los gastos de envo son de 4 ; para los pedidos entre 20
y 40 , los gastos ascienden a 6 , y as sucesivamente. Puede insertar la lgica para calcular los
gastos de envo en la pgina de carro de la compra y la pgina de caja, pero esto supondra mezclar
el cdigo de presentacin HTML y el cdigo de lgica CFML y, en trminos generales,
dificultara el mantenimiento y la reutilizacin del cdigo.
Usted decide crear un componente de ColdFusion llamado Pricing que tiene, entre otras cosas,
una funcin llamada ShippingCharge. La funcin toma un precio como argumento y devuelve
gastos de envo. Por ejemplo, si el valor del argumento es 32,80, la funcin devuelve 6.
En la pgina de carro de la compra y la pgina de caja, inserte una etiqueta especial para activar la
funcin ShippingCharge. Cuando se solicita la pgina, se activa la funcin y se devuelven gastos
de envo a la pgina.
Posteriormente, la tienda anuncia una promocin especial. Se realiza el envo gratuito para todos
los pedidos que superen los 100 . Realice el cambio en las tarifas de envo en un lugar (la funcin
ShippingCharge del componente Pricing) y todas las pginas que utilizan la funcin obtendrn
automticamente gastos de envo precisos.
Creacin visual de un componente en Dreamweaver
Puede utilizar Dreamweaver para definir visualmente un componente de ColdFusion y sus funciones.
Dreamweaver crea un archivo .cfc e inserta las etiquetas CFML necesarias automticamente.
Nota: segn el componente es posible que deba completar el cdigo manualmente.
Para crear visualmente un componente de ColdFusion:
2 En el panel Componentes (Ventana > Componentes), seleccione Componentes CF en el men
emergente.
3 En el panel Componentes, haga clic en el botn de signo ms (+).
Se abrir el cuadro de dilogo Crear componente.
Dreamweaver escribe un archivo .cfc y lo guarda en la carpeta especificada. El nuevo componente
tambin aparecer en el panel Componentes (despus de hacer clic en Actualizar).
Para eliminar un componente, deber borrar manualmente el archivo .cfc del servidor.
Temas relacionados
Edicin de componentes de ColdFusion en Dreamweaver en la pgina 598
Visualizacin de componentes de ColdFusion en Dreamweaver 597
Visualizacin de componentes de ColdFusion en Dreamweaver
Dreamweaver proporciona un modo de examinar visualmente los componentes de ColdFusion
definidos para el sitio. Dreamweaver lee los archivos .cfc situados en el servidor y muestra
informacin sobre ellos en una vista de rbol de fcil navegacin en el panel Componentes.
Nota: Dreamweaver busca los componentes en el servidor de pruebas (vase Especificacin de
dnde pueden procesarse las pginas dinmicas en la pgina 474). Si desea ver los componentes
situados en otro servidor, cambie la configuracin del servidor de prueba.
Puede visualizar la informacin siguiente sobre sus componentes de CF:
Mostrar todos los componentes de ColdFusion definidos para el sitio.
Explorar las funciones y los argumentos de cada componente.
Consultar las propiedades de las funciones que actan como servicios Web.
Para ver los componentes de ColdFusion en Dreamweaver:
2 En el panel Componentes (Ventana > Componentes), seleccione Componentes CF en el men
emergente.
3 Haga clic en el botn Actualizar del panel para recuperar los componentes.
Dreamweaver mostrar los paquetes de componentes del servidor. Un paquete de componentes
es una carpeta que contiene archivos CFC.
Si no aparecen los paquetes de componentes existentes, haga clic en el botn Actualizar, en la
barra de herramientas del panel.
4 Haga clic en el botn de signo ms (+) situado junto al nombre del paquete para ver los
componentes almacenados en el paquete.
Para ver las funciones de un componente, haga clic en el botn de signo ms (+) situado
junto al nombre del componente.
Para ver los argumentos que toma una funcin, as como el tipo de argumentos y si son
obligatorios u opcionales, abra la rama de la funcin en la vista de rbol.
Las funciones que no toman argumentos muestran el botn de signo ms (+) a su lado.
Para ver rpidamente los detalles de un argumento, una funcin, un componente o un
paquete, seleccione el elemento en la vista de rbol y, a continuacin, haga clic en el botn
Obtener datos de la barra de herramientas del panel.
Tambin puede hacer clic con el botn derecho (Windows) o mantenga presionada la tecla
Control y haga clic (Macintosh) en el elemento y seleccione Obtener datos en el men
emergente.
Dreamweaver mostrar los detalles del elemento en un cuadro de mensaje.
Temas relacionados
Creacin visual de un componente en Dreamweaver en la pgina 596
Edicin de componentes de ColdFusion en Dreamweaver
Dreamweaver proporciona un modo optimizado de editar el cdigo de los componentes de
ColdFusion definidos para el sitio. Por ejemplo, puede aadir, cambiar o eliminar cualquier
funcin de componente sin salir de Dreamweaver.
Para utilizar esta funcin, el entorno de desarrollo deber configurarse de este modo:
ColdFusion MX debe ejecutarse localmente.
En el cuadro de dilogo Definicin del sitio avanzado de Dreamweaver, el tipo de acceso
especificado en la categora Servidor de prueba debe ser Local/red.
En el cuadro de dilogo Definicin del sitio avanzado, la ruta de la carpeta raz local debe ser la
misma que la de la carpeta del servidor de prueba (por ejemplo,
c:\Inetpub\wwwroot\cf_projects\myNewApp\). Puede examinar y cambiar estas rutas si
selecciona Sitio > Editar sitios.
El componente debe estar almacenado en la carpeta del sitio local o en cualquiera de sus
subcarpetas del disco duro.
Abra cualquier pgina de ColdFusion en Dreamweaver y visualice los componentes en el panel
Componentes. Para mostrar los componentes, abra el panel Componentes (Ventana >
Componentes), seleccione Componentes CF en el men emergente del panel y haga clic en el
botn Actualizar del panel.
Dado que ColdFusion MX se ejecuta localmente, Dreamweaver muestra los paquetes de
componentes en el disco duro. Para ms informacin, consulte Visualizacin de componentes de
ColdFusion en Dreamweaver en la pgina 597.
Para editar un componente:
1 Abra cualquier pgina de ColdFusion en Dreamweaver y visualice los componentes en el panel
Componentes (Ventana > Componentes).
2 Seleccione Componentes CF en el men emergente del panel y haga clic en el botn Actualizar
del panel.
Dado que ColdFusion MX se ejecuta localmente, Dreamweaver muestra los paquetes de
componentes en el disco duro. Para ms informacin, consulte Visualizacin de componentes
de ColdFusion en Dreamweaver en la pgina 597.
3 Para editar un archivo de componente en general, abra el paquete y haga doble clic en el nombre
del componente en la vista de rbol.
Dreamweaver abrir el archivo de componente en la vista Cdigo.
4 Para editar una funcin, argumento o propiedad especfica, haga doble clic en el elemento en la
vista de rbol.
5 Realice los cambios deseados manualmente en la vista Cdigo.
6 Guarde el archivo (Archivo > Guardar).
Para ver una funcin nueva en el panel Componentes, actualice la vista haciendo clic en el botn
Actualizar de la barra de herramientas del panel.
Creacin de pginas Web que utilicen componentes de ColdFusion 599
Creacin de pginas Web que utilicen componentes de
ColdFusion
Una forma de utilizar una funcin de componente en las pginas Web consiste en escribir cdigo
en la pgina que activa la funcin cuando se solicita la pgina. Puede utilizar Dreamweaver como
ayuda para escribir este cdigo.
Nota: para ms informacin sobre otras maneras de utilizar los componentes, consulte la
documentacin de ColdFusion que se encuentra en Dreamweaver (Ayuda > Utilizacin de
ColdFusion).
Para utilizar un componente de ColdFusion en una pgina Web:
1 En Dreamweaver, abra la pgina de ColdFusion que utilizar la funcin de componente.
2 Cambie a la vista Cdigo (Ver > Cdigo).
3 Abra el panel Componentes (Ventana > Componentes) y, a continuacin, seleccione
Componentes CF en el men emergente del panel.
4 Busque el componente deseado e insrtelo utilizando una de las tcnicas siguientes:
Arrastre una funcin desde la vista de rbol hasta la pgina. Dreamweaver insertar el cdigo
en la pgina para activar la funcin.
Seleccione la funcin en el panel y haga clic en el botn Insertar de la barra de herramientas
del panel (el segundo botn a la derecha). Dreamweaver insertar el cdigo en la pgina en
el punto de insercin.
5 Si inserta una funcin que tiene argumentos, complete el cdigo del argumento manualmente.
Para ms informacin, consulte la documentacin de ColdFusion en Dreamweaver (Ayuda >
6 Guarde el archivo (Archivo > Guardar).
601
CAPTULO 37
Utilizacin de servicios Web (slo Windows)
Servicios Web es una nueva tecnologa que permite a las pginas Web acceder a aplicaciones
distribuidas. Los servicios Web ofrecen acceso a informacin y funcionalidad de aplicacin, por lo
que se pueden suministrar y facturar en forma de flujos de servicios que permiten el acceso desde
cualquier plataforma y lugar. La pgina Web que conecta con el servicio Web suele denominarse
consumidor y el servicio propiamente dicho, editor. Macromedia Dreamweaver MX 2004 permite
crear pginas y sitios que son consumidores de servicios Web. Dreamweaver admite actualmente
la creacin de consumidores de servicios Web mediante documentos de tipo Macromedia
ColdFusion MX, ASP.NET y JSP (Java Server Pages). En concreto, Dreamweaver permite realizar
las siguientes tareas de desarrollo de servicios Web:
Seleccionar servicios Web disponibles en Internet.
Generar un proxy de servicios Web que permita a la pgina Web comunicarse con el
publicador del sitio Web.
El proxy (tambin denominado clase de abstraccin) contiene los campos, mtodos y
propiedades de un servicio Web y los pone a disposicin de la pgina almacenada localmente.
Cuando genere un proxy para la pgina, Dreamweaver le permitir verlo en el panel
Componentes.
Arrastrar mtodos y tipos de datos al cdigo de la pgina.
Antes de crear una pgina Web que utilice un servicio Web deber conocer la tecnologa de
servidor subyacente de la aplicacin que desea utilizar y los principios de programacin que
requiere la aplicacin.
Dreamweaver permite crear pginas Web que pueden acceder a servicios Web y utilizar la
funcionalidad que suministran los servicios. Tambin es posible crear y publicar servicios Web
para su implementacin utilizando Macromedia ColdFusion MX.
Servicios Web en la pgina 602
Generadores proxy en la pgina 604
Adicin de un proxy de servicios Web utilizando la descripcin WSDL en la pgina 607
Adicin de un servicio Web a una pgina en la pgina 608
Edicin de la lista de sitios de servicios Web UDDI en la pgina 610
602 Captulo 37: Utilizacin de servicios Web (slo Windows)
Servicios Web
Los servicios Web permiten a las aplicaciones comunicarse y compartir informacin a travs de
Internet independientemente del sistema operativo o el lenguaje de programacin. A
continuacin se ofrecen algunos ejemplos de servicios Web y la informacin y funcionalidad que
proporcionan:
Autenticacin y autorizacin de usuarios
Validacin de tarjetas de crdito
Servicios de mercados financieros que devuelven precios de acciones asociados a smbolos de
comprobacin especificados.
Servicios de compra que permiten a los usuarios solicitar productos en lnea
Servicios de informacin que proporcionan noticias u otros datos basndose en los intereses, la
ubicacin u otro tipo de informacin personal seleccionada
Dado que los servicios Web proporcionan funcionalidad como un servicio al que una pgina Web
se conecta y utiliza segn sus necesidades, brindan a los desarrolladores y proveedores de servicio
una mayor flexibilidad a la hora de disear e implementar potentes aplicaciones distribuidas.
Los servicios Web constan de los siguientes componentes bsicos:
Editores de servicios: proporcionan aplicaciones almacenadas y las ponen a disposicin para
su uso. Los servicios Web se pueden suministrar con carcter gratuito o como servicio de pago.
Intermediarios de servicios: mantienen un registro de los proveedores de servicio con
descripciones de las ofertas de servicio y vnculos a sus aplicaciones.
Consumidores de servicios: son las pginas Web que acceden y utilizan el servicio Web
remoto.
Flujo de trabajo de los servicios Web en Dreamweaver
Para crear una pgina o un sitio que sea consumidor de un servicio Web utilizando Dreamweaver,
deber realizar las tareas siguientes:
1 Instale y configure un generador proxy.
Los generadores proxy crean un proxy de servicios Web, es decir, un componente que una
pgina Web utiliza para comunicarse con el editor de servicios Web. El proxy de servicios Web
se crea desde el Lenguaje de descripcin de servicios Web (WSDL) que describe el servicio
Web. Segn la tecnologa de servidor para la que quiera desarrollar consumidores de servicios
Web, es posible que deba instalar y configurar un generador proxy que admita esa tecnologa.
Dreamweaver est preconfigurado con AXIS, el generador proxy de Apache SOAP que admite
el desarrollo de servicios Web JSP. Si est desarrollando pginas ColdFusion 6, el generador
proxy de servicios Web se incluye en el servidor ColdFusion. El establecimiento de una
conexin con el servidor ColdFusion proporciona acceso al generador proxy.
Si est desarrollando pginas de servicios Web para utilizarlas con ASP.NET, deber instalar el
ASP.NET SDK, disponible en Microsoft.
Para informacin sobre cmo instalar y configurar un generador proxy no incluido en
Dreamweaver, vase Generadores proxy en la pgina 604.
Servicios Web 603
2 Utilizando un navegador, consulte el registro de servicios basado en la Web.
Existen varias fuentes de servicios Web que van desde los sitios de registro de servicios hasta
simples listas. Los registros utilizan UDDI, una norma que permite el establecimiento de
contactos y la realizacin de transacciones entre proveedores y solicitantes de servicios. UDDI
permite a las empresas localizar en la Web servicios que satisfagan sus necesidades. Por ejemplo,
utilizando UDDI puede especificar algunos criterios, como el precio ms bajo de un
determinado servicio, o buscar informacin especfica.
3 Despus de localizar y seleccionar un servicio Web que proporcione la funcionalidad deseada,
introduzca el URL del WSDL en el cuadro de dilogo Aadir un servicio Web.
4 Genere un proxy para el servicio Web a partir de la descripcin WSDL del editor del servicio.
Para incorporar un servicio Web a una pgina Web deber crear un proxy. El proxy
proporciona a la pgina Web la informacin necesaria para comunicar con el servicio Web y
acceso a los mtodos que proporciona el servicio Web.
Para crear un proxy a partir del archivo WSDL, utilice un generador de proxy. Despus de crear
el proxy, puede instalarlo en uno de los equipos siguientes:
En el equipo local donde est desarrollando el consumidor de servicios Web.
En el equipo de servidor que ejecute el servidor de aplicaciones. Para implementar la pgina
Web y establecer comunicacin entre ella y el editor de servicios Web deber instalar el
proxy en el servidor.
Para ms informacin, consulte Generadores proxy en la pgina 604.
5 Utilizando Dreamweaver, aada el servicio Web a una pgina y edite los parmetros y mtodos
necesarios para hacer uso de la funcionalidad del servicio.
Para ms informacin, consulte Adicin de un servicio Web a una pgina en la pgina 608.
Bsqueda de editores de servicios Web
Los editores de servicios se encargan de facilitar el acceso a los servicios Web. Generalmente, el
editor de servicios ofrece acceso a su servicio Web a travs de un registro basado en la Web que
mantiene un directorio de servicios disponibles. Existen varios sitios Web que proporcionan un
directorio de este tipo, como:
X Methods en http://www.xmethods.net
IBM Business Registry en https://www-3.ibm.com/services/uddi/protect/registry.html
Microsoft UDDI Registry en http://uddi.microsoft.com/default.aspx
Estos registros utilizan el servicio UDDI (Descripcin, descubrimiento e integracin universales),
un registro de servicios de comercio electrnico que acta como foro donde las empresas ofrecen
una descripcin de su actividad y de los productos o servicios que proporcionan a otras empresas.
Un grupo de empresas, llamadas operadores, mantienen el registro. Los operadores se han
comprometido a compartir toda la informacin pblica sobre los integrantes del registro entre
ellos y con los usuarios del servicio, y a mantener su interoperabilidad entre los mltiples nodos
del mismo nivel de la red de servicios UDDI. Adems de los servicios Web pblicos, hay registros
privados UDDI disponibles para los abonados.
La especificacin UDDI se basa en normas existentes de Internet que garantizan su neutralidad
respecto a plataformas e implementaciones.
Temas relacionados
Edicin de la lista de sitios de servicios Web UDDI en la pgina 610
Componentes del software de los servicios Web
Para que una pgina Web pueda acceder y utilizar un servicio Web, deber comunicarse con el
servicio y tener una descripcin de la funcionalidad que proporciona el servicio, los mtodos
disponibles que puede activar y los parmetros que devuelve el servicio. El Lenguaje de
descripcin de servicios Web (WSDL) ofrece una descripcin del servicio basada en XML. Cada
servicio Web proporciona un WSDL que describe cmo conectarse al servicio, los mtodos
disponibles que la pgina Web puede activar y las entradas y salidas de datos. El WSDL puede
encontrarse en un archivo o puede generarse por medio del servicio Web en tiempo de ejecucin.
La comunicacin entre la pgina Web que solicita el servicio y el servicio Web propiamente dicho
utiliza el Protocolo sencillo de acceso a objetos (SOAP). SOAP es un protocolo basado en XML
que permite a un cliente Web acceder y activar los mtodos y parmetros del servicio Web.
Temas relacionados
Adicin de un proxy de servicios Web utilizando la descripcin WSDL en la pgina 607
Referencias a servicios Web
Para obtener ms informacin sobre los servicios Web y las tecnologas subyacentes que los hacen
posible, visite los siguientes sitios Web:
Especificacin WSDL en http://www.w3.org/TR/wsdl
Especificacin UDDI en http://www.uddi.org/specification.html
Especificacin XML en http://www.w3.org/TR/REC-xml
Especificacin SOAP en http://www.w3.org/TR/SOAP/
Generadores proxy
Dreamweaver instala el generador de proxy AXIS, que admite servicios Web JSP. AXIS es un
generador de proxy de cdigo abierto que se distribuye a travs del proyecto Apache SOAP.
Adems, puede aadir generadores de proxy que admitan las implementaciones de servicios Web
del proveedor o nuevas tecnologas de servicios Web. En esta seccin se explica cmo obtener
generadores de proxy y configurarlos para que funcionen con Dreamweaver.
Para obtener ms informacin sobre AXIS, visite el sitio Web de Apache AXIS en: http://
xml.apache.org/axis/index.html.
Temas relacionados
Configuracin de generadores proxy para utilizarlos con Dreamweaver en la pgina 605
Configuracin de generadores proxy para utilizarlos con Dreamweaver 605
Obtencin de generadores proxy adicionales
Si desea instalar un generador de proxy no incluido con Dreamweaver deber solicitar al
proveedor el proxy y los componentes de software relacionados. Deber poder descargar todos los
archivos necesarios desde el sitio Web del proveedor.
Algunos generadores de proxy crean proxies que dependen de otras bibliotecas de software y que
deber instalar correctamente para que el generador pueda acceder a ellas. Por ejemplo, el
generador de proxy AXIS crea proxies que dependen de la biblioteca Apache SOAP que, a su vez,
depende de otras bibliotecas de software (observe que todo el software necesario para utilizar
AXIS se instala de forma predeterminada con Dreamweaver). Al seleccionar un generador de
proxy, consulte la documentacin suministrada y asegrese de que dispone de todos los
componentes de software y las bibliotecas que necesita para realizar una instalacin y una
configuracin correctas.
Despus de instalar y configurar correctamente el generador de proxy deber configurarlo para
que funcione con Dreamweaver.
Nota: actualmente el desarrollo de servicios Web con Dreamweaver se limita al entorno Windows.
Para desarrollar pginas que accedan a servicios Web en Macintosh deber utilizar un servidor de
aplicaciones aparte que ejecute Windows NT/2000/XP o UNIX para ejecutar el proxy de servicios
Web y su entorno de aplicaciones.
Configuracin de generadores proxy para utilizarlos con
Dreamweaver
Cuando instale un generador proxy de servicios Web deber configurarlo para que funcione con
Dreamweaver.
Para ms informacin sobre los generadores proxy, vase Generadores proxy en la pgina 604.
Para configurar un generador de proxy para que funcione con Dreamweaver:
1 Seleccione Ventana > Componentes, para abrir al panel Componentes.
2 En el panel Componentes, elija Servicios Web en el men emergente situado en la parte superior
izquierda del panel y, a continuacin, haga clic en el botn de signo ms (+) y seleccione Aadir
utilizando WSDL.
Aparecer el cuadro de dilogo Aadir utilizando WSDL.
3 En el cuadro de dilogo Aadir utilizando WSDL, seleccione Editar lista de generadores proxy,
en el men emergente Generador proxy.
Aparecer el cuadro de dilogo Generador proxy.
4 Haga clic en Nueva, seleccione el generador proxy en el men emergente y haga clic en Listo.
Si el generador proxy que desea utilizar no aparece en la lista, seleccione Generador proxy
predeterminado para mostrar el cuadro de dilogo del mismo nombre.
El cuadro de dilogo Generador proxy predeterminado permite configurar el generador proxy
seleccionado, aunque tambin puede configurar un generador proxy nuevo. Los cuadros de
texto del cuadro de dilogo varan segn el generador proxy empleado.
Nota: el generador proxy de ColdFusion MX no se puede editar.
Para informacin sobre cmo seleccionar las opciones del cuadro de texto de dilogo, haga clic
en el botn Ayuda del cuadro de dilogo.
Adicin de un proxy de servicios Web utilizando la descripcin WSDL 607
6 Cuando termine de configurar el generador proxy predeterminado, haga clic en Aceptar.
Cuando Dreamweaver lee una descripcin WSDL de un servicio Web, realiza las siguientes
acciones relativas a los campos del generador proxy predeterminado:
Lee el WSDL como entrada para buscar el servicio Web.
Genera el proxy de servicios Web con el entorno de tiempo de ejecucin especificado.
Compila el proxy con el compilador especificado.
Devuelve el cdigo fuente proxy y el proxy compilado a la carpeta de destino especificada.
Temas relacionados
Generadores proxy en la pgina 604
Obtencin de generadores proxy adicionales en la pgina 605
Adicin de un proxy de servicios Web utilizando la descripcin
WSDL
Despus de especificar un generador proxy (vase Generadores proxy en la pgina 604) y
configurar los modelos de servidor de servicios Web que desea admitir, deber buscar un servicio
Web que proporcione la funcionalidad deseada y generar un proxy para ese servicio.
Para seleccionar un servicio Web y generar un proxy a partir de su archivo WSDL:
1 Abra la pgina a la que desea aadir el servicio Web.
2 Seleccione Ventana > Componentes, para abrir al panel Componentes.
3 En el panel Componentes, elija Servicios Web en el men emergente situado en la parte superior
izquierda del panel, haga clic en el botn de signo ms (+) y seleccione Aadir utilizando
WSDL.
4 Especifique el URL del archivo WSDL que desea utilizar.
Si conoce el URL del archivo WSDL, introdzcalo en el URL del cuadro de texto WSDL.
Si no conoce el URL del archivo WSDL puede buscarlo en un directorio de servicios Web.
Cuando encuentre el servicio Web deseado, copie y pegue el URL del servicio Web en el
cuadro de edicin WSDL. Para iniciar un navegador Web, haga clic en el botn de bsqueda
de UDDI y seleccione uno de los registros de servicios Web que figuran en la lista.
Dreamweaver iniciar el navegador y abrir el registro seleccionado. Localice el servicio Web
que desea utilizar y copie el URL de su archivo WSDL en el Portapapeles (Control+C en
Windows o Comando+C en Macintosh). Vuelva al Selector de servicios Web y pegue el URL
en el cuadro de dilogo.
Puede editar la lista de registros de servicios Web para que incluya directorios adicionales o
proveedores especficos. Para ms informacin, consulte Edicin de la lista de sitios de
servicios Web UDDI en la pgina 610.
5 Seleccione un generador proxy que admite el modelo de servidor de servicios Web deseado en
el men emergente Generador proxy.
Compruebe que el generador proxy est instalado y configurado en el sistema. Para ms
informacin, consulte Generadores proxy en la pgina 604.
El generador proxy crear un proxy para el servicio Web y lo introspeccionar. La introspeccin
es el proceso en el cual el generador proxy consulta la estructura interna del proxy de servicios
Web y da acceso a sus interfaces, mtodos y propiedades a travs de Dreamweaver.
El servicio Web estar ahora disponible para su uso en el sitio y aparecer en el panel
Componentes. Ya puede aadir el servicio Web a una pgina.
Temas relacionados
Componentes del software de los servicios Web en la pgina 604
Adicin de un servicio Web a una pgina
Despus de seleccionar un servicio Web, generar su proxy y aadirlo al panel Componentes,
puede insertarlo en una pgina.
La ilustracin siguiente muestra el panel Componentes con el proxy de servicios Web
Helloworld aadido. El proxy Helloworld proporciona un mtodo, sayHello, que aparece
impreso como Hello World.
El ejemplo siguiente crea una instancia del servicio Web HelloWorld utilizando ColdFusion. Para
ms informacin sobre cmo crear un servicio Web y para ver ejemplos adicionales mediante
.NET y JSP, visite el Centro de soporte de Macromedia en: www.macromedia.com/go/
creating_web_services_es.
Para aadir un servicio Web a una pgina:
1 En la vista Cdigo de la ventana de documento, arrastre el mtodo sayHello al cdigo HTML
de la pgina.
Dreamweaver aadir el mtodo y los parmetros ficticios a la pgina.
2 Edite el cdigo insertado con los nombres, tipos de datos y valores de parmetros del servicio
que requiera el servicio Web. El servicio Web debe proporcionar descripciones de los tipos de
datos y los valores de parmetros.
Adicin de un servicio Web a una pgina 609
En el ejemplo de ColdFusion mostrado a continuacin, el servicio Web se encuentra entre
etiquetas <cfinvoke>. Para desarrollar un servicio Web en ColdFusion, utilice <cfinvoke>
para crear una instancia del servicio y activar sus mtodos.
<html>
<head>
<title>Web Service</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<cfinvoke
webservice="http://www.mysite.com:8500:8500/helloworld/HelloWorld.cfc?wsdl"
method="sayHello"
returnvariable="aString">
</cfinvoke>
</body>
</html>
3 Si desea vincular un valor devuelto a un elemento visual, cambie a la vista Diseo y site un
elemento visual en la pgina que pueda aceptar vinculacin de datos. A continuacin, vuelva a
la vista Cdigo e introduzca el cdigo correspondiente para vincular el valor devuelto al
elemento visual. Cuando cree servicios Web, consulte en la documentacin del proveedor de la
tecnologa la sintaxis correcta para crear una instancia del servicio y mostrar los valores devueltos
a la pgina.
En este ejemplo, el valor devuelto para la variable aString se enva utilizando la etiqueta
<cfoutput> de ColdFusion. De este modo se mostrar la frase The web service says:
Hello world! en la pgina.
<html>
<head>
<title>Web Service</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<cfinvoke
webservice="http://www.mysite.com:8500/helloworld/HelloWorld.cfc?wsdl"
method="sayHello"
returnvariable="aString">
</cfinvoke>
The web service says: <cfoutput>#aString#</cfoutput>
</body>
</html>
4 Cuando se implementan pginas Web en un servidor de produccin, Dreamweaver copia
automticamente las pginas, el proxy y las bibliotecas necesarias en el servidor Web.
Nota: si desarrolla la aplicacin con un proxy que est instalado en un equipo distinto del que ha
utilizado para desarrollar las pginas o si utiliza una herramienta de administracin de sitios que no
copia todos los archivos relacionados en el servidor, deber asegurarse de implementar el proxy y
los archivos de biblioteca dependientes. En caso contrario, las pginas no podrn comunicarse
con la aplicacin de servicios Web.
Edicin de la lista de sitios de servicios Web UDDI
El Selector de servicios Web proporciona una lista de directorios de servicios Web basados en
UDDI en la que usted puede seleccionar servicios. Puede editar esta lista para aadir o eliminar
directorios de servicios Web. Para ms informacin, consulte Bsqueda de editores de servicios
Web en la pgina 603.
Para editar la lista de sitios de servicios Web:
1 En Dreamweaver, seleccione Ventana > Componentes para abrir el panel del mismo nombre.
2 En el panel Componentes, elija Servicios Web en el men emergente de la parte superior
izquierda del panel y, a continuacin, haga clic en el botn de signo ms (+) para aadir un
servicio Web.
3 En el Selector de servicios Web, haga clic en el icono de globo y elija Editar lista de sitios UDDI
Aparece el cuadro de dilogo Sitio UDDI.
4 En el cuadro de dilogo Sitios UDDI puede aadir nuevos sitios de servicios Web, editar el
nombre y el URL de sitios existentes y eliminar los sitios no deseados.
Para aadir un sitio nuevo o modificar uno existente, haga clic en el botn Nueva o Editar y
seleccione las opciones del cuadro de dilogo que se muestra.
Para eliminar un sitio existente, seleccinelo en la lista y haga clic en el botn Quitar.
611
CAPTULO 38
Adicin de comportamientos de servidor
personalizados
Macromedia Dreamweaver MX 2004 se suministra con un conjunto de comportamientos de
servidor que le permite aadir fcilmente prestaciones dinmicas a un sitio. Si desea ampliar la
funcionalidad de Dreamweaver, puede crear nuevos comportamientos de servidor de acuerdo con
sus necesidades de desarrollo u obtener comportamientos de servidor en el sitio Web de
Macromedia Exchange.
Comportamientos de servidor personalizados en la pgina 611
Instalacin de comportamientos de servidor de terceros en la pgina 620
Utilizacin del Creador de comportamientos de servidor en la pgina 621
Utilizacin de parmetros en comportamientos de servidor en la pgina 624
Colocacin de bloques de cdigo en la pgina 625
Comportamientos del servidor en la pgina 612
Edicin y modificacin de comportamientos de servidor en la pgina 628
Comportamientos de servidor personalizados
Antes de crear sus propios comportamientos del servidor, debera comprobar el sitio Web de
Macromedia Exchange para ver si otra persona ha creado ya un comportamiento de servidor que
proporciona la funcionalidad que desea aadirle a su sitio Web. A menudo, algn desarrollador ya
ha creado y probado un comportamiento de servidor que puede satisfacer sus necesidades.
Los comportamientos de servidor y otras extensiones disponibles a travs del sitio Web
Macromedia Exchange permiten aadir fcilmente nuevas funciones a Dreamweaver. Cada
comportamiento de servidor incluye una descripcin breve, comentarios de usuarios y un grupo
de discusin en el que puede publicar preguntas y obtener asistencia relacionada con los
comportamientos de servidor que descargue.
Si se dispone a crear su propio comportamiento de servidor, debe familiarizarse con el lenguaje de
programacin Web que utiliza su sitio Web. Este captulo proporciona las reglas especficas para
crear comportamientos de servidor con Dreamweaver. No ensea lenguajes de programacin ni a
probar comportamientos de servidor.
612 Captulo 38: Adicin de comportamientos de servidor personalizados
Comportamientos del servidor
Si posee amplia experiencia en Macromedia ColdFusion, ASP.NET, JavaScript, VBScript, PHP o
Java, podr escribir sus propios comportamientos de servidor. La creacin de un comportamiento
de servidor incluye las siguientes tareas:
Escritura de uno o varios bloques de cdigo que realicen la accin deseada.
Para informacin sobre cmo crear comportamientos de servidor con el Creador de
comportamientos de servidor de Dreamweaver, vase Utilizacin del Creador de
comportamientos de servidor en la pgina 621. Para informacin sobre la sintaxis que
admiten los comportamientos de servidor de Dreamweaver, vase Utilizacin de parmetros
en comportamientos de servidor en la pgina 624.
Especificacin del lugar en el que debe insertarse el bloque de cdigo en el cdigo HTML de la
pgina.
Para informacin sobre la colocacin de bloques de cdigo en una pgina, vase Colocacin
de bloques de cdigo en la pgina 625.
Si el comportamiento de servidor requiere que se especifique un valor para un parmetro,
deber crear un cuadro de dilogo que solicite al desarrollador Web que aplica el
comportamiento que suministre un valor adecuado.
Para informacin sobre cmo proporcionar valores de parmetros a un comportamiento de
servidor mediante un cuadro de dilogo, vase Creacin de un cuadro de dilogo para un
comportamiento de servidor personalizado en la pgina 626.
Comprobacin del comportamiento de servidor antes de ponerlo a disposicin de otras
personas.
Para conocer las directrices que debe seguir para comprobar comportamientos de servidor,
vase Comprobacin de comportamientos de servidor en la pgina 620.
Bloques de cdigo
Los bloques de cdigo creados en el Creador de comportamientos de servidor se encapsulan en un
comportamiento de servidor que aparece en el panel Comportamientos del servidor. Puede
tratarse de cualquier cdigo vlido de tiempo de ejecucin para el modelo de servidor
especificado. Por ejemplo, si elige ColdFusion como tipo de documento para el comportamiento
de servidor personalizado, el cdigo que escriba deber ser cdigo de ColdFusion vlido para su
ejecucin en un servidor de aplicaciones ColdFusion.
Temas relacionados
Reglas de codificacin en la pgina 619
Bloques de cdigo
Puede crear los bloques de cdigo directamente en el Creador de comportamientos de servidor o
copiar y pegar cdigo de otras fuentes. Cada bloque de cdigo creado en el Creador de
comportamientos de servidor debe ser una nica etiqueta o bloque de script. Si necesita insertar
varios bloques de etiquetas, divdalos en bloques de cdigo independientes.
Para ms informacin, consulte Utilizacin del Creador de comportamientos de servidor en
la pgina 621.
Comportamientos de servidor personalizados 613
Parmetros de tiempo de ejecucin
Puede incluir parmetros en el cdigo de tiempo de ejecucin y permitir al diseador de la pgina
que proporcione valores para dichos parmetros. Para ello, introduzca marcadores de parmetros
en el cdigo de la siguiente forma:
@@parameterName@@
Para ms informacin, consulte Utilizacin de parmetros en comportamientos de servidor en
la pgina 624.
Condiciones y elementos repetidos en los bloques de cdigo
Si desea que el bloque de cdigo o una parte de un bloque de cdigo se ejecute slo si se dan una
o varias condiciones, utilice la siguiente sintaxis:
<@ if (expression1) @>
code block1
[<@ elseif (expression2) @>
code block2]*
[<@ else @>
code block3]
<@ endif @>
Los corchetes ([ ]) indican cdigo opcional, mientras que el asterisco (*) indica cero o ms
instancias. La expresin de condicin puede ser cualquier expresin de condicin JavaScript vlida
y puede contener parmetros de comportamiento de servidor.
Si desea que el bloque de cdigo o una parte de un bloque de cdigo se repita varias veces, utilice
la siguiente sintaxis:
<@ loop (@@param1@@,@@param2@@) @>
code block
<@ endloop @>
La directiva de bucle (loop) toma como argumentos una lista de matrices de parmetros separadas
por comas. El texto que debe repetirse se duplicar n veces, siendo n la longitud de los argumentos
de matrices de parmetros. Si se especifica ms de un argumento de matrices de parmetros, todas
las matrices debern tener la misma longitud. En la evaluacin nmero i del bucle, los elementos
nmero i de las matrices de parmetros reemplazarn a las instancias de los parmetros asociados
en el bloque de cdigo.
Para informacin general sobre codificacin, vase Reglas de codificacin en la pgina 619.
Temas relacionados
Cmo hacer que los bloques de cdigo sean condicionales en la pgina 615
Repeticin de bloques de cdigo en la pgina 616
Posicin de los bloques de cdigo dentro de las pginas Web
Al crear bloques de cdigo utilizando el Creador de comportamientos de servidor (vase
Utilizacin del Creador de comportamientos de servidor para ms informacin), debe
especificar en qu parte del cdigo HTML de la pgina desea insertarlos. Para ello, utilice los
mens emergentes Insertar cdigo y Posicin relativa del cuadro de dilogo Creador de
comportamientos de servidor, que permiten seleccionar el lugar en el que desea insertar el bloque
de cdigo dentro del documento, y, a continuacin, indique una posicin en relacin con otra
etiqueta de la pgina.
Por ejemplo, si inserta un bloque de cdigo por encima de la etiqueta <html>, deber indicar la
posicin de los bloques de cdigo en relacin con otros scripts, etiquetas y comportamientos de
servidor de esa seccin del cdigo HTML de la pgina. Un ejemplo tpico de esto es la posicin de
un comportamiento antes o despus de cualquier consulta del juego de registros que tambin
puedan existir en el cdigo de la pgina por encima de la etiqueta <html>.
Cuando selecciona una opcin de posicin del men emergente Insertar cdigo, las opciones
disponibles en el men emergente Posicin relativa cambian para proporcionar opciones
adecuadas para esa parte de la pgina. Por ejemplo, si selecciona Por encima de la etiqueta <html>
en el men emergente Insertar cdigo, las opciones de posicin disponibles en el men emergente
Posicin relativa reflejan opciones para esa parte de la pgina.
Las opciones de insercin de bloques de cdigo y las opciones de posicin relativa de cada uno se
muestran en la tabla siguiente.

Si desea especificar una posicin personalizada, debe asignar un peso al bloque de cdigo. Utilice la
opcin Posicin personalizada cuando necesite insertar varios bloques de cdigo en un orden
concreto. Por ejemplo, si desea insertar una serie ordenada de tres bloques de cdigo despus de
los bloques de cdigo que abren los juegos de registros, especificara un peso de 60, 65 y 70 para
los bloques primero, segundo y tercero, respectivamente.
De forma predeterminada, Dreamweaver asigna un peso de 50 a todos los bloques de cdigo de
apertura de juegos de registros que se insertan por encima de la etiqueta <html>. Si dos o ms
bloques coinciden en peso, Dreamweaver establece un orden aleatorio.
Temas relacionados
Bloques de cdigo en la pgina 612
Opciones de Insertar
cdigo
Opciones de Posicin relativa
Por encima de la etiqueta
<html>
Al comienzo del archivo
Inmediatamente delante de los juegos de registros
Inmediatamente despus de los juegos de registros
Inmediatamente encima de la etiqueta <html>
Posicin personalizada
Por debajo de la etiqueta
</html>
Delante del final del archivo
Delante del cierre del juego de registros
Tras el cierre del juego de registros
Tras la etiqueta </html>
Posicin personalizada
Relativo a una etiqueta
especfica
Seleccione una etiqueta del men emergente Etiqueta y, a
continuacin, marque una de las opciones de posicin de etiquetas.
Relativo a la seleccin Delante de la seleccin
Tras la seleccin
Reemplazar la seleccin
Ajustar seleccin
Parmetros en comportamientos de servidor
Puede incluir parmetros en el cdigo de un comportamiento de servidor y dejar que el diseador
de la pgina suministre los valores de parmetros necesarios antes de insertar el cdigo del
comportamiento de servidor en la pgina. Para permitir que el diseador de la pgina proporcione
valores para los parmetros, introduzca marcadores de parmetros en el cdigo como se indica a
continuacin:
@@parameterName@@
El siguiente ejemplo de comportamiento de servidor ASP contiene el parmetro formParam, que
exige a la persona que inserta el comportamiento que proporcione el nombre de un objeto de
formulario:
<% Session(lang_pref) = Request.Form(formParam); %>
Para crear un parmetro que permita al usuario proporcionar el valor necesario:
1 Escriba la cadena formParam entre marcadores de parmetro:
<% Session(lang_pref) = Request.Form(@@formParam@@); %>
2 Cree un cuadro de dilogo que solicite al diseador el nombre del objeto de formulario. Para
ms informacin, consulte Creacin de un cuadro de dilogo para un comportamiento de
servidor personalizado en la pgina 626.
Cmo hacer que los bloques de cdigo sean condicionales
Dreamweaver le permite desarrollar bloques de cdigo con declaraciones de control para que se
ejecuten de manera condicional. El Creador de comportamientos de servidor utiliza las
declaraciones if, elseif y else y puede incluir tambin parmetros de comportamiento de
servidor. Esto le permite insertar bloques de texto alternativo en funcin de los valores de las
relaciones OR entre los parmetros de comportamiento de servidor. Las declaraciones if, elseif
y else aparecen como se indica a continuacin. Los corchetes ([ ]) indican cdigo opcional,
mientras que el asterisco (*) indica cero o ms instancias.
<@ if (expression1) @>
conditional text1
[<@ elseif (expression2) @>
conditional text2]*
[<@ else @>
conditional text3]
<@ endif @>
Las expresiones de condicin pueden ser cualquier expresin de condicin JavaScript que pueda
evaluarse utilizando la funcin JavaScript eval() y puede incluir un parmetro de
comportamiento de servidor marcado mediante @@. (Los smbolos @@ son necesarios para
distinguir el parmetro de las variables y palabras clave de JavaScript.)
Puede anidar tantas condiciones o directivas loop (bucle) (vase Repeticin de bloques de
cdigo en la pgina 616) como desee dentro de una directiva condicional. Por ejemplo, puede
especificar que si una expresin es verdadera, se ejecute un bucle.
Nota: se omitirn las lneas nuevas situadas despus de cada @>.
Temas relacionados
Bloques de cdigo en la pgina 612
Utilizacin eficaz de expresiones condicionales
Cuando se utilizan las directivas if, else y elseif dentro de la etiqueta XML insertText, el
texto en cuestin se preprocesa para resolver las directivas if y determinar qu texto debe incluirse
en el resultado. Las directivas if y elseif toman la expresin como argumento. La expresin de
condicin es idntica a las expresiones de condicin JavaScript y puede contener tambin
parmetros de comportamiento de servidor. Directivas como sta le permiten elegir entre bloques
de cdigo alternativos en funcin de los valores o las relaciones existentes entre los parmetros del
comportamiento de servidor.
Por ejemplo, el cdigo JSP que se muestra debajo procede de un comportamiento de servidor de
Dreamweaver MX que utiliza el bloque de cdigo condicional:
@@rsName@@.close();
<conditional_code>
@@rsName@@_hasData = @@rsName@@.next();
Si el comportamiento de servidor utiliza un juego de registros normal, el marcador de posicin
<conditional_code> se reemplazar por:
@@rsName@@ = Statement@@rsName@@.executeQuery();
Si el comportamiento de servidor utiliza un juego de registros de un objeto ejecutable, utilizar el
siguiente cdigo en su lugar.
@@callableName@@.execute();
@@rsName@@ = @@callableName@@.getResultSet();
Si el comportamiento de servidor se aade para un objeto ejecutable, el usuario tendra que
introducir un valor para el parmetro @@callableName@@ en el cuadro de dilogo Parmetro del
comportamiento de servidor. En caso contrario, el parmetro @@callableName@@ estara vaco. Por
consiguiente, puede reescribir el texto insertado anterior utilizando @@callableName@@ como
argumento if. En este ejemplo, si el parmetro @@callableName@@ se proporciona con un valor, se
selecciona el primer bloque de cdigo condicional (que contiene el mtodo getResultSet()):
@@rsName@@.close();
<@ if (@@callableName@@ != '') @>
@@callableName@@.execute();
@@rsName@@ = @@callableName@@.getResultSet();@ else @>
@@rsName@@ = Statement@@rsName@@.executeQuery();
<@ endif @>
@@rsName@@_hasData = @@rsName@@.next();
Repeticin de bloques de cdigo
Al crear comportamientos de servidor, puede utilizar construcciones en bucle para repetir un
bloque de cdigo un nmero determinado de veces. La sintaxis del bucle (loop) es la siguiente:
<@ loop (@@param1@@,@@param2@@,@@param3@@,@@param_n@@) @>
code block
<@ endloop @>
La directiva de bucle (loop) acepta como argumentos una lista de matrices de parmetros
separadas por comas. En este caso, los argumentos de matrices de parmetros permiten al usuario
proporcionar mltiples valores para un nico parmetro. El texto que debe repetirse se duplicar n
veces, siendo n la longitud de los argumentos de matrices de parmetros. Si se especifica ms de
un argumento de matrices de parmetros, todas las matrices debern tener la misma longitud. En
la evaluacin nmero i del bucle, los elementos nmero i de las matrices de parmetros
reemplazarn a las instancias de los parmetros asociados en el bloque de cdigo. Para ms
informacin, consulte Utilizacin de las variables _length e _index de la directiva loop en
la pgina 618.
Al crear posteriormente un cuadro de dilogo para el comportamiento de servidor (vase
Creacin de un cuadro de dilogo para un comportamiento de servidor personalizado en
la pgina 626), podr aadir un control al cuadro de dilogo que permita al diseador de la
pgina crear matrices de parmetros. Dreamweaver incluye un control de matrices sencillo que
puede utilizar para crear cuadros de dilogo. Este control, denominado Lista de campo de texto
separada por comas, est disponible a travs del Creador de comportamientos de servidor. Para
crear elementos de interfaz de usuario ms complejos, vase la documentacin de la API para crear
un cuadro de dilogo con un control que permita crear matrices (un control de cuadrcula, por
ejemplo).
Las directivas loop no se pueden anidar, aunque las directivas condicionales (vase Colocacin de
bloques de cdigo en la pgina 625) s pueden anidarse en una directiva loop.
El siguiente ejemplo muestra cmo pueden utilizarse estos bloques de cdigo repetidos para crear
comportamientos de servidor (el ejemplo es un comportamiento de ColdFusion que permite
obtener acceso a un comportamiento almacenado):
<CFSTOREDPROC procedure="AddNewBook"
datasource=#MM_connection_DSN#
username=#MM_connection_USERNAME#
password=#MM_connection_PASSWORD#>
<CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryID#"
cfsqltype="CF_SQL_INTEGER">
<CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#"
cfsqltype="CF_SQL_VARCHAR">
</CFSTOREDPROC>
En este ejemplo, la etiqueta CFSTOREDPROC puede incluir cero o ms etiquetas CFPROCPARAM. No
obstante, sin soporte para la directiva loop, no existe forma alguna de incluir las etiquetas
CFPROCPARAM dentro de la etiqueta CFSTOREDPROC insertada. Si se creara este comportamiento de
servidor sin utilizar la directiva loop, tendra que dividir este ejemplo en dos participantes: una
etiqueta CFSTOREDPROC principal y una etiqueta CFPROCPARAM cuyo tipo participante es mltiple.
Empleando la directiva loop, puede escribirse el mismo procedimiento de la siguiente forma:
<CFSTOREDPROC procedure="@@procedure@@"
datasource=#MM_@@conn@@_DSN#
username=#MM_@@conn@@_USERNAME#
password=#MM_@@conn@@_PASSWORD#>
<@ loop (@@paramName@@,@@value@@,@@type@@) @>
<CFPROCPARAM type="IN"
dbvarname="@@paramName@@"
value="@@value@@"
cfsqltype="@@type@@">
<@ endloop @>
</CFSTOREDPROC>
En el ejemplo anterior, y tambin en el caso de bloques de cdigo condicionales, se omiten las
nuevas lneas situadas despus de @>.
Si el usuario introdujera los siguientes valores de parmetros en el cuadro de dilogo Creador de
comportamientos de servidor:
procedure = "proc1"
conn = "connection1"
paramName = ["@CategoryId", "@Year", "@ISBN"]
value = ["#Form.CategoryId#", "#Form.Year#", "#Form.ISBN#"]
type = ["CF_SQL_INTEGER", "CF_SQL_INTEGER", "CF_SQL_VARCHAR"]
El comportamiento de servidor insertara en la pgina el siguiente cdigo de tiempo de ejecucin:
<CFSTOREDPROC procedure="proc1"
datasource=#MM_connection1_DSN#
username=#MM_connection1_USERNAME#
password=#MM_connection1_PASSWORD#>
<CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryId#"
<CFPROCPARAM type="IN" dbvarname="@Year" value="#Form.Year#"
<CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#"
cfsqltype="CF_SQL_VARCHAR">
</CFSTOREDPROC>
Nota: las matrices de parmetros no pueden utilizarse fuera de un bucle si no son parte de una
expresin de directiva condicional.
Utilizacin de las variables _length e _index de la directiva loop
La directiva loop incluye dos variables incorporadas que puede utilizar para condiciones if
incrustadas. Dichas variables son: _length y _index. La variable _length se evala con respecto
a la longitud de las matrices procesadas por la directiva loop, mientras que la variable _index se
evala con respecto al ndice actual de la directiva 'loop'. Para asegurarse de que las variables slo
se reconozcan como directivas y no como parmetros que deben pasarse al bucle, no ponga
ninguna de estas variables entre @@.
Un ejemplo de utilizacin de variables incorporadas consiste en aplicarlas al atributo import de la
directiva de pgina. El atributo import exige la separacin de los paquetes mediante comas. Si la
directiva loop engloba todo el atributo import, slo proporcionara como salida el nombre de
atributo import= en la primera ocurrencia del bucle, incluidas las comillas dobles de cierre ("), y
no proporcionara como salida una coma en la ltima ocurrencia del bucle. Empleando la variable
incorporada, puede expresarlo de la siguiente forma:
<@loop (@@Import@@)@>
<@ if(_index == 0)@>import="
<@endif@>@@Import@@<@if (_index == _length-1)@>"<@else@>,
<@ endif @>
<@ endloop @>
Reglas de codificacin
En general, el cdigo de los comportamientos del servidor debe ser compacto y robusto. Los
desarrolladores de aplicaciones Web son muy sensibles al cdigo aadido a sus pginas. Aplique
prcticas de codificacin generalmente aceptadas para el lenguaje de los tipos de documento
(ColdFusion, ASP.NET, JavaScript, VBScript, PHP, Visual Basic o Java). Al escribir comentarios,
tenga en cuenta las diferencias en cuanto a conocimientos tcnicos de las personas que tienen que
comprender el cdigo, como son diseadores Web y de interaccin u otros desarrolladores de
aplicaciones Web. Incluya comentarios que describan con precisin la finalidad del cdigo y
cualquier instruccin especial para su inclusin en una pgina.
El texto siguiente es una lista de reglas de codificacin que deben tenerse en cuenta al crear
La comprobacin de errores es un requisito importante. El cdigo del comportamiento de
servidor debe gestionar los casos de error de forma correcta. Intente prever cualquier posibilidad:
Por ejemplo, qu ocurre si falla la peticin de un parmetro? Qu ocurre si una consulta no
devuelve ningn registro?
Los nombres exclusivos le ayudan a asegurarse de que su cdigo es claramente identificable y
evita conflictos de cdigo con el cdigo ya existente. Si la pgina contiene, por ejemplo, una
funcin llamada hideLayer() y una variable global llamada ERROR_STRING y el comportamiento
del servidor inserta cdigo que tambin usa esos nombres, el comportamiento de servidor puede
originar un conflicto con el cdigo existente.
Los prefijos de cdigo le permiten identificar sus propias funciones de tiempo de ejecucin y
variables globales en una pgina. Una posible convencin consiste en usar sus iniciales. No utilice
nunca el prefijo MM_, ya que est reservado para uso exclusivo de Macromedia. En el cdigo de
Macromedia, todas las funciones y variables globales van precedidas por el prefijo MM_ para evitar
que se produzcan conflictos con el cdigo que escriba.
var MM_ERROR_STRING = "...";
function MM_hideLayer() {
Evite bloques de cdigo similares para que el cdigo que escriba no se parezca demasiado al
cdigo de otros bloques. Si un bloque de cdigo se parece demasiado a otro bloque de cdigo de
la pgina, el panel Comportamientos del servidor podra identificar errneamente el primer
bloque de cdigos como una instancia del segundo bloque de cdigos (o al contrario). Una
solucin simple consiste en aadir un comentario a un bloque de cdigo para hacerlo ms
exclusivo.
Temas relacionados
Comprobacin de comportamientos de servidor
Macromedia Exchange recomienda realizar las siguientes comprobaciones con cada
comportamiento de servidor que se cree:
Aplique el comportamiento desde el panel Comportamientos del servidor. Si tiene un cuadro
de dilogo, introduzca datos vlidos en cada campo y presione Aceptar. Verifique que no se
produce ningn error al aplicar el comportamiento. Verifique que el cdigo de tiempo de
ejecucin del comportamiento de servidor aparece en el inspector de cdigo.
Vuelva a aplicar el comportamiento de servidor e introduzca datos no vlidos en cada campo
del cuadro de dilogo. Pruebe a dejar el campo en blanco usando nmeros muy grandes o
negativos, usando caracteres no vlidos (como /, ?, :, *, etc.), y usando letras en campos
numricos. Puede escribir rutinas de validacin de formularios para gestionar datos no vlidos
(las rutinas de validacin implican codificacin manual, lo que queda fuera del alcance y el
propsito de este libro).
Una vez aplicado satisfactoriamente el comportamiento de servidor a la pgina, verifique lo
siguiente:
Compruebe el panel Comportamientos del servidor para asegurarse de que el nombre del
comportamiento de servidor aparece en la lista de comportamientos aadidos a la pgina.
Si corresponde, verifique que los iconos de scripts del lado del servidor se muestran en la
pgina. Los iconos genricos de los scripts del lado del servidor son escudos de oro. Para ver los
iconos, active Elementos invisibles (Ver > Ayudas visuales > Elementos invisibles).
En la vista Cdigo (Ver > Cdigo) compruebe que no se genera cdigo no vlido.
Adems, si su comportamiento de servidor inserta cdigo en el documento estableciendo una
conexin con una base de datos, cree una base de datos de prueba para comprobar el cdigo
insertado en el documento. Verifique la conexin definiendo consultas que den lugar a diferentes
conjuntos de datos, y diferentes tamaos de conjuntos de datos.
Por ltimo, cargue la pgina en el servidor y brala en un navegador. Vea el cdigo HTML de la
pgina y verifique que los scripts del lado del servidor no hayan generado cdigo HTML no
vlido.
Instalacin de comportamientos de servidor de terceros
Puede descargar e instalar comportamientos de servidor creados por desarrolladores
independientes del sitio Web de Macromedia Exchange.
Para obtener acceso a Macromedia Exchange:
1 En Dreamweaver seleccione Ayuda > Dreamweaver Exchange.
Se abrir una ventana del navegador con la pgina Web de Macromedia Exchange para
Dreamweaver.
2 Conecte con Exchange utilizando su ID de Macromedia o, si an no ha creado su ID de
Macromedia Exchange, siga las instrucciones para abrir una cuenta en Macromedia.
Nota: tambin puede acceder a Macromedia Exchange desde el panel Comportamientos del
servidor (Ventana > Comportamientos); para ello, haga clic en el botn de signo ms (+) y seleccione
Obtener ms comportamientos de servidor.
Utilizacin del Creador de comportamientos de servidor 621
Para instalar un comportamiento de servidor u otra extensin en Dreamweaver:
1 Inicie Extension Manager seleccionando Comandos > Administrar extensiones.
2 Seleccione Archivo > Instalar extensin en Extension Manager.
Para ms informacin, consulte la ayuda en lnea de Extension Manager.
Temas relacionados
Utilizacin del Creador de comportamientos de servidor
El Creador de comportamientos de servidor permite aadir el bloque o los bloques de cdigo que
el comportamiento insertar en una pgina.
Para escribir bloques de cdigo de comportamiento de servidor:
clic en el botn de signo ms (+) y seleccione Nuevo comportamiento de servidor en el men
emergente.
Aparecer el cuadro de dilogo Nuevo comportamiento de servidor.
2 En el men emergente Tipo de documento, seleccione el tipo de documento para el que est
desarrollando el comportamiento de servidor.
3 En el cuadro de texto Nombre, introduzca un nombre para el comportamiento de servidor.
4 Si desea copiar un comportamiento de servidor existente para aadirlo al comportamiento que
est creando, seleccione la casilla de verificacin Copiar comportamiento de servidor existente.
Cuando esta casilla de verificacin est seleccionada, aparece una lista de comportamientos de
servidor disponibles en el men emergente Comportamiento a copiar.
Aparecer el cuadro de dilogo Creador de comportamientos de servidor.
6 Para aadir un nuevo bloque de cdigo, haga clic en el botn de signo ms (+).
Aparecer el cuadro de dilogo Crear un nuevo bloque de cdigo.
Utilizacin del Creador de comportamientos de servidor 623
7 Introduzca un nombre para el bloque de cdigo que desea crear y haga clic en Aceptar.
El nombre introducido en el cuadro de dilogo aparece en el Creador de comportamientos de
servidor, con las etiquetas de scripts correctas visibles en el cuadro de texto Bloque de cdigo.
8 En el cuadro de texto Bloque de cdigo, introduzca el cdigo necesario para implementar el
Al introducir cdigo en el cuadro de texto Bloque de cdigo:
Puede insertar slo una etiqueta o un bloque de cdigo para cada bloque de cdigo con
nombre (por ejemplo, mi_bloque_de_comportamiento1,
mi_bloque_de_comportamiento2, mi_bloque_de_comportamienton, etc.). Si tiene que
introducir varios bloques de cdigo o etiquetas, deber crear un bloque de cdigo para cada
uno de ellos con el Creador de comportamientos de servidor.
Para incluir parmetros de tiempo de ejecucin en un bloque de cdigo:
a Site el punto de insercin en el bloque de cdigo en el que desee insertar los parmetros.
b Haga clic en Insertar parmetros, en el botn Bloque de cdigo.
Aparecer el cuadro de dilogo Insertar parmetro en bloque de cdigo.
c Escriba un nombre para el parmetro en el cuadro de texto Nombre del parmetro.
d Haga clic en Aceptar.
El nombre del parmetro se inserta en el bloque de cdigo.
Repita los pasos del 6 al 8 para cada bloque de cdigo nuevo que desee crear.
9 Introduzca un nombre para los parmetros en el men emergente Nombre del parmetro y haga
clic en Aceptar.
El parmetro se insertar en el bloque de cdigo en el punto en el que situ el cursor antes de
definir el parmetro.
10 Seleccione una opcin del men emergente Insertar cdigo especificando la ubicacin en la que
deben incrustarse los bloques de cdigo.
Para ms informacin, consulte Colocacin de bloques de cdigo en la pgina 625.
11 Puede especificar informacin adicional sobre el comportamiento de servidor que est creando
mediante el panel Opciones avanzadas.
12 Haga clic en el botn Avanzado para ver las opciones avanzadas.
13 Si necesita crear mas bloques de cdigo, repita los pasos 7 a 13.
14 Si el comportamiento de servidor requiere que se le proporcionen parmetros, deber crear un
cuadro de dilogo que acepte los parmetros introducidos por la persona que aplique el
comportamiento.
Para crear un cuadro de dilogo que acepte los parmetros introducidos por el usuario, vase
Creacin de un cuadro de dilogo para un comportamiento de servidor personalizado en
la pgina 626.
15 Despus de realizar los pasos anteriores que sean necesarios para el comportamiento de servidor
que est creando, haga clic en Aceptar.
Una vez que haya creado un comportamiento de servidor, ste aparecer en la lista del panel
Comportamientos del servidor. Compruebe el comportamiento de servidor y asegrese de que
funciona correctamente.
Temas relacionados
Repeticin de bloques de cdigo en la pgina 616
Reglas de codificacin en la pgina 619
Utilizacin de parmetros en comportamientos de servidor
Puede incluir parmetros en el cdigo de un comportamiento de servidor (consulte Parmetros
en comportamientos de servidor en la pgina 615 para ms informacin) y dejar que el
diseador de la pgina suministre los valores de parmetros necesarios antes de insertar el cdigo
del comportamiento de servidor en la pgina. Para permitir que el diseador de la pgina
proporcione valores para los parmetros, introduzca marcadores de parmetros en el cdigo como
se indica a continuacin:
@@parameterName@@
El siguiente ejemplo de comportamiento de servidor ASP contiene el parmetro formParam, que
exige a la persona que inserta el comportamiento que proporcione el nombre de un objeto de
formulario:
<% Session(lang_pref) = Request.Form(formParam); %>
Colocacin de bloques de cdigo 625
Para crear un parmetro que permita al usuario proporcionar el valor necesario:
1 Escriba la cadena formParam entre marcadores de parmetro:
<% Session(lang_pref) = Request.Form(@@formParam@@); %>
2 Cree un cuadro de dilogo que solicite al diseador el nombre del objeto de formulario.
Para ms informacin, consulte Creacin de un cuadro de dilogo para un comportamiento
de servidor personalizado en la pgina 626.
Colocacin de bloques de cdigo
Al crear bloques de cdigo utilizando el Creador de comportamientos de servidor (consulte
Utilizacin del Creador de comportamientos de servidor para ms informacin), debe
especificar en qu parte del cdigo HTML de la pgina desea insertarlos. Los mens emergentes
Insertar cdigo y Posicin relativa permiten seleccionar dnde insertar el bloque de cdigo en el
documento y, a continuacin, especificar una posicin relativa a otra etiqueta de la pgina.
Para obtener ms informacin sobre las opciones de posicin del bloque de cdigo y cmo afectan
stas al comportamiento de servidor personalizado, vase Posicin de los bloques de cdigo
dentro de las pginas Web en la pgina 613.
Para situar un bloque de cdigo (instrucciones generales):
1 Utilice el Creador de comportamientos de servidor para escribir un bloque de cdigo segn la
seccin Utilizacin del Creador de comportamientos de servidor en la pgina 621.
2 En el cuadro de dilogo Creador de comportamientos de servidor, seleccione una posicin en la
que desee insertar el bloque de cdigo del men emergente Insertar cdigo.
3 En el cuadro de dilogo Creador de comportamientos de servidor, seleccione una posicin
relativa a la seleccionada en el men emergente Insertar cdigo.
4 Si ha completado la creacin del bloque de cdigo, haga clic en Aceptar.
El comportamiento de servidor se muestra en el panel Comportamientos del servidor (Ventana
> Comportamientos del servidor) y puede visualizarse haciendo clic en el botn de signo ms
(+).
5 Compruebe el comportamiento de servidor y asegrese de que funciona correctamente.
Consulte Comprobacin de comportamientos de servidor en la pgina 620 para ms
informacin.
Para situar un bloque de cdigo con relacin a otra etiqueta de la pgina:
1 En el men emergente Insertar cdigo, seleccione Relativo a una etiqueta especfica.
2 En el cuadro de texto Etiqueta, introduzca la etiqueta o seleccinela en el men emergente.
Si introduce una etiqueta, omita los signos (< >).
3 Especifique una ubicacin relativa a la etiqueta eligiendo una opcin del men emergente
Posicin relativa.
Puede insertar el bloque de cdigo justo antes o justo despus de las etiquetas inicial o de cierre.
Tambin puede reemplazar la etiqueta con el cdigo, insertar el cdigo como valor de un
atributo de la etiqueta (aparecer un cuadro para que pueda seleccionar el atributo) o insertar el
cdigo dentro de la etiqueta inicial.
Para situar un bloque de cdigo con relacin a una etiqueta seleccionada por el diseador
de la pgina:
1 En el men emergente Insertar cdigo, seleccione Relativo a la seleccin.
2 Especifique una ubicacin relativa a la seleccin eligiendo una opcin del men emergente
Posicin relativa.
Puede insertar el bloque de cdigo justo antes o justo despus de la seleccin. Tambin puede
reemplazar la seleccin con el bloque de cdigo o situar el bloque de cdigo alrededor de la
seleccin.
Si desea situar el bloque de cdigo alrededor de la seleccin, sta deber constar de una etiqueta
inicial y otra de cierre sin nada entre ellas, como se muestra a continuacin:
<CFIF Day=Monday></CFIF>
La parte de la etiqueta de apertura del bloque de cdigo se inserta antes de la etiqueta inicial de
la seleccin y la parte de cierre del bloque, despus de la etiqueta de cierre de la seleccin.
Temas relacionados
Posicin de los bloques de cdigo dentro de las pginas Web en la pgina 613
Utilizacin del Creador de comportamientos de servidor en la pgina 621
Creacin de un cuadro de dilogo para un comportamiento de
servidor personalizado
Los comportamientos de servidor exigen con frecuencia que el diseador de la pgina proporcione
un valor para un parmetro. Dicho valor debe insertarse antes de insertar el cdigo del
comportamiento de servidor en la pgina. Para ello, puede crear un cuadro de dilogo que solicite
un valor para un parmetro a la persona que va a implementar el comportamiento de servidor.
Deber crear el cuadro de dilogo definiendo en el cdigo los parmetros proporcionados por el
diseador. Una vez definidos todos los parmetros, podr generar un cuadro de dilogo para el
Nota: si especifica que el cdigo debe insertarse con relacin a una etiqueta seleccionada por el
diseador de la pgina (opcin Relativo a una etiqueta especfica del men emergente Insertar
cdigo), se aadir automticamente un parmetro al bloque de cdigo. Este parmetro aade un
men de etiquetas al cuadro de dilogo del comportamiento para que el diseador pueda seleccionar
una etiqueta.
Para crear un parmetro en el cdigo del comportamiento de servidor:
Introduzca un marcador de parmetro en la posicin del cdigo en la que desea insertar el valor
del parmetro proporcionado por el diseador. La sintaxis del parmetro es la siguiente:
@@parameterName@@
Por ejemplo, si el comportamiento de servidor contiene el siguiente bloque de cdigo:
<% Session(lang_pref) = Request.Form(Form_Object_Name); %>
Para permitir que el diseador de la pgina proporcione el valor de Form_Object_Name, encierre
la cadena entre marcadores de parmetro (@@):
<% Session(lang_pref) = Request.Form(@@Form_Object_Name@@); %>
Creacin de un cuadro de dilogo para un comportamiento de servidor personalizado 627
Tambin puede resaltar la cadena y hacer clic en el botn Insertar parmetro en bloque de cdigo.
Introduzca un nombre de parmetro y haga clic en Aceptar. Dreamweaver reemplazar todas las
instancias de la cadena resaltada por el nombre de parmetro especificado entre los marcadores de
parmetro.
Dreamweaver utiliza las cadenas especificadas entre marcadores de parmetros para asignar una
etiqueta a los controles del cuadro de dilogo que genera (vase el siguiente procedimiento). En el
ejemplo anterior, Dreamweaver crea un cuadro de dilogo con la siguiente etiqueta:
Nota: los nombres de parmetros en el cdigo del comportamiento de servidor no pueden incluir
espacios. Por consiguiente, las etiquetas del cuadro de dilogo no pueden contener espacios. Si
desea incluir espacios en la etiqueta, puede editar el archivo HTML generado.
Para crear un cuadro de dilogo para un comportamiento de servidor
1 En el Creador de comportamientos de servidor, haga clic en Siguiente.
Aparecer un cuadro de dilogo con todos los parmetros proporcionados por el diseador
definidos en el cdigo.
2 Opcional: puede cambiar el orden de presentacin de los controles del cuadro de dilogo. Para
ello, seleccione un parmetro y haga clic en los botones de flecha arriba y abajo.
3 Opcional: si lo desea, puede cambiar el control de un parmetro. Para ello, seleccione el
parmetro y elija otro control en la columna Mostrar como.
Dreamweaver genera un cuadro de dilogo con un control con descripcin por cada parmetro
proporcionado por el diseador que haya definido.
Para ver el cuadro de dilogo:
Haga clic en el botn del signo ms (+) del panel Comportamientos del servidor (Ventana >
Comportamientos del servidor) y seleccione el comportamiento del servidor en el men
emergente.
Para editar el cuadro de dilogo de un comportamiento de servidor previamente creado:
clic en el botn de signo ms (+) y seleccione Editar comportamientos de servidor en el men
emergente.
2 Seleccione el comportamiento de servidor en la lista y haga clic en Abrir.
Se abrir el Creador de comportamientos de servidor con el comportamiento seleccionado.
3 Haga clic en Siguiente.
Aparecer un cuadro de dilogo con todos los parmetros proporcionados por el diseador
definidos en el cdigo.
4 Opcional: puede cambiar el orden de presentacin de los controles del cuadro de dilogo. Para
ello, seleccione un parmetro y haga clic en los botones de flecha arriba y abajo.
5 Opcional: si lo desea, puede cambiar el control de un parmetro. Para ello, seleccione el
parmetro y elija otro control en la columna Mostrar como.
Edicin y modificacin de comportamientos de servidor
Puede editar cualquier comportamiento de servidor creado con el Creador de comportamientos
de servidor, incluidos los que descargue del sitio Web de Macromedia Exchange y de otros
desarrolladores.
Si aplica un comportamiento de servidor a una pgina y luego lo edita en Dreamweaver, dejarn
de mostrarse en el panel Comportamientos del servidor las instancias del comportamiento
antiguo. El panel Comportamientos del servidor busca en la pgina cdigo que coincida con el
cdigo de comportamientos de servidor conocidos. Si el cdigo de un comportamiento de
servidor que conoce el panel cambia, el panel ya no reconocer las versiones anteriores del
comportamiento en esa pgina.
Si desea que aparezcan en el panel las versiones antiguas y nuevas del comportamiento:
Haga clic en el botn de signo ms (+) del panel Comportamientos del servidor (Ventana >
Comportamientos del servidor), seleccione Nuevo comportamiento de servidor y cree una
copia del comportamiento de servidor antiguo.
Para editar el cdigo de un comportamiento de servidor creado con el Creador de
clic en el botn de signo ms (+) y seleccione Editar comportamientos de servidor en el men
emergente.
Edicin y modificacin de comportamientos de servidor 629
Aparecer el cuadro de dilogo Editar comportamiento de servidor, en el que se mostrarn
todos los comportamientos correspondientes a la actual tecnologa de servidores.
2 Seleccione el comportamiento de servidor y haga clic en Editar.
Aparecer el cuadro de dilogo Creador de comportamientos de servidor.
3 Seleccione el correspondiente bloque de cdigo y modifique el cdigo a insertar en las pginas.
4 Opcional: puede modificar o aadir marcadores de parmetros al cdigo.
Para instrucciones, vase Creacin de un cuadro de dilogo para un comportamiento de
servidor personalizado en la pgina 626.
5 Opcional: si lo desea, cambie el lugar del cdigo HTML de la pgina en el que se debe insertar
el cdigo seleccionando otra opcin en el men emergente Insertar cdigo.
Para instrucciones, vase Colocacin de bloques de cdigo en la pgina 625.
6 Si el cdigo modificado no contiene parmetros proporcionados por el diseador, haga clic en
Aceptar.
Dreamweaver regenerar el comportamiento de servidor sin ningn cuadro de dilogo. El
nuevo comportamiento de servidor aparecer en el men emergente de signo ms (+) del panel
Comportamientos del servidor.
7 Si el cdigo modificado contiene parmetros proporcionados por el diseador, haga clic en
Siguiente.
Dreamweaver le preguntar si desea crear un nuevo cuadro de dilogo que sobrescriba al
antiguo. Realice los cambios que desee y haga clic en Aceptar.
Dreamweaver guardar todos los cambios en el archivo EDML del comportamiento de servidor.
631
CAPTULO 39
Creacin de formularios
Puede utilizar Macromedia Dreamweaver MX 2004 para crear formularios con campos de texto,
campos de contrasea, botones de opcin, casillas de verificacin, mens emergentes, botones en
los que es posible hacer clic y otros objetos de formulario. Con Dreamweaver tambin se puede
escribir cdigo que valide la informacin proporcionada por un visitante. Por ejemplo, se puede
comprobar que una direccin de correo electrnico especificada por un usuario contenga un
smbolo @ o que un campo de texto obligatorio contenga un valor.
Formularios
Los formularios permiten obtener informacin de los visitantes del sitio Web. Los visitantes
introducen informacin utilizando objetos de formulario como campos de texto, cuadros de lista,
casillas de verificacin y botones de opcin y, a continuacin, hacen clic en un botn para
enviarla.
632 Captulo 39: Creacin de formularios
Funcin de los formularios del lado del cliente
Los formularios son una ayuda en el lado del cliente de la relacin cliente-servidor. Cuando un
visitante introduce informacin en un formulario visualizado en un navegador Web (el cliente) y
hace clic en el botn de envo, la informacin se transfiere al servidor donde ser procesada por
una aplicacin o un script del lado del servidor. Entre las tecnologas del lado del servidor
habitualmente utilizadas para tratar datos de formularios se incluyen las de Macromedia
ColdFusion, Microsoft Active Server Pages (ASP) y PHP. El servidor responde devolviendo la
informacin solicitada al usuario (o cliente) o bien realizando alguna accin basada en el
contenido del formulario.
Nota: tambin puede enviar datos de formulario directamente a un destinatario de correo
electrnico.
Objetos de formulario
En Dreamweaver, los tipos de entrada de los formularios se denominan objetos de formulario. Los
objetos de formulario son mecanismos que permiten a los usuarios introducir datos. Puede aadir
a un formulario los siguientes objetos de formulario:
El visitante rellena el
formulario y lo enva al
servidor Web para su
procesamiento
CF script
procesa el
formulario
Se crea un documento HTML
y se enva al visitante
<HTML>

</ HTML>
1
2
3
Formularios 633
Los campos de texto aceptan cualquier valor alfanumrico. El texto se puede visualizar como una
sola lnea, como varias lneas y como un campo de contrasea en el que el texto introducido se
sustituye por asteriscos o vietas para ocultar el texto a otras personas que puedan estar
mirndolo.
Nota: las contraseas y el resto de datos que se envan a un servidor mediante campos de
contrasea no estn cifrados. Los datos transferidos pueden ser interceptados y ledos como texto
alfanumrico. Por esta razn, debe facilitar siempre el cifrado de los datos que desea que
permanezcan seguros.
Los campos ocultos permiten almacenar informacin introducida por el usuario, como un
nombre, una direccin de correo electrnico o una preferencia de visualizacin, y utilizarlos la
prxima vez que el usuario visite el sitio.
Los Botones realizan acciones cuando se hace clic en ellos. Normalmente estas acciones incluyen
el envo y restablecimiento de formularios. Puede aadir una etiqueta o un nombre personalizado
a un botn, o bien usar una de las etiquetas predefinidas, Enviar o Restablecer.
Las casillas de verificacin admiten mltiples respuestas en un solo grupo de opciones. Un
usuario puede seleccionar tantas acciones como sean necesarias. El ejemplo siguiente muestra tres
casillas de verificacin seleccionadas para ilustrar esto: Surfing, Mountain Biking y Rafting.
Los botones de opcin representan opciones que se excluyen mutuamente. Cuando se selecciona
un botn de un grupo de botones de opcin, se desactivan todos los dems botones del grupo (un
grupo est formado por dos o ms botones que comparten el mismo nombre). En el ejemplo
anterior, Rafting es la opcin seleccionada en este momento. Si el usuario hace clic en Surfing, el
botn Rafting se deselecciona automticamente.
Lista/men muestra valores de opciones en una lista de desplazamiento que permite a los
usuarios seleccionar varias opciones. La opcin Men muestra los valores de las opciones en un
men que permite a los usuarios seleccionar una sola opcin.
Nota: un men emergente de un formulario HTML no es igual que un men emergente grfico. Para
informacin sobre cmo crear, editar, mostrar y ocultar un men emergente grfico, vase Mostrar
men emergente en la pgina 403.
Los mens de salto son listas de navegacin o mens emergentes que permiten insertar un men
en el que cada opcin se vincula a un documento o archivo.
Los campos de archivo permiten al usuario examinar los archivos de su ordenador y cargarlos
como datos de un formulario.
Los campos de imagen permiten insertar una imagen en un formulario. Los campos de imagen
se pueden utilizar para crear botones grficos, como Enviar o Restablecer.
Temas relacionados
Creacin de formularios HTML en la pgina 635
Insercin de objetos de formulario HTML en la pgina 637
Objetos de formularios dinmicos
Un objeto de formulario dinmico es aquel cuyo estado inicial determina el servidor cuando se
solicita la pgina, no aquel cuyo estado especifica el diseador durante el diseo. Por ejemplo,
cuando un usuario solicita una pgina PHP que contiene un formulario con una lista o un men,
un script PHP en la pgina puede rellenar de forma automtica el men con los valores
almacenados en una base de datos. A continuacin, el servidor enva la pgina completada al
navegador del usuario.
Convertir en dinmicos los objetos de formulario puede simplificar el mantenimiento del sitio.
Por ejemplo, muchos sitios utilizan mens para presentar a los usuarios un conjunto de opciones.
Si el men es dinmico, se pueden aadir, eliminar o modificar elementos de men en un solo
lugar (la tabla de base de datos en la que se almacenan los elementos) para actualizar todas las
instancias del mismo men en el sitio Web.
Creacin de formularios HTML 635
Un men no es el nico tipo de objeto de formulario dinmico. Tambin puede crear y utilizar
botones de opcin, casillas de verificacin, campos de texto y campos de imagen dinmicos.
Temas relacionados
Insercin de objetos de formulario HTML en la pgina 637
Insercin de objetos de formulario HTML dinmicos en la pgina 641
Creacin de formularios HTML
En esta seccin se describe cmo crear formularios HTML en Dreamweaver.
Tambin se puede utilizar Dreamweaver para crear formularios Web ASP.NET. Para ms
informacin, consulte Creacin de formularios ASP.NET en la pgina 647.
Para crear un formulario HTML:
1 Abra una pgina y site el punto de insercin donde desee que aparezca el formulario.
2 Seleccione Insertar > Formulario o seleccione la categora Formularios en la barra Insertar y haga
clic en el icono Formulario.
Dreamweaver inserta un formulario vaco. En modo Diseo, los formularios aparecen
indicados mediante un contorno de lnea de puntos de color rojo. Si no ve el contorno,
compruebe que la opcin Ver > Ayudas visuales > Elementos invisibles est seleccionada.
3 Especifique la pgina o el script que procesar los datos del formulario.
En la ventana del documento, haga clic en el contorno del formulario para seleccionarlo. En el
inspector de propiedades (Ventana > Propiedades), escriba la ruta en el cuadro de texto Accin
del inspector de propiedades o haga clic en el icono de la carpeta para desplazarse hasta la
pgina o el script correspondiente.
4 Indique el mtodo que deba utilizar para transmitir los datos del formulario al servidor.
En el inspector de propiedades, seleccione una de las opciones siguientes del men emergente
Mtodo:
Predeterminado utiliza el valor predeterminado del navegador para enviar los datos del
formulario del servidor. Normalmente, el valor predeterminado es el mtodo GET.
GET aade el valor al URL que solicita la pgina.
POST incrusta los datos del formulario en la peticin HTTP.
5 Inserte los objetos de formulario.
Site el punto de insercin en el lugar del formulario en el que desee que aparezca el objeto de
formulario y, a continuacin, seleccione el objeto en el men Insertar > Formulario o en la
categora Formularios de la barra Insertar.
Para ms informacin, consulte Insercin de objetos de formulario HTML en la pgina 637
o Insercin de objetos de formulario HTML dinmicos en la pgina 641.
Si as lo desea, configure las propiedades del objeto de formulario despus de insertarlo en la
pgina. Para ms informacin, seleccione el objeto de formulario y haga clic en el icono Ayuda
del inspector de propiedades.
6 Ajuste el diseo del formulario como lo desee.
Puede utilizar saltos de lnea, saltos de prrafo, texto con formato predeterminado o tablas para
aplicar formato a los formularios. No puede insertar un formulario en otro formulario (es decir,
superponer etiquetas), pero puede incluir varios formularios en una misma pgina.
Cuando disee formularios, asigne textos descriptivos a las etiquetas de los campos para que los
usuarios puedan saber a qu estn contestando. Por ejemplo, utilice la etiqueta Escriba su
nombre para solicitar el nombre del usuario.
Utilice tablas para estructurar los objetos del formulario y las etiquetas de los campos. Cuando
utilice tablas en los formularios, asegrese de que todas las etiquetas table estn situadas entre
las etiquetas form.
Temas relacionados
Cmo adjuntar comportamientos JavaScript a objetos de formulario HTML en
la pgina 645
Cmo adjuntar scripts personalizados a botones de formulario HTML en la pgina 645
Creacin de formularios HTML accesibles en la pgina 646
Insercin de objetos de formulario HTML 637
Insercin de objetos de formulario HTML
Puede utilizar Dreamweaver para insertar rpidamente objetos de formulario HTML en sus
formularios.
Si trabaja en una aplicacin Web ASP.NET, puede utilizar Dreamweaver para insertar
rpidamente controles de formulario ASP.NET. Para ms informacin, consulte Adicin de
controles de formulario ASP.NET a una pgina en la pgina 647.
Puede crear un formulario HTML en blanco (Insertar > Formulario > Formulario) antes de
insertar objetos de formulario en l. Para ms informacin, consulte Creacin de formularios
HTML en la pgina 635. Si no crea un formulario en blanco e intenta insertar un objeto de
formulario, Dreamweaver le preguntar si desea crear uno.
Insercin de campos de texto HTML
Puede crear un campo de texto que conste de una o varias lneas. Tambin puede crear un campo
de texto de contrasea que oculte el texto escrito por el usuario.
Para insertar un campo de texto:
1 Site el punto de insercin en el interior del contorno del formulario.
2 Seleccione Insertar > Formulario > Campo de texto.
Aparece un campo de texto en el documento.
3 En el inspector de propiedades, establezca las propiedades del campo de texto que desee.
4 Para etiquetar el campo de texto en la pgina, haga clic junto al campo de texto y escriba el texto
de la etiqueta.
Temas relacionados
Visualizacin de contenido dinmico en campos de texto HTML en la pgina 643
Objetos de formulario en la pgina 632
Insercin de casillas de verificacin HTML
Utilice las casillas de verificacin HTML cuando desee permitir a los usuarios seleccionar ms de
una opcin de un grupo de opciones.
Nota: utilice los botones de opcin cuando desee que los usuarios slo puedan seleccionar una de
las opciones de un grupo de opciones. Para ms informacin, consulte Insercin de botones de
opcin HTML en la pgina 638.
Para insertar una casilla de verificacin:
2 Seleccione Insertar > Formulario > Casilla de verificacin
Aparecer una casilla de verificacin en el documento.
3 En el inspector de propiedades, establezca las propiedades de la casilla de verificacin que desee.
4 Para etiquetar la casilla de verificacin, haga clic junto a la casilla de verificacin en la pgina y
escriba la etiqueta.
Temas relacionados
Preseleccin dinmica de casillas de verificacin HTML en la pgina 643
Insercin de botones de opcin HTML
Utilice los botones de opcin HTML cuando desee que los usuarios slo puedan seleccionar una
de las opciones de un grupo de opciones. Generalmente, los botones de opcin se utilizan en
grupos. Todos los botones de opcin de un grupo deben tener el mismo nombre.
Nota: utilice las casillas de verificacin cuando desee que los usuarios puedan seleccionar ms de
una opcin. Para ms informacin, consulte Insercin de casillas de verificacin HTML en
la pgina 637.
Para insertar un grupo de botones de opcin:
2 Seleccione Insertar > Formulario > Grupo de opciones.
Aparece el cuadro de dilogo Grupo de opciones.
3 Complete los campos del cuadro de dilogo y haga clic en Aceptar.
Para instrucciones sobre cmo completar el cuadro de dilogo Grupo de opcin, haga clic en el
botn Ayuda de dicho cuadro de dilogo.
Dreamweaver inserta el grupo de botones de opcin en el formulario HTML. Si an no ha
insertado un formulario en la pgina, Dreamweaver lo insertar automticamente. Si lo desea,
puede modificar el diseo del grupo. Tambin puede editar los botones de opcin mediante el
inspector de propiedades o bien directamente en la vista de cdigo.
Para insertar botones de opcin de uno en uno:
2 Inserte un botn de opcin. Para ello, elija Insertar > Formulario > Botn de opcin.
Aparece un botn de opcin en el documento.
3 En el inspector de propiedades, establezca las propiedades del botn de opcin que desee.
4 Para etiquetar el botn de opcin, haga clic junto al botn de opcin en la pgina y escriba la
etiqueta.
Temas relacionados
Preseleccin dinmica de botones de opcin HTML en la pgina 644
Insercin de objetos de formulario HTML 639
Insercin de mens de formulario HTML
Un men de formulario HTML permite a un visitante seleccionar uno o ms elementos de una
lista. Los mens son tiles cuando se dispone de una cantidad de espacio limitada pero se necesita
mostrar muchos elementos. Tambin son tiles cuando se desea controlar los valores devueltos al
servidor. A diferencia de los campos de texto, en los que el usuario puede escribir todo lo que
desea, incluso datos no vlidos, usted establece los valores exactos que debe devolver un men.
En un formulario, puede insertar dos tipos de mens: un men que se despliega cuando el usuario
hace clic en l o un men que muestra una lista de elementos en la que puede desplazarse y
realizar selecciones. Este tipo se denomina men de lista.
Para insertar un men:
2 Seleccione Insertar > Formulario > Lista/men.
Aparecer un men en el documento.
3 En el inspector de propiedades, establezca las propiedades del men como desee.
Temas relacionados
Creacin de un men de formulario HTML dinmico en la pgina 641
Conversin de mens de formulario HTML existentes en dinmicos en la pgina 642
Insercin de botones estndar
Los botones controlan las operaciones de los formularios. Utilice un botn para enviar datos de
formulario al servidor o para restablecer el formulario. Estos botones normalmente tienen las
etiquetas Enviar o Restablecer. Tambin se pueden asignar otras tareas de proceso definidas en un
script. Por ejemplo, el botn puede calcular el coste total de elementos seleccionados, basndose
en los valores asignados.
Para crear un botn:
2 Seleccione Insertar > Formulario > Botn.
Aparece un botn en el formulario.
3 En el inspector de propiedades, establezca las propiedades del botn que desee.
Insercin de botones de imgenes
Puede utilizar imgenes como iconos de botones. El uso de una imagen para llevar a cabo tareas
distintas del envo de datos requiere adjuntar un comportamiento al objeto de formulario.
Para crear un botn de imagen:
1 En el documento, site el punto de insercin en el interior del contorno del formulario.
2 Seleccione Insertar > Formulario > Campo de imagen.
Se abre el cuadro de dilogo Seleccionar origen de imagen.
3 Seleccione la imagen para el botn en el cuadro de dilogo Seleccionar origen de imagen y haga
clic en Aceptar.
Aparece un campo de imagen en el formulario.
4 En el inspector de propiedades, establezca las propiedades del campo de imagen que desee.
Para crear un botn Enviar, escriba Enviar en el campo de texto Campo de imagen del
5 Para aadir un comportamiento JavaScript al botn, seleccione la imagen y, a continuacin,
seleccione el comportamiento del panel Comportamientos (Ventana > Comportamientos).
Para ms informacin, consulte Cmo adjuntar comportamientos JavaScript a objetos de
formulario HTML en la pgina 645 y Cmo adjuntar scripts personalizados a botones de
formulario HTML en la pgina 645.
Temas relacionados
Insercin de botones estndar en la pgina 639
Insercin de campos ocultos
Puede utilizar campos ocultos para almacenar y enviar informacin no introducida por el usuario.
La informacin se oculta al usuario.
Para crear un campo oculto:
1 En la vista Diseo, site el punto de insercin en el interior del contorno del formulario.
2 Seleccione Insertar > Formulario > Campo oculto.
Aparecer un marcador en el documento. Si no ve un marcador, seleccione Ver > Ayudas
visuales > Elementos invisibles para verlo.
3 En el cuadro de texto Campo oculto del inspector de propiedades, escriba un nombre exclusivo
para el campo.
4 En el cuadro de texto Valor, escriba el valor que desee asignar al campo.
Insercin de campos de carga de archivos
Puede crear un campo de carga de archivos para que el usuario pueda seleccionar un archivo de su
sistema, como un documento de tratamiento de textos o un archivo grfico, y cargarlo en el
servidor. Un campo de archivo tiene la apariencia de un campo de texto, pero contiene adems un
botn Examinar. El usuario puede introducir manualmente la ruta del archivo que desea cargar o
utilizar el botn Examinar para localizar el archivo y seleccionarlo.
En los campos de archivo, es necesario utilizar el mtodo POST para transmitir los archivos desde
el navegador al servidor. El archivo se enva a la direccin especificada en el cuadro de texto
Accin del formulario.
Nota: pngase en contacto con el administrador del servidor para confirmar si se permite la carga de
archivos annimos, antes de usar el campo de archivo.
Para crear un campo de archivo en un formulario:
1 Inserte un formulario en la pgina (Insertar > Formulario).
2 Seleccione el formulario para visualizar su inspector de propiedades.
3 Defina el mtodo del formulario como POST.
Insercin de objetos de formulario HTML dinmicos 641
4 En el men Enctype, seleccione multipart/form-data.
5 Site el punto de insercin en el interior del contorno del formulario y seleccione Insertar >
Formulario > Campo de archivo.
Se inserta un campo de archivo en el formulario.
6 En el inspector de propiedades, establezca las propiedades del campo de archivo que desee.
Insercin de objetos de formulario HTML dinmicos
Puede insertar objetos de formulario HTML cuyo estado inicial determine el servidor cuando se
solicita la pgina, no aquellos cuyo estado determine el diseador del formulario durante el
diseo.
Temas relacionados
Objetos de formularios dinmicos en la pgina 634
Creacin de formularios ASP.NET en la pgina 647
Creacin de un men de formulario HTML dinmico
Puede llenar un men HTML de formulario o de lista de forma dinmica con las entradas de una
base de datos.
Para la mayora de las pginas, puede utilizar un objeto de men HTML. Para las pginas
ASP.NET, debe utilizar un control DropDownList o ListBox. Para ms informacin, consulte
Creacin de un men ASP.NET dinmico en la pgina 648.
Antes de empezar, debe insertar un formulario HTML en una pgina ColdFusion, PHP, ASP o
JSP y debe definir un juego de registros u otra fuente de contenido dinmico para el men. Para
ms informacin, consulte Definicin de un juego de registros en la pgina 551.
Para insertar un men de formulario HTML dinmico:
1 Haga clic en el interior del formulario HTML de la pgina.
2 Seleccione Insertar > Formulario > Lista/men.
Dreamweaver inserta un objeto Lista/men en la pgina.
3 Seleccione el objeto de formulario Lista/men.
El inspector de propiedades muestra las propiedades de la lista/men.
4 En el inspector de propiedades de lista/men, haga clic en el botn Dinmico para que aparezca
el cuadro de dilogo Lista/men dinmico.
Conversin de mens de formulario HTML existentes en dinmicos
Es posible convertir en dinmico un men HTML de formulario o de lista existente.
En esta seccin se abordan los objetos de formulario HTML. Para ms informacin sobre los
objetos de men ASP.NET como los controles DropDownList o ListBox, consulte Conversin
de un men ASP.NET existente en dinmico en la pgina 648.
Antes de empezar, debe crear el formulario en una pgina ColdFusion, PHP, ASP o JSP y debe
definir un juego de registros u otra fuente de contenido dinmico para el men. Para ms
informacin, consulte Definicin de un juego de registros en la pgina 551.
Para convertir un men de formulario HTML existente en dinmico:
1 En la vista Diseo, seleccione el objeto de formulario de lista/men que desea que sea dinmico.
2 En el inspector de propiedades, haga clic en el botn Dinmico.
Aparecer el cuadro de dilogo Lista/men dinmico.
Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo.
Temas relacionados
Insercin de objetos de formulario HTML dinmicos 643
Visualizacin de contenido dinmico en campos de texto HTML
Puede visualizar contenido dinmico en los campos de texto HTML.
Para las pginas ASP.NET, debe utilizar el control TextBox ASP.NET. Para ms informacin,
consulte Visualizacin de contenido dinmico en un control TextBox ASP.NET en
la pgina 649.
definir un juego de registros u otra fuente de contenido dinmico para el campo de texto. Para
ms informacin, consulte Definicin de un juego de registros en la pgina 551.
Para hacer que los campos de texto HTML sean dinmicos:
1 Seleccione el campo de texto en el formulario HTML de su pgina.
2 En el inspector de propiedades, haga clic en el icono de rayo situado junto al cuadro de texto
Val inicial.
Aparece el cuadro de dilogo Datos dinmicos.
3 Seleccione la columna de juego de registros que proporcione un valor al campo de texto y haga
clic en Aceptar.
Cuando se vea el formulario en un navegador, el campo de texto mostrar el contenido dinmico.
Preseleccin dinmica de casillas de verificacin HTML
Puede permitir al servidor decidir seleccionar una casilla de verificacin cuando el formulario se
muestre en un navegador.
Para las pginas ASP.NET, debe utilizar el control CheckBox ASP.NET. Para ms informacin,
consulte Preseleccin dinmica de controles CheckBox ASP.NET en la pgina 649.
definir un juego de registros u otra fuente de contenido dinmico para las casillas de verificacin.
Para ms informacin, consulte Definicin de un juego de registros en la pgina 551. Lo ideal
es que la fuente del contenido tenga formato booleano, como Yes/No o true/false.
Para preseleccionar de forma dinmica una casilla de verificacin HTML:
1 Seleccione un objeto de formulario de casilla de verificacin en su pgina.
Aparecer el cuadro de dilogo Casilla de verificacin dinmica.
Cuando el formulario se abra en un navegador, la casilla de verificacin aparecer activada o
desactivada, en funcin de los datos.
Preseleccin dinmica de botones de opcin HTML
Puede permitir al servidor decidir si debe seleccionar un botn de opcin HTML cuando el
formulario se muestre en un navegador.
Si desea preseleccionar de forma dinmica objetos de botones de opcin ASP.NET como los
controles RadioButton o RadioButtonList, vase Preseleccin dinmica de un elemento
RadioButtonList ASP.NET en la pgina 650.
Antes de comenzar debe crear el formulario en una pgina ColdFusion, PHP, ASP o JSP e insertar
al menos un grupo de botones de opcin HTML (vase Insercin de botones de opcin HTML
en la pgina 638). Adems, debe definir un juego de registros u otra fuente de contenido
dinmico para los botones de opcin. Para ms informacin, consulte Definicin de un juego de
registros en la pgina 551. Lo ideal es que la fuente del contenido tenga formato booleano, como
Yes/No o true/false.
Para preseleccionar de forma dinmica un botn de opcin HTML:
1 En la vista Diseo, seleccione un botn de opcin del grupo.
Aparecer el cuadro de dilogo Grupo de opciones dinmico.
Validacin de datos de formulario HTML
Dreamweaver puede aadir cdigo JavaScript que comprueba el contenido de los campos de texto
especificados para asegurarse de que el usuario ha introducido el tipo correcto de datos.
Nota: esta caracterstica slo funciona con formularios HTML. Para los formularios ASP.NET, puede
insertar controles de validacin ASP.NET en la vista Cdigo. Para ms informacin, consulte la
documentacin de ASP.NET.
Para validar datos de formulario:
1 Cree un formulario HTML que incluya al menos un campo de texto y un botn Enviar.
Asegrese de que cada uno de los campos de texto que desee validar tenga un nombre
exclusivo.
2 Seleccione el botn Enviar.
3 En el panel Comportamientos (Ventana > Comportamientos), haga clic en el botn ms (+) y
seleccione de la lista el comportamiento Validar formulario.
Cmo adjuntar scripts personalizados a botones de formulario HTML 645
Aparece el cuadro de dilogo Validar formulario.
Nota: el comportamiento Validar formulario slo est disponible si se ha insertado un campo de
texto en el documento.
4 Establezca las reglas de validacin para cada campo de texto y haga clic en Aceptar.
Por ejemplo, puede indicar que un campo de texto para la edad de una persona slo acepte
nmeros. Para ms informacin, consulte Validar formulario en la pgina 408.
Temas relacionados
Captulo 18, Utilizacin de comportamientos JavaScript, en la pgina 381
Cmo adjuntar comportamientos JavaScript a objetos de
formulario HTML
Puede adjuntar comportamientos JavaScript almacenados en Dreamweaver a objetos de
formulario HTML tales como botones.
Nota: esta caracterstica no funciona con los controles de formulario ASP.NET porque estos
controles se procesan en el servidor.
Para adjuntar un comportamiento JavaScript a un objeto de formulario HTML:
1 Seleccione el objeto de formulario HTML.
seleccione de la lista un comportamiento.
Para ms informacin, consulte el Captulo 18, Utilizacin de comportamientos JavaScript,
en la pgina 381.
Cmo adjuntar scripts personalizados a botones de formulario
HTML
Algunos formularios usan cdigo JavaScript o VBScript para llevar a cabo el procesamiento del
formulario u otra accin en el lado del cliente, en lugar de enviar los datos del formulario al
servidor para su procesamiento. Puede utilizar Dreamweaver para configurar un botn de
formulario que ejecute un script en el lado del cliente cuando el usuario haga clic en el botn.
Nota: esta caracterstica no funciona con los formularios ASP.NET.
Para ejecutar un script en el cliente:
1 Seleccione un botn Enviar en un formulario.
seleccione Llamar JavaScript en la lista.
Para ms informacin sobre este comportamiento, consulte Llamar JavaScript en
la pgina 387.
3 En el cuadro de texto Call JavaScript que aparecer, escriba el nombre de la funcin JavaScript
que desee ejecutar cuando el usuario haga clic en el botn y haga clic en Aceptar.
Por ejemplo, puede introducir el nombre de una funcin que an no existe, como
processMyForm().
4 Si su funcin JavaScript no existe en la seccin head del documento, adala ahora.
Por ejemplo, puede definir la funcin JavaScript siguiente en la seccin head del documento
para visualizar un mensaje cuando el usuario haga clic en el botn Enviar.
funcin processMyForm(){
alert('Gracias por su pedido');
}
Creacin de formularios HTML accesibles
Cuando inserta un objeto de formulario HTML y ha seleccionado la opcin Objetos de
formulario en la categora Accesibilidad del cuadro Preferencias, Dreamweaver le solicita que
introduzca informacin con el fin de hacerlo accesible. Tambin puede modificar los atributos de
accesibilidad despus de insertar el objeto.
Para aadir un objeto de formulario accesible:
1 La primera vez que se aaden objetos de formulario accesibles, active el cuadro de dilogo
Accesibilidad para los objetos de formulario (vase Optimizacin del espacio de trabajo para el
diseo de pginas accesibles en la pgina 56).
Este es un paso que se realiza slo una vez.
2 En el documento, site el punto de insercin en el lugar donde desea que aparezca el formulario.
3 Seleccione Insertar > Formulario y, a continuacin, seleccione el objeto de formulario que desea
insertar.
Se abre el cuadro de dilogo Atributos de accesibilidad de la etiqueta de entrada.
Creacin de formularios ASP.NET 647
Nota: si presiona Cancelar, el objeto de formulario aparece en el documento pero Dreamweaver
no le asocia etiquetas o atributos de accesibilidad.
6 Si Dreamweaver le pregunta si desea insertar una etiqueta de formulario, haga clic en S.
El objeto de formulario aparece en el documento.
Para editar los valores de accesibilidad de un objeto de formulario:
1 En la ventana de documento, seleccione el objeto.
Edite los atributos apropiados en la vista Cdigo.
Control y haga clic (Macintosh) y, a continuacin, seleccione Editar etiqueta.
Creacin de formularios ASP.NET
Puede crear formularios ASP.NET en el entorno de diseo de Dreamweaver y, a continuacin,
modificar las propiedades de los controles del formulario sin realizar la codificacin manual de
stos.
Adicin de controles de formulario ASP.NET a una pgina
Puede utilizar el entorno de diseo visual de Dreamweaver para aadir controles de formulario
ASP.NET a la pgina.
Para aadir un control de formulario ASP.NET a su pgina:
1 Abra una pgina ASP.NET en la vista Diseo (Ver > Diseo).
2 Site el punto de insercin donde desee que aparezca el control de formulario dentro de la
pgina.
Los controles de formulario deben insertarse en un formulario que contenga un atributo
runat='server' en su etiqueta. Si su pgina no contiene ningn formulario, Dreamweaver
crea automticamente uno con un atributo runat='server' cuando se inserta el primer
control de formulario ASP.NET. Si su pgina contiene un formulario HTML, Dreamweaver
aade automticamente el atributo runat='server' a la etiqueta de formulario existente
cuando se inserta el primer control de formulario.
3 En la categora ASP.NET de la barra Insertar, seleccione el icono de control de formulario.
4 Complete el cuadro de dilogo del control.
Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Para ms informacin
sobre las propiedades de cada control, consulte la documentacin del sitio Web de Microsoft
en http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpgenref/html/
cpconaspsyntaxforwebcontrols.asp.
Cuando haya terminado, Dreamweaver insertar el control de formulario en su pgina. Si lo
desea, haga clic en el control de la pgina y modifique cualquiera de las propiedades del inspector
de propiedades.
Configuracin de las propiedades de los controles de formulario ASP.NET
Puede modificar las propiedades de los controles de formulario ASP.NET en el entorno de diseo.
Para modificar las propiedades de un control de formulario ASP.NET en el entorno de
diseo:
1 En la vista Diseo, seleccione el control de formulario en la pgina.
El inspector de propiedades muestra las propiedades del control.
2 Modifique las propiedades del control en el inspector de propiedades.
Para ms informacin sobre las propiedades de cada control, consulte la documentacin del
sitio Web de Microsoft en http://msdn.microsoft.com/library/default.asp?url=/library/en-us/
cpgenref/html/cpconaspsyntaxforwebcontrols.asp.
3 Para configurar ms propiedades, haga clic en el botn Editor de etiquetas del Inspector de
propiedades y configure las propiedades en el editor de etiquetas que aparezca.
El editor de etiquetas le permite establecer ms propiedades, incluidos los eventos.
Creacin de un men ASP.NET dinmico
Puede completar de forma dinmica un control de men ASP.NET como DropDownList o
ListBox con entradas de una base de datos.
Antes de empezar debe definir un conjunto de datos u otra fuente de contenido dinmico para el
men. Para ms informacin, consulte Definicin de un juego de registros en la pgina 551.
Para insertar un men dinmico en una pgina ASP.NET:
1 Abra la pgina ASP.NET y site el punto de insercin donde desee que aparezca el men.
2 Seleccione Insertar > Objetos ASP.NET; a continuacin, seleccione asp:DropDownList o
asp:ListBox.
Aparece el cuadro de dilogo del control del formulario.
Dreamweaver inserta el control de formulario en el punto de insercin de su pgina. Si no insert
un formulario, Dreamweaver inserta uno que incluya un atributo runat=server.
Temas relacionados
Configuracin de las propiedades de los controles de formulario ASP.NET en la pgina 648
Conversin de un men ASP.NET existente en dinmico en la pgina 648
Conversin de un men ASP.NET existente en dinmico
Puede convertir un objeto de men ASP.NET existente en dinmico. Entre los objetos de men
ASP.NET se incluyen los controles DropDownList y ListBox.
men. Para ms informacin, consulte Definicin de un juego de registros en la pgina 551.
Creacin de formularios ASP.NET 649
Para convertir una lista desplegable o un cuadro de lista en dinmico:
1 En la vista Diseo, seleccione el objeto de lista desplegable o cuadro de texto que desee convertir
en dinmico.
2 En el inspector de propiedades, haga clic en el botn Elementos de lista.
Aparecer el cuadro de dilogo Elementos de lista.
3 Seleccione la opcin De base de datos y complete el cuadro de dilogo.
Temas relacionados
Creacin de un men ASP.NET dinmico en la pgina 648
Visualizacin de contenido dinmico en un control TextBox ASP.NET
Puede visualizar contenido dinmico en los controles de formulario TextBox ASP.NET.
cuadro de texto. Para ms informacin, consulte Definicin de un juego de registros en
la pgina 551.
Para convertir un cuadro de texto ASP.NET en dinmico:
1 En la vista Diseo, seleccione el cuadro de texto de su pgina.
Texto.
3 Seleccione la columna de juego de registros que proporcione un valor al objeto TextBox y haga
clic en Aceptar.
Cuando se visualice la pgina en un navegador, el control TextBox mostrar el contenido
dinmico.
Temas relacionados
Preseleccin dinmica de controles CheckBox ASP.NET
Puede permitir al servidor decidir si debe seleccionar determinados controles CheckBox cuando se
cargue la pgina ASP.NET en un navegador.
Antes de empezar debe definir un conjunto de datos u otra fuente de contenido dinmico para las
casillas de verificacin. Para ms informacin, consulte Definicin de un juego de registros en
la pgina 551. Lo ideal es que la fuente del contenido tenga formato booleano, como Yes/No o
true/false.
Para preseleccionar de forma dinmica una casilla de verificacin ASP.NET:
1 Seleccione un control de formulario CheckBox en la pgina ASP.NET.
2 En el inspector de propiedades, seleccione la opcin Dinmico.
Aparecer el cuadro de dilogo Casilla de verificacin dinmica.
Cuando la pgina se abra en un navegador, la casilla de verificacin aparecer activada o
desactivada, en funcin de los datos.
Temas relacionados
Preseleccin dinmica de un elemento RadioButtonList ASP.NET
Puede dejar que el servidor decida si se debe seleccionar un botn de opcin en un control
RadioButtonList cuando la pgina se carga en un navegador.
Antes de empezar debe insertar al menos un control RadioButtonList ASP.NET en su pgina.
Adems, debe definir un conjunto de datos u otra fuente de contenido dinmico para los botones
de opcin. Para ms informacin, consulte Definicin de un juego de registros en
la pgina 551. Lo ideal es que la fuente del contenido tenga formato booleano, como Yes/No o
true/false.
Para preseleccionar de forma dinmica un botn de opcin de una lista de botones de
opcin:
1 En la vista Diseo, seleccione el control RadioButtonList.
2 En el Inspector de propiedades, haga clic en Elementos de lista.
Aparecer el cuadro de dilogo Elementos de lista.
3 Seleccione la opcin De base de datos y complete el cuadro de dilogo.
Temas relacionados
PARTE VIII
Desarrollo rpido de aplicaciones
Las aplicaciones Web suelen contener pginas que permiten a los usuarios realizar bsquedas en
bases de datos, pginas donde pueden insertar, actualizar o eliminar datos de una base de datos y
pginas que restringen el acceso a un sitio Web. Con Macromedia Dreamweaver MX podr crear
rpidamente cualquiera de estas pginas.
Captulo 40, Creacin rpida de aplicaciones de ColdFusion, en la pgina 653
Captulo 41, Creacin rpida de aplicaciones ASP.NET, en la pgina 699
Captulo 42, Creacin rpida de aplicaciones ASP y JSP, en la pgina 729
Captulo 43, Creacin rpida de aplicaciones PHP, en la pgina 747
P
A
R
T
E

V
I
I
I
653
CAPTULO 40
Creacin rpida de aplicaciones de ColdFusion
Puede utilizar las herramientas de Macromedia Dreamweaver MX 2004 para crear rpidamente
una aplicacin Web ColdFusion con poca o ninguna codificacin.
Desarrollo rpido de aplicaciones (todos los servidores)
El desarrollo rpido de aplicaciones (RAD) es un proceso de desarrollo de software diseado para
facilitar y acelerar la creacin de aplicaciones. Las herramientas RAD suelen gestionar los detalles
de un proyecto de software de forma muy parecida al modo en que las herramientas de diseo
asistido por ordenador (CAD) cuidan los detalles al dibujar una pared o insertar una ventana en el
plano de un edificio.
Dreamweaver es una herramienta RAD para los diseadores de sitios Web y para los
desarrolladores de aplicaciones Web. Puede utilizar Dreamweaver para crear pginas que inserten,
actualicen o eliminen registros de una base de datos. Dreamweaver gestiona los detalles de la
creacin de pginas, de modo que el desarrollador necesita realizar poca o ninguna codificacin.
(Dreamweaver tambin proporciona un entorno de codificacin con todas las funciones para los
desarrolladores que desean introducir cdigo en todas sus pginas o en algunas de ellas.)
654 Captulo 40: Creacin rpida de aplicaciones de ColdFusion
Pginas maestra-detalle
Una pgina maestra es una pgina en la que se listan los registros y los correspondientes vnculos
de cada registro. Cuando el usuario hace clic en un vnculo, se abre una pgina detalle que
muestra informacin adicional sobre el registro. Por ejemplo, a continuacin se muestra una
pgina maestra de una empresa ficticia:
Desarrollo rpido de aplicaciones (todos los servidores) 655
Cuando un usuario hace clic en uno de los nombres de ubicacin vinculados, se abre una pgina
detalle:
Una pgina de resultados es un ejemplo tpico de pgina maestra. Sin embargo, a diferencia de la
pgina maestra descrita en esta seccin, la lista de registros de una pgina de resultados la
determina, no usted como diseador, sino el usuario. (El usuario determina la lista mediante la
realizacin de una bsqueda en la base de datos.) Para ms informacin sobre este tipo de pgina
maestra, consulte Pginas de bsqueda/resultados en la pgina 655.
Una pgina detalle tambin puede utilizarse para actualizar o eliminar el registro mostrado.
Temas relacionados
Creacin de pginas maestra-detalle (ColdFusion) en la pgina 658
Creacin de pginas maestra-detalle (ASP.NET) en la pgina 699
Creacin de pginas maestra-detalle (ASP y JSP) en la pgina 729
Creacin de pginas maestra-detalle (PHP) en la pgina 747
Pginas de bsqueda/resultados
En la mayora de los casos necesitar al menos dos pginas para aadir esta funcin a la aplicacin
Web. La primera pgina contendr un formulario HTML en el que los usuarios debern
introducir los parmetros de bsqueda. Aunque la pgina realmente no lleva a cabo las bsquedas,
se conoce como la pgina de bsqueda.
La segunda pgina necesaria es la pgina de resultados, que realiza la mayor parte del trabajo. La
pgina de resultados realiza las tareas siguientes:
Lee los parmetros de bsqueda enviados por la pgina de bsqueda.
Conecta con la base de datos y busca registros.
Crea un juego de registros a partir de los registros encontrados.
Muestra el contenido del juego de registros.
Opcionalmente, puede aadir una pgina detalle. Una pgina detalle proporciona a los usuarios
ms informacin sobre un registro concreto de la pgina de resultados.
Si utiliza ASP.NET, puede combinar la pgina de bsqueda y la de resultados en una sola pgina.
Si slo tiene un parmetro de bsqueda, Dreamweaver le permite aadir prestaciones a la
aplicacin Web sin utilizar consultas y variables SQL. Slo tendr que disear las pginas y
completar varios cuadros de dilogo. Si tiene varios parmetros de bsqueda, tendr que escribir
una declaracin SQL y definir mltiples variables para ella.
Dreamweaver inserta la consulta SQL en la pgina. Cuando se ejecuta la pgina en el servidor, se
comprueba cada registro de la tabla de base de datos. Si el campo especificado en un registro
cumple las condiciones de la consulta SQL, el registro se incluir en un juego de registros. La
consulta SQL crea un juego de registros que contiene solamente los resultados de la bsqueda.
Por ejemplo, el personal de ventas puede tener informacin sobre los clientes de un rea concreta
que tienen ingresos superiores a un nivel determinado. En un formulario de una pgina de
bsqueda, el socio comercial introduce un rea geogrfica y un nivel de ingresos mnimo y luego
hace clic en el botn Enviar para enviar los dos valores a un servidor. En el servidor, los valores se
pasan a la declaracin SQL de la pgina de resultados, que crea un juego de registros slo con los
clientes del rea especificada con ingresos superiores al nivel especificado.
Temas relacionados
Creacin de pginas de bsqueda/resultados (ColdFusion, ASP, JSP, PHP) en la pgina 665
Creacin de una pgina de bsqueda en la base de datos (ASP.NET) en la pgina 705
Objetos avanzados de manipulacin de base de datos
Aunque se pueden utilizar comportamientos de servidor para crear pginas que modifiquen bases
de datos, tambin es posible utilizar objetos de manipulacin de base de datos como
procedimientos almacenados, objetos de comando ASP o declaraciones preparadas JSP para crear
las pginas.
Procedimientos almacenados
Un procedimiento almacenado es un elemento de base de datos reutilizable almacenado que
realiza alguna operacin en la base de datos. Un procedimiento almacenado contiene cdigo SQL
que puede, entre otras cosas, insertar, actualizar o eliminar registros. Los procedimientos
almacenados tambin pueden alterar la estructura de la base de datos. Por ejemplo, puede utilizar
un procedimiento almacenado para aadir una columna de tabla o incluir borrar una tabla.
Un procedimiento almacenado tambin puede llamar a otro procedimiento almacenado, as como
aceptar entradas y devolver mltiples valores al procedimiento llamado en forma de parmetros de
salida.
Un procedimiento almacenado es reutilizable en el sentido de que se puede reutilizar una versin
compilada del procedimiento para ejecutar una operacin de base de datos varias veces. Si sabe
que una tarea de base de datos se va a ejecutar muchas veces o que distintas aplicaciones van a
ejecutar la misma tarea, el uso de un procedimiento almacenado para ejecutar dicha tarea puede
agilizar las operaciones de base de datos.
Nota: las bases de datos mySQL y Microsoft Access no admiten procedimientos almacenados.
Desarrollo rpido de aplicaciones (todos los servidores) 657
Temas relacionados
Utilizacin de procedimientos almacenados para modificar bases de datos (ColdFusion) en
la pgina 687
Utilizacin de procedimientos almacenados para modificar bases de datos (ASP.NET) en
la pgina 725
Utilizacin de procedimientos almacenados para modificar bases de datos (ASP y JSP) en
la pgina 741
Objetos de los comandos ASP
Un objeto de comando ASP es un objeto de servidor que realiza alguna operacin en una base de
datos. El objeto puede contener cualquier declaracin SQL vlida, incluida una que devuelva un
juego de registros o que inserte, actualice o elimine registros de una base de datos. Un objeto de
comando puede alterar la estructura de una base de datos si la declaracin SQL aade o elimina
una columna de una tabla. Tambin puede utilizar un objeto de comando para ejecutar un
procedimiento almacenado en una base de datos.
Un objeto de comando es reutilizable en el sentido de que el servidor de aplicaciones puede
reutilizar una versin compilada del objeto para ejecutar el comando varias veces. Para hacer que
el comando sea reutilizable, defina la propiedad Preparado del objeto Comando como true,
como en la siguiente declaracin VBScript:
mycommand.Prepared = true
Si sabe que el comando se va a ejecutar muchas veces, puede utilizar una versin compilada del
objeto para agilizar las operaciones de base de datos.
Nota: no todos los proveedores de base de datos admiten comandos preparados. Si su base de
datos no los admite, es posible que aparezca un error cuando defina esta propiedad como true. Es
posible incluso que ignore la peticin de preparar el comando y defina la propiedad Preparado como
false.
Un objeto de comando se crea mediante scripts en una pgina ASP, pero Dreamweaver permite
crear objetos de comando sin escribir una lnea de cdigo ASP. Para ms informacin, consulte
Utilizacin de comandos ASP para modificar una base de datos en la pgina 743.
Declaraciones preparadas JSP
Una declaracin preparada JSP es un objeto de servidor reutilizable que contiene una declaracin
SQL. Puede colocar cualquier declaracin SQL vlida en una declaracin preparada. Por ejemplo,
una declaracin preparada puede contener una declaracin SQL que devuelva un juego de
registros o que inserte, actualice o elimine registros de una base de datos.
Una declaracin preparada es reutilizable en el sentido de que el servidor de aplicaciones utiliza
una instancia del objeto de declaracin preparada para consultar la base de datos varias veces. A
diferencia del objeto de declaracin JSP, no se crea una nueva instancia del objeto de declaracin
preparada para cada nueva consulta de base de datos. Si sabe que la declaracin se va a ejecutar
muchas veces, puede utilizar una instancia del objeto para agilizar las operaciones de base de datos
y ocupar menos memoria en el servidor.
Un objeto de declaracin preparada se crea mediante un scriptlet Java en una pgina JSP. Sin
embargo, Dreamweaver permite crear declaraciones preparadas sin escribir una sola lnea de
cdigo Java.
Si est interesado en el cdigo, el scriptlet siguiente crea una declaracin preparada:
String myquery = SELECT * FROM EMPLOYEES WHERE DEPARTMENT = ?;
PreparedStatement mystatement = connection.prepareStatement(myquery);
La primera lnea almacena la declaracin SQL en una variable de cadena llamada myquery, con un
signo de interrogacin que acta como marcador de posicin para el valor de la variable SQL. La
segunda lnea crea un objeto de declaracin preparada llamado mystatement.
A continuacin, asigne un valor a la variable SQL de este modo:
mystatement.setString(1, request.getParameter(myURLparam));
El mtodo setString asigna el valor a la variable y toma dos argumentos. El primer argumento
especifica la variable afectada por su posicin (aqu, la primera posicin de la declaracin SQL). El
segundo argumento especifica el valor de la variable. En este ejemplo, el valor lo suministra un
parmetro de URL transferido a la pgina.
Nota: deber utilizar distintos mtodos para asignar valores que no son de cadena a variables SQL.
Por ejemplo, para asignar un entero a la variable, utilizara el mtodo mystatement.setInt().
Por ltimo, genere el juego de registros de este modo:
ResultSet myresults = mystatement.execute();
Para ms informacin sobre cmo crear declaraciones preparadas JSP con herramientas de
desarrollo de aplicaciones rpido (RAD) en Dreamweaver, consulte Utilizacin de declaraciones
preparadas JSP para modificar una base de datos en la pgina 745.
Creacin de pginas maestra-detalle (ColdFusion)
Dreamweaver permite crear juegos de pginas que presentan informacin en dos niveles de
detalle: una pgina maestra que enumera registros y una pgina detalle que muestra ms detalles
acerca de cada registro. En esta seccin se describe cmo generar estos tipos de pginas maestra-
detalle.
Creacin de pginas maestra-detalle en una operacin (ColdFusion, ASP,
JSP, PHP)
Al desarrollar aplicaciones Web, puede crear rpidamente pginas maestra-detalle utilizando el
objeto de aplicacin Juego de pginas Maestro-Detalle. Un objeto de aplicacin permite crear
todo un juego de pginas dinmicas completando slo uno o dos cuadros de dilogo.
El mtodo que se utiliza es idntico para las pginas ColdFusion, ASP, JSP y PHP. Para
informacin sobre cmo crear pginas maestra-detalle, vase Creacin de pginas maestra-detalle
(ASP.NET) en la pgina 699.
Para completar el juego de pginas maestro-detalle con un objeto de aplicacin:
1 En Dreamweaver, cree una pgina dinmica en blanco seleccionando Archivo > Nuevo > Pgina
dinmica, marcando una pgina dinmica y haciendo clic en Crear.
Esta pgina ser la pgina maestra.
2 Defina un juego de registros para la pgina.
Puede definir un juego de registros en el momento del diseo (vase Definicin de un juego
de registros en la pgina 551). Otra posibilidad es que el usuario lo defina en el momento de
la ejecucin (vase Creacin de pginas de bsqueda/resultados (ColdFusion, ASP, JSP, PHP)
en la pgina 665).
Creacin de pginas maestra-detalle (ColdFusion) 659
Asegrese de que el juego de registros contiene, no slo todas las columnas necesarias para la
pgina maestra, sino tambin todas las columnas necesarias para la pgina detalle.
Normalmente, el juego de registros de la pgina maestra extrae unas pocas columnas de una
tabla de una base de datos, mientras que un juego de registros de la pgina detalle extrae ms
columnas de la misma tabla para proporcionar informacin adicional.
3 Abra la pgina maestra en la vista Diseo y elija Insertar > Objetos de aplicacin > Juego de
pginas Maestro-Detalle.
Aparecer el cuadro de dilogo Juego de pginas Maestro-Detalle.
El objeto de aplicacin crea una pgina detalle (si no la ha creado usted antes) y aade
contenido dinmico y comportamientos de servidor tanto a la pgina maestra como a la pgina
detalle.
6 Personalice el diseo de las pginas maestra y detalle de acuerdo con sus necesidades.
Puede personalizar totalmente el diseo de cada pgina utilizando las herramientas de diseo
de pginas de Dreamweaver. Tambin puede editar los comportamientos de servidor haciendo
doble clic en ellos en el panel Comportamientos del servidor.
Despus de crear pginas maestra-detalle con el objeto de aplicacin, utilice el panel
Comportamientos del servidor (Ventana > Comportamientos del servidor) para modificar los
diferentes elementos que el objeto de aplicacin inserta en las pginas. Para ms informacin,
consulte Edicin de contenido dinmico en una pgina en la pgina 531.
Tambin puede crear pginas maestra-detalle con comportamientos individuales de servidor.
Creacin de pginas maestra-detalle elemento a elemento (ColdFusion)
Puede aadir los elementos bsicos de las pginas maestra-detalle por separado con el panel
Comportamientos de servidor.
Tambin puede aadir los elementos de una vez con el objeto de aplicacin Juego de pginas
Maestro-Detalle. Para ms informacin, consulte Creacin de pginas maestra-detalle en una
operacin (ColdFusion, ASP, JSP, PHP) en la pgina 658.
En esta seccin se explican los pasos necesarios para crear pginas maestra-detalle con los
comportamientos del servidor:
Creacin de la pgina maestra (ColdFusion) en la pgina 660
Creacin de vnculos con la pgina detalle (ColdFusion) en la pgina 662
Creacin de un parmetro de URL para los vnculos (ColdFusion) en la pgina 662
Bsqueda y visualizacin del registro solicitado en la pgina detalle (ColdFusion) en
la pgina 663
Creacin de la pgina maestra (ColdFusion)
En esta seccin se describe cmo crear una pgina maestra que enumere los registros de la base de
datos. Puede utilizar una tabla dinmica para mostrar los registros en una pgina de ColdFusion.
Antes de empezar, asegrese de definir una fuente de datos ColdFusion para la base de datos. Para
ms informacin, consulte el Captulo 24, Conexiones de base de datos para desarrolladores de
ColdFusion, en la pgina 477.
Para crear una pgina maestra:
1 En Dreamweaver, cree una pgina de ColdFusion.
Seleccione Archivo > Nuevo > Pgina dinmica, seleccione ColdFusion y haga clic en Crear. Se
abre una pgina en blanco de ColdFusion en Dreamweaver.
En el panel Vinculaciones, haga clic en el botn ms (+), seleccione Juego de registros
(consulta) y complete el cuadro de dilogo Juego de registros. Para ms informacin, haga clic
en el botn Ayuda del cuadro de dilogo. Si desea escribir su propia declaracin SQL, haga clic
en el botn Avanzado para abrir el cuadro de dilogo Juego de registros avanzado.
Asegrese de que el juego de registros contiene todas las columnas de la tabla necesarias para
crear la tabla dinmica. El juego de registros tambin debe incluir la columna de la tabla que
contiene la clave exclusiva de cada registro, es decir, la columna ID del registro. En el siguiente
ejemplo, la columna CODE contiene informacin que identifica exclusivamente cada registro.
El usuario puede definir el juego de registros durante la ejecucin. Para ms informacin,
consulte Creacin de pginas de bsqueda/resultados (ColdFusion, ASP, JSP, PHP) en
la pgina 665.
3 Inserte una tabla dinmica que muestre los registros en la pgina.
Site el punto de insercin donde desee que aparezca la tabla dinmica en la pgina y
seleccione Insertar > Objetos de aplicacin > Datos dinmicos > Tabla dinmica.
4 Seleccione las opciones que desea en el cuadro de dilogo Tabla dinmica y haga clic en Aceptar.
Dreamweaver inserta en la pgina una tabla dinmica.
Si necesita ayuda para completar el cuadro de dilogo, haga clic en el botn Ayuda del cuadro
de dilogo.
5 Si lo desea, elimine la columna de la tabla dinmica que contiene los ID de registros.
Si no desea mostrar los ID de registros a los usuarios, puede eliminar la columna de la tabla
dinmica. Haga clic en cualquier lugar de la pgina para entrar en ella. Desplace el cursor cerca
de la parte superior de la columna de la tabla dinmica hasta que sus celdas queden resaltadas
en rojo y haga clic para seleccionar la columna. Presione la tecla Supr para eliminar la columna
de la tabla.
El paso siguiente consiste en crear los vnculos con la pgina detalle.
Creacin de vnculos con la pgina detalle (ColdFusion)
Tras aadir la tabla dinmica a la pgina maestra , deber crear vnculos que abran la pgina
detalle. En esta seccin se explica cmo crear los vnculos. En la seccin siguiente se explica cmo
modificar el vnculo de manera que tambin facilite el ID del registro que seleccione el usuario. La
pgina detalle utilizar este ID para encontrar el registro solicitado en la base de datos y lo
mostrar.
Para crear vnculos con la pgina detalle:
1 En la fila repetida de la tabla dinmica, seleccione el texto o la imagen que servir como vnculo.
En el siguiente ejemplo, se selecciona el marcador de posicin
{rsLocations.LOCATION_NAME}. Los vnculos se aplicarn a los nombres de ubicaciones de
la columna.
2 En el inspector de propiedades, haga clic en el icono de carpeta situado junto al cuadro de texto
Vnculo.
3 Busque y seleccione la pgina detalle.
La pgina detalle aparece en el cuadro de texto Vnculo del inspector de propiedades.
En la tabla dinmica, el texto seleccionado aparece vinculado. Cuando la pgina se ejecuta en el
servidor, el vnculo se aplica al texto en cada fila de la tabla.
El paso siguiente consiste en crear un parmetro de URL que facilite el ID de registro a la pgina
detalle.
Creacin de un parmetro de URL para los vnculos (ColdFusion)
Los vnculos de la tabla dinmica no slo deben abrir la pgina detalle, sino que tambin deben
proporcionar el ID del registro seleccionado por el usuario. La pgina detalle utiliza este ID para
buscar el registro solicitado en la base de datos y visualizarlo.
El ID de registro se pasa a la pgina detalle en un parmetro de URL. Para ms informacin,
consulte Parmetros de URL en la pgina 536.
En esta seccin se explica cmo crear un parmetro de URL que proporcione un ID de registro a
la pgina detalle.
Para crear el parmetro de URL:
1 En la pgina maestra, seleccione el vnculo de la tabla dinmica.
Si Live Data est activado, seleccione el vnculo en la primera fila.
2 En el cuadro de texto Vnculo del inspector de propiedades, aada la cadena siguiente al final
del URL:
?recordID=#nombreJuegoRegistros.nombreCampo#
El signo de interrogacin indica al servidor que lo que va a continuacin es uno o ms
parmetros de URL. La palabra recordID es el nombre del parmetro de URL (puede utilizar el
nombre que desee). Anote el nombre del parmetro de URL, porque ms tarde lo utilizar en
la pgina detalle.
La expresin que se indica a continuacin del signo igual es el valor del parmetro. En este
caso, una expresin de ColdFusion genera el valor y devuelve un ID de registro proveniente del
juego de registros. Para cada fila de la tabla dinmica se genera un ID distinto. En la expresin
de ColdFusion, sustituya nombreJuegoRegistros por el nombre de su juego de registros, y
nombreCampo por el nombre del campo de su juego de registros que identifique de forma
exclusiva cada registro. En la mayora de los casos, el campo estar formado por un nmero de
ID de registro. En el siguiente ejemplo, el campo consta de cdigos de ubicacin exclusivos.
locationDetail.cfm?recordID=#rsLocations.CODE#
Al ejecutar la pgina, los valores del campo CODE del juego de registros se insertan en las filas
correspondientes de la tabla dinmica. Por ejemplo, si en Canberra, Australia, la sucursal de
alquiler tiene el cdigo CBR, se utilizar el siguiente URL en la fila de Canberra en la tabla
dinmica:
locationDetail.cfm?recordID=CBR
3 Guarde la pgina.
El paso siguiente consiste en encontrar y mostrar el registro solicitado en la pgina detalle.
Bsqueda y visualizacin del registro solicitado en la pgina detalle
(ColdFusion)
Despus de crear la pgina maestra, cambie a la pgina detalle. Debe localizar el registro
seleccionado en la base de datos y mostrarlo en la pgina. El procedimiento consiste en definir un
juego de registros para que contenga un registro el registro solicitado por la pgina maestra y
vincular las columnas del juego de registros a la pgina.
Para buscar y mostrar el registro solicitado en la pgina detalle:
1 Cambie a la pgina detalle.
Si an no dispone de una pgina detalle, cree una pgina de ColdFusion en blanco (Archivo >
Nuevo).
2 En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botn de signo ms (+) y
seleccione Juego de registros (consulta) en el men emergente.
Aparecer el cuadro de dilogo Juego de registros sencillo. Si aparece el cuadro de dilogo Juego
de registros avanzado, haga clic en Simple para cambiar al cuadro de dilogo Juego de registros
simple.
3 Asigne un nombre al juego de registros, luego elija una fuente de datos de ColdFusion y la tabla
de base de datos que proporcionar datos al juego de registros.
4 En el rea Columnas, seleccione las columnas de la tabla que deben incluirse en el juego de
registros.
El juego de registros puede ser igual o distinto del juego de registros de la pgina maestra.
Generalmente, el juego de registros de una pgina detalle incluye ms columnas para mostrar
ms informacin.
Si los juegos de registros son distintos, asegrese de que la pgina detalle contiene como
mnimo una columna en comn con el juego de registros de la pgina maestra. La columna
comn suele ser la columna de ID del registro, aunque tambin puede ser el campo de unin
de las tablas relacionadas.
Para incluir algunas de las columnas de la tabla en el juego de registros, haga clic en
Seleccionado y elija las columnas deseadas presionando Control (Windows) o Comando
(Macintosh) mientras hace clic en ellas en la lista.
5 Complete la seccin Filtro de la siguiente forma para localizar y mostrar el registro especificado
en el parmetro de URL proporcionado por la pgina maestra:
En el primer men emergente del rea Filtro, seleccione la columna del juego de registros
que contiene valores que coinciden con el valor del parmetro de URL que ha facilitado la
pgina maestra. Por ejemplo, si el parmetro de URL contiene un nmero de ID de registro,
seleccione la columna que contiene nmeros de ID de registros. En el ejemplo tratado en la
seccin anterior, la columna de juego de registros denominada CODE contiene los valores
que coinciden con el valor del parmetro de URL que ha facilitado la pgina maestra.
En el men emergente situado junto al primer men, seleccione el signo igual (ya debe estar
seleccionado).
En el tercer men emergente, seleccione Parmetro de URL.
La pgina maestra utiliza un parmetro de URL para pasar informacin a la pgina detalle.
En el cuarto cuadro de texto, introduzca el nombre del parmetro de URL que la pgina
maestra ha facilitado. Por ejemplo, si el URL que la pgina maestra utilizaba para abrir la
pgina detalle inclua el sufijo locationDetail.cfm?recordID=CBR, escriba recordID.
El cuadro de dilogo Juego de registros es parecido a este:
Creacin de pginas de bsqueda/resultados (ColdFusion, ASP, JSP, PHP) 665
El juego de registros aparecer en el panel Vinculaciones.
7 Vincule las columnas del juego de registros a la pgina detalle seleccionando las columnas del
panel Vinculaciones (Ventana > Vinculaciones) y arrastrndolas hasta la pgina.
Para ms informacin, consulte Conversin de texto en contenido dinmico en
la pgina 567.
Despus de cargar las pginas maestra y detalle en el servidor puede abrir la pgina maestra en un
navegador. Despus de hacer clic en un vnculo de detalle en la pgina maestra, se abre la pgina
detalle con ms informacin sobre el registro seleccionado.
Creacin de pginas de bsqueda/resultados (ColdFusion, ASP,
JSP, PHP)
Puede utilizar Dreamweaver para crear un juego de pginas que permitan al usuario realizar
bsquedas en la base de datos. El mtodo que se utiliza es idntico para las pginas ColdFusion,
ASP, JSP y PHP. Para informacin sobre cmo crear pginas de bsqueda/resultados, vase
Creacin de una pgina de bsqueda en la base de datos (ASP.NET) en la pgina 705.
Creacin de la pgina de bsqueda
Una pgina de bsqueda en la Web normalmente contiene campos de formulario en los que los
usuarios introducen parmetros de bsqueda. Como mnimo, la pgina de bsqueda debe incluir
un formulario HTML con un botn Enviar.
Para aadir un formulario HTML a una pgina de bsqueda:
1 Abra la pgina de bsqueda o una pgina nueva y seleccione Insertar > Formulario >
Formulario.
Se crear un formulario vaco en la pgina. Quiz deba activar los elementos invisibles (Ver >
Ayudas visuales > Elementos invisibles) para ver los lmites del formulario, que se representan
por medio de lneas rojas finas.
2 Aada objetos de formulario para que los usuarios introduzcan sus parmetros de bsqueda
eligiendo Formulario del men Insertar.
Entre los objetos de formulario figuran los campos de texto, los mens, las casillas de
verificacin y los botones de opcin. Puede aadir tantos objetos de formulario como desee
para ayudar a los usuarios a definir bsquedas precisas. No obstante, recuerde que cuanto
mayor sea el nmero de parmetros de bsqueda de la pgina de bsqueda, ms compleja ser
la declaracin SQL.
Para ms informacin sobre objetos de formulario, consulte Insercin de objetos de
3 Aada al formulario un botn Enviar (Insertar > Formulario > Botn).
4 Si lo desea, cambie la etiqueta del botn Enviar. Para ello, seleccione el botn, abra el inspector
de propiedades (Ventana > Propiedades) e introduzca un nuevo valor en el cuadro de texto
Etiqueta.
A continuacin, deber indicar al formulario el lugar al que debe enviar los parmetros de
bsqueda cuando el usuario haga clic en el botn Enviar.
5 Seleccione el formulario eligiendo la etiqueta <form> en el selector de etiquetas que se encuentra
en la parte inferior de la ventana de documento, como se muestra en la imagen.
6 En el cuadro de texto Accin del inspector de propiedades del formulario, introduzca el nombre
del archivo de la pgina de resultados que llevar a cabo la bsqueda en la base de datos.
7 En el men emergente Mtodo, elija uno de los siguientes mtodos para determinar cmo debe
enviar los datos el formulario al servidor.
GET enva los datos del formulario aadindolos al URL como una cadena de consulta.
Dado que los URL estn limitados a 8.192 caracteres, no utilice el mtodo GET con
formularios largos.
POST enva los datos del formulario en el cuerpo de un mensaje.
Default usa el mtodo predeterminado del navegador (generalmente, GET).
Ya ha terminado la pgina de bsqueda. A continuacin deber crear la pgina de resultados..
Temas relacionados
Pginas de bsqueda/resultados en la pgina 655
Creacin de la pgina de resultados
Cuando el usuario hace clic en el botn Buscar del formulario, se envan los parmetros de
bsqueda a la pgina de resultados residente en el servidor. La pgina de resultados residente en el
servidor, no la pgina de bsqueda del navegador, es la responsable de recuperar los registros de la
base de datos.
Temas relacionados
Pginas de bsqueda/resultados en la pgina 655
Creacin de la pgina de bsqueda en la pgina 665
Creacin de una pgina detalle para una pgina de resultados en la pgina 670
Bsqueda con un solo parmetro de bsqueda
Si la pgina de bsqueda enva un nico parmetro de bsqueda al servidor, puede crear la pgina
de resultados sin consultas ni variables SQL. Un juego de registros bsico se crea con un filtro que
excluye registros que no cumplen el parmetro de bsqueda enviado por la pgina de bsqueda.
Nota: si tiene varias condiciones de bsqueda, deber utilizar el cuadro de dilogo Juego de
registros avanzado para definir el juego de registros (vase Bsqueda con mltiples parmetros de
bsqueda en la pgina 668).
Para crear el juego de registros que contendr los resultados de la bsqueda:
1 Abra la pgina de resultados en la ventana de documento.
Si an no dispone de una pgina de resultados, cree una pgina dinmica en blanco (Archivo >
Nuevo).
2 Cree un juego de registros; para ello, abra el panel Vinculaciones (Ventana > Vinculaciones),
haga clic en el botn de signo ms (+) y seleccione Juego de registros en el men emergente.
3 Asegrese de que aparece el cuadro de dilogo Juego de registros sencillo.
Si aparece la versin avanzada del cuadro de dilogo, cambie a la versin sencilla haciendo clic
en el botn Simple.
4 Introduzca un nombre para el juego de registros y elija una conexin.
La conexin debe establecerse con una base de datos que contenga datos en los que desea que el
usuario realice bsquedas.
5 En el men emergente Tabla, seleccione la tabla de la base de datos en la que debe realizarse la
bsqueda.
Nota: en una bsqueda con un solo parmetro, puede buscar registros en una nica tabla. Para
buscar en ms de una tabla a la vez, deber utilizar el cuadro de dilogo Juego de registros
avanzado y definir una consulta SQL.
6 Para incluir algunas de las columnas de la tabla en el juego de registros, haga clic en Seleccionado
y seleccione las columnas deseadas presionando Control (Windows) o Comando (Macintosh)
mientras hace clic en ellas en la lista.
Debe incluir slo las columnas que contengan informacin que desee mostrar en la pgina de
resultados.
Deje abierto momentneamente el cuadro de dilogo Juego de registros. Tendr que utilizarlo a
continuacin para recuperar los parmetros enviados por la pgina de bsqueda y crear un filtro
de juego de registros para excluir registros que no cumplan los parmetros.
Para crear un filtro de juego de registros:
1 Desde el primer men emergente del rea Filtro, seleccione una columna de la tabla de la base
de datos en la que desee buscar una coincidencia.
Por ejemplo, si el valor enviado por la pgina de bsqueda es un nombre de una ciudad,
seleccione en la tabla la columna que contiene nombres de ciudades.
2 Desde el men emergente situado junto al primer men, seleccione el signo igual (que debe ser
el predeterminado).
3 En el tercer men emergente, seleccione Variable de formulario si el formulario de la pgina de
bsqueda utiliza el mtodo POST, o Parmetro de URL si utiliza el mtodo GET.
La pgina de bsqueda utiliza una variable de formulario o un parmetro de URL para pasar la
informacin a la pgina de resultados.
4 En el cuarto cuadro de texto, introduzca el nombre del objeto de formulario que aceptar el
parmetro de bsqueda en la pgina de bsqueda.
El nombre del objeto se dobla como nombre de la variable de formulario o parmetro de URL.
Puede obtener el nombre cambiando a la pgina de bsqueda, haciendo clic en el objeto de
formulario dentro del formulario para seleccionarlo y comprobando el nombre del objeto en el
Por ejemplo, supongamos que desea crear un juego de registros que incluya slo viajes de
aventura a un pas concreto. Supongamos que la tabla incluye una columna denominada
TRIPLOCATION. Supongamos tambin que el formulario HTML de la pgina de bsqueda
utiliza el mtodo GET y que contiene un objeto de men denominado Location que muestra
una lista de pases. Esta es la apariencia que debe presentar la seccin Filtro:
5 Si lo desea, haga clic en Prueba, introduzca un valor de prueba y haga clic en Aceptar para
conectar con la base de datos y crear una instancia del juego de registros.
El valor de prueba simula el valor que, de otro modo, habra sido devuelto por la pgina de
bsqueda. Haga clic en Aceptar para cerrar el juego de registros de prueba.
6 Si est satisfecho con el juego de registros, haga clic en Aceptar.
Dreamweaver inserta en la pgina un script del lado del servidor que, cuando se ejecuta en el
servidor, comprueba cada registro de la tabla de la base de datos. Si el campo especificado en un
registro cumple la condicin de filtro, el registro se incluir en el juego de registros. El script crea
un juego de registros que contiene solamente los resultados de la bsqueda.
El siguiente paso consiste en mostrar el juego de registros en la pgina de resultados. Para ms
informacin, consulte Visualizacin de los resultados en la pgina 670.
Bsqueda con mltiples parmetros de bsqueda
Si la pgina de bsqueda enva ms de un parmetro de bsqueda al servidor, deber escribir una
consulta SQL para la pgina de resultados y utilizar los parmetros de bsqueda en las variables
SQL.
Nota: si tiene slo una condicin de bsqueda, puede utilizar el cuadro de dilogo Juego de registros
simple para definir el juego de registros (vase Bsqueda con un solo parmetro de bsqueda en
la pgina 666).
Para buscar registros de una base de datos empleando SQL:
1 Abra la pgina de resultados en Dreamweaver y, a continuacin, abra el panel Vinculaciones
(Ventana > Vinculaciones), haga clic en el botn de signo ms (+) y seleccione Juego de registros
o en el men emergente para crear un nuevo juego de registros.
2 Asegrese de que aparece el cuadro de dilogo Juego de registros avanzado.
Si aparece la versin sencilla del cuadro de dilogo, cambie a la versin avanzada haciendo clic
en el botn Avanzada.
3 Introduzca un nombre para el juego de registros y elija una conexin.
4 Introduzca una declaracin de seleccin (Select) en el rea de texto SQL.
Asegrese de que la declaracin incluye una clusula WHERE (donde) con variables que
contengan los parmetros de bsqueda. En el siguiente ejemplo, las variables se denominan
varLastName y varDept:
SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION
FROM EMPLOYEE WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT
LIKE 'varDept'
Para reducir la cantidad de datos que debe teclear, puede utilizar el rbol de elementos de la
base de datos situado en la parte inferior del cuadro de dilogo Juego de registros avanzado.
Para instrucciones, vase Creacin de un juego de registros avanzado escribiendo SQL en
la pgina 552.
Para obtener ayuda sobre la sintaxis SQL, vase Apndice B, Nociones bsicas de SQL, en
la pgina 781.
5 Asigne a las variables SQL los valores de los parmetros de bsqueda haciendo clic en el botn
de signo ms (+) en el rea Variables e introduciendo el nombre de la variable, el valor
predeterminado (el valor que toma la variable si no se devuelve ningn valor de tiempo de
ejecucin) y un valor de tiempo de ejecucin (normalmente, un objeto de servidor que contiene
un valor enviado por un navegador, como una variable de peticin).
En el siguiente ejemplo ASP, el formulario HTML de la pgina de bsqueda utiliza el mtodo
GET y contiene un campo de texto denominado LastName y otro llamado Department.
En ColdFusion, los valores de tiempo de ejecucin seran #LastName# y #Department#. En
JSP, los valores de tiempo de ejecucin seran request.getParameter("LastName") y
request.getParameter("Department").
6 Si lo desea, haga clic en Prueba para crear una instancia del juego de registros utilizando los
valores predeterminados de las variables.
Los valores predeterminados simulan el valor que, de otro modo, habra sido devuelto por la
pgina de bsqueda. Haga clic en Aceptar para cerrar el juego de registros de prueba.
7 Si est satisfecho con el juego de registros, haga clic en Aceptar.
Dreamweaver inserta la consulta SQL en la pgina.
El siguiente paso consiste en mostrar el juego de registros en la pgina de resultados.
Visualizacin de los resultados
Tras crear un juego de registros que contenga los resultados de la bsqueda, debe mostrar la
informacin en la pgina de resultados. Para visualizar los registros, slo tendr que arrastrar
columnas individuales desde el panel Vinculaciones hasta la pgina de resultados. Puede aadir
vnculos de navegacin para permitir el desplazamiento hacia delante o hacia atrs por el juego de
registros, as como crear una regin repetida para mostrar ms de un registro en la pgina.
Tambin puede aadir vnculos a una pgina detalle.
En esta seccin se explica cmo visualizar los resultados con una tabla dinmica.
Para visualizar los resultados de bsqueda con una tabla dinmica:
1 Site el punto de insercin donde desee que aparezca la tabla dinmica en la pgina de resultados
y seleccione Insertar > Objetos de aplicacin > Datos dinmicos > Tabla dinmica.
2 Complete el cuadro de dilogo Tabla dinmica seleccionando el juego de registros definido para
contener los resultados de la bsqueda.
Si necesita ayuda para completar el cuadro de dilogo Tabla dinmica, haga clic en el botn
Ayuda del cuadro de dilogo.
Dreamweaver inserta una tabla dinmica que visualizar los resultados de la bsqueda.
Para ms informacin sobre otros mtodos de visualizacin de contenido dinmico en una pgina,
consulte el Captulo 35, Visualizacin de registros de la base de datos, en la pgina 575.
Creacin de una pgina detalle para una pgina de resultados
El juego de pginas de bsqueda/resultados puede incluir una pgina detalle que muestre
informacin sobre registros concretos de la pgina de resultados. En esta situacin, la pgina de
resultados tambin se dobla como pgina maestra en un juego de pginas maestra-detalle. Para
ms informacin, consulte los siguientes temas:
Creacin de pginas maestra-detalle (ASP y JSP) en la pgina 729
Creacin de pginas maestra-detalle (PHP) en la pgina 747
Temas relacionados
Creacin de la pgina de bsqueda en la pgina 665
Creacin de la pgina de resultados en la pgina 666
Creacin de una pgina de insercin de registro (todos los servidores) 671
Creacin de una pgina de insercin de registro (todos los
servidores)
Una aplicacin puede incluir una pgina que permita a los usuarios insertar nuevos registros en
una base de datos. Por ejemplo, la siguiente pgina inserta un nuevo registro en una base de datos
de empleados:
Una pgina de insercin consta de dos elementos:
Un formulario HTML que permite a los usuarios introducir datos
Un comportamiento de servidor Insertar registro que actualiza la base de datos
Puede aadir ambos elementos en una sola operacin, mediante el objeto de aplicacin
Formulario de insercin de registro (vaseCreacin de la pgina de insercin en una sola
operacin en la pgina 671), o por separado, con las herramientas de formulario de
Dreamweaver y el panel Comportamientos del servidor (vase Creacin de una pgina de
insercin elemento a elemento en la pgina 672).
Nota: la pgina de insercin slo puede contener un comportamiento de servidor de edicin de
registros simultneamente. Por ejemplo, no puede aadir un comportamiento de servidor Actualizar
registro o Eliminar registro a la pgina de insercin.
Creacin de la pgina de insercin en una sola operacin
Puede aadir los elementos bsicos de una pgina de insercin en una sola operacin mediante el
objeto de aplicacin Formulario de insercin de registro. El objeto de aplicacin aade a la pgina
un formulario HTML y un comportamiento de servidor Insertar registro.
Tambin puede aadir los elementos por separado utilizando las herramientas de formulario y el
panel Comportamientos del servidor. Para ms informacin, consulte Creacin de una pgina de
insercin elemento a elemento en la pgina 672.
Una vez situados los elementos en la pgina, puede utilizar las herramientas de diseo de
Dreamweaver para personalizar el formulario o el panel Comportamientos del servidor para editar
el comportamiento de servidor Insertar registro.
Para crear la pgina de insercin con el objeto de aplicacin Formulario de insercin de
registro:
1 Abra la pgina en la vista Diseo y seleccione Insertar > Objetos de aplicacin > Insertar registro
> Asistente de formulario de insercin de registros.
Aparecer el cuadro de dilogo Insertar formulario de insercin de registro.
Dreamweaver aade a la pgina un formulario HTML y un comportamiento de servidor Insertar
registro. Los objetos de formulario estn dispuestos en una tabla bsica que se puede personalizar
por medio de las herramientas de diseo de pginas de Dreamweaver. (Asegrese de que todos los
objetos de formulario se mantienen dentro de los lmites del formulario.)
Para editar el comportamiento de servidor, abra el panel Comportamientos del servidor (Ventana
> Comportamientos del servidor) y haga doble clic en el comportamiento Insertar registro.
Creacin de una pgina de insercin elemento a elemento
Puede aadir los elementos bsicos de una pgina de insercin por separado utilizando las
herramientas de formulario y el panel Comportamientos del servidor.
Tambin puede aadir todos los elementos de una vez con el objeto de aplicacin Formulario de
insercin de registro. Para ms informacin, consulte Creacin de la pgina de insercin en una
sola operacin en la pgina 671.
El procedimiento de creacin de la pgina de insercin consta de dos pasos:
Aadir un formulario HTML a la pgina de actualizacin para que los usuarios puedan
introducir los datos
Aadir el comportamiento de servidor Insertar registro para insertar registros en una tabla de
base de datos
Para aadir un formulario HTML a una pgina de insercin:
1 Cree una nueva pgina dinmica (Archivo > Nuevo) y disela con las herramientas de diseo
de Dreamweaver.
2 Aada un formulario HTML situando el punto de insercin donde desea que aparezca el
formulario y seleccionando Insertar > Formulario > Formulario.
3 Asigne un nombre al formulario HTML. Para ello, haga clic en la etiqueta <form>, situada en
la parte inferior de la ventana de documento, para seleccionar el formulario, abra el inspector de
propiedades (Ventana > Propiedades) e introduzca un nombre en el cuadro de texto Nombre
del formulario.
No es necesario que especifique los atributos action o method para indicar al formulario
dnde y cmo enviar los datos del registro cuando el usuario presione el botn Enviar, ya que el
comportamiento de servidor Insertar registro configura estos atributos automticamente.
4 Aada un objeto de formulario como un campo de texto (Insertar > Formulario > Campo de
texto) para cada columna de la tabla de la base de datos en la que desee insertar registros.
Creacin de pginas para actualizar un registro (ColdFusion) 673
Los objetos de formulario permiten introducir datos. Generalmente se utilizan campos de
texto, pero tambin puede usar mens, casillas de verificacin y botones de opcin.
Para ms informacin sobre objetos de formulario, consulte Insercin de objetos de
Puede modificar la etiqueta del botn Enviar. Para ello, seleccione el botn, abra el inspector de
propiedades (Ventana > Propiedades) e introduzca un nuevo valor en el cuadro Etiqueta.
Para aadir un comportamiento de servidor que inserte registros en una tabla de la base de
datos:
clic en el botn de signo ms (+) y seleccione Insertar registro del men emergente.
Aparecer el cuadro de dilogo Insertar registro.
Dreamweaver aadir a la pgina un comportamiento de servidor que permita a los usuarios
insertar registros en una tabla de la base de datos haciendo clic en el botn Enviar del formulario.
> Comportamientos del servidor) y haga doble clic en el comportamiento Insertar registro.
Creacin de pginas para actualizar un registro (ColdFusion)
Una aplicacin puede incluir un juego de pginas que permita a los usuarios actualizar los
registros existentes en una tabla de la base de datos. Las pginas estn formadas normalmente por
una pgina de bsqueda, una pgina de resultados y una pgina de actualizacin. La pgina de
bsqueda y de resultados permite a los usuarios recuperar el registro, y la pgina de actualizacin
permite a los usuarios modificarlo.
En esta seccin se explican los pasos necesarios para crear pginas para actualizar un registro:
Bsqueda del registro que se desea actualizar (ColdFusion) en la pgina 674
Creacin de vnculos para abrir la pgina de actualizacin (ColdFusion) en la pgina 674
Creacin de un parmetro de URL para los vnculos de actualizacin (ColdFusion) en
la pgina 675
Recuperacin del registro que debe actualizarse (ColdFusion) en la pgina 675
Cmo completar la pgina de actualizacin en una operacin (ColdFusion) en la pgina 676
Cmo completar la pgina de actualizacin elemento a elemento (ColdFusion) en
la pgina 677
Temas relacionados
Creacin de una pgina de insercin de registro (todos los servidores) en la pgina 671
Creacin de pginas para eliminar un registro (ColdFusion) en la pgina 679
Bsqueda del registro que se desea actualizar (ColdFusion)
Antes de actualizar un registro, el usuario debe encontrarlo en la base de datos. Por tanto,
necesitar una pgina de bsqueda y una pgina de resultados que funcionen con la pgina de
actualizacin. El usuario introduce criterios de bsqueda en la pgina de bsqueda y selecciona el
registro en la pgina de resultados. Cuando un usuario hace clic en el registro, aparece la pgina de
actualizacin y muestra el registro en un formulario HTML.
Para instrucciones sobre cmo crear pginas para buscar el registro que desea actualizar, vase
Creacin de pginas de bsqueda/resultados (ColdFusion, ASP, JSP, PHP) en la pgina 665.
Despus de crear las pginas de bsqueda/resultados, el siguiente paso ser crear vnculos en la
pgina de resultados que abran la pgina de actualizacin cuando se haga clic en ellos.
Creacin de vnculos para abrir la pgina de actualizacin (ColdFusion)
Despus de crear las pginas de bsqueda/resultados , deber crear vnculos en la pgina de
resultados para abrir la pgina de actualizacin y mostrar el registro seleccionado en un formulario
HTML. En esta seccin se explica cmo crear los vnculos. En la siguiente seccin se explica cmo
modificar el vnculo para que tambin proporcione el ID del registro que selecciona el usuario. La
pgina de actualizacin utilizar este ID para localizar el registro solicitado en la base de datos y
mostrarlo.
Para crear vnculos con la pgina de actualizacin:
1 En la pgina de resultados, seleccione el texto repetido o el marcador de posicin del contenido
que desee vincular.
la columna.
2 En el inspector de propiedades, haga clic en el icono de carpeta situado junto al cuadro de texto
Vnculo.
3 Busque y seleccione la pgina de actualizacin.
El nombre de archivo de la pgina de actualizacin aparece en el cuadro de texto Vnculo.
En la pgina de resultados, el marcador de posicin para el contenido dinmico aparece
vinculado. Si carga las pginas en el servidor y ejecuta una bsqueda, podr ver que el vnculo
se aplica a cada uno de los registros que se muestran en la pgina de resultados.
El paso siguiente consiste en crear un parmetro de URL para proporcionar el ID del registro
seleccionado por el usuario.
Creacin de un parmetro de URL para los vnculos de actualizacin
(ColdFusion)
Los vnculos de la pgina de resultados no slo tienen que abrir la pgina de actualizacin sino
que tambin deben pasar el ID del registro que el usuario ha seleccionado. La pgina de
actualizacin utilizar este ID para localizar el registro solicitado en la base de datos y mostrarlo.
El ID del registro se pasa a la pgina de actualizacin en un parmetro de URL. Para ms
informacin, consulte Parmetros de URL en la pgina 536.
la pgina de actualizacin.
1 Seleccione el vnculo en la pgina de resultados.
del URL:
parmetros de URL. La palabra recordID es el nombre del parmetro de URL (puede utilizar
el nombre que desee). Anote el nombre del parmetro de URL porque lo utilizar ms adelante
en la pgina de actualizacin.
locationDetail.cfm?recordID=#rsLocations.CODE#
dinmica:
locationDetail.cfm?recordID=CBR
3 Guarde la pgina.
El siguiente paso es modificar la pgina de actualizacin para poder localizar el registro solicitado
en la base de datos y mostrarlo en la pgina.
Recuperacin del registro que debe actualizarse (ColdFusion)
Cuando la pgina de resultados facilita un parmetro de URL a la pgina de actualizacin para
identificar el registro que desea actualizar , la pgina de actualizacin debe leer el parmetro,
recuperar el registro de la tabla de la base de datos y almacenarlo temporalmente en un juego de
registros.
Para recuperar el registro que desea actualizar:
1 Cree una pgina de ColdFusion en Dreamweaver y gurdela.
La pgina pasa a ser la pgina de actualizacin.
2 En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botn ms (+) y seleccione
Juego de registros.
Si aparece el cuadro de dilogo avanzado, haga clic en el botn Simple para abrir el cuadro de
dilogo sencillo.
3 Asigne un nombre al juego de registros y utilice los mens emergentes Conexin y Tabla para
especificar la ubicacin de los datos que desea actualizar.
4 Haga clic en la opcin Seleccionado y elija una columna de clave (generalmente, la columna ID
del registro) y las columnas que contienen los datos que desea actualizar.
5 Configure el rea Filtro de forma que el valor de la columna de clave sea igual al valor del
parmetro de URL transferido por la pgina de resultados.
Este tipo de filtro crea un conjunto de registros que slo contiene el registro especificado por la
pgina de resultados. Por ejemplo, si la columna de clave contiene la informacin de ID del
registro y se denomina PRID, y si la pgina de resultados transfiere la informacin de ID del
registro correspondiente en el parmetro de URL id, sta es la apariencia que debe presentar el
rea Filtro:
Cuando el usuario seleccione un registro de la pgina de resultados, la pgina de actualizacin
generar un juego de registros que contendr nicamente el registro seleccionado.
Cmo completar la pgina de actualizacin en una operacin (ColdFusion)
Las pginas de actualizacin constan de tres elementos:
Un juego de registros filtrado que permite recuperar el registro de una tabla de la base de datos
(vase Recuperacin del registro que debe actualizarse (ColdFusion) en la pgina 675).
Un formulario HTML que permite a los usuarios modificar los datos del registro.
Un comportamiento de servidor Actualizar registro que permite actualizar la tabla de la base de
datos.
Puede aadir los dos ltimos elementos de una pgina de actualizacin en una sola operacin
mediante el objeto de aplicacin Formulario de actualizacin de registros. El objeto de aplicacin
aade a la pgina un formulario HTML y un comportamiento de servidor Actualizar registro.
Para utilizar el objeto de aplicacin, la aplicacin Web debe ser capaz de identificar el registro que
desea actualizar, y la pgina de actualizacin debe poder recuperarlo. Vase Bsqueda del registro
que se desea actualizar (ColdFusion) en la pgina 674, Creacin de vnculos para abrir la pgina
de actualizacin (ColdFusion) en la pgina 674, Creacin de un parmetro de URL para los
vnculos de actualizacin (ColdFusion) en la pgina 675 y Recuperacin del registro que debe
actualizarse (ColdFusion) en la pgina 675.
Cuando el objeto de aplicacin site los elementos en la pgina, podr utilizar las herramientas de
diseo de Dreamweaver para personalizar el formulario o el panel Comportamientos del servidor
para editar el comportamiento de servidor Actualizar registro.
Nota: la pgina de actualizacin slo puede contener un comportamiento de servidor de edicin de
registros. Por ejemplo, no puede aadir un comportamiento de servidor Insertar registro o Eliminar
registro a la pgina de actualizacin.
Para crear la pgina de actualizacin con el objeto de aplicacin Formulario de
actualizacin de registros:
1 Abra la pgina en la vista Diseo, luego seleccione Insertar > Objetos de aplicacin > Actualizar
registro > Asistente de formulario de actualizacin de registros.
Aparecer el cuadro de dilogo Formulario de actualizacin de registros.
El objeto de aplicacin aade a la pgina un formulario HTML y un comportamiento de servidor
Actualizar registro. Los objetos de formulario estn dispuestos en una tabla bsica que se puede
personalizar por medio de las herramientas de diseo de pginas de Dreamweaver. (Asegrese de
que todos los objetos de formulario se mantienen dentro de los lmites del formulario.)
Para editar el comportamiento de servidor, abra el panel Comportamientos del servidor (Ventana >
Comportamientos del servidor) y haga doble clic en el comportamiento Actualizar registro.
Cmo completar la pgina de actualizacin elemento a elemento
(ColdFusion)
(vase Recuperacin del registro que debe actualizarse (ColdFusion) en la pgina 675).
datos.
Puede aadir los dos ltimos elementos bsicos de una pgina de actualizacin por separado
utilizando las herramientas de formulario y el panel Comportamientos del servidor.
Para que se puedan aadir los elementos, la aplicacin Web debe ser capaz de identificar el registro
que desea actualizar, y la pgina de actualizacin necesita poder recuperarlo. Vase Bsqueda del
registro que se desea actualizar (ColdFusion) en la pgina 674, Creacin de vnculos para abrir
la pgina de actualizacin (ColdFusion) en la pgina 674, Creacin de un parmetro de URL
para los vnculos de actualizacin (ColdFusion) en la pgina 675 y Recuperacin del registro
que debe actualizarse (ColdFusion) en la pgina 675.
Para completar la pgina de actualizacin es necesario realizar tres tareas:
modificar los datos
Visualizar el registro en el formulario vinculando los objetos de formulario a las columnas de la
tabla de la base de datos
Aadir el comportamiento de servidor Actualizar registro para actualizar la tabla de la base de
datos despus de que el usuario modifique el registro
Para aadir un formulario HTML a una pgina de actualizacin:
1 Cree una pgina de ColdFusion (Archivo > Nuevo).
2 Disee la pgina empleando las herramientas de Dreamweaver.
del formulario.
dnde y cmo enviar los datos del registro cuando el usuario pulse el botn Enviar, ya que el
comportamiento de servidor Actualizar registro configura estos atributos automticamente.
5 Aadir un objeto de formulario como un campo de texto (Insertar > Formulario > Campo de
texto) para cada columna que desee actualizar en la tabla de la base de datos.
Cada objeto de formulario debe corresponder a una de las columnas del juego de registros
definido previamente. La nica excepcin es la columna de clave exclusiva, que no debe estar
asociada a ningn objeto de formulario.
Para ms informacin sobre los objetos de formulario, consulte Insercin de objetos de
Para mostrar el registro en el formulario:
1 Asegrese de haber definido un juego de registros para guardar en l el registro que desea
actualizar el usuario.
Para ms informacin, consulte Recuperacin del registro que debe actualizarse
(ColdFusion) en la pgina 675.
2 Vincule cada objeto de formulario a los datos del juego de registros, como se describe en las
siguientes secciones:
Creacin de pginas para eliminar un registro (ColdFusion) 679
Para aadir un comportamiento de servidor para actualizar la tabla de la base de datos.
clic en el botn de signo ms (+) y seleccione Actualizar registro en el men emergente.
Aparecer el cuadro de dilogo Actualizar registro.
actualizar registros de una base de datos haciendo clic en el botn Enviar del formulario.
> Comportamientos del servidor) y haga doble clic en el comportamiento Actualizar registro.
Temas relacionados
Cmo completar la pgina de actualizacin en una operacin (ColdFusion) en la pgina 676
Creacin de pginas para eliminar un registro (ColdFusion)
Una aplicacin puede incluir un juego de pginas que permita a los usuarios eliminar los registros
existentes en una base de datos. Las pginas estn formadas normalmente por una pgina de
bsqueda, una pgina de resultados y una pgina de borrado. Las pginas de bsqueda y de
resultados permite a los usuarios recuperar el registro y la pgina de borrado permite a los usuarios
eliminarlo.
En esta seccin se explican los pasos para crear pginas de ColdFusion para eliminar registros:
Bsqueda del registro que se desea eliminar (ColdFusion) en la pgina 679
Creacin de vnculos con una pgina de confirmacin (ColdFusion) en la pgina 680
Creacin de un parmetro de URL para pasar a la pgina de confirmacin (ColdFusion) en
la pgina 681
Visualizacin del registro en la pgina de confirmacin (ColdFusion) en la pgina 682
Adicin de lgica para eliminar el registro (ColdFusion) en la pgina 686
Bsqueda del registro que se desea eliminar (ColdFusion)
Antes de borrar un registro, el usuario debe encontrarlo en la base de datos. Por tanto, necesitar
una pgina de bsqueda y una pgina de resultados que funcionen con la pgina de borrado. El
usuario introduce criterios de bsqueda en la pgina de bsqueda y selecciona el registro en la
pgina de resultados. Cuando un usuario hace clic en el registro, aparece la pgina de borrado y
muestra el registro en un formulario HTML.
Para instrucciones sobre cmo crear pginas para buscar el registro que desea eliminar, vase
Despus de crear las pginas de bsqueda/resultados, el paso siguiente consiste en crear vnculos
en la pgina de resultados para permitir a los usuarios seleccionar un registro y borrarlo o
visualizar una pgina de confirmacin.
Creacin de vnculos con una pgina de confirmacin (ColdFusion)
Despus de crear la pgina de resultados, deber crear vnculos en los que el usuario pueda hacer
clic para eliminar el registro asociado de la base de datos. En esta seccin se explica cmo crear los
vnculos. En la siguiente seccin se explica cmo modificar el vnculo para que tambin
proporcione el ID del registro que el usuario desea eliminar. La pgina de confirmacin utiliza
este ID para buscar y visualizar el registro.
Para crear vnculos con una pgina de confirmacin:
1 En la pgina de resultados, cree una nueva columna en la tabla que sirva para mostrar registros.
Para ello, haga clic en la ltima columna de la tabla y seleccione Modificar > Tabla > Insertar
filas o columnas.
2 Seleccione la opcin Columnas y, a continuacin, seleccione la opcin Despus de la columna
actual y haga clic en Aceptar.
Dreamweaver aade una columna a la tabla.
3 En la nueva columna creada en la tabla, introduzca la cadena Delete de la fila que contenga los
marcadores de posicin de contenido dinmico. Asegrese de introducir la cadena dentro de la
regin repetida delimitada con tabulaciones.
Tambin puede insertar una imagen con la palabra Eliminar o el smbolo que indique
eliminar.
Si la vista Live Data est activada, introduzca la cadena en la primera fila de registros y haga clic
en el icono Actualizar.
4 Seleccione la cadena Delete para aplicarle un vnculo.
Si la vista Live Data est activada, seleccione la cadena en la primera fila de registros.
5 En el inspector de propiedades, introduzca la pgina de confirmacin en el cuadro de texto
Vnculo.
Puede introducir el nombre de archivo que desee.
Despus de hacer clic fuera del cuadro de texto Vnculo, la cadena Delete aparece vinculada en la
tabla. Si activa la vista Live Data (Ver > Live Data), podr ver que el vnculo se aplica al mismo
texto en cada fila de la tabla. Si la vista Live Data ya est activada, haga clic en el icono Actualizar
para aplicar los vnculos a cada fila.
Despus de crear los vnculos, el paso siguiente consiste en crear parmetros de URL para los
vnculos.
Creacin de un parmetro de URL para pasar a la pgina de confirmacin
(ColdFusion)
Los vnculos de la pgina de resultados no slo deben abrir la pgina de confirmacin, sino que
tambin deben proporcionar el ID del registro que el usuario desea eliminar. La pgina de
confirmacin utilizar este ID para encontrar el registro en la base de datos y lo mostrar.
Debe proporcionar el ID de registro a la pgina de confirmacin con un parmetro de URL. En
esta seccin se explica cmo crear un parmetro de URL para pasar el ID de registro a la pgina de
confirmacin.
1 Seleccione el vnculo de borrado en la pgina de resultados.
del URL:
nombre que desee). Anote el nombre del parmetro de URL porque lo utilizar ms adelante
en la pgina de confirmacin.
confirmDelete.cfm?recordID=#rsLocations.CODE#
dinmica:
confirmDelete.cfm?recordID=CBR
3 Guarde la pgina.
Despus de crear un parmetro de URL dinmico para los vnculos de borrado, el prximo paso
consiste en visualizar el registro en la pgina de confirmacin.
Visualizacin del registro en la pgina de confirmacin (ColdFusion)
Despus de completar la pgina que enumera los registros, cambie a la pgina de confirmacin. La
pgina de confirmacin muestra el registro y solicita al usuario si est seguro de querer eliminarlo.
Cuando el usuario confirma la operacin haciendo clic en el botn de formulario, la aplicacin
Web elimina el registro de la base de datos.
Generar esta pgina consiste en crear un formulario HTML, recuperar el registro que se desea
visualizar en el formulario, visualizar el registro en el formulario y aadir la lgica para eliminar el
registro de la base de datos. Recuperar y mostrar el registro consiste en definir un juego de
registros que incluya un solo registro (el registro que el usuario desea eliminar) y en vincular las
columnas del juego de registros a la pgina. A continuacin se describen ms detalladamente estos
pasos.
Para crear un formulario HTML para mostrar el registro:
1 Cree una nueva pgina ColdFusion y gurdela como la pgina de confirmacin especificada en
la seccin anterior.
Al crear el vnculo de borrado en la seccin anterior ha especificado una pgina de
confirmacin. Utilcelo al grabar el archivo por primera vez (por ejemplo, deleteConfirm.cfm).
2 Inserte un formulario HTML en la pgina (Insertar > Formulario > Formulario).
3 Aada al formulario un campo oculto de formulario.
Los campos ocultos de formulario son necesarios para almacenar el ID de registro que ha
facilitado el parmetro de URL. Para aadir un campo oculto, site el punto de insercin en el
formulario y seleccione Insertar > Formulario > Campo oculto.
4 Aada un botn al formulario.
El usuario har clic en el botn para confirmar y eliminar el registro mostrado. Para aadir un
botn, site el punto de insercin en el formulario y seleccione Insertar > Formulario > Botn.
5 Mejore el diseo de la pgina segn convenga y gurdela.
Para recuperar el registro que el usuario desea eliminar:
seleccione Juego de registros (consulta) en el men emergente.
simple.
2 Asigne un nombre al juego de registros, seleccione una fuente de datos de ColdFusion y la tabla
de base de datos que contenga los registros que los usuarios puedan eliminar.
3 En el rea Columnas, seleccione las columnas de la tabla (campos de registros) que desea mostrar
en la pgina.
Para mostrar slo alguno de los campos del registro, haga clic en Seleccionado y elija los
campos que desee presionando Control (Windows) o Comando (Macintosh) mientras hace
clic en ellos en la lista.
Asegrese de incluir el campo de ID de registro an cuando no se vaya a mostrar.
en el parmetro de URL que ha facilitado la pgina de resultados:
En el primer men emergente del rea Filtro, seleccione la columna en el juego de registros
pgina con los vnculos de borrado. Por ejemplo, si el parmetro de URL contiene un
nmero de ID de registro, seleccione la columna que contiene nmeros de ID de registros.
En el ejemplo tratado en la seccin anterior, la columna del juego de registros denominada
CODE contiene los valores que coinciden con el valor del parmetro de URL que ha
facilitado la pgina con los vnculos de borrado.
En el men emergente situado junto al primer men, seleccione el signo igual si todava no
est seleccionado.
En el tercer men emergente, seleccione Parmetro de URL. La pgina con los vnculos de
borrado utiliza un parmetro de URL para pasar informacin a la pgina de confirmacin.
En el cuarto cuadro de texto, introduzca el nombre del parmetro de URL proporcionado
por la pgina que contiene los vnculos de borrado.
Por ejemplo, si el URL utilizado para abrir la pgina de confirmacin inclua el sufijo
confirmDelete.cfm?recordID=CBR, especifique recordID.
El cuadro de dilogo Juego de registros debe ser parecido al siguiente.
Para mostrar el registro que el usuario desea eliminar:
1 Seleccione las columnas del juego de registros del panel Vinculaciones y arrstrelas a la pgina
de confirmacin.
Asegrese de insertar este contenido dinmico de slo lectura dentro de los lmites del
formulario. Para ms informacin sobre la insercin de contenido dinmico en una pgina,
consulte Conversin de texto en contenido dinmico en la pgina 567.
A continuacin, debe vincular la columna de ID de registro al campo oculto de formulario.
2 Asegrese de que los Elementos invisibles se han activado (Ver > Ayudas visuales > Elementos
invisibles) y luego haga clic en el icono de escudo amarillo que representa el campo oculto de
formulario.
El campo oculto de formulario aparece seleccionado.
Valor.
4 En el cuadro de dilogo Datos dinmicos, seleccione la columna ID del registro en el juego de
registros.
En el siguiente ejemplo, la columna ID del registro seleccionada es CODE.
5 Haga clic en Aceptar y guarde la pgina.
La pgina de confirmacin completada debe tener un aspecto parecido al siguiente.
Despus de visualizar el registro en la pgina de confirmacin, el paso siguiente es aadir lgica
para eliminar el registro.
Adicin de lgica para eliminar el registro (ColdFusion)
Despus de visualizar el registro seleccionado en la pgina de confirmacindebe aadir a la pgina
una lgica que borre el registro de la base de datos cuando el usuario haga clic en el botn
Confirmar. Puede aadir esta lgica rpida y fcilmente en Dreamweaver con el comportamiento
de servidor Eliminar registro.
Para aadir lgica para eliminar el registro que aparece en el formulario HTML:
1 Asegrese de que la pgina de confirmacin est abierta en Dreamweaver.
clic en el botn ms (+) y seleccione Eliminar registro.
Aparecer el cuadro de dilogo Eliminar registro.
3 En el cuadro de texto Comprobar primero si hay una variable definida, compruebe que est
seleccionada la opcin Valor de clave principal.
Especificar el valor de clave principal ms adelante en el cuadro de dilogo.
4 En el men emergente Conexin, seleccione una conexin con la base de datos para que el
comportamiento de servidor pueda conectarse a la base de datos afectada.
5 En el men emergente Tabla, seleccione la tabla de base de datos que contiene los registros que
se eliminarn.
6 En el men emergente Columna de clave principal, seleccione la columna de la tabla que
contiene ID de registros.
El comportamiento de servidor Eliminar registro buscar una coincidencia en esta columna. La
columna debe contener los mismos datos de ID de registro que la columna Juego de registros
vinculada con el campo oculto de formulario en la pgina.
Si el ID de registro es numrico, seleccione la opcin Numrico.
7 En el men emergente Valor de clave principal, seleccione la variable de la pgina que contiene
el ID de registro que identifica el registro que se va a eliminar.
El campo oculto de formulario crea la variable. Tiene el mismo nombre que el atributo
Nombre del campo oculto y es un formulario o un parmetro de URL, segn el atributo
Mtodo del formulario. En el ejemplo, la variable es una variable de formulario denominada
hiddenRecID.
Utilizacin de procedimientos almacenados para modificar bases de datos (ColdFusion) 687
8 En el cuadro de texto Despus de borrar, ir a, especifique una pgina que se abrir despus de
eliminar el registro de la base de datos.
Puede especificar una pgina que contenga un breve mensaje de operacin realizada
correctamente para el usuario o una pgina que muestre los registros restantes para que el
usuario pueda verificar que el registro se ha borrado.
El cuadro de dilogo Eliminar registro completado debe parecerse al siguiente.
9 Haga clic en Aceptar y guarde el trabajo.
Cargue las pginas en el servidor Web, abra un navegador y busque un registro que se deba
eliminar. Al hacer clic en un vnculo de borrado en la pgina de resultados, aparecer la pgina de
confirmacin. Haga clic en el botn Confirmar para eliminar el registro de la base de datos. Para
verificar que el registro se ha eliminado, vuelva a abrir la pgina con los vnculos de borrado. El
registro ya no debe aparecer en la lista.
Nota: haga clic en Actualizar si el registro todava aparece en la pgina.
Utilizacin de procedimientos almacenados para modificar
bases de datos (ColdFusion)
Puede emplear un procedimiento almacenado para modificar una base de datos. Un
procedimiento almacenado es un elemento de base de datos reutilizable almacenado que realiza
alguna operacin en la base de datos.
Antes de utilizar un procedimiento almacenado para modificar una base de datos, compruebe que
dicho procedimiento contiene SQL que modifique la base de datos de algn modo. Para crear y
almacenar uno en la base de datos, consulte la documentacin de la base de datos y un buen
manual de Transact-SQL.
Para aadir un procedimiento almacenado a una pgina de ColdFusion:
1 En Dreamweaver, abra la pgina que ejecutar el procedimiento almacenado.
seleccione Procedimiento almacenado.
Aparecer el cuadro de dilogo Procedimiento almacenado.
Despus de cerrar el cuadro de dilogo Procedimiento almacenado, Dreamweaver insertar cdigo
de ColdFusion en la pgina que, cuando se ejecute en el servidor, llamar a un procedimiento
almacenado en la base de datos. El procedimiento almacenado realizar a su vez una operacin de
base de datos, como insertar un registro.
Si el procedimiento almacenado toma parmetros, puede crear una pgina que recoja los valores
de los parmetros y los enve a la pgina con el procedimiento almacenado. Por ejemplo, puede
crear una pgina que utilice parmetros de URL o un formulario HTML que recoja los valores de
los parmetros de los usuarios.
Temas relacionados
Procedimientos almacenados en la pgina 656
Creacin de pginas que restrinjan el acceso al sitio (ColdFusion, ASP, JSP Y PHP) 689
Creacin de pginas que restrinjan el acceso al sitio
(ColdFusion, ASP, JSP Y PHP)
Puede utilizar Dreamweaver para crear las siguientes pginas que restrinjan el acceso al sitio:
Una pgina que obligue a los usuarios a registrarse en su primera visita al sitio (vase Creacin
de una pgina de registro en la pgina 689).
Una pgina que permita que los usuarios registrados se conecten al sitio (vase Creacin de
una pgina de inicio de sesin en la pgina 692).
Pginas que slo puedan ver los usuarios autorizados (vase Creacin de una pgina a la que
slo pueden acceder los usuarios autorizados en la pgina 695).
El mtodo que se utiliza es idntico para las pginas ColdFusion, ASP, JSP y PHP. Dreamweaver
no dispone de comportamientos de servidor de autenticacin para pginas ASP.NET.
Creacin de una pgina de registro
Una aplicacin Web puede contener una pgina que obligue a los usuarios a registrarse en su
primera visita al sitio.
Por ejemplo, la siguiente pgina solicita a los usuarios primerizos que se registren:
Una pgina de registro consta de los siguientes bloques:
Una tabla de base de datos para almacenar la informacin de conexin de los usuarios (vase
Almacenamiento de la informacin de conexin de los usuarios en la pgina 690).
Un formulario HTML en el que los usuarios pueden seleccionar un nombre de usuario y una
contrasea (vase Cmo permitir que los usuarios elijan un nombre de usuario y una
contrasea en la pgina 690).
Tambin puede utilizar el formulario para obtener informacin personal adicional de los
usuarios.
Un comportamiento de servidor Insertar registro para actualizar la tabla de la base de datos de
los usuarios del sitio (vase Actualizacin de la tabla de usuarios de la base de datos en
la pgina 691).
Un comportamiento de servidor Comprobar nuevo nombre de usuario para comprobar que el
nombre introducido por el usuario no lo utilice otro usuario (vase Comprobacin de que el
nombre de usuario elegido es exclusivo en la pgina 692).
Almacenamiento de la informacin de conexin de los usuarios
Una pgina de registro necesita utilizar una tabla de base de datos para almacenar la informacin
de conexin que introducen los usuarios. Asegrese de que la tabla de la base de datos contiene
columnas de nombre de usuario y contrasea. Si desea conceder distintos privilegios de acceso a
los usuarios, incluya tambin una columna de privilegio de acceso (vase Almacenamiento de
privilegios de acceso en la base de datos de usuarios en la pgina 696).
Si desea establecer una contrasea comn para todos los usuarios del sitio, configure la aplicacin
de base de datos (Microsoft Access, Microsoft SQL Server, Oracle, etc.) para introducir la
contrasea de forma predeterminada en todo nuevo registro de usuario. La mayora de las
aplicaciones de base de datos permiten establecer el valor predeterminado de una columna cada
vez que se crea un nuevo registro. Establezca el valor predeterminado de la contrasea.
Tambin puede utilizar la tabla de la base de datos para almacenar otra informacin de utilidad
sobre los usuarios.
El paso siguiente para crear una pgina de registro consiste en aadir un formulario HTML a la
pgina de registro para permitir a los usuarios seleccionar un nombre de usuario y una contrasea
(si corresponde).
Temas relacionados
Creacin de una pgina de registro en la pgina 689
Cmo permitir que los usuarios elijan un nombre de usuario y una
contrasea
Para que los usuarios puedan elegir un nombre de usuario y una contrasea (si corresponde),
deber aadir un formulario HTML a la pgina de registro.
Para permitir que los usuarios elijan un nombre de usuario y una contrasea:
1 Cree una nueva pgina (Archivo > Nuevo) y disponga la pgina de registro con las herramientas
de diseo de Dreamweaver.
2 Aada un formulario HTML; para ello, site el punto de insercin donde desea que aparezca el
formulario y seleccione Formulario en el men Insertar.
del formulario.
comportamiento de servidor Insertar registro configura estos atributos automticamente (vase
Actualizacin de la tabla de usuarios de la base de datos en la pgina 691).
4 Aada campos de texto (Insertar > Formulario > Campo de texto) para permitir que el usuario
introduzca el nombre de usuario y la contrasea.
El formulario tambin puede incluir otros objetos formulario para obtener informacin
personal adicional.
Deber aadir etiquetas (de texto o imgenes) junto a cada objeto de formulario para indicar a
los usuarios la informacin que deben introducir. Tambin es recomendable alinear los objetos
situndolos dentro de una tabla HTML. Para ms informacin sobre objetos de formulario,
consulte Insercin de objetos de formulario HTML en la pgina 637.
El siguiente paso para crear una pgina de registro consiste en aadir el comportamiento de
servidor Insertar registro para insertar registros en la tabla de usuarios de la base de datos.
Temas relacionados
Actualizacin de la tabla de usuarios de la base de datos
Debe aadir un comportamiento de servidor Insertar registro a la pgina de registro para
actualizar la tabla de usuarios en la base de datos.
Para actualizar la tabla de usuarios de la base de datos:
clic en el botn de signo ms (+) y seleccione Insertar registro del men emergente.
Aparecer el cuadro de dilogo Insertar registro.
2 Complete el cuadro de dilogo asegurndose de indicar la tabla de usuarios de la base de datos
en la que se insertarn los datos de usuario.
El ltimo paso para crear una pgina de registro consiste en comprobar que el nombre de usuario
no est siendo utilizado por otro usuario registrado.
Temas relacionados
Comprobacin de que el nombre de usuario elegido es exclusivo
Para asegurarse de que el nombre de usuario introducido no est siendo utilizado por otro usuario
registrado, puede aadir un comportamiento de servidor.
Para comprobar que el nombre de usuario elegido es exclusivo:
clic en el botn de signo ms (+) y seleccione Autenticacin de usuarios > Comprobar nuevo
nombre de usuario en el men emergente.
Aparecer el cuadro de dilogo Comprobar nuevo nombre de usuario.
Dreamweaver aade a la pgina de registro un comportamiento de servidor que comprueba que el
nombre de usuario enviado por un visitante es exclusivo antes de aadir la informacin de ese
visitante a la base de datos de usuarios registrados.
Cuando el usuario hace clic en el botn Enviar de la pgina de registro, el comportamiento de
servidor compara el nombre utilizado con los nombres de usuario almacenados en una tabla de
base de datos de usuarios registrados. Si el nombre de usuario no se encuentra en la tabla de la
base de datos, el comportamiento de servidor lleva a cabo la insercin del registro con
normalidad. Si el nombre de usuario ya existe, el comportamiento de servidor cancela la
operacin de insercin del registro y abre una nueva pgina en la que, generalmente, se indica al
usuario que el nombre de usuario introducido ya est reservado.
Temas relacionados
Creacin de una pgina de inicio de sesin
Una aplicacin Web puede contener una pgina que permita que los usuarios registrados se
conecten al sitio.
Por ejemplo, la siguiente pgina solicita a los usuarios registrados que se conecten:
Una pgina de conexin consta de los siguientes elementos:
Una tabla de base de datos de usuarios registrados (vase Creacin de una tabla de base de
datos de usuarios registrados en la pgina 693).
Un formulario HTML en el que los usuarios pueden introducir un nombre de usuario y una
contrasea (vase Cmo permitir que los usuarios se conecten en la pgina 693).
Un comportamiento de servidor Conectar usuario para comprobar que el nombre de usuario y
la contrasea que se han introducido son vlidos (vase Comprobacin del nombre de usuario
y la contrasea en la pgina 694).
Cuando el usuario se conecta correctamente, se crea una variable de sesin que contiene su
nombre de usuario.
Creacin de una tabla de base de datos de usuarios registrados
Necesita una tabla de base de datos de usuarios registrados para comprobar si el nombre de
usuario y la contrasea introducidos en la pgina de conexin son vlidos. Utilice la aplicacin de
base de datos y una pgina de registro para crear la tabla. Para ms informacin, consulte
Creacin de una pgina de registro en la pgina 689.
El paso siguiente para crear una pgina de conexin consiste en aadir un formulario HTML a la
pgina para que los usuarios puedan conectarse.
Temas relacionados
Creacin de una pgina de inicio de sesin en la pgina 692
Cmo permitir que los usuarios se conecten
Para que los usuarios se conecten introduciendo un nombre de usuario y una contrasea, deber
aadir un formulario HTML a la pgina.
Para que los usuarios puedan conectarse:
1 Cree una pgina (Archivo > Nuevo) y disee la pgina de conexin utilizando las herramientas
de diseo de Dreamweaver.
2 Para aadir un formulario HTML, site el punto de insercin donde desea que aparezca el
formulario y elija Formulario en el men Insertar.
del formulario.
comportamiento de servidor Conectar usuario configura estos atributos automticamente
(vase Comprobacin del nombre de usuario y la contrasea en la pgina 694).
4 Aada campos de texto al formulario para el nombre de usuario y la contrasea (Insertar >
Formulario > Campo de texto).
Coloque etiquetas (de texto o imgenes) junto a cada campo de texto y, para alinear los
campos, sitelos dentro de una tabla HTML y asigne el valor 0 al atributo border de la misma.
El paso siguiente para crear una pgina de conexin consiste en aadir el comportamiento del
servidor Conectar usuario para asegurarse de que el nombre de usuario introducido y la
contrasea sean vlidas.
Temas relacionados
Comprobacin del nombre de usuario y la contrasea
Debe aadir un comportamiento de servidor Conectar usuario a la pgina de inicio de sesin para
asegurarse de que el nombre de usuario y la contrasea introducidos por un usuario sean vlidos.
Para comprobar el nombre de usuario y la contrasea:
clic en el botn de signo ms (+) y seleccione Autenticacin de usuarios > Conectar usuario en
el men emergente.
Aparecer el cuadro de dilogo Conectar usuario.
Dreamweaver aade a la pgina de conexin un comportamiento de servidor que comprueba que
el nombre de usuario y la contrasea introducidos por un visitante son vlidos.
Cuando el usuario hace clic en el botn Enviar de la pgina de conexin, el comportamiento de
servidor Conectar usuario compara los valores introducidos con los de los usuarios registrados. Si
coinciden, el comportamiento de servidor abre una pgina (generalmente, la pgina de inicio del
sitio). En caso contrario, el comportamiento de servidor abre otra pgina en la que, normalmente,
se advierte al usuario de que el intento de conexin ha fallado.
Temas relacionados
Creacin de una pgina a la que slo pueden acceder los usuarios autorizados
Una aplicacin Web puede contener una pgina protegida a la que slo pueden acceder los
usuarios autorizados.
Nota: Dreamweaver no dispone de comportamientos de servidor de autenticacin para pginas
ASP.NET.
Por ejemplo, si un usuario intenta omitir la pgina de conexin escribiendo en el navegador el
URL de la pgina protegida, es posible remitirle a otra pgina. De manera similar, si define el
nivel de autorizacin de una pgina como administrador, slo podrn acceder a ella los usuarios
con privilegios de acceso de administrador. Si un usuario conectado intenta acceder a la pgina
protegida sin los privilegios de acceso necesarios, se le remite a otra pgina.
Tambin puede utilizar niveles de autorizacin para evaluar a los usuarios recin registrados antes
de concederles acceso total al sitio. Por ejemplo, puede que desee recibir un pago antes de permitir
que un usuario acceda a las pginas de miembros del sitio. Para ello, puede proteger las pginas
para miembros con un nivel de autorizacin de miembro y conceder slo privilegios de invitado a
los usuarios recin registrados. Tras recibir el pago, puede actualizar los privilegios de acceso del
usuario a los de miembro (en la tabla de la base de datos de usuarios registrados).
Si no tiene previsto utilizar niveles de autorizacin, puede proteger cualquiera de las pginas del
sitio aadiendo a la misma un comportamiento de servidor Restringir acceso a la pgina. El
comportamiento de servidor enva a otra pgina a todo usuario que no se haya conectado
correctamente. Para ms informacin, consulte Cmo remitir a otra pgina a los usuarios no
autorizados en la pgina 695.
Si tiene la intencin de utilizar niveles de autorizacin, puede proteger cualquiera de las pginas
del sitio por medio de los siguientes elementos:
Un comportamiento de servidor Restringir acceso a la pgina para enviar a los usuarios no
autorizados a otra pgina (vase Cmo remitir a otra pgina a los usuarios no autorizados en
la pgina 695).
Una columna adicional en la tabla de la base de datos de usuarios para almacenar los privilegios
de acceso de cada usuario (vase Almacenamiento de privilegios de acceso en la base de datos
de usuarios en la pgina 696).
Tanto si utiliza niveles de autorizacin como si no, puede aadir un vnculo a la pgina protegida
para que el usuario pueda desconectarse y se borren las variables de sesin. Para ms informacin,
consulte Desconexin de usuarios en la pgina 697.
Cmo remitir a otra pgina a los usuarios no autorizados
Para impedir el acceso de los usuarios no autorizados a una pgina, deber aadir a la misma un
comportamiento de servidor Restringir acceso a la pgina. Este comportamiento de servidor
remite a otra pgina a todo usuario que intente omitir la pgina de conexin escribiendo
directamente el URL de una pgina protegida en un navegador o que, estando conectado, intente
acceder a una pgina protegida sin contar con los privilegios de acceso necesarios.
Nota: el comportamiento de servidor Restringir acceso a la pgina slo permite proteger pginas
HTML. No protege otros recursos del sitio, como los archivos de imagen o de audio, por ejemplo.
Si desea asignar los mismos derechos de acceso a varias pginas del sitio, puede copiarlos y
pegarlos de una pgina a otra.
Para remitir a otra pgina a los usuarios no autorizados:
1 Abra la pgina que desea proteger.
clic en el botn de signo ms (+) y seleccione Autenticacin de usuarios > Restringir acceso a la
pgina en el men emergente.
Aparecer el cuadro de dilogo Restringir acceso a la pgina.
Dreamweaver aade un comportamiento de servidor a la pgina que slo permite ver la pgina a
los usuarios autorizados.
Para copiar y pegar los derechos de acceso de una pgina a otras pginas del sitio:
1 Abra la pgina protegida y seleccione el comportamiento de servidor Restringir acceso a la
pgina que aparece en el panel Comportamientos del servidor (no el del men emergente del
signo ms).
2 Haga clic en el botn de flecha de la esquina superior derecha del panel y seleccione Copiar en
el men emergente.
El comportamiento de servidor Restringir acceso a la pgina se copia al Portapapeles del
sistema.
3 Abra otra pgina que desee proteger del mismo modo.
clic en el botn de flecha situado en la esquina superior derecha y seleccione Pegar en el men
emergente.
5 Repita los pasos 3 y 4 en cada pgina que desee proteger.
Temas relacionados
Almacenamiento de privilegios de acceso en la base de datos de usuarios en la pgina 696
Almacenamiento de privilegios de acceso en la base de datos de usuarios
Este elemento slo es necesario si desea que los usuarios conectados puedan tener distintos
privilegios de acceso. Si slo desea que los usuarios se conecten, no necesita almacenar los
privilegios de acceso.
Si desea que los usuarios conectados tengan distintos privilegios de acceso, asegrese de que la
tabla de la base de datos de usuario contiene una columna en la que se especifican los privilegios
de acceso de cada usuario (invitado, usuario, administrador, etc.). El administrador del sitio
deber introducir en la base de datos los privilegios de acceso de cada usuario.
La mayora de las aplicaciones de base de datos permiten establecer el valor predeterminado de
una columna cada vez que se crea un nuevo registro. Establezca el privilegio de acceso ms
habitual como valor predeterminado del sitio (por ejemplo, invitado) y cambie manualmente los
casos que sean una excepcin (por ejemplo, cambiar de invitado a administrador). Ahora el
usuario tiene acceso a todas las pginas de administrador.
Asegrese de que todos los usuarios de la base de datos tienen un solo privilegio de acceso (como
invitado o administrador) y no varios (como Usuario, Administrador). Si desea establecer varios
privilegios de acceso a las pginas (por ejemplo, para que todos los invitados y administradores
puedan ver una pgina), establzcalos a nivel de la pgina, no de la base de datos.
Temas relacionados
Cmo remitir a otra pgina a los usuarios no autorizados en la pgina 695
Desconexin de usuarios
Cuando un usuario se conecta correctamente, se crea una variable de sesin que contiene el
nombre de usuario correspondiente. Cuando el usuario abandona el sitio, se puede utilizar el
comportamiento de servidor Desconectar usuario para borrar la variable de sesin y enviar al
usuario a otra pgina (generalmente, una pgina de despedida o de agradecimiento).
Puede llamar al comportamiento de servidor Desconectar usuario cuando el usuario hace clic en
un vnculo o al cargar una pgina dada.
Para aadir un vnculo para desconectar al usuario:
1 Seleccione el texto o la imagen en una pgina que se utilizar como vnculo.
2 En el panel Comportamientos del servidor (Ventana > Comportamientos), haga clic en el botn
de signo ms (+) y elija Autenticacin de usuarios > Desconectar usuario.
Aparecer el cuadro de dilogo Desconectar usuario.
3 Especifique la pgina que se debe abrir cuando el usuario haga clic en el vnculo.
Generalmente, se trata de una pgina de despedida o agradecimiento.
Para desconectar un usuario al cargar una pgina concreta:
1 Abra la pgina que se cargar en Dreamweaver.
Generalmente, se trata de una pgina de despedida o agradecimiento.
2 En el panel Comportamientos de servidor, haga clic en el botn de signo ms (+) y elija
Autenticacin de usuarios > Desconectar usuario.
Aparecer el cuadro de dilogo Desconectar usuario.
3 Seleccione la opcin Desconectar al cargarse la pgina.
Temas relacionados
Creacin de una pgina a la que slo pueden acceder los usuarios autorizados en
la pgina 695
699
CAPTULO 41
Creacin rpida de aplicaciones ASP.NET
una aplicacin Web ASP.NET con poca o ninguna codificacin.
Temas relacionados
Desarrollo rpido de aplicaciones (todos los servidores) en la pgina 653
Creacin de pginas maestra-detalle (ASP.NET)
detalle.
Temas relacionados
Mejora de la funcionalidad de una pgina dinmica en la pgina 528
Creacin de la pgina maestra (ASP.NET)
datos. Con ASP.NET, puede utilizar una cuadrcula de datos para enumerar los registros en la
pgina.
Antes de empezar, asegrese de definir una conexin de base de datos para el sitio. Para ms
informacin, consulte el Captulo 25, Conexiones de base de datos para desarrolladores de
ASP.NET, en la pgina 479.
1 Cree una nueva pgina ASP.NET.
Seleccione Archivo > Nuevo > Pgina dinmica, seleccione un formato de pgina ASP.NET y
haga clic en Crear. Se abre una pgina .aspx en blanco en Dreamweaver.
2 Defina un conjunto de datos para la pgina.
En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botn ms (+), seleccione
Conjunto de datos (consulta) y complete el cuadro de dilogo. Para ms informacin, haga clic
en el botn Ayuda del cuadro de dilogo. Si desea escribir sus propias declaraciones SQL, haga
clic en el botn Avanzado para abrir el cuadro de dilogo Conjunto de datos avanzado.
700 Captulo 41: Creacin rpida de aplicaciones ASP.NET
Asegrese de que el conjunto de datos contiene todas las columnas de la tabla necesarias para
crear la pgina maestra.
El conjunto de datos tambin debe incluir la columna de la tabla que contiene la clave
exclusiva de cada registro, es decir, la columna ID del registro.
Normalmente, el conjunto de datos de la pgina maestra extrae unas pocas columnas de una
tabla de una base de datos, mientras que un conjunto de datos de la pgina detalle extrae ms
El conjunto de datos puede definirlo el usuario durante la ejecucin. Para ms informacin,
consulte Creacin de una pgina de bsqueda en la base de datos (ASP.NET) en
la pgina 705.
3 Cree una cuadrcula de datos en la pgina:
En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga
clic en el botn ms (+), seleccione Cuadrcula de datos y elija las opciones que desee del
cuadro de dilogo Cuadrcula de datos. Para ms informacin, haga clic en el botn Ayuda del
cuadro de dilogo. Acepte el tipo de columna predeterminado de Campo de datos sencillo para
cada columna en la cuadrcula de datos. En la siguiente seccin, cambiar el tipo de una
columna por Hipervnculo (vase Apertura de una pgina detalle y transferencia de un ID de
registro (ASP.NET) en la pgina 701).
A continuacin, se ofrece un ejemplo del cuadro de dilogo Cuadrcula de datos que define tres
columnas.
El siguiente paso para crear pginas maestra-detalle es crear vnculos que abran la pgina detalle y
pasen el ID del registro que el usuario ha seleccionado.
Creacin de pginas maestra-detalle (ASP.NET) 701
Apertura de una pgina detalle y transferencia de un ID de registro
(ASP.NET)
Despus de aadir una cuadrcula de datos a la pgina maestra, debe crear vnculos que abran la
pgina detalle y pasen el ID del registro que el usuario ha seleccionado. La pgina detalle utilizar
este ID para encontrar el registro solicitado en la base de datos y lo mostrar.
En una cuadrcula de datos, cree estos vnculos transformando una columna de la cuadrcula de
datos en una columna de hipervnculo y configurando sus atributos, como se describe en esta
seccin.
Para abrir la pgina detalle y pasar un parmetro de URL que contiene el ID del registro en
el que el usuario ha hecho clic:
1 Abra el cuadro de dilogo Cuadrcula de datos que ha creado en la seccin anterior.
Para abrir el cuadro de dilogo, haga doble clic en la cuadrcula de datos del panel
Comportamientos del servidor (Ventana > Comportamientos del servidor).
2 En el cuadro Columnas, seleccione la columna a la que desea aplicar vnculos.
3 Haga clic en el botn Cambiar tipo de columna y seleccione Hipervnculo en el men
emergente.
Aparecer el cuadro de dilogo Columna Hipervnculo.
4 En el rea Texto de hipervnculo, especifique el texto que desea mostrar en la columna de
hipervnculo.
Si desea crear un vnculo genrico como Detalles para cada fila de la cuadrcula de datos,
seleccione la opcin Texto esttico y especifique el texto para el vnculo. Cada fila de la
cuadrcula de datos mostrar el mismo texto (como por ejemplo Detalles) en la columna de
hipervnculo.
Si desea aadir vnculos a los datos que aparecen en la columna, seleccione la opcin Campo de
datos y elija un campo de datos en el conjunto de datos. El campo de datos proporciona el
texto para los vnculos de la columna de hipervnculo. En el siguiente ejemplo, cada fila de la
cuadrcula de datos mostrar un nombre de ubicacin.
5 En el rea Pgina vinculada, cree el URL que se aplicar al texto en la columna de hipervnculo.
El URL no slo tiene que abrir la pgina detalle, sino que debe identificar exclusivamente el
registro que se debe mostrar en dicha pgina.
Para identificar el registro que debe mostrarse en la pgina detalle, seleccione la opcin Campo
de datos y seleccione un campo en el conjunto de datos que identifique exclusivamente cada
registro. En la mayora de los casos, el campo estar formado por un nmero de ID de registro.
En el siguiente ejemplo, el campo consta de cdigos de ubicacin exclusivos.
6 En el cuadro de texto Cadena de formato del rea Pgina vinculada, haga clic en el botn
Examinar y luego localice y seleccione la pgina detalle.
Dreamweaver crea un URL para la pgina detalle que incluye un parmetro de URL que
identifica el registro que la pgina detalle debe mostrar. Anote el nombre del parmetro de
URL porque lo utilizar ms adelante en la pgina detalle.
Por ejemplo, si selecciona locationDetail.aspx como pgina detalle, Dreamweaver crea el
siguiente URL:
Creacin de pginas maestra-detalle (ASP.NET) 703
En este caso, Dreamweaver crea un parmetro de URL denominado CODE. Dreamweaver copia
el nombre del campo de datos, pero no es obligatorio utilizar dicho nombre. Puede cambiarlo
por algo ms descriptivo, como por ejemplo, recordID, como en el siguiente ejemplo.
El elemento {0} es un marcador de posicin que corresponde al valor del campo de datos. Al
ejecutar la pgina, los valores del campo CODE del conjunto de datos se insertan en las filas
correspondientes de la cuadrcula de datos. Por ejemplo, si en Canberra, Australia, la sucursal
de alquiler tiene el cdigo CBR, se utilizar el siguiente URL en la fila de Canberra en la
cuadrcula de datos:
locationDetail.aspx?recordID=CBR
7 Haga clic en Aceptar para cerrar el cuadro de dilogo Hipervnculo; a continuacin, vuelva a
hacer clic en Aceptar para cerrar el cuadro de dilogo Cuadrcula de datos.
Dreamweaver actualiza la cuadrcula de datos en la pgina.
El siguiente paso para crear pginas maestra-detalle es modificar la pgina detalle para que pueda
localizar el registro solicitado en la base de datos y mostrarlo en la pgina.
Bsqueda y visualizacin del registro solicitado en la pgina detalle
(ASP.NET)
Despus de crear la pgina maestra, deber buscar el registro solicitado en la base de datos y
mostrarlo en la pgina detalle. El procedimiento consiste en definir un conjunto de datos en la
pgina detalle para que contenga un registro (el registro solicitado por la pgina maestra) y
vincular las columnas del conjunto de datos a la pgina.
1 Cambie a la pgina detalle.
Si no existe ninguna, seleccione Archivo > Nuevo > Pgina dinmica, elija un formato de
pgina ASP.NET y haga clic en Crear. Se abre una pgina .aspx en blanco en Dreamweaver.
seleccione Conjunto de datos (consulta) en el men emergente.
Aparecer el cuadro de dilogo Conjunto de datos sencillo. Si aparece el cuadro de dilogo
Conjunto de datos avanzado, haga clic en Simple para cambiar al cuadro de dilogo Conjunto
de datos sencillo.
3 Asigne un nombre al conjunto de datos y luego seleccione una conexin y una tabla de base de
datos que proporcionar datos al conjunto de datos.
4 En el rea Columnas, elija las columnas de la tabla que deben incluirse en el conjunto de datos.
El conjunto de datos puede ser igual o distinto del conjunto de datos de la pgina maestra.
Generalmente, el conjunto de datos de una pgina detalle incluye ms columnas para mostrar
ms informacin.
Si los conjuntos de datos son distintos, asegrese de que la pgina detalle contiene como
mnimo una columna en comn con el conjunto de datos de la pgina maestra. La columna
Para incluir algunas de las columnas de la tabla en el conjunto de datos, seleccione la opcin
Seleccionado y elija las columnas que desee presionando Control (Windows) o Comando
En el primer men emergente del rea Filtro, seleccione la columna del conjunto de datos
que contiene valores que coinciden con el valor del parmetro de URL que ha
proporcionado la pgina maestra.
Por ejemplo, si el parmetro de URL contiene un nmero de ID de registro, seleccione la
columna que contiene nmeros de ID de registros. En el ejemplo tratado en la seccin
anterior, la columna de conjunto de datos denominada CODE contiene los valores que
coinciden con el valor del parmetro de URL que ha proporcionado la pgina maestra.
Seleccione el signo igual (si todava no est seleccionado) del men emergente situado junto
al primer men.
Seleccione Parmetro de URL en el tercer men emergente.
Escriba el nombre del parmetro de URL que ha proporcionado la pgina maestra en el
cuarto cuadro.
Por ejemplo, si el URL que la pgina maestra ha utilizado para abrir la pgina detalle
contena el sufijo locationDetail.aspx?recordID=CBR, especifique recordID.
El cuadro de dilogo Conjunto de datos debe ser parecido al siguiente:
El conjunto de datos aparecer en el panel Vinculaciones.
Creacin de una pgina de bsqueda en la base de datos (ASP.NET) 705
7 Vincule las columnas del conjunto de datos a la pgina detalle seleccionando las columnas del
la pgina 567.
Ha finalizado la configuracin de la pgina maestra-detalle ASP.NET.
Despus de crear pginas maestra-detalle, puede utilizar el panel Comportamientos del servidor
(Ventana > Comportamientos del servidor) para modificar los distintos componentes.
Creacin de una pgina de bsqueda en la base de datos
(ASP.NET)
Puede utilizar Dreamweaver para crear una pgina que efecte una bsqueda en una base de datos
y muestre los resultados en una cuadrcula de datos.
En esta seccin de explican los pasos para crear una pgina de bsqueda en la base de datos:
Adicin de controles de bsqueda (ASP.NET) en la pgina 705
Bsqueda con un solo parmetro de bsqueda (ASP.NET) en la pgina 706
Bsqueda con mltiples parmetros de bsqueda (ASP.NET) en la pgina 707
Visualizacin de los resultados en una cuadrcula de datos en la pgina 708
Cmo ocultar la cuadrcula de datos la primera vez que se carga la pgina en la pgina 709
Creacin de una pgina detalle (ASP.NET) en la pgina 710
Adicin de controles de bsqueda (ASP.NET)
Una pgina de bsqueda en la Web normalmente contiene campos de formulario en los que los
usuarios introducen parmetros de bsqueda. Cuando el usuario hace clic en un botn, aparecen
los resultados de la bsqueda.
Para aadir el formulario de bsqueda a la pgina:
1 Abra la pgina de bsqueda y seleccione Insertar > Formulario > Formulario.
En el inspector de propiedades del formulario, debe seleccionar POST como el atributo Mtodo
del formulario. No es necesario especificar un atributo Accin para el formulario. La
informacin volver a la pgina ASP.NET y los resultados de la bsqueda se mostrarn en la
misma pgina.
2 Aada controles de formulario para que los usuarios especifiquen los parmetros de bsqueda
(Insertar > Objetos ASP.NET).
Puede insertar cualquier control de formulario ASP.NET, como cuadro de texto, una casilla de
verificacin, un botn de opcin, un cuadro de lista o una lista desplegable. Puede aadir
tantos controles como desee para ayudar a los usuarios a restringir las bsquedas. No obstante,
recuerde que cuanto mayor sea el nmero de parmetros de bsqueda de la pgina de
bsqueda, ms compleja ser la declaracin SQL.
Para cada control, asegrese de especificar un atributo ID como txtCity para un control de
cuadro de texto o lbxCountry para un control de cuadro de lista.
Para ms informacin, consulte Adicin de controles de formulario ASP.NET a una pgina
en la pgina 647.
3 Aada un botn ASP.NET al formulario (Insertar > Objetos ASP.NET > asp:Button).
Asegrese de especificar un atributo ID para el botn, como btnSearch y el texto para la
etiqueta del botn como Buscar.
Ya ha terminado el formulario de bsqueda. El siguiente paso para crear la pgina de bsqueda es
definir el conjunto de datos en el que se buscarn y almacenarn los resultados de la bsqueda.
Bsqueda con un solo parmetro de bsqueda (ASP.NET)
Cuando el usuario hace clic en el botn Buscar de la pgina, se enva al servidor el parmetro de
bsqueda. El servidor procesa la peticin, crea un conjunto de datos filtrado basndose en el
parmetro, rellena una cuadrcula de datos y devuelve la pgina al navegador.
Antes de aadir la cuadrcula de datos, debe definir un conjunto de datos que busque y almacene
todos los registros que cumplan con los criterios de bsqueda.
Para crear el conjunto de datos que contendr los resultados de la bsqueda:
Conjunto de datos (consulta).
dilogo sencillo.
2 Asigne un nombre al conjunto de datos y despus elija una conexin y la tabla de la base de datos
que contiene los datos en los que desea que los usuarios efecten bsquedas.
3 En el rea Columna, haga clic en la opcin Seleccionado y seleccione una columna de clave
(generalmente, la columna ID del registro) y las columnas que contienen los datos que desea
mostrar en la cuadrcula de datos.
Deje abierto por ahora el cuadro de dilogo Conjunto de datos. Tendr que utilizarlo a
continuacin para recuperar los parmetros de bsqueda enviados al servidor y crear un conjunto
de datos que excluya los registros que no cumplan los parmetros.
Para crear un filtro de conjunto de datos:
1 En el primer men emergente del rea Filtro, seleccione una columna de la tabla para
compararla con el parmetro de bsqueda enviado por la pgina de bsqueda.
Por ejemplo, si el valor enviado por la pgina de bsqueda es un nombre de una ciudad,
seleccione en la tabla la columna que contiene nombres de ciudades.
2 Desde el men emergente situado junto al primer men, seleccione el signo igual (que debe ser
el predeterminado).
Esta eleccin indica que el usuario slo desea obtener los registros para los que la columna de
tabla seleccionada coincide exactamente con la especificada en la pgina de bsqueda. Puede
utilizar una opcin menos restrictiva, como, por ejemplo, comienza con o contiene.
3 En el tercer men emergente, seleccione Variable de formulario.
El parmetro lo enva al servidor un formulario utilizando el mtodo POST.
4 En el cuarto cuadro de texto, especifique el nombre del control de formulario que envi el
parmetro de bsqueda al servidor.
Puede obtener el nombre haciendo clic en el control de formulario del formulario para
seleccionarlo y comprobando el ID del control en el inspector de propiedades.
5 Si lo desea, haga clic en Prueba, introduzca un valor de prueba y haga clic en Aceptar para
conectar con la base de datos y crear una instancia del conjunto de datos.
El valor de prueba simula el valor que, de otro modo, habra sido devuelto por la pgina de
bsqueda. Haga clic en Aceptar para cerrar el conjunto de datos.
6 Si est satisfecho con el conjunto de datos, haga clic en Aceptar.
Dreamweaver inserta cdigo en la pgina que, cuando se ejecuta en el servidor, comprueba cada
registro de la tabla de la base de datos. Si el campo especificado en un registro cumple la condicin
de filtro, el registro se incluir en el conjunto de datos. El cdigo crea un juego de registros que
contiene nicamente los resultados de la bsqueda.
El siguiente paso para crear la pgina de bsqueda es mostrar los resultados de bsqueda en una
cuadrcula de datos. Vase Visualizacin de los resultados en una cuadrcula de datos en
la pgina 708.
Bsqueda con mltiples parmetros de bsqueda (ASP.NET)
Si la pgina de bsqueda enva ms de un parmetro de bsqueda al servidor, deber escribir una
consulta SQL y utilizar los parmetros de bsqueda en las variables SQL.
Nota: si slo tiene una condicin de bsqueda, puede utilizar el cuadro de dilogo Conjunto de datos
sencillo para definir el conjunto de datos (vase Bsqueda con un solo parmetro de bsqueda
(ASP.NET) en la pgina 706).
Para buscar registros de una base de datos empleando SQL:
1 Abra la pgina de resultados en Dreamweaver y cree un nuevo conjunto de datos; para ello abra
el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botn ms (+) y, a
continuacin, seleccione el conjunto de datos del men emergente.
2 Compruebe que aparece el cuadro de dilogo Conjunto de datos avanzado.
Si aparece la versin sencilla del cuadro de dilogo, cambie a la versin avanzada haciendo clic
en el botn Avanzada.
3 Introduzca un nombre para el conjunto de datos y elija una conexin.
4 Introduzca una declaracin de seleccin (Select) en el rea de texto SQL.
Compruebe que la declaracin incluye una clusula WHERE con marcadores de posicin en
forma de signos de interrogacin (?) para los parmetros de bsqueda. El siguiente ejemplo
contiene dos marcadores de posicin:
SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION
FROM EMPLOYEE WHERE LASTNAME LIKE ?
AND DEPARTMENT LIKE ?
Para obtener ayuda sobre la sintaxis SQL, vase Apndice B, Nociones bsicas de SQL, en
la pgina 781.
5 En los marcadores de posicin, indique los valores de los parmetros de bsqueda; para ello haga
clic en el botn ms (+) en el rea Parmetros e introduzca el nombre, el tipo y el valor del
parmetro.
Los parmetros deben enumerarse en el mismo orden en el que aparecen en la declaracin
SQL.
En el cuadro de texto Nombre, indique cualquier nombre de parmetro vlido. El nombre no
puede contener espacios ni caracteres especiales.
En el men emergente Tipo, seleccione un tipo de datos. Por ejemplo, si el parmetro
contendr texto, seleccione WChar.
En el cuadro Valor, introduzca la variable de servidor que contendr el valor del parmetro. Por
ejemplo, si el nombre del control de formulario de la pgina de bsqueda es txtCity, se crear
una variable de servidor llamada Request.Form(txtCity) con un valor almacenado en ella.
Tambin puede introducir una expresin ms completa que especifique un valor
predeterminado, en caso de que la variable de servidor no exista. Por ejemplo, si realiza una
bsqueda en una base de datos de Microsoft Access, puede utilizar % como valor
predeterminado. La siguiente expresin comprueba si la variable de servidor
Request.Form("txtCity") existe. Si existe la variable (es decir, si no es igual a nada), la
expresin devuelve el valor de la variable; si no existe, la expresin devuelve el valor
predeterminado de %.
(IIf((Request.Form("txtCity") <> Nothing),
Request.Form("txtCity"), "")) + "%"
Para ms informacin, consulte el material de referencia del lenguaje Visual Basic o C#.
6 Si lo desea, haga clic en Prueba para crear una instancia del conjunto de datos mediante los
valores predeterminados de las variables.
Los valores predeterminados simulan el valor que, de otro modo, habra sido devuelto por la
pgina de bsqueda. Haga clic en Aceptar para cerrar el conjunto de datos de prueba.
7 Si est satisfecho con el conjunto de datos, haga clic en Aceptar.
Dreamweaver inserta la consulta SQL en la pgina.
El siguiente paso ser mostrar los resultados de la bsqueda en una cuadrcula de datos.
Visualizacin de los resultados en una cuadrcula de datos
Despus de crear un conjunto de datos para que contenga los resultados de la bsqueda , puede
utilizar una cuadrcula de datos para mostrar la informacin en la pgina.
Para mostrar los resultados de la bsqueda en una cuadrcula de datos:
1 En la pgina de bsqueda, site el punto de insercin en el lugar en el que desea que aparezca la
cuadrcula de datos.
clic en el botn ms (+) y seleccione Cuadrcula de datos.
3 En el cuadro de texto ID, introduzca un nombre para la cuadrcula de datos, como dgLocation.
4 En el men emergente Conjunto de datos, seleccione el conjunto de datos que ha definido para
que contenga los resultados de la bsqueda.
5 Complete el resto del cuadro de dilogo como desee.
A continuacin, se muestra un ejemplo de un cuadro de dilogo Cuadrcula de datos que crear
una cuadrcula de datos con tres columnas y diez filas y vnculos con las pginas de resultados
anterior y siguiente.
La cuadrcula de datos aparecer la primera vez que la pgina se cargue aunque el usuario todava
no haya realizado una bsqueda. Cuando la pgina se carga por primera vez puede ocultar la
cuadrcula de datos.
Cmo ocultar la cuadrcula de datos la primera vez que se carga la pgina
La primera vez que se carga la pgina de bsqueda, puede ocultar la cuadrcula de datos que se
utilizar para mostrar los resultados de la bsqueda.
Para ocultar la cuadrcula de datos la primera vez que se carga la pgina:
1 Abra la pgina de bsqueda en la vista Cdigo (Ver > Cdigo).
2 Inmediatamente despus de la directiva Register, al principio de la pgina, introduzca el
siguiente bloque de cdigo si el lenguaje de la pgina es Visual Basic:
<script runat="server">
Sub Page_Load()
If Not IsPostBack Then
dgName.Visible = false
Else
dgName.Visible = true
End If
End Sub
</script>
donde dgName es el ID de la cuadrcula de datos.
Si el lenguaje de la pgina es C#, especifique el siguiente cdigo:
<script runat="server">
void Page_Load() {
if (!IsPostBack) {
dgName.Visible = false;
}else{
dgName.Visible = true;
}
}
</script>
3 Guarde la pgina.
Creacin de una pgina detalle (ASP.NET)
La pgina de bsqueda puede incluir una pgina detalle para mostrar ms informacin sobre
registros especficos listados en la cuadrcula de datos. En esta situacin, la pgina de bsqueda
acta como la pgina maestra de un juego de pginas maestra-detalle. Para ms informacin,
consulte Creacin de pginas maestra-detalle (ASP.NET) en la pgina 699.
Creacin de una pgina de insercin de registro (ASP.NET)
Puede utilizar Dreamweaver para crear una pgina que deje a los usuarios insertar nuevos registros
en una base de datos. El mtodo que utilice ser idntico para todas las tecnologas de servidor
que admita Dreamweaver. Para instrucciones, vase Creacin de una pgina de insercin de
registro (todos los servidores) en la pgina 671.
Creacin de pginas para actualizar un registro (ASP.NET)
Bsqueda del registro que desea actualizar (ASP.NET) en la pgina 711
Apertura de la pgina de actualizacin y transferencia del ID del registro (ASP.NET) en
la pgina 711
Recuperacin del registro que se actualiza (ASP.NET) en la pgina 713
Cmo completar la pgina de actualizacin en una operacin (ASP.NET) en la pgina 714
Cmo completar la pgina de actualizacin elemento a elemento (ASP.NET) en
la pgina 715
Temas relacionados
Creacin de pginas para eliminar un registro (ASP.NET) en la pgina 717
Creacin de pginas para actualizar un registro (ASP.NET) 711
Bsqueda del registro que desea actualizar (ASP.NET)
necesitar una pgina de bsqueda que funcione con la pgina de actualizacin. El usuario
selecciona el registro que desea actualizar en la cuadrcula de datos de resultados generada en la
pgina de bsqueda. Cuando el usuario hace clic en el registro, aparece la pgina de actualizacin
y muestra el registro en un formulario.
Para instrucciones sobre cmo crear una pgina para buscar el registro que desea actualizar, vase
Despus de crear la pgina de bsqueda, el siguiente paso ser crear vnculos en la pgina de
resultados que abran la pgina de actualizacin cuando se haga clic en ellos.
Apertura de la pgina de actualizacin y transferencia del ID del registro
(ASP.NET)
Despus de crear la pgina de bsqueda , debe crear vnculos que abran la pgina de actualizacin
y pasen el ID del registro que el usuario ha seleccionado. La pgina de actualizacin utilizar este
ID para localizar el registro solicitado en la base de datos y mostrarlo.
En esta seccin se da por sentado que ha seguido las instrucciones de Creacin de una pgina de
bsqueda en la base de datos (ASP.NET) en la pgina 705 para que la pgina de bsqueda utilice
una cuadrcula de datos para mostrar registros.
Para crear vnculos en la pgina de bsqueda que abran la pgina de actualizacin y pasen
el ID del registro:
1 Abra la pgina de bsqueda en Dreamweaver.
2 Haga doble clic en el objeto Cuadrcula de datos que aparece en el panel Comportamientos del
servidor (Ventana > Comportamientos del servidor).
3 En el cuadro Columnas, seleccione la columna a la que desea aplicar vnculos.
4 Haga clic en el botn Cambiar tipo de columna y seleccione Hipervnculo en el men
emergente.
Aparecer el cuadro de dilogo Columna Hipervnculo.
5 En el rea Texto de hipervnculo, especifique el texto que desea mostrar en la columna de
hipervnculo.
Si desea crear un vnculo genrico como Actualizar para cada fila de la cuadrcula de datos,
seleccione la opcin Texto esttico y especifique el texto para el vnculo. Cada fila de la
cuadrcula de datos mostrar el mismo texto (como por ejemplo Actualizar) en la columna de
hipervnculo.
Si desea aadir vnculos a los datos que aparecen en la columna, seleccione la opcin Campo de
datos y elija un campo de datos en el conjunto de datos. El campo de datos proporciona el
texto para los vnculos de la columna de hipervnculo. En el siguiente ejemplo, cada fila de la
cuadrcula de datos mostrar un nombre de ubicacin.
El URL no slo tiene que abrir la pgina de actualizacin, sino que debe identificar
exclusivamente el registro que se debe mostrar en dicha pgina.
Para identificar el registro que debe mostrarse en la pgina de actualizacin, seleccione la
opcin Campo de datos y seleccione un campo en el conjunto de datos que identifique
exclusivamente cada registro. En la mayora de los casos, el campo estar formado por un
nmero de ID de registro. En el siguiente ejemplo, el campo consta de cdigos de ubicacin
exclusivos.
Examinar y luego localice y seleccione la pgina de actualizacin.
Dreamweaver crea un URL para la pgina de actualizacin que incluye un parmetro de URL,
que identifica el registro que la pgina de actualizacin debe mostrar. Anote el nombre del
parmetro de URL porque lo utilizar ms adelante en la pgina de actualizacin.
Por ejemplo, si selecciona locationUpdate.aspx como pgina de actualizacin, Dreamweaver
crea el siguiente URL y lo muestra en el cuadro de texto Cadena de formato:
locationUpdate.aspx?CODE={0}
En este caso, Dreamweaver crea un parmetro de URL denominado CODE. Dreamweaver
copia el nombre del campo de datos, pero no es obligatorio utilizar dicho nombre. Puede
cambiarlo en el cuadro de texto Cadena de formato por algo ms descriptivo, como recordID,
como se muestra en el siguiente ejemplo:
locationUpdate.aspx?recordID={0}
cuadrcula de datos:
locationUpdate.aspx?recordID=CBR
8 Haga clic en Aceptar para cerrar el cuadro de dilogo Hipervnculo y vuelva a hacer clic en
Aceptar para cerrar el cuadro de dilogo Cuadrcula de datos.
Dreamweaver actualiza la cuadrcula de datos en la pgina.
Despus de crear vnculos que abren la pgina de actualizacin y pasan el ID del registro que el
usuario ha seleccionado, la pgina de actualizacin debe recuperar el registro que se va a actualizar.
Recuperacin del registro que se actualiza (ASP.NET)
Cuando la pgina de bsqueda pasa un parmetro de URL a la pgina de actualizacin , la pgina
de actualizacin debe leer el parmetro, recuperar el registro de la tabla de la base de datos y
almacenarlo temporalmente en un conjunto de datos.
1 Cree una nueva pgina ASP.NET en Dreamweaver y gurdela.
Conjunto de datos (consulta).
dilogo sencillo.
3 Asigne un nombre al conjunto de datos y despus elija una conexin y la tabla de la base de datos
que contiene los datos que los usuarios deben actualizar.
parmetro de URL que ha facilitado la pgina de bsqueda.
Este tipo de filtro crea un conjunto de datos que contiene slo un registro: el registro con un
ID que coincide con el valor del parmetro de URL. Por ejemplo, si la columna de clave
contiene la informacin de ID del registro y se denomina CODE, y si la pgina de bsqueda
transfiere la informacin de ID del registro correspondiente en el parmetro de URL llamado
recordID, el rea Filtro debe presentar el siguiente aspecto:
Cuando el usuario seleccione un registro de la pgina de bsqueda, la pgina de actualizacin
generar un conjunto de datos que contendr nicamente el registro seleccionado.
Despus de modificar la pgina de actualizacin para recuperar un registro de la base de datos y
almacenarlo en un conjunto de datos, debe aadir un formulario para que los usuarios puedan
modificar los datos del registro. Tambin debe aadir la lgica necesaria para actualizar la base de
datos. Puede llevar a cabo estas tareas en una operacin o elemento por elemento. Vase Cmo
completar la pgina de actualizacin en una operacin (ASP.NET) en la pgina 714 o Cmo
completar la pgina de actualizacin elemento a elemento (ASP.NET) en la pgina 715.
Cmo completar la pgina de actualizacin en una operacin (ASP.NET)
Un conjunto de datos filtrado que permite recuperar el registro de una tabla de la base de datos
(vase Recuperacin del registro que se actualiza (ASP.NET) en la pgina 713).
datos.
que desea actualizar (ASP.NET) en la pgina 711, Apertura de la pgina de actualizacin y
transferencia del ID del registro (ASP.NET) en la pgina 711 y Recuperacin del registro que se
actualiza (ASP.NET) en la pgina 713.
personalizar por medio de las herramientas de diseo de pginas de Dreamweaver. Asegrese de
que todos los objetos de formulario se mantienen dentro de los lmites del formulario.
Cmo completar la pgina de actualizacin elemento a elemento (ASP.NET)
Un conjunto de datos filtrado que permite recuperar el registro de una tabla de la base de datos
(vase Recuperacin del registro que se actualiza (ASP.NET) en la pgina 713).
datos.
registro que desea actualizar (ASP.NET) en la pgina 711, Apertura de la pgina de
actualizacin y transferencia del ID del registro (ASP.NET) en la pgina 711 y Recuperacin del
registro que se actualiza (ASP.NET) en la pgina 713.
Para completar la pgina de actualizacin, debe llevar a cabo tres tareas:
modificar los datos
1 Cree una nueva pgina ASP.NET.
Pasar a ser su pgina de actualizacin.
propiedades (Ventana > Propiedades) e introduzca un nombre en el cuadro Nombre del
formulario.
Los objetos de formulario permiten a los usuarios modificar los datos. Generalmente se utilizan
campos de texto, pero tambin puede usar listas/mens, casillas de verificacin y botones de
opcin.
Cada objeto de formulario debe corresponder a una de las columnas del conjunto de datos
Para ms informacin sobre los objetos de formulario, consulte Insercin de objetos de
Creacin de pginas para eliminar un registro (ASP.NET) 717
1 Asegrese de haber definido un conjunto de datos para guardar en l el registro que desea
Para ms informacin, consulte Recuperacin del registro que se actualiza (ASP.NET) en
la pgina 713.
2 Vincule cada objeto de formulario a datos en el juego de registros.
Para ms informacin, consulte las siguientes secciones:
actualizar registros de una tabla de la base de datos haciendo clic en el botn Enviar del formulario.
Temas relacionados
Cmo completar la pgina de actualizacin en una operacin (ASP.NET) en la pgina 714
Creacin de pginas para eliminar un registro (ASP.NET)
existentes en una base de datos. Las pginas en general constan de una pgina de bsqueda y una
pgina de borrado. La pgina de bsqueda permite a los usuarios recuperar el registro y la pgina
de borrado permite a los usuarios eliminar el registro.
En esta seccin se explican los pasos para crear pginas ASP.NET que eliminan registros:
Bsqueda del registro que desea eliminar (ASP.NET) en la pgina 718
Creacin de vnculos de borrado en la pgina de bsqueda (ASP.NET) en la pgina 718
Visualizacin del registro en la pgina de confirmacin (ASP.NET) en la pgina 720
Adicin de lgica para eliminar el registro (ASP.NET) en la pgina 723
Bsqueda del registro que desea eliminar (ASP.NET)
una pgina de bsqueda que funcione con la pgina de borrado. El usuario introduce los criterios
de bsqueda en la pgina de bsqueda y selecciona el registro en los resultados de la bsqueda que
se muestran en una cuadrcula de datos. Cuando un usuario hace clic en el registro, aparece la
pgina de borrado y muestra el registro en un formulario HTML.
Para instrucciones sobre cmo crear una pgina para buscar el registro que desea eliminar, vase
Despus de crear la pgina de bsqueda, el siguiente paso es aadir botones de borrado o
hipervnculos a la cuadrcula de datos en la pgina de bsqueda.
Creacin de vnculos de borrado en la pgina de bsqueda (ASP.NET)
Despus de crear la pgina de bsqueda con una cuadrcula de datos, debe crear vnculos que
abran la pgina de confirmacin de borrado y pasen el ID del registro que el usuario ha
seleccionado. La pgina de confirmacin utilizar este ID para encontrar el registro solicitado en
la base de datos y lo mostrar.
El ID de registro se pasa a la pgina de confirmacin en un parmetro de URL. Para ms
En una cuadrcula de datos, cree estos vnculos aadiendo una columna de hipervnculo y
estableciendo sus atributos tal como se describe en esta seccin.
Para crear vnculos de borrado en la cuadrcula de datos en la pgina de bsqueda:
1 Abra el cuadro de dilogo Cuadrcula de datos que ha creado en la seccin anterior.
Para abrir el cuadro de dilogo, haga doble clic en la cuadrcula de datos del panel
Comportamientos del servidor. Asegrese de hacer doble clic en la cuadrcula de datos del
panel, no en el elemento de cuadrcula de datos que aparece en el men emergente al hacer clic
en el botn de signo ms (+).
2 Aada una columna de vnculos de borrado; para ello haga clic en el botn ms (+) y seleccione
Hipervnculo.
3 En el cuadro de texto Ttulo, introduzca un ttulo de columna como Eliminar.
El ttulo aparecer en el encabezado de columna.
4 Seleccione la opcin Texto esttico e introduzca el texto del vnculo, como por ejemplo eliminar
registro.
Cada fila de la cuadrcula de datos mostrar el mismo texto en la columna de hipervnculo.
El cuadro de dilogo Cuadrcula de datos debe ser parecido al siguiente:
El URL no slo tiene que abrir la pgina de confirmacin, sino que debe identificar
exclusivamente el registro que se debe mostrar en dicha pgina.
Para identificar el registro que debe mostrarse en la pgina de confirmacin, seleccione la
opcin Campo de datos y seleccione un campo en el conjunto de datos que identifique
exclusivamente cada registro. En la mayora de los casos, el campo estar formado por un
nmero de ID de registro.
Examinar y luego localice y seleccione la pgina de confirmacin.
Dreamweaver crea un URL para la pgina de confirmacin que incluye un parmetro de URL
que identifica el registro que la pgina de confirmacin debe mostrar. Anote el nombre del
parmetro de URL, porque lo utilizar ms adelante en la pgina de confirmacin.
Por ejemplo, si selecciona locationDelete.aspx como pgina detalle y ha seleccionado CODE
como campo en el conjunto de datos que identifica exclusivamente cada registro, Dreamweaver
crea el siguiente URL.
En este caso, Dreamweaver crea un parmetro de URL denominado CODE. Dreamweaver copia
el nombre del campo de datos, pero no es obligatorio utilizar dicho nombre. Puede cambiarlo
por algo ms descriptivo, como por ejemplo, recordID, como en el siguiente ejemplo.
locationDelete.aspx?recordID={0}
cuadrcula de datos:
locationDelete.aspx?recordID=CBR
7 Haga clic en Aceptar para cerrar el cuadro de dilogo Hipervnculo; a continuacin, vuelva a
hacer clic en Aceptar para cerrar el cuadro de dilogo Cuadrcula de datos.
Dreamweaver actualiza la cuadrcula de datos en la pgina. A continuacin se muestra una
cuadrcula de datos vista a travs de un navegador despus de efectuar una bsqueda de todas
las ciudades que empiezan con la letra c.
Despus de crear los vnculos de borrado, el siguiente paso es mostrar el registro en la pgina de
confirmacin.
Visualizacin del registro en la pgina de confirmacin (ASP.NET)
Despus de completar la pgina que enumera los registros, cambie a la pgina de confirmacin de
borrado. La pgina de confirmacin muestra el registro y solicita al usuario si est seguro de querer
eliminarlo. Cuando el usuario confirma la operacin haciendo clic en el botn de formulario, la
aplicacin Web elimina el registro de la base de datos.
La creacin de esta pgina incluye las siguientes tareas:
Crear un formato HTML con un botn en el que al hacer clic se confirme la supresin
Recuperar el registro que se va a mostrar en la pgina
Mostrar el registro en la pgina
Recuperar y mostrar el registro consiste en definir un conjunto de datos que mantenga un solo
registro (el registro que el usuario desea eliminar) y en vincular las columnas del conjunto de datos
a la pgina. A continuacin se describen ms detalladamente estos pasos.
Para crear un formulario HTML para confirmar la supresin:
1 Cree una nueva pgina ASP.NET y gurdela como la pgina de confirmacin que ha
especificado en la seccin anterior.
Ha especificado una pgina de confirmacin al crear los vnculos de borrado en la seccin
anterior. Utilice este nombre la primera vez que guarde el archivo (por ejemplo,
locationDelete.aspx).
5 Mejore el diseo de la pgina como desee y gurdelo.
1 En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botn ms (+) y elija
Conjunto de datos en el men emergente.
Aparecer el cuadro de dilogo Conjunto de datos sencillo. Si aparece el cuadro de dilogo
Conjunto de datos avanzado, haga clic en Simple para cambiar al cuadro de dilogo Conjunto
de datos sencillo.
2 Asigne un nombre al conjunto de datos y despus elija la tabla de base de datos que contiene los
registros que podran mostrarse.
en la pgina.
Asegrese de incluir el campo de ID de registro aun cuando no se vaya a mostrar.
4 Complete la seccin Filtro de la siguiente forma para encontrar y mostrar el registro especificado
en el parmetro de URL que ha facilitado la pgina de bsqueda:
En el primer men emergente del rea Filtro, seleccione la columna del conjunto de datos
En el ejemplo tratado en la seccin anterior, la columna de conjunto de datos denominada
est seleccionado.
En el cuarto cuadro, introduzca el nombre del parmetro de URL que ha facilitado la pgina
con los vnculos de borrado.
locationDelete.aspx?recordID=CBR, introduzca recordID.
El cuadro de dilogo Conjunto de datos debe ser parecido al siguiente.
El conjunto de datos aparecer en el panel Vinculaciones.
1 Seleccione las columnas Conjunto de datos (campos de registros) en el panel Vinculaciones y
arrstrelas a la pgina de confirmacin.
Asegrese de insertar este contenido dinmico de slo lectura dentro de los lmites del
formulario. Para ms informacin sobre la insercin de contenido dinmico en las pginas,
consulte Conversin de texto en contenido dinmico en la pgina 567.
formulario.
Valor.
4 En el cuadro de dilogo Datos dinmicos, seleccione la columna ID del registro en el conjunto
de datos y haga clic en Aceptar.
5 Guarde la pgina.
La pgina de confirmacin completada debe ser parecida a la siguiente.
Despus de crear una pgina de confirmacin, el siguiente paso es aadir lgica para eliminar el
registro.
Adicin de lgica para eliminar el registro (ASP.NET)
Despus de crear la pgina de confirmacin,, el siguiente paso es aadir lgica a la pgina que
elimina el registro de la base de datos cuando el usuario hace clic en el botn Confirmar. Puede
aadir esta lgica rpida y fcilmente en Dreamweaver con el comportamiento de servidor
Eliminar registro.
1 Asegrese de que la pgina de confirmacin est abierta en Dreamweaver.
4 En el men emergente Conexin, seleccione una conexin con la base de datos para que la
pgina pueda buscar la base de datos y conectarse a ella.
se eliminarn.
columna debe contener los mismos datos de ID de registro que la columna Conjunto de datos
7 En el men emergente Enviar clave primaria como, seleccione el tipo de datos de la columna de
clave principal.
Mtodo del formulario. En nuestro ejemplo, la variable es un parmetro de URL llamado
hiddenID.
9 En el cuadro de texto Si es correcto, ir a, especifique una pgina que se abrir despus de eliminar
el registro de la base de datos.
10 Si lo desea, seleccione la opcin Mostrar informacin de depuracin en caso de fallo.
La informacin de depuracin la generar el servidor.
11 Si desea proporcionar un mensaje de error personalizado, desactive la opcin Mostrar
informacin de depuracin en caso de fallo y especifique una pgina que se debe abrir en el
cuadro de texto Si falla, ir a.
Utilizacin de procedimientos almacenados para modificar bases de datos (ASP.NET) 725
El cuadro de dilogo Eliminar registro completado debe parecerse al siguiente.
Cargue las pginas en el servidor Web (si es necesario), abra un navegador y busque un registro
que se deba eliminar. Al hacer clic en un vnculo de borrado en la pgina de resultados, aparecer
la pgina de confirmacin. Haga clic en el botn de formulario para eliminar el registro de la base
de datos. Para verificar que el registro se ha eliminado, vuelva a efectuar una bsqueda de dicho
registro.
Utilizacin de procedimientos almacenados para modificar
bases de datos (ASP.NET)
Nota: las bases de datos Microsoft Access y MySQL no admiten procedimientos almacenados.
Para aadir un procedimiento almacenado a una pgina de ASP.NET:
Procedimiento almacenado.
Aparecer el cuadro de dilogo Procedimiento almacenado.
Despus de cerrar el cuadro de dilogo, Dreamweaver insertar cdigo ASP.NET en la pgina que,
cuando se ejecute en el servidor, ejecutar un procedimiento almacenado en la base de datos. El
procedimiento almacenado realizar a su vez una operacin de base de datos, como insertar un
registro o ejecutar una consulta.
Temas relacionados
Creacin de pginas que restrinjan el acceso al sitio (ASP.NET)
Puede utilizar Dreamweaver para crear un juego de pginas que restrinjan el acceso al sitio.
Dreamweaver no dispone de comportamientos de servidor de autenticacin para pginas
ASP.NET. No obstante, puesto que las pginas ASP y ASP.NET pueden ejecutarse en el mismo
sitio, puede utilizar los comportamientos de servidor de autenticacin para pginas ASP. El
mtodo que utilice para crear estas pginas es idntico al mtodo que se utiliza para ColdFusion.
Para instrucciones, vase Creacin de pginas que restrinjan el acceso al sitio (ColdFusion, ASP,
JSP Y PHP) en la pgina 689.
Creacin de pginas que restrinjan el acceso al sitio (ASP.NET) 727
729
CAPTULO 42
Creacin rpida de aplicaciones ASP y JSP
una aplicacin Web ASP o JSP con poca o ninguna codificacin.
Temas relacionados
Creacin de pginas maestra-detalle (ASP y JSP)
acerca de cada registro. En esta seccin se describe cmo crear pginas maestra-detalle.
Creacin de pginas maestra-detalle en una operacin (ASP y JSP)
Al desarrollar aplicaciones ASP o JSP, puede crear rpidamente pginas maestra-detalle mediante
el objeto de aplicacin Juego de pginas Maestro/Detalle. Un objeto de aplicacin le permite crear
un juego completo de pginas dinmicas completando slo uno o dos cuadros de dilogo.
El mtodo que se utiliza es idntico al utilizado para ColdFusion. Para instrucciones, vase .
Creacin de pginas maestra-detalle elemento a elemento (ASP y JSP)
En esta seccin se describe cmo crear un juego de pginas maestra-detalle sin utilizar el objeto de
aplicacin Juego de pginas Maestro-Detalle. Para instrucciones de cmo utilizar el objeto de
aplicacin, vase Creacin de pginas maestra-detalle en una operacin (ASP y JSP) en
la pgina 729.
En esta seccin se describen los pasos para crear un juego de pginas Maestro-Detalle:
Creacin de una pgina maestra y definicin de un juego de registros para ella (ASP y JSP)
en la pgina 730
Visualizacin de los registros en la pgina maestra (ASP y JSP) en la pgina 730
Cmo abrir la pgina detalle y proporcionarle un ID de registro (ASP y JSP) en
la pgina 731
Bsqueda y visualizacin del registro solicitado en la pgina detalle (ASP y JSP) en
la pgina 731
730 Captulo 42: Creacin rpida de aplicaciones ASP y JSP
Creacin de una pgina maestra y definicin de un juego de registros para
ella (ASP y JSP)
El primer paso para crear pginas maestra-detalle es crear una pgina maestra en blanco y aadirle
un juego de registros.
Puede definir un juego de registros en el momento del diseo (vase Definicin de un juego de
registros en la pgina 551). Otra posibilidad es que el usuario lo defina en el momento de la
ejecucin (vase Creacin de pginas de bsqueda/resultados (ASP y JSP) en la pgina 732).
Asegrese de que el juego de registros contiene, no slo todas las columnas necesarias para la
pgina maestra, sino tambin todas las columnas necesarias para la pgina detalle.
Normalmente, el juego de registros de la pgina maestra extrae unas pocas columnas de una tabla
de una base de datos, mientras que un juego de registros de la pgina detalle extrae ms columnas
de la misma tabla para proporcionar informacin adicional.
El siguiente paso para crear pginas maestra-detalle es mostrar los registros en la pgina maestra..
Visualizacin de los registros en la pgina maestra (ASP y JSP)
Despus de crear una pgina maestra en blanco y definir un juego de registros para ella , deber
mostrar los registros en la pgina.
Para ver los registros en la pgina maestra:
1 Cree un diseo de pgina que permita mostrar mltiples registros y vincule las columnas del
juego de registros a la pgina.
Un mtodo sencillo para lograrlo consiste en crear una tabla HTML con dos filas en la pgina
maestra y arrastrar un nmero limitado de columnas del juego de registros desde el panel
Vinculaciones (Ventana > Vinculaciones) hasta la segunda fila de la tabla. (Utilice la primera
fila para mostrar los encabezados de las columnas de la tabla.)
2 Cree una regin repetida para mostrar ms de un registro a la vez.
La regin repetida se aplica normalmente a la fila de la tabla en la que se encuentra el contenido
dinmico. Para ms informacin, consulte Visualizacin de varios resultados de juego de
registros en la pgina 586.
El siguiente paso para crear pginas maestra-detalle es abrir la pgina detalle y proporcionar un ID
de registro.
Creacin de pginas maestra-detalle (ASP y JSP) 731
Cmo abrir la pgina detalle y proporcionarle un ID de registro (ASP y JSP)
Despus de crear la pgina maestra y de mostrar registros en ella , deber crear vnculos que abran
la pgina detalle y proporcionarle el ID del registro que el usuario ha seleccionado.
Para abrir la pgina detalle y pasarla a un parmetro de URL que identifique el registro que
se va a visualizar:
1 En la regin repetida de la pgina maestra, seleccione el contenido dinmico que va a hacer las
veces de vnculo.
clic en el botn de botn ms (+) y seleccione Ir a pgina Detalle en el men emergente.
Aparecer el cuadro de dilogo Ir a pgina Detalle.
Dreamweaver situar un vnculo especial alrededor del texto seleccionado. Cuando el usuario hace
clic en el vnculo, el comportamiento de servidor Ir a pgina Detalle transfiere un parmetro de
URL que contiene el ID del registro a la pgina detalle. Por ejemplo, si el parmetro de URL se
denomina id y la pgina detalle se denomina customerdetail.asp, el URL presentar esta
apariencia cuando el usuario haga clic en el vnculo:
http://www.mysite.com/customerdetail.asp?id=43
La primera parte del URL, http://www.mysite.com/customerdetail.asp, abre la pgina detalle. La
segunda parte, ?id=43, es el parmetro de URL. Dicho parmetro indica a la pgina detalle qu
registro debe localizar y mostrar. El trmino id es el nombre del parmetro de URL y 43 es su
valor. En este ejemplo, el parmetro de URL contiene el nmero de ID del registro, 43.
Para ms informacin, consulte Parmetros de URL en la pgina 536.
El segundo paso para crear las pginas maestra-detalle es localizar y mostrar el registro solicitado
en la pgina detalle.
Bsqueda y visualizacin del registro solicitado en la pgina detalle (ASP y
JSP)
Despus de crear la pgina maestra, deber buscar el registro solicitado en la base de datos y
mostrarlo en la pgina detalle. El procedimiento consiste en definir un juego de registros para que
contenga un registro el registro solicitado por la pgina maestra y vincular las columnas del
juego de registros a la pgina.
1 Cambie a la pgina detalle o cree una nueva pgina ASP o JSP si todava no existe.
elija Juego de registros en el men emergente.
Aparecer el cuadro de dilogo Juego de registros sencillo. Si aparece el cuadro de dilogo
avanzado, haga clic en Simple.
3 Asigne un nombre al juego de registros, luego seleccione una conexin y la tabla de base de datos
que proporcionar datos al juego de registros.
4 En el rea Columna, elija las columnas de la tabla que deben incluirse en el juego de registros.
ms informacin.
Si los conjuntos de registros son diferentes, el juego de registros de la pgina detalle debe tener
al menos una columna en comn con la pgina maestra. La columna comn suele ser la
columna de ID del registro, aunque tambin puede ser el campo de unin de las tablas
relacionadas.
Seleccionado y seleccione las columnas deseadas presionando Control (Windows) o Comando
En el primer men emergente del rea Filtro, seleccione la columna de tabla de la base de
datos que contiene valores que coinciden con el valor del parmetro de URL pasado por la
pgina maestra.
Por ejemplo, si el parmetro de URL contiene un nmero de ID de registro, seleccione la
columna que contiene nmeros de ID de registros.
En el men emergente situado junto al primer men, seleccione el signo igual (ya debe estar
seleccionado).
En el tercer men emergente, seleccione Parmetro de URL.
La pgina maestra facilita informacin que identifica la seleccin del usuario mediante un
parmetro de URL a la pgina detalle.
En el cuarto cuadro de texto, introduzca el nombre del parmetro de URL que la pgina
maestra ha facilitado.
Por ejemplo, si el URL utilizado por la pgina maestra para abrir la pgina detalle es
www.mysite.com/customerdetail.asp?id=43, introduzca id.
Tambin puede obtener el nombre cambiando a la pgina maestra, abriendo el panel
Comportamientos del servidor (Ventana > Comportamientos del servidor) y haciendo doble
clic en el comportamiento de servidor Ir a pgina Detalle. Compruebe el nombre que figura
en Pasar parmetro de URL.
Ha finalizado la configuracin de la pgina maestra-detalle.
Despus de crear la pgina maestra-detalle, puede utilizar el panel Comportamientos del servidor
(Ventana > Comportamientos del servidor) para modificar los distintos comportamientos del
servidor.
Creacin de pginas de bsqueda/resultados (ASP y JSP)
bsquedas en la base de datos. El mtodo que se utiliza es idntico al utilizado para ColdFusion.
Para instrucciones, vase Creacin de pginas de bsqueda/resultados (ColdFusion, ASP, JSP,
PHP) en la pgina 665.
Creacin de pginas para actualizar un registro (ASP y JSP) 733
Creacin de una pgina de insercin de registro (ASP y JSP)
Creacin de pginas para actualizar un registro (ASP y JSP)
En esta seccin se describen los pasos necesarios para crear una pgina con vistas a actualizar los
registros:
Bsqueda del registro que desea actualizar (ASP y JSP) en la pgina 733
Apertura de la pgina de actualizacin y proporcionar el ID del registro (ASP y JSP) en
la pgina 734
Recuperacin del registro que se desea actualizar (ASP y JSP) en la pgina 734
Cmo completar la pgina de actualizacin en una operacin (ASP y JSP) en la pgina 735
Para editar el comportamiento de servidor, abra el panel Comportamientos del servidor
(Ventana > Comportamientos del servidor) y haga doble clic en el comportamiento Actualizar
registro.Cmo completar la pgina de actualizacin elemento a elemento (ASP y JSP) en
la pgina 736
Temas relacionados
Creacin de pginas para eliminar un registro (ASP y JSP) en la pgina 738
Bsqueda del registro que desea actualizar (ASP y JSP)
Despus de crear las pginas de bsqueda/resultados, el siguiente paso para crear una pgina de
actualizacin de registro es crear vnculos en la pgina de resultados que abran la pgina cuando se
haga clic en ellos.
Apertura de la pgina de actualizacin y proporcionar el ID del registro (ASP
y JSP)
Despus de crear las pginas de bsqueda/resultados, debe crear vnculos en la pgina de
resultados que abran la pgina de actualizacin y proporcionan el ID del registro que el usuario ha
seleccionado. La pgina de actualizacin utilizar este ID para localizar el registro solicitado en la
base de datos y mostrarlo.
Para crear vnculos que abran la pgina de actualizacin y pasen el ID del registro:
1 En la pgina de resultados, seleccione el marcador de posicin del contenido dinmico para el
texto que desea vincular.
clic en el botn de signo ms (+) y seleccione Ir a pgina Detalle en el men emergente.
Aparecer el cuadro de dilogo Ir a pgina Detalle.
3 En el cuadro de texto Pgina Detalle, haga clic en Examinar y localice la pgina de actualizacin.
4 Asigne un nombre al parmetro de URL y especifique el juego de registros y la columna que
contienen el ID de registro que desea facilitar a la pgina de actualizacin.
Anote el nombre del parmetro de URL porque lo utilizar ms adelante en la pgina de
actualizacin.
Dreamweaver insertar un vnculo especial en la pgina. Cuando el usuario haga clic en el
vnculo, se transferir a la pgina de actualizacin un parmetro de URL que contiene el ID de
registro.
El siguiente paso para crear una pgina de actualizacin de registro es recuperar el registro que se
va a actualizar. .
Recuperacin del registro que se desea actualizar (ASP y JSP)
registros.
1 Cree una nueva pgina ASP o JSP en Dreamweaver y gurdela.
Juego de registros.
dilogo sencillo.
rea Filtro:
almacenarlo en un juego de registros, debe aadir un formulario para que los usuarios puedan
modificar los datos del registro y la lgica necesaria para actualizar la base de datos. Puede llevar a
cabo estas tareas en una operacin o elemento por elemento. Vase Cmo completar la pgina de
actualizacin en una operacin (ASP y JSP) en la pgina 735 o Para editar el comportamiento
de servidor, abra el panel Comportamientos del servidor (Ventana > Comportamientos del
servidor) y haga doble clic en el comportamiento Actualizar registro.Cmo completar la pgina de
actualizacin elemento a elemento (ASP y JSP) en la pgina 736.
Cmo completar la pgina de actualizacin en una operacin (ASP y JSP)
(vase Recuperacin del registro que se desea actualizar (ASP y JSP) en la pgina 734).
datos.
que desea actualizar (ASP y JSP) en la pgina 733, Apertura de la pgina de actualizacin y
proporcionar el ID del registro (ASP y JSP) en la pgina 734 y Recuperacin del registro que se
desea actualizar (ASP y JSP) en la pgina 734.
Comportamientos del servidor) y haga doble clic en el comportamiento Actualizar registro.Cmo
completar la pgina de actualizacin elemento a elemento (ASP y JSP)
(vase Recuperacin del registro que se desea actualizar (ASP y JSP) en la pgina 734).
datos.
registro que desea actualizar (ASP y JSP) en la pgina 733, Apertura de la pgina de
actualizacin y proporcionar el ID del registro (ASP y JSP) en la pgina 734 y Recuperacin del
registro que se desea actualizar (ASP y JSP) en la pgina 734.
modificar los datos
datos despus de que el usuario modifique el registro y haga clic en el botn de formulario
1 Cree una nueva pgina ASP o JSP (Archivo > Nuevo).
formulario.
Para ms informacin, consulte Insercin de objetos de formulario HTML en la pgina 637.
Puede cambiar la etiqueta del botn Enviar. Para ello, seleccione el botn, abra el inspector de
Para ms informacin, consulte Recuperacin del registro que se desea actualizar (ASP y JSP)
en la pgina 734.
Temas relacionados
Cmo completar la pgina de actualizacin en una operacin (ASP y JSP) en la pgina 735
Creacin de pginas para eliminar un registro (ASP y JSP)
Una aplicacin puede incluir una pgina para permitir que los usuarios borren los registros
existentes en una tabla de la base de datos. Generalmente, una pgina de borrado es una pgina
detalle que funciona conjuntamente con una pgina de resultados. La pgina de resultados
permite que el usuario seleccione el registro que desea eliminar y proporciona la informacin a la
pgina de borrado.
Las pginas de borrado constan de cuatro elementos:
(vase Recuperacin del registro que se desea borrar (ASP y JSP) en la pgina 739).
Una presentacin de slo lectura de los datos que desea borrar (vase Visualizacin de los
datos que se desean eliminar (ASP y JSP) en la pgina 740).
Un botn Enviar que permite enviar el comando de borrado al servidor (vase Envo del
comando de borrado al servidor (ASP y JSP) en la pgina 740).
Un comportamiento de servidor Eliminar registro que permite actualizar la tabla de la base de
datos (vase Eliminacin del registro de la tabla de la base de datos (ASP y JSP) en
la pgina 740).
Nota: la pgina de borrado slo puede contener un comportamiento de servidor de edicin de
registros. Por ejemplo, no puede aadir un comportamiento de servidor Insertar registro o Actualizar
registro a la pgina de borrado.
Temas relacionados
Creacin de una pgina de insercin de registro (ASP y JSP) en la pgina 733
Creacin de pginas para actualizar un registro (ASP y JSP) en la pgina 733
Creacin de pginas para eliminar un registro (ASP y JSP) 739
Identificacin del registro que se desea eliminar (ASP y JSP)
una pgina de bsqueda y una pgina de resultados que funcionen con la pgina de borrado. Para
instrucciones para crear pginas de bsqueda y de resultados, vase Creacin de pginas de
bsqueda/resultados (ASP y JSP) en la pgina 732.
La pgina de resultados transfiere un parmetro de URL a la pgina de borrado para indicarle el
registro que debe eliminar. El siguiente paso es recuperar el registro que se desea eliminar.
Recuperacin del registro que se desea borrar (ASP y JSP)
Cuando la pgina de resultados facilita un parmetro de URL a la pgina de borrado para
identificar el registro que desea borrar , la pgina de borrado debe leer el parmetro, recuperar el
registro de la tabla de base de datos y almacenarlo temporalmente en un juego de registros.
Para recuperar el registro que se elimina:
Juego de registros.
dilogo sencillo.
2 Asigne un nombre al conjunto de registros y utilice los mens emergentes Conexin y Tabla
para especificar la ubicacin de los datos que desea borrar.
3 En el rea Columnas, seleccione la opcin Todas para elegir todas las columnas de la tabla de la
base de datos.
rea Filtro:
Cuando el usuario seleccione un registro de la pgina de resultados, la pgina de borrado generar
un juego de registros que contendr nicamente el registro seleccionado.
El siguiente paso para crear una pgina para eliminar registros es mostrar el registro que se desea
eliminar.
Visualizacin de los datos que se desean eliminar (ASP y JSP)
Despus de recuperar el registro que se desea eliminar, se recomienda mostrar el registro antes de
que el usuario lo elimine para confirmar que el usuario desea eliminarlo.
Para aadir una presentacin de slo lectura del registro que desea eliminar:
eliminar el usuario.
Para ms informacin, consulte Recuperacin del registro que se desea borrar (ASP y JSP) en
la pgina 739.
2 Arrastre una columna desde el panel Vinculaciones (Ventana > Vinculaciones) hasta la pgina.
El contenido dinmico aparecer en la pgina. Puede soltar directamente el contenido
dinmico en la pgina o en una tabla HTML. Para ms informacin, consulte Conversin de
texto en contenido dinmico en la pgina 567.
El siguiente paso para crear una pgina para eliminar registros es enviar el comando de borrado al
servidor.
Envo del comando de borrado al servidor (ASP y JSP)
Despus de recuperar y mostrar el registro que se desea eliminar, debe aadir un botn en el que
el usuario pueda hacer clic para eliminar el registro. La pgina de borrado utiliza un botn de
envo de formulario para enviar el comando de borrado al servidor. Para aadir a la pgina un
botn Enviar deber crear un formulario HTML que slo contenga dicho botn.
Para aadir un botn Enviar a la pgina de borrado:
1 En la vista Diseo, site el punto de insercin en el lugar donde desea que aparezca el bot
Enviar y seleccione Insertar > Formulario > Formulario.
formulario.
comportamiento de servidor Eliminar registro configura estos atributos automticamente.
4 Si lo desea, cambie la etiqueta del botn Enviar. Para ello, seleccione el botn, abra el inspector
de propiedades (Ventana > Propiedades) e introduzca un nuevo valor en el cuadro Etiqueta.
El siguiente paso consiste en aadir el comportamiento de servidor Eliminar registro para
actualizar la tabla de la base de datos cuando el usuario haga clic en el botn Enviar.
Eliminacin del registro de la tabla de la base de datos (ASP y JSP)
Despus de aadir un botn, el usuario puede hacer clic para eliminar el registro , el paso final es
aadir el comportamiento de servidor Eliminar registro para actualizar la tabla de la base de datos
despus de que el usuario haga clic en el botn Enviar.
Creacin de pginas con objetos de manipulacin de datos avanzados (ASP y JSP) 741
Para aadir un comportamiento de servidor para borrar la tabla de la base de datos:
clic en el botn de signo ms (+) y seleccione Eliminar registro en el men emergente.
eliminar registros de una tabla de la base de datos haciendo clic en el botn Enviar del formulario.
Creacin de pginas con objetos de manipulacin de datos
avanzados (ASP y JSP)
Puede utilizar Dreamweaver para crear pginas que utilizan procedimientos almacenados, objetos
de comandos ASP y declaraciones preparadas JSP.
(ASP y JSP)
El procedimiento para utilizar un procedimiento almacenado vara segn el modelo de servidor.
Temas relacionados
Ejecucin de un procedimiento almacenado (ASP)
Con las pginas de ASP, deber aadir a una pgina un objeto de comando para ejecutar un
procedimiento almacenado. Para ms informacin sobre objetos de comando, consulte Objetos
de los comandos ASP en la pgina 657.
Para aadir un procedimiento almacenado a una pgina de ASP:
Comando (Procedimiento Almacenado).
Aparecer el cuadro de dilogo Comando.
3 Introduzca un nombre para el comando, seleccione una conexin con la base de datos que
contiene el procedimiento almacenado y, a continuacin, seleccione Procedimiento almacenado
en el men emergente Tipo.
4 Seleccione el procedimiento almacenado ampliando la rama Procedimientos almacenados del
cuadro Elementos de base de datos. Para ello, seleccione el procedimiento almacenado en la lista
y haga clic en el botn Procedimiento.
5 Introduzca los parmetros necesarios en la tabla Variables.
No es preciso que introduzca ningn parmetro para variables RETURN_VALUE.
Despus de cerrar el cuadro de dilogo, Dreamweaver insertar cdigo ASP en la pgina que,
cuando se ejecute en el servidor, crear un objeto de comando que ejecute un procedimiento
almacenado en la base de datos. El procedimiento almacenado realizar a su vez una operacin de
base de datos, como insertar un registro.
De forma predeterminada, el cdigo define la propiedad Preparado del objeto Comando como
true, lo que hace que el servidor de aplicaciones reutilice una versin compilada del objeto cada
vez que se ejecuta el procedimiento almacenado. Si sabe que el comando se va a ejecutar muchas
veces, puede utilizar una versin compilada del objeto para agilizar las operaciones de base de
datos. Sin embargo, si el comando slo se va a ejecutar una o dos veces, el uso de una versin
compilada puede ralentizar la aplicacin Web, pues el sistema tiene que detenerse para compilar el
comando. Para cambiar la configuracin, pase a la vista Cdigo y establezca la propiedad
Preparado como false.
Nota: no todos los proveedores de base de datos admiten comandos preparados. Si su base de
datos no los admite, es posible que aparezca un mensaje de error cuando ejecute la pgina. Cambie a
la vista Cdigo y establezca la propiedad Preparado como false.
Creacin de pginas con objetos de manipulacin de datos avanzados (ASP y JSP) 743
Ejecucin de un procedimiento almacenado (JSP)
Con las pginas de JSP, deber aadir a una pgina un comportamiento de servidor Ejecutable
para ejecutar un procedimiento almacenado.
Para aadir un procedimiento almacenado a una pgina de JSP:
Ejecutable (Procedimiento Almacenado).
Aparecer el cuadro de dilogo Ejecutable (Procedimiento Almacenado).
Despus de cerrar el cuadro de dilogo Ejecutable (Procedimiento Almacenado), Dreamweaver
insertar cdigo de JSP en la pgina que, cuando se ejecute en el servidor, llamar a un
procedimiento almacenado en la base de datos. El procedimiento almacenado realizar a su vez
una operacin de base de datos, como insertar un registro.
Utilizacin de comandos ASP para modificar una base de datos
Puede utilizar Dreamweaver para crear objetos de comando ASP que inserten, actualicen o
eliminen registros de una base de datos. Un objeto de comando es un objeto de servidor que
realiza alguna operacin en la base de datos. Deber suministrar el objeto de comando con la
declaracin SQL que realiza la operacin en la base de datos. Para ms informacin, consulte
Objetos de los comandos ASP en la pgina 657.
Tambin puede suministrar el objeto con un procedimiento almacenado que realice la operacin.
Para ms informacin, consulte Ejecucin de un procedimiento almacenado (ASP) en
la pgina 742.
Para crear el objeto de comando que utiliza SQL para editar la base de datos:
1 En Dreamweaver, abra la pgina ASP que ejecutar el comando.
clic en el botn ms (+) y seleccione Comando.
Aparecer el cuadro de dilogo Comando.
3 Introduzca el nombre del comando, seleccione una conexin con la base de datos que contiene
los registros que desea editar y seleccione la operacin de edicin que desea que realice el
comando (Insertar, Actualizar o Eliminar).
Dreamweaver iniciar la declaracin SQL basndose en el tipo de operacin que seleccione. Por
ejemplo, si selecciona Insertar, el dilogo tiene el aspecto siguiente:
4 Realice la declaracin SQL.
Para obtener informacin sobre cmo escribir declaraciones SQL que modifiquen bases de
datos, consulte un manual de Transact-SQL.
5 Utilice el rea Variables para definir variables SQL.
Por ejemplo, a continuacin se incluye una declaracin Insertar que contiene tres variables
SQL. Los valores de estas variables se obtienen a travs de los parmetros de URL transferidos a
la pgina, como se define en la columna Valor de tiempo de ejecucin del rea Variables.
Despus de cerrar el cuadro de dilogo, Dreamweaver insertar cdigo ASP en la pgina que,
cuando se ejecute en el servidor, crear un comando que inserte, actualice o elimine registros de
la base de datos.
De forma predeterminada, el cdigo define la propiedad Preparado del objeto Comando como
true, lo que hace que el servidor de aplicaciones reutilice una versin compilada del objeto
cada vez que se ejecuta el comando. Para cambiar esta configuracin, pase a la vista Cdigo y
establezca la propiedad Preparado como false.
En el ejemplo anterior, a continuacin probablemente creara una pgina con un formulario
HTML en el que los usuarios podrn introducir datos de registros. El formulario HTML
contendra tres campos de texto (txtCity, txtAddress y txtPhone) y un botn Enviar. El formulario
utilizara el mtodo GET y enviara los valores de campo de texto a la pgina que contiene el
comando.
Creacin de pginas que restrinjan el acceso al sitio (ASP y JSP) 745
Utilizacin de declaraciones preparadas JSP para modificar una base de
datos
Puede utilizar Dreamweaver para crear declaraciones preparadas JSP que inserten, actualicen o
eliminen registros de una base de datos. Una declaracin preparada JSP es un objeto de servidor
reutilizable que contiene una declaracin SQL. Deber suministrar la declaracin preparada con
el SQL que realiza la operacin en la base de datos. Para ms informacin, consulte
Declaraciones preparadas JSP en la pgina 657.
Para crear una declaracin preparada que edite un registro de base de datos
1 En Dreamweaver, abra la pgina JSP que ejecutar el comando.
clic en el botn ms (+) y seleccione Preparado (Insertar, Actualizar, Eliminar).
Aparecer el cuadro de dilogo Preparado (Insertar, Actualizar, Eliminar).
Despus de cerrar el cuadro de dilogo, Dreamweaver insertar cdigo JSP en la pgina que,
cuando se ejecute en el servidor, crear una declaracin preparada que inserte, actualice o elimine
registros de la base de datos.
Creacin de pginas que restrinjan el acceso al sitio (ASP y
JSP)
Puede utilizar Dreamweaver para crear un juego de pginas que restrinjan el acceso al sitio. El
mtodo que se utiliza es idntico al utilizado para ColdFusion. Para instrucciones, vase
Creacin de pginas que restrinjan el acceso al sitio (ColdFusion, ASP, JSP Y PHP) en
la pgina 689.

747
CAPTULO 43
Creacin rpida de aplicaciones PHP
una aplicacin Web PHP con poca o ninguna codificacin.
Creacin de pginas maestra-detalle (PHP)
detalle.
Creacin de pginas maestra-detalle en una operacin (PHP)
Al desarrollar aplicaciones PHP, puede crear rpidamente pginas maestra-detalle utilizando el
objeto de aplicacin Juego de pginas Maestro-Detalle. Un objeto de aplicacin le permite crear
un juego completo de pginas dinmicas completando slo uno o dos cuadros de dilogo.
El mtodo que se utiliza es idntico al utilizado para ColdFusion. Para instrucciones, vase .
Creacin de pginas maestra-detalle por pasos (PHP)
Puede aadir los elementos bsicos de las pginas maestra-detalle por separado con el panel
Comportamientos de servidor.
Tambin puede aadir los elementos de una vez con el objeto de aplicacin Juego de pginas
Maestro-Detalle. Para ms informacin, consulte Creacin de pginas maestra-detalle en una
operacin (PHP) en la pgina 747.
En esta seccin se describen los pasos para crear un juego de pginas Maestro-Detalle:
Creacin de la pgina maestra (PHP) en la pgina 748
Creacin de vnculos con la pgina detalle (PHP) en la pgina 749
Creacin de un parmetro de URL para los vnculos (PHP) en la pgina 750
Bsqueda y visualizacin del registro solicitado en la pgina detalle (PHP) en la pgina 751
748 Captulo 43: Creacin rpida de aplicaciones PHP
Creacin de la pgina maestra (PHP)
datos. Puede utilizar una tabla dinmica que enumere los registros en una pgina PHP.
Antes de empezar, asegrese de definir una conexin de base de datos para el sitio. Para ms
informacin, consulte el Captulo 28, Conexiones de base de datos para desarrolladores de
PHP, en la pgina 503.
1 En Dreamweaver, cree una nueva pgina PHP.
Seleccione Archivo > Nuevo > Pgina dinmica, seleccione PHP y haga clic en Crear.
Se abre una pgina PHP en blanco en Dreamweaver.
En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botn de signo ms (+),
seleccione Juego de registros (consulta) y elija las opciones en el cuadro de dilogo Juego de
registros. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Si desea
escribir su propia declaracin SQL, haga clic en el botn Avanzado para abrir el cuadro de
dilogo Juego de registros avanzado.
Asegrese de que el juego de registros contiene todas las columnas de la tabla necesarias para
crear la tabla dinmica. El juego de registros tambin debe incluir la columna de la tabla que
contiene la clave exclusiva de cada registro, es decir, la columna ID del registro. En el siguiente
ejemplo, la columna CODE contiene informacin que identifica exclusivamente cada registro.
El usuario puede definir el juego de registros durante la ejecucin. Para ms informacin,
consulte Creacin de pginas de bsqueda/resultados (PHP) en la pgina 752.
Creacin de pginas maestra-detalle (PHP) 749
3 Inserte una tabla dinmica que muestre los registros en la pgina.
Site el punto de insercin en el lugar de la pgina en el que desea que aparezca la tabla
dinmica y seleccione Insertar > Objetos de aplicacin > Datos dinmicos > Tabla dinmica.
4 Seleccione las opciones que desea en el cuadro de dilogo Tabla dinmica y haga clic en Aceptar.
Dreamweaver inserta en la pgina una tabla dinmica.
Si necesita ayuda para completar el cuadro de dilogo Tabla dinmica, haga clic en el botn
Ayuda en el cuadro de dilogo.
5 Si lo desea, elimine la columna de la tabla dinmica que contiene los ID de registros.
Si no desea mostrar los ID de registros a los usuarios, puede eliminar la columna de la tabla
dinmica. Haga clic en cualquier lugar de la pgina para entrar en ella. Desplace el puntero
cerca de la parte superior de la columna de la tabla dinmica hasta que las celdas de la columna
queden resaltadas en rojo y haga clic para seleccionar la columna de la tabla. Presione la tecla
Supr para eliminar la columna de la tabla.
El siguiente paso para crear pginas maestra-detalle es crear vnculos que abran la pgina detalle.
Creacin de vnculos con la pgina detalle (PHP)
Despus de crear la tabla dinmica , debe crear vnculos que abran la pgina detalle. En esta
seccin se explica cmo crear los vnculos. En la siguiente seccin se explica cmo modificar el
vnculo para que tambin proporcione el ID del registro que selecciona el usuario. La pgina
detalle utilizar este ID para encontrar el registro solicitado en la base de datos y lo mostrar.
Para crear vnculos con la pgina detalle:
1 En la tabla dinmica, seleccione el marcador de posicin del contenido dinmico para el texto
que desea vincular.
la columna.
2 En el inspector de propiedades, haga clic en el icono de carpeta situado junto al campo Vnculo.
3 Busque y seleccione la pgina detalle.
La pgina detalle aparece en el campo Vnculo.
En la tabla dinmica, el marcador de posicin para el contenido dinmico aparece vinculado. Si
ejecuta la pgina en un servidor, podr ver que el vnculo se aplica al texto en cada fila de la tabla.
El siguiente paso para crear pginas maestra-detalle es crear un parmetro de URL para pasar el
ID del registro que el usuario ha seleccionado.
Creacin de un parmetro de URL para los vnculos (PHP)
Los vnculos de la tabla dinmica de la pgina maestra no slo tienen que abrir la pgina detalle,
sino que tambin deben pasar el ID del registro que el usuario ha seleccionado. La pgina detalle
utilizar este ID para encontrar el registro solicitado en la base de datos y lo mostrar.
la pgina detalle.
1 Seleccione el vnculo en la tabla dinmica.
2 En el campo Vnculo del inspector de propiedades, aada la siguiente cadena al final del URL:
?recordID=<?php echo $row_recordsetName['fieldName']; ?>
en la pgina detalle.
caso, el valor lo genera una expresin PHP que devuelve un ID de registro del juego de
registros. Para cada fila de la tabla dinmica se genera un ID distinto. En la expresin PHP,
sustituya recordsetName por el nombre del juego de registros y sustituya fieldName por el
nombre del campo del juego de registros que identifica de forma exclusiva cada registro. En la
mayora de los casos, el campo estar formado por un nmero de ID de registro. En el siguiente
ejemplo, el campo consta de cdigos de ubicacin exclusivos.
locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>
dinmica:
locationDetail.php?recordID=CBR
3 Guarde la pgina.
El siguiente paso para crear pginas maestra-detalle es modificar la pgina detalle para que pueda
localizar el registro solicitado en la base de datos y mostrarlo en la pgina.
Creacin de pginas maestra-detalle (PHP) 751
Bsqueda y visualizacin del registro solicitado en la pgina detalle (PHP)
Despus de crear la pgina maestra, cambie a la pgina detalle. Debe localizar el registro
seleccionado en la base de datos y mostrarlo en la pgina. El procedimiento consiste en definir un
juego de registros para que contenga un registro el registro solicitado por la pgina maestra y
vincular las columnas del juego de registros a la pgina.
1 Cambie a la pgina detalle o cree una nueva pgina PHP, si la pgina todava no existe.
seleccione Juego de registros (Consulta) en el men emergente.
simple.
3 Asigne un nombre al juego de registros y luego seleccione una conexin y la tabla de base de
datos que proporcionar datos al juego de registros.
4 En el rea Columnas, seleccione las columnas de la tabla que deben incluirse en el juego de
registros.
ms informacin.
Si los juegos de registros son distintos, asegrese de que la pgina detalle contiene como
mnimo una columna en comn con el juego de registros de la pgina maestra. La columna
Seleccionado y seleccione las columnas deseadas presionando Control (Windows) o Comando
En el primer men emergente del rea Filtro, seleccione la columna del juego de registros
pgina maestra. Por ejemplo, si el parmetro de URL contiene un nmero de ID de registro,
seleccione la columna que contiene nmeros de ID de registros. En el ejemplo tratado en la
seccin anterior, la columna de juego de registros denominada CODE contiene los valores
que coinciden con el valor del parmetro de URL que ha facilitado la pgina maestra.
Seleccione el signo igual (si todava no est seleccionado) del men emergente situado junto
al primer men.
Seleccione Parmetro de URL en el tercer men emergente.
maestra.
Por ejemplo, si el URL que la pgina maestra ha utilizado para abrir la pgina detalle
contena el sufijo locationDetail.php?recordID=CBR, especifique recordID.
la pgina 567.
Ha finalizado la configuracin de la pgina maestra-detalle PHP.
Despus de crear pginas maestra-detalle, puede utilizar el panel Comportamientos del servidor
(Ventana > Comportamientos del servidor) para modificar los distintos componentes.
Creacin de pginas de bsqueda/resultados (PHP)
bsquedas en la base de datos. El mtodo que se utiliza es idntico al utilizado para ColdFusion.
Para instrucciones, vase Creacin de pginas de bsqueda/resultados (ColdFusion, ASP, JSP,
PHP) en la pgina 665.
Creacin de una pgina de insercin de registros (PHP)
Creacin de pginas para actualizar un registro (PHP) 753
Creacin de pginas para actualizar un registro (PHP)
Bsqueda del registro que se desea actualizar (PHP) en la pgina 753
Creacin de los vnculos para abrir la pgina de actualizacin (PHP) en la pgina 753
Creacin de un parmetro de URL para los vnculos (PHP) en la pgina 750
Recuperacin del registro que se desea actualizar (PHP) en la pgina 755
Cmo completar la pgina de actualizacin en una operacin (PHP) en la pgina 756
Cmo completar la pgina de actualizacin elemento a elemento (PHP) en la pgina 757
Temas relacionados
Creacin de pginas para eliminar un registro (PHP) en la pgina 759
Bsqueda del registro que se desea actualizar (PHP)
Creacin de pginas de bsqueda/resultados (PHP) en la pgina 752.
Despus de crear las pginas de bsqueda/resultados, el siguiente paso ser crear vnculos en la
pgina de resultados que abran la pgina de actualizacin cuando se haga clic en ellos.
Creacin de los vnculos para abrir la pgina de actualizacin (PHP)
Despus de crear las pginas de bsqueda/resultados , deber crear vnculos en la pgina de
resultados para abrir la pgina de actualizacin y mostrar el registro seleccionado en un formulario
HTML. En esta seccin se explica cmo crear los vnculos. En la siguiente seccin se explica cmo
modificar el vnculo para que tambin proporcione el ID del registro que selecciona el usuario. La
pgina de actualizacin utilizar este ID para localizar el registro solicitado en la base de datos y
mostrarlo.
Para crear vnculos con la pgina de actualizacin:
1 En la pgina de resultados, seleccione el marcador de posicin del contenido dinmico para el
texto que desea vincular.
la columna.
2 En el inspector de propiedades, haga clic en el icono de carpeta situado junto al campo Vnculo.
3 Busque y seleccione la pgina de actualizacin.
La pgina de actualizacin aparece en el campo Vnculo.
En la pgina de resultados, el marcador de posicin para el contenido dinmico aparece
vinculado. Si carga las pginas en el servidor y ejecuta una bsqueda, podr ver que el vnculo
se aplica a cada registro en la pgina de resultados.
El siguiente paso para crear una pgina de actualizacin de registros ser crear un parmetro de
URL para pasar el ID del registro que el usuario ha seleccionado.
Creacin de un parmetro de URL para vnculos de actualizacin (PHP)
Los vnculos de la pgina de resultados no slo tienen que abrir la pgina de actualizacin sino
que tambin deben pasar el ID del registro que el usuario ha seleccionado. La pgina de
actualizacin utilizar este ID para localizar el registro solicitado en la base de datos y mostrarlo.
la pgina de actualizacin.
1 Seleccione el vnculo en la pgina de resultados.
en la pgina de actualizacin.
locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>
dinmica:
locationDetail.php?recordID=CBR
3 Guarde la pgina.
El siguiente paso es modificar la pgina de actualizacin para poder localizar el registro solicitado
en la base de datos y mostrarlo en la pgina.
Recuperacin del registro que se desea actualizar (PHP)
registros.
1 Cree una nueva pgina PHP en Dreamweaver y gurdela.
Juego de registros.
dilogo sencillo.
rea Filtro:
almacenarlo en un juego de registros, debe aadir un formulario para que los usuarios puedan
modificar los datos del registro y la lgica necesaria para actualizar la base de datos. Puede llevar a
cabo estas tareas en una operacin o elemento por elemento. Vase Cmo completar la pgina de
actualizacin en una operacin (PHP) en la pgina 756 o Cmo completar la pgina de
actualizacin elemento a elemento (PHP) en la pgina 757.
Cmo completar la pgina de actualizacin en una operacin (PHP)
(vase Recuperacin del registro que se desea actualizar (PHP) en la pgina 755).
datos.
que se desea actualizar (PHP) en la pgina 753, Creacin de los vnculos para abrir la pgina de
actualizacin (PHP) en la pgina 753, Creacin de un parmetro de URL para los vnculos
(PHP) en la pgina 750 y Recuperacin del registro que se desea actualizar (PHP) en
la pgina 755.
Cmo completar la pgina de actualizacin elemento a elemento (PHP)
(vase Recuperacin del registro que se desea actualizar (PHP) en la pgina 755).
datos.
registro que se desea actualizar (PHP) en la pgina 753, Creacin de los vnculos para abrir la
pgina de actualizacin (PHP) en la pgina 753, Creacin de un parmetro de URL para los
vnculos (PHP) en la pgina 750 y Recuperacin del registro que se desea actualizar (PHP) en
la pgina 755.
modificar los datos
1 Cree una pgina PHP (Archivo > Nuevo).
4 Asigne un nombre al formulario HTML. Para ello, haga clic en la etiqueta <form>, situada en la
parte inferior de la ventana de documento, para seleccionar el formulario, abra el inspector de
propiedades (Ventana > Propiedades) e introduzca un nombre en el cuadro Nombre del formulario.
Para ms informacin, consulte Insercin de objetos de formulario HTML en la pgina 637.
Puede cambiar la etiqueta del botn Enviar. Para ello, seleccione el botn, abra el inspector de
Para ms informacin, consulte Recuperacin del registro que se desea actualizar (PHP) en
la pgina 755.
Para aadir un comportamiento de servidor para actualizar la tabla de la base de datos:
Temas relacionados
Cmo completar la pgina de actualizacin en una operacin (PHP) en la pgina 756.
Creacin de pginas para eliminar un registro (PHP) 759
Creacin de pginas para eliminar un registro (PHP)
existentes en una base de datos. Las pginas estn formadas normalmente por una pgina de
bsqueda, una pgina de resultados y una pgina de borrado. Las pginas de bsqueda y de
resultados permite a los usuarios recuperar el registro y la pgina de borrado permite a los usuarios
eliminarlo.
En esta seccin se describen los siguientes pasos para crear pginas PHP para eliminar registros:
Bsqueda del registro que se desea eliminar (PHP) en la pgina 759
Creacin de vnculos con una pgina de confirmacin (PHP) en la pgina 759
Creacin de un parmetro de URL para pasarlo a la pgina de confirmacin (PHP) en
la pgina 760
Visualizacin del registro en la pgina de confirmacin (PHP) en la pgina 761
Adicin de lgica para eliminar el registro (PHP) en la pgina 765
Bsqueda del registro que se desea eliminar (PHP)
una pgina de bsqueda y una pgina de resultados que funcionen con la pgina de borrado. El
usuario introduce criterios de bsqueda en la pgina de bsqueda y selecciona el registro en la
pgina de resultados. Cuando un usuario hace clic en uno de los vnculos, se abre la pgina de
eliminacin con informacin sobre el registro.
Para instrucciones sobre cmo crear pginas para buscar el registro que desea eliminar, vase
Creacin de pginas de bsqueda/resultados (PHP) en la pgina 752.
Despus de crear las pginas de bsqueda/resultados, el siguiente paso es crear vnculos en la
pgina de resultados para abrir la pgina de confirmacin de la eliminacin.
Creacin de vnculos con una pgina de confirmacin (PHP)
Despus de crear la pgina de resultados, debe crear vnculos en los que el usuario pueda hacer clic
para abrir una pgina que solicite al usuario que confirme la eliminacin. En esta seccin se
explica cmo crear los vnculos. En la siguiente seccin se explica cmo modificar el vnculo para
que tambin proporcione el ID del registro que el usuario desea eliminar.
Para crear vnculos con una pgina de confirmacin:
1 En la pgina de resultados, cree una nueva columna en la tabla que sirva para mostrar registros.
Para ello, haga clic en la ltima columna de la tabla y seleccione Modificar > Tabla > Insertar
filas o columnas.
2 Seleccione la opcin Columnas y luego seleccione la opcin Despus de la columna actual.
Despus de hacer clic en Aceptar, Dreamweaver aade una columna a la tabla.
3 En la nueva columna creada en la tabla, introduzca la cadena Delete de la fila que contenga los
marcadores de posicin de contenido dinmico. Asegrese de introducir la cadena dentro de la
regin repetida delimitada con tabulaciones.
Tambin puede insertar una imagen con la palabra Eliminar o el smbolo que indique
eliminar.
Si Live Data est activado, introduzca la cadena en la primera fila de registros y haga clic en el
icono Actualizar.
4 Seleccione la cadena Delete para aplicarle un vnculo.
Si Live Data est activado, seleccione la cadena en la primera fila de registros.
5 En el inspector de propiedades, introduzca la pgina de confirmacin en el campo Vnculo.
Puede introducir el nombre de archivo que desee.
Despus de hacer clic fuera del campo Vnculo, la cadena Delete aparece vinculada en la tabla.
Despus de crear los vnculos, el siguiente paso para crear una pgina de borrado de registros es
crear parmetros de URL para los vnculos.
Creacin de un parmetro de URL para pasarlo a la pgina de confirmacin
(PHP)
Los vnculos de la pgina de resultados no slo tienen que abrir la pgina de confirmacin sino
que tambin deben pasar el ID del registro que el usuario desea eliminar. La pgina de
confirmacin utilizar este ID para encontrar el registro en la base de datos y lo mostrar.
Debe proporcionar el ID de registro a la pgina de confirmacin con un parmetro de URL. En
esta seccin se explica cmo crear un parmetro de URL para pasar el ID de registro a la pgina de
confirmacin.
1 Seleccione el vnculo de borrado en la pgina de resultados.
nombre que desee). Anote el nombre del parmetro de URL porque lo utilizar ms adelante
en la pgina de confirmacin.
confirmDelete.php?recordID=<?php echo $row_rsLocations['CODE']; ?>
dinmica:
confirmDelete.php?recordID=CBR
3 Guarde la pgina.
Despus de crear un parmetro de URL dinmico para los vnculos de borrado, el prximo paso
consiste en visualizar el registro en la pgina de confirmacin.
Visualizacin del registro en la pgina de confirmacin (PHP)
Despus de completar la pgina que enumera los registros, cambie a la pgina de confirmacin. La
pgina de confirmacin muestra el registro y solicita al usuario si est seguro de querer eliminarlo.
Cuando el usuario confirma la operacin haciendo clic en el botn de formulario, la aplicacin
Web elimina el registro de la base de datos.
Visualizar el registro consiste en tres tareas:
Crear un formulario HTML
Recuperar el registro que se desea visualizar en el formulario
Visualizar el registro en el formulario
Recuperar y mostrar el registro consiste en definir un juego de registros que incluya un solo
registro (el registro que el usuario desea eliminar) y en vincular las columnas del juego de registros
a la pgina. A continuacin se describen ms detalladamente estos pasos.
Para crear un formulario HTML para mostrar el registro:
1 Cree una nueva pgina PHP y gurdela como la pgina de confirmacin que ha especificado en
la seccin anterior.
Al crear el vnculo de borrado en la seccin anterior ha especificado una pgina de
confirmacin. Utilice este nombre la primera vez que guarde el archivo (por ejemplo,
deleteConfirm.aspx).
5 Mejore el diseo de la pgina como desee y gurdelo.
seleccione Juego de registros (Consulta) en el men emergente.
simple.
2 Asigne un nombre al juego de registros y luego seleccione una conexin y la tabla de la base de
datos que contiene los registros que pueden mostrarse.
en la pgina.
Asegrese de incluir el campo de ID de registro an cuando no se vaya a mostrar.
En el primer men emergente del rea Filtro, seleccione la columna en el juego de registros
En el ejemplo tratado en la seccin anterior, la columna del juego de registros denominada
est seleccionado.
con los vnculos de borrado.
confirmDelete.php?recordID=CBR, introduzca recordID.
1 Seleccione las columnas del juego de registros (campos de registros) en el panel Vinculaciones y
arrstrelas al formulario que ha insertado en la pgina.
la pgina 567.
formulario.
Valor.
4 En el cuadro de dilogo Datos dinmicos, seleccione la columna ID del registro en el juego de
registros y haga clic en Aceptar.
5 Guarde la pgina.
La pgina de confirmacin completada debe ser parecida a la siguiente:
Despus de crear una pgina de confirmacin, el siguiente paso para crear una pgina de borrado
de registros es aadir lgica para eliminar el registro.
Adicin de lgica para eliminar el registro (PHP)
Despus de crear una pgina de confirmacin, el siguiente paso para crear una pgina de borrado
de registros es aadir lgica a la pgina de confirmacin que elimine el registro de la base de datos
cuando el usuario haga clic en el botn Confirmar. Puede aadir esta lgica rpida y fcilmente en
Dreamweaver con el comportamiento de servidor Eliminar registro.
3 En el men emergente Conexin, seleccione una conexin con la base de datos para que el
comportamiento de servidor pueda conectarse a la base de datos afectada.
se eliminarn.
columna debe contener los mismos datos de ID de registro que la columna Juego de registros
Si el ID de registro es numrico, seleccione la opcin Numrico.
Mtodo del formulario. En el ejemplo, la variable es una variable de formulario denominada
hiddenRecID.
7 En el cuadro de texto Despus de borrar, ir a, especifique una pgina que se abrir despus de
eliminar el registro de la base de datos.
El cuadro de dilogo Eliminar registro completado debe parecerse al siguiente:
Cargue las pginas en el servidor Web (si es necesario), abra un navegador y busque un registro
que se deba eliminar. Al hacer clic en un vnculo de borrado en la pgina de resultados,
aparecer la pgina de confirmacin. Haga clic en el botn Confirmar para eliminar el registro
de la base de datos. Para verificar que el registro se ha eliminado, vuelva a abrir la pgina con los
vnculos de borrado. El registro ya no aparecer en la lista.
Nota: haga clic en Actualizar si el registro todava aparece en la pgina.
Creacin de pginas que restrinjan el acceso al sitio (PHP)
Puede utilizar Dreamweaver para crear un juego de pginas que restrinjan el acceso al sitio. Los
mtodos que se utilizan son idnticos a los empleados para ColdFusion. Para instrucciones, vase
Creacin de pginas que restrinjan el acceso al sitio (ColdFusion, ASP, JSP Y PHP) en
la pgina 689.
PARTE IX
Apndices
Obtenga ms ayuda para desarrollar sus aplicaciones Web o para utilizar elementos Flash.
Apndice A, Gua de bases de datos para principiantes, en la pgina 769
Apndice B, Nociones bsicas de SQL, en la pgina 781
P
A
R
T
E

I
X
769
APNDICE A
Gua de bases de datos para principiantes
Este apndice est destinado a los usuarios de Macromedia Dreamweaver MX 2004 con poca o
ninguna experiencia en el trabajo con bases de datos o conexiones de base de datos. En l se
explican conceptos generales, no procedimientos especficos. Para ver cmo se aplican en la
prctica estos conceptos, siga leyendo esta gua.
En el apndice se describe cmo designar una base de datos, pero no cmo crearla en una
aplicacin, como Microsoft Access o SQL Server. Ese proceso se describe en la documentacin
impresa o en lnea incluida en su sistema de base de datos.
Bases de datos
El componente bsico de la base de datos es el registro. Un registro es un conjunto de datos
relacionados que se tratan como una sola entidad. Por ejemplo, una tarjeta de ftbol sera un
registro: contiene el nombre, la fotografa, el equipo y las estadsticas de un jugador. Empleando la
terminologa propia de las bases de datos, cada uno de esos elementos de informacin recibe el
nombre de campo: cada registro de tarjeta de ftbol tiene un campo nombre, un campo fotografa,
un campo equipo y varios campos de estadsticas de jugador.
Al juego de registros que comparten los mismos campos se le llama tabla, porque este tipo de
informacin puede presentarse fcilmente en formato de tabla: cada columna representa un
campo y cada fila representa un registro. De hecho, la palabra columna es sinnimo de la palabra
campo, y la palabra fila es sinnimo de la palabra registro.
Una base de datos puede contener ms de una tabla, cada una de las cuales tiene un nombre
exclusivo. Estas tablas pueden estar relacionadas o ser independientes entre s.
Number LastName FirstName Position Goal
Registros
(filas)
Campos (columnas)
770 Apndice A: Gua de bases de datos para principiantes
Un subconjunto de datos extrados de una o varias tablas se denomina juego de registros (o
conjunto de datos, en ASP.NET). Un juego de registros tambin es una tabla porque es una
coleccin de registros que comparte las mismas columnas. Por ejemplo, un alineamiento de un
equipo de ftbol en el que se relacionan los nombres y las posiciones de los jugadores en el campo
sera un juego de registros: consta de un subconjunto de toda la informacin posible sobre los
jugadores, incluidos los goles, las asistencias, las faltas, etc.
Para crear un juego de registros, se realiza una consulta de base de datos. Una consulta consta de
criterios de bsqueda. Por ejemplo, la consulta puede especificar que slo se incluyan algunas de
las columnas en el juego de registros, o que slo se incluyan determinados registros. Para ms
informacin, consulte Aspectos bsicos de los juegos de registros en la pgina 546.
Temas relacionados
Aspectos bsicos de las conexiones de bases de datos en la pgina 776
Aspectos bsicos del diseo de bases de datos
El diseo de la base de datos es el primer paso para crear un sitio Web gestionado por una base de
datos. Esta seccin presenta un caso que se ha utilizado para explicar los principios bsicos del
diseo de bases de datos. En este caso se va a crear una aplicacin Web que ha encargado una
empresa ficticia llamada Arrow Aircraft Services, una compaa que gestiona una pequea flota de
aviones de negocios privados.
El diseo de bases de datos consta de una serie de pasos habituales. Primero, estudie las normas y
las polticas de la empresa que se reflejarn en la aplicacin Web. Segundo, tenga en cuenta las
preguntas que los usuarios harn a la base de datos. Tercero, defina la estructura de la base de
datos. Finalmente, cree la base de datos.
Estudio de las normas y las polticas de la empresa Arrow Aircraft
Le han contratado para crear una aplicacin Web para la empresa Arrow Aircraft Services. Antes
de empezar a disear la base de datos, debe asegurarse de que conoce todas las normas y reglas
comerciales de la organizacin que afectarn a la aplicacin. En esta seccin se describen las
normas y reglas empresariales (simplificadas) de Arrow Aircraft Services.
Number
Tabla de base de datos
LastName FirstName Position Goals
Tabla de conjunto de registros
LastName FirstName Position
Aspectos bsicos del diseo de bases de datos 771
Arrow Aircraft gestiona una flota de cinco aviones de negocios de distintos tamaos y modelos
para sus propietarios. Cada avin tiene hasta ocho copropietarios, empresas o individuos que han
comprado una participacin del avin. Este tipo de arreglo resulta muy til para las personas que
no necesitan un avin de negocios todo el ao.
Los copropietarios o accionistas, abonan a Arrow Aircraft lo siguiente:
Un importe de administracin mensual proporcional a la parte del propietario del avin para
cubrir gastos de piloto, seguro y hangar.
Una tarifa por hora de ocupacin que cubre todos los costes directos, como mantenimiento,
combustible y catering.
A cambio, los copropietarios indican a Arrow Aircraft cundo y dnde desean viajar y la empresa
se encarga del resto, incluido el personal de vuelo y de tierra y el servicio de catering. Arrow
Aircraft debe recibir el aviso con una antelacin mnima de 8 horas para preparar el avin para un
vuelo.
Arrow Aircraft garantiza 800 horas de ocupacin al ao, para cada avin. Se entiende por horas
de ocupacin, las horas en las que el avin est volando, con al menos un pasajero. Las horas de
ocupacin comienzan seis minutos (0,1 hora) antes de que el avin despegue con los pasajeros y
terminan seis minutos despus de que el avin haya aterrizado.
Cada avin puede tener un mximo de ocho propietarios. Por ejemplo, un individuo o una
empresa puede comprar un inters del 1/5 (o 1/5 de accin) de un avin. Arrow Aircraft garantiza
800 horas de ocupacin al ao, por lo tanto el propietario de la participacin de 1/5 tiene derecho
a 160 horas de ocupacin (800 horas / 5 = 160).
Estudio de las caractersticas del encargo de Arrow Aircraft
Arrow Aircraft le ha contratado para crear una aplicacin Web con las siguientes caractersticas:
Permitir que cualquier accionista del avin pueda solicitar una nave para realizar un vuelo.
Proporcionar al Departamento de operaciones de vuelo de la empresa toda la informacin
necesaria para empezar a preparar el avin, incluidos detalles de la solicitud del accionista
(itinerario, fecha y hora de salida, necesidades de catering, etc.), las horas de ocupacin que le
quedan al copropietario y la disponibilidad del avin para el viaje propuesto.
Permitir al Departamento de operaciones de vuelo reservar el avin para evitar conflictos de
planificacin.
Qu preguntas harn los usuarios a la base de datos?
Una vez que se haya familiarizado con las caractersticas que se han propuesto para la aplicacin
Web, puede plantear las siguientes preguntas a los usuarios de la base de datos: Qu preguntas
har a la base de datos?
De la informacin obtenida de los copropietarios del avin extraer lo siguiente:
Cuntas horas de ocupacin me quedan?
Est disponible mi avin para determinada fecha o fechas?
Despus de que un copropietario solicite un avin, los empleados del Departamento de
operaciones de vuelo preguntarn lo siguiente a la base de datos:
Dnde desea ir el copropietario?
Cul ser el itinerario: slo ida, ida y vuelta, varias escalas? El Departamento de operaciones de
vuelo necesita esta informacin para empezar a planificar el vuelo (consultar la previsin
atmosfrica, entregar los planes de vuelo, etc.) y estimar el total de horas de ocupacin.
Le quedan al accionista suficientes horas de ocupacin para el itinerario propuesto?
Desde dnde desea salir el propietario?
Cul es el avin del propietario?
Est disponible el avin para el itinerario propuesto?
Cuntos pasajeros acompaarn al propietario?
Cunto equipaje llevarn; ligero (de mano), normal (una maleta por pasajero) o pesado (ms
de una maleta)?
Cules son las necesidades de catering del propietario?
Cul es la tarifa por hora de ocupacin del avin?
Dnde puedo contactar con el accionista para confirmar el vuelo y el precio estimado?
Eleccin de las tablas de la base de datos
Tras conocer las preguntas que harn los usuarios a la base de datos, debe pensar en cmo
estructurar la base de datos para responder convenientemente a estas preguntas. El primer paso es
elegir las tablas que la van a componer.
En una base de datos relacional, todos los datos se representan en filas y columnas de tablas. Cada
tabla describe un conjunto de entidades relacionadas, como personas, objetos o eventos. Cada fila
describe una aparicin de la entidad y cada fila describe una propiedad de la entidad; por ejemplo,
el apellido de una persona, el color de un objeto o la fecha de un evento.
Para la base de datos de Arrow Aircraft, se eligen las siguientes tablas:
Una tabla de aviones que describe todos los aviones de negocios que gestiona Arrow Aircraft.
Una tabla de reservas que incluye todas las fechas en las que los aviones estn reservados o
disponibles para volar.
Una tabla de accionistas que describe todas las empresas o individuos que poseen
participaciones de los aviones.
Una tabla de itinerarios que describe todos los itinerarios solicitados por los propietarios.
Una tabla de vuelos que describe todas las etapas (vuelos) de los itinerarios.
Eleccin de las columnas en cada tabla
El paso siguiente es elegir las columnas de cada tabla. Las columnas describen las propiedades de
cada entidad de la tabla.
Una buena regla general al elegir columnas es evitar los datos duplicados. Por ejemplo, en la
aplicacin de Arrow Aircraft, sabe que para contestar a la siguiente pregunta del Departamento de
operaciones de vuelo, debern utilizarse nombres de propietarios asociados a datos de itinerarios:
Cules son las necesidades del propietario para un itinerario determinado?
Una opcin sera incluir las columnas de nombre y de apellidos del propietario en la tabla de
propietarios y tambin en la tabla de itinerarios. Sin embargo, esto supondra no slo duplicar los
nombres en dos tablas, sino tambin varias veces en la tabla de itinerarios (tendra que introducir
el nombre del propietario cada vez que ste solicitara un nuevo itinerario). Esta opcin implica un
mayor esfuerzo para introducir los datos, aumenta las posibilidades de error y pone en peligro la
integridad de los datos.
Una solucin mucho ms conveniente sera introducir el nombre y los apellidos del propietario
una sola vez en una nica tabla, la tabla de propietarios. Para contestar la pregunta formulada por
el Departamento de operaciones de vuelo, pueden unirse las tablas de propietarios y de itinerarios
mediante una expresin SQL.
Compruebe que las tablas tienen una columna de clave principal. Las columnas de clave principal
contienen valores que son exclusivos para cada fila. De esta forma, se puede localizar exactamente
la fila que se busca en la base de datos. La mayora de las columnas de clave principal constan de
nmeros ID, pero tambin se pueden utilizar claves principales reales, como nmeros de
formularios oficiales o nmeros de serie de los aviones.
Tras considerarlo detenidamente, decide elegir las siguientes propiedades y claves principales para
las tablas de la base de datos de Arrow Aircraft:
Definicin de relaciones entre las tablas
Tras definir las columnas y las claves principales bsicas de las tablas, ya puede comenzar a definir
las relaciones. Una vez definidas las relaciones, puede escribir declaraciones SQL en Dreamweaver
para combinar datos procedentes de dos tablas (vase Unin de tablas en la pgina 787).
Por ejemplo, cada avin gestionado por Arrow Aircraft tiene varios propietarios. Desea establecer
una relacin uno a varios entre los aviones de la tabla de aviones y los propietarios de la tabla de
propietarios. Esto le evitara tener que introducir y controlar datos de aviones redundantes en la
tabla de propietarios.
En las relaciones de bases de datos uno a varios, cada fila de una tabla est relacionada con varias
filas de la otra tabla. Para definir esta clase de relacin, se incluye una clave externa en la tabla que
incluya todas las filas de la tabla propietarios, como en el ejemplo anterior. Una clave externa es
una columna que contiene valores que corresponden a los de la columna de clave principal de otra
tabla. La clave principal de la tabla de aviones de este caso se llama ac_serial. Por lo tanto, si
incluimos una clave externa denominada ac_serial en la tabla de propietarios, definiramos una
relacin de un avin con varios propietarios.
Con lo que sabe sobre las caractersticas que demanda el cliente y las normas y poltica comercial
de la empresa, decide definir la siguiente relacin uno a varios en la base de datos:
Cada avin puede tener varios propietarios
Cada avin tiene varias reservas
Cada avin tiene varios itinerarios
Cada propietario tiene varios itinerarios
Cada itinerario tiene varios vuelos (o etapas)
A continuacin se muestran los diagramas de las tablas revisados tras haber aadido las claves
externas que definen estas relaciones:
Los diagramas se denominan diagramas E-R o diagramas entidad-relacin.
Creacin de la base de datos
El ltimo paso del diseo es la creacin de la base de datos utilizando un sistema como Microsoft
Access, SQL Server, Oracle9i o MySQL. Consulte la documentacin de su sistema de base de
datos, para obtener ms informacin.
Aspectos bsicos de las conexiones de bases de datos
Si tiene previsto utilizar una base de datos con su aplicacin Web, tiene que crear por lo menos
una conexin de base de datos. Sin esa conexin, la aplicacin no sabr dnde encontrar la base de
datos ni cmo conectar con ella. En Dreamweaver, se crea una conexin de base de datos
proporcionando la informacin (o los parmetros) que necesita la aplicacin para establecer
contacto con la base de datos.
Nota: no es necesario que cree conexiones de base de datos para las pginas de ColdFusion en
Dreamweaver. Debe realizar la conexin mediante las fuentes de datos ColdFusion definidas en
ColdFusion Administrator.
En esta seccin se describen las conexiones de la base de datos, en trminos generales. Para
instrucciones especficas sobre la creacin de conexiones en Dreamweaver, vase Conexin con
una base de datos en la pgina 475.
Comunicacin con la base de datos
Normalmente, los datos almacenados en una base de datos estn en un formato propio, al igual
que el texto del archivo de un procesador de textos. Por ejemplo, esta es la apariencia de los datos
en Microsoft Access:
Aspectos bsicos de las conexiones de bases de datos 777
Esta es la apariencia de la misma base de datos en el Bloc de notas:
La aplicacin Web se encuentra con el mismo problema que con el Bloc de notas o cualquier otra
aplicacin que trata de acceder a datos cuyo formato es desconocido: la aplicacin no puede
descifrar los datos. Hace falta una interfaz de software entre la aplicacin Web y la base de datos
que haga posible el dilogo entre ambas.
Hay tres interfaces comunes que permiten a las aplicaciones comunicarse con las bases de datos.
La primera se llama Open Database Connectivity u ODBC; la segunda, OLE DB (vinculacin e
incrustacin de objetos) y la tercera se llama Java Database Connectivity o JDBC.
La funcin de estas interfaces es actuar como intrpretes. Por ejemplo, cuando en las Naciones
Unidas se realiza un discurso en ingls, un intrprete lo traduce al francs y otro lo traduce al
alemn para los representantes que hablan estos idiomas. De manera similar, se usa una interfaz
para las aplicaciones que hablan OLE DB, otra interfaz para las aplicaciones Web que hablan
ODBC y una tercera interfaz para aquellas aplicaciones que hablan JDBC. Las aplicaciones
ColdFusion MX y JSP hablan JDBC, las ASP hablan ODBC (a travs del intrprete OLE DB/
ODBC que llevan incorporado), las aplicaciones ASP.NET hablan OLE DB y las aplicaciones
ColdFusion 4 o 5 hablan ODBC y OLE DB.
Utilizacin de controladores de bases de datos para que se comuniquen con
la base de datos
Las interfaces ODBC, OLE DB y JDBC estn incluidas como controladores de bases de datos (o
proveedores de datos en OLE DB), que no son ms que elementos de software. Para
comunicarse con la base de datos, la aplicacin Web utiliza un controlador, que acta como
intermediario.
Los controladores de bases de datos son especficos de cada base de datos. Puede usar, por
ejemplo, los controladores de Microsoft Access, SQL Server y dBase. De manera similar, puede
usar proveedores de OLE DB como el proveedor OLE DB para SQL Server. Su eleccin
depender de su base de datos.
Los controladores son creados por los proveedores de bases de datos como Microsoft y Oracle, y
por terceros proveedores de software. Microsoft ofrece distintos controladores ODBC y
proveedores de OLE DB para los paquetes de bases de datos ms utilizados, como Microsoft
Access, Microsoft SQL Server y Oracle. Los controladores ODBC, que slo se ejecutan en la
plataforma Windows, se instalan de forma automtica con Microsoft Office, Windows 2000 y
Windows XP Professional. Adems, se instalan con los paquetes Microsoft Data Access
Components (MDAC) 2.5, 2.6 y 2.7, que se pueden descargar gratuitamente del sitio Web de
Microsoft en www.microsoft.com/data/download.htm. MDAC 2.7 instala algunos proveedores
de OLE DB.
Nota: instale primero MDAC 2.5 y, a continuacin, MDAC 2.7.
Para saber qu controladores ODBC estn instalados en su sistema Windows, vase
Visualizacin de los controladores ODBC instalados en un sistema Windows en la pgina 778.
Algunos controladores JDBC incluyen los controladores I-net JDBC para las bases de datos
Microsoft SQL Server, el controlador Oracle Thin para las bases de datos Oracle y el controlador
JDBC Driver for DB2 para las bases de datos IBM DB2. Para ms informacin sobre los
controladores JDBC y sus proveedores, consulte la base de datos de controladores JDBC en el
sitio Web de Sun en http://industry.java.sun.com/products/jdbc/drivers.
A continuacin se enumeran las interfaces de bases de datos para cada tipo de aplicacin Web y
los controladores ms habituales para cada una:
Visualizacin de los controladores ODBC instalados en un sistema Windows
Si necesita un controlador ODBC especfico y el servidor Web se basa en un sistema Windows,
podr descubrir fcilmente si el controlador ODBC necesario est instalado en el sistema.
Para ver los controladores ODBC instalados en un sistema Windows:
1 Abra el Administrador de orgenes de datos ODBC de la siguiente forma:
En Windows 98, seleccione Inicio > Configuracin > Panel de control y haga doble clic en
el icono Fuentes de datos ODBC. Segn el sistema empleado, el icono tambin puede
denominarse ODBC o 32bit ODBC.
Aplicacin Web Interfaz de base de datos Controladores habituales
ColdFusion MX
JSP
JDBC Controladores nativos de
ColdFusion
Controlador Sun JDBC-ODBC
Controlador Oracle Thin JDBC
ASP ODBC u OLE DB Controlador de Microsoft Access
Proveedor de Microsoft SQL
Server
Microsoft ODBC para Oracle
ASP.NET OLE DB Proveedor de Microsoft Jet
Proveedor de Microsoft SQL
Server
Proveedor de Microsoft Oracle
PHP Especfico MySQL Controlador MySQL
Aspectos bsicos de las conexiones de bases de datos 779
En Windows 2000, seleccione Inicio > Configuracin > Panel de control > Herramientas
administrativas > Orgenes de datos.
En Windows XP, seleccione Inicio > Panel de control > Rendimiento y mantenimiento >
Herramientas administrativas > Orgenes de datos (ODBC).
2 Haga clic en la ficha Controladores.
Aparecer la lista de controladores ODBC instalados en el sistema.
Llamada a los controladores de bases de datos
Para poder establecer una comunicacin en los dos sentidos, una aplicacin tiene que llamar al
controlador de la base de datos. Una aplicacin Web llama a un controlador mediante una cadena
de conexin. Una cadena de conexin consta de toda la informacin (o parmetros) necesarios par
establecer una conexin con una base de datos. En su forma ms simple, una cadena de conexin
especifica una controlador y una base de datos, como en el siguiente ejemplo:
DBQ=C:\Inetpub\wwwroot\Scaal\scaalcoffee.mdb
Las cadenas de conexin ASP pueden contener un parmetro de proveedor que especifique un
proveedor de OLE DB. Si se omite este parmetro, ASP usar como opcin predeterminada el
proveedor de OLE DB para los controladores ODBC. En el ejemplo anterior, el proveedor de
OLE DB para los controladores ODBC se comunicara con el controlador ODBC, Microsoft
Access Driver, que a su vez se comunicara con la base de datos Access, scaalcoffee.mdb.
Los parmetros de una cadena de conexin pueden variar segn el controlador. A continuacin se
muestra una cadena de conexin para una base de datos SQL Server llamada Cases, que se
encuentra en un servidor llamado Hoover:
Driver={SQL Server};Server=Hoover;Database=Cases;
UID=DanaS;PWD=Queequeg
Nota: UID corresponde a ID de usuario; PWD a contrasea.
Dreamweaver simplifica el proceso de insertar cadenas de conexin en las pginas, mediante un
cuadro de dilogo en el que se pueden introducir los diferentes parmetros de la conexin. Por
ejemplo, esta es la apariencia que presenta el cuadro de dilogo que se emplea para definir una
conexin cuando se desarrolla una aplicacin JSP:
Tras completar el cuadro de dilogo y hacer clic en Aceptar, Dreamweaver inserta la cadena de
conexin en un archivo include en su sitio.
Utilizacin de un DSN
En algunas conexiones, se pueden especificar nombres de fuentes de datos (DSN). Un DSN es un
tipo de acceso directo que se crea en Windows para representar una cadena de conexin.
Por ejemplo, supongamos que tiene una base de datos Microsoft SQL Server denominada
Precinct ubicada en un servidor llamado Kojak. Para obtener acceso a la base de datos, debe
introducir el nombre de usuario columbo y la contrasea savalas7. Tras utilizar estos parmetros
para definir un DSN denominado ourcops, puede crear la conexin introduciendo la palabra
ourcops en Dreamweaver, en lugar de utilizar todos los dems parmetros.
Si el servidor de aplicaciones se ejecuta en un sistema Windows y ha definido un DSN en dicho
sistema, podr usar el DSN para definir una conexin ASP o JSP.
Si no dispone de acceso fsico a un servidor (y, por tanto, no puede definir un DSN en l) deber
usar una cadena de conexin para establecer la conexin con la base de datos.
Para configurar un DSN en Windows, vanse los artculos siguientes en el sitio Web de Microsoft:
Los usuarios de Windows XP deben ver el artculo 305599 en http://support.microsoft.com/
Temas relacionados
Conexiones de base de datos para desarrolladores de ASP en la pgina 485
Conexiones de base de datos para desarrolladores de JSP en la pgina 495
781
APNDICE B
Nociones bsicas de SQL
En este apndice se describe cmo utilizar Structured Query Language (SQL) para crear juegos de
registros para las pginas dinmicas. SQL es un lenguaje que permite leer y escribir datos de una
base de datos. Aunque slo consta de algunas palabras clave y sencillas normas de sintaxis, este
lenguaje permite realizar sofisticadas operaciones de bases de datos.
Temas relacionados
Bases de datos en la pgina 769
Aspectos bsicos del diseo de bases de datos en la pgina 770
Nota: Macromedia no ofrece servicio tcnico para las tecnologas de otros fabricantes, como SQL.
Aspectos bsicos de la sintaxis
SELECT es una de las declaraciones SQL de uso ms frecuente para crear un juego de registros.
Extrae las columnas especificadas de una o varias tablas de base de datos y las utiliza para crear un
juego de registros. La declaracin SELECT utiliza la siguiente sintaxis:
SELECT NombreDeColumna FROM NombreDeTabla
Puede aadir saltos de lnea, tabuladores y espacios en blanco a la declaracin para que resulte ms
clara: SQL no tiene en cuenta los espacios en blanco. Por ejemplo, la siguiente declaracin es
vlida:
SELECT PaidDues
FROM Members
Las siguientes palabras clave identifican comandos SQL que se utilizan habitualmente:
Palabra clave Descripcin
SELECT Recupera los registros especificados de una base de datos.
INSERT Aade un nuevo registro a la tabla de la base de datos.
UPDATE Cambia valores en los registros de base de datos especificados.
DELETE Elimina los registros de base de datos especificados.
782 Apndice B: Nociones bsicas de SQL
Las siguientes palabras clave se emplean para definir ms especficamente las declaraciones SQL:
Los siguientes operadores especifican las condiciones y efectan las funciones lgicas y numricas:
Si el elemento que se compara es un texto, escrbalo entre comillas simples, tal y como se muestra
en el siguiente ejemplo:
...WHERE Country = 'Germany'
Si el elemento que se compara es una fecha y se trabaja con una base de datos Microsoft Access,
escrbalo entre smbolos #:
...WHERE DateOfBirth < #01/01/1970#
Es posible que otras bases de datos utilicen sus propias convenciones de fecha. Consulte la
documentacin del sistema.
Es posible que algunos sistemas de base de datos no utilicen sintaxis SQL estndar en sus
productos. Consulte la documentacin del sistema de base de datos.
Palabra clave Descripcin
FROM Designa la fuente de datos de una operacin.
WHERE Establece una o varias condiciones para la operacin.
ORDER BY Clasifica las filas del juego de registros en el orden especificado.
GROUP BY Agrupa el juego de registros segn los elementos de la lista seleccionados.
Operador Significado
= Igual a
LIKE Como (caracteres comodn OK)
<> No igual a
NOT LIKE No como (caracteres comodn OK)
< Menor que
> Mayor que
<= Menor o igual que
>= Mayor o igual que
AND Se deben cumplir las dos condiciones, como Londres Y Madrid.
OR Se cumple al menos una de las condiciones, como Jimnez o Gimnez.
NOT Excluye la condicin que viene a continuacin, como Pars NOT Francia.
Limitacin de los registros en un juego de registros 783
Definicin de las columnas en un juego de registros
Puede utilizar SQL para definir juegos de registros para las pginas. Un juego de registros es un
grupo de registros extrados de una base de datos. Para ms informacin, consulte Bases de datos
en la pgina 769.
Esta es la sintaxis SQL bsica para definir las columnas de un juego de registros:
SELECT Columna1, Columna2, ColumnaX FROM Tabla
Si desea incluir todas las columnas de una tabla en un juego de registros, puede utilizar el carcter
comodn *, de la forma siguiente:
SELECT * FROM Tabla
Por ejemplo, supongamos que tiene una tabla denominada Customers. Para extraer todas las
columnas, escriba la siguiente declaracin SELECT:
SELECT * FROM Customers
Supongamos que slo necesita los datos que contienen dos de las columnas de la tabla Customers:
YearBorn y DateLastPurchase. Para crear un juego de registros que slo contenga los datos de
estas dos columnas, escriba la siguiente declaracin SELECT:
SELECT YearBorn, DateLastPurchase
FROM Customers
Limitacin de los registros en un juego de registros
Utilice una clusula WHERE para limitar el nmero de registros del juego de registros. Por ejemplo,
puede que slo desee incluir los clientes que ganan ms de 30.000 euros al ao. Supongamos que
la tabla contiene una columna Earnings que indica lo que ganan los clientes. La declaracin
SELECT sera la siguiente:
SELECT YearBorn, DateLastPurchase FROM Customers
WHERE Earnings > 30000
Para filtrar los registros de la base de datos, se especifican una o varias condiciones en una clusula
WHERE. En las siguientes secciones se describen los mtodos para filtrar registros con la clusula
WHERE:
Filtrado de registros segn la equivalencia de dos valores en la pgina 783
Filtrado de registros segn la similitud de dos valores en la pgina 784
Filtrado de registros segn un intervalo de valores en la pgina 785
Filtrado de registros segn una combinacin de condiciones de bsqueda en la pgina 786
Filtrado de registros segn la equivalencia de dos valores
Los registros de una base de datos pueden filtrarse segn la equivalencia del valor de un parmetro
con el valor de la columna de un registro.
Supongamos que los usuarios van a realizar una bsqueda en la base de datos por departamento.
Para obtener el juego de registros de resultados de la bsqueda, se utiliza la siguiente lgica:
Se comprueba un registro en la tabla de base de datos.
Si el valor de la columna department del registro coincide con el nombre del departamento que
ha indicado el usuario, se incluir ese registro en el juego de registros de resultados de
bsqueda.
Compruebe el siguiente registro de la tabla.
Puede expresar la lgica con la siguiente clusula WHERE:
WHERE ColumnName = ParameterValue
ParameterValue es una variable SQL que contiene un parmetro de bsqueda. En una
aplicacin Web, el usuario normalmente introduce este parmetro utilizando un formulario
HTML.
Esta consulta de base de datos se podra expresar en SQL de la forma siguiente:
SELECT FIRSTNAME, LASTNAME, DEPARTMENT, EMAIL
FROM EMPLOYEES
WHERE DEPARTMENT = 'varDept'
Esta declaracin SQL localiza todos los registros de la tabla de empleados con un valor de
DEPARTMENT igual al que contiene la variable varDept. Por ejemplo, si el usuario especifica
Operations como el nombre de departamento, la declaracin SQL puede generar el siguiente
juego de registros:
Filtrado de registros segn la similitud de dos valores
Los registros de una base de datos pueden filtrarse segn la similitud del valor de un parmetro
con el valor de la columna de un registro.
Si se utilizan dos valores similares en lugar de coincidentes, los usuarios tienen ms flexibilidad al
especificar el valor de los parmetros de bsqueda. Por ejemplo, no es preciso respetar las
maysculas o minsculas en las palabras de bsqueda. Si el usuario escribe ohio y la columna de la
tabla contiene el valor Ohio, se ha encontrado la coincidencia.
Adems, el uso de similitudes permite utilizar caracteres comodn, de forma que los usuarios
puedan realizar bsquedas alfabticas y parciales. Por ejemplo, si el usuario introduce m y la
columna de la tabla contiene los valores Morgan, Macy y Michelson, puede utilizar un carcter
comodn en la declaracin SQL para encontrar las tres coincidencias.
El carcter comodn estndar es el signo de porcentaje (%):
...WHERE LastName LIKE 'Mc%'
Supongamos que los usuarios van a realizar una bsqueda en la base de datos por apellido. Para
obtener el juego de registros de resultados de la bsqueda, se utiliza la siguiente lgica:
Si el valor de la columna last name del registro contiene un valor similar al introducido por el
usuario, se incluir ese registro en el juego de registros de resultados.
Limitacin de los registros en un juego de registros 785
WHERE ColumnName LIKE ParameterValue
ParameterValue es una variable SQL que contiene un parmetro de bsqueda. En una
aplicacin Web, el usuario normalmente introduce este parmetro utilizando un formulario
HTML.
Esta consulta de base de datos se podra expresar en SQL de la forma siguiente:
SELECT FIRSTNAME, LASTNAME, DEPARTMENT, EMAIL
FROM EMPLOYEES
WHERE DEPARTMENT LIKE 'varLastName'
Si desea dar a los usuarios la opcin de realizar bsquedas de palabras parciales, combine la
variable con un carcter comodn. El carcter comodn SQL que se utiliza en estos casos es el
signo de porcentaje (%). He aqu un ejemplo:
...WHERE LASTNAME LIKE 'varLastName%'
Por ejemplo, si el usuario escribe s como parmetro de bsqueda, todos los registros con apellidos
que comiencen por la letra s se incluirn en el juego de registros, como en el ejemplo siguiente:
Si el usuario especifica sm como parmetro de bsqueda, slo se incluirn en el juego de registros
los registros en los que los apellidos empiecen por las letras sm:
Filtrado de registros segn un intervalo de valores
Los registros de una base de datos se pueden filtrar utilizando como criterio un intervalo de dos
valores de parmetros.
Supongamos que los usuarios van a realizar una bsqueda en la base de datos por un intervalo de
fechas. Para obtener el juego de registros de resultados de la bsqueda, se utiliza la siguiente lgica:
Si el valor de la columna date del registro est comprendido entre los dos valores de fecha que
ha indicado el usuario, se incluir ese registro en el juego de registros de resultados.
WHERE ColumnName BETWEEN ParameterValue1 AND ParameterValue2
ParameterValue1 y ParameterValue2 son variables SQL que contienen parmetros de
bsqueda. En una aplicacin Web, el usuario normalmente introduce estos parmetros utilizando
un formulario HTML.
Este tipo de consulta de base de datos se puede expresar en SQL de la forma siguiente:
SELECT FIRSTNAME, LASTNAME, DEPARTMENT, STARTDATE
FROM EMPLOYEES
WHERE STARTDATE BETWEEN #varStartRange# AND #varEndRange#
Por ejemplo, si el usuario introduce 7/1/99 y 12/31/99 como parmetros de intervalo, todos los
empleados que comiencen en la segunda mitad de 1999 se incluirn en el juego de registros, como
en el ejemplo siguiente:
Filtrado de registros segn una combinacin de condiciones de bsqueda
En esta seccin se describe cmo incluir registros en el juego de registros de resultados de la
bsqueda basndose en una combinacin de condiciones de bsqueda. Para combinar las
condiciones de bsqueda en SQL, se utilizan los operadores lgicos AND, OR y NOT.
Si, para incluir un registro en el juego de registros, todas las condiciones deben ser true, utilice el
operador AND como se indica a continuacin:
...WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT LIKE 'varDept'
Si, para incluir un registro en el juego de registros, cualquiera de las condiciones debe ser true,
utilice el operador OR de la forma siguiente:
...WHERE LASTNAME LIKE 'varLastName' OR DEPARTMENT LIKE 'varDept'
Si desea que una de las condiciones sea true pero otra no, utilice el operador NOT de la forma
siguiente:
...WHERE DEPARTMENT LIKE 'varDept' AND NOT COUNTRY LIKE 'varCountry'
Puede utilizar parntesis para agrupar las condiciones de bsqueda:
...WHERE (DEPARTMENT LIKE 'varDept' AND STARTDATE < #varStart#)
OR STARTDATE BETWEEN #varStartRange# AND #varEndRange#
Clasificacin de los registros en un juego de registros
Utilice la clusula ORDER BY para ordenar los registros del juego de registros. Por ejemplo,
supongamos que desea ordenar los registros del juego de registros por ingresos de cliente, de
menor a mayor. En SQL, los registros se ordenan de la forma siguiente:
SELECT LastName, FirstName, Earnings FROM Customers
ORDER BY Earnings
De forma predeterminada, la clusula ORDER BY ordena los registros en orden ascendente (1, 2,
3... o A, B, C...). Si desea aplicar el orden descendente, comenzando por el valor ms alto y
finalizando por el ms bajo, utilice la palabra clave DESC de la siguiente manera:
ORDER BY Earnings DESC
Unin de tablas 787
Unin de tablas
Puede utilizar una nica declaracin SELECT para recuperar datos de ms de una tabla en la base
de datos. La declaracin une las tablas y devuelve un solo juego de registros con los datos
seleccionados de cada tabla.
Por ejemplo, la base de datos de una empresa puede contener una tabla con datos personales sobre
los empleados y otra tabla con datos sobre los distintos departamentos. Si desea crear un
directorio de empleados que muestre el nombre, nmero de telfono y departamento del
empleado, debe recuperar informacin de las dos tablas de forma simultnea.
Para ello, cree una unin que especifique todas las tablas que se van a incluir y de qu forma van a
relacionarse. He aqu un ejemplo:
SELECT FIRSTNAME, LASTNAME, PHONE, DEPTNAME
FROM EMPLOYEES, DEPARTMENTS
WHERE EMPLOYEES.DEPT_ID = DEPARTMENTS.DEPT_ID
Nota: utilice puntos para identificar las columnas de forma ms precisa. Por ejemplo,
EMPLOYEES.DEPT_ID se refiere a la columna DEPT_ID de la tabla EMPLOYEES.
La primera lnea especifica las columnas que se van a recuperar. Las tres primeras columnas,
FIRSTNAME, LASTNAME, PHONE, pertenecen a la tabla EMPLOYEES, mientras que la
cuarta, DEPTNAME, slo existe en la tabla DEPARTMENTS.
La segunda lnea especifica las dos tablas desde las que se recuperan los datos, EMPLOYEES y
DEPARTMENTS.
La lnea final especifica los registros que se van a unir y recuperar de las dos tablas. Cada tabla
tiene una columna con el nombre DEPT_ID. (En la tabla DEPARTMENTS, la columna es la
clave principal. Para ms informacin, consulte Definicin de relaciones entre las tablas en
la pgina 774.) La clusula WHERE compara el valor de DEPT_ID en una tabla con el valor de
DEPT_ID, en la otra. Cuando se encuentra una coincidencia, todos los campos del registro de la
tabla EMPLOYEES se unen con todos los campos del registro en la tabla DEPARTMENTS. A
continuacin, los datos combinados se filtran para crear un nuevo registro compuesto de una
columna FIRSTNAME, LASTNAME, PHONE y DEPTNAME. Por ltimo, el nuevo registro
se aade al juego de registros.
Es posible que en algunos sistemas de bases de datos, sea preferible utilizar una sintaxis de unin
algo distinta. Por ejemplo, en la siguiente declaracin SQL se utilizan las palabras clave SQL
INNER JOIN...ON para conseguir el mismo resultado que en el ejemplo anterior:
SELECT FIRSTNAME, LASTNAME, PHONE, DEPTNAME
FROM EMPLOYEES INNER JOIN DEPARTMENTS
ON EMPLOYEES.DEPT_ID = DEPARTMENTS.DEPT_ID
Consulte la documentacin del sistema de base de datos para determinar qu sintaxis de unin
debe utilizar.
Temas relacionados
Definicin de relaciones entre las tablas en la pgina 774
789
NDICE ALFABTICO
Smbolos
? en nombres de campo 510
@import 304
A
abrir
Activos, panel 122
archivos 91
archivos de texto 77
archivos no HTML 417
documentos existentes 77
documentos vinculados 350
sitio de Dreamweaver 84
Abrir pgina vinculada, comando 350
Abrir plantilla adjunta, comando 248
Abrir ventana del navegador, accin 395
Abrir, comando 77
absolutas, rutas 326
acceder a archivos
de un sitio de Dreamweaver 84
en un servidor 84
en unidad local o escritorio 85
accesibilidad 2728
cuadro de dilogo, activar 56
funciones del sistema operativo 53
imgenes 315
Iniciativa de Accesibilidad para la Web (W3C) 27
lector de pantalla 52
Ley federal de insercin 27
marcos 211, 216
navegacin mediante teclado 53
objetos multimedia 369
objetos, insertar 646
acciones
cambiar en comportamientos 385
compatibilidad con navegadores 386
crear 386
definicin 381
elegir en el panel Comportamientos 383
incluidas con Dreamweaver 386409
Vase tambin Acciones individuales por nombre
acoplar paneles y grupos paneles 50
activar
Design Notes 112
ocultar 108
ActiveX, objetos, hacer dinmicos 571
activos
abrir el panel Activos 122
administrar 121
categoras 122
colores, aplicar a texto 124
colores, crear 127
editar 125
Favoritos, crear carpeta 129
Favoritos, lista 121, 122, 127
insertar 124
reutilizar activos en otro sitio 126
seleccionar mltiples 125
Sitio, lista 121, 122, 123
URL, crear 127
utilizar 121
ver 121
Activos, panel
abrir 122
Plantillas, categora 234
actualizar
Archivos, panel 92
Diseo, vista 414
plantillas 249
registros 673
Sitio, lista (panel Activos) 123
vnculos 338
790 ndice alfabtico
Actualizar automticamente 522
Actualizar HTML, comando 359
Actualizar local, comando 98
Actualizar pgina actual, comando 132, 249
actualizar pginas
ASP 733
ASP.NET 710
ColdFusion 673
JSP 733
PHP 753
Actualizar pginas, comando 249
Actualizar registro, comportamiento 679, 717, 738,
758
Adjuntar icono de hoja de estilos 304
administrador, contrasea para sitios de
Contribute 143
administrar
activos. Vase Activos
extensiones 61
grupos de paneles 50
vnculos 338
admitidos, lenguajes 428
ajustar lneas en la vista Cdigo 415
Ajustar posicin, comando 168
Ajustar Web Safe, paleta de colores 267
alinear
capas 164
elementos de pgina 317
imagen de rastreo 168
imgenes 292
opciones 317
texto 292
Alinear con seleccin, comando 168
ampliar el panel Archivos 87
aadir
ASP.NET, controles de formulario 647
contenido dinmico 565
extensiones a Dreamweaver 61
filas y columnas 182
vnculos 125
Aadir objeto a Biblioteca, comando 130
Anclaje con nombre, comando 334
Anclaje, objeto (barra Insertar) 334
anclajes con nombre 334
anclajes con nombre, crear 334
anidar
capas 157
configurar preferencias de capa 158
marcos 208
tablas 187
Anidar al crear en una capa, opcin 158
anular ocultacin
carpetas del sitio 109
tipos de archivo 109
todas las carpetas y archivos 111
anular proteccin de archivos 104
aplicaciones Web
conexiones de base de datos 475
configurar un servidor de aplicaciones 468
configurar un servidor Web 468
crear una carpeta raz 471
definir un sitio de Dreamweaver 473
requisitos 467
servidor de prueba 474
aplicaciones, otras, utilizar con Dreamweaver 27
aplicar
colores a texto 124
comportamientos a imgenes 322
CSS, estilos 303
estilos personalizados 303
aplicar formato
cdigo, aplicar formato 416
cdigo, preferencias 415
tablas y celdas 176
Aplicar formato de origen, comando 416
Aplicar plantilla a pgina, comando 254
applets de Java
convertir en dinmicos 571
insertar 368, 380
introduccin 380
applets Vase Applets de Java
"file already in use", mensaje de error 508
archivos
abrir 77, 91
abrir en la vista Cdigo 417
administrar en sitios de Contribute 145
buscar 309
cambiar nombre 91
cargar 106
colocar 106
crear 73
desbloquear en sitios de Contribute 146
descargar 104
Design Notes 111
eliminar 91
guardar 76
localizar archivos protegidos 92
localizar modificados recientemente 93
localizar versiones ms recientes en el local o
remoto 93
ndice alfabtico 791
mover 92
ocultar y anular ocultacin 109
sincronizar sitios local y remoto 107
texto 77
archivos de base de datos bloqueados 507
archivos de configuracin compartidos en sitios de
Contribute 141
archivos de correo electrnico 77
archivos de diseo 74
archivos dependientes, mostrar y ocultar en mapa del
sitio 98
archivos hurfanos 347
archivos no HTML, abrir 417
archivos ocultos, mostrar y ocultar 98
archivos temporales, permisos para destruir 508
Archivos, panel
abrir archivos 91
abrir y cerrar 87
actualizar 92
ampliar 87
buscar archivos 92
cambiar la vista del sitio 88
cambiar nombre de archivos y carpetas 91
cambiar tamao de rea de visualizacin 87
cambiar visualizacin 88
cambiar visualizacin de columnas 88
contraer 87
crear archivos y carpetas 91
eliminar archivos y carpetas 91
mapas del sitio 93
mover archivos y carpetas 92
preferencias 90
ver archivos 87
Arrastrar capa, accin 391
Artculos de Microsoft Knowledge Base 508
ASP
actualizar pginas 733
comando, objetos 743
conexin a un ISP 491
conexiones DSN 487
conexiones sin DSN 490
insertar pginas 671
objetos de comandos, definicin 657
OLE DB, conexiones 487
pginas de borrado 738
pginas de bsqueda 665, 732
pginas de conexin 689
pginas maestra-detalle 658, 729
procedimientos almacenados 742
servidores de aplicaciones 470
ASP.NET
campo de datos sencillo, cuadrcula de
datos 581, 591
CheckBox 649
controles de formulario, aadir 647
controles de formulario, modificar 648
Cuadrcula de datos 581, 590, 591
DropDownList 648
editar, actualizar, cancelar cuadrcula de datos,
botones 581, 591
eliminar cuadrcula de datos, botones 581, 591
escritura de SQL para 547
formato libre, cuadrcula de datos 581, 591
hipervnculo, cuadrcula de datos 581, 591
importar etiquetas 423
insertar pginas 671
instalar .NET Framework 470
Lista de datos 590
ListBox 648
pginas de bsqueda 705
pginas maestra-detalle 699
RadioButton 650
RadioButtonList 650
TextBox 649
aspectos bsicos de Dreamweaver 20
atributos
buscar 441
editar etiquetas utilizando el inspector de
etiquetas 456
Vase tambin Cdigo
atributos de etiqueta editables (plantillas)
convertir en no editable 246
definicin 223
definir 245
modificar en documentos basados en
plantillas 255
audio. Vase Sonido
autoampliar (modo de diseo) 192
automatizar tareas 271
ayuda 29
792 ndice alfabtico
B
barra de estado
acerca de 39
establecer texto (comportamiento) 400
men emergente Tamao de ventana 39
preferencias 44
barra de herramientas, cambiar ttulos de
documento 265
barra de navegacin
aadir imgenes a 343
crear 329
estados de imagen 329
modificar elementos 344
Barra de navegacin de juego de registros, objeto
live 584
barra de navegacin por registros
crear 583
ocultar 586
barra del lanzador, personalizar 52
basados en texto, editores de HTML. Vase Editores
externos
bases de datos
acerca de 769
almacenamiento de contenido 533
bloqueados 507
cadenas de conexin 779
conectarse a 475
conexiones, introduccin 776
controladores 776
diseo 770
esquemas y catlogos 524
insertar pginas 671
MySQL 503
pginas de resultados 665, 705
permisos, cambiar 506
procedimientos almacenados 687, 725, 741
proveedores 776
registros 769
relacionales 774
SQL 781
tablas 769
blockquote, aplicar 292
bloqueadas, hacer clic en regiones 254
bloques de cdigo
escribir 621
marcadores de parmetro 626
reglas de codificacin 619
situar 625
bloques de contenido
aadir contenido a 155
editar 155
insertar 153
resaltado, preferencias 154
borrar
ancho y alto de tabla 181
anchos de columna 182
Botn Flash, cuadro de dilogo 371
botn Flash, objetos
modificar 372
vista previa 373
botones
acerca de 633
botones Ir 395
insertar 639
botones de imagen 639
botones de opcin 634, 638
buscar
archivos 309
buscar y reemplazar 309
cdigo 441
etiquetas y atributos 441
expresiones regulares 433
guardar modelos de bsqueda 442
texto en archivos 309
buscar y reemplazar. Vase Buscar
C
cadenas de conexin 779
cambiar
Archivos, rea de visualizacin del panel 87
Archivos, orden de columnas del panel 88
vistas de sitio en el panel Archivos 88
cambiar nombre
archivos y carpetas 91
elementos de biblioteca 132
Cambiar nombre de grupo de paneles, comando 52
Cambiar propiedad, accin 387
cambiar tamao
capas 163
celdas de tabla 178
celdas y tablas de diseo 198
imgenes 318
manejadores 318
marcos 212
cambiar ttulos 265
Cambiar vnculo en todo el sitio, comando 340
ndice alfabtico 793
campos con numeracin automtica, solucionar
problemas 511
campos de carga de archivos 640
campos de formulario ocultos 633
capas
ajustar a cuadrcula 166
alinear 164
anidar 157
cambiar orden de apilamiento 161
cambiar tamao 163
cambiar visibilidad con comportamientos 402
cambiar visibilidad con el panel Capas 162
convertir en tablas 165
crear 156
desplazables 392
dibujar 156
dibujar anidadas 157
en diseo de tablas 165
evitar solapamiento 165
insertar 156
insertar anidada 157
manipular 162
mostrar marcadores 156
mostrar y ocultar bordes 156
mover 164
preferencias 158
propiedades para mltiples 159
propiedades para una capa 158
seleccionar 160
seleccionar mltiples 159
visibilidad 162
capas anidadas
dibujar 157
insertar 157
caracteres especiales
insertar 298
nombres de campo, signos de interrogacin 510
salto de lnea 293
en nombres de cuentas SQL 509
caracteres no vlidos en nombres de cuentas 509
caracteres vlidos en nombres de cuentas 509
caractersticas de fuente, cambiar 295
Carga previa de imgenes, accin 397
cargar
archivos 106
archivos a un servidor 640
carpeta local
configurar 67
estructura 64
carpeta remota
configurar 69
estructura 64
solucionar problemas 70
carpetas
buscar 309
buscar texto 309
cambiar nombre 91
crear 91
eliminar 91
Favoritos, para activos 129
mover 92
ocultar y anular ocultacin 109
casillas de verificacin 633, 637
catlogos 524
categoras
activos 122
preferencias 58
celdas
resaltando 190
Vase Celdas de diseo, Celdas de tabla
celdas de diseo
acerca de 190
alineacin 200
aplicar formato 200
borrar altos 198
color de fondo 200
dibujar 194
No aj., opcin 200
preferencias 203
celdas de tabla
combinar 171
cortar, copiar y pegar 185
dividir 171
Vase tambin Celdas de diseo, Tablas de diseo
centro de soporte de Dreamweaver 29
CGI, material de referencia 30
CheckBox, control 649
claves de conexin, exportar 143
codificacin 60
cdigo
actualizar cdigo HTML de Fireworks colocado en
Dreamweaver 359
ajustar seleccin mediante el Quick Tag Editor 458
ajustar texto 415
aplicar formato 416
en archivos externos 461
bibliotecas de etiquetas 418
794 ndice alfabtico
buscar 441
comentarios 440
comportamientos del servidor 435
copiar y pegar 440
copiar y pegar desde Fireworks a Dreamweaver 358
editores de etiquetas 439
editores externos 424
entorno de codificacin, personalizar 413
escribir y editar 436
estilos de etiquetas 299
fragmentos 437
imprimir 445
lenguajes admitidos 428
limpiar 447
material de referencia 30
maysculas y minsculas, cambiar 415
navegacin 441
no vlidas 428
nmeros de lnea 415
preferencias de colores 417
preferencias de formato 415
preferencias de reescritura 416
preferencias de validacin 418
reescribir automticamente 429
referencia 444
sangrar 415, 421, 439, 443
seccin head de un documento 463
seleccionar en Contribute 572
seleccionar en la ventana de documento 268
ver 413
ver preferencias 415
XHTML 430
cdigo fuente
Vase tambin Cdigo
cdigo de navegacin 441
cdigo, editar
con BBEdit 424
con el inspector de etiquetas 456
con el inspector de propiedades 455
con HomeSite 424
con Quick Tag Editor 458
cdigo, insertar
con el Selector de etiquetas 438
con la barra Insertar 438
con Quick Tag Editor 457
en la vista Diseo 460
cdigo, sugerencias
Quick Tag Editor 459
Cdigo, vista
abrir archivos no HTML 417
cambiar a vista Diseo 42
escribir y editar cdigo 436
mostrar 413
opciones 415
ver documentos basados en plantilla 226
ver plantillas 224
vista Diseo, especificar qu vista aparece visible 37
ColdFusion
ColdFusion, variables 560
componentes 595599
Componentes, panel 599
fuentes de datos, crear 478
insertar pginas 671
instalar 469
pginas que utilicen componentes 599
pginas, depurar 453
variables de cliente 549, 560
ColdFusion Markup Language (CFML)
depurar 182
ColdFusion Markup Language (CFML), depurar 453
colocar archivos en un servidor remoto 106
colocar bloques de cdigo 625
colocar y obtener archivos 104
Colocar, comando 106
Color de los vnculos, opcin (Prop. de la pgina) 268
Color de vnculos visitados, opcin 268
Color del texto, opcin 268
Color predeterminado, botn 267
colores
cdigo, preferencias 417
como activos. Vase Activos
cuentagotas, utilizar 267
elegir 267
fondo de marco 217
fondo de pgina 266
muestras 267
predet. para texto de pgina 268
seguro para la Web 261
texto, cambiar 124, 297
ndice alfabtico 795
colores de cdigo, preferencias para plantillas 235
colores del sistema 267
Colores del sistema, botn 267
comandos
acceso desde men contextual 49
crear a partir de pasos de historial 275
Descartar cambios 264
grabar 276
Guardar como 263
Guardar todo 263
Combinar celdas, comando 184
combinar paneles flotantes 50
comentarios
comentar el cdigo 443
insertar y editar 440
compatibilidad con capas de Netscape Navigator 4 158
Componentes, panel 599
comportamientos
adjuntar 383
cambiar 385
crear acciones 386
de otros proveedores 386
definicin 381
desencadenar 383
eliminar 385
formularios 645
imgenes 322
JavaScript 381409
marcos 220
multimedia 380
vnculos 347
comportamientos del servidor
Actualizar registro 679, 717, 738, 758
cdigo 435
comprobar 620
crear 612
crear cuadros de dilogo para 626
editar comportamientos personalizados 628
Eliminar registro 741
insertar registros 673
instalar adicionales 620
mover a registros 585
ocultar regiones 586
regiones repetidas 586
Comportamientos, panel 382
comprobar el sitio
acerca de 115
directrices 115
utilizar informes 116
comprobar la ortografa, comando Ortografa 309
Comprobar navegador, accin 388
Comprobar navegadores de destino, comando 448
Comprobar plug-in, accin 389
comprobar vnculos 347
Comprobar vnculos en todo el sitio, comando 348
conectar con bases de datos 475
Conexin con SQL Server 480
Conexin de base de datos OLE 480
conexiones con sitios de Contribute, solucionar
problemas 144
conexiones de base de datos
ASP 485
ASP.NET 479
ColdFusion 477
conectarse 475
JDBC 496
JSP 495
MySQL 503
OLE DB 479, 487
OLE DB, parmetros 481
PHP 503
Configuracin de Live Data, cuadro de dilogo 521
conjunto de resultados de JSP 526
conjuntos de marcos 210220
anidados 208
asignar nombre 216
crear 212
definicin 206
establecer destino de vnculos en 331
guardar 215
predefinidos, insertar 210
propiedades 218
seleccionar 213
Vase tambin Marcos
conocer Dreamweaver 20
consultas, solucionar problemas 509
contador de registros, crear 588
contenido de Flash 366
contenido dinmico
acerca de 546
aadir a pginas 565
atributos 569
botones de opcin 644
796 ndice alfabtico
campos de texto de formulario 643
casillas de verificacin de formulario 643
eliminar 572
eliminar de una pgina 531
formularios 634, 641
imgenes 568
juego de registros avanzado, crear 552
juego de registros, crear 551
juego de registros, definir 547
mens de formulario 641, 642
objetos 571
reemplazar 566
seleccionar en Contribute 572
texto 567
contenido, aadir a tablas 171
contraer el panel Archivos 87
contraseas
administrador de Contribute 143
almacenar 690
campos 637
comprobar en el inicio de sesin 694
incorrectas 508
permitir que los usuarios elijan 690
Contribute
archivos especiales, manipular 141
archivos, administrar 145
archivos, desbloquear 146
archivos, transferir 140
compatibilidad, activar 142
configuracin de administracin, cambiar 142
contenido dinmico 572
contraseas de administrador 143
CSS, estilos 307
definiciones de sitio, exportar 143
Dreamweaver, integracin 137
estructura del sitio, crear 138
grupos de permisos, cambiar 142
permisos en servidores 140
plantillas 236, 250
sitios, administrar con
Dreamweaver 137, 138, 142
control de fuente 82, 101
control ListBox 648
controladores no especificados 507
controladores ODBC 776, 778
Controlar Shockwave o Flash, accin 390
controles ActiveX
insertar 379
introduccin 379
controles de formulario, ASP.NET 647
controles deslizantes, crear 391
convenciones 30
Convertir capas en tablas, comando 165
copiar
activos en otro sitio 126
pasos de historial 274
copiar y pegar
celdas de tabla 185
HTML de Fireworks 358
juegos de registros 564
Creador de comportamientos de servidor 612
crear
archivos temporales 508
colores y URL 127
documento basado en plantilla 75
documento basado en un archivo de diseo 74
documentos en blanco nuevos 74
Favorito, lista para activos 127
imgenes de sustitucin 321
marcos 210
nuevo estilo CSS 302
pginas XHTML 452
plantillas 233
vnculos 330
vnculos a un documento de Microsoft 290
vnculos de script y nulos 337
Crear lbum de fotos Web, comando 359
crear un cach de fuentes de datos 562
CSS, estilos
actualizar en un sitio de Contribute 307
aplicar personalizados (clase) 303
class, atributo 302
crear 302
eliminar 300
eliminar estilo de una seleccin 304
exportar 304
cuadrcula
ajustar capas a 166
como gua 58
mostrar 166
cuadro de color, opcin 267
Cubos de color, paleta de colores 267
cuentagotas 267
cuentas, solucionar problemas de nombres de cuentas
508
cursiva 294
ndice alfabtico 797
D
datos de tabla, importar 172, 290
Datos dinmicos, cuadro de dilogo 570
declaraciones preparadas, JSP 745
Definicin de tipo de documento 422
definir
colores de cdigo 235
fuentes, cambiar caractersticas 294
nuevo documento, tipo predeterminado 76
propiedades del documento 265
Definir combinacin de colores, comando 268
Definir texto de campo de texto, accin 401
Definir texto de capa, accin 400
Definir texto de marco, accin 399
depurar pginas de ColdFusion 453
Derecha, alineacin 317
desacoplar paneles y grupos de paneles 50
desactivar
Design Notes 112
ocultar 108
descargar
archivos 104
comportamientos 386
estimaciones de tamao y tiempo 279
tiempo 39
desconectar usuarios 697
Design Notes
abrir 113
acerca de 111
activar y desactivar 112
aadir opciones de estado 114
configurar 112
eliminar no asociadas 114
guardar informacin sobre archivos 112
introduccin 83
para archivos Fireworks 83
para archivos Flash 83
para objetos multimedia 371
desproteger/proteger
buscar archivos protegidos 92
configurar 101
deshacer proteccin de archivos 104
desproteger y proteger archivos 102
introduccin 82
utilizar 101
destruir archivos temporales, permisos 508
dibujar
capas 156
capas anidadas 157
Director, crear pelculas Shockwave con 376
disear marcos 207
diseo de pgina. Vase Modo de diseo
diseo, planificar. Vase Modo de diseo
Diseo, vista
actualizar 414
cambiar a vista Cdigo 42
JavaScript, insertar 460
mostrar con vista Cdigo 413
VBScript, insertar 460
ver documentos basados en plantilla 225
ver plantillas 223
Dividir celda, comando 184
Dividir marco, comandos 210
Documento, barra de herramientas 36, 37
documentos
abrir 77
aplicar una plantilla 253
buscar 309
comprobar vnculos 347
configurar propiedades 265
configurar un tipo predeterminado para documento
nuevo 76
crear vacos 74
crear, basados en archivo de diseo 74
crear, basados en plantilla 75
Design Notes 111
guardar 76
guardar como plantilla 233
importar de Microsoft Word 78
separar plantilla 254
tamao y tiempo de descarga 279
ttulo de pgina 265
vista previa en navegadores 277
documentos basados en plantilla
adjuntar plantillas 253
en vista Cdigo 226
en vista Diseo 225
modificar atributos de etiqueta editables 255
modificar parmetros de plantilla 255
modificar propiedades 255
modificar regiones repetidas 256
separar plantillas 254
documentos Microsoft Excel, arrastrar contenido a una
pgina 290
documentos vinculados, abrir 350
Dreamweaver
aspectos bsicos 20
ayuda 29
Contribute, integracin 137
798 ndice alfabtico
grupo de debate 29
sitio. Vase Sitios 64
Dreamweaver, integrar Fireworks
actualizar HTML de Fireworks 359
crear lbumes de fotos Web 359
ejecutar y editar imgenes en Fireworks 353, 361
Ejecutar y editar, preferencias 357
ejecutar y optimizar imgenes en Fireworks 354
insertar archivos de Fireworks 353
Optimizar imagen en Fireworks, comando 354
DropDownList, control 648
DSN
conexiones sin 490
crear una conexin 487
utilizar 780
DTD, archivos 422
E
editar
activos 125
archivos de un sitio de Dreamweaver 84
archivos en un servidor 84, 86
ASP.NET, controles de formulario 648
botn Flash, objetos 372
cdigo 436
comportamientos del servidor 628
Dreamweaver, configuracin del sitio 70
fuentes de datos 563
hoja de estilos CSS 307
hojas de estilos externas 306
mtodos abreviados de teclado 61
plantillas 248
sitios Web remotos existentes 71
sitios Web, locales existentes 71
Editar con BBEdit, comando 425
Editar con HomeSite, comando 424
Editar contenido sin marcos, comando 219
Editar hoja de estilos, cuadro de dilogo 307
Editar lista de formatos, cuadro de dilogo 583
Editar lista de fuentes, comando 296
Editor de la biblioteca de etiquetas 418
editor de mtodos abreviados de teclado 61
editores externos
BBEdit (slo Macintosh), integracin 424
elementos multimedia 369
HomeSite (slo Windows), integrar 424
HTML 424
imgenes 322
texto 424
editores. Vase Editores externos
ejecutable, JSP 743
Ejecutar y editar, preferencias 357
Elementos de base de datos, rbol 553
elementos de biblioteca
acerca de 120
aadir a pginas 131
cambiar color de resaltado 133
cambiar nombre 132
convertir en editables en documentos 134
crear 130
editar 131
editar comportamientos en 135
eliminar 133
introduccin 120
preferencias 133
propiedades 134
utilizar 129
volver a crear 133
elementos invisibles
comentarios 440
mostrar y ocultar 269
scripts 460
seleccionar 268
elementos multimedia, insertar 368
elementos, alinear 317
eliminar
archivos de un sitio de Contribute 145
archivos y carpetas 91
contenido dinmico 531, 572
etiquetas vacas 447
filas y columnas 182
fuentes de datos 563
sitios de la lista de sitios 101
Eliminar registro, comportamiento 741
entornos de trabajo, ventana Live Data 518
Enviar, botones 639
equilibrar llaves 448
error, mensajes
archivo en uso 508
Microsoft, solucionar problemas 507
mensajes de error
Vase tambin Solucionar problemas
ndice alfabtico 799
errores de sintaxis en declaraciones de insercin 510
Escala de grises, paleta de colores 267
escribir bloques de cdigo 621
escribir cdigo 436
escritorio, acceder a archivos 85
escritura, permisos en servidores 140
espacio de trabajo
acerca de 34
diseo 59
diseo flotante 34
personalizar el diseo del panel 50
espacio indivisible, insertar 298
espacios
convertir en tabulaciones 443
insertar indivisibles 298
esquemas 422, 524
esquemas de diseo, formatear tablas 178
Establecer como pgina principal, comando 97
establecer destino de vnculos
abrir un documento en una ventana nueva 332
en documentos 331
Establecer imagen de barra de navegacin, accin 398
establecer marcos como destino 219
Establecer texto de la barra de estado, accin 400
Estado de navegacin por juego de registros,
objeto live 589
Estndar, barra de herramientas 36, 38
Estndar, modo del inspector de propiedades 569
Estilo, submen 294
estilos
aplicar estilos personalizados 303
estilos en conflicto 284
Vase tambin Hojas de estilos
Estilos CSS, panel 299
estilos en cascada. Vase Hojas de estilos
estilos personalizados. Vase Hojas de estilos
etiqueta
editores 439
encabezado, aplicar 292
prrafo, aplicar 292
sintaxis, plantillas 226, 250
etiqueta div, insertar 153
etiquetas
anidadas, combinar 447
ASP.NET, importar 423
bibliotecas 418
buscar 441
editar cdigo con Quick Tag Editor 457
editar con un editor de etiquetas 439
eliminar 443, 460
JRun, importar 424
JSP, importar 423
no vlidas 429
personalizadas, importar 422
seleccionar 268, 460
solapadas 429
vacas, eliminar 447
Vase tambin Cdigo
etiquetas no vlidas, mostrar 429
etiquetas personalizadas, importar 422
eventos
cambiar en comportamientos 385
definicin 381
desencadenar acciones 383
disponibles para distintos navegadores y objetos 382
Evitar solapamiento de capas, comando 165
Excel. Vase Microsoft Excel, archivos
exportar
claves de conexin para Contribute 143
datos de tabla 172
estilos para crear una hoja de estilos CSS 304
sitios 100
Exportar tabla, comando 173
expresiones de plantilla 231
expresiones regulares 433
extensibilidad, comportamientos de otros proveedores
386
Extension Manager 61
extensiones
aadir 61
crear 612
instalar 620
F
Favoritos, carpeta 129
Favoritos, lista (panel Activos)
acerca de 121
aadir un nuevo color 128
aadir un URL 128
aadir y eliminar activos 127
crear carpeta Favoritos 129
crear un apodo 128
ver 122
fechas
insertar 297
Fireworks
Design Notes 83
Dreamweaver, integrar 353
800 ndice alfabtico
Flash, archivos SWF
controlar 390
insertar 374
Flash, componentes
descargar nuevo 374
editar propiedades 375
insertar 375
instalar 374
Flash, Design Notes 83
Flash, objetos, hacer dinmicos 571
flujo de trabajo, informes 116
flujo de trabajo, pginas dinmicas 525531
fondo
imagen y color de pgina 266
transparencia en 266
Formatear tabla, comando 178
Formato, columna 582
formato. Vase Cdigo
formatos de archivos, imagen 312
formatos de datos
aplicar 582
crear 583
editar 582
Formulario de actualizacin de registros, objeto de
aplicacin 676, 714, 735, 756
Formulario de insercin de registro, objeto de
aplicacin 671
formularios
accesibilidad 646
aadir a un documento 635
ASP.NET 647
botones 633, 639
botones de opcin 634, 638
botones de opcin dinmicos 644
campos de archivo 634, 640
campos de contrasea 637
campos de texto 633, 637
campos de texto dinmico 643
campos, validar 408
casillas de verificacin 633, 637
casillas de verificacin dinmicas 643
crear 635
imagen, campos 634, 639
insertar objetos 637
introduccin 631
JavaScript, utilizar 645
mens 634, 639
mens de salto, crear 341
mens dinmicos 641, 642
objetos dinmicos 634, 641
ocultos, campos 633, 640
scripts de la parte del cliente 645
scripts de la parte del servidor 632
utilizar para recoger datos 665, 705
validacin 644
foros en lnea 29
fotografas 312
fragmentos de cdigo, aadir mtodos abreviados de
teclado 61
fragmentos, aadir mtodos abreviados de teclado 61
Fragmentos, panel 437
FTP
obtener y colocar archivos 104
preferencias 90
registro 104
registro, mostrar 105
fuentes
cambiar caractersticas 294
cambiar combinaciones 296
codificacin, configurar fuentes para 60
fuentes de datos
acerca de 546
ColdFusion, variables 560
crear un cach 562
definir en ColdFusion 478
editar o eliminar 563
eliminar 563
enviadas por usuarios 534
JavaBeans 561
juegos de registros, crear (sencillos) 551
juegos de registros, introduccin 547
parmetros de formulario, introduccin 535
parmetros de URL, introduccin 536
variables de aplicacin 557
variables de sesin 556
variables de sesin, introduccin 539
variables JSP 561
Fuentes/codificacin, preferencias 60
funciones nuevas en Dreamweaver 18
funciones, ver 441
G
generales, preferencias 60
Generator, objetos, hacer dinmicos 571
GIF, imgenes
como imgenes de rastreo 167
usos para 312
ndice alfabtico 801
grabar comandos 276
grficos. Vase Imgenes
grupos de paneles 36
guardar
archivos en marcos y conjuntos de marcos 215
buscar 442
documentos 76
guardar documentos con un nombre diferente 263
informes 117
mapas del sitio 100
volver a la ltima versin guardada 264
Guardar conjunto de marcos como, comando 215
Guardar conjunto de marcos, comando 215
Guardar marco como, comando 215
Guardar marco, comando 215
Guardar todo, comando 216, 263
Guardar, comando 76
gua introductoria, por dnde empezar 20
guas visuales
introduccin 57
reglas 166
guiones bajos en nombres de cuentas SQL 509
H
head, ver y editar la seccin 463
Hipervnculo, cuadro de dilogo 333
Historial, panel
automatizar tareas con 271
copiar y pegar pasos 274
crear comandos a partir de pasos de historial 275
introduccin 261
lista de historial, borrar 271
nmero mximo de pasos, configurar 271
pasos, aplicar a otros objetos 273
repetir pasos 272
hojas de estilo de tiempo de diseo, utilizar 308
hojas de estilos
editar 306
Editar hoja de estilos, cuadro de dilogo 307
externas 304
introduccin 299
Vase tambin Estilos
hojas de estilos externas
crear 304
editar 306
vincular con 304
HomeSite 424
HTML
aplicar formato 282, 289
atributos, convertir en dinmicos 569
atributos, informes 116
buscar 309
cdigo fuente, buscar 309
cdigo fuente, estilos de etiqueta 299
convertir en XHTML 452
espacio indivisible 298
estilos de etiquetas 299
insertar 282, 289
Roundtrip 429
Vase tambin Cdigo
HTML, formularios. Vase Formularios
I
IBM WebSphere 471
IIS, server-side includes 432
imgenes
acerca de 312
alinear 292
aplicar comportamientos a 322
brillo 320
carga previa (comportamiento) 397
contraste 320
editar 322
editores de imgenes externos 322
escalabilidad 318
formatos admitidos 312
en formularios 634
insertar 313
insertar en el modo de diseo 197
intercambiar (comportamiento) 407
mapas de imagen 345
optimizar mediante Fireworks 319
perfilar 320
recortar 319
restaurar intercambiadas (comportamiento) 408
volver a muestrear 318
imgenes de sustitucin
acerca de 321
crear 321
802 ndice alfabtico
importar
datos de tabla 172, 290
etiquetas ASP.NET 423
etiquetas personalizadas 422
hoja de estilos CSS externa 304
JRun, etiquetas 424
JSP, etiquetas 423
Microsoft Word, archivos 78
sitios 100
texto desde otros documentos 290
Importar HTML de Word, comando 78
Importar tabla, comando 172
imprimir cdigo 445
includes, server-side 432
Inferior absoluta, alineacin 317
Inferior, alineacin 317
informes
guardar 117
para sitios 116
validar cdigo 451
ver 117
iniciar un editor de imgenes externo 322
inicios de sesin, errores 508
insertar
activos 124
applets de Java 380
botn Flash, objetos 371
capas anidadas 157
caracteres especiales 298
comentarios 440
controles ActiveX 379
div, etiquetas 153
elementos multimedia 368
fechas 297
Flash, archivos SWF 374
imgenes 313
imgenes de Fireworks en Dreamweaver 353
imgenes de sustitucin 321
marcador de posicin de imagen 315
Pelculas Shockwave 376
server-side includes 462
texto Flash, objetos 373
Insertar anclaje con nombre, cuadro de dilogo 334
Insertar barra de navegacin, cuadro de dilogo 343
Insertar men de salto, cuadro de dilogo 341
insertar pginas 671
Insertar registro, comportamiento 673
Insertar vnculo de correo electrnico, cuadro de
dilogo 336
Insertar, barra
acerca de 36
acoplar 50
categoras 39
insertar cdigo 438
mostrar categoras como fichas 46
preferencias 47
utilizar 45
Inspector de cdigo 413
inspector de etiquetas 456
inspector de propiedades
acerca de 36
ampliar 48
convertir atributos HTML en contenido
dinmico 569
editar cdigo 455
editar un juego de registros 531, 571
Estndar, modo 569
mostrar 48
reparar vnculos rotos 349
inspectores
inspector de propiedades 48
Vase tambin Paneles
integracin con BBEdit (slo Macintosh) 424
integrar Dreamweaver con otras aplicaciones 27
Intercambiar imagen, accin 407
interfaz de usuario, personalizar el diseo del panel 50
Ir a URL, accin 394
Ir, asociar botn a un men de salto 395
ISP 491
Izquierda, alineacin 317
J
Jakarta Tomcat 471
jar, archivos 423
JavaScript
acciones 382
adjuntar a objetos de formulario 645
alertas 397
archivos 77
comportamientos 381
ejecutar 387
insertar cdigo en la vista Diseo 460
procesar datos de formulario 645
JDBC
controladores 497, 776
parmetros de conexin 496
JDBC-ODBC de Sun, controlador puente 499
ndice alfabtico 803
JPEG, imgenes
usos para 312
JRun 471
JRun, etiquetas 424
JSP
conexiones ODBC 498
conjunto de resultados, definicin 526
controladores JDBC 497
declaraciones preparadas, definicin 657
ejecutable 743
importar etiquetas 423
insertar pginas 671
JavaBeans 561
preparadas, declaraciones 745
servidores de aplicaciones 471
variables JSP 561
Juego de pginas Maestro-Detalle, objeto
de aplicacin 658, 699, 729, 747
Juego de registros, cuadro de dilogo
avanzado 552
sencillo 551
juegos de registros
acerca de 547
columnas, definir (SQL) 783
copiar y pegar 564
crear un cach 562
definir sin SQL 551
editar o eliminar 563
filtrar registros (SQL) 783, 786
Juego de registros, cuadro de dilogo (sencillo) 551
limitar los registros devueltos (SQL) 783
sencillos, crear 551
SQL, escribir 781
SQL, escribir declaraciones personalizadas 552
unir tablas (SQL) 787
vaco, solucionar problemas 511
L
lectores de pantalla
JAWS for Windows 52
Window Eyes 52
lectura, permisos en servidores 140
lenguajes
admitidos en Dreamweaver 428
referencia 444
Limpiar HTML de Word, comando 78
Limpiar HTML, comando 447
Lnea de base, alineacin 317
lneas, ajustar en la vista Cdigo 415
listas, crear 294
Live Data, ventana
acerca de 530
Actualizar automticamente 522
archivos no presentes 520
descripcin 519
parmetros de URL de la barra de
herramientas 521, 530
proporcionar parmetros esperados 521
Llamar JavaScript, accin 387
llaves, equilibrar 448
M
Mac OS, paleta de colores 267
Macromedia Director, crear pelculas
Shockwave con 376
Macromedia Exchange 61, 620
Macromedia HomeSite 424
Macromedia JRun 424, 471
macros, crear comandos 275
manejadores de eventos Vase Eventos
map, etiqueta 345
mapas de bits
cambiar tamao 318
mapas de bits, cambiar tamao
Vase tambin Imgenes
mapas de imagen
crear del lado del cliente 345
introduccin 345
seleccionar mltiples zonas interactivas 346
zonas interactivas 345
mapas de imagen del lado del servidor 345
mapas del sitio
aadir archivos a un sitio 97
cambiar vnculos en 339
configurar pgina principal 94
eliminar vnculos en 340
guardar como archivo de imagen 100
modificar diseo 95
mostrar archivos 98
mostrar archivos dependientes en 99
ocultar archivos 98
804 ndice alfabtico
utilizar 93
utilizar con pginas 96
ver 94
ver una rama de 99
Vincular a nuevo archivo, comando 97
vnculos 339
marcadores para elementos invisibles 269
marcos 206220
aadir atributos de accesibilidad 211
anidados 208
cambiar contenido 218
cambiar el color de fondo 217
cambiar tamao 212
crear 210
definicin 206
editar atributos de accesibilidad 216
eliminar 212
establecer destino 219
guardar 215
introduccin 206
Marcos, panel 213
pasos para crear 210
planificar 207
propiedades 216
seleccionar 213
utilizar con comportamientos 220
Marcos, panel
abrir y cerrar 213
seleccionar 213
maysculas y minsculas, cambiar 415, 443
MDAC (Microsoft Data Access Components) 480
Medio absoluta, alineacin 317
Medio, alineacin 317
Mensaje emergente, accin 397
mensajes de error de Microsoft, solucin de
problemas 507
men de encabezado de columna
acerca de 170
Aadir imagen de espaciador 202
Borrar ancho de columna 182
Hacer que la columna sea autoampliable 201
Hacer que la columna tenga ancho fijo 201
Insertar columna derecha 183
Insertar columna izquierda 183
mostrar 182, 191
Quitar imagen de espaciador 202
Seleccionar columna 175
Men de salto Ir, accin 395
Men de salto, accin 394
mens 639
mens contextuales 49
mens de acceso directo Vase Mens contextuales
mens de listas 634, 639
mens de sugerencias para el cdigo 436
mens desplegables 634, 639
mens emergentes 634, 639
mtodos abreviados de teclado, editar 61
Microsoft Access, archivos de base de datos
bloqueados 507
Microsoft Excel, importar archivos 172
Microsoft IIS 470
Microsoft Word, documentos
arrastrar contenido a una pgina 290
importar 78
Modelo de objetos de expresin (plantillas) 232
modificar
bases de datos, utilizando procedimientos
almacenados 687, 725, 741
propiedades de pgina 265
modo de diseo
aadir contenido a 197
ancho fijo 192
aplicar formato a celdas de diseo 200
aplicar formato a tablas de diseo 200
autoampliar 192
borrar altos de celdas 198
cambiar a 193
cambiar tamao de celdas y tablas de diseo 198
dibujar celdas y tablas de diseo 194
espaciado de celdas 200
establecer ancho 192
Igualar ancho de celdas, opcin 200
imgenes de espaciador, preferencias 193
introduccin 190
men de encabezado de columna 201
mover celdas y tablas de diseo 198
preferencias 203
Quitar anidacin, opcin 200
Quitar todos los espaciadores, opcin 200
relleno de celdas 200
salir de 193
seleccionar celdas y tablas de diseo 198
tablas de diseo anidadas 195
modo de tablas expandidas 176
modos
modo de diseo 189
ndice alfabtico 805
mostrar
anchos de tabla y columna 182
capas 162
mltiples registros 586
registro FTP 105
sugerencias para el cdigo 436
Mostrar archivos dependientes, opcin 99
mostrar elementos invisibles 269
Mostrar regin, comportamiento 586
Mostrar-Ocultar capas, accin 402
Mover a registro, comportamiento 585
mover archivos y carpetas 92
MPEG, pelculas como activos. Vase Activos
muestras de color 267
multimedia. Vase Elementos multimedia
multiusuario, sistemas 41
MySQL 503
N
navegadores
colores seguros 261
compatibilidad con marcos 219
comprobar compatibilidad 448
comprobar versiones 388
principal, definir 277
vista previa en 277
negrita 294
niveles de autorizacin 695
Nombre de fuente de datos. Vase DSN
nombres de usuario
almacenar 690
comprobar en el inicio de sesin 694
comprobar exclusividad 692
permitir que los usuarios elijan 690
nuevas funciones de Dreamweaver 18
Nuevo desde plantilla, comando 75, 76
Nuevo documento, preferencias 76
numerar lneas de cdigo 415
nmeros de lnea 415
O
objetos
insertar con la barra Insertar 45
insertar en formularios 637
objetos de aplicacin
Formulario de actualizacin de registros 676, 714,
735, 756
Formulario de insercin de registro 671
Juego de pginas Maestro-Detalle 658, 699,
729, 747
objetos de comando, ASP 743
objetos de servidor
ColdFusion, variables 549, 560
objetos de aplicacin 557
objetos de sesin 556
objetos live
Barra de navegacin de juego de registros 584
Estado de navegacin por juego de registros 589
Obtener ms comportamientos, comando 386
obtener y colocar archivos
colocar archivos en un servidor remoto 106
obtener archivos de un servidor remoto 104
Obtener, comando 104
ocultar
activar y desactivar 108
anular ocultacin de todo 111
archivos 109
carpetas del sitio 109
elementos invisibles 269
introduccin 82
vnculos 586
Ocultar men emergente 406
ocultos, campos 640
ODBC, errores 510
OLE DB
conexiones 487
obtener un proveedor 479
proveedores 776
OLE DB, cadena de conexin 481
onBlur, evento 408
opcin ndice Z (para capas), cambiar orden de
apilamiento 161
opciones de visualizacin
fuentes 60
paneles flotantes 52
Optimizar imagen en Fireworks, comando 354
Oracle Thin Driver 496
orden de apilamiento, capas 161
ortografa
comprobar 309
diccionarios 309
Ortografa, comando 309
806 ndice alfabtico
P
pgina de inicio 36
pgina de registro 689
pgina principal, establecer para mapa del sitio 94, 97
pginas
actualizar 673
cambiar el ttulo 265
cambiar su tamao para que quepan en el
monitor 43
color 266
colores predet. de texto 268
conexin 692
de borrado 738
Design Notes 111
imagen de fondo 266
insertar 671
registro de usuarios 689
restringir el acceso 695
tamao 279
tiempo de descarga estimado 279
XHTML, crear 452
pginas de borrado
ASP 738
ASP.NET 717
ColdFusion 679
JSP 738
PHP 759
pginas de bsqueda
ASP 665, 732
ASP.NET 705
ColdFusion 665
JSP 665, 732
PHP 665
pginas de resultados 665, 705
pginas detalle 658, 699, 729, 747
pginas JavaServer. Vase JSP
pginas maestra-detalle
ASP 658, 729
ASP.NET 699
ColdFusion 658, 660
JSP 658, 729
PHP 658, 747
paletas de colores 267
Panel Capas 159
paneles
acoplar 50
Activos, categora Plantillas 234
Comportamientos 382
configurar preferencias de paneles flotantes 52
Fotogramas 213
Historial 261
paneles flotantes, combinar 50
parmetros
demasiado pocos 509
marcadores 626
plantillas 231
parmetros de conexin 496
parmetros de plantilla
introduccin 231
modificar en documentos basados en plantillas 255
Parmetros, cuadro de dilogo 571
prrafos
aadir un salto de lnea 293
aplicar formato 292
pegar pasos de historial 274
pelculas QuickTime
insertar 378
Pelculas Shockwave
controlar 390
insertar 376
introduccin 376
pelculas, insertar 368
Perl 428
permisos
carpeta de base de datos 509
crear y destruir archivos temporales 508
escritura, permisos en servidores 140
grupos en Contribute 142
seguridad 506
en servidores 140
personalizar
diseo del panel 50
Dreamweaver, aspectos bsicos 58
entorno de codificacin 413
PHP
insertar pginas 671
instalar PHP 471
Mac OS X 471
pxeles transparentes en el fondo 266
planificar marcos 207
ndice alfabtico 807
plantillas
Activos, panel 234
actualizar documentos 249
actualizar sitios de Contribute 250
anidados 246
anidar 228
aplicar a un documento existente 253
atributos de etiqueta editables 223, 245, 246
cambiar colores de resaltado de regin 236
cambiar nombre 251
en vista Cdigo 224
comprobar sintaxis 250
convertir una regin en no editable 240
crear 233
crear documentos nuevos con 75
crear para sitios de Contribute 236
deshacer aplicacin 254
en vista Diseo 223
editar 248
editar cdigo fuera de las etiquetas HTML 230
editar scripts de servidor en documentos 230
eliminar 251
expresiones 231
hacer clic en regiones bloqueadas 254
introduccin 222
localizar regiones editables 240
modificar propiedades en documentos basados en
plantillas 255
parmetros 231
preferencias 235
regin opcional 223, 243, 245
regin repetida 222, 241, 256
regiones editables 222, 239, 240, 241
separar documento de 254
sintaxis de etiquetas 226
tabla repetida 242, 243
tipos de regin 222
vnculos 228
XML 252
plantillas anidadas
controlar regiones editables 246
crear 246
introduccin 228
plug-ins de Netscape Navigator
reproducir en la ventana de documento 378
plugins
comprobar 389
reproducir en la ventana de documento 378
PNG, imgenes
usos para 312
Predeterminado por el navegador, alineacin 317
preferencias
actualizar vnculos 338
barra de estado 44
cambiar resaltado 154
Capas 158
Cdigo, vista 415
colores de cdigo 417
diccionario ortogrfico 309
editores externos 370
Ejecutar y editar 357
formato de cdigo 415
Fuentes/codificacin 60
generales 60
Insertar, barra 47
introduccin 58
modo de diseo 203
Nuevo documento 76
Paneles 52
paneles flotantes 52
plantilla 235
reescribir cdigo 416
resaltado, bibliotecas 133
resaltado, bloques de contenido 154
resaltado, celdas de diseo 195
resaltado, regiones de plantilla 235
resaltado, tablas 173
Sitio 90
sugerencias para el cdigo 416
tipos de archivo y editores 425
Tipos de archivo/editores 370
Validador 418
privilegios de acceso
almacenar en una base de datos 696
aadir a pginas 696
ejemplo 695
procedimientos almacenados
ASP 742
ASP.NET 725
ColdFusion 687
definicin 656
JSP 743
modificar bases de datos 687, 725, 741
procesadores de texto, archivos creados con 77
808 ndice alfabtico
propiedades
cambiar con comportamientos 387
celda de diseo 200
conjunto de marcos 218
de documento, configurar 265
documento basado en plantilla 255
elemento de biblioteca 134
marco 216
mostrar 48
mltiples capas 159
tabla 177
tabla de diseo 200
una capa 158
propiedades de pgina, cambiar ttulos 265
Propiedades de plantilla, cuadro de dilogo 255
Propiedades del vnculo de datos 480
proporcin, mantener 318
Proveedores de Microsoft OLE DB 480
Proveedores de Oracle OLE DB 480
Q
Quick Tag Editor
abrir 457
mens de sugerencias 459
QuickTime, pelculas
Quitar la marca de regin editable, comando 240
R
RadioButton, control 650
RadioButtonList, control 650
recoger datos de los usuarios 665, 705
recursos para informacin sobre tecnologas Web 30
reescribir cdigo 429
Referencia, panel 444
regiones
hacer clic en bloqueadas 254
ocultar 586
regiones editables (plantillas)
cambiar el nombre 241
controlar en plantillas anidadas 246
crear 239
definicin 222
eliminar 240
seleccionar 240
regiones opcionales (plantillas)
definicin 223
insertar 243
modificar 245
regiones repetidas
(documentos basados en plantillas) 256
regiones repetidas (plantillas)
alternar colores 243
en documentos basados en plantillas 256
crear 241
definicin 222
tabla repetida 242
registros
actualizar 673
crear un contador 588
eliminar 738
insertar 671
mostrar varios 586
vnculos de navegacin 583
reglas 166
reglas horizontales, insertar y modificar 293
relativas a la raz, rutas
acerca de 328
definir 331
relativas al documento, rutas
acerca de 327
definir 331
repetir pasos 271
Repetir regin, comportamiento 586
reproducir objetos Flash 373
Reproducir sonido, accin 396
Reproducir, botn 272
requisitos, aplicaciones Web 467
resaltado, preferencias
bloques de contenido 154
celdas de diseo 195
regiones de plantilla 235
tablas 173
Restablecer origen, comando 166
Restablecer posicin, comando 168
Restaurar imagen intercambiada, accin 408
restringir el acceso al sitio 689
restringir tablas 524
Resultados, grupo de paneles
Revisin del navegador de destino, panel 448
Validacin, panel 451
retorno, aadir un prrafo 293
reutilizar
activos 126
buscar 442
cdigo 437
ndice alfabtico 809
Revisin del navegador de destino, panel 448
Roundtrip HTML 429
Rueda de color (Colores del sistema), botn 267
ruta virtual 491
rutas
absolutas 326
fsicas 491
relativas a la raz 328
relativas al documento 327
rutas relativas a la raz del sitio. Vase Rutas relativas a la
raz
S
salto, mens de
acerca de 634
aadir mens de salto 341
botones Ir 341, 395
cambiar elementos de men 342
crear un mensaje de seleccin para 341
editar 394
sangra, cdigo 415, 421, 439, 443
scripts
editar en la vista Diseo 461
editar externos 460
insertar 460
llaves equilibradas 448
ver funciones 441
vincular archivos externos 461
scripts de servidor, en plantillas 230
seguridad 689
seguridad y permisos 506
seleccionar
capas 160
etiquetas 460
marcos y conjuntos de marcos 213
objetos en la ventana de documento 268
tabla, elementos 173
varios activos 125
Seleccionar remoto ms reciente, comando 107
selector de color
Dreamweaver 267
sistema 267
selector de etiquetas 36, 460
Selector de etiquetas, insertar etiquetas 438
Separar de plantilla, comando 254
Separar del original, opcin 134
server-side includes
editar 462
insertar 462
introduccin 432
server-side includes de archivo 432
server-side includes virtuales 432
Servicio tcnico de Microsoft 507
servicios Web
acerca de 601
aadir a una pgina 608
directorios UDDI 603
flujo de trabajo 602
generador de proxy AXIS 604
generadores de proxy, adicionales 604
generadores de proxy, configurar 605
generadores de proxy, instalar 604
lista de sitios UDDI, editar 610
SOAP 604
servidor de aplicaciones
configurar 468
elegir 468
servidor de prueba
aplicaciones Web 474
comportamientos 620
configurar 468
servidor HTTP 468
servidores
abrir una conexin existente 84
cargar pginas 640
conectarse para editar archivos 86
opciones de acceso 69
solucionar problemas de configuracin 70
Shockwave, objetos, hacer dinmicos 571
Shockwave, pelculas
signos de interrogacin 510
sincronizar sitios local y remoto 107
sistemas operativos, multiusuario 41
Sitio, lista (panel Activos)
acerca de 121
actualizar 123
ver 122
Sitio, panel
ahora panel Archivos 36, 90
buscar texto y/o HTML dentro de los
documentos 309
810 ndice alfabtico
sitios
abrir para ver 84
activos grandes en 127
activos, reutilizar 126
archivo de cach 339
Archivos, cambiar visualizacin del panel 88
archivos, utilizar 91
buscar archivos 92
buscar archivos en 309
cach 338
carpeta local, configurar 67
carpeta remota, configurar 69
carpeta remota, opciones de acceso 69
carpeta remota, solucionar problemas de
configuracin 70
crear nuevo 65
crear nuevo, asistente para la definicin del sitio 66
crear nuevo, configuracin avanzada 66
Design Notes 111
desproteger/proteger, utilizar 101
directrices de comprobacin 115
editar configuracin del sitio 70
editar sitios Web existentes 71
estructura de carpeta 64
importar y exportar 100
informes 116
locales y remotos 63
localizar archivos modificados recientemente 93
mapa del sitio, utilizar 93
material de referencia 30
ocultar 82, 108
quitar de la lista de sitios 101
seguridad 689
servidor de prueba 474
sincronizar local y remoto 107
ver en panel Archivos 87
vnculos 325
vnculos rotos, reparar 349
vnculos, cambiar en todo el sitio 340
vnculos, comprobar 347
sitios locales. Vase Sitios 65
SO Windows, paleta de colores 267
SOAP y servicios Web 604
solapadas, etiquetas 429
solucionar problemas
archivo en uso 508
archivos bloqueados en sitios de Contribute 146
BOF 511
campo COUNT incorrecto 510
compatibilidad con Contribute, activar 139
consultas actualizables 509
Contribute 144, 146
desproteger y proteger en sitios de Contribute 146
DSN 507
EOF 511
error de inicio de sesin 508
errores de sintaxis 510
estilos que no aparecen correctamente en
Contribute 307
hacer clic en regiones bloqueadas 254
mensajes de error de Microsoft 507
ODBC, errores 510
parmetros, demasiado pocos 509
permisos 505
plug-ins de Netscape Navigator 379
tipos de datos no coincidentes 509
vnculos rotos en Contribute 146
sonido
aadir a una pgina 376
establecer un vnculo con archivos de audio 377
incrustar 377
reproducir 396
SQL
acerca de 781
ASP.NET 547
definir columnas 783
DELETE 781
filtrar registros 783, 786
FROM 782
GROUP BY 782
INSERT 781
juego de registros, definir con SQL 552
limitar registros 783
operadores 782
ORDER BY 782
SELECT 781
SELECT, declaracin 781
unir tablas 787
UPDATE 781
WHERE 782
SQL Server, solucionar problemas de
pginas dinmicas 508
sugerencias para el cdigo
bibliotecas de etiquetas 418
introduccin 436
preferencias 416
ndice alfabtico 811
Sun One Active Server Pages 470
Superior, alineacin 317
sustituir un marcador de posicin de imagen 316
SWF, archivos Flash
T
tabla, men de encabezado
acerca de 170
Borrar todos los altos 182, 198
Borrar todos los anchos 182
igualar anchos 181, 203
mostrar 182, 191
Quitar todas las imgenes de espaciador 202
Seleccionar tabla 174
tablas
anchos 170
anchos de columna 170
anchos de columna, igualar 203
anchos, mostrar 182
anidar 187
aplicar formato 176
cambiar tamao 178
capas, convertir 165
celdas, borrar ancho y alto 181
celdas, combinar 184
celdas, dividir 184
celdas, resaltando 173, 190
columnas, borrar ancho 182
columnas, igualar anchos 181, 203
contenido, aadir 171
crear 171
datos de tabla, importar 290
datos, exportar 172
diseos predefinidos para 178
editar 176
elementos, seleccionar 173
filas y columnas, ajustar 178
filas y columnas, aadir y eliminar 182
importar 172
introduccin 170
ordenar 187
propiedades 177
restringir 524
Vase tambin Columnas, Filas y Celdas
tablas de diseo
acerca de 190
alineacin 200
anidados 195
aplicar formato 200
borrar altos 200
color de fondo 200
dibujar 194
espaciado de celdas 200
Igualar ancho de celdas, opcin 200
preferencias 203
Quitar anidacin, opcin 200
Quitar todos los espaciadores, opcin 200
relleno de celdas 200
tablas repetidas (plantillas)
alternar colores 243
insertar 242
tabulaciones, convertir en espacios 443
Tachar (Color predeterminado), botn 267
tamao del monitor, cambiar tamao de pginas para
ajustar 43
TextBox, controles 649
texto
abrir archivos 77
alineacin 292
aadir a un documento 289
anular sangra 292
aplicar formato 282, 289, 294
buscar en documentos 309
cambiar color de 124, 297
cambiar combinaciones de fuentes 296
campos 633, 637
campos, establecer texto con comportamientos 401
colores predet. en pginas 268
datos de tabla, importar 290
editores Vase tambin Editores externos
editores, archivos creados 77
espacio indivisible 298
importar desde otros documentos 290
insertar 282, 289
sangrar 292
Texto Flash, cuadro de dilogo 373
texto Flash, objetos
insertar 373
vista previa 373
Texto superior, alineacin 317
texto, ajustar 415
tipo predeterminado de documento nuevo 76
tipogrficas, convenciones 30
tipos de archivo
Archivos Flash 366
preferencias del editor externo 425
812 ndice alfabtico
Tipos de archivo/editores, preferencias 370
tipos de datos no coincidentes 509, 511
tld, archivos 423
Tono continuo, paleta de colores 267
transferencia de archivos, preferencias 90
transferir archivos 104
transferir archivos desde y hacia sitios de
Contribute 140
transparentes, pxeles en el fondo 266
U
UDDI
directorios pblicos 603
lista de sitios, editar 610
underline 294
unidad local, acceder a archivos 85
URL
aplicar a seleccin 125
crear activos de URL 127
Vase tambin Rutas
usemap, atributo 345
V
Validador
preferencias 418
utilizar 451
Validador de etiquetas 451
Validar formulario, accin 408
validar formularios 644
variables de aplicacin 557
variables de sesin
acerca de 539
datos, almacenar 541
datos, recuperar 543
definir 556
parmetros de formulario 541
parmetros URL 540
VBScript, insertar cdigo en la vista Diseo 460
ventana de documento
acerca de 36
aspectos bsicos 36, 42
barra de estado 39
barra de ttulo 37
buscar texto 309
cambiar tamao 43
reproducir plug-ins de Navigator 378
seleccionar elementos 268
selector de etiquetas 39
tamao del documento y tiempo de descarga 39
ver cdigo 42
ventana Sitio, buscar texto 309
ver
activos 121
archivos en un servidor 84
archivos en un sitio de Dreamweaver 84
archivos en unidad local o escritorio 85
cdigo 413
cdigo de la seccin head 463
elementos invisibles 269
plantillas en la vista Diseo 223
plantillas en vista Cdigo 224
regiones de plantilla en la vista Diseo 225
regiones de plantilla en vista Cdigo 226
Verificador de vnculos, cuadro de dilogo 349
Vinculaciones, panel
aadir texto dinmico 567
borrar fuentes de datos 563
convertir atributos HTML en contenido
dinmico 569
crear un contador de registros 590
Formato, columna 582
formularios dinmicos 634, 641
vincular
anclajes 334
con anclaje con nombre mediante icono de
sealizacin de archivos 335
a un documento mediante el icono de sealizacin
de archivos 332
documentos 331
a hoja de estilos CSS externa 304
Microsoft Word o Microsoft Excel, documentos
290
navegar 325
Vincular a archivo existente, comando 97
Vincular a nuevo archivo, comando 97
vincular etiqueta href 304
Vincular hoja de estilos externa, cuadro de dilogo 304
vnculos
abrir origen 339
actualizar 338
con anclajes 334
aplicar a seleccin 125
archivo de cach 338
a archivos de script 461
cambiar en todo el sitio 340
cambiar marcos con 218
comprobar 347
ndice alfabtico 813
crear 330
con documentos 330
a documentos de Microsoft 290
eliminar 339
con hojas de estilos 304
mapa del sitio 339
ocultar 586
en plantillas 228
Relativa a la raz del sitio, opcin 331
Relativa al documento, opcin 331
reparar 349
rotos 347
Vnculos activos, opcin de color
(Prop. de la pgina) 268
vnculos de correo electrnico
cambiar 340
crear 336
vnculos de hipertexto 330
vnculos de navegacin por registros 583
vnculos de script
cambiar 340
crear 337
vnculos externos 347
vnculos nulos
cambiar 340
crear 337
vnculos rotos 347
Vista previa en el navegador, comando 277
volver a la ltima versin guardada 264
W
Web
lbumes de fotos, crear 359
diseo, niveles de experiencia 20
servicios de alojamiento Web 491
servidor, configurar 468
web.xml, archivo 423
X
XHTML
cdigo 430
convertir de HTML en XHTML 452
crear pginas 452
XML
DTD, archivos 422
en plantillas 252
Z
zonas interactivas
aplicar comportamientos a 322
cambiar tamao 346
en mapas de imagen 345
seleccionar mltiples en un mapa de imagen 346
814 ndice alfabtico

Utilización de Dreamweaver PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Utilización de Dreamweaver PDF

Cargado por

Copyright:

Formatos disponibles

Utilizacin de Dreamweaver

También podría gustarte