Adobe Fireworks CS3. Instituto Superior Tecnológico SISE. Adobe Fireworks CS3

Transcripción

1 Adobe Fireworks CS3 Instituto Superior Tecnológico SISE Adobe Fireworks CS3

2 INTRODUCCION A ADOBE FIREWORKS CS3 Adobe Fireworks CS3 es uno de los programas más avanzados para diseñar y producir elementos gráficos para las páginas Web. Con él podrás crear de manera rápida y sencillo cualquier gráfico para una página Web, utilizando elementos visuales que harán que tu diseño sea atractivo visualmente. En esta sesión conocerás los elementos del entorno de trabajo, las diferentes secciones de herramientas que se pueden utilizar, la ventana del documento, los paneles y el inspector de propiedades. INGRESAR AL PROGRAMA ADOBE FIREWORKS CS3 Para que puedas ingresar a trabajar al programa Adobe Fireworks CS3 debes completar los siguientes pasos: Haz clic en el botón Inicio y luego en la opción Todos los programas. Finalmente selecciona Adobe Fireworks CS3 Adobe Fireworks CS3 2

3 CREAR UN NUEVO ARCHIVO Para crear un nuevo archivo realiza lo siguiente: 1. En la Ventana de Adobe Fireworks CS3 cargada inicialmente haz clic en: Crear Nuevo > Documento de Fireworks (PNG). 2. Observa que aparece la ventana Nuevo documento. Debes configura las propiedades (ancho, alto y color) del lienzo y hacer clic con el botón aceptar. Adobe Fireworks CS3 3

4 ENTORNO DE TRABAJO Cuando ingreses a trabajar con el programa encontrarás los siguientes elementos: 1. El Menú Principal: Contiene las opciones principales para que puedas controlar el funcionamiento adecuado de Fireworks. 2. La Barra de Herramientas: Contiene los botones y menús emergentes que te permiten seleccionar objetos, trabajar con objetos de mapas de bits y vectores, diseñar áreas Web y aplicar colores. 3. La Ventana de Documento: Muestra el documento actual mientras lo estás creando y editando. 4. La Regla Horizontal y Vertical: Permite trabajar con medidas exactas dentro del documento. 5. Los Paneles Acoplables: Contienen fichas que permiten abrir y cerrar los inspectores y paneles que se utiliza con mayor frecuencia. 6. El Panel de Propiedades: Muestra propiedades del objeto o texto seleccionado y permite modificar dichas propiedades EL LIENZO Cuando ingresas a trabajar con Fireworks, lo primero que debes hacer es definir el espacio para un nuevo documento. Este espacio se denomina Lienzo. Para ello realiza lo siguiente: 1. En la ventana de Fireworks haz clic en la opción Archivo de Fireworks ubicada bajo el título Crear nuevo. Adobe Fireworks CS3 4

5 2. En la ventana Nuevo documento indica el Ancho, Alto, Resolución y el Color del lienzo como se muestra en la imagen y haz clic en el botón Aceptar. 3. Te aparecerá la pantalla de trabajo de Fireworks con el Lienzo en la parte central. LA BARRA DE HERRAMIENTAS El panel herramientas está organizado en seis categorías: Seleccionar, Mapa de bits, Vector, Web, Colores y Ver. Cuando eliges una herramienta, el Inspector de propiedades muestra sus opciones. Algunas opciones permanecen en pantalla mientras trabajas con la herramienta. PANELES Los paneles son elementos adicionales del área de trabajo de Fireworks que se organizan en grupos y te proporcionan acceso a características especiales para realizar el trabajo de diseño. Para mostrar un panel debes seguir los siguientes pasos: 1. Haz clic en el menú Ventana. 2. Selecciona el nombre del panel que deseas activar. Recuerda: Si quieres ocultar / mostrar todos los paneles de la pantalla puedes presionar la tecla F4 o ingresas al menú Ventana y seleccionas Ocultar paneles. Adobe Fireworks CS3 5

