manual nº 04

LABORATORIO 4

LABORATORIO Nº 4
Objetivos:

1. Optimización de imágenes en Fireworks.
2. Creación de animaciones en Swish 2.0.
3. Creación de páginas de Marco Anidadas.
4. Creación de Barras de Navegación.
5. Inserción de Botones Flash.

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.

3.- Luego seleccionar el menú, Archivo /Abrir.
A.- En el cuadro de dialogo Abrir, realizar lo siguiente:
En el campo Buscar en ubicar la siguiente ruta:Laboratorio 4 meses mes-enero.jpg,
adjuntar al CD ROM.
Haga clic en el botón Abrir.

2

LABORATORIO 4

4.- Del panel de herramientas de Firewoks, seleccionar la Herramienta Puntero.

5.- Arrastrar la imagen del archivo abierto hacia el área de trabajo que a creado.

6.- Cierre la ventana que contiene el archivo mes-enero.jpg.
7.- Luego presionar las Ctrl. + T para escalar la imagen al tamaño del área de trabajo.

3


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.

9.- Seleccionar el menú Comandos / Creativo / Convertir a tonos sepia.
10.- En el panel Optimizar en el cuadro desplegable Formato del archivo de exportación
seleccionar el formato JPG.

Formato del archivo
de exportación

Crear una carpeta llamada meses_miniatura en la carpeta Laboratorios, que copió anteriormente.

11.- Seleccionar el menú Archivo / Exportar.
A.- En el cuadro de diálogo Exportar, realizar lo siguiente:
En el campo Guardar, en ubicar la siguiente dirección: Laboratorios meses_miniatura.
En el campo Nombre, digitar el siguiente nombre: enero1.
Haga clic en el botón Guardar.
12.- La nueva imagen se visualizará de la siguiente manera:

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.

15.- Seleccionar el menú Archivo / Exportar.
A.- En el cuadro de dialogo Exportar realizar lo siguiente:
En el campo Guardar en ubicar la siguiente dirección: Laboratorios meses_miniatura.
En el campo Nombre, digitar el siguiente nombre: enero2.
Clic en el botón Guardar.
16.- Seleccione nuevamente la imagen, en el panel Propiedades clic en el botón Editar y organizar
efectos.
17.- En el cuadro de diálogo Matiz/Saturación, seleccionar los valores que desea para Matiz,
Saturación y luminosidad. Después de aplicar los respectivos cambios hacer clic en el botón
Aceptar.
18.- Seleccionar el menú, Archivo / Exportar.
A.- En el cuadro de diálogo Exportar realizar lo siguiente:
En el campo Guardar en ubicar la siguiente dirección: Laboratorios meses_
miniatura.
En el campo Nombre digitar el siguiente nombre: enero3.

5


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

II.- Creando y configurando nuestra página web
1.- Abrir Dreamweaver MX 2004 y seleccione el menú, Archivo / Nuevo.
2.- En el cuadro de diálogo Nuevo documento, realizar lo siguiente:
A.- En la ficha General, de la lista categoría seleccionar Página básica y de la lista Página
básica seleccionar HTML.
B.- Haga clic en el botón Crear.
3.- Procedemos a guardar nuestro documento; seleccione el menú Archivo / Guardar o presione
las teclas Ctrl + S.
4.- En el cuadro de diálogo Guardar como, realizar lo siguiente:
A.- En la lista desplegable Guardar en ubicar la carpeta Cineplan.
B.- En el campo Nombre digitar el texto enero.htm.
C.- Haga clic en el botón Guardar.
5.- Para Configurar nuestro documento HTML realizaremos los siguientes pasos:
A.- Seleccione el menú Modificar / Propiedades de la página.
B.- De la lista categoría seleccionar Aspecto, realizar lo siguiente:
En el campo Color de Fondo, seleccionar el color negro.
C.- De la lista categoría seleccionar Título/Codificación, realizar lo siguiente:
En el campo Título, digitar El Señor de los Anillos (Título de la película por estrenarse
ese mes).
D.- Haga clic en el botón Aceptar.

III.- Insertar Imagen
1.- Seleccione el menú Insertar / Imagen.
2.- En el campo Buscar en, seleccionar la carpeta Laboratorio 4 / meses, adjunta al CD ROM y
seleccionar el archivo mes-enero.jpg.

6

LABORATORIO 4

