segundo laboratorio

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

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

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


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

4

LABORATORIO 2

3.- Procedemos a guardar nuestro documento; seleccionando el menú Archivo / Guardar o
presionando las teclas Ctrl + S.
B.- En el campo Nombre digitar el texto actores_anillos.

5.- Configurando nuestro documento HTML:
A.- Menú Modificar / Propiedades de la página.
• 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


• En el campo Titulo digitar Actores del Señor de los Anillos.
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.

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:
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

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


III.- Creando una nueva página HTML.
1.- Seleccione el menú Archivo / Nuevo
3.- Procedemos a guardar nuestro documento; en el Menú Archivo /Guardar o presionando las
teclas Ctrl + S.
B.- En el campo Nombre digitar el texto actoresdetalles_anillos.
A.- Seleccione el menú Modificar / Propiedades de la página
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.
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.

8

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:

9


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

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


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

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


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

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
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:
B.- En el campo Nombre digitar el texto capitan_corelli.
A.- Menú, Modificar / Propiedades de la página
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.

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


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

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.

X.- Creando y configurar una nueva página
1.- Selecciona el menú Archivo / Nuevo.

17


3.- Procedemos a guardar nuestro documento; en el menú Archivo / Guardar o presionando las
teclas Ctrl + S.
B.- En el campo Nombre digitar el texto presentacion_corelli.

A.- Seleccionar el menú Modificar / Propiedades de la página
• 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.
• En el campo Titulo digitar Presentación de la Película la Mandolina del Capitán
Corelli.

XI.- Insertando Películas Flash (.SWF)
1.- Insertando una película Flash (Imagen):
A.- Seleccionar el menú Insertar / Media / Flash

18

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.

XII.- Creando y configurar una nueva página
1.- Seleccionar el menú Archivo / Nuevo.
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:
B.- En el campo Nombre digitar el texto actores_corelli.
A.- Seleccionar el menú Modificar / Propiedades de la página
• 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


En el campo Titulo digitar Actores de la Película la Mandolina del Capitán Corelli.
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.

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
4.- Doble clic en el Botón Flash llamado Actores.
5.- En el cuadro de diálogo hacer la siguiente modificación:

20

LABORATORIO 2

A.- En el campo Vinculo, clic en el botón Examinar, seleccionaras la pagina actores_corelli.htm
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


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

LABORATORIO 2

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

23

segundo laboratorio

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (6)

Semelhante a segundo laboratorio

Semelhante a segundo laboratorio (20)

Mais de Esmirio Castillo Gonzales

Mais de Esmirio Castillo Gonzales (10)

segundo laboratorio