6 MANEJANDO TRAZOS VECTORIALES OBJETOS VECTORIALES Los objetos vectoriales son los elementos más importantes de Adobe Fireworks CS3. Un objeto vectorial consiste en trazos de dos puntos conectados por una línea. Los objetos vectoriales retienen su calidad de imagen independientemente de su ampliación o reducción. Para trabajar con objetos vectoriales, Fireworks te proporciona una serie de herramientas agrupadas bajo el título Vector. CREAR OBJETOS VECTORIALES A continuación crearás un diseño que incluye una combinación de objetos vectoriales, para ello realiza lo siguiente: 1. Selecciona la herramienta Rectángulo. 2. En el panel de propiedades haz clic en el botón de color de contorno... y en la paleta de colores escoge el color negro. Luego haz clic en el botón de color de relleno...y en la paleta de colores haz clic en el botón transparente. Adobe Fireworks CS3 6

7 3. Arrastra el puntero del mouse (+) para dibujar un rectángulo en la parte superior del lienzo. 4. Escoge la herramienta Puntero... de la zona seleccionar en la barra de herramientas y haz clic fuera del lienzo. 5. Haz clic en el triángulo pequeño ubicado en el ángulo inferior derecho de la Herramienta Rectángulo y escoge la herramienta Elipse. 6. Dibuja una elipse en la parte inferior derecha del rectángulo para que tu gráfico quede de la siguiente manera: 7. Haz clic en la herramienta Puntero y selecciona el rectángulo y la elipse. Para seleccionar ambos elementos debes presionar Shift+Clic izquierdo y seleccionar cada uno de los objetos. Importante: También puedes seleccionar varios objetos al mismo tiempo dibujando un recuadro alrededor de los objetos utilizando la herramienta Puntero. 8. Haz clic en el menú Modificar, selecciona la opción Combinar trazados y haz clic en perforación. Tus objetos deben verse de la siguiente forma: Adobe Fireworks CS3 7

8 Recuerda: Si deseas observar una vista previa de tu diseño en la Web, presiona la tecla F12 o también activa el menú Archivo y selecciona la opción Vista previa en el navegador. GUARDAR ARCHIVOS EN FIREWORKS Los archivos de trabajo realizados en Fireworks son almacenados en formato PNG, lo que permite que mantengan la mejor calidad posible, especialmente en materia de diseño Web. A continuación vas a grabar el archivo que has estado trabajando. Para ello crea una carpeta Fireworks en tu carpeta llamada Sitio1 ( C:\Sitio1 ). Luego completa los siguientes pasos: 1. Haz clic en el menú Archivo. 2. Selecciona la opción Guardar como. 3. En la sección Guardar en selecciona la carpeta Fireworks y en el cuadro Nombre dígita "Fwrk01" 4. Finalmente, haz clic en el botón Guardar. MANEJO DE TEXTOS Para utilizar textos, Fireworks te proporciona la herramienta Texto que está ubicada en la zona Vector. Cuando activas esta herramienta, el puntero del mouse cambia a una forma que te permite trazar un recuadro en la pantalla donde digitarás tu texto. Además en el panel de propiedades, se muestran las opciones para trabajar el texto como el tipo de letra, tamaño, color, etc. INSERTAR TEXTO Continuarás trabajando con el documento que creaste inicialmente. Para incluir texto en el diseño realiza lo siguiente: 1. Haz clic en la herramienta Texto y dibuja un recuadro al centro de tu lienzo. 2. En la barra de propiedades selecciona la fuente Arial Narrow, tamaño 79, color negro, estilo Cursiva y selecciona como nivel de suavizado Suavizado tenue. 3. Digita la palabra Adobe Fireworks CS3 y haz clic en la herramienta puntero. Luego mueve el objeto a la parte central de tu lienzo. Adobe Fireworks CS3 8

9 Tipo de Fuente Tamaño Estilo Nivel de Suavizado Color CONVERTIR TEXTO EN CURVA 1. Dibuja un círculo de tamaño mediano que tenga color de contorno negro y sin relleno. 2. Coloca el círculo debajo del texto Fireworks. 3. Selecciona ambos objetos. 4. Haz clic en el menú Texto y selecciona la opción Unir al trazado. 5. Observa que el texto se adapta a la forma del círculo. Luego de que el texto está adecuado a la curva, la forma del círculo desaparece v sólo puedes trabajar con el texto. Adobe Fireworks CS3 9