3.- Haga clic en el botón Aceptar.
4.- Seleccionar la imagen y en el panel Propiedades haga clic en el botón Alinear al centro ( ).
5.- La página debe quedar de la siguiente manera:

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.

V.- Creación de Marcos o Frames
1.- Crear y configurar una nueva pagina o documento HTML.
A.- Seleccione el menú Archivo / Nuevo

7


B.- En el cuadro de diálogo Nuevo documento, realizar lo siguiente:
En la ficha General, de la lista categoría seleccionar Página básica y de la lista
Página básica seleccionar HTML.
Haga clic en el botón Crear
2.- En el panel Insertar, activar la ficha Marcos.
3.- Desplegar el botón Marcos y luego clic en el botón Marcos izquierdo y superior anidado.

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.

5.- En el cuadro de diálogo Guardar como, realizar lo siguiente:
A.- En la lista desplegable Guardar en, ubicar la carpeta Cineplan.
B.- Por defecto lo primero que se va ha guardar es el conjunto de marcos.
C.- Entonces en el campo nombre digitaremos estrenos.htm
D.- Haga clic en el botón Guardar.
E.- Luego en la ventana de documento aparecerá bordeado la zona que va ha ser guardada.
F En este caso por defecto es el centro.
.-
G.- Entonces en el campo nombre digitaremos estreno_centro.
H.- Haga clic en el botón Guardar.
I.- Luego aparecerá seleccionado por defecto la parte izquierda.

8

LABORATORIO 4

J.- Entonces en el campo nombre digitaremos estreno_izquierdo.
K.- Haga clic en el botón Guardar.
L.- Y por ultimo la parte superior.
M.- Entonces en el campo nombre digitaremos estreno_superior.
N.- Haga clic en el botón Guardar.

El orden para guardar los marcos puede variar por eso se recomienda ver su ventana de documento
antes de proceder.

6.- Para cambiar de nombre a los marcos:
A.- Abrir el panel marcos (menú Ventana / Marcos).
B.- Del panel Marcos, seleccionar el marco superior.
C.- En el panel Propiedades en el campo Nombre de marco, borrar el que esta por defecto
y digitar E_Superior, seguidamente presionar la tecla Enter.

D.- Del panel Marcos, seleccionar el marco centro.
E.- En el panel Propiedades en el campo Nombre de marco, borrar el que esta por defecto y
digitar E_Centro, seguidamente presionar la tecla Enter.

F Del Panel Marcos, seleccionar el marco izquierdo.
.-
G.- En el panel Propiedades en el campo Nombre de marco, borrar el que esta por defecto
y digitar E_Izquierdo, seguidamente presionar la tecla Enter.

9


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.

VI.- Creando Animaciones (SWISH 2.0)
1.- Procedemos a crear nuestra animación para insertarla dentro de nuestra página,para lo cual
abrimos el programa Swish 2.0.
2.- Del panel Película seleccionar la ficha Película y cambiar los siguientes valores:
A.- En el campo Ancho, ingresar el valor 400.
B.- En el campo Alto, ingresar el valor 300.
C.- Despliega la lista Color Fondo y en el campo ingresa el siguiente valor: 00-44-88.
D.- En el campo Vel. Fotog. ingresar el valor 24.
3.- A continuación guarde el documento:
A. - Seleccione el menú Archivo / Guardar
B.- Guardar con el nombre de estreno.
C.- Se empezará a trabajar en la Escena1.
4.- Insertar Texto:
A.- Seleccione el menú Insertar / Texto.
B.- Automáticamente el nombre del panel Película toma el valor del objeto insertado o
seleccionado.
C.- En este panel cambiar el valor Texto que toma por defecto este campo y digitar la frase
«VEN Y VIVE UNA EXPERIENCIA DE PELICULA».
D.- Del panel Transformar 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 BF-B4-04.
Haga clic en el botón que tiene una B (Para darle negrita al texto).

10

LABORATORIO 4

E.- Se visualiza de la siguiente manera:

5.- Insertar animación al texto:
A.- Seleccionar el texto.
B.- Seleccione el menú Insertar / Efectos / Alternar.
C.- En el cuadro de diálogo Alternar Opciones modificar lo siguiente:
En el campo Duración, ingresar el valor 50.
En el campo Nombre, elegir la opción Alternar Zoom al centro.
Si desea ver la animación presionar el siguiente botón.( ).
Si desea detener la animación presionar el siguiente botón ( ).
Dar clic en el botón Cerrar.

