Issuu on Google+

Ad o b e Fi rew o rk s CS3 I.E INDEPENDENCIA - MIRAFLORES

Adobe Fir ewor ks CS3


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 W eb. Con él podrás crear de manera rápida y sencillo cualquier gráfico para una página W eb, 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 To do s los pro gram as . Finalmente selecciona Ad ob e Firew o rks CS3

Adobe Fireworks CS3

2


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 > Do cu m en to d e Firew ork s (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


ENTORNO DE TRAB AJ O Cuando ingreses a trabajar con el programa encontrarás los siguientes elementos: 1.

El Men ú Princip al: Contiene las opciones principales para que puedas controlar el funcionamiento adecuado de Fireworks.

2.

La Barra d e Herr amientas: Contiene los botones y menús emergentes que te permiten seleccionar objetos, trabajar con objetos de mapas de bits y vectores, diseñar áreas W eb y aplicar colores.

3.

La Ven tana de Documento : Muestra el documento actual mientras lo estás creando y editando.

4.

La Reg la Hor izont al y Verti cal: Permite trabajar con medidas exactas dentro del documento.

5.

Lo s Paneles Ac op lables : Contienen fichas que permiten abrir y cerrar los inspectores y paneles que se utiliza con mayor frecuencia.

6.

El Panel d e Prop iedades: Muestra propiedades del objeto o texto seleccionado y permite modificar dichas propiedades.

1

4

2

3

5

6

EL L IENZO 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 Arc hivo de Firew ork s ubicada bajo el título Crear nu evo .

Adobe Fireworks CS3

4


2.

En la ventana Nuevo d oc um ento indica el Anc ho , Al to, Resolu ción y el Co lor del lienzo como se muestra en la imagen y haz clic en el botón Acept ar.

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.

Recu erd a: Si quieres ocultar / mostrar todos los paneles de la pantalla puedes presionar la tecla F4 o ingresas al menú Ven tana y seleccionas Oc ultar paneles .

Adobe Fireworks CS3

5


MANEJ ANDO TRAZOS VECTORIALES OBJ ETOS 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 Vecto r. CREAR OBJ ETOS VECTORIALES A continuación crearás un diseño que incluye una combinación de objetos vectoriales, para ello realiza lo siguiente: 1. 2.

Selecciona la herramienta Rec tán gu lo. En el panel de propiedades haz clic en el botón de color de contorno

....

y en la paleta de colores escoge el color n egro . Luego haz clic en el botón de color de relleno .......................y en la paleta de colores haz clic en el b otón trans paren te.

Adobe Fireworks CS3

6


3.

Arrastra el puntero del mouse (+) para dibujar un rectángulo en la parte superior del lienzo.

4.

Escoge la herramienta Pun tero ............... de la zona selecc io nar 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 Herrami en ta Rectáng ul o y escoge la herramienta El ips e.

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 Pu ntero y selecciona el rectángulo y la elipse. Para seleccionar ambos elementos debes presionar Shif t+Clic i zq ui erd o 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 Pu ntero. 8.

Haz clic en el menú Mod ifi car, selecciona la opción Com binar trazado s y haz clic en perfo rac ió n. Tus objetos deben verse de la siguiente forma:

Adobe Fireworks CS3

7


Recu erd a: 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 FIREWORK S 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 Firew o rks en tu carpeta llamada Sitio1 ( C:\Sitio 1 ). Luego completa los siguientes pasos: 1.

Haz clic en el menú Arc h ivo .

2.

Selecciona la opción Gu ard ar co mo.

3.

En la sección Gu ard ar en selecciona la carpeta Fi rewo rk s y en el cuadro Nombre dígita " Fw rk01"

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 Tex to y dibuja un recuadro al centro de tu lienzo.

2.

En la barra de propiedades selecciona la fuente Ari al Narrow , tamaño 79, color negro, estilo Cur siva y selecciona como nivel de suavizado Su avizad o t enue.

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


Tipo de Fuent e

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ú Tex to y selecciona la opción Uni r 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


6.

Haz clic en el triรกngulo debajo de la herramienta Escala y activa la herramienta In c li nar.

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


MAPAS DE BITS OBJ ETOS 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 Map a bit s.

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ú Arc h ivo y luego escoge la opción Im po rtar.

2.

Ubica la carpeta ARCHIVOS FIREWORKS en la lista Bus c ar en del cuadro de diálogo Importar.

3.

Selecciona la imagen DRAGON y haz clic en el botón Abri r.

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


Guarda tu documento con el nombre Frwk03

Ejerc ici o: 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 Map a b its .

2.

En la primera imagen que insertaste, dibuja un recuadro alrededor de la zona de la imagen que deseas recortar.

Adobe Fireworks CS3

12


3.

Haz clic en el menú Selec cionar y escoge la opción Selec cio nar i nvers o.

4.

Observa que aparece otro cuadro con línea punteada alrededor de todo el lienzo.

5.

Presiona la tecla Sup r para cortar la imagen y luego para finalizar presiona la tecla Es c. Tu documento deberá tener la siguiente apariencia:

EFECTOS ESPECIAL ES 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


Dentro de los efectos especiales que puedes encontrar están: iluminación, desenfocar, ruido, bisel y relieve.

APL ICAR IL UMINACIÓ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 So mbr ear e ilu minar y escoge la alternativa i lu minado .

5.

En el cuadro de parámetros de iluminado, coloca el nivel de opacidad en 687o y elige el color Naran ja 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

Adobe Fireworks CS3

Opacidad Suavidad

14


APL ICAR EFECTO DE DESENFOCAR 1.

Haz clic en la imagen.

2.

En el panel de efectos, selecciona la opción Des en foc ar y escoge la alternativa Desenfo qu e g aus si ano.

3.

En la ventana Des enfoqu e g au ss iano , mueve el manejador Radio de desenfoque hacia la izquierda hasta alcanzar el valor 2.1 y haz clic en Acept ar. Tu imagen tendrá la siguiente apariencia.

APL ICAR 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ñadi r ru ido.

3.

En la ventana Añadi r ruido , reduce la cantidad de ruido hasta el valor 24.

4.

Haz clic en el cuadro Co lor para que el ruido se visualice en blanco y negro. Finalmente haz clic en Ac eptar.

Tu imagen tendrá la siguiente apariencia.

Adobe Fireworks CS3

15


APL ICAR EFECTO DE BISEL Y RELIEVE 1.

Haz clic en la imagen.

2.

En el panel de efectos, selecciona la opciรณn Bi sel y Rel ieve y escoge la alternativa B is el in terior.

3.

En el cuadro de parรกmetros de bisel y relieve, coloca la forma del borde del bisel en Plano y la anchura en 14.

4.

Para lograr aplicar sombra al objeto que acabas de modificar selecciona la opciรณn So mb rear e il umin ar y escoge la alternativa Som bra.

5.

Aumenta la distancia a 23 en el cuadro de parรกmetros de sombra.

Tu imagen tendrรก la siguiente apariencia.

Adobe Fireworks CS3

16


AJ USTAR COLOR Y NIVEL DE OPACIDAD 1.

Importa el archivo CLIMBER.

2.

En el panel de efectos, selecciona la opción Ajus far c olo r y escoge la alternativa Matiz/Sat uración.

3.

En la ventana Mati z/Saturación, activa la casilla COLOREAR y mueve el control a Mati z: 276, Saturac ión: 33, Ilumin ació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ú Modi fic ar y selecciona la opción Allanar s elecc ió n.

3.

Observa en tu archivo el conjunto de imágenes se vuelve una sola imagen.

Adobe Fireworks CS3

17


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 d e pin tu ra. 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 Deg radado y en el menú con los tipos de degradado selecciona Lin eal.

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


Ejerc ici o. Realizar el siguiente diseĂąo y guĂĄrdelo con el nombre de pr incipal.png.

Adobe Fireworks CS3

19


MANEJ ANDO 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 “In icio ” 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


Impo rtante: 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 ya que pueden causar comportamientos inesperados en los botones.

Ej e r c i c i o : 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:

Impo rtante: 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 B OTÓ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 W eb 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


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 2.

4.

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


AGREGAR INTERACTIVIDAD A L OS 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 In ic io 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 9.

3.

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 W eb 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


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 W eb. 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


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


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


8.

Haz clic en el fotograma PRODUCTOS para trabajar con él.

AÑADIR EL COMPORTAMIENTO AL B OTÓ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ñadi r com po rtami en to i nt erc ambiar i m agen.

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


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 5.

8.

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 5.

10. 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


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.


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 L AS CARPETAS DE TRAB AJ O 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. b. c. d. e.

4.

Nombre: Digita el nombre de la W eb, en este caso, Principal. Tipo: HTML e imágenes. HTML: Exportar Archivo HTML. Divisiones: Exportar divisiones. Deben estar seleccionadas las opciones Incluir áreas sin divisiones y Colocar imágenes en subcarpeta.

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


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


Illustrator I