segundo laboratorio

1

LABORATORIO3

LABORATORIO Nº 3Objetivos:

1. Dar animación a textos mediante SWISH 2.02. Creación de Marcos o Frames.3. Inserción de Película Flash, Botones flash.4. Propiedades de Tablas.5. Creación de Hipervínculos.

Para diseñar este laboratorio deberá instalar el programa Swish 2.0 en su computadora.Este programa se encuentra en el botón adjunto al CD-ROM

2

DISEÑO WEB PROFESIONAL MX 2004

LABORATORIO3I.- Animando Textos (SWISH 2-0)

1.- Abriremos el programa SWISH 2.0 (Inicio / Programas / SWISH v2.0 / SWISH v2.0)2.- Vamos a describir un poco nuestro entorno de trabajo:

3.- Procedemos a crear nuestra animación para insertarla dentro de nuestra página.4.- Del Panel Película seleccionar la Ficha Película y cambiar los siguientes valores:

A.- En el campo Ancho ingresar el valor 700.B.- En el campo Alto ingresar el valor 70.C.- Despliega la lista Color Fondo y en el campo R ingresa el siguiente valor: FB-B4-04.D.- En el campo Vel. Fotog. ingresar el valor 24.

3

LABORATORIO3

5.- A continuación guardamos:A.- Sleccionar el menú Archivo / GuardarB.- Guardar con el nombre logoplan en la carpeta Laboratorios (Esta carpeta fue la que ud.

copia del CD-ROM a su computadora).C.- El panel Esquema aparece así:D.- Se empezará a trabajar en la Escena1.

6.- Insertar Imagen:A.- Seleccionar el menú Insertar / Imagen.B.- En el cuadro de diálogo Abrir realizar lo siguiente:

• En el campo Buscar en, ubicar la siguiente dirección Laboratorio3 y adjuntar al CD-ROM, de la cual seleccionar el archivo logocineplan.jpg.

• Clic en el botón Abrir.C.- Escalar la imagen y ubicarla en la parte izquierda de la escena de trabajo, para ello realice

el punto D

D.- Seleccionar la imagen e ir al panel Transformar en la ficha Transformar modificar lossiguientes valores:

• En el campo X ingresar el valor 48.75• En el campo Y ingresar el valor 33.55• En el campo W ingresar el valor 81.35• En el campo H ingresar el valor 54.5

4


7.- 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. En este caso Texto.C.- En este panel cambiar el valor Texto que toma por defecto este campo y digitar la frase

«Bienvenidos…»D.- Del panel Transformar en la ficha Texto, cambiar los siguientes valores:

• En el cadro desplegable del tipo de letra elegir Arial.• En la lista desplegable del tamaño de la letra ingresar el valor 42.• En el cuadro de colores elegir el color Azul.• En la parte inferior en el primer campo ingresar el valor 15.• Haga clic en el botón que tiene una B (Para darle negrita al texto).

E.- Alinear el texto en la misma dirección que la imagen, como se visualiza a continuación:

8.- Insertar animación al texto:A.- Seleccionar el texto.B.- Seleccione el menú Insertar / Efectos / Desenfocar.C.- Del cuadro de diálogo Desenfocar Opciones, seleccionar la ficha Desenfocar, y modificar

lo siguiente:• En el campo Duración ingresar el valor 40.• 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.

5

LABORATORIO3

9.- Insertando una nueva Escena:A. - Del panel Esquema, clic derecho en el nombre de tu archivo (logoplan) y dar clic en la

opción Insertar Escena.B.- Si 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.

10.- Trabajando en la Escena 2:A.- Copiar el logo o imagen de la escena anterior (dando clic derecho en la imagen y eligiendo

Copiar Objeto).B.- Colocarse dentro de esta escena, dar clic derecho y elegir la opción Pegar Objeto.C.- Como la imagen es estática la posición de esta; para todas las escenas debe ser la misma.D.- Para poder poner estas imágenes en la misma posición, realice lo siguiente:

• Seleccionar la imagen de Escena1 y en el Panel Película seleccionar la fichaTransformar.

• Los ejes de los campos X, Y, W, H (horizontal, vertical, alto y ancho) deben tener elmismo valor para la Escena2. Copiar y pegar en esta segunda escena estos valorespara que puedan coincidir.

Estos valores (X, Y, W, H), están en relación o respecto al área o escena de trabajo no a toda laventana.

