LABORATORIO 4




                          LABORATORIO Nº 4
Objetivos:

 1. Optimización de imágenes en Fireworks.
 2. Cr...
DISEÑO WEB PROFESIONAL MX 2004




                              LABORATORIO4
I.- Optimización de imágenes en Fireworks.
1...
LABORATORIO 4




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




5.- Arrastrar la imag...
DISEÑO WEB PROFESIONAL MX 2004



8.- Para lograr un ajuste perfecto del tamaño de la imagen con la del área de trabajo, s...
LABORATORIO 4




13.- Seleccione nuevamente la imagen, en el panel Propiedades clic en el botón Editar y organizar
     e...
DISEÑO WEB PROFESIONAL MX 2004



19.- Seleccionar la imagen y presionar la tecla Supr. para eliminar la imagen del mes de...
LABORATORIO 4




3.- Haga clic en el botón Aceptar.
4.- Seleccionar la imagen y en el panel Propiedades haga clic en el b...
DISEÑO WEB PROFESIONAL MX 2004



    B.- En el cuadro de diálogo Nuevo documento, realizar lo siguiente:
              En...
LABORATORIO 4




   J.- Entonces en el campo nombre digitaremos estreno_izquierdo.
   K.- Haga clic en el botón Guardar.
...
DISEÑO WEB PROFESIONAL MX 2004



            Al cambiar los nombres de los marcos no importa el orden, pero si a que marc...
LABORATORIO 4




   E.- Se visualiza de la siguiente manera:




5.- Insertar animación al texto:
    A.- Seleccionar el ...
DISEÑO WEB PROFESIONAL MX 2004



     D.- Del panel Película en la ficha Texto, cambiar los siguientes valores:
         ...
LABORATORIO 4




   B.- Insertarás 8 textos y digitaras lo siguiente en cada uno de ellos:
             El Señor de los A...
DISEÑO WEB PROFESIONAL MX 2004



               En el cuadro de colores ingresar el siguiente valor: FB-B4-04.
          ...
LABORATORIO 4



   D.- Aparecerá la siguiente ventana de proceso.




   E.- Ejecute el archivo para que observe como ha ...
DISEÑO WEB PROFESIONAL MX 2004



                En el campo Título digitar Estrenos.
    C.- Haga clic en el botón Acept...
LABORATORIO 4




IX.- Inserción de Botones Flash
1.- Ubicar el cursor dentro del marco E_Izquierdo.
2.- Seleccione el men...
DISEÑO WEB PROFESIONAL MX 2004




X.- Creando Mapas de Imágenes.
Para finalizar este laboratorio necesitamos enlazar desd...
LABORATORIO 4




9.- Para retornar a la página principal, sin necesidad de usar las direccionales de retroceso de la
    ...
DISEÑO WEB PROFESIONAL MX 2004




20
Upcoming SlideShare
Loading in …5
×

manual nº 04

1,234 views
1,185 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,234
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
96
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

manual nº 04

  1. 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. 1
  2. 2. 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
  3. 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. 3
  4. 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 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
  5. 5. 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. Haga clic en el botón Guardar. 5
  6. 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 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
  7. 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á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
  8. 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 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
  9. 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 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
  10. 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 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
  11. 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 / 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
  12. 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 Escena3 A.- Seleccione el menú, Insertar Texto. 12
  13. 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 se aplica 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. 13
  14. 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. 14
  15. 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 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. 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: 15
  16. 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 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
  17. 17. 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. 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. 17
  18. 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 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
  19. 19. 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. 20. DISEÑO WEB PROFESIONAL MX 2004 20

×