Está en la página 1de 120

SUBSECRETARÍA DE EDUCACIÓN MEDIA SUPERIOR

DIRECCIÓN GENERAL DE EDUCACIÓN TECNOLÓGICA INDUSTRIAL


CENTRO NACIONAL DE ACTUALIZACIÓN DOCENTE

DIPLOMADO: “DISEÑO DE PÁGINAS WEB”

MÓDULOIII:

Instructora:
Lic. Norma Fernández Osorio
Agosto del 2007
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

CONTENIDO

OBJETIVO GENERAL ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 6 

CAPÍTULO 1.­ INTRODUCCIÓN A DREAMWEAVER ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 7 

1.1 Presentación ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 7 

1.2 ¿Qué es Dreamweaver? ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 7 

1.3 Requerimientos de Dreamweaver ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 7 

1.4 Iniciar Dreamweaver ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 8 

CAPÍTULO 2.­ ENTORNO DE TRABAJO ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 10 

2.1 Presentación ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 10 

2.2 Pantalla inicial ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 11 

2.3 Barras de herramientas ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 11 

2.4 Los paneles e inspectores ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 13 

CAPÍTULO 3.­ CONFIGURACIÓN DE UN SITIO ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 16 

3.1 Presentación ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 16 

3.2 Definición del sitio ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 17 

3.3 Panel del Sitio ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 21 

CAPÍTULO 4.­ TEXTO ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 26 

4.1 Presentación ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 26 

4.2 Añadir Texto ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 26 

4.3 Formato de texto ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 28 

4.4 Insertar fechas ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 31 

4.5 Insertar caracteres especiales ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 32 

4.6 Insertar líneas horizontales ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 34 
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
2
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

4.7 Revisar ortografía ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 35 

4.8 Estilos CSS ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 37 

CAPÍTULO 5. HIPERVÍNCULOS ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 42 

5.1 Presentación ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 42 

5.2 Tipos de enlaces ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 42 

5.3 Crear enlaces ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 44 

5.4 Destino del enlace ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 45 

5.5 Formato del enlace ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 45 

5.6 Enlace a correo electrónico ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 46 

CAPÍTULO 6. IMÁGENES ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 48 

6.1 Presentación. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 48 

6.2 Tipos de archivos gráficos. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 48 

6.3 Insertar una imagen ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 48 

6.4 Propiedades de las imágenes ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 51 

6.5 Cambiar el tamaño de una imagen ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 53 

6.6 Mapas de imagen ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 54 

6.7 Imagen de sustitución ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 55 

6.8 Insertar Botones de Flash ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 56 

6.9 Insertar texto de Flash ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 58 

CAPÍTULO 7. TABLAS. ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 62 

7.1 Presentación ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 62 

7.2 Insertar una tabla ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 63 

7.3 Rellenar las celdas ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 65 

7.4 Seleccionar elementos de una tabla ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 65 

7.5 Formato de tabla ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 68 

7.6 Cambiar tamaño de tabla ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 69 
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
3
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

7.7 Añadir y eliminar filas y columnas. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 69 

7.8 Anidar, dividir y combinar celdas ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 72 

7.9 Modos de tabla. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 73 

CAPÍTULO 8. MARCOS ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 75 

8.1 Presentación ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 75 

8.2 Crear marcos ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 76 

8.3 Seleccionar marcos ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 78 

8.4 Guardar marcos ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 79 

8.5 Configurar marcos ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 80 

8.6 Contenido del marco ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 81 

CAPÍTULO 9. FORMULARIOS ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 83 

9.1 Presentación ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 83 

9.2 Añadir un formulario ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 84 

9.3 Propiedades de un formulario ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 85 

9.4 Añadir campos a un formulario. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 86 

CAPÍTULO 10. PLANTILLAS ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 100 

10.1 Presentación ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 100 

10.2 Crear plantillas ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 100 

10.3 Establecer regiones editables en una plantilla ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 102 

10.4 Basar páginas en una plantilla ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 103 

CAPÍTULO 11. CAPAS ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 106 

11.1 Presentación ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 106 

11.2 Insertar una capa ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 106 

11.3 Formato de una capa ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 107 

CAPÍTULO 12. MULTIMEDIA ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 109 
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
4
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

12.1 Presentación ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 109 

12.2 Películas de Flash ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 109 

12.3 Sonido ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 110 

12.4 Videos ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 112 

GLOSARIO ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 114 

CONCLUSIONES ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 117 

BIBLIOGRAFÍA ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 118 

ÍNDICE DE ILUSTRACIONES ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 118 

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
5
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

OBJETIVO GENERAL

Utilizar las herramientas de


Dreamweaver para diseñar
sitios web con páginas que
incorporen imágenes,
enlaces, tablas, formularios.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
6
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Capítulo 1.- Introducción a Dreamweaver

1.1 Presentación

Dreamweaver 8 forma parte de la suite de herramientas para la creación de


contenido Web integradas en Studio MX de Macromedia (Dreamweaver MX, Flsh
MX, Fireworks MX y Freehand MX). Es una herramienta que cubre todos los
aspectos del diseño web: ofrece soporte para la programación visual de HTML y
se complementa incorporando un sistema de funciones JavaScript predefinidas
(DHTML, rollovers, etc.) y el desarrollo de aplicaciones web profesionales.

Esta aplicación cubre todos los aspectos del diseño web y el desarrollo de
aplicaciones web profesional, tanto para usuarios que están comenzando a
diseñar como para los expertos.

1.2 ¿Qué es Dreamweaver?

Dreamweaver 8 es un software fácil de usar que permite crear páginas web


profesionales.

Las funciones de edición visual de Dreamweaver 8 permiten agregar


rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar
manualmente el código HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar


comportamientos JavaScript, etc., de una forma muy sencilla y visual.

Además incluye un software de cliente FTP completo, permitiendo entre otras


cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en
el servidor sin salir del programa.

1.3 Requerimientos de Dreamweaver

Para poder instalar y ejecutar Dreamweaver, es preciso disponer de unos


requisitos mínimos en su sistema.

Para Microsoft Windows:

• Procesador Pentium II a 300 Mhz o superior.


• Windows 98, Windows 2000, Windows NT (con service Pack 3 o posterior),
Windows ME o Windows XP.
• Netscape Navigator o Micrsoft Internet Explorer v.4 o superior.
• 96 Mb de memoria RAM (se recomienda disponer de 128 Mb).
• 275 Mb de espacio disponible en disco.
• Una unidad de CD-ROM.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
7
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

1.4 Iniciar Dreamweaver

Para iniciar una sesión de Dreamweaver, deberá iniciar la aplicación de la


siguiente manera:

En la barra de tareas de un clic en el botón de Inicio. Elija la carpeta Todos los


Programas, y después la opción Macromedia. De clic en el programa Macromedia
Dreamweaver 8, y aparecerán las siguientes ventanas:

Ilustración 1. Ruta de acceso a Dreamweaver 8.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
8
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 2. Ventana principal de Dreamweaver.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
9
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Capítulo 2.- Entorno de trabajo

2.1 Presentación

En Windows, Dreamweaver proporciona un diseño integrado en una única


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

Ilustración 3. Entorno de trabajo.

Nota: El espacio de trabajo de Windows también dispone de la opción


Codificador, que acopla los grupos de paneles en la parte izquierda y
muestra la ventana de documento en la vista Código de forma
predeterminada.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
10
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

2.2 Pantalla inicial

Al arrancar Dreamweaver aparece una pantalla inicial como la siguiente, vamos a


ver sus componentes fundamentales. Así conoceremos los nombres de los
diferentes elementos y será más fácil entender el resto del curso. La pantalla que
se muestra a continuación (y en general todas las de este curso) puede no
coincidir exactamente con la que verá en su ordenador, ya que cada usuario
puede decidir qué elementos quiere que se vean en cada momento, como
veremos más adelante.

Ilustración 4. Pantalla inicial.

2.3 Barras de herramientas

La barra de título. Contiene el nombre del programa (Marcromedia Dreamweaver


8) y en seguida el nombre del documento que aparecerá en el explorador y entre
paréntesis, su ubicación y el nombre del archivo en formato HTML. En el extremo
de la derecha están los botones para minimizar, maximizar/restaurar y cerrar.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
11
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 5. Barra de título.

La barra de menús. Contiene las operaciones de Dreamweaver, agrupadas en


menús desplegables. Al hacer clic en Insertar, por ejemplo, veremos las
operaciones relacionadas con los diferentes elementos que se pueden insertar
en Dreamweaver.

Muchas de las operaciones se pueden hacer a partir de estos menús, pero para
algunas es preferible o indispensable hacerlas desde los paneles.

Ilustración 6. Barra de menús.

La barra de herramientas estándar. Contiene iconos para ejecutar de forma


inmediata algunas de las operaciones más habituales, como Abrir , Guardar
, etc.

Ilustración 7. Barra de herramientas estándar.

La barra de herramientas de documento. Contiene iconos para ejecutar de


forma inmediata algunas otras operaciones habituales que no incluye la barra de
herramientas estándar. Estas operaciones son las de cambio de vista del
documento, vista previa, etc.

Ilustración 8. Barra de herramientas de documento.

La barra de estado. Nos indica en cada momento en qué etiqueta HTML nos
encontramos (en la imagen al encontrarnos en un documento en blanco
estamos directamente sobre la etiqueta <body>).

También nos es posible alternar entre los modos de selección, mano (para
arrastrar la página), o zoom. En cualquier momento puede seleccionar el zoom
preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido
(por defecto siempre viene al 100%).

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
12
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 9. Barra de estado.

2.4 Los paneles e inspectores

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas,


que se conocen como paneles o inspectores. La diferencia entre panel e
inspector es que, en general, la apariencia y opciones de un inspector cambian
dependiendo del objeto seleccionado.

A través de la opción Ventana, de la barra de menús, es posible mostrar u


ocultar cada uno de los paneles o inspectores.

El inspector de Propiedades. Muestra y permite modificar las propiedades del


elemento seleccionado que son usadas de forma más frecuente. Por ejemplo,
cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la
alineación, si está en negrita o cursiva, etc.

Pulsando sobre el botón , se despliega para mostrar más opciones. Este


botón se encuentra en la esquina inferior-derecha.

Seguramente será la herramienta de Dreamweaver que más vaya a utilizar.

Ilustración 10. Inspector de Propiedades.

La barra de herramientas Insertar o panel de objetos. Permite insertar


elementos en un documento sin la necesidad de recurrir al menú Insertar. Los
elementos están clasificados según su categoría: tablas, texto, objetos de
formulario, etc.

Ilustración 11. Barra de herramientas insertar.


Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
13
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Es posible configurar este panel para que en los botones se muestren los iconos
de los objetos (como ocurre en la imagen anterior), para que se muestren los
nombres de los objetos, o para que se muestren ambos a la vez.

Vista de un documento. Se puede cambiar la vista del documento a través de la


barra de herramientas de documento.

Ilustración 12. Barra de herramientas de un documento.

La vista Diseño. Permite trabajar con el editor visual. Es la vista


predeterminada de Dreamweaver y la que se suele utilizar habitualmente.

Ilustración 13. Vista diseño.

La vista Código. Se utiliza para poder trabajar en un entorno totalmente de


programación, de código fuente. No permite tener directamente una referencia
visual de cómo va quedando el documento según se va modificando el código.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
14
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 14. Vista código.

La vista Código y Diseño. Permite dividir la ventana en dos zonas. La zona


superior muestra el código fuente, y la inferior el editor visual. Cuando se realiza
un cambio en alguna de las zonas, este cambio se aplica directamente sobre la
otra.

Ilustración 15. Vista código y diseño.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
15
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Capítulo 3.- Configuración de un Sitio

3.1 Presentación

En Dreamweaver, un sitio es un conjunto de archivos y carpetas, relacionados


entre sí, con un diseño similar o un objetivo común, que corresponden a un sitio
web de un servidor en Internet.

Antes de crear un sitio web, hay que planearlo y definir con claridad los puntos
siguientes:

1. Objetivo del sitio. Lo que se pretende ofrecer y lo que se espera conseguir


(informar, vender, entretener, etc.) para diseñar el sitio web adaptado a
determinadas necesidades.

2. Audiencia destino. Quién desea que visite el sitio y sus condicionantes


(navegadores, velocidad de acceso, recursos multimedia de sus equipos,
plataforma, sistemas operativos, etc.).

3. Compatibilidad de navegadores. Debe diseñar el sitio para ofrecer la


máxima compatibilidad con los navegadores más utilizados, Microsoft
Explorer y Netscape Navigator. Cuanto más sofisticado se diseñe el sitio, en
cuanto a disposición, animación, contenido multimedia e interacción, será
necesario crear versiones de sitios compatibles con distintos navegadores, o
al menos las páginas más importantes, como la página principal del sitio.

4. Estructura del sitio. Para evitar terminar con una carpeta llena de archivos o
con archivos relacionados repartidos por numerosas carpetas que dificultan
su administración, seguir estos consejos:

• Crear una carpeta para cada grupo de páginas relacionadas que serán la
carpeta raíz (noticias, comunicados de prensa, organización, ofertas,
productos, etc.), y si es necesario utilizar subcarpetas para facilitar el
mantenimiento y la navegación por el sitio.

Ilustración 16. Ejemplo de organización de carpetas.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
16
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Nota: Organizar en carpetas las páginas y archivos que forman una


unidad de contenido es básico para facilitar el mantenimiento de un sitio
web.

• Decidir donde incluir los elementos multimedia, como imágenes y archivos


de sonido, con el fin de facilitar su localización a la hora de insertarlas en
una página. Estos elementos pueden almacenarse en una carpeta
llamada Activos, que contenga otras, como Imágenes, Animaciones y
sonidos (dejar una carpeta sólo para imágenes).

• Utilizar la misma estructura para el sitio local y el remoto para asegurar


que Dreamweaver duplique con precisión la estructura local en el entorno
remoto.

5. Diseño del sitio. Se planea el diseño y la disposición antes de comenzar a


trabajar con Dreamweaver, aunque sea un sencillo boceto en papel. Poner
especial atención al Esquema de navegación e imagínar los desplazamientos
de un visitante por las áreas y secciones de su sitio:

• Crear indicadores que informen dónde está y permitan volver a la página


de inicio (home).

• Incorporar elementos de búsqueda, mapas que faciliten la localización de


la información que se está buscando.

• Mantener el mismo sistema de navegación en todo el sitio.

6. Planeación y recopilación de los activos. Los archivos son elementos


como imágenes, elementos multimedia (Flash, Shockwave, Fireworks, etc.),
que se necesitarán para integrarlos a las páginas del sitio. Si no se preparan
antes, se tendrá que detener continuamente para encontrar una imagen o
para crear un botón. Si muchas de las páginas van a utilizar la misma
disposición, será conveniente utilizar plantillas. Si se sabe que determinada
imagen u otro contenido va a aparecer en varias páginas del sitio, se
diseñará el contenido con antelación y se convertirá en un elemento de
biblioteca.

3.2 Definición del sitio

Una vez creadas las carpetas que formarán un sitio local, ya es posible definir el
sitio en Dreamweaver.

Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios....

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
17
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 17. Menú Sitio.

En el caso de haber seleccionado la opción Administrar sitios, aparece una


ventana que contiene la lista de sitios locales definidos con anterioridad.

Por supuesto, pueden existir varios sitios locales en un mismo ordenador.

Tanto si se elige la opción Nuevo, como si se elige la opción Editar, se


mostrará la misma ventana en la que definirá las características del sitio.

Ilustración 18. Administrar Sitios.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
18
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 19. Definición del sitio.

Las características del sitio se agrupan en diferentes categorías que aparecen


en la parte izquierda.

Para visualizar las características de una categoría basta con seleccionarla


de la lista haciendo clic en ella.

Vea los datos que hay que editar para la categoría Datos locales.

Debe definirse el Nombre del sitio y la Carpeta raíz local, que es en la que se
encuentra el sitio dentro del disco duro local.

Después, si se desea, a través de la categoría Mapa de diseño del sitio puede


definirse la página principal del sitio, de la que colgarán el resto de documentos
HTML dentro del sitio, si en la carpeta raíz del sitio existe una página con el
nombre index.htm, Dreamweaver la seleccionará por defecto.

Estas tres características son las imprescindibles para definir un sitio local.

Las demás opciones en este momento no son tan importantes, ya que se está
definiendo el sitio local, y no es necesario establecer los datos del servidor en el
que estará el sitio remoto.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
19
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Después de rellenar los datos pulsar el botón Aceptar y se abrirá el sitio.

Si se prefiere utilizar un asistente para crear el sitio web sólo se tendrá que
seleccionar la pestaña Básicas, en vez de la pestaña Avanzadas.

Ilustración 20. Asistente para crear sitios web.

Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción
Administrar sitios. Seleccionar el sitio de la lista de sitios y pulsar sobre el
botón Listo.

También se podrá utilizar el panel Archivos, buscar y seleccionar el sitio a abrir


en el menú desplegable de la pestaña Archivos.

Ilustración 21. Panel de Archivos.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
20
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

