Paginas Web Avanzado Guia 3 Parte 1

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..................................................................... Configurar nuevo sitio con Dreamwaver....................................................... Editar un sitio web existente......................................................................... La ventana sitio............................................................................................. Ver y abrir archivos en la ventana sitio......................................................... Utilizar el mapa sitio...................................................................................... Configurar documento Crear, abrir y guardar documentos HTML.................................................... Configurar las propiedades del documento.................................................. Seleccionar elementos en la ventana de documento...................................

5 6 8 10 10 13 14 17 18 20 21

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 .................................................................... Dibujar celdas y tablas de disposición.......................................................... Mover y cambiar el tamaño de celdas y tablas de disposición .................... Aplicar formato a celdas y tablas de disposición.......................................... Configurar el ancho de la disposición........................................................... Configurar las preferencias de la vista de disposición..................................

23 24 29 30 31 32

Utilización de tablas para presentar contenidos Insertar una tabla......................................................................................... Seleccionar elementos de tabla................................................................... Aplicar formato a tablas y celdas................................................................. Cambiar el tamaño de tablas y celdas......................................................... Añadir y eliminar filas y columnas................................................................ Copiar y pegar celdas.................................................................................. Ordenar tablas............................................................................................. Exportar datos..............................................................................................

34 35 37 37 38 39 41 42

Marcos Cuando utilizar marcos................................................................................ Crear páginas web basadas en marcos....................................................... Seleccionar un marco o un conjunto de marcos........................................... Guardar archivos de marcos y conjuntos de marcos.................................... Propiedades de marcos y conjuntos de marcos........................................... Controlar el contenido del marco con vínculos.............................................

43 44 44 45 47 48

Activos Utilizar panel de activos................................................................................ Utilizar activos favoritos................................................................................

50 54

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

55 56 58 60

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

62 63 66 68 69

Uso conjunto de Fireworks y Dreamwaver Inclusión de archivos de fireworks en dreamwaver....................................... Ejecución de fireworks desde dreamwaver................................................... Edición de archivos de fireworks colocados en dreamwaver........................

70 75 76

Elementos de Multimedia Insertar objetos multimedia............................................................................ Iniciar un editor externo................................................................................. Contenido de flash......................................................................................... Utilizar objetos de botón flash........................................................................ Utilizar objetos de texto flash......................................................................... Configurar propiedades de objetos flash....................................................... Insertar películas flash................................................................................... Insertar objetos generator.............................................................................. Películas shockwave...................................................................................... Insertar un control Activex............................................................................. Insertar un applet de java.............................................................................

80 81 83 84 87 89 92 93 94 94 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.................................................................. Crear vínculos ............................................................................................... Administrar vínculos....................................................................................... Crear menús de salto.....................................................................................

104 105 106 108

Formularios Objetos de formularios.................................................................................. Crear formulario............................................................................................ Campos de formulario................................................................................... Insertar casilla de verificación y botones de opción..................................... Botones de formulario................................................................................... Diseño de formularios................................................................................... Procesar formularios..................................................................................... Usar comportamientos..................................................................................

109 111 113 118 121 123 125 127

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

128 129 129 131 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.