11.- Insertar Texto:A.- Seleccione el menú Insertar/ TextoB.- Automáticamente el nombre del panel Película toma el valor del objeto insertado o

seleccionado.

6


C.- En este panel cambiar el valor Texto (que toma por defecto este campo) ydigitar la frase «...al Web Site de…»

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 36.• En el cuadro de colores elegir el color Rojo.• En la parte inferior en el primer campo ingresar el valor 15.• Haga clic en el botón que tiene una B (Para darle negrita al texto).

E.- Alinear el texto en la misma dirección que la imagen, como se visualiza a continuación.

12.- Insertar animación al texto:A.- Seleccionar el texto.B.- Seleccionar el menú Insertar / Efectos / Vórtice.C.- En el cuadro de diálogo Vórtice Opciones modificar lo siguiente:

• En el campo Duración ingresar el valor 40.• 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.


opción Insertar Escena.B.- Por defecto el nombre de esta escena será Escena3.

7

LABORATORIO3

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

14.- Trabajando en Escena 3:A.- Copiar el logo o imagen de la escena anterior (dando clic derecho en la imagen y eligiendo

Copiar Objeto).B.- Colocarse dentro de esta escena, dar clic derecho y elegir la opción Pegar Objeto.C.- Como la imagen es estática la posición de esta; para todas las escenas debe ser la misma.D.- Para poder poner estas imágenes en la misma posición, realice lo siguiente:

• Seleccionar la imagen de Escena1 y en el panel Película seleccionar la fichaTransformar.

• Los ejes de los campos X, Y, W, H (horizontal, vertical, alto y ancho) deben tener elmismo valor para la Escena2. Copiar y pegar en esta tercera escena estos valorespara que puedan coincidir.

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

«CINEPLAN»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 46.• En el cuadro de colores elegir el color Verde.• En la parte inferior en el primer campo ingresar el valor 10.• Haga clic en el botón que tiene una B (Para darle negrita al texto).

E.- Alinear el texto en la misma dirección que la imagen, como se visualiza a continuación.

8


16.- Insertar animación al texto:A.- Seleccionar el texto.B.- Seleccione el menú Insertar / Efectos / Desenfocar.C.- En el cuadro de diálogo Desenfocar Opciones modificar lo siguiente:

• En el campo Duración ingresar el valor 40.• En el campo Cantidad Des. ingresar el valor 10.• 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.


opción Insertar Escena.B.- Por defecto el nombre de esta escena será Escena4.

18.- En esta Escena no necesitaremos de la imagen así que no la insertaremos.19.- 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

«donde encontrará los mejores estrenos»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 36.• En el cuadro de colores elegir el color Blanco.• Clic en el botón que tiene una B (Para darle negrita al texto).

9

LABORATORIO3

E.- Alinear el texto en toda la escena, como se visualiza a continuación:

20.- Insertar animación al texto:A.- Seleccionar el texto.B.- Menú Insertar / Efectos / Máquina de Escribir.C.- En el cuadro de diálogo Máquina de Escribir Opciones, en la ficha Máquina de Escribir

modificar lo siguiente:• En el campo Parpadeo de cursor cada ingresar el valor 1.• En el campo Parpadear al final ingresar el valor 0• Dar clic en el botón Cerrar.

D.- Seleccione nuevamente el texto.B.- Seleccione el menú Insertar / Efectos / Explosion.C.- Aquí no cambiara ningún valor, dar clic en el botón Cerrar.

10


21.- Procedemos a exportar el archivo:A.- Seleccioneelmenú Archivo / Exportar / SWF.B.- Seleccionar 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 diálogo Exportar a SWF, realizar lo siguiente:

• En el campo Guardar en, guardarás el archivo dentro de tu carpeta raíz (cineplan).• En el campo Nombre digitaras lo siguiente logocineplan.• Haga clic en el botón Guardar

D.- Aparecerá la siguiente ventana de proceso

E.- Ejecute el archivo para que observe como ha quedado.

II.- Creación de Marcos o Frames1.- Crear y configurar una nueva pagina o documento HTML en Dreamweaver MX 2004.

A.- Seleccione el menú Archivo / NuevoB.- En el cuadro de dialogo Nuevo documento, realizar lo siguiente:

• En la ficha General, de la lista categoría seleccionar Página blanca y de la listaPágina blanca seleccionar HTML.

11

LABORATORIO3