3.3 Panel del Sitio

Es posible visualizar un sitio en el panel Archivos o en una ventana.

El panel Archivos se puede abrir a través del menú Ventana, opción Archivos.
También pulsando F8.

Para cambiar de una vista a otra hay que pulsar sobre el botón que aparece
en la parte superior del panel y de la ventana.

Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor


remoto de prueba o el mapa del sitio.

En esta imagen se visualizan el mapa del sitio y el sitio local.

Ilustración 22. Mapa del sitio y sitio local.

En este caso los documentos prueba1.htm y prueba2.htm cuelgan del


documento indice.htm, ya que éste ha sido definido como página principal del
sitio y contiene vínculos hacia los otros dos.

Si los archivos se mueven de una carpeta a otra, o se cambian de nombre,


desde fuera de Dreamweaver, las páginas no se mostrarán correctamente: no
aparecerán imágenes, no funcionarán enlaces, etc.

En cambio, si estas modificaciones se hacen desde Dreamweaver, a través del


sitio, es posible actualizar automáticamente las páginas para que si hacen
referencia a un objeto que ha cambiado, después no se produzcan problemas al
visualizarlas.
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
21
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Al modificar algún objeto que es referenciado por algún otro documento, se


muestra una ventana similar a ésta, que indica los documentos que hacen
referencia a dicho objeto, y que pueden ser actualizados para que no se
produzcan los problemas antes mencionados.

Simplemente hay que pulsar sobre el botón Actualizar.

Ilustración 23. Actualizar archivos.

Desde el panel de sitio se controla y administra todo el sitio, las carpetas locales,
las remotas y las de servidor de prueba asociadas.

Desde ahí se podrá realizar las operaciones estándar de mantenimiento de


archivos como por ejemplo, crear documentos HTML nuevos, ver, abrir y
trasladar archivos, crear carpetas, eliminar elementos, transferir archivos entre
sitios locales, sitios remotos y servidores de prueba, etc.

Ilustración 24. Opción para dar mantenimiento al sitio.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
22
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

El panel Sitio puede estar contraído o ampliado. Para cambiar de un

estado a otro, haga clic en el botón Ampliar/Contraer

Ilustración 25. Panel del sitio contraído.

Ilustración 26. Panel del sito ampliado.

Gestión de archivos en el panel Sitio

Desde el panel Sitio, puede ver los sitios como listas de archivos, abrir archivos,
cambiar el nombre de los archivos, añadir nuevas carpetas o archivos a un sitio
o actualizar la vista de un sitio después de realizar cambios.

Abrir un archivo

Para abrir un archivo desde el panel Sitio, realizar una de estas acciones:

• Doble clic en el ícono del archivo.


• Clic con el botón derecho en el ícono del archivo y elija el comando Abrir
del menú contextual.
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
23
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 27. Menú contextual.

Para añadir un nuevo archivo o carpeta a un sitio, realizar estos pasos:

• Seleccionar un archivo o carpeta en el panel Sitio. Dreamweaver creará el


archivo o carpeta dentro de la carpeta seleccionada, o en la misma
carpeta del archivo seleccionado.

• Para crear una nueva carpeta, clic en el comando Nueva Carpeta del
menú contextual.

• Para crear un nuevo archivo, clic en el comando nuevo Archivo del menú
contextual.

• Introducir un nombre para el nuevo archivo o carpeta en el cuadro de texto


que se muestra en la siguiente figura.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
24
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 28. Creación de un nuevo archivo.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
25
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Capítulo 4.- Texto

4.1 Presentación

A lo largo de este tema se aprenderá a cambiar las propiedades del texto y a


crear estilos CSS, que permiten asignar al texto estilos creados por nosotros
mismos, no predefinidos.

4.2 Añadir Texto

El texto es el elemento base de la mayoría de las páginas de un sitio web. En este


capítulo aprenderá a insertar texto y a establecer la fuente, el tamaño, el color y
los atributos de alineación.

Las opciones de dar formato al texto resultarán familiares ya que son equivalentes
a las de los programas estándar de tratamiento de texto. Se deberá aplicar con
atención ya que afectarán a la estructura de la página y determinarán su
legibilidad.

Se puede utilizar dos maneras de añadir texto a un documento de Dreamweaver:

• Escribiendo directamente en una ventana del documento de Dreamweaver,


o

• Cortándolo, pegándolo o importándolo de textos existentes en otros


documentos.

Copiar texto de otra aplicación. Cuando se copia texto de otra aplicación,


Dreamweaver no mantiene el formato que tenía aplicado aunque si conserva los
saltos de línea:

• Seleccione, en la aplicación origen, el texto que se desea copiar en el


documento Dreamweaver.
• Clic en el comando copiar del menú edición de dicha aplicación.
• Cambie al documento de Dreamweaver y, en la vista Diseño, coloque el
punto donde desea insertar el texto.
• Elija el comando Pegar del menú edición.

Importar texto de Microsoft Word. Si el texto que se desea importar se tiene


en un archivo de Microsoft Word, es conveniente importarlo, ya que
Dreamweaver permitirá limpiar las etiquetas de formato sobrantes que Word
inserta.

Para importar un archivo de Microsoft Word, se realizarán los siguientes pasos:

• Seleccionar el comando Importar del menú archivo.


Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
26
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 29. Opción para importar texto de Word.

• A continuación, clic en el comando Documentos de Word. Se abre el cuadro


de diálogo: Seleccionar archivo de Word a importar.

Ilustración 30. Importar documento de Word.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
27
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

• Localizar y seleccionar el documento que se desee abrir y dar clic en el


botón Abrir. Dreamweaver abre el documento.

4.3 Formato de texto

Las características del texto seleccionado pueden ser definidas a través del
menú Texto, y a través del inspector de propiedades. Ver las posibilidades que
se ofrecen a través del inspector de propiedades, aunque sean menos que las
que se ofrecen a través del menú Texto.

Ilustración 31. Panel de propiedades.

Formato

Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser
encabezado, párrafo o preformateado. Los encabezados se utilizan para
establecer títulos dentro de un documento. El formato preformateado sirve para
que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se
introducen varios espacios solo se considera uno, pero al establecer el formato
preformateado se respetará que hayan varios espacios en lugar de solo uno.

Fuente

Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en


lugar de una sola, ya que es posible que al establecer una única fuente el usuario
no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que
en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por
ejemplo, si selecciona Arial, Helvética, Sans-serif, el texto se verá con la fuente
Arial, pero si ésta no existe se verá en Helvética.

Tamaño

Permite cambiar el tamaño del texto. El tamaño se puede indicar en diversas


unidades, en píxeles, centímetros, etc...
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
28
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Color

Permite seleccionar el color de la fuente, ignorando el color que se haya definido


en las propiedades de la página. Si no se ha establecido ningún color en las
propiedades de la página ni aquí, el color del texto por defecto será el negro.

Estilo

Estos botones permiten establecer si el texto aparecerá en negrita o en cursiva.


A través del menú Texto también se puede, entre otras cosas, subrayar el texto.
Esta opción no aparece en el panel de Propiedades ya que por lo regular no
suele utilizarse, debido a que los vínculos aparecen subrayados y el subrayar
texto normal podría hacer que el usuario pensara que se trata de un vínculo.

Alinear

A través de estos botones es posible establecer la alineación del texto de una de


estas cuatro formas distintas: izquierda, centrada, derecha y justificada.

Listas

Estos botones permiten crear listas con viñetas o listas numeradas

Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o
con viñetas.

Para que un texto que ya ha sido introducido en el documento se convierta en


una lista, simplemente hay que seleccionarlo y pulsar sobre la opción de lista
correspondiente, ya sea a través del inspector de propiedades, o a través del
menú Texto.

La lista con viñetas (desordenada) se selecciona a través del botón , mientras


que la lista numerada (ordenada) se selecciona a través del botón .

Ejemplo de lista numerada (ordenada):

1. Preparar la mochila

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
29
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

1. Sacar los libros de ese día


2. Introducir los libros del día siguiente
2. Ponerme el pijama
3. Lavarme los dientes
4. Poner el despertador

Ejemplo de lista con viñetas (desordenada):

• Perro
• Gato
• Aves
o Canario
o Loro
• Hamster
Para establecer listas anidadas dentro de otras como en los ejemplos anteriores,
es necesario añadir una sangría en los elementos de la lista que se desee que
pasen a formar parte de la lista anidada.

A través del menú Texto, opción Lista, es posible acceder a las propiedades de
la lista seleccionada. Se debe seleccionar el texto de la lista previamente o tener
el cursor en algún lugar de la lista para que se active este submenú.

En la ventana Propiedades de lista se puede especificar el tipo de lista (con


números o con viñetas), el tipo de números o viñetas que se utilizarán (en la
propiedad Estilo:), y en el caso de las listas ordenadas, el número por el que
comenzará el recuento.

Ilustración 32. Propiedades de lista.

Sangrías

Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una
especie de margen que se establece a ambos lados del texto. En este caso los
botones se refieren a sangría a la izquierda del texto.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
30
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

4.4 Insertar fechas

Se puede insertar la fecha actual en un documento, con el formato que se prefiera


(con o sin la hora) y se actualiza cada vez que se guarde el archivo. Para ello se
proporciona el objeto Fecha.

Para insertar la fecha actual en un documento, realizar las siguientes


instrucciones:

• Situar el punto de inserción en el lugar del documento donde se desee


insertar la fecha.
• Seleccionar el comando Fecha del menú Insertar.

Ilustración 33. Menú Insertar, comando fecha.

Aparecerá el cuadro de diálogo Insertar fecha.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
31
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 34. Cuadro de diálogo insertar fecha.

• Seleccionar el formato de día, de fecha y de hora que se desea.


• Para que la fecha insertada se actualice cada vez que guarde el
documento, marcar la casilla Actualizar automáticamente al guardar.
• Hacer clic en el botón Aceptar para insertar la fecha.

4.5 Insertar caracteres especiales

A veces se necesitará introducir caracteres especiales en las páginas. Debido al


modo editor de Diseño de Dreamweaver esta tarea es muy sencilla utilizando el
teclado, podrá incluir caracteres como á, ê, ì, ö, ç.. de forma rápida por si quiere
poner dos espacios en blanco y los introduce por teclado, Dreamweaver no los
creará, deberá introducirlo dos veces utilizando la opción que se verá a
continuación.

Ilustración 35. Barra insertar.

Se insertarán varios caracteres especiales (con forma de entidades HTML) desde


la categoría Texto, el botón Caracteres de la barra Insertar.

• Hacer clic en el menú Insertar y seleccionar la opción HTML

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
32
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

• Colocar el puntero del ratón sobre Caracteres especiales y observar una


lista rápida de los caracteres más utilizados que no pueden ser
introducidos mediante teclado.

• Para introducir alguno de estos caracteres en sus textos sólo selecciónelo


en la lista y aparecerá en la vista de Diseño.

Ilustración 36. Caracteres especiales.

• Si el carácter que se busca no se encontrase allí, hacer clic en Otro... y


se abrirá una ventana desde donde se puede seleccionar caracteres entre
una lista bastante más amplia:

Ilustración 37. Otros caracteres especiales.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
33
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

4.6 Insertar líneas horizontales

Las líneas horizontales ayudan a organizar visualmente la información.

Al insertar líneas horizontales en un documento ayuda a organizar la información,


separando visualmente el texto y los objetos de una página con una o más líneas.

Para insertar una línea horizontal en un documento, realice las siguientes


acciones:

• Situar el punto de inserción en el lugar del documento donde desea insertar


una línea horizontal

• Dar clic en comando Regla horizontal de la opción HTML del menú


Insertar.

Ilustración 38. Regla horizontal.

Para modificar las propiedades de una línea horizontal:

• Seleccionar la línea horizontal.


• Dar clic en el comando Propiedades del menú Ventana para abrir el
Inspector de propiedades y modificar las propiedades que se necesiten.
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
34
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 39. Propiedades de la línea.

• An y Al. Indican el ancho y el alto de la línea en pixeles o como porcentaje


del tamaño de la página.

• Alinear. Especifica la alineación de la regla (Predet, Izquierda, Centro o


Derecha), si el ancho de la línea es inferior al ancho de la ventana del
navegador.

• Sombreado. Indica si la línea debe trazarse con sombreado o con un color.

4.7 Revisar ortografía

Como en todas las aplicaciones, Dreamweaver proporciona una utilidad para


revisar la Ortografía de los documentos. El comando Ortografía no revisa las
etiquetas HTML ni los valores de atributo.

De forma predeterminada el corrector ortográfico utiliza el diccionario de inglés de


Estaos Unidos. Para cambiar la configuración al diccionario Español u otro
necesario:

• Dar clic en el comando Preferencias del menú Edición y, a continuación la


categoría General.

• Seleccionar, en el menú emergente, Diccionario ortográfico, el diccionario


que desee utilizar.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
35
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 40. Ventana de preferencias.

Para comprobar y corregir la ortografía, realizar los siguientes pasos:

• De clic en el comando Ortografía del menú Texto o pulse la combinación de


teclas <Mayús+F7>

Ilustración 41. Menú para revisar la ortografía de un documento.


Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
36
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Cuando Dreamweaver encuentra una palabra que no reconoce, aparece el cuadro


de diálogo Ortografía.

Ilustración 42. Cuadro de diálogo Ortografía.

• Seleccionar la opción adecuada en cada una de las propuestas de error


ortográfico:

o Añadir a personal. Incorpora la palabra no reconocida al diccionario


personal.
o Omitir. Ignora esta aparición de la palabra no reconocida.
o Omitir todas. Ignora todas las apariciones dela palabra no
reconocida.
o Cambiar. Sustituye esta aparición de la palabra no reconocida por el
texto que escriba en el cuadro Cambiar por o por la palabra
seleccionada de la lista Sugerencias.
o Cambiar todas. Reemplaza todas las apariciones de la palabra no
reconocida.

4.8 Estilos CSS

En el menú Texto, opción Estilo, aparecen una serie de estilos predefinidos que
pueden aplicarse al texto seleccionado.

Los estilos CSS están en hojas de estilo de actualización automática


(también denominadas Hojas de Estilo en Cascada) se utilizan para combinar
una serie de atributos del texto, como pueden ser el color o el tamaño, de modo
que no sea necesario asignar estos atributos uno a uno cada vez que se desee
repetir la asignación de esos mismos valores a otras partes del texto. También
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
37
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

algunas de sus opciones pueden utilizarse para definir atributos de imágenes y


otras características que no permitían definir los estilos HTML en versiones
anteriores, como el color de fondo para el texto, etc.

Incluso permiten aplicar un estilo sobre todas las etiquetas HTML de un mismo
tipo, como puede ser la etiqueta A HREF, que corresponde a los hiperenlaces.
De este modo, todos los hiperenlaces de la página adquirirían la apariencia
definida en ese estilo.

Un estilo CSS no es más que un conjunto de reglas de formato que controlan el


aspecto del contenido de una página Web. Los estilos CSS aportan gran
flexibilidad y control al aspecto exacto que se busca en una página, desde la
posición precisa de elementos hasta el diseño de fuentes y estilos concretos.

Una de las grandes ventajas de los estilos CSS reside en que cuentan con una
capacidad simple de actualización; cuando actualiza un estilo CSS, el formato de
todos los documentos que usan ese estilo se actualiza automáticamente.

Con Dreamweaver 8, las características que se aplicará a un texto crearán


automáticamente estilos CSS que se incrustarán en el documento actual y se
aplicarán únicamente sobre él.

Para crear un Estilo CSS personalizado:

1. En el documento, se selecciona el texto al que se desea aplicar


características concretas.
2. En el inspector de propiedades se modifican todas las propiedades de
formato de texto, se establecen los atributos de la fuente y del párrafo que
se desee.

Automáticamente Dreamweaver creará un nuevo estilo con el nombre Estilo1 o


Estilo2 o Estilo3,... según los nombres de los estilos ya creados.

Aparecerá el nombre Estilo1 en el cuadro Estilo del panel Propiedades.

Ilustración 43. Panel de propiedades.

También se puede cambiar el nombre del estilo, es mejor que el estilo tenga
un nombre que indique a qué tipo de texto se va a aplicar. Para ello se
desplegará la lista de estilos y se seleccionará la opción Cambiar nombre...
Aparecerá un cuadro de diálogo para que se introduzca el nuevo nombre como
la imagen inferior.
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
38
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 44. Cambiar nombre a un estilo.

Ilustración 45. Nombre del estilo.

En seguida se coloca el nuevo nombre sin espacios en blanco. En este caso:


miestilo.

Al aceptar, aparecerá un panel con el nombre Resultados. Cerrar esta ventana.

De esta manera se puede crear un estilo para añadirlo a un documento.

Cada nuevo estilo que se crea, se añade a la lista de estilos, y los podemos
acceder también de una manera rápida a través del menú Texto, opción Estilos
CSS.

En el Panel CSS se puede verificar que se ha añadido automáticamente el


nuevo estilo.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
39
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 46. Panel Estilos CSS.


Aplicar un Estilo

Para aplicar un Estilo CSS personalizado:

