Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Manual Dreamweaver 8 - Avanzado PDF
Manual Dreamweaver 8 - Avanzado PDF
Marcas comerciales 1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central, ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev y WebHelp son marcas comerciales registradas o marcas comerciales de Macromedia, Inc. y pueden estar registradas en Estados Unidos o en otras jurisdicciones, incluidas las internacionales. Otros nombres de productos, logotipos, 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. Copyright 1997-2005 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 su parte o en su totalidad, sin el permiso previo y por escrito de Macromedia, Inc. A pesar de lo establecido anteriormente, el propietario o el usuario autorizado de una copia legal del software junto al que se proporciona este manual puede imprimir una copia de la documentacin a partir de su versin electrnica con el nico fin de aprender a utilizar dicho software, teniendo en cuenta que ninguna parte de este manual se puede imprimir, reproducir, distribuir, revender ni transmitir con otros fines entre los que se incluyen, sin limitarse a ellos, la venta de copias de esta documentacin o el ofrecimiento de servicios de soporte no gratuitos. Agradecimientos Direccin del proyecto: Charles Nadeau Redaccin: Michael Varese Redaccin adicional: Jennifer Rowe, Paul Gubbay, Charles Nadeau Edicin: Rosana Francescato, Lisa Stanziano, Anne Szabla, Mary Ferguson, Mark Nigara Produccin y administracin de edicin: Patrice ONeill y Rosana Francescato Produccin y diseo multimedia: Adam Barnett, Aaron Begley, Paul Benkman, John Francis, Geeta Karmarkar, Paul Rangel, Arena Reed, Mario Reynoso Administracin de la localizacin: Melissa Baerwald Nuestro especial agradecimiento a Sheila McGinn, Paul Gubbay, Vic Mitnick, Jim Doubek, Joaquin Blas, Wenlan Du, Ken Karleskint, Jennifer Taylor, Jorge Taylor, Nick Halbakken, Scott Richards, Sami Kaied, John Skidgel, Masayo Noda, Kristin Conradi, Yuko Yagi, a los responsables de verificar la versin beta y a los equipos de ingeniera y control de calidad de Dreamweaver. Primera edicin: septiembre de 2005 Macromedia, Inc. 601 Townsend St. San Francisco, CA 94103
Contenido
PARTE 1: ASPECTOS BSICOS DE DREAMWEAVER Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Novedades de Dreamweaver 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Por dnde empezar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Flujo de trabajo de Dreamweaver para la creacin de sitios Web. . . Utilizacin de Dreamweaver con otras aplicaciones . . . . . . . . . . . . . . Dreamweaver y accesibilidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Gua de recursos de formacin de Dreamweaver . . . . . . . . . . . . . . . . . Convenciones tipogrficas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Recursos tecnolgicos HTML y Web . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 24 28 33 34 35 39 39
Captulo 1: Exploracin del espacio de trabajo . . . . . . . . . . . . . . . 41 Espacio de trabajo de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Utilizacin de la ventana de documento . . . . . . . . . . . . . . . . . . . . . . . . . 54 Utilizacin de barras de herramientas, inspectores y mens contextuales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Utilizacin de paneles y grupos de paneles . . . . . . . . . . . . . . . . . . . . . . 66 Utilizacin de las funciones de accesibilidad de Dreamweaver . . . . . .70 Optimizacin del espacio de trabajo para el diseo de pginas accesibles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76 Utilizacin de guas visuales en Dreamweaver . . . . . . . . . . . . . . . . . . . .78 Aspectos bsicos de personalizacin de Dreamweaver . . . . . . . . . . . .78 Captulo 2: Configuracin de un sitio de Dreamweaver . . . . . . . .87 Acerca de los sitios de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Configuracin de un sitio de Dreamweaver nuevo . . . . . . . . . . . . . . . . . 91 Utilizacin de las opciones avanzadas para configurar un sitio de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Edicin de la configuracin de un sitio de Dreamweaver . . . . . . . . . . .97 Edicin de sitios Web existentes con Dreamweaver . . . . . . . . . . . . . . 98
Captulo 3: Cmo crear y abrir documentos . . . . . . . . . . . . . . . . 101 Creacin de documentos nuevos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Cmo guardar un nuevo documento. . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Configuracin de un tipo de documento nuevo predeterminado . . . 106 Configuracin de la extensin de archivo predeterminada para nuevos documentos HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Cmo abrir documentos existentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Limpiar archivos HTML de Microsoft Word . . . . . . . . . . . . . . . . . . . . . 108
PARTE 2: UTILIZACIN DE LOS SITIOS DE DREAMWEAVER Captulo 4: Administracin de archivos . . . . . . . . . . . . . . . . . . . . 113 Administracin de sitios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114 Acceso a sitios, a un servidor y a unidades locales . . . . . . . . . . . . . . . . 118 Visualizacin de archivos y carpetas. . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Comparacin de archivos para detectar diferencias . . . . . . . . . . . . . . 125 Recuperacin de versiones anteriores de archivos (usuarios de Contribute). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Administracin de archivos y carpetas en el panel Archivos . . . . . . . 132 Utilizacin de un mapa visual del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Importacin y exportacin de sitios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Eliminacin de un sitio de Dreamweaver de la lista de sitios . . . . . . . 149 Desproteccin y proteccin de archivos . . . . . . . . . . . . . . . . . . . . . . . . 149 Obtencin y colocacin de archivos en el servidor . . . . . . . . . . . . . . . 156 Sincronizacin de los archivos de los sitios local y remoto . . . . . . . . .161 Identificacin y eliminacin de archivos no utilizados . . . . . . . . . . . . . 163 Cmo ocultar carpetas y archivos en el sitio . . . . . . . . . . . . . . . . . . . . . 163 Almacenamiento de informacin sobre archivos en Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Comprobacin del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Captulo 5: Administracin de activos y bibliotecas . . . . . . . . . . 179 Elementos de biblioteca. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 Utilizacin de activos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Creacin y administracin de una lista de activos favoritos . . . . . . . . 190 Utilizacin de los elementos de biblioteca . . . . . . . . . . . . . . . . . . . . . . . 193 Captulo 6: Administracin de sitios de Contribute con Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Administracin de sitios de Contribute . . . . . . . . . . . . . . . . . . . . . . . . . 204
Contenido
Preparacin de un sitio para su uso con Contribute . . . . . . . . . . . . . . .210 Administracin de un sitio Contribute con Dreamweaver . . . . . . . . . . 211 Administracin de archivos de Contribute con Dreamweaver . . . . . .213 Solucin de problemas de un sitio de Contribute . . . . . . . . . . . . . . . . .216
PARTE 3: DISEO DE PGINAS Captulo 7: Diseo de pginas con CSS. . . . . . . . . . . . . . . . . . . . 221 Acerca de las capas en Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . 222 Insercin de una capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Configuracin de preferencias y propiedades de capa . . . . . . . . . . . 227 Administracin de capas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Manipulacin de capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Conversin de capas en tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 Animacin de capas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Insercin de etiquetas div para el diseo. . . . . . . . . . . . . . . . . . . . . . . . 248 Utilizacin de etiquetas div para el diseo . . . . . . . . . . . . . . . . . . . . . . 249 Cambio del color de resaltado de las etiquetas div . . . . . . . . . . . . . . . .251 Utilizacin de la visualizacin de diseo CSS . . . . . . . . . . . . . . . . . . . .251 Utilizacin de reglas, guas y cuadrculas para disear pginas . . . . 254 Utilizacin de una imagen de rastreo . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 Captulo 8: Presentacin de contenido en tablas . . . . . . . . . . . . 261 Tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 Insercin de una tabla y adicin de contenido . . . . . . . . . . . . . . . . . . . 264 Importacin y exportacin de datos de tabla . . . . . . . . . . . . . . . . . . . . 265 Seleccin de elementos de una tabla . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Utilizacin del modo de tablas expandidas para facilitar la edicin de tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Aplicacin de formato a tablas y celdas . . . . . . . . . . . . . . . . . . . . . . . . . 271 Cambio de tamao de tablas, columnas y filas . . . . . . . . . . . . . . . . . . 274 Adicin y eliminacin de filas y columnas . . . . . . . . . . . . . . . . . . . . . . 279 Divisin y combinacin de celdas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .281 Cmo copiar, pegar y eliminar celdas . . . . . . . . . . . . . . . . . . . . . . . . . . 283 Anidacin de tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 Ordenacin de tablas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 Captulo 9: Diseo de pginas en el modo de diseo . . . . . . . . 287 Modo de diseo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288 Alternancia entre modo estndar y modo de diseo . . . . . . . . . . . . . 292
Contenido
Dibujo en el modo de diseo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293 Adicin de contenido a una celda de diseo . . . . . . . . . . . . . . . . . . . . .297 Cmo borrar los altos de celdas establecidos automticamente. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299 Cambio de tamao y desplazamiento de celdas y tablas de diseo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299 Aplicacin de formato a celdas y tablas de diseo . . . . . . . . . . . . . . 302 Establecimiento del ancho de columna . . . . . . . . . . . . . . . . . . . . . . . . 303 Configuracin de preferencias para el modo de diseo . . . . . . . . . . .307 Captulo 10: Utilizacin de marcos . . . . . . . . . . . . . . . . . . . . . . . 309 Marcos y conjuntos de marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 Utilizacin de conjuntos de marcos en la ventana de documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 Creacin de marcos y conjuntos de marcos . . . . . . . . . . . . . . . . . . . . . 316 Seleccin de marcos y conjuntos de marcos . . . . . . . . . . . . . . . . . . . . 319 Cmo abrir un documento en un marco . . . . . . . . . . . . . . . . . . . . . . . . .322 Almacenamiento de archivos de marcos y conjuntos de marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .322 Visualizacin y configuracin de las propiedades y los atributos de los marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .324 Visualizacin y configuracin de las propiedades de un conjunto de marcos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326 Control del contenido de los marcos con vnculos. . . . . . . . . . . . . . . .328 Manipulacin de navegadores que no pueden mostrar marcos . . . .329 Utilizacin de comportamientos JavaScript con marcos . . . . . . . . . 330 Captulo 11: Administracin de plantillas . . . . . . . . . . . . . . . . . . . 331 Plantillas de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .332 Creacin de una plantilla de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . 347 Creacin de plantillas para un sitio de Contribute . . . . . . . . . . . . . . . . 351 Creacin de regiones editables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .354 Creacin de regiones repetidas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357 Utilizacin de regiones opcionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360 Definicin de atributos de etiqueta editables . . . . . . . . . . . . . . . . . . . .363 Creacin de una plantilla anidada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .365 Edicin y actualizacin de plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . .366 Administracin de plantillas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .370 Exportacin e importacin de contenido XML de plantillas. . . . . . . . 372 Exportacin de un sitio sin formato de plantilla. . . . . . . . . . . . . . . . . . . 373 Aplicacin o eliminacin de una plantilla de un documento existente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
Contenido
PARTE 4: ADICIN DE CONTENIDO A LAS PGINAS Captulo 12: Utilizacin de pginas . . . . . . . . . . . . . . . . . . . . . . . 383 Utilizacin de pginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384 Almacenamiento de pginas Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389 Especificacin HTML en lugar de CSS. . . . . . . . . . . . . . . . . . . . . . . . . 390 Configuracin de propiedades de la pgina . . . . . . . . . . . . . . . . . . . . . .391 Utilizacin de colores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394 Seleccin de elementos en la ventana de documento. . . . . . . . . . . . 396 Utilizacin de Acercar y Alejar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 Utilizacin del panel Historial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400 Automatizacin de tareas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .401 Utilizacin de comportamientos de JavaScript para detectar navegadores y plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408 Vista previa y comprobacin de pginas en los navegadores . . . . . 409 Configuracin de las preferencias de tiempo de descarga y tamao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .413 Captulo 13: Insercin y formato de texto. . . . . . . . . . . . . . . . . . . 415 Aplicacin de formato a texto en Dreamweaver . . . . . . . . . . . . . . . . . .415 Insercin de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428 Aplicacin de formato a prrafos y a la estructura de la pgina . . . . 432 Aplicacin de formato al texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436 Utilizacin de hojas de estilos en cascada para aplicar formato al texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444 Comprobacin de la ortografa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456 Cmo buscar y reemplazar texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457 Captulo 14: Insercin de imgenes . . . . . . . . . . . . . . . . . . . . . . 459 Imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459 Insercin de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462 Cambio del tamao de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467 Recorte de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468 Optimizacin de una imagen mediante Fireworks . . . . . . . . . . . . . . . 469 Ajuste del brillo y del contraste de una imagen . . . . . . . . . . . . . . . . . . 470 Perfilado de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470 Creacin de una imagen de sustitucin. . . . . . . . . . . . . . . . . . . . . . . . . . 471 Utilizacin de un editor de imgenes externo . . . . . . . . . . . . . . . . . . . 472 Aplicacin de comportamientos a imgenes . . . . . . . . . . . . . . . . . . . . 473
Contenido
Captulo 15: Establecimiento de vnculos y navegacin. . . . . . 475 Aspectos bsicos de ubicacin y rutas de documentos . . . . . . . . . . . 476 Mens de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .479 Barras de navegacin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480 Mapas de imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481 Creacin de vnculos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .482 Administracin de vnculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494 Insercin de mens de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499 Utilizacin de las barras de navegacin . . . . . . . . . . . . . . . . . . . . . . . . . 501 Utilizacin de los mapas de imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . 503 Cmo adjuntar comportamientos JavaScript a vnculos . . . . . . . . . 506 Comprobacin de vnculos rotos, externos y hurfanos . . . . . . . . . . 506 Reparacin de vnculos rotos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509 Apertura de documentos vinculados en Dreamweaver . . . . . . . . . . . 510 Captulo 16: Utilizacin con otras aplicaciones . . . . . . . . . . . . . . 511 Integracin de Fireworks y Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512 Optimizacin del entorno de trabajo para Fireworks y Flash. . . . . . . 512 Utilizacin de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513 Utilizacin de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527 Captulo 17: Adicin de audio, vdeo y elementos interactivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531 Archivos multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .532 Insercin y edicin de objetos multimedia . . . . . . . . . . . . . . . . . . . . . . .535 Inicio de un editor externo de archivos multimedia . . . . . . . . . . . . . . . 537 Utilizacin de Design Notes con objetos multimedia . . . . . . . . . . . . 539 Insercin y modificacin de un objeto de botn Flash . . . . . . . . . . . 540 Insercin de un objeto de texto Flash . . . . . . . . . . . . . . . . . . . . . . . . . . 542 Insercin de contenido de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .543 Descarga e instalacin de elementos Flash . . . . . . . . . . . . . . . . . . . . 544 Insercin de elementos Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545 Edicin de atributos de elementos Flash . . . . . . . . . . . . . . . . . . . . . . . 545 Insercin de documentos FlashPaper . . . . . . . . . . . . . . . . . . . . . . . . . .546 Insercin de contenido de Flash Video. . . . . . . . . . . . . . . . . . . . . . . . . .547 Insercin de pelculas Shockwave. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551 Adicin de vdeo (no Flash). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .552 Adicin de sonido a una pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .552 Insercin de contenido de plug-in de Netscape Navigator . . . . . . . 554 Insercin de un control ActiveX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .556 Insercin de un applet de Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .556
Contenido
Utilizacin de comportamientos para controlar elementos multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557 Captulo 18: Utilizacin de comportamientos JavaScript . . . . 559 Utilizacin del panel Comportamientos. . . . . . . . . . . . . . . . . . . . . . . . . 560 Eventos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .561 Aplicacin de un comportamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562 Cmo adjuntar un comportamiento a un texto. . . . . . . . . . . . . . . . . . . 563 Cambio de un comportamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564 Actualizacin de un comportamiento . . . . . . . . . . . . . . . . . . . . . . . . . . 565 Creacin de nuevas acciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565 Descarga e instalacin de comportamientos de terceros . . . . . . . . . 565 Utilizacin de las acciones de comportamiento incluidas con Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566
PARTE 5: UTILIZACIN DEL CDIGO DE LAS PGINAS Captulo 19: Configuracin del entorno de codificacin . . . . . . . 601 Visualizacin del cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .601 Utilizacin del espacio de trabajo orientado al codificador (slo en Windows) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603 Configuracin de las preferencias de codificacin . . . . . . . . . . . . . . . 604 Personalizacin de los mtodos abreviados de teclado . . . . . . . . . . 608 Cmo abrir archivos en la vista de cdigo de forma predeterminada. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608 Configuracin de las preferencias del validador . . . . . . . . . . . . . . . . . 609 Administracin de bibliotecas de etiquetas . . . . . . . . . . . . . . . . . . . . . 609 Importacin de etiquetas personalizadas a Dreamweaver . . . . . . . . .614 Utilizacin de un editor de HTML externo con Dreamweaver . . . . . . 617 Captulo 20: Codificacin en Dreamweaver . . . . . . . . . . . . . . . . 621 Codificacin en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622 Escritura y edicin de cdigo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .631 Bsqueda y reemplazo de etiquetas y atributos . . . . . . . . . . . . . . . . . 647 Cambios rpidos en una seleccin de cdigo . . . . . . . . . . . . . . . . . . . 649 Utilizacin del material de consulta para lenguajes . . . . . . . . . . . . . . 650 Impresin del cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .651 Captulo 21: Optimizacin y depuracin del cdigo . . . . . . . . . 653 Limpieza del cdigo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 653
Contenido
Verificacin de que las etiquetas y llaves estn equilibradas. . . . . . .654 Comprobacin de la compatibilidad con los navegadores. . . . . . . . .655 Validacin de etiquetas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659 Creacin de pginas compatibles con XHTML . . . . . . . . . . . . . . . . . 660 Utilizacin del depurador de ColdFusion (slo Windows) . . . . . . . . . 661 Captulo 22: Edicin de cdigo en la vista Diseo . . . . . . . . . . 663 Edicin de cdigo con el inspector de propiedades . . . . . . . . . . . . . .664 Cambio de atributos con el inspector de etiquetas . . . . . . . . . . . . . . .664 Edicin de cdigo con Quick Tag Editor . . . . . . . . . . . . . . . . . . . . . . . .666 Edicin de cdigo con el selector de etiquetas. . . . . . . . . . . . . . . . . . .670 Edicin de scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 671 Utilizacin de server-side includes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 672 Utilizacin de comportamientos JavaScript . . . . . . . . . . . . . . . . . . . . . 674 Visualizacin y edicin del contenido de Head. . . . . . . . . . . . . . . . . . . 674
PARTE 6: PREPARACIN PARA CREAR SITIOS DINMICOS Captulo 23: Configuracin de una aplicacin Web . . . . . . . . . .679 Lo que necesita para crear aplicaciones Web . . . . . . . . . . . . . . . . . . .679 Configuracin de un servidor Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 680 Configuracin de un servidor de aplicaciones. . . . . . . . . . . . . . . . . . . . 681 Creacin de una carpeta raz para la aplicacin . . . . . . . . . . . . . . . . . .685 Definicin de un sitio de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 687 Conexin con una base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691 Captulo 24: Conexiones de base de datos para desarrolladores de ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . 693 Conexin con una base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .693 Edicin o eliminacin de una conexin de base de datos . . . . . . . . .696 Captulo 25: Conexiones de base de datos para desarrolladores de ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . .697 Conexin con una base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .697 Edicin o eliminacin de una conexin de base de datos . . . . . . . . . 701 Captulo 26: Conexiones de base de datos para desarrolladores de ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 703 Conexiones de base de datos en ASP . . . . . . . . . . . . . . . . . . . . . . . . . .703 Creacin de una conexin con DSN . . . . . . . . . . . . . . . . . . . . . . . . . . .706
10
Contenido
Creacin de una conexin sin DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 710 Conexin con una base de datos en un ISP . . . . . . . . . . . . . . . . . . . . . . 711 Edicin o eliminacin de una conexin de base de datos . . . . . . . . . . 715 Captulo 27: Conexiones de base de datos para desarrolladores de JSP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 717 Conexiones de base de datos en JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . 717 Conexin con una base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 719 Conexin mediante un controlador ODBC . . . . . . . . . . . . . . . . . . . . . . . 721 Edicin o eliminacin de una conexin de base de datos . . . . . . . . . 725 Captulo 28: Conexiones de base de datos para desarrolladores de PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 727 Conexin con una base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 728 Edicin o eliminacin de una conexin de base de datos . . . . . . . . . 728 Captulo 29: Solucin de problemas de conexiones de base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 731 Solucin de problemas relacionados con permisos . . . . . . . . . . . . . . . 731 Solucin de problemas relacionados con mensajes de error de Microsoft. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 733 Solucin de problemas relacionados con mensajes de error de MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 740
PARTE 7: CREACIN DE PGINAS DINMICAS Captulo 30: Optimizacin del espacio de trabajo para desarrollo visual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 743 Visualizacin de paneles de desarrollo de aplicaciones Web . . . . . Visualizacin de la base de datos en Dreamweaver. . . . . . . . . . . . . . Visualizacin de live data en la vista de Diseo . . . . . . . . . . . . . . . . . Utilizacin de la vista de Diseo sin datos dinmicos . . . . . . . . . . . . Vista previa de pginas dinmicas en un navegador . . . . . . . . . . . . . Restriccin de la informacin de base de datos que se muestra en Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 743 746 747 753 754 755
Captulo 31: Flujo de trabajo para el diseo de pginas dinmicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 757 Diseo de la pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 757 Creacin de una fuente de contenido dinmico . . . . . . . . . . . . . . . . . 758
Contenido
11
Adicin de contenido dinmico a una pgina Web . . . . . . . . . . . . . . .760 Mejora de la funcionalidad de una pgina dinmica . . . . . . . . . . . . . . 761 Comprobacin y depuracin de la pgina . . . . . . . . . . . . . . . . . . . . . . . 763 Captulo 32: Obtencin de datos para la pgina. . . . . . . . . . . . .767 Utilizacin de una base de datos para almacenar contenido. . . . . . . 767 Recopilacin de los datos enviados por los usuarios . . . . . . . . . . . . .769 Acceso a datos almacenados en variables de sesin . . . . . . . . . . . . . 774 Captulo 33: Definicin de fuentes de contenido dinmico . . . . 781 Fuentes de contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 782 Definicin de un juego de registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 787 Definicin de parmetros de URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .792 Definicin de parmetros de formulario . . . . . . . . . . . . . . . . . . . . . . . . .793 Definicin de variables de sesin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .795 Definicin de variables de aplicacin para ASP y ColdFusion . . . . .796 Utilizacin de una variable como fuente de datos para un juego de registros ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 797 Definicin de variables de servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 798 Creacin de un cach de las fuentes de contenido . . . . . . . . . . . . . . . 801 Cambio o eliminacin de fuentes de contenido . . . . . . . . . . . . . . . . . 802 Copia de un juego de registros de una pgina a otra . . . . . . . . . . . . . 802 Captulo 34: Adicin de contenido dinmico a pginas Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 805 Adicin de contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 806 Conversin de texto en contenido dinmico . . . . . . . . . . . . . . . . . . . . .807 Conversin de imgenes en contenido dinmico . . . . . . . . . . . . . . . 809 Conversin de atributos HTML en contenido dinmico . . . . . . . . . . 810 Conversin de parmetros de ActiveX, Flash y de otros objetos en contenido dinmico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 813 Edicin del contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 814 Eliminacin de contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . 814 Creacin de pginas dinmicas en un sitio de Contribute . . . . . . . . . 815 Captulo 35: Visualizacin de registros de la base de datos . . . 817 Visualizacin de registros de la base de datos . . . . . . . . . . . . . . . . . . . 818 Utilizacin de formatos de datos predefinidos . . . . . . . . . . . . . . . . . . .825 Creacin de vnculos de navegacin por conjuntos de registros . . . 827 Visualizacin y ocultacin de registros segn los resultados del juego de registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 830
12
Contenido
Visualizacin de varios resultados de juego de registros . . . . . . . . . .831 Creacin de una tabla con un comportamiento del servidor Repetir regin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 832 Creacin de un contador de registros . . . . . . . . . . . . . . . . . . . . . . . . . . 834 Captulo 36: Visualizacin de datos XML en pginas Web . . . 837 Utilizacin de XML y XSL en pginas Web . . . . . . . . . . . . . . . . . . . . . 837 Acerca de las transformaciones XSL en el lado del servidor . . . . . . 839 Acerca de las transformaciones XSL en el lado del cliente . . . . . . . 843 Acerca de los datos XML y elementos repetidos . . . . . . . . . . . . . . . . 846 Acerca de la obtencin de la vista previa de datos XML . . . . . . . . . . 848 Realizacin de transformaciones XSL en el servidor. . . . . . . . . . . . . 850 Realizacin de transformaciones XSL en el cliente . . . . . . . . . . . . . . 866 Aplicacin de estilos a fragmentos de XSLT . . . . . . . . . . . . . . . . . . . . 869 Solucin de problemas de transformaciones XSL . . . . . . . . . . . . . . . 870 Captulo 37: Utilizacin de servicios Web (slo Windows) . . . . 871 Servicios Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 872 Configuracin de generadores proxy para utilizarlos con Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 877 Adicin de un proxy de servicios Web utilizando la descripcin WSDL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 879 Adicin de un servicio Web a una pgina . . . . . . . . . . . . . . . . . . . . . . . . 881 Edicin de la lista de sitios de servicios Web UDDI . . . . . . . . . . . . . . 883 Captulo 38: Adicin de comportamientos de servidor personalizados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 885 Comportamientos de servidor personalizados . . . . . . . . . . . . . . . . . . 885 Instalacin de comportamientos de servidor de terceros . . . . . . . . . 897 Utilizacin del Creador de comportamientos de servidor . . . . . . . . . 898 Utilizacin de parmetros en comportamientos de servidor . . . . . . 902 Colocacin de bloques de cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 902 Creacin de un cuadro de dilogo para un comportamiento de servidor personalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 904 Edicin y modificacin de comportamientos de servidor . . . . . . . . . 907 Captulo 39: Creacin de formularios. . . . . . . . . . . . . . . . . . . . . . 911 Formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .912 Creacin de formularios HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .915 Insercin de objetos de formulario HTML. . . . . . . . . . . . . . . . . . . . . . . .918 Insercin de objetos de formulario HTML dinmicos. . . . . . . . . . . . . 923
Contenido
13
Validacin de datos de formulario HTML . . . . . . . . . . . . . . . . . . . . . . .927 Cmo adjuntar comportamientos JavaScript a objetos de formulario HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 929 Cmo adjuntar scripts personalizados a botones de formulario HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 929 Creacin de formularios HTML accesibles . . . . . . . . . . . . . . . . . . . . . 930
PARTE 8: DESARROLLO RPIDO DE APLICACIONES Captulo 40: Creacin rpida de aplicaciones de ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 935 Desarrollo rpido de aplicaciones (todos los servidores) . . . . . . . . . 935 Creacin de formularios ColdFusion MX 7 . . . . . . . . . . . . . . . . . . . . . . 941 Creacin de pginas maestra-detalle (ColdFusion). . . . . . . . . . . . . . 954 Creacin de pginas de bsqueda/resultados (ColdFusion, ASP, JSP, PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .963 Creacin de una pgina de insercin de registro (todos los servidores). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 971 Creacin de pginas para actualizar un registro (ColdFusion) . . . . .974 Creacin de pginas para eliminar un registro (ColdFusion) . . . . . . .983 Utilizacin de procedimientos almacenados para modificar bases de datos (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 993 Creacin de pginas que restrinjan el acceso al sitio (ColdFusion, ASP, JSP Y PHP). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 995 Proteccin de una carpeta de su aplicacin (ColdFusion) . . . . . . . . 1007 Utilizacin de componentes de ColdFusion . . . . . . . . . . . . . . . . . . . .1008 Captulo 41: Creacin rpida de aplicaciones ASP.NET . . . . . 1017 Creacin de formularios ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1017 Creacin de controles Web Cuadrcula de datos y Lista de datos de ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1023 Creacin de pginas Maestro-Detalle (ASP.NET) . . . . . . . . . . . . . . 1028 Creacin de una pgina de bsqueda en la base de datos (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1036 Creacin de una pgina de insercin de registro (ASP.NET) . . . . .1043 Creacin de pginas para actualizar un registro (ASP.NET) . . . . . .1044 Creacin de pginas para eliminar un registro (ASP.NET) . . . . . . .1054 Utilizacin de procedimientos almacenados para modificar bases de datos (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1064 Creacin de pginas que restrinjan el acceso al sitio (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1065
14
Contenido
Captulo 42: Creacin rpida de aplicaciones ASP y JSP . . .1067 Creacin de pginas maestra-detalle (ASP y JSP) . . . . . . . . . . . . . Creacin de pginas de bsqueda/resultados (ASP y JSP) . . . . . Creacin de una pgina de insercin de registro (ASP y JSP) . . . Creacin de pginas para actualizar un registro (ASP y JSP) . . . . Creacin de pginas para eliminar un registro (ASP y JSP) . . . . . Creacin de pginas con objetos de manipulacin de datos avanzados (ASP y JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creacin de pginas que restrinjan el acceso al sitio (ASP y JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Utilizacin de JavaBeans (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1067 1072 1072 1072 1079 1084 1089 1090
Captulo 43: Creacin rpida de aplicaciones PHP . . . . . . . . 1093 Creacin de pginas maestra-detalle (PHP) . . . . . . . . . . . . . . . . . . . 1093 Creacin de pginas de bsqueda/resultados (PHP) . . . . . . . . . . . . 1101 Creacin de una pgina de insercin de registros (PHP) . . . . . . . . . 1101 Creacin de pginas para actualizar un registro (PHP) . . . . . . . . . . . 1102 Creacin de pginas para eliminar un registro (PHP) . . . . . . . . . . . . 1110 Creacin de pginas que restrinjan el acceso al sitio (PHP). . . . . . . 1119
PARTE 9: APNDICES Apndice A: Gua de bases de datos para principiantes . . . . . 1123 Bases de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1123 Aspectos bsicos del diseo de bases de datos . . . . . . . . . . . . . . . . . 1125 Aspectos bsicos de las conexiones de bases de datos . . . . . . . . . 1132 Apndice B: Nociones bsicas de SQL . . . . . . . . . . . . . . . . . . . 1139 Aspectos bsicos de la sintaxis. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1139 Definicin de las columnas en un juego de registros . . . . . . . . . . . . . 1141 Limitacin de los registros en un juego de registros. . . . . . . . . . . . . . 1142 Clasificacin de los registros en un juego de registros. . . . . . . . . . . . 1146 Unin de tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1146 ndice alfabtico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1149
Contenido
15
16
Contenido
PARTE 1
17
Introduccin
Dreamweaver 8 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 de lenguajes sobre hojas de estilos en cascada (CSS), JavaScript, y ColdFusion Markup Language (CFML), entre otros. 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 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.
19
Novedades de Dreamweaver 8
Dreamweaver 8 incluye una gran variedad de funciones 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. En primer lugar, Dreamweaver 8 ofrece soporte para las prcticas recomendadas y las normas de la industria, incluido el soporte para el uso avanzado de CSS, agregadores XML y RSS, y requisitos de accesibilidad.
Trabajo con las prcticas recomendadas:
Creacin visual con datos XML Acelere los procesos XML gracias a las potentes herramientas visuales que permiten integrar los agregadores en el flujo de trabajo y acabar con el misterio de la transformacin de XML en HTML. Integre datos basados en XML, como los agregadores RSS, en pginas Web mediante un sencillo flujo de trabajo basado en arrastrar y soltar. Desplcese a la vista Cdigo para personalizar la transformacin gracias a sugerencias de codificacin mejoradas para XML y XSLT. Para ms informacin, consulte Captulo 36, Visualizacin de datos XML en pginas Web, en la pgina 837.
Nuevo panel CSS unificado El nuevo panel CSS unificado ofrece una ubicacin centralizada para aprender, conocer y trabajar de forma visual con los estilos CSS aplicados a las pginas. Todas las funciones CSS se consolidan en un solo juego de paneles y se mejoran para facilitar el trabajo con estilos CSS y aumentar su productividad. La nueva interfaz facilita la visualizacin de la cascada de estilos aplicados a un elemento concreto, de tal forma que la ubicacin en la que se definen los atributos resulte fcilmente identificable. Es posible acelerar la edicin gracias a una cuadrcula de propiedades. Para ms informacin, consulte Utilizacin del panel Estilos CSS en la pgina 445.
20
Introduccin
Mejoras en el proceso CSS Compruebe cmo se representarn los diseos CSS complejos en la mayora de los navegadores con mejoras importantes en la precisin de la vista Diseo. Dreamweaver es ahora totalmente compatible con las tcnicas CSS ms avanzadas, como el desbordamiento, los pseudoelementos y los elementos de formulario. Accesibilidad: compatibilidad con puntos de comprobacin de las directrices del WCAG/W3C (prioridad 2) WebDAV mejorado Adems de la herramienta de evaluacin de accesibilidad integrada para los puntos de comprobacin de las directrices de la Seccin 508 y el WCAG (prioridad 1), ahora Dreamweaver admite tanto CSS como accesibilidad con una herramienta de evaluacin actualizada que incluye puntos de comprobacin del WCAG (prioridad 2). Gracias a WebDAV, ahora Dreamweaver 8 admite la autenticacin de texto implcita y SSL para la transferencia segura de archivos. Adems, proporciona una conectividad mejorada con un mayor grupo de servidores. Vase Utilizacin de WebDAV para desproteger y proteger archivos en la pgina 151.
Novedades de Dreamweaver 8
21
Consiga ms en menos tiempo, optimizando el flujo de trabajo de los usuarios de manera que se reduzca el tiempo necesario para completar tareas comunes. Dreamweaver 8 reduce el tiempo empleado en las rutinas ms pequeas para poder dedicar ms tiempo al diseo y al desarrollo de la vinculacin entre los sitios Web y las aplicaciones.
Consiga ms
Transferencia de archivos en segundo plano Contine trabajando mientras Dreamweaver 8 carga los archivos en el servidor. Para ms informacin, consulte Administracin de las transferencias de archivos en la pgina 160. Disfrute de un mayor control de sus diseos gracias a la herramienta Zoom. Acrquese y analice una imagen o un trabajo con un diseo complejo de tablas anidadas. Aljese para obtener la vista previa de la apariencia de las pginas. Para ms informacin, consulte Utilizacin de Acercar y Alejar en la pgina 398. Compare el diseo de las pginas con pginas de muestra (con precisin de pxeles perfectos) y utilice las guas para realizar mediciones del diseo que tendrn las pginas. La respuesta visual le ayudar a medir las distancias con precisin y a realizar ajustes inteligentes. Para ms informacin, consulte Utilizacin de guas en la pgina 255. La nueva barra de herramientas Codificacin proporciona botones para las funciones de codificacin ms frecuentes en una barra alargada situada en uno de los laterales de la vista Cdigo. Para ms informacin, consulte Insercin rpida de cdigo con la barra de herramientas Codificacin en la pgina 635. Cntrese nicamente en el cdigo que desea visualizar y oculte o contraiga los bloques de cdigo. Para ms informacin, consulte Contraccin y ampliacin de fragmentos de cdigo en la pgina 641. Personalice y guarde las configuraciones de su espacio de trabajo. Dreamweaver 8 se suministra con cuatro configuraciones distintas que se ajustan a las necesidades de los diseadores y codificadores. Asimismo, es posible crear un espacio de trabajo personalizado. Para ms informacin, consulte Almacenamiento de diseos de espacio de trabajo personalizados en la pgina 81.
Zoom
Guas
Contraer cdigo
22
Introduccin
Consiga ms
Documentos en fichas para Las nuevas fichas de documentos de la ayuda de Mac Mac simplifican la interfaz de usuario y facilitan la seleccin de documentos. Para ms informacin, consulte Visualizacin de documentos en fichas (Macintosh) en la pgina 80. Nuevas pginas iniciales Los nuevos diseos le permiten crear sitios rpidamente.
Mejoras de sincronizacin y Administre los sitios con mayor fiabilidad y confianza. Las mejoras de sincronizacin de los sitios contribuyen a garantizar proteccin/desproteccin que se utiliza la versin ms reciente del archivo. Evite de los sitios sobrescribir accidentalmente el trabajo de otros usuarios gracias a las mejoras en las funciones de proteccin y desproteccin. Para ms informacin, consulte Sincronizacin de los archivos de los sitios local y remoto en la pgina 161. Comparacin de archivos Compare archivos rpidamente para detectar qu ha cambiado. Puede comparar dos archivos locales, un archivo del equipo local y uno de un equipo remoto, o bien dos archivos de un equipo remoto. Utilice la herramienta de comparacin de archivos de Dreamweaver que prefiera tanto en plataformas Macintosh como Windows. Para ms informacin, consulte Comparacin de archivos para detectar diferencias en la pgina 125. Gracias a las nuevas opciones de pegado de Dreamweaver, es posible conservar todo el formato original creado en Microsoft Word, o bien simplemente pegar el texto. Para ms informacin, consulte Adicin de texto a un documento en la pgina 428.
Pegado especial
Referencias relativas al sitio Trabaje sin complicaciones con server-side includes en tiempo de diseo y en tiempo de ejecucin con la seguridad de que las referencias son relativas a los sitios y no a los archivos locales. Para ms informacin, consulte Configuracin de la ruta relativa de vnculos nuevos en la pgina 488. Mejoras de edicin de cdigo Obtenga un mayor control sobre el modo en que Dreamweaver ofrece sugerencias de cdigo y completa las etiquetas para que se ajusten a su estilo de codificacin.
Novedades de Dreamweaver 8
23
Dreamweaver 8 apuesta por el aprendizaje y la utilizacin de las nuevas tecnologas y es compatible con PHP 5, Flash Video, ColdFusion MX 7 y el sistema Web Publishing System de Macromedia.
Integracin con las ltimas tecnologas y normas
Compatibilidad con ColdFusion MX 7 La compatibilidad actualizada con ColdFusion MX 7 incluye nuevos comportamientos de servidor y sugerencias de cdigo. Para que las sugerencias y la depuracin del cdigo coincidan con la versin correcta de ColdFusion, Dreamweaver detecta automticamente la versin del servidor la primera vez que se conecta al sitio. La estrecha integracin entre Dreamweaver y ColdFusion permite aadir y quitar bases de datos directamente desde el panel Bases de datos y visualizar slo los componentes de ColdFusion definidos en el sitio actual. Para ms informacin, consulte Activacin de las mejoras de ColdFusion en la pgina 942. Aproveche la compatibilidad actualizada con PHP 5, que incluye comportamientos de servidor y sugerencias de cdigo. Inserte rpida y fcilmente un archivo de Flash Video en una pgina Web. Para ms informacin, consulte Insercin de contenido de Flash Video en la pgina 547. Realice un seguimiento de todo lo que sucede en su sitio. En Dreamweaver, los eventos notifican al servidor del sistema Web Publishing System de Macromedia para que se registren en el sistema WPS todos los cambios realizados en el sitio Web. Consulte el nuevo contenido de referencia para XML, XSLT y XPath, y el contenido actualizado para ASP y JSP.
Sistema Web Publishing System de Macromedia: notificacin y registro de eventos Material de referencia de O'Reilly actualizado
24
Introduccin
Primero lea los tutoriales del manual Primeros pasos con Dreamweaver. En Utilizacin de Dreamweaver (Ayuda > Utilizacin de Dreamweaver), consulte Captulo 1, Exploracin del espacio de trabajo, en la pgina 41, Captulo 2, Configuracin de un sitio de Dreamweaver, en la pgina 87, Captulo 4, Administracin de archivos, en la pgina 113 y Captulo 3, Cmo crear y abrir documentos, en la pgina 101. Para aprender sobre el diseo de las pginas, vase el Captulo 9, Diseo de pginas en el modo de diseo, en la pgina 287. 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 415 y el Captulo 14, Insercin de imgenes, en la pgina 459.
3.
4.
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. Es aconsejable que lea los captulos de pginas dinmicas slo cuando se haya familiarizado con la creacin de pginas Web.
Primero lea los tutoriales del manual Primeros pasos con Dreamweaver. En Utilizacin de Dreamweaver, consulte Captulo 1, Exploracin del espacio de trabajo, en la pgina 41 para ms informacin sobre la interfaz de usuario de Dreamweaver.
25
3.
Aunque probablemente ya conoce una buena parte del material del Captulo 2, Configuracin de un sitio de Dreamweaver, en la pgina 87 y el Captulo 4, Administracin de archivos, en la pgina 113, debera 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. Para informacin til y detallada sobre el uso de Dreamweaver para crear pginas HTML bsicas, consulte Captulo 13, Insercin y formato de texto, en la pgina 415 y Captulo 14, Insercin de imgenes, en la pgina 459. Para informacin sobre la codificacin en Dreamweaver, vase Configuracin del entorno de codificacin en la pgina 601, Codificacin en Dreamweaver en la pgina 621, Optimizacin y depuracin del cdigo en la pgina 653 y Edicin de cdigo en la vista Diseo en la pgina 663. Lea la introduccin que aparece al comienzo de los dems captulos de Utilizacin de Dreamweaver para determinar si le interesan los temas que se abordan en ellos.
4.
5.
6.
Para diseadores de sitios Web con experiencia, familiarizados con Dreamweaver, que deseen obtener informacin sobre la creacin de pginas dinmicas:
1.
Primero lea Apndice A, Aspectos bsicos de las aplicaciones Web y Tutorial: Desarrollo de una aplicacin Web en Primeros pasos con Dreamweaver. En Utilizacin de Dreamweaver, consulte Captulo 1, Exploracin del espacio de trabajo, en la pgina 41 para ms informacin sobre la interfaz de usuario de Dreamweaver y, a continuacin, lea el apartado Optimizacin del espacio de trabajo para desarrollo visual en la pgina 743. 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 757. Configure un servidor Web y un servidor de aplicaciones. (Vase Captulo 23, Configuracin de una aplicacin Web, en la pgina 679.) Conecte con una base de datos. (Vase Conexin con una base de datos en la pgina 691.) Lea la introduccin que aparece al comienzo de cada uno de los captulos de Utilizacin de Dreamweaver para determinar si le interesan los temas que se abordan en ellos. 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 Ampliacin de Dreamweaver.
2.
3.
4.
5.
6.
7.
26
Introduccin
En Utilizacin de Dreamweaver, consulte Captulo 1, Exploracin del espacio de trabajo, en la pgina 41 para ms informacin sobre la interfaz de usuario de Dreamweaver. Aunque probablemente ya conoce una buena parte del material del Captulo 2, Configuracin de un sitio de Dreamweaver, en la pgina 87 y el Captulo 4, Administracin de archivos, en la pgina 113, puede hojear estos captulos para ver cmo se aplican en Dreamweaver estos conceptos. Preste especial atencin a las secciones sobre la configuracin de un sitio de Dreamweaver. Encontrar ms informacin sobre codificacin con Dreamweaver en Captulo 19, Configuracin del entorno de codificacin, en la pgina 601, Captulo 20, Codificacin en Dreamweaver, en la pgina 621, Captulo 21, Optimizacin y depuracin del cdigo, en la pgina 653 y Captulo 22, Edicin de cdigo en la vista Diseo, en la pgina 663. Lea la introduccin que aparece al comienzo de cada uno de los captulos de Utilizacin de Dreamweaver para determinar si le interesan los temas que se abordan en ellos.
2.
3.
4.
Comience con una lectura rpida de Primeros pasos con Dreamweaver para familiarizarse con los aspectos bsicos del uso de Dreamweaver. En Utilizacin de Dreamweaver, consulte Captulo 1, Exploracin del espacio de trabajo, en la pgina 41 para ms informacin sobre la interfaz de usuario de Dreamweaver. Aunque probablemente ya conoce una buena parte del material del Captulo 2, Configuracin de un sitio de Dreamweaver, en la pgina 87 y el Captulo 4, Administracin de archivos, en la pgina 113, puede hojear estos captulos para ver cmo se aplican en Dreamweaver estos conceptos. Preste especial atencin a las secciones sobre la configuracin de un sitio de Dreamweaver.
2.
3.
27
4.
Configure un servidor Web y un servidor de aplicaciones utilizando Dreamweaver. (Vase Captulo 23, Configuracin de una aplicacin Web, en la pgina 679.) Conecte con una base de datos. (Vase Conexin con una base de datos en la pgina 691.) Lea la introduccin que aparece al comienzo de cada captulo de Utilizacin de Dreamweaver para determinar si le interesan los temas que se abordan en ellos.
5.
6.
Para diseadores de aplicaciones Web con experiencia que hayan utilizado Dreamweaver:
1. 2.
Para empezar, consulte Novedades de Dreamweaver 8 en la pgina 20. En Utilizacin de Dreamweaver, consulte Captulo 1, Exploracin del espacio de trabajo, en la pgina 41 para ms informacin sobre la interfaz de usuario de Dreamweaver. 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 Ampliacin de Dreamweaver.
3.
28
Introduccin
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 87 y Captulo 4, Administracin de archivos, en la pgina 113.) 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 101.) Configurar un sistema de forma que los miembros del equipo no puedan sobrescribir los archivos. (Vase Desproteccin y proteccin de archivos en la pgina 149.) Utilizar Design Notes para comunicarse con los miembros del equipo Web. (Vase Almacenamiento de informacin sobre archivos en Design Notes en la pgina 169.)
Si trabaja en un equipo de desarrollo Web, es posible que tambin le interesen estos temas:
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 113.) 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 179.)
29
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 203.)
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 221.) 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 261 y Captulo 9, Diseo de pginas en el modo de diseo, en la pgina 287.) 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 309.) 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 331.)
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 383.) Escriba directamente en un documento de Dreamweaver o importe texto desde otros documentos, luego aplique formato al texto utilizando el inspector de propiedades de Dreamweaver. 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 415.)
30
Introduccin
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 459 y Captulo 16, Utilizacin con otras aplicaciones, en la pgina 511.) 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 475.) 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 531.) 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 559.)
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 601, Captulo 20, Codificacin en Dreamweaver, en la pgina 621 y Captulo 21, Optimizacin y depuracin del cdigo, en la pgina 653.) 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 663.)
31
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 679.) Conecte con una base de datos. (Vase Conexin con una base de datos en la pgina 691).
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 743 y Captulo 31, Flujo de trabajo para el diseo de pginas dinmicas, en la pgina 757.) Defina y muestre el contenido dinmico de sus pginas. (Vase Captulo 32, Obtencin de datos para la pgina, en la pgina 767, Captulo 33, Definicin de fuentes de contenido dinmico, en la pgina 781, Captulo 34, Adicin de contenido dinmico a pginas Web, en la pgina 805 y Captulo 35, Visualizacin de registros de la base de datos, en la pgina 817.) Puede incorporar la lgica de aplicaciones o empresarial mediante tecnologas innovadoras, como los componentes ColdFusion de Macromedia y los servicios Web. (Vase Utilizacin de componentes de ColdFusion en la pgina 1008 y Captulo 37, Utilizacin de servicios Web (slo Windows), en la pgina 871.) 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 885 y Captulo 39, Creacin de formularios, en la pgina 911.)
32
Introduccin
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 935, Creacin rpida de aplicaciones ASP.NET en la pgina 1017, Creacin rpida de aplicaciones ASP y JSP en la pgina 1067 y Creacin rpida de aplicaciones PHP en la pgina 1093.)
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 617. Puede especificar sus navegadores preferidos para previsualizar el sitio. (Vase Vista previa y comprobacin de pginas en los navegadores en la pgina 409.) 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 472.) 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 537.) 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 540, Insercin de un objeto de texto Flash en la pgina 542 o Descarga e instalacin de elementos Flash en la pgina 544. Para informacin sobre el uso de ColdFusion, consulte Utilizacin de ColdFusion (Ayuda > Utilizacin de ColdFusion).
33
Dreamweaver y accesibilidad
La accesibilidad designa la capacidad de crear sitios y productos Web que puedan utilizar aquellas personas con discapacidades visuales, auditivas, motoras u otras. Entre los ejemplos de funciones de accesibilidad para productos de software y sitios Web podemos citar la compatibilidad con lectores de pantalla, los equivalentes textuales para grficos, los accesos directos del teclado y el uso de colores de pantalla con alto contraste, entre otros.
NO TA 34
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 Utilizacin de las funciones de accesibilidad de Dreamweaver en la pgina 70.
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 76). 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.
Introduccin
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 103) 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 173).
NO T A
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 es accesible consiste en realizar una planificacin, un desarrollo, una comprobacin y una evaluacin deliberadas.
35
Ver en Dreamweaver: Le ofrece una Primeros Seleccione Ayuda > Primeros introduccin bsica a pasos con pasos con Dreamweaver Dreamweaver los conceptos de Ver en lnea: http:// Dreamweaver y a la livedocs.macromedia.com/go/ interfaz, con detallados livedocs_dreamweaver_es/ tutoriales para Descargar el PDF: principiantes. Dirigido a www.macromedia.com/go/ usuarios principiantes, y dw_documentation_es tambin para usuarios con nivel intermedio y avanzado que quieran conocer las nuevas funciones. Ver en Dreamweaver: Utilizacin de Informacin completa Seleccione Ayuda > Ayuda de Dreamweaver sobre todas las Dreamweaver o Ayuda > funciones de Utilizacin de Dreamweaver Dreamweaver. Dirigida Ver en lnea: http:// a todos los usuarios de livedocs.macromedia.com/go/ Dreamweaver. livedocs_dreamweaver_es/ Descargar el PDF: www.macromedia.com/go/ dw_documentation_es Ver en Dreamweaver: Ampliacin de Describe el marco de Seleccione Ayuda > Ampliacin Dreamweaver trabajo de de Dreamweaver Dreamweaver y la Ver en lnea: http:// interfaz de livedocs.macromedia.com/go/ programacin de la livedocs_dreamweaver_es/ aplicacin (API). Descargar el PDF: Destinado a usuarios www.macromedia.com/go/ avanzados que quieren dw_documentation_es crear extensiones o personalizar la interfaz de Dreamweaver.
36
Introduccin
Ttulo
Descripcin/ Audiencia
Dnde encontrarlo
Describe la utilidad API Ver en Dreamweaver: Referencia Seleccione Ayuda > Referencia y el JavaScript API, que API de API de Dreamweaver Dreamweaver le permiten realizar Ver en lnea: http:// diversas tareas de livedocs.macromedia.com/go/ apoyo al desarrollar livedocs_dreamweaver_es/ extensiones de Descargar el PDF: Dreamweaver. www.macromedia.com/go/ Destinado a usuarios dw_documentation_es avanzados que quieren crear extensiones o personalizar la interfaz de Dreamweaver. Utilizacin de ColdFusion Contiene una seleccin Ver en Dreamweaver: Seleccione Ayuda > Utilizacin de los libros ms de ColdFusion importantes con Ver en lnea: http:// documentacin sobre livedocs.macromedia.com/go/ ColdFusion. (La lista livedocs_coldfusion/ completa est Descargar el PDF: disponible en www.macromedia.com/go/ LiveDocs.) Dirigido a cf_documentation todo aquel que est interesado en ColdFusion, desde principiantes hasta desarrolladores avanzados. Contiene muchos tipos Ver en Dreamweaver: Seleccione Ayuda > Referencia. de manual de referencia Para una lista completa de sobre HTML, modelos manuales, haga clic en el men de servidores y otros emergente Libro en el panel temas, casi todos Referencia. publicados por OReilly. Destinado a todo aquel que necesite ms informacin sobre sintaxis de cdigos, conceptos, etc.
Referencia
37
Notas tcnicas, soporte www.macromedia.com/go/ Centro de e informacin sobre la dreamweaver_support_es soporte de Dreamweaver resolucin de problemas para usuarios de Dreamweaver. Centro de Artculos y tutoriales desarrollo de que le ayudarn a Dreamweaver mejorar sus conocimientos y a adquirir otros nuevos. Centro de recursos de documentacin de Dreamweaver Foros en lnea de Macromedia Manuales del producto en formato PDF, fe de errores, tutoriales y notas de la versin. www.macromedia.com/go/ developer_dw_es
www.macromedia.com/go/ dw_documentation_es
Debates e informacin www.macromedia.com/go/ dreamweaver_newsgroup sobre resolucin de problemas proporcionada por usuarios de Dreamweaver, representantes del servicio tcnico y el equipo de desarrollo de Dreamweaver. www.macromedia.com/go/ dreamweaver_training_es
Formacin de Cursos que ofrecen Macromedia ejercicios prcticos y situaciones del mundo real.
Para sacar el mximo provecho de los recursos de Dreamweaver, consulte Por dnde empezar en la pgina 24.
38
Introduccin
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 Dreamweaver en la pgina 35.
Para obtener una lista de recursos de Dreamweaver, vase Gua de recursos de formacin de Dreamweaver en la pgina 35.
(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. es la especificacin oficial
es una amplia lista de etiquetas, atributos y valores HTML, as como su compatibilidad con distintos navegadores.
(www.w3.org/TR/xhtml1/) es la especificacin oficial para XHTML (Lenguaje de formato de hipertexto ampliable). proporciona informacin, tutoriales y sugerencias sobre XML (Lenguaje de formato ampliable) y sobre otras tecnologas Web.
(www.xfront.com/rescuing-xslt.html) ofrece una introduccin a las transformaciones XSL para nuevos usuarios.
El sitio de xFront Las pginas de introduccin a Microsoft ASP (http://msdn.microsoft.com/library/en-us/ dnasp/html/ASPover.asp) proporcionan informacin sobre Active Server Pages (ASP).
39
proporciona
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/)
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. incluye una
introduccin a CGI.
40
Introduccin
CAPTULO 1
Temas relacionados Optimizacin del espacio de trabajo para desarrollo visual en la pgina 743
41
Selector de etiquetas
NO T A 42
Inspector de propiedades
Panel Archivos
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 603. Para utilizar esta opcin, vase Seleccin del diseo del espacio de trabajo (slo en Windows) en la pgina 79.
En Macintosh, Dreamweaver puede mostrar varios documentos en una sola ventana con fichas que identifican a cada uno de ellos. Dreamweaver tambin puede mostrar un espacio de trabajo flotante en el que cada documento aparece en su propia ventana individual. Los grupos de paneles aparecen apilados en principio, pero pueden separarse en sus propias ventanas. Las ventanas se ajustan automticamente, a los lados de la pantalla y en la ventana Documento, al arrastrarlas o cambiar su tamao.
Barra de herramientas de documento Ventana de documento Grupos de paneles
Barra Insertar
Selector de etiquetas
Inspector de propiedades
Panel Archivos
Puede alternar entre diferentes diseos tanto en Windows como en Macintosh. Para ms informacin, consulte Seleccin del diseo del espacio de trabajo (slo en Windows) en la pgina 79 y Visualizacin de documentos en fichas (Macintosh) en la pgina 80.
43
Utilizacin de barras de herramientas, inspectores y mens contextuales en la pgina 58 Utilizacin de paneles y grupos de paneles en la pgina 66.
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.
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 objeto, 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 barra de herramientas Codificacin (se muestra nicamente en la vista Cdigo) contiene botones con los que es posible realizar muchas operaciones de codificacin habituales. La barra de herramientas Representacin de estilos (oculta de manera predeterminada) contiene botones que le permiten ver cmo aparecera el diseo en distintos tipos de soportes si utilizase hojas de estilos dependientes de los medios. Tambin contiene un botn con el que es posible activar o desactivar los estilos CSS.
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 la ventana de documento en la pgina 54
Utilizacin de barras de herramientas, inspectores y mens contextuales en la pgina 58 Utilizacin de paneles y grupos de paneles en la pgina 66 Administracin de archivos y carpetas en el panel Archivos en la pgina 132
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 747). 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 Captulo 20, Codificacin en Dreamweaver, en la pgina 621. Es posible ver el mismo documento en las dos vistas, Cdigo y Diseo, en una sola ventana de documento.
45
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 Utilizacin de la ventana de documento en la pgina 54
Ayudas visuales Depuracin del servidor Ttulo del documento Ver opciones Actualizar vista de diseo Vista previa/Depurar en explorador
46
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 diseo 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.
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. permite comprobar la compatibilidad con distintos navegadores.
Validar formato
permite validar el documento actual o una etiqueta seleccionada. muestra el men emergente Administracin de archivos.
Administracin de archivos
Vista previa/Depurar en explorador permite ver una vista previa del documento o depurarlo
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 codificacin en la pgina 604. Para informacin sobre las opciones de la vista de diseo, vase Seleccin de elementos en la ventana de documento en la pgina 396, Visualizacin y edicin del contenido de Head en la pgina 674 y Utilizacin de guas visuales en Dreamweaver en la pgina 78. Ayudas visuales permite
47
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.
Tamao del documento y tiempo de descarga estimado
Selector de etiquetas
Men emergente Tamao de ventana Establecer nivel de aumento Zoom, herramienta Mano, herramienta Herramienta Seleccionar
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. La herramienta Mano permite hacer clic en el documento y arrastrarlo hasta la ventana de documento. Haga clic en la herramienta Seleccionar para desactivar la herramienta Mano. La herramienta Zoom y el men emergente Establecer nivel de aumento permiten establecer el nivel de ampliacin del documento. Para ms informacin, consulte Utilizacin de Acercar y Alejar en la pgina 398.
48
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 56. 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 413. Temas relacionados Configuracin de las preferencias de la barra de estado en la pgina 57
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.
N OT A
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 83).
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.
49
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.
em, p, h1
La categora Texto permite insertar diversas etiquetas de formato de texto y listas, como b, 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
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_es). Temas relacionados Utilizacin de la barra Insertar en la pgina 59
50
No puede desacoplar ni mover la barra de herramientas Codificacin, pero s puede ocultarla. Para ms informacin, consulte Visualizacin de barras de herramientas en la pgina 58. Tambin puede modificar la barra de herramientas Codificacin para que muestre ms botones (como Ajustar texto, Caracteres ocultos y Sangra automtica) u ocultar botones que no desea utilizar. Para ello, no obstante, deber editar el archivo XML que genera la barra de herramientas. Para ms informacin, consulte Ampliacin de Dreamweaver. Temas relacionados Insercin rpida de cdigo con la barra de herramientas Codificacin en la pgina 635
51
Esta barra de herramientas slo funciona si los documentos utilizan hojas de estilos dependientes de los medios. Por ejemplo, su hoja de estilos puede especificar una regla para imprimir y otra regla distinta para los dispositivos de mano. Para obtener ms informacin acerca de la creacin de hojas de estilos dependientes de los medios, consulte el sitio Web de World Wide Web Consortium en www.w3.org/TR/CSS21/media.html. De manera predeterminada, Dreamweaver muestra el diseo para una pantalla (que muestra cmo se representa una pgina en la pantalla del equipo). Puede ver las representaciones para los diferentes soportes haciendo clic en los correspondientes botones de la barra de herramientas Representacin de estilos.
Representar tipo de medio Screen
equipo.
Representar tipo de medio Print
impresa.
Representar tipo de medio Handheld muestra cmo aparece la pgina en un dispositivo de mano, como un telfono mvil o un dispositivo BlackBerry. Representar tipo de medio Projection
dispositivo de proyeccin.
Representar tipo de medio TTY
mquina de teletipos.
Representar tipo de medio TV muestra cmo aparece la pgina en la pantalla de una pantalla
de televisin.
Alternar visualizacin de estilos CSS permite activar o desactivar los estilos CSS. Este botn
funciona de manera independiente a los dems botones de medios. Temas relacionados Visualizacin de barras de herramientas en la pgina 58
52
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 647.
Validacin
permite comprobar si existen errores de cdigo o de sintaxis. Para validar su cdigo, vase Validacin de etiquetas en la pgina 659. 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 655. 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 506.
Verificador de vnculos
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 173.
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 156 o Colocacin de archivos en un servidor remoto en la pgina 158. 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 661.
53
54
Para pasar de una vista a otra en la ventana de documento, siga uno de estos procedimientos:
Seleccione Ver > Cdigo. Seleccione Ver > Diseo. Seleccione Ver > Cdigo y diseo. 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.
Si aparecen ambas vistas en la ventana de documento, este mtodo abreviado de teclado permite pasar de una vista a otra.
Para organizar las ventanas de documentos en mosaico, siga uno de estos procedimientos:
En Windows, seleccione Ventana > Mosaico horizontal o Ventana > Mosaico vertical. En Macintosh, Seleccione Ventana > Mosaico.
Temas relacionados Seleccin del diseo del espacio de trabajo (slo en Windows) en la pgina 79
55
Visualizacin de documentos en fichas (Macintosh) en la pgina 80 Almacenamiento de diseos de espacio de trabajo personalizados en la pgina 81
Elija uno de los tamaos del men emergente Tamao de ventana situado en la parte inferior de la ventana de documento.
NO TA
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.
S U G E R E N CI A
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.
56
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. Haga clic en Aceptar para guardar el cambio y regresar a la ventana de documento.
4.
Elija Editar tamaos en el men emergente Tamao de ventana. Haga clic en el espacio en blanco situado debajo del ltimo valor de la columna Ancho. Introduzca valores en Ancho y Altura. Para establecer slo el Ancho o la Altura, sencillamente deje un campo vaco. Haga clic en el campo Descripcin para introducir el texto descriptivo sobre el tamao aadido. 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.
4.
5.
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Aparece el cuadro de dilogo Preferencias. Seleccione Barra de estado en la lista Categora de la izquierda. Establezca las opciones de preferencias Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2. 3.
4.
57
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 664). 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.
Para mostrar u ocultar una barra de herramientas, siga uno de estos procedimientos:
Seleccione Ver > Barras de herramientas y, despus, seleccione la barra de herramientas que desee. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en cualquiera de las barras de herramientas en el men contextual.
NO TA
Para mostrar u ocultar la barra de herramientas Codificacin en el inspector de cdigo (Ventana > Inspector de cdigo), debe seleccionar la barra de herramientas Codificacin del men emergente Ver opciones situado en la parte superior del inspector.
Barra de herramientas Estndar en la pgina 48 Barra de herramientas Codificacin en la pgina 51 Barra de herramientas Representacin de estilos en la pgina 52
59
Seleccione Ventana > Insertar. 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, Estndar o Codificacin y, a continuacin, seleccione Barra Insertar.
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.
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.
Es posible que tenga que hacer clic en la barra de ttulo de la barra Insertar para volver a abrirla.
Haga clic con el botn derecho del ratn (Windows) o haga clic mientras presiona la tecla 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 63
Seleccione la categora adecuada en el lado izquierdo de la barra Insertar. 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 Quick tag editor (vase Edicin de etiquetas mediante editores de etiquetas en la pgina 639) 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 Quick tag editor 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.
NO T A
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 397.
Para omitir el cuadro de dilogo de insercin de objetos e insertar un objeto marcador de posicin vaco:
Haga clic mientras presiona la tecla Control (Windows) u Opcin (Macintosh) en el botn del objeto.
61
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.
NO T A
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.
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). El cuadro de dilogo Preferencias aparece y muestra la categora de preferencias General. 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
2.
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.
3.
Temas relacionados Visualizacin de la barra Insertar y sus categoras y mens correspondientes en la pgina 59
62
Seleccione una categora en la barra Insertar. 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. Realice los cambios necesarios. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. La categora Favoritos refleja los cambios realizados.
S U G E R E N CI A
3.
4.
Si no se encuentra en la categora Favoritos, seleccinela para ver los cambios que haya realizado.
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.
NO T A
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 59
63
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 664).
64
S U G E R E N C IA
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 68.
Haga clic en la flecha de ampliacin, situada en la esquina inferior derecha del inspector de propiedades.
Es posible que deba ampliar el inspector de propiedades para ver todas las propiedades del elemento seleccionado.
Seleccione el elemento de pgina en la ventana de documento. Cambie las propiedades que desee en el inspector de propiedades.
NO TA
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.
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.
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.
65
2.
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.
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.
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.
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.
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.
67
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.
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.
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.)
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.
68
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.
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.
Seleccione Cambiar nombre de grupo de paneles en el men Opciones de la barra de ttulo del grupo de paneles. Introduzca un nuevo nombre y haga clic en Aceptar.
2.
69
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Aparece el cuadro de dilogo Preferencias. Seleccione Paneles en la lista Categora de la izquierda. Seleccione las opciones. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2. 3.
4.
70
Temas relacionados Utilizacin del teclado para desplazarse por Dreamweaver en la pgina 72
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.
71
El uso de la tecla de tabulacin y las teclas de flecha slo es compatible con Windows.
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. Presione la combinacin de teclas Control+Alt+Mays+Tab para regresar al panel previo, si fuese necesario. 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.
3.
4.
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 la opcin a la que ha accedido.
72
6.
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.
Desplazamiento por los marcos en la pgina 74 Desplazamiento por las tablas en la pgina 75
Presione la tecla Control+F3 (Windows) o la tecla Comando+F3 (Macintosh) para mostrar el inspector de propiedades, si no est visible. (Windows) Presione Control+Alt+Tab hasta que haya entrado en el inspector de propiedades. Presione la tecla Tab para desplazarse a travs de las opciones del inspector de propiedades. (Windows) Utilice las teclas de flecha como convenga para desplazarse por las distintas opciones. 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.
2.
3. 4.
5.
Desplazamiento por los marcos en la pgina 74 Desplazamiento por las tablas en la pgina 75
73
Para desplazarse a travs de las opciones de un cuadro de dilogo, presione la tecla Tab. (Windows) 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. Vuelva a presionar Control+Tab (Windows) u Opcin+Tab (Macintosh) para cambiar a las opciones de una categora. Para salir del cuadro de dilogo presione Intro (Windows) o Retorno (Macintosh).
4.
5.
Temas relacionados Desplazamiento por los paneles en la pgina 72 Desplazamiento por el inspector de propiedades en la pgina 73 Desplazamiento por las tablas en la pgina 75
Site el punto de insercin en la ventana de documento. 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. 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. Presione Alt+Flecha abajo para entrar en un conjunto de marcos hijo o en un marco individual del conjunto de marcos. Una vez haya entrado en un marco individual, presione Alt+Flecha izquierda o derecha para desplazarse por los marcos. Presione Alt+Flecha abajo para colocar el punto de insercin en la ventana de documento.
3.
4.
5.
6.
Desplazamiento por el inspector de propiedades en la pgina 73 Desplazamiento por los cuadros de dilogo en la pgina 74
Utilice las teclas de flecha o presione Tab para desplazarse a otras celdas de la tabla, segn sea necesario.
S UG E R E N CI A
Al presionar la tecla Tab mientras se est en una celda de la derecha, se aade otra fila a la tabla.
2.
Para seleccionar una celda, coloque el punto de insercin en dicha celda y presione Control+A (Windows) o Comando+A (Macintosh). Para seleccionar una tabla, presione dos veces las teclas Control+A (Windows) o Comando+A (Macintosh) si el punto de insercin se encuentra en una celda, o presione una sola vez si hay una celda seleccionada.
3.
75
4.
Para salir de la tabla presione las teclas Control+A (Windows) o Comando+A (Macintosh) tres veces si el punto de insercin se encuentra en una celda, dos veces si la celda est seleccionada o una sola vez si la tabla est seleccionada. Despus, presione las teclas de flecha arriba, abajo, derecha o izquierda.
Desplazamiento por el inspector de propiedades en la pgina 73 Desplazamiento por los cuadros de dilogo en la pgina 74 Desplazamiento por los marcos en la pgina 74
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Aparece el cuadro de dilogo Preferencias. Seleccione Accesibilidad en la lista Categora de la izquierda.
2.
76
3.
Seleccione los objetos para los que desee activar los cuadros de dilogo Accesibilidad. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
NO T A
Al insertar una nueva tabla, los atributos de accesibilidad aparecen automticamente en el cuadro de dilogo Insertar tabla.
4.
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 Dreamweaver y accesibilidad en la pgina 34
Insercin de una imagen en la pgina 462 Validacin de datos de formulario HTML en la pgina 927 Creacin de marcos y conjuntos de marcos en la pgina 316 Insercin y edicin de objetos multimedia en la pgina 535 Insercin de una tabla y adicin de contenido en la pgina 264
77
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 56.) 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 258.) Utilice las reglas y guas para proporcionar una pista visual que permita colocar y cambiar el tamao de los elementos de pgina con precisin. (Vase Utilizacin de reglas, guas y cuadrculas para disear pginas en la pgina 254.) Utilizar la cuadrcula para lograr una mayor precisin en la colocacin y ajuste del tamao de las capas. (Vase Utilizacin de la cuadrcula en la pgina 257.) 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.
78
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 66.
NO T A
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 Utilizacin de Dreamweaver. Temas relacionados Personalizacin de Dreamweaver en sistemas multiusuario Ampliacin de Dreamweaver
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.
Codificador
N OT A
Puede acoplar los grupos de paneles a ambos lados del espacio de trabajo en cualquiera de los diseos del espacio de trabajo.
2.
79
Seleccione Ventana > Diseo del espacio de trabajo y seleccione el diseo del espacio de trabajo que prefiera.
Adems de seleccionar Codificador y Diseador, puede seleccionar Pantalla doble derecha o Pantalla doble izquierda. Si dispone de un monitor secundario situado a la derecha del monitor principal, la opcin Pantalla doble derecha coloca todos los paneles en el monitor de la derecha y conserva la ventana de documento en el monitor principal. Por el contrario, si dispone de un monitor secundario situado a la izquierda del monitor principal, la opcin Pantalla doble izquierda coloca todos los paneles en el monitor de la derecha izquierda conserva la ventana de documento en el monitor principal. Temas relacionados Diseo del espacio de trabajo en la pgina 42
Almacenamiento de diseos de espacio de trabajo personalizados en la pgina 81 Organizacin de las ventanas de documentos en cascada o en mosaico en la pgina 55
Haga clic en la ficha con el botn derecho del ratn o haga clic mientras presiona la tecla Control y seleccione Mover a nueva ventana en el men contextual.
Seleccione Dreamweaver > Preferencias y, posteriormente, seleccione la categora General. Seleccione o anule la seleccin de Abrir documentos en fichas y haga clic en Aceptar.
N O TA
Dreamweaver no modifica la visualizacin de documentos que estn actualmente abiertos al cambiar las preferencias. No obstante, los documentos que se abran despus de seleccionar una nueva preferencia se mostrarn conforme a la preferencia seleccionada.
80
Ordene los paneles del modo que desee. Seleccione Ventana > Diseo del espacio de trabajo > Guardar disposicin de paneles. Introduzca un nombre para el diseo y haga clic en Aceptar.
Seleccione Ventana > Diseo del espacio de trabajo y seleccione el diseo personalizado.
Seleccione Ventana > Diseo del espacio de trabajo > Administrar. Seleccione un diseo y siga uno de estos procedimientos:
Para cambiar el nombre de un diseo, haga clic en el botn Cambiar nombre, introduzca un nuevo nombre para el diseo y haga clic en Aceptar. Para eliminar un diseo, haga clic en el botn Eliminar.
3.
Seleccin del diseo del espacio de trabajo (slo en Windows) en la pgina 79 Visualizacin de documentos en fichas (Macintosh) en la pgina 80
81
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 82.
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). El cuadro de dilogo Preferencias aparece y muestra la categora de preferencias General. Seleccione la casilla de verificacin Mostrar pgina de inicio.
2.
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). El cuadro de dilogo Preferencias aparece y muestra la categora de preferencias General. Establezca las opciones de preferencias Para ms informacin, haga clic en Ayuda. Haga clic en Aceptar.
2.
3.
82
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Aparece el cuadro de dilogo Preferencias. Seleccione Fuentes en la lista Categora de la izquierda. 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. Para ms informacin, haga clic en Ayuda.
N OT A
2. 3.
Las fuentes que elija no afectan al aspecto que tendr el documento cuando se muestre en un navegador.
4.
Encontrar un grfico que describe los mtodos abreviados de teclado en la configuracin predeterminada de Dreamweaver en el sitio Web de Macromedia en www.macromedia.com/go/dw_documentation_es.
83
Seleccione Edicin > Mtodos abreviados de teclado (Windows) o Dreamweaver > Mtodos abreviados de teclado (Macintosh). Aparece el cuadro de dilogo Mtodos abreviados de teclado.
Botn Juego repetido Botn Eliminar el juego Botn Exportar conjunto como HTML Botn Cambiar nombre del conjunto
2.
Aada, elimine o edite los mtodos abreviados de teclado. Para ms informacin, haga clic en Ayuda. Haga clic en Aceptar.
3.
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 54.
Para obtener las ltimas extensiones para Dreamweaver, utilice el sitio Web de Macromedia Exchange en www.macromedia.com/go/dreamweaver_exchange_es/. Una vez all, podr conectar y descargar extensiones (muchas de ellas gratuitas), incorporarse a grupos de debate, ver calificaciones y comentarios de los usuarios e instalar y utilizar Extension Manager. Debe instalar Extension Manager para poder instalar extensiones.
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.
N OT A
Utilice Extension Manager para eliminar extensiones o para consultar ms informacin sobre la extensin.
85
86
CAPTULO 2
A medida que desarrolle el contenido del sitio, plantese basar las pginas en plantillas de Dreamweaver. Vase Plantillas de Dreamweaver en la pgina 332 y Creacin de una plantilla de Dreamweaver en la pgina 347.
87
Para definir un sitio de Dreamweaver, slo tiene que configurar una carpeta local. Sin embargo, 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 690. Temas relacionados Configuracin de un sitio de Dreamweaver nuevo en la pgina 91
88
no
HTML
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.
89
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.
SITIO REMOTO public_html SITIO LOCAL carpeta raz local (asigne a public.html, no a Project1 o Project/HTML) Project 1 (debe estar en sitio local; corresponde a Project1 en sitio remoto) HTML (debe estar en sitio local; corresponde a Project1/HTML en sitio remoto)
Project 1
Assets
HTML
Project 2
Assets
HTML
90
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 118.
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 147.
Para definir un sitio de Dreamweaver:
1.
Seleccione Sitio > Administrar sitios. Aparece el cuadro de dilogo Administrar sitios.
N OT A
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. Siga uno de estos procedimientos:
3.
Haga clic en la ficha Bsicas para utilizar el asistente para la Definicin del sitio, que le guiar a travs del proceso de configuracin.
N OT A
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.
N OT A
Para empezar, puede configurar un sitio de Dreamweaver completo, o simplemente realizar el primer paso, la configuracin de la carpeta local.
91
4.
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 92).
S U G ER E N C I A
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 147.
Si est configurando un sitio de Dreamweaver para una aplicacin Web, vase Captulo 23, Configuracin de una aplicacin Web, en la pgina 679.
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 91.)
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 679.
S U G E R E N C IA
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 147.
Temas relacionados Acerca de los sitios de Dreamweaver en la pgina 88 Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 690
Seleccione Sitio > Administrar sitios. Aparece el cuadro de dilogo Administrar sitios.
N OT A
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. Aparecer el cuadro de dilogo Definicin del sitio. Haga clic en el botn Avanzadas, si las opciones avanzadas no estn visibles.
3.
93
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. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. (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. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. Dreamweaver crea la cach inicial del sitio y el nuevo sitio de Dreamweaver aparece en el panel Archivos.
5.
6.
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 95 y Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 690). Temas relacionados Acerca de los sitios de Dreamweaver en la pgina 88 Administracin de archivos en la pgina 113
94
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:
1.
Seleccione Sitio > Administrar sitios. Aparece el cuadro de dilogo Administrar sitios. 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 93).
2.
3.
Haga clic en Editar. Aparecer el cuadro de dilogo Definicin del sitio. Haga clic en el botn Avanzadas, si las opciones avanzadas no estn visibles. Seleccione Datos remotos en la lista Categora que aparece en la parte izquierda. Seleccione una opcin de acceso. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. 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 690).
4. 5. 6.
7.
En el panel Archivos, haga clic en el botn Conectar al servidor remoto en la barra de herramientas.
95
No es necesario conectarse a la carpeta remota; estar siempre conectado. Haga clic en el botn Actualizar para ver los archivos remotos.
Aspectos bsicos de la estructura de carpetas locales y remotas en la pgina 89 Solucin de problemas de configuracin de carpetas remotas en la pgina 96
Es posible que la implementacin FTP de Dreamweaver no funcione correctamente con algunos servidores proxy, servidores de seguridad multinivel y otras formas de acceso indirecto al servidor. Si surgen problemas con el acceso FTP, solicite ayuda al administrador del sistema local. Para la 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.
96
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.
NO T A
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.
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.
97
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 118.
Seleccione Sitio > Administrar sitios. Aparece el cuadro de dilogo Administrar sitios. Haga clic en Nuevo. Aparecer el cuadro de dilogo Definicin del sitio. 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.
2.
3.
4.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
5.
98
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 118.
Cree una carpeta local que contenga el sitio y configrela como carpeta local del sitio (vase Configuracin de una carpeta local en la pgina 93).
N OT A
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 89.
2.
Configure una carpeta remota (vase Configuracin de una carpeta remota en la pgina 95) con la informacin del sitio existente. Asegrese de elegir la carpeta raz correcta para el sitio remoto. 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. Segn la parte del sitio remoto que desee editar, siga uno de estos procedimientos:
3.
4.
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.
99
100
CAPTULO 3
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. Este captulo contiene las secciones siguientes:
Creacin de documentos nuevos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Cmo guardar un nuevo documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Configuracin de un tipo de documento nuevo predeterminado. . . . . . . . . . . . . . . 106 Configuracin de la extensin de archivo predeterminada para nuevos documentos HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Cmo abrir documentos existentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Limpiar archivos HTML de Microsoft Word. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
101
Empiece con un documento en blanco (vase Creacin de un nuevo documento en blanco en la pgina 102). 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 103). 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 104).
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 106.
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. Guarde el documento (vase Cmo guardar un nuevo documento en la pgina 105).
4.
102
Temas relacionados Creacin de un documento basado en una plantilla existente en la pgina 104
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 322.
Seleccione Archivo> Nuevo. 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. 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. 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.
4.
Guarde el documento (vase Cmo guardar un nuevo documento en la pgina 105). 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.
103
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 102
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 Dreamweaver en la pgina 103.
Seleccione Archivo > Nuevo. Se abrir el cuadro de dilogo Nuevo documento. Haga clic en la ficha Plantillas. 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. Para ms informacin sobre las opciones de este cuadro de dilogo, haga clic en el botn Ayuda del mismo.
2. 3.
4.
Haga clic en Crear. El documento nuevo se abrir en la ventana del documento. Guarde el documento (vase Cmo guardar un nuevo documento en la pgina 105).
5.
104
Abra el panel Activos (Ventana > Activos), si no est abierto. En el panel Activos, haga clic en el icono Plantillas de la izquierda para ver la lista de plantillas del sitio actual.
S UG E R E NC I A
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.
Seleccione Archivo > Guardar. 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 91.
3.
105
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.
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Aparece el cuadro de dilogo Preferencias.
S UG E R E N CI A
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 102).
2. 3.
Haga clic en Nuevo documento en la lista Categora de la izquierda. Establezca o cambie las preferencias segn convenga. Para ms informacin sobre las opciones del cuadro de dilogo, haga clic en el botn Ayuda.
4.
106
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Aparece el cuadro de dilogo Preferencias.
S UG E R E N CI A
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 102).
2. 3. 4.
Haga clic en Nuevo documento en la lista Categora de la izquierda. En Tipo de documento predeterminado, asegrese de que est seleccionado HTML. En el cuadro de texto Extensin predeterminada, especifique la extensin de archivo de los nuevos documentos HTML creados en Dreamweaver. En Windows, puede especificar las siguientes extensiones: .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml. En Macintosh, puede especificar las siguientes extensiones: .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi.
107
Para limpiar HTML o XHTML no generados por Microsoft Word, vase Limpieza del cdigo en la pgina 653. 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.
Tambin puede utilizar el panel Archivos para abrir los archivos. Para ms informacin, consulte Utilizacin de archivos en el panel Archivos en la pgina 134.
2.
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 91.
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 537.
108
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 653.
Para abrir y limpiar un archivo HTML de Microsoft Word:
1.
2.
Abra el archivo HTML en Dreamweaver. Para visualizar el cdigo HTML generado por Word, cambie a la vista Cdigo (Ver > Cdigo).
3.
Seleccione Comandos > Limpiar HTML de Word. 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.
5.
Haga clic en Aceptar. Dreamweaver aplica la configuracin de limpieza al documento HTML y se abre un registro en el que se reflejan los cambios (a menos que desactive dicha opcin del cuadro de dilogo).
Temas relacionados Importacin de documentos de Microsoft Office (slo Windows) en la pgina 430
109
110
PARTE 2
111
CAPTULO 4
Administracin de archivos
Macromedia Dreamweaver 8 ayuda a organizar y administrar los archivos. Dreamweaver dispone de una serie de funciones para administrar archivos y transferirlos desde y a un servidor remoto. 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. Este captulo contiene las secciones siguientes:
Administracin de sitios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114 Acceso a sitios, a un servidor y a unidades locales. . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Visualizacin de archivos y carpetas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Comparacin de archivos para detectar diferencias . . . . . . . . . . . . . . . . . . . . . . . . . 125 Recuperacin de versiones anteriores de archivos (usuarios de Contribute) . . . . 132 Administracin de archivos y carpetas en el panel Archivos . . . . . . . . . . . . . . . . . . 132 Utilizacin de un mapa visual del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Importacin y exportacin de sitios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Eliminacin de un sitio de Dreamweaver de la lista de sitios . . . . . . . . . . . . . . . . . . 149 Desproteccin y proteccin de archivos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Obtencin y colocacin de archivos en el servidor. . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Sincronizacin de los archivos de los sitios local y remoto. . . . . . . . . . . . . . . . . . . . .161 Identificacin y eliminacin de archivos no utilizados . . . . . . . . . . . . . . . . . . . . . . . . 163
113
Cmo ocultar carpetas y archivos en el sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 Almacenamiento de informacin sobre archivos en Design Notes. . . . . . . . . . . . . 169 Comprobacin del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
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.
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 156.
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. Para ms informacin sobre archivos LCK y cmo funciona el sistema de desproteccin/ proteccin, consulte la nota tcnica 15447 en el sitio Web de Macromedia www.macromedia.com/go/15447.
Colocar/Obtener/Desproteger/Proteger archivos. Deshacer proteger. Crear una conexin de base de datos. Vincular datos dinmicos. Obtener una vista previa de Live Data. Insertar un servicio Web. Eliminar archivos o carpetas remotas. Obtener una vista previa en el navegador en un servidor de prueba. Guardar un archivo en un servidor remoto. Insertar una imagen desde un servidor remoto. Abrir un archivo de un servidor remoto. Colocar archivos automticamente al guardar. Arrastrar archivos a un sitio remoto. Cortar, copiar o pegar archivos en el sitio remoto. Actualizar la Vista remota.
Administracin de sitios
115
Colocar, obtener, desproteger y proteger Generar informes Buscar archivos locales y remotos ms recientes Operaciones en todo el sitio, como comprobar y cambiar vnculos Sincronizar Utilizacin del contenido del panel Activos Actualizar plantillas y bibliotecas
N OT A
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.
116
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"
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 editarla usando Fireworks (vase Inicio de un editor externo de archivos multimedia en la pgina 537), Fireworks abrir el archivo original para editarlo. Temas relacionados Activacin y desactivacin de Design Notes para un sitio en la pgina 169 Asociacin de Design Notes a archivos en la pgina 170
Administracin de sitios
117
Algunos servidores indican errores al colocar elementos de biblioteca. Sin embargo, puede ocultar estos archivos para impedir que se transfieran. Para instrucciones, consulte Cmo ocultar carpetas y archivos en el sitio en la pgina 163. Temas relacionados Obtencin de archivos de un servidor remoto en la pgina 156 Colocacin de archivos en un servidor remoto en la pgina 158
La mejor manera de administrar los archivos consiste en crear un sitio Dreamweaver (vase Configuracin de un sitio de Dreamweaver nuevo en la pgina 91).
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 122. Para informacin sobre cmo abrir archivos en el sitio, vase Utilizacin de archivos en el panel Archivos en la pgina 134.
118
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).
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 134.
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.
NO T A
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 120.
Abrir archivos en Dreamweaver u otras aplicaciones Cambiar el nombre de los archivos Copiar archivos Eliminar archivos Arrastrar archivos
119
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 de Dreamweaver, Dreamweaver mover el archivo a la ubicacin donde lo suelte.
NO TA
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.
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 91.
Para configurar Dreamweaver de modo que funcione con un servidor desde la ventana de documento:
1.
Seleccione Sitio > Administrar sitios. Aparece el cuadro de dilogo Administrar sitios. Haga clic en Nuevo y seleccione Servidores FTP y RDS. Aparecer el cuadro de dilogo Configurar servidor. Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
N OT A
2.
3.
Slo debe completar este cuadro de dilogo una vez para cada servidor al que quiera conectarse.
4.
120
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.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
N OT A
Slo debe completar este cuadro de dilogo una vez para cada servidor al que quiera conectarse.
4.
Haga clic en Aceptar. 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.
NO T A
Si las carpetas son grandes, el panel Archivos puede tardar unos instantes en mostrar la carpeta.
121
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.
En el panel Archivos (Ventana > Archivos), haga clic en el botn Expandir/contraer situado en la barra de herramientas.
N OT A
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.
122
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.
NO T A
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.
Servidor de prueba
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 138.
NO T A
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 95 o Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 690). Para ver un mapa del sitio, es necesario configurar una pgina principal (vase Visualizacin de un mapa del sitio en la pgina 138).
Temas relacionados Acceso a sitios, a un servidor y a unidades locales en la pgina 118 Administracin de archivos y carpetas en el panel Archivos en la pgina 132
123
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 Eliminar columnas (slo columnas personalizadas) Cambiar el nombre de columnas (slo columnas personalizadas) Asociar con una Design Note (slo columnas personalizadas)
Vuelva a hacer clic en el encabezado para invertir el orden (ascendente o descendente) en que Dreamweaver ordenar la columna.
Seleccione Sitio > Administrar sitios. Aparece el cuadro de dilogo Administrar sitios. Seleccione un sitio y haga clic en Editar. Aparecer el cuadro de dilogo Definicin del sitio. Seleccione Columnas vista archivo en la lista de categoras de la izquierda.
2.
3.
124
Aparece el cuadro de dilogo Definicin del sitio con las opciones de Columnas vista archivo.
4.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
5.
125
La comparacin de dos archivos locales o dos archivos remotos tambin es til si conserva versiones anteriores de los archivos con otro nombre. Si ha olvidado los cambios realizados en un archivo con respecto a la versin anterior, una rpida comparacin le permitir recordarlos. Antes de comenzar, deber instalar en el sistema una herramienta de comparacin de archivos de terceros. Para ms informacin sobre las herramientas de comparacin de archivos, consulte el sitio Web de Macromedia www.macromedia.com/go/dw8_compare_util_es. Tambin debe especificar la herramienta en Dreamweaver cuando lo haya instalado, tal como se describe ms adelante en esta seccin. Esta seccin trata sobre los siguientes temas:
Comparacin antes de colocar archivos en la pgina 129 Comparacin al sincronizar archivos en la pgina 130 Especificacin de la herramienta de comparacin en Dreamweaver en la pgina 130
Comparacin de dos archivos locales en la pgina 127 Comparacin de dos archivos remotos en la pgina 127 Comparacin de un archivo local con un archivo remoto en la pgina 128 Comparacin de un archivo remoto con un archivo local en la pgina 128 Comparacin de un archivo abierto con un archivo remoto en la pgina 128
126
En el panel Archivos, presione Control (Windows) o Comando (Macintosh) mientras hace clic en los dos archivos para seleccionarlos.
S UG E R E NC I A
Para seleccionar archivos situados fuera del sitio definido, seleccione el disco local del men emergente izquierdo en el panel Archivos y luego seleccione los archivos.
2.
Haga clic con el botn derecho del ratn en los archivos seleccionados y seleccione Comparar archivos locales del men contextual.
NO TA
Si dispone de un ratn con un solo botn, presione Control mientras hace clic en uno de los archivos seleccionados.
En el panel Archivos, muestre los archivos del servidor remoto seleccionando Vista remota del men emergente derecho. Presione Control (Windows) o Comando (Macintosh) mientras hace clic en los dos archivos para seleccionarlos. Haga clic con el botn derecho del ratn en los archivos seleccionados y seleccione Comparar archivos remotos del men contextual.
N OT A
2.
3.
Si dispone de un ratn con un solo botn, presione Control mientras hace clic en uno de los archivos seleccionados.
127
En el panel Archivos, haga clic con el botn derecho del ratn en un archivo local y seleccione Comparar con remotos del men contextual.
N OT A
Si dispone de un ratn con un solo botn, presione Control mientras hace clic en el archivo local.
En el panel Archivos, muestre los archivos del servidor remoto seleccionando Vista remota del men emergente derecho. Haga clic con el botn derecho del ratn en un archivo del panel y seleccione Comparar con locales del men contextual.
N OT A
Si dispone de un ratn con un solo botn, presione Control mientras hace clic en el archivo.
128
En la ventana de documento, seleccione Archivo > Compare with Remote (Comparar con remoto). La herramienta de comparacin de archivos se iniciar y comparar los dos archivos.
S U G E R E N C IA
Tambin puede hacer clic con el botn derecho del ratn en la ficha del documento a lo largo de la parte superior de la ventana de documento y seleccionar Compare with Remote (Comparar con remoto) del men contextual.
Tras editar un archivo de un sitio de Dreamweaver, coloque el archivo (Sitio > Colocar) en el sitio remoto. Si la versin remota del archivo ha sido modificada, Dreamweaver se lo notificar y le dar la oportunidad de ver las diferencias.
2.
Para ver las diferencias, haga clic en el botn Comparar. La herramienta de comparacin de archivos se iniciar y comparar los dos archivos. Si no ha especificado una herramienta de comparacin de archivos, Dreamweaver le pedir que especifique una.
3.
Una vez que haya revisado o combinado los cambios en la herramienta, podr continuar con la operacin de colocacin o cancelarla.
129
Haga clic con el botn derecho del ratn en cualquier lugar del panel Archivos y seleccione Sincronizar del men contextual. Aparece el cuadro de dilogo Sincronizar archivos. Complete el cuadro de dilogo Sincronizar archivos y haga clic en Vista previa. Para ms informacin, consulte Sincronizacin de los archivos de los sitios local y remoto en la pgina 161. Tras hacer clic en Vista previa, Dreamweaver enumerar los archivos seleccionados y las acciones que realizar durante la sincronizacin.
2.
3.
En la lista, seleccione cada archivo que desee comparar y haga clic en el botn Comparar (el icono con dos pginas pequeas).
N OT A
El archivo debe estar basado en texto, como, por ejemplo, archivos HTML o de ColdFusion.
Dreamweaver iniciar la herramienta de comparacin, que comparar las versiones local y remota de cada uno de los archivos seleccionados. Temas relacionados Comparacin de dos archivos en la pgina 126 Comparacin antes de colocar archivos en la pgina 129
130
Una vez instalada la herramienta de comparacin de archivos, debe especificarla en Dreamweaver, tal como se describe en esta seccin.
Para especificar una herramienta de comparacin de archivos:
1.
Instale la herramienta de comparacin de archivos en el mismo sistema en el que est instalado Dreamweaver. En Dreamweaver, acceda al cuadro de dilogo Preferencias seleccionando Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh) y, a continuacin, seleccione la categora Comparacin de archivos. En Windows, haga clic en el botn Examinar y seleccione una aplicacin que compare archivos. En Macintosh, haga clic en el botn Examinar y seleccione la herramienta o el script que inicia la herramienta de comparacin de archivos desde la lnea de comandos, no la herramienta de comparacin de archivos propiamente dicha. Las herramientas o los scripts de inicio normalmente estn ubicados en la carpeta usr/bin de Macintosh. Por ejemplo, si desea utilizar FileMerge, vaya a usr/bin y seleccione opendiff, que es la herramienta que inicia FileMerge. En la siguiente tabla se enumeran las herramientas de comparacin de archivos ms habituales para Macintosh y la ubicacin de sus correspondientes herramientas o scripts de inicio en el disco duro:
Si utiliza
FileMerge BBEdit TextWrangler
NO T A
2.
3.
4.
La carpeta usr normalmente est oculta en el Finder. No obstante, puede acceder a ella con el botn Examinar de Dreamweaver.
Comparacin antes de colocar archivos en la pgina 129 Comparacin al sincronizar archivos en la pgina 130
131
La recuperacin de versiones anteriores de archivos tambin debe estar activada en la configuracin administrativa de Contribute. Para ms informacin, consulte Administracin de Contribute.
Para recuperar una versin anterior de un archivo:
1.
Haga clic con el botn derecho (Windows) o haga clic con la tecla Control presionada (Macintosh) en un archivo del panel Archivos. Seleccione Restaurar pgina. Si existe una versin anterior de la pgina que se va a restaurar, aparece el cuadro de dilogo correspondiente.
2.
3.
Temas relacionados Eliminacin, traslado y cambio de nombre de un archivo remoto de un sitio de Contribute en la pgina 213
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Aparece el cuadro de dilogo Preferencias. Seleccione Sitio en la lista de categoras que aparece en la parte izquierda. Aparecen las opciones de preferencias del sitio.
2.
3.
Realice los cambios apropiados en las opciones. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
133
4.
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 Ampliacin de Dreamweaver.
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). Localice y seleccione el archivo que desea abrir. Siga uno de estos procedimientos:
2. 3.
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.
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.
2.
Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y seleccione Nuevo archivo o Nueva carpeta. Introduzca un nombre para el nuevo archivo o carpeta. Presione Intro (Windows) o Retorno (Macintosh).
3. 4.
134
En el panel Archivos (Ventana > Archivos), seleccione el archivo o la carpeta que desea eliminar. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y seleccione Eliminar.
2.
En el panel Archivos (Ventana > Archivos), seleccione el archivo o carpeta cuyo nombre desee cambiar. Siga uno de estos procedimientos para activar el nombre del archivo o carpeta:
2.
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. 4.
Escriba el nuevo nombre encima del anterior. Presione Intro (Windows) o Retorno (Macintosh).
En el panel Archivos (Ventana > Archivos), seleccione el archivo o la carpeta que desea mover. Siga uno de estos procedimientos:
2.
Copie el archivo o carpeta y pguelo en una nueva ubicacin. Arrastre el archivo o carpeta a una nueva ubicacin.
3.
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).
N O TA
Dreamweaver actualiza de forma automtica el panel Archivos cuando se realizan cambios en otra aplicacin y luego se regresa a Dreamweaver.
135
Acceso a sitios, a un servidor y a unidades locales en la pgina 118 Configuracin de preferencias para el panel Archivos en la pgina 133
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 resalta el archivo.
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.
Seleccione el archivo en la vista local o remota del panel Archivos (Ventana > Archivos). Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y seleccione Localizar en sitio local o Localizar en sitio remoto (segn dnde seleccion el archivo).
136
Para localizar y seleccionar archivos con versiones ms recientes en el sitio local que en el remoto:
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 local ms reciente.
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 remoto ms reciente.
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. Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar para guardar la configuracin.
2.
3.
Dreamweaver selecciona los archivos que han sido modificados dentro del intervalo de tiempo seleccionado en el panel Archivos. Temas relacionados Acceso a sitios, a un servidor y a unidades locales en la pgina 118
Visualizacin de archivos y carpetas en la pgina 122 Utilizacin de archivos en el panel Archivos en la pgina 134
137
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.
NO TA
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 93).
Temas relacionados Establecimiento de vnculos con documentos utilizando el mapa del sitio en la pgina 486
En el panel Archivos (Ventana > Archivos), elija un sitio en el men emergente donde aparece el sitio, el servidor o la unidad actual. 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.
N OT A
2.
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 140).
138
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.
NO TA N OT A
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.
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 144.
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.
139
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).
Mostrar y ocultar archivos de mapa de un sitio en la pgina 144 Visualizacin del sitio desde una rama en la pgina 146
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.
140
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.
4.
Realice los cambios necesarios. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar para cerrar el cuadro de dilogo Definicin del sitio. Haga clic en Listo para cerrar el cuadro de dilogo Administrar sitios, si se encuentra abierto.
5. 6.
Mostrar y ocultar archivos de mapa de un sitio en la pgina 144 Almacenamiento del mapa del sitio en la pgina 147
141
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.
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. Haga clic con el botn derecho (Windows) o haga clic con la tecla Control presionada (Macintosh) en el archivo del mapa del sitio, seleccione Vincular a archivo existente y localice el archivo.
Seleccione un archivo en el mapa del sitio. Haga clic con el botn derecho (Windows) o haga clic con la tecla Control presionada (Macintosh) y seleccione Vincular a nuevo archivo. Aparece el cuadro de dilogo Vincular a nuevo archivo.
3.
142
4.
Haga clic en Aceptar. 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 144).
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.
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.
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. 2.
Haga clic en cualquier lugar del mapa del sitio para anular la seleccin de archivos. Haga clic en el botn Actualizar de la barra de herramientas del panel Archivos.
Modificacin del diseo del mapa del sitio en la pgina 140 Almacenamiento del mapa del sitio en la pgina 147
143
En el mapa del sitio, seleccione uno o varios archivos. Haga clic con el botn derecho (Windows) o haga clic con la tecla Control presionada (Macintosh) y seleccione Mostrar/ocultar vnculo.
Para eliminar la marca de los archivos marcados como ocultos en el mapa del sitio:
1. 2.
En el mapa del sitio, seleccione uno o varios archivos. Siga uno de estos procedimientos:
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. 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/ocultar vnculo.
144
Para mostrar u ocultar archivos marcados como ocultos en el mapa del sitio:
1.
En el panel Archivos contrado (Ventana > Archivos), haga clic en el men de opciones situado en la esquina superior derecha.
2.
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.
En el panel Archivos contrado (Ventana > Archivos), haga clic en el men de opciones situado en la esquina superior derecha. Siga uno de estos procedimientos:
2.
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 de un mapa del sitio en la pgina 138 Modificacin del diseo del mapa del sitio en la pgina 140 Manipulacin de pginas en el mapa del sitio en la pgina 142 Almacenamiento del mapa del sitio en la pgina 147
145
Haga clic con el botn derecho (Windows) o haga clic con la tecla Control presionada (Macintosh) en el mapa del sitio y luego seleccione Ver como raz. En el panel Archivos contrado (Ventana > Archivos), haga clic en el men de opciones 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:
Modificacin del diseo del mapa del sitio en la pgina 140 Manipulacin de pginas en el mapa del sitio en la pgina 142
146
En el panel Archivos contrado (Ventana > Archivos), haga clic en el men de opciones situado en la esquina superior derecha y seleccione Archivo > Guardar mapa del sitio.
Escriba un nombre en el cuadro de texto Nombre de archivo. En el men emergente Tipo de archivo, seleccione .bmp o .png. Elija la ubicacin donde desea guardar el archivo e introduzca un nombre para la imagen. Haga clic en Guardar.
Modificacin del diseo del mapa del sitio en la pgina 140 Manipulacin de pginas en el mapa del sitio en la pgina 142
Resulta conveniente exportar los sitios con regularidad de modo que disponga de una copia de seguridad por si ocurre algn problema con el sitio.
147
Seleccione Sitio > Administrar sitios. Aparece el cuadro de dilogo Administrar sitios. Seleccione uno o varios sitios para exportarlos y luego haga clic en el botn Exportar. Para seleccionar ms de un sitio, presione Control (Windows) o Comando (Macintosh) mientras hace clic en cada sitio. Para seleccionar un rango de sitios, presione Mays mientras hace clic en el primer sitio y en el ltimo sitio del rango.
2.
3.
Por cada sitio que desee exportar, vaya a la ubicacin en la que desea guardar el sitio y haga clic en Guardar. Si exporta un sitio que especifica un nombre de usuario y una contrasea para un servidor remoto, Dreamweaver le preguntar si desea realizar una copia de seguridad de la configuracin o si desea compartir la configuracin con otros usuarios. Si desea compartir la configuracin con otros usuarios, seleccione la segunda opcin y haga clic en Aceptar. Dreamweaver no guarda la informacin que no funciona con otros usuarios, como la informacin de inicio de sesin en el servidor remoto y las rutas locales. Dreamweaver guarda cada sitio como un archivo XML, con la extensin de archivo .ste, en la ubicacin especificada.
4.
Seleccione Sitio > Administrar sitios. Aparece el cuadro de dilogo Administrar sitios. Haga clic en el botn Importar. Aparecer el cuadro de dilogo Importar sitio. Vaya hasta el sitio o los sitios que desee importar y seleccinelos (definidos mediante archivos con la extensin de archivo .ste). Para seleccionar varios sitios, presione Control (Windows) o Comando (Macintosh) mientras hace clic en cada uno de los archivos .ste. Para seleccionar un rango de sitios, presione Mays mientras hace clic en el primer archivo y en el ltimo archivo del rango.
2.
3.
4.
Haga clic en Abrir para iniciar la importacin de sitios. Una vez que Dreamweaver importe los sitios, los nombres de los sitios aparecern en el cuadro de dilogo Administrar sitios.
5.
148
Cuando se quita un sitio de la lista, toda su informacin de configuracin se pierde de forma permanente.
Seleccione Sitio > Administrar sitios. Aparece el cuadro de dilogo Administrar sitios. Seleccione el nombre de un sitio. Haga clic en Quitar. Aparece un cuadro de dilogo pidiendo confirmacin. 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. Haga clic en Listo para cerrar el cuadro de dilogo Administrar sitios.
2. 3.
4.
5.
Configuracin del sistema de desproteccin/proteccin en la pgina 150 Utilizacin de WebDAV para desproteger y proteger archivos en la pgina 151 Desproteccin y proteccin de archivos en una carpeta remota en la pgina 153 Cmo deshacer la proteccin de un archivo en la pgina 155
149
Seleccione Sitio > Administrar sitios. Aparece el cuadro de dilogo Administrar sitios. Seleccione un sitio y haga clic en Editar. Aparecer el cuadro de dilogo Definicin del sitio. 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.
2.
3.
4.
N OT A 150
Si no aparecen las opciones de Desproteger/proteger, no ha configurado el servidor remoto (vase Configuracin de una carpeta remota en la pgina 95).
5.
Complete la seccin Desproteger/proteger. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
6.
Desproteccin y proteccin de archivos en una carpeta remota en la pgina 153 Cmo deshacer la proteccin de un archivo en la pgina 155
Si an no lo ha hecho, defina un sitio de Dreamweaver que especifique la carpeta local que debe utilizarse para almacenar los archivos del proyecto. Para ms informacin, consulte Configuracin de una carpeta local en la pgina 93. Seleccione Sitio > Administrar sitios y luego haga doble clic en el sitio deseado en la lista. Aparecer el cuadro de dilogo Definicin del sitio. Si est seleccionada la ficha Bsicas, haga clic en la ficha Avanzadas.
2.
3.
151
4.
Haga clic en la categora Datos remotos y luego seleccione WebDAV del men emergente Acceso.
5.
Especifique cmo debe conectar Dreamweaver con el servidor WebDAV. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Seleccione la opcin Permitir desproteger y proteger archivo e introduzca la siguiente informacin:
6.
En el cuadro de texto Nombre de proteccin, introduzca un nombre que le identifique ante los dems miembros del equipo. En el cuadro de texto Direccin de correo electrnico, introduzca su direccin de correo electrnico.
El nombre y las direcciones de correo electrnico se utilizan para identificar al propietario en el servidor WebDAV y aparece en el panel Archivos como informacin de contacto.
7.
152
Utilice los mtodos de desproteccin y proteccin estndar descritos en la siguiente seccin. Al utilizar el comando Desproteger o Proteger en cualquier archivo de un sitio, Dreamweaver transfiere el archivo empleando WebDAV.
En el panel Archivos (Ventana > Archivos), seleccione los archivos que desea proteger en el servidor remoto.
N OT A
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).
2.
Haga clic en el botn Proteger de la barra de herramientas del panel Archivos. Haga clic con el botn derecho (Windows) o haga clic con la tecla Control presionada (Macintosh) y elija Proteger en el men contextual.
Haga clic en S para descargar los archivos dependientes junto con los archivos seleccionados, o en No si prefiere no descargar dichos archivos.
NO T A
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.
153
Puede seleccionar los archivos en la vista local o remota, pero no en el servidor de prueba.
2.
Haga clic en el botn Desproteger de la barra de herramientas del panel Archivos. Haga clic con el botn derecho (Windows) o haga clic con la tecla Control presionada (Macintosh) y elija Desproteger en el men contextual.
Haga clic en S para descargar los archivos dependientes junto con los archivos seleccionados, o en No si prefiere no descargar dichos archivos.
N OT A
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.
N OT A
2.
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.
N OT A
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.
154
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 133). Temas relacionados Acerca del sistema de desproteccin/proteccin en la pgina 114
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.
Configuracin del sistema de desproteccin/proteccin en la pgina 150 Desproteccin y proteccin de archivos en una carpeta remota en la pgina 153
155
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.
N OT A
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 161).
2.
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.
156
3.
Para descargar archivos dependientes, haga clic en S. Para omitirlos, haga clic en No.
N OT A
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 149). Si no utiliza el sistema de desproteccin/proteccin, al obtener un archivo se transfiere una copia que tiene privilegios de lectura y escritura.
NO TA
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. 2.
Asegrese de que el documento est activo en la ventana de documento. 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.
N OT A
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 obtencin.
Haga clic en el men de opciones situado en la esquina superior derecha del panel Archivos y elija Ver > Registro FTP del sitio.
157
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.
NO TA
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 los archivos. Dreamweaver crea un registro de la actividad de los archivos durante la transferencia. Para visualizar o guardar este registro, consulte Administracin de las transferencias de archivos en la pgina 160. Dreamweaver tambin 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.
N OT A
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 161.
158
2.
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.
N OT A
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.
Para cargar archivos dependientes, haga clic en S. Para omitirlos, haga clic en No.
NO TA
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.
Para colocar archivos en un servidor remoto mediante la ventana de documento:
1. 2.
Asegrese de que el documento est activo en la ventana de documento. 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.
NO T A
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 colocacin.
159
Haga clic en el men de opciones situado en la esquina superior derecha del panel Archivos y elija Ver > Registro FTP del sitio.
Obtencin de archivos de un servidor remoto en la pgina 156 Acerca de las transferencias en segundo plano en la pgina 115
Dreamweaver le permite realizar otras actividades no relacionadas con el servidor durante la transferencia de los archivos en un servidor. Para ms informacin, consulte Acerca de las transferencias en segundo plano en la pgina 115.
Haga clic en el botn Cancelar o cierre el cuadro de dilogo Actividad de archivo en segundo plano.
Para ocultar el cuadro de dilogo Actividad de archivo en segundo plano durante las transferencias:
Haga clic en el botn Ocultar del cuadro de dilogo Actividad de archivo en segundo plano.
Haga clic en el botn Registro situado en la parte inferior del panel Archivos para abrir el cuadro de dilogo Actividad de archivo en segundo plano. Haga clic en la flecha de ampliacin de Detalles.
2.
160
Haga clic en el botn Registro situado en la parte inferior del panel Archivos para abrir el cuadro de dilogo Actividad de archivo en segundo plano. Haga clic en el botn Guardar registro y guarde la informacin como un archivo de texto.
2.
Puede revisar la actividad de los archivos abriendo el archivo de registro en Dreamweaver o en cualquier editor de texto. Temas relacionados Obtencin y colocacin de archivos en el servidor en la pgina 156
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, obtener, eliminar u omitir. 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 la esquina superior derecha del panel Archivos, haga clic en el men Opciones y seleccione Edicin > 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 > Local ms reciente o Seleccionar > Remoto ms reciente.
161
En el panel Archivos (Ventana > Archivos), elija un sitio en el men emergente donde aparece el sitio, el servidor o la unidad actual. Opcional: seleccione archivos o carpetas especficos. Si desea sincronizar el sitio completo, omita este paso. Haga clic en el men de opciones situado en la esquina superior derecha del panel Archivos y elija Sitio > Sincronizar. Aparece el cuadro de dilogo Sincronizar archivos.
2.
3.
4.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en el botn Vista previa. Dreamweaver muestra los archivos que se van a sincronizar y le permite cambiar las acciones (colocar, obtener, eliminar u omitir) para dichos archivos antes de ejecutar la sincronizacin. Si ya estn sincronizados todos los archivos, Dreamweaver le comunica que no es necesario realizar la sincronizacin. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
5.
Temas relacionados Desproteccin y proteccin de archivos en una carpeta remota en la pgina 153
Obtencin de archivos de un servidor remoto en la pgina 156 Colocacin de archivos en un servidor remoto en la pgina 158 Comparacin de archivos para detectar diferencias en la pgina 125
162
Seleccione Sitio > Comprobar vnculos en todo el sitio. Dreamweaver comprueba todos los vnculos del sitio y muestra los que vnculos rotos en el panel Resultados.
2.
Seleccione Archivos hurfanos en el men emergente del panel Verificador de vnculos. Dreamweaver muestra todos los archivos que no tienen vnculos entrantes. Esto significa que ninguno de los archivos del sitio est vinculado a estos archivos.
3.
Seleccione los archivos que desea eliminar y presione la tecla Supr (Windows) o las teclas Comando+Eliminar (Macintosh).
A T E NC I N
Aunque ningn archivo del sitio est vinculado a estos archivos, es posible que algunos de los archivos mostrados s estn vinculados a otros archivos. Tenga cuidado al eliminar archivos.
163
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.
En el panel Archivos (Ventana > Archivos), seleccione un sitio del men emergente donde aparece el sitio, el servidor o la unidad actuales. Seleccione un archivo o carpeta. 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:
2. 3.
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 Acerca de la ocultacin de sitios en la pgina 116
Cmo ocultar y anular la ocultacin de tipos de archivo especficos en la pgina 165 Cmo anular la ocultacin de todas las carpetas y archivos en la pgina 168
164
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. Seleccione las carpetas que desee ocultar, o cuya ocultacin desee anular. 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.
2. 3.
Aparece o desaparece una lnea roja que atraviesa el icono de la carpeta, lo cual indica si la carpeta se encuentra oculta o no.
N OT A
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 Acerca de la ocultacin de sitios en la pgina 116 Activacin y desactivacin de la ocultacin en el sitio en la pgina 164 Cmo anular la ocultacin de todas las carpetas y archivos en la pgina 168
165
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. 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.
2.
3. 4.
Active la casilla de verificacin Ocultar archivos que terminen en. 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.
N OT A
Separe los distintos tipos de archivo con un espacio. No utilice comas ni signos de punto y coma.
5.
166
Los nombres de los archivos afectados aparecen tachados con una lnea roja, que indica que se encuentran ocultos.
S U G E R E N C IA
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.
2.
3.
4.
NO T A
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.
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. Haga clic con el botn derecho del ratn (Windows) o mientras presiona la tecla Control (Macintosh) y seleccione Ocultacin > Configuracin. Aparece la ficha Avanzadas del cuadro de dilogo Definicin del sitio. Siga uno de estos procedimientos: 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.
Haga clic en Aceptar. Las lneas rojas desaparecen de los nombres de los archivos afectados, indicando que ya no se encuentran ocultos.
Activacin y desactivacin de la ocultacin en el sitio en la pgina 164 Cmo ocultar y anular la ocultacin de las carpetas del sitio en la pgina 165
167
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 164).
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. Seleccione cualquier archivo o carpeta de ese sitio. Haga clic con el botn derecho del ratn (Windows) o mientras presiona la tecla Control (Macintosh) y elija Ocultacin > Anular ocultacin de todo.
N OT A
2. 3.
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 Acerca de la ocultacin de sitios en la pgina 116 Activacin y desactivacin de la ocultacin en el sitio en la pgina 164 Cmo ocultar y anular la ocultacin de las carpetas del sitio en la pgina 165 Cmo ocultar y anular la ocultacin de tipos de archivo especficos en la pgina 165
168
Seleccione Sitio > Administrar sitios. Aparece el cuadro de dilogo Administrar sitios. Seleccione un sitio y haga clic en Editar. Aparecer el cuadro de dilogo Definicin del sitio. Seleccione Design Notes en la lista Categora de la izquierda.
2.
3.
169
Aparecer el cuadro de dilogo Definicin del sitio con las opciones de Design Notes.
4.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
5.
Si aade Design Notes a un archivo de plantilla, los documentos creados con dicha plantilla no heredarn las Design Notes.
Abra el archivo en la ventana de documento y seleccione Archivo > Design Notes. En el panel Archivos, haga clic con el botn derecho del ratn (Windows) o haga clic con la tecla Control presionada (Macintosh) en el archivo y, a continuacin, seleccione Design Notes.
N OT A
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 153 o Obtencin y colocacin de archivos en el servidor en la pgina 156).
2.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. 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.
3.
171
Abra el archivo en la ventana de documento y seleccione Archivo > Design Notes. En el panel Archivos, haga clic con el botn derecho del ratn (Windows) o haga clic con la 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.
Abra Design Notes para un archivo u objeto (vase el procedimiento anterior). Haga clic en la ficha Toda la informacin. Haga clic en el botn de signo ms (+). En el campo Nombre, escriba la palabra status. En el campo Valor, introduzca el estado. Si ya existe un valor de estado, ser sustituido por el nuevo. Haga clic en la ficha Informacin bsica y observe que el nuevo valor de estado aparece en el men emergente Estado.
N OT A
6.
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.
Seleccione Sitio > Administrar sitios. Aparece el cuadro de dilogo Administrar sitios. Seleccione el sitio y, a continuacin, haga clic en Editar. Aparecer el cuadro de dilogo Definicin del sitio. Seleccione Design Notes en la lista de categoras de la izquierda.
2.
3.
172
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, Dreamweaver tambin 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.
NO T A
Si desactiva la opcin Mantener Design Notes antes de hacer clic en Limpiar, Dreamweaver eliminar todos los archivos de Design Notes del sitio.
173
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 655). 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 568).
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 409).
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 506 y Reparacin de vnculos rotos en la pgina 509).
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 413). 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 173).
Valide el cdigo para localizar errores en las etiquetas o la sintaxis del cdigo (vase Validacin de etiquetas en la pgina 659).
174
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.
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 95.
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.
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 84).
Para utilizar el comando Informes para comprobar los vnculos del sitio, vase Comprobacin de vnculos rotos, externos y hurfanos en la pgina 506.
175
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.
2.
Seleccione una categora sobre la que se elaborar el informe y el tipo de informe que desea ejecutar. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. 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).
3.
176
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 aparecer en el panel Referencia. Haga doble clic en cualquier lnea del informe para visualizar el cdigo correspondiente en la ventana de documento.
NO T A
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.
S U G E R E N CI A
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 653).
177
178
CAPTULO 5
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.
179
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.
NO TA 180 NO T A
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).
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 201). 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
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. Esta seccin trata sobre los siguientes temas:Temas relacionados Creacin y administracin de una lista de activos favoritos en la pgina 190
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 91.
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.
Utilizacin de activos
181
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.
NO TA
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 190).
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.
En el panel Activos (Ventana > Activos), seleccione la opcin Sitio que hallar en la parte superior del panel.
NO TA
En la categora Plantillas y Biblioteca (situada en la parte izquierda del panel Activos), las opciones Sitio y Favoritos aparecen desactivadas.
182
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.
NO T A
En la categora Plantillas y Biblioteca (situada en la parte izquierda del panel Activos), las opciones Sitio y Favoritos aparecen desactivadas.
Haga clic en el icono correspondiente situado en la parte izquierda del panel Activos (Ventana > Activos).
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.
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.
Arrastre la barra de separacin (entre el rea de vista previa y la lista de activos) hacia arriba o hacia abajo.
Utilizacin de activos
183
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.
En el panel Activos (Ventana > Activos), seleccione la opcin Sitio situada en la parte superior del panel para ver la lista Sitio. Haga clic en el botn Actualizar lista del sitio en la parte inferior del panel Activos. Dreamweaver crea o actualiza la cach del sitio si es preciso y el panel Activos se actualiza para mostrar los activos del sitio.
2.
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.
184
Site el punto de insercin en la vista Diseo donde desea que aparezca el activo. En el panel Activos (Ventana > Activos), seleccione la categora situada en la parte izquierda del panel para el tipo de activo que desee insertar.
NO T A
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 Captulo 11, Administracin de plantillas, en la pgina 331.
3.
Seleccione Sitio o Favoritos en la parte superior del panel y, despus, 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.
4.
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 186
Seleccin y edicin de activos en la pgina 187 Reutilizacin de activos en otro sitio en la pgina 188
Utilizacin de activos
185
Seleccione texto en el documento. En el panel Activos (Ventana > Activos), seleccione la categora Colores situada en la parte izquierda del panel. Seleccione el color deseado. Haga clic en el botn Aplicar del panel.
3. 4.
Seleccin y edicin de activos en la pgina 187 Reutilizacin de activos en otro sitio en la pgina 188
Seleccione el texto o la imagen donde desee aplicar el URL. En el panel Activos (Ventana > Activos), seleccione la categora URL situada en la parte izquierda del panel. Seleccione el URL que desee. Siga uno de estos procedimientos:
3. 4.
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.
186
Aplicacin de color a un texto con el panel Activos en la pgina 186 Reutilizacin de activos en otro sitio en la pgina 188
En el panel Activos (Ventana > Activos), seleccione uno de los activos. 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.
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.
N OT A
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 537.)
2.
Utilizacin de activos
187
3.
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.
N OT A
Para ocultar el selector de color sin elegir un color, presione la tecla Esc.
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.
En el panel Activos (Ventana > Activos), seleccione la categora situada en la parte izquierda del panel para el tipo de activo que desee buscar. 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.
N OT A
2.
La opcin Localizar en sitio no est disponible para colores o URL, pues stos 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.
188
Para copiar activos desde la lista Sitio o Favoritos del panel Activos en otro sitio:
1.
En el panel Activos (Ventana > Activos), seleccione la categora situada en la parte izquierda del panel para el tipo de activo que desee copiar. Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control y haga clic (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.
NO TA
2.
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 193.
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.
N OT A
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 Visualizacin de activos en el panel Activos en la pgina 181 Actualizacin del panel Activos en la pgina 184 Seleccin y edicin de activos en la pgina 187
Utilizacin de activos
189
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.
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.
En el panel Activos (Ventana > Activos), seleccione la categora URL situada en la parte izquierda del panel. Seleccione la opcin Favoritos en la parte superior del panel para que aparezca la lista Favoritos. Haga clic en el botn Nuevo color o Nuevo URL situado en la parte inferior del panel. Siga uno de estos procedimientos:
2.
3. 4.
Seleccione un color en el selector y, si lo desea, asgnele un alias (vase Creacin de un alias para un activo favorito en la pgina 192). 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 394.
Introduzca un URL y un alias en el cuadro de dilogo Aadir nuevo URL y haga clic en Aceptar.
En el panel Activos (Ventana > Activos), seleccione la opcin Favoritos que hallar en la parte superior del panel. Seleccione uno o varios activos (o una carpeta) en la lista Favoritos. 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.
2. 3.
191
En el panel Activos (Ventana > Activos), seleccione la categora que contiene el activo situada en la parte izquierda del panel. Seleccione la opcin Favoritos situada en la parte superior del panel para que aparezca la lista Favoritos. Siga uno de estos procedimientos:
2.
3.
Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en el nombre o el icono del activo del panel Activos y seleccione Editar alias. Haga clic en el nombre del activo, espere y vuelva a hacer clic.
4.
Escriba un alias para el activo y, a continuacin, presione la tecla Intro (Windows) o Retorno (Macintosh). El alias aparecer en la columna Apodo.
192
Al colocar un activo en una carpeta Favoritos no cambia la ubicacin del archivo del activo en el disco.
En el panel Activos (Ventana > Activos), seleccione la opcin Favoritos situada en la parte superior del panel. Haga clic en el botn Nueva carpeta de favoritos situada en la parte inferior del panel. Escriba un nombre para la carpeta y presione la tecla Intro (Windows) o Retorno (Macintosh). Arrastre los activos a la carpeta.
2. 3.
4.
Adicin y eliminacin de activos de la lista Favoritos en la pgina 190 Creacin de un alias para un activo favorito en la pgina 192
193
En la ventana de documento, seleccione una parte de un documento que vaya a guardar como elemento de biblioteca. Siga uno de estos procedimientos:
2.
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.
Compruebe que no hay nada seleccionado en la ventana de documento. Si hay algo seleccionado, se colocar en el nuevo elemento de biblioteca. En el panel Activos (Ventana > Activos), seleccione la categora Biblioteca situada en la parte izquierda del panel. 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. Con el elemento an seleccionado, escrbale un nombre y presione Intro (Windows) o Retorno (Macintosh).
2.
3.
4.
194
Site el punto de insercin en la ventana de documento. En el panel Activos (Ventana > Activos), seleccione la categora Biblioteca situada en la parte izquierda del panel. Siga uno de estos procedimientos:
3.
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.
Edicin de las propiedades de un elemento de biblioteca en la pgina 199 Conversin de elementos de biblioteca en editables en un documento en la pgina 200
195
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.
En el panel Activos (Ventana > Activos), seleccione la categora Biblioteca situada en la parte izquierda del panel. 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.)
2.
3.
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. 5.
Edite el elemento de biblioteca y guarde los cambios. 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.
196
Para actualizar el documento actual para que utilice la versin actual de todos los elementos de biblioteca:
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. En el men emergente Buscar en, siga uno de estos procedimientos:
2.
Seleccione Todo el sitio y, despus, 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.
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 367.
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.
En el panel Activos (Ventana > Activos), seleccione la categora Biblioteca situada en la parte izquierda del panel. Seleccione el elemento de biblioteca al que desee cambiar el nombre, haga una pausa y vuelva a hacer clic.
2.
197
3.
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. 5.
Haga clic en cualquier lugar o presione la tecla Intro (Windows) o Retorno (Macintosh). 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.
En el panel Activos (Ventana > Activos), seleccione la categora Biblioteca situada en la parte izquierda del panel. Seleccione el elemento de biblioteca que desee eliminar. Siga uno de estos procedimientos:
2. 3.
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.
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. 2.
Seleccione una instancia del elemento en uno de los documentos. Haga clic en el botn Volver a crear del inspector de propiedades (Ventana > Propiedades).
Conversin de elementos de biblioteca en editables en un documento en la pgina 200 Edicin de un comportamiento en un elemento de biblioteca en la pgina 201
A TE N CI N 198
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Aparece el cuadro de dilogo Preferencias. Seleccione la categora Resaltando de la lista de la izquierda. 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 394.
2. 3.
4. 5.
Seleccione Mostrar para ver el color de la biblioteca resaltada en la ventana de documento. Haga clic en Aceptar.
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.
Edicin de un elemento de biblioteca en la pgina 196 Edicin de las propiedades de un elemento de biblioteca en la pgina 199
199
Seleccione un elemento de biblioteca en un documento. 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.
Insercin de un elemento de biblioteca en un documento en la pgina 195 Configuracin de preferencias de resaltado de bibliotecas en la pgina 199
Seleccione un elemento de biblioteca en el documento actual. 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.
Insercin de un elemento de biblioteca en un documento en la pgina 195 Edicin de un elemento de biblioteca en la pgina 196 Edicin de las propiedades de un elemento de biblioteca en la pgina 199
200
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 de propiedades (Ventana > Propiedades). Seleccione el elemento que tiene el comportamiento adjunto. En el panel Comportamientos (Ventana > Comportamientos), haga doble clic en la accin que desea cambiar. En el cuadro de dilogo que aparece, realice los cambios necesarios y haga clic en Aceptar. En el panel Activos (Ventana > Activos), seleccione la categora Biblioteca situada en la parte izquierda del panel. 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. 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.
3. 4.
5. 6.
7.
8.
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
En el men emergente Buscar en del cuadro de dilogo Actualizar pginas, seleccione Arch. que usan.
201
12. En
el men emergente que aparece al lado, elija el nombre del elemento de biblioteca que acaba de crear. En la opcin Actualizar, compruebe que est seleccionado Elementos de biblioteca y luego haga clic en Iniciar. de dilogo Actualizar pginas.
13.
14. Cuando haya completado todas las actualizaciones, haga clic en Cerrar para salir del cuadro
Insercin de un elemento de biblioteca en un documento en la pgina 195 Edicin de un elemento de biblioteca en la pgina 196
202
CAPTULO 6
Como administrador del sitio, usted ofrece a los usuarios no administradores la posibilidad de editar pginas creando una clave de conexin y envindosela a dichos usuarios. (Para ms informacin, consulte Utilizacin de Contribute.) Tambin puede configurar una conexin con un sitio de Contribute mediante Macromedia Dreamweaver 8, lo que le permite a usted o a otro usuario modificar los archivos del sitio de la misma forma que lo hara en cualquier otro sitio de Dreamweaver. Esto puede resultar til para personas que deseen conectar con el sitio de Contribute pero deseen hacerlo mediante Dreamweaver en lugar de Contribute. Por ejemplo, el diseador del sitio desear conectar con el sitio de Contribute, pero querr contar con todas las prestaciones de edicin disponibles en Dreamweaver. Contribute aade funcionalidad al sitio Web con Contribute Publishing Server (CPS), una suite de aplicaciones de publicacin y de herramientas de administracin de usuarios que le permite integrar Contribute con el servicio de directorio de usuarios de la organizacin (por ejemplo, con Lightweight Directory Access Protocol -LDAP- o Active Directory). Al activar el sitio de Dreamweaver como sitio de Contribute, Dreamweaver lee la configuracin de administracin de Contribute siempre que conecta con el sitio remoto. Si Dreamweaver detecta que CPS est activado, se comunicar directamente con CPS. Esto permite a Dreamweaver heredar parte de la funcionalidad de CPS, como la recuperacin de versiones anteriores de los archivos y el registro de eventos. Este captulo contiene las secciones siguientes:
203
Administracin de sitios de Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Preparacin de un sitio para su uso con Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Administracin de un sitio Contribute con Dreamweaver . . . . . . . . . . . . . . . . . . . . . .211 Administracin de archivos de Contribute con Dreamweaver . . . . . . . . . . . . . . . . . 213 Solucin de problemas de un sitio de Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
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 214.
204
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.
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.
N OT A
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.
205
Creacin de documentos nuevos en la pgina 102 Utilizacin de hojas de estilos en cascada para aplicar formato al texto en la pgina 444 Utilizacin de server-side includes en la pgina 672
Si se est conectando con el sitio remoto mediante WebDAV o Microsoft Visual 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.
206
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 214. Temas relacionados Desproteccin y proteccin de archivos en la pgina 149 Preparacin de un sitio para su uso con Contribute en la pgina 210
207
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. Las funciones de los usuarios 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 una funcin autorizado a escribir en dicha carpeta (conforme a los permisos de Contribute ). 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, debe 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 214 para averiguar cmo facilitar las plantillas a los usuarios.
El archivo de configuracin compartido, con un nombre complicado con la extensin CSI, 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 214)
208
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.
NO TA
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 Utilizacin de Contribute.
En determinadas circunstancias, puede que tenga que eliminar manualmente 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 215.
209
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:
1.
Seleccione Sitio > Administrar sitios. Aparece el cuadro de dilogo Administrar sitios. Seleccione un sitio y haga clic en Editar. Aparecer el cuadro de dilogo Definicin del sitio. Haga clic en la ficha Avanzadas. Seleccione la categora Contribute de la lista Categora de la izquierda. Seleccione la opcin Activar compatibilidad con Contribute y rellene el cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda. Haga clic en Aceptar para cerrar el cuadro de dilogo Definicin del sitio. Haga clic en Listo para cerrar el cuadro de dilogo Administrar sitios.
2.
3. 4. 5.
6. 7.
Temas relacionados Conexin con el sitio y compatibilidad con Contribute en la pgina 206
210
Como administrador de un sitio de Contribute, puede seguir uno de estos procedimientos: Cambiar la configuracin de administracin de todo el sitio. La configuracin de administracin de Contribute es un conjunto de parmetros que se aplican a todos los usuarios del sitio Web. Dichos parmetros permiten mejorar Contribute para disfrutar de una mejor experiencia de usuario. Cambiar el permiso otorgado a las funciones de usuarios de Contribute. 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.
N OT A S UG E R E N CI A
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 147. 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 204), 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 351).
Seleccione Sitio > Administrar sitios. Aparece el cuadro de dilogo Administrar sitios. Seleccione un sitio y haga clic en Editar. Aparecer el cuadro de dilogo Definicin del sitio. Haga clic en la ficha Avanzadas. Seleccione la categora Contribute de la lista de categoras de la izquierda.
2.
3. 4.
211
5.
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 210.
6.
Si el sistema lo solicita, introduzca la contrasea de administrador y haga clic en Aceptar. Aparecer el cuadro de dilogo Administrar sitio Web. Siga uno de estos procedimientos:
7.
Para cambiar la configuracin de administracin, seleccione una categora de la lista situada a la izquierda y cambie los parmetros que considere necesario. Para cambiar la configuracin de las funciones, en la categora Users and Roles (Usuarios y funciones), haga clic en el botn Edit Role Settings (Editar configuracin de funciones) y, a continuacin, realice los cambios que considere oportunos. Para enviar una clave de conexin para poder configurar usuarios, en la categora Users and Roles (Usuarios y funciones), haga clic en el botn Enviar clave de conexin y siga las instrucciones del Asistente de conexin.
S UG E R E N CI A
Para ms informacin acerca de la configuracin de administracin, la administracin de las funciones de usuario o la creacin de una clave de conexin, consulte Utilizacin de Contribute.
8. 9.
Haga clic en Cerrar para cerrar el cuadro de dilogo Administrar sitio Web. Haga clic en Aceptar para cerrar el cuadro de dilogo Definicin del sitio. clic en Listo para cerrar el cuadro de dilogo Editar sitios.
10. Haga
212
Un administrador de Contribute puede asignar funciones a los usuarios y especificar qu acciones pueden realizar los miembros de cada funcin. Cuando utilice Dreamweaver para administrar archivos en un sitio de Contribute, las restricciones impuestas por las funciones 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 207.
213
Seleccione el archivo en el panel Remoto 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 Activacin de usuarios de Contribute para acceder a las plantillas sin acceder a la carpeta raz en la pgina 214
Activacin de usuarios de Contribute para acceder a las plantillas sin acceder a la carpeta raz
En un sitio de Contribute, los archivos subyacentes y los permisos de las carpetas se administran directamente en el servidor. Para ms informacin, consulte Permisos de Contribute para carpetas y archivos del servidor en la pgina 207. Cuando configure un sitio, debe 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. Tambin es recomendable proporcionar a los usuarios acceso de lectura a la carpeta /Templates del servidor. 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.
214
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. 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. Despus de actualizar las plantillas para el sitio principal, vuelva a copiar las plantillas copiadas en las subcarpetas correspondientes segn sea necesario.
2.
3.
Si adopta este enfoque, no utilice vnculos relativos a la raz del sitio en las subcarpetas. 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 476. 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.
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, permitir que varios usuarios puedan editar el archivo al mismo tiempo.
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 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.
215
CPS est activado al utilizar Contribute. Para ms informacin, consulte Administracin de Contribute.
Active las funciones de compatibilidad con Contribute de Dreamweaver. Para ms informacin, consulte Preparacin de un sitio para su uso con Contribute en la pgina 210.
Para ms informacin sobre la solucin de problemas, consulte dicha seccin en Administracin de Contribute.
216
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. 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. Si el URL es correcto pero el botn Prueba da como resultado un mensaje de error, pida ayuda al administrador del sistema.
2.
3.
En el servidor, asegrese de que dispone de permisos de lectura y escritura para la carpeta _mm, as como los permisos de ejecucin si fueran necesarios. Compruebe que en la carpeta haya un archivo de configuracin compartido cuyo nombre contiene una extensin CSI. Si no est, utilice el Asistente de conexin (Windows o Macintosh) 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 Administracin de Contribute.
2.
3.
Temas relacionados Solucin de problemas de conexin con un sitio de Contribute en la pgina 217
217
218
PARTE 3
Diseo de pginas
Utilice las herramientas de diseo visual de Macromedia Dreamweaver 8 para crear sofisticados diseos de pgina. Esta parte contiene los siguientes captulos:
Captulo 7: Diseo de pginas con CSS . . . . . . . . . . . . . . . . . . . . . 221 Captulo 8: Presentacin de contenido en tablas . . . . . . . . . . . . . 261 Captulo 9: Diseo de pginas en el modo de diseo. . . . . . . . . 287 Captulo 10: Utilizacin de marcos . . . . . . . . . . . . . . . . . . . . . . . . . 309 Captulo 11: Administracin de plantillas . . . . . . . . . . . . . . . . . . . . . 331
219
CAPTULO 7
Dreamweaver trata todas las etiquetas div con posicin absoluta como capas, incluso si dichas etiquetas div no se han creado con la herramienta de dibujo de capas.
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 103).
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.
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 (consulte Presentacin de contenido en tablas en la pgina 261 y Diseo de pginas en el modo de diseo en la pgina 287).
221
Conversin de capas en tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .235 Animacin de capas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .238 Insercin de etiquetas div para el diseo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248 Utilizacin de etiquetas div para el diseo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 Cambio del color de resaltado de las etiquetas div . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 Utilizacin de la visualizacin de diseo CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 Utilizacin de reglas, guas y cuadrculas para disear pginas . . . . . . . . . . . . . . . 254 Utilizacin de una imagen de rastreo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .258
Las capas, tal y como se describen en este captulo, se refieren al concepto de diseo de Dreamweaver, y no a la etiqueta layer.
222
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.
Al dibujar una capa con la herramienta Dibujar capa, Dreamweaver inserta una etiqueta div en el documento y asigna la capa y un valor de ID (de forma predeterminada, Layer1 para la primera capa dibujada, Layer2 para la segunda, etc.). Ms adelante es posible cambiar el nombre de la capa por el que desee mediante el panel Capas o el inspector de propiedades. Dreamweaver tambin utiliza CSS incrustado en el encabezado del documento para colocar la capa y para determinar sus dimensiones exactas. A continuacin se ofrece un ejemplo de cdigo HTML de una capa:
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Sample Layers Page</title> <style type="text/css"> <!-#Layer1 { position:absolute; left:62px; top:67px; width:421px; height:188px; z-index:1; } --> </style> </head> <body> <div id="Layer1"></div> </body> </html>
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 227.
223
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 103).
Al insertar una capa, Dreamweaver muestra el borde de la capa de forma predeterminada y resalta el bloque al desplazar el puntero sobre l. Puede activar los bordes de la capa deshabilitando Contornos de capa y Contornos de diseo CSS en el men Ver > Ayudas visuales. Tambin puede activar los fondos y el modelo de cuadro para las capas como ayuda visual durante el diseo. Para ms informacin, consulte Utilizacin de la visualizacin de diseo CSS en la pgina 251. Para cambiar el color de resaltado de una capa o para desactivar el resaltado, consulte Cambio del color de resaltado de las etiquetas div en la pgina 251. 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. 2.
En la categora Diseo de la barra Insertar, haga clic en el botn Dibujar capa. 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.
224
Site el punto de insercin en la ventana de documento y seleccione Insertar > Objetos de diseo > Capa.
NO T A
Mediante este procedimiento, la etiqueta de la capa se inserta en el lugar seleccionado de la ventana de documento. La representacin visual de la capa puede, por tanto, afectar a otros elementos de la pgina (por ejemplo, al texto).
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 230.
Para mostrar los bordes de la capa:
Seleccione Ver > Ayudas visuales y, a continuacin, elija Contornos de capa o Contornos de diseo CSS.
NO TA
Seleccione Ver > Ayudas visuales y, a continuacin, anule la seleccin de Contornos de capa o Contornos de diseo CSS.
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.
225
Puede activar la opcin Anidacin para anidar automticamente una capa al dibujar una capa dentro de otra capa.
En la categora Diseo de la barra Insertar, haga clic en el botn Dibujar capa. 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.
S U G E R E N CI A
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.
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. 2.
Seleccione Ventana > Capas para abrir el panel Capas. 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. Suelte el botn del ratn cuando se resalte el nombre de la capa de destino.
3.
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 227.
226
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Aparece el cuadro de dilogo Preferencias. Seleccione Capas en la lista Categora de la izquierda. Realice los cambios necesarios. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2. 3.
4.
Temas relacionados Visualizacin y configuracin de propiedades para mltiples capas en la pgina 228
227
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.
Mantenga presionada la tecla Mays mientras selecciona las capas (vase Seleccin de capas en la pgina 230).
Seleccione varias capas. 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. Para ms informacin, haga clic en el botn Ayuda del inspector de propiedades.
228
Administracin de capas
Puede seleccionar capas para trabajar con ellas. Tambin puede cambiar el orden de apilamiento y la visibilidad de las capas. El panel Capas proporciona una forma prctica de administrar las capas.
Las capas se muestran como una lista de nombres siguiendo un orden de ndice z; de forma predeterminada, la primera capa creada (con un ndice zde 1) aparece al final de la lista y la ms reciente (con un ndice z mayor que 1) aparece al principio. No obstante, puede cambiar el ndice z de una capa a layer para cambiar el lugar que ocupa en el orden de apilamiento. Por ejemplo, si ha creado ocho capas y quiere que la cuarta sea la capa superior en el orden de apilamiento, puede asignarle un ndice z mayor que el del resto de las capas. Para ms informacin sobre el panel Capas, consulte los temas siguientes:
Insercin de una capa en la pgina 224 Seleccin de capas en la pgina 230 Cambio del orden de apilamiento de las capas en la pgina 231 Cambio de la visibilidad de una capa en la pgina 232 Cmo evitar el solapamiento de capas en la pgina 236
Administracin de capas
229
Seleccin de capas
Puede seleccionar una o varias capas para manipularlas o cambiar sus propiedades.
Para seleccionar una capa del panel Capas:
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). Haga clic dentro de una capa y presione Control+A (Windows) o Comando+A (Macintosh) para seleccionar el contenido de la capa. Presione Control+A o Comando+A de nuevo para seleccionar la capa. Haga clic dentro de una capa y seleccione la etiqueta en el selector de etiquetas.
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.
Configuracin de preferencias y propiedades de capa en la pgina 227 Administracin de capas en la pgina 229 Manipulacin de capas en la pgina 233
230
Seleccione Ventana > Capas para abrir el panel 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.
Seleccione Ventana > Capas para abrir el panel Capas y ver el orden de apilamiento actual. Seleccione una capa del panel Capas o de la ventana de documento. 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.
Administracin de capas
231
Seleccione Ventana > Capas para abrir el panel Capas. 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).
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.
NO TA
Este procedimiento puede establecer que todas las capas estn visibles u ocultas, pero no que hereden esta propiedad.
232
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 236).
En la vista de diseo, seleccione una capa (vase Seleccin de capas en la pgina 230). 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 una imagen de rastreo en la pgina 258.
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 227.
Manipulacin de capas
233
En la vista de Diseo, seleccione dos o ms capas (vase Seleccin de capas en la pgina 230). Siga uno de estos procedimientos:
2.
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.
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 235
En la vista de diseo, seleccione una o varias capas (vase Seleccin de capas en la pgina 230). Siga uno de estos procedimientos:
2.
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 una imagen de rastreo en la pgina 258.
234
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. 2.
Seleccione la capa en la vista de diseo (vase Seleccin de capas en la pgina 230). Elija Modificar > Organizar 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).
Cmo mover capas en la pgina 234 Utilizacin de una imagen de rastreo en la pgina 258
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.
235
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.
NO TA
La conversin de capas en tablas puede dar lugar a tablas con un gran nmero de celdas vacas.
sta es una nueva tabla de notas. Se adjunta a la etiqueta de prrafo Table_anchor. Para crear una, copie y pegue desde la pgina de referencia.
NO T A Al g u n a s a cc i o n es l e p e r mi t e n s u p er p o n e r c a p a s i n c l u s o c u a n d o e s t a c t i v a d a la o p c i n E v i t a r s o la p a m ie n t o s . S i in s er ta u n a c a p a u t i l iz a n d o e l m en I n s e r t a r , i n t r o d u c e n m e r o s e n e l i n s p e ct o r d e p r o p i ed a d es o ca m b ia l a s c a p a s d e p o s i c i n ed i t a n d o e l c d i g o H T M L , p u e d e p r o v o c a r qu e l a s c a p a s s e so l a p e n o a n i d en m i e n t r a s e st a o p c i n e st a ct iv a d a . S i s e p r o d u c e e l s o l a p a m i e n t o , a r r a s t r e l a s ca p a s s ol a pa d a s e n l a v i st a de D is e o p a r a s ep a r a r l a s.
En el panel Capas (Ventana > Capas), seleccione la opcin Evitar solapamiento. En la ventana Documento, seleccione Modificar > Organizar > Evitar solapamiento de capas.
Seleccione Modificar > Convertir > Capas a tabla. Se mostrar el cuadro de dilogo de convertir capas en tablas. Seleccione las opciones que desee. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. Las capas se convertirn en una tabla.
2.
3.
Seleccione Modificar > Convertir > Tablas en capas. Se mostrar el cuadro de dilogo Convertir tablas a capas. Seleccione las opciones que desee. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. Las tablas se convertirn en capas. Las celdas vacas no se convierten en capas a menos que tengan colores de fondo.
N OT A
2.
3.
Los elementos de la pgina que estaban situados fuera de las tablas tambin se colocarn en capas.
237
Animacin de capas
HTML dinmico (o DHTML) se refiere a la combinacin de HTML con un lenguaje de scripts que permite cambiar las propiedades de estilo y ubicacin de los elementos HTML. En Dreamweaver, las lneas de tiempo utilizan HTML dinmico para cambiar las propiedades de las capas y las imgenes a lo largo del tiempo. Utilice estas lneas para crear animaciones que no requieran ningn control ActiveX, plug-ins o applets de Java (pero s JavaScript).
NO TA 238
La palabra dinmico puede tener significados distintos en diversos contextos relacionados con la Web. no hay que confundir HTML dinmico con la idea de una pgina Web dinmica, esto es, una pgina Web generada dinmicamente por un cdigo en el lado del servidor antes de ser ofrecida al visitante.
Las lneas de tiempo permiten cambiar la posicin, el tamao, la visibilidad y el orden de apilamiento de una capa. (Las funciones de capa de las lneas de tiempo slo funcionan en navegadores de versin 4.0 o posterior.) Las lneas de tiempo tambin son tiles para otras acciones que desee que ocurran tras la carga de la pgina. Por ejemplo, las lneas de tiempo pueden cambiar el archivo de origen de una etiqueta de imagen de tal modo que aparezcan distintas imgenes en la pgina a lo largo del tiempo. Para ver el cdigo JavaScript generado por una lnea de tiempo, abra la vista Cdigo de la ventana de documento. El cdigo de la lnea de tiempo se encuentra en la funcin MM_initTimelines, dentro de una etiqueta de script en la seccin head del documento. Al editar el HTML de un documento con lneas de tiempo, asegrese de no desplazar, cambiar el nombre o eliminar ningn elemento al que la lnea de tiempo hace referencia.
Canal de comportamientos
Canal de animacin
El men desplegable de lnea de tiempo especifica qu lneas de tiempo del documento se visualizan actualmente en el panel Lneas de tiempo. El indicador de reproduccin muestra qu marco de la lnea de tiempo se visualiza actualmente en la ventana de documento. Los nmeros de marco indican la numeracin secuencial de los marcos. El nmero entre los botones de avance y retroceso representa el nmero del marco actual. Es posible controlar la duracin de la animacin definiendo el nmero total de marcos y el nmero de marcos por segundo (fps). La configuracin predeterminada de 15 marcos por segundo representa una buena velocidad media para la mayora de los navegadores que se ejecutan en sistemas Windows y Macintosh normales.
N O TA
A velocidades ms elevadas, el rendimiento no mejora. Los navegadores siempre reproducen cada marco de la animacin, incluso si no logran alcanzar la velocidad especificada. La velocidad de los marcos no se tiene en cuenta si est por encima de la admitida por el navegador.
El men contextual contiene diversos comandos relacionados con la lnea de tiempo. El canal de comportamientos representa el canal de los comportamientos que se deben ejecutar en un marco especfico de la lnea de tiempo.
Animacin de capas
239
Las barras de animacin muestran la duracin de la animacin de cada objeto. Una sola fila puede incluir varias barras que representen a distintos objetos. Las distintas barras no pueden controlar el mismo objeto del mismo marco. Los cuadros clave son marcos de una barra en la que ha especificado propiedades (por ejemplo, la posicin) para el objeto. Dreamweaver calcula valores intermedios para los marcos que se encuentran entre los cuadros clave. Estos cuadros se identifican mediante pequeos crculos. Los canales de animacin muestran barras para las capas y las imgenes animadas.
Opciones de reproduccin
A continuacin se muestran las opciones de reproduccin para visualizar la animacin.
El botn de rebobinado desplaza el indicador de reproduccin hasta el primer marco de la lnea de tiempo. El botn de retroceso desplaza el indicador de reproduccin un marco a la izquierda. Haga clic en el botn de retroceso y mantenga presionado el botn del ratn para reproducir la lnea de tiempo hacia atrs. El botn de reproduccin desplaza el indicador de reproduccin un marco a la derecha. Haga clic en el botn de reproduccin y mantenga presionado el botn del ratn para reproducir la lnea de tiempo hacia delante. La opcin Reprod. autom. hace que la lnea de tiempo comience a reproducirse automticamente cuando la pgina actual se carga en un navegador. Esta opcin adjunta un comportamiento a la etiqueta body de la pgina que ejecuta la accin de reproduccin de la lnea de tiempo cuando se carga la pgina. La opcin Bucle genera un bucle indefinido de la lnea de tiempo actual mientras la pgina est abierta en un navegador. El bucle inserta el comportamiento Ir a fotograma de lnea de tiempo en el canal de comportamientos despus del ltimo fotograma de la animacin. En el canal de comportamientos, haga doble clic en el marcador del comportamiento para editar los parmetros y modificar el nmero de bucles.
240
Desplace la capa hasta el punto en el que deber encontrarse cuando comience la animacin. Seleccione Ventana > Lneas de tiempo. Seleccione la capa que desea animar. Compruebe que ha seleccionado el elemento que desea. Haga clic en el marcador o en el manejador de seleccin de la capa, o bien utilice el panel Capas para seleccionarla. Para ms informacin, consulte Manipulacin de capas en la pgina 233. Cuando se selecciona una capa los manejadores la rodean, tal como se muestra en la siguiente ilustracin.
Haga clic en el manejador de seleccin de la capa para seleccionarla
2. 3.
Al hace clic dentro, la capa coloca un punto de insercin intermitente dentro de la capa, pero no la selecciona.
4.
Seleccione Modificar > Lnea de tiempo > Agregar objeto a lnea de tiempo, o simplemente arrastre la capa seleccionada hasta el panel Lneas de tiempo. Aparecer una barra en el primer canal de la lnea de tiempo. El nombre de la capa aparece en la barra.
Animacin de capas
241
5. 6.
Haga clic en el marcador del cuadro clave al final de la barra. Desplace la capa hasta el punto de la pgina en el que debera encontrarse al final de la animacin. Aparecer una lnea mostrando la ruta de la animacin en la ventana de documento. Si quiere que la capa se desplace en una curva, seleccione la barra de animacin y haga clic mientras presiona la tecla Control (Windows) o haga clic mientras presiona la tecla Comando (Macintosh) en un marco de la mitad de la barra para aadir un cuadro clave en el que ha seleccionado, o bien haga clic en un marco de la mitad de la barra de animacin y seleccione Agregar cuadro clave en el men contextual. Repita este paso para definir cuadros clave adicionales. Presione el botn de reproduccin para obtener una vista previa de la animacin en la pgina. Repita el procedimiento para aadir capas e imgenes adicionales a la lnea de tiempo y para crear una animacin ms compleja.
7.
8.
Seleccione una capa. Desplace la capa hasta el punto en el que deber encontrarse cuando comience la animacin. Compruebe que ha seleccionado la capa; si el punto de insercin se encuentra en la capa, significa que no la ha seleccionado. Para seleccionar una capa, haga clic en el marcador o en el manejador de seleccin de la capa, o bien utilice el panel Capas. Para ms informacin, consulte Manipulacin de capas en la pgina 233.
3. 4. 5.
Seleccione Modificar > Lnea de tiempo > Registrar ruta de capa. Arrastre la capa a la pgina para crear una ruta. Suelte la capa en el punto en que deber detenerse la animacin. Dreamweaver aade una barra de animacin en la lnea de tiempo con el nmero adecuado de cuadros clave.
6.
En el panel Lneas de tiempo, haga clic en el botn de rebobinado y, a continuacin, mantenga presionado el botn de reproduccin para obtener una vista previa de la animacin.
242
Para que una animacin se reproduzca durante ms tiempo, arrastre el marcador del marco final hacia la derecha. Todos los cuadros clave de la animacin cambian para que las posiciones relativas permanezcan constantes. Para evitar que se desplacen otros cuadros clave, seleccione el marcador del marco y arrastre el ratn mientras presiona la tecla Control. Para conseguir que la capa llegue a una posicin del cuadro clave antes o despus, desplace el marcador del cuadro clave a la derecha o a la izquierda en la barra. Para cambiar la hora de inicio de una animacin, seleccione una o varias de las barras asociadas a la animacin (presione la tecla Mays para seleccionar ms de una barra a la vez) y arrstrelas a la derecha o a la izquierda. Para cambiar la ubicacin una ruta completa de animacin, seleccione toda la barra y, a continuacin, arrastre el objeto a la pgina. Dreamweaver ajusta entonces la posicin de todos los cuadros clave. Cualquier cambio realizado en una barra completa seleccionada afecta a todos los cuadros clave. Para aadir o quitar marcos de la lnea de tiempo, seleccione Modificar > Lnea de tiempo > Agregar marco o Modificar > Lnea de tiempo > Quitar marco. Para que la lnea de tiempo se reproduzca automticamente al abrir la pgina en un navegador, seleccione Reprod. autom. Esta opcin adjunta un comportamiento a la pgina que ejecuta la accin de reproduccin de la lnea de tiempo cuando se carga la pgina. Para que la lnea de tiempo se reproduzca constantemente en un bucle, seleccione Bucle. El bucle inserta la accin Ir a fotograma de lnea de tiempo en el canal de comportamientos despus del ltimo fotograma de la animacin. Puede editar los parmetros de este comportamiento para definir el nmero de bucles.
Animacin de capas
243
Seleccione un cuadro clave existente en la barra que controla el objeto que desea modificar. (Los marcos inicial y final siempre son cuadros clave.) Cree un nuevo cuadro clave. Para ello, haga clic en un marco situado en la mitad de la barra de animacin y seleccione Modificar > Lnea de tiempo > Agregar cuadro clave. Tambin se puede crear un cuadro clave nuevo: haga clic con la tecla Control presionada (Windows) o haga clic con la tecla Comando presionada (Macintosh) en un marco de la barra de animacin. Para cambiar el archivo de origen de una imagen, haga clic en el icono de carpeta situado junto al cuadro Src del inspector de propiedades y, despus, seleccione una imagen nueva. Para cambiar la visibilidad de una capa, seleccione inherit, visible o hidden en el men desplegable Vis del inspector de propiedades. Como alternativa, puede utilizar los iconos en forma de ojo del panel Capas. Vase Cambio de la visibilidad de una capa en la pgina 232. Para cambiar el tamao de una capa, arrastre los manejadores de cambio de tamao de la capa o introduzca nuevos valores en los cuadros de texto An (ancho) y Al (alto) del inspector de propiedades. No todos los navegadores son capaces de cambiar dinmicamente el tamao de una capa. Para cambiar el orden de apilamiento de una capa, introduzca un nuevo valor en el cuadro de texto ndice Z o utilice el panel Capas para modificar el orden de apilamiento de la capa actual (consulte Cambio del orden de apilamiento de las capas en la pgina 231).
2.
Para definir las nuevas propiedades del objeto siga uno de estos procedimientos:
3.
244
Para crear una nueva lnea de tiempo, seleccione Modificar > Lnea de tiempo > Agregar lnea de tiempo. Para quitar la lnea de tiempo seleccionada, elija Modificar > Lnea de tiempo > Quitar lnea de tiempo. De esta forma, se eliminan permanentemente todas las animaciones de la lnea de tiempo seleccionada. Para cambiar el nombre de la lnea de tiempo seleccionada, elija Modificar > Lnea de tiempo > Cambiar nombre de lnea de tiempo, o bien escriba un nombre nuevo en el men desplegable que muestra los nombres de las lneas de tiempo en el panel Lneas de tiempo. Para ver una lnea de tiempo distinta en el panel Lneas de tiempo, seleccione una nueva en el men desplegable que muestra los nombres de las lneas de tiempo.
Haga clic en una barra de animacin para seleccionar la secuencia. Para seleccionar varias secuencias, presione la tecla Mays y haga clic en varias barras de animacin; para seleccionar todas las secuencias, presione las teclas Control + A (Windows) o las teclas Comando + A (Macintosh). Copie o corte la seleccin. Siga uno de estos procedimientos:
2. 3.
Desplace el indicador de reproduccin hasta otro lugar de la lnea de tiempo actual. Seleccione otra lnea de tiempo en el men desplegable que muestra las lneas de tiempo. Abra otro documento o cree uno nuevo y, a continuacin, haga clic en el panel Lneas de tiempo.
Animacin de capas 245
4.
Pegue la seleccin en la lnea de tiempo. Las barras de animacin para un mismo objeto no pueden solaparse, ya que una capa no puede estar en dos sitios a la vez (ni una imagen puede tener dos archivos de origen a la vez). Si la barra de animacin que est pegando se solapa con otra para el mismo objeto, Dreamweaver cambia automticamente la seleccin al primer marco que no se solape.
A la hora de pegar secuencias de animacin en otro documento, es preciso tener en cuenta dos principios:
Si se pega una secuencia de animacin para una capa y el nuevo documento contiene una capa con el mismo nombre, Dreamweaver aplica las propiedades de la animacin a la capa existente en el nuevo documento. Si se copia una secuencia de animacin para una capa y el nuevo documento no contiene una capa con el mismo nombre, Dreamweaver pega la capa y su contenido desde el documento original junto con la secuencia de animacin. Para aplicar la secuencia de animacin a otra capa del nuevo documento, elija Cambiar objeto en el men contextual y seleccione el nombre de la segunda capa en el men desplegable. Si lo desea, elimine la capa que ha pegado.
En el panel Lneas de tiempo, seleccione la secuencia de animacin y cpiela. Haga clic en cualquier marco del panel Lneas de tiempo y pegue la secuencia en dicho marco. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en la secuencia de animacin que ha pegado y, a continuacin, elija Cambiar objeto en el men contextual. En el cuadro de dilogo que aparece, seleccione otro objeto en el men desplegable y haga clic en Aceptar. Repita los pasos del 2 al 4 para el resto de objetos que quiera que sigan la misma secuencia de animacin.
3.
4.
5.
Una vez creada la secuencia de animacin, si cambia de opinin, puede cambiar la capa que debe animarse; simplemente siga los pasos 3 y 4 descritos anteriormente (no es necesario copiar y pegar).
246
Seleccione Modificar > Lnea de tiempo > Cambiar nombre de lnea de tiempo. En el cuadro de dilogo que aparece, escriba un nombre nuevo.
Si el documento contiene la accin de comportamiento de reproduccin de lnea de tiempo (por ejemplo, si contiene un botn en el que el visitante debe hacer clic para iniciar la lnea de tiempo), es necesario editar el comportamiento para reflejar el nuevo nombre de la lnea de tiempo.
Muestre y oculte las capas en vez de cambiar el archivo de origen para animaciones con varias imgenes. Al cambiar el archivo de origen de una imagen la animacin puede ralentizarse, ya que es necesario descargar la nueva imagen. No se producirn pausas detectables ni ausencia de imgenes si todas se descargan a la vez en capas ocultas antes de ejecutar la animacin. Ample las barras de animacin para crear un efecto de movimiento ms fluido. Si la animacin se muestra con cortes y las imgenes saltan de posicin a posicin, arrastre el marco final de la barra de animacin de la capa para ampliar el movimiento a ms marcos. Al alargar la barra de animacin, se crean ms puntos de datos entre el punto inicial y final del movimiento y tambin se consigue un desplazamiento ms lento del objeto. Intente aumentar el nmero de marcos por segundo (fps) para mejorar la velocidad, pero tenga en cuenta que la mayora de los navegadores que se ejecutan en sistemas convencionales no son capaces de superar una velocidad de animacin por encima de los 15 fps. Pruebe la animacin en sistemas distintos con navegadores diferentes para conseguir la mejor configuracin. No realice animaciones de mapas de bits de gran tamao. Si lo hace, el resultado sera una animacin muy lenta. Cree elementos compuestos y desplace pequeas partes de la imagen. Por ejemplo, represente el desplazamiento de un coche animando nicamente las ruedas.
Animacin de capas
247
Cree animaciones sencillas. No cree animaciones que requieran ms de lo que los navegadores actuales pueden ofrecer. Los navegadores siempre reproducen cada marco de una animacin de lnea de tiempo, incluso si el rendimiento del sistema o la conexin a Internet disminuyen.
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 103).
En la ventana de documento, site el punto de insercin en el lugar donde desea que aparezca la etiqueta div. Siga uno de estos procedimientos:
2.
Seleccione Insertar > Objetos de diseo > Etiqueta Div. En la categora Diseo de la barra Insertar, haga clic en el botn Etiqueta Div.
3.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. La etiqueta div tendr el aspecto de un cuadro en el documento con texto de marcador de posicin. Al desplazar el puntero sobre el borde del cuadro, Dreamweaver lo resaltar.
4.
248
Si la etiqueta div se sita absolutamente, acta como una capa de Dreamweaver. Para informacin sobre el uso de capas, vase Configuracin de preferencias y propiedades de capa en la pgina 227, Administracin de capas en la pgina 229 o Manipulacin de capas en la pgina 233. Para informacin acerca del trabajo con etiquetas div que no tengan una posicin absoluta, vase Utilizacin de etiquetas div para el diseo en la pgina 249. Temas relacionados Cambio del color de resaltado de las etiquetas div en la pgina 251
Las etiquetas div que tienen una posicin absoluta son capas de Dreamweaver. Para informacin acerca de la utilizacin de estas etiquetas div, omita esta seccin y consulte Configuracin de preferencias y propiedades de capa en la pgina 227, Administracin de capas en la pgina 229 o Manipulacin de capas en la pgina 233.
Las etiquetas div tienen bordes visibles cuando se les asigna un borde o cuando se selecciona Contornos de diseo CSS. (La opcin Contornos de diseo CSS est seleccionada de forma predeterminada en el men Ver > Ayudas visuales.) Cuando el puntero se pasa por encima de una etiqueta div, Dreamweaver la resalta. Para cambiar el color de resaltado o para desactivarlo, vase Cambio del color de resaltado de las etiquetas div en la pgina 251. Cuando se selecciona una etiqueta div, puede ver y editar sus reglas en el panel Estilos CSS. Para aadir contenido a la etiqueta div tambin puede situar el punto de insercin dentro de la etiqueta div y, a continuacin, aadir el contenido como lo hara en una pgina.
249
Haga clic dentro de la etiqueta div y presione las teclas Control + A (Windows) o Comando + A (Macintosh) dos veces. Haga clic en el interior de la etiqueta div y seleccione la etiqueta div del selector de etiquetas en la parte inferior de la ventana de documento.
2.
Seleccione Ventana > Estilos CSS para abrir el panel Estilos CSS si an no est abierto. Las reglas que se aplican a la etiqueta div aparecen en el panel. Lleve a cabo los cambios necesarios.
3.
Para colocar el punto de insercin en una etiqueta div para aadir contenido:
250
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Aparece el cuadro de dilogo Preferencias. Seleccione Resaltando en la lista de categoras de la izquierda. Realice uno de estos cambios:
2. 3.
Para cambiar el color de resaltado de las etiquetas div, 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). Para informacin sobre cmo utilizar el selector de color, vase Utilizacin de colores en la pgina 394.
Para activar o desactivar el resaltado de las etiquetas div, active o desactive la seleccin de la casilla Mostrar correspondiente a Ratn por encima.
N OT A
Estas opciones afectan a todos los objetos, como tablas, que Dreamweaver resalta cuando pasa el puntero del ratn sobre ellos.
4.
Acerca de la visualizacin de diseo CSS en la pgina 252 Visualizacin de bloques de diseo CSS en la pgina 253 Utilizacin de hojas de estilos de tiempo de diseo con bloques de diseo CSS en la pgina 253
Utilizacin de la visualizacin de diseo CSS 251
Una etiqueta div Una imagen que tenga asignada una posicin absoluta o relativa Una etiqueta a que tenga asignado el estilo display:block Un prrafo que tenga asignada una posicin absoluta o relativa
NO TA
Para fines de representacin visual, los bloques de diseo CSS no incluyen elementos en lnea (es decir, elementos cuyo cdigo queda en una lnea de texto) ni elementos de bloques simples como prrafos.
Dreamweaver ofrece una serie de ayudas visuales para visualizar los bloques de diseo CSS. Por ejemplo, puede activar contornos, fondos y el modelo de cuadro para los bloques de diseo CSS mientras realiza el diseo. Tambin puede visualizar informacin sobre herramientas que muestra las propiedades de un bloque de diseo CSS seleccionado cuando pasa el puntero del ratn por encima del bloque de diseo. En la siguiente lista de ayudas visuales para bloques de diseo CSS se describe lo que Dreamweaver representa como visible en cada caso:
Contornos de diseo CSS
pgina.
Fondos de diseo CSS muestra los colores de fondo asignados temporalmente a los distintos bloques de diseo CSS y oculta los dems colores de fondo o imgenes que normalmente aparecen en la pgina.
Al activar las ayudas visuales para ver bloques de diseo CSS, Dreamweaver asigna automticamente a cada bloque de diseo CSS un color de fondo diferenciador. (Dreamweaver selecciona los colores mediante un proceso algortmico, es decir, que no puede asignar los colores que desee.) Los colores asignados se distinguen visualmente y estn pensados para ayudarle a diferenciar entre los bloques de diseo CSS. muestra el modelo de cuadro (es decir, los rellenos y mrgenes) del bloque de diseo CSS seleccionado.
Modelo de cuadro de diseo CSS
252
Seleccione Ver > Ayudas visuales > Modelo de cuadro de diseo CSS.
Para acceder a las opciones de las ayudas visuales de los bloques de diseo CSS, tambin puede hacer clic en el botn de ayudas visuales de la barra de herramientas Documento.
Cree una hoja de estilos CSS externa con Archivo > Nuevo. Seleccione despus Pgina bsica en la columna Categora, CSS en la columna Pgina bsica y haga clic en Crear. En la nueva hoja de estilos, cree reglas que asignen el atributo display:block a los elementos de pgina que desea visualizar como bloques de diseo CSS. Por ejemplo, si quiere visualizar un color de fondo para los prrafos y los elementos de lista, puede crear una hoja de estilos con las reglas siguientes:
p{ display:block; } li{ display:block; }
2.
3.
Guarde el archivo.
253
4. 5. 6.
En la vista Diseo, abra la pgina a la que desea adjuntar los nuevos estilos. Seleccione Texto > Estilos CSS > Tiempo de diseo. En el cuadro de dilogo Hojas de estilos de tiempo de diseo, haga clic en el botn ms (+) situado encima del cuadro de texto Mostrar slo en tiempo de diseo, seleccione la hoja de estilos que acaba de crear y, por ltimo, haga clic en Aceptar. Haga clic en Aceptar para cerrar el cuadro de dilogo. El estilo se adjuntar al documento. Si ha creado una hoja de estilos con el ejemplo anterior, todos los prrafos y los elementos de lista adoptarn el formato del atributo display:block y podr activar y desactivar las ayudas visuales de bloques de diseo CSS para todos ellos.
7.
Utilizacin de reglas
Las reglas ayudan a medir, organizar y planificar el diseo. Pueden aparecer en los bordes izquierdo y superior de la pgina, expresadas en pxeles, pulgadas o centmetros.
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 de 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.
254
Utilizacin de guas
Las guas son lneas que puede arrastrar sobre el documento desde las reglas. Con ellas puede situar y alinear objetos de forma ms precisa. Tambin puede utilizar guas para medir el tamao de los elementos de la pgina o emular los pliegues (reas visibles) de los navegadores Web. Con el fin de ayudarle a alinear elementos, Dreamweaver le permite ajustar elementos a las guas y ajustar guas a los elementos. (Los elementos deben tener posicin absoluta para que funcione la funcin de ajuste.) Tambin puede bloquear las guas para impedir que otro usuario las mueva accidentalmente.
Para crear una gua horizontal o vertical:
1. 2.
Arrastre desde la regla correspondiente. Site la gua en la ventana de documento y suelte el botn del ratn. Puede volver a colocar la gua arrastrndola de nuevo.
N OT A
De manera predeterminada, las guas se registran como medidas absolutas en pxeles desde la parte superior o el lado izquierdo del documento y se muestran como relativas al origen de la regla. Para registrar la gua como porcentaje, presione la tecla Mays mientras crea o mueve la gua.
Puede cambiar el tamao de elementos tales como capas, tablas e imgenes de manera que el tamao de los elementos se ajuste a las guas.
Haga doble clic en la gua. Introduzca la nueva posicin en el cuadro de dilogo Mover gua y haga clic en Aceptar.
255
Presione Control (Windows) o Comando (Macintosh) y pase el puntero del ratn por cualquier lugar situado entre las dos guas.
NO T A
Seleccione Ver > Guas > Editar guas. Seleccione el nuevo color de la gua del men emergente Color de gua y haga clic en Aceptar.
Seleccione Ver > Guas > Editar guas. Seleccione el color en el men emergente Color de distancia y haga clic en Aceptar.
Seleccione Ver > Guas y luego seleccione un tamao de navegador predefinido del men.
256
Utilizacin de la cuadrcula
La cuadrcula muestra una serie de lneas horizontales y verticales en la ventana de documento. Resulta til para colocar objetos con precisin. Puede hacer que los elementos de la pgina con posicin absoluta 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 mostrar u ocultar la cuadrcula:
Seleccione Ver > Cuadrcula> Configuracin de cuadrcula. Aparecer el cuadro de dilogo Configuracin de la cuadrcula.
2.
Seleccione las opciones deseadas. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
3.
257
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. Especifique la transparencia para la imagen arrastrando el control deslizante Transparencia de imagen y, a continuacin, haga clic en Aceptar.
3.
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:
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. 2.
Seleccione Ver > Imagen de rastreo > Ajustar posicin. Siga uno de estos procedimientos:
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.
258
Seleccione Ver > Imagen de rastreo > Restablecer posicin. La imagen de rastreo regresar a la esquina superior izquierda de la ventana de documento (0,0).
Seleccione un elemento de la ventana de documento. 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.
259
260
CAPTULO 8
Tambin puede disear las pginas con el posicionamiento de CSS (vase Captulo 7, Diseo de pginas con CSS, en la pgina 221).
261
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 279). 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 277. Temas relacionados Insercin de una tabla y adicin de contenido en la pgina 264
262
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.
N OT A
Al establecer las propiedades de una columna, Dreamweaver modifica los atributos de la etiqueta td correspondientes a cada celda de la columna.
Tablas
263
En la vista Diseo de la ventana de documento, site el punto de insercin donde desee que aparezca la tabla.
NO T A
Si el documento est en blanco, la nica ubicacin posible ser el principio del mismo.
2.
Seleccione Insertar > Tabla. En la categora Comn de la barra Insertar, haga clic en el botn Tabla.
3.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
4.
264
Temas relacionados Visualizacin y configuracin de las propiedades de tabla, celda, fila y columna en la pgina 271
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.
Seleccione Archivo > Importar > Datos de tabla. Seleccione Insertar > Objetos de tabla > Importar datos de tabla.
265
2.
En el cuadro de dilogo introduzca informacin acerca del archivo que contiene los datos. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
3.
Site el punto de insercin en cualquier celda de la tabla. 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. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Exportar. Aparecer el cuadro de dilogo Exportar tabla. Introduzca un nombre para el archivo. Haga clic en Guardar.
4.
5. 6.
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.
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Aparece el cuadro de dilogo Preferencias. Seleccione Resaltando en la lista de categoras de la izquierda. Realice uno de los siguientes cambios:
2. 3.
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). Para informacin sobre cmo utilizar el selector de color, vase Utilizacin de colores en la pgina 394.
Para activar o desactivar el resaltado de los elementos de la tabla, active o desactive la seleccin de la casilla Mostrar correspondiente a Ratn por encima.
N OT A
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.
4.
Cambio de tamao de tablas, columnas y filas en la pgina 274 Cmo copiar, pegar y eliminar celdas en la pgina 283
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.
NO T A
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.
267
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.
Site el puntero en el borde izquierdo de una fila o en el borde superior de una columna. 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.
Haga clic en la columna. Haga clic en el men de encabezado de columna y, a continuacin, seleccione Seleccionar columna.
268
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 268.
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.
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.
269
2.
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:
270
NO T A
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.
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. Siga uno de estos procedimientos: 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.
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.
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 Captulo 13, Insercin y formato de texto, en la pgina 415.
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 262).
Seleccione una tabla, celda, fila o columna (vase Seleccin de elementos de una tabla en la pgina 266). 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. Cambie las propiedades segn convenga. Para ms informacin, haga clic en el botn Ayuda del inspector de propiedades.
N O TA
2.
3.
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.
271
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 271
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.
Seleccione una tabla (vase Seleccin de una tabla en la pgina 267). Seleccione Comandos > Formatear tabla. Se mostrar el cuadro de dilogo Formatear tabla.
3.
Personalice las opciones como desee. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aplicar o en Aceptar para dar formato a la tabla con el diseo seleccionado.
4.
273
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 279).
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 277.
Para cambiar el tamao de una tabla:
1.
Seleccione la tabla (vase Seleccin de una tabla en la pgina 267). Aparecen manejadores de seleccin en la tabla.
274
2.
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.
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 621.
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 262.
NO T A
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 279).
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.
N OT A
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.
275
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 establecer el ancho de una columna o el alto de una fila utilizando el inspector de propiedades:
1. 2.
Seleccione la columna o fila (vase Seleccin de filas y columnas en la pgina 268). 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. Para ms informacin, haga clic en el botn Ayuda del inspector de propiedades.
S UG E R E N CI A
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.
Cmo borrar los anchos y altos establecidos en la pgina 277 Visualizacin del ancho y los mens de tablas y columnas en la pgina 279
276
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 262.
Para homogeneizar los anchos:
1. 2.
Haga clic en una celda. 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 una tabla en la pgina 274
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.
277
Seleccione la tabla (vase Seleccin de una tabla en la pgina 267). Siga uno de estos procedimientos:
Seleccione Modificar > Tabla > Borrar ancho 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.
Haga clic en la columna. Haga clic en el men del encabezado de columna y, a continuacin, seleccione Borrar ancho de columna.
Cambio de tamao de columnas y filas en la pgina 275 Cmo igualar los anchos de columna del cdigo con los anchos de columna visuales en la pgina 277
278
Seleccione Ver > Ayudas visuales > Anchos de tabla. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en la tabla, y seleccione Tabla > Anchos de tabla.
Si presiona la tecla Tab en la ltima celda de una tabla se aadir automticamente otra fila a la tabla.
279
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.
Haga clic en una celda. Seleccione Modificar > Tabla > Insertar filas o columnas. Aparece el cuadro de dilogo Insertar filas o columnas. Elija Filas o Columnas y, a continuacin, complete el cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
3.
4.
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 268) y, a continuacin, seleccione Edicin > Borrar o presione Supr.
280
Seleccione la tabla (vase Seleccin de una tabla en la pgina 267). 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.
NO TA
Dreamweaver no advertir de que las filas o las columnas que desea eliminar contienen datos.
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.
281
En la siguiente ilustracin, la seleccin no es un rectngulo, por lo que las celdas no se pueden combinar.
2.
Seleccione Modificar > Tabla > Combinar celdas. En el inspector de propiedades ampliado (Ventana > Propiedades), haga clic en el botn Combinar celdas.
N OT A
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. 2.
Seleccione Modificar > Tabla > Dividir celda. En el inspector de propiedades ampliado (Ventana > Propiedades), haga clic en el botn Dividir celda.
NO T A
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 ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
282
Para aumentar o disminuir el nmero de filas o columnas que ocupa una celda:
1. 2.
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.
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.
283
2.
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 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.
NO TA
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.
2.
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.
284
Seleccione la fila o columna. Seleccione Modificar > Tabla > Eliminar fila o Modificar > Tabla > Eliminar columna.
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.
Haga clic en una celda de la tabla. Seleccione Insertar > Tabla. Se mostrar el cuadro de dilogo Tabla. Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. La tabla aparecer en la tabla existente.
3.
4.
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 281.
Ordenacin de tablas
285
Seleccione la tabla (vase Seleccin de una tabla en la pgina 267) o haga clic en cualquiera de las celdas. Seleccione Comandos > Ordenar tabla. Se abre el cuadro de dilogo Ordenar tabla. Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
4.
286
CAPTULO 9
Para ms informacin sobre la utilizacin de tablas en modo estndar, consulte Captulo 8, Presentacin de contenido en tablas, en la pgina 261. 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 etiquetas div para el diseo en la pgina 248).
287
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.
S UG E R E NC I A 288
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 307.) 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 293.)
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 296). 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 292 Dibujo en el modo de diseo en la pgina 293
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 303. 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.
Modo de diseo
289
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 306.
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 303. 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 304.
290
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.
Modo de diseo
291
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 304
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.
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. Siga uno de estos procedimientos:
2.
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.
292
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.
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 292). 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 (+).
2.
293
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.
S U G E R E N C IA
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 307.
Para dibujar una tabla de diseo:
1.
Asegrese que est en el modo de diseo (vase Alternancia entre modo estndar y modo de diseo en la pgina 292). En la categora Diseo de la barra Insertar, haga clic en el botn Dibujar tabla de diseo. El puntero del ratn se convertir en un puntero en cruz (+). Coloque el puntero en la pgina y arrastre para crear la tabla de diseo.
S UG E R E N CI A
2.
3.
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.
294
Puede crear una tabla de diseo en un rea vaca de la 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.
S U G E R E N CI A NO TA
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.
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 296.
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 307.
Para cambiar las preferencias de resaltado de las celdas de diseo:
1.
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Aparece el cuadro de dilogo Preferencias. Seleccione Resaltando en la lista de categoras de la izquierda. Realice uno de estos cambios:
2. 3.
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). Para informacin sobre cmo utilizar el selector de color, vase Utilizacin de colores en la pgina 394.
Para activar o desactivar el resaltado, active o desactive la seleccin de la casilla Mostrar correspondiente a Ratn por encima.
NO T A
Estas opciones afectan a todos los objetos, como tablas y capas, que Dreamweaver resalta cuando pasa el puntero del ratn sobre ellos.
4.
295
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.
Asegrese que est en el modo de diseo (vase Alternancia entre modo estndar y modo de diseo en la pgina 292). En la categora Diseo de la barra Insertar, haga clic en el botn Dibujar tabla de diseo. El puntero del ratn se convertir en un puntero en cruz (+). Seale un rea vaca (gris) en la tabla de diseo existente y, a continuacin, arrastre para crear la tabla de diseo anidada.
NO T A
2.
3.
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.
296
Para dibujar una tabla de diseo alrededor de tablas o celdas de diseo existentes:
1.
Asegrese que est en el modo de diseo (vase Alternancia entre modo estndar y modo de diseo en la pgina 292). En la categora Diseo de la barra Insertar, haga clic en el botn Dibujar tabla de diseo. El puntero del ratn se convertir en un puntero en cruz (+). 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
2.
3.
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.
Site el punto de insercin en la celda de diseo en la que desea aadir texto. Siga uno de estos procedimientos:
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 428.
297
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 303.
Site el punto de insercin en la celda de diseo en la que desea aadir la imagen. Siga uno de estos procedimientos:
Seleccione Insertar > imagen. En la categora Comn de la barra Insertar, haga clic en la flecha del botn Imgenes y seleccione Imagen.
S U G ER E N C I A
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.
Seleccione un archivo de imagen. Para ms informacin, consulte Insercin de una imagen en la pgina 462. Haga clic en Aceptar.
4.
298
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.
Para utilizar la cuadrcula de Dreamweaver como gua para mover o cambiar el tamao de celdas y tablas, vase Utilizacin de una imagen de rastreo en la pgina 258.
299
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. Arrastre un manejador de seleccin para cambiar el tamao de la celda.
2.
Los bordes de la celda se alinean automticamente con los bordes de otras celdas.
Para mover 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. Siga uno de estos procedimientos:
2.
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.
300
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. 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.
2.
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.
NO T A
Puede mover una tabla de diseo slo si est anidada dentro de otra tabla de diseo.
2.
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.
301
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. Abra el inspector de propiedades (Ventana > Propiedades), si an no est abierto.
2.
3.
Para cambiar el formato de la celda establezca las propiedades. Para ms informacin, haga clic en el botn Ayuda del inspector de propiedades.
Seleccione una tabla haciendo clic en la ficha que se encuentra en la parte superior de la tabla. Abra el inspector de propiedades (Ventana > Propiedades), si an no est abierto.
2.
3.
Para cambiar el formato de la tabla establezca las propiedades. Para ms informacin, haga clic en el botn Ayuda del inspector de propiedades.
302
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.
N OT A
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.
303
2.
Si aparece el cuadro de dilogo Elegir imagen de espaciador, seleccione una opcin y haga clic en Aceptar. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
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 306
304
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. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
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 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.
305
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 289.
Para homogeneizar los anchos:
1. 2.
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 303
306
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Aparece el cuadro de dilogo Preferencias. Seleccione Modo de diseo en la lista de categoras de la izquierda. Realice los cambios necesarios. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2. 3.
4.
307
308
CAPTULO 10
Utilizacin de marcos
Los marcos permiten dividir la ventana de un navegador en varias regiones, cada una 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.
N O TA
10
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.
309
310
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.
En este ejemplo, el documento mostrado en el marco superior nunca cambia cuando el visitante explora el sitio. El marco lateral de 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 contenedor que alberga el documento (cualquier marco puede mostrar cualquier documento).
N OT A
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.
311
Temas relacionados Aspectos bsicos de los conjuntos de marcos anidados en la pgina 313
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.
312
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 329). 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.
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 310
313
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.
Conjunto de marcos principal
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 318. 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 310
314
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 316). 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 322). Recuerde que cada marco muestra un documento HTML distinto y que debe guardar cada documento junto con el archivo de conjunto de marcos.
2.
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 324 y Visualizacin y configuracin de las propiedades de un conjunto de marcos en la pgina 326). 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 328).
315
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.
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 abajo del botn Marcos y, a continuacin, seleccione un conjunto de marcos predefinido.
316
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.
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 76).
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. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
N OT A
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 324.
Para crear un conjunto de marcos predefinido vaco:
1. 2. 3.
Seleccione Archivo > Nuevo. En el cuadro de dilogo Nuevo documento, seleccione la categora Conjuntos de marcos. Seleccione un conjunto de marcos de la lista Conjuntos de marcos.
N OT A
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.
Si hace clic en Cancelar, el conjunto de marcos aparece en el documento, pero Dreamweaver no le asocia etiquetas o atributos de accesibilidad.
317
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 76).
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. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
NO TA
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 configuracin de las propiedades y los atributos de los marcos en la pgina 324.
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.
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 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.
318
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.
S U G E R E N CI A
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.
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.
NO TA
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 establecer el tamao aproximado de los marcos, arrastre los bordes del marco en la vista Diseo de la ventana de documento. 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 326).
319
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.
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 324
320
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.
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.
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.
N OT A
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 320.
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 Comandoflecha abajo (Macintosh).
321
Temas relacionados Seleccin de marcos y conjuntos de marcos en el panel Marcos en la pgina 320
Visualizacin y configuracin de las propiedades y los atributos de los marcos en la pgina 324 Visualizacin y configuracin de las propiedades de un conjunto de marcos en la pgina 326
Site el punto de insercin en un marco. Elija Archivo > Abrir en marco. 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. (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.
4.
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.
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 319). Siga uno de estos procedimientos:
2.
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.
323
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.
NO T A 324
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.
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).
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 del marco.
3.
Realice los cambios necesarios. Para ms informacin, haga clic en el botn Ayuda del inspector de propiedades.
S UG E R E N CI A
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.
En el panel Marcos (Ventana > Marcos), seleccione un marco colocando el punto de insercin en uno de los marcos. Seleccione Modificar > Editar etiqueta. Aparece el Quick tag editor. Seleccione Hoja de estilos/Accesibilidad en la lista de categoras de la izquierda. Introduzca los valores que desee. Haga clic en Aceptar.
2.
3. 4. 5.
Abra la vista Cdigo o bien las vistas Cdigo y Diseo de su documento en el caso de que actualmente est en modo Diseo. 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.
2.
325
3.
Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en el cdigo y seleccione Editar etiqueta. Aparece el Quick tag editor. Realice los cambios necesarios. Haga clic en Aceptar.
4. 5.
Site el punto de insercin en el marco. Seleccione Modificar > Propiedades de la pgina. Aparecer el cuadro de dilogo Propiedades de la pgina. Haga clic en el men emergente Color de fondo y seleccione un color. Haga clic en Aceptar.
3. 4.
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).
326
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 de los conjuntos de marcos.
3.
Realice los cambios necesarios. Para ms informacin, haga clic en el botn Ayuda del inspector de propiedades.
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 Creacin de marcos y conjuntos de marcos en la pgina 316
327
En la vista Diseo, seleccione texto o un objeto. 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 _top
abre el documento vinculado en la ventana actual del navegador, eliminando de esta forma todos los marcos.
328
En este men tambin aparecen los nombres de los marcos. Seleccione un marco con nombre para abrir el documento vinculado en el marco seleccionado.
N OT A S UG E R E NC I A
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. 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.
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.
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.
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.
329
3.
Seleccione de nuevo Modificar > Conjunto de marcos > Editar contenido sin marcos para volver a la vista normal del documento de conjunto de marcos.
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 584.)
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 577.)
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 502.) 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 499.)
Insertar men de salto
330
CAPTULO 11
Administracin de plantillas
Una plantilla de Macromedia Dreamweaver 8 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.
N O TA
11
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 Captulo 5, Administracin de activos y bibliotecas, en la pgina 179.
331
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 Creacin de una plantilla de Dreamweaver en la pgina 347
332
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 357. Para informacin sobre cmo crear una tabla de repeticin, vase Insercin de una tabla repetida en la pgina 358. 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 378. 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 361. Para informacin sobre cmo editar regiones opcionales en una pgina basada en plantilla, vase Modificacin de propiedades de plantilla en la pgina 376. 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 364. Para informacin sobre cmo editar las etiquetas de una pgina basada en plantilla, vase Modificacin de propiedades de plantilla en la pgina 376.
Un atributo de etiqueta editable
Creacin de regiones repetidas en la pgina 357 Utilizacin de regiones opcionales en la pgina 360 Definicin de atributos de etiqueta editables en la pgina 363
Plantillas de Dreamweaver
333
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 350.
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 336 Visualizacin de documentos basados en plantilla en la vista Cdigo en la pgina 337
334
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 349).
Las regiones de contenido editable se marcan en HTML mediante los comentarios siguientes:
<!-- TemplateBeginEditable>
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> <!-- TemplateBeginEditable name="LocationList" --> <tr> <td>Enter name</td> <td>Enter Address</td> <td>Enter Telephone</td> </tr> <!-- TemplateEndEditable --> </table>
N OT A
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 334 Visualizacin de documentos basados en plantilla en la vista Cdigo en la pgina 337
Plantillas de Dreamweaver
335
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 350.
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 Diseo en la pgina 334 Visualizacin de plantillas en la vista Cdigo en la pgina 335
336
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"> <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> <!-- InstanceBeginEditable name="LocationList" --> <tr> <td>Enter name</td> <td>Enter Address</td> <td>Enter Telephone</td> </tr> <!-- InstanceEndEditable --> </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 349. Temas relacionados Visualizacin de plantillas en la vista Diseo en la pgina 334
Visualizacin de plantillas en la vista Cdigo en la pgina 335 Visualizacin de documentos basados en plantilla en la vista Diseo en la pgina 336
Plantillas de Dreamweaver
337
Dreamweaver utiliza etiquetas de comentario HTML para definir regiones de plantilla, por lo que los documentos basados en plantillas son archivos HTML vlidos.
Para informacin sobre cmo revisar la sintaxis, vase Comprobacin de la sintaxis de la plantilla en la pgina 370. Temas relacionados Etiquetas de instancia en la pgina 339
Etiquetas de plantilla
Dreamweaver utiliza las etiquetas de plantilla siguientes:
<!-- TemplateBeginEditable name="..." --> <!-- TemplateEndEditable --> <!-- TemplateParam name="..." type="..." value="..." --> <!-- TemplateBeginRepeat name="..." --> <!-- TemplateEndRepeat --> <!-- TemplateBeginIf cond="..." --> <!-- TemplateEndIf -->
338
<!-- TemplateBeginPassthroughIf cond="..." --> <!-- TemplateEndPassthroughIf --> <!-- TemplateBeginMultipleIf --> <!-- TemplateEndMultipleIf --> <!-- TemplateBeginPassthroughMultipleIf --> <!-- TemplateEndPassthroughMultipleIf --> <!-- TemplateBeginIfClause cond="..." --> <!-- TemplateEndIfClause --> <!-- TemplateBeginPassthroughIfClause cond="..." --> <!-- TemplateEndPassthroughIfClause --> <!-- TemplateExpr expr="..." --> (equivalent to @@...@@) <!-- TemplatePassthroughExpr expr="..." --> <!-- TemplateInfo codeOutsideHTMLIsLocked="..." -->
Etiquetas de instancia
Dreamweaver utiliza las etiquetas de instancia siguientes:
<!-<!-<!-<!-<!-<!-<!-<!-<!-InstanceBegin template="..." codeOutsideHTMLIsLocked="..." --> InstanceEnd --> InstanceBeginEditable name="..." --> InstanceEndEditable --> InstanceParam name="..." type="..." value="..." passthrough="..." --> InstanceBeginRepeat name="..." --> InstanceEndRepeat --> InstanceBeginRepeatEntry --> InstanceEndRepeatEntry -->
Plantillas de Dreamweaver
339
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 482.
NO T A 340
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:
Plantillas de Dreamweaver
341
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 365
342
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 Utilizacin de regiones opcionales en la pgina 360
Plantillas de Dreamweaver
343
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 346). Cuando se utiliza una expresin en una declaracin condicional, Dreamweaver la evala como true o false. 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 344. En la vista Cdigo, existen dos maneras de definir las expresiones de plantilla: utilice el comentario <!-- TemplateExpr expr=su expresin--> 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.
literales numricos, literales de cadena (slo sintaxis de comillas dobles), literales booleanos (true o false) referencia de variable (vase la lista de variables definidas ms adelante en esta seccin) referencia de campo (el operador dot) operadores unarios: +, -, ~, ! operadores binarios: +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >> operador condicional: ?: parntesis: ()
344
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 con un capo de cada parmetro.
_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 Nmero total de entradas de esta regin repetida Verdadero si la entrada actual es la primera de su regin repetida 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.
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.
Plantillas de Dreamweaver
345
La declaracin condicional siguiente comprueba el valor asignado al parmetro Dept. Cuando la condicin es verdadera o coincide, se mostrar la imagen apropiada.
<!-- TemplateBeginMultipleIf --> <!-- checks value of Dept and shows appropriate image--> <!-- TemplateBeginClause cond="Dept == 1" --> <img src=".../sales.gif"> <!-- TemplateEndIfClause --> <!-- TemplateBeginIfClause cond="Dept == 2" --> <img src=".../ support.gif"> <!-- TemplateEndIfClause--> <!-- TemplateBeginIfClause cond="Dept == 3" --> <img src=".../hr.gif"> <!-- TemplateEndIfClause --> <!-- TemplateBeginIfClause cond="Dept != 3" --> <img src=".../ spacer.gif"> <!-- TemplateEndIfClause --> <!-- TemplateEndMultipleIf -->
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 376).
346
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 170). Los documentos basados en plantilla no heredan las Design Notes de la 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.
N OT A
Para ms informacin sobre la creacin de un nuevo documento, consulte Creacin de un nuevo documento en blanco en la pgina 102.
347
2.
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.
3.
Seleccione un sitio para guardar la plantilla en el men emergente Sitio y, a continuacin, introduzca un nombre exclusivo para la plantilla en el cuadro de texto Guardar como. Haga clic en Guardar. 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.
N OT A
NO T A
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 si crear una plantilla.
4.
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.
En el panel Activos (Ventana > Activos), seleccione la categora Plantillas situada en la parte izquierda del panel. Aparecer la categora Plantillas del panel Activos. 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.
2.
348
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.
Creacin de plantillas para un sitio de Contribute en la pgina 351 Insercin de una regin editable en la pgina 354
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Aparece el cuadro de dilogo Preferencias. Seleccione Colores de cdigo en la lista de categoras de la izquierda. 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. En la lista Estilos para, seleccione Etiquetas de plantilla. Defina el color, el color de fondo y los atributos de estilo para el texto de la vista Cdigo siguiendo este procedimiento:
2. 3.
4. 5.
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.
6.
349
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Aparece el cuadro de dilogo Preferencias. Seleccione Resaltando en la lista de categoras de la izquierda. 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). Para informacin sobre cmo utilizar el selector de color, vase Utilizacin de colores en la pgina 394.
2. 3.
4. 5.
(Opcional) Repita el proceso con otros tipos de regin de plantilla, segn convenga. Haga clic en la opcin Mostrar para activar o desactivar la visualizacin de colores en la ventana de documento.
N OT A
Regin anidada no tiene una opcin Mostrar. Su visualizacin depende de la opcin Regin editable.
6.
350
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.
NO TA
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 349
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.
351
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 Nueva pgina.
352
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 332.
Para crear una plantilla externa a Dreamweaver:
1.
Seleccione Sitio > Administrar sitios. Aparece el cuadro de dilogo Administrar sitios. Seleccione un sitio y haga clic en Editar. Aparecer el cuadro de dilogo Definicin del sitio. Haga clic en la ficha Avanzadas. Seleccione la categora Contribute de la lista de categoras de la izquierda. 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. Para ms informacin, haga clic en el botn Ayuda.
2.
3. 4. 5.
6. 7.
Haga clic en el botn Administrar sitio en Contribute. Si el sistema lo solicita, introduzca la contrasea de administrador y haga clic en Aceptar. Aparecer el cuadro de dilogo Administrar sitio Web. En la categora Users and Roles (Usuarios y funciones), seleccione una funcin y haga clic en el botn Edit Role Settings (Editar configuracin de funciones). 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 Administracin de Contribute. clic en Aceptar para cerrar el cuadro de dilogo.
8.
9.
Haga clic en Cerrar para cerrar el cuadro de dilogo Administrar sitio Web.
353
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.
354
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. Seleccione Insertar > Objetos de plantilla > Regin editable. Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control y haga 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.
2.
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.)
N OT A
4.
Haga clic en Aceptar. 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.
NO T A
Para informacin sobre la configuracin de las opciones de resaltado de plantilla, vase Configuracin de preferencias de resaltado en regiones de plantillas en la pgina 350.
355
Seleccione Modificar > Plantillas y elija el nombre de la regin en la lista que aparece al final de ese submen.
NO TA
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 350
Insercin de una regin editable en la pgina 354 Cambio del nombre de una regin editable en la pgina 357
Haga clic en la ficha situada en la esquina superior izquierda de la regin editable para seleccionarla. Siga uno de estos procedimientos:
2.
Elija Modificar > Plantillas > Quitar formato de plantilla. Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y seleccione Plantillas > Quitar formato de plantilla.
La regin dejar de ser editable. Temas relacionados Insercin de una regin editable en la pgina 354
356
Haga clic en la ficha situada en la esquina superior izquierda de la regin editable para seleccionarla. En el inspector de propiedades (Ventana > Propiedades), escriba un nuevo nombre. Presione Intro (Windows) o Retorno (Macintosh).
2. 3.
Dreamweaver aplica el nombre nuevo a la regin editable. Temas relacionados Insercin de una regin editable en la pgina 354
357
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. Elija Insertar > Objetos de plantilla > Regin repetida. Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y seleccione Plantillas > Nueva regin repetida. En la categora Comn de la barra Insertar, haga clic en la flecha del botn Plantillas y seleccione Regin repetida.
2.
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.)
NO TA
4.
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 354.
358
En la ventana de documento, site el punto de insercin en el documento donde desea insertar la tabla de repeticin. Siga uno de estos procedimientos:
2.
Seleccione Insertar > Objetos de plantilla > Tabla repetida. En la categora Comn de la barra Insertar, haga clic en la flecha del botn Plantillas y seleccione Tabla repetida.
3.
Introduzca los nuevos valores que desee. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. La tabla repetida aparece en la plantilla.
4.
359
En la ventana de documento, seleccione una fila en la tabla repetida. 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. En la vista Cdigo, edite la etiqueta <tr> para incluir el cdigo siguiente:
<tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">
3.
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:
<table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr> <!-- TemplateBeginRepeat name="contacts" --> <tr bgcolor="@@(_index & 1 ? '#FFFFFF' : '#CCCCCC')@@"> <td> <!-- TemplateBeginEditable name="name" --> name <!-TemplateEndEditable --> </td> <td> <!-- TemplateBeginEditable name="phone" --> phone <!-TemplateEndEditable --> </td> <td> <!-- TemplateBeginEditable name="email" --> email <!-TemplateEndEditable --> </td> </tr> <!-- TemplateEndRepeat --> </table>
360
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.
NO TA
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 376.
En la ventana de documento, seleccione el elemento que desea definir como regin opcional. Siga uno de estos procedimientos:
2.
Elija Insertar > Objetos de plantilla > Regin opcional. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en el contenido seleccionado y, a continuacin, seleccione Plantillas > Nueva regin opcional. En la categora Comn de la barra Insertar, haga clic en la flecha del botn Plantillas y seleccione Regin opcional.
361
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.
4.
En la ventana de documento, coloque el punto de insercin en el lugar en el que desea insertar la regin opcional.
S U G E R E N CI A
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. En la categora Comn de la barra Insertar, haga clic en la flecha del botn Plantillas y seleccione Regin opcional editable.
Introduzca un nombre para la regin opcional y haga clic en la ficha Avanzado si desea definir otras opciones. Para informacin sobre cmo definir una regin opcional, haga clic en el botn Ayuda del cuadro de dilogo.
4.
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 376.
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. Aparecer el cuadro de dilogo Regin opcional. Realice los cambios necesarios. Para informacin sobre una opcin del cuadro de dilogo, haga clic en el botn Ayuda del cuadro de dilogo.
3.
4.
Para modificar los atributos de etiqueta editables en los documentos basados en plantillas, vase Modificacin de propiedades de plantilla en la pgina 376.
363
En la ventana de documento, seleccione un elemento para el que desee definir un atributo de etiqueta editable. Elija Modificar > Plantillas > Hacer editable el atributo. Se abre el cuadro de dilogo Atributos de etiqueta editables. 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.
2.
3.
4.
Haga clic en Aceptar. 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 376).
En el documento de plantilla, haga clic en elemento asociado con el atributo editable o utilice el selector de etiqueta para seleccionar la etiqueta. Elija Modificar > Plantillas > Hacer editable el atributo. Se abre el cuadro de dilogo Atributos de etiqueta editables. En el men emergente Atributos, seleccione el atributo que desea modificar. Desactive la casilla de verificacin Hacer editable el atributo. Haga clic en Aceptar. Actualice los documentos basados en la plantilla.
2.
3. 4. 5. 6.
364
Temas relacionados Especificacin de atributos de etiqueta editables en una plantilla en la pgina 364
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 cual 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.
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 Planillas y, a continuacin, seleccione Crear plantilla anidada.
365
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. Ajuste la regin editable (incluidas las etiquetas de comentario) con los marcadores siguientes:
@@(" ")@@
2.
Para ms informacin, consulte la nota tcnica 16416 del sitio Web de Macromedia en www.macromedia.com/go/16416.
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.
Para informacin sobre la edicin de los documentos basados en plantillas, vase Edicin de contenido de un documento basado en plantilla en la pgina 376.
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 368).
En el panel Activos (Ventana > Activos), seleccione la categora Plantillas situada en la parte izquierda del panel. En el panel Activos se enumeran todas las plantillas disponibles para el sitio y se muestra una vista previa de la plantilla seleccionada.
2.
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.
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.)
4.
Guarde la plantilla. Dreamweaver le pedir que actualice las pginas basadas en la plantilla. 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.
5.
367
Abra el documento basado en la plantilla en la ventana de documento. Siga uno de estos procedimientos:
Seleccione Modificar > Plantillas > Abrir plantilla adjunta. Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y seleccione Plantillas > Abrir plantilla adjunta.
3.
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.)
4.
Guarde la plantilla. Dreamweaver le pedir que actualice las pginas basadas en la plantilla. 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.
5.
Abra el documento en la ventana de documento. Seleccione Modificar > Plantillas > Actualizar pgina actual.
368
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. Complete el cuadro de dilogo y, a continuacin, haga clic en Iniciar. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. 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.
2.
3.
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.
Edite la plantilla con Dreamweaver. Para ms informacin, consulte Apertura de una plantilla para editarla en la pgina 367. Solicite a todos los usuarios de Contribute que estn trabajando en el sitio que salgan de Contribute y vuelvan a iniciarlo.
2.
369
Abra el documento que desea comprobar en la ventana de documento. 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 338
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.
N OT A
Tambin puede utilizar el panel Activos para aplicar una plantilla a un documento (vase Edicin y actualizacin de plantillas en la pgina 366) o editar una plantilla (vase Apertura de una plantilla para editarla en la pgina 367).
En el panel Activos (Ventana > Activos), seleccione la categora Plantillas situada en la parte izquierda del panel. Haga clic en el nombre de la plantilla para seleccionarla. 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.
2. 3.
370
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. 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.
5.
En el panel Activos (Ventana > Activos), seleccione la categora Plantillas situada en la parte izquierda del panel. Haga clic en el nombre de la plantilla para seleccionarla. Haga clic en el botn Eliminar situado en la parte inferior del panel y confirme que desea eliminar la plantilla.
A T E NC I N
2. 3.
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 375. Temas relacionados Creacin de una plantilla de Dreamweaver en la pgina 347
Aplicacin o eliminacin de una plantilla de un documento existente en la pgina 374 Edicin y actualizacin de plantillas en la pgina 366
Administracin de plantillas
371
Abra un documento basado en plantilla que contenga regiones editables. Elija Archivo > Exportar > Datos de plantilla como XML. Se abre el cuadro de dilogo Exportar datos de plantilla como XML. Seleccione una de las opciones de Notacin:
3.
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.
4.
Haga clic en Aceptar. Se abre un cuadro de dilogo para que guarde el archivo XML. 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.
N O TA
5.
372
Elija Archivo > Importar > Importar XML en plantilla. Aparecer el cuadro de dilogo Importar XML. Seleccione el archivo XML y haga clic en Abrir.
2.
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.
S U G E R E N CI A
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.
Elija Modificar > Plantillas > Exportar sin formato. Aparecer el cuadro de dilogo Exportar sitio sin formato de plantilla. Seleccione la carpeta a la que se exportar el sitio y, a continuacin, seleccione las opciones de exportacin adicionales que desee.
N OT A
2.
373
Abra el documento en el que desea aplicar la plantilla. En el panel Activos (Ventana > Activos), seleccione la categora Plantillas situada en la parte izquierda del panel. Siga uno de estos procedimientos:
3.
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 Utilizacin de Dreamweaver.
374
Abra el documento en el que desea aplicar la plantilla. Seleccione Modificar > Plantillas > Aplicar plantilla a pgina. Aparecer el cuadro de dilogo Seleccionar plantilla. 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.
3.
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 Utilizacin de Dreamweaver.
Abra el documento basado en plantilla que desea separar. Seleccione Modificar > Plantillas > Separar de plantilla. El documento se separar de la plantilla y se eliminar todo el cdigo de plantilla.
375
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.
Abra el documento basado en la plantilla. 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.
376
4.
En el campo situado a la derecha de la etiqueta de propiedad, edite el valor para modificar la propiedad en el documento.
NO T A
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.
Abra el documento basado en la plantilla. 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.
NO T A
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.
377
Site el punto de insercin en la regin repetida para seleccionarla. Siga uno de estos procedimientos:
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.
N OT A
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.
378
Site el punto de insercin en la regin repetida para seleccionarla. Siga uno de estos procedimientos:
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.
NO TA
379
380
PARTE 4
381
CAPTULO 12
Utilizacin de pginas
Macromedia Dreamweaver 8 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 le proporciona herramientas para optimizar el rendimiento de su sitio Web y probar y crear las pginas, para asegurar la compatibilidad con distintos navegadores Web. Este captulo contiene las secciones siguientes:
Utilizacin de pginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384 Almacenamiento de pginas Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389 Especificacin HTML en lugar de CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390 Configuracin de propiedades de la pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391 Utilizacin de colores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394 Seleccin de elementos en la ventana de documento. . . . . . . . . . . . . . . . . . . . . 396 Utilizacin de Acercar y Alejar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 Utilizacin del panel Historial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400 Automatizacin de tareas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401 Utilizacin de comportamientos de JavaScript para detectar navegadores y plug-ins. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408 Vista previa y comprobacin de pginas en los navegadores . . . . . . . . . . . . . . 409 Configuracin de las preferencias de tiempo de descarga y tamao . . . . . . . . . 413
12
383
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.
384
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.
N OT A
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
385
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 HTML en lugar de CSS en la pgina 390
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.
Pasos
Control deslizante
Botn Reproducir
El control deslizante, o el pulgar, del panel Historial seala inicialmente el ltimo paso realizado. Temas relacionados Utilizacin del panel Historial en la pgina 400
386
Utilizacin de pginas
387
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 httpequiv="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 391. Para cambiar la codificacin predeterminada que Dreamweaver utiliza para crear documentos nuevos, vase Configuracin de un tipo de documento nuevo predeterminado en la pgina 106. 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 83.
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.
Captulo 12: Utilizacin de pginas
388
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. En el cuadro de texto Nombre de archivo, introduzca un nombre para el archivo. Haga clic en Guardar para guardarlo.
3. 4.
Seleccione Archivo > Guardar todo. 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.
3. 4.
En el cuadro de texto Nombre de archivo, introduzca un nombre para el archivo. Haga clic en Guardar para guardarlo.
389
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.
N OT A
Si desea guardar un documento y, a continuacin, salir de Dreamweaver, no podr volver a la ltima versin de dicho documento al reiniciar Dreamweaver.
Seleccione Edicin > Preferencias. Se mostrar el cuadro de dilogo Preferencias. 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.
2.
3.
390
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. Efecte los cambios oportunos en las propiedades de la pgina. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
Configuracin de estilos de subrayado de vnculos CSS en la pgina 392 Configuracin de una imagen de fondo o un color de fondo de pgina en la pgina 393
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 173.)
391
Seleccione Modificar > Propiedades de la pgina. Seleccione Ver > Barra de herramientas > Documento (si es que no est ya seleccionado). Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control y haga 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). 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.
3.
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. Seleccione la categora Vnculos del cuadro de dilogo Propiedades de la pgina de CSS. En el men emergente Estilo subrayado, seleccione el estilo de vnculo que deseara utilizar como predeterminado en la pgina. Haga clic en Aceptar.
2. 3.
4.
392
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. Seleccione la categora Aspecto del cuadro de dilogo Propiedades de la pgina. 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 Utilizacin de Dreamweaver.)
2. 3.
4.
Para definir un color de fondo, haga clic en el cuadro Color de fondo y seleccione un color del selector de color.
393
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.
2.
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 387. 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.
394
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, Sistema operativo Windows, Sistema operativo Mac, Escala de grises y Ajustar a valores seguros para la Web.
NO TA
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 387.
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.
N O TA
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.
Utilizacin de colores
395
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 397.)
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>.
396
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. Seleccione Ver > 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 601. 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 601.
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.
397
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh) y haga clic en Elementos invisibles. 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, consulte Visualizacin y ocultacin de elementos invisibles en Utilizacin de Dreamweaver.
2.
3.
Seleccione la herramienta Zoom (icono de la lupa) en la esquina inferior derecha de la ventana de documento. Siga uno de estos procedimientos: Haga clic en el punto de la pgina que desea ampliar hasta que haya alcanzado la ampliacin deseada. Arrastre un cuadro sobre el rea de la pgina que desea acercar y suelte el botn del ratn. Seleccione un nivel de ampliacin predefinido del men emergente Zoom. Introduzca un nivel de ampliacin en el cuadro de texto Zoom.
SUGERENCIA
2.
Tambin puede utilizar el zoom sin necesidad de recurrir a la herramienta Zoom: presione Control+= (Windows) o Comando+= (Macintosh).
398
Para alejar:
1. 2.
Seleccione la herramienta Zoom. Presione Alt (Windows) u Opcin (Macintosh) y haga clic en la pgina.
S U G E R E N CI A
Tambin puede alejar el zoom sin necesidad de recurrir a la herramienta Zoom: presione Control+- (Windows) o Comando+- (Macintosh).
Seleccione la herramienta Puntero (icono del puntero) en la esquina inferior derecha de la ventana de documento y haga clic dentro de la pgina.
Seleccione la herramienta Mano (icono de la mano) en la esquina inferior derecha de la ventana de documento. Arrastre la pgina.
2.
399
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.
NO T A
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.
400
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Seleccione General en la lista Categora de la izquierda. 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.
NO T A
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.
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.)
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 sobre el panel Historial, vase Panel Historial en la pgina 386.) Para automatizar una tarea que realiza a menudo, puede crear un nuevo comando que lleve a cabo esa tarea de manera automtica.
Automatizacin de tareas
401
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.
S UG E R E NC I A
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 404 Aplicacin de pasos a varios objetos en la pgina 404 Cmo copiar y pegar pasos entre documentos en la pgina 405 Creacin de comandos nuevos a partir del historial en la pgina 406 Grabacin de comandos en la pgina 407
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 386.)
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.
402
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.
NO TA
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.
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.
Automatizacin de tareas
403
Seleccione el objeto. Seleccione los pasos pertinentes en el panel Historial y, a continuacin, haga clic en Reproducir.
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.
2. 3. 4.
Abra el inspector de propiedades (Ventana > Propiedades), si an no est abierto. Seleccione la primera imagen. En el inspector de propiedades, introduzca nmeros en los cuadros de texto Espacio V y Espacio H para definir el espaciado de la imagen. Haga clic de nuevo en la imagen para activar la ventana de documento sin tener que mover el punto de insercin.
5.
404
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.
N OT A
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.
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.
Automatizacin de tareas
405
Comience desde el documento que contiene los pasos que desea reutilizar. Seleccione los pasos del panel Historial. Haga clic en el botn Copiar pasos del panel Historial para copiar dichos pasos.
N OT A
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. 5. 6.
Abra el otro documento. Coloque el punto de insercin donde desee o seleccione un objeto para aplicarle los pasos. 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 631.
406
Seleccione un paso o un conjunto de pasos en el panel Historial. Haga clic en el botn Guardar como comando o seleccione Guardar como comando en el men contextual del panel Historial. Introduzca un nombre para el comando y haga clic en Aceptar. El comando aparecer en el men Comandos.
NO T A
3.
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.
Seleccione un objeto al que aplicar el comando o coloque el punto de insercin donde desee. Seleccione el comando en el men Comandos.
2.
Seleccione Comandos > Editar lista de comandos. Seleccione un comando para cambiar su nombre e introduzca un nombre nuevo. Haga clic en Cerrar.
Seleccione Comandos > Editar lista de comandos. Seleccione un comando. 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 400.
Automatizacin de tareas
407
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. Cuando termine de grabar, seleccione Comandos > Detener grabacin o presione Control+Mays+X (Windows) o Comando+Mays+X (Macintosh).
2.
Seleccione Comandos > Reproducir comando grabado o presione Control+Mays+R (Windows) o Comando+Mays+R (Macintosh).
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. Seleccione el paso Ejecutar comando y haga clic en el botn Guardar como comando. Introduzca un nombre para el comando y haga clic en Aceptar. El comando aparecer en el men Comandos.
2. 3.
Remite a los visitantes a distintas pginas, dependiendo de si tienen instalado el plug-in especificado (vase Comprobar plug-in en la pgina 570). Por ejemplo, puede resultar conveniente que los visitantes vayan a una pgina si tienen Macromedia Shockwave y a otra distinta si no lo tienen.
408
Vista previa en un navegador en la pgina 409 Configuracin de preferencias de obtencin de vista previa en la pgina 410 Obtencin de la vista previa del contenido activo en Internet Explorer (Windows) en la pgina 412
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.
N OT A
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 (Windows) o las teclas Opcin+F12 (Macintosh) 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.
409
2.
Haga clic en los vnculos y el contenido de prueba de la pgina. En la mayora de los casos, 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. Si utiliza Internet Explorer en un equipo con Windows XP y Service Pack 2 instalado, es posible que el navegador muestre un mensaje para informar sobre la restriccin de visualizacin del contenido activo. Para solucionar este problema puede incluir cdigo Mark of the Web en el archivo. Para ms informacin, consulte Obtencin de la vista previa del contenido activo en Internet Explorer (Windows) en la pgina 412.
NO T A SUGERENCIA
El contenido vinculado a rutas relativas a la raz del sitio no aparece cuando se realiza una vista previa de documentos en un navegador local, a menos que especifique un servidor de prueba o seleccione la opcin Vista previa utilizando el archivo temporal en Edicin > Preferencias > Vista previa en el navegador. Esto es as porque los navegadores no reconocen la raz de los sitios. 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 479).
3.
410
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.
2.
Realice los cambios necesarios. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
3.
411
Con el documento abierto en Dreamweaver, seleccione Comandos > Insertar Mark of the Web. Dreamweaver insertar la siguiente lnea en el cdigo:
<!-- saved from url=(0014)about:internet -->
Esta lnea ordena al navegador que evite el equipo local y que ejecute el contenido activo en Internet. Tambin es posible quitar el cdigo Mark of the Web antes de publicar un archivo.
Para quitar el cdigo Mark of the Web:
1. 2.
En Dreamweaver, abra el documento que contiene el cdigo Mark of the Web. Seleccione Comandos > Quitar Mark of the Web.
Para ms informacin, consulte la nota tcnica 19578 del sitio Web de Macromedia en www.macromedia.com/go/19578.
412
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.
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Aparece el cuadro de dilogo Preferencias. Seleccione Barra de estado en la lista Categora de la izquierda. Aparecern las opciones de preferencias de Barra de estado.
2.
413
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 57.
4.
414
CAPTULO 13
13
Insercin de texto en la pgina 416 Aplicacin de formato al texto en la pgina 416 Aspectos bsicos de las hojas de estilos en cascada en la pgina 418 Reglas CSS en conflicto en la pgina 420 Propiedades de CSS en forma abreviada en la pgina 420 Inspector de propiedades y aplicacin de formato a texto en la pgina 422 Acerca del panel Estilos CSS en la pgina 424
415
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 Microsoft Office. Dreamweaver permite extraer texto de cualquiera de estos tipos de documentos e incorporarlo a una pgina Web. Temas relacionados Insercin de texto en la pgina 428
Adicin de texto a un documento en la pgina 428 Importacin de documentos de datos de tabla en la pgina 429 Importacin de documentos de Microsoft Office (slo Windows) en la pgina 430
416
La utilizacin de CSS es una forma de controlar el estilo de una pgina Web sin implicaciones para su estructura. Al separar los elementos visuales de diseo (fuentes, colores, mrgenes, etc.) de la estructura lgica de una pgina Web, 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. 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 los estilos CSS que cree directamente en el documento (la configuracin predeterminada al aplicar formato al texto empleando el inspector de propiedades) 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 todas las reglas de estilos CSS de una pgina, utilice el panel Estilos CSS (Ventana > Estilos CSS). Para ms informacin sobre la utilizacin del inspector de propiedades de texto para aplicar HTML o CSS, consulte Configuracin de opciones de propiedades de texto. Para ms informacin sobre cmo utilizar el panel CSS para aplicar CSS, consulte Utilizacin del panel Estilos CSS.
NO T A
Puede combinar formato CSS y HTML 3.2 en la misma pgina. La aplicacin de formato se realiza de forma jerrquica: el formato HTML 3.2 tiene prioridad sobre el formato aplicado mediante hojas de estilo CSS externas y el estilo CSS incrustado en un documento tiene prioridad sobre el estilo CSS externo. Para ms informacin, consulte Utilizacin de hojas de estilos en cascada para aplicar formato al texto en la pgina 444.
Temas relacionados Insercin de texto en la pgina 428 Aplicacin de formato al texto en la pgina 436
417
La declaracin, a su vez, consta de dos partes: la propiedad (por ejemplo, font-family) y el valor (por ejemplo, Helvetica). En la regla CSS anterior, se ha creado un estilo concreto para las etiquetas H1: el texto de todas las etiquetas H1 vinculadas a este estilo tendr un tamao de 16 pxeles, fuente Helvetica y negrita. La expresin en cascada hace referencia a la posibilidad de aplicar varios estilos a un mismo elemento. Por ejemplo, puede crear una regla CSS que aplique color y otra que aplique los mrgenes y aplicarlas las dos al mismo texto de la pgina. Los estilos definidos se distribuyen en cascada hacia los elementos de la pgina Web, lo que le permite obtener finalmente el diseo deseado.
418
Una de las grandes ventajas de las CSS reside en que pueden actualizarse fcilmente; cuando actualiza una regla CSS en un sitio, el formato de todos los documentos que usan ese estilo se actualiza automticamente con el nuevo estilo. Puede definir los siguientes tipos de estilos en Dreamweaver:
Las reglas CSS personalizadas, tambin llamadas estilos de clase, permiten aplicar atributos de estilo a cualquier rango o bloque de texto. (Vase Aplicacin de un estilo de clase en la pgina 449.) 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 (estilos avanzados) redefinen el formato de una determinada combinacin de elementos o de otros selectores permitidos por el CSS (por ejemplo, el selector td h2 se aplica siempre que aparece un encabezado h2 dentro de la celda de una tabla). Los estilos avanzados tambin redefinen el formato de las etiquetas que contienen un atributo id especfico (por ejemplo, los estilos definidos por #miEstilo se aplican a todas las etiquetas que contienen el par atributo-valor id="miEstilo").
Las reglas CSS pueden residir en las ubicaciones siguientes: Las hojas de estilos CSS externas son conjuntos de reglas CSS almacenados en un archivo CSS (.css) independiente 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 reglas 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. Dreamweaver reconoce los estilos definidos en documentos existentes siempre que se ajusten a las directrices de los estilos CSS.
S UG E R E N CI A
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 CSS. Para que las reglas CSS controlen el formato de un prrafo, deber quitar todo el formato HTML aplicado manualmente.
419
Dreamweaver representa la mayora de atributos de estilo aplicados directamente en la ventana de documento. Tambin puede obtener una vista previa del documento en la ventana del navegador para comprobar los estilos aplicados. Algunos atributos de estilo CSS se representan de forma distinta en Microsoft Internet Explorer, Netscape, Opera y Apple Safari, y otros no son compatibles actualmente con ningn navegador.
Si se aplican dos reglas al mismo texto, el navegador muestra todos los atributos de ambas reglas a menos que entren en conflicto. Por ejemplo, una regla puede especificar azul como color de texto y la otra regla puede especificar rojo. Si los atributos de dos reglas aplicadas al mismo texto entran en conflicto, el navegador mostrar el atributo de la regla ms interna (la ms prxima al texto). De este modo, si un elemento del texto se ve afectado por una hoja de estilos externa y un estilo en lnea, se aplica este ltimo. Si hay un conflicto directo, los atributos de reglas CSS personalizadas (reglas aplicadas 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 la regla CSS personalizada .Blue aplicada a este prrafo prevalece sobre la configuracin de color del estilo h1. La segunda regla CSS personalizada .Red prevalece sobre .Blue porque se encuentra dentro del estilo .Blue.
<h1><span class="Blue">This paragraph is controlled by the .Blue custom style and h1 HTML tag style.<span class="Red">Except this sentence is controlled by the .Red style.</span> Now we're back to the .Blue style.</span></h1>
420
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 reglas CSS asignadas 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 fontstyle 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-style, font-stretch y font-size-adjust. 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 as propiedades que estn definidas explcitamente en otras ubicaciones.
421
Por este motivo, Dreamweaver utiliza la notacin CSS no abreviada de forma predeterminada. Con ello se evitan posibles problemas causados por una regla de notacin abreviada que tenga prioridad sobre una regla con formato no abreviado. Si abre una pgina Web codificada con notacin CSS abreviada en Dreamweaver, tenga en cuenta que Dreamweaver crear las nuevas reglas CSS en formato no abreviado. Puede especificar el modo en que Dreamweaver crea y edita las reglas 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).
NO T A
El panel Estilos CSS crea reglas empleando la notacin no abreviada. Si crea una pgina o una hoja de estilos CSS mediante el panel Estilos CSS, tenga en cuenta que la codificacin manual de reglas 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.
Temas relacionados Reglas CSS en conflicto en la pgina 420 Acerca del panel Estilos CSS en la pgina 424
422
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.
Configuracin y modificacin de fuentes y estilos en la pgina 437 Cambio del nombre de un estilo en la pgina 439 Utilizacin de hojas de estilos en cascada para aplicar formato al texto en la pgina 444
423
Puede cambiar el tamao de cualquiera de los paneles arrastrando los bordes que los separan. El resumen del panel Seleccin muestra un resumen de propiedades CSS del elemento actualmente seleccionado en el documento activo. El resumen muestra las propiedades de todas las reglas que afectan directamente a la seleccin. Slo se muestran las propiedades establecidas.
424
Por ejemplo, las siguientes reglas crean un estilo de clase y un estilo de etiqueta (en este caso de prrafo):
.foo{ color: green; font-family: Arial; } P{ font-family: serif; font-size: 12px; }
Al seleccionar texto de un prrafo con el estilo de clase .foo en la ventana de documento, el resumen del panel Seleccin muestra las propiedades correspondientes para ambas reglas, dado que ambas reglas afectan a la seleccin. En este caso, el resumen del panel Seleccin mostrara las propiedades siguientes:
font-size: 12px font-family: Arial color: green
El resumen del panel Seleccin organiza las propiedades por orden creciente de especificidad. En el ejemplo anterior, el estilo de etiqueta define el tamao de fuente y el estilo de clase define la familia de fuentes y el color. (La familia de fuentes definida por el estilo de clase tiene prioridad sobre la familia de fuentes definida por el estilo de etiqueta porque los selectores de clase tienen mayor especificidad que los selectores de etiquetas. Para ms informacin sobre la especificidad de CSS, consulte www.w3.org/TR/CSS2/cascade.html) El panel Reglas muestra dos vistas distintas (vista Acerca de o vista Reglas) en funcin de la seleccin realizada. En la vista Acerca de (la vista predeterminada), el panel muestra el nombre de la regla que define la propiedad CSS seleccionada y la ubicacin del archivo que contiene la regla. En la vista Reglas, el panel muestra una cascada o jerarqua de reglas que afectan, directa o indirectamente, a la seleccin actual. (La etiqueta a la que se aplica la regla directamente aparece en la columna de la derecha.) Puede cambiar entre las dos vistas haciendo clic en los botones Mostrar informacin y Mostrar reglas en cascada en la esquina superior derecha del panel Reglas.
425
Al seleccionar una propiedad del resumen del panel Seleccin, todas las propiedades de la regla de definicin aparecen en el panel Propiedades. (La regla de definicin tambin se selecciona en el panel Reglas y la vista Reglas est activada.) Por ejemplo, si tiene una regla denominada .maintext que define una familia de fuentes, un tamao de fuente y un color, la seleccin de cualquiera de las propiedades del resumen del panel Seleccin mostrar todas las propiedades definidas por la regla .maintext en el panel Propiedades, as como la regla .maintext seleccionada en el panel Reglas. (Adems, la seleccin de cualquier regla del panel Reglas muestra las propiedades de dicha regla en el panel Propiedades.) Posteriormente podr utilizar el panel Propiedades para modificar rpidamente la CSS tanto si est incrustada en el documento actual como si est vinculada a travs de una hoja de estilos adjunta. De manera predeterminada, el panel Propiedades slo muestra las propiedades que se han establecido anteriormente y las ordena por orden alfabtico. Puede optar por mostrar el panel Propiedades en otras dos vistas. La vista de categora muestra las propiedades agrupadas en categoras, como son Fuente, Fondo, Bloque, Borde, etc., con las propiedades situadas en la parte superior de cada categora y mostradas en texto azul. La vista de lista muestra una lista alfabtica de todas las propiedades y tambin sita las propiedades establecidas en la parte superior con texto azul. Para cambiar entre estas vistas, haga clic en los botones Mostrar vista de categora, Mostrar vista de lista o Show only set properties (Mostrar slo propiedades establecidas), situados en la parte inferior izquierda del panel Propiedades. En todas las vistas, las propiedades establecidas aparecen en color azul; las propiedades que no son pertinentes 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. Todos los cambios que realice en el panel Propiedades se aplican de forma inmediata; de este modo, puede previsualizar el trabajo a medida que lo vaya llevando a cabo. Temas relacionados El panel Estilos CSS en modo Todo en la pgina 427 Utilizacin del panel Estilos CSS en la pgina 445
426
Puede cambiar el tamao de cada panel arrastrando el borde que los separa. Al seleccionar una regla del panel Todas las reglas, aparecen todas las propiedades que se definen en dicha regla, en el panel Propiedades. Posteriormente podr utilizar el panel Propiedades para modificar rpidamente la CSS tanto si est incrustada en el documento actual como si est vinculada a travs de una hoja de estilos adjunta. De manera predeterminada, el panel Propiedades slo muestra las propiedades que se han establecido anteriormente y las ordena por orden alfabtico. Puede optar por mostrar las propiedades en otras dos vistas. La vista de categora muestra las propiedades agrupadas en categoras, como son Fuente, Fondo, Bloque, Borde, etc., con las propiedades situadas en la parte superior de cada categora. La vista de lista muestra una lista alfabtica de todas las propiedades y tambin sita las propiedades establecidas en la parte superior. Para cambiar entre estas vistas, haga clic en los botones Mostrar vista de categora, Mostrar vista de lista o Show only set properties (Mostrar slo propiedades establecidas), situados en la parte inferior izquierda del panel Propiedades. En todas las vistas, las propiedades establecidas se muestran en color azul. Todos los cambios que realice en el panel Propiedades se aplican de forma inmediata; de este modo, puede previsualizar el trabajo a medida que lo vaya llevando a cabo.
427
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.
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 o Edicin > Pegado especial. Al seleccionar Edicin > Pegado especial, aparece un cuadro de dilogo que ofrece diversas opciones de formato al pegar. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
428
Tambin puede pegar texto utilizando los siguientes mtodos abreviados de teclado:
Opcin de pegado
Pegar Pegado especial
Seleccione Edicin > Preferencias (Windows) o Preferencias de Dreamweaver (Macintosh). Haga clic en la categora Copiar/Pegar. Rellene el cuadro de dilogo y haga clic en Aceptar. Para ms informacin, haga clic en el botn Ayuda.
N OT A
Control+V (Windows) y Comando+V (Macintosh) siempre pegan slo texto (sin formato) en la vista Cdigo.
Las preferencias establecidas en la seccin Copiar/Pegar del cuadro de dilogo Preferencias slo afectan a aquello que se pegue en la vista Diseo.
Insercin de texto
429
Tambin puede aadir texto de documentos de Microsoft Excel a un documento de Dreamweaver importando el contenido del archivo de Excel en una pgina Web (vase Importacin de documentos de Microsoft Office (slo Windows) en la pgina 430).
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. Localice el archivo deseado o introduzca su nombre en el cuadro de texto. 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.
2. 3.
4.
Utilice las restantes opciones para aplicar formato o definir la tabla en la que se importarn los datos. Haga clic en Aceptar.
5.
En lugar de importar todo el contenido de un archivo, tambin es posible pegar fragmentos de un documento de Word y conservar el formato. Para ms informacin, consulte Adicin de texto a un documento en la pgina 428.
Si utiliza Microsoft Office 97, no podr importar 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 432.
Para insertar un documento de Word o de Excel en una pgina Web nueva o existente:
1. 2.
Abra la pgina Web en la que desea insertar el documento de Word o Excel. Asegrese de que est en la vista Diseo. Si no est en esta vista, haga clic en el botn de vista Diseo. Siga uno de estos procedimientos para seleccionar el archivo:
3.
Arrastre el archivo desde su ubicacin actual a la pgina en la que desea que aparezca el contenido. Cuando aparezca el cuadro de dilogo Insert Document (Insertar documento), establezca las opciones y haga clic en Aceptar. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Seleccione Archivo > Importar > Documento de Word, o bien Archivo > Importar > Documento de Excel. En el cuadro de dilogo Importar documento, vaya al archivo que desea aadir, seleccione las opciones de formato en la parte inferior del cuadro de dilogo y luego haga clic en Abrir. Las opciones de formato son las siguientes:
Slo texto permite insertar texto sin formato. Si el texto original tiene formato, se eliminar todo el formato. Texto con estructura permite insertar texto que conserve su estructura pero no el formato bsico. Por ejemplo, puede pegar texto y conservar la estructura de los prrafos, listas y tablas sin conservar negritas, cursivas u otras caractersticas de formato.
permite insertar texto con formato HTML estructurado y simple (por ejemplo, prrafos y tablas, as como etiquetas b, i, u, strong, em, hr, abbr o acronym).
Texto con estructura y formato bsico Texto con estructura y formato completo permite insertar texto que conserva toda la estructura, el formato HTML y los estilos CSS. Limpiar espaciado de prrafo de Word
permite eliminar espacios adicionales entre prrafos al pegar el texto si seleccion la opcin Texto con estructura o Formato bsico.
Insercin de texto
431
Abra la pgina en la que desea que aparezca el vnculo. Arrastre el archivo desde su ubicacin actual a la pgina Web de Dreamweaver e inserte el vnculo en el lugar que desea que aparezca. Se mostrar el cuadro de dilogo Insert Document (Insertar documento). Seleccione Crear un vnculo y, a continuacin, haga clic en Aceptar. 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.
3. 4.
5.
Cuando cargue la pgina en el servidor Web, asegrese de cargar tambin el archivo de Word o Excel.
La pgina contiene ahora un vnculo al documento de Word o Excel. El texto del vnculo es el nombre del archivo vinculado; para modificar el texto del vnculo, consulte Administracin de vnculos en la pgina 494.
Alineacin de texto en la pgina 433 Aplicar Sangra al Texto en la pgina 434 Adicin de espaciado de prrafo en la pgina 434 Utilizacin de reglas horizontales en la pgina 435 Insercin de fechas en la pgina 442
432
Site el punto de insercin en el prrafo o seleccione parte del texto del prrafo. 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. Haga clic en una opcin de alineacin (Izquierda, Derecha o Centro) en el inspector de propiedades, o seleccione Texto > Alinear y seleccione un comando.
2.
Seleccione el elemento que desea centrar (imagen, plug-in, tabla u otro elemento de pgina). Seleccione Texto > Alinear > Centro.
N OT A
2.
Se pueden alinear y centrar bloques completos de texto, pero no partes de un encabezado o de un prrafo.
433
Site el punto de insercin en el prrafo al que desea aplicar sangra. Haga clic en el botn para aplicar 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.
N OT A
Puede aplicar varias sangras a un prrafo. Cada vez que seleccione este comando, la sangra del texto aumenta a ambos lados del documento.
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.
434
En la ventana de documento, site el punto de insercin en el lugar donde desea insertar una regla horizontal. Siga uno de estos procedimientos:
2.
Seleccione Insertar > HTML > Regla horizontal. En la categora HTML de la barra Insertar, haga clic en el botn Regla horizontal.
En la ventana de documento, seleccione la regla horizontal. 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. 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. si la regla debe trazarse con sombreado. Desactive esta opcin para trazar la regla con un color slido.
Alinear
Sombreado especifica
435
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.
Escriba el texto del elemento de la lista y presione Intro (Windows) o Retorno (Macintosh) para crear otro elemento de la lista. Para terminar la lista, presione dos veces Intro (Windows) o Retorno (Macintosh).
3.
Seleccione una serie de prrafos para convertirlos en una lista. 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.
Seleccione los elementos de lista que desea anidar. Haga clic en el botn para aplicar sangra del inspector de propiedades o elija Texto > Sangra. Dreamweaver aplicar sangra al 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.
Cambio del color del texto en la pgina 441 Insercin de fechas en la pgina 442 Insercin de caracteres especiales en la pgina 443 Adicin de espacio entre caracteres en la pgina 444
436
Seleccione el texto. Si no hay texto seleccionado, el cambio se aplicar al texto que escriba a continuacin. Elija entre las opciones siguientes:
2.
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.
NO T A
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).
437
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 hojas de estilos en cascada para aplicar formato al texto en la pgina 444.
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.
N OT A
Estos nmeros indican una diferencia relativa respecto al tamao de la fuente base. El valor predeterminado de fuente base 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.
438
Seleccione Cambiar nombre en el men emergente Estilo del inspector de propiedades de texto. Aparecer el cuadro de dilogo Cambiar nombre de estilo. Seleccione el estilo cuyo nombre desee cambiar en el men emergente Cambiar nombre de estilo. Introduzca un nombre nuevo en el campo de texto Nuevo nombre. Haga clic en Aceptar.
2.
3. 4.
Seleccione Texto > Fuente > Editar lista de fuentes. 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.
439
3.
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.
Seleccione Texto > Fuente > Editar lista de fuentes. 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. 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 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.
3.
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. 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.
440
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 inspector de propiedades. Para definir el color predeterminado del texto, utilice el comando Modificar > Propiedades de la pgina (vaseDefinicin de colores predeterminados de texto en la pgina 395).
En el inspector de propiedades, haga clic en el cuadro de color para abrir la paleta de colores seguros para la Web. Haga clic en el botn Tachado (el botn cuadrado blanco y atravesado por una lnea roja que se encuentra en la esquina superior derecha).
2.
441
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.
NO TA
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.
En la ventana de documento, site el punto de insercin en el lugar donde desea insertar la fecha. Siga uno de estos procedimientos:
2.
Seleccione Insertar > Fecha. En la categora Comn de la barra Insertar, haga clic en el icono Fecha.
3. 4.
En el cuadro de dilogo que aparece, seleccione el formato de da de la semana, fecha y hora. 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. Haga clic en Aceptar para insertar la fecha.
S U G E R E N CI A
5.
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.
442
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. Siga uno de estos procedimientos:
2.
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.
S UG E R E N CI A
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.
443
En la categora Texto 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).
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). En la categora General, asegrese de que se ha seleccionado la opcin Permitir mltiples espacios consecutivos.
444
Seleccione Ventana > Estilos CSS. Presione Mays+F11. Haga clic en el botn CSS del inspector de propiedades.
Para editar una regla en el panel Estilos CSS (modo Current -Actual-):
1. 2.
Haga clic en el botn Actual situado en la parte superior del panel Estilos CSS. Seleccione un elemento del texto de la pgina actual para visualizar las propiedades del mismo. Siga uno de estos procedimientos: Haga doble clic en una propiedad del resumen del panel Seleccin para mostrar el cuadro de dilogo de definicin de reglas CSS y realice los cambios deseados. Seleccione una propiedad del resumen del panel Seleccin y edite la propiedad en el panel Propiedades situado debajo. Seleccione una regla del panel Reglas y, seguidamente, edite las propiedades de la regla en el panel Propiedades situado debajo.
N OT A
3.
Puede cambiar el comportamiento del doble clic para la edicin de CSS, adems de otros comportamientos, cambiando las preferencias de Dreamweaver. Para ms informacin, consulte Configuracin de preferencias de estilos CSS.
Para editar una regla en el panel Estilos CSS (modo All -Todo-):
1. 2.
Haga clic en el botn Todo situado en la parte superior del panel Estilos CSS. Siga uno de estos procedimientos: Haga doble clic en una regla del panel Todas las reglas para mostrar el cuadro de dilogo de definicin de reglas CSS y realice los cambios deseados. Seleccione una regla del panel Todas las reglas y, seguidamente, edite las propiedades de la regla en el panel Propiedades situado debajo.
445
Seleccione una regla del panel Todas las reglas y luego haga clic en el botn Editar estilo, situado en la esquina inferior derecha del panel Estilos CSS.
N OT A
Puede cambiar el comportamiento del doble clic para la edicin de CSS, adems de otros comportamientos, cambiando las preferencias de Dreamweaver. Para ms informacin, consulte Configuracin de preferencias de estilos CSS.
Seleccione una regla del panel Todas las reglas (modo All -Todo-) o seleccione una propiedad del resumen del panel Seleccin (modo Current -Actual-). Siga uno de estos procedimientos: Si est seleccionada la vista Show only set properties (Mostrar slo propiedades establecidas) en el panel Propiedades, haga clic en el vnculo Aadir propiedad y aada una propiedad. Si est seleccionada la vista de categora o la vista de lista en el panel Propiedades, introduzca un valor para la propiedad seleccionada que desea aadir.
2.
En ambos modos, Todo y Actual, el panel Estilos CSS contiene tres botones que le permiten modificar la vista del panel Propiedades (el panel inferior):
Vista de categora
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 que se puede expandir o contraer haciendo clic en el botn con el signo ms (+) que aparece al lado del nombre de la categora. Las propiedades aparecen (en color azul) en la parte superior de la lista. La Vista de lista muestra todas las propiedades CSS compatibles con Dreamweaver orden alfabtico. Las propiedades aparecen (en color azul) en la parte superior de la lista. muestra las propiedades que se han establecido. La vista de propiedades establecidas es la vista predeterminada.
Set Properties View (Vista de propiedades establecidas) slo
446
En ambos modos, Todo y Actual, el panel Estilos CSS tambin contiene los siguientes botones:
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 Vinculacin o importacin de una hoja de estilos CSS externa en la pgina 451.
Nueva regla CSS abre un cuadro de dilogo en el que es posible 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 ms informacin, consulte Creacin de una nueva regla CSS en la pgina 448. Editar estilo abre
un cuadro de dilogo en el que es posible editar los estilos del documento actual o de una hoja de estilos externa. Para informacin sobre la actualizacin de una hoja de estilos, vase Edicin de una regla CSS en la pgina 453.
Eliminar regla CSS elimina el estilo o la propiedad seleccionada del panel Estilos CSS, as como el formato de cualquier elemento al que se haya aplicado. (Sin embargo, no elimina las referencias a dicho estilo).
S UG E R E N CI A
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 449 Vinculacin o importacin de una hoja de estilos CSS externa en la pgina 451 Edicin de una hoja de estilos CSS en la pgina 454
447
Site el punto de insercin en el documento y siga uno de estos procedimientos para abrir el cuadro de dilogo Nueva regla CSS.
En el panel Estilos CSS (Ventana > Estilos CSS), haga clic en el botn Nueva regla CSS (+) situado en la parte inferior derecha del panel. Seleccione Texto > Estilos CSS > Nueva regla CSS. Para crear un estilo personalizado que se pueda aplicar como atributo class a un rango o un bloque de texto, seleccione la opcin Clase y escriba el nombre del estilo en el cuadro de texto Nombre.
NO TA
2.
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 la opcin Etiqueta e inserte una etiqueta HTML en el cuadro de texto Etiqueta 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 la opcin Avanzada e introduzca una o ms etiquetas HTML en el cuadro de texto Selector 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. 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.
3.
4.
Haga clic en Aceptar. Aparecer el cuadro de dilogo Definicin de estilos. Seleccione las opciones de estilo que desea establecer para la nueva regla CSS. Cuando termine de configurar los atributos de estilo, haga clic en Aceptar.
5. 6.
448
Para informacin sobre la configuracin de estilos CSS especficos, vanse los siguientes temas en Utilizacin 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
Aplicacin de un estilo de clase en la pgina 449 Edicin de una regla CSS en la pgina 453
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.
449
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.
En el panel Estilos CSS (Ventana > Estilos CSS), seleccione el modo Todo, 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.
Seleccione el objeto o texto cuyo estilo desea eliminar. En el inspector de propiedades de texto (Ventana > Propiedades), seleccione Ninguna en el men emergente Estilo.
Temas relacionados
Aspectos bsicos de las hojas de estilos en cascada en la pgina 418 Acerca del panel Estilos CSS en la pgina 424 Edicin de una regla CSS en la pgina 453
450
Seleccione Archivo > Exportar > Estilos CSS o seleccione Texto > Estilos CSS > Exportar. Aparecer el cuadro de dilogo Exportar estilos como archivo CSS. Introduzca un nombre para la hoja de estilos y haga clic en Guardar. El estilo se guardar como una hoja de estilos CSS.
2.
Edicin de una hoja de estilos CSS en la pgina 454 Utilizacin de hojas de estilo de tiempo de diseo en la pgina 455
451
2.
En panel Estilos CSS, haga clic en el botn Adjuntar hoja de estilos. (Se encuentra en la esquina inferior derecha del panel.) Rellene el cuadro de dilogo y haga clic en Aceptar. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo.
3.
Exportacin de estilos para crear una hoja de estilos CSS en la pgina 451 Edicin de una hoja de estilos CSS en la pgina 454
2.
En panel Estilos CSS, haga clic en el botn Adjuntar hoja de estilos externa. (Se encuentra en la esquina inferior derecha del panel.) En el cuadro de dilogo Adjuntar hoja de estilos externa, haga clic en Hojas de estilos de muestra. En el cuadro de dilogo Hojas de estilos de muestra, seleccione una hoja de estilos en el 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.
3.
4.
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.
452
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. Cuando encuentre una hoja de estilos cuyas reglas de formato coincidan con sus criterios de diseo, haga clic en Aceptar.
7.
Abra el panel Estilos CSS seleccionando Ventana > Estilos CSS. Coloque el punto de insercin en el texto cuya regla CSS desea editar. Utilice el panel Estilos CSS para editar la regla. Para instrucciones, consulte Utilizacin del panel Estilos CSS en la pgina 445. 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 reglas almacenadas en una hoja de estilos externa, asegrese de guardar los cambios para que se apliquen las actualizaciones. Si modifica las reglas CSS de una hoja de estilos que se utiliza en varios documentos, dichos cambios tambin se reflejarn en estas pginas.
453
En el panel Estilos CSS (Ventana > Estilos CSS), seleccione el modo Todo. En el panel Todas las reglas, haga doble clic en el nombre de la hoja de estilos que desea editar. En la ventana de documento, modifique la hoja de estilo y gurdela.
3.
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.
454
Edite la hoja de estilos utilizando las herramientas de edicin de hojas de estilos de Dreamweaver. Para ms informacin, consulte Utilizacin de hojas de estilos en cascada para aplicar formato al texto en la pgina 444. 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.
2.
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.
455
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 Utilizacin del panel Estilos CSS en la pgina 445
Exportacin de estilos para crear una hoja de estilos CSS en la pgina 451 Vinculacin o importacin de una hoja de estilos CSS externa en la pgina 451 Edicin de una hoja de estilos CSS en la pgina 454
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.
456
Para buscar archivos en un sitio, utilice diferentes comandos: Localizar en sitio local y Localizar en sitio remoto.
Abra el documento en el que se debe realizar la bsqueda o seleccione los documentos o una carpeta del panel Archivos. Seleccione Edicin > Buscar y reemplazar. Se abre el cuadro de dilogo Buscar y reemplazar. 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. Para ms informacin, haga clic en el botn Ayuda. Una vez que haya terminado, haga clic en el botn Cerrar para cerrar el cuadro de dilogo.
2.
3.
4.
457
458
CAPTULO 14
Insercin de imgenes
En Macromedia Dreamweaver 8, 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 ventana de documento. 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. Este captulo contiene las secciones siguientes:
Imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459 Insercin de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .462 Cambio del tamao de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467 Recorte de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .468 Optimizacin de una imagen mediante Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . 469 Ajuste del brillo y del contraste de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .470 Perfilado de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .470 Creacin de una imagen de sustitucin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471 Utilizacin de un editor de imgenes externo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .472 Aplicacin de comportamientos a imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
14
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.
459
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.
No es necesario tener instalado Macromedia Fireworks en el equipo para poder utilizar las funciones de edicin de imgenes de Dreamweaver.
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. 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.
Brillo/Contraste 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.
N OT A
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 Cambio del tamao de una imagen en la pgina 467 Recorte de una imagen en la pgina 468 Ajuste del brillo y del contraste de una imagen en la pgina 470 Perfilado de una imagen en la pgina 470
Imgenes
461
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. Seleccione Sistema de archivos para elegir un archivo grfico. Seleccione Fuente de datos para elegir un origen de imagen dinmica.
2.
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.
462
4.
Haga clic en Aceptar. 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 76).
5.
Introduzca los valores en los cuadros de texto Texto alternativo y Descripcin larga y haga clic en Aceptar.
NO T A N OT A
Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. La imagen aparece en el documento.
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 Utilizacin de Dreamweaver. Para editar los atributos de accesibilidad de la imagen, vase Edicin de los atributos de accesibilidad de una imagen en la pgina 463.
Temas relacionados Configuracin de una imagen de fondo o un color de fondo de pgina en la pgina 393
463
Edite los atributos de imagen apropiados en la vista Cdigo. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y, a continuacin, seleccione Editar cdigo de etiqueta. En el inspector de propiedades, edite el valor de Alt (Alternativo).
En la ventana de documento, coloque el punto de insercin en el lugar en el que desea insertar el grfico del marcador de posicin. Siga uno de estos procedimientos:
2.
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.
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. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
4.
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 Cambio del tamao de una imagen en la pgina 467
464
Utilizacin de Fireworks para modificar marcadores de posicin de imagen de Dreamweaver en la pgina 516.
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.
En el cuadro de dilogo, desplcese hasta la imagen con la que desea reemplazar el marcador de posicin de imagen. Haga clic en Aceptar. La imagen seleccionada aparece en el documento.
3.
465
Seleccione la imagen en la vista de diseo. 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.
NO T A 466
HTML no ofrece ningn mtodo para ajustar texto alrededor del contorno de una imagen, como ocurre con algunos procesadores de textos.
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 Medio alinea
la parte superior de una imagen con la parte superior del elemento ms alto (imagen o texto) de la lnea actual. 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
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. 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.
Derecha sita
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.
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.
Cambio del tamao de una imagen 467
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 inspector de propiedades.
Para devolver una imagen a su tamao original:
Cambie el tamao de la imagen tal como se ha descrito anteriormente. Haga clic en el botn Volver a muestrear del inspector de propiedades de imagen.
N OT A
No es posible volver a muestrear elementos o marcadores de posicin de imagen que no sean imgenes de mapa de bits.
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.
Abra la pgina que contiene la imagen que desea recortar, seleccione la imagen y siga uno de estos procedimientos:
Haga clic en el icono Herramienta Recorte del inspector de propiedades de imagen. Seleccione Modificar > Imagen > Recorte.
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.
468
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.
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.
Ajuste del brillo y del contraste de una imagen en la pgina 470 Perfilado de una imagen en la pgina 470
Abra la pgina que contiene la imagen que desea optimizar, seleccione la imagen y siga uno de estos procedimientos:
Haga clic en el botn Optimizar en Fireworks del inspector de propiedades de imagen. Seleccione Modificar > Imagen > Optimizar imagen en Fireworks.
Insercin de una imagen en la pgina 462 Recorte de una imagen en la pgina 468 Perfilado de una imagen en la pgina 470
Optimizacin de una imagen mediante Fireworks 469
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/Contraste.
Arrastre los controles deslizantes de Brillo y Contraste para ajustar los valores. El rango de valores posibles es de -100 a 100. Haga clic en Aceptar.
3.
Insercin de una imagen en la pgina 462 Recorte de una imagen en la pgina 468 Perfilado de una imagen en la pgina 470
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.
470
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.
3. 4.
Haga clic en Aceptar. Guarde los cambios; para ello, seleccione Archivo > Guardar, o recupere la imagen original seleccionando Edicin > Deshacer perfilar.
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.
Recorte de una imagen en la pgina 468 Ajuste del brillo y del contraste de una imagen en la pgina 470
471
En la ventana de documento, site el punto de insercin en el lugar donde desea que aparezca la imagen de sustitucin. Introduzca la imagen de sustitucin mediante uno de estos mtodos:
2.
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 > Imgenes interactivas >Imagen de sustitucin. Se abre el cuadro de dilogo Insertar imagen de sustitucin.
3.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. 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. En el navegador, desplace el puntero sobre la imagen original. Debe aparecer la imagen de sustitucin.
4. 5.
6.
472
Haga doble clic en la imagen que desea editar. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y 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.
NO T A
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 538
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 582.)
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 596.)
Intercambiar imagen
473
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 597.)
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 501 y Insercin de mens de salto en la pgina 499.)
474
CAPTULO 15
15
475
Utilizacin de los mapas de imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503 Cmo adjuntar comportamientos JavaScript a vnculos . . . . . . . . . . . . . . . . . . . . . 506 Comprobacin de vnculos rotos, externos y hurfanos . . . . . . . . . . . . . . . . . . . . . 506 Reparacin de vnculos rotos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509 Apertura de documentos vinculados en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . 510
Rutas absolutas (como http://www.macromedia.com/support/dreamweaver/ contents.html). Para ms informacin, consulte Rutas absolutas en la pgina 477. Rutas relativas al documento (como dreamweaver/contents.html). Para ms informacin, consulte Rutas relativas al documento en la pgina 477. 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 479.
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 482).
N OT A 476
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 la URL completa 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.
NO TA
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 462.
477
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 products.
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.) Temas relacionados Configuracin de la ruta relativa de vnculos nuevos en la pgina 488
478
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 que 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.
Mens de salto
479
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.
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.
480
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 501
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, la URL asociada 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 503
Mapas de imgenes
481
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 482.) 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 489.) 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 491.) 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 492.)
NO TA
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 476.)
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 en la pgina 483 Vinculacin de documentos mediante el icono de sealizacin de archivos en la pgina 485 Establecimiento de vnculos con documentos utilizando el mapa del sitio en la pgina 486 Utilizacin del comando Hipervnculo en la pgina 487 Configuracin de la ruta relativa de vnculos nuevos en la pgina 488
Seleccione texto o una imagen en la vista Diseo de la ventana de documento. 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. El tipo de ruta que seleccione slo afectar al vnculo actual. Para ms informacin, consulte Aspectos bsicos de ubicacin y rutas de documentos en la pgina 476. Puede cambiar la configuracin predeterminada del cuadro de texto Relativa a para el sitio. Para ms informacin, consulte Configuracin de la ruta relativa de vnculos nuevos en la pgina 488.
Creacin de vnculos
483
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 de la URL absoluta 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.
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 328.
484
Seleccione texto o una imagen en la vista Diseo de la ventana de documento. 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.
NO T A
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.
Seleccione texto o una imagen en la ventana de documento. Presione la tecla Mays mientras arrastra la seleccin. Al arrastrar la seleccin, aparecer el icono de sealizacin de archivos. Seale otro documento abierto, un anclaje visible en un documento abierto o un documento del panel Archivos.
N OT A
3.
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.
4.
Creacin de vnculos
485
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. Seleccione un archivo HTML en el mapa del sitio. Aparecer el icono de sealizacin de archivos junto al archivo. 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. Libere el botn del ratn. 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.
2.
3.
4.
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.
N OT A
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.
486
Site el punto de insercin en el documento donde desea que aparezca el hipervnculo. 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.
3.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
4.
Establecimiento de vnculos con una parte especfica de un documento en la pgina 489 Creacin de un vnculo de correo electrnico en la pgina 491 Creacin de vnculos de script y nulos en la pgina 492
Creacin de vnculos
487
Seleccione Sitio > Administrar sitios. Aparece el cuadro de dilogo Administrar sitios. Haga doble clic en el sitio deseado de la lista. Aparecer el cuadro de dilogo Definicin del sitio. Haga clic en la ficha 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.
2.
3.
4.
Establezca la ruta relativa de los vnculos nuevos seleccionando la opcin Documento o Raz del sitio. El cambio de esta configuracin no convierte la ruta de los vnculos existentes despus de hacer clic en Aceptar. La configuracin slo se aplicar a los nuevos vnculos que cree con Dreamweaver.
N OT A S U G E R E N C IA
El contenido vinculado a rutas relativas a la raz del sitio no aparece cuando se realiza una vista previa de documentos en un navegador local, a menos que especifique un servidor de prueba o seleccione la opcin Vista previa utilizando el archivo temporal en Edicin > Preferencias > Vista previa en el navegador. Esto es as porque los navegadores no reconocen la raz de los sitios. (Consulte Vista previa y comprobacin de pginas en los navegadores en la pgina 409.) 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 479).
488
5.
En el caso de rutas relativas a la raz del sitio, introduzca la URL que va a utilizar el sitio Web finalizado en el cuadro de texto Direccin HTTP. Dreamweaver utiliza esta direccin para asegurarse de que los vnculos relativos a la raz funcionan en el servidor remoto, que puede tener una raz del sitio diferente. Por ejemplo, si establece un vnculo con un archivo de imagen ubicado en C:\Sales\images\ folder (donde Sales es la carpeta raz local) y la URL del sitio completo es http:// www.mysite.com/SalesApp/ (donde SalesApp es la carpeta raz remota), la introduccin de la URL en el cuadro de texto Direccin HTTP garantizar que la ruta de acceso a la imagen vinculada en el servidor remoto sea /SalesApp/images/.
NO T A
En versiones anteriores, Dreamweaver no aada la carpeta raz remota correcta, lo que provocaba que las pginas fallaran durante la ejecucin.
6.
La nueva configuracin de ruta afecta slo al sitio actual. Temas relacionados Aspectos bsicos de ubicacin y rutas de documentos en la pgina 476
Creacin de vnculos
489
En la vista de diseo de la ventana de documento, coloque el anclaje en el lugar donde desea insertar el anclaje con nombre. Siga uno de estos procedimientos:
2.
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.
3.
En el cuadro de texto Nombre de anclaje, escriba un nombre para el anclaje y haga clic en Aceptar. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. El marcador del anclaje aparecer en el punto de insercin.
N OT A
Si no aparece el marcador del anclaje Ver > Ayudas visuales > Elementos invisibles.
En la vista Diseo de la ventana de documento, seleccione texto o una imagen para crear un vnculo a partir de ellos. En el cuadro de texto Vnculo del inspector de propiedades, introduzca un signo de nmero (#) y el nombre del anclaje. Por ejemplo:
2.
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.
NO TA
490
Para establecer un vnculo con un anclaje con nombre mediante el mtodo de sealizacin de archivo:
1.
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.) Siga uno de estos procedimientos:
3.
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.
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.
Creacin de vnculos
491
2.
Seleccione Insertar > Vnculo de correo electrnico. En la categora Comn de la barra Insertar, haga clic en el botn Insertar vnculo de correo electrnico.
3.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
4.
Seleccione texto o una imagen en la vista Diseo de la ventana de documento. 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 489 Establecimiento de vnculos con una parte especfica de un documento en la pgina 489
492
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 562. 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.
Seleccione texto, una imagen o un objeto en la vista Diseo de la ventana de documento. 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.
Seleccione texto, una imagen o un objeto en la vista Diseo de la ventana de documento. 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.
N OT A
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 Establecimiento de vnculos con una parte especfica de un documento en la pgina 489 Creacin de un vnculo de correo electrnico en la pgina 491
Creacin de vnculos
493
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.
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Aparece el cuadro de dilogo Preferencias. Seleccione General en la lista de categoras de la izquierda. Aparecern las opciones de preferencias generales.
2.
494
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 497. 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.
4.
Seleccione Sitio > Administrar sitios. Aparece el cuadro de dilogo Editar sitios. Seleccione un sitio y haga clic en Editar. Aparecer el cuadro de dilogo Definicin del sitio. Haga clic en la ficha Avanzadas para ver la categora Avanzadas del cuadro de dilogo Definicin del sitio. Seleccione Datos locales en la lista de categoras de la izquierda. El cuadro de dilogo Definicin del sitio muestra las opciones de Datos locales. En la categora Datos locales, seleccione la casilla de verificacin Activar cach.
2.
3.
4.
5.
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.
Administracin de vnculos
495
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).
NO T A
Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y elija Cambiar vnculo en el men contextual.
2. 3.
Acceda al archivo al que desea que seale el vnculo o introduzca un URL. Haga clic en Aceptar.
Seleccione Sitio > Quitar vnculo (Windows) o Sitio > Ver mapa del sitio > Quitar vnculo (Macintosh).
N OT A
Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla 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.
496
Elija Sitio > Abrir origen del vnculo (Windows) o Sitio > Ver mapa del sitio > Abrir origen del vnculo (Macintosh). Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla 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 482 Utilizacin de un mapa visual del sitio en la pgina 137
Administracin de vnculos
497
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. Aparecer el cuadro de dilogo Cambiar vnculo en todo el sitio.
3.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. Dreamweaver actualizar todos los documentos vinculados al archivo seleccionado, haciendo que sealen al nuevo archivo y usando el formato de ruta empleado por el documento (por ejemplo, si la ruta antigua era relativa al documento, la nueva tambin deber serlo). No importa si el tipo de vnculo es relativo al documento o a la raz. Dreamweaver actualizar el vnculo automticamente.
4.
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.
N O TA 498
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.
Abra un documento y, a continuacin, site el punto de insercin en la ventana de documento. Siga uno de estos procedimientos:
2.
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.
3.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. El men de salto aparecer en el documento.
4.
499
Elija Ventana > Propiedades para abrir el inspector de propiedades si no est abierto. 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. En el inspector de propiedades, haga clic en el botn Valores de lista. Aparecer el cuadro de dilogo Listar valores.
3.
4.
Realice cambios necesarios en los elementos del men y, a continuacin, haga clic en Aceptar.
500
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.
NO T A
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.
Insercin de mens de salto en la pgina 499 Edicin de los elementos del men de salto en la pgina 500
501
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.
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.
2.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
3.
502
Seleccione la barra de navegacin en la pgina activa. Seleccione Modificar > Barra de navegacin. Aparecer el cuadro de dilogo Modificar barra de navegacin.
3. 4.
En la lista Elementos de barra de navegacin, seleccione el elemento que desea editar. Realice los cambios necesarios. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
5.
503
Puede crear mltiples zonas interactivas, pero formarn parte del mismo mapa de imagen.
En la ventana de documento, seleccione la imagen. En el inspector de propiedades, haga clic en la flecha de ampliacin, situada en la esquina inferior derecha, para ver todas las propiedades. En el cuadro de texto Mapa, introduzca un nombre exclusivo para el mapa de imagen.
NO TA
3.
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.
Seleccione las opciones deseadas del inspector de propiedades de zonas interactivas. Para ms informacin, haga clic en el botn Ayuda del inspector de propiedades. Cuando termine de definir el mapa de imagen, haga clic en un rea en blanco del documento para cambiar el inspector de propiedades.
6.
504
Utilice la herramienta de puntero para seleccionar una zona interactiva. Siga uno de estos procedimientos:
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.
Utilice la herramienta de puntero para seleccionar la zona interactiva que desea mover. Siga uno de estos procedimientos:
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.
Utilice la herramienta de puntero para seleccionar la zona interactiva cuyo tamao desea cambiar. Arrastre el manejador de zona interactiva para cambiar el tamao o la forma de la zona interactiva.
2.
505
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 579.)
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 577.) 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 583.)
506
Tambin puede identificar y eliminar archivos que ya no utilizan otros archivos del sitio. Para ms informacin, consulte Identificacin y eliminacin de archivos no utilizados en la pgina 163.
Para comprobar los vnculos del documento actual:
1. 2.
Guarde el archivo en una ubicacin dentro del sitio local de Dreamweaver. 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).
S UG E R E N CI A
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.
NO T A
En el panel Archivos, seleccione un sitio en el men emergente Sitios actuales. En la vista Local, seleccione los archivos o las carpetas que desea comprobar. Inicie la comprobacin siguiendo uno de estos procedimientos:
Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla 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.
El informe Vnculos rotos aparecer en el panel Verificador de vnculos (en el grupo de paneles Resultados).
507
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).
S U G E R E N CI A
Slo podr comprobar los archivos hurfanos si comprueba los vnculos de todo el sitio (vase el siguiente procedimiento).
5.
Para guardar el informe, haga clic en el botn Guardar informe del panel Verificador de vnculos.
En el panel Archivos, seleccione un sitio en el men emergente Sitios actuales. Elija Sitio > Comprobar vnculos en todo el sitio. 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 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.
NO T A
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.
4.
Para guardar el informe, haga clic en el botn Guardar informe del panel Verificador de vnculos.
508
Ejecute un informe de comprobacin de vnculos (vase Comprobacin de vnculos rotos, externos y hurfanos en la pgina 506). 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. Haga clic en el icono de carpeta para localizar el archivo con el que desea establecer el vnculo o escriba su ruta y nombre. 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.
NO T A
2.
3.
4.
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 149.
Ejecute un informe de comprobacin de vnculos (vase Comprobacin de vnculos rotos, externos y hurfanos en la pgina 506). 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).
2.
509
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 la etiquetas An y Al del inspector de propiedades o en el botn Actualizar para restablecer los valores de altura y anchura. Las etiquetas An y Al cambiarn de negrita a tipo normal.
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.
Seleccione el vnculo y elija Modificar > Abrir pgina vinculada. Presione Control (Windows) o Comando (Macintosh) y haga doble clic en el vnculo.
N OT A
Temas relacionados Vista previa y comprobacin de pginas en los navegadores en la pgina 409
Comprobacin de vnculos rotos, externos y hurfanos en la pgina 506 Reparacin de vnculos rotos en la pgina 509
510
CAPTULO 16
16
Para utilizar Dreamweaver junto con Fireworks y Flash, debe tener instaladas las tres aplicaciones en su equipo.
511
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 169. Para informacin sobre la funcin de las Design Notes, vase Integracin de Fireworks y Flash en la pgina 512.
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 472 en Utilizacin de Dreamweaver.
512
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
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.
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).
N O TA
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.
Utilizacin de Fireworks
513
En Dreamweaver, elija Ventana > Propiedades para abrir el inspector de propiedades, si es que no est ya abierto. 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.
2.
3.
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. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en la imagen deseada, y seleccione Editar con Fireworks en el men contextual.
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. 5.
En Fireworks, edite el PNG origen. 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.
514
En Dreamweaver, seleccione la imagen deseada y elija Comandos > Optimizar imagen en Fireworks. Si el sistema lo solicita, especifique si desea iniciar un archivo origen de Fireworks para la imagen colocada. En Fireworks, realice las modificaciones que desee en el cuadro de dilogo Optimizacin:
2.
3.
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
515
Compruebe que ya ha definido Fireworks como el editor de imgenes para los archivos .png. Para informacin, consulte Utilizacin de un editor de imgenes externo en la pgina 472 en Utilizacin de Dreamweaver. En la ventana de documento, haga clic en el marcador de posicin de imagen para seleccionarlo. Para iniciar Fireworks y comenzar a editar, siga uno de estos procedimientos:
2.
3.
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.
516
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.
NO TA
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, 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. 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. el campo Guardar como tipo, seleccione el tipo de archivo o archivos que desea exportar; por ejemplo Slo imgenes o HTML e imgenes.
9.
10. En
Utilizacin de Fireworks
517
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.
En Dreamweaver, seleccione la tabla de Fireworks que contiene el men emergente y haga clic en Editar en el inspector de propiedades.
518
2.
En Fireworks, edite el men con el editor de men emergente y, seguidamente, haga clic en Listo en la barra de herramientas de Fireworks.
Fireworks enva el men emergente editado de nuevo a Dreamweaver. Si ha creado un men emergente en Fireworks MX 2004 o en una versin anterior, puede editarlo en Dreamweaver desde el cuadro de dilogo Mostrar men emergente.
Para editar un men emergente creado en Fireworks MX 2004 o en una versin anterior:
1. 2.
En Dreamweaver, seleccione la zona interactiva o la imagen que activa el men emergente. En el panel Comportamientos (Mays+F3), haga doble clic en Mostrar men emergente en la lista Acciones. 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 591.
3.
Realice las modificaciones que desee en el men emergente y haga clic en Aceptar.
Utilizacin de Fireworks
519
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.
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). 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
2.
automticamente la imagen de Fireworks colocada, exista o no un archivo PNG origen. Las actualizaciones slo se realizan en la imagen colocada.
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.
Preguntar al ejecutar
520
En Dreamweaver, coloque el punto de insercin en el documento en el que desee que comience el cdigo HTML. Siga uno de estos procedimientos:
2.
Elija Insertar > Imgenes interactivas > 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. 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.
N OT A
4.
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.
Utilizacin de Fireworks
521
En Fireworks, seleccione Edicin > Copiar cdigo HTML. Siga las instrucciones del asistente mientras le gua por las opciones de exportacin de HTML e imgenes. Cuando el sistema lo solicite, especifique la carpeta del sitio de Dreamweaver como destino para 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.
En Fireworks, elija Archivo > Exportar. En el cuadro de dilogo Exportar, especifique la carpeta del sitio de Dreamweaver como destino de las imgenes exportadas. En el men emergente Guardar como, seleccione HTML e imgenes. En el men emergente HTML, seleccione Copiar al Portapapeles y, a continuacin, haga clic en Guardar. 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.
3. 4.
5.
522
En Fireworks, abra el PNG origen y realice las modificaciones que desee. Seleccione Archivo > Guardar. En Fireworks, seleccione Archivo > Actualizar HTML. Desplcese al archivo de Dreamweaver que contenga el cdigo HTML que desee actualizar y haga clic en Abrir. 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.
5.
Utilizacin de Fireworks
523
En Dreamweaver, seleccione Comandos > Crear lbum de fotos Web. 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.
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.
524
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 crea miniaturas GIF que utilizan una paleta Web adaptable de hasta crea miniaturas JPEG con calidad relativamente mayor y
128 colores.
GIF WebSnap 256
256 colores.
JPEG - Calidad superior
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.
N OT A
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 la de los archivos originales.
7.
Elija un porcentaje de escala para las imgenes de tamao grande. 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.
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.
Utilizacin de Fireworks
525
10. Cuando
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.
NO TA 526
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 Flash, tambin puede seleccionar un archivo Flash de un documento Dreamweaver e iniciar Flash para editarlo.
En Dreamweaver, elija Ventana > Propiedades para abrir el inspector de propiedades, si es que no est ya abierto. En el documento de Dreamweaver, siga uno de estos procedimientos:
2.
Haga clic en el marcador de posicin del archivo SWF para seleccionarlo y, a continuacin, en el inspector de propiedades, haga clic en Editar.
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.
NO T A
Utilizacin de Flash
527
Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla 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.
NO TA
Si el archivo FLA o el archivo SWF est bloqueado, Dreamweaver le solicita que compruebe el archivo, anule la solicitud o visualice el archivo.
3.
En Flash, edite la pelcula. La ventana de documento indicar que est modificando una pelcula desde Dreamweaver. 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.
4.
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.
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 144. Para informacin sobre la vista del mapa del sitio, vase Visualizacin de un mapa del sitio en la pgina 138.
2.
528
3.
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.
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.
5.
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.
Utilizacin de Flash
529
530
CAPTULO 17
17
531
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.
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 540, Insercin de un objeto de texto Flash en la pgina 542 y Insercin de contenido de Flash en la pgina 543.
Los archivos de plantilla Flash (.swt) permiten modificar y reemplazar informacin de un archivo SWF 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 Buttons. Para ms informacin sobre la creacin de plantillas de botones, consulte el artculo sobre este tema en www.macromedia.com/go/flash_buttons.
532
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 545 y Edicin de atributos de elementos Flash en la pgina 545.
El formato de archivo Flash Video (.flv)
es un archivo de vdeo que contiene datos codificados de audio y vdeo para enviarlos a travs de Flash Player. Por ejemplo, si tuviera un archivo de vdeo de QuickTime o Windows Media, debera utilizar un codificador (como Flash 8 Video Encoder o Sorensen Squeeze) para convertir el archivo de vdeo en un archivo FLV. Para ms informacin, visite el Centro para desarrolladores de Flash Video en www.macromedia.com/go/flv_devcenter_es.
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 puede contener un clip de sonido de larga duracin. 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.
Archivos multimedia
533
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.
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.
N OT A 534
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.
Site el punto de insercin en la ventana de documento en la que desea insertar el objeto. 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 554.
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.
S UG E R E N CI A
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.
535
3.
Seleccione las opciones deseadas en el cuadro de dilogo Seleccionar archivo o Insertar Flash. Haga clic en Aceptar. 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 76).
4.
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. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. El objeto multimedia aparece en el documento.
NO TA
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.
Edite los atributos apropiados en la vista Cdigo. Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y seleccione Editar cdigo de etiqueta.
536
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 538.
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.
537
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 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.
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.
538
Seleccione el tipo de archivo en la lista Extensiones y haga clic en el botn de signo menos (-) situada sobre dicha lista.
NO T A
La eliminacin de un tipo de archivo no se puede deshacer. Por tanto, asegrese antes de ejecutarla.
Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en el objeto de la ventana de documento.
N OT A
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 169).
2. 3.
Elija Design Notes en el men contextual. Introduzca la informacin deseada en la Design Note.
S UG E R E N CI A
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.
539
En la ventana de documento, coloque el punto de insercin en el lugar en el que desea insertar el botn Flash. Para abrir el cuadro de dilogo Insertar botn Flash, siga uno de estos procedimientos:
2.
En la categora Comn de la barra Insertar, seleccione Media y haga clic en el icono Botn Flash. Seleccione Insertar > Media > Botn Flash.
540
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.
S U G E R E N C IA
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.
En la ventana de documento, haga clic en el objeto de botn Flash para seleccionarlo. 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. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla 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 anteriormente (consulte Insercin y modificacin de un objeto de botn Flash en la pgina 540.) 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 467).
541
En la vista Diseo, seleccione el objeto de botn Flash en el documento. En el inspector de propiedades, haga clic en Reproducir. Haga clic en Detener para poner fin a la vista previa.
NO T A
Conviene obtener siempre una vista previa del documento en el navegador para comprobar exactamente el aspecto que tendr el botn Flash.
En la ventana de documento, site el punto de insercin en el lugar en el que desea insertar el texto Flash.
542
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.
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 541).
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 Insertar Flash. Seleccione Insertar > Media > Flash.
543
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 un archivo SWF Flash seleccione el marcador de posicin y haga clic en el botn Ayuda del inspector de propiedades.
Para obtener una vista previa del contenido Flash en la ventana de documento:
1.
En la ventana de documento, haga clic en el marcador de posicin Flash para seleccionar el contenido Flash del que desea obtener una vista previa. 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 del contenido Flash en un navegador presionando F12.
S UG E R E N CI A
2.
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 archivos SWF Flash estn configurados para Reproducir.
544
En la ventana de documento, coloque el punto de insercin en el lugar en el que desea insertar 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 > Media > nombre de elemento Flash. Dreamweaver contiene un elemento Flash llamado Visor de imgenes.
Introduzca un nombre de archivo para el elemento Flash y gurdelo en una ubicacin adecuada de su sitio. Haga clic en Aceptar. 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.
3.
4.
Seleccione Archivo > Vista previa en el navegador para obtener una vista previa del elemento Flash.
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. 3.
Si todava no se muestra, abra el inspector de etiquetas (Ventana > Inspector de etiquetas). Edite los atributos del elemento Flash mediante el inspector de etiquetas y el inspector de propiedades.
545
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.
En la ventana de documento, site el punto de insercin en la ubicacin en la que quiere que aparezca el documento FlashPaper en la pgina y, a continuacin, seleccione Insertar > Media > FlashPaper. En el cuadro de dilogo Insertar FlashPaper, acceda a un documento FlashPaper y seleccinelo. Si lo desea, especifique las dimensiones del objeto FlashPaper en la pgina Web. Para ello, introduzca el ancho y el alto en pxeles. FlashPaper variar la escala del documento para ajustar el ancho. Haga clic en Aceptar para insertar el documento en la pgina. Dado que un documento FlashPaper es un objeto Flash, en la pgina aparece un marcador de posicin Flash.
2.
3.
4.
5.
Para obtener la vista previa del documento FlashPaper, haga clic en el marcador de posicin y pulse el botn Reproducir del inspector de propiedades. Haga clic en Detener para poner fin a la vista previa. Tambin puede obtener una vista previa del documento en un navegador presionando F12. La barra de herramientas de FlashPaper se muestra totalmente en el navegador.
S UG E R E N CI A
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 archivos SWF Flash estn configurados para Reproducir.
546
6.
Si lo desea, defina el resto de propiedades en el inspector de propiedades. Al igual que los objetos Flash, el objeto FlashPaper comparte el inspector de propiedades de los objetos Flash. Para informacin sobre la configuracin de las propiedades, haga clic en el botn Ayuda del inspector de propiedades.
Acerca de la insercin de Flash Video en la pgina 548 Insercin de Flash Video en la pgina 549 Deteccin de la versin de Flash Player para visualizar Flash Video en la pgina 549 Edicin y eliminacin de un componente Flash Video en la pgina 550
Para ms informacin acerca de Flash Video, visite el Centro para desarrolladores de Flash Video en www.macromedia.com/go/flv_devcenter_es.
547
Si ha creado el vdeo con el cdec Sorenson Squeeze, los visitantes del sitio necesitarn Flash Player 7 o una versin posterior para reproducir vdeo de descarga progresiva y necesitarn Flash Player 6.0.79 o una versin posterior para reproducir flujo de vdeo. Si ha creado el vdeo con el cdec On2, los visitantes del sitio necesitarn Flash Player 8 o una versin posterior.
Tras insertar un archivo de Flash Video en una pgina, puede insertar cdigo en dicha pgina para detectar si el usuario dispone de la versin adecuada de Flash Player para poder visualizar Flash Video. Si no disponen de la versin adecuada, se les pedir que descarguen la versin ms reciente de Flash Player. Para ms informacin, consulte Deteccin de la versin de Flash Player para visualizar Flash Video en la pgina 549. Para ms informacin acerca de Flash Video, visite el Centro para desarrolladores de Flash Video en www.macromedia.com/go/flv_devcenter_es. Temas relacionados Deteccin de la versin de Flash Player para visualizar Flash Video en la pgina 549
548
Seleccione Insertar > Media > Flash Video. En el cuadro de dilogo Insertar de Flash Video, seleccione Vdeo de descarga progresiva o Flujo de vdeo en el men emergente Tipo de vdeo. Para ms informacin sobre estas dos opciones, consulte Acerca de la insercin de Flash Video en la pgina 548.
3.
Complete el resto de las opciones del cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Puede seleccionar una opcin para insertar cdigo que detecte la versin de Flash Player requerida para visualizar Flash Video y que pida al usuario que descargue la versin ms reciente de Flash Player en caso de que no disponga de ella. Para ms informacin, consulte Deteccin de la versin de Flash Player para visualizar Flash Video en la pgina 549.
4.
549
Al insertar Flash Video en una pgina, seleccione la opcin Avisar al usuario si desea descargar el reproductor de Flash en caso de ser necesario en el cuadro de dilogo Insertar Flash Video.
Si la pgina ya contiene Flash Video, elimnelo y vuelva a insertarlo con esta opcin seleccionada.
NO T A
Si inserta otro Flash Video que requiera una versin posterior de Flash Player que para el primer vdeo, el cdigo de deteccin pedir al usuario que la descargue.
2.
Si decide eliminar Flash Video de la pgina, ya no necesitar el cdigo de deteccin. Puede utilizar Dreamweaver para eliminarlo.
Para eliminar cdigo que detecte la versin de Flash Player:
Seleccione el marcador de posicin del componente Flash Video en la ventana de documento de Dreamweaver haciendo clic en el icono de Flash Video situado en la parte central del marcador de posicin. Abra el inspector de propiedades (Ventana > Propiedades). Realice los cambios.
2. 3.
550
Las opciones del inspector de propiedades son similares a las del cuadro de dilogo Insertar Flash Video. Para ms informacin, haga clic en el botn Ayuda del inspector de propiedades.
NO T A
No puede cambiar los tipos de vdeo (por ejemplo, de descarga progresiva a flujo) mediante el inspector de propiedades. Para cambiar el tipo de vdeo, debe eliminar el componente Flash Video y volver a insertarlo seleccionando Insertar > Media > Flash Video.
Seleccione el marcador de posicin del componente Flash Video en la ventana de documento de Dreamweaver y presione Eliminar.
En la ventana de documento, coloque el punto de insercin en el lugar en el que desea insertar 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. 3.
En el cuadro de dilogo que aparece, seleccione un archivo de pelcula. En el inspector de propiedades, introduzca el ancho y el alto de la pelcula en los cuadros An y Al.
551
Coloque el videoclip en la carpeta del sitio. Estos videoclips suelen tener el formato de archivo AVI o MPEG. 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.
2.
Para informacin sobre cmo incluir flujo de vdeo en la pgina, vase Insercin de contenido de plug-in de Netscape Navigator en la pgina 554.
N OT A 552 N OT A
El usuario debe descargarse una aplicacin de ayuda para ver los formatos de flujo ms habituales, como por ejemplo RealMedia, QuickTime o Windows media.
Seleccione el texto o la imagen que desea usar como vnculo con el archivo de audio. 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.
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 activar la reproduccin de sonido, por si los visitantes no desean escuchar el contenido de audio.
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 554.
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. 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.
3.
553
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. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
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.
Inserte uno o ms elementos multimedia seleccionado Insertar > Media > Shockwave, Insertar > Media > Flash o Insertar > Media > Plug-in. Siga uno de estos procedimientos:
2.
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.
N OT A
La opcin Reproducir todo se aplica al documento actual, no a otros documentos de un conjunto de marcos, por ejemplo.
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.
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.
555
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. En la categora Comn de la barra Insertar, haga clic en la flecha desplegable del botn 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. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
En la ventana de documento, coloque el punto de insercin en el lugar en el que desea insertar el applet 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 Applet. Seleccione Insertar > Media > Applet.
2.
En el cuadro de dilogo que aparece, seleccione un archivo que contenga un applet de Java. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
556
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 580).
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 570.
557
558
CAPTULO 18
18
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 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 evento especificado se produce para ese elemento, el navegador llama la accin (el cdigo JavaScript) que usted 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.
559
Un mismo evento puede desencadenar varias acciones distintas, y se puede especificar el orden en que esas acciones tienen lugar. Dreamweaver 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 565.) 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 Ampliacin de Dreamweaver (Ayuda > Ampliacin de Dreamweaver)
NO T A
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.
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.
560
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. Para conocer los nombres y las descripciones de los eventos que proporciona cada navegador, vase el Centro de soporte de Dreamweaver 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.
Eventos
561
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.
N OT A
No se puede adjuntar un comportamiento a texto normal. Para ms informacin, consulte Cmo adjuntar un comportamiento a un texto en la pgina 563.
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 564.
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. 3.
Elija Ventana > Comportamientos para abrir el panel de comportamientos. 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 566.
562
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.)
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.
N OT A
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). 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 562.
3.
563
Abra la vista Cdigo en la ventana Documento seleccionando Ver > Cdigo. Busque el vnculo 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.) 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 415.
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. 2.
Seleccione un objeto con un comportamiento adjunto. 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.
3.
Para editar los parmetros de una accin, haga doble clic en el nombre del comportamiento o seleccinelo y presione la tecla Intro (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.
564
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.
NO T A
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.
Seleccione un elemento que tenga el comportamiento adjunto. Abra el panel Comportamientos. Haga doble clic en el comportamiento. Haga clic en Aceptar en el cuadro de dilogo del comportamiento.
565
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. 3.
Examine o busque los paquetes. Descargue e instale el paquete de extensiones que desee. Para informacin detallada, vase Adicin de extensiones a Dreamweaver en la pgina 84.
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.
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. 2.
Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Llamar JavaScript en el men emergente Acciones. 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()).
3.
4. 5.
Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el 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.
NO T A
Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Cambiar propiedad del men emergente Acciones.
567
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. 5.
Seleccione un objeto en el men emergente Objeto con nombre. 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. Compruebe que el evento predeterminado es el que usted desea. (Cuando tiene lugar el evento, la accin se ejecuta y cambia la propiedad.) Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.
7.
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.
568
Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y seleccione Comprobar navegador en el men emergente Acciones. 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?
3.
4. 5.
Especifique una versin de Netscape Navigator. 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. Especifique una versin de Internet Explorer. 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. 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.
6. 7.
8.
9.
Introduzca las rutas y los nombres de archivo de la URL y de la URL alternativa en los cuadros de texto situados en la parte inferior del cuadro de dilogo. Si introduce una URL remota, deber introducir el prefijo http:// adems de la direccin www. clic en Aceptar.
10. Haga
569
11.
Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para. Recuerde que el objetivo de este comportamiento es comprobar las distintas versiones de los navegadores; por lo 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.
NO T A
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.
Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y seleccione Comprobar plug-in en el men emergente Acciones. 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.
3.
4.
En el cuadro de texto Si se encuentra, ir a URL, especifique una URL para los visitantes que dispongan del plug-in. Si especifica una URL remota, 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 una URL alternativa 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.
570
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 a la URL indicada en el cuadro de texto De lo contrario. Para enviar al visitante a la primera 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 plugins.
7. 8.
Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.
Seleccione Insertar > Media > Shockwave o Insertar > Media > Flash para insertar un archivo Shockwave o SWF de Flash respectivamente. 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. 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. Abra el panel Comportamientos (Ventana > Comportamientos).
2.
3.
4.
571
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. 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.)
6.
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. Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el submen Mostrar eventos para del men emergente Eventos.
8. 9.
Arrastrar capa
La accin Arrastrar capa permite al visitante arrastrar una capa. Use esta accin para crear puzzles, 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 aqulla 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. 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. Abra el panel Comportamientos.
2.
3.
572
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. 6.
Seleccione la capa que desea hacer desplazable en el men emergente Capa. 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 el destino para soltar la capa. obtener puzzles 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.
10. Para
573
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
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 575.
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. clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para. Recuerde que las capas no son compatibles con los navegadores de la versin 3.0.
N OT A
No se puede adjuntar la accin Arrastrar capa a un objeto con los eventos onMouseDown u onClick.
574
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 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.
575
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).) Seleccione Edicin > Buscar. Seleccione Cdigo HTML en el men emergente Buscar. Escriba (!curDrag), incluidos los parntesis, en el cuadro de texto adyacente. 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;
2. 3. 4. 5.
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.
576
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:
1. 2. 3.
Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y seleccione Ir a URL del men emergente Acciones. Elija un destino para la 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.
NO TA
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. Repita los pasos 3 y 4 para abrir ms documentos en otros marcos. Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.
5. 6. 7.
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 479.
577
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 920.
Cree un objeto de men de salto si es que no hay todava ninguno en el documento. Seleccione el objeto de men de salto y abra el panel Comportamientos. Haga doble clic en Men de salto en la columna Acciones. 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 una 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. Haga clic en el botn de signo ms (+) y elija Men de salto Ir del men emergente Acciones. En el men emergente Elegir men de salto, elija un men para que se active el botn Ir. Haga clic en Aceptar.
2.
3. 4.
578
Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Abrir ventana del navegador en el men emergente Acciones. Haga clic en Examinar para seleccionar un archivo o introduzca la URL que desea ver. Configure las siguientes opciones:
Ancho de la ventana Alto de la ventana
3. 4.
Especifica el ancho de la ventana en pxeles. Es la fila de botones del navegador que incluye
579
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.
5. 6.
Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.
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.
NO T A 580
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.
Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y seleccione Reproducir sonido en el men emergente Acciones. Haga clic en Examinar para seleccionar un archivo de sonido o introduzca la ruta y el nombre del archivo en el campo Reproducir sonido. Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.
3.
4. 5.
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
The URL for this page is {window.location}, and today is {new Date()}.
N OT A
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 579.
Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y seleccione Mensaje emergente del men emergente Acciones. Introduzca el mensaje en el cuadro de texto Mensaje. Haga clic en Aceptar.
3. 4.
581
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.
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.
Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y seleccione Carga previa de imgenes del men emergente Acciones. 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. 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.
NO T A
3.
4.
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. 6.
Repita los pasos 3 y 4 para todas las imgenes restantes que desee cargar en la pgina actual. Para eliminar una imagen de la lista Carga previa de imgenes, seleccione la imagen en la lista y haga clic en el botn de signo menos (). Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.
7. 8.
582
Seleccione una imagen en la barra de navegacin para editarla y abra el panel Comportamientos. 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. En la ficha Bsico del cuadro de dilogo Establecer imagen de barra de navegacin, seleccione opciones de edicin de la imagen.
2.
3.
Seleccione una imagen en la barra de navegacin para editarla y abra el panel Comportamientos. 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. Haga clic en la ficha Avanzado del cuadro de dilogo Establecer imagen de barra de navegacin.
2.
3.
583
4.
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 501.
5.
En la lista Tambin establecer imagen, seleccione otra imagen de la pgina que desee configurar. 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. 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.
6.
7.
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 316.
584
Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y seleccione Definir texto > Definir texto de marco en el men emergente Acciones. En el cuadro de dilogo Establecer texto de marco, selecciona el marco de destino del men emergente Marco. Haga clic en el botn Obtener HTML actual para copiar el contenido actual de la seccin body del marco de destino. Introduzca un mensaje en el cuadro de texto Nuevo HTML y haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si no aparecen los eventos que desea, cambie el navegador de destino en el men emergente Mostrar eventos para.
3.
4.
5. 6.
Seleccione Insertar > Capa. Para ms informacin, consulte Insercin de una capa en la pgina 224. En el inspector de propiedades, escriba un nombre para la capa.
2.
585
Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y seleccione Definir texto > Definir texto de capa en el men emergente Acciones. En el cuadro de dilogo Definir texto de capa, utilice el men emergente Capa para elegir la capa de destino. Introduzca un mensaje en el cuadro de texto Nuevo HTML y haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si no aparecen los eventos que desea, cambie el navegador de destino en el men emergente Mostrar eventos para.
3.
4. 5.
586
Seleccione un objeto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y elija Definir texto > Establecer texto de la barra de estado en el men emergente Acciones. 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. Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.
3.
4. 5.
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 911.
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).
587
Seleccione un campo de texto y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y seleccione Definir texto > Definir texto de campo de texto en el men emergente Acciones. 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. Introduzca texto en el cuadro de texto Nuevo texto y luego haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si no aparecen los eventos que desea, cambie el navegador de destino en el men emergente Mostrar eventos para.
3.
4. 5.
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 ventana de documento. Repita este paso para crear capas adicionales. Haga clic en la ventana de documento para anular la seleccin de la capa y luego abra el panel Comportamientos. 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.
2.
3.
588
4. 5.
Seleccione la capa cuya visibilidad desea cambiar en la lista Capas con nombre. Haga clic en Mostrar para mostrar la capa, en Ocultar para ocultarla o en Predeterminada para restaurar la visibilidad predeterminada de la capa. Repita los pasos 4 y 5 para todas las capas restantes cuya visibilidad desee cambiar en este momento. (Se puede cambiar la visibilidad de mltiples capas con un solo comportamiento.) Haga clic en Aceptar. Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.
6.
7. 8.
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. 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. 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.
2.
3.
589
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. En el panel Comportamientos, seleccione Mostrar-Ocultar capas en el men emergente Acciones. Seleccione la capa llamada loading en la lista de Capas con nombre. Haga clic en Ocultar. clic en Aceptar. 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.)
7.
8. 9.
590
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 511.
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+F4). Haga clic en el botn de signo ms (+) y elija Mostrar men emergente en el men emergente Acciones. 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, la URL y el destino de elementos de men individuales. Aspecto
2.
3.
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. desencadenante.
Posicin Permite establecer dnde se sita el men en relacin con la imagen o el vnculo
591
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.
NO TA
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.
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.
NO T A
592
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.
En la ficha Contenido, seleccione la entrada de men que desea eliminar de la lista Mostrar men emergente. Haga clic en el botn de signo menos (-).
2.
El panel de vista previa de la ficha Aspecto ofrece una representacin aproximada de las opciones definidas en esta ficha.
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. 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.
N OT A
2.
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. Cuando termine de definir las opciones de aspecto, haga clic en Aceptar o seleccione otra ficha de Mostrar men emergente para definir opciones adicionales.
4.
593
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. Especifica el nmero de pxeles entre el contenido de una celda y sus Especifica el nmero de pxeles entre celdas contiguas.
Relleno celda
lmites.
Espacio celda 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.
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.
Bordes de ventana emergente Ancho del borde
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.
594
En el cuadro de dilogo Mostrar men emergente, haga clic en la ficha Posicin. 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. Cuando termine de crear o modificar el men emergente, haga clic en Aceptar.
4.
En el documento de Dreamweaver, seleccione el vnculo o la imagen que desencadena el men emergente. Abra el panel Comportamientos (Mays+F4), 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. Realice las modificaciones que desee en el men emergente. Al terminar de modificar el men emergente, haga clic en Aceptar.
2.
3. 4.
Para informacin detallada sobre la configuracin de las opciones de men emergente, vase Mostrar men emergente en la pgina 591.
595
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.
N OT A
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.
Elija Insertar > Imagen o haga clic en el botn Imagen de la barra Insertar para insertar una imagen. 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.
2.
3. 4.
Repita los pasos 1 y 2 para insertar ms imgenes. Seleccione un objeto (normalmente, la imagen que va a intercambiar) y abra el panel Comportamientos. Haga clic en el botn de signo ms (+) y seleccione Intercambiar imagen del men emergente Acciones. Seleccione en la lista Imgenes la imagen cuyo origen desea cambiar. 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. 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. 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.
5.
6. 7.
8.
9.
596
clic en Aceptar.
Compruebe que el evento predeterminado es el que usted desea. Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.
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. 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. Siga uno de estos procedimientos:
2.
3.
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.
597
5.
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. 7.
Seleccione la opcin Obligatorio si el campo debe contener algn dato. 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. Haga clic en Aceptar. Si est validando mltiples campos cuando el usuario enva el formulario, en el men emergente Eventos aparecer automticamente el evento onSubmit.
9.
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.
598
PARTE 5
Para obtener ayuda sobre el material de referencia, presione Mays+F1 en la vista Cdigo.
599
CAPTULO 19
19
601
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. Para mostrar la pgina en la parte superior, elija Ver > Vista de diseo encima. 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.
2. 3.
602
Selector de etiquetas
Ventana de documento
Temas relacionados Cmo abrir archivos en la vista de cdigo de forma predeterminada en la pgina 608.
603
Para establecer preferencias avanzadas, utilice el Editor de la biblioteca de etiquetas (vase Administracin de bibliotecas de etiquetas en la pgina 609).
Visualice un documento en la vista de cdigo o en el inspector de cdigo. Siga uno de estos procedimientos: Seleccione Ver > Opciones de vista de Cdigo Haga clic en el men Ver opciones de la barra de herramientas situada en la parte superior de la vista Cdigo o el inspector de cdigo. Para activar o desactivar una de las opciones siguientes, seleccinela en el men.
Ajustar texto
3.
ajusta el cdigo para que pueda verlo sin necesidad de desplazarse horizontalmente. Esta opcin no inserta saltos de lnea, pero facilita la lectura del cdigo. muestra nmeros de lnea al lado del cdigo.
muestra caracteres especiales en lugar de espacios en blanco. Por ejemplo, un punto sustituye a cada espacio, dos parntesis angulares sustituyen a cada tabulador y un marcador de prrafo sustituye a cada salto de lnea.
N OT A 604
Los saltos de lnea automticos que Dreamweaver utiliza para ajustar el texto no aparecen con un marcador de prrafo.
Resaltar cdigo no vlido hace que Dreamweaver resalte en color amarillo todo el cdigo HTML que no sea vlido. Al seleccionar una etiqueta no vlida, el inspector de propiedades muestra informacin sobre cmo corregir el error.
activa o desactiva los colores del cdigo. Para informacin sobre cmo cambiar la combinacin de colores, vase Configuracin de las preferencias de colores de cdigo en la pgina 607.
aplica automticamente sangra al cdigo cuando presiona Intro mientras escribe el cdigo. La nueva lnea de cdigo aplica sangra al mismo nivel que la lnea anterior. Para informacin sobre cmo cambiar el espaciado de la sangra, vase la opcin Tamao de tabulacin en Configuracin de preferencias de formato de cdigo en la pgina 605.
Sangra automtica
Seleccione Edicin > Preferencias. Seleccione Formato de cdigo en la lista Categora de la izquierda. Aparecen las preferencias de Formato de cdigo. Ajuste los valores de configuracin que desee en el cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
3.
605
Aunque las sugerencias para el cdigo estn desactivadas, puede visualizar una sugerencia emergente en la vista de cdigo presionando Control+Barra espaciadora.
Seleccione Edicin > Preferencias. Seleccione Sugerencias para el cdigo en la lista Categora de la izquierda. Aparecen las preferencias de las sugerencias para el cdigo. Ajuste los valores de configuracin que desee en el cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
3.
606
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Seleccione Reescritura de cdigo en la lista Categora de la izquierda. Aparecen las preferencias de Reescritura de cdigo. Ajuste los valores de configuracin que desee en el cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
3.
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Seleccione Colores de cdigo en la lista Categora de la izquierda. Aparecen las preferencias de Colores de cdigo. Ajuste los valores de configuracin que desee en el cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
3.
607
Temas relacionados Personalizacin de las preferencias de colores de cdigo para una plantilla en la pgina 349
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Seleccione Tipos de archivo/editores en la lista Categora de la izquierda. Aparecen las preferencias de Tipos de archivo/editores. 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.
3.
608
Las preferencias del validador no se tienen en cuenta al validar un documento que especifique de forma explcita una declaracin doctype.
Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). Seleccione Validador en la lista Categora de la izquierda. Aparecen las preferencias del Validador. Seleccione las bibliotecas de etiquetas que desea utilizar para la validacin y establezca las opciones para dichas bibliotecas. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
3.
609
Aparece el Editor de la biblioteca de etiquetas. El contenido de este cuadro de dilogo vara en funcin de la etiqueta seleccionada.
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.
610
Para importar una etiqueta, vase Importacin de etiquetas personalizadas a Dreamweaver en la pgina 614.
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. En el cuadro de texto Nombre de la biblioteca, escriba un nombre (por ejemplo, Etiquetas varias). Haga clic en Aceptar.
2.
3.
En el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas), haga clic en el botn de signo ms (+) y elija Nuevas etiquetas. Aparecer el cuadro de dilogo Nuevas etiquetas. Ajuste los valores de configuracin que desee en el cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
En el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas), haga clic en el botn de signo ms (+) y elija Nuevos atributos. Aparecer el cuadro de dilogo Nuevos atributos. Ajuste los valores de configuracin que desee en el cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
611
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.
NO TA
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.
N OT A
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.
4.
Cuando haya terminado de realizar cambios en el Editor de la biblioteca de etiquetas, haga clic en Aceptar.
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. Establezca las siguientes opciones de Formato de etiqueta:
Saltos de lnea especifica
2.
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.
612
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.
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. 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.
2.
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.
613
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. Haga clic en el botn de signo menos (-). 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. Haga clic en Aceptar para cerrar el Editor de la biblioteca de etiquetas y completar el proceso de eliminacin.
2. 3.
4.
Adicin de bibliotecas, etiquetas y atributos en la pgina 611 Edicin de bibliotecas, etiquetas y atributos en la pgina 612
Abra el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas). Haga clic en el botn de signo ms (+) y seleccione Esquema DTD > Importar XML DTD o archivo de esquema.
614
3. 4.
Introduzca el nombre de archivo o el URL del archivo DTD o de esquema. Introduzca el prefijo que se utilizar con las etiquetas.
NO T A
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.
5.
Abra una pgina ASP.NET en Dreamweaver. Abra el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas). 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.
615
Abra una pgina JSP en Dreamweaver. Abra el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas). Haga clic en el botn de signo ms (+) y elija JSP > Importar de archivo (*.tld, *.jar, *.zip). Introduzca un nombre de archivo, un URI y un prefijo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
5.
Abra una pgina JSP en Dreamweaver. Abra el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas). 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). Introduzca un nombre de archivo y un URI. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
4.
5.
Abra una pgina JSP en Dreamweaver. Abra el Editor de la biblioteca de etiquetas (Edicin > Bibliotecas de etiquetas). 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.
616
4.
Introduzca un nombre de carpeta, un URI y un prefijo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
5.
617
Seleccione Edicin > Editar con HomeSite. Edite el documento en HomeSite y guarde los cambios. Para regresar a Dreamweaver, haga clic en Dreamweaveren la barra de herramientas del editor.
Seleccione Edicin > Editar con BBEdit. Edite el documento en BBEdit. Haga clic en el botn Dreamweaver de la paleta Herramientas HTML de BBEdit para regresar a Dreamweaver.
Seleccione Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X), y elija Tipos de archivo/editores. Desactive Activar integracin con BBEdit y haga clic en Aceptar.
2.
618
Seleccione Edicin > Preferencias. Seleccione Tipos de archivo/editores en la lista Categora de la izquierda. Aparecen las preferencias de Tipos de archivo/editores. Ajuste los valores de configuracin que desee en el cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
3.
4.
Temas relacionados Cmo abrir archivos en la vista de cdigo de forma predeterminada en la pgina 608
Inicio de un editor externo de archivos multimedia en la pgina 537 Utilizacin de un editor de HTML integrado en la pgina 617
619
620
CAPTULO 20
Codificacin en Dreamweaver
Macromedia Dreamweaver 8 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.
NO T A
20
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.
Temas relacionados Configuracin del entorno de codificacin en la pgina 601 Optimizacin y depuracin del cdigo en la pgina 653 Edicin de cdigo en la vista Diseo en la pgina 663 Comparacin de archivos para detectar diferencias en la pgina 125
621
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 sea vlido. Temas relacionados Visualizacin del cdigo en la pgina 601
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 623
622
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 Dreamweaver en la pgina 617. 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.
Codificacin en Dreamweaver
623
Opcionalmente, puede establecer que Dreamweaver resalte en amarillo el cdigo no vlido en la vista Cdigo. Al seleccionar una seccin resaltada, el inspector de propiedades muestra informacin sobre cmo corregir el error.
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
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).
El elemento raz del documento debe ser html, y el elemento html debe designar el atributo namespace de 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.
Requisito XHTML
Todos los elementos de un documento deben Genera cdigo correctamente anidado y, estar correctamente anidados. cuando limpia el XHTML, corrige la anidacin <p>This is a <i>bad example.</p></i> de cualquier cdigo no generado por <p>This is a <i>good example.</i></p> 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. Inserta etiquetas de cierre en el cdigo que genera, y cuando limpia el XHTML. Inserta elementos vacos con un espacio delante de la barra diagonal de cierre en el cdigo que genera, y cuando limpia el XHTML.
Todos los elementos deben incluir una etiqueta de cierre, salvo que se especifique EMPTY (vaco) en la DTD. 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/>). 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. Todos los valores de atributo deben estar entre comillas. 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>.
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. Coloca comillas en los valores de atributo en el cdigo que genera y cuando limpia el XHTML. 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.
Codificacin en Dreamweaver
625
Requisito 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. 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. Todos los elementos img y area deben incluir un atributo alt.
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. Establece estos atributos en el cdigo que genera y, cuando limpia el XHTML, informa de los atributos alt que faltan.
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.
626
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. 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 determinados.)
NO T A
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 672
Codificacin en Dreamweaver
627
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 647. 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
Principio de entrada o lnea.
Ejemplo
^T encontrar T en This
good earth, pero no en Uncle Toms Cabin $ * + Fin de entrada o lnea. El carcter anterior 0 o ms veces. El carcter anterior 1 o ms veces.
h$ encontrar h en teach,
pero no en teacher
um* encontrar um en rum,
umm en yummy, pero no en huge ? El carcter anterior una vez como mximo (es decir, indica que el carcter anterior es opcional). Cualquier carcter individual, salvo el de salto de lnea. x o y.
st?on encontrar son en Johnson y ston en Johnston, pero no en Appleton o tension .an encontrar ran y can en la
. x|y
{n}
Exactamente n apariciones del carcter anterior. Como mnimo n y como mximo m apariciones del carcter anterior.
{n,m}
628
Carcter
[abc]
Texto buscado
Cualquiera de los caracteres entre corchetes. Especifique un rango de caracteres con un guin (por ejemplo, [a-f] es equivalente a [abcdef]). Cualquier carcter que no est entre corchetes. Especifique un rango de caracteres con un guin (por ejemplo, [^a-f] es equivalente a [^abcdef]). Lmite de palabra (como un espacio o un retorno de carro). Cualquiera que no sea un lmite de palabra. Cualquier carcter de dgito. Equivalente a [0-9]. Cualquier carcter que no sea de dgito. Equivalente a [^0-9]. Salto de pgina. Salto de lnea. Retorno de carro. Cualquier carcter individual de espacio en blanco (espacios, tabulaciones, saltos de pgina o saltos de lnea). Cualquier carcter individual que no sea un espacio en blanco. Tabulacin.
Ejemplo
[e-g] encontrar e en bed, f en folly, y g en guard
[^abc]
\b \B \d \D \f \n \r \s
no en goober ni snob
\Bb encontrar b en goober, pero
no en book
\d encontrar 3 en C3PO y 2
en apartment 2G
\D encontrar S en 900S y Q
en Q45
\S \t \w
Cualquier carcter alfanumrico, b\w* encontrar barking en the incluido el de subrayado. Equivalente barking dog y big y black en a [A-Za-z0-9_]. the big black dog
Codificacin en Dreamweaver
629
Carcter
\W
Texto buscado
Ejemplo
Cualquier carcter que no sea \W encontrar & en Jake&Mattie alfanumrico. Equivalente a [^A-Za- y % en 100% z0-9_]. 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.
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.
N OT A
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 647 Almacenamiento de modelos de bsqueda en la pgina 648
630
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 606.
La lista de sugerencias para el cdigo desaparece cuando se presiona Retroceso (Windows) o Eliminar (Macintosh).
631
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
2.
Desplcese por la lista mediante la barra de desplazamiento o con las teclas de flecha arriba y flecha abajo. Para insertar un elemento de la lista, haga doble clic en l o seleccinelo y presione Intro (Windows) o Retorno (Macintosh).
S U G E R E N CI A
3.
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.
Escriba </ (barra inclinada). De forma predeterminada, Dreamweaver determina qu etiqueta debe cerrarse y el programa lo hace por usted. Puede cambiar este comportamiento predeterminado para que Dreamweaver inserte la etiqueta de cierre tras escribir el parntesis angular final (>) de la etiqueta de apertura o para que no se inserte ninguna etiqueta. Seleccione Edicin > Preferencias > Sugerencias para el cdigo y, a continuacin, seleccione una de las opciones del rea Cerrar etiquetas.
632
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.
Temas relacionados Configuracin de las preferencias de sugerencias para el cdigo en la pgina 606
Con Dreamweaver 8, los fragmentos de cdigo con etiquetas <font> y otros elementos y atributos que ya no se utilizan se han desplazado a la carpeta Legacy del panel Fragmentos.
Site el punto de insercin donde desee insertar el fragmento de cdigo, o seleccione cdigo para ajustar un fragmento alrededor. 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.
2.
633
En el panel Fragmentos, haga clic en el icono Nuevo fragmento situado en la parte inferior del panel. Aparecer el cuadro de dilogo Fragmento. Rellene el cuadro de dilogo y haga clic en Aceptar. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
2.
En el panel Fragmentos, seleccione un fragmento y haga clic en el botn Editar fragmento situado en la parte inferior del panel.
En el panel Fragmentos, seleccione un fragmento y haga clic en el botn Quitar situado en la parte inferior del panel.
En el panel Fragmentos, haga clic en el icono Nueva carpeta de fragmentos situado en la parte inferior del panel. Arrastre los fragmentos que desee a la nueva carpeta o a otras carpetas.
2.
En el panel Fragmentos, haga clic con el botn derecho del ratn (Windows) mantenga presionada la tecla Control y haga clic (Macintosh) y seleccione Editar mtodos abreviados de teclado. Aparecer el editor de mtodos abreviados de teclado. En el men emergente Comandos, seleccione Fragmentos. Aparecer una lista de fragmentos. Seleccione un fragmento y asgnele un mtodo abreviado de teclado. Para ms informacin, consulte Personalizacin de los mtodos abreviados de teclado en la pgina 83.
2.
3.
634
Busque el archivo correspondiente al fragmento que desea compartir en la carpeta Configuration\Snippets de la carpeta de la aplicacin Dreamweaver. Copie el archivo del fragmento en una carpeta compartida de su equipo o de un equipo de red. Solicite a los dems miembros del equipo que copien el archivo del fragmento en sus carpetas Configuration\Snippets.
2.
3.
Asegrese que est en la vista Cdigo (Ver > Cdigo). Site el punto de insercin en el cdigo o seleccione un bloque de cdigo. Haga clic en un botn de la barra de herramientas Codificacin o seleccione un elemento de un men emergente de la barra de herramientas.
Para averiguar la funcin de cada botn, site el puntero sobre l para que aparezca una descripcin de la herramienta. Los botones siguientes se muestran en la barra de herramientas de codificacin de forma predeterminada.
Abrir documentos muestra los documentos abiertos. Al seleccionar uno, ste se muestra en la ventana de documento.
contrae el contenido situado entre un conjunto de etiquetas inicial y final (por ejemplo, el contenido situado entre <table> y </table>). Debe situar el punto de insercin en la etiqueta inicial o final y luego hacer clic en el botn Contraer etiqueta completa para contraer la etiqueta.
Contraer etiqueta completa
S U G E R E N CI A
Tambin puede contraer el cdigo situado fuera de una etiqueta completa situando el punto de insercin dentro de una etiqueta inicial o final, manteniendo presionada la tecla Alt y haciendo clic (Windows) o manteniendo presionada la tecla Opcin y haciendo clic (Macintosh) en el botn Contraer etiqueta completa. Asimismo, al mantener presionada la tecla Control mientras se presiona este botn, se desactiva la contraccin inteligente, por lo que Dreamweaver no ajusta el contenido que contrae fuera de las etiquetas completas. Para ms informacin, consulte Acerca de la contraccin del cdigo en la pgina 640.
635
Contraer seleccin
S UG E R E NC I A
Tambin puede contraer el cdigo situado fuera de una seleccin manteniendo la tecla Alt presionada y haciendo clic (Windows) o manteniendo la tecla Opcin presionada y haciendo clic (Macintosh) en el botn Contraer seleccin. Asimismo, al mantener presionada la tecla Control mientras se presiona este botn, se desactiva la contraccin inteligente, lo que le permite contraer exactamente lo que ha seleccionado sin ninguna manipulacin por parte de Dreamweaver. Para ms informacin, consulte Acerca de la contraccin del cdigo en la pgina 640.
Expandir todo
Seleccionar etiqueta padre selecciona el contenido y las etiquetas inicial y final circundantes de la lnea en la que ha situado el punto de insercin. Si hace clic repetidamente en este botn y las etiquetas estn equilibradas, Dreamweaver seleccionar las etiquetas html y /html ms externas. Equilibrar llaves selecciona el contenido y los parntesis, llaves o corchetes inicial y final de la lnea en la que ha situado el punto de insercin. Si hace clic repetidas veces en este botn y los smbolos estn equilibrados, Dreamweaver seleccionar en ltimo trmino las llaves, los parntesis o los corchetes ms externos del documento. Mostrar nmeros de lnea le permite ocultar o mostrar nmeros al comienzo de cada lnea de
cdigo.
Resaltar cdigo no vlido Aplicar comentario
le permite incluir etiquetas de comentario alrededor del cdigo seleccionado o abrir etiquetas de comentario nuevas. Apply HTML Comment (Aplicar comentario HTML) envuelve el cdigo seleccionado con <!-- y --!> o abre una nueva etiqueta si no hay cdigo seleccionado. Aplicar comentario // inserta // al comienzo de cada lnea del cdigo CSS o JavaScript seleccionado o inserta una sola etiqueta // si no hay cdigo seleccionado. Apply /* */ (Aplicar /* */) envuelve el cdigo CSS o JavaScript seleccionado con /* y */. Aplicar comentario ' se utiliza en el cdigo de Visual Basic. Inserta una comilla simple al comienzo de cada lnea de script Visual Basic o inserta una comilla simple en el punto de insercin si no hay cdigo seleccionado. Cuando est trabajando en un archivo ASP, ASP.NET, JSP, PHP o Macromedia ColdFusion y seleccione la opcin Aplicar comentario de servidor, Dreamweaver detectar automticamente la etiqueta de comentario correcta y la aplicar a la seleccin.
elimina las etiquetas de comentario del cdigo seleccionado. Si una seleccin contiene comentarios anidados, slo se eliminarn las etiquetas de comentario externas.
Quitar comentario
636
Ajustar etiqueta
Fragmentos recientes le permite insertar un fragmento de cdigo utilizado recientemente del panel Fragmentos. Para ms informacin, consulte Utilizacin de fragmentos de cdigo en la pgina 633. Sangrar cdigo
aplica los formatos de cdigo previamente especificados al cdigo seleccionado o a toda la pgina si no hay cdigo seleccionado. Tambin puede definir rpidamente las preferencias de formato de cdigo seleccionando Configuracin de formato de cdigo en el botn Aplicar formato de origen, o editar las bibliotecas de etiquetas mediante el comando Edicin > Bibliotecas de etiquetas. El nmero de botones disponibles en la barra de herramientas Codificacin depende del tamao de la vista Cdigo en la ventana de documento. Para ver todos los botones disponibles, puede cambiar el tamao de la ventana de la vista Cdigo o hacer clic en el botn de flecha de ampliacin situado en la parte inferior de la barra de herramientas Codificacin. Tambin puede modificar la barra de herramientas Codificacin para que muestre ms botones (como Ajustar texto, Caracteres ocultos y Sangra automtica) u ocultar botones que no desea utilizar. Para ello, no obstante, deber editar el archivo XML que genera la barra de herramientas. Para ms informacin, consulte Ampliacin de Dreamweaver.
N OT A
La opcin para ver los caracteres ocultos (no es un botn predeterminado de la barra de herramientas de codificacin) est disponible en el men Ver (Ver > Opciones de vista de cdigo > Caracteres ocultos).
Temas relacionados Barra de herramientas Codificacin en la pgina 51 Visualizacin de barras de herramientas en la pgina 58 Verificacin de que las etiquetas y llaves estn equilibradas en la pgina 654
637
Site el punto de insercin en el cdigo. Seleccione una categora en la barra Insertar. 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 49
638
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. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Para cerrar el Selector de etiquetas, haga clic en el botn Cerrar.
3.
639
Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y 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. Especifique o edite los atributos de la etiqueta y haga clic en Aceptar.
SUGERENCIA
2.
Para ms informacin sobre la etiqueta en el Quick tag editor, haga clic en Datos de etiqueta.
Acerca de la contraccin del cdigo en la pgina 640 Contraccin y ampliacin de fragmentos de cdigo en la pgina 641 Pegado y desplazamiento de fragmentos de cdigo contrados en la pgina 643
640
En ocasiones, es posible que Dreamweaver no contraiga exactamente el fragmento de cdigo que ha seleccionado. Dreamweaver utiliza la contraccin inteligente para contraer la seleccin ms habitual y que resulte ms agradable a la vista. Por ejemplo, si selecciona una etiqueta sangrada y tambin selecciona los espacios sangrados situados delante de la etiqueta, Dreamweaver no contraer los espacio sangrados, ya que la mayora de los usuarios esperan que se conserve la sangra. Si desea desactivar la contraccin inteligente y hacer que Dreamweaver contraiga exactamente lo que ha seleccionado, puede hacerlo manteniendo presionada la tecla Control antes de contraer el cdigo. Asimismo, Dreamweaver sita un icono de advertencia en los fragmentos de cdigo contrados si un fragmento contiene errores o cdigo no admitido por determinados navegadores.
NO T A
Los archivos creados a partir de plantillas de Dreamweaver muestran todo el cdigo totalmente ampliado aunque el archivo de plantilla (.dwt) contenga fragmentos de cdigo contrados.
Temas relacionados Pegado y desplazamiento de fragmentos de cdigo contrados en la pgina 643 Limpieza del cdigo en la pgina 653 Insercin rpida de cdigo con la barra de herramientas Codificacin en la pgina 635
Seleccione un fragmento de cdigo. Seleccione Edicin > Contraer cdigo > Contraer seleccin, o bien haga clic en alguno de los botones situados junto a la seleccin.
En la vista Cdigo, seleccione cdigo. Seleccione Edicin > Contraer cdigo > Contraer seleccin externa.
S U G E R E N CI A
Tambin puede contraer el cdigo situado fuera de una seleccin manteniendo la tecla Alt presionada y haciendo clic (Windows) o manteniendo la tecla Opcin presionada y haciendo clic (Macintosh) en uno de los botones de contraccin o en el botn Contraer seleccin de la barra de herramientas de codificacin.
641
En la vista Cdigo, site el punto de insercin dentro de una etiqueta inicial o final (por ejemplo, dentro de la etiqueta <table> o </table>). Seleccione Edicin > Contraer cdigo > Contraer etiqueta completa.
S UG E R E NC I A
2.
Tambin puede contraer una etiqueta completa haciendo clic con el botn derecho del ratn en la etiqueta en el selector de etiquetas y seleccionando Contraer etiqueta completa.
Siga uno de estos procedimientos: En la vista Cdigo, site el punto de insercin dentro de una etiqueta inicial o final (por ejemplo, dentro de la etiqueta <table> o </table>). En la vista Cdigo, seleccione parte de una etiqueta inicial o final. Seleccione Edicin > Contraer cdigo > Contraer etiqueta completa externa.
S U G E R E N CI A
2.
Tambin puede contraer el cdigo situado fuera de una etiqueta completa haciendo clic con el botn derecho del ratn en la etiqueta en el selector de etiquetas y seleccionando Contraer etiqueta completa externa o situando el punto de insercin dentro de una etiqueta inicial o final, manteniendo presionada la tecla Alt y haciendo clic en el botn Contraer etiqueta completa de la barra de herramientas Codificacin.
Cuando realice una seleccin en la vista Diseo que forme parte de un fragmento de cdigo contrado, Dreamweaver ampliar automticamente el fragmento en la vista Cdigo. Cuando realice una seleccin en la vista Diseo que constituya un fragmento de cdigo completo, el fragmento permanecer contrado en la vista Cdigo.
En la vista Cdigo, haga doble clic en el fragmento de cdigo. Seleccione Edicin > Contraer cdigo > Expandir seleccin.
Pase el punto del ratn por encima del fragmento de cdigo contrado.
642
Tambin puede utilizar los siguientes mtodos abreviados de teclado para ejecutar cualquiera de los comandos anteriores:
Comando
Contraer seleccin Contraer seleccin externa Expandir seleccin Contraer etiqueta completa
Windows
Control+Mays+C Control+Alt+C Control+Mays+E Control+Mays+J
Macintosh
Comando+Mays+C Comando+Alt+C Comando+Mays+E Comando+Mays+J Comando+Alt+J Comando+Alt+E
Limpieza del cdigo en la pgina 653 Insercin rpida de cdigo con la barra de herramientas Codificacin en la pgina 635
Seleccione el fragmento de cdigo contrado. Seleccione Edicin > Copiar. Site el punto de insercin en el lugar en que desea pegar el cdigo. Seleccione Edicin > Pegar.
NO T A
Es posible pegar en otras aplicaciones, pero el estado contrado del fragmento de cdigo no se conserva.
643
Para arrastrar una copia de la seleccin, utilice Control-arrastrar (Windows) o Alt-arrastrar (Macintosh).
Contraccin y ampliacin de fragmentos de cdigo en la pgina 641 Limpieza del cdigo en la pgina 653 Insercin rpida de cdigo con la barra de herramientas Codificacin en la pgina 635
Para anular la sangra del bloque de cdigo seleccionado, siga uno de estos procedimientos:
644
Copie el cdigo desde Dreamweaver o desde otra aplicacin. Site el punto de insercin en la vista Cdigo y elija Edicin > Pegar.
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.
Seleccione Ver > Ayudas visuales > Elementos invisibles. No olvide seleccionar la opcin Comentarios en las preferencias de los elementos invisibles ya que, de lo contrario, no aparecer el marcador de comentario.
En la vista Diseo, seleccione el marcador de comentario y edite el texto del comentario en el inspector de propiedades. En la vista Cdigo, busque el comentario y edite el texto correspondiente.
645
Abra el documento en vista Cdigo (Ver > Cdigo) o en el inspector de cdigo (Ventana > Inspector de cdigo). Siga uno de estos procedimientos:
2.
Si utiliza la vista Cdigo, haga clic con el botn derecho del ratn (Windows) o presione la tecla Control y haga clic (Macintosh) en cualquier punto de la vista Cdigo y, seguidamente, seleccione el submen Funciones en el men contextual.
N OT A SUGERENCIA
Si utiliza el inspector de cdigo, haga clic en el botn Navegacin por el cdigo de la barra de herramientas. Este botn est representado por un par de llaves ({ }).
3.
646
Cmo buscar y reemplazar texto en la pgina 457 Comparacin de archivos para detectar diferencias en la pgina 125
Abra el documento en el que se debe realizar la bsqueda o seleccione los documentos o una carpeta del panel Archivos. Seleccione Edicin > Buscar y reemplazar. Se abre el cuadro de dilogo Buscar y reemplazar. 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. Para ms informacin, haga clic en el botn Ayuda. Una vez que haya terminado, haga clic en el botn Cerrar para salir de este cuadro de dilogo.
2.
3.
4.
647
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 647 para informacin sobre la configuracin de parmetros adicionales de bsqueda.
2. 3.
Haga clic en el botn Guardar consulta (icono de disco). 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.
N OT A
Las consultas guardadas tienen la extensin de nombre de archivo .dwr. Algunas consultas guardadas de versiones anteriores de Dreamweaver pueden tener la extensin .dwq.
Seleccione Edicin > Buscar y reemplazar. Haga clic en el botn Cargar consulta (identificado con un icono de carpeta). Vaya a la carpeta donde se guardan las consultas. Seleccione un archivo de consulta y haga clic en Abrir. Haga clic en Buscar siguiente, Buscar todos, Reemplazar o Reemplazar todos para iniciar la bsqueda.
4.
Temas relacionados Bsqueda de etiquetas, atributos o texto contenidos en etiquetas especficas en la pgina 647
648
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. 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
2.
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 605.
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. aplica sangra a la seleccin, desplazndola a la derecha. Para ms informacin sobre las sangras, consulte Aplicacin de sangra a los bloques de cdigo en la pgina 644. desplaza la seleccin a la izquierda. elimina todas las etiquetas de la seleccin. especifica la seleccin en una etiqueta table sin atributos.
Sangra
Anular sangra
Quitar todas las etiquetas Convertir lneas en tabla Aadir saltos de lnea
Convertir en maysculas
convierte todas las letras de la seleccin (incluidos los nombres de atributos y etiquetas y los valores) en maysculas. convierte todas las letras de la seleccin (incluidos los nombres de atributos y etiquetas y los valores) en minsculas.
Convertir en minsculas
649
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
Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla 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 Mays+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).
Haga clic en cualquier lugar del cdigo de muestra del contenido de referencia. Dreamweaver resalta todo el cdigo de muestra. Seleccione Edicin > Copiar y, a continuacin, pegue el cdigo de muestra en su documento en la vista Cdigo.
2.
650
Para mostrar etiquetas, objetos o estilos de otro libro, seleccione el libro que desee en el men emergente Libro. Para ver la informacin relativa a un elemento concreto, seleccinelo en el men emergente Etiqueta, Objeto, Estilo o CFML (en funcin del libro que haya seleccionado). 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 o CFML. Este men contiene la lista de atributos del elemento seleccionado. La seleccin predeterminada es Descripcin, que muestra una descripcin del elemento seleccionado.
2.
3.
Abra una pgina en la vista de Cdigo. Seleccione Archivo > Imprimir cdigo. Especifique las opciones de impresin y haga clic en Aceptar (Windows) o en Imprimir (Macintosh).
651
652
CAPTULO 21
21
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.
653
2.
En el cuadro de dilogo que aparece, seleccione una de las opciones. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. Segn el tamao del documento y el nmero de opciones seleccionadas, la operacin de limpieza puede tardar varios segundos en realizarse.
3.
Abra el documento en la vista Cdigo. Site el punto de insercin en el cdigo anidado que desea comprobar. 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.
Abra el documento en la vista Cdigo. Site el punto de insercin en el cdigo que desea comprobar. 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.
654
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. 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.
N O TA
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.
655
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.
NO TA
La funcin Comprobar navegadores de destino utiliza archivos de texto denominados perfiles de navegador para determinar qu etiquetas son compatibles con los navegadores. Para informacin sobre cmo modificar los perfiles existentes o crear perfiles nuevos, vase Personalizacin de Dreamweaver en www.macromedia.com/ go/dreamweaver_support_es/.
Seleccione Configuracin en el men Comprobar navegadores de destino en la barra de herramientas Documento. Aparecer el cuadro de dilogo Comprobar navegadores de destino. Seleccione la casilla de verificacin de los navegadores que desee comprobar. 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.
2. 3.
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.
S UG E R E NC I A 656
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.
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. 2. 3.
Abra el panel Revisin del navegador de destino. Seleccione un mensaje de error que sea demasiado largo para leerlo en el panel. 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.
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:
657
Para ejecutar manualmente una revisin del navegador de destino en el archivo actual:
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. 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).
2.
3.
Para cancelar un informe en ejecucin, haga clic en el botn Detener del panel Revisin del navegador de destino.
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.
Haga clic en el botn Guardar informe del panel Revisin del navegador de destino.
NO T A
El informe de comprobacin de navegadores de destino no se guarda automticamente. Si desea tener una copia como referencia en el futuro, gurdelo.
Haga clic en el botn Examinar informe del panel Revisin del navegador de destino.
Elimine el cdigo incompatible o cmbielo por otro cdigo que sea compatible con sus navegadores de destino.
658
Para especificar que Dreamweaver pase por alto un tipo concreto de error:
Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en el cdigo subrayado en rojo y seleccione Ignore 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.
N OT A
Para validar la accesibilidad del documento consulte Comprobacin del sitio en la pgina 173.
Para un archivo XML (o XHTML), seleccione Archivo > 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. 3. 4.
Haga doble clic sobre un mensaje de error para seleccionar el error en el documento. Para guardar el informe como un archivo XML, haga clic en el botn Guardar informe. 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 609. Temas relacionados Comprobacin de la compatibilidad con los navegadores en la pgina 655
Validacin de etiquetas
659
Seleccione Archivo > Nuevo. Aparecer el cuadro de dilogo Nuevo documento. Seleccione la categora y el tipo de pgina que va a crear. Seleccione una de las definiciones de tipo de documento XHTML (DTD) en el men emergente Tipo de documento (DTD). Por ejemplo, puede hacer que un documento HTML sea compatible con XHTML seleccionando XHTML 1.0 de transicin o XHTML 1.0 estricto del men emergente.
N OT A
2. 3.
4.
Seleccione Edicin > Preferencias o Dreamweaver > Preferencias (Mac OS X) y seleccione la categora Nuevo documento. En la categora Nuevo documento, seleccione un documento predeterminado y una de las definiciones de tipo de documento XHTML (DTD) en el men emergente Tipo de documento predeterminado (DTD). Por ejemplo, puede hacer que un documento HTML sea compatible con XHTML seleccionando XHTML 1.0 de transicin o XHTML 1.0 estricto del men emergente.
2.
3.
660
Para crear un documento un documento compatible con XHTML a partir de un documento HTML:
En el caso de documentos sin marcos, seleccione Archivo > Convertir y, a continuacin, seleccione una de las definiciones de tipo de documento XHTML. Por ejemplo, puede hacer que un documento HTML sea compatible con XHTML seleccionando XHTML 1.0 de transicin o XHTML 1.0 estricto del men emergente.
En el caso de documentos con marcos, seleccione un marco y, despus, seleccione Archivo > Convertir. A continuacin, seleccione una de las definiciones de tipo de documento XHTML. Para convertir todo el documento, repite este paso con todos los marcos y con el documento de conjunto de marcos.
NO T A
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.
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.
Si ejecuta ColdFusion MX 6.1 o anterior, asegrese de que la configuracin de depuracin est activada en ColdFusion Administrator antes de comenzar a depurar. Para ms informacin, consulte la documentacin de ColdFusion en Utilizacin de Dreamweaver (Ayuda > Utilizacin de ColdFusion). Si ejecuta ColdFusion MX 7 o superior, Dreamweaver activar la configuracin automticamente.
661
Asegrese tambin de que el servidor de prueba de Dreamweaver ejecuta ColdFusion. Para ms informacin sobre el servidor de prueba de Dreamweaver, consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 690.
S U G E R E N CI A
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.
Abra la pgina de ColdFusion en Dreamweaver. Haga clic en el icono Depuracin del servidor en la barra de herramientas Documento. Dreamweaver solicita el archivo del servidor de ColdFusion 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).
662
CAPTULO 22
22
Edicin de cdigo con el inspector de propiedades . . . . . . . . . . . . . . . . . . . . . . . . . .664 Cambio de atributos con el inspector de etiquetas . . . . . . . . . . . . . . . . . . . . . . . . . . .664 Edicin de cdigo con Quick Tag Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .666 Edicin de cdigo con el selector de etiquetas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .670 Edicin de scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 671 Utilizacin de server-side includes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 672 Utilizacin de comportamientos JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674 Visualizacin y edicin del contenido de Head . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674
663
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.
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.
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.
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. Siga uno de estos procedimientos en el inspector de etiquetas:
3.
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 atributovalor 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.
N OT A
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.
4.
Presione Intro (Windows) o Retorno (Macintosh) o haga clic en cualquier punto del inspector de etiquetas para actualizar la etiqueta en el documento.
665
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 781.
Utilizacin de comportamientos JavaScript en la pgina 559 Utilizacin de hojas de estilos en cascada para aplicar formato al texto en la pgina 444
En la vista Diseo, haga clic en la pgina para colocar el punto de insercin donde desee insertar cdigo. Presione Control+T (Windows) o Comando+T (Macintosh). Quick Tag Editor se abre en modo Insertar HTML.
2.
666
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.
Temas relacionados Aplicacin de HTML a una seleccin con Quick Tag Editor en la pgina 668
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 670.
2.
Presione Control+T (Windows) o Comando+T (Macintosh). Quick Tag Editor se abre en modo Editar etiqueta. Introduzca nuevos atributos, edite atributos existentes o edite el nombre de la etiqueta. 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. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
3. 4.
5. 6.
Para cerrar Quick Tag Editor y aplicar todos los cambios, presione Intro. Para salir sin hacer ningn otro cambio, presione Escape.
Temas relacionados Insercin de una etiqueta HTML con Quick Tag Editor en la pgina 666
667
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. 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.
3.
4.
Para salir sin realizar ningn cambio, en lugar de presionar Intro, presione Escape.
Las preferencias de sugerencias de cdigo de Quick Tag Editor estn regidas por las preferencias de sugerencias de cdigo habituales. Para ms informacin, consulte Configuracin de las preferencias de sugerencias para el cdigo en la pgina 606.
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. Para prescindir del men de sugerencias sin insertar ningn elemento, presione Escape o bien contine escribiendo.
3.
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. Para desactivar el men de sugerencias, anule la seleccin de la opcin Activar sugerencias de etiquetas. Para modificar el tiempo que debe transcurrir antes de que el men aparezca, ajuste el control deslizante Demora. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
4.
Temas relacionados Edicin de una etiqueta HTML con Quick Tag Editor en la pgina 667
669
Haga clic en el documento. Las etiquetas presentes en el punto de insercin aparecen en el selector de etiquetas. Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en una etiqueta del selector de etiquetas. Aparece un men emergente. En dicho men, seleccione Editar etiqueta.
2.
3.
Se abre Quick Tag Editor. Para ms informacin, consulte Edicin de una etiqueta HTML con Quick Tag Editor en la pgina 667.
Para eliminar una etiqueta:
1.
Haga clic en el documento. Las etiquetas presentes en el punto de insercin aparecen en el selector de etiquetas. Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en una etiqueta del selector de etiquetas. Aparece un men emergente. En dicho men, seleccione Quitar etiqueta.
2.
3.
Haga clic en el documento. Las etiquetas presentes en el punto de insercin aparecen en el selector de etiquetas. Haga clic en una etiqueta del selector de etiquetas.
2.
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.
Site el punto de insercin en el lugar donde desea introducir el script. Seleccione Insertar > Objetos de script > Script. Se abre el cuadro de dilogo Script. Rellene el cuadro de dilogo y haga clic en Aceptar. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
3.
Site el punto de insercin en el lugar donde desea introducir el script. Seleccione Insertar > Objetos de script > Script. Se abre el cuadro de dilogo Script. Haga clic en Aceptar sin escribir nada en el cuadro Contenido. Seleccione el marcador de scripts en la vista Diseo de la ventana de documento. 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.
3. 4. 5.
Edicin de scripts
671
Seleccione el marcador de scripts. 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.
N OT A
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. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
Seleccione Insertar > Server-Side Include. En el cuadro de dilogo que aparece, localice y seleccione un archivo. De forma predeterminada, Dreamweaver inserta un include de tipo Archivo.
672
3.
Para cambiar el tipo del include, seleccione el server-side include en la ventana de documento y cambie el tipo en el inspector de propiedades (Ventana > Propiedades) tal como se indica a continuacin:
Si se trata de un servidor Web Apache, elija el tipo Virtual. 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 determinados.)
NO T A
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.
Seleccione el server-side include en la ventana de documento. Abra el inspector de propiedades (Ventana > Propiedades). Siga uno de estos procedimientos:
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.
Seleccione el server-side include en la vista Diseo o la vista Cdigo y haga clic en Editar en el inspector de propiedades. El archivo incluido se abrir en una nueva ventana de documento.
673
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.
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.
N OT A
Si la ventana de documento est configurada para mostrarse slo en la vista Cdigo, la opcin Ver > Contenido de Head aparecer atenuada.
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.
674
Seleccione Ver > Contenido de Head. Haga clic en uno de los iconos de la seccin head para seleccionarlo. 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, consulte Utilizacin de Dreamweaver
675
676
PARTE 6
677
CAPTULO 23
23
Un servidor Web (vase Configuracin de un servidor Web en la pgina 680) Un servidor de aplicaciones que se ejecute en el servidor Web (vase Configuracin de un servidor de aplicaciones en la pgina 681)
NO T A
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 691. 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.
679
680
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).
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 Primeros pasos con Dreamweaver. La siguiente tabla muestra algunos de los servidores de aplicaciones ms utilizados para las cinco tecnologas de servidor admitidas por Dreamweaver:
Tecnologa de servidor
ColdFusion ASP.NET ASP JSP
Servidor de aplicaciones
Macromedia ColdFusion MX 7 Microsoft IIS 6 con .NET Framework Microsoft IIS SUN ONE Active Server Pages Macromedia JRun Sun ONE Application Server IBM WebSphere Apache Tomcat BEA WebLogic Servidor PHP
PHP
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.
681
Developer Edition es una edicin de uso no comercial que se utiliza para desarrollar y probar aplicaciones Web. No tiene licencia para implementarla. Admite solicitudes del host local y de dos direcciones IP remotas. Puede utilizarlo para desarrollar y probar sus aplicaciones Web siempre que quiera; el software no caduca. Para ms informacin, consulte el apartado Versiones de producto de ColdFusion MX 7 en Utilizacin de ColdFusion (Ayuda > Utilizacin de ColdFusion).
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. 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/cfmx7_mac. 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 685.
Asegrese de que Framework y SDK estn instalados y en funcionamiento en un sistema Windows 2000 o Windows XP Professional que ejecute IIS 5 o superior
682
Compruebe si .NET Framework est instalado en el sistema revisando la lista de aplicaciones del cuadro de dilogo Agregar o quitar programas (inicio > Panel de control > Agregar o quitar programas). Si Microsoft .NET Framework 1.1 aparece en la lista, Framework ya est instalado, por lo que no tendr que volver a instalarlo. Contine con el paso 3.
2.
Si .NET Framework no est instalado en el sistema, instale Microsoft .NET Framework 1.1 Redistributable Package (Paquete redistribuible de Microsoft .NET Framework 1.1) del sitio Web de Microsoft http://msdn.microsoft.com/netframework/downloads/ framework1_1/ y siga las instrucciones de instalacin que aparecen en el sitio Web. Framework se instala como una actualizacin de Windows. Descargue Microsoft .NET Framework 1.1 Software Development Kit (SDK) del mismo sitio Web y siga las instrucciones de instalacin.
3.
Se recomienda encarecidamente instalar tambin el paquete Microsoft Data Access Components (MDAC) 2.7 despus de instalar .NET Framework y SDK. Puede descargar e instalar el paquete MDAC 2.7 gratis del sitio Web de Microsoft http://msdn.microsoft.com/ data/mdac/downloads/. Los usuarios de Macintosh pueden utilizar un servicio de alojamiento Web con un plan ASP.NET o instalar .NET Framework y SDK en un equipo Windows 2000 o Windows XP Professional remoto que ejecute IIS 5 o posterior. Despus de instalar .NET Framework y SDK, cree una carpeta raz para la aplicacin Web. Vase Creacin de una carpeta raz para la aplicacin en la pgina 685.
683
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/ es/software/jrun/. Tomcat para Windows y UNIX (incluido 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.
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 685.
www.macromedia.com/go/php_macintosh/ http://developer.apple.com/internet/opensource/php.html
Para ms informacin sobre el servidor de aplicaciones, consulte la documentacin de PHP, que puede descargar tambin del sitio Web de PHP www.php.net/download-docs.php. Despus de instalar el servidor de aplicaciones PHP, cree una carpeta raz para la aplicacin Web.
684
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
685
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 cual sea el servidor Web:
Servidor Web
ColdFusion MX 7 IIS Apache (Windows) Apache (Macintosh)
URL Localhost
http://localhost:8500/testpage.htm http://localhost/testpage.htm http://localhost:80/testpage.htm http://localhost/~MyUserName/testpage.htm (donde MyUserName es su nombre de usuario Macintosh) http://localhost:8080/testpage.htm
De forma predeterminada, el servidor Web de ColdFusion MX 7 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:\CFusionMX7\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.
686
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 680. 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 681. 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 685. 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 688). 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 688). 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 690).
Para definir un sitio de Dreamweaver para la aplicacin Web, siga estos tres pasos:
1.
2.
3.
Una vez definido el sitio de Dreamweaver, podr empezar a crear la aplicacin Web.
687
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. 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. Aparecer el cuadro de dilogo Definicin del sitio. Si se muestra el asistente, haga clic en Avanzadas y seleccione Datos locales en la lista Categora (que debe ser la opcin predeterminada). En el cuadro de texto Nombre del sitio, introduzca un nombre descriptivo para el sitio de Dreamweaver. 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.
2.
3.
4.
5.
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.
688
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. Aparecer el cuadro de dilogo Definicin del sitio. Si se muestra el asistente, haga clic en Avanzadas y seleccione Datos remotos en la lista Categora. Aparecer el cuadro de dilogo Datos remotos. 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.
NO T A
2.
3.
Para utilizar RDS, la carpeta remota debe estar en un equipo que ejecute ColdFusion.
Tambin puede enviar los archivos a una aplicacin Microsoft Visual SourceSafe seleccionando Microsoft Visual SourceSafe. (Microsoft Visual SourceSafe se utiliza para mantener un control de versiones de los archivos.) Si elige esta opcin, deber definir otra carpeta independiente. Para instrucciones, consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 690.
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.
689
La carpeta raz puede ser local o remota, dependiendo de dnde se ejecute el servidor Web.
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. Aparecer el cuadro de dilogo Definicin del sitio. 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.
2.
3.
Rellene el cuadro de dilogo y haga clic en Aceptar. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
Tras definir una sitio de Dreamweaver, puede conectarse a una base de datos.
690
Captulo 24, Conexiones de base de datos para desarrolladores de ColdFusion, en la pgina 693 Captulo 25, Conexiones de base de datos para desarrolladores de ASP.NET, en la pgina 697 Captulo 26, Conexiones de base de datos para desarrolladores de ASP, en la pgina 703 Captulo 27, Conexiones de base de datos para desarrolladores de JSP, en la pgina 717 Captulo 28, Conexiones de base de datos para desarrolladores de PHP, en la pgina 727
691
692
CAPTULO 24
24
693
Compruebe que ha definido un equipo provisto de ColdFusion MX 7 o una versin posterior como servidor de prueba para el sitio. Para ms informacin, consulte Activacin de las mejoras de ColdFusion en la pgina 942.
2. 3.
Abra cualquier pgina de ColdFusion en Dreamweaver. Para crear una nueva fuente de datos, haga clic en el botn del signo ms (+) del panel Bases de datos (Ventana > Bases de datos) y, en el cuadro de dilogo que aparece, introduzca los valores de los parmetros especficos del controlador de base de datos.
NO T A
En Dreamweaver, el botn del signo ms slo aparece si ejecuta ColdFusion MX 7 o una versin posterior.
Para obtener ms informacin, consulte la documentacin del fabricante del controlador o pregunte al administrador del sistema.
4.
Para modificar una fuente de datos, haga doble clic en la conexin de la base de datos del panel Bases de datos y realice las modificaciones necesarias en el cuadro de dilogo de conexin que aparece. Puede editar cualquier parmetro excepto el nombre de la fuente de datos. Para obtener ms informacin, consulte la documentacin del fabricante del controlador o pregunte al administrador del sistema.
694
Para crear o modificar una fuente de datos ColdFusion si ejecuta ColdFusion MX 6.1 6.0:
1. 2.
Abra cualquier pgina de ColdFusion en Dreamweaver. 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 MX Administrator en una ventana del navegador. Conecte con ColdFusion MX Administrator y cree o modifique la fuente de datos. Para instrucciones, consulte Utilizacin de ColdFusion (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.
3.
695
696
CAPTULO 25
25
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 703.
En este captulo se presupone que ha configurado una aplicacin ASP.NET (vase Captulo 23, Configuracin de una aplicacin Web, en la pgina 679). 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 ASP.NET en Primeros pasos con Dreamweaver. Para obtener ms informacin sobre bases de datos y conexiones de base de datos, consulte Apndice A, Gua de bases de datos para principiantes, en la pgina 1123.
697
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 698 Creacin de una conexin utilizando Propiedades del vnculo de datos en la pgina 699
698
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. 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.
NO T A
2.
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.
3.
Rellene el cuadro de dilogo y haga clic en Aceptar. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
La nueva conexin se mostrar en el panel Bases de datos. Temas relacionados Captulo 29, Solucin de problemas de conexiones de base de datos, en la pgina 731
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. 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.
2.
699
3.
Haga clic en el botn Crear. 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 690).
6.
Temas relacionados Captulo 29, Solucin de problemas de conexiones de base de datos, en la pgina 731
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:
Provider=Microsoft.Jet.OLEDB.4.0; Data Source=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:
Provider=Microsoft.Jet.OLEDB.4.0; Data Source=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:
701
Abra una pgina ASP.NET en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y 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. Realice los cambios que desee y haga clic en Aceptar.
2.
3.
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:
1.
Abra una pgina ASP.NET en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en la conexin y seleccione Eliminar conexin en el men emergente. Se muestra el cuadro de dilogo utilizado para crear la conexin. Confirme que desea eliminar la conexin.
N OT A
2.
3.
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.
702
CAPTULO 26
26
Si est desarrollando aplicaciones ASP.NET, vase Captulo 25, Conexiones de base de datos para desarrolladores de ASP.NET, en la pgina 697.
En este captulo se presupone que ha configurado una aplicacin ASP (vase Captulo 23, Configuracin de una aplicacin Web, en la pgina 679). 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 ASP de muestra en Primeros pasos con Dreamweaver. Para obtener ms informacin sobre bases de datos y conexiones de base de datos, consulte Apndice A, Gua de bases de datos para principiantes, en la pgina 1123.
703
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 706. 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:
704
Creacin de una conexin sin DSN en la pgina 710 Conexin con una base de datos en un ISP en la pgina 711
N OT A
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.
Conexiones OLE DB
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. Puede descargar los paquetes MDAC gratis del sitio Web de Microsoft http://msdn.microsoft.com/data/mdac/downloads/.
NO T A
Puede descargar proveedores OLE DB para bases de datos Oracle del sitio Web de Oracle en www.oracle.com/technology/software/tech/windows/ole_db/index.html (es necesario 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 710). 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.
705
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 OLE DB en la pgina 705.
Puede definir el DSN en un equipo Windows local o remoto. Temas relacionados Creacin de una conexin sin DSN en la pgina 710
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 2000, vase el artculo 300596 en http://support.microsoft.com/default.aspx?scid=kb;en-us;300596 Si el equipo se ejecuta en Windows XP, vase el artculo 305599 en http://support.microsoft.com/default.aspx?scid=kb;en-us;305599
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.
706
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.
5. 6.
En la parte inferior del cuadro de dilogo, seleccione la opcin Utilizando DSN local. 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, consulte Creacin de una conexin con DSN en la pgina 706.
7. 8.
Si es preciso, complete los cuadros de texto Nombre de usuario y Contrasea. 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 755.
NO T A
9.
Haga clic en Prueba. Dreamweaver intentar conectar con la base de datos. Si falla la conexin, compruebe de nuevo 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 690).
707
10. Haga
clic en Aceptar.
La nueva conexin se muestra en el panel Bases de datos. Temas relacionados Creacin de una conexin sin DSN en la pgina 710
Defina un DSN en el sistema remoto que est ejecutando el servidor de aplicaciones. Para instrucciones, vanse los artculos siguientes en el sitio Web de Microsoft:
Si el equipo remoto se ejecuta en Windows 2000, vase el artculo 300596 en http://support.microsoft.com/default.aspx?scid=kb;en-us;300596 Si el equipo remoto se ejecuta en Windows XP, vase el artculo 305599 en http://support.microsoft.com/default.aspx?scid=kb;en-us;305599
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. 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). Introduzca un nombre para la nueva conexin.
N OT A
3.
4.
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.
708
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. 8.
Si es preciso, complete los cuadros de texto Nombre de usuario y Contrasea. 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 755.
N OT A
9.
Haga clic en Prueba. Dreamweaver intentar conectar con la base de datos. Si falla la conexin, compruebe de nuevo 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 690).
10. Haga
clic en Aceptar.
La nueva conexin se muestra en el panel Bases de datos. Temas relacionados Creacin de una conexin utilizando un DSN local en la pgina 706
709
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, si las hubiera. Haga clic en el botn de signo ms (+) del panel y seleccione Cadena de conexin personalizada en el men emergente. Aparecer el cuadro de dilogo Cadena de conexin personalizada.
2.
3.
Rellene el cuadro de dilogo y haga clic en Aceptar. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
Utilizacin de una ruta virtual para conectar con una base de datos en la pgina 713 Captulo 29, Solucin de problemas de conexiones de base de datos, en la pgina 731
710
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.
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 713
711
Suponga que /jsmith/index.htm es una ruta virtual de archivo. La siguiente expresin devolver su ruta fsica:
Server.MapPath("/jsmith/index.htm")
Abra una pgina ASP en Dreamweaver y cambie a la vista Cdigo (Ver > Cdigo). 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. Temas relacionados Aspectos bsicos de las rutas fsicas y virtuales en la pgina 711
712
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. 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. Haga clic en el botn de signo ms (+) del panel y seleccione Cadena de conexin personalizada en el men emergente. Introduzca un nombre para la nueva conexin.
NO T A
2.
3.
4.
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:
Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
713
Si utiliza cdigo JavaScript, la expresin es idntica, salvo que el signo que se utiliza para concatenar dos cadenas es el ms (+) en lugar del 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.
7.
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 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.
8.
Haga clic en Aceptar. La nueva conexin se muestra en el panel Bases de datos. 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.
9.
Temas relacionados Aspectos bsicos de las rutas fsicas y virtuales en la pgina 711
Localizacin de una ruta fsica de archivo con la ruta virtual en la pgina 712 Creacin de una conexin sin DSN en la pgina 710
714
Abra una pgina ASP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y 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. Realice los cambios que desee y haga clic en Aceptar.
2.
3.
Dreamweaver actualiza automticamente el archivo de inclusin (include) que, a su vez, actualiza todas las pginas del sitio que utilicen la conexin.
Para eliminar una conexin:
1.
Abra una pgina ASP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en la conexin y seleccione Eliminar conexin en el men emergente. Se muestra el cuadro de dilogo utilizado para crear la conexin. Confirme que desea eliminar la conexin.
N O TA
2.
3.
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.
715
716
CAPTULO 27
27
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 1132. Para conectar mediante un controlador JDBC, deber especificar algunos valores de parmetros. Para ms informacin, consulte JDBC, parmetros de conexin en la pgina 718. Para conocer los parmetros especficos del controlador, vase la documentacin del fabricante del controlador o pregunte al administrador del sistema.
717
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 721.
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.
718
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:
719
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. 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.
2.
3.
Introduzca en el cuadro de dilogo los parmetros de conexin. Para ms informacin, consulte JDBC, parmetros de conexin en la pgina 718.
720
4.
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 usuarios de Macintosh pueden omitir este paso ya que todas las conexiones de base de datos utilizan el servidor de aplicaciones.
5.
Haga clic en Prueba. Dreamweaver intentar conectar con la base de datos. Si falla la conexin, compruebe de nuevo 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 690).
6.
La nueva conexin se muestra en el panel Bases de datos. Temas relacionados Captulo 29, Solucin de problemas de conexiones de base de datos, en la pgina 731
Su aplicacin JSP deber ejecutarse en un 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 722.
721
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 722.
Si cumple estos requisitos, podr conectar mediante un controlador ODBC. Para instrucciones, consulte Creacin de una conexin ODBC en la pgina 723.
Si dispone de un controlador ODBC para la base de datos, puede instalar a continuacin un controlador JDBC-ODBC.
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 thread). Para ms informacin sobre las limitaciones del controlador, consulte la la nota tcnica 17392 del Centro de soporte de Macromedia en www.macromedia.com/go/17392. Despus de instalar el controlador puente, podr crear la conexin de base de datos.
Defina un DSN en el sistema Windows en el que se encuentra el servidor de aplicaciones. Para instrucciones, vanse los artculos siguientes en el sitio Web de Microsoft:
Los usuarios de Windows 2000 deben ver el artculo 300596 en http://support.microsoft.com/default.aspx?scid=kb;en-us;300596 Los usuarios de Windows XP deben ver el artculo 305599 en http://support.microsoft.com/default.aspx?scid=kb;en-us;305599
2.
Abra una pgina JSP 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. 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). Introduzca un nombre para la nueva conexin.
NO T A
3.
4.
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
723
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.
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.
Los usuarios de Macintosh pueden omitir este paso ya que todas las conexiones de base de datos utilizan el servidor de aplicaciones.
8.
Haga clic en Prueba. Dreamweaver intentar conectar con la base de datos. Si falla la conexin, compruebe de nuevo 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 690).
9.
Temas relacionados Captulo 29, Solucin de problemas de conexiones de base de datos, en la pgina 731
724
Abra una pgina JSP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y 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. Realice los cambios que desee y haga clic en Aceptar.
2.
3.
Dreamweaver actualiza automticamente el archivo de inclusin (include) que, a su vez, actualiza todas las pginas del sitio que utilicen la conexin. 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.
Para eliminar una conexin:
1.
Abra una pgina JSP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en la conexin y seleccione Eliminar conexin en el men emergente. Se muestra el cuadro de dilogo utilizado para crear la conexin. Confirme que desea eliminar la conexin.
2.
3.
725
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.
726
CAPTULO 28
28
Para fines de desarrollo, descargue e instale la versin Windows Essentials del servidor de base de datos MySQL.
Para conectarse a la base de datos de muestra suministrada por Dreamweaver, vase Configuracin del sitio PHP de muestra en Primeros pasos con Dreamweaver. Para obtener ms informacin sobre bases de datos y conexiones de base de datos, consulte Apndice A, Gua de bases de datos para principiantes, en la pgina 1123.
727
Abra una pgina PHP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). 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. Rellene el cuadro de dilogo y haga clic en Aceptar. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
2.
3.
Si aparece el mensaje de error Client does not support authentication protocol requested. Consider upgrading MySQL client (El cliente no admite el protocolo de autenticacin solicitado. Es recomendable que actualice el cliente MySQL) al probar una conexin de base de datos PHP en MySQL 4.1, consulte Solucin de problemas relacionados con mensajes de error de MySQL en la pgina 740.
Abra una pgina PHP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y 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.
2.
728
3.
Dreamweaver actualiza automticamente el archivo de inclusin (include) que, a su vez, actualiza todas las pginas del sitio que utilicen la conexin.
Para eliminar una conexin:
1.
Abra una pgina PHP en Dreamweaver y, a continuacin, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en la conexin y seleccione Eliminar conexin en el men emergente. Se muestra el cuadro de dilogo utilizado para crear la conexin. Confirme que desea eliminar la conexin.
2.
3.
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.
729
730
CAPTULO 29
29
731
Para comprobar o cambiar los permisos para el archivo de base de datos (Windows XP):
1. 2.
Asegrese de que tiene privilegios de administrador en el equipo. 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. Seleccione la ficha Seguridad.
NO T A
3.
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. En el cuadro de dilogo Seleccionar usuarios o grupos, haga clic en el botn Avanzadas. El cuadro de dilogo cambia para mostrar ms opciones. Haga clic en el botn Ubicaciones y seleccione el nombre del equipo. Haga clic en el botn Buscar ahora. Aparecer una lista de nombres de cuentas asociadas al equipo. 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. Para asignar a la cuenta IUSR los permisos completos, seleccione la casilla de verificacin Control total y haga clic en Aceptar.
5.
6. 7.
8.
9.
Para comprobar o cambiar los permisos para el archivo de base de datos (Windows 2000):
1. 2.
Asegrese de que tiene privilegios de administrador en el equipo. 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. Seleccione la ficha Seguridad.
N OT A
3.
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.
732
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. Seleccione la cuenta IUSR_nombre_del_equipo y, a continuacin, haga clic en Agregar. Para asignar a la cuenta IUSR permisos completos, seleccione Control total del men emergente Tipo de acceso y haga clic en Aceptar.
6. 7.
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. 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
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;enus;Q306518.
733
80004005Driver's SQLSetConnectAttr failed 80004005General error Unable to open registry key 'DriverId' 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 1137. 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.
N OT A
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.
734
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 731. 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. 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://support.microsoft.com/default.aspx?scid=kb;en-us;Q253604. PRB: Error Cannot Open File Unknown Using Access en http://support.microsoft.com/default.aspx?scid=kb;en-us;Q166029.
Si contina teniendo problemas, vanse los siguientes artculos de Microsoft Knowledge Base:
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:
735
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.
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 731.) 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 731.) 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 Al actualizar registro de tabla, en Microsoft Knowledge Base en http:// support.microsoft.com/default.aspx?scid=kb;en-us;Q174640.
736
737
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:
738
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.
Resalte el contenido dinmico en la pgina. 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. Seleccione el juego de registros que proporciona el contenido dinmico y haga clic en Aceptar. Repita los pasos 1 a 3 para cada elemento de contenido dinmico de la pgina.
3.
4.
739
740
PARTE 7
741
CAPTULO 30
30
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
743
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 la siguiente 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.
744
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. Para ms informacin, seleccione Ayuda en el men emergente del grupo de paneles. Si desea explorar bases de datos o crear conexiones de base de datos, seleccione Ventana > Bases de datos. Aparecer el panel Bases de datos.
Para ms informacin, seleccione Ayuda en el men emergente del grupo de paneles. Si desea inspeccionar, aadir o modificar cdigo para componentes JavaBeans, Macromedia ColdFusion o servicios Web, seleccione Ventana > Componentes. Aparecer el panel Componentes.
NO T A
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.
745
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.
NO T A
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 690.)
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 691.
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. Para mostrar las columnas de la tabla, haga clic en nombre de tabla. Los iconos de columnas reflejan el tipo de datos y tambin indican la clave principal. 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.
3.
4.
746
Asegrese de que Dreamweaver se ha configurado correctamente para mostrar datos dinmicos. Para ms informacin, consulte Requisitos para mostrar datos dinmicos en la pgina 749.
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.
N OT A
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 754.)
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.
747
La ilustracin siguiente muestra una pgina dinmica con Live Data desactivado:
Suministro de parmetros esperados a la pgina en la pgina 750 Actualizacin de la pgina en la pgina 752 Solucin de problemas de la vista Live Data en la pgina 752 Utilizacin de la vista de Diseo sin datos dinmicos en la pgina 753
Captulo 30: Optimizacin del espacio de trabajo para desarrollo visual
748
Defina una carpeta para procesar pginas dinmicas. Para instrucciones, consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 690. 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 691.
Copie los archivos relacionados, si los hay, en la carpeta. Para ms informacin, consulte Copia de los archivos dependientes en la pgina 749. Suministre a la pgina los parmetros que suministrara normalmente un usuario. Para instrucciones, consulte Suministro de parmetros esperados a la pgina en la pgina 750.
Si experimenta dificultades para conseguir que funcione la vista de Live Data, vase Solucin de problemas de la vista Live Data en la pgina 752. Temas relacionados Visualizacin de live data en la vista de Diseo en la pgina 747 Utilizacin de la vista de Diseo sin datos dinmicos en la pgina 753
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.
749
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. 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. Bajo Carpeta local, seleccione los archivos dependientes. 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.
2.
3. 4.
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. Temas relacionados Visualizacin de live data en la vista de Diseo en la pgina 747
Requisitos para mostrar datos dinmicos en la pgina 749 Actualizacin de la pgina en la pgina 752 Solucin de problemas de la vista Live Data en la pgina 752
750
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.
2.
Rellene el cuadro de dilogo y haga clic en Aceptar. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
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 771. Temas relacionados Visualizacin de live data en la vista de Diseo en la pgina 747 Requisitos para mostrar datos dinmicos en la pgina 749 Copia de los archivos dependientes en la pgina 749 Solucin de problemas de la vista Live Data en la pgina 752
751
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.
Requisitos para mostrar datos dinmicos en la pgina 749 Copia de los archivos dependientes en la pgina 749 Suministro de parmetros esperados a la pgina en la pgina 750
prefijo de URL
http://localhost/ http://localhost/myapp/ http://localhost/fs/planes
752
Para ms informacin, consulte Conexin con una base de datos en la pgina 691. Temas relacionados Visualizacin de live data en la vista de Diseo en la pgina 747
Requisitos para mostrar datos dinmicos en la pgina 749 Copia de los archivos dependientes en la pgina 749 Suministro de parmetros esperados a la pgina en la pgina 750 Actualizacin de la pgina en la pgina 752
Seleccione Edicin > Preferencias > Elementos invisibles o Dreamweaver > Preferencias > Elementos invisibles (Mac OS X). En el men emergente Mostrar texto dinmico como, elija { }. Haga clic en Aceptar.
2. 3.
753
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 747.
Puede especificar que Dreamweaver utilice archivos temporales en vez de archivos originales. Con esta opcin, 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 definir esta opcin, seleccione Edicin > Preferencias > Vista previa en el navegador. 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 690. 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.
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 (Ventana > Bases de datos). Si ya existe la conexin de base de datos, aparecer una lista de conexiones en el panel. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en la conexin y seleccione Editar conexin en el men emergente. 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 691.
2.
3.
En el cuadro de dilogo correspondiente a la conexin, haga clic en Avanzado. Aparecer el cuadro de dilogo Restringir. Especifique su esquema o catlogo. Haga clic en Aceptar.
Restriccin de la informacin de base de datos que se muestra en Dreamweaver 755
4. 5.
756
CAPTULO 31
31
Diseo de la pgina
El diseo visual de la pgina constituye un paso importante a la hora de crear cualquier sitio Web tanto si 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.
757
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 261 Captulo 9, Diseo de pginas en el modo de diseo, en la pgina 287 Captulo 12, Utilizacin de pginas, en la pgina 383 Captulo 13, Insercin y formato de texto, en la pgina 415 Captulo 14, Insercin de imgenes, en la pgina 459 Captulo 15, Establecimiento de vnculos y navegacin, en la pgina 475 Captulo 17, Adicin de audio, vdeo y elementos interactivos, en la pgina 531
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.
758
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. 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.
759
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 767 Apndice A, Gua de bases de datos para principiantes, en la pgina 1123,
760
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 781 Captulo 39, Creacin de formularios, en la pgina 911
761
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. 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.
762
Para ms informacin sobre la mejora de la funcionalidad de las pginas Web utilizando comportamientos del servidor, consulte los captulos siguientes:
Captulo 34, Adicin de contenido dinmico a pginas Web, en la pgina 805 Captulo 35, Visualizacin de registros de la base de datos, en la pgina 817 Captulo 40, Creacin rpida de aplicaciones de ColdFusion, en la pgina 935 Captulo 41, Creacin rpida de aplicaciones ASP.NET, en la pgina 1017 Captulo 42, Creacin rpida de aplicaciones ASP y JSP, en la pgina 1067 Captulo 43, Creacin rpida de aplicaciones PHP, en la pgina 1093
Comprobacin del contenido dinmico en la pgina 763 Edicin de contenido dinmico en una pgina en la pgina 764 Eliminacin de contenido dinmico en la pgina 765
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 655.)
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.
763
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. 2.
Realice los cambios necesarios en la pgina. 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.
764
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) Recordset(myRecordset)
Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor). 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. Realice los cambios deseados en el cuadro de dilogo y haga clic en Aceptar.
3.
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 Comprobacin del contenido dinmico en la pgina 763
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 Comprobacin del contenido dinmico en la pgina 763 Edicin de contenido dinmico en una pgina en la pgina 764
765
766
CAPTULO 32
32
Utilizacin de una base de datos para almacenar contenido . . . . . . . . . . . . . . . . . . 767 Recopilacin de los datos enviados por los usuarios . . . . . . . . . . . . . . . . . . . . . . . . .769 Acceso a datos almacenados en variables de sesin . . . . . . . . . . . . . . . . . . . . . . . . 774
767
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. 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 8 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 1123.
768
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.
En esta seccin se explica cmo crear parmetros de formulario y de URL para uso en aplicaciones Web.
769
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, consulte Captulo 39, Creacin de formularios, en la pgina 911. 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:
770
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 Listar valores mostrado a continuacin relaciona cada elemento de la lista con un valor (Aadir, Actualizar o Eliminar):
Creacin de parmetros de URL mediante vnculos HTML en la pgina 773 Recuperacin de parmetros de formulario y de URL en la pgina 774
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. El servidor almacena temporalmente el parmetro de URL en la memoria.
2.
771
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. 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.
4.
Navegador Web
<HTML> </HTML>
report.cfm
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.
772
Temas relacionados Creacin de parmetros de URL mediante vnculos HTML en la pgina 773
El inspector de propiedades (Ventana > Propiedades) permite crear los mismos parmetros de URL seleccionando el vnculo y aadiendo los valores de los parmetros de URL al final del vnculo URL del cuadro de texto Vnculo.
Temas relacionados Recopilacin de los datos enviados por los usuarios en la pgina 769
Parmetros de URL en la pgina 771 Recuperacin de parmetros de formulario y de URL en la pgina 774 Aspectos bsicos de los parmetros de URL y de formulario en la pgina 785 Definicin de parmetros de URL en la pgina 792 Definicin de parmetros de formulario en la pgina 793
773
Parmetros de formulario en la pgina 770 Parmetros de URL en la pgina 771 Creacin de parmetros de URL mediante vnculos HTML en la pgina 773
774
775
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 776 Almacenamiento de informacin en variables de sesin en la pgina 777 Ejemplo de informacin almacenada en variables de sesin en la pgina 779 Recuperacin de datos de variables de sesin en la pgina 780
776
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.variable_name = value>
777
ASP y ASP.NET
<% Session("variable_name") = 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("product") %>
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") %>
Recopilacin de informacin para almacenarla en variables de sesin en la pgina 776 Ejemplo de informacin almacenada en variables de sesin en la pgina 779 Recuperacin de datos de variables de sesin en la pgina 780
778
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.
779
Recopilacin de informacin para almacenarla en variables de sesin en la pgina 776 Almacenamiento de informacin en variables de sesin en la pgina 777 Recuperacin de datos de variables de sesin en la pgina 780
Recopilacin de informacin para almacenarla en variables de sesin en la pgina 776 Almacenamiento de informacin en variables de sesin en la pgina 777 Ejemplo de informacin almacenada en variables de sesin en la pgina 779
780
CAPTULO 33
33
Fuentes de contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 782 Definicin de un juego de registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 787 Definicin de parmetros de URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .792 Definicin de parmetros de formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .793 Definicin de variables de sesin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .795 Definicin de variables de aplicacin para ASP y ColdFusion. . . . . . . . . . . . . . . . .796 Utilizacin de una variable como fuente de datos para un juego de registros ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 797 Definicin de variables de servidor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 798 Creacin de un cach de las fuentes de contenido . . . . . . . . . . . . . . . . . . . . . . . . . . 801 Cambio o eliminacin de fuentes de contenido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 802 Copia de un juego de registros de una pgina a otra . . . . . . . . . . . . . . . . . . . . . . . . 802
781
Aspectos bsicos de los parmetros de URL y de formulario en la pgina 785 Variables de sesin en la pgina 785 Variables de aplicacin de ASP y ColdFusion en la pgina 786 Variables de servidor ASP en la pgina 786 Variables de servidor ColdFusion en la pgina 787
782
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 Apndice A, Gua de bases de datos para principiantes, en la pgina 1123 y Apndice B, Nociones bsicas de SQL, en la pgina 1139. 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 784. 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.
783
En los captulos siguientes se describen las conexiones de base de datos de todas las tecnologas de servidor que admite Dreamweaver:
Captulo 24, Conexiones de base de datos para desarrolladores de ColdFusion, en la pgina 693 Captulo 26, Conexiones de base de datos para desarrolladores de ASP, en la pgina 703 Captulo 25, Conexiones de base de datos para desarrolladores de ASP.NET, en la pgina 697 Captulo 27, Conexiones de base de datos para desarrolladores de JSP, en la pgina 717 Captulo 28, Conexiones de base de datos para desarrolladores de PHP, en la pgina 727
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
784
Temas relacionados: Captulo 25, Conexiones de base de datos para desarrolladores de ASP.NET, en la pgina 697.
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 774.
785
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 769 y Acceso a datos almacenados en variables de sesin en la pgina 774. 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 la pgina 786 Definicin de variables de sesin en la pgina 795
786
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. se crean con la etiqueta CFSET o CFPARAM en una pgina ColdFusion.
Definicin de variables de servidor JSP en la pgina 800 Definicin de variables de servidor PHP en la pgina 800
Creacin de un juego de registros sin escribir SQL en la pgina 788 Creacin de un juego de registros avanzado escribiendo SQL en la pgina 789 Creacin de consultas SQL utilizando el rbol Elementos de base de datos en la pgina 791
787
En la ventana de documento, abra la pgina que utilizar el juego de registros. Seleccione Ventana > Vinculaciones para mostrar el panel Vinculaciones. 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 ColdFusion 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.)
4.
788
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.
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 791 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 791.
Para definir un juego de registros escribiendo SQL:
1. 2. 3.
En la ventana de documento, abra la pgina que utilizar el juego de registros. Seleccione Ventana > Vinculaciones para mostrar el panel Vinculaciones. En el panel Vinculaciones, haga clic en el botn de signo ms (+) y seleccione Juego de registros (consulta) en el men emergente.
789
Aparecer el cuadro de dilogo avanzado Juego de registros. Si est desarrollando un sitio ColdFusion 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.)
4.
Complete este cuadro de dilogo. 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.
790
Ample la rama Tablas para ver todas las tablas de la base de datos seleccionada. Seleccione la tabla Employees. Haga clic en el botn Seleccionar. Haga clic en Aceptar para aadir el juego de registros al panel Vinculaciones.
791
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. Cree la declaracin SQL de la siguiente forma:
2.
Seleccione emplNo y haga clic en el botn Seleccionar. Seleccione emplName y haga clic en el botn Seleccionar. Seleccione 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). 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"). Haga clic en Aceptar para aadir el juego de registros al panel Vinculaciones.
4.
5.
En la ventana de documento, abra la pgina que utilizar la variable. Seleccione Ventana > Vinculaciones para mostrar el panel Vinculaciones. En el panel Vinculaciones, haga clic en el botn de signo ms (+) y seleccione una de las siguientes opciones en el men emergente.
Tipos de documento
ASP ColdFusion JSP PHP
792
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.
5.
Despus de definir la variable de URL puede usar su valor en la pgina seleccionada actualmente. Para ms informacin, consulte Captulo 34, Adicin de contenido dinmico a pginas Web, en la pgina 805. Temas relacionados: Definicin de parmetros de formulario en la pgina 793
En la ventana de documento, abra la pgina que utilizar la variable. Seleccione Ventana > Vinculaciones para mostrar el panel Vinculaciones.
793
3.
En el panel Vinculaciones, haga clic en el botn de signo ms (+) y seleccione una de las siguientes opciones en el men emergente.
Tipos de documento
ASP ColdFusion JSP PHP
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.
4.
Despus de definir el parmetro de formulario como una fuente de contenido, puede utilizar su valor en la pgina. Para ms informacin, consulte Captulo 32, Obtencin de datos para la pgina, en la pgina 767. Temas relacionados Fuentes de contenido dinmico en la pgina 782
Aspectos bsicos de los parmetros de URL y de formulario en la pgina 785 Definicin de parmetros de URL en la pgina 792
794
Recopilacin de los datos enviados por los usuarios en la pgina 769 Acceso a datos almacenados en variables de sesin en la pgina 774 Almacenamiento de informacin en variables de sesin en la pgina 777
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. 3.
Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. Haga clic en el botn de signo ms (+) y seleccione Variable de sesin en el men emergente. Introduzca el nombre de la variable definida en el cdigo fuente. Haga clic en Aceptar. La variable de sesin aparecer en el panel Vinculaciones.
4. 5.
795
Despus de definir la variable de sesin puede usar su valor en la pgina. Para ms informacin, consulte Captulo 34, Adicin de contenido dinmico a pginas Web, en la pgina 805. Temas relacionados Recopilacin de los datos enviados por los usuarios en la pgina 769
Acceso a datos almacenados en variables de sesin en la pgina 774 Aspectos bsicos de las variables de sesin en la pgina 775 Almacenamiento de informacin en variables de sesin en la pgina 777
Abra un documento de tipo dinmico en la ventana de documento. Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. Haga clic en el botn de signo ms (+) y seleccione Variable de aplicacin en el men emergente. Introduzca el nombre de la variable definida en el cdigo fuente de la aplicacin. Haga clic en Aceptar.
4. 5.
796
Despus de definir la variable de aplicacin puede usar su valor en la pgina. Para ms informacin, consulte Captulo 34, Adicin de contenido dinmico a pginas Web, en la pgina 805. Temas relacionados: Variables de aplicacin de ASP y ColdFusion en la pgina 786
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. 2.
Compruebe que hay una pgina ColdFusion activa en la ventana de documento. 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. Defina una variable y haga clic en Aceptar.
3.
Utilizacin de una variable como fuente de datos para un juego de registros ColdFusion
797
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. 6.
Seleccione las opciones del cuadro de dilogo Juego de registros y haga clic en Aceptar. Inicialice la variable. Dreamweaver no inicializa la variable, de modo que usted puede inicializarla como y donde 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 parmetros de URL en la pgina 792 Definicin de parmetros de formulario en la pgina 793 Definicin de variables de sesin en la pgina 795 Definicin de variables de aplicacin para ASP y ColdFusion en la pgina 796
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 799 Definicin de variables de servidor JSP en la pgina 800
798
Abra el panel Vinculaciones (Ventana > Vinculaciones). 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.
4.
Abra el panel Vinculaciones (Ventana > Vinculaciones). Haga clic en el botn de signo ms (+) y seleccione la variable de servidor en el men emergente. Introduzca el nombre de la variable. Para obtener ms informacin sobre las entradas de nombre posibles, haga clic en el botn Ayuda.
3.
799
4.
Definicin de variables de sesin en la pgina 795 Definicin de variables de aplicacin para ASP y ColdFusion en la pgina 796 Captulo 34, Adicin de contenido dinmico a pginas Web, en la pgina 805
Abra el panel Vinculaciones (Ventana > Vinculaciones). Haga clic en el botn de signo ms (+) y seleccione la variable en el men emergente. Introduzca el nombre de la variable. Haga clic en Aceptar. La variable de servidor PHP aparecer en el panel Vinculaciones.
Abra el panel Vinculaciones (Ventana > Vinculaciones). Haga clic en el botn de signo ms (+) y seleccione Variable de peticin en el men emergente. Introduzca el nombre de la variable. Haga clic en Aceptar. La variable de servidor JSP aparecer en el panel Vinculaciones.
3. 4.
800
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.)
801
En el panel Vinculaciones (Ventana > Vinculaciones), haga doble clic en el nombre de la fuente de contenido que desea editar. Realice los cambios en el cuadro de dilogo que aparece. Cuando est satisfecho con los cambios realizados, haga clic en Aceptar.
2. 3.
En el panel Vinculaciones (Ventana > Vinculaciones), seleccione la fuente de contenido de la lista. Haga clic en el botn de signo menos (-).
2.
Seleccione el juego de registros en el panel Vinculaciones o el panel Comportamientos del servidor. Haga clic con el botn derecho en el juego de registros y seleccione Copiar en el men emergente. Abra la pgina en la que desea copiar el juego de registros.
2.
3.
802
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.
803
804
CAPTULO 34
34
Adicin de contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 806 Conversin de texto en contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .807 Conversin de imgenes en contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . 809 Conversin de atributos HTML en contenido dinmico . . . . . . . . . . . . . . . . . . . . . . 810 Conversin de parmetros de ActiveX, Flash y de otros objetos en contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 813 Edicin del contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 814 Eliminacin de contenido dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 814 Creacin de pginas dinmicas en un sitio de Contribute. . . . . . . . . . . . . . . . . . . . . 815
805
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 819.) 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 825.) Puede reemplazar texto normal de la pgina por texto dinmico o aadir texto dinmico en un determinado punto de insercin en la pgina.
806
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) Recordset(myRecordset)
Abra el panel Vinculaciones eligiendo Ventana > Vinculaciones. 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 781.)
3.
En la vista Diseo, seleccione texto en la pgina o haga clic en el lugar en el que desea aadir texto dinmico.
807
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.
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). En el men emergente Mostrar texto dinmico como, elija { }. Haga clic en Aceptar.
2. 3.
808
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. Seleccione Insertar > imagen. Aparecer el cuadro de dilogo Seleccionar origen de imagen. Haga clic en la opcin Fuentes de datos (Windows) o en el botn Fuente de datos (Macintosh). Aparecer una lista de fuentes de contenido.
2.
3.
809
4.
Seleccione una fuente de contenido de la lista. La fuente de contenido 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.
NO TA
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, consulte Aspectos bsicos de los juegos de registros en la pgina 783.
5.
Abra el panel Vinculaciones eligiendo Ventana > Vinculaciones. 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, consulte Captulo 33, Definicin de fuentes de contenido dinmico, en la pgina 781.
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. 5.
En el panel Vinculaciones, seleccione una fuente de contenido de la lista. En el cuadro Vincular con, seleccione un atributo HTML del men emergente.
810
6.
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.
811
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, consulte Captulo 32, Obtencin de datos para la pgina, en la pgina 767.
5.
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.
812
En la vista de Diseo, seleccione un objeto en la pgina y abra el inspector de propiedades (Ventana > Propiedades). Haga clic en el botn Parmetros. Aparecer el cuadro de dilogo Parmetros.
2.
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. 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. 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, consulte Captulo 33, Definicin de fuentes de contenido dinmico, en la pgina 781.
4.
5.
6.
813
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 Edicin del contenido dinmico en la pgina 814 Edicin del contenido dinmico en la pgina 814
814
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. 2.
Seleccione Sitio > Administrar sitio de Contribute. 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 210. Si el sistema lo solicita, introduzca la contrasea de administrador y haga clic en Aceptar. Aparecer el cuadro de dilogo Administrar sitio Web. En la categora Users and Roles (Usuarios y funciones), seleccione una funcin y haga clic en el botn Edit Role Settings (Editar configuracin de funciones). 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 351 y Administracin de Macromedia Contribute. Haga clic en Aceptar para cerrar el cuadro de dilogo. Haga clic en Cerrar para cerrar el cuadro de dilogo Administrar sitio Web.
3.
4.
5.
6. 7.
815
816
CAPTULO 35
35
817
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. 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.
Regin repetida 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.
818
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.
Microsoft ASP.NET denomina conjunto de datos (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.
819
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 Creacin de vnculos de navegacin por conjuntos de registros en la pgina 827
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 827.
820
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:
Vnculo de navegacin
Ir a la primera pgina Ir a la pgina anterior Ir a la siguiente pgina Ir a la ltima pgina
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).
821
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 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 830.
822
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 831 y Creacin de una tabla con un comportamiento del servidor Repetir regin en la pgina 832.
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.
823
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:
Aspectos bsicos de los juegos de registros en la pgina 783 Creacin de vnculos de navegacin por conjuntos de registros en la pgina 827 Visualizacin de varios resultados de juego de registros en la pgina 831 Creacin de una tabla con un comportamiento del servidor Repetir regin en la pgina 832
Cuando tenga los elementos anteriores en la pgina podr crear un contador de registros.
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 835 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.
824
Seleccione el contenido dinmico en la ventana Live Data o en su marcador de posicin en la ventana de documento. Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. Haga clic en el botn de flecha abajo en la columna Formato. Si la flecha abajo no es visible, ample el panel. 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.
2. 3.
4.
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.
Abra una pgina que contenga datos dinmicos en la vista Diseo. Seleccione los datos dinmicos cuyo formato desea personalizar. Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. Se resaltar el elemento de datos vinculados cuyo texto dinmico ha seleccionado. Haga clic en la flecha abajo en la columna Formato para ampliar el men emergente de formatos de datos disponibles. Si la flecha abajo no es visible, ample el panel.
4.
825
5.
Seleccione Editar lista de formatos en el men emergente. Aparecer el cuadro de dilogo Editar lista de formatos. Rellene el cuadro de dilogo y haga clic en Aceptar. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
6.
Abra una pgina que contenga datos dinmicos en la vista Diseo. Seleccione los datos dinmicos para los que desea crear un formato personalizado. Seleccione Ventana > Vinculaciones para mostrar el panel Vinculaciones y haga clic en la flecha abajo en la columna Formato. Si la flecha abajo no es visible, ample el panel. Seleccione Editar lista de formatos en el men emergente. Aparecer el cuadro de dilogo Editar lista de formatos. Haga clic en el botn de signo ms (+) y seleccione un tipo de formato. Defina el formato y haga clic en Aceptar. Introduzca un nombre para el nuevo formato en la columna Nombre. Haga clic en Aceptar para cerrar el cuadro de dilogo.
4.
5. 6. 7. 8.
826
Barras de navegacin de juego de registros personalizadas en la pgina 820 Creacin de una barra de navegacin de juego de registros personalizada en la pgina 829
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.
827
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 829.
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. 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 de juego de registros.
2.
3.
Seleccione el juego de registros por el que desea navegar en el men emergente Juego de registros. 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.
4.
828
5.
Haga clic en Aceptar. 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 829
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 820. 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 827. En este procedimiento se describe cmo asignar comportamientos de servidor individuales a los vnculos de navegacin.
829
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. Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor) y haga clic en el botn de signo ms (+). 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
2.
3.
4.
En el men emergente Juego de registros, seleccione el juego de registros que contiene los registros. Haga clic en Aceptar. El comportamiento de servidor se asigna al vnculo de navegacin.
5.
Temas relacionados Desplazamiento por los resultados de un juego de registros de base de datos en la pgina 819
830
En la vista Diseo, seleccione en la pgina la regin que se debe mostrar u ocultar. En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+). Seleccione Mostrar regin en el men emergente y, a continuacin, seleccione uno de los comportamientos del servidor incluidos en la lista. Haga clic en Aceptar.
3.
4.
Creacin de una tabla con un comportamiento del servidor Repetir regin en la pgina 832
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. 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.
831
3.
Haga clic en el botn de signo ms (+) y seleccione Repetir regin. Aparecer el cuadro de dilogo Repetir regin.
4. 5. 6.
Seleccione el nombre del juego de registros que desea utilizar en el men emergente. Seleccione el nmero de registros que desea mostrar por pgina. Haga clic en Aceptar. En la ventana de documento, aparecer un contorno delgado 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.
Visualizacin y ocultacin de registros segn los resultados del juego de registros en la pgina 830
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 831.
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.
2. 3. 4.
Seleccione el juego de registros que desea utilizar en el men emergente Juego de registros. Seleccione el nmero de registros que desea mostrar por pgina. 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.
5.
Haga clic en Aceptar. Se insertarn en la pgina una tabla y los marcadores de posicin del contenido dinmico definido en su juego de registros asociado.
833
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 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. 2.
Coloque el punto de insercin donde desee insertar el contador de registros. Seleccione Insertar > Objetos de aplicacin > Mostrar recuento de registros > Estado de navegacin de juego de registros. Aparecer el cuadro de dilogo Barra de navegacin de juego de registros.
Seleccione el juego de registros que desea utilizar en el men emergente Juego de registros.
834
3.
Haga clic en Aceptar. 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:
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. 3. 4.
Site el punto de insercin al final de la cadena de texto. Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor). 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}.
835
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 o Dreamweaver > Preferencias > Vista previa en el navegador (Mac OS X)) y, a continuacin, seleccione Archivo > Vista previa en el navegador.
836
CAPTULO 36
36
Utilizacin de XML y XSL en pginas Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 837 Acerca de las transformaciones XSL en el lado del servidor . . . . . . . . . . . . . . . . . .839 Acerca de las transformaciones XSL en el lado del cliente . . . . . . . . . . . . . . . . . . .843 Acerca de los datos XML y elementos repetidos . . . . . . . . . . . . . . . . . . . . . . . . . . . .846 Acerca de la obtencin de la vista previa de datos XML . . . . . . . . . . . . . . . . . . . . . .848 Realizacin de transformaciones XSL en el servidor. . . . . . . . . . . . . . . . . . . . . . . . 850 Realizacin de transformaciones XSL en el cliente . . . . . . . . . . . . . . . . . . . . . . . . . .866 Aplicacin de estilos a fragmentos de XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .869 Solucin de problemas de transformaciones XSL . . . . . . . . . . . . . . . . . . . . . . . . . . .870
837
En este ejemplo, cada etiqueta padre <book> contiene tres etiquetas hijo: <pubdate>, <title> y <author>. Pero cada etiqueta <book> tambin es una etiqueta hijo de la etiqueta <mybooks>, que ocupa un nivel superior en el esquema. No hay restricciones para nombrar y estructurar las etiquetas XML, siempre y cuando se aniden correctamente unas dentro de otras y cada etiqueta de apertura tenga su correspondiente etiqueta de cierre. Los documentos XML no tienen formato alguno: son simples contenedores de informacin estructurada. Una vez conseguido el esquema XML, se puede utilizar el lenguaje XSL (Lenguaje de hojas de estilo ampliable) para mostrar la informacin. Del mismo modo que las hojas de estilos en cascada (CSS) permiten dar formato al HTML, el lenguaje XSL permite dar formato a los datos XML. Puede definir estilos, elementos de pgina, el diseo, etc., en un archivo XSL y adjuntarlo a un archivo XML de tal modo que, cuando un usuario visualice los datos XML en un navegador, stos estn formateados segn lo que haya definido en el archivo XSL. El contenido (los datos XML) y la presentacin (definida por el archivo XSL) son totalmente independientes, y proporcionan un mayor control sobre el modo en que aparece la informacin en una pgina Web. Esencialmente, XSL es una tecnologa de presentacin para XML, en la que el resultado principal es una pgina HTML. XSLT (Transformaciones de lenguaje de hojas de estilo ampliable) es un subconjunto del lenguaje XSL que permite mostrar los datos XML en una pgina Web y transformarlos (junto con los estilos XSL) en informacin legible y con estilos en formato HTML. Se puede utilizar Dreamweaver para crear pginas XSLT que permitan realizar transformaciones XSL mediante un servidor de aplicaciones o un navegador. Al llevar a cabo una transformacin XSL en el lado del servidor, ste realiza el trabajo de transformacin de XML y XSL, y muestra los datos en la pgina. Cuando esta transformacin se produce en el lado del cliente, todo el trabajo corre a cargo del navegador (por ejemplo, Internet Explorer).
838
El mtodo adoptado en ltima instancia (transformaciones en el lado del servidor o en el lado del cliente) depende de lo que se intente obtener como resultado final, de la tecnologa disponible, del nivel de acceso a los archivos de origen XML y de otros factores. Los dos mtodos presentan sus propias ventajas y limitaciones. Por ejemplo, las transformaciones en el lado del servidor funcionan en todos los navegadores, mientras que las transformaciones en el lado del cliente estn limitadas solamente a los navegadores ms modernos (Internet Explorer 6, Netscape 8, Mozilla 1.8 y Firefox 1.0.2). Las transformaciones en el lado del servidor permiten mostrar los datos XML dinmicamente desde su propio servidor o desde cualquier otra ubicacin de la red, mientras que las transformaciones en el lado del cliente deben utilizar datos XML alojados localmente en su propio servidor Web. Por ltimo, las transformaciones en el lado del servidor requieren el desarrollo de las pginas en un servidor de aplicaciones configurado, mientras que las transformaciones en el lado del cliente slo requieren acceso a un servidor Web. Para ms informacin, consulte Acerca de las transformaciones XSL en el lado del servidor en la pgina 839 y Acerca de las transformaciones XSL en el lado del cliente en la pgina 843.
839
Al trabajar con transformaciones XSL en el lado del servidor, se puede utilizar Dreamweaver para crear pginas XSLT que produzcan documentos HTML completos (pginas XSLT completas) o fragmentos de XSLT que generen porciones de un documento HTML. Una pgina XSLT completa es parecida a una pgina HTML normal. Contiene una etiqueta <body> y una etiqueta <head>, y permite visualizar una combinacin de datos HTML y XML en la pgina. Un fragmento de XSLT es una porcin de cdigo (utilizada por un documento independiente) que muestra los datos XML formateados. Al contrario de lo que sucede en una pgina XSLT completa, los fragmentos son archivos independientes que no contienen etiquetas <body> ni <head>. Si quiere mostrar datos XML en una pgina propia, debe crear una pgina XSLT completa y vincular los datos XML. Por el contrario, si quiere mostrar datos XML en una seccin concreta de una pgina dinmica existente (por ejemplo, una pgina de inicio dinmica para una tienda de productos deportivos, con informacin de la clasificacin de resultados desde un agregador RSS que se muestren en un lado de la pgina) deber crear un fragmento de XSLT e insertar una referencia a l en la pgina dinmica. La creacin de fragmentos de XSLT y su uso en combinacin con otras pginas dinmicas para mostrar datos XML es el caso ms habitual.
840
El primer paso en la creacin de estos tipos de pginas es crear el fragmento XSLT: Se trata de un archivo independiente que contiene el diseo, el formato, etc., de los datos XML que desea mostrar en la pgina dinmica. Una vez creado el fragmento de XSLT, se inserta una referencia a l en la pgina dinmica (por ejemplo, una pgina PHP o de Macromedia ColdFusion). El comportamiento de la referencia insertada en el fragmento de XSLT es muy similar al de un Server-Side Include (SSI): los datos XML con formato (el fragmento) se ubican en un archivo independiente, mientras que en la vista Diseo aparece un marcador de posicin en la propia pgina dinmica. Cuando un navegador solicita la pgina dinmica que contiene la referencia al fragmento, el servidor procesa la instruccin incluida y crea un nuevo documento en el que aparece el contenido del fragmento con formato, no el marcador de posicin.
841
El comportamiento de servidor XSL Transformation se utiliza para insertar la referencia en un fragmento de XSLT en una pgina dinmica. Al insertar la referencia, Dreamweaver genera una carpeta llamada includes/MM_XSLTransform/ en la carpeta raz del sitio, que contiene un archivo de biblioteca de tiempo de ejecucin. El servidor de aplicaciones utiliza las funciones definidas en el archivo al transformar los datos XML especificados. El archivo es el responsable de tomar los datos XML y los fragmentos de XSLT, realizar la transformacin XSL y mostrar los resultados en la pgina Web. Tanto el archivo que contiene el fragmento de XSLT como el archivo XML que contiene los datos y el archivo de biblioteca de tiempo de ejecucin generado deben estar en el servidor para que la pgina se muestre correctamente. (Si se selecciona un archivo XML remoto como fuente de datos por ejemplo, desde un agregador RSS, evidentemente dicho archivo deber residir en cualquier ubicacin de Internet.) Tambin puede utilizar Dreamweaver para crear pginas completas XSLT para su uso con transformaciones en el lado del servidor. Una pgina completa XSLT funciona exactamente del mismo modo que un fragmento de XSLT: slo al insertar la referencia en la pgina completa XSLT con el comportamiento de servidor XSL Transformation se insertar todo el contenido de una pgina HTML. De este modo, se debe borrar todo el HTML de la pgina dinmica (la pgina .cfm, .php, .asp o .net que funciona como pgina contenedora) para poder insertar la referencia. Dreamweaver admite transformaciones XSL para pginas de ColdFusion, ASP, ASP.NET y PHP.
NO T A
El servidor debe estar configurado correctamente para realizar transformaciones en el lado del servidor. Para ms informacin, pngase en contacto con el administrador del servidor, o bien visite www.macromedia.com/go/dw_xsl_es.
Para obtener informacin sobre los procedimientos de creacin de transformaciones XSL en el lado del servidor, consulte Realizacin de transformaciones XSL en el servidor en la pgina 850. Temas relacionados Acerca de la obtencin de la vista previa de datos XML en la pgina 848 Aplicacin de estilos a fragmentos de XSLT en la pgina 869
842
843
Conceptualmente, la relacin existente entre las pgina XSLT vinculada y la pgina XML es similar, aunque no coincide con el modelo de la pgina CSS/HTML externa. Si se dispone de una pgina HTML con contenido (por ejemplo, texto), puede utilizar una hoja de estilos externa para dar formato al contenido. La pgina HTML determina el contenido y el cdigo CSS externo (invisible para el usuario) determina la presentacin. Con XSLT y XML, la situacin cambia. El archivo XML (que el usuario nunca ve en un forma original) determina el contenido, mientras que la pgina XSLT determina la presentacin. La pgina XSLT contiene las tablas, formato, grficos, etc., que suele contener el HTML estndar. Cuando un usuario visualiza el archivo XML en un navegador, la pgina XSLT da formato al contenido.
844
Si utiliza Dreamweaver para vincular una pgina XSLT a una pgina XML, Dreamweaver inserta por usted el cdigo necesario en la parte superior de la pgina XML. Si dispone de acceso a la pgina XML a la que se vincula (esto es, si el archivo XML reside exclusivamente en su servidor Web), todo lo que necesita hacer es utilizar Dreamweaver para insertar el cdigo apropiado que vincule las dos pginas. Si dispone de acceso al archivo XML, las transformaciones XSL realizadas por el cliente son totalmente dinmicas. Esto quiere decir que, siempre que se actualicen los datos en el archivo XML, cualquier informacin HTML que utilice la pgina XSLT vinculada se actualizar automticamente con la nueva informacin.
NO TA
Los archivos XML y XSL que se utilizan para las transformaciones en el lado del cliente deben estar en el mismo directorio. De lo contrario, el navegador leer el archivo XML y buscar la pgina XSLT para la transformacin, pero no podr encontrar los activos (hojas de estilos, imgenes, etc.) definidos por los vnculos relacionados en la pgina XSLT.
Si no dispone de acceso a la pgina XML a la que est vinculando (por ejemplo, si quiere utilizar los datos XML desde un agregador RSS ubicado en algn lugar de la red), el flujo de trabajo se complica un poco ms. Para llevar a cabo transformaciones en el lado del cliente con datos XML de una fuente externa, en primer lugar debe descargar el archivo de origen XML en el mismo directorio en el que reside la pgina XSLT. Con la pgina XML en el sitio local, puede utilizar Dreamweaver para aadir el cdigo adecuado que la vincule a la pgina XSLT y publicar ambas pginas (el archivo XML descargado y la pgina XSLT vinculada) en el servidor Web. Cuando el usuario visualiza la pgina XML en un navegador, la pgina XSLT da formato al contenido, exactamente igual que en el ejemplo anterior. El inconveniente de realizar transformaciones XSL en el lado del cliente con datos XML provenientes de una fuente externa es que los datos XML son parcialmente dinmicos. El archivo XML descargado y modificado es nicamente una instantnea del archivo que reside en la red. Si el archivo XML original de la red cambia, debe descargarlo de nuevo, vincularlo a la pgina XSLT y volver a publicar el archivo XML en el servidor Web. El navegador slo mostrar los datos que reciba del archivo XML del servidor Web, no los datos contenidos en el archivo de origen XML. Para obtener informacin sobre los procedimientos de creacin de transformaciones XSL en el lado del cliente, consulteRealizacin de transformaciones XSL en el cliente en la pgina 866. Temas relacionados Acerca de la obtencin de la vista previa de datos XML en la pgina 848 Aplicacin de estilos a fragmentos de XSLT en la pgina 869
845
Cuando se aplica un objeto XSLT Repetir regin en la ventana de documento, aparece un contorno delgado delimitado con tabulaciones de color gris alrededor de la regin repetida. Al obtener una vista previa de su trabajo en un navegador (Archivo > Vista previa en el navegador), el contorno gris desaparece y la seleccin se ampla para mostrar los elementos repetidos especificados del archivo XML, tal como se muestra en la ilustracin anterior.
846
Tambin comprobar que al aadir el objeto XSLT Repetir regin en la pgina, Dreamweaver acorta la longitud del marcador de posicin de datos XML en la ventana de documento. Esto se debe a que Dreamweaver actualiza la sintaxis XPath del marcador de posicin de datos XML para que est relacionado con la ruta de acceso del elemento repetido. Por ejemplo, el cdigo siguiente est ideado para una tabla que contiene dos marcadores de posicin dinmicos, sin un objeto XSLT Repetir regin aplicado a la tabla:
<table width="500" border="1"> <tr> <td><xsl:value-of select="rss/channel/item/title"/></td> </tr> <tr> <td><xsl:value-of select="rss/channel/item/description"/></td> </tr> </table>
El cdigo siguiente es para la misma table con el objeto XSLT Repetir regin aplicado:
<xsl:for-each select="rss/channel/item"> <table width="500" border="1"> <tr> <td><xsl:value-of select="title"/></td> </tr> <tr> <td><xsl:value-of select="description"/></td> </tr> </table> </xsl:for-each>
En el ejemplo anterior, Dreamweaver ha actualizado automticamente la sintaxis XPath para los elementos de la regin repetida (title y description) para que estn relacionados con la sintaxis XPath de las etiquetas <xsl:for-each>, en vez de todo el documento. Dreamweaver genera expresiones XPath relativas al contexto en otros casos tambin. Por ejemplo, si arrastra un marcador de posicin de datos XML a una tabla que ya tenga un objeto XSLT Repetir regin aplicado, Dreamweaver muestra automticamente la sintaxis XPath relativa a la que ya existe en las etiquetas <xsl:for-each>. Para obtener informacin sobre cmo aplicar el objeto XSLT Repetir regin, consulte Visualizacin de elementos XML repetidos en la pgina 858.
847
En los temas siguientes se proporcionan pautas para que pueda decidir qu mtodos de vista previa son los ms adecuados en funcin de sus necesidades:
Obtencin de vista previa de pginas para transformaciones en el lado del servidor en la pgina 849 Obtencin de vista previa de pginas para transformaciones en el lado del cliente en la pgina 849 Obtencin de vista previa de pginas XSLT y fragmentos de XSLT en la pgina 850
848
849
Este mtodo se utiliza sobre todo al comenzar a crear pginas XSLT, ya se utilice el cliente o el servidor para transformar los datos.
Temas relacionados Utilizacin de XML y XSL en pginas Web en la pgina 837 Acerca de las transformaciones XSL en el lado del servidor en la pgina 839 Acerca de las transformaciones XSL en el lado del cliente en la pgina 843 Aplicacin de estilos a fragmentos de XSLT en la pgina 869
El servidor debe estar configurado correctamente para realizar transformaciones en el lado del servidor. Para ms informacin, pngase en contacto con el administrador del servidor, o bien visite www.macromedia.com/go/dw_xsl_es.
Flujo de trabajo para la realizacin de transformaciones XSL en el lado del servidor en la pgina 851 Creacin de pginas XSLT en la pgina 853 Conversin de pginas HTML en pginas XSLT en la pgina 855 Adjuntar fuentes de datos XML en la pgina 855 Visualizacin de datos XML en pginas XSLT en la pgina 856 Visualizacin de elementos XML repetidos en la pgina 858 Edicin de un objeto XSLT Repetir regin en la pgina 860 Insercin de fragmentos de XSLT en pginas dinmicas en la pgina 860 Eliminacin de fragmentos de XSLT de pginas dinmicas en la pgina 862 Edicin de comportamientos de servidor XSL Transformation en la pgina 863 Utilizacin de los parmetros en las transformaciones XSL en la pgina 863 Creacin de regiones condicionales XSLT en la pgina 865 Edicin de un objeto XSLT Regin condicional en la pgina 865 Insercin de comentarios XSL en la pgina 866
Configure un sitio de Dreamweaver. Vase Captulo 2, Configuracin de un sitio de Dreamweaver, en la pgina 87. Seleccione una tecnologa de servidor y configure el servidor de aplicacin. Vase Configuracin de un servidor de aplicaciones en la pgina 681.
851
Pruebe el servidor de aplicaciones para garantizar que funciona correctamente. Por ejemplo, cree una pgina que requiera procesamiento y verifique que el servidor de aplicaciones procesa la pgina correctamente. Para un tutorial sobre el modo de hacerlo, visite www.macromedia.com/go/dw_xsl_es. Siga uno de estos procedimientos:
En su sitio de Dreamweaver, cree un fragmento de XSLT o una pgina completa XSLT. Vase Creacin de pginas XSLT en la pgina 853. Convierta una pgina HTML existente en una pgina completa XSLT. Vase Conversin de pginas HTML en pginas XSLT en la pgina 855.
Si an no lo ha hecho, adjunte una fuente de datos XML a la pgina. Vase Adjuntar fuentes de datos XML en la pgina 855. Vincule los datos XML al fragmento de XSLT o a la pgina completa XSLT. Vase Visualizacin de datos XML en pginas XSLT en la pgina 856. Si procede, aada un objeto XSLT Repetir regin a la tabla, o bien una fila de tabla que contenta los marcadores de posicin de datos XML. Vase Visualizacin de elementos XML repetidos en la pgina 858. Siga uno de estos procedimientos:
Utilice el comportamiento de servidor XSL Transformation para insertar una referencia en el fragmento de XSLT de la pgina dinmica. Vase Insercin de fragmentos de XSLT en pginas dinmicas en la pgina 860. Elimine todo el cdigo HTML de una pgina dinmica y, a continuacin, utilice el comportamiento de servidor XSL Transformation para insertar una referencia a la pgina completa XSLT de la pgina dinmica.
Publique tanto la pgina dinmica como el fragmento de XSLT (o la pgina completa XSLT) en el servidor de aplicaciones. Si utiliza un archivo XML local, deber publicarlo tambin. Visualice la pgina dinmica en un navegador. Al hacerlo, el servidor de aplicaciones transforma los datos XML, los inserta en la pgina dinmica y la muestra en el navegador.
852
Si utiliza una pgina XSLT existente como base y necesita adjuntar una fuente de datos XML, consulte Adjuntar fuentes de datos XML en la pgina 855.
Seleccione Archivo > Nuevo. En la ficha General del cuadro de dilogo Nuevo documento, seleccione Pgina bsica en la columna Categora y, despus, realice una de las siguientes opciones: Seleccione XSLT (pgina completa) en la columna Pgina bsica para crear una pgina XSLT completa. Seleccione XSLT (fragmento) en la columna Pgina bsica para crear un fragmento de XSLT. Haga clic en Crear. Aparece el cuadro de dilogo Buscar origen XML para adjuntar una fuente de datos XML. Siga uno de estos procedimientos:
3.
4.
Seleccione Adjuntar un archivo local en mi equipo o en la red de rea local, haga clic en el botn Examinar, busque un archivo XML en su equipo y, por ltimo, haga clic en Aceptar. Seleccione Adjuntar un archivo remoto en Internet, escriba la URL de un archivo XML de Internet (por ejemplo, uno proveniente de un agregador RSS) y haga clic en Aceptar.
N O TA
Si hace clic en el botn Cancelar, se generar una pgina XSLT nueva sin fuente de datos XML adjunta. Para ms informacin sobre el modo de adjuntar fuentes de datos XML, consulte Adjuntar fuentes de datos XML en la pgina 855.
853
En la tabla siguiente se incluyen explicaciones de los distintos elementos del esquema que pueden aparecer:
Elemento
<>
Representa
Detalles
Elemento XML no repetido y Un elemento que aparece necesario exactamente una vez dentro de su nodo padre Elemento XML repetido Un elemento que aparece una o ms veces dentro de su nodo padre Un elemento que no aparece ninguna vez o ms veces dentro de su nodo padre
<>+
<>?
Elemento de contexto actual Normalmente, el elemento repetido cuando el punto de insercin se encuentra dentro de una regin repetida Atributo XML
@ 5.
Guarde la nueva pgina (Archivo > Guardar) con la extensin .xsl o .xslt (.xsl es la extensin predeterminada).
854
Abra la pgina HTML que desea convertir. Seleccione Archivo > Convertir > XSLT 1.0. Dreamweaver abre una copia de la pgina en la ventana de documento. La nueva pgina es una hoja de estilos XSL y se guarda con la extensin .xsl.
2.
NO T A
Tambin puede hacer clic en el vnculo Origen situado en la esquina superior derecha del panel Vinculaciones para aadir una fuente de datos XML.
Seleccione Adjuntar un archivo local en mi equipo o en la red de rea local, haga clic en el botn Examinar, busque un archivo XML en su equipo y, por ltimo, haga clic en Aceptar. Seleccione Adjuntar un archivo remoto en Internet, escriba la URL de un archivo XML de Internet (por ejemplo, uno proveniente de un agregador RSS).
855
3.
Haga clic en Aceptar para cerrar el cuadro de dilogo Buscar origen XML. Dreamweaver muestra el esquema de la fuente de datos XML en el panel Vinculaciones. Para obtener una gua de los smbolos del esquema, consulte Creacin de pginas XSLT en la pgina 853.
Abra una pgina XSLT con una fuente de datos XML adjunta. Para instrucciones, consulte Creacin de pginas XSLT en la pgina 853. (Opcional) Seleccione Insertar > Tabla para aadir una tabla a la pgina. Las tablas ayudan a organizar los datos XML. Para ms informacin, consulte Captulo 8, Presentacin de contenido en tablas, en la pgina 261.
N OT A
2.
En la mayora de los casos, conviene utilizar el objeto XSLT Repetir regin para mostrar elementos XML repetidos en una pgina. Si ste fuera el caso, puede resultar conveniente crear una tabla de una sola fila con una o varias columnas, o bien una tabla de dos filas si desea incluir un encabezado de tabla. Para ms informacin, consulte Visualizacin de elementos XML repetidos en la pgina 858.
856
3.
En el panel Vinculaciones, seleccione un elemento XML y arrstrelo hasta el lugar de la pgina en el que desea insertar los datos.
Aparece en la pgina un marcador de posicin de los datos XML. Este marcador de posicin se muestra resaltado y encerrado entre llaves. Utiliza la sintaxis XPath (Lenguaje de rutas XML) para describir la estructura jerrquica del esquema XML. Por ejemplo, si arrastra el elemento hijo title a la pgina (y dicho elemento tiene rss, channel e item como elementos padre), la sintaxis del marcador de posicin del contenido dinmico ser {rss/channel/item/title}. Una vez que el marcador de posicin de datos XML est en la pgina, puede hacer doble clic en l para abrir el Creador de expresiones XPATH. Este creador de expresiones permite dar formato a los datos seleccionados o seleccionar otros elementos del esquema XML. Para ms informacin, haga clic en el botn Ayuda del Creador de expresiones XPATH.
4.
(Opcional) Para aplicar estilos a los datos XML, seleccione un marcador de posicin de datos XML y aplquele los estilos como hara con cualquier otro fragmento de contenido. Utilice para ellos el inspector de propiedades o el panel Estilos CSS. Como alternativa, puede utilizar hojas de estilo de tiempo de diseo para aplicar estilos a los fragmentos de XSLT. Cada uno de estos mtodos tiene sus ventajas y limitaciones. Para ms informacin, consulte Aplicacin de estilos a fragmentos de XSLT en la pgina 869.
857
5.
Obtenga una vista previa de su trabajo en un navegador (Archivo > Vista previa en el navegador)
NO T A
Al obtener una vista previa de su trabajo mediante la opcin Vista previa en el navegador, Dreamweaver lleva a cabo una transformacin XSL interna sin utilizar ningn servidor de aplicaciones. Para ms informacin, consulte Acerca de la obtencin de la vista previa de datos XML en la pgina 848.
En la vista Diseo, seleccione una regin que contenga uno o varios marcadores de posicin de los datos XML. La seleccin puede ser una tabla, una fila de una tabla o incluso un prrafo de texto.
858
2.
3.
En el Creador de expresiones XPATH, seleccione el elemento repetido (sealado con un pequeo signo ms).
S UG E R E N CI A
Para seleccionar de forma precisa una regin de la pgina, puede utilizar el selector de etiquetas que se encuentra en la parte inferior de la ventana de documento. Por ejemplo, si la regin es una tabla, haga clic dentro de la tabla de la pgina y, a continuacin, haga clic en la etiqueta <table> del selector de etiquetas.
Seleccione Insertar > Objetos XSLT > Repetir regin. En la categora XSLT de la barra Insertar, haga clic en el botn Repetir regin.
859
4.
Haga clic en Aceptar. En la ventana de documento, aparecer un contorno delgado delimitado con tabulaciones de color gris alrededor de la regin repetida. Al obtener una vista previa de su trabajo en un navegador (Archivo > Vista previa en el navegador), el contorno gris desaparece y la seleccin se ampla para mostrar los elementos repetidos especificados del archivo XML. Tambin comprobar que al aadir el objeto XSLT Repetir regin en la pgina, Dreamweaver acorta la longitud del marcador de posicin de datos XML en la ventana de documento. Esto se debe a que Dreamweaver actualiza la sintaxis XPath del marcador de posicin de datos XML para que est relacionado con la ruta de acceso del elemento repetido. Para ms informacin, consulte Acerca de los datos XML y elementos repetidos en la pgina 846.
Seleccione el objeto haciendo clic en la ficha gris que rodea a la regin repetida. En el inspector de propiedades (Ventana > Propiedades), haga clic en el icono dinmico situado junto al cuadro de texto Seleccionar. En el Creador de expresiones XPATH, realice los cambios y haga clic en Aceptar.
3.
Si quiere insertar el contenido de una pgina completa XSLT en una pgina dinmica, el procedimiento es exactamente el mismo. Antes de utilizar el comportamiento de servidor XSL Transformation para insertar la pgina completa XSLT, elimine todo el cdigo HTML de la pgina dinmica. Para ms informacin, consulte Acerca de las transformaciones XSL en el lado del servidor en la pgina 839.
Abra una pgina de ColdFusion, ASP, ASP.NET o PHP existente. En la vista Diseo, site el punto de insercin donde desee insertar el fragmento de XSLT.
NO TA
Al insertar fragmentos de XSLT, siempre debe hacer clic en el botn Mostrar vistas de cdigo y diseo despus de situar el punto de insercin en la pgina para poder garantizar que el punto de insercin se encuentra en la ubicacin correcta. Si no es as, tal vez deba hacer clic en cualquier otro lugar de la vista Cdigo para situar el punto de insercin en la ubicacin que desee.
3.
En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn del signo ms (+) y seleccione XSL Transformation.
4.
En el cuadro de dilogo XSL Transformation, haga clic en el botn Examinar y busque un fragmento de XSLT o una pgina completa XSLT. Para ms informacin, consulte Creacin de pginas XSLT en la pgina 853. Dreamweaver completa automticamente el siguiente campo de texto con la ruta de archivo o la URL del archivo XML adjunto al fragmento especificado. Para modificarlo, haga clic en el botn Examinar y busque otro archivo.
5.
(Opcional) Haga clic en el botn del signo ms (+) para aadir un parmetro XSLT. Para ms informacin, consulte Utilizacin de los parmetros en las transformaciones XSL en la pgina 863.
861
6.
Haga clic en Aceptar. Dreamweaver inserta una referencia al fragmento de XSLT en la pgina. Este fragmento no se puede editar. Puede hacer doble clic en el fragmento para abrir el archivo de origen y poder editarlo. Asimismo, Dreamweaver crea una carpeta llamada includes/MM_XSLTransform/ en la carpeta raz del sitio, que contiene un archivo de biblioteca de tiempo de ejecucin. El servidor de aplicaciones utiliza las funciones definidas en el archivo para realizar la transformacin. Para ms informacin, consulte Acerca de las transformaciones XSL en el lado del servidor en la pgina 839.
7.
Cargue la pgina dinmica en su servidor (Sitio > Colocar). Cuando Dreamweaver ofrezca la opcin de incluir los archivos dependientes, haga clic en S. Tanto el archivo que contiene el fragmento de XSLT como el archivo XML que contiene los datos y el archivo de biblioteca de tiempo de ejecucin generado deben estar en el servidor para que la pgina se muestre correctamente. (Si ha seleccionado un archivo XML remoto como fuente de datos, evidentemente dicho archivo deber residir en cualquier ubicacin de Internet.)
En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), seleccione el comportamiento de servidor XSL Transformation que desee eliminar. Haga clic en el botn del signo menos (-).
N OT A
2.
Macromedia recomienda que siga siempre este procedimiento para quitar comportamientos del servidor. La eliminacin manual del cdigo generado nicamente quita el comportamiento del servidor de forma parcial, incluso si el comportamiento del servidor desaparece del panel Comportamientos del servidor.
862
En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga doble clic en el comportamiento de servidor XSL Transformation que desee editar. Realice los cambios que desee y haga clic en Aceptar.
2.
Abra el cuadro de dilogo XSL Transformation. Puede hacerlo de dos modos: haciendo doble clic en un comportamiento de servidor XSL Transformation del panel Comportamientos del servidor (Ventana > Comportamientos del servidor), o bien aadiendo un comportamiento de servidor XSL Transformation nuevo. Para instrucciones, consulte Insercin de fragmentos de XSLT en pginas dinmicas en la pgina 860. En el cuadro de dilogo XSL Transformation, haga clic en el botn del signo ms (+) situado junto a los parmetros XSLT.
2.
863
3.
En el cuadro de dilogo Aadir parmetros, introduzca el nombre del parmetro en el cuadro de texto Nombre. El nombre slo puede contener caracteres alfanumricos. No puede contener espacios. Siga uno de estos procedimientos: Si desea utilizar un valor esttico, introdzcalo en el cuadro de texto Valor. Si lo que quiere es utilizar un valor dinmico, haga clic en el icono dinmico situado junto al cuadro de texto Valor, rellene los datos necesarios del cuadro de dilogo Datos dinmicos y, por ltimo, haga clic en Aceptar. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo Datos dinmicos. En el cuadro de texto Valor predeterminado, introduzca el valor que quiere que utilice el parmetro si la pgina no recibe ningn valor de tiempo de ejecucin. Haga clic en Aceptar.
4.
5.
6.
Abra el cuadro de dilogo XSL Transformation. Puede hacerlo de dos modos: haciendo doble clic en un comportamiento de servidor XSL Transformation del panel Comportamientos del servidor (Ventana > Comportamientos del servidor), o bien aadiendo un comportamiento de servidor XSL Transformation nuevo. Para instrucciones, consulte Insercin de fragmentos de XSLT en pginas dinmicas en la pgina 860. Seleccione un parmetro en la lista de parmetros XSLT. Haga clic en el botn Editar. Realice los cambios que desee y haga clic en Aceptar.
2. 3. 4.
Abra el cuadro de dilogo XSL Transformation. Puede hacerlo de dos modos: haciendo doble clic en un comportamiento de servidor XSL Transformation del panel Comportamientos del servidor (Ventana > Comportamientos del servidor), o bien aadiendo un comportamiento de servidor XSL Transformation nuevo. Para instrucciones, consulte Insercin de fragmentos de XSLT en pginas dinmicas en la pgina 860. Seleccione un parmetro en la lista de parmetros XSLT. Haga clic en el botn del signo menos (-).
2. 3.
864
Seleccione Insertar > Objetos XSLT > Regin condicional, o bien Insertar > Objetos XSLT > Regin condicional mltiple. En el cuadro de dilogo Regin condicional o Regin condicional mltiple, escriba la expresin condicional que quiere utilizar para la regin. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
Seleccione el objeto haciendo clic en la ficha gris que rodea a la regin condicional. En el inspector de propiedades (Ventana > Propiedades), edite la expresin condicional en el cuadro de texto de prueba.
865
En la vista Diseo, seleccione Insertar > Objetos XSLT > Comentario XSL, redacte el contenido del comentario (o deje el cuadro de texto en blanco) y haga clic en Aceptar. En la vista Cdigo, seleccione Insertar > Objetos XSLT > Comentario XSL.
Cambie a la vista Cdigo (Ver > Cdigo) Seleccione el cdigo que quiere comentar. En la barra de herramientas Codificacin, haga clic en el botn Aplicar comentario y seleccione Aplicar comentario <xsl:comment></xsl:comment>.
Flujo de trabajo para la realizacin de transformaciones XSL en el lado del cliente en la pgina 867 Creacin de pginas completas XSLT en la pgina 868 Vinculacin de archivos XSLT y XML en la pgina 868
Temas relacionados Acerca de las transformaciones XSL en el lado del servidor en la pgina 839
866
Configure un sitio de Dreamweaver. Vase Captulo 2, Configuracin de un sitio de Dreamweaver, en la pgina 87. Siga uno de estos procedimientos:
En el sitio de Dreamweaver, cree una pgina completa XSLT. Vase Creacin de pginas completas XSLT en la pgina 868. Convierta una pgina HTML existente en una pgina completa XSLT. Vase Conversin de pginas HTML en pginas XSLT en la pgina 855.
Si an no lo ha hecho, adjunte una fuente de datos XML a la pgina. Vase Adjuntar fuentes de datos XML en la pgina 855. El archivo XML que adjunta debe residir en el mismo directorio que la pgina XSLT. Vincule los datos XML a la pgina XSLT. Vase Visualizacin de datos XML en pginas XSLT en la pgina 856. Si procede, aada un objeto XSLT Repetir regin a la tabla, o bien una fila de tabla que contenta los marcadores de posicin de datos XML. Vase Visualizacin de elementos XML repetidos en la pgina 858. Adjunte la pgina XSLT a la pgina XML. Vase Vinculacin de archivos XSLT y XML en la pgina 868. Publique la pgina XML y la pgina XSLT vinculada en el servidor Web. Visualice la pgina XML en un navegador. Al hacerlo, el navegador transforma los datos XML, les da formato con la pgina XSLT y muestra la pgina con estilos en el navegador.
867
Creacin de pginas XSLT en la pgina 853 Visualizacin de datos XML en pginas XSLT en la pgina 856 Visualizacin de elementos XML repetidos en la pgina 858 Aplicacin de estilos a fragmentos de XSLT en la pgina 869
Los archivos XML y XSL que se utilizan para las transformaciones en el lado del cliente deben estar en el mismo directorio. De lo contrario, el navegador leer el archivo XML y buscar la pgina XSLT para la transformacin, pero no podr encontrar los activos (hojas de estilos, imgenes, etc.) definidos por los vnculos relacionados en la pgina XSLT.
Abra el archivo XML que quiere vincular con la pgina XSLT. Seleccione Comandos > Adjuntar una hoja de estilos XSLT. En el cuadro de dilogo correspondiente, haga clic en el botn Examinar, navegue hasta la pgina con la que desea establecer el vnculo, seleccinela y haga clic en Aceptar. Haga clic en Aceptar para cerrar el cuadro de dilogo Adjuntar hoja de estilos XSLT.
4.
Dreamweaver inserta la referencia en la pgina XSLT en la parte superior del documento XML.
868
En primer lugar, adjunte una hoja de estilos externa a la pgina dinmica. (Este procedimiento se ajusta a las prcticas recomendadas para aplicar estilos al contenido de cualquier pgina Web). A continuacin, adjunte la misma hoja de estilos externa al fragmento de XSLT como una hoja de estilos de tiempo de diseo. Tal como indica su propio nombre, las hojas de estilos de tiempo de diseo slo funcionan en la vista Diseo de Dreamweaver. Para ms informacin, consulte Utilizacin de hojas de estilo de tiempo de diseo en la pgina 455.
869
Una vez finalizados los pasos anteriores, ya puede aplicar los estilos existentes o crear nuevos en el fragmento de XSLT con la misma hoja de estilos que adjunt a la pgina dinmica. Obtendr resultados HTML ms claros (ya que la referencia a la hoja de estilos slo es vlida mientras se trabaja en Dreamweaver) y el fragmento seguir mostrando los estilos adecuados en la vista Diseo. Adems, todos los estilos se aplicarn tanto al fragmento como a la pgina dinmica cuando la visualice en la vista Diseo, o cuando obtenga una vista previa de la pgina dinmica en un navegador.
NO T A 870
Si obtiene una vista previa del fragmento de XSLT en un navegador, ste no mostrar los estilos. Deber obtener la vista previa de la pgina dinmica en el navegador para poder visualizar el fragmento de XSLT en el contexto de la pgina dinmica.
Para ms informacin sobre el uso de CSS para dar formato a fragmentos de XSLT, consulte www.macromedia.com/go/dw_xsl_styles_es.
CAPTULO 37
37
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.
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.
871
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. Los intermediarios de servicios mantienen un registro de los proveedores de servicio con descripciones de las ofertas de servicio y vnculos a sus aplicaciones. Los consumidores de servicios
Web remoto.
872
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 876.
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.
Servicios Web
873
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.
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 881.
X Methods en http://www.xmethods.net IBM Business Registry en https://uddi.ibm.com/ubr/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.
874
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 883
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/
Servicios Web
875
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, consulte el sitio Web Apache AXIS en http://ws.apache.org/axis/index.html. Temas relacionados Configuracin de generadores proxy para utilizarlos con Dreamweaver en la pgina 877
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.
Seleccione Ventana > Componentes, para abrir al panel Componentes. 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 Generadores proxy.
877
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.
NO T A
5.
Rellene el cuadro de dilogo y haga clic en Aceptar. Para informacin sobre cmo seleccionar las opciones del cuadro de texto de dilogo, haga clic en el botn Ayuda del cuadro de dilogo.
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.
Captulo 37: Utilizacin de servicios Web (slo Windows)
878
Abra la pgina a la que desea aadir el servicio Web. Seleccione Ventana > Componentes, para abrir al panel Componentes. 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. Aparecer el cuadro de dilogo Aadir utilizando WSDL.
879
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 883.
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 876.
6.
Haga clic en Aceptar. 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 875
880
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.
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. 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. 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
2.
881
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.
NO T A
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.
882
En Dreamweaver, seleccione Ventana > Componentes para abrir el panel del mismo nombre. 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. Aparecer el cuadro de dilogo Aadir utilizando WSDL. En el Selector de servicios Web, haga clic en el icono de globo y elija Editar lista de sitios UDDI en el men emergente. Aparece el cuadro de dilogo Sitio UDDI.
2.
3.
4.
En el cuadro de dilogo Sitio 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.
883
884
CAPTULO 38
38
Comportamientos de servidor personalizados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .885 Instalacin de comportamientos de servidor de terceros . . . . . . . . . . . . . . . . . . . . . 897 Utilizacin del Creador de comportamientos de servidor . . . . . . . . . . . . . . . . . . . . .898 Utilizacin de parmetros en comportamientos de servidor . . . . . . . . . . . . . . . . . 902 Colocacin de bloques de cdigo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 902 Creacin de un cuadro de dilogo para un comportamiento de servidor personalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 904 Edicin y modificacin de comportamientos de servidor . . . . . . . . . . . . . . . . . . . . .907
885
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.
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 898. Para informacin sobre la sintaxis que admiten los comportamientos de servidor de Dreamweaver, vase Utilizacin de parmetros en comportamientos de servidor en la pgina 902.
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 902.
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 904.
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 896.
886
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 895
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 898.
887
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 895. Temas relacionados Cmo hacer que los bloques de cdigo sean condicionales en la pgina 890
888
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.
Opciones de Insertar cdigo Opciones de Posicin relativa
Por encima de la etiqueta Al comienzo del archivo <html> 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
Seleccione una etiqueta del men emergente Etiqueta y, a continuacin, marque una de las opciones de posicin de etiquetas. Delante de la seleccin Tras la seleccin Reemplazar la seleccin Ajustar seleccin
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 887
889
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); %>
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 904.
890
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 892) como desee dentro de una directiva condicional. Por ejemplo, puede especificar que si una expresin es verdadera, se ejecute un bucle.
N OT A
Esta seccin trata sobre los siguientes temas:Temas relacionados Bloques de cdigo en la pgina 887
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();
891
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();
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 894. 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 904), 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).
892
Las directivas loop no se pueden anidar, aunque las directivas condicionales (vase Colocacin de bloques de cdigo en la pgina 902) 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"]
893
Las matrices de parmetros no pueden utilizarse fuera de un bucle si no son parte de una expresin de directiva condicional.
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 comportamientos de servidor: 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 Comportamientos de servidor personalizados en la pgina 885 Comportamientos del servidor en la pgina 886
895
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).
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.
896
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.
NO TA
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.
Inicie Extension Manager seleccionando Comandos > Administrar extensiones. Seleccione Archivo > Instalar extensin en Extension Manager. Para ms informacin, consulte Utilizacin de Extension Manager.
897
En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga 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. En el cuadro de texto Nombre, introduzca un nombre para el comportamiento de servidor. 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.
3. 4.
898
5.
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.
899
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 comportamiento de servidor. 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: Site el punto de insercin en el bloque de cdigo en el que desee insertar los parmetros. Haga clic en Insertar parmetros, en el botn Bloque de cdigo. Aparecer el cuadro de dilogo Insertar parmetro en bloque de cdigo. Escriba un nombre para el parmetro en el cuadro de texto Nombre del parmetro. 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.
a.
b.
c. d.
900
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 902.
11.
Puede especificar informacin adicional sobre el comportamiento de servidor que est creando mediante el panel Opciones avanzadas. clic en el botn Avanzado para ver las opciones avanzadas.
12. Haga
13.
Si necesita crear mas bloques de cdigo, repita los pasos 7 a 13. 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 904.
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.
Repeticin de bloques de cdigo en la pgina 892 Reglas de codificacin en la pgina 895 Colocacin de bloques de cdigo en la pgina 902
901
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); %>
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 904.
902
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 898. 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. En el cuadro de dilogo Creador de comportamientos de servidor, seleccione una posicin relativa a la seleccionada en el men emergente Insertar cdigo. 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 (+).
2.
3.
4.
5.
Compruebe el comportamiento de servidor y asegrese de que funciona correctamente. Consulte Comprobacin de comportamientos de servidor en la pgina 896 para ms informacin.
En el men emergente Insertar cdigo, seleccione Relativo a una etiqueta especfica. En el cuadro de texto Etiqueta, introduzca la etiqueta o seleccinela del men emergente. Si introduce una etiqueta, omita los signos (< >). 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.
3.
903
Para situar un bloque de cdigo con relacin a una etiqueta seleccionada por el diseador de la pgina:
1. 2.
En el men emergente Insertar cdigo, seleccione Relativo a la seleccin. 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 Comportamientos de servidor personalizados en la pgina 885
Posicin de los bloques de cdigo dentro de las pginas Web en la pgina 888 Utilizacin del Creador de comportamientos de servidor en la pgina 898
904
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 comportamiento de servidor.
NO TA
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.
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@@
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@@); %>
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:
NO TA
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.
905
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. (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. Haga clic en Aceptar. Dreamweaver genera un cuadro de dilogo con un control con descripcin por cada parmetro proporcionado por el diseador que haya definido.
3.
4.
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.
906
En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Editar comportamientos de servidor en el men emergente. 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.
2.
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. (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. Haga clic en Aceptar.
5.
6.
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.
907
Para editar el cdigo de un comportamiento de servidor creado con el Creador de comportamientos de servidor:
1.
En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Editar comportamientos de servidor en el men emergente. 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. (Opcional) Puede modificar o aadir marcadores de parmetros al cdigo. Para instrucciones, consulte Creacin de un cuadro de dilogo para un comportamiento de servidor personalizado en la pgina 904.
4.
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, consulte Colocacin de bloques de cdigo en la pgina 902.
908
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.
909
910
CAPTULO 39
Creacin de formularios
Puede utilizar Macromedia Dreamweaver 8 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. Este captulo contiene las siguientes secciones:
39
Formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 912 Creacin de formularios HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 915 Insercin de objetos de formulario HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 918 Insercin de objetos de formulario HTML dinmicos. . . . . . . . . . . . . . . . . . . . . . . . .923 Validacin de datos de formulario HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .927 Cmo adjuntar comportamientos JavaScript a objetos de formulario HTML . . 929 Cmo adjuntar scripts personalizados a botones de formulario HTML . . . . . . . . 929 Creacin de formularios HTML accesibles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 930
911
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.
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: 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.
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.
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.
N OT A
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.
Formularios
913
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.
NO TA 914
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 591.
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 915
915
Abra una pgina y site el punto de insercin donde desee que aparezca el formulario. 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. incrusta los datos del formulario en la peticin HTTP.
POST
916
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 918 o Insercin de objetos de formulario HTML dinmicos en la pgina 923. 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.
Cmo adjuntar comportamientos JavaScript a objetos de formulario HTML en la pgina 929 Cmo adjuntar scripts personalizados a botones de formulario HTML en la pgina 929 Creacin de formularios HTML accesibles en la pgina 930
917
Site el punto de insercin en el interior del contorno del formulario. Seleccione Insertar > Formulario > Campo de texto. Aparece un campo de texto en el documento. En el inspector de propiedades, establezca las propiedades del campo de texto que desee. Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades. Para etiquetar el campo de texto en la pgina, haga clic junto al campo de texto y escriba el texto de la etiqueta.
3.
4.
Visualizacin de contenido dinmico en campos de texto HTML en la pgina 925 Objetos de formulario en la pgina 913
918
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 919.
Site el punto de insercin en el interior del contorno del formulario. Seleccione Insertar > Formulario > Casilla de verificacin Aparecer una casilla de verificacin en el documento. En el inspector de propiedades, establezca las propiedades de la casilla de verificacin que desee. Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades. Para etiquetar la casilla de verificacin, haga clic junto a la casilla de verificacin en la pgina y escriba la etiqueta.
3.
4.
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 919.
Site el punto de insercin en el interior del contorno del formulario. Seleccione Insertar > Formulario > Grupo de opciones. Aparece el cuadro de dilogo Grupo de opciones. 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.
3.
919
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:
1. 2.
Site el punto de insercin en el interior del contorno del formulario. Inserte un botn de opcin. Para ello, elija Insertar > Formulario > Botn de opcin. Aparece un botn de opcin en el documento. En el inspector de propiedades, establezca las propiedades del botn de opcin que desee. Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades. Para etiquetar el botn de opcin, haga clic junto al botn de opcin en la pgina y escriba la etiqueta.
3.
4.
Site el punto de insercin en el interior del contorno del formulario. Seleccione Insertar > Formulario > Lista/men. Aparecer un men en el documento. En el inspector de propiedades, establezca las propiedades del men como desee. Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades.
3.
920
Site el punto de insercin en el interior del contorno del formulario. Seleccione Insertar > Formulario > Botn. Aparece un botn en el formulario. En el inspector de propiedades, establezca las propiedades del botn que desee. Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades.
3.
En el documento, site el punto de insercin en el interior del contorno del formulario. Seleccione Insertar > Formulario > Campo de imagen. Se abre el cuadro de dilogo Seleccionar origen de imagen. 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 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 inspector de propiedades. Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades.
3.
4.
921
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 929 y Cmo adjuntar scripts personalizados a botones de formulario HTML en la pgina 929.
En la vista Diseo, site el punto de insercin en el interior del contorno del formulario. 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. En el cuadro de texto Valor, escriba el valor que desee asignar al campo.
4.
922
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.
NO TA
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.
Inserte un formulario en la pgina (Insertar > Formulario). Seleccione el formulario para visualizar su inspector de propiedades. Defina el mtodo del formulario como POST. En el men Enctype, seleccione multipart/form-data. En el cuadro Accin, especifique el script del lado del servidor o la pgina capaz de administrar el archivo cargado. 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. En el inspector de propiedades, establezca las propiedades del campo de archivo que desee. Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades.
6.
7.
Creacin de formularios ASP.NET en la pgina 1017 Creacin de formularios ColdFusion MX 7 en la pgina 941
923
Haga clic en el interior del formulario HTML de la pgina. Seleccione Insertar > Formulario > Lista/men. Dreamweaver inserta un objeto Lista/men en la pgina. Seleccione el objeto de formulario Lista/men. El inspector de propiedades muestra las propiedades de la lista/men. En el inspector de propiedades de lista/men, haga clic en el botn Dinmico para que aparezca el cuadro de dilogo Lista/men dinmico.
3.
4.
5.
Rellene el cuadro de dilogo y haga clic en Aceptar. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
924
En la vista Diseo, seleccione el objeto de formulario de lista/men que desea que sea dinmico. En el inspector de propiedades, haga clic en el botn Dinmico. Aparecer el cuadro de dilogo Lista/men dinmico. Rellene el cuadro de dilogo y haga clic en Aceptar. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo.
2.
3.
925
Seleccione el campo de texto en el formulario HTML de su pgina. 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. Seleccione la columna de juego de registros que proporcione un valor al campo de texto y haga clic en Aceptar.
3.
Seleccione un objeto de formulario de casilla de verificacin en su pgina. En el inspector de propiedades, haga clic en el botn Dinmico. Aparecer el cuadro de dilogo Casilla de verificacin dinmica.
3.
Rellene el cuadro de dilogo y haga clic en Aceptar. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo.
926
Cuando el formulario se abra en un navegador, la casilla de verificacin aparecer activada o desactivada, en funcin de los datos.
En la vista Diseo, seleccione un botn de opcin del grupo. En el inspector de propiedades, haga clic en el botn Dinmico. Aparecer el cuadro de dilogo Grupo de opciones dinmico. Rellene el cuadro de dilogo y haga clic en Aceptar. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo.
3.
927
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. 3.
Seleccione el botn Enviar. En el panel Comportamientos (Ventana > Comportamientos), haga clic en el botn ms (+) y seleccione de la lista el comportamiento Validar formulario. Aparece el cuadro de dilogo Validar formulario.
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 597.
N O TA 928
El comportamiento Validar formulario slo est disponible si se ha insertado un campo de texto en el documento.
Esta caracterstica no funciona con los controles de formulario ASP.NET porque estos controles se procesan en el servidor.
Seleccione el objeto de formulario HTML. En el panel Comportamientos (Ventana > Comportamientos), haga clic en el botn ms (+) y seleccione de la lista un comportamiento. Para ms informacin, consulte Captulo 18, Utilizacin de comportamientos JavaScript, en la pgina 559.
Seleccione un botn Enviar en un formulario. En el panel Comportamientos (Ventana > Comportamientos), haga clic en el botn ms (+) y seleccione Llamar JavaScript en la lista. Para ms informacin sobre este comportamiento, consulte Llamar JavaScript en la pgina 567.
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().
929
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.
function processMyForm(){ alert('Thanks for your order!'); }
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 76). Este es un paso que se realiza slo una vez. En el documento, site el punto de insercin en el lugar donde desea que aparezca el formulario. 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.
2.
3.
930
4.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
NO T A
5.
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.
Edite los atributos apropiados en la vista Cdigo. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y, a continuacin, seleccione Editar etiqueta.
<label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label> <input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton3
931
932
PARTE 8
933
CAPTULO 40
40
935
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:
936
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 938. Una pgina detalle tambin puede utilizarse para actualizar o eliminar el registro mostrado. Temas relacionados Creacin de pginas maestra-detalle (ColdFusion) en la pgina 954
Creacin de pginas Maestro-Detalle (ASP.NET) en la pgina 1028 Creacin de pginas maestra-detalle (ASP y JSP) en la pgina 1067 Creacin de pginas maestra-detalle (PHP) en la pgina 1093
937
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 963
938
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.
N OT A
Temas relacionados Utilizacin de procedimientos almacenados para modificar bases de datos (ColdFusion) en la pgina 993 Utilizacin de procedimientos almacenados para modificar bases de datos (ASP.NET) en la pgina 1064 Utilizacin de procedimientos almacenados para modificar bases de datos (ASP y JSP) en la pgina 1084
939
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.
NO TA 940
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 1086.
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.
N OT A
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().
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 1089.
941
Activacin de las mejoras de ColdFusion en la pgina 942 Creacin de formularios ColdFusion en la pgina 943 Insercin de los controles del formulario ColdFusion. en la pgina 945 Definicin visual de las propiedades de los controles de formularios ColdFusion en la pgina 953 Validacin de datos de formulario ColdFusion en la pgina 953
Si an no lo ha hecho, defina un sitio de Dreamweaver para el proyecto ColdFusion. Para ms informacin, consulte Captulo 2, Configuracin de un sitio de Dreamweaver, en la pgina 87.
2.
Para acceder a la ficha Avanzadas del cuadro de dilogo Definicin del sitio, seleccione Sitio > Administrar sitios, seleccione su sitio en la lista y haga clic en Editar. Si aparece la ficha Bsicas del cuadro de dilogo Definicin del sitio, haga clic en la ficha Avanzadas para acceder a la informacin avanzada.
3.
Seleccione la categora Servidor de prueba y especifique como servidor de prueba para su sitio de Dreamweaver un equipo en el que se ejecute ColdFusion MX 7 o una versin posterior. Asegrese de especificar un prefijo de URL vlido. Para ms informacin, consulte Especificacin de dnde pueden procesarse las pginas dinmicas en la pgina 690.
4.
Abra cualquier documento ColdFusion. No ver ningn cambio visible en el espacio de trabajo de Dreamweaver hasta que no abra un documento ColdFusion.
942
Proteccin de una carpeta de su aplicacin (ColdFusion) en la pgina 1007 Visualizacin de componentes de ColdFusion en Dreamweaver en la pgina 1011 Definicin de juego de registros en un componente de ColdFusion en la pgina 1015 Utilizacin de un juego de registros de CFC como fuente de contenido dinmico en la pgina 1016 Creacin o modificacin de una fuente de datos ColdFusion en la pgina 694
Abra una pgina de ColdFusion y site el punto de insercin donde desee que aparezca el formulario ColdFusion. Seleccione Insertar > Objetos de ColdFusion > CFForm > CFForm, o bien seleccione la categora CFForm en la barra Insertar y haga clic en el icono del formulario CF. Dreamweaver inserta un formulario ColdFusion vaco. En la vista Diseo, el formulario se indica con un contorno de lnea de puntos rojos. Si no ve el contorno, verifique que la opcin Ver > Ayudas visuales > Elementos invisibles est seleccionada.
2.
3.
Asegrese de que el formulario sigue seleccionado y, a continuacin, utilice el inspector de propiedades para especificar la pgina o el script que procesar los datos del formulario. En el inspector de propiedades, escriba la ruta de acceso de la pgina o del script en el cuadro de texto Accin, o bien haga clic en el icono de carpeta situado junto al cuadro de texto y desplcese hasta la pgina o el script. Si no puede ver el cuadro de texto Accin en el inspector de propiedades, haga clic en el contorno del formulario en la ventana de documento para seleccionarlo.
943
4.
En el men emergente Mtodo, seleccione el mtodo mediante el cual se transmitirn los datos del formulario al servidor: utiliza el valor predeterminado del navegador para enviar los datos del formulario del servidor. Normalmente, el valor predeterminado es el mtodo get.
Predeterminado GET
aade el valor al URL que solicita la pgina. incrusta los datos del formulario en la peticin HTTP.
POST
Inserte los controles del formulario ColdFusion. Site el punto de insercin en el lugar en el que quiere que aparezca el control del formulario ColdFusion en el formulario y, a continuacin, seleccione el control en el men Insertar (Insertar > Objetos de ColdFusion > CFForm), o bien hgalo desde la categora CFForm de la barra Insertar. Para ms informacin, consulte Insercin de los controles del formulario ColdFusion. en la pgina 945.
6.
Si es necesario, defina las propiedades del control con el inspector de propiedades. Asegrese de que el control est seleccionado en la vista Diseo y, despus, defina las propiedades en el inspector de propiedades. Para ms informacin sobre las propiedades, haga clic en el icono Ayuda del inspector de propiedades.
7.
Ajuste el diseo del formulario ColdFusion. Si est creando un formulario basado en HTML, 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 ColdFusion en otro formulario ColdFusion (es decir, superponer etiquetas), pero puede incluir varios formularios ColdFusion en una misma pgina. Si est creando un formulario basado en Flash, utilice estilos CSS para disear el formulario. ColdFusion omitir cualquier cdigo HTML del formulario. No olvide etiquetar los campos del formulario ColdFusion con texto descriptivo para que el resto de usuarios puedan saber a qu corresponden. Por ejemplo, cree una etiqueta del tipo Escriba el nombre de la etiqueta para solicitar informacin del nombre.
944
Insercin de campos de texto ColdFusion en la pgina 945 Insercin de campos ocultos ColdFusion en la pgina 946 Insercin de reas de texto ColdFusion en la pgina 947 Insercin de botones ColdFusion en la pgina 947 Insercin de casillas de verificacin ColdFusion en la pgina 948 Insercin de botones de opcin ColdFusion en la pgina 949 Insercin de cuadros de seleccin ColdFusion en la pgina 949 Insercin de campos de imagen ColdFusion en la pgina 950 Insercin de campos de archivo ColdFusion en la pgina 951
En la vista Diseo, site el punto de insercin en el interior del contorno del formulario. En la categora CFForm de la barra Insertar, haga clic en el icono del campo de texto CF. Aparece un campo de texto en el formulario. En el inspector de propiedades, establezca las propiedades del campo de texto. Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades.
3.
945
4.
Para etiquetar el campo de texto en la pgina, haga clic junto al campo de texto y escriba el texto de la etiqueta.
Repita los pasos 1 y 2 descritos en el procedimiento anterior para insertar un cuadro de texto. Seleccione el campo de texto insertado para visualizar su inspector de propiedades. Seleccione el valor de contrasea en el men emergente del modo de texto del inspector de propiedades.
2. 3.
Definicin visual de las propiedades de los controles de formularios ColdFusion en la pgina 953
En la vista Diseo, site el punto de insercin en el interior del contorno del formulario. En la categora CFForm de la barra Insertar, haga clic en el icono del campo oculto CF. Aparece un marcador en el formulario ColdFusion. Si no puede ver el marcador, seleccione Ver> Ayudas visuales > Elementos invisibles.
3.
En el inspector de propiedades, establezca las propiedades del campo oculto. Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades.
Temas relacionados Definicin visual de las propiedades de los controles de formularios ColdFusion en la pgina 953
946
Site el punto de insercin en el interior del contorno del formulario. En la categora CFForm de la barra Insertar, haga clic en el icono del rea de texto CF. Aparece un rea de texto en el formulario ColdFusion. En el inspector de propiedades, establezca las propiedades del rea texto. Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades. Para etiquetar el rea de texto, haga clic junto al campo de texto y escriba el texto de la etiqueta.
3.
4.
Definicin visual de las propiedades de los controles de formularios ColdFusion en la pgina 953
947
Site el punto de insercin en el interior del contorno del formulario ColdFusion. En la categora CFForm de la barra Insertar, haga clic en el icono del botn CF. Aparece un botn en el formulario ColdFusion. En el inspector de propiedades, establezca las propiedades del botn. Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades.
3.
Temas relacionados Definicin visual de las propiedades de los controles de formularios ColdFusion en la pgina 953
Site el punto de insercin en el interior del contorno del formulario. En la categora CFForm de la barra Insertar, haga clic en el icono de la casilla de verificacin CF. Aparece una casilla de verificacin en el formulario ColdFusion. En el panel Propiedades, establezca las propiedades de la casilla de verificacin. Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades. Para etiquetar la casilla de verificacin, haga clic junto a la casilla de verificacin en la pgina y escriba la etiqueta.
3.
4.
Temas relacionados Definicin visual de las propiedades de los controles de formularios ColdFusion en la pgina 953
948
Site el punto de insercin en el interior del contorno del formulario. En la categora CFForm de la barra Insertar, haga clic en el icono del botn de opcin CF. Aparece un botn de opcin en el formulario ColdFusion. En el inspector de propiedades, establezca las propiedades del botn de opcin. Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades. Para etiquetar el botn de opcin, haga clic junto al campo de texto de la pgina y escriba el texto de la etiqueta.
3.
4.
Temas relacionados Definicin visual de las propiedades de los controles de formularios ColdFusion en la pgina 953
949
Esta mejora de Dreamweaver slo est disponible si se accede a un equipo con ColdFusion MX 7 o una versin posterior instalada. Para ms informacin, consulte Activacin de las mejoras de ColdFusion en la pgina 942.
Para insertar visualmente un cuadro de seleccin ColdFusion:
1. 2.
Site el punto de insercin en el interior del contorno del formulario. En la categora CFForm de la barra Insertar, haga clic en el icono del cuadro de seleccin CF. Aparece un cuadro de seleccin en el formulario ColdFusion. En el inspector de propiedades, establezca las propiedades del cuadro de seleccin. Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades.
3.
Temas relacionados Definicin visual de las propiedades de los controles de formularios ColdFusion en la pgina 953
En la vista Diseo, site el punto de insercin en el interior del contorno del formulario. En la categora CFForm de la barra Insertar, haga clic en el icono del campo de imagen CF. Aparece un cuadro de dilogo para que pueda buscar la imagen que desee. Seleccione la imagen que desea insertar y haga clic en el botn Aceptar. Si la imagen se encuentra fuera de la carpeta raz del sitio, Dreamweaver le preguntar si desea copiar la imagen en la carpeta raz. No es posible acceder a las imgenes ubicadas fuera de la carpeta raz al publicar el sitio. Tambin puede escribir la ruta de acceso al archivo de imagen que desea mostrar en el cuadro de texto Orig. en el inspector de propiedades.
3.
En el inspector de propiedades, establezca las propiedades del campo de imagen. Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades.
950
Temas relacionados Definicin visual de las propiedades de los controles de formularios ColdFusion en la pgina 953
En la vista Diseo, seleccione CFForm para mostrar su inspector de propiedades. Para seleccionar el formulario de forma rpida, haga clic en cualquier lugar del contorno del formulario y, despus, seleccione la etiqueta <cfform> en el selector de etiquetas situado en la parte inferior de la ventana de documento.
2. 3. 4.
En el inspector de propiedades, establezca el mtodo del formulario en POST. En el men emergente Enctype, seleccione multipart/form-data. Site el punto de insercin dentro del contorno del formulario en el que desea que aparezca el campo de archivo. En la categora CFForm de la barra Insertar, haga clic en el icono del campo de archivo CF. Aparece un campo de archivo en el documento.
5.
951
6.
En el inspector de propiedades, establezca las propiedades del campo de archivo. Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades.
Temas relacionados Definicin visual de las propiedades de los controles de formularios ColdFusion en la pgina 953
En la vista Diseo, seleccione CFForm para mostrar su inspector de propiedades. Para seleccionar el formulario de forma rpida, haga clic en cualquier lugar del contorno del formulario y, despus, seleccione la etiqueta <cfform> en el selector de etiquetas situado en la parte inferior de la ventana de documento.
2.
En el inspector de propiedades, establezca la propiedad Formato en Flash. El control del campo de fecha nicamente se muestra en formularios ColdFusion basados en Flash.
3.
Cambie a la vista Cdigo (Ver > Cdigo) e introduzca la siguiente etiqueta en cualquier lugar entre las etiquetas CFForm de apertura y de cierre:
<cfinput name="datefield" type="datefield">
4.
En el inspector de propiedades, establezca las propiedades del campo de fecha. Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades.
952
En la vista Diseo, seleccione el control de formulario de la pgina; en la vista Cdigo, haga clic en cualquier lugar dentro de la etiqueta del control. El inspector de propiedades muestra las propiedades del control de formulario. Cambie las propiedades del control en el inspector de propiedades. Para ms informacin, haga clic en el icono Ayuda del inspector de propiedades. Para configurar ms propiedades, haga clic en el botn Mostrar Quick tag editor del inspector de propiedades y configure las propiedades en el Quick tag editor que aparezca.
2.
3.
Cree un formulario ColdFusion que incluya al menos un campo de entrada y un botn Enviar. Asegrese de que cada uno de los campos ColdFusion que desee validar tenga un nombre exclusivo.
2. 3.
Seleccione un campo del formulario que desee validar. En el inspector de propiedades, especifique cmo quiere validar el campo.
953
La parte inferior de cada inspector de propiedades contiene los controles necesarios para que pueda definir la regla especfica de validacin. Por ejemplo, si quiere especificar que un texto debe contener un nmero de telfono. Para ellos, seleccione Telfono en el men emergente Valor del inspector de propiedades. Tambin puede especificar la fecha en que desea realizar la validacin en el men emergente de validacin.
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.
954
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 787). 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 963). 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.
4.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
955
5.
Haga clic en Aceptar. 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 764. Tambin puede crear pginas maestra-detalle con comportamientos individuales de servidor.
Creacin de la pgina maestra (ColdFusion) en la pgina 957 Creacin de vnculos con la pgina detalle (ColdFusion) en la pgina 959 Creacin de un parmetro de URL para los vnculos (ColdFusion) en la pgina 960 Bsqueda y visualizacin del registro solicitado en la pgina detalle (ColdFusion) en la pgina 961
956
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.
2.
Defina un juego de registros para la pgina. 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.
957
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 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 963.
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. Aparecer el cuadro de dilogo 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.
958
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. 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.
3.
El paso siguiente consiste en crear un parmetro de URL que facilite el ID de registro a la pgina detalle.
959
En la pgina maestra, seleccione el vnculo de la tabla dinmica. Si Live Data est activado, seleccione el vnculo en la primera fila. En el cuadro de texto Vnculo del inspector de propiedades, aada la cadena siguiente al final del URL:
?recordID=#recordsetName.fieldName#
2.
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.
960
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. 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.
4.
961
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.
6.
962
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 807.
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.
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.
963
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 formulario HTML en la pgina 918.
3. 4.
Aada al formulario un botn Enviar (Insertar > Formulario > Botn). 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. En el men emergente Mtodo, elija uno de los siguientes mtodos para determinar cmo debe enviar los datos el formulario al servidor.
7.
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. usa el mtodo predeterminado del navegador (generalmente, GET).
Default
Ya ha terminado la pgina de bsqueda. A continuacin deber crear la pgina de resultados. Temas relacionados Pginas de bsqueda/resultados en la pgina 938
964
Creacin de la pgina de bsqueda en la pgina 963 Creacin de una pgina detalle para una pgina de resultados en la pgina 970
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 968).
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.
965
3.
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.
N OT A
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.
966
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). 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.
3.
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 inspector de propiedades. 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.
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 969.
967
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 965).
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. 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.
2.
3.
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.
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, consulte Creacin de un juego de registros avanzado escribiendo SQL en la pgina 789. Para obtener ayuda sobre la sintaxis SQL, vase Apndice B, Nociones bsicas de SQL, en la pgina 1139.
968
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.
969
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. Aparecer el cuadro de dilogo 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.
3.
Haga clic en Aceptar. 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 Captulo 35, Visualizacin de registros de la base de datos, en la pgina 817.
Creacin de pginas maestra-detalle (ColdFusion) en la pgina 954 Creacin de pginas maestra-detalle (ASP y JSP) en la pgina 1067 Creacin de pginas maestra-detalle (PHP) en la pgina 1093
970
Un formulario HTML que permite a los usuarios introducir datos Un comportamiento de servidor Insertar registro que actualiza la base de datos
971
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 972), 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 973).
NO T A
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.
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. Complete este cuadro de dilogo. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
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.
972
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
Cree una nueva pgina dinmica (Archivo > Nuevo) y disela con las herramientas de diseo de Dreamweaver. Aada un formulario HTML situando el punto de insercin donde desea que aparezca el formulario y seleccionando 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.
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. 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 formulario HTML en la pgina 918.
973
5.
Aada al formulario un botn Enviar (Insertar > Formulario > Botn). 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:
1.
En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Insertar registro del men emergente. Aparecer el cuadro de dilogo Insertar registro. Complete este cuadro de dilogo. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
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. 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.
Bsqueda del registro que se desea actualizar (ColdFusion) en la pgina 975 Creacin de vnculos para abrir la pgina de actualizacin (ColdFusion) en la pgina 975 Creacin de un parmetro de URL para los vnculos de actualizacin (ColdFusion) en la pgina 976 Recuperacin del registro que debe actualizarse (ColdFusion) en la pgina 978
974
Cmo completar la pgina de actualizacin en una operacin (ColdFusion) en la pgina 979 Cmo completar la pgina de actualizacin elemento a elemento (ColdFusion) en la pgina 980
Creacin de una pgina de insercin de registro (todos los servidores) en la pgina 971 Creacin de pginas para eliminar un registro (ColdFusion) en la pgina 983
975
En la pgina de resultados, seleccione el texto repetido o el marcador de posicin del contenido que desee vincular. 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. 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.
3.
El paso siguiente consiste en crear un parmetro de URL para proporcionar el ID del registro seleccionado por el usuario.
976
Seleccione el vnculo en la pgina de resultados. En el cuadro de texto Vnculo del inspector de propiedades, aada la cadena siguiente al final del URL:
?recordID=#recordsetName.fieldName#
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 lo utilizar ms adelante en la pgina de actualizacin. 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 siguiente paso es modificar la pgina de actualizacin para poder localizar el registro solicitado en la base de datos y mostrarlo en la pgina.
977
Cree una pgina de ColdFusion en Dreamweaver y gurdela. La pgina pasa a ser la pgina de actualizacin. 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.
2.
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. 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. 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:
4.
5.
6.
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.
978
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 978) 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 975, Creacin de vnculos para abrir la pgina de actualizacin (ColdFusion) en la pgina 975, Creacin de un parmetro de URL para los vnculos de actualizacin (ColdFusion) en la pgina 976 y Recuperacin del registro que debe actualizarse (ColdFusion) en la pgina 978. 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.
N OT A
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. Complete este cuadro de dilogo. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
979
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.
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 978) 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 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 975, Creacin de vnculos para abrir la pgina de actualizacin (ColdFusion) en la pgina 975, Creacin de un parmetro de URL para los vnculos de actualizacin (ColdFusion) en la pgina 976 y Recuperacin del registro que debe actualizarse (ColdFusion) en la pgina 978. Para completar la pgina de actualizacin es necesario realizar tres tareas:
Aadir un formulario HTML a la pgina de actualizacin para que los usuarios puedan 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
980
Cree una pgina de ColdFusion (Archivo > Nuevo). Disee la pgina empleando las herramientas de Dreamweaver. Aada un formulario HTML situando el punto de insercin donde desea que aparezca el formulario y seleccionando 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.
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 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 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. 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. 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 objetos de formulario, consulte Insercin de objetos de formulario HTML en la pgina 918.
6.
Aada al formulario un botn Enviar (Insertar > Formulario > Botn). 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.
981
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 978.
2.
Vincule cada objeto de formulario a los datos del juego de registros, como se describe en las siguientes secciones:
Visualizacin de contenido dinmico en campos de texto HTML en la pgina 925 Preseleccin dinmica de casillas de verificacin HTML en la pgina 926 Preseleccin dinmica de botones de opcin HTML en la pgina 927 Creacin de un men de formulario HTML dinmico en la pgina 924 Conversin de mens de formulario HTML existentes en dinmicos en la pgina 925
En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Actualizar registro en el men emergente. Aparecer el cuadro de dilogo Actualizar registro. Complete este cuadro de dilogo. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
Dreamweaver aadir a la pgina un comportamiento de servidor que permita a los usuarios actualizar registros de una base de datos haciendo clic en el botn Enviar 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. Temas relacionados Cmo completar la pgina de actualizacin en una operacin (ColdFusion) en la pgina 979
982
Bsqueda del registro que se desea eliminar (ColdFusion) en la pgina 983 Creacin de vnculos con una pgina de confirmacin (ColdFusion) en la pgina 984 Creacin de un parmetro de URL para pasar a la pgina de confirmacin (ColdFusion) en la pgina 985 Visualizacin del registro en la pgina de confirmacin (ColdFusion) en la pgina 987 Adicin de lgica para eliminar el registro (ColdFusion) en la pgina 991
983
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. Aparece el cuadro de dilogo Insertar filas o columnas. Seleccione la opcin Columnas y, a continuacin, seleccione la opcin Despus de la columna actual y haga clic en Aceptar.
2.
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. En el inspector de propiedades, introduzca la pgina de confirmacin en el cuadro de texto Vnculo. Puede introducir el nombre de archivo que desee.
5.
984
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.
985
Seleccione el vnculo de borrado en la pgina de resultados. Si Live Data est activado, seleccione el vnculo en la primera fila. En el cuadro de texto Vnculo del inspector de propiedades, aada la cadena siguiente al final del URL:
?recordID=#recordsetName.fieldName#
2.
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 lo utilizar ms adelante en la pgina de confirmacin. 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.
confirmDelete.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:
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.
986
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. 3.
Inserte un formulario HTML en la pgina (Insertar > Formulario > Formulario). 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.
987
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.
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. 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.
3.
4.
Complete la seccin Filtro de la siguiente forma para localizar y mostrar el registro especificado 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 que contiene valores que coinciden con el valor del parmetro de URL que ha facilitado la 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.
988
5.
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 807. 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. En el inspector de propiedades, haga clic en el icono de rayo situado junto al cuadro de texto Valor. Aparece el cuadro de dilogo Datos dinmicos.
3.
989
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.
990
Despus de visualizar el registro en la pgina de confirmacin, el paso siguiente es aadir lgica para eliminar el registro.
Asegrese de que la pgina de confirmacin est abierta en Dreamweaver. En el panel Comportamientos del servidor (Ventana> Comportamientos del servidor), haga 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. 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. En el men emergente Tabla, seleccione la tabla de base de datos que contiene los registros que se eliminarn.
4.
5.
991
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.
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.
992
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.
NO T A
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. 2.
En Dreamweaver, abra la pgina que ejecutar el procedimiento almacenado. En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botn de signo ms (+) y seleccione Procedimiento almacenado.
993
3.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
4.
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 939
994
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 995). Una pgina que permita que los usuarios registrados se conecten al sitio (vase Creacin de una pgina de inicio de sesin en la pgina 1000). 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 1003).
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. Temas relacionados Proteccin de una carpeta de su aplicacin (ColdFusion) en la pgina 1007
Creacin de pginas que restrinjan el acceso al sitio (ColdFusion, ASP, JSP Y PHP)
995
Por ejemplo, la siguiente pgina solicita a los usuarios primerizos que se registren:
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 997). 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 997). 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 998). 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 999).
996
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. Aada un formulario HTML; para ello, site el punto de insercin donde desea que aparezca el formulario y seleccione Formulario en el men Insertar. 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.
Creacin de pginas que restrinjan el acceso al sitio (ColdFusion, ASP, JSP Y PHP)
997
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 pulse el botn Enviar, ya que el comportamiento de servidor Insertar registro configura estos atributos automticamente (vase Actualizacin de la tabla de usuarios de la base de datos en la pgina 998).
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 918.
5.
Aada al formulario un botn Enviar (Insertar > Formulario > Botn). 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.
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 Creacin de una pgina de registro en la pgina 995
998
En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Insertar registro del men emergente. Aparecer el cuadro de dilogo Insertar registro. 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. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
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 Creacin de una pgina de registro en la pgina 995
En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga 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. Complete este cuadro de dilogo. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
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.
Creacin de pginas que restrinjan el acceso al sitio (ColdFusion, ASP, JSP Y PHP)
999
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 registro en la pgina 995
Una tabla de base de datos de usuarios registrados (vase Creacin de una tabla de base de datos de usuarios registrados en la pgina 1001) 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 1001) 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 1002)
Cuando el usuario se conecta correctamente, se crea una variable de sesin que contiene su nombre de usuario.
Cree una pgina (Archivo > Nuevo) y disee la pgina de conexin utilizando las herramientas de diseo de Dreamweaver. Para aadir un formulario HTML, site el punto de insercin donde desea que aparezca el formulario y elija Formulario en el men Insertar. 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.
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 pulse el botn Enviar, ya que el comportamiento de servidor Conectar usuario configura estos atributos automticamente (vase Comprobacin del nombre de usuario y la contrasea en la pgina 1002).
Creacin de pginas que restrinjan el acceso al sitio (ColdFusion, ASP, JSP Y PHP)
1001
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.
5.
Aada al formulario un botn Enviar (Insertar > Formulario > Botn). 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.
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 Creacin de una pgina de inicio de sesin en la pgina 1000
En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga 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. Complete este cuadro de dilogo. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
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.
1002
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.
NO T A
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 1004. 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 1004). 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 1005).
Creacin de pginas que restrinjan el acceso al sitio (ColdFusion, ASP, JSP Y PHP)
1003
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 1006.
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. 2.
Abra la pgina que desea proteger. En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga 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. Complete este cuadro de dilogo. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
3.
4.
Dreamweaver aade un comportamiento de servidor a la pgina que slo permite ver la pgina a los usuarios autorizados.
1004
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). 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.
2.
3. 4.
Abra otra pgina que desee proteger del mismo modo. En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de flecha situado en la esquina superior derecha y seleccione Pegar en el men emergente. Repita los pasos 3 y 4 en cada pgina que desee proteger.
5.
Temas relacionados Almacenamiento de privilegios de acceso en la base de datos de usuarios en la pgina 1005
Creacin de pginas que restrinjan el acceso al sitio (ColdFusion, ASP, JSP Y PHP)
1005
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 1004
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. 2.
Seleccione el texto o la imagen en una pgina que se utilizar como vnculo. 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. 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. Haga clic en Aceptar.
3.
4.
Abra la pgina que se cargar en Dreamweaver. Generalmente, se trata de una pgina de despedida o agradecimiento. 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. Seleccione la opcin Desconectar al cargarse la pgina. Haga clic en Aceptar.
2.
3. 4.
1006
Temas relacionados Creacin de una pgina a la que slo pueden acceder los usuarios autorizados en la pgina 1003
Con un documento ColdFusion abierto en Dreamweaver, seleccione Comandos > ColdFusion Login Wizard (Asistente de conexin ColdFusion). Complete el asistente. Para instrucciones, haga clic en el botn Ayuda del asistente. El asistente crear los archivos necesarios para proteger la carpeta.
2.
3.
Cargue los nuevos archivos en sitio remoto. Los archivos se ubican en la carpeta del sitio local.
Temas relacionados Creacin de pginas que restrinjan el acceso al sitio (ColdFusion, ASP, JSP Y PHP) en la pgina 995
1007
Slo es posible utilizar CFC con Macromedia ColdFusion MX o una versin posterior. Los CFC no son compatibles con ColdFusion 5.
Esta seccin trata sobre los siguientes temas: Componentes de ColdFusion en la pgina 1008 Creacin visual de un componente en Dreamweaver en la pgina 1010 Visualizacin de componentes de ColdFusion en Dreamweaver en la pgina 1011 Edicin de componentes de ColdFusion en Dreamweaver en la pgina 1013 Creacin de pginas Web que utilicen componentes de ColdFusion en la pgina 1014 Definicin de juego de registros en un componente de ColdFusion en la pgina 1015 Utilizacin de un juego de registros de CFC como fuente de contenido dinmico en la pgina 1016
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 >Utilizacin de ColdFusion). 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 de aplicaciones o empresarial. Utilice etiquetas personalizadas para elementos de presentacin como saludos personalizados, mens dinmicos, etc.
1008
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.
1009
Abra una pgina de ColdFusion en Dreamweaver. En el panel Componentes (Ventana > Componentes), seleccione Componentes CF en el men emergente. En el panel Componentes, haga clic en el botn de signo ms (+). Se abrir el cuadro de dilogo Crear componente. Seleccione las opciones del cuadro de dilogo y haga clic en Aceptar. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
3.
4.
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 Componentes de ColdFusion en la pgina 1008
Edicin de componentes de ColdFusion en Dreamweaver en la pgina 1013 Creacin de pginas Web que utilicen componentes de ColdFusion en la pgina 1014
1010
Mostrar todos los componentes de ColdFusion definidos para el servidor. Si ejecuta ColdFusion MX 7 o una versin posterior, filtrar la lista para mostrar solamente los CFC ubicados en la carpeta del sitio. Explorar las funciones y los argumentos de cada componente. Consultar las propiedades de las funciones que actan como servicios Web.
Abra cualquier pgina de ColdFusion en Dreamweaver. En el panel Componentes (Ventana > Componentes), seleccione Componentes CF en el men emergente. 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.
3.
1011
4.
Para mostrar solamente los CFC ubicados en la carpeta del sitio, haga clic en el botn Show Only Current Sites CFC (Mostrar slo CFC del sitio actual), en la barra de herramientas del panel Componentes. Esta funcin slo est disponible si ha definido un equipo en el que se ejecuta ColdFusion MX 6 o una versin posterior como servidor de prueba para Dreamweaver. Para ms informacin, consulte Activacin de las mejoras de ColdFusion en la pgina 942.
NO T A
Si el sitio actual se muestra en una carpeta virtual del servidor remoto, el filtrado no funciona.
5.
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.
Creacin visual de un componente en Dreamweaver en la pgina 1010 Creacin de pginas Web que utilicen componentes de ColdFusion en la pgina 1014
1012
ColdFusion 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 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 1011.
Para editar un componente:
1.
Abra cualquier pgina de ColdFusion en Dreamweaver y visualice los componentes en 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 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 1011.
2.
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. Para editar una funcin, argumento o propiedad especfica, haga doble clic en el elemento en la vista de rbol.
4.
1013
5. 6.
Realice los cambios deseados manualmente en la vista Cdigo. 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.
Para ms informacin sobre otras maneras de utilizar los componentes, consulte la documentacin de ColdFusion que se encuentra en Dreamweaver (Ayuda > Utilizacin de ColdFusion).
En Dreamweaver, abra la pgina de ColdFusion que utilizar la funcin de componente. Cambie a la vista Cdigo (Ver > Cdigo). Abra el panel Componentes (Ventana > Componentes) y, a continuacin, seleccione Componentes CF en el men emergente del panel. Busque el componente deseado e insrtelo utilizando una de las tcnicas siguientes:
4.
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 > Utilizacin de ColdFusion).
6.
1014
Cree o abra un archivo CFC existente en Dreamweaver. Para ms informacin, consulte Creacin visual de un componente en Dreamweaver en la pgina 1010.
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. Puede trabajar el las dos versiones de este cuadro de dilogo: la simple y la avanzada.
3.
Si desea utilizar una funcin existente en el CFC, seleccione la funcin en el men emergente Function (Funcin) y siga con el paso 6. El juego de registros se definir en la funcin. Si desea definir una funcin nueva en el CFC, haga clic en el botn (New Function) Nueva funcin, escriba un nombre para la funcin en el cuadro de dilogo que aparece y, por ltimo, haga clic en Aceptar. El nombre slo admiten letras, nmeros y el guin bajo (_). No puede incluir caracteres especiales ni espacios.
4.
5.
Utilice el cuadro de dilogo del juego de registros para definir uno para la funcin. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Cuando haya terminado, Dreamweaver insertar una nueva funcin en el CFC para definir el juego de registros. Para editar visualmente el juego de registros del CFC, haga doble clic en el panel Vinculaciones.
1015
Abra una pgina de ColdFusion en Dreamweaver. 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. Puede trabajar el las dos versiones de este cuadro de dilogo: la simple y la avanzada.
3.
Haga clic en el botn CFC Query (Consulta CFC). Aparecer el cuadro de dilogo de consultas CFC. Complete este cuadro de dilogo. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar para cerrar el cuadro de dilogo y, despus, vuelva a hacer clic en Aceptar para aadir el juego de registros de CFC a la lista de fuentes de contenido disponibles en el panel Vinculaciones. Utilice el panel Vinculaciones para vincular el juego de registros a los distintos elementos de la pgina. Para ms informacin, consulte Captulo 34, Adicin de contenido dinmico a pginas Web, en la pgina 805.
4.
5.
6.
1016
CAPTULO 41
41
1017
Abra una pgina ASP.NET en la vista Diseo (Ver > Diseo). 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. 4.
En la categora ASP.NET de la barra Insertar, seleccione el icono de control de formulario. 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/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.
1018
En la vista Diseo, seleccione el control de formulario en la pgina. El inspector de propiedades muestra las propiedades del control. 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/en-us/cpgenref/html/ cpconaspsyntaxforwebcontrols.asp.
2.
3.
Para configurar ms propiedades, haga clic en el botn Quick tag editor del Inspector de propiedades y configure las propiedades en el Quick tag editor que aparezca. El Quick tag editor le permite establecer ms propiedades, incluidos los eventos.
Abra la pgina ASP.NET y site el punto de insercin donde desee que aparezca el men. Seleccione Insertar > Objetos ASP.NET; a continuacin, seleccione asp:DropDownList o asp:ListBox. Aparece el cuadro de dilogo del control del formulario. Rellene el cuadro de dilogo y haga clic en Aceptar. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
3.
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.
1019
Temas relacionados Configuracin de las propiedades de los controles de formulario ASP.NET en la pgina 1019
En la vista Diseo, seleccione el objeto de lista desplegable o cuadro de texto que desee convertir en dinmico. En el inspector de propiedades, haga clic en el botn Elementos de lista. Aparecer el cuadro de dilogo Elementos de lista. Seleccione la opcin De base de datos y complete el cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
2.
3.
1020
En la vista Diseo, seleccione el cuadro de texto de su pgina. En el inspector de propiedades, haga clic en el icono de rayo situado junto al cuadro de texto Texto. Aparece el cuadro de dilogo Datos dinmicos. Seleccione la columna de juego de registros que proporcione un valor al objeto TextBox y haga clic en Aceptar.
3.
Cuando se visualice la pgina en un navegador, el control TextBox mostrar el contenido dinmico. Temas relacionados Visualizacin de contenido dinmico en campos de texto HTML en la pgina 925
1021
Seleccione un control de formulario CheckBox en la pgina ASP.NET. En el inspector de propiedades, seleccione la opcin Dinmico. Aparecer el cuadro de dilogo Casilla de verificacin dinmica. Rellene el cuadro de dilogo y haga clic en Aceptar. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo.
3.
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 casillas de verificacin HTML en la pgina 926
En la vista Diseo, seleccione el control RadioButtonList. En el Inspector de propiedades, haga clic en Elementos de lista. Aparecer el cuadro de dilogo Elementos de lista. Seleccione la opcin De base de datos y complete el cuadro de dilogo. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo.
3.
1022
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 Adicin de una Cuadrcula de datos de ASP.NET a una pgina en la pgina 1025
Adicin de una lista de datos de ASP.NET a una pgina en la pgina 1027 Modificacin de un objeto Cuadrcula de datos o Lista de datos en la pgina 1028
1023
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. 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. 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. El botn Eliminar permite al usuario eliminar una determinada fila haciendo clic en un botn.
Hipervnculo
Botn Eliminar
1024
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 783. Para obtener ms informacin sobre el control Cuadrcula de datos y cmo utilizarlo para formatear datos dinmicos, visite el sitio Web de Microsoft en http://msdn.microsoft.com/ library/en-us/cpgenref/html/cpcondatagridwebservercontrol.asp. Temas relacionados Controles Cuadrcula de datos y Lista de datos de ASP.NET en la pgina 1023 Adicin de una Cuadrcula de datos de ASP.NET a una pgina en la pgina 1025 Adicin de una lista de datos de ASP.NET a una pgina en la pgina 1027 Modificacin de un objeto Cuadrcula de datos o Lista de datos en la pgina 1028
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 783.
1025
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. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
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 1023
1026
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 783.
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. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
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.
1027
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.
N OT A
Tambin puede arrastrar fuentes de contenido dinmico desde el panel Vinculaciones hasta una regin de tabuladores.
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.
1028
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. 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 columnas de la misma tabla para proporcionar informacin adicional. 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 1036.
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 1030).
1029
A continuacin, se ofrece un ejemplo del cuadro de dilogo Cuadrcula de datos que define tres columnas.
El siguiente paso para crear pginas Maestro-Detalle es crear vnculos que abran la pgina detalle y pasen el ID del registro que el usuario ha seleccionado.
1030
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). Aparecer el cuadro de dilogo Cuadrcula de datos.
2.
3.
Haga clic en el botn Cambiar tipo de columna y seleccione Hipervnculo en el men emergente. Aparecer el cuadro de dilogo Columna Hipervnculo.
1031
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.
1032
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:
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 Maestro-Detalle es modificar la pgina detalle para que pueda localizar el registro solicitado en la base de datos y mostrarlo en la pgina.
1033
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.
2.
En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botn de signo ms (+) y 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. 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 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 conjunto de datos, seleccione la opcin Seleccionado y elija las columnas que desee presionando Control (Windows) o Comando (Macintosh) mientras hace clic en ellas en la lista.
4.
1034
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 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. La pgina maestra utiliza un parmetro de URL para pasar informacin a la pgina detalle.
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.
1035
6.
Haga clic en Aceptar. El conjunto de datos aparecer en el panel Vinculaciones. Vincule las columnas del conjunto de datos 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 807.
7.
Ha finalizado la configuracin de la pgina Maestro-Detalle ASP.NET. Despus de crear pginas Maestro-Detalle, puede utilizar el panel Comportamientos del servidor (Ventana > Comportamientos del servidor) para modificar los distintos componentes.
Adicin de controles de bsqueda (ASP.NET) en la pgina 1037 Bsqueda con un solo parmetro de bsqueda (ASP.NET) en la pgina 1038 Bsqueda con mltiples parmetros de bsqueda (ASP.NET) en la pgina 1039 Visualizacin de los resultados en una cuadrcula de datos en la pgina 1041 Cmo ocultar la cuadrcula de datos la primera vez que se carga la pgina en la pgina 1042 Creacin de una pgina detalle (ASP.NET) en la pgina 1043
1036
Abra la pgina de bsqueda 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. 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 1018.
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.
1037
En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botn ms (+) y seleccione Conjunto de datos (consulta). Si aparece el cuadro de dilogo avanzado, haga clic en el botn Simple para abrir el cuadro de 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. 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.
3.
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.
1038
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 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.
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 1041.
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 1038).
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. 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.
2.
3.
Introduzca un nombre para el conjunto de datos 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.
1039
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 1139.
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.
1040
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.
En la pgina de bsqueda, site el punto de insercin en el lugar en el que desea que aparezca la cuadrcula de datos. En el panel Comportamientos del servidor (Ventana > comportamientos del servidor), haga clic en el botn ms (+) y seleccione Cuadrcula de datos. Aparecer el cuadro de dilogo Cuadrcula de datos. En el cuadro de texto ID, introduzca un nombre para la cuadrcula de datos, como dgLocation. En el men emergente Conjunto de datos, seleccione el conjunto de datos que ha definido para que contenga los resultados de la bsqueda. Complete el resto del cuadro de dilogo como desee. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo.
2.
3.
4.
5.
1041
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.
1042
Abra la pgina de bsqueda en la vista Cdigo (Ver > Cdigo). 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.
1043
Bsqueda del registro que desea actualizar (ASP.NET) en la pgina 1044 Apertura de la pgina de actualizacin y transferencia del ID del registro (ASP.NET) en la pgina 1045 Recuperacin del registro que se actualiza (ASP.NET) en la pgina 1048 Cmo completar la pgina de actualizacin en una operacin (ASP.NET) en la pgina 1050 Cmo completar la pgina de actualizacin elemento a elemento (ASP.NET) en la pgina 1051
Temas relacionados Creacin de una pgina de insercin de registro (todos los servidores) en la pgina 971
1044
Abra la pgina de bsqueda en Dreamweaver. Haga doble clic en el objeto Cuadrcula de datos que aparece en el panel Comportamientos del servidor (Ventana > Comportamientos del servidor). Aparecer el cuadro de dilogo Cuadrcula de datos. En el cuadro Columnas, seleccione la columna a la que desea aplicar vnculos.
3.
1045
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.
1046
6.
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 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.
7.
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 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}
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:
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.
1047
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.
Cree una nueva pgina ASP.NET en Dreamweaver y gurdela. La pgina pasa a ser la pgina de actualizacin. En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botn ms (+) y seleccione Conjunto de datos (consulta). Si aparece el cuadro de dilogo avanzado, haga clic en el botn Simple para abrir el cuadro de dilogo sencillo.
2.
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. 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.
4.
1048
5.
Configure el rea Filtro de forma que el valor de la columna de clave sea igual al valor del 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:
6.
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 1050 o Cmo completar la pgina de actualizacin elemento a elemento (ASP.NET) en la pgina 1051.
1049
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 1048) 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 desea actualizar (ASP.NET) en la pgina 1044, Apertura de la pgina de actualizacin y transferencia del ID del registro (ASP.NET) en la pgina 1045 y Recuperacin del registro que se actualiza (ASP.NET) en la pgina 1048. 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.
NO T A
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. Complete este cuadro de dilogo. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
1050
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.
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 1048) 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 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 desea actualizar (ASP.NET) en la pgina 1044, Apertura de la pgina de actualizacin y transferencia del ID del registro (ASP.NET) en la pgina 1045 y Recuperacin del registro que se actualiza (ASP.NET) en la pgina 1048. Para completar la pgina de actualizacin, debe llevar a cabo tres tareas:
Aadir un formulario HTML a la pgina de actualizacin para que los usuarios puedan 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
1051
Cree una nueva pgina ASP.NET. Pasar a ser su pgina de actualizacin. Disee la pgina empleando las herramientas de Dreamweaver. Aada un formulario HTML; para ello, site el punto de insercin donde desea que aparezca el formulario y seleccione Formulario en el men Insertar. 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. 3.
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. 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 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. 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 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 objetos de formulario, consulte Insercin de objetos de formulario HTML en la pgina 918.
6.
Aada al formulario un botn Enviar (Insertar > Formulario > Botn). 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.
1052
Asegrese de haber definido un conjunto de datos para guardar en l el registro que desea actualizar el usuario. Para ms informacin, consulte Recuperacin del registro que se actualiza (ASP.NET) en la pgina 1048.
2.
Vincule cada objeto de formulario a datos en el juego de registros. Para ms informacin, consulte las siguientes secciones:
Visualizacin de contenido dinmico en campos de texto HTML en la pgina 925 Preseleccin dinmica de casillas de verificacin HTML en la pgina 926 Preseleccin dinmica de botones de opcin HTML en la pgina 927 Creacin de un men de formulario HTML dinmico en la pgina 924 Conversin de mens de formulario HTML existentes en dinmicos en la pgina 925
En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Actualizar registro en el men emergente. Aparecer el cuadro de dilogo Actualizar registro. Complete este cuadro de dilogo. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
Dreamweaver aadir a la pgina un comportamiento de servidor que permita a los usuarios actualizar registros de una tabla de la base de datos haciendo clic en el botn Enviar 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. Temas relacionados Cmo completar la pgina de actualizacin en una operacin (ASP.NET) en la pgina 1050
1053
Bsqueda del registro que desea eliminar (ASP.NET) en la pgina 1054 Creacin de vnculos de borrado en la pgina de bsqueda (ASP.NET) en la pgina 1054 Visualizacin del registro en la pgina de confirmacin (ASP.NET) en la pgina 1057 Adicin de lgica para eliminar el registro (ASP.NET) en la pgina 1061
1054
El ID de registro se pasa a la pgina de confirmacin en un parmetro de URL. Para ms informacin, consulte Parmetros de URL en la pgina 771. 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 (+). Aparecer el cuadro de dilogo Cuadrcula de datos.
2.
Aada una columna de vnculos de borrado; para ello haga clic en el botn ms (+) y seleccione Hipervnculo. En el cuadro de texto Ttulo, introduzca un ttulo de columna como Eliminar. El ttulo aparecer en el encabezado de columna. 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 Columna Hipervnculo debe ser parecido al siguiente:
3.
4.
1055
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 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.
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 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}
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:
locationDelete.aspx?recordID=CBR
1056
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.
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.
1057
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).
2. 3.
Inserte un formulario HTML en la pgina (Insertar > Formulario > Formulario). 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.
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 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 aun cuando no se vaya a mostrar.
3.
1058
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 que contiene valores que coinciden con el valor del parmetro de URL que ha facilitado la 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 de conjunto de datos 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, introduzca el nombre del parmetro de URL que ha facilitado la pgina con los vnculos de borrado. Por ejemplo, si el URL utilizado para abrir la pgina de confirmacin inclua el sufijo locationDelete.aspx?recordID=CBR, introduzca recordID. El cuadro de dilogo Conjunto de datos debe ser parecido al siguiente.
5.
1059
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 807. 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. En el inspector de propiedades, haga clic en el icono de rayo situado junto al cuadro de texto Valor. Aparece el cuadro de dilogo Datos dinmicos. En el cuadro de dilogo Datos dinmicos, seleccione la columna ID del registro en el conjunto de datos y haga clic en Aceptar. En el siguiente ejemplo, la columna ID del registro seleccionada es CODE.
3.
4.
1060
5.
Despus de crear una pgina de confirmacin, el siguiente paso es aadir lgica para eliminar el registro.
1061
Para aadir lgica para eliminar el registro que aparece en el formulario HTML:
1. 2.
Asegrese de que la pgina de confirmacin est abierta en Dreamweaver. En el panel Comportamientos del servidor (Ventana> Comportamientos del servidor), haga 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. 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. En el men emergente Tabla, seleccione la tabla de base de datos que contiene los registros que se eliminarn. 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 Conjunto de datos vinculada con el campo oculto de formulario en la pgina.
4.
5.
6.
7.
En el men emergente Enviar clave primaria como, seleccione el tipo de datos de la columna de clave principal.
1062
8.
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 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. 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.
10. Si
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. El cuadro de dilogo Eliminar registro completado debe parecerse al siguiente.
12. Haga
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.
1063
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 ASP.NET:
1. 2.
En Dreamweaver, abra la pgina que ejecutar el procedimiento almacenado. En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botn ms (+) y seleccione Procedimiento almacenado. Aparecer el cuadro de dilogo Procedimiento almacenado.
3.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
4.
1064
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. 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 939
1065
1066
CAPTULO 42
42
1067
Creacin de una pgina maestra y definicin de un juego de registros para ella (ASP y JSP) en la pgina 1068 Visualizacin de los registros en la pgina maestra (ASP y JSP) en la pgina 1069 Cmo abrir la pgina detalle y proporcionarle un ID de registro (ASP y JSP) en la pgina 1069 Bsqueda y visualizacin del registro solicitado en la pgina detalle (ASP y JSP) en la pgina 1070
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 787). 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 1072). 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.
1068
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 831.
El siguiente paso para crear pginas maestra-detalle es abrir la pgina detalle y proporcionar un ID de registro.
En la regin repetida de la pgina maestra, seleccione el contenido dinmico que va a hacer las veces de vnculo. En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga 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. Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
4.
1069
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 771. El segundo paso para crear las pginas maestra-detalle es localizar y mostrar el registro solicitado en la pgina detalle.
Cambie a la pgina detalle o cree una nueva pgina ASP o JSP si todava no existe. En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botn de signo ms (+) y 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.
1070
4.
En el rea Columna, elija 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 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. 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.
5.
Complete la seccin Filtro de la siguiente forma para localizar y mostrar el registro especificado en el parmetro de URL que ha facilitado la pgina de resultados:
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.
6.
Haga clic en Aceptar. El juego de registros aparecer en el panel Vinculaciones. Vincule las columnas del juego de registros a la pgina detalle seleccionando las columnas del panel Vinculaciones (Ventana > Vinculaciones) y arrastrndolas hasta la pgina.
7.
1071
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.
Bsqueda del registro que desea actualizar (ASP y JSP) en la pgina 1073 Apertura de la pgina de actualizacin y proporcionar el ID del registro (ASP y JSP) en la pgina 1073 Recuperacin del registro que se desea actualizar (ASP y JSP) en la pgina 1074
1072
Cmo completar la pgina de actualizacin en una operacin (ASP y JSP) en la pgina 1075 Cmo completar la pgina de actualizacin elemento a elemento (ASP y JSP) en la pgina 1077
Temas relacionados Creacin de una pgina de insercin de registro (todos los servidores) en la pgina 971
1073
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. En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga 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. En el cuadro de texto Pgina Detalle, haga clic en Examinar y localice la pgina de actualizacin. 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.
2.
3.
4.
5.
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. .
Cree una nueva pgina ASP o JSP en Dreamweaver y gurdela. La pgina pasa a ser la pgina de actualizacin. 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.
2.
1074
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. 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. 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:
4.
5.
6.
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. Despus de modificar la pgina de actualizacin para recuperar un registro de la base de datos y 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 1075 o Cmo completar la pgina de actualizacin elemento a elemento (ASP y JSP) en la pgina 1077.
Un juego de registros filtrado que permite recuperar el registro de una tabla de la base de datos (vase Recuperacin del registro que se desea actualizar (ASP y JSP) en la pgina 1074) 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.
1075
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 desea actualizar (ASP y JSP) en la pgina 1073, Apertura de la pgina de actualizacin y proporcionar el ID del registro (ASP y JSP) en la pgina 1073 y Recuperacin del registro que se desea actualizar (ASP y JSP) en la pgina 1074. 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.
NO TA
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. Complete este cuadro de dilogo. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
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.
1076
Un juego de registros filtrado que permite recuperar el registro de una tabla de la base de datos (vase Recuperacin del registro que se desea actualizar (ASP y JSP) en la pgina 1074) 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 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 desea actualizar (ASP y JSP) en la pgina 1073, Apertura de la pgina de actualizacin y proporcionar el ID del registro (ASP y JSP) en la pgina 1073 y Recuperacin del registro que se desea actualizar (ASP y JSP) en la pgina 1074. Para completar la pgina de actualizacin, debe llevar a cabo tres tareas:
Aadir un formulario HTML a la pgina de actualizacin para que los usuarios puedan 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 y haga clic en el botn de formulario
Cree una nueva pgina ASP o JSP (Archivo > Nuevo). La pgina pasa a ser la pgina de actualizacin. Disee la pgina empleando las herramientas de Dreamweaver. Aada un formulario HTML situando el punto de insercin donde desea que aparezca el formulario y seleccionando 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. 3.
1077
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. 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 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. 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. 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, consulte Insercin de objetos de formulario HTML en la pgina 918.
6.
Aada al formulario un botn Enviar (Insertar > Formulario > Botn). Puede cambiar 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.
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 se desea actualizar (ASP y JSP) en la pgina 1074.
2.
Vincule cada objeto de formulario a los datos del juego de registros, como se describe en las siguientes secciones:
Visualizacin de contenido dinmico en campos de texto HTML en la pgina 925 Preseleccin dinmica de casillas de verificacin HTML en la pgina 926 Preseleccin dinmica de botones de opcin HTML en la pgina 927 Creacin de un men de formulario HTML dinmico en la pgina 924 Conversin de mens de formulario HTML existentes en dinmicos en la pgina 925
1078
En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Actualizar registro en el men emergente. Aparecer el cuadro de dilogo Actualizar registro. Complete este cuadro de dilogo. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
Dreamweaver aadir a la pgina un comportamiento de servidor que permita a los usuarios actualizar registros de una base de datos haciendo clic en el botn Enviar 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. Temas relacionados Cmo completar la pgina de actualizacin en una operacin (ASP y JSP) en la pgina 1075
Un juego de registros filtrado que permite recuperar el registro de una tabla de la base de datos (vase Recuperacin del registro que se desea borrar (ASP y JSP) en la pgina 1080) 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 1081) 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 1082)
1079
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 1083)
NO T A
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 1072
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.
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. En el rea Columnas, seleccione la opcin Todas para elegir todas las columnas de la tabla de la base de datos.
3.
1080
4.
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:
5.
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.
Asegrese de haber definido un juego de registros para guardar en l el registro que desea eliminar el usuario. Para ms informacin, consulte Recuperacin del registro que se desea borrar (ASP y JSP) en la pgina 1080.
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 807.
El siguiente paso para crear una pgina para eliminar registros es enviar el comando de borrado al servidor.
1081
En la vista Diseo, site el punto de insercin en el lugar donde desea que aparezca el botn Enviar 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.
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. 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 pulse el botn Enviar, ya que el comportamiento de servidor Eliminar registro configura estos atributos automticamente.
3. 4.
Aada al formulario un botn Enviar (Insertar > Formulario > Botn). 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.
1082
En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Eliminar registro en el men emergente. Aparecer el cuadro de dilogo Eliminar registro.
2.
Complete este cuadro de dilogo. Para ms informacin, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
3.
Dreamweaver aadir a la pgina un comportamiento de servidor que permita a los usuarios eliminar registros de una tabla de la base de datos haciendo clic en el botn Enviar del formulario.
1083
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. El procedimiento para utilizar un procedimiento almacenado vara segn el modelo de servidor. Temas relacionados Procedimientos almacenados en la pgina 939
En Dreamweaver, abra la pgina que ejecutar el procedimiento almacenado. En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botn ms (+) y seleccione Comando (procedimiento almacenado). Aparecer el cuadro de dilogo Comando. 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. 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. Introduzca los parmetros necesarios en la tabla Variables. No es preciso que introduzca ningn parmetro para variables RETURN_VALUE. Haga clic en Aceptar.
3.
4.
5.
6.
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.
NO T A
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.
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.
1085
En Dreamweaver, abra la pgina que ejecutar el procedimiento almacenado. En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botn ms (+) y seleccione Ejecutable (procedimiento almacenado). Aparecer el cuadro de dilogo Ejecutable (procedimiento almacenado). Complete este cuadro de dilogo. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
3.
4.
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. 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.
1086
Para crear el objeto de comando que utiliza SQL para editar la base de datos:
1. 2.
En Dreamweaver, abra la pgina ASP que ejecutar el comando. En el panel Comportamientos del servidor (Ventana> Comportamientos del servidor), haga clic en el botn ms (+) y seleccione Comando. Aparecer el cuadro de dilogo Comando. 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:
3.
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.
1087
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.
1088
En Dreamweaver, abra la pgina JSP que ejecutar el comando. En el panel Comportamientos del servidor (Ventana> Comportamientos del servidor), haga clic en el botn ms (+) y seleccione Preparado (insertar, actualizar, eliminar). Aparecer el cuadro de dilogo Preparado (insertar, actualizar, eliminar). Complete este cuadro de dilogo. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
3.
4.
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.
1089
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.
1090
Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. Haga clic en el botn de signo ms (+) y seleccione JavaBean en el men emergente. Aparecer el cuadro de dilogo JavaBean.
3.
Rellene el cuadro de dilogo y haga clic en Aceptar. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. La bean que acaba de definir aparecer en el panel Vinculaciones.
4.
Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. Haga clic en el botn de signo ms (+) y seleccione la coleccin JavaBean en el men emergente. Aparecer el cuadro de dilogo Coleccin Java Bean.
3.
Rellene el cuadro de dilogo y haga clic en Aceptar. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo.
1091
4.
1092
CAPTULO 43
43
1093
Creacin de la pgina maestra (PHP) en la pgina 1094 Creacin de vnculos con la pgina detalle (PHP) en la pgina 1097 Creacin de un parmetro de URL para los vnculos (PHP) en la pgina 1098 Bsqueda y visualizacin del registro solicitado en la pgina detalle (PHP) en la pgina 1099
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.
1094
2.
Defina un juego de registros para la pgina. 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.
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 usuario puede definir el juego de registros durante la ejecucin. Para ms informacin, consulte Creacin de pginas de bsqueda/resultados (PHP) en la pgina 1101.
1095
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. Aparecer el cuadro de dilogo 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.
1096
En la tabla dinmica, seleccione el marcador de posicin del contenido dinmico para el texto que desea vincular. 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 campo Vnculo. 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.
3.
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.
1097
Seleccione el vnculo en la tabla dinmica. Si Live Data est activado, seleccione el vnculo en la primera fila. En el campo Vnculo del inspector de propiedades, aada la siguiente cadena al final del URL:
?recordID=<?php echo $row_recordsetName['fieldName']; ?>
2.
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 lo utilizar ms adelante en la pgina detalle. La expresin que se indica a continuacin del signo igual es el valor del parmetro. En este 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']; ?>
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.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.
1098
Cambie a la pgina detalle o cree una nueva pgina PHP, si la pgina todava no existe. 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 y luego seleccione una conexin y la tabla de base de datos que proporcionar datos al juego de registros. 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 seleccione las columnas deseadas presionando Control (Windows) o Comando (Macintosh) mientras hace clic en ellas en la lista.
4.
1099
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. 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. La pgina maestra utiliza un parmetro de URL para pasar informacin a la pgina detalle.
En el cuarto cuadro, introduzca el nombre del parmetro de URL que ha facilitado la pgina 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.
6.
1100
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 807.
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.
1101
Bsqueda del registro que se desea actualizar (PHP) en la pgina 1102 Creacin de los vnculos para abrir la pgina de actualizacin (PHP) en la pgina 1103 Creacin de un parmetro de URL para los vnculos (PHP) en la pgina 1098 Recuperacin del registro que se desea actualizar (PHP) en la pgina 1105 Cmo completar la pgina de actualizacin en una operacin (PHP) en la pgina 1106 Temas relacionadosCmo completar la pgina de actualizacin elemento a elemento (PHP) en la pgina 1107
Temas relacionados Creacin de una pgina de insercin de registro (todos los servidores) en la pgina 971
1102
En la pgina de resultados, seleccione el marcador de posicin del contenido dinmico para el texto que desea vincular. 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 campo Vnculo. 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.
3.
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.
1103
Seleccione el vnculo en la pgina de resultados. En el campo Vnculo del inspector de propiedades, aada la siguiente cadena al final del URL:
?recordID=<?php echo $row_recordsetName['fieldName']; ?>
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 lo utilizar ms adelante en la pgina de actualizacin. La expresin que se indica a continuacin del signo igual es el valor del parmetro. En este 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']; ?>
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.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.
1104
Cree una nueva pgina PHP en Dreamweaver y gurdela. La pgina pasa a ser la pgina de actualizacin. 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.
2.
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. 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. 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:
4.
5.
6.
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.
1105
Despus de modificar la pgina de actualizacin para recuperar un registro de la base de datos y 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 1106 o Temas relacionadosCmo completar la pgina de actualizacin elemento a elemento (PHP) en la pgina 1107.
Un juego de registros filtrado que permite recuperar el registro de una tabla de la base de datos (vase Recuperacin del registro que se desea actualizar (PHP) en la pgina 1105) 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 (PHP) en la pgina 1102, Creacin de los vnculos para abrir la pgina de actualizacin (PHP) en la pgina 1103, Creacin de un parmetro de URL para los vnculos (PHP) en la pgina 1098 y Recuperacin del registro que se desea actualizar (PHP) en la pgina 1105. 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.
N O TA 1106
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. Complete este cuadro de dilogo. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar.
2.
3.
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. Temas relacionadosCmo
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 (PHP) en la pgina 1102, Creacin de los vnculos para abrir la pgina de actualizacin (PHP) en la pgina 1103, Creacin de un parmetro de URL para los vnculos (PHP) en la pgina 1098 y Recuperacin del registro que se desea actualizar (PHP) en la pgina 1105.
1107
Aadir un formulario HTML a la pgina de actualizacin para que los usuarios puedan 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
Cree una pgina PHP (Archivo > Nuevo). La pgina pasa a ser la pgina de actualizacin. Disee la pgina empleando las herramientas de Dreamweaver. Aada un formulario HTML; para ello, site el punto de insercin donde desea que aparezca el formulario y seleccione Formulario en el men Insertar. 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. 3.
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. 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 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. 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. 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, consulte Insercin de objetos de formulario HTML en la pgina 918.
1108
6.
Aada al formulario un botn Enviar (Insertar > Formulario > Botn). Puede cambiar 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.
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 se desea actualizar (PHP) en la pgina 1105.
2.
Vincule cada objeto de formulario a los datos del juego de registros, como se describe en las siguientes secciones:
Visualizacin de contenido dinmico en campos de texto HTML en la pgina 925 Preseleccin dinmica de casillas de verificacin HTML en la pgina 926 Preseleccin dinmica de botones de opcin HTML en la pgina 927 Creacin de un men de formulario HTML dinmico en la pgina 924 Conversin de mens de formulario HTML existentes en dinmicos en la pgina 925
En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botn de signo ms (+) y seleccione Actualizar registro en el men emergente. Aparecer el cuadro de dilogo Actualizar registro. Complete este cuadro de dilogo. Para instrucciones, haga clic en el botn Ayuda del cuadro de dilogo. Haga clic en Aceptar. Dreamweaver aadir a la pgina un comportamiento de servidor que permita a los usuarios actualizar registros de una base de datos haciendo clic en el botn Enviar del formulario.
2.
3.
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. Temas relacionados Cmo completar la pgina de actualizacin en una operacin (PHP) en la pgina 1106.
1109
Bsqueda del registro que se desea eliminar (PHP) en la pgina 1110 Creacin de vnculos con una pgina de confirmacin (PHP) en la pgina 1111 Creacin de un parmetro de URL para pasarlo a la pgina de confirmacin (PHP) en la pgina 1112 Visualizacin del registro en la pgina de confirmacin (PHP) en la pgina 1113 Adicin de lgica para eliminar el registro (PHP) en la pgina 1117
1110
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. Aparece el cuadro de dilogo Insertar filas o columnas. Seleccione la opcin Columnas y luego seleccione la opcin Despus de la columna actual.
2.
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. En el inspector de propiedades, introduzca la pgina de confirmacin en el campo Vnculo. Puede introducir el nombre de archivo que desee.
5.
Despus de hacer clic fuera del campo Vnculo, la cadena Delete aparece vinculada en la tabla.
1111
Despus de crear los vnculos, el siguiente paso para crear una pgina de borrado de registros es crear parmetros de URL para los vnculos.
Seleccione el vnculo de borrado en la pgina de resultados. Si Live Data est activado, seleccione el vnculo en la primera fila. En el campo Vnculo del inspector de propiedades, aada la siguiente cadena al final del URL:
?recordID=<?php echo $row_recordsetName['fieldName']; ?>
2.
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 lo utilizar ms adelante en la pgina de confirmacin. La expresin que se indica a continuacin del signo igual es el valor del parmetro. En este 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.
confirmDelete.php?recordID=<?php echo $row_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:
confirmDelete.php?recordID=CBR 3.
Guarde la pgina.
1112
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.
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).
2. 3.
Inserte un formulario HTML en la pgina (Insertar > Formulario > Formulario). 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.
1113
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.
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 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.
3.
4.
Complete la seccin Filtro de la siguiente forma para localizar y mostrar el registro especificado 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 que contiene valores que coinciden con el valor del parmetro de URL que ha facilitado la 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, introduzca el nombre del parmetro de URL que ha facilitado la pgina con los vnculos de borrado. Por ejemplo, si el URL utilizado para abrir la pgina de confirmacin inclua el sufijo confirmDelete.php?recordID=CBR, introduzca recordID.
1114
5.
Seleccione las columnas del juego de registros (campos de registros) en el panel Vinculaciones y arrstrelas al formulario que ha insertado en la pgina. Para ms informacin, consulte Conversin de texto en contenido dinmico en la pgina 807. 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. En el inspector de propiedades, haga clic en el icono de rayo situado junto al cuadro de texto Valor. Aparece el cuadro de dilogo Datos dinmicos.
3.
1115
4.
En el cuadro de dilogo Datos dinmicos, seleccione la columna ID del registro en el juego de registros y haga clic en Aceptar. En el siguiente ejemplo, la columna ID del registro seleccionada es CODE.
5.
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.
1116
En el panel Comportamientos del servidor (Ventana> Comportamientos del servidor), haga clic en el botn ms (+) y seleccione Eliminar registro. Aparecer el cuadro de dilogo Eliminar registro.
2.
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. 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. En el men emergente Tabla, seleccione la tabla de base de datos que contiene los registros que se eliminarn. 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.
3.
4.
5.
1117
6.
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.
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. 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:
8.
Haga clic en Aceptar y guarde el trabajo. 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.
N O TA
1118
1119
1120
PARTE 9
Apndices
Obtenga ms ayuda para desarrollar sus aplicaciones Web. Esta parte contiene los siguientes captulos:
Apndice A: Gua de bases de datos para principiantes . . . . . . 1123 Apndice B: Nociones bsicas de SQL . . . . . . . . . . . . . . . . . . . . 1139
1121
APNDICE A
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.
Campos (columnas) Number LastName FirstName Position Goal Registros (filas)
1123
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. 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.
Number LastName FirstName Position Goals
LastName FirstName
Position
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 783. Temas relacionados Aspectos bsicos de las conexiones de bases de datos en la pgina 1132
1124
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.
1125
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).
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.
Cuntas horas de ocupacin me quedan? Est disponible mi avin para determinada fecha o fechas?
1126
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?
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.
1127
1128
Tras considerarlo detenidamente, decide elegir las siguientes propiedades y claves principales para las tablas de la base de datos de Arrow Aircraft:
1129
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)
1130
A continuacin se muestran los diagramas de las tablas revisados tras haber aadido las claves externas que definen estas relaciones:
1131
No es necesario que cree conexiones de base de datos para las pginas de ColdFusion en Dreamweaver. Puede conectarse utilizando fuentes de datos de ColdFusion.
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 691.
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 de ColdFusion y JSP son comunicadores de JDBC: ASP se comunica con ODBC (a travs de un intrprete OLE DB/ODBC incorporado) y las aplicaciones de ASP.NET se comunican con OLE DB.
1133
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. Tambin se instalan con los paquetes Microsoft Data Access Components (MDAC) 2.5, 2.6 y 2.7, que puede descargar gratuitamente del sitio Web de Microsoft en http://msdn.microsoft.com/data/mdac/downloads/. MDAC 2.7 instala algunos proveedores de OLE DB.
N OT A 1134
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 1135. 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://developers.sun.com/product/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:
Aplicacin Web
ColdFusion JSP
Controladores habituales
Controladores nativos de ColdFusion Controlador Sun JDBC-ODBC Controlador Oracle Thin JDBC Controlador de Microsoft Access Proveedor de Microsoft SQL Server Microsoft ODBC para Oracle Proveedor de Microsoft Jet Proveedor de Microsoft SQL Server Proveedor de Microsoft Oracle Controlador MySQL
ASP
ODBC u OLE DB
ASP.NET
OLE DB
PHP
Especfico MySQL
En Windows 2000, seleccione Inicio > Configuracin > Panel de control > Herramientas administrativas > Orgenes de datos. En Windows XP, seleccione Inicio > Panel de control > Herramientas administrativas > Orgenes de datos (ODBC).
2.
Haga clic en la ficha Controladores. Aparecer la lista de controladores ODBC instalados en el sistema.
1135
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
N OT A 1136
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 2000 deben ver el artculo 300596 en http://support.microsoft.com/default.aspx?scid=kb;en-us;300596 Los usuarios de Windows XP deben ver el artculo 305599 en http://support.microsoft.com/default.aspx?scid=kb;en-us;305599
Temas relacionados Conexiones de base de datos para desarrolladores de ASP en la pgina 703
1137
1138
APNDICE B
Aspectos bsicos del diseo de bases de datos en la pgina 1125 Aspectos bsicos de los juegos de registros en la pgina 783
Macromedia no ofrece servicio tcnico para las tecnologas de otros fabricantes, como SQL.
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 ColumnName FROM TableName
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
NO T A
1139
Las siguientes palabras clave identifican comandos SQL que se utilizan habitualmente:
Palabra clave
SELECT INSERT UPDATE DELETE
Descripcin
Recupera los registros especificados de una base de datos Aade un nuevo registro a la tabla de la base de datos Cambia valores en los registros de base de datos especificados Elimina los registros de base de datos especificados
Las siguientes palabras clave se emplean para definir ms especficamente las declaraciones SQL:
Palabra clave
FROM WHERE ORDER BY GROUP BY
Descripcin
Designa la fuente de datos de una operacin Establece una o varias condiciones para la operacin Clasifica las filas del juego de registros en el orden especificado Agrupa el juego de registros segn los elementos de la lista seleccionados
Los siguientes operadores especifican las condiciones y efectan las funciones lgicas y numricas:
Operador
= LIKE <> NOT LIKE < > <= >=
Significado
Igual a Como (caracteres comodn OK) No igual a No como (caracteres comodn OK) Menor que Mayor que Menor o igual que Mayor o igual que Se deben cumplir las dos condiciones, como Londres Y Madrid Se cumple al menos una de las condiciones, como Jimnez o Gimnez Excluye la condicin que viene a continuacin, como Pars NOT Francia
AND OR NOT
1140
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.
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 TableName
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
1141
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 1142 Filtrado de registros segn la similitud de dos valores en la pgina 1143 Filtrado de registros segn un intervalo de valores en la pgina 1144 Filtrado de registros segn una combinacin de condiciones de bsqueda en la pgina 1145
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.
1142
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 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:
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:
Se comprueba un registro en la tabla de base de datos. 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. Compruebe el siguiente registro de la tabla.
1143
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:
Se comprueba un registro en la tabla de base de datos. 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. Compruebe el siguiente registro de la tabla.
1144
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 1/7/99 y 31/12/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:
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'
1145
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
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
N O TA 1146
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 1129.) 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.
Unin de tablas
1147
1148
ndice alfabtico
Smbolos
? en nombres de campo 737
A
abrir Activos, panel 182 archivos 134 archivos de texto 108 archivos no HTML 608 documentos existentes 107 documentos vinculados 510 sitio de Dreamweaver 118 Abrir pgina vinculada, comando 510 Abrir plantilla adjunta, comando 368 Abrir ventana del navegador, accin 579 Abrir y editar, preferencias 520 Abrir, comando 108 absolutas, rutas 477 acceder a archivos en unidad local o escritorio 119 servidores 119 sitios de Dreamweaver 118 accesibilidad 3435 cuadro de dilogo, activar 76 funciones del sistema operativo 71 imgenes 463 Iniciativa de Accesibilidad para la Web (W3C) 34 lector de pantalla 70 Ley federal de insercin 34 marcos 317, 324 navegacin mediante teclado 72 objetos multimedia 536 objetos, insertar 930 Acceso universal 71 acciones
cambiar en comportamientos 564 compatibilidad con navegadores 566 crear 565 definicin 559 elegir en el panel Comportamientos 562 incluidas con Dreamweaver 566598 Vase tambin Acciones individuales por nombre acoplar paneles y grupos paneles 66 activar Design Notes 169 ocultar 164 ActiveX, objetos, hacer dinmicos 813 Actividad de archivo en segundo plano, cuadro de dilogo 160 activos abrir el panel Activos 182 administrar 181 categoras 183 colores, aplicar a texto 186 colores, crear 190 copiar en otro sitio 189 editar 187 Favoritos, crear carpeta 193 Favoritos, lista 181, 183, 190 insertar 185 reutilizar activos en otro sitio 188 seleccionar mltiples 187 Sitio, lista 181, 182, 184 URL, crear 190 utilizar 181 ver 181 Activos, panel abrir 182 Plantillas, categora 348 actualizar Archivos, panel 135 Diseo, vista 602
1149
Sitio, lista (panel Activos) 184 Actualizar automticamente, opcin 752 Actualizar HTML, comando 523 Actualizar local, comando 143 Actualizar pgina actual, comando 197, 368 Actualizar pginas, comando 369 actualizar plantillas 368 Actualizar registro, comportamiento 982, 1053, 1079, 1109 Adjuntar icono de hoja de estilos 452 administrar activos. Vase Activos extensiones 84 grupos de paneles 66 vnculos 494 Administrar sitios (cuadro de dilogo), eliminar sitios 149 admitidos, lenguajes 622 agregar marcos a una lnea de tiempo 243 Agregar marco, comando 241 Agregar objeto a la lnea de tiempo, comando 241 Ajustar a Web Safe, paleta de colores 395 Ajustar ancho 399 ajustar lneas en la vista Cdigo 604 Ajustar posicin, comando 258 Ajustar seleccin 399 Ajustar todo 399 alinear capas 235 elementos de pgina 466 imagen de rastreo 259 imgenes 433 opciones 466 texto 433 Alinear con seleccin, comando 259 ampliar el panel Archivos 122 aadir objetos a una lnea de tiempo 241 Aadir objeto a Biblioteca, comando 194 ancho y alto de tabla 278 Anclaje con nombre, comando 490 Anclaje, objeto (barra Insertar) 490 anclajes con nombre 489 anclajes con nombre, crear 489 anidadas capas 225 anidados conjuntos de marcos 313 plantillas, crear 365
anidar configurar preferencias de capa 227 plantillas 340 plantillas, utilizar 365 tablas 285 Anidar al crear en una capa, opcin 227 animaciones a lo largo de ruta compleja 242 aplicar a objetos 246 copiar y pegar 245 crear 241 Lneas de tiempo 238 mejorar 247 anular ocultacin carpetas del sitio 165 tipos de archivo 165 todas las carpetas y archivos 168 anular proteccin de archivos 155 aplicaciones Web conexiones de base de datos 691 configuracin de un servidor Web y un servidor de aplicaciones 680 crear una carpeta raz 685 definir un sitio de Dreamweaver 687 requisitos 679 servidor de prueba 690 aplicaciones, utilizar con Dreamweaver 33 aplicar bucles a lneas de tiempo 243 aplicar formato cdigo, establecer preferencias 604, 606 tablas y celdas 271 Aplicar formato de origen, comando 606 Aplicar plantilla a pgina, comando 375 applets de Java convertir en dinmicos 813 applets Vase Applets de Java "file already in use", mensaje de error 734 archivos abrir 107, 134 abrir en la vista Cdigo 608 administrar en sitios de Contribute 213 buscar 457 cambiar nombre 135 cargar 158 colocar 158 comparar 125 crear 102 desbloquear en sitios de Contribute 215 descargar 156 Design Notes 169
1150
ndice alfabtico
diferencias 125 eliminar 135 extensin, configurar 107 guardar 105 localizar 136, 137 mover 135 no utilizados, buscar 163 ocultar y anular ocultacin 165 realizar tareas durante transferencias 115 recuperar 132 sincronizar sitios local y remoto 161 temporales 735 texto 108 transferencias en segundo plano 160 archivos de base de datos bloqueados 734 archivos de configuracin compartidos en sitios de Contribute 208 archivos de correo electrnico 108 archivos de diseo 103 archivos dependientes 117, 144 archivos hurfanos 163, 506 archivos no HTML, abrir 608 archivos no utilizados, buscar 163 archivos ocultos, mostrar y ocultar 144 archivos temporales, permisos para crear o destruir 735 Archivos, rea de visualizacin del panel, cambiar 122 Archivos, orden de columnas del panel, cambiar 124 Archivos, panel abrir archivos 134 abrir y cerrar 122 actualizar 135 Botn Registro 161 buscar archivos 136 cambiar la vista del sitio 123 cambiar tamao de rea de visualizacin 122 cambiar visualizacin 124 cambiar visualizacin de columnas 124 contraer y ampliar 122 mapas del sitio 137 mover archivos y carpetas 135 ver archivos 122 Arrastrar capa, accin 572 Artculos de Microsoft Knowledge Base 735 ASP conexin a un ISP 711 conexiones de base de datos 703 conexiones DSN 706 conexiones sin DSN 710 insertar pginas, crear 971 objetos de comandos, definicin 940
objetos de comandos, utilizar 1086 OLE DB, conexiones 705 pginas de actualizacin, crear 1072 pginas de bsqueda, crear 963, 1072 pginas de conexin 995 pginas de eliminacin, crear 1079 pginas maestra-detalle 954, 1067 procedimientos almacenados 1084 servidores de aplicaciones 683 ASP.NET botn de opcin, preseleccionar 1022 campo de datos sencillo, cuadrcula de datos 1024, 1025 CheckBox, controles 1021 conexiones de base de datos 697 Control de Cuadrcula de datos 1024 Control Lista de datos 1023 control ListBox 1019 controles de formulario, aadir 1018 controles de formulario, modificar 1019 Cuadrcula de datos 1023, 1025 DropDownList 1019 editar, actualizar, cancelar cuadrcula de datos, botones 1024, 1025 eliminar cuadrcula de datos, botones 1024, 1025 escritura de SQL para 784 formato libre, cuadrcula de datos 1024, 1025 hipervnculo, cuadrcula de datos 1024, 1025 importar etiquetas 615 insertar pginas, crear 971 instalar .NET Framework 682 pginas de actualizacin, crear 1044 pginas de bsqueda, crear 1036 pginas de eliminacin, crear 1054 pginas Maestro-Detalle 1028 procedimientos almacenados 1064 RadioButtonList, control 1022 TextBox 1021 aspectos bsicos de Dreamweaver 24 atributos buscar 647 convertir en dinmicos 810 editar etiquetas utilizando el inspector de etiquetas 664 Vase tambin Cdigo atributos de etiqueta editables (plantillas) convertir en no editable 364 definicin 333 definir 364 modificar en documentos basados en plantillas 376
ndice alfabtico
1151
audio. Vase Sonido autoampliar (modo de diseo) 291 automatizar tareas 401
B
barra de estado acerca de 48 establecer texto (comportamiento) 586 Men emergente Tamao de ventana 49 preferencias 57 Barra de herramientas Codificacin 51, 635 Barra de herramientas Representacin de estilos 52 barra de herramientas, cambiar ttulos de documento 391 barra de navegacin aadir imgenes a 502 crear 480 estados de imagen 480 modificar elementos 503 Barra de navegacin de juego de registros, objeto live 827 barra de navegacin por registros crear 827 ocultar 830 barra del lanzador, personalizar 70 barras de herramientas Codificacin 51, 635 Documento 46 Estndar 48 mostrar 58 Representacin de estilos 52 basados en texto, editores de HTML. Vase Editores externos bases de datos acerca de 1123 almacenamiento de contenido 767 bloqueados 734 cadenas de conexin 1136 conexiones 691 conexiones, introduccin 1132 controladores 1132 disear 1125 esquemas y catlogos 755 insertar pginas 971 MySQL 727 pginas de actualizacin, crear 974 pginas de bsqueda 1036 pginas de bsqueda, crear 963
pginas de conexin 1000 pginas de eliminacin, crear 1079 pginas de resultados 963, 1036 permisos, cambiar 732 procedimientos almacenados 993, 1064, 1084 proveedores 1132 registros 1123 relacionales 1129 SQL 1139 tablas 1123 blockquote, etiqueta, aplicar 434 bloqueadas, hacer clic en regiones 376 bloques de cdigo escribir 898 marcadores de parmetro 904 reglas de codificacin 895 situar 902 bloques de diseo insertar 248 resaltado, preferencias 251 utilizar 249 ver 252 y hojas de estilos de tiempo de diseo 253 borrar anchos de columna 278 Botn Flash, cuadro de dilogo 540 botn Flash, objetos modificar 541 vista previa 542 botones acerca de 913 botones Ir 578 insertar 921 botones de imagen 921 botones de opcin 914, 919 buscar archivos 457 buscar y reemplazar 457 cdigo 647 etiquetas y atributos 647 expresiones regulares 628 guardar modelos de bsqueda 648 texto en archivos 457 buscar y reemplazar. Vase Buscar
C
cadenas de conexin llamada a los controladores de bases de datos 1136 OLE DB 700
1152
ndice alfabtico
cambiar nombre archivos y carpetas 135 elementos de biblioteca 197 Cambiar nombre de grupo de paneles, comando 69 Cambiar propiedad, accin 567 cambiar tamao capas 233 celdas de tabla 274 celdas y tablas de diseo 299 elementos, utilizar manejadores 467 marcos 319 cambiar ttulos 391 Cambiar vnculo en todo el sitio, comando 498 campos con numeracin automtica, solucionar problemas 739 campos de carga de archivos 922 campos de formulario ocultos 913 capas acerca de 222 ajustar a cuadrcula 257 alinear 235 anidadas 225, 226 cambiar orden de apilamiento 231 cambiar tamao 233 cambiar visibilidad con comportamientos 588 cambiar visibilidad con el panel Capas 232 convertir en tablas 237 desplazables 575 en diseo de tablas 237 evitar solapamiento 236 manipular 233 mostrar y ocultar bordes 225 mover 234 preferencias 227 propiedades para mltiples 228 propiedades para una capa 227 seleccionar mltiples 228, 230 utilizar 224, 225 visibilidad, cambiar 232 caracteres especiales insertar 443 nombres de campo, signos de interrogacin 737 salto de lnea 434 en nombres de cuentas SQL 736 caracteres no vlidos en nombres de cuentas 736 Caracteres ocultos 604 caracteres vlidos en nombres de cuentas 736 caractersticas de fuente, cambiar 437 Carga previa de imgenes, accin 582 cargar archivos 158, 922
carpeta local configurar 93 estructura 89 carpeta remota configurar 95 estructura 89 solucionar problemas 96 carpetas 165 buscar 457 Favoritos, para activos 193 ocultar y anular ocultacin 165 utilizar 134, 135 Cascada 55 casillas de verificacin 914, 919 catlogos, base de datos 755 categoras activos 183 preferencias 79 celdas resaltando 288 Vase tambin celdas de diseo celdas de diseo acerca de 288 aplicar formato 302 borrar altos 299 color de fondo 302 dibujar 293 No aj., opcin 302 preferencias 307 resaltado, preferencias 295 celdas de tabla combinar y dividir 263 copiar 283 cortar, copiar y pegar 283 resaltado, preferencias 267 Vase tambin Celdas de diseo, Tablas de diseo CFForm 943 CGI, material de referencia 39 CheckBox, control 1021 claves de conexin, exportar 211 cdigo actualizar cdigo HTML de Fireworks colocado en Dreamweaver 523 ajustar seleccin mediante el Quick Tag Editor 668 ajustar texto 604 aplicar formato 606 aplicar sangra 605, 612, 644, 649 en archivos externos 671 bibliotecas de etiquetas 609 buscar 647
ndice alfabtico
1153
comentarios 645 comparar 125 comportamientos del servidor 631 contraer 640 copiar y pegar 645 copiar y pegar desde Fireworks a Dreamweaver 522 diferencias entre archivos 125 editar en plantillas 343 editores de etiquetas 639 editores externos 617 entorno de codificacin, personalizar 601 escribir y editar 631 etiqueta de cierre 632 fragmentos 633 imprimir 651 lenguajes admitidos 622 limpiar 653 material de referencia 39 maysculas y minsculas, cambiar 605 navegacin 646 no vlidas 623 nmeros de lnea 604 preferencias de colores 607 preferencias de formato 605 preferencias de reescritura 607 preferencias de validacin 609 preferencias, establecer 605 reescribir automticamente 623 referencia 650 reglas de codificacin 895 seccin head de un documento 674 seleccionar en Contribute 815 seleccionar en la ventana de documento 396 ver 601 ver opciones 604 XHTML 624 cdigo fuente Vase tambin Cdigo cdigo de navegacin 646 cdigo, contraer 643 acerca de 640 ampliar 641 contraccin inteligente 641 contraer 641 ver sin expandir 642 cdigo, editar BBEdit 617 HomeSite 618 inspector de etiquetas 664 inspector de propiedades 664
Quick Tag Editor 667 cdigo, insertar con el Selector de etiquetas 638 con la barra Insertar 638 con Quick Tag Editor 666 en la vista Diseo 671 cdigo, sugerencias acerca de 631 bibliotecas de etiquetas 609 preferencias 606 Quick Tag Editor 668 Cdigo, vista abrir archivos no HTML 608 cambiar a vista Diseo 55 Diseo, vista y especificar una u otra 47 escribir y editar cdigo 631 mostrar 601 opciones 604 ver documentos basados en plantilla 337 ver plantillas 335 ColdFusion actualizar pginas 974 reas de texto 947 botones 947 botones de opcin 949 campo de archivo 951 campos de fecha 952 campos de imagen 950 campos de texto 945 campos ocultos 946 casillas de verificacin 948 ColdFusion, variables 799 componentes 1008, 1011 componentes, definir un juego de registros 1015 componentes, juego de registros como fuente de datos 1016 Componentes, panel 1014 componentes, utilizar 1014 conexiones de base de datos 693 controles de formulario, modificar 953 cuadros de seleccin 949 formularios 941 fuentes de datos, crear 694 insertar pginas, crear 971 instalar 682 pginas de borrado 983 pginas de bsqueda, crear 963 pginas de conexin 995, 1007 pginas maestra-detalle 954, 956 pginas que utilicen componentes 1014
1154
ndice alfabtico
pginas, depurar 661 procedimientos almacenados 993 validar datos de formulario 953 variables de cliente 786, 799 ColdFusion Markup Language (CFML) depurar 279 ColdFusion MX 7, mejoras 942 colocar archivos en un servidor remoto 158 colocar y obtener archivos en un servidor remoto 156 Colocar, comando 158 Color de los vnculos, opcin (Prop. de la pgina) 395 Color de vnculos visitados, opcin 395 Color del texto, opcin 395 Color predeterminado, botn 395 colores cdigo, preferencias 607 como activos. Vase Activos crear 190 cuentagotas, utilizar 394 elegir 394 fondo de marco 326 fondo de pgina 393 muestras 394 predet. para texto de pgina 395 seguro para la Web 387 texto, cambiar 186, 441 colores de cdigo, preferencias para plantillas 349 colores del sistema 395 Colores del sistema, botn 395 comandos acceso desde men contextual 65 crear a partir de pasos de historial 406 Descartar cambios, comando 390 grabar 407 Guardar como, comando 389 Guardar todo, comando 389 Combinar celdas, comando 281 comentarios aadir y quitar etiquetas de comentario 649 insertar y editar 645 comparacin de archivos 125 compatibilidad con capas de Netscape Navigator 4 227 componentes, ColdFusion 1008 Componentes, panel 1014 comportamiento de servidor XSL Transformation 842, 860 comportamientos adjuntar 562 cambiar 564
compatibilidad con navegadores 566 crear acciones 565 de otros proveedores, instalar 565 definicin 559 elementos de biblioteca 201 eliminar 564 formularios, adjuntar comportamientos 929 imgenes 473 JavaScript 559598 marcos, utilizar 330 multimedia, aadir 557 vnculos, adjuntar 506 comportamientos del servidor Actualizar registro 982, 1053, 1079, 1109 cdigo 631 comprobar 896 crear 886 crear cuadros de dilogo para 904 editar comportamientos personalizados 907 Eliminar registro 1083 insertar registros 974 instalar adicionales 897 mover a registros 830 ocultar regiones 830 regiones repetidas 831 reglas de codificacin 895 Comportamientos, panel 560 comprobar el sitio acerca de 173 directrices 173 utilizar informes 175 Comprobar navegador, accin 568 Comprobar navegadores de destino, comando 655 Comprobar plug-in, accin 570 Comprobar vnculos en todo el sitio, comando 508 conectar con bases de datos 691 conexin con SQL Server, crear 699 Conexin de base de datos OLE 699 conexiones con sitios de Contribute, solucionar problemas 217 conexiones de base de datos ASP 703 ASP.NET 697 ColdFusion 693 conectarse 691 JDBC 718 JSP 717 MySQL 727 OLE DB 698, 705 OLE DB, parmetros 700
ndice alfabtico
1155
PHP 727 Configuracin de Live Data, cuadro de dilogo 751 conjunto de resultados de JSP 759 conjuntos de marcos acerca de 310 anidados 313 asignar nombre 325 crear 318 establecer destino de vnculos en 482 guardar 322 predefinidos, insertar 316 propiedades 326 seleccionar 319 Vase tambin Marcos consultas, solucionar problemas 737 contador de registros, crear 834 contenido activo, restringido 412 contenido de Flash 532 contenido dinmico acerca de 782 aadir a pginas 805 atributos 810 botones de opcin 927 campos de texto de formulario 925 casillas de verificacin de formulario 926 eliminar 814 eliminar de una pgina 765 formularios 915, 923 imgenes 809 juego de registros avanzado, crear 789 juego de registros, crear 788 juego de registros, definir 783 mens de formulario 924, 925 objetos 813 reemplazar 806 seleccionar en Contribute 815 texto 807 contenido, aadir a tablas 264 contraccin inteligente 641 contraer el panel Archivos 122 contraseas almacenar 997 campos 918 comprobar en el inicio de sesin 1002 incorrectas 736 permitir que los usuarios elijan 997 Contribute archivos especiales, manipular 208 archivos, administrar 213 archivos, desbloquear 215
archivos, transferir 207 compatibilidad, activar 210 configuracin de administracin, cambiar 211 contenido dinmico 815 CSS, estilos 454 definiciones de sitio, exportar 211 estructura del sitio, crear 204 funciones, cambiar 211 permisos en servidores 207 plantillas 351, 369 recuperar versiones anteriores de archivos 132 registrar eventos 216 sitios, administrar con Dreamweaver 203, 204, 211 solucionar problemas 216 Contribute Publishing Server 216 Contribute Publishing Server (CPS) 203 control de fuente 114, 149 control ListBox 1019 controlador Oracle Thin 718 controladores no especificados 734 controladores ODBC 1132, 1135 Controlar Shockwave o Flash, accin 571 controles ActiveX acerca de 556 insertar 556 controles de formulario ASP.NET 1018 HTML 918 controles deslizantes, crear 572 Convertir capas en tablas, comando 237 copiar y pegar activos 189 celdas de tabla 283 contraer cdigo 643 juegos de registros 802 CPS 216 Creador de comportamientos de servidor 886 Crear lbum de fotos Web, comando 524 crear un cach de fuentes de datos 801 CSS. Consulte Hojas de estilos en cascada cuadrculas ajustar capas a 257 como gua 78 mostrar 257 cuadro de color, opcin 394 cuadros clave, crear 241 Cubos de color, paleta 395 cuentagotas 394
1156
ndice alfabtico
cuentas, solucionar problemas de nombres de cuentas 736 cursiva, establecer texto 437
D
datos de tabla, importar 265, 429 Datos dinmicos, cuadro de dilogo 811 declaraciones preparadas, JSP 1089 Definicin de tipo de documento 614 definir colores de cdigo 349 fuentes, cambiar caractersticas 437 nuevo documento, tipo predeterminado 106 propiedades del documento 391 Definir combinacin de colores, comando 395 Definir texto de campo de texto, accin 587 Definir texto de capa, accin 585 Definir texto de marco, accin 584 DELETE, palabra clave de SQL 1140 depurar pginas de ColdFusion 661 Derecha, alineacin, establecer en el inspector de propiedades 467 desactivar Design Notes 169 ocultar elementos en el sitio 164 descargar archivos 156 comportamientos 565 estimaciones de tamao y tiempo 413 tiempo 49 desconectar usuarios 1006 Design Notes abrir 172 acerca de 116 activar y desactivar 169 aadir opciones de estado 172 configurar 169 definicin 169 eliminar no asociadas 172 guardar informacin sobre archivos 170 para archivos Fireworks 117 para archivos Flash 117 para objetos multimedia 539 desproteger/proteger acerca de 114 configurar 150 Desproteger/proteger, sistema buscar archivos protegidos 136
deshacer proteccin de archivos 155 desproteger y proteger archivos 149, 153 destruir archivos temporales, permisos 735 dibujar capas 224 capas anidadas 226 celdas y tablas de diseo 293 Director, crear pelculas Shockwave con 551 disear marcos 312 diseo de pgina. Vase Modo de diseo diseo, planificar. Vase Modo de diseo Diseo, vista actualizar 602 cambiar a vista Cdigo 55 JavaScript, insertar 671 mostrar con vista Cdigo 602 VBScript, insertar 671 ver documentos basados en plantilla 336 ver plantillas 334 Dividir celda, comando 282 Dividir marco, comandos 316 Documento, barra de herramientas 44, 46 Documento, ventana acerca de 45 aplicar zoom 398 aspectos bsicos 45, 54 barra de estado 48 barra de ttulo 46 cambiar tamao 56 Men emergente Tamao de ventana 49 selector de etiquetas 48 tamao del documento y tiempo de descarga 49 ver cdigo 55 documentos abrir otros tipos 107 aplicar una plantilla 374 buscar 457 cascada 55 comprobar vnculos 506 configurar propiedades 391 configurar un tipo predeterminado para documento nuevo 106 crear vacos 102 crear, basados en archivo de diseo 103 crear, basados en plantilla 104 Design Notes 169 guardar 105 guardar como plantilla 347 HTML de Word, limpiar 108 mosaico 55
ndice alfabtico
1157
mostrar en fichas (Macintosh) 80 separar plantilla 375 tamao y tiempo de descarga 413 ttulo de pgina 391 vista previa en navegadores 409 documentos basados en plantilla adjuntar plantillas 374 en vista Cdigo 337 en vista Diseo 336 modificar 376, 377, 378 separar plantillas 375 documentos vinculados, abrir 510 Dreamweaver aspectos bsicos 24 Contribute, integracin 203 sitio. Vase Sitios 89 Dreamweaver, integrar Fireworks abrir y editar imgenes en Fireworks 514, 527 Abrir y editar, preferencias 520 abrir y optimizar imgenes en Fireworks 515 actualizar HTML de Fireworks 523 crear lbumes de fotos Web 524 insertar archivos de Fireworks 513 Optimizar imagen en Fireworks, comando 515 DropDownList, control 1019 DSN conexiones sin 710 crear una conexin 706 solucionar problemas 734 utilizar 1137 DTD, archivos 614
E
editar 802 activos 187 archivos de un sitio de Dreamweaver 118 archivos en un servidor 119, 121 ASP.NET, controles de formulario 1019 botn Flash, objetos 541 cdigo 631 comportamientos del servidor 907 Dreamweaver, configuracin del sitio 97 elementos de biblioteca 196 fuentes de datos 802 hoja de estilos CSS 454 hojas de estilos externas 453 juegos de registros 802 mtodos abreviados de teclado 83
plantillas 367 sitios Web remotos existentes 99 sitios Web, locales existentes 98 Editar con BBEdit, comando 618 Editar con HomeSite, comando 618 Editar contenido sin marcos, comando 329 Editar hoja de estilos, cuadro de dilogo 454 Editar lista de formatos, cuadro de dilogo 826 Editar lista de fuentes, comando 439 editor de imgenes externo, abrir 472 Editor de la biblioteca de etiquetas 609 editores externos BBEdit (slo Macintosh), integracin 617 elementos multimedia 537 HomeSite (slo Windows), integrar 618 HTML 617 imgenes 472 texto 617 editores. Vase Editores externos ejecutable, JSP 1086 Elementos de base de datos, rbol 791 elementos de biblioteca acerca de 179 aadir a pginas 195 cambiar color de resaltado 199 cambiar nombre 197 como activos. Vase Activos convertir en editables en documentos 200 crear 194 editar 196 editar comportamientos en 201 eliminar 198 preferencias 199 propiedades 199 utilizar 193 volver a crear 198 elementos invisibles comentarios 645 mostrar y ocultar 397 scripts 671 seleccionar 396 elementos multimedia, insertar 535 elementos, alinear 466 eliminar archivos de un sitio de Contribute 213 archivos no utilizados 163 archivos y carpetas 135 contenido dinmico 765, 814 elementos de biblioteca 198 filas y columnas 279
1158
ndice alfabtico
fuentes de datos 802 juegos de registros 802 Eliminar registro, comportamiento 1083 entornos de trabajo, ventana Live Data 747 Enviar, botones 921 equilibrar llaves 654 error, mensajes archivo en uso 734 Microsoft, solucionar problemas 733 mensajes de error Vase tambin Solucionar problemas errores de sintaxis en declaraciones de insercin 738 Escala de grises, paleta de colores 395 escribir cdigo 631, 898 escritorio, acceder a archivos 119 escritura, permisos en servidores 207 espacio de trabajo acerca de 41 almacenamiento de un diseo personalizado 69, 81 diseo 79 diseo flotante 42 espacio indivisible, insertar 444 espacios convertir en tabulaciones 649 insertar indivisibles 444 esquemas 614, 755 esquemas de diseo, formatear tablas 272 Establecer como pgina principal, comando 143 establecer destino de vnculos abrir un documento en una ventana nueva 484 en documentos 482 Establecer imagen de barra de navegacin, accin 583 establecer marcos como destino 328 Establecer texto de la barra de estado, accin 586 Estado de navegacin por juego de registros, objeto live 834 Estndar, barra de herramientas 44, 48 Estndar, modo definicin 261 Estndar, modo del inspector de propiedades 811 Estilo, submen 437 estilos aplicar estilos CSS personalizados 449 CSS 448 estilos en conflicto 420 Vase tambin Hojas de estilos Estilos CSS, panel 445 acerca de 424 estilos personalizados. Vase Hojas de estilos etiqueta
editores 639 encabezado, aplicar 433 prrafo, aplicar 433 sintaxis, plantillas 338, 370 etiqueta div, insertar 248 etiquetas anidadas, combinar 653 ASP.NET, importar 615 bibliotecas 609 buscar 647 cerrar 632 editar cdigo con Quick Tag Editor 666 editar con un Quick tag editor 639 eliminar 649, 670 JRun, importar 616 JSP, importar 616 no vlidas 623 personalizadas, importar 614 seleccionar 396, 670 solapadas 623 vacas, eliminar 653 Vase tambin Cdigo etiquetas de cierre 632 etiquetas no vlidas, mostrar 623 Bloques de diseo CSS Vase bloques de diseo etiquetas personalizadas, importar 614 etiquetas vacas, eliminar 653 eventos cambiar en comportamientos 564 definicin 559 desencadenar acciones 562 disponibles para distintos navegadores y objetos 561 eventos, registrar 216 Evitar solapamiento de capas, comando 236 Excel. Vase Microsoft Excel, archivos exportar claves de conexin para Contribute 211 datos de tabla 265 estilos para crear una hoja de estilos CSS 451 sitios 147 Exportar tabla, comando 266 expresiones de plantilla 344 expresiones regulares 628 extensibilidad, comportamientos de otros proveedores 565 Extension Manager 84 extensiones administrar 84 agregar 84 crear 886
ndice alfabtico
1159
instalar 897
F
Favoritos, carpeta 193 Favoritos, lista (panel Activos) acerca de 181 aadir un nuevo color 191 aadir un URL 191 aadir y eliminar activos 190 crear carpeta Favoritos 193 crear un alias 192 ver 183 fechas insertar 442 solucionar problemas 737 filas y columnas aadir y eliminar 279 filas y columnas, aadir y eliminar 279 Fireworks Design Notes 117 Dreamweaver, integrar 513 editar mens emergentes 518 mens emergentes 591 Flash Player para Flash Video, detectar 549 Flash Video detectar reproductor 549 editar y eliminar 550 insertar 549 opciones de visualizacin 548 Flash, archivos SWF controlar 571 insertar 543 Flash, componentes editar propiedades 545 utilizar 544, 545 Flash, Design Notes 117 Flash, objetos, hacer dinmicos 813 FlashPaper 546 flujo de trabajo, informes 175 flujo de trabajo, para pginas dinmicas 757 fondo imagen y color, establecer 393 transparencia en 393 Formatear tabla, comando 272 Formato, columna 825 formato. Vase Cdigo formatos de archivos, imagen 459 formatos de datos
aplicar 825 crear 826 editar 825 Formulario de actualizacin de registros, objeto de aplicacin 979, 1050, 1075, 1106 Formulario de insercin de registro, objeto de aplicacin 972 formularios accesibilidad 930 acerca de 912 aadir a un documento 915 ASP.NET 1018 botones 913, 921 botones de opcin 914, 919 botones de opcin dinmicos 927 campos de archivo 915, 922 campos de contrasea 918 campos de imagen 915, 921 campos de texto 913, 918 campos de texto dinmico 925 campos, validar 597 casillas de verificacin 914, 919 casillas de verificacin dinmicas 926 ColdFusion 941 controles, ColdFusion 945 crear 915 insertar objetos 918 JavaScript, utilizar 929 mens 914, 920 mens de salto, crear 499 mens dinmicos 924, 925 objetos dinmicos 915, 923 ocultos, campos 913, 922 scripts de la parte del cliente 929 scripts de la parte del servidor 912 utilizar para recoger datos 963, 1037 validacin 927 validar formularios ColdFusion 953 fotografas 459 fragmentos crear mtodos abreviados de teclado 634 Fragmentos, panel 633 Legacy, carpeta 633 FROM, palabra clave de SQL 1140 FTP obtener y colocar archivos 156 preferencias 133 registro 156, 157 solucionar problemas 96 fuentes
1160
ndice alfabtico
cambiar combinaciones 439 cambiar estilos 437 codificacin, configurar fuentes para 83 fuentes de datos acerca de 782 ColdFusion, variables 799 crear un cach 801 definir en Dreamweaver 694 eliminar 802 enviadas por usuarios 769 JavaBeans 1090 juegos de registros, crear (sencillos) 788 juegos de registros, introduccin 783 parmetros de formulario, introduccin 770 parmetros de URL, introduccin 771 variables de aplicacin 796 variables de sesin 774, 795 variables JSP 800 Fuentes/codificacin, preferencias 83 Funciones, elemento de men 646 funciones, ver 646
bloquear 255 cambiar color 256 crear 255 mostrar y ocultar 255 utilizar con plantillas 256 guas visuales acerca de 78 imagen de rastreo 258 reglas 257 guiones bajos en nombres de cuentas SQL 736
H
head, ver y editar la seccin 674 herramientas de comparacin 125 Hipervnculo, cuadro de dilogo 487 Historial, panel automatizar tareas con 401 copiar y pegar pasos 405 crear comandos a partir de pasos de historial 406 introduccin 386 lista de historial, borrar 401 nmero mximo de pasos, configurar 401 pasos, aplicar a otros objetos 404 repetir pasos 402 hojas de estilo de tiempo de diseo, utilizar 455 hojas de estilos editar 453 Editar hoja de estilos, cuadro de dilogo 454 externas 451 Vase tambin Estilos Hojas de estilos en cascada (CSS) actualizar reglas en un sitio de Contribute 454 aplicar reglas personalizadas (clase) 449 crear nuevas reglas 448 eliminar 447 eliminar estilo de una seleccin 450 exportar reglas 451 introduccin 418 Panel Estilos CSS 424 propiedades en forma abreviada 420 y reglas en conflicto 420 hojas de estilos externas crear 451 editar 453 vincular con 451 HomeSite 618 HTML aplicar formato e insertar 416, 428
G
General, preferencias 82 Generator, objetos, hacer dinmicos 813 GIF, imgenes como imgenes de rastreo 258 usos para 459 grabar comandos 407 grficos. Vase Imgenes GROUP BY, palabra clave de SQL 1140 guardar archivos en marcos y conjuntos de marcos 322 buscar 648 documentos 105 guardar documentos con un nombre diferente 389 informes 176 mapas del sitio 147 volver a la ltima versin guardada 390 Guardar conjunto de marcos como, comando 323 Guardar conjunto de marcos, comando 323 Guardar marco como, comando 323 Guardar marco, comando 323 Guardar todo, comando 323, 389 Guardar, comando 105 gua introductoria, por dnde empezar 24 guas ajustar elementos 255
ndice alfabtico
1161
atributos, convertir en dinmicos 810 atributos, informes 175 cdigo fuente, buscar 457 cdigo fuente, estilos de etiqueta 444 configurar extensin de archivo 107 convertir en XHTML 660 espacio indivisible 444 Roundtrip 623 Vase tambin Cdigo HTML de Fireworks, copiar 522 HTML, formularios. Vase Formularios
I
imagen de rastreo 258 imgenes acerca de 459 alinear 433 aplicar comportamientos a 473 brillo y contraste 470 cambiar archivo de imagen con lneas de tiempo 244 carga previa (comportamiento) 582 como activos. Vase Activos convertir en dinmicos 809 editar con editor externo 472 escalabilidad 467 formatos admitidos 459 en formularios 915 insertar 462 insertar en el modo de diseo 297 intercambiar y restaurar intercambiadas (comportamiento) 596 mapas de imagen 503 optimizar mediante Fireworks 469 perfilar 470 recortar 468 volver a muestrear 468 imgenes de sustitucin acerca de 471 crear 472 importar datos de tabla 265, 429 etiquetas ASP.NET 615 etiquetas personalizadas 614 hoja de estilos CSS externa 452 JRun, etiquetas 616 JSP, etiquetas 616 Microsoft Word, archivos 108
sitios 147 texto desde otros documentos 429 Importar tabla, comando 265 imprimir cdigo 651 includes, server-side 626 Inferior absoluta, alineacin 466 Inferior, alineacin 466 informes guardar 176 para sitios 175 validar cdigo 659 ver 176 inicios de sesin, SQL Server 735 INSERT, palabra clave de SQL 1140 insertar activos 185 applets de Java 556 botn Flash, objetos 540 capas anidadas 226 caracteres especiales 443 comentarios 645 controles ActiveX 556 div, etiquetas 248 elementos de biblioteca 195 elementos multimedia 535 fechas 442 Flash, archivos SWF 543 FlashPaper 546 imgenes 462 imgenes de Fireworks 513 imgenes de sustitucin 472 marcador de posicin de imagen 464 pginas 971 Pelculas Shockwave 551 server-side includes 672 texto Flash, objetos 542 Insertar anclaje con nombre, cuadro de dilogo 490 Insertar barra de navegacin, cuadro de dilogo 502 Insertar men de salto, cuadro de dilogo 499 Insertar registro, comportamiento 974 Insertar vnculo de correo electrnico, cuadro de dilogo 491 Insertar, barra acerca de 44 acoplar 66 categoras 49 insertar cdigo 638 mostrar categoras como fichas 60, 61 preferencias 62 utilizar 59
1162
ndice alfabtico
Inspector de cdigo 601 inspector de etiquetas 664 Inspector de propiedades acerca de 45 ampliar 64 mostrar 64 inspector de propiedades convertir atributos HTML en contenido dinmico 811 editar cdigo 664 editar un juego de registros 765, 814 Estndar, modo 811 reparar vnculos rotos 509 inspectores inspector de etiquetas 664 Inspector de propiedades 64 Vase tambin Paneles integracin con BBEdit (slo Macintosh) 617 integrar Dreamweaver con otras aplicaciones 33 Intercambiar imagen, accin 596 interfaz de usuario, personalizar el diseo del panel 66 Internet Explorer, contenido activo restringido 412 Ir a URL, accin 577 Ir, asociar botn a un men de salto 578 ISP 711 Izquierda, alineacin 467
J
Jakarta Tomcat, servidor de aplicaciones (JSP) 684 JAR, archivos 616 Java Server Pages. Vase JSP Java, applets insertar 535, 556 JavaScript acciones 561 adjuntar a objetos de formulario 929 alertas 581 archivos 108 comportamientos 559 ejecutar 567 insertar cdigo en la vista Diseo 671 men emergente 591 procesar datos de formulario 929 JDBC controladores 720, 1132 parmetros de conexin 718 JDBC-ODBC de Sun, controlador puente 722 JPEG, imgenes
como imgenes de rastreo 258 usos para 459 JRun 684 JRun, etiquetas 616 JSP (Java Server Pages) actualizar pginas 1072 Comportamiento de servidor Ejecutable 1086 conexiones de base de datos 717 conexiones ODBC 721 conjunto de resultados, definicin 759 controladores JDBC 720 importar etiquetas 616 insertar pginas, crear 971 JavaBeans 1090 pginas de bsqueda, crear 963, 1072 pginas de conexin, crear 995 pginas de eliminacin, crear 1079 pginas maestra-detalle, crear 954, 1067 preparadas, declaraciones 940, 1089 procedimientos almacenados 1086 servidores de aplicaciones 684 variables JSP 800 Juego de pginas Maestro-Detalle, objeto de aplicacin 954, 1028, 1067, 1093 Juego de registros, cuadro de dilogo avanzado 789 sencillo 788 Juego de registros, cuadro de dilogo avanzado Elementos de base de datos, rbol 791 juegos de registros acerca de 783 columnas, definir (SQL) 1141 copiar y pegar 802 crear un cach 801 definir sin SQL 788 editar o eliminar 802 Elementos de base de datos, rbol 791 filtrar registros (SQL) 1142, 1146 limitar los registros devueltos (SQL) 1142 sencillos, crear 788 SQL, escribir 1139 SQL, escribir declaraciones personalizadas 789 unir tablas (SQL) 1146 vaco, solucionar problemas 739
L
lectores de pantalla JAWS for Windows 70
ndice alfabtico
1163
Window-Eyes 70 lectura, permisos en servidores 207 Legacy, carpeta 633 lenguajes admitidos en Dreamweaver 622 referencia 650 Limpiar HTML de Word, comando 108 Limpiar HTML, comando 653 Lnea de base, alineacin 466 Lneas de tiempo aadir objetos a 241 aadir y quitar marcos 243 aplicar bucles 243 cambiar archivo de origen de imagen 244 cambiar nombre 247 cambiar propiedades de una capa 244 crear 241 cuadros clave 241 modificar 243 mltiples 245 reproducir automticamente 243 rutas complejas 242 sugerencias de animacin 247 lneas, ajustar en la vista Cdigo 604 Live Data, ventana acerca de 764 Actualizar automticamente 752 archivos no presentes 749 parmetros de URL de la barra de herramientas 751, 764 proporcionar parmetros esperados 751 ver 748 Llamar JavaScript, accin 567 llaves, equilibrar 654
M
Mac OS, paleta de colores 395 Macintosh accesibilidad 71 documentos en fichas 80 Macromedia Director, crear pelculas Shockwave con 551 Macromedia Exchange 84, 897 Macromedia HomeSite 618 Macromedia JRun 616, 684 macros, crear comandos 406 manejadores de eventos Vase Eventos Mano, herramienta 48, 399
map, etiqueta 504 mapa de bits, grficos cambiar tamao 467 Vase tambin Imgenes mapas de imagen crear del lado del cliente 504 introduccin 503 seleccionar mltiples zonas interactivas 505 zonas interactivas 504 mapas de imagen del lado del servidor 503 mapas del sitio aadir archivos a un sitio 142 cambiar vnculos en 496 configurar pgina principal 138 definicin 137 guardar como archivo de imagen 147 modificar diseo 140 mostrar archivos 144 mostrar archivos dependientes en 145 ocultar archivos 144 utilizar 496 utilizar con pginas 142 ver 138, 146 Vincular a nuevo archivo, comando 142 vnculos, utilizar 496 marcadores para elementos invisibles 397 marcos acerca de 310 aadir atributos de accesibilidad 317 anidados 313 cambiar contenido con vnculos 328 cambiar el color de fondo 326 cambiar tamao 319 compatibilidad con navegadores 329 crear 316 definicin 310 editar atributos de accesibilidad 324 eliminar 319 establecer destino 328 guardar 322 Marcos, panel 320 planificar contenido 312 propiedades, definir 324 seleccionar 319 utilizar con comportamientos 330 Marcos, panel 320 Mark of the Web 412 maysculas y minsculas, cambiar 605, 649 MDAC (Microsoft Data Access Components) 698 Medio absoluta, alineacin 466
1164
ndice alfabtico
Medio, alineacin 466 Mensaje emergente, accin 581 mensajes de error de Microsoft, solucin de problemas 733 men de encabezado de columna acerca de 262 Aadir imagen de espaciador, opcin 305 ancho de columna, establecer 303 Borrar ancho de columna, opcin 278 Hacer que la columna sea autoampliable 303 insertar columnas 280 mostrar 279, 289 Quitar imagen de espaciador 305 Seleccionar columna 268 Men de salto Ir, accin 578 Men de salto, accin 577 Men emergente Tamao de ventana 49 mens 920 mens contextuales 65 mens de acceso directo Vase Mens contextuales mens de listas 914, 920 mens de sugerencias para el cdigo 631 mens desplegables 920 mens emergentes Fireworks 518, 591 HTML, formularios 914, 920 JavaScript, comportamiento 591 mtodos abreviados de teclado, editar 83 Microsoft Access, archivos de base de datos bloqueados 734 Microsoft Excel, importar archivos 265 Microsoft IIS 683 Microsoft Word, documentos HTML, limpiar 108 importar 108 pegar 428 Modelo de objetos de expresin (plantillas) 345 modificar bases de datos, utilizando procedimientos almacenados 993, 1064, 1084 propiedades de pgina 391 modo de diseo aadir contenido a 297 ancho fijo 291 aplicar formato a celdas y tablas de diseo 302 autoampliar 291 borrar altos de celdas 299 cambiar a o desde el modo estndar 292 celdas y tablas de diseo 288 dibujar celdas y tablas de diseo 293
espaciado de celdas 302 establecer ancho 291 Igualar ancho de celdas, opcin 302 imgenes de espaciador, preferencias 291 men de encabezado de columna 303 mover celdas y tablas de diseo 299 preferencias 307 Quitar anidacin, opcin 302 Quitar todos los espaciadores, opcin 302 tablas de diseo anidadas 296 utilizar celdas y tablas de diseo 299 modo de tablas expandidas 270 modos Estndar, modo 261 modo de diseo 287 modo de tablas expandidas 270 Mosaico 55 mostrar anchos de tabla y columna 279 capas 232 cdigo, sugerencias 631 imagen de rastreo 258 mltiples registros 831 registro FTP 157 Mostrar archivos dependientes, opcin 145 mostrar elementos invisibles 397 Mostrar men emergente, comportamiento 591 Mostrar regin, comportamiento 830 Mostrar-Ocultar capas, accin 588 mover 643 Mover a registro, comportamiento 830 mover archivos y carpetas 135 MPEG, pelculas como activos. Vase Activos muestras de color 394 multimedia. Vase Elementos multimedia multiusuario, sistemas 54 MySQL, base de datos 727
N
Navegacin por el cdigo, botn 646 navegadores colores seguros para la Web 387 compatibilidad con marcos 329 comprobar compatibilidad 655 comprobar versiones 568 establecer destino 655 principal, definir 411 vista previa en 409
ndice alfabtico
1165
niveles de autorizacin 1003 Nombre de fuente de datos. Vase DSN nombres de usuario almacenar 997 comprobar en el inicio de sesin 1002 comprobar exclusividad 999 permitir que los usuarios elijan 997 nuevas funciones de Dreamweaver 20 Nuevo desde plantilla, comando 104, 105 Nuevo documento, preferencias 106 numerar lneas de cdigo 604 nmeros de lnea 604
O
objeto XSLT Repetir regin 846, 858, 860, 865 objetos convertir en dinmicos 813 insertar con la barra Insertar 59 objetos de aplicacin Formulario de actualizacin de registros 979, 1050, 1075, 1106 Formulario de insercin de registro 972 Juego de pginas Maestro-Detalle 954, 1028, 1067, 1093 objetos de comando, ASP 1086 objetos de servidor ColdFusion, variables 786, 799 variables de aplicacin 796 variables de sesin 795 objetos live Barra de navegacin de juego de registros 827 Estado de navegacin por juego de registros 834 objetos, insertar HTML en formularios 918 Obtener ms comportamientos, comando 566 obtener y colocar archivos 156, 158 Obtener, comando 156 ocultar elementos invisibles 397 vnculos 830 ocultar elementos en el sitio activar y desactivar 164 anular ocultacin de todo 168 archivos 165 Ocultar men emergente 595 ocultos, campos 922 ODBC, errores 739 OLE DB
conexiones 705 obtener un proveedor 698 proveedores 1132 onBlur, evento 597 opcin de reproduccin automtica (panel Lneas de tiempo) 240 Opciones, men 67 Optimizar imagen en Fireworks, comando 515 orden de apilamiento cambiar con lneas de tiempo 244 capas 231 ortografa comprobar con el comando Ortografa 456 diccionarios 456 Ortografa, comando 456 ortografa, comprobar con el comando Ortografa 456
P
pgina de inicio 44 pgina de registro 995 pgina principal, establecer para mapa del sitio 138, 143 pginas cambiar el ttulo 391 cambiar su tamao para que quepan en el monitor 56 colores predet. de texto 395 conexin, crear 1000 de borrado 1079 Design Notes 169 imagen y color de fondo, establecer 393 insertar, crear 971 mostrar datos XML en 856 preferencias de tiempo y tamao de descarga, establecer 413 registro de actualizacin, crear 974 registro de usuarios 995 restringir el acceso 1003 vista previa en navegadores 409 XHTML, crear 660 pginas de actualizacin, crear ASP 1072 ASP.NET 1044 ColdFusion 974 JSP 1072 PHP 1102 pginas de bsqueda, crear ASP 963, 1072
1166
ndice alfabtico
ASP.NET 1036 ColdFusion 963 JSP 963, 1072 PHP 963 pginas de conexin ColdFusion 1007 crear 1000 pginas de eliminacin, crear ASP 1079 ASP.NET 1054 ColdFusion 983 JSP 1079 PHP 1110 pginas de resultados 963, 1036 pginas detalle 954, 1028, 1067, 1093 pginas maestra-detalle ASP 954, 1067 ColdFusion 954, 956 JSP 954, 1067 PHP 954, 1093 pginas Maestro-Detalle ASP.NET 1028 paletas de colores 394 Panel Archivos preferencias 133 utilizar archivos y carpetas 134, 135 Panel Capas 229 paneles acoplar 66 Activos, categora Plantillas 348 administrar 66 almacenamiento de un diseo personalizado 69, 81 Comportamientos 560 configurar preferencias de paneles flotantes 70 Fotogramas 320 grupos de paneles 45 Historial 386 paneles flotantes, combinar 66 parmetros demasiado pocos (error de SQL) 737 marcadores 904 plantillas 343 parmetros de conexin 718 parmetros de plantilla introduccin 343 modificar en documentos basados en plantillas 377 Parmetros, cuadro de dilogo 813 prrafos aadir un salto de lnea 434 aplicar formato 433
pegar pasos de historial 405 Pelculas Shockwave acerca de 551 controlar 571 insertar 551 pelculas, insertar 535 Perl, funciones admitidas 622 permisos carpeta de base de datos 736 crear y destruir archivos temporales 735 escritura, permisos en servidores 207 funciones en Contribute 211 seguridad 733 en servidores 207 solucionar problemas 731 personalizar Dreamweaver, aspectos bsicos 78 entorno de codificacin 601 PHP actualizar pginas 1102 conexiones de base de datos 727 insertar pginas 971 instalar PHP 684 Mac OS X 684 pginas de borrado 1110 pginas de bsqueda 963 pginas de conexin 995 pginas maestra-detalle 954, 1093 pxeles transparentes en el fondo 393 planificar marcos 312 plantillas acerca de 332 Activos, panel 348 actualizar documentos 368 actualizar sitios de Contribute 369 anidados 340, 365 aplicar a un documento existente 374 atributos de etiqueta editables 333, 364 cambiar colores de resaltado de regin 350 cambiar nombre 370 en vista Cdigo 335 como activos. Vase Activos comprobar sintaxis 370 convertir una regin en no editable 356 crear 347 crear documentos nuevos con 104 crear para sitios de Contribute 351 deshacer aplicacin 375 en vista Diseo 334
ndice alfabtico
1167
editar 367 editar cdigo 343 editar scripts de servidor 343 eliminar 371 expresiones 344 hacer clic en regiones bloqueadas 376 localizar regiones editables 356 modificar propiedades en documentos basados en plantillas 376 parmetros 343 preferencias 349, 350 regin opcional 333, 361, 362 regin repetida 333, 357, 378 regiones editables 332, 354, 356, 357 separar documento de 375 sintaxis de etiquetas 338 tabla repetida 358, 359 tipos de regin 332 vnculos, crear 340 XML 372 plug-ins de Netscape Navigator reproducir en la ventana de documento 554 solucionar problemas 555 plugins comprobar 570 convertir en dinmicos 813 reproducir en la ventana de documento 554 solucionar problemas 555 PNG, imgenes como imgenes de rastreo 258 usos para 459 Predeterminado por el navegador, alineacin 466 preferencias Abrir y editar 520 actualizar vnculos 494 Barra de estado 57 cambiar resaltado 251 Capas 227 Cdigo, vista 604 colores de cdigo 607 diccionario ortogrfico 456 editores externos 538 formato de cdigo 605 Fuentes/codificacin 83 General 82 Insertar, barra 62 introduccin 79 modo de diseo 307 Nuevo documento 106 Paneles 70
paneles flotantes 70 plantilla 350 reescribir cdigo 607 resaltado, bibliotecas 199 resaltado, bloques de diseo 251 resaltado, celdas de diseo 295 resaltado, regiones de plantilla 350 resaltado, tablas 267 Sitio 133 sugerencias de cdigo 606 tipos de archivo y editores 619 Tipos de archivo/editores 538 Validador 609 privilegios de acceso almacenar en una base de datos 1005 aadir a pginas 1004 ejemplo 1003 procedimientos almacenados ASP 1084 ASP.NET 1064 ColdFusion 993 definicin 939 JSP 1086 modificar bases de datos 993, 1064, 1084 procesadores de texto, archivos creados con 108 propiedades cambiar con comportamientos 567 celdas y tablas de diseo 302 conjunto de marcos 326 de documento, configurar 391 documento basado en plantilla 376 elemento de biblioteca 199 marco 324 mostrar 64 mltiples capas 228 tabla 271 una capa 227 propiedades de pgina, cambiar ttulos 391 Propiedades de plantilla, cuadro de dilogo 377 Propiedades del vnculo de datos 699 proporcin, mantener 467 Proveedores de Microsoft OLE DB 698 Proveedores de Oracle OLE DB 698
Q
Quick Tag Editor abrir 666 mens de sugerencias 668
1168
ndice alfabtico
QuickTime, pelculas como activos. Vase Activos insertar 554 Quitar deteccin de Flash Video, comando 550 Quitar la marca de regin editable, comando 356 Quitar lnea de tiempo, comando 245 Quitar marco, comando 241 quitar marcos de una lnea de tiempo 243
R
RadioButton, control 1022 RadioButtonList, control 1022 recoger datos de los usuarios 963, 1037 recursos para informacin sobre tecnologas Web 39 reescribir cdigo 623 Referencia, panel 650 regiones hacer clic en bloqueadas 376 ocultar 830 regiones editables (plantillas) cambiar el nombre 357 controlar en plantillas anidadas 365 crear 354 definicin 332 utilizar 356 regiones opcionales (plantillas) definicin 333 insertar 361 modificar 362 regiones repetidas (plantillas) alternar colores 359 en documentos basados en plantillas 378 crear 357 definicin 333 tabla repetida 358 Registrar ruta de capa, comando 242 registro de red, actividad 216 Registro, botn 161 registros actualizar 974 crear un contador 834 eliminar 1079 insertar 971 mostrar varios 831 vnculos de navegacin 827 reglas 257 acerca de 257 en la vista Diseo 254
reglas de codificacin 895 reglas horizontales, insertar y modificar 435 relativas a la raz, rutas acerca de 479 definir 488 relativas al documento, rutas acerca de 477 definir 488 repetir pasos 401 Repetir regin, comportamiento 831 reproducir objetos Flash 542 Reproducir sonido, accin 580 Reproducir, botn 402 requisitos, aplicaciones Web 679 resaltado, preferencias bloques de contenido 251 celdas de diseo 295 elementos de biblioteca 199 regiones de plantilla 350 tablas 267 Restablecer origen, comando 257 Restablecer posicin, comando 258 Restaurar imagen intercambiada, accin 597 restringir el acceso al sitio 995 restringir tablas 755 Resultados, grupo de paneles Revisin del navegador de destino, panel 655 Validacin, panel 659 retorno, aadir un prrafo 434 reutilizar activos 188 buscar 648 cdigo 633 elementos de biblioteca 195 Revisin del navegador de destino, panel 655 Roundtrip HTML 623 Rueda de color (Colores del sistema), botn 395 ruta virtual 711 rutas absolutas 477 fsicas 711 relativas a la raz 479 relativas al documento 477 rutas relativas 488 rutas relativas a la raz del sitio. Vase Rutas relativas a la raz
ndice alfabtico
1169
S
salto, mens de acerca de 914 aadir mens de salto 499 botones Ir 499, 578 cambiar elementos de men 500 crear un mensaje de seleccin para 499 editar 577 sangra, cdigo 612, 644, 649 scripts como activos. Vase Activos crear vnculos de script 492 editar en la vista Diseo 672 editar externos 671 insertar 671 llaves equilibradas, comprobar 654 ver funciones 646 vincular archivos externos 671 scripts de servidor, en plantillas 343 segundo plano, transferencia de archivo 115 seguridad configurar permisos de base de datos para 733 crear pginas para 995 proteger una carpeta con contrasea 1007 seleccionar capas 230 celdas y tablas de diseo 299 etiquetas 670 marcos y conjuntos de marcos 319 objetos en la ventana de documento 396 tabla, elementos 266 varios activos 187 Seleccionar remoto ms reciente, comando 161 SELECT, palabra clave de SQL 1140 selector de color Dreamweaver 394 sistema 395 selector de etiquetas 45, 670 Separar de plantilla, comando 375 Separar del original, opcin 200 server-side includes acerca de 626 Archivo 673 cambiar tipos 672 editar archivo 672 insertar 672 insertar y editar 672 Virtual 673 server-side includes de archivo 626
server-side includes virtuales 626 Servicio tcnico de Microsoft 733 servicios Web acerca de 871 aadir a una pgina 881 directorios UDDI 874 flujo de trabajo 873 generador de proxy AXIS 876 generadores de proxy, adicionales 876 generadores de proxy, configurar 877 generadores de proxy, instalar 876 lista de sitios UDDI, editar 883 SOAP 875 servidor de aplicaciones configurar 681 elegir 681 servidor de prueba aplicaciones Web 690 comportamientos 896 configurar 681 servidor HTTP 680 servidores abrir una conexin existente 119 cargar pginas 922 conectarse para editar archivos 121 opciones de acceso 95 solucionar problemas de carpeta remota 96 Shockwave, objetos, hacer dinmicos 813 Shockwave, pelculas como activos. Vase Activos signos de interrogacin 737 sincronizar sitios local y remoto 161 sistemas operativos, multiusuario 54 Sitio, lista (panel Activos) acerca de 181 actualizar 184 ver 182 Sitio, panel ahora panel Archivos 45, 132 buscar texto y HTML dentro de los documentos 457 sitios abrir para ver 118 activos grandes en 190 activos, reutilizar 188 archivo de cach 495 Archivos, cambiar visualizacin del panel 124 archivos, utilizar 134 buscar archivos 136 buscar archivos en 457
1170
ndice alfabtico
cach 494 carpeta local, configurar 93 carpeta remota, configurar 95 carpeta remota, solucionar problemas 96 compatibilidad con navegadores 655 crear nuevo, asistente para la definicin del sitio 91 crear nuevo, configuracin avanzada 92 Design Notes 169 desproteger/proteger, utilizar 149 directrices de comprobacin 173 editar configuracin del sitio 97 editar sitios Web existentes 98, 99 especificar un servidor de prueba 690 estructura de carpeta 89 importar y exportar 147 informes 175 locales y remotos 88 mapa del sitio, utilizar 137 material de referencia 39 ocultar 116, 163 quitar de la lista de sitios 149 seguridad 995 sincronizar local y remoto 161 ver en panel Archivos 122 vnculos rotos, reparar 509 vnculos, cambiar en todo el sitio 498 vnculos, comprobar 506 vnculos, utilizar 475 vista previa en navegadores 409 sitios locales. Vase Sitios 91 situar bloques de cdigo 902 SO Windows, paleta de colores 395 SOAP y servicios Web 875 solapadas, etiquetas 623 solucionar problemas archivo en uso 734 archivos bloqueados en sitios de Contribute 215 BOF 739 campo COUNT incorrecto 737 compatibilidad con Contribute, activar 206 consultas actualizables 736 Contribute 215, 216 desproteger y proteger en sitios de Contribute 215 DSN 734 EOF 739 error de inicio de sesin 735 errores de sintaxis 738 estilos que no aparecen correctamente en Contribute 454
hacer clic en regiones bloqueadas 376 mensajes de error de Microsoft 733 ODBC, errores 739 parmetros, demasiado pocos 737 permisos 731 plug-ins de Netscape Navigator 555 tipos de datos no coincidentes 737 vnculos rotos en Contribute 215 sonido aadir a una pgina 552 establecer un vnculo con archivos de audio 552 incrustar 553 reproducir 580 SQL acerca de 1139 ASP.NET 784 definir columnas 1141 Elementos de base de datos, rbol 791 filtrar registros 1142, 1146 juego de registros, definir con SQL 789 limitar registros 1142 operadores 1140 ORDER BY 1140 palabras clave 1140 SELECT, declaracin 1139 unir tablas 1146 SQL Server, solucionar problemas de pginas dinmicas 735 Superior, alineacin 466 sustituir un marcador de posicin de imagen 465 SWF, archivos Flash como activos. Vase Activos
T
tabla, men de encabezado acerca de 262 Borrar todos los altos 278, 299 Borrar todos los anchos 278 igualar anchos 277, 306 mostrar 279, 289 Quitar todas las imgenes de espaciador 305 Seleccionar tabla 268 tablas acerca de 262 anchos de columna, ajustar 277, 278, 306 anchos y altos 278 anchos, mostrar 279 anidar 285
ndice alfabtico
1171
aplicar formato 271 cambiar tamao 274 capas, convertir 237 celdas, borrar ancho y alto 278 celdas, combinar 281 celdas, dividir 282 celdas, resaltando 266, 288 crear y aadir contenido 264 datos de tabla, importar 429 datos, exportar 265 diseos predefinidos para 272 editar 270 elementos, seleccionar 266 filas y columnas, ajustar 274 filas y columnas, aadir y eliminar 279 importar 265 modo de tablas expandidas 270 ordenar 285 propiedades 271 resaltado, preferencias 267 restringir 755 Vase tambin Columnas, Filas y Celdas tablas de diseo acerca de 288 anidados 296 aplicar formato 302 color de fondo 302 dibujar 293 espaciado de celdas 302 Igualar ancho de celdas, opcin 302 preferencias 307 Quitar anidacin, opcin 302 Quitar todos los espaciadores, opcin 302 tablas repetidas (plantillas) alternar colores 359 insertar 358 tabulaciones, convertir en espacios 649 Tachar (Color predeterminado), botn 395 tamao del monitor, cambiar tamao de pginas para ajustar 56 TextBox, controles 1021 texto abrir archivos 108 alineacin 433 aadir a un documento 428 anular sangra 434 aplicar formato 416, 428, 436 aplicar formato (con el inspector de propiedades) 422 buscar en documentos 457
cambiar color de 186, 441 cambiar combinaciones de fuentes 439 campos 913, 918 campos, establecer texto con comportamientos 587 colores predet. en pginas 395 convertir en dinmicos 807 datos de tabla, importar 429 editores Vase tambin Editores externos editores, archivos creados 108 espacio indivisible 444 importar desde otros documentos 429, 430 insertar 416, 428 pegar 428 preferencias de pegado 429 sangrar 434 texto en negrita, establecer 437 Texto Flash, cuadro de dilogo 542 texto Flash, objetos insertar y previsualizar 542 Texto superior, alineacin 466 texto, ajustar 604 Tipo de documento predeterminado (DTD) 660 tipo predeterminado de documento nuevo, configurar 106 tipogrficas, convenciones 39 tipos de archivo Archivos Flash 532 preferencias del editor externo 619 Tipos de archivo/editores, preferencias 538 tipos de codificacin 83 tipos de datos no coincidentes 737, 739 tld, archivos 616 Tono continuo, paleta de colores 395 transferencia de archivos, preferencias 133 transferencias de archivos, registro 161 transferir archivos 156 transferir archivos desde y hacia sitios de Contribute 207 transformaciones XSL editar 863 lado del cliente 843, 866 lado del servidor 839, 850 usar parmetros con 863 transparentes, pxeles en el fondo 393
U
UDDI directorios pblicos 874
1172
ndice alfabtico
lista de sitios, editar 883 underline 437 unidad local, acceder a archivos 119 UPDATE, palabra clave de SQL 1140 URL aplicar a seleccin 186 como activos. Vase Activos crear activos de URL 190 Vase tambin Rutas usemap, atributo 504
V
Validador preferencias 609 utilizar 659 Validador de etiquetas 659 Validar formulario, accin 597 validar formularios ColdFusion 953 HTML 927 variables de aplicacin 796 variables de sesin acerca de 774 datos, almacenar 777 datos, recuperar 780 definir 795 parmetros de formulario y parmetros de URL 777 VBScript, insertar cdigo en la vista Diseo 671 ventana de documento buscar texto 457 reproducir plug-ins de Navigator 554 seleccionar elementos 396 ventana Sitio, buscar texto 457 ver activos 181 archivos en un servidor 119 archivos en un sitio de Dreamweaver 118 archivos en unidad local o escritorio 119 cdigo 601 cdigo de la seccin head 674 elementos invisibles 397 plantillas en la vista Diseo 334 plantillas en vista Cdigo 335 regiones de plantilla en la vista Diseo 336 regiones de plantilla en vista Cdigo 337 Verificador de vnculos, cuadro de dilogo 509 versiones anteriores de archivos, recuperar 132 Vinculaciones, panel
aadir texto dinmico 807 borrar fuentes de datos 802 convertir atributos HTML en contenido dinmico 810 crear un contador de registros 835 Formato, columna 825 vinculaciones, panel formularios dinmicos 915, 923 vincular a documentos de Microsoft Word o Excel 432 anclajes 489 con anclaje con nombre mediante icono de sealizacin de archivos 491 documentos mediante el icono de sealizacin de archivos 485 documentos 482 a hoja de estilos CSS externa 452 navegar 475 Vincular a archivo existente, comando 142 Vincular a nuevo archivo, comando 142 vincular etiqueta href 452 Vincular hoja de estilos externa, cuadro de dilogo 452 vnculos abrir origen 496 actualizar 494 administrar 494 aadir 186 con anclajes 489 aplicar a seleccin 186 archivo de cach 494 a archivos de script 671 cambiar en todo el sitio 497 cambiar marcos con 328 comprobar 506 configurar rutas relativas 488 crear 482 crear vnculos nulos 492 eliminar 496 establecer destino 482 con hojas de estilos 451 mapa del sitio 496 ocultar 830 en plantillas 340 Relativa a la raz del sitio, opcin 483 Relativa al documento, opcin 483 reparar rotos 509 rotos 506 Vnculos activos, opcin de color (Prop. de la pgina) 395 vnculos de correo electrnico
ndice alfabtico
1173
cambiar 497 crear 491 vnculos de hipertexto 482 vnculos de navegacin por registros, configurar 827 vnculos de script cambiar 497 crear 492 vnculos externos 506 vnculos nulos cambiar 497 crear 492 vnculos rotos 506 Vista previa en el navegador, comando 409 vista previa en navegadores 409 vistas de sitio en el panel Archivos, cambiar 123 visualizacin, opciones fuentes 83 paneles flotantes 70 volver a la ltima versin guardada 390
XSLT (Transformaciones de lenguaje de hoja de estilos extensible) acerca de 838 crear regiones condicionales con 865 fragmentos 840 fragmentos, aplicar estilos 869 fragmentos, eliminar 862 fragmentos, insertar 860 objeto XSLT Repetir regin 846, 858, 860, 865 pgina, vincular a archivos XML 868 pginas 840, 843 pginas, convertir a 855 pginas, crear 853 uso con pginas dinmicas 841 y transformaciones en el lado del cliente 843, 866 y transformaciones en el lado del servidor 839, 850
Z
zonas interactivas aplicar comportamientos a 473 cambiar tamao 505 en mapas de imagen 504 seleccionar mltiples en un mapa de imagen 505 Zoom, herramienta 398
W
Web lbumes de fotos, crear 524 diseo, niveles de experiencia 24 servicios de alojamiento Web 711 servidor, configurar 680 web.xml, archivo 616 WebDAV, control de fuente 151 WHERE, palabra clave de SQL 1140
X
XHTML cdigo 624 convertir de HTML en XHTML 660 crear pginas 660 XML (Lenguaje de formato ampliable) acerca de 837 DTD, archivos 614 en plantillas 372 visualizar en pginas dinmicas 841 visualizar en pginas Web 837 y elementos repetidos 846 XSL (Lenguaje de hojas de estilo ampliable) acerca de 838 comentarios, insertar 866 Vase tambin XSLT
1174
ndice alfabtico