1. LABORATORIO 5
LABORATORIO Nº 5
Objetivos:
1. Creación de Álbum de Fotos.
2. Creación de Mapas de Imágenes.
3. Creación de Estilos Externos (Hojas CSS).
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. DISEÑO WEB PROFESIONAL MX 2004
LABORATORIO5
I.- Creando un Álbum de Fotos
1.- Seleccione 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 lo siguiente «Cartelera»
B.- En el campo Carpeta de imágenes de origen, clic en el botón de su derecha Examinar y
ubicar la siguiente ruta Laboratorio5Cartelera, adjuntar al CD-ROM
C.- En el campo Carpeta de destino, clic en el botón de su derecha Examinar, seleccionar la
carpeta raíz cineplan.
D.- En el campo Columnas, digitar el número 4.
E.- Haga clic en el botón Aceptar.
F Automáticamente se abrirá el programa Macromedia Fireworks MX 2004 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
cartelera.htm (menú Archivo Guardar Como).
3.- Se generan automáticamente dos tablas dentro de este álbum de fotos.
4.- Seleccionar la primera tabla (en el cual esta contenido el titulo del álbum de fotos):
A.- En el panel Propiedades, realizar lo siguiente:
En el campo Fnd Seleccione el color Blanco.
2

3. LABORATORIO 5
En el campo Borde Seleccione el color Blanco.
5.- Seleccionar la segunda tabla (la cual contiene las imágenes):
A.- En el panel Propiedades, realizar lo siguiente:
En el campo Fondo, ingresar el siguiente valor: #999999.
6.- La página debe visualizarse de la siguiente manera:
II.- Creando Mapas de Imágenes.
Crearemos un Mapa de Imágenes para enlazar esta página de álbum de fotos con el marco principal
(que es el primero que se creo) llamado marco_principal.htm.
1.- Dentro de la pagina o documento marco_centro.htm, se encuentra la página 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 «En CARTELERA», arrastrando
con el mouse dentro de la frase.
3

4. DISEÑO WEB PROFESIONAL MX 2004
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: cartelera.htm.
8.- En la casilla Destino, elegir de la lista desplegable la opción centro, para que la página aparezca
en el marco centro.
III.- Creación de Estilos Externos
Para que el estilo externo funcione para todos los textos de la página, las propiedades de estos no
deben ser modificadas en el Panel Propiedades.
1.- Abrir la pagina o documento elpatriota_actoresdetalles.htm.
2.- Situé el cursor al inicio del primer párrafo.
3.- Seleccione el menú Ventana / Estilos CSS.
4.- Dar clic en el botón Nuevo Estilo CSS que tiene un signo más ( ), que se
encuentra en la parte inferior derecha de este panel.
5.- Del cuadro dialogo Nuevo estilo CSS, realizar lo siguiente:
A.- En el campo Nombre, digitar: Actores, Detalles.
B.- Del campo Tipo, seleccionar la opción Clase.
C.- En el campo Definir en, seleccionar el primer botón y de la lista desplegable de su costado
4

5. LABORATORIO 5
seleccionar Nuevo archivo de hojas de estilos.
D.- Haga clic en el botón Aceptar.
6.- Automáticamente aparecerá el cuadro de dialogo Guardar archivo de hoja de estilos como,
realizar lo siguiente:
A.- En el campo Guardar en, seleccionar la carpeta raíz (cineplan).
B.- En el campo Nombre, digitar: Estilo_Externo.
C.- Haga clic en el botón Aceptar.
7.- Aparecerá un nuevo cuadro de diálogo Definición de estilos, en el cual vamos a definir las
propiedades que va a tener nuestro nuevo texto modificado. Realizar lo siguiente:
A.- De la lista Categoría, seleccionar Tipo.
B.- De las opciones de tipo, realizar lo siguiente:
En el campo Fuente, seleccionar el tipo de letra Times New Roman.
En el campo Tamaño, seleccionar el número 12.
En el campo Estilo, seleccionar normal.
En el campo Decoración, activar la casilla parpadeo.
En el campo Color, seleccionar el color Blanco.
C.- Haga clic en el botón Aceptar.
5

6. DISEÑO WEB PROFESIONAL MX 2004
8.- En el panel Estilo CSS aparecerá el nuevo estilo creado, llamado ActoresDetalles.
9.- Para aplicar el estilo seleccionar al texto que desea aplicar en el panel Estilo CSS, seleccionar el
estilo creado y dar clic derecho, y seleccionar la opción Aplicar.
10.- He aquí una visualización:
6

7. LABORATORIO 5
11.- De igual forma ubicaras el cursor al inicio de cada párrafo y luego en el panel Estilo CSS, darás
un clic en el estilo externo para aplicar los cambios.
12.- Si deseas modificar las propiedades del estilo externo, solo basta con darle doble clic y
aparecerá el cuadro de modificaciones.
13.- Guardar los cambios en la página o documento (menú, Archivo / Guardar).
V.- Utilizando Estilo Externo en otra Página
1.- Abrir la página o documento actoresdetalles_anillos.htm.
2.- Del panel Estilos CSS, presionar sobre el botón Adjuntar hoja de estilos
( ) que se encuentra ubicado en la parte inferior derecha de este panel.
3.- Aparecerá el cuadro de dialogo Vincular hoja de estilo; externa, y realizar lo siguiente:
A.- En el campo Arch/URL, dar clic en el botón Examinar que se encuentra a la derecha,
ubicar el estilo que creaste con el nombre Estilo_Externo.css.
7

8. DISEÑO WEB PROFESIONAL MX 2004
B.- En el campo Añadir como, seleccionar la opción Vincular.
C.- Haga clic en el botón Aceptar.
4.- En el panel Estilos CSS aparecerá el estilo vinculado, llamado ActoresDetalles.
Para que el estilo externo funcione para todos los textos de la página, las propiedades de estos no
deben ser modificadas en el panel Propiedades.
5.- De igual forma ubicaras el cursor al inicio de cada párrafo y luego en el panel Estilos CSS.
6.- Seleccionar el estilo externo y luego dar clic derecho y elegir la opción Aplicar.
8