10 6. Haz clic en el triángulo debajo de la herramienta Escala y activa la herramienta Inclinar. 7. Arrastra el nodo inferior derecho hacia abajo para que el objeto se agrande por el costado derecho. 8. Arrastra el nodo inferior izquierdo hacia arriba para que el objeto se reduzca por el costado izquierdo. Tu objeto debe quedar con la siguiente apariencia: Guarda tu documento nuevamente y cierra todos los archivos. Adobe Fireworks CS3 10

11 MAPAS DE BITS OBJETOS DE MAPA DE BITS Los mapas de bits (o imágenes de tramado) son imágenes obtenidas de una cámara digital o de un escáner. Se basan en píxeles, una determinada cantidad de puntos de color por pulgada que configuran una imagen. Para una página Web son suficientes 72 puntos por pulgada (72 dpi.). Para trabajar con objetos de mapa de bits, Fireworks te proporciona una serie de herramientas agrupadas bajo el título Mapa bits. IMPORTAR IMÁGENES Para insertar imágenes en tu documento de Fireworks utilizarás las imágenes que están en la carpeta ARCHIVOS FIREWORKS. 1. Haz clic en el menú Archivo y luego escoge la opción Importar. 2. Ubica la carpeta ARCHIVOS FIREWORKS en la lista Buscar en del cuadro de diálogo Importar. 3. Selecciona la imagen DRAGON y haz clic en el botón Abrir. 4. Observa que en el lienzo, el cursor toma la forma de "L" invertida. 5. Arrastra el puntero del mouse para dibujar un recuadro de línea punteada que demarcará el tamaño de tu imagen. 6. Cuando sueltes el botón del mouse, la imagen aparecerá en tu pantalla: Adobe Fireworks CS3 11

12 Guarda tu documento con el nombre Frwk03 Ejercicio: Importa las siguientes imágenes a tu documento: CARA FEA, OGRO, TORTUGO, TORO y FEO TIPO para que tenga la siguiente apariencia: No te olvides de guardar, nuevamente, tu documento. CORTAR IMÁGENES Fireworks te da la posibilidad de que puedas recortar una parte de tus imágenes de mapa de bits con forma de Recuadro o forma Oval. Para ello realiza lo siguiente: 1. Haz clic en el triángulo inferior de la herramienta Recuadro y selecciona la herramienta Recuadro oval en la zona Mapa bits. 2. En la primera imagen que insertaste, dibuja un recuadro alrededor de la zona de la imagen que deseas recortar. Adobe Fireworks CS3 12

13 3. Haz clic en el menú Seleccionar y escoge la opción Seleccionar inverso. 4. Observa que aparece otro cuadro con línea punteada alrededor de todo el lienzo. 5. Presiona la tecla Supr para cortar la imagen y luego para finalizar presiona la tecla Esc. Tu documento deberá tener la siguiente apariencia: EFECTOS ESPECIALES Todos los objetos utilizados en Fireworks, sean vectoriales o mapa de bits, se pueden resaltar de manera más eficiente aplicando diferentes efectos especiales. El grupo de efectos especiales los puedes encontrar en la parte inferior del panel de propiedades cada vez que seleccionas un objeto. Adobe Fireworks CS3 13

14 Dentro de los efectos especiales que puedes encontrar están: iluminación, desenfocar, ruido, bisel y relieve. APLICAR ILUMINACIÓN 1. Haz clic en la primera imagen. 2. Observa que en el panel de Propiedades se activa la sección de efectos con los signos (+) y ( ). 3. Haz clic en el icono (+) y observa que aparecerá la lista con todos los efectos a aplicar. 4. Selecciona la opción Sombrear e iluminar y escoge la alternativa iluminado. 5. En el cuadro de parámetros de iluminado, coloca el nivel de opacidad en 687o y elige el color Naranja para la iluminación. 6. Al terminar, haz clic fuera del recuadro de parámetros. Tu imagen quedará de la siguiente manera. Anchura Color de la iluminación Opacidad Suavidad Adobe Fireworks CS3 14