En el documento, seleccionar el texto al que se desea aplicar el estilo CSS, o


sitúa el punto de inserción del mouse en un párrafo para aplicar el estilo a todo el
párrafo. Si selecciona un rango de texto dentro de un párrafo, el Estilo CSS sólo
afectará al rango seleccionado.

En el inspector de Propiedades se selecciona el estilo creado por nosotros de


la lista que aparece al desplegar el cuadro Estilo.

Hojas de Estilos

Se pueden exportar estilos que se encuentren incrustados en la página HTML


a una nueva hoja de estilos haciendo clic derecho sobre el estilo en el Panel
CSS y seleccionando Exportar.

Se abrirá el cuadro de diálogo Exportar estilos como archivo CSS que


permitirán guardar todos los estilos incrustados en un nuevo archivo CSS.

Esta opción es muy útil si se tienen los estilos incrustados en una página y se
quieren utilizar en otras también. Simplemente se pasan los estilos incrustados a
una hoja de estilos y luego se adjuntan en cualquier página que se quiera
utilizar.

Para asignar una hoja de estilos a una página despliega el cuadro Estilo que se
encuentra en el Inspector de Propiedades y selecciona Adjuntar hoja de
estilos...

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
40
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 47. Localiza o escribe la ruta de la hoja de estilo CSS a vincular.

En Arch./URL debe especificarse la ruta y el nombre de la hoja de estilos.

Elegir si se quiere Vincular o importar la hoja de estilos.

Se elige Vincular la hoja no se incrusta en la página sino que se añade a la


página una referencia a la hoja, esto permite que cualquier cambio realizado en
la hoja quede reflejado de manera automática en todas las páginas que utilizan
la hoja. Esta es la opción más aconsejable si se utiliza el estilo en más de una
página, de esta forma sólo será necesario vincular cada uno de los archivos que
se quieran ver afectados a la hoja de estilos que se haya creado.

Si se elige Importar la hoja se incrusta en la página.

La opción Media permitirá seleccionar el tipo de medio al que se asociará la hoja


de estilos, por ejemplo, screen (pantalla), print (impresora) o tv (webtv). Estas
opciones permitirán crear hojas de estilos para soportes diferentes. Se puede
crear una hoja para screen, que será la que se muestre cuando se navegue por
Internet, y otra para print que será la que se utilice cuando se imprima el
contenido del archivo.

Después de Aceptar, la hoja con sus estilos aparecerá en el panel CSS.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
41
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Capítulo 5. Hipervínculos

5.1 Presentación

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser


pulsado lleva de una página o archivo a otra página o archivo.

Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.

5.2 Tipos de enlaces

Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.

• Referencia absoluta:

Conduce al sitio en el que se encuentra el documento utilizando la ruta


completa del archivo.

La ubicación es en Internet, por ejemplo, http://www.yahoo.com.mx, o


http://www.misitio.com/pagina/pagina1.html.

• Referencia relativa al documento:

Conduce a un documento situado dentro del mismo sitio que el


documento actual, pero partiendo del directorio en el que se encuentra
dicho documento.

Si se quiere referir a carpetas que están por encima del nivel donde nos
encontramos se deberá utilizar ../

Por ejemplo, si se está en la siguiente dirección


http://www.misitio.com/pagina/informacion/index.html. En esta página
se quiere mostrar una imagen que se encuentra en la carpeta
http://www.misitio.com/pagina/secciones/seccion1.html, ¿cómo se
puede hacer? Fácil. Se deberá llamar haciendo referencia al nivel superior
(http://www.misito.com/pagina/) para poder ir luego a la carpeta
secciones.

El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.

De esta forma, mientras nos encontramos en la carpeta informacion, se


sube un nivel y luego se mueve dentro de la carpeta secciones para
mostrar el archivo seccion1.html.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
42
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

• Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el


documento actual.

En este método los enlaces se crean indicando la ruta a partir de la raíz


del sitio.

En el ejemplo anterior si se hubiera definido como sitio la carpeta


http://www.misitio.com/, un enlace en cualquier página del sitio a
http://www.misitio.com/pagina/secciones/seccion1.html se crearía como
/pagina/secciones/seccion1.html.

Como puede verse ahora el vínculo a un archivo en todas las páginas es


igual porque se define dependiendo del sitio raíz y no de la ubicación
donde se encuentra.

• Puntos de fijación:

Conduce a un punto dentro de un documento, ya sea dentro del actual o


de otro diferente. Para ello el vínculo debe ser
nombre_de_documento.extension#nombre_de_punto.

El punto se define dentro de un documento a través del menú Insertar,


opción Anclaje con nombre.

Podríamos referenciar de este modo a un anclaje llamado parte2 de la


siguiente forma: ../secciones/seccion1.html#parte2

Estos tipos de enlace se han visto son válidos tanto para referenciar páginas
(para crear hiperenlaces) o incluso imágenes u otro tipo de objetos.

Deberá tener siempre en cuenta que los nombres de las rutas se


correspondan perfectamente a los nombres de los archivos y carpetas en el
servidor (local o remoto).

Por ello, es muy recomendable que se utilice siempre minúsculas para evitar
fallos en los enlaces.

También se deberá evitar utilizar caracteres especiales como acentos o


espacios, así no tendrán problemas a la hora de referenciar los objetos.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
43
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

5.3 Crear enlaces

La forma más sencilla de crear un enlace es a través del inspector de


propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir
de enlace, y en seguida establecer el Vínculo en el inspector.

Por ejemplo, aquí hay un enlace a www.elpais.es, que es de referencia


absoluta, por eso contiene HTTP://

Es posible crear también vínculos vacíos, que pueden ser útiles cuando se
utilizan comportamientos, etc. Para ello es necesario escribir en Vínculo
únicamente una almohadilla #.

Otra forma de crear un enlace es a través del menú Insertar, opción


Hipervínculo.

Ilustración 48. Hipervínculo.

Crear vínculos de esta forma es muy sencillo, sólo se rellenarán los campos que
se explica a continuación y el enlace se colocará en el lugar en el que estaba
situado el cursor.

Texto: Es el texto que mostrará el enlace.

Vínculo: Es la página a la que irá redirigido el enlace, si se trata de un enlace


externo se deberá escribirla empezando siempre por HTTP://. Clic sobre el icono
de carpeta para buscar los archivos que existan dentro del sitio. Por defecto
dramweaver te creará un enlace relativo al documento.

Destino: La página donde se abrirá la página.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
44
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Título: Se trata de la ayuda contextual del vínculo, es equivalente al atributo ALT


de las imágenes.

Tecla de acceso: Atributo que facilita la accesibilidad a las páginas, habilita el


acceso al enlace mediante la pulsación de la tecla Alt más la tecla de acceso
indicada.

Índice de tabulador: Como habrás podido observar puedes saltar a través de


los enlaces pulsando la tecla Tabulador. En este campo podrás establecer un
índice indicando la prioridad del enlace y así configurar el modo en el que
actuará el Tabulador es sus diferentes saltos.

5.4 Destino del enlace

El destino del enlace determina en qué ventana va a ser abierta la página


vinculada, puede variar dependiendo de los marcos de que disponga el
documento actual.

Puede especificarse en el inspector de propiedades a través de Dest, o en la


ventana que aparece a través del menú Insertar, opción Hipervínculo.

• blank: Abre el documento vinculado en una ventana nueva del


navegador.

• parent: Abre el documento vinculado en la ventana del marco que


contiene el vínculo o en el conjunto de marcos padre.

• self: Es la opción predeterminada. Abre el documento vinculado en el


mismo marco o ventana que el vínculo.

• _top: Abre el documento vinculado en la ventana completa del


navegador.

No se preocupe si no le queda del todo claro para qué sirven cada una de estas
opciones de destino, ya que se volverán a ver en el tema de Marcos.

5.5 Formato del enlace

En general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al


mismo tiempo, puede adquirir tres colores diferentes que pueden especificarse a
través de las propiedades de la página. Estos tres colores diferentes son los que
se asignan como color de vínculo, de vínculo activo, y de vínculo visitado.

Aquí tiene un vínculo de ejemplo:

www.yahoo.com.mx
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
45
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Cuando el vínculo está definido sobre una imagen, en el borde aparecen una
serie de puntitos al pulsar sobre ella. Cuando el vínculo está definido sobre una
zona de una imagen (un mapa), aparece el contorno de esa zona.

Aquí están dos vínculos similares de ejemplo:

Ilustración 49. Ejemplo de imagen con vínculo.


Como se puede ver, la segunda imagen que hace de vínculo contiene un
recuadro alrededor. Esto ocurre debido a que el campo Borde del inspector de
propiedades de la imagen vale uno (1), mientras que para la primera imagen
vale cero (0).

El campo Borde sirve para ponerle un borde a la imagen, independientemente


de si ésta va a contener un vínculo o no.

Si se pone a cero (0), no aparece ningún borde, ya que esto indica que el
tamaño de las líneas que forman el recuadro es cero (0). Puede hacerse un
recuadro más gueso incrementando el valor del campo Borde.

Ilustración 50. Propiedades de imagen.

Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de


forma al situarse encima del vínculo. Suele adquirir la apariencia de una mano
señalando.

5.6 Enlace a correo electrónico

Es posible especificar vínculos a direcciones de correo electrónico. Esto resulta


útil cuando se desea que los visitantes de la web puedan contactar con nosotros.

La sintaxis del vínculo en este caso es mailto:direccióndecorreo.


Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
46
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Puede definirse el vínculo a través de Vínculo, del inspector de propiedades,


seleccionando previamente el texto o la imagen deseados.

También es posible a través del menú Insertar, opción Vínculo de correo


electrónico.

En este caso no es posible asignar el vínculo a una imagen, solo permite introducir
el texto que contendrá el vínculo de correo.

Ilustración 51. Vínculo para correo electrónico.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
47
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Capítulo 6. Imágenes

6.1 Presentación.

En el diseño web los usos más frecuentes de las imágenes son la creación de
interfaces gráficas (botones de navegación), añadir atractivo visual (fotografías) o
incorporar elementos de diseño interactivo (imágenes de sustitución o mapa de
imagen).

Para facilitar el trabajo con imágenes, mientras se trabaja en Dreamweaver, se


selecciona el editor de imágenes habitual e iniciar automáticamente para editar las
imágenes.

6.2 Tipos de archivos gráficos.

Aunque existen muchos formatos de archivo gráfico, para el diseño de páginas


web se utilizan generalmente tres formatos: GIF, JPEG y PNG. GIF y JPEG son
los formatos de archivo con mayor compatibilidad y que pueden verse con la
mayoría de los navegadores.

Los archivos GIF (Graphic Interchange Format), utilizan un máximo de 256 colores
y son ideales para imágenes con tonos no continuos o imágenes con grandes
áreas de color homogéneo: barras de navegación, botones, íconos, logotipos, etc.

El formato de archivo JPEG (Joint Photographic Experts Group), puede contener


millones de colores, lo que hace ideal para imágenes fotográficas o de tonos
continuos. Si la calidad de un archivo JPEG es alta, lo será también su tamaño y
su tiempo de descarga, por lo que es necesario lograr un equilibrio entre la calidad
de la imagen y el tamaño del archivo JPEG.

El formato de archivo PNG (Portable Network Group), es compatible con imágenes


con color indexado, escala de grises y color vedadero, además de admitir
transparencias. El formato PNG conserva toda la información original de capas,
vectores, colores, efectos y permite editar todos los elementos en cualquier
momento. Es el formato de archivo nativo de Macromedia Fireworks.

6.3 Insertar una imagen

Cuando se inserta una imagen en un documento de Dreamweaver, se genera


automáticamente una referencia al archivo de imagen en el código HTML. Para
garantizar que la referencia es correcta, el archivo de imagen deberá estar en el
sitio actual. Si no lo está, dreamweaver preguntará si se desea copiar el archivo al
sitio.

Para insertar una imagen, se realizan las siguientes acciones:

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
48
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Colocar el punto de inserción en el área del documento donde se desea que


aparezca la imagen y se utiliza uno de los siguientes procedimientos:

• Clic en el ícono de la barra Insertar, en la categoría Común. O


arrástrelo a la ventana de documento.

• Arrastrar una imagen desde el panel Activos hasta la posición deseada de


la ventana de documento.

Ilustración 52. Panel Activos.

• Arrastrar una imagen desde el panel Sitio hasta la posición deseada de la


ventana de documento

Ilustración 53. Panel Sitio.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
49
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Seleccionar el comando Imagen del menú Insertar

• En el cuadro de diálogo Seleccionar origen de imagen, marcar una de las


siguientes opciones:

Ilustración 54. Cuadro de diálogo Seleccionar origen de imagen.

o Sistema de archivos para elegir un archivo gráfico.


o Fuentes de datos para elegir una fuente de imagen dinámica.

Dreamweaver genera automáticamente una referencia al archivo de imagen en el


código HTML, tal como se muestra a continuación.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
50
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 55. Ejemplo de código HTML al insertar una imagen.

6.4 Propiedades de las imágenes

A través del Inspector de propiedades se configuran las propiedades de una


imagen

Ilustración 56. Inspector de propiedades de una imagen.

Se pueden configurar las siguientes opciones para una imagen:

• Nombre. Escribe, en el campo de texto situado bajo la imagen en


miniatura, el nombre que la identificará al utilizar un comportamiento o un
lenguaje scripts.}

• An y Al. Indican el ancho y el alto de la imagen en pixeles.

• Origen. Especifica el archivo de origen de la imagen. Si desea modificar la


imagen haga clic en el ícono para localizar el nuevo archivo de origen o
escriba la ruta correspondiente.

• Vínculo. Indica un hipervínculo para la imagen.

• Alinear. Cuadro de lista con las opciones de alineación de una imagen con
el texto, con otra imagen, con un plug-in o con otros elementos de la misma

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
51
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

línea. También utilizar los botones de alineamiento (izquierda, derecha y


centro) para establecer el alineamiento horizontal de una imagen.

Ilustración 57. Alineación.

• Predeterminado. Valor predeterminado de alineación con la línea de base


que puede variar en función del navegador del visitante del sitio.

