1

LABORATORIO5

LABORATORIO Nº 5Objetivos:

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

LABORATORIO5I.- Creando un Álbum de Fotos

1.- Seleccione 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 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 Laboratorio5\Cartelera, adjuntar al CD-ROMC.- 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.

3

LABORATORIO5

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, esdentro 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.-Dibujarun rectángulo alrededorde la zonaque tienecomotexto«En CARTELERA»,arrastrandocon el mouse dentro de la frase.

4

DISEÑO WEB PROFESIONAL MX 2004

5.- El panel de propiedades ahora mostrará 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: 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 nodeben 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

5

LABORATORIO5

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

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 elestilo creado y dar clic derecho, y seleccionar la opción Aplicar.

10.- He aquí una visualización:

7

LABORATORIO5

11.- De igual forma ubicaras el cursor al inicio de cada párrafo y luego en el panel Estilo CSS, darásun clic en el estilo externo para aplicar los cambios.

12.- Si deseas modificar las propiedades del estilo externo, solo basta con darle doble clic yaparecerá el cuadro de modificaciones.

13.- Guardar los cambios en la página o documento (menú, Archivo / Guardar).

V.- Utilizando Estilo Externo en otra Página1.- 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.

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