15 APLICAR EFECTO DE DESENFOCAR 1. Haz clic en la imagen. 2. En el panel de efectos, selecciona la opción Desenfocar y escoge la alternativa Desenfoque gaussiano. 3. En la ventana Desenfoque gaussiano, mueve el manejador Radio de desenfoque hacia la izquierda hasta alcanzar el valor 2.1 y haz clic en Aceptar. Tu imagen tendrá la siguiente apariencia. APLICAR EFECTO DE RUIDO 1. Haz clic en la imagen. 2. En el panel de efectos, selecciona la opción Ruido y escoge la alternativa Añadir ruido. 3. En la ventana Añadir ruido, reduce la cantidad de ruido hasta el valor Haz clic en el cuadro Color para que el ruido se visualice en blanco y negro. Finalmente haz clic en Aceptar. Tu imagen tendrá la siguiente apariencia. Adobe Fireworks CS3 15

16 APLICAR EFECTO DE BISEL Y RELIEVE 1. Haz clic en la imagen. 2. En el panel de efectos, selecciona la opción Bisel y Relieve y escoge la alternativa Bisel interior. 3. En el cuadro de parámetros de bisel y relieve, coloca la forma del borde del bisel en Plano y la anchura en Para lograr aplicar sombra al objeto que acabas de modificar selecciona la opción Sombrear e iluminar y escoge la alternativa Sombra. 5. Aumenta la distancia a 23 en el cuadro de parámetros de sombra. Tu imagen tendrá la siguiente apariencia. Adobe Fireworks CS3 16

17 AJUSTAR COLOR Y NIVEL DE OPACIDAD 1. Importa el archivo CLIMBER. 2. En el panel de efectos, selecciona la opción Ajusfar color y escoge la alternativa Matiz/Saturación. 3. En la ventana Matiz/Saturación, activa la casilla COLOREAR y mueve el control a Matiz: 276, Saturación: 33, Iluminación: 50. totalmente hacia la izquierda hasta que veas el valor 100 en el recuadro. Luego haz clic en Aceptar. Observa que la imagen se visualiza en blanco y negro. 4. Ahora, cambia el nivel de opacidad hasta 72. El nivel de opacidad lo encuentras arriba de la palabra Efectos en el panel de propiedades. Guarda tu archivo y ciérralo al finalizar. CONVERTIR IMÁGENES EN UN MAPA DE BITS Cuando trabajas con muchas imágenes, Adobe Fireworks CS3 te ofrece la posibilidad de agrupar todas tus imágenes y convertirlas en una sola imagen de mapa de bits. La ventaja de este proceso es que puedes utilizar esta nueva imagen como un fondo para cualquier página Web que puedas crear posteriormente. Para convertir las imágenes en un mapa de bits realiza lo siguiente: 1. Selecciona todas las imágenes utilizadas en el archivo (Puedes presionar las teclas rápidas Ctrl+A) 2. Activa el menú Modificar y selecciona la opción Allanar selección. 3. Observa en tu archivo el conjunto de imágenes se vuelve una sola imagen. Adobe Fireworks CS3 17