6.- Insertando una nueva Escena:
A. - Del panel Esquema, clic derecho en el nombre de tu archivo (estreno) y dar clic en la opción
Insertar Escena.
B.- Si ya te has fijado esta escena ya tiene las mismas características que la anterior (color,
tamaño, posición).
C.- Por defecto el nombre de esta escena será Escena2.
7.- Trabajando en la Escena2.
8.- Insertar Texto:
A.- Seleccione el menú Insertar / Texto
B.- Automáticamente el nombre del panel Película toma el valor del objeto insertado o
seleccionado.
C.- En este panel cambiar el valor Texto que toma por defecto este campo y digitar la frase
«CON NUESTROS PROXIMOS ESTRENOS».

11


D.- Del panel Película en la ficha Texto, cambiar los siguientes valores:
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.

B.- Seleccione el menú Insertar / Efectos / Giro 3D.
C.- En el cuadro de diálogo Giro 3D Opciones modificar lo siguiente:
En el campo Duración, ingresar el valor 70.
En el campo Nombre, seleccionar la siguiente opción Giro 3D, Salida de Frente.
Si desea ver la animación presionar el siguiente botón ( ).
Si desea detener la animación presionar el siguiente botón ( )

A.- Del panel Esquema, clic derecho en el nombre de tu archivo (estreno) y dar clic en la opción
Insertar Escena.
B.- Por defecto el nombre de esta escena será Escena3.

Para cambiar el nombre de las escenas, seleccionarlas y del Panel Película en la Ficha Escena,
cambiar el nombre del campo Nombre.

11.- Trabajando en Escena3
A.- Seleccione el menú, Insertar Texto.

12

LABORATORIO 4

B.- Insertarás 8 textos y digitaras lo siguiente en cada uno de ellos:
El Señor de los Anillos
Peter Pan
Ice Age
Scorpion King
Spider-Man
MIB II
Star Wars
Scobby Doo
C.- Automáticamente el nombre del panel Película toma el valor del objeto insertado o seleccio-
nado.
D.- Del panel Transformar, en la ficha Texto, cambiar los siguientes valores (estos valores se
aplica para todos los textos):
En el cuadro de colores ingresar el siguiente valor: FB-B4-04.
Clic en el botón que tiene una B (Para darle negrita la texto).
E.- Se visualizará de la siguiente manera:

A.- Seleccionar cada texto por separado e ingresarle una animación, la que desee.
A. - Del panel Esquema, clic derecho en el nombre de tu archivo (estreno) y dar clic en la opción
Insertar Escena.
B.- Por defecto el nombre de esta escena será Escena4.
15.- Insertar Texto:
A.- Seleccione el menú. Insertar / Texto.
B.- Automáticamente el nombre del panel Película, toma el valor del objeto insertado o
seleccionado.
C.- En este panel cambiar el valor Texto, que toma por defecto este campo y digitar la frase «TE
ESPERAMOS…».
D.- Del panel Transformar, en la ficha Texto, cambiar los siguientes valores:

13


En el cuadro de colores ingresar 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:

B.- Seleccione el menú Insertar / Efecto / Onda.
C.- En el cuadro de diálogo Onda Opciones modificar lo siguiente:
En el campo Nombre, seleccionar la siguiente opción: Onda, Caída con olas.
En el campo Duración, ingresar el valor 40

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.

14

LABORATORIO 4

D.- Aparecerá la siguiente ventana de proceso.

E.- Ejecute el archivo para que observe como ha quedado ( Ubicar el archivo y dar dos veces
clic en el archivo ).

VII.- Insertando la animación (creada en Swish) en nuestro
Documento
1.- Abra el documento o página estrenos.htm (página de marco)
2.- Coloque el cursor sobre el marco central o del centro (E_Centro).
3.- Seleccione el menú Modificar / Propiedades de la página.
A.- De la lista categoría seleccionar Aspecto, realizar lo siguiente:
En el campo Color de Fondo, ingresar el siguiente valor #004488.
B.- De la lista categoría seleccionar Título/Codificación, realizar lo siguiente:
En el campo Título, digitar Imágenes Estrenos.
C.- Haga clic en el botón Aceptar.
4.- Seleccione el menú Insertar / Media / Flash.
5.- En el cuadro de diálogo Seleccionar archivo, realizar lo siguiente:
A.- En el campo Buscar en, localizar tu carpeta raíz llamada Cineplan, aquí seleccionarás el
archivo llamado próximos_estrenos.swf.
B.- Haga clic en el botón Aceptar.

