segundo laboratorio

963 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
963
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
95
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

segundo laboratorio

  1. 1. LABORATORIO 2 LABORATORIO Nº 2 Objetivos: 1. Creación de Mapas de Imágenes. 2. Inserción de animaciones (Película Flash, Botones flash). 3. Tablas en vista de Diseño. 4. Creación de Hipervínculos. 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 LABORATORIO2 I.- Crear y configurar una nueva página o documento HTML 1.- 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.- 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 senordelosanillos. C.- Clic en el botón Guardar. 2
  3. 3. LABORATORIO 2 5.- Para Configurar nuestro documento HTML realizaremos los siguientes pasos: A.- Menú, Modificar / Propiedades de la página B.- De la lista categoría seleccionar Aspecto, realizar lo siguiente: • En el campo Margen izquierdo: ingrese el valor Cero. • En el campo Margen superior: ingrese el valor Cero. C.- De la lista categoría seleccionar Titulo / Codificación, realizar lo siguiente: • En el campo Titulo digitar El Señor de los Anillos. D.- Clic en el botón Aceptar. 6.- Crear una tabla en vista diseño: A.- Del Panel Insertar, seleccionar la Ficha Diseño y aquí elegir Vista de diseño. B.- Clic en el botón Tabla de diseño ( ), que se encuentra dentro de la Ficha Diseño. C.- Dibujar una tabla en la ventana de documento, seleccionarla y en Panel Propiedades modificar lo siguiente: • En el campo Ancho ingresar el valor de 800. • En el campo Alto ingresar el valor de 600. D.- Del Panel Insertar en la Ficha Diseño, clic en Vista estándar. E.- Seleccionar la Tabla y en el Panel Propiedades modificar lo siguiente: • En el campo Im.,clic en el icono de carpeta y seleccionar el archivo portada_anillos.jpg,que se encuentra ubicado en la siguiente ruta: Laboratorio2 señor de los anillos portada_anillos.jpg (lo que se esta haciendo es poner una imagen como fondo a la tabla). 3
  4. 4. DISEÑO WEB PROFESIONAL MX 2004 F Volver a la Vista diseño de la tabla. .- 7.- Dibujando celdas: A.- Clic en el botón Dibujar celda de diseño ( ) que se encuentra en la Ficha Diseño. B.- En la parte derecha media de la tabla dibujar 2 celdas. 8.- Insertando Botones de tipo Flash: A.- Poner el cursor dentro de cada celda y seguir estos pasos para cada una de ellas: B.- Menú Insertar /Media /Botón Flash. • En el campo Estilo, seleccionar de la lista un estilo de botón, el que usted desee. • En el campo Texto del botón digitar en este caso para el primero Actores y para el segundo botón Escenas. • Clic en el botón Aceptar. 9.- Hasta el momento tu ventana de documento debe verse de la siguiente manera: II.- Creando y configurar una nueva pagina o documento HTML 1.- Seleccionar 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.- Clic en el botón Crear 4
  5. 5. LABORATORIO 2 3.- Procedemos a guardar nuestro documento; seleccionando el menú Archivo / Guardar o presionando 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 actores_anillos. C.- Clic en el botón Guardar. 5.- Configurando nuestro documento HTML: A.- Menú Modificar / Propiedades de la página. B.- De la lista categoría seleccionar Aspecto, realizar lo siguiente: • En el campo Color de fondo de la paleta elegir el color Negro. C.- De la lista categoría seleccionar Título / Codificación, realizar lo siguiente: 5
  6. 6. DISEÑO WEB PROFESIONAL MX 2004 • En el campo Titulo digitar Actores del Señor de los Anillos. D.- Clic en el botón Aceptar. 6.- Crear una tabla en Vista estándar: A.- Menú Insertar / Tabla o del Panel Insertar en la Ficha Diseño, clic en el botón Tabla ( ). B.- En el cuadro de dialogo Insertar tabla: • En el campo Filas ingresar el valor de 15. • En el campo Columnas ingresar el valor de 2. • Clic en el botón Aceptar. 7.- Seleccionar la tabla y en el Panel Propiedades modificar el valor del campo Alinear y elegir de la lista desplegable la opción Centro 8.- En las celdas de la primera columna insertar las imágenes pequeñas de los actores, seguir estos pasos para todas estas celdas: A.- Posicionar el cursor dentro de la primera celda. B.- Menú Insertar / Imagen; los archivos de imagen se encontraran en la siguiente ruta: Laboratorio2señor de los anillos fotos pequeñas. 9.- En las celdas de la segunda columna insertar los nombres correspondiente de los actores seguir los siguientes pasos para este grupo de celdas: A.- Posicionar el cursor dentro de la primera celda. B.- Seleccione el menú Insertar / Imagen; los nombres de los personajes están como imágenes y se encuentran en la siguiente ruta: Laboratorio2 señor de los anillos nombres. C.- Las imágenes y los nombres de los actores irán en el siguiente orden: 6
  7. 7. LABORATORIO 2 • bboyd 1.gif bboyd2.gif • cblan1.gif cblan2.gif • clee1.gif clee2.gif • dmona1.gif dmona2.gif • ewood1.gif ewood2.gif • hweav1.gif hweav2.gif • iholm1.gif iholm2.gif • imcke1.gif imcke2.gif • ityle1.gif ltyle2.gif • jrhys1.gif jrhys2.gif • mcsok1.gif mcsok.gif • obloo1.gif obloo2.gif • sasti1.gif sasti2.gif • sbean1.gif sbean2.gif • vmort1.gif vmort2.gif D.- Esta nueva página o imagen debe verse de la siguiente manera: 7
  8. 8. DISEÑO WEB PROFESIONAL MX 2004 III.- Creando una nueva página HTML. 1.- 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.- Clic en el botón Crear 3.- Procedemos a guardar nuestro documento; en el Menú Archivo /Guardar o presionando 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 actoresdetalles_anillos. C.- Clic en el botón Guardar. 5.- Configurando nuestro documento HTML: 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 de la paleta elegir el color Negro. C.- De la lista categoría seleccionar Titulo / Codificación, realizar lo siguiente: • En el campo Titulo digitar Descripción de los Actores del Señor de los Anillos. D.- Clic en el botón Aceptar. 6.- Crear una tabla en Vista estándar: A.- Seleccione el menú Insertar / Tabla o del Panel Insertar en la Ficha Diseño , clic en el botón Tabla. B.- En el cuadro de dialogo Insertar tabla: • En el campo Filas, ingresar el valor de 30. • En el campo Columnas, ingresar el valor de 2. • Clic en el botón Aceptar. 8
  9. 9. LABORATORIO 2 7.- Seleccionar la tabla y en el Panel Propiedades modificar el valor del campo Alinear y elegir de la lista desplegable la opción Centro. 8.- En la primera columna procederemos a unir celdas: A.- Seleccionar las dos primeras celdas (en forma vertical).Clic en la primera celda y presionando la tecla Ctrl, seleccionar la segunda celda; estas se mostraran de la siguiente manera: B.- En el Panel Propiedades clic en el Icono Combinar las celdas y automáticamente las celdas se unirán transformándose en una sola: Combina celdas 9.- La tabla si la vemos en vista diseño, deberá verse de la siguiente forma: Foto del personaje Descripción d Nombre del personaje Foto del personaje Descripción del personaje 10.- Después de haber realizado este proceso; en esta nueva primera columna, en cada nueva celda procederemos a realizar lo siguiente: A.- Posicionar el cursor dentro de la primera celda. 9
  10. 10. DISEÑO WEB PROFESIONAL MX 2004 B.- Seleccione el menú Insertar / Imagen; los archivos de imagen se encontraran en la siguiente ruta: Laboratorio2 señor de los anillos fotos grandes. 11.- En la primera celda de la segunda columna, insertar los nombres correspondiente de los actores y en la segunda celda la descripción de estos: A.- El nombre y descripción de cada personaje se encuentra en la siguiente ruta: Laboratorio2 señor de los anillos textos. B.- Seleccionar el nombre del actor y hacer el procedimiento de copiado, lo mismo tienes que hacer para la descripción del actor. C.- Posicionar el cursor dentro de la primera celda, clic derecho o secundario del Mouse y seleccionar pegar. 12.- Esta página debe verse de la siguiente manera: IV.- Creación de Hipervínculo y Anclas 1.- Enlazaremos las imágenes de la pagina o documento actores_anillos.htm con el contenido correspondiente a esa imagen que se encuentra en la pagina actoresdetalles_anillos.htm. 2.- En la página actoresdetalles_anillos.htm: A.- Colocar el cursor al final del nombre del personaje (que se encuentra en la celda superior derecha) B.- En el Panel Insertar, en la Ficha Común clic en el botón Anclaje con nombre ( ). 10
  11. 11. LABORATORIO 2 C.- En el cuadro de dialogo que aparece, indicar un nombre que identifique a ese punto o ancla (por ejemplo puede poner el primer nombre del personaje). D.- Repetir los pasos A, B y C para los demás personajes. 3.- En la página actores_anillos.htm: A.- Seleccionar la primera imagen de la tabla. B.- En el Panel Propiedades, en el campo Vínculo, haga clic en el icono de carpeta y en el cuadro de dialogo que aparecerá realizar lo siguiente: • En el campo Buscar en ubicar la carpeta raíz Cineplan y de los archivo que aparecen seleccionar actoresdetalles_anillos.htm. • En el campo Nombre aparecerá el archivo que seleccionaste. • En el campo URL digitar :«#nombre del ancla, o hipervínculo que creaste para esa imagen (lo que se hizo en la pagina actoresdetalles_anillos.htm); todo esto va después del nombre del archivo. • Clic en el botón Aceptar. 4.- Esto se visualizaría de la siguiente manera en el navegador: V.- Creando un Álbum de Fotos 1.- Seleccionar el menú Comandos / Crear álbum de fotos Web 2.- En el cuadro de diálogo modificar lo siguiente: A.- En el campo Titulo del álbum de fotos digitar los siguiente «Escenas de la Película El Señor de los Anillos» 11
  12. 12. DISEÑO WEB PROFESIONAL MX 2004 B.- En el campo Carpeta de imágenes de origen, clic en el botón de su derecha Examinar y ubicar la siguiente ruta Laoratorio2 señor de los anillos escenas C.- En el campo Carpeta de destino, clic en el botón de su derecha Examinar, seleccionaras a la carpeta raíz Cineplan. D.- En el campo Columnas digitar el numero 4. E.- Clic en el botón Aceptar. F.- Automáticamente se abrirá el programa Macromedia Fireworks para crear el álbum de fotos, dejar que el programa termine el proceso. G.- Se crea una página por defecto llamada index.htm, renombrarla con el nombre Escenas_elsenor.htm. H.- Debe aparecerte una nueva página o ventana de documento así como esta: 12
  13. 13. LABORATORIO 2 VI.- Enlazando Páginas o Documentos 1.- Abrir la ventana de documento senordelosanillos.htm. 2.- Doble clic en el Botón Flash llamado Actores. 3.- En el cuadro de diálogo hacer el siguiente cambio: A.- En el campo Vinculo, clic en el botón Examinar, seleccionaras la página actores_anillos.htm que se encuentra dentro de la carpeta raíz Cineplan. B.- Clic en el botón Aceptar. 4.- Doble clic en el Botón Flash llamado Escenas. 5.- En el cuadro de dialogo hacer la siguiente modificación: A.- En el campo Vinculo,clic en el botón Examinar, seleccionaras la página Escenas_elsenor.htm, que se encuentra dentro de la carpeta raíz Cineplan. B.- Clic en el botón Aceptar. 6.- Al ejecutarlo en el navegador debe salir de esta manera: VII.- Creando Mapas de Imágenes. Necesitamos enlazar desde la portada principal el área de la película El Señor de los Anillos, con su página Web diseñada anteriormente, para ello crearemos un mapa de imágenes en esta área. 1.- Abrir la página Portada.htm. 2.- Seleccionar la imagen insertada en esta página, 3.- Y en el panel de Propiedades, activar la herramienta Zona Interactiva Oval. 13
  14. 14. DISEÑO WEB PROFESIONAL MX 2004 4.- Dibujar un círculo alrededor de la zona de la película El Señor de los Anillos, arrastrando con el mouse dentro de la imagen. 5.- El panel de Propiedades ahora mostrara 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: senordelosanillos.htm. 14
  15. 15. LABORATORIO 2 8.- Guardar los cambios realizados y luego para ver una vista preliminar en el explorador, presionar la tecla [F12]. VIII.- Creando y configurar una nueva página. 1.- Seleccionar 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.- Clic en el botón Crear 3.- Procedemos a guardar nuestro documento; en el Menú, Archivo / Guardar o presionando las teclas Ctrl + S. 4.- En el cuadro de dialogo Guardar como, realizar lo siguiente: A.- En la lista desplegable Guardar en, ubicar la carpeta Cineplan. B.- En el campo Nombre digitar el texto capitan_corelli. C.- Clic en el botón Guardar. 5.- Configurando nuestro documento HTML: A.- Menú, Modificar / Propiedades de la página B.- De la lista categoría seleccionar Aspecto, realizar lo siguiente: En el campo Color de Fondo de la paleta elegir el color Negro. C.- De la lista categoría seleccionar Titulo/Codificación, realizar lo siguiente: • En el campo Titulo digitar La Mandolina del Capitán Corelli. D.- Clic en el botón Aceptar. IX.- Insertar Imagen 1.- Posicionar el cursor dentro del documento o pagina capitan_corelli. 2.- Activar el menú Insertar / Imagen. 3.- En el campo Buscar en: desplegarla lista y seleccionar la unidad Laboratorios2 capitan corelli peliculas, seleccionar el archivo fondo_pelicula.jpg. 4- Clic en el botón Aceptar. 15
  16. 16. DISEÑO WEB PROFESIONAL MX 2004 5.- La página deberá aparecer como se muestra a continuación: 6.- En la ventana de documento debajo de la imagen insertar dos botones de tipo Flash y alinearlos al centro. A.- Menú Insertar/ Media / Botón flash. B.- En el cuadro de dialogo insertar botón Flash, realizar las siguientes modificaciones: • En el campo Estilo, seleccionar de la lista un estilo de botón, el usted desee. 16
  17. 17. LABORATORIO 2 • En el campo Texto del botón digitar en este caso para el primero Presentación y para el segundo botón Actores. • En el campo Color de fondo, seleccionar el color negro. • Clic en el botón Aceptar. X.- Creando y configurar una nueva página 1.- Selecciona 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.- Clic en el botón Crear 17
  18. 18. DISEÑO WEB PROFESIONAL MX 2004 3.- Procedemos a guardar nuestro documento; en el menú Archivo / Guardar o presionando 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 presentacion_corelli. C.- Clic en el botón Guardar. 5.- Configurando nuestro documento HTML: A.- Seleccionar 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 de la paleta elegir el color Negro. • En el campo Margen izquierdo: darle valor Cero. • En el campo Margen superior: darle valor Cero. C.- De la lista categoría seleccionar Titulo/Codificación, realizar lo siguiente: • En el campo Titulo digitar Presentación de la Película la Mandolina del Capitán Corelli. D.- Clic en el botón Aceptar. XI.- Insertando Películas Flash (.SWF) 1.- Insertando una película Flash (Imagen): A.- Seleccionar el menú Insertar / Media / Flash 18
  19. 19. LABORATORIO 2 B.- En el cuadro de diálogo Seleccionar archivo, realice lo siguiente: • En la lista desplegable Buscar en, seleccionar de la unidad Laboratorio2capitan corelli peliculas, y elegir el archivo de tipo Flash llamado corelli_intro2.swf. • Clic en el botón Aceptar. XII.- Creando y configurar una nueva página 1.- Seleccionar 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.- Clic en el botón Crear 3.- Procedemos a guardar nuestro documento; seleccionar el menú Archivo / Guardar o presionar las teclas Ctrl + S. 4.- En el cuadro de dialogo Guardar como, realizar lo siguiente: A.- En la lista desplegable Guardar en, ubicar la carpeta Cineplan. B.- En el campo Nombre digitar el texto actores_corelli. C.- Clic en el botón Guardar. 5.- Configurando nuestro documento HTML: A.- Seleccionar 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: #CC3300 • En el campo Margen izquierdo: darle valor Cero. • En el campo Margen superior: darle valor Cero. 19
  20. 20. DISEÑO WEB PROFESIONAL MX 2004 C.- De la lista categoría seleccionar Titulo/Codificación, realizar lo siguiente: En el campo Titulo digitar Actores de la Película la Mandolina del Capitán Corelli. D.- Clic en el botón Aceptar. 6.- Copiar los archivos (bio1, bio2, bio4, bio5, bio6, bio7, bio8) que se encuentran dentro de la carpeta Laboratorio2capitan corelli botones, hacia la carpeta raíz llamada Cineplan. XIII.- Insertando Películas Flash (.SWF) 1.- Insertando una película Flash (Imagen): A.- Seleccione el menú Insertar / Media / Flash. B.- En el cuadro de dialogo Seleccionar archivo, realice lo siguiente: • En la lista desplegable Buscar en, seleccionar de la carpeta: Laboratorio2capitan corelli botones, el archivo de tipo Flash llamado bios.swf. • Clic en el botón Aceptar. XIV.- Enlazando Páginas o Documentos 1.- Abrir la ventana de documento capitan_corelli.htm. 2.- Doble clic en el Botón Flash llamado Presentación. 3.- En el cuadro de dialogo hacer el siguiente cambio: A.- En el campo Vinculo, clic en el botón Examinar, seleccionaras la pagina presentacion_corelli que se encuentra dentro de la carpeta raíz Cineplan. B.- Clic en el botón Aceptar. 4.- Doble clic en el Botón Flash llamado Actores. 5.- En el cuadro de diálogo hacer la siguiente modificación: 20
  21. 21. LABORATORIO 2 A.- En el campo Vinculo, clic en el botón Examinar, seleccionaras la pagina actores_corelli.htm que se encuentra dentro de la carpeta raíz Cineplan. B.- Clic en el botón Aceptar. 6.- Al ejecutarlo en el navegador debe verse de esta manera: XV.- Creando Mapas de Imágenes. Para finalizar este laboratorio necesitamos enlazar desde la portada principal el área de la película La Mandolina del Capitán Corelli, con su página Web diseñada anteriormente, para ello crearemos un mapa de imágenes en esta área. 1.- Abrir la página Portada.htm. 2.- Seleccionar la imagen insertada en esta página, 3.- Y en el panel de Propiedades, activar la herramienta Zona Interactiva Oval. 21
  22. 22. DISEÑO WEB PROFESIONAL MX 2004 4.- Dibujar un círculo alrededor de la zona de la película La Mandolina del Capitán Corelli, arrastrando con el mouse dentro de la imagen. 5.- El panel de propiedades ahora mostrara 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: capitan_corelli.htm. 22
  23. 23. LABORATORIO 2 8.- Guardar los cambios realizados y luego para ver una vista preliminar en el explorador, presionar la tecla [F12]. 23

×