• Línea de base e inferior. Alinean la línea de base (del texto u otro


elemento

• Superior. Alinea la parte superior de una imagen con la parte superior del
elemento más alto (imagen o texto) de la línea actual.

• Medio. Alinea la parte central de la imagen con la línea de base de la línea


actual.

o Texto superior. Alinea la parte superior de la imagen con la parte


superior del carácter más alto de la línea de texto.
o Medio absoluta. Alinea la parte central de la imagen con la parte central
del texto de la línea actual.
o Inferior absoluta. Alinea la parte inferior de la imagen con la parte
inferior de la línea de texto (incluidos los trazos descendentes, como en
el caso de la letra p).
o Izquierda. Sitúa 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 línea.
o Derecha. Sitúa 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 línea.

• Alt (alternativo). Escribe el texto alternativo que aparecerá en lugar de la


imagen con los navegadores que sólo admiten texto o en aquellos que
están configurados para descargar las imágenes manualmente. En algunos
navegadores, este texto también aparece al situar el puntero sobre la
imagen.

• Espacio V y Espacio H. Añaden espacio, en pixeles, en la parte superior e


inferior de una imagen (V) o a la izquierda y la derecha de una imagen (H).

• Origen base (Origen base). Hace referencia a una versión (generalmente


de 2 bits) de la imagen principal. Se carga antes que la imagen principal y
anticipa a los visitantes lo que van a ver.
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
52
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

• Borde. Establece el ancho en pixeles del borde de la imagen. La


configuración predeterminada es sin borde.

• Editar. Inicia el editor de imágenes seleccionando en las preferencias de


editores externos y abre en él la imagen seleccionada.

• Restab. tamaño (Restablecer tamaño). Restaura los valores de AN y AL


para restituir el tamaño original de la imagen.

• Mapa, Zonas interactivas y Destino. Son opciones de imágenes que se


estudiaran posteriormente.

6.5 Cambiar el tamaño de una imagen

Se puede cambiar el tamaño de la imagen manualmente en la vista Diseño de la


ventana de documento de Dreamweaver o a través de los campos An (Ancho) y
Alt (Alto) del Inspector de propiedades. Los elementos de mapas de bits, como las
imágenes GIF, JPEG y PNG, pueden distorsionarse al aumentar o reducir su
tamaño.

Dentro de Dreamweaver puede modificarse el tamaño de las imágenes. Dicho


cambio de tamaño no se aplica directamente sobre el archivo de imagen, sino
que lo que varía es la visualización de la imagen dentro de la página.

Es muy probable que la imagen resultante no sea de buena calidad, en


comparación de cómo podría quedar modificándola desde un editor externo,
como Fireworks.

Por ejemplo, ver lo que ocurre si se inserta una imagen que representa el icono
de Dreamweaver y se modifica su tamaño de varias formas diferentes:

Imagen original Imagen con tamaño modificado

Puede apreciarse claramente que los resultados no son muy satisfactorios, pero
en ocasiones puede resultar útil modificar el tamaño de algunas imágenes
aunque esto implique perder calidad.

Existen dos formas de modificar el tamaño.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
53
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero
alguno de los recuadros negros que aparecen alrededor de la imagen.

La otra es a través de inspector de propiedades, cambiando los campos An


(anchura) o Al (altura). Estos campos aparecerán en el inspector cuando esté
seleccionada alguna imagen.

Si estos campos no contienen el tamaño original de la imagen, el valor


aparecerá resaltado en negrita y aparecerá a la derecha una flecha circular que

permite volver al tamaño original haciendo clic sobre ella.

Pueden crearse vínculos y comportamientos sobre partes de una imagen, sin la


necesidad de que sea sobre toda ella. A esto se le conoce como mapa de
imagen.

6.6 Mapas de imagen

Los mapas de imagen son partes de una imagen que pueden ser utilizadas para
asignarle algún tipo de comportamiento.

Para crear un mapa de imagen es necesario seleccionar previamente la imagen


en la que se desea crear el mapa, y abrir el inspector de propiedades de dicha
imagen.

Ilustración 58. Inspector de propiedades.

Estando seleccionada la imagen, ya es posible crear un mapa a través de los


botones del inspector de propiedades que tienen el siguiente aspecto:

. Si no aparecen despliegue el panel Propiedades para verlo


completo.

Los tres últimos botones son los que se utilizan para crear los mapas. Dichos
mapas pueden tener forma rectangular, circular, o libre, dependiendo del botón
pulsado.
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
54
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Al pulsar alguno de estos tres botones, cambia la apariencia del puntero al


situarlo sobre la imagen. Entonces ya es posible dibujar el mapa sobre la
imagen, pulsando sobre los lugares donde se desea que comience y finalice el
mapa, así como sobre el resto de lugares (en orden) que se desea que recorra el
mapa en el caso de forma libre.

Ilustración 59. Ejemplo de mapa de imagen.

Al estar seleccionado un mapa el inspector de propiedades cambia. Permite


asignar un vínculo y un texto alternativo a ese mapa como puedes ver a
continuación:

Ilustración 60. Propiedades de mapa de imagen.

El primero de los botones, el de la flecha, debe pulsarse al finalizar la creación de


un mapa, para que el puntero recupere su forma original al situarse sobre una
imagen. De este modo, es posible mover los puntos del mapa, en el caso de que
no hayan sido creados en los sitios deseados, para ajustarlos mejor a la imagen.

6.7 Imagen de sustitución

Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre
ella. Este tipo de imagen suele utilizarse en los menús o en los botones para
desplazarnos a través de distintas páginas.

Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen,
a la opción Imagen de sustitución. En la nueva ventana hay que especificar la
imagen original y la de sustitución.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
55
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 61. Insertar imagen de sustitución.

Es preferible que la opción Carga previa de imagen de sustitución esté activa.


Si se activa, la imagen de sustitución se carga cuando se carga la página, de
este modo se evitan las demoras debidas a la descarga de la imagen cuando
llega el momento de que aparezca.

El Texto alternativo es el texto que aparece al situar el puntero sobre una


imagen, o el que aparecerá en lugar de la imagen en el caso de que por algún
motivo ésta no pueda ser mostrada en el navegador.

El texto alternativo puede asignarse a todas las imágenes, no sólo a los


rollovers. Puede hacerse a través del campo Alt del inspector de propiedades
de la imagen seleccionada.

6.8 Insertar Botones de Flash

Existen otra serie de imágenes especiales, similares a los rollovers, que suelen
utilizarse para crear menús, como pueden ser los botones Flash.

Para insertar un botón Flash hay que dirigirse al menú Insertar, Media, a la
opción Botón Flash, aparecerá el siguiente cuadro de diálogo:

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
56
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 62. Insertar botón de Flash.

A través de Estilo: puede seleccionarse uno de los distintos formatos de botón


que se ofrecen.

En esta misma ventana hay que especificar también el Texto que mostrará el
botón (Texto del botón:), así como el nombre con el que será guardado
(Guardar como:) y el vínculo asociado (Vinculo: y Destino:).

Es preferible guardar los botones Flash en el mismo directorio que los


documentos HTML, en lugar de la carpeta destinada a almacenar imágenes, ya
que de no ser así es posible que al intentar asignar un vínculo dentro del propio
sitio, Dreamweaver no permita guardar el botón con ese vínculo en una
ubicación diferente de la de dicho documento.

Recordar que los botones deben guardarse con la extensión SWF.

A través del inspector de propiedades del botón Flash es posible editar de nuevo
sus atributos:

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
57
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 63. Panel de propiedades del botón de Flash.

Puede volver a abrirse el cuadro de diálogo anterior pulsando sobre el botón


Editar, y a través del botón Reproducir es posible probar el funcionamiento del
botón Flash desde Dreamweaver, sin la necesidad de tener que abrir la página
con algún navegador.

Después de haber probado el funcionamiento del botón Flash, debe pulsarse de


nuevo sobre el botón Reproducir (que habrá cambiado por el botón Detener)
.

6.9 Insertar texto de Flash

El texto Flash es similar a un rollover, pero en lugar de intercambiar imágenes


intercambia el color del texto.

Para insertar texto Flash hay que dirigirse al menú Insertar, Media, a la opción
Texto Flash.

En la nueva ventana, además del texto, el vínculo y el nombre con el que será
guardado el texto, hay que especificar el color original y el de sustitución.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
58
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 64. Insertar texto de Flash.

El inspector de propiedades del texto Flash es igual que el de un botón Flash.

Una barra de navegación es un conjunto de imágenes que se utilizan como


opciones de menú para navegar dentro de una web. Una página web solo puede
contener una única barra de navegación.

Para insertar una barra de navegación hay que dirigirse al menú Insertar,
Objetos de imagen, a la opción Barra de navegación.

En la nueva ventana pueden especificarse cuatro imágenes diferentes para cada


uno de los botones, el vínculo para cada uno de ellos, etc.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
59
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 65. Insertar barra de navegación.

A través de los botones superiores de la ventana es posible crear y eliminar


botones de la barra de navegación, así como reordenarlos. Con se crea un
botón nuevo, con se elimina el botón seleccionado, y con se puede
modificar la posición del botón seleccionado.

En Imagen Arriba se pone la imagen que se quiere mostrar inicialmente


(cuando todavía no se ha hecho clic).

En Sobre imagen, se pone la imagen que se quiere mostrar, cuando el usuario


mueva el puntero sobre el botón y éste estaba mostrando la imagen asignada en
Imagen Arriba.

En Imagen abajo, se pone la imagen que se quiere mostrar después de que el


usuario haya hecho clic en la imagen.

En Sobre mientras imagen abajo, se pone la imagen que se quiere mostrar,


cuando el usuario mueva el puntero sobre el botón y éste estaba
mostrando la imagen asignada en Imagen Abajo.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
60
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

De esta forma, si se asignan imágenes distintas se puede saber cuál es el último


botón que ha sido pulsado (el que tiene Imagen Abajo).

Aquí se tiene un ejemplo de barra de navegación. Para su creación se han


utilizado las mismas imágenes para todos los botones, pero como se puede ver,
en el botón del medio aparece inicialmente una imagen diferente de la de los
otros dos. Esto se debe a que la opción Mostrar "Imagen abajo" inicialmente
estaba activa para este botón. Se sitúa el puntero sobre los distintos botones, y
se pulsa sobre alguno, para ver qué es lo que ocurre.

El que existan cuatro imágenes diferentes sirve para identificar cual de los
vínculos está activo, cosa que con un simple rollover no puede hacerse.

A través de la opción Insertar es posible especificar si los botones de la barra de


navegación van a aparecer de forma horizontal o vertical dentro de la página.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
61
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Capítulo 7. Tablas.

7.1 Presentación

Las tablas son uno de los elementos más utilizados al desarrollar una página web,
ya que permiten realizar un mejor ordenamiento del contenido de nuestro sitio.

Una tabla permite colocar los datos de forma sencilla e intuitiva, es decir,
organizados en filas y columnas. Estas filas y columnas crean recuadros
denominados celdas. Cada celda de una tabla es un contenedor de contenidos:
imágenes, texto, vínculos, formularios, es decir, cualquier elemento que pueda
encontrarse en una página web.

Ilustración 66. Ejemplo de tabla.

Una vez insertada una tabla en una página se pueden modificar muchas de sus
propiedades utilizando el Inspector de propiedades: el ancho de las columnas,
añadir más filas y columnas o borrarlas, moverlas, añadir los bordes de las celdas,
añadir sombreados, modificar el tamaño, etcétera.

Podrá, entre otras cosas, insertar tablas, combinar celdas, insertar filas o
columnas y cambiar el tamaño del borde.
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
62
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero
gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al
lado de un bloque de texto, y otra serie de cosas que sin las tablas sería imposible
realizar.

Hoy en día, la mayoría de las páginas web se basan en tablas, ya que resultan de
gran utilidad al mejorar notablemente las opciones de diseño.

Las tablas están formadas por un conjunto de celdas, distribuidas en filas y


columnas.

7.2 Insertar una tabla

Para insertar una tabla se selecciona el menú Insertar, la opción Tabla.

Ilustración 67. Menú para insertar una tabla.

En la nueva ventana habrá que especificar el número de Filas y Columnas que


tendrá la tabla, así como el Ancho.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
63
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 68. Ventana para indicar las características de la tabla.

• El Ancho puede ser definido como Pixeles o como Porcentaje. La


diferencia de uno y otro es que el ancho en Pixeles es siempre el mismo,
independientemente del tamaño de la ventana del navegador en la que se
visualice la página, en cambio, el ancho en Porcentaje indica el porcentaje
que va a ocupar la tabla dentro de la página y se ajustará al tamaño de la
ventana del navegador, esto permite que los usuarios que tengan pantallas
grandes, aprovechen todo el ancho de pantalla.

• Grosor del borde indica el grosor del borde de la tabla en pixeles, por
defecto se le asigna 1.

• Relleno de celda indica la distancia entre el contenido de las celdas y los


bordes de éstas.

• Espacio entre celdas indica la distancia entre las celdas de la tabla.

También se puede establecer un encabezado para la tabla. Es recomendable


utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla.
Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de
los mismos a mantener un seguimiento de la información de la tabla.
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
64
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Si se quieres incluir un título, se indica en Texto: el título aparecerá fuera de la


tabla.

En Alinear texto: indica dónde quiere alinear el título con respecto a la tabla.

7.3 Rellenar las celdas

Las celdas son cada uno de los recuadros que forman una tabla, resultan de la
intersección entre una fila y una columna.

Ilustración 69. Tabla con contenido y formato.

Para poder insertar algún elemento en una celda, ya sea texto o imágenes
simplemente hay que situar el cursor en la celda deseada.

7.4 Seleccionar elementos de una tabla

Existen varias formas de seleccionar una tabla. Una es con el menú Modificar
estando en el cursor en la tabla. O desplegando el menú contextual de la tabla al
pulsar el botón derecho sobre ella. En ambos casos, aparece la opción Tabla, en
la cual puede elegir la opción Seleccionar tabla.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
65
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 70. Opción que permite seleccionar una tabla.

También es posible seleccionar una tabla pulsando con el ratón sobre el borde
que la rodea, o pulsando sobre la etiqueta <table> que aparece en la barra de
estado de la ventana de documento.

Ilustración 71. Etiqueta de una tabla.

Como novedad muy útil para trabajar con tablas, Dreamweaver 8, incorpora la
opción Anchos de tabla. Cuando se selecciona una tabla o cuando se coloca el
cursor sobre cualquier parte de la tabla. Dreamweaver muestra en una zona verde
el ancho de la tabla y de cada columna. Junto a los anchos se encuentran el menú
de encabezado de la tabla y el de encabezado de la columna. Estos menús
permiten acceder rápidamente a determinados comandos relacionados con la
tabla.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
66
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 72. Menús que permiten acceder rápidamente a la tabla.

Si tiene el cursor en la tabla y no aparece esa zona verde, se puede activar su


visualización seleccionando la opción Anchos de tablas del menú Tablas o
también desplegando de la barra de menús, el menú Ver, Ayudas visuales,
Anchos de tabla. De la misma forma se desactiva su visualización.

Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no


tiene un ancho especificado, si aparecen dos números, el primero corresponde al
ancho especificado en las propiedades de la tabla o columna y el segundo es el
ancho visual que aparece en la vista de diseño.

Cuando ocurren diferencias se puede hacer que el código (propiedades) se


cambie el ancho por el real, para ello sólo se tiene que seleccionar la opción
Igualar todos los anchos del menú desplegable encabezado de tabla.

En este menú se ve que también existe la opción Seleccionar tabla.

No siempre se desea seleccionar toda una tabla, en ocasiones se desea


seleccionar filas, columnas o celdas.

Pueden seleccionarse una fila o columna de varias formas, lo mejor es que se


prueben las distintas formas y elegir la que más guste. Éstas son las formas de
selección:
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
67
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

• Utilizar la opción Seleccionar columna del menú Encabezados de columna


(zona verde de anchos), esto sólo es válido para seleccionar una columna.

• Manteniendo pulsado y arrastrando el ratón hasta seleccionar las columnas


o filas completamente.

• También puede hacerse situando el cursor junto al borde superior o


izquierdo de la columna o fila respectivamente, de modo que el cursor
cambia a la forma de una flecha negra. Al hacer clic se selecciona la
columna o fila a la que apunta la flecha.

• Para seleccionar una fila, se posiciona el cursor en cualquier sitio de la fila y


sobre la etiqueta <tr> de la barra de estado o sobre la etiqueta <td> para
seleccionar la columna.

• Para seleccionar varias celdas contiguas, basta con mantener pulsado el


ratón mientras arrastra sobre las celdas deseadas.

• Para seleccionar una sola celda o varias celdas no contiguas, se mantiene


pulsada la tecla <Ctrl> mientras se hace clic sobre las celdas.

7.5 Formato de tabla

Las propiedades de la tabla se especifican a través de su Inspector de


propiedades.

Ilustración 73. Ventana del Inspector de propiedades.

A través del Inspector de propiedades se pueden modificar los valores que se


especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como el
valor Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha),
el Color de fondo o de borde de la tabla, o la imagen de fondo.

Si lo que se selecciona es una celda, o un conjunto de celdas, el Inspector de


propiedades cambia, para permitir especificar otros valores.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
68
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 74. Ventana del Inspector de propiedades de una celda.

La parte superior del Inspector de propiedades en este caso sirve para especificar
las propiedades del texto que se insertará dentro de las celdas seleccionadas.

La parte inferior sirve para especificar valores propios de la celda, como puede ser
el Color o imagen de fondo (diferentes de los especificados para la tabla global), el
color del borde de la celda, etc.

Dos opciones que posiblemente necesiten utilizarce con frecuencia serán Horiz y
Vert, que definen la alineación del contenido de la celda de forma horizontal
vertical respectivamente.

7.6 Cambiar tamaño de tabla

El tamaño de la tabla a través del Inspector de propiedades estará especificado


por los valores de An (anchura) y Al (Altura). Normalmente sólo se especifica la
anchura, no la altura.

Ilustración 75. Ventana de propiedades que permite cambiar el ancho.

Los valores An y Al de una celda siempre están en Pixeles. No es necesario


especificar ninguno de estos dos valores para las celdas, a no ser que se desee
que se mantenga obligatoriamente ese tamaño, y no que se ajusten al contenido o
al tamaño, de la ventana.

No sólo puede establecerse el tamaño de las tablas y de las celdas a través del
Inspector de propiedades. También es posible hacerlo manteniendo pulsado el
ratón sobre alguno de los bordes, arrastrándolo hacia la posición deseada.

7.7 Añadir y eliminar filas y columnas.

Existen varias formas de añadir filas y columnas a una tabla.


Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
69
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Lo primero que se debe hacer es, estando el cursor en una celda o seleccionando
varias, desplegar el menú contextual de la tabla al pulsar con el botón derecho
sobre ella, o bien abrir el menú Modificar. En ambos casos aparece la opción
tabla.

Según las celdas seleccionadas, algunas de las opciones de Tabla se podrán


utilizar mientras que otras no.

Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar
fila o insertar columna. La fila se inserta sobre la celda o el conjunto de celdas
seleccionadas, mientras que la columna se inserta a su izquierda.

Ilustración 76. Menú para insertar una fila o columna.

Existe una opción más completa, la opción Insertar filas o columnas. Al


seleccionarla aparece una nueva ventana, donde es posible determinar si lo que
se insertarán serán filas o columnas, el número de ellas que se insertarán y la
posición donde se insertarán.

Ilustración 77. Ventana para insertar filas.


Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
70
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 78. Ventana para insertar columnas.

Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o
columna a eliminar y elegir la opción Eliminar fila o Eliminar columna del menú
Tabla.

Ilustración 79. Menú que permite eliminar una fila o una columna.

También se puede seleccionar la fila o columna a borrar y pulsar la tecla de


borrado <Supr>.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
71
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

7.8 Anidar, dividir y combinar celdas

Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama
anidar tablas.

Ilustración 80. Tabla anidada.

