INSTITUTO NACIONAL DE COOPERACIÓN EDUCATIVA

GUÍA DE ESTUDIO 3/3

DISEÑO DE PÁGINAS

WEB AVANZADO

NIVEL: PERFECCIONAMIENTO

INSTITUTO NACIONAL DE COOPERACIÓN EDUCATIVA

GERENCIA DE FORMACIÓN PROFESIONAL
ASOCIACIÓN CIVIL PORTUGUESA
UNIDAD DE APOYO TÉCNICO DOCENTE
VENEZUELA, 2002
 GUÍA DE ESTUDIO 3/3

DISEÑO DE PÁGINAS
WEB AVANZADO

NIVEL: PERFECCIONAMIENTO
MODO: ACTUALIZACIÓN

Araure, Enero 2002

Diseño de Páginas Web Avanzado

Especialista en Contenido
TSU. Edwin Hernández
TSU. Jesús Rivas
TSU. Oscar Soteldo

Transcripción y Diagramación
Lic. Alexandra Izquierdo G.

Diseño de Cubierta
Lic. Alexandra Izquierdo G.

Colaboradores
Lic. Karina Muñoz

Coordinación Técnica
Nelson Romero M.

Coordinación General
Gerencia General de Formación Profesional

1era edición, Enero de 2002

Copyright INCE
CONTENIDO
¿Qué es el INCE ?
Presentación
Introducción
Objetivo General Pág

UNIDAD 3. Operaciones con Elementos de Dreamwaver

Configurar Sitio
Planificación y diseño de sitios..................................................................... 5
Configurar nuevo sitio con Dreamwaver....................................................... 6
Editar un sitio web existente......................................................................... 8
La ventana sitio............................................................................................. 10
Ver y abrir archivos en la ventana sitio......................................................... 10
Utilizar el mapa sitio...................................................................................... 13

Configurar documento
Crear, abrir y guardar documentos 14
HTML.................................................... 17
18
Configurar las propiedades del
20
documento..................................................
21
Seleccionar elementos en la ventana de
documento...................................
Utilizar guías visuales en el proceso de
diseño............................................
Ver y editar el contenido de la sección
head................................................

Diseño disposición de páginas

Celdas y tablas de disposición .................................................................... 23
Dibujar celdas y tablas de disposición.......................................................... 24
Mover y cambiar el tamaño de celdas y tablas de disposición .................... 29
Aplicar formato a celdas y tablas de disposición.......................................... 30
Configurar el ancho de la disposición........................................................... 31
Configurar las preferencias de la vista de disposición.................................. 32

Utilización de tablas para presentar contenidos

Insertar una tabla......................................................................................... 34
Seleccionar elementos de tabla................................................................... 35
Aplicar formato a tablas y celdas................................................................. 37
Cambiar el tamaño de tablas y celdas......................................................... 37
Añadir y eliminar filas y columnas................................................................ 38
Copiar y pegar celdas.................................................................................. 39
Ordenar tablas............................................................................................. 41
Exportar datos.............................................................................................. 42
Marcos
Cuando utilizar marcos................................................................................ 43
Crear páginas web basadas en marcos....................................................... 44
Seleccionar un marco o un conjunto de marcos........................................... 44
Guardar archivos de marcos y conjuntos de marcos.................................... 45
Propiedades de marcos y conjuntos de marcos........................................... 47
Controlar el contenido del marco con vínculos............................................. 48

Activos
Utilizar panel de activos................................................................................ 50
Utilizar activos favoritos................................................................................ 54

Personalización de páginas
Insertar textos y objetos................................................................................ 55
Crear listas.................................................................................................... 56
Configuración de fuentes, estilos, color y alineación.................................... 58
Utilizar estilos HTML para aplicar formato a texto........................................ 60

Imágenes
Insertar una imagen ..................................................................................... 62
Configurar propiedades de imágenes........................................................... 63
Crear mapas de imagen............................................................................... 66
Utilizar un editor de imágenes externo......................................................... 68
Aplicar comportamiento a imágenes............................................................. 69

Uso conjunto de Fireworks y Dreamwaver

Inclusión de archivos de fireworks en dreamwaver....................................... 70
Ejecución de fireworks desde dreamwaver................................................... 75
Edición de archivos de fireworks colocados en dreamwaver........................ 76

Elementos de Multimedia
Insertar objetos multimedia............................................................................ 80
Iniciar un editor externo................................................................................. 81
Contenido de flash......................................................................................... 83
Utilizar objetos de botón flash........................................................................ 84
Utilizar objetos de texto flash......................................................................... 87
Configurar propiedades de objetos flash....................................................... 89
Insertar películas flash................................................................................... 92
Insertar objetos generator.............................................................................. 93
Películas shockwave...................................................................................... 94
Insertar un control Activex............................................................................. 94
Insertar un applet de java............................................................................. 95

Edición HTML en Dreamwaver

Insertar comentarios...................................................................................... 96
 Utilizar el panel referencia de dremwaver...................................................... 97
Editar una etiqueta HTML en vista de diseño................................................ 97
Configurar preferencias de formato de código............................................... 100
Limpiar código HTML..................................................................................... 101
Utilizar editores de HTML externos................................................................ 103

Crear vínculos y navegar

Ubicación y rutas de documentos.................................................................. 104
Crear vínculos ............................................................................................... 105
Administrar vínculos....................................................................................... 106
Crear menús de salto..................................................................................... 108

Formularios
Objetos de formularios.................................................................................. 109
Crear formulario............................................................................................ 111
Campos de formulario................................................................................... 113
Insertar casilla de verificación y botones de opción..................................... 118
Botones de formulario................................................................................... 121
Diseño de formularios................................................................................... 123
Procesar formularios..................................................................................... 125
Usar comportamientos.................................................................................. 127

Comprobar y Publicar un sitio

Comprobar la compatibilidad con los navegadores...................................... 128
Usar comportamientos para detectar navegadores y plug-ins..................... 129
Vista previa en nevegadores........................................................................ 129
Comprobar el tiempo de descarga y el tamaño............................................ 131
Utilizar informes para comprobar un sitio..................................................... 131

Bibliografía...................... ................................................................................ 135

¿QUÉ ES EL INCE ?
 El Instituto Nacional de Cooperación Educativa (INCE), es un organismo
autónomo con personalidad jurídica y patrimonio propio, adscrito al Ministerio de
Educación, creado por Ley el 22 de Agosto de 1959 y reglamentado por Decreto el
11 de Marzo de 1960 de acuerdo con Decreto publicado en la Gaceta Oficial No
34563 de fecha 28 de Septiembre, se reforma el reglamento de la Ley del INCE,
con la finalidad de reorganizarlo y adecuarlo a los intereses del País y al proceso
de reconversión industrial .

El INCE es el ente Rector de la Formación Profesional en Venezuela, razón

por la cual su acción ha estado dirigida a la formación y capacitación de la fuerza
laboral, en consonancia con las necesidades de los sectores productivos y con las
políticas de desarrollo económico y social del estado venezolano.

El Instituto tiene como Misión: “ Lograr bajo tutela del Estado y con la
colaboración de los patronos y trabajadores de los sectores productivos de
bienes y servicios, una eficiente formación y capacitación continua de la
fuerza laboral, complementando la educación recibida en el sistema formal “.

PRESENTACIÓN
Apreciado participante: Este manual es el resultado del esfuerzo de un equipo que
ha trabajado arduamente con el fin de ayudarle a formarse en el oficio que ha
seleccionado.

El contenido se ajusta a un programa de estudio diseñado según los

requerimientos del oficio; pero desearíamos que , además , investigue en otras
fuentes para incrementar los conocimientos adquiridos.

Esperamos que aproveche al máximo la oportunidad que el INCE le brinda de

convertirse en un trabajador altamente capacitado, que responda ampliamente, a
las exigencias de su área laboral y en un ser humano modelo.

INTRODUCCIÓN
 Macromedia Dreamweaver es un editor de código HTML profesional para el
diseño visual y la administración de sitios y páginas Web. Bien se se desea
controlar manualmente el código HTML como si se prefiere trabajar en un entorno
de edición visual, este permite ponerse manos a la obra rápidamente y facilita
herramientas útiles para mejorar su experiencia en diseño Web.

Las funciones de edición visual de Dremweavwr también le permite añadir

diseño y funcionalidad rápidamente sin escribir una sola línea de código. Puede
ver todos los elementos o activos de un sitio y arrastrarlos desde un panel fácil de
usar directamente hasta un documento.