|
Dreamweaver MX 2004 supone un salto cualitativo en el campo del desarrollo web. Con las mejoras introducidas el software de Macromedia se convierte en una herramienta integral, que dará soporte al usuario tanto en la construcción de páginas web como en el área del diseño o la gestión y mantenimiento de sitios.
La biblia de Dreamweaver MX 2004 se convierte así en el manual de referencia imprescindible en el campo del desarrollo web: además de una recopilación de los temas básicos, se presta especial atención a las nuevas técnicas, trucos y estrategias que pueden ser de gran importancia para el lector.
Esta obra consigue así mismo mostrar no sólo qué puede hacer el programa, sino también el modo de utilizar sus capacidades para resolver problemas reales, su relación con otras tecnologías web como HTML o JavaScript, o cómo satisfacer la creciente demanda de interactividad y dinamismo en las páginas.
El CD-ROM adjunto contiene numerosos archivos con ejercicios prácticos y ejemplos que le mostrarán cómo utilizar las distintas funciones de Dreamweaver, así como diversas versiones de evaluación de productos Macromedia, entre ellos Dreamweaver MX 2004, que le permitirá complementar y mejorar la comprensión del libro.
ÍNDICE
Introducción
Para qué (y para quién) es este libro
Cómo está organizado este libro
Cómo utilizar este libro
Convenciones del libro
Qué extraer del libro
Parte I. Construcción de páginas Web con Dreamweaver
1. Novedades en Dreamweaver MX 2004
Las cosas que nunca verá
Y algo que sí verá
Mejoras generales de la interfaz
Categorías de la barra Insertar y grupos de objetos
Panel Archivos del sitio (Macintosh)
Barras de herramientas específicas de documento (Windows)
Inspector de etiquetas
Menú Ventana más racional
Mejoras de edición de documentos
Mejor edición de tablas
Validación de documento mejor integrada
Gestión de gráficos integrada
Mejoras CSS
Integración CSS
Soporte mejorado a CSS2
Mejoras en la escritura de código
Mejoras de administración de sitio
Mejoras de datos dinámicos
2. El espacio de trabajo Dreamweaver
Elegir un espacio de trabajo (Windows)
Comparación de los espacios de trabajo
Cambiar espacios de trabajo
La página de inicio
Jugar con paneles
Paneles y grupos de paneles
La barra Insertar y el Inspector de propiedades
Usar la ventana Documento
Acoplar y desacoplar (sólo Windows)
Ver documentos
Barra de estado
Barras de herramientas
Obtener ayuda
3. Crear y trabajar con documentos
Temas básicos de la creación de documentos
Cuadro de diálogo Nuevo documento
Tipos de documentos a crear
Papelería
Conformidad con XHTML
Preferencias de Nuevo documento
Trabajar inteligentemente con documentos en Dreamweaver
Comprobar la validez de la página
Validar el formato del documento
Determinar los ajustes de validación
Validar XML
Comprobar navegadores de destino específicos
Comprobación automática
Comprobación manual
Determinar qué navegadores comprobar
Hacer accesibles las páginas
Estándares de accesibilidad
Opciones de accesibilidad de Dreamweaver
Comprobar la accesibilidad
4. Trabajar con texto
Temas básicos del texto
Texto en el navegador
Texto en Dreamweaver
Extraer texto de otros programas
Pormenores de copiar y pegar
Obtener texto (y otras cosas) de Word y Excel
Datos tabulares
Crear la estructura del texto
Texto bien estructurado: hacer que el texto sea accesible
Usar Dreamweaver para crear texto bien estructurado
Corregir texto mal estructurado
Saltos de línea, espacios indivisibles y espacio en blanco
Saltos de línea: lo bueno y lo malo
Espacios indivisibles
Crear espacio en blanco con párrafos vacíos
Todo sobre las listas
Refinar la apariencia de las listas con tipos de lista
Viñetas más atractivas con CSS
Aprovechar caracteres especiales
Insertar caracteres especiales mientras trabajamos
Buscar y reemplazar para insertar caracteres especiales
Lorem Ipsum y otros fragmentos de latín
Ortografía: construir (y compartir) un diccionario personal
Modificar el diccionario personal
Compartir su diccionario personal
Ejercicio 4.1. Corregir problemas de estructura en Dreamweaver
5. Trabajar con imágenes
Temas básicos de las imágenes
Imágenes en el navegador
Imágenes en Dreamweaver
Trabajar inteligentemente con imágenes
Hacer que las imágenes sean accesibles
Hacer que las imágenes sean accesibles con Dreamweaver
Antes del hecho: establecer las opciones de accesibilidad
Después del hecho: Inspector de propiedades, Inspectorde etiquetas, comando Editar etiqueta
Edición de imágenes integrada
Recortar imágenes
Ajustar el brillo y el contraste
Ajustar el perfilado
Volver a muestrear imágenes
Imágenes como fondo
Fondos de imagen en mosaico al estilo antiguo
Imágenes de fondo con CSS
Efectos de fondo creativos
Imágenes y estructura de página
GIF de un solo píxel
Creación de GIF de un solo píxel
GIF de un solo píxel en HTML
Uso de GIF de un solo píxel en Dreamweaver
Tablas de imagen dividida
Colocación de imágenes con CSS-P
Imágenes lowsrc para economizar ancho de banda
Bloquear diseños con marcadores de posición de imagen
Insertar marcadores de posición de imagen
Trabajar con marcadores de posición de imagen
Integración de Dreamweaver y Fireworks
Insertar HTML de Fireworks
Iniciar y editar
Optimización al instante
Visitar el sitio de intercambio: extensiones de integración Fireworks
InstaGraphics Extensions para Dreamweaver MX 2004
Web Photo Album 2.1 para Dreamweaver MX (Macromedia)
Ejercicio 5.1. Reunir imágenes en una marquesina de título compleja
6. Vínculos y navegación
Temas básicos de los vínculos
Cómo funcionan los vínculos en el navegador
Rutas absolutas o relativas
Dianas
Vínculos en Dreamweaver
Asignar vínculos absolutos
Asignar vínculos relativos
Vínculos de correo electrónico
Métodos y herramientas de navegación
Anclajes con nombre
Cómo funcionan los anclajes con nombre
Crear anclajes con nombre
Vincular a anclajes con nombre
Mapas de imagen
Cómo funcionan los mapas de imagen
Crear un mapa de imagen
Trabajar con zonas interactivas
Ejercicio 6.1. Crear un mapa de imagen en Dreamweaver
Menús de salto
Código de menú de salto
Crear un menú de salto en Dreamweaver
Ir o no ir
Uso de menús de salto con marcos y ventanas múltiples
Modificar un menú de salto
Sustituciones
Crear una sustitución en Dreamweaver
Carga previa y sustituciones
Modificar imágenes de sustitución
Barras de navegación
Crear una barra de navegación
Modificar una barra de navegación
Ejercicio 6.2. Crear una barra de navegación con Dreamweaver
Ejercicio 6.3. Uso de una barra de navegación en varias páginas
Trabajar inteligentemente con vínculos
Hacer que los vínculos sean accesibles
Requerimientos especiales de los mapas de imagen
Vestir los vínculos con CSS
Imágenes vinculadas
Texto vinculado
Establecer parámetros URL
Añadir parámetros URL a vínculos en Dreamweaver
Usar JavaScript para procesar parámetros URL
Complementar los vínculos de correo electrónico con parámetros
Usar vínculos para JavaScript
Vínculos nulos y comportamientos
Introducir JavaScript en el atributo HREF
7. Utilizar el contenido Head
Temas básicos del contenido Head
Cómo funciona el contenido Head en el navegador
Cómo funciona el contenido Head en Dreamweaver
Ver y modificar contenido Head
Añadir contenido Head
Trabajar inteligentemente con etiquetas meta
Cómo almacenan las etiquetas meta la información
La etiqueta meta de codificación de caracteres
Etiquetas meta y el objeto Meta genérico
Palabras clave y descripciones meta
Maximizar la facilidad de búsqueda
Limitar la facilidad de búsqueda
Ejercicio 7.1. Hacer que un documento se pueda buscar
meta refresh
El objeto Meta Actualizar
Trucos para actualizar
Ejercicio 7.2. Crear una página de presentación que se actualiza
Trabajar con otro contenido Head
Etiquetas base y el objeto Base
Etiquetas base y URL absolutos
Etiquetas base y vínculos de destino
Uso de la etiqueta base en Dreamweaver
Ejercicio 7.3. Añadir un destino base a los vínculos de la página
Etiquetas link y el objeto Vínculo
Parte II. Diseñar con Dreamweaver
8. Construir tablas
Temas básicos de las tablas
Tablas en el navegador
Tablas en Dreamweaver
Trabajar inteligentemente con tablas
Controlar las dimensiones de la tabla
No utilice dimensiones a menos que sea indispensable
Utilizar filas y columnas de control cuando es necesario
Utilizar anchos flexibles
Hacer accesibles las tablas
Accesibilidad para tablas de datos
Accesibilidad para tablas de diseño
Hacer accesibles las tablas con Dreamweaver
CSS y tablas
Aplicar CSS a tablas
Propiedades CSS y formato de tabla
Ejercicio 8.1. Crear una tabla de datos con estilos CSS
Utilizar tablas para diseñar la página
¿Cuál es su estrategia de trabajo?
Ejercicio 8.2. Convertir un diseño en una página con tabla de formato
Ejercicio 8.3. Construir un diseño de anchura flexible utilizandouna estructura de tabla
Ejercicio 8.4. Añadir formato CSS al diseño Wildlife de anchura flexible
Tablas de diseño y Modo de diseño
Cómo moverse en el Modo de diseño
Manipular la estructura de tabla en el Modo de diseño
Utilizar los inspectores de propiedades del Modo de diseño
Tablas con la opción Autoampliar
La codificación en el Modo de diseño
Trabajar inteligentemente en el Modo de diseño
9. Trabajar con formularios
Temas básicos de formularios
Scripts de procesamiento de formulario
El HTML que subyace a los formularios
Cómo funcionan los formularios en Dreamweaver
Trabajar inteligentemente con formularios
Hacer que los formularios sean accesibles
Antes del hecho: establecer opciones de accesibilidad
Trabajar con tabindex y accesskey
Trabajar con rótulos
Ejercicio 9.1. Crear un formulario accesible
Dar formato a los formularios
Diseño de formulario con tablas
Formato de formulario con CSS
Utilizar imágenes como botones
Ejercicio 9.2. Embellecer un formulario con formato CSS
Los pros y los contras del procesamiento de formularios
10. Diseñar páginas basadas en marcos
Temas básicos de marcos
Marcos en el navegador
Marcos en Dreamweaver
Crear marcos
Trabajar con marcos
Vincular marcos
Trabajar inteligentemente con marcos
Hacer que los marcos sean accesibles
Hacer los marcos accesibles en Dreamweaver
Hacer que se puedan buscar los marcos
Trabajar con contenido noframes en Dreamweaver
Qué incluir en el contenido noframes
Navegación dentro de los marcos
Cambiar varios marcos a la vez
Navegación a páginas específicas dentro de conjuntos de marcos
Mantener páginas en marcos
Rápido y fácil: pie de navegación
Añadir algo de script: pie de información condicional
Scripts para trabar marcos
Salir de los marcos
Rotura de marcos
Páginas fácilmente imprimibles
Efectos gráficos creativos con marcos
Conjuntos de marcos buzón
Dividir gráficos de fondo entre marcos
Ejercicio 10.1. Maximizar la facilidad de uso y la accesibilidadde un sitio basado en marcos
El mundo de los marcos en línea
Marcos en línea en Dreamweaver
Crear marcos en línea
Trabajar con propiedades de marco en línea
Visite Exchange: extensiones iframe
11. Uso de Hojas de estilos en cascada
Temas básicos de CSS
Una pequeña lección histórica
Marcado de presentación y sus problemas
Ésta es una tarea para CSS
Los elementos básicos de CSS
Anatomía de un estilo
Estilos y hojas de estilos y dónde se guardan
Cascadas y herencia
CSS en Dreamweaver
Crear un nuevo estilo
Definir parámetros de estilo
Trabajar con estilos
Inspeccionar estilos
Ejercicio 11.1. Dar formato a una página con una hoja de estilos interna
Trabajar con hojas de estilos
Crear una hoja de estilos partiendo de cero
Ejercicio 11.2. Llevar estilos internos a una hoja de estilos externa
Trabajar inteligentemente con CSS
Especificar fuentes en HTML (y CSS)
HTML, fuentes y navegadores
Listas de fuentes en Dreamweaver
Especificar dimensiones en CSS
CSS y accesibilidad
Selectores contextuales
Crear múltiples estilos de vínculo para una página
Aplicar estilos rápidamente a celdas de tabla
Ejercicio 11.3. Uso de estilos contextuales para dar formatoa los vínculos y otro contenido de página
Trabajar con varias hojas de estilos a la vez
Usar juntas hojas de estilos externas e internas
Uso de múltiples hojas de estilos externas
Ejercicio 11.4. Uso de múltiples hojas de estilos en cascada
Uso de hojas de estilos vinculadas e importadas para crear un sitioadaptado a Netscape 4
12. Colocación CSS, capas Dreamweaver y diseño de página
Temas básicos de capas
CSS-P y capas en el navegador
Cómo funciona la colocación CSS
Aplicar colocación a elementos de página
Uso de div y span como elementos de página para la colocación
Cómo funcionan las capas en Dreamweaver
Dibujar e insertar capas
Trabajar con propiedades de capa
Elementos invisibles: marcadores de capas
Manipular capas con el panel Capas
Diseñar con capas en la vista Diseño
Seleccionar capas
Dar nombre a las capas
Insertar contenido en las capas
Redimensionar capas arrastrando
Mover capas
Alinear capas
Hacer coincidir los tamaños de las capas
Anidar capas
Ejercicio 12.1. Creación de una página con capas básica
Trabajar inteligentemente con capas
Las capas como objetos con estilos
Crear capas con CSS
Aplicación de un estilo con colocación a un elemento de página existente
Crear un elemento div para alojar el estilo
Trabajar con capas con estilos CSS
Ejercicio 12.2. Diseño de un conjunto de páginas Web utilizandocolocación CSS de una hoja de estilos externa
Soporte de navegador para las páginas
Degradación con dignidad
Ejercicio 12.3. Garantizar que un sitio basado en capas se degradacon dignidad
El problema de Netscape 4
Parte III. Interactividad, DHTML y multimedia
13. Interactividad con comportamientos
Temas básicos de comportamientos
Cómo funcionan los comportamientos: JavaScript y HTML
¿Qué es JavaScript?
Trabajar con eventos y acciones
Trabajar con comportamientos en Dreamweaver
Elegir dónde adjuntar el comportamiento
Adjuntar el comportamiento
Elegir manipuladores de evento
Inspeccionar y modificar comportamientos
Trabajar inteligentemente con comportamientos
Pormenores de la selección de imágenes vinculadas
Varios públicos de destino: el comportamiento Comprobar navegador
Pequeños fragmentos de codificación a mano: el comportamientoLlamar JavaScript
Abrir nuevas ventanas de navegador
Asuntos de tamaño de ventana
Colocación de la ventana
Cerrar la nueva ventana
Crear una ventana controladora
Ejercicio 13.1. Creación de una ventana controladora emergente
Intercambio de imágenes avanzado
Intercambiar imagen y sustituciones inconexas
Crear una sustitución inconexa
Realizar intercambios de imágenes múltiples
Ejercicio 13.2. Crear una sesión de diapositivas con Intercambiarimágenes
Menús en cascada con el comportamiento Mostrar menú emergente
Ejercicio 13.3. Construcción de un menú emergente
Mejorar la eficiencia: poner externamente el código de comportamientos
Apropiarse de llamadas a función
14. Controlar capas con JavaScript
Temas básicos de HTML dinámico: capas y scripts en el navegador
Acerca del DOM
Incompatibilidad DOM
La estrategia de creación de DHTML de Dreamweaver
Controlar la visibilidad de capa
Lo básico de mostrar y ocultar capas
Establecer la visibilidad o cambiar la visibilidad
Mostrar, ocultar y predeterminada
Elegir no mostrar u ocultar una capa determinada
Trabajar con capas invisibles
Ejercicio 14.1. Crear un menú emergente o en cascada
Trabajar inteligentemente con el comportamiento Mostrar-Ocultar capas
Descarga y elementos invisibles
Activar acciones JavaScript dentro de capas invisibles
Objetos de medios en capas invisibles
Controlar el contenido de capa
Lo básico de Definir texto de capa
Trabajar inteligentemente con Definir texto de capa
Definir algo más que texto
Ejercicio 14.2. Definir texto de capa para visualizar informaciónsensible al contexto
Usar estilos de capa CSS para dar formato al texto
¿Definir texto de capa o Mostrar-Ocultar capas?
Arrastrar y colocar capas
Lo básico de arrastrar y colocar
Opciones de arrastre
Restringir el área de arrastre
Asignar un destino (y ajustarse a él)
Especificar un selector de arrastre
Cambiar el índice z
Ejercicio 14.3. Crear una interfaz de carrito de la compra con capasa arrastrar
Activar acciones con arrastrar y colocar
Llamar JavaScripts desde el comportamiento Arrastrar capa
Uso de Arrastrar capa para activar otro comportamiento
Ejercicio 14.4. Responder a la colocación de elementos en el carritode la compra
Controlar otras propiedades de capa
Uso del comportamiento Cambiar propiedad
Cambiar propiedad y compatibilidad de navegador
Controlar capas Netscape
Duplicar para varios navegadores
15. Plug-ins, ActiveX y Java
Ampliar el navegador con plug-ins y ActiveX
Cómo funcionan los medios plug-in en el navegador
Tipos MIME, plug-ins y aplicaciones ayudantes
Plug-ins Netscape u objetos ActiveX
Cómo funcionan los medios plug-in en Dreamweaver
Acceder a parámetros específicos de plug-in
Reproducir contenido incrustado
Trabajar con plug-ins específicos
Shockwave
QuickTime
Ejercicio 15.1 Añadir una película QuickTime a un documentoy establecer sus parámetros
Windows Media
Ejercicio 15.2. Inserción de objetos Windows Media
Pasar parámetros a un objeto Shockwave
Añadir sonido a páginas Web
Colocación de medios con destino o sin destino
Trabajar con medios sin destino
Ejercicio 15.3. Crear una página con muestras de sonido
Crear scripts para medios plug-in
Cómo funcionan los scripts en medios y por qué no siempre funcionan
Controlar plug-ins específicos
Detección de plug-in
Detección por script con el comportamiento Comprobar plug-in
Limitaciones de la detección con scripts
Ampliar el navegador con Java
Cómo funciona Java en el navegador
La naturaleza de Java
Temas Java
Java y medios
Trabajar con subprogramas
Trabajar con subprogramas en Dreamweaver
Insertar un subprograma
Ejercicio 15.4. Insertar un subprograma Java
16. Construir páginas Web con Flash
Cómo funciona Flash en el navegador
Cómo funciona Flash en Dreamweaver
Trabajar inteligentemente con parámetros Flash
Dimensiones
Escala
Alinear escala (salign)
Calidad
Modo ventana (wmode)
Ejercicio 16.1. Insertar una marquesina Flash
Ejercicio 16.2. Apilar contenido Flash y HTML con capas(sólo IE/Windows)
Trabajar inteligentemente con la integración Dreamweaver-Flash
Iniciar Flash y editar
Ocultar los FLA
Actualizar vínculos en archivos SWF
Trabajar con páginas Flash a pantalla completa
Tarea de Dreamweaver: crear el marco de trabajo HTML
Tarea de Flash: crear interactividad y vínculos
Ejercicio 16.3. Crear una página de presentación Flash
Ejercicio 16.4. Crear una página de presentación a pantalla completa
Flash y JavaScript
Usar JavaScript para controlar Flash
Scripts dentro de Dreamweaver: El comportamiento ControlarShockwave o Flash
Usar Flash para enviar instrucciones JavaScript
Texto Flash y botones Flash
Cómo crea Dreamweaver archivos SWF
Crear e insertar objetos Flash
Estilo de botón (sólo el objeto Botón Flash)
Texto y estilo tipográfico (objetos botón y texto)
Información de vínculo y destino (objetos botón y texto)
Color de fondo (objetos botón y texto)
Ver la vista previa del trabajo (objetos botón y texto)
Trabajar con objetos Flash
Editar
Deshacer
Redimensionar
Duplicar
Ejercicio 16.5. Rellenar una página con botones y texto Flash
Usar objetos Flash para activar comandos JavaScript
Elementos Flash
Parte IV. Administración de sitios Web con Dreamweaver
17. Administración de sitio local
Cómo manipula Dreamweaver los sitios locales
Definir un sitio local
Administrar sitios
Trabajar en el panel Archivos
Expandir y contraer el panel Archivos
Vista Archivos del sitio
Trabajar con las columnas de la vista de archivos
Vista Mapa del sitio
Designar una página principal
Ver un sitio con el mapa del sitio
Personalizar el diseño del mapa del sitio
Crear una imagen partiendo del mapa del sitio
Administración de archivos y vínculos dentro de un sitio
Administrar archivos y carpetas
Abrir archivos
Crear archivos y carpetas
Cambiar el nombre y reordenar archivos y carpetas
Gestionar vínculos
Crear vínculos con Señalar archivo
Crear vínculos con comandos de menú y el mapa de sitio
Cambiar vínculos
Comprobar y reparar vínculos
Comprobar vínculos
Arreglar vínculos
Ejercicio 17.1. Administrar archivos y vínculos en un sitio Dreamweaver
Administración de activos con el panel Activos
Insertar activos
Insertar elementos de medios desde el panel Activos
Insertar URL desde el panel Activos
Insertar activos color
Activos favoritos
Ver y trabajar con los activos favoritos
Agrupar activos favoritos
Personalizar el panel Activos
Utilizar activos en todo el sitio
Editar los activos
Crear nuevos activos
Ejercicio 17.2. Administrar activos para un sitio Dreamweaver
Trabajar sin un sitio
18. Publicación y mantenimiento de sitio
Cómo trabaja Dreamweaver con sitios remotos
Definir un sitio remoto en Dreamweaver
No especificar acceso
FTP
Local/red
&nb
|