• Haga clic en el botón Crear2.- En el panel Insertar, activar la ficha Diseño.3.- Desplegar el botón Marcos y luego clic en el botón Marco 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 todoque vendría a ser la pagina 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.- En el campo nombre digitar marco_principal.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.- En el campo nombre digitar marco_centro.htm.H.- Haga clic en el botón Guardar.I.- Luego aparecerá seleccionado por defecto la parte superior.J.- En el campo nombre digitar marco_superior.htm.K.- Haga clic en el botón Guardar.L.- Y por ultimo la parte izquierda.M.- En el campo nombre digitar marco_izquierdo.htm.N.- Haga clic en el botón Guardar.

12


El orden para guardar los marcos puede variar por eso se recomienda ver su ventana de documentoantes de proceder a guardar cada elemento de la página de marcos.

6.- Para cambiar de nombre a los marcos:A.- Activar 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 Superior, seguidamente presionar la tecla Enter.

C.- Del panel Marcos, seleccionar el marco centro.D.- En el panel Propiedades en el campo Nombre de marco, borrar el que esta por defecto

y digitar Centro, seguidamente presionar la tecla Enter.

E.- Del panel Marcos, ahora seleccionar el marco izquierdo.F.- En el panel Propiedades en el campo Nombre de marco, borrar el que esta por defecto y

digitar Izquierdo seguidamente presionar la tecla Enter.

Al cambiar los nombres de los marcos no importa el orden, pero si a que marco le está poniendo elnombre, pues así le será mas fácil trabajar con ellos.

Marco_superior

marco_centro

marco_

izquie

rdo

13

LABORATORIO3

III.- Insertando páginas dentro de marcos1.- Del panel Marco, seleccionar el marco Centro.

2.- En el Panel Propiedades realizar lo siguiente:A.- En el campo Origen, clic en el icono de carpeta, en el cuadro de diálogo que aparecerá

ubicar dentro de la carpeta raíz la página portada.htm.

B.- En el marco Centro debe visualizarse de la siguiente manera:

IV.-Cambiando propiedades de marcos1.- Ubicar el cursor dentro del marco Izquierdo

A.- Sleccione el menú Modificar / Propiedades de la páginaB.- De la lista categoría seleccionar Aspecto, realizar lo siguiente:

• En el campo Color de Fondo, digitar el siguiente valor: #014586.

14


• En el campo Margen izquierdo: ingresar el valor Cero.• En el campo Margen superior: ingresar el valor Cero.

C.- Clic en el botón Aceptar.

V.- Creando imágenes de Intercambio1.- Ubicar el cursor dentro del marco Izquierdo.2.- Seleccione el menú Insertar / Objeto de Imagen / Imagen de sustitución.

3.- En el cuadro de diálogo Insertar imagen de sustitución, cambiar las siguientes propiedades:A.- En el campo Nombre de la imagen digitar sustitución.B.- En el campo Imagen original, clic en el botón Examinar que esta ubicado en la derecha. En

el campo Buscar en del nuevo cuadro de diálogo ubicar la siguiente ruta: Laboratorio3adjunta al CD-ROM y seleccionar el archivo cambio.jpg, clic en el botón Aceptar.

C.- En el campo Imagen de sustitución, clic en el botón Examinar, que esta ubicado en laderecha. En el campo Buscar en del nuevo cuadro de diálogo ubicar la siguiente ruta:Laboratorio3 adjunta al CD-ROM y seleccionar el archivo aloplan.jpg, clic en el botónAceptar.

D.-En el campo Texto alternativo digitar Cineplan.E.- Haga clic en el botón Aceptar.

VI.- Insertando películas de tipo Flash1.- Ubicar el cursor dentro del marco Superior.2.- Seleccione el menú Modificar / Propiedades de la página.

A.- De la lista categoría seleccionar Aspecto, y realizar lo siguiente:• En el campo Color de Fondo ingresar el siguiente valor: #FBB404.• En el campo Margen izquierdo, ingresar el valor Cero.

15

LABORATORIO3

• En el campo margen superior: ingresar el valor Cero.B.- Haga clic en el botón Aceptar.

4.- Para insertar la película Flash realizar los siguientes pasos:A.- Seleccione el menú, Insertar / Media / FlashB.- En el cuadro de dialogo realizar lo siguiente:

• En el campo Buscar en, ubicar el archivo logocineplan.swf que se encuentra en tucarpeta raíz (este archivo es el que creamos con el programa SWISH 2-0).

• Haga clic en el botón Aceptar.5.- Finalmente la página de verse de la siguiente manera:

segundo laboratorio

Travel