LABORATORIO 3




                        LABORATORIO Nº 3
Objetivos:

1.     Dar animación a textos mediante SWISH 2.0
2....
DISEÑO WEB PROFESIONAL MX 2004

                              LABORATORIO3
I.- Animando Textos (SWISH 2-0)
1.- Abriremos e...
LABORATORIO 3


5.- A continuación guardamos:
    A.- Sleccionar el menú Archivo / Guardar
    B.- Guardar con el nombre l...
DISEÑO WEB PROFESIONAL MX 2004



7.- Insertar Texto:
   A.- Seleccione el menú. Insertar / Texto.
   B.- Automáticamente ...
LABORATORIO 3




9.- Insertando una nueva Escena:
     A. - Del panel Esquema, clic derecho en el nombre de tu archivo (l...
DISEÑO WEB PROFESIONAL MX 2004



    C.- En este panel cambiar el valor Texto (que toma por defecto este campo) y
       ...
LABORATORIO 3




             Para cambiar el nombre de las escenas; seleccionarla y del Panel Película en la Ficha Escen...
DISEÑO WEB PROFESIONAL MX 2004




16.- Insertar animación al texto:
   A.- Seleccionar el texto.
   B.- Seleccione el men...
LABORATORIO 3




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


20.- Insertar animación a...
DISEÑO WEB PROFESIONAL MX 2004



21.- Procedemos a exportar el archivo:
   A.- Seleccione el menú Archivo / Exportar / SW...
LABORATORIO 3




            • Haga clic en el botón Crear
2.- En el panel Insertar, activar la ficha Diseño.
3.- Despleg...
DISEÑO WEB PROFESIONAL MX 2004




             El orden para guardar los marcos puede variar por eso se recomienda ver su...
LABORATORIO 3




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




2.- En e...
DISEÑO WEB PROFESIONAL MX 2004



             • En el campo Margen izquierdo: ingresar el valor Cero.
             • En e...
LABORATORIO 3




            • En el campo margen superior: ingresar el valor Cero.
    B.- Haga clic en el botón Aceptar...
Upcoming SlideShare
Loading in …5
×

segundo laboratorio

1,140 views

Published on

Published in: Travel
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,140
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
69
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

segundo laboratorio

  1. 1. LABORATORIO 3 LABORATORIO Nº 3 Objetivos: 1. Dar animación a textos mediante SWISH 2.0 2. 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 1
  2. 2. DISEÑO WEB PROFESIONAL MX 2004 LABORATORIO3 I.- 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. 2
  3. 3. LABORATORIO 3 5.- A continuación guardamos: A.- Sleccionar el menú Archivo / Guardar B.- 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 los siguientes 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 3
  4. 4. DISEÑO WEB PROFESIONAL MX 2004 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. 4
  5. 5. LABORATORIO 3 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 ficha Transformar. • Los ejes de los campos X, Y, W, H (horizontal, vertical, alto y ancho) deben tener el mismo valor para la Escena2. Copiar y pegar en esta segunda escena estos valores para 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 la ventana. 11.- 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. 5
  6. 6. DISEÑO WEB PROFESIONAL MX 2004 C.- En este panel cambiar el valor Texto (que toma por defecto este campo) y digitar 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. 13.- 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.- Por defecto el nombre de esta escena será Escena3. 6
  7. 7. LABORATORIO 3 Para cambiar el nombre de las escenas; seleccionarla y del Panel Película en la Ficha Escena, cambiar el 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 ficha Transformar. • Los ejes de los campos X, Y, W, H (horizontal, vertical, alto y ancho) deben tener el mismo valor para la Escena2. Copiar y pegar en esta tercera escena estos valores para 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. 7
  8. 8. DISEÑO WEB PROFESIONAL MX 2004 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. 17.- 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.- 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 / 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 «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). 8
  9. 9. LABORATORIO 3 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. 9
  10. 10. DISEÑO WEB PROFESIONAL MX 2004 21.- Procedemos a exportar el archivo: A.- Seleccione el menú 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 Frames 1.- Crear y configurar una nueva pagina o documento HTML en Dreamweaver MX 2004. A.- Seleccione el menú Archivo / Nuevo B.- 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 lista Página blanca seleccionar HTML. 10
  11. 11. LABORATORIO 3 • Haga clic en el botón Crear 2.- 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 todo que 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. 11
  12. 12. DISEÑO WEB PROFESIONAL MX 2004 El orden para guardar los marcos puede variar por eso se recomienda ver su ventana de documento antes 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 el nombre, pues así le será mas fácil trabajar con ellos. 12
  13. 13. LABORATORIO 3 III.- Insertando páginas dentro de marcos 1.- 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 marcos 1.- Ubicar el cursor dentro del marco Izquierdo A.- Sleccione 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, digitar el siguiente valor: #014586. 13
  14. 14. DISEÑO WEB PROFESIONAL MX 2004 • 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 Intercambio 1.- 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: Laboratorio3 adjunta 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 la derecha. 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ón Aceptar. D.-En el campo Texto alternativo digitar Cineplan. E.- Haga clic en el botón Aceptar. VI.- Insertando películas de tipo Flash 1.- 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. 14
  15. 15. LABORATORIO 3 • 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 / Flash B.- En el cuadro de dialogo realizar lo siguiente: • En el campo Buscar en, ubicar el archivo logocineplan.swf que se encuentra en tu carpeta 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: 15

×