manual nº 04

20
1 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.

Transcript of manual nº 04

Page 1: manual nº 04

1

LABORATORIO 4

LABORATORIO Nº 4Objetivos:

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 auna unidad de su computadora (C:\ , D:\ ), de la cual se utilizarán las imágenes, texto y animación.

Page 2: manual nº 04

2

DISEÑO WEB PROFESIONAL MX 2004

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

Page 3: manual nº 04

3

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.

Page 4: manual nº 04

4

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

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:

Formato del archivode exportación

Page 5: manual nº 04

5

LABORATORIO 4

13.- Seleccione nuevamente la imagen, en el panel Propiedades clic en el botónEditar y organizarefectos.

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ónAceptar.

15.- Seleccionar el menú Archivo / Exportar.A.- En el cuadro de dialogo Exportar realizar lo siguiente:

� En el campo Guardaren 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ónEditar y organizarefectos.

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ónAceptar.

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.� Haga clic en el botón Guardar.

Page 6: manual nº 04

6

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 cadames (desde mes-febrero.jpg hasta mes-diciembre.jpg).

II.- Creando y configurando nuestra página web1.- 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áginabá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 estrenarseese mes).

D.- Haga clic en el botón Aceptar.

III.- Insertar Imagen1.- 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.

Page 7: manual nº 04

7

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ágenesy pondrás el nombre de cada mes al documento, en cuanto al fondo del documento, de acuerdoa tu criterio.

V.- Creación de Marcos o Frames1.- Crear y configurar una nueva pagina o documento HTML.

A.- Seleccione el menú Archivo / Nuevo

Page 8: manual nº 04

8

DISEÑO WEB PROFESIONAL MX 2004

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 quevendrí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.htmD.- 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.

Page 9: manual nº 04

9

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

Page 10: manual nº 04

10

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 elnombre, 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 / GuardarB.- 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).

Page 11: manual nº 04

11

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 / TextoB.- 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».

Page 12: manual nº 04

12

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.

9.- Insertar animación al texto:A.- Seleccionar el texto.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 ( )� Dar clic en el botón Cerrar.

10.- 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.- 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 Escena3A.- Seleccione el menú, Insertar Texto.

Page 13: manual nº 04

13

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 seaplica para todos los textos):

� En el cuadro desplegable del tipo de letra elegir Arial.� En la lista desplegable del tamaño de la letra ingresar el valor 28.� 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:

13.- Insertar animación al texto:A.- Seleccionar cada texto por separado e ingresarle una animación, la que desee.

14.- 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.- 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:

� En el cuadro desplegable del tipo de letra elegir Arial.� En la lista desplegable del tamaño de la letra ingresar el valor 48.

Page 14: manual nº 04

14

DISEÑO WEB PROFESIONAL MX 2004

� 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:

16.- Insertar animación al texto:A.- Seleccionar el texto.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� Dar clic en el botón Cerrar.

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.

Page 15: manual nº 04

15

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 vecesclic en el archivo ).

VII.- Insertando la animación (creada en Swish) en nuestroDocumento

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 elarchivo llamado próximos_estrenos.swf.

B.- Haga clic en el botón Aceptar.

VIII.- Creando Barras de Navegación1.- 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.

A.- De la lista categoría seleccionar Aspecto, realizar lo siguiente:� En el campo Margen izquierdo, darle valor Cero.� En el campo Margen superior, darle valor Cero.

B.- De la lista categoría seleccionar Título/Codificación, realizar lo siguiente:

Page 16: manual nº 04

16

DISEÑO WEB PROFESIONAL MX 2004

� En el campo Título digitar Estrenos.C.- Haga clic en el botón Aceptar.

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 esel primero será Enero.

B.- En el campo Imagen arriba, clic en el botón Examinar, que esta ubicado a la derecha yubicar 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 yubicar 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 yubicar 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 ubicadoa la derecha y ubicar la siguiente ruta: C:\Estrenos \ meses_miniatura, seleccionar el archivoenero1.jpg.

F.- En el campo Al hacerse clic, ir al URL, clic en el botón Examinar, que esta ubicado a laderecha, ubicaras la pagina o documento enero.htm, que se encuentra dentro de tu carpetaraíz llamada Cineplan.

G.- En el campo in de la lista desplegable seleccionar E_Centro (esto indica en que marcoaparecerá 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 sentidoen 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 clicen el botón Aceptar.

Page 17: manual nº 04

17

LABORATORIO 4

IX.- Inserción de Botones Flash1.- Ubicar el cursor dentro del marco E_Izquierdo.2.- 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 #BFB404.

B.- De la lista categoría seleccionar Título/Codificación, realizar lo siguiente:� En el campo Título digitar Meses.

C.- Haga clic en el botón Aceptar.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.

Page 18: manual nº 04

18

DISEÑO WEB PROFESIONAL MX 2004

X.- Creando Mapas de Imágenes.Para finalizar este laboratorio necesitamos enlazar desde el marco principal (que es el primero quese 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 unmapa 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 creadaanteriormente.

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.

Page 19: manual nº 04

19

LABORATORIO 4

9.- Para retornar a la página principal, sin necesidad de usar las direccionales de retroceso de labarra 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:

Page 20: manual nº 04

20

DISEÑO WEB PROFESIONAL MX 2004