Академический Документы
Профессиональный Документы
Культура Документы
LABORATORIO Nº 4
Objetivos:
Para diseñar este laboratorio deberá copiar la carperta LABORATORIOS adjuntar al CD-ROM a
una unidad de su computadora (C:\ , D:\ ), de la cual se utilizarán las imágenes, texto y animación.
1
DISEÑO WEB PROFESIONAL MX 2004
LABORATORIO4
I.- Optimización de imágenes en Fireworks.
1.- Abrir el programa FIREWORKS MX 2004 (Inicio / Programas / FIREWORKS MX 2004)
2.- Luego seleccionar el menú, Archivo / Nuevo.
A.- En el cuadro de diálogo Nuevo documento, realizar lo siguiente:
En el campo Ancho, digitar el valor 60.
En el campo Alto, digitar el valor 70.
Clic en el botón Aceptar.
2
LABORATORIO 4
5.- Arrastrar la imagen del archivo abierto hacia el área de trabajo que a creado.
3
DISEÑO WEB PROFESIONAL MX 2004
8.- Para lograr un ajuste perfecto del tamaño de la imagen con la del área de trabajo, siga los
siguientes pasos:
A.- Seleccione la imagen.
B.- En el Panel Propiedades modifique los valores An y Al, a 60 y 70 respectivamente.
Crear una carpeta llamada meses_miniatura en la carpeta Laboratorios, que copió anteriormente.
4
LABORATORIO 4
13.- Seleccione nuevamente la imagen, en el panel Propiedades clic en el botón Editar y organizar
efectos.
14.- En el cuadro de diálogo Matiz/Saturación, seleccionar los valores que desea para Matiz, Sa-
turación y Luminosidad. Después de aplicar los respectivos cambios hacer clic en el botón
Aceptar.
5
DISEÑO WEB PROFESIONAL MX 2004
19.- Seleccionar la imagen y presionar la tecla Supr. para eliminar la imagen del mes de enero.
20.- Teniendo nuevamente vacía nuestra área o ventana de trabajo, deberás realizar los pasos 3
hasta el 18, pero con las demás imágenes y deberá poner el nombre correspondiente a cada
mes (desde mes-febrero.jpg hasta mes-diciembre.jpg).
6
LABORATORIO 4
6.- Crearás una página por cada mes (los meses que restan), e insertaras sus respectivas imágenes
y pondrás el nombre de cada mes al documento, en cuanto al fondo del documento, de acuerdo
a tu criterio.
7
DISEÑO WEB PROFESIONAL MX 2004
4.- Procedemos a guardar nuestro documento; seleccione el menú Archivo / Guardar Todo.
Recuerde que cada uno de los marcos o ventanas se guardan por separado y también el todo que
vendría a ser la página principal.
8
LABORATORIO 4
El orden para guardar los marcos puede variar por eso se recomienda ver su ventana de documento
antes de proceder.
9
DISEÑO WEB PROFESIONAL MX 2004
Al cambiar los nombres de los marcos no importa el orden, pero si a que marco le esta poniendo el
nombre, pues así le será mas fácil trabajar con ellos.
10
LABORATORIO 4
11
DISEÑO WEB PROFESIONAL MX 2004
D.- Del panel Película en la ficha Texto, cambiar los siguientes valores:
En el cuadro desplegable del tipo de letra elegir Arial.
En la lista desplegable del tamaño de la letra ingresar el valor 48.
En el cuadro de colores digitar el siguiente valor: FB-B4-04.
Haga clic en el botón que tiene una B (Para darle negrita la texto).
E.- Se visualizará de la siguiente manera.
Para cambiar el nombre de las escenas, seleccionarlas y del Panel Película en la Ficha Escena,
cambiar el nombre del campo Nombre.
12
LABORATORIO 4
13
DISEÑO WEB PROFESIONAL MX 2004
17.- Dar movimiento al texto siguiendo los mismos criterios de la animación de la Escena 1.
18.- Proceder a exportar el archivo:
A.- Seleccione el menú, Archivo / Exportar / SWF...
B.- Elija la opción SWF para que el archivo sea convertido a película Flash, para poder trabajarla
desde nuestro entorno de trabajo en Dreamweaver.
C.- En el cuadro de dialogo Exportar a SWF, realizar lo siguiente:
En el campo Guardar en, guardaras el archivo dentro de tu carpeta raíz (cineplan).
En el campo Nombre, digitaras lo siguiente: proximos_estrenos.
Haga clic en el botón Guardar.
14
LABORATORIO 4
E.- Ejecute el archivo para que observe como ha quedado ( Ubicar el archivo y dar dos veces
clic en el archivo ).
15
DISEÑO WEB PROFESIONAL MX 2004
16
LABORATORIO 4
A.- En el campo Estilo, seleccionar de la lista un estilo de botón, el que usted desee.
B.- En el campo Texto del botón, digitar en este caso para el primero Enero.
C.- En el campo Color de fondo, digitar el siguiente valor #FBB404.
D.- En el campo Vínculo, clic en el botón Examinar que esta ubicado a la derecha, seleccionar
de la carpeta raíz, la página o documento enero.htm.
E.- En el campo Destino, de la lista desplegable seleccionar E_Centro (para que la página o
documento aparezca en el marco centro).
F.- Haga clic en el botón Aceptar.
5.- Se tendrán que crear 11 botones más, uno por cada mes, para esto realizarás los pasos 3 y 4,
tendrás que vincular cada botón a la respectiva página de cada mes.
17
DISEÑO WEB PROFESIONAL MX 2004
4.- Dibujar un rectángulo alrededor de la zona que tiene como texto «Próximos ESTRENOS»,
arrastrando con el mouse dentro de la frase.
18
LABORATORIO 4
9.- Para retornar a la página principal, sin necesidad de usar las direccionales de retroceso de la
barra de herramientas de Internet, crearemos otro mapa de imagen.
10.- Dentro de la página o documento marco_izquierdo.htm, se encuentra en la página una ima-
gen, es esta la imagen que nos va a servir de vinculo hacia la portada de nuestra página.
11.- Seleccionar la imagen insertada en esta página.
12.- Y en el panel de Propiedades, activar la herramienta Zona Interactiva rectángulo.
13.- Dibujar un rectángulo alrededor de la imagen, arrastrando con el mouse dentro de ella.
14.- El panel de propiedades ahora mostrará propiedades de la zona interactiva creada anterior-
mente.
15.- En la casilla Vínculo, dar clic en el icono de carpeta, se abrirá una ventana.
16.- Seleccionar el archivo con que se vinculara esta zona interactiva: portada.htm.
17.- En la casilla Destino, elegir de la lista desplegable la opción centro, para que la página apa-
rezca en el marco centro.
18.- Deberá quedar de la siguiente manera:
19
DISEÑO WEB PROFESIONAL MX 2004
20