segundo laboratorio

1

LABORATORIO 2

LABORATORIO Nº 2Objetivos:

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

2

DISEÑO WEB PROFESIONAL MX 2004

LABORATORIO2I.- Crear y configurar una nueva página o documento HTML

1.- Seleccione el menúArchivo / Nuevo2.- 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ásicaseleccionar HTML.

B.- Clic en el botón Crear

3.- Procedemos a guardar nuestro documento seleccione el menú, Archivo / Guardar o presionelas 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.

3

LABORATORIO 2

5.- Para Configurar nuestro documento HTML realizaremos los siguientes pasos:A.- Menú, Modificar / Propiedades de la páginaB.- 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 archivoportada_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 imagencomo fondo a la tabla).

4


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 HTML1.- Seleccionar el menú Archivo / Nuevo2.- 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.


5

LABORATORIO 2

3.- Procedemos a guardar nuestro documento; seleccionando el menú Archivo / Guardar opresionando 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:

6


• 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 dela lista desplegable la opción Centro

8.- En las celdas de la primera columna insertar las imágenes pequeñas de los actores, seguir estospasos 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:

Laboratorio2\señ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:

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:

8


III.- Creando una nueva página HTML.1.- Seleccione el menú Archivo / Nuevo2.- En el cuadro de diálogo Nuevo documento, realizar lo siguiente:


B.- Clic en el botón Crear3.- 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áginaB.- 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ónTabla.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.

9

LABORATORIO 2

7.- Seleccionar la tabla y en el Panel Propiedades modificar el valor del campo Alinear y elegir dela 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 celdasse unirán transformándose en una sola:

9.- La tabla si la vemos en vista diseño, deberá verse de la siguiente forma:Foto del personaje

Descripción d

10.- Después de haber realizado este proceso; en esta nueva primera columna, en cada nuevacelda procederemos a realizar lo siguiente:A.- Posicionar el cursor dentro de la primera celda.

Foto del personaje

Nombre del personaje

Descripcióndel personaje

Combina celdas

10


B.- Seleccione el menú Insertar / Imagen; los archivos de imagen se encontraran en la siguienteruta: Laboratorio2 \ señor de los anillos \fotos \grandes.

11.- En la primera celda de la segunda columna, insertar los nombres correspondiente de losactores 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 quehacer para la descripción del actor.

C.- Posicionar el cursor dentro de la primera celda, clic derecho o secundario del Mouse yseleccionar pegar.

12.- Esta página debe verse de la siguiente manera:

IV.- Creación de Hipervínculo y Anclas1.- 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 superiorderecha)

B.- En el Panel Insertar, en la Ficha Común clic en el botón Anclaje con nombre ( ).

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 vadespué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 Fotos1.- Seleccionar el menú Comandos / Crear álbum de fotos Web2.- 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 ElSeñor de los Anillos»

12


B.- En el campo Carpeta de imágenes de origen, clic en el botón de su derecha Examinary 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, seleccionarasa 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:

13

LABORATORIO 2

VI.- Enlazando Páginas o Documentos1.- 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ónExaminar, seleccionaras la página actores_anillos.htmque 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áginaEscenas_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 supá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.

14


4.- Dibujar un círculo alrededor de la zona de la película El Señor de los Anillos, arrastrando con elmouse dentro de la imagen.

5.- El panel de Propiedades ahora mostrara 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: senordelosanillos.htm.

15

LABORATORIO 2

8.- Guardar los cambios realizados y luego para ver una vista preliminar en el explorador, presionarla tecla [F12].

VIII.- Creando y configurar una nueva página.1.- Seleccionar el menú Archivo / Nuevo2.- En el cuadro de diálogo Nuevo documento, realizar lo siguiente:


B.- Clic en el botón Crear3.- 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áginaB.- 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 Imagen1.- 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.

16


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

17

LABORATORIO 2

• En el campo Texto del botón digitar en este caso para el primero Presentación ypara 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ágina1.- Selecciona el menú Archivo / Nuevo.2.- En el cuadro de diálogo Nuevo documento, realizar lo siguiente:



18


3.- Procedemos a guardar nuestro documento; en el menú Archivo / Guardar o presionando lasteclas 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áginaB.- 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

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 Laboratorio2\capitan

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ágina1.- Seleccionar el menú Archivo / Nuevo.2.- En el cuadro de diálogo Nuevo documento, realizar lo siguiente:


B.- Clic en el botón Crear3.- 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áginaB.- 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.

20


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 lacarpeta Laboratorio2\capitan 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: Laboratorio2\capitancorelli \botones, el archivo de tipo Flash llamado bios.swf.

• Clic en el botón Aceptar.

XIV.- Enlazando Páginas o Documentos1.- 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ónExaminar, seleccionaras la paginapresentacion_corellique 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:

21

LABORATORIO 2

A.- En el campo Vinculo, clic en el botónExaminar, seleccionaras la paginaactores_corelli.htmque 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ículaLa Mandolina del Capitán Corelli, con su página Web diseñada anteriormente, para ello crearemosun 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.

22


4.- Dibujar un círculo alrededor de la zona de la película La Mandolina del Capitán Corelli, arrastrandocon el mouse dentro de la imagen.

5.- El panel de propiedades ahora mostrara 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: capitan_corelli.htm.

23

LABORATORIO 2

8.- Guardar los cambios realizados y luego para ver una vista preliminar en el explorador, presionarla tecla [F12].

segundo laboratorio

Travel

Transcript of segundo laboratorio