Para anidar tablas sólo tiene que posicionar el cursor en la celda donde quiera
insertar la nueva tabla e insertarla como ya se ha visto.

Combinar celdas consiste en convertir 2 o más celdas en una sola por lo que
dejará de haber borde de separación entre una celda y otra ya que serán una sola.
Esto puede servir por ejemplo para utilizar la primera fila al escribir el título de la
tabla. En este caso habría que combinar todas las celdas de la primera fila en una
sola.

Mientras que dividir celdas consiste en partir en dos una celda.

Una de las formas de dividir y combinar celdas es a través del Inspector de


propiedades.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
72
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 81. Ventana para seleccionar los botones de dividir y combinar celdas.

Si se seleccionan varias celdas pueden combinarse pulsando el botón del


Inspector de propiedades, o pulsando sobre la opción Combinar celdas de la
opción Tabla, que como se ha visto puede dirigirse a ella a través del menú
contextual de la tabla y a través del menú Modificar.

Se debe tener en cuenta que sólo es posible combinar celdas contiguas, lo que
puede dar como resultado otra celda, es decir, que su combinación dé como
resultado un recuadro.

Para dividir una celda hay que pulsar sobre el botón del Inspector de
propiedades, o sobre la opción Dividir celda de la opción tabla.

En ambos casos aparece una ventana como la siguiente, en la que hay que
especificar si la celda se va a dividir en filas o columnas, y el número de éstas.

Ilustración 82. Ventana para dividir filas o columnas.

7.9 Modos de tabla.

A la hora de trabajar con tablas, Dreamweaver nos proporciona distintos modos de


visualización. Hasta ahora se ha trabajado a lo largo de tema con el modo
estándar, pero se puede pasar a los otros modos a través del menú Ver opción
Modo de tabla. Dentro de esta opción se puede elegir entre Modo estándar, Modo
de tablas expandidas o Modo de diseño.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
73
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 83. Menú que permite cambiar el modo de tabla.

El Modo de diseño. Se utiliza para dibujar páginas con un diseño determinado,


basándose en tablas. Utilizando esta vista, las tablas no han de insertarse
obligatoriamente en líneas de texto, como se ha hecho hasta el momento, sino
que es posible insertarlas en cualquier punto de la página, y Dreamweaver se
encargará de rellenar el espacio vacío, para que sea posible que la tabla aparezca
en esa posición.

El Modo de tablas expandidas añade temporalmente relleno y espaciado de celda


a las tablas de un documento y aumenta los bordes de las tablas para facilitar la
edición. Este modo se puede utilizar para seleccionar elementos de las tablas o
colocar el punto de inserción de forma precisa pero en este modo se ve la página
como quedará exactamente.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
74
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Capítulo 8. Marcos

8.1 Presentación

Los marcos (en inglés frames), son estructuras dinámicas que permiten la
organización de la información de una página web. Muestran, en una misma
ventana, varias páginas web. Así cada página se dividirá en la práctica en varias
páginas independientes o áreas que reciben el nombre de marcos. Por ejemplo
una página puede mostrar información cambiante, y otra información estática
para servir de índice y facilitar la navegación del usuario dentro de un sitio web.

Top.html

Contenido.html

Ilustración 84. Estructura de los marcos.


Menú.html

Los marcos sirven para distribuir mejor los datos de las páginas, ya que permiten
mantener fijas algunas partes, como pueden ser el logotipo y la barra de
navegación, mientras que otras sí pueden cambiar. Además de mejorar la
funcionalidad, pueden mejorar también la apariencia.

Cada uno de los marcos de una página, contiene un documento HTML


individual. Por ejemplo, en la imagen superior puede ver una página con tres
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
75
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

marcos. El marco izquierdo contiene el documento menu.html y el derecho el


documento contenido.html, y el marco Top.html, que sería donde se pondría el
título. Para poder visualizar la página de este modo, se ha tenido que abrir en el
navegador el documento marcos.html, que es la página que contiene los
marcos agrupados.

Es posible editar los documentos contenidos en los marcos desde la página que
contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil hacerse
una idea de cómo quedará la página al final, cosa que no es posible si se editan
individualmente cada uno de los documentos que contiene el marco.

El trabajar con marcos puede resultar una tarea algo complicada, sobre todo al
principio, por lo que no se profundizará mucho en el tema, y se verá solamente
algunos conceptos básicos y ejemplos sencillos.

8.2 Crear marcos

Existen varias formas de crear un marco. Nosotros vamos a ver solamente una
de ellas.

Para crear un marco, primero hay que abrir algún documento. Puede ser uno
nuevo o uno ya existente.

Después, dirigirse al menú Insertar, HTML, Marcos. A través de esta opción


puede elegirse el tipo de marco que va ha crearse.

Ilustración 85. Menú para crear marcos.

Marco a la Izquierda.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
76
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Si se pulsa sobre Izquierda se creará un nuevo marco a la izquierda del


documento actual.

Ilustración 86. Marco a la izquierda.

Como se puede ver en la imagen, aparece una línea que divide el documento en
dos. El documento de partida era uno nuevo.

En este caso tendrán tres documentos: el de la izquierda, el de la derecha, y el


que contiene el grupo de marcos. El de la derecha es el documento que se tenía
inicialmente, que está en el marco conocido como marco padre (MainFrame).

Para seleccionar el documento que contiene el grupo de marcos hay que pulsar
sobre la línea que separa los marcos. Esto solo es posible mientras dicho
documento no se haya guardado.

Si en lugar de insertar un marco a la izquierda se inserta a la Derecha, el marco


vacío aparecerá a la derecha del documento original.

En la imagen siguiente se puede ver un ejemplo de marco a la derecha.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
77
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 87. Marco a la derecha.

Sobre un documento ya existente, menu.html, se ha insertado un marco a la


derecha.

Al igual que en el caso anterior, se tienen tres documentos: el de la izquierda, el


de la derecha, y el que contiene el grupo de marcos. En este caso, el documento
que se tenía inicialmente es el de la izquierda, mientras que antes era el de la
derecha. Por ello, en este caso el marco padre será el de la izquierda.

El marco padre siempre es el marco en el que se encuentra el documento inicial,


sobre el que se han insertado el resto de marcos.

8.3 Seleccionar marcos

Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos,
que puede abrirse a través del menú Ventana. Si la opción Marcos no aparece
directamente en este menú, posiblemente esté dentro de la opción Otros. También
se puede abrir el panel Marcos pulsando la combinación de teclas Mayús+F2.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
78
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

En el panel Marcos aparecen los marcos que contiene el documento de marcos,


y se puede pasar de uno a otro pulsando sobre ellos en el panel. También puede
seleccionarse la página de marcos pulsando sobre el borde que rodea a los
marcos (el que aparece más grueso y en relieve en la imagen).

No es necesario seleccionar los marcos para editar los documentos que éstos
contengan.

Sí es necesario seleccionar los marcos para especificar las propiedades


específicas de cada uno de ellos.

Ilustración 88. Ejemplos del inspector de marcos.

8.4 Guardar marcos

Todos los documentos que contienen marcos tienen que tener una página en
cada uno de ellos. Es por esto que al crear algún marco, se cargan páginas
nuevas por defecto en cada uno de ellos, a excepción del marco que contiene la
página original.

Estas páginas nuevas pueden ser posteriormente sustituidas por otras ya


existentes, como se verá más adelante.

Es necesario guardar la página que contiene el grupo de marcos, así como cada
una de las páginas que están incluidas en sus marcos.

No es conveniente guardar la primera vez los marcos con la opción Guardar


todo , ya que existe la posibilidadde equivocarse al dar los nombres a los
nuevos documentos.

Es preferible guardar cada documento uno por uno, a no ser que todos los
marcos contengan alguna página ya existente, ya que en ese caso el único
documento al que habrá que dar nombre será al que contiene el grupo de
marcos.
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
79
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Para guardar el documento que contiene el grupo de marcos, hay que


seleccionarlo previamente.

Para guardar cada uno de los otros documentos, simplemente hay que situar el
cursor en ellos antes de pulsar sobre Guardar .

8.5 Configurar marcos

Una vez seleccionado un marco a través del panel Marcos, pueden establecerse
sus propiedades a través del inspector de propiedades.

Ilustración 89. Inspector de propiedades de un marco.

Cada marco tiene asignado un nombre, que puede cambiarse a través de


Nombre de marco. El nombre no puede contener espacios en blanco.

En Origen aparece el nombre del documento HTML que está contenido en el


marco.

En Bordes puede elegirse si aparecerá o no una línea separando el marco del


resto de marcos. En el caso de que se muestre el borde, se puede especificar un
color para éste a través de Color borde.

Desplaz. Indica si aparecerán o no las barras de desplazamiento cuando el


documento del marco no pueda visualizarse completamente.

Si la opción Mismo tamaño está activa, indica que los usuarios no podrán variar
las medidas del marco desde el navegador.

El Ancho del margen y el Alto del margen indican la separación que habrá
entre el contenido del marco y sus bordes izquierdo-derecho y superior-inferior.
Si lo seleccionado es todo el conjunto de marcos (la página de marcos), el
inspector de propiedades es algo diferente.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
80
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 90. Bordes de un marco desde el Inspector de propiedades.

En Bordes puede elegirse si aparecerá o no una línea separando los marcos


entre sí y puede especificarse un color para éste a través de Color del borde.
También es posible establecer un grosor para el borde a través de Ancho.

El campo Columna (o Fila dependiendo del marco elegido en Selección Fila


Col.) sirve para especificar el tamaño del marco, que puede ser en Píxeles,
Porcentaje (de la ventana) o Relativo (proporcional al resto de marcos).

Normalmente se utilizarán dos marcos, uno de ellos con tamaño en Píxeles, que
será el que contenga la barra de navegación, y el otro marco con tamaño
Relativo, para que se ajuste a la ventana del navegante.

8.6 Contenido del marco

Como se ha visto, el contenido de un marco puede establecerse a través del


campo Origen del inspector de propiedades.

Ilustración 91. Inspector de propiedades de un marco.

Cuando se trabaja con marcos, se pueden cargar diferentes documentos en


cada uno de ellos. El contenido de alguno de los marcos ha de ser fijo, mientras
que el de otros ha de poder variar.

A través del campo Origen del inspector de propiedades, sólo es posible


especificar el documento que se cargará inicialmente en el marco, pero se puede
cambiar este documento por otro a través de vínculos.

Como se recordará, en el tema de hipervínculos se vieron los posibles destinos


de los enlaces. Estos destinos podían ser _blank, _parent, _self, y _top. Se
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
81
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

recordará para que serviría cada uno de ellos, ya que ahora que ya se sabe
trabajar con marcos será más fáciles de entender.

• Blank: Abre el documento vinculado en una ventana nueva del


navegador.

• Parent: Abre el documento vinculado en la ventana del marco que


contiene el vínculo o en el conjunto de marcos padre. Como ya se sabe,
el marco padre es el marco en el que se encuentra el documento inicial,
sobre el que se han insertado el resto de marcos.

• Self: Es la opción predeterminada. Abre el documento vinculado en el


mismo marco o ventana que el vínculo.

• Top: Abre el documento vinculado en la ventana completa del navegador,


lo cual quiere decir que los marcos de la ventana desaparecerán al abrir el
vínculo en ella.

Además de estos destinos para los enlaces, también aparecerán los nombres de
los distintos marcos de la página.

Se pueden añadir todos estos destinos a cualquier elemento de la página que


contenga algún enlace, ya sea texto, una imagen, un mapa de imagen, un
elemento Flash, etc.

Gracias a todo esto se podrá hacer que las barras de navegación y el resto de
enlaces funcionen a nuestro antojo, cargando unas u otras páginas en alguno de
los marcos, en una ventana nueva, en toda la ventana, etc.

Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy
buenos resultados finales.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
82
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Capítulo 9. Formularios

9.1 Presentación

Una de las características más importantes de la web es la posibilidad de recibir


información proporcionada por los usuarios, es decir, dotar de interactividad a las
páginas. Utilizando formularios se pueden pedir ciertos datos a los usuarios y, en
función de lo que respondan, efectuar determinadas acciones.

Ilustración 92. Ejemplo de un formulario.

Un formulario puede estar compuesto por los campos o controles principales


utilizados en Windows: campos de texto, campos de contraseña, campos de texto
multilínea, menús emergentes, listas desplegables, botones de radio, casillas de
verificación y botones, así como de las etiquetas necesarias para estructuras el
formulario y controlar su presentación. También será necesario programar
(utilizando un lenguaje de programación, JavaScript, VBScript, etc.) la tarea que
debe ejecutar.

En esta unidad sólo aprenderemos a diseñar formularios y adjuntar aquellas


acciones, comportamientos de Dreamweaver, que introducen en los documentos
el código JavaScript que permite a los visitantes interactuar con la página web sin
tener conocimientos de programación, pues exceden la finalidad de esta antología.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
83
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

9.2 Añadir un formulario

Para añadir un formulario a una página web, realizar los pasos siguientes:

• Situar el punto de inserción en la posición donde se desea insertar el formulario.

• Hacer clic en el botón Formulario del panel Formularios de la barra Insertar o


elegir el comando Formulario del menú Insertar.

Ilustración 93. Opción para crear un formulario

• En la ventana de Diseño, se distingue el área del formulario por una línea


delimitadora de guiones rojos.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
84
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 94. Muestra de la línea punteada indicando que es un formulario.

9.3 Propiedades de un formulario

Una vez insertada la estructura básica para el formulario, se puede configurar sus
propiedades utilizando el Inspector de propiedades.

Ilustración 95. Inspector de propiedades de un formulario.

• Nombre del formulario. Escribe el nombre del formulario en el cuadro de


texto. No es significativo a no ser que se deba hacer referencia a él en la
programación de un script.

• Acción. El valor de esta propiedad suele ser la dirección (URL) de un programa


que procese los datos que el usuario haya escrito en el formulario. Escribir la
dirección o hacer clic en el botón de carpeta para seleccionarlo. Por ejemplo:
para llamar a un JavaScript: javascript:nombre_funcion() o para enviar los
datos por correo electrónico: mailto:dirección de correo electrónico.

• Método. Indica la manera en que los datos se transfieren al servicio web. Elige
el método POST o el método GET. El método POST envía los datos en el
cuerpo de lmensaje y el método GET concatena los datos del formulario a la
URL donde deben enviarse.

No se deberá utilizar el método GET con formularios con contenidos largos. Los
URL están limitados a 8.192 caracteres. Si los datos enviados superan dicha
longitud, la información se trunca dando lugar a resultados imprevistos. Tampoco
se mdebe utilizar GET con números de tarjeta de crédito u otra información
confidencial, ya que este método de transferencia de información no es seguro.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
85
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

9.4 Añadir campos a un formulario.

Una vez que se ha insertado un formulario en la página, se añadirán los campos


que permitan al usuario introducir los datos. En los siguientes apartados se
describen las operaciones básicas en el diseño de los componentes de un
formulario.

Campos de texto

Permiten al usuario dar una respuesta escribiendo texto. Dreamweaver ofrece tres
tipos de campos de texto:

Ilustración 96. Inspector de propiedades de un Campo de texto.

• Texto de una línea. Sólo permiten escribir en una línea


• Texto de varias líneas. Proporcionan mayor espacio al visitante para escribir
la respuesta solicitada.
• Contraseña. Es un tipo especial de campos de texto que al escribir texto se
sustituye por asteriscos o viñetas para que quede oculto y evitar así que otra
persona pueda ver la información.
• Tipo. Esta propiedad de un campo de texto determina si el usuario podrá
escribir Una línea, Varias líneas (se activará automáticamente si insertas un
campo Área de texto) o una contraseña.
• Campo de texto. Asigna un nombre al campo. Todos los campos de texto
deben tener un nombre exclusivo que es obligatorio asignar, y permite referirse
o identificar cada dato que el usuario teclea en un cuadro de texto.
• Ancho car. Establece el número máximo de caracteres que se pueden mostrar
en el campo. Este número puede ser menor que Car máx, que especifica el
número máximo de caracteres que se pueden escribir en el campo.
• Car máx/Líneas núm. Permite indicar el número máximo de caracteres que se
puede introducir en campos de texto de una línea y establece la altura de
campos de texto de múltiples líneas. Por ejemplo, utilizar esta propiedad para
limitar los códigos postales a 5 dígitos, las contraseñas a 10 caracteres, etc.
• Val inicial. Permite indicar el valor que se mostrará en el campo de texto,
cuando el usuario solicite la página desde su navegador.
• Contraseña. Activar esta opción si se desea que se muestre un asterisco por
cada carácter que el usuario teclee en el campo de texto.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
86
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

• Ajuste. Esta propiedad de un campo de texto de varias líneas, define cómo se


comportará el campo cuando las líneas escritas superen el ancho de ésta.
Desactivado añade barra de desplazamiento horizontal. Virtual crea nuevas
líneas con texto que sobrepasa el ancho horizontal y Físico divide en nuevas
líneas aquellas que superan el ancho; la diferencia con la opción virtual es que
este ajuste envía la información introducida igual que la muestra el área de
texto.

Para insertar campos de texto, realizar las siguientes acciones:

• Situar el punto de inserción, dentro del recuadro de guiones rojos, en la


posición en que se desee añadir el campo de texto. Normalmente se añade un
rótulo que indica la información que se solicita al usuario.

• Dar clic en el botón Campo de texto o en Área de Texto del panel


Formulario en la barra Insertar.

• Establecer las propiedades en el Inspector de propiedades

Insertar casillas de verificación

Estas casillas indican el estado de una opción, activada (muestra una marca) o
desactivada (la casilla se encuentra vacía).

Un posible uso de este control consiste en establecer varios criterios que no son
excluyentes.

Ilustración 97. Ejemplo del uso de las casillas de verificación.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
87
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

• Nombre de casilla. Escribir un nombre descriptivo para la casilla de


verificación. Cada una de las casillas de verificación de un formulario debe
tener un nombre único si deseas conocer la respuesta del usuario a cada una
de las cuestiones planteadas.

• Valor activado. Escribir el valor que se desea que vuelva la casilla, al


programa o correo electrónico, si es activada por el usuario. Por ejemplo, en
una encuesta, se podría establecer:

Valor Para la casilla


1 “Natación”
2 “Ciclismo”
3 “Motociclismo”
4 “Futbol”

• Estado inicial. Elige Activado si se desea que la opción aparezca marcada


cuando el formulario se cargue inicialmente en el navegador.

Botones de opción

Al igual que las casillas de verificación, los botones de opción o botones de radio
pueden estar seleccionados (presentan un punto en su interior) o no
seleccionados (se encuentran vacíos). Los botones de opción si aparecen en
grupo representan los posibles valores que puede tomar una opción, el usuario
podrá elegir sólo uno; por tanto son excluyentes, es decir, sólo un botón del grupo
podrá estar seleccionado. Al seleccionar un botón, los restantes botones del grupo
dejarán de estarlo.

Las propiedades de este objeto son las mismas que las descritas para la casilla de
verificación.

Ilustración 98. Grupo de opciones.


Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
88
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Utilizar los botones de opción cuando el usuario sólo deba seleccionar una de las
opciones de un grupo de opciones. Generalmente, los botones de opción se
utilizan en grupos. Todos los botones de opción de un grupo deben tener el mismo
nombre y contener distintos valores de campo. Se pueden insertar de uno en uno
(Botón de opción) o como un grupo (Grupo de opción)

Para ello ejecutar las siguientes instrucciones:

• Situar el punto de inserción en el interior del contorno del formulario.

• Hacer clic en el botón Grupo de opción del panel Formulario de la barra


Insertar.

Ilustración 99. Grupo de opción.

• Aparece el cuadro de diálogo Grupo de opción.

Ilustración 100. Menú para establecer las propiedades de un grupo de opciones.

• En el cuadro de texto Nombre, se introduce un nombre para el grupo de


opciones. Es importante ya que identificará la opción seleccionada con el grupo
de opciones a la que pertenece.

• Hacer clic en el botón Más (+) para agregar un botón de opción al grupo. Si se
desea, se puede introducir una etiqueta (propiedad Nombre Botón) y la
propiedad Valor activado en la columna Valor.

• Hacer clic en los botones de flechas hacia arriba o hacia abajo para cambiar el
orden del botón seleccionado.
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
89
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

• Seleccionar cómo Dreamweaver debe disponer los botones. Elegir Saltos de


línea (etiqueta <br>) o Tabla. Si se selecciona la opción de tabla, Dreamweaver
crea una tabla de una columna y sitúa los botones de opción a la izquierda y
las etiquetas a la derecha.

Dreamweaver inserta el grupo de botones de opción en un formulario. Si aún no


has insertado un formulario en la página, dreamweaver lo insertará
automáticamente.

Menú lista

Un menú lista en dreamweaver o lista desplegable en Windows y una lista o


cuadro de lista en Windows presenta distintas opciones al usuario en un espacio
delimitado. Las listas y los menús de formulario en dreamweaver se crean con el
mismo control Lista/menú, pero proporcionan distinta funcionalidad al usuario. Un
menú es un campo desplegable y una lista no.

• Es aconsejable utilizar una lista cuando el número de opciones que se debe


mostrar es pequeño. Establece el alto en líneas de la lista; cuando el número
de opciones de la lista supere su alto en líneas, aparecerá una barra de
desplazamiento con la que el usuario podrá ver todas las opciones.

• Se debe utilizar un menú cuando el espacio disponible sea muy reducido o el


número de opciones sea mayor. Un menú muestra una sola línea e incluye una
flecha abajo en la que el usuario hace clic para ver las opciones restantes del
menú. El usuario sólo puede seleccionar un elemento de menú a la vez.

Una vez insertado un campo Lista/menú, en un formulario, se podrá establecer los


valores de las siguientes propiedades en el Inspector de propiedades:

Ilustración 101. Ejemplo de una Lista/menú

• Lista/menú. Permite asignar un nombre exclusivo para la lista.

• Tipo. Seleccionar el botón de opción Lista para mostrar las opciones en un


cuadro de lista desplegado o Menú para mostrar las opciones en una lista
desplegable.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
90
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

• Alto. Si en la propiedad tipo se ha seleccionado la opción Lista, indica el


número de líneas que se mostrarán en la lista. El número predeterminado de
líneas es 4. si el número especificado es inferior al número de opciones que
mostrará la lista, automáticamente aparecerán barras de desplazamiento
cuando se cargue la página en un navegador.

• Permitir múltiples. Activar esta casilla de verificación (sólo está disponible si


se elige la opción Lista) para permitir a los usuarios seleccionar más de una
opción de la lista al mismo tiempo.

• Valores de lista. Hacer clic en este botón para añadir los distintos elementos
de la lista. Aparecerá el cuadro de diálogo Valores de lista.

Ilustración 102. Menú para añadir valores a un menú desplegable.

En la columna Etiqueta de elemento escribir el texto que debe aparecer en la lista


y en la columna Valor (si se desea que al elegir una opción de la lista se muestre
en el navegador otra página, se escribirá la ruta y el nombre de la página en esta
columna), el valor que se envía a la aplicación del servidor si el elemento está
seleccionado. Si no se especifica ningún valor, se enviará la etiqueta.

Los botones permiten añadir y quitar elementos de la lista. Los elementos


se mostrarán en el mismo orden que en el cuadro de diálogo Valores de lista. El
primer elemento de la lista es el elemento que aparece seleccionado cuando la
página se carga en un navegador. Con los botones de flecha arriba y abajo se
podrá reorganizar los elementos de la lista.

Seleccionando inicialmente. Elegir el elemento de la lista que se desee que


aparezca seleccionado cuando la lista se muestre inicialmente en el navegador, si
no es el primero de la lista.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
91
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Campo de archivo

Un campo de archivo es un cuadro de texto con un botón Examinar (ya


programado para que cuando el usuario lo pulse aparezca un cuadro de diálogo
que le permita buscar el archivo en el sistema).

Su función es permitir al usuario escribir o seleccionar un archivo de su


computadora y enviarlo al servidor, como un archivo gráfico o algún otro
documento. Seleccionar el campo de archivo, en el formulario y, después se
establecen sus propiedades en el Inspector de propiedades.

Ilustración 103. Inspector de propiedades de un campo de archivo.

• Campo archivo. Permite asignar un nombre al cuadro de texto del objeto.

• Ancho Car. Escribir un número para especificar el número máximo de


caracteres que se puede escribir en el cuadro de texto.

• Car Máx. Teclear un número para especificar el número máximo de caracteres


que se pueden escribir en el cuadro de texto.

Botón

Un botón es un objeto que, al ser pulsado, inicia una acción: enviar un formulario,
restablecer los valores iníciales del formulario o una acción predefinida (se deberá
asignar un comportamiento JavaScript al botón para definir su propia acción.

Las propiedades a configurar en el Inspector de propiedades son las siguientes

Ilustración 104. Propiedades de un botón.


Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
92
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

• Nombre del botón. Asigna un nombre al botón.

• Enviar formulario. Al hacer clic en el botón se enviarán automáticamente al


servidor todos los datos del formulario que el usuario haya escrito o
seleccionado.

• Restablecer formulario. Se borrarán todos los datos que el usuario haya


escrito o seleccionado en los elementos que compongan el formulario en el
que está ubicado el botón.

• Ninguno. No realiza ninguna tarea automática.

• Etiqueta. Indica el texto que aparecerá en el interior del botón.

Campo de imagen

Se puede insertar un campo de imagen en un formulario para, por ejemplo, crear


un botón Enviar más atractivo.

El inspector de propiedades muestra las mismas propiedades de una imagen.

Campo oculto

Los campos ocultos, como su nombre lo indica, no aparecen en la ventana del


navegador. Ya que el usuario no puede modificar su valor, se utilizarán cuando se
desee enviar un valor en el formulario, que tenga el mismo valor cada vez que se
solicite.

Su única propiedad es Valor para especificar el valor del campo. Si se tiene


conocimiento de programación se podrá manejar este dato cuando se desee.

Menú de salto

Este elemento de formulario presenta una lista de opciones que representan


enlaces a otras páginas web o archivos.

Al hacer clic en el botón Menú de salto en la paleta de Formulario aparecerá el


cuadro de diálogo Insertar menú de salto.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
93
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 105. Configura las opciones de un menú de salto.

• En el cuadro de texto, se escribirá el texto que en la lista de menú describirá el


contenido de la página Web a la que nos llevará.

• En el cuadro de texto Al seleccionarse, ir a URL, se elige el archivo que se


desea abrir, se dará clic en el botón Examinar y, a continuación, se
seleccionará el archivo que se desea abrir o se escribe la ruta del archivo en el
cuadro de texto.

• En el cuadro de lista desplegable Abrir URL en, se selecciona la ubicación


donde se desea abrir el archivo: Ventana principal para abrir el archivo en la
misma ventana que contiene el menú de salto o un marco (si se ha
estructurado la página actual con marcos, sus nombres aparecerán en la lista).

• Para añadir un botón IR al lado del menú en lugar de un mensaje de selección


de menú, se activa la casilla Insertar botón Ir tras el menú.

• Activar la casilla Seleccionar primer elemento tras el cambio URL para mostrar
un mensaje (por ejemplo, Elija una opción) una vez que se vuelve a la página,
después de haber accedido a una de las que lleva el menú. Si no se activa
esta casilla, la opción que mostrará el menú es la que haya seleccionado el
usuario.

• Para añadir otras opciones de menú adicionales, hacer clic en el botón Más
y se repiten los primeros 4 pasos. Si se desea eliminar una opción, dar clic
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
94
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

en el botón Menos . Los botones de flecha permiten cambiar el orden de las


opciones de la lista.

• Para cerrar el cuadro de diálogo dar clic en el botón Aceptar.

Comportamientos de formulario

Se puede adjuntar comportamientos (una acción, mostrar un mensaje, más un


evento, al hacer clic) a formularios y objetos de formulario utilizando cualquiera de
los comportamientos que proporciona dreamweaver en el panel Comportamientos.
Los comportamientos Validar formulario y Establecer texto de campo de texto sólo
están disponibles si se ha insertado un campo de texto en el documento. Cuando
se aplica el comportamiento Validar formulario a un objeto de formulario, se
deberá especificar qué campo de texto se debe validar. Por ejemplo, si se
adjuntan el comportamiento Validar formulario al botón Enviar, se podrá
especificar que se compruebe, en el campo de texto “Nombre”, si el usuario ha
introducido texto y si no es así mostrarle un mensaje.

Al trabajar con comportamientos, se deberá comprobar que todos los objetos del
formulario que hay en el documento (y todos los demás objetos) tienen nombres
únicos. Si se utiliza el mismo nombre para dos objetos distintos, es posible que los
comportamientos no funcionen correctamente, a pesar de que los objetos se
encuentren en formularios distintos.

• Validar formulario. Este comportamiento comprueba que el usuario ha


introducido los datos en un formulario. Para que sea efectivo debe de aplicarse
a cada elemento del formulario que se desee validar.

Para validar campos individuales conforme el usuario va llenándolos en el


formulario:

• Seleccionar un elemento del formulario o el formulario. Para validar múltiples


campos cuando el usuario envía el formulario. Hacer clic en la etiqueta <form>
en el selector de etiquetas, situado en el ángulo inferior izquierdo de la ventana
de documento.

Ilustración 106. Barra donde se selecciona el form.

• Elegir el comando Comportamiento del menú Ventana

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
95
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 107. Menú para indicar el comportamiento.

• Aparecerá el panel de Comportamientos.

Ilustración 108. Panel de comportamientos.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
96
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

• Seleccionar comportamiento Validar formulario en el menú emergente que


aparecerá al hacer clic en el botón Más (+)

Ilustración 109. Menú de acciones del panel Comportamientos.

• Aparecerá el cuadro de diálogo Validar formulario o ejecuta una de las


siguientes acciones:

Ilustración 110. Validar datos de los elementos de un formulario.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
97
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Para validar los campos individuales, seleccionar el elemento del formulario


que se desee validar en la lista Campos con nombre. Si se está validando
múltiples campos, seleccionar un campo de texto en la lista de Campos con
nombre.
Activar la casilla de verificación Obligatorio si se desea que el usuario no pueda
dejar vacío ese campo.
Elegir una de las opciones del recuadro Aceptar:
Cualquier cosa. Si el campo es obligatorio, pero no tiene que contener ningún
tipo de dato determinado. Si no se ha seleccionado la casilla Obligatorio, esta
opción carece de sentido, es lo mismo que se la acción Validar formulario no
se hubiera adjuntado al campo.
Dirección de correo electrónico. Es para comprobar que el usuario ha
tecleado una dirección de correo electrónico, es decir, si el campo contiene un
símbolo arroba “@”.
Número. Si se desea comprobar que en el campo se han escrito solamente
caracteres numéricos dentro del rango especificado.
Número del …al para verificar que el campo contiene solamente caracteres
numéricos dentro del rango especificado.

• Si se desea validar múltiples campos, repetir los primeros 4 pasos para cada
uno de los campos que se desee validar.

• Hacer clic en el botón aceptar.

Si se ha configurado la validación para múltiples campos cuando el usuario envía


el formulario, en la columna Eventos de la ventana Comportamientos aparecerá
seleccionado automáticamente el evento onSubmit, es decir, la validación tendrá
lugar antes de enviarse el formulario. Si se está validando un campo individual,
comprobar que el evento predeterminado sea onBlur u onChange. Cualquiera de
estos eventos desencadena la acción Validar formulario cuando el usuario
abandona el campo. La diferencia entre ellos estriba en que el evento onBlur tiene
lugar independientemente de que el usuario haya escrito algo en el campo,
mientras que onChange tiene lugar sólo si el usuario ha cambiado el contenido del
campo. El evento onBlur es aconsejable si se ha configurado el campo como
obligatorio.

Cuando el usuario haga clic en el botón Enviar, si no se ha elegido o escrito los


datos de forma correcta, el navegador le mostrará un mensaje similar a la figura
siguiente:

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
98
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 111. Mensaje de aviso del navegador, cuando se ha tecleado un valor incorrecto.

Texto de campo de texto. Permite mostrar un mensaje, en un campo de texto,


cuando el usuario realice una determinada acción. Por ejemplo, si escribe mal una
dirección de correo electrónico al abandonar el campo, el texto escrito se sustituirá
por el mensaje “un e-mail requiere un formato como: pepe@servidor.co.

• Seleccionar un campo de texto del formulario y abrir el panel


Comportamientos.

• Hacer clic en el botón Más (+) y, después elegir el comando Definir texto de
campo de texto del menú Definir texto en el menú emergente Acciones.

• En el cuadro de dialogo Definir texto de campo de texto. Elegir el campo de


texto de destino en el menú emergente Campo de texto.

Ilustración 112. Definir mensaje para el usuario

• Escribir el mensaje en el campo Nuevo texto y luego hacer clic en el botón


Aceptar.

Comprobar que el evento predeterminado es el que se desea. Si no lo es,


seleccionar otro evento en el menú emergente.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
99
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Capítulo 10. Plantillas

10.1 Presentación

Cada vez que se desea crear un sitio web, se debe tener muy en cuenta que las
páginas deben seguir un formato uniforme.

La mayoría suelen hacer copias de los documentos ya creados, y trabajar sobre


estas copias, modificando simplemente su contenido. Esta es la forma más
sencilla de tener páginas con una estructura basada en la de otras ya creadas
previamente.

Las plantillas son una especie de copia de la página en las que van a estar
basadas el resto de páginas del sitio web, pero que incluyen la posibilidad de
establecer unas zonas editables y otras zonas que serán fijas, que no podrán
ser modificadas.

No es posible modificar las propiedades de una página que está basada en una
plantilla, a excepción del título. Cuando se desea que existan páginas con, por
ejemplo, diferente color de fondo, es necesario crear plantillas diferentes con los
distintos colores, y basar las páginas en una u otra plantilla, según el color de
fondo que se desee para cada una.

Cuando se modifica el diseño de una plantilla, se pueden actualizar todas las


páginas basadas en ella.

Las plantillas son archivos con la extensión DWT que se guardan en el sitio web,
dentro de una carpeta llamada Templates.

10.2 Crear plantillas

Las plantillas pueden crearse desde cero, o a partir de una página ya existente.

Una forma de crear una plantilla desde cero es a través del panel Archivos,
pestaña Activos.

Módulo III Dreamweaver


Instructora: Lic. Norma FernándezIlustración
Osorio 113. Panel de Activos.
100
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

La pestaña Activos se puede abrir a través del menú Ventana, opción Activos.
También pulsando F11.

Una vez abierto el panel hay que seleccionar el botón , para poder trabajar
con las plantillas.

Los botones inferiores del panel Activos son similares a los del panel
Estilos CSS.

El único botón diferente es el primero, que en este caso sirve para actualizar la
lista, el resto permiten crear una nueva plantilla, editar una plantilla
seleccionada en la lista, o eliminarla.

Para crear una nueva plantilla se pulsa sobre el botón (Si este botón no está
activado, pulsa con el botón derecho del ratón y elige Nueva Plantilla).

Cuando se pulsa ese botón aparece un nuevo documento en la lista de plantillas,


al que es posible cambiarle el Nombre pulsando previamente sobre él.

Para modificar una plantilla se selecciona de la lista y se pulsa el botón .

Para eliminar una plantilla se selecciona de la lista y se pulsa el botón .

Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates,


que se crea automáticamente.

Para crear una plantilla a partir de un archivo existente es necesario abrir dicho
archivo, y después guardarlo como plantilla a través del menú Archivo, opción
Guardar como plantilla.

Cuando se pulsa dicha opción, aparece una ventana como la de la derecha.


En ella es necesario especificar el nombre con el que va a ser guardada la
plantilla, a través del campo Guardar como, y elegir, de entre la lista de sitios, el
Sitio: en el que se va a guardar.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
101
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 114. Guardar cómo plantilla.


10.3 Establecer regiones editables en una plantilla

Todos los elementos de una plantilla están bloqueados por defecto, no se pueden
modificar.

Es necesario establecer las zonas que sí podrán ser editadas en las páginas que
se basen en dicha plantilla.

Para editar una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla
es a través del panel Activos, pulsando dos veces sobre ella, o estando
seleccionada pulsando sobre el botón como ya se ha visto.

Una vez abierta la plantilla es posible establecer sus propiedades a través de la


ventana Propiedades de la página.

Como se recordará, para abrir esta ventana:

• Pulsar la combinación de teclas Ctrl+J.


• Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la
página.
• Pulsar con el botón derecho sobre el documento abierto en Dreamweaver,
y en el menú contextual que aparece seleccionar la opción Propiedades
de la página.

Para insertar una región editable hay que situar el puntero en el lugar en el que
se desea insertar, y después dirigirse al menú Insertar, Objetos de plantilla,
opción Región editable, o pulsar la combinación de teclas Ctrl+Alt+V.

En la nueva ventana hay que establecer un Nombre para la región editable.

Dentro de la plantilla no pueden existir dos regiones editables con el mismo


nombre.

Posteriormente puede modificarse el nombre a través del inspector de


propiedades de la región editable.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
102
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 115. Región editable.

Las zonas editables aparecen representadas en Dreamweaver como un recuadro


con una etiqueta de color turquesa. En la etiqueta aparece el nombre de la zona
editable.

Dentro del recuadro es posible insertar objetos, que aparecerán por defecto en
aquellos documentos que se basen en la plantilla. Estos objetos, al estar dentro
de la zona editable, podrán ser modificados en las páginas.

Todos los objetos que se encuentren fuera de estas zonas editables aparecerán
también en las páginas, pero no podrán ser modificados.

10.4 Basar páginas en una plantilla

El uso de las plantillas puede resultar un poco complicado al principio. Vamos a


ver cómo basar una página vacía en una plantilla, ya que por el hecho de estar
vacía resulta más sencillo.

Una vez abierto el documento, hay que dirigirse al menú Modificar, Plantillas,
opción Aplicar plantilla a página.

Es preferible que antes de hacer esto asegurarse de que el sitio que se


encuentra abierto en Dreamweaver es el mismo en el que se guardará el
documento, y el mismo en el que se encuentra la plantilla en la que se basará.

Después de pulsar sobre la opción Aplicar plantilla a página aparece una


ventana como la siguiente, en la que hay que seleccionar una de las plantillas de
la lista Plantillas: del sitio.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
103
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 116. Seleccionar plantilla.

Es recomendable activar la casilla Actualizar página cuando cambie la plantilla,


para que la página se actualice automáticamente en el caso de modificar la
plantilla en la que se basa.

A pesar de estar trabajando sobre un documento vacío, es posible que al aplicar la


plantilla aparezcan nombres de regiones no coincidentes entre el documento en
blanco y la plantilla. En ese caso se muestra una ventana como la siguiente.

Ilustración 117. Regiones no coincidentes.

En ella hay que establecer una correspondencia entre el nombre de la región del
documento vacío con el nombre de alguna región de la plantilla.

En este ejemplo, la región del documento vacío que no coincidía con el nombre
de ninguna región de la plantilla era la región Document head.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
104
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

A través de Mover contenido a la nueva región: se ha seleccionado la región


head de la plantilla, para establecer así la correspondencia que se necesitaba.
Después de establecer las correspondencias necesarias, se carga la plantilla en
el documento vacío.En este caso no es posible cambiar el color de fondo, que
está definido en la plantilla, pero sí es posible cambiar todos los elementos de la
tabla y el formulario, ya que se encuentran dentro de una zona definida en la
plantilla como editable.

En este caso se podría cambiar el estilo del texto, el color de las celdas,
combinarlas, etc.

Para que una página deje de estar basada en una plantilla hay que dirigirse al
menú Modificar, Plantillas, opción Separar de plantilla.

Cuando se separa una página de una plantilla, el contenido de la página sigue


siendo el mismo que el que tenía cuando aún estaba basada en la plantilla, pero
sin las restricciones establecidas por la plantilla.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
105
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Capítulo 11. Capas

11.1 Presentación

Las capas no son más que unos recuadros, que pueden situarse en cualquier
parte de la página, en los que se puede insertar contenido HTML. Dichas capas
pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades
de diseño.

Las capas pueden moverse de una posición a otra de la ventana pulsando


sobre el recuadro blanco, y sin soltar el ratón, arrastrándola hacia la nueva
posición.

También pueden ser redimensionadas pulsando sobre los recuadros negros, y


arrastrándolos hasta conseguir el tamaño deseado.

Ilustración 118. Ejemplo de recuadros negros.

Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes,


animaciones flash, y todos los elementos que puede contener un documento
HTML.

Este icono sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se
elimina también la capa.

11.2 Insertar una capa

Las capas pueden insertarse en una página a través del menú Insertar, opción
Objeto de diseño, Capa.

Una vez insertada la capa, pueden editarse sus atributos, pero para ello hay que
seleccionarla primero.

Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando


sobre el icono correspondiente, pero esto no resulta útil cuando existen
muchas capas en un mismo documento, ya que todas las capas tienen asociada
una imagen igual a ésta, y no es fácil seleccionar la deseada a la primera.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
106
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Cuando existen varias capas en un mismo documento, es preferible


seleccionarlas a través de la pestaña Capas del panel Diseño, que puede
abrirse a través del menú Ventana opción Capas. Si la opción Capas no te
aparece directamente en este menú, posiblemente esté dentro de la opción
Otros. También se puede abrir el panel pulsando F2.

En dicho panel aparecen los nombres de todas las capas que existen en el
documento actual, y para seleccionar una de ellas simplemente hay que pulsar
sobre el nombre en el panel.

Ilustración 119. Panel de capas.


11.3 Formato de una capa

Las propiedades de la capa se especifican a través de su inspector de


propiedades.

Ilustración 120. Inspector de propiedades de capas.

• ID de capa es el nombre de la capa. También puede ser cambiado a


través del panel Capas, haciendo doble clic sobre él.

• Iz y Sup indican la distancia en píxeles que hay entre los límites izquierdo
y superior del documento y la capa.

• An y Al indican la anchura y la altura de la capa.

• Índice Z es el número de orden de colocación de las capas. Este valor


también puede cambiarse a través del panel Capas. Una capa será
solapada por aquellas capas cuyo índice Z sea mayor que el suyo.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
107
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

• Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de


cuatro tipos:

• Default (visibilidad según el navegador),

• Inherit (se muestra la capa mientras la página a la que pertenece también


se esté mostrando),

• Visible (muestra la capa, aunque la página no se esté viendo) y

• Hidden (la capa está oculta).

La visibilidad también puede cambiarse a través del panel Capas, pulsando


sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica
Hidden.

A través de Im. fondo y Col puede indicarse una imagen o un color de fondo
para la capa.

Desb. (Desbordamiento) controla cómo aparecen las capas en un navegador


cuando el contenido excede el tamaño especificado de la capa.

Visible indica que el contenido adicional aparece en la capa. La capa se amplía


para darle cabida.

Hidden (oculto) especifica que el contenido adicional no se mostrará en el


navegador.

Scroll (desplazamiento) especifica que el navegador deberá añadir barras de


desplazamiento a la capa tanto si se necesitan como si no.

Auto (automático) hace que el navegador muestre barras de desplazamiento para


la capa cuando sean necesarias (es decir, cuando el contenido de la capa supere
sus límites).

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
108
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Capítulo 12. Multimedia

12.1 Presentación

En este capítulo se conocerán los elementos multimedia y efectos que se pueden


incluir en una página web. Macromedia Dreamweaver permite añadir sonido y
películas que proporcionarán más atractivo y complementaran la información. Se
puede incorporar y editar archivos y objetos multimedia, como películas de
Macromedia Flash y Shockwave, appets de Java, QuickTime, ActiveX y archivos
de audio. También se pueden insertar objetos de texto y botones Flash desde
Dreamweaver.

12.2 Películas de Flash

Las películas Flash son animaciones, que al igual que los botones y el texto
Flash, tienen la extensión SWF. Es frecuente verlas en las páginas iníciales de
los sitios web, a modo de presentación hacia los usuarios, aunque se pueden
utilizar para realizar cualquier tipo de animación.

Estas películas pueden crearse mediante el programa Flash de Macromedía, y


necesitan que el usuario tenga instalado el plug-in para poder ser visualizadas.
Las películas Flash pueden insertarse en una página a través del menú
Insertar, Media, opción Flash, o pulsando Ctrl+Alt+F.

También pueden insertarse pulsando sobre la opción Flash que aparece en la


pestaña Común del panel Insertar, botón Media.

Ilustración 121. Insertar botón de Flash.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
109
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

El inspector de propiedades de las películas Flash es prácticamente igual que


el de los botones y el texto Flash, pero existen dos opciones nuevas que hacen
referencia a la visualización de la película.

La opción Bucle indica que al finalizar la película, ésta volverá a comenzar


desde el principio.

La otra es la opción Rep. autom. (reproducción automática), que al estar


marcada indica que nada más cargarse la página comenzará a reproducirse la
película Flash.

Si esta opción no estuviera marcada, se mostraría únicamente el primer


fotograma de la película.

Interesa desmarcar esta opción cuando se desea que la reproducción sea


activada por algún comportamiento.

12.3 Sonido

No es muy habitual incluir sonido en una página web, ya que algunos usuarios
suelen estar escuchando su propia música cuando navegan en Internet, por lo
que el escuchar también sonido en cada página que se visita puede resultar algo
molesto.

A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la


página, puede hacerla más atractiva. Muchas de las páginas que contienen
sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos
usuarios que no deseen escuchar el sonido de la página puedan desactivarlo.

Los formatos de sonido más habituales en Internet son, fundamentalmente, el


MP3, el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos
diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de
audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.

Para insertar un archivo de audio en un documento en el menú Insertar, Medía,


opción Plug-in.

En la siguiente figura se tiene un ejemplo de un archivo de sonido, en el que se


muestran los controles de audio.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
110
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Ilustración 122. Controles de audio.


En Dreamweaver no se mostrarán los controles de audio. Todos los archivos
que son insertados como plug-in aparecen representadas dentro de

Dreamweaver por una imagen siguiente.

En el inspector de propiedades pueden establecerse la altura y la anchura con la


que se mostrarán los controles de audio, mediante Al y An.

En el caso de no especificar ningún tamaño, se mostrará el tamaño por defecto


de los controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que
se escuche el sonido en la página, pero que no se muestren los controles de
audio, los campos Al y An deben valer cero.

Los sonidos se reproducen automáticamente al cargarse la página, y se


reproducen solamente una vez. Estos valores no pueden definirse a través del
inspector de propiedades, pero sí a través del código. Una vez definidos se
pueden cambiar desde el inspector de propiedades con el botón Parámetros...

Por ejemplo, el archivo anterior aparecía en el código como <embed


src="varios/audio.mid"></embed>. Pero para que no se reproduzca
automáticamente se ha añadido autostart="false", y para que se reproduzca
continuamente se ha añadido loop="true".

La línea de código del archivo de audio ha quedado del siguiente modo:

<embed src="varios/audio.mid" autostart="false" loop="true"></embed>

En el Inspector de propiedades del sonido, el botón Parámetros... abre un


cuadro de diálogo donde es posible cambiar esos valores una vez introducidos.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
111
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Para poder hacer que el audio pueda activarse y desactivarse cuando no se


muestran los controles, es necesario insertar una serie de comportamientos que
se encarguen de esa tarea.

Para poner música de fondo en una página web, sin que aparezcan los controles
de audio, puedes escribir este código directamente en la vista Código.

<bgsound src="cancion1.wav" loop="-1">

Se inserta después de la etiqueta </title> Con el parámetro loop y se puede


decidir cuántas veces se reproducirá, 1, 2, 3 ... (con -1 se reproduce de modo
continuo).

12.4 Videos

En ocasiones puede interesar incluir algún vídeo en una página web, pero hay
que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por
lo tanto, precisan de mucho tiempo para descargarse.

Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el
MOV.

Para insertar un archivo de vídeo en un documento se abre el menú Insertar,


Medía, opción Plug-in.

La ilustración 106 es un ejemplo de un archivo de vídeo, para el que se muestran


los controles de vídeo. Este se reproduce pulsando sobre los controles.

El inspector de propiedades para los archivos de vídeo insertados de esta forma


es el mismo que el de los archivos de audio, ya que ambos se insertan como
Plug-in.

Ilustración 123. Inspector de propiedades para archivos de videos.

Los vídeos también se reproducen automáticamente al cargarse la página, y se


reproducen solamente una vez. Estos valores pueden cambiarse a través del
código, del mismo modo que en el caso de los archivos de audio, añadiendo
autostart="false" y loop="true".
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
112
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Todos los objetos insertados a través de la opción Plug-in precisan que el


usuario tenga instalado un reproductor o un plug-in apropiado para reproducirlos.
En el campo Origen del inspector de propiedades se establece el archivo
vinculado (el archivo de audio o de vídeo) que ha de reproducirse.

En el caso de que el usuario no tenga instalado ningún plug-in adecuado, puede


establecerse en el campo URL plg una página en la que pueda encontrarlo.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
113
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Glosario

FTP Es un protocolo de comunicación gracias al cual se


intercambian archivos dentro de una red.

Hipertexto Texto dotado de una presentación amena que puede incluir


gráficos, videos, sonido y otros elementos multimedia. Está
ligado a una página.

HTML (Hiper Text Markup Language). Es un lenguaje que se emplea


para presentar la información en una página web.

Java Lenguaje de programación desarrollado por Sun para la


elaboración de pequeñas aplicaciones exportables a la red
(applets)

JavaScript Lenguaje desarrollado por Netscape.

Link Enlace, liga o vínculo apuntador de hipertexto que sirve para


saltar de una información a otra.

Marcador Punto que se toma como referencia dentro de un archivo para


utilizarlo como destino de un hipervínculo.

Multimedia Información digitalizada que combina texto, gráficos, imágenes,


animación, sonido y video.

Navegador Aplicación para visualizar todo tipo de información.

On-Line Que está conectado en línea.

Página web Documento de texto escrito en un lenguaje HTML.

URL Siglas de Uniform Resource Locutor, es un sistema uniforme de


identificación de los recursos de una red.

Rollovers Es un botón dinámico, capaz de cambiar su apariencia en


función de determinados comportamientos del ratón (encima,
clic, doble clic…)

RSS Es un formato para la sindicación de contenidos de páginas


web. Sus siglas responden a Really Simple Syndication. To
syndicate literalmente significa sindicar (formar parte de un
sindicato. En inglés tiene otro significado: "publicar artículos
simultáneamente en diferentes medios a través de una fuente a
la que pertenece".
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
114
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

XML XML, sigla en inglés de eXtensible Markup Language («lenguaje


de marcas extensible»), es un metalenguaje extensible de
etiquetas desarrollado por el World Wide Web Consortium
(W3C). Es una simplificación y adaptación del SGML y permite
definir la gramática de lenguajes específicos (de la misma
manera que HTML es a su vez un lenguaje definido por SGML).
Por lo tanto XML no es realmente un lenguaje en particular, sino
una manera de definir lenguajes para diferentes necesidades.
Algunos de estos lenguajes que usan XML para su definición
son XHTML, SVG, MathML.

CSS CSS, Siglas en inglés (Content Scrambling System), es un


código de cifrado utilizado en los DVD (Digital Versatile Disc)
comerciales, con el fin de cifrar la información multimedia que se
codifica en formato MPEG-2. Fue creado con el fin de
salvaguardar la duplicación ilegal de discos mediante el cifrado
de archivos y la introducción de las claves de cifrado en el
hardware reproductor.

WebTV Es un dispositivo que permite navegar por Internet mediante un


receptor de televisión y una línea telefónica. Además, WebTV,
es una empresa de Microsoft, adquirida en 1997.

PDAs En inglés (Personal Digital Assistant), (Ayudante personal


digital) es un computador de mano originalmente diseñado como
agenda electrónica (calendario, lista de contactos, bloc de notas
y recordatorios) con un sistema de reconocimiento de escritura.
Hoy día se puede usar como una computadora doméstica (ver
películas, crear documentos, juegos, correo electrónico, navegar
por Internet, escuchar música, etc.).

PHP5 PHP es un lenguaje de programación usado frecuentemente


para la creación de contenido para sitios web con los cuales se
puede programar las páginas HTML y los códigos de fuente.
PHP es un acrónimo recursivo que significa "PHP Hypertext Pre-
processor" (inicialmente PHP Tools, o, Personal Home Page
Tools), y se trata de un lenguaje interpretado usado para la
creación de aplicaciones para servidores, o creación de
contenido dinámico para sitios web. Últimamente también para
la creación de otro tipo de programas incluyendo aplicaciones
con interfaz gráfica usando las librerías Qt o GTK+.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
115
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

ColdfusiónMx7 ColdFusion es un lenguaje de programación, puede crear y


modificar variables igual que en otros lenguajes de
programación que nos son familiares. Posee control de flujo de
programas, como IF, Case, ciclo, etc. Tiene muchas funciones
built-in para realizar tareas más complicadas, por ejemplo: para
averiguar en qué día caerá el 3 de Agosto del 2007

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
116
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Conclusiones
Dreamweaver 8 puede integrar entradas RSS provenientes de otras páginas
con sólo introducir la fuente y arrastrar y colocar los campos. De esta forma
podrá introducir datos en formato XML fácil y cómodamente.

Esta última versión ha mejorado mucho respecto a la compatibilidad y


manejo de estilos de cascada. De esta forma se ha mejorado el panel de
estilos CSS, donde ahora podrá acceder a la configuración de cada uno de
los estilos desde una lista mucho mejor dotado de una cuadrícula editable
desde donde se modificarán sus propiedades. Además, Dreamweaver 8,
añade una nueva barra de herramientas que proporciona la reproducción
inmediata de los estilos para diferentes medios (pantalla, impresora, webTV,
PDAs...).

Su sincronización ha mejorado notablemente siendo posible una mejor


gestión de cambios, además de permitir en uso de bolqueo/desbloqueo de
archivos para que estos no se sobreescriban.

Los usuarios con problemas visuales podrán acceder a una opción de


Aumento de la pantalla en vista de diseño para analizar o trabajar con
difíciles anidamientos de tablas. Además de la inclusión de información visual
gracias a las guías que permitirán la medición píxel a píxel de todos los
elementos.

Se ha añadido una barra de herramientas a Dreamweaver 8, podrá


encontrarla en la parte lateral izquierda del modo de Código, esta barra hace
mucho más accesible el código al permitir la navegación por etiquetas y su
contracción. Una de las nuevas novedades es la posibilidad de añadir
comentarios con un sólo clic.

Concluiremos, además, la compatibilidad añadida en esta versión con PHP5,


Coldfusion MX 7 y Video Flash.

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
117
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

Bibliografía
GASPAR GONZÁLEZ MANGAS y ANTONIA GONZÁLEZ MANGAS. “Negocios
Virtuales”. Ed. MC Graw Hill. Primera edición

http://macromedia.com
http://aulaclic.com
http://www.ua.es/ugt/cursos/curso_diseno_web/ejercicios1_8.pdf
http://www.adrformacion.com/cursos/dream/dream.html
http://www.arp.jazztel.es/dreamweaver.htm
http://www.arp.jazztel.es/dreamweaver.htm

Índice de Ilustraciones
ILUSTRACIÓN 1. RUTA DE ACCESO A DREAMWEAVER 8. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 8 
ILUSTRACIÓN 2. VENTANA PRINCIPAL DE DREAMWEAVER. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 9 
ILUSTRACIÓN 3. ENTORNO DE TRABAJO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 10 
ILUSTRACIÓN 4. PANTALLA INICIAL. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 11 
ILUSTRACIÓN 5. BARRA DE TÍTULO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 12 
ILUSTRACIÓN 6. BARRA DE MENÚS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 12 
ILUSTRACIÓN 7. BARRA DE HERRAMIENTAS ESTÁNDAR. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 12 
ILUSTRACIÓN 8. BARRA DE HERRAMIENTAS DE DOCUMENTO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 12 
ILUSTRACIÓN 9. BARRA DE ESTADO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 13 
ILUSTRACIÓN 10. INSPECTOR DE PROPIEDADES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 13 
ILUSTRACIÓN 11. BARRA DE HERRAMIENTAS INSERTAR. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 13 
ILUSTRACIÓN 12. BARRA DE HERRAMIENTAS DE UN DOCUMENTO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 14 
ILUSTRACIÓN 13. VISTA DISEÑO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 14 
ILUSTRACIÓN 14. VISTA CÓDIGO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 15 
ILUSTRACIÓN 15. VISTA CÓDIGO Y DISEÑO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 15 
ILUSTRACIÓN 16. EJEMPLO DE ORGANIZACIÓN DE CARPETAS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 16 
ILUSTRACIÓN 17. MENÚ SITIO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 18 
ILUSTRACIÓN 18. ADMINISTRAR SITIOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 18 
ILUSTRACIÓN 19. DEFINICIÓN DEL SITIO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 19 
ILUSTRACIÓN 20. ASISTENTE PARA CREAR SITIOS WEB. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 20 
ILUSTRACIÓN 21. PANEL DE ARCHIVOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 20 
ILUSTRACIÓN 22. MAPA DEL SITIO Y SITIO LOCAL. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 21 
ILUSTRACIÓN 23. ACTUALIZAR ARCHIVOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 22 
ILUSTRACIÓN 24. OPCIÓN PARA DAR MANTENIMIENTO AL SITIO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 22 
ILUSTRACIÓN 25. PANEL DEL SITIO CONTRAÍDO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 23 
ILUSTRACIÓN 26. PANEL DEL SITO AMPLIADO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 23 
ILUSTRACIÓN 27. MENÚ CONTEXTUAL. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 24 
ILUSTRACIÓN 28. CREACIÓN DE UN NUEVO ARCHIVO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 25 
ILUSTRACIÓN 29. OPCIÓN PARA IMPORTAR TEXTO DE WORD. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 27 
ILUSTRACIÓN 30. IMPORTAR DOCUMENTO DE WORD. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 27 
ILUSTRACIÓN 31. PANEL DE PROPIEDADES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 28 
ILUSTRACIÓN 32. PROPIEDADES DE LISTA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 30 

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
118
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

ILUSTRACIÓN 33. MENÚ INSERTAR, COMANDO FECHA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 31 
ILUSTRACIÓN 34. CUADRO DE DIÁLOGO INSERTAR FECHA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 32 
ILUSTRACIÓN 35. BARRA INSERTAR. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 32 
ILUSTRACIÓN 36. CARACTERES ESPECIALES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 33 
ILUSTRACIÓN 37. OTROS CARACTERES ESPECIALES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 33 
ILUSTRACIÓN 38. REGLA HORIZONTAL. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 34 
ILUSTRACIÓN 39. PROPIEDADES DE LA LÍNEA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 35 
ILUSTRACIÓN 40. VENTANA DE PREFERENCIAS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 36 
ILUSTRACIÓN 41. MENÚ PARA REVISAR LA ORTOGRAFÍA DE UN DOCUMENTO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 36 
ILUSTRACIÓN 42. CUADRO DE DIÁLOGO ORTOGRAFÍA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 37 
ILUSTRACIÓN 43. PANEL DE PROPIEDADES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 38 
ILUSTRACIÓN 44. NOMBRE DEL ESTILO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 39 
ILUSTRACIÓN 45. CAMBIAR NOMBRE A UN ESTILO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 39 
ILUSTRACIÓN 46. PANEL ESTILOS CSS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 40 
ILUSTRACIÓN 47. LOCALIZA O ESCRIBE LA RUTA DE LA HOJA DE ESTILO CSS A VINCULAR. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 41 
ILUSTRACIÓN 48. HIPERVÍNCULO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 44 
ILUSTRACIÓN 49. EJEMPLO DE IMAGEN CON VÍNCULO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 46 
ILUSTRACIÓN 50. PROPIEDADES DE IMAGEN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 46 
ILUSTRACIÓN 51. VÍNCULO PARA CORREO ELECTRÓNICO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 47 
ILUSTRACIÓN 52. PANEL ACTIVOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 49 
ILUSTRACIÓN 53. PANEL SITIO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 49 
ILUSTRACIÓN 54. CUADRO DE DIÁLOGO SELECCIONAR ORIGEN DE IMAGEN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 50 
ILUSTRACIÓN 55. EJEMPLO DE CÓDIGO HTML AL INSERTAR UNA IMAGEN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 51 
ILUSTRACIÓN 56. INSPECTOR DE PROPIEDADES DE UNA IMAGEN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 51 
ILUSTRACIÓN 57. ALINEACIÓN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 52 
ILUSTRACIÓN 58. INSPECTOR DE PROPIEDADES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 54 
ILUSTRACIÓN 59. EJEMPLO DE MAPA DE IMAGEN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 55 
ILUSTRACIÓN 60. PROPIEDADES DE MAPA DE IMAGEN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 55 
ILUSTRACIÓN 61. INSERTAR IMAGEN DE SUSTITUCIÓN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 56 
ILUSTRACIÓN 62. INSERTAR BOTÓN DE FLASH. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 57 
ILUSTRACIÓN 63. PANEL DE PROPIEDADES DEL BOTÓN DE FLASH. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 58 
ILUSTRACIÓN 64. INSERTAR TEXTO DE FLASH. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 59 
ILUSTRACIÓN 65. INSERTAR BARRA DE NAVEGACIÓN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 60 
ILUSTRACIÓN 66. EJEMPLO DE TABLA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 62 
ILUSTRACIÓN 67. MENÚ PARA INSERTAR UNA TABLA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 63 
ILUSTRACIÓN 68. VENTANA PARA INDICAR LAS CARACTERÍSTICAS DE LA TABLA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 64 
ILUSTRACIÓN 69. TABLA CON CONTENIDO Y FORMATO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 65 
ILUSTRACIÓN 70. OPCIÓN QUE PERMITE SELECCIONAR UNA TABLA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 66 
ILUSTRACIÓN 71. ETIQUETA DE UNA TABLA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 66 
ILUSTRACIÓN 72. MENÚS QUE PERMITEN ACCEDER RÁPIDAMENTE A LA TABLA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 67 
ILUSTRACIÓN 73. VENTANA DEL INSPECTOR DE PROPIEDADES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 68 
ILUSTRACIÓN 74. VENTANA DEL INSPECTOR DE PROPIEDADES DE UNA CELDA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 69 
ILUSTRACIÓN 75. VENTANA DE PROPIEDADES QUE PERMITE CAMBIAR EL ANCHO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 69 
ILUSTRACIÓN 76. MENÚ PARA INSERTAR UNA FILA O COLUMNA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 70 
ILUSTRACIÓN 77. VENTANA PARA INSERTAR FILAS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 70 
ILUSTRACIÓN 78. VENTANA PARA INSERTAR COLUMNAS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 71 
ILUSTRACIÓN 79. MENÚ QUE PERMITE ELIMINAR UNA FILA O UNA COLUMNA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 71 
ILUSTRACIÓN 80. TABLA ANIDADA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 72 
ILUSTRACIÓN 81. VENTANA PARA SELECCIONAR LOS BOTONES DE DIVIDIR Y COMBINAR CELDAS. ‐‐‐‐‐‐‐‐‐ 73 
ILUSTRACIÓN 82. VENTANA PARA DIVIDIR FILAS O COLUMNAS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 73 
ILUSTRACIÓN 83. MENÚ QUE PERMITE CAMBIAR EL MODO DE TABLA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 74 
ILUSTRACIÓN 84. ESTRUCTURA DE LOS MARCOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 75 
Módulo III Dreamweaver
Instructora: Lic. Norma Fernández Osorio
119
CNAD – Mecatrónica
Diplomado: “Diseño de páginas web”

ILUSTRACIÓN 85. MENÚ PARA CREAR MARCOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 76 
ILUSTRACIÓN 86. MARCO A LA IZQUIERDA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 77 
ILUSTRACIÓN 87. MARCO A LA DERECHA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 78 
ILUSTRACIÓN 88. EJEMPLOS DEL INSPECTOR DE MARCOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 79 
ILUSTRACIÓN 89. INSPECTOR DE PROPIEDADES DE UN MARCO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 80 
ILUSTRACIÓN 90. BORDES DE UN MARCO DESDE EL INSPECTOR DE PROPIEDADES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 81 
ILUSTRACIÓN 91. INSPECTOR DE PROPIEDADES DE UN MARCO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 81 
ILUSTRACIÓN 92. EJEMPLO DE UN FORMULARIO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 83 
ILUSTRACIÓN 93. OPCIÓN PARA CREAR UN FORMULARIO ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 84 
ILUSTRACIÓN 94. MUESTRA DE LA LÍNEA PUNTEADA INDICANDO QUE ES UN FORMULARIO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 85 
ILUSTRACIÓN 95. INSPECTOR DE PROPIEDADES DE UN FORMULARIO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 85 
ILUSTRACIÓN 96. INSPECTOR DE PROPIEDADES DE UN CAMPO DE TEXTO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 86 
ILUSTRACIÓN 97. EJEMPLO DEL USO DE LAS CASILLAS DE VERIFICACIÓN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 87 
ILUSTRACIÓN 98. GRUPO DE OPCIONES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 88 
ILUSTRACIÓN 99. GRUPO DE OPCIÓN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 89 
ILUSTRACIÓN 100. MENÚ PARA ESTABLECER LAS PROPIEDADES DE UN GRUPO DE OPCIONES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 89 
ILUSTRACIÓN 101. EJEMPLO DE UNA LISTA/MENÚ ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 90 
ILUSTRACIÓN 102. MENÚ PARA AÑADIR VALORES A UN MENÚ DESPLEGABLE. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 91 
ILUSTRACIÓN 103. INSPECTOR DE PROPIEDADES DE UN CAMPO DE ARCHIVO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 92 
ILUSTRACIÓN 104. PROPIEDADES DE UN BOTÓN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 92 
ILUSTRACIÓN 105. CONFIGURA LAS OPCIONES DE UN MENÚ DE SALTO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 94 
ILUSTRACIÓN 106. BARRA DONDE SE SELECCIONA EL FORM. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 95 
ILUSTRACIÓN 107. MENÚ PARA INDICAR EL COMPORTAMIENTO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 96 
ILUSTRACIÓN 108. PANEL DE COMPORTAMIENTOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 96 
ILUSTRACIÓN 109. MENÚ DE ACCIONES DEL PANEL COMPORTAMIENTOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 97 
ILUSTRACIÓN 110. VALIDAR DATOS DE LOS ELEMENTOS DE UN FORMULARIO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 97 
ILUSTRACIÓN 111. MENSAJE DE AVISO DEL NAVEGADOR, CUANDO SE HA TECLEADO UN VALOR 
INCORRECTO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 99 
ILUSTRACIÓN 112. DEFINIR MENSAJE PARA EL USUARIO ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 99 
ILUSTRACIÓN 113. PANEL DE ACTIVOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 100 
ILUSTRACIÓN 114. GUARDAR CÓMO PLANTILLA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 102 
ILUSTRACIÓN 115. REGIÓN EDITABLE. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 103 
ILUSTRACIÓN 116. SELECCIONAR PLANTILLA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 104 
ILUSTRACIÓN 117. REGIONES NO COINCIDENTES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 104 
ILUSTRACIÓN 118. EJEMPLO DE RECUADROS NEGROS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 106 
ILUSTRACIÓN 119. PANEL DE CAPAS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 107 
ILUSTRACIÓN 120. INSPECTOR DE PROPIEDADES DE CAPAS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 107 
ILUSTRACIÓN 121. INSERTAR BOTÓN DE FLASH. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 109 
ILUSTRACIÓN 122. CONTROLES DE AUDIO.‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 111 
ILUSTRACIÓN 123. INSPECTOR DE PROPIEDADES PARA ARCHIVOS DE VIDEOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 112 

Módulo III Dreamweaver


Instructora: Lic. Norma Fernández Osorio
120

También podría gustarte