18 COLOR DE RELLENO DEGRADADO Fireworks te permite trabajar toda una gama de colores de los cuales destacan los colores de relleno degradado. Las combinaciones de colores las puedes aplicar antes de insertar el objeto en el lienzo o posteriormente utilizando la herramienta cubo de pintura. Los colores de relleno están ubicados tanto en la barra de herramientas como en el panel de propiedades. Para trabajar los ejemplos de relleno degradado, crea un nuevo archivo. 1. Dibuja una figura cualquiera. 2. Selecciona el objeto dentro del lienzo y en la barra de propiedades escoge el color azul (#3399FF) en el panel de colores de relleno. 3. En el cuadro categoría de relleno, escoge la opción Degradado y en el menú con los tipos de degradado selecciona Lineal. 4. Haz clic en el cuadro de color de relleno para que aparezca el cuadro de los manejadores de relleno. 5. Cambia el nivel de opacidad izquierdo a 85. Adobe Fireworks CS3 18

19 Ejercicio. Realizar el siguiente diseño y guárdelo con el nombre de principal.png. Adobe Fireworks CS3 19

20 MANEJANDO INTERACTIVIDAD BOTONES Los botones Fireworks son objetos de tipo símbolo que te permiten establecer algunos comportamientos o estados que observarás cuando manipules el puntero del mouse dentro de tu Web. CREACIÓN DE BOTONES Ahora vas a convertir a botones algunos objetos de una Web. Para ello, abre el archivo que creaste en el ejercicio anterior llamado principal.png o ábrelo desde la carpeta con los archivos de trabajo, y a continuación completa los siguientes pasos: 1. Selecciona el texto Inicio y el rectángulo que se halla detrás de el. 2. Presiona la tecla F8, escoge la opción Botón de la ventana Propiedades de símbolo y haz clic en Aceptar. 3. Observa que ambos objetos quedaron convertidos en un solo botón. Adobe Fireworks CS3 20

21 Importante: El slice es el área donde va a aparecer la vinculación y/o comportamiento del botón. Cuando hay varias áreas de slice en una Web, éstas no pueden cruzarse va que pueden causar comportamientos inesperados en los botones. Ejercicio: Convierte a botón el texto y el rectángulo de la imagen correspondiente de Nosotros, Productos, Contacto y Login. Tu documento debería tener la siguiente apariencia: Importante: Si tus áreas de slice estuvieran cruzándose, puedes colocar el puntero del mouse dentro de la zona verde y arrastrar el botón completo hasta separar un área de la otra. Guarda tu documento nuevamente. ESTADOS DE UN BOTÓN Los estados de un botón son los comportamientos que se mostrarán en la pantalla cuando el puntero del mouse trabaje con el botón. Los estados que puedes trabajar con un símbolo botón son: ESTADO Arriba Sobre Abajo Sobre y Abajo Zona activa DESCRIPCIÓN El estado normal del botón al cargar la Web Aparece cuando el cursor está sobre el botón Cuando presionas el botón izquierdo sobre el botón Cuando el botón está presionado, si se sitúa el cursor sobre el botón seguirá cambiando de aspecto. La zona de vinculación del botón Adobe Fireworks CS3 21

22 Los estados son predefinidos en Fireworks, de tal forma que tu trabajo consiste, realmente, en modificar la apariencia que tendrá el botón en cada uno de los estados. Ahora vas a crear los estados para los botones de tu archivo. Para ello realiza lo siguiente: 1. Haz doble clic en el área de slice del botón Estructura metal. Observa que te aparece el panel del símbolo, el cual contiene los botones para cada uno de los estados. Automáticamente, Fireworks solamente tiene el botón creado en el estado Arriba. Para todos los demás estados debes copiar el objeto botón. 2. Selecciona la pestaña Sobre y para copiar el objeto haz clic en el botón Copiar gráfico Arriba. El botón aparece copiado en la pantalla. 3. Selecciona cada ficha y repite el paso número Haz clic en el botón Listo para terminar la definición de este botón. En el Estado SOBRE, realice las modificaciones que creas convenientes, como por ejemplo: cambiar el color de fondo del rectángulo y el color del texto. En el Estado ABAJO, repita el procedimiento y modifique el gráfico. Adobe Fireworks CS3 22

23 AGREGAR INTERACTIVIDAD A LOS BOTONES La interactividad de un botón se ve reflejada, principalmente, por los cambios que se aprecian en la Web cuando estás navegando a través de ella. Estos cambios se relacionan con el aspecto del botón en uno o varios de sus estados (arriba, sobre, abajo y sobre y abajo). Para ello solamente debes agregar a tu botón los efectos que creas necesarios en sus correspondientes estados. A continuación en tu archivo trabajarás con el botón inicio, cambiarás los efectos del texto exclusivamente para los estados de sobre y abajo. Para ello, realiza lo siguiente: 1. Haz doble clic sobre el botón Inicio y observa que aparecerán los estados del botón. 2. En el estado sobre, elimina el efecto iluminado del texto, selecciona el botón y agrega un efecto sombra de color rojo, con un nivel de opacidad de 95% y una distancia de Haz cite en el botón Listo para aceptar los cambios. MANEJO DE ZONAS DE DIVISIÓN Las Zonas de División son áreas especiales en Fireworks en las que puedes establecer comportamientos específicos de la Web al estar navegando con los botones. Estos comportamientos pueden estar referidos a presentar imágenes de muestra o colocar textos que describan la utilidad de cada botón definido en la página. Fireworks te proporciona, en la barra de herramientas Web, dos tipos de zonas para definir los comportamientos: Herramienta División y Herramienta División Poligonal. La diferencia radica en que la Herramienta División te permite crear solamente áreas rectangulares mientras que la División Poligonal define áreas de cualquier forma. En tu archivo definirás un área de división para mostrar un texto y una imagen acerca de cada uno de los tipos de trabajos realizados por el artista. Para ello realiza lo siguiente: 1. Haz clic en la Herramienta División. El puntero del mouse cambia a la forma de una cruz (+). Adobe Fireworks CS3 23

24 2. Ubica el cursor debajo de la barra de navegación y dibuja un rectángulo. Asegúrate que el área de división no se cruce con ninguna de las áreas de los botones. Guarda tu documento nuevamente. AGREGAR COMPORTAMIENTOS Para agregar los comportamientos para las Zonas de División es necesario activar el panel de capas (F2) y el panel de fotogramas (Shift+F2). En el panel de capas puedes observar el área donde está definido cada uno de los objetos que conforman tu Web. El panel de fotogramas te permite definir la información que estará asociada con cada uno de los botones. Debes crear un fotograma por cada botón en el que vayas a definir un comportamiento. Adobe Fireworks CS3 24

25 Para definir los objetos para los comportamientos en tu archivo, completa los siguientes pasos: 1. Activa el panel Fotogramas y el panel Capas. 2. El panel fotogramas te proporciona por omisión un fotograma llamado Fotograma 1. Para cambiar el nombre de este fotograma, haz doble clic en la palabra fotograma 1 y digita la etiqueta "Todo". 3. Haz clic en el botón Fotograma nuevo para insertar un nuevo fotograma. Notarás que el fondo de la pantalla desaparece. 4. Cambia el nombre de este fotograma por INICIO. 5. Crea dos nuevos fotogramas: NOSOTROS y PRODUCTOS respectivamente. Tu documento debe tener la siguiente apariencia: Adobe Fireworks CS3 25

26 6. Haz clic en el fotograma INICIO para trabajar con él. Activa la herramienta de texto y dibuja un recuadro de texto dentro del área de división. 7. Haz clic en el fotograma NOSOTROS para trabajar con él. Adobe Fireworks CS3 26

27 8. Haz clic en el fotograma PRODUCTOS para trabajar con él. AÑADIR EL COMPORTAMIENTO AL BOTÓN 1. Selecciona el fotograma TODO para relacionar los botones con los fotogramas. 2. Haz clic en el botón INICIO y ubica el puntero del mouse en el botón de inspección que aparece en el centro del mismo. 3. Haz clic en dicho botón y en el menú contextual que te aparece, escoge la opción Añadir comportamiento intercambiar imagen. 4. En el cuadro de diálogo Intercambiar imagen verás a la derecha la zona de vista previa de las áreas de división para intercambio de imágenes. 5. Haz clic en la división que representa el área de los textos e imágenes. Adobe Fireworks CS3 27

28 6. En el cuadro de lista fotograma N selecciona el fotograma INICIO (2) y luego haz clic en Aceptar. Observa que ahora aparece una línea azul que va desde el botón hacia el área de división. Esto indica que ya existe un comportamiento definido entre ambos objetos. 7. Ahora, haz clic en el centro del botón NOSOTROS, luego activa el botón de inspección para que aparezca el menú contextual y repite los pasos 4 y En el cuadro de lista fotograma N selecciona el fotograma NOSOTROS (3) y luego haz clic en Aceptar. 9. Ahora, haz clic en el centro del botón PRODUCTOS; luego activa el botón de inspección para que aparezca el menú contextual y repite los pasos 4 y En el cuadro de lista fotograma N selecciona el fotograma PRODUCTOS (4) y luego haz clic en Aceptar. COPIAR FONDO A UN FOTOGRAMA Adobe Fireworks CS3 28

29 Habrás notado que cuando mueves el mouse sobre los botones aparecen los mensajes y fotos correspondientes, pero el fondo que muestra esa zona es blanco. Esto ocurre debido a que la capa que trabaja el fondo principal de la Web solamente se encuentra definida en el fotograma llamado Todo. Si examinas los otros fotogramas, observarás que su fondo es totalmente en blanco. Para solucionar este problema, solamente debes copiar el fondo de mapa de bits del fotograma Todo hacia los demás fotogramas. Para ello completa lo siguiente: 1. Haz clic en el fotograma TODO y selecciona la capa de mapa de bits que corresponde con el fondo de la Web. 2. En el panel de propiedades, se activan los parámetros X e Y. Recuerda los números mostrados porque te dan la ubicación exacta del fondo en la pantalla. 3. Activa la opción Copiar del menú Edición (o también las teclas Ctrl+C) 4. Haz clic en el fotograma INICIO y activa la opción Pegar del menú Edición (Ctrl+V) 5. Cuando el mapa de bits es copiado, mueve la capa a la última posición para que esté en el fondo de la pantalla. Luego fíjate en los parámetros X e Y del panel de propiedades y si los números no corresponden con los valores originales, procede a modificarlos. Guarda tu documento nuevamente y ejecútalo en vista previa. Luego procede a cerrarlo. Adobe Fireworks CS3 29

30 CONVERTIR UNA WEB FIREWORKS EN HTML Cuando trabajas una Web en Fireworks, los archivos que genera este programa son de tipo PNG, es decir, una imagen gráfica y solamente al ejecutar el archivo en vista previa, puedes observar temporalmente el funcionamiento de tu diseño como una página Web realizada en HTML. Fireworks te proporciona las herramientas necesarias que te permitirán convertir toda tu Web al formato HTML manteniendo el diseño, los botones, comportamientos y todas aquellas características que hayan sido incluidas en el diseño de la Web. DEFINIR LAS CARPETAS DE TRABAJO Antes de iniciar el proceso, es importante que definas las carpetas donde se exportará la información, especialmente una carpeta para guardar todas las secciones de imágenes que conforman la Web. Para el ejemplo que has trabajado anteriormente, crea una carpeta llamada CLASE en tu disco local, luego procede a crear una carpeta Imágenes dentro de la carpeta CLASE. Para convertir tu Web de, completa los siguientes pasos: 1. Selecciona el menú Archivo y activa la opción Exportar. 2. En la ventana de diálogo que aparece, indica los siguientes parámetros: 3. Guardar en: Ubica la carpeta llamada CLASE. a. Nombre: Digita el nombre de la Web, en este caso, Principal. b. Tipo: HTML e imágenes. c. HTML: Exportar Archivo HTML. d. Divisiones: Exportar divisiones. e. Deben estar seleccionadas las opciones Incluir áreas sin divisiones y Colocar imágenes en subcarpeta. 4. Haz clic en el botón Examinar para que puedas seleccionar la carpeta Imágenes que está ubicada dentro de la carpeta CLASE. Adobe Fireworks CS3 30

31 5. Haz clic en el botón Guardar. Guarda tu archivo nuevamente y luego procede a cerrar el programa Fireworks. Si utilizas el explorador de Windows para examinar la carpeta CLASE, notarás que ahora ya existe un archivo llamado Principal y que es de tipo HTML. Además, si examinas la carpeta Imágenes, observarás que los objetos han sido subdivididos para un mejor funcionamiento. Adobe Fireworks CS3 31