VIII.- Creando Barras de Navegación
1.- Abra el documento o página estrenos.htm (página de marco).
2.- Si no visualiza los bordes de los marcos, vaya al menú Ver / Ayudas visuales / Bordes de
marco.
3.- Coloque el cursor sobre el marco superior (E_Superior).
4.- Seleccione el menú, Modificar / Propiedades de la página.
En el campo Margen izquierdo, darle valor Cero.
En el campo Margen superior, darle valor Cero.

15


En el campo Título digitar Estrenos.
6.- Seleccionar el menú Insertar / Objetos de Imagen / Barras de navegación.
7.- En el cuadro de diálogo Insertar barra de navegación, realizar lo siguiente:
A.- En el campo Nombre del elemento, introduzca el nombre del mes, en este caso como es
el primero será Enero.
B.- En el campo Imagen arriba, clic en el botón Examinar, que esta ubicado a la derecha y
ubicar la siguiente ruta: Laboratorios meses_miniatura, seleccionar el archivo enero1.jpg.
C.- En el campo Sobre imagen, clic en el botón Examinar que esta ubicado a la derecha y
ubicar la siguiente ruta: C:Estrenos meses_miniatura, seleccionar el archivo enero2.jpg.
D.- En el campo Imagen abajo, clic en el botón Examinar que esta ubicado a la derecha y
ubicar la siguiente ruta: C:Estrenos meses_miniatura, seleccionar el archivo enero3.jpg.
E.- En el campo Sobre mientras imagen abajo, clic en el botón Examinar, que esta ubicado
a la derecha y ubicar la siguiente ruta: C:Estrenos meses_miniatura, seleccionar el archivo
enero1.jpg.
F.- En el campo Al hacerse clic, ir al URL, clic en el botón Examinar, que esta ubicado a la
derecha, ubicaras la pagina o documento enero.htm, que se encuentra dentro de tu carpeta
raíz llamada Cineplan.
G.- En el campo in de la lista desplegable seleccionar E_Centro (esto indica en que marco
aparecerá la página al hacer clic sobre la imagen, en este caso será en el marco centro).
H.- En el campo Insertar, de la lista desplegable seleccionar Horizontalmente (es el sentido
en que aparecerá la Barra de Navegación).
I.- Clic en el botón Añadir elemento Nuevamente quedarán todos los campos en blanco.
J.- Repetir los pasos desde A hasta la J; para los meses restantes, utilizando las imágenes de
cada mes y enlazarlos con sus respectivas paginas; al final de todo este proceso hacer clic
en el botón Aceptar.

16

LABORATORIO 4

IX.- Inserción de Botones Flash
1.- Ubicar el cursor dentro del marco E_Izquierdo.
2.- Seleccione el menú, Modificar / Propiedades de la página.
En el campo Color de Fondo ingresar el siguiente valor #BFB404.
En el campo Título digitar Meses.
3.- Seleccione el menú, Insertar / Objetos de Imágenes / Botón flash.
4.- En el cuadro de diálogo Insertar botón Flash, realizar las siguientes modificaciones:

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


X.- Creando Mapas de Imágenes.
Para finalizar este laboratorio necesitamos enlazar desde el marco principal (que es el primero que
se creo) llamado marco_principal.htm con este ultimo marco creado.
1.- Seleccionar la página web portada.htm. es dentro de esta página donde vamos a crear un
mapa de imagen.
2.- Seleccionar la imagen insertada en esta página.
3.- Y en el panel de Propiedades, activar la herramienta Zona Interactiva rectángulo.

4.- Dibujar un rectángulo alrededor de la zona que tiene como texto «Próximos ESTRENOS»,
arrastrando con el mouse dentro de la frase.

5.- El panel de Propiedades ahora mostrará propiedades de la Zona Interactiva creada
anteriormente.
6.- En la casilla Vínculo, dar clic en el icono de carpeta, se abrirá una ventana.
7.-Seleccionar el archivo con que se vinculara esta zona interactiva: estrenos.htm (que es el
marco principal que se creo en este laboratorio).
8.- En la casilla Destino, elegir de la lista desplegable la opción centro, para que la página
aparezca en el marco centro.

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


20

manual nº 04

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (14)

Destacado

Destacado (9)

Similar a manual nº 04

Similar a manual nº 04 (20)

Más de Esmirio Castillo Gonzales

Más de Esmirio Castillo Gonzales (11)

manual nº 04