Documentos de Académico
Documentos de Profesional
Documentos de Cultura
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
OBJETIVO GENERAL
1.1 Presentación
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.
2.1 Presentación
Muchas de las operaciones se pueden hacer a partir de estos menús, pero para
algunas es preferible o indispensable hacerlas desde los paneles.
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%).
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.
3.1 Presentación
Antes de crear un sitio web, hay que planearlo y definir con claridad los puntos
siguientes:
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.
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....
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.
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.
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.
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.
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.
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 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:
• 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.
4.1 Presentació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.
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.
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
Tamaño
Color
Estilo
Alinear
Listas
Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o
con viñetas.
1. Preparar la mochila
• 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ú.
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.
En el menú Texto, opción Estilo, aparecen una serie de estilos predefinidos que
pueden aplicarse al texto seleccionado.
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.
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.
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”
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.
Hojas de Estilos
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...
Capítulo 5. Hipervínculos
5.1 Presentación
• Referencia absoluta:
Si se quiere referir a carpetas que están por encima del nivel donde nos
encontramos se deberá utilizar ../
• Puntos de fijación:
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.
Por ello, es muy recomendable que se utilice siempre minúsculas para evitar
fallos en los enlaces.
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 #.
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.
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.
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.
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.
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.
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).
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.
• 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
• 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.
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:
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.
Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero
alguno de los recuadros negros que aparecen alrededor de la imagen.
Los mapas de imagen son partes de una imagen que pueden ser utilizadas para
asignarle algún tipo de comportamiento.
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”
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.
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:
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:).
A través del inspector de propiedades del botón Flash es posible editar de nuevo
sus atributos:
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.
Para insertar una barra de navegación hay que dirigirse al menú Insertar,
Objetos de imagen, a la opción Barra de navegación.
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.
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.
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.
• Grosor del borde indica el grosor del borde de la tabla en pixeles, por
defecto se le asigna 1.
En Alinear texto: indica dónde quiere alinear el título con respecto a la tabla.
Las celdas son cada uno de los recuadros que forman una tabla, resultan de la
intersección entre una fila y una columna.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama
anidar tablas.
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.
Ilustración 81. Ventana para seleccionar los botones de dividir y combinar celdas.
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.
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
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.
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.
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.
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.
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.
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.
No es necesario seleccionar los marcos para editar los documentos que éstos
contengan.
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.
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.
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 cada uno de los otros documentos, simplemente hay que situar el
cursor en ellos antes de pulsar sobre Guardar .
Una vez seleccionado un marco a través del panel Marcos, pueden establecerse
sus propiedades a través del inspector de propiedades.
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.
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.
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.
Además de estos destinos para los enlaces, también aparecerán los nombres de
los distintos marcos de la página.
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.
Capítulo 9. Formularios
9.1 Presentación
Para añadir un formulario a una página web, realizar los pasos siguientes:
Una vez insertada la estructura básica para el formulario, se puede configurar sus
propiedades utilizando el Inspector de propiedades.
• 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.
Campos de texto
Permiten al usuario dar una respuesta escribiendo texto. Dreamweaver ofrece tres
tipos de campos de texto:
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.
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.
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)
• 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”
Menú lista
• 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.
Campo de archivo
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.
Campo de imagen
Campo oculto
Menú de salto
• 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”
Comportamientos de formulario
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.
• Si se desea validar múltiples campos, repetir los primeros 4 pasos para cada
uno de los campos que se desee validar.
Ilustración 111. Mensaje de aviso del navegador, cuando se ha tecleado un valor incorrecto.
• 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.
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.
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.
Las plantillas son archivos con la extensión DWT que se guardan en el sitio web,
dentro de una carpeta llamada Templates.
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.
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).
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.
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.
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.
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.
Una vez abierto el documento, hay que dirigirse al menú Modificar, Plantillas,
opción Aplicar plantilla a página.
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.
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.
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.
Este icono sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se
elimina también la 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.
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.
• Iz y Sup indican la distancia en píxeles que hay entre los límites izquierdo
y superior del documento y la capa.
A través de Im. fondo y Col puede indicarse una imagen o un color de fondo
para la capa.
12.1 Presentación
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.
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.
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.
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.
Glosario
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.
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
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