Paginas Web Avanzado Guia 1 Parte 1

INSTITUTO NACIONAL DE COOPERACIÓN EDUCATIVA

GUÍA DE ESTUDIO

1/3

DISEÑO DE PÁGINAS

WEB AVANZADO

NIVEL: PERFECCIONAMIENTO

VENEZUELA, 2002

INSTITUTO NACIONAL DE COOPERACIÓN EDUCATIVA GERENCIA DE FORMACIÓN PROFESIONAL ASOCIACIÓN CIVIL PORTUGUESA UNIDAD DE APOYO TÉCNICO DOCENTE

GUÍA DE ESTUDIO 1/3

DISEÑO DE PÁGINAS Diseño de Páginas Web Avanzado 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.

NIVEL: PERFECCIONAMIENTO MODO: ACTUALIZACIÓN

Coordinación General Araure, Enero 2002 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 UNIDAD I. Operaciones Básicas con Fireworks

Pág

Configuración de Documentos en Fireworks Creación de un nuevo documento................................................................ Apertura de gráficos de otras aplicaciones................................................... Importación desde un escáner o cámara digital........................................... Inserción de objetos en un documento de Fireworks.................................... Importación de archivos PNG....................................................................... Visualización y navegación por el documento.............................................. Visualización de vistas múltiples de un documento...................................... Uso de reglas, guías y cuadrículas...............................................................

5 6 10 11 12 13 14 15

Trabajo con objetos en Fireworks Selección de objetos en modo vectorial....................................................... Uso del panel de objeto................................................................................ Uso de herramientas.................................................................................... Uso de panel de capas................................................................................ Transformación y distorsión de objetos........................................................ Visualización de información sobre transformaciones................................. Rotación de objetos...................................................................................... Inclinación de objetos................................................................................... Distorsión de objetos....................................................................................

19 19 20 22 22 23 24 25 25

Mapas de bits en Fireworks Acceso al modo mapa bits........................................................................... Selección de áreas de píxeles...................................................................... Selección de opciones de la herramienta recuadro...................................... Ajuste de un recuadro de selección.............................................................. Adición o eliminación de píxeles mediante teclas modificadoras.................

26 27 28 28 29

Uso de Textos Introducción de textos................................................................................... Desplazamiento de bloques de texto............................................................ Edición de texto............................................................................................. Selección de una fuente................................................................................

31 32 32 33

Definición de una línea base e interlineado................................................. Definición de la dirección y orientación......................................................... Aplicación de color al texto........................................................................... Suavizado de los bordes de texto................................................................. Aplicación de trazos, rellenos, efectos y estilos al texto............................... Almacenamiento de atributos de texto......................................................... Asociación de texto a un trazado.................................................................. Conversión de texto en trazados.................................................................. Importación de archivos RTF.......................................................................

35 35 37 37 38 38 39 42 42

Aplicación de colores, trazos y rellenos Elección de colores....................................................................................... Aplicación de colores.................................................................................... Muestreo de colores..................................................................................... Personalización del panel muestras............................................................. Cambio de grupos de muestras.................................................................... Aplicación de trazos..................................................................................... Cambio de un relleno sólido.........................................................................

43 44 44 45 48 49 51

Aplicación de efectos automáticos en fireworks Aplicación de un efecto automático............................................................... Aplicación de efectos tradicionales................................................................ Aplicación de bordes biselados..................................................................... Aplicación de efectos de relieve.................................................................... Aplicación de sombras................................................................................... Cambio de efectos automáticos..................................................................... Eliminación de efectos automáticos...............................................................

52 53 53 54 55 56 57

Capas y Enmascaramientos La capa de web.............................................................................................. Trabajo con capas......................................................................................... Creación de máscaras de mapa de bits y de vectores.................................. Creación de una máscara utilizando un objeto existente.............................. Aplicación del efecto automático relleno de color..........................................

58 58 62 63 63

Uso de Bibliotecas, estilos y URL en Fireworks Uso de estilos................................................................................................ Uso de bibliotecas de símbolos..................................................................... Trabajo con URL............................................................................................

64 67 69

Creación de botones y barras de navegación Creación de botones...................................................................................... Adición de estado Sobre y Abajo.................................................................. Uso de efectos de biselado para dibujar estados de un botón...................... Inserción de botones de la biblioteca.............................................................

72 73 73 74

Zonas Interactivas y divisiones Creación de zonas interactivas y de mapas de imagen................................ Asignación de valores URL a zonas interactivas........................................... Especificaciones de texto.............................................................................. Elección de una opción Alt.............................................................................

75 77 78 78

Creación de Rollovers Creación de rollovers simples mediante el panel comportamientos.............. Configuración de la división, imágenes y fotogramas.................................... Aplicación del comportamiento rollover simple a la división.......................... Creación de rollover desnudos mediante comportamientos arrastrar........... Asignación de vínculos de URL a rollovers...................................................

79 79 80 80 81

Creación de Animaciones Trabajo con símbolos de animación............................................................... Trabajo con fotogramas................................................................................. Configuración de la demora de fotogramas................................................... Visualización y ocultación de fotogramas durante la reproducción............... Asignación de nombres a fotogramas durante la reproducción..................... Adición, desplazamiento, copia y eliminación de fotogramas........................ Desplazamiento de objetos seleccionados en el panel fotogramas.............. Explotación de la animación..........................................................................

82 83 83 84 85 85 87 87

Optimización de gráficos en Fireworks Optimización en el área de trabajo............................................................... Definición de ajustes de optimización para divisiones.................................. Almacenamiento y reutilización de ajustes................................................... Presentación preliminar de los ajustes de optimización y comportamientos........................................................................................... Estimación del tiempo de descarga del archivo............................................ Elección del Formato GIF............................................................................. Elección del Formato JPEG.......................................................................... Eliminación de todos los colores no utilizados de la paleta........................... Optimización de paletas de colores............................................................... Elección de la paleta de color adecuada....................................................... Exportación de Imágenes en Fireworks Exportación de una imagen.......................................................................... Exportación con el asistente de exportación................................................ Optimización y presentación preliminar durante la exportación...................

88 90 90 91 92 92 93 95 95 95 98 99 100

Bibliografía...................... ................................................................................ 104

¿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

Fireworks constituye una herramienta perfecta para diseñar y producir elementos gráficos para la Web. Se trata del primer entorno de producción que afronta con éxito los grandes retos de los diseñadores y desarrolladores de gráficos web. Se utiliza para crear, editar y animar gráficos Web, añadir interactividad avanzada y optimizar imágenes en un entorno profesional. Este combina las herramientas de edición de mapa de bits y de vectores. En Fireworks, todos los elementos pueden editarse en cualquier momento. El flujo de trabajo puede automatizarse para satisfacer las necesidades de cambio y actualización.