Manual nº 06

1

LABORATORIO 6

LABORATORIO Nº 6Objetivos:

1. Creación y manejo de capas.2. Creación y manejo de Comportamientos.

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

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

1.- Activar 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ásicaseleccionar HTML.

B.- Clic en el botón Crear

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 norte.C.- Clic en el botón Guardar.

5.- Para configurar nuestro documento HTML realizaremos los siguientes pasos:A.- Activar el menú Modificar / Propiedades de la páginaB.- De la lista categoría seleccionar Aspecto, realizar lo siguiente:

• En el campo Color de Fondo ingresar el siguiente valor #306790.C.- De la lista categoría seleccionar Titulo/Codificación, realizar lo siguiente:

• En el campo Titulo digitar CinePlan Norte.D.- Clic en el botón Aceptar.

A.- Creación de Tablas1.- Ubicar el cursor en cualquier parte del documento.

3

LABORATORIO 6

2.- Ir al menú Insertar / Tabla.3.- Del cuadro de diálogo modificar lo siguiente:

A.- En el campo Filas,digitar el valor 2.B.- En el campo Columnas, digitar el valor 1.C.- En el campo Ancho de tabla, digitar el valor 428.D.- Clic en el botón Aceptar.

4.- Seleccionar la tabla y en el Panel Propiedades modificar lo siguiente:A.- En el campo Al (Alto), ingresar el siguiente valor 312.B.- En el campo Col. Borde, digitar el siguiente valor #F9B307.C.- En el campo Id de tabla, digitar norte.D.- En el campo Alinear, de la lista seleccionar Centro.

5.- Ubicar el cursor dentro de la primera fila.6.- Activar el menú Insertar / Imagen.7.- En el campo Buscar en: seleccionar la carpeta Laboratorio6/cines, adjuntar al CD ROM, de

la cual seleccionar el archivo norte.jpg.8.- Clic en el botón Aceptar.9.- Seleccionar la imagen y acondicionarla al tamaño de la celda.10.- Ubicar el cursor dentro de la segunda fila.

4


11.- Digitar el siguiente texto: CinePlan Norte.12.- Seleccionar el texto y en el Panel Propiedades modificar lo siguiente:

A.- En el campo Tam (Tamaño), de la lista seleccionar el valor 24 y de la lista desplegable de sucostado elegir Píxeles.

B.- En el cuadro de color del texto Ingresar el siguiente valor #F9B307.C.- Clic en la letra B ( ), esto es para dar negrita al texto.D.- En las líneas de ubicación de texto seleccionar el botón de alineación al centro ( )

13.- Guardar los cambios y ejecutar. El documento debe quedar de la siguiente manera:

14.- Repartir los pasos del punto i pero creando las siguientes páginas:• sanmiguel.htm• alcazar.htm• primavera.htm

5

LABORATORIO 6

• arequipa.htm• centro.htm

15.- Seguir los pasos del punto A (creación de tablas), para cada archivo y dentro de las tablas decada página insertar las siguientes imágines y digitar los siguientes textos:

Archivo Imagen Titulo• sanmiguel.htm sanmiguel.jpg CinePlan San Miguel• alcazar.htm alcazar.jpg Cine Plan Alcazar• primavera.htm primavera.jpg CinePlan Primavera• arequipa.htm arequipa.jpg CinePlan Arequipa• centro.htm centro.jpg CinePlan Centro.

II.- Creación de Capas y Edición de imágenes en Fireworks1.- Del Panel Archivos ubicar el archivo llamado marco_principal que es el que contiene el

conjunto de marcos que se creo en el Lab. Nº 3 y abrirlo.2.- Ir al menú Insertar / Objetos de diseño / Capa.3.- Dibujar la capa en el marco_centro.4.- Seleccionar la capa y en Panel Propiedades, modificar lo siguiente:

A.- En el campo An ingresar el valor de 436.B.- En el campo Al ingresar el valor de 25.

5.- La capa debe estar ubicada en la posición que se muestra en la imagen a continuación:

6


6.- Ubicar el cursor dentro de la capa e ir al menú Insertar / Objetos de imagen / Marcador deposición de imagen.

7.- Aparecerá un cuadro de diálogo, del cual realizar los siguientes cambios:A.- En el campo Nombre digitar locales.B.- En el campo Ancho ingresar el valor 109.C.- En el campo Altura ingresar el valor 25.

8.- Ubicar el cursor al costado de este nuevo objeto insertado dentro de la capa e ir al menúInsertar / Objetos de imagen / Marcador de posición de imagen.

9.- Aparecerá un cuadro de diálogo, realizar los siguientes cambios:A.- En el campo Nombre digitar estrenos.B.- En el campo Ancho ingresar el valor 109.C.- En el campo Altura ingresar el valor 25.


11.- Aparecerá un cuadro de diálogo, realizar los siguientes cambios:A.- En el campo Nombre digitar noticias.B.- En el campo Ancho ingresar el valor 109.C.- En el campo Altura ingresar el valor 25.

7

LABORATORIO 6


13.- Aparecerá un cuadro de diálogo, realizar los siguientes cambios:A.- En el campo Nombre digitar promociones.B.- En el campo Ancho ingresar el valor 109.C.- En el campo Altura ingresar el valor 25.

14.- Seleccionar el primer marcador de posición de imagen y del Panel Propiedades clic en elbotón Crear.

15.- Se abrirá el programa Fireworks para crea una imagen.

8


16.- Del Panel de Herramientas clic en el botón Herramienta Rectángulo.

17.- Dibujar un rectángulo del mismo tamaño de nuestra área de trabajo, seleccionar el rectángulocreado y en el Panel de propiedades, clic en el botón de color de relleno ( ). En la casilla detexto digitar el siguiente valor #085DB5.

9

LABORATORIO 6

18.- Del Panel Herramienta seleccionar el botón Herramienta Texto ( ).19.- Luego dar un clic sobre el rectángulo que creaste, se creará un cuadro con cursor dentro en el

cual insertará el siguiente texto: Locales.20.- Seleccionar el texto y del Panel Propiedades dar clic en el botón color de texto ( ) y digitar

el siguiente valor: #FFB200.21.- Nuestra área de trabajo debe quedar de la siguiente manera:

20.- Ir al menú Archivo/Guardar como aparecerá un cuadro de diálogo, guardar el objeto en lacarpeta raíz (cineplan) con el nombre de locales.

21.- Clic en el botón Guardar.22.- Luego aparecerá un segundo cuadro de diálogo para exportar la imagen creada, guardarla en

la carpeta raíz (cineplan) con el nombre de locales.23.- Clic en el botón Guardar.

10


26.- Regresar a Dreamweaver y dando clic en el botón Listo en Fireworks se visualizara de lasiguiente manera:

27.- Realizar desde el paso 12 hasta el paso 23, para los tres restantes marcadores de posición deimagen, pero asignándole sus respectivos nombres:

• Segundo marcador de posición de imagen: Estrenos.• Tercer marcador de posición de imagen: Noticias.• Cuarto marcador de posición de imagen: Promociones.

A.- Asignando Comportamientos a los objetos1.- Seleccionar el botón Locales, que se encuentra dentro de la capa creada anteriormente.

2.- Ir al menú Ventana / Comportamientos, se abrirá el Panel Comportamientos.3.- Clic en el botón que tiene una cruz ( ), llamado Añadir comportamiento y seleccionar la

acción Mostrar menú emergente.

11

LABORATORIO 6

4.- Del cuadro de diálogo Mostrar menú emergente modificar lo siguiente5.- Clic en la Ficha Contenido y realizar lo siguiente:

A.- En el campo Texto digitar lo siguiente: Centro.B.- En el campo Vínculo clic en el botón que se encuentra a su diestra que tiene la forma de una

carpeta y ubicar el archivo centro.htm.C.- En el campo Destino desplegar la lista y elegir la opción _blank.D.- En el campo Menú clic en el botón llamado Añadir elemento.( )E.- Ahora se procederá a rellenar nuevamente los campos.F.- Seguir los pasos desde la letra A hasta la letra D, pero con los siguientes nombres y vínculos:

• Norte norte.htm• Arequipa arequipa.htm• Alcazar alcazar.htm• San Miguel sanmiguel.htm• Primavera primavera.htm

12


6.- Clic en la Ficha Aspecto y realizar lo siguiente:A.- En el campo Tamaño digitar el valor 16.B.- En los botones de alineación clic en el botón Alinear al centro ( ).C.- En los campos de Estado Arriba:

• En el campo Texto, clic en el botón de colores y seleccionar el color que desee.• En el campo Celda, clic en el botón de colores y seleccionar el color que desee.

D.- En los campos de Estado Sobre:• En el campo Texto, clic en el botón de colores y seleccionar el color que desee.• En el campo Celda, clic en el botón de colores y seleccionar el color que desee.

Estado Arriba, muestra los colores de texto y de celda al desplegar la lista del menú. EstadoSobre, muestra los colores que seleccionaste al pasar el mouse sobre el menú.

7 .- Clic en la ficha Avanzado y realizar lo siguiente:A.- En el campo Ancho de celda, en la lista desplegable elegir Píxeles y luego en el campo del

costado introducir el valor 100.B.- En el campo Alto de celda, en la lista desplegable elegir Píxeles y luego en el campo del

costado introducir el valor 22.

13

LABORATORIO 6

8.- Clic en la Ficha Posición y realizar lo siguiente:A.- Del juego de botones de Posición del menú elegir el segundo botón (de izquierda a

derecha), llamado Por debajo y en el Borde izquierdo o Desencadenar ( ).B.- Clic en el botón Aceptar.

9.- En el Panel Comportamientos. Aparecerán los siguientes comportamientos acompañados desus respectivos eventos.

14


Al pasar el mouse sobreeste botón aparecerá el

menú desplegable

El evento onMouseOver se desencadena o ejecuta cuando pasamos el mouse sobre el objeto quecontiene el comportamiento, el evento onMouseOut se desencadena cuando el mouse abandonaesta posición.

10.- Guardar los cambios y ejecutar la página o documento.

B.- Asignando Comportamientos a los objetos1.- Seleccionar el botón Estrenos, que se encuentra dentro de la capa creada anteriormente.

2.- Ir al menú Ventana / Comportamientos, se abrirá el Panel Comportamientos.3.- Clic en el botón que tiene una cruz ( ), llamado Añadir comportamiento y seleccionar la

acción Mostrar menú emergente.


A.- En el campo Texto digitar lo siguiente: Enero.B.- En el campo Vínculo clic en el botón que se encuentra a su diestra que tiene la forma de una

carpeta y ubicar el archivo enero.htm.

15

LABORATORIO 6

C.- En el campo Destino desplegar la lista y elegir la opción «_blank».D.- En el campo Menú clic en el botón Añadir elemento.( )E.- Ahora se procederá a rellenar nuevamente los campos.F.- Seguir los pasos desde la letra A hasta la letra D, pero con los siguientes nombres y vínculos:

Febrero febrero.htmMarzo marzo.htmAbril abril.htmMayo mayo.htmJunio junio.htm




16


Estado Arriba, muestra los colores de texto y de celda al desplegar la lista del menú. EstadoSobre, muestra los colores que seleccionaste al pasar el mouse sobre el menú.

8.- Clic en la ficha Avanzado y realizar lo siguiente:A.- En el campo Ancho de celda, en la lista desplegable elegir Píxeles y luego en el campo del



17

LABORATORIO 6



10.- En el Panel Comportamientos aparecerán los siguientes comportamientos acompañados desus respectivos eventos.


ComportamientosEventos delcomportamiento

Al pasar el mouse sobre elbotón se desplegará su menú emergente.

18


III.- Crear y configurar una nueva página 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.

B.- Clic en el botón Crear

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 aloplan.C.- Clic en el botón Guardar.

5.- Para Configurar nuestro documento HTML realizaremos los siguientes pasos:A.- Seleccioné el menú Modificar / Propiedades de la páginaB.- De la lista categoría seleccionar Aspecto y realizar lo siguiente:

• En el campo Color de Fondo ingresar el siguiente valor: #336699.• En el campo Margen izquierdo digitar el valor 0.• En el campo Margen superior digitar el valor 0.

C.- De la lista categoría seleccionar Titulo/Codificación y realizar lo siguiente:• En el campo Titulo digitar Aló Plan.

D.- Clic en el botón Aceptar.

19

LABORATORIO 6

A.- Inserción de imágenes y creación de capas.1.- Colocar el cursor dentro de la página, luego ir al menú Insertar /Imagen.2.- En el cuadro de diálogo Seleccionar origen de imagen realizar lo siguiente:

A.- En el campo Buscar en, ubicar la siguiente ruta: Laboratorio6\ adjunto al CD ROM yseleccionar el archivo cine.jpg.

B.- Clic en el botón Aceptar.

3.- En la siguiente línea digitar el siguiente texto:Aló Plan.4.- Seleccionar el texto e ir al Panel Propiedades y modificar lo siguiente:

A.- En el campo Tam (tamaño), en el primer cuadro seleccionar 36 y en el segundo cuadroseleccionar de la lista píxeles.

B.- En el cuadro de color del texto ingresar el siguiente valor #FFB400.

5.- Ir al menú Insertar / Objetos de diseño / capa.6.- Dibujar una capa en la ventana, seleccionarla y luego en el Panel Propiedades modificar lo

siguiente:A.- En el campo An ingresar el siguiente valor: 277.B.- En el campo Al ingresar el siguiente valor: 215.

7.- Colocar el cursor dentro de la capa e ir al menú Insertar /Imagen.

20


8.- En el cuadro de diálogo Seleccionar origen de imagen realizar lo siguiente:A.- En el campo Buscan en, ubicar la siguiente ruta: Laboratorio6\ noticias adjunto al CD

ROM y seleccionar el archivo alo.jpg.B.- Clic en el botón Aceptar.

9.- Seleccionar la imagen y cambiar el ancho y el alto en el panel Propiedades:• An : 276• Al : 215

10.- De la siguiente ruta Laboratorio6\ noticias \ adjunto al CD ROM y ubicar el siguiente archivoaloplan.txt y abrirlo.

11.- Seleccionar el contenido de este archivo y copiarlo al portapapeles (ctrl+ c).12.- En el documento en el cual estamos trabajando, ubicar el cursor dentro de la capa, luego de la

imagen.13.- Ir al menú Edición / Pegar, seleccionar el texto pegado e ir al Panel Propiedades y modificar

lo siguiente:A.- En el cuadro color de texto elegir el color Blanco.B.- En los botones de alineación de texto elegir el botón Justificar ( ).

14.- Seleccionar la imagen e ir al panel Propiedades y del menú de lista desplegable AlinearSeleccione la opción Izquierda.

15.- Guardar los cambios y ejecute.

21

LABORATORIO 6

IV.- Crear y configurar una nueva página o documento HTML1.- 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 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 premium.C.- Clic en el botón Guardar.

5.- Para configurar nuestro documento HTML realizaremos los siguientes pasos:A.- Seleccionar menú el Modificar / Propiedades de la páginaB.- De la lista categoría seleccionar Aspecto, realizar lo siguiente:

• En el campo Color de Fondo ingresar el siguiente valor #336699.• En el campo Margen izquierdo digitar el valor 0.• En el campo Margen superior digitar el valor 0.

22


C.- De la lista categoría seleccionar Titulo/Codificación, realizar lo siguiente:• En el campo Titulo digitar Tarjetas Plan Premium.




B.- Clic en el botón Aceptar.3.- En la siguiente línea digitar el siguiente texto:Programa de Usuario Frecuente Plan Premium.4.- Seleccionar el texto e ir al Panel Propiedades y modificar lo siguiente:





7.- Colocar el cursor dentro de la capa e ir al menú Insertar / Imagen.8.- En el cuadro de diálogo Seleccionar origen de imagen realizar lo siguiente:

A.- En el campo Buscan en, ubicar la siguiente ruta: Laboratorio6\ noticias adjunto al CDROM y seleccionar el archivo premium.jpg.

B.- Clic en el botón Aceptar.9.- Seleccionar la imagen y cambiar el ancho y alto en el Panel de Propiedades:

• An : 272• Al : 234

10.- De la siguiente ruta Laboratorio6\ noticias adjunto al CD ROM ubicar el siguiente archivopremium.txt y abrirlo.

11.- Seleccionar el contenido de este archivo y copiarlo al portapapeles (ctrl. + c).12.- En el documento en el cual estamos trabajando, ubicar el cursor dentro de la segunda capa,

luego de la imagen.13.- Ir al menú Edición / Pegar, seleccionar el texto pegado e ir al Panel Propiedades y modificar

23

LABORATORIO 6

lo siguiente:A.- En el cuadro color de texto elegir el color Blanco.B.- en los botones de alineación de texto elegir el botón Justificar ( ).

14.- Seleccione la imagen e ir al panel Propiedades y del menú de lista deplegable Alinear seleccionela opción izquierda.

15.- Guardar los cambios y ejecutar.

V.- Crear y configurar una nueva página o documento1.- 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 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 nosotros.C.- Clic en el botón Guardar.

24


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 Color de Fondo ingresar el siguiente valor : #336699.• En el campo Margen izquierdo digitar el valor 0.• En el campo Margen superior digitar el valor 0.

C.- De la lista categoría seleccionar Titulo/Codificación, realizar lo siguiente:• En el campo Titulo digitar Nosotros.




B.- Clic en el botón Aceptar.3.- En la siguiente línea digitar el siguiente texto: Quienes Somos.4.- Seleccionar el texto e ir al Panel Propiedades y modificar lo siguiente:





7.- Colocar el cursor dentro de la capa e ir al menú Insertar / Imagen.8.- En el cuadro de diálogo Seleccionar origen de imagen realizar lo siguiente:

A.- En el campo Buscan en, ubicar la siguiente ruta: Laboratorios\ noticias adjunto al CDROM y seleccionar el archivo nosotros.jpg.

B.- Clic en el botón Aceptar.9.- De la siguiente ruta Laoratorio6\ noticias adjunto al CD ROM ubicar el siguiente archivo

nosotros.txt y abrirlo.

25

LABORATORIO 6

10.- Seleccionar el contenido de este archivo y copiarlo al portapapeles (ctrl. + c).11.- En el documento en el cual estamos trabajando, ubicar el cursor dentro de la capa, junto a la

imagen.12.- Ir al menú Edición / Pegar, seleccionar el texto pegado e ir al Panel Propiedades y modificar

lo siguiente:A.- En el cuadro color de texto elegir el color Blanco.B.- en los botones de alineación de texto elegir el botón Justificar ( ).

13.- Seleccionar la imagen e ir al panel Propiedades y del menú de lista desplegable Alinearseleccione la opción Izquierda.

14.- Guardar los cambios y ejecutar.

B.- Asignando Comportamientos a los objetos1.- Del Panel Archivos ubicar el archivo llamado marco_principal que es el que contiene el

conjunto de marcos que se creo en el Lab. Nº 3 y abrirlo.2.- Del marco_centro seleccionar el botón Noticias, que se encuentra dentro de la capa que se

creo al inicio.

3.- Ir al menú Ventana / Comportamientos, se abrirá el Panel Comportamientos.4.- Clic en el botón Añadir comportamiento ( ) y seleccionar la opción Mostrar menú

emergente.

26



A.- En el campo Texto digitar lo siguiente: Aló Plan.B.- En el campo Vínculo clic en el botón que se encuentra a su diestra que tiene la forma de una

carpeta y ubicar el archivo aloplan.htm.C.- En el campo Destino desplegar la lista y elegir la opción «_blank».D.- En el campo Menú clic en el botón Añadir elemento ( )E.- Ahora se procederá a rellenar nuevamente los campos.F.- Seguir los pasos desde la letra A hasta la letra D, pero con los siguientes nombres y vínculos:

Tarjeta Premium premium.htmQuienes Somos nosotros.htm



D.- En los campos de Estado Sobre:

27

LABORATORIO 6




costado introducir el valo 22.

28




10.- En el Panel Comportamientos Aparecerán los siguientes comportamientos acompañados desus respectivos eventos.

El evento onMouseOver se desencadena o ejecuta cuando pasamos el mouse sobre el objeto quecontiene el comportamiento. El evento on MouseOut se desencadena cuando el mouse abandonaesta posición.


Al pasar el mouse sobre estebotón se desplegará su menú

29

LABORATORIO 6

VI.- Crear y configurar una nueva página 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ágina básicaseleccionar HTML.

B.- Clic en el botón Crear3.- Procedemos a guardar nuestro documento; activando 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 promociones.C.- Clic en el botón Guardar.

5.- Para configurar nuestro documento HTML realizaremos los siguientes pasos: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 ingresar el siguiente valor #336699.• En el campo Margen izquierdo digitar el valor 0.• En el campo Margen superior digitar el valor 0.

C.- De la lista categoría seleccionar Titulo/Codificación, realizar lo siguiente:• En el campo Titulo digitar Promociones.


A.- Inserción de imágenes y creación de capas.1.- Colocar el cursor dentro de la página, luego ir al menú Insertar / Imagen.2.- En el cuadro de diálogo Seleccionar origen de imagen realizar lo siguiente:


B.- Clic en el botón Aceptar.3.- En la siguiente línea digitar el siguiente texto: Promociones CinePlan.4.- Seleccionar el texto e ir al Panel Propiedades y modificar lo siguiente:



30


5.- Ir al menú Insertar / Objetos de diseño /Capa.6.- Dibujar cuatro capas en la ventana, seleccionarlas y luego en el Panel Propiedades modificar

lo siguiente:A.- En el campo An ingresar el siguiente valor: 180.B.- En el campo Al ingresar el siguiente valor: 240.

7.- La ubicación de las capas debe ser de la siguiente manera:

8.- Ubicar el cursor dentro de la primera capa e ir al menú Insertar / Imagen.9.- En el cuadro de diálogo Seleccionar origen de imagen realizar lo siguiente:

A.- En el campo Buscar en, ubicar la siguiente ruta: Laboratorio6\ Noticias adjunto al CDROM y seleccionar el archivo promo1.jpg.

B.- Clic en el botón Aceptar.10.- Ubicar el cursor dentro de la segunda capa e ir al menú Insertar / Imagen.11.- En el cuadro de diálogo Seleccionar origen de imagen realizar lo siguiente:


B.- Clic en el botón Aceptar.12.- Ubicar el cursor dentro de la tercera capa e ir al menú Insertar / Imagen.13.- En el cuadro de diálogo Seleccionar origen de imagen realizar lo siguiente:


B.- Clic en el botón Aceptar.14.- Ubicar el cursor dentro de la cuarta capa e ir al menú Insertar / Imagen.15.- En el cuadro de diálogo Seleccionar origen de imagen realizar lo siguiente:


31

LABORATORIO 6

B.- Clic en el botón Aceptar.16.- Guardar todos los cambios y ejecutar.

VII.- Asignando Comportamientos a los objetos1.- Del Panel Archivos ubicar el archivo llamado marco_principal que es el que contiene el

conjunto de marcos que se creo en el Lab. Nº 3 y abrirlo.2.- Del marco_centro seleccionar el botón Noticias, que se encuentra dentro de la capa que se

creo al inicio.

3.- Ir al menú Ventana / Comportamientos, se abrirá el Panel Comportamientos.4.- Clic en el botón que tiene una cruz Añadir comportamiento ( ) y seleccionar la opción

Mostrar menú emergente.

32



A.- En el campo Texto digitar lo siguiente: Promoción.B.- En el campo Vínculo clic en el botón que se encuentra a su diestra que tiene la forma de una

carpeta y ubicar el archivo promociones.htm.

C.- En el campo Destino desplegar la lista y elegir la opción «_blank».7.- Clic en la Ficha Aspecto y realizar lo siguiente:

A.- En el campo Tamaño digitar el valor de 16.B.- En los botones de alineación clic en el botón Alinear al centro ( ).C.- En los campos de Estado Arriba:



33

LABORATORIO 6




34




10.- En el Panel Comportamientos Aparecerán los siguientes comportamientos acompañados desus respectivos eventos.


VIII.-Creando Mapas de Imágenes y aignandole comportamientos.1.- Abrir la pagina Web Portada.htm.2.- Seleccionar la imagen insertada en esta página,3.- Y en el panel de Propiedades, activar la herramienta Zona Interactiva Poligonal.

35

LABORATORIO 6

4.- Dibujar dando clic en los bordes del dibujo, hasta lograr la forma del mismo.

5.- Seleccionar la Zona Interactiva creada anteriormente.6.- Ir al menú Ventana / Comportamientos, se abrirá el Panel Comportamientos.7.- Clic en el botón que tiene una cruz Añadir comportamiento y seleccionar la opción Mensaje

emergente( )

8.- En el cuadro de diálogo Mensaje emergente, realizar lo siguiente:A.- En el campo Mensaje digitar lo siguiente: Llámenos y entérese desde su casa cuales son las

películas que están en cartelera.

B.- Clic en el botón Aceptar.9.- En el Panel Comportamientos Aparecerá el siguiente comportamiento acompañado de su

respectivo evento.

Zona interactivaPoligonal

36


El evento onClick se desencadena o ejecuta al dar clic en el objeto que contiene este comportamiento

10.- Guardar los cambios realizados y luego para ver una vista preliminar en el explorador, presionarla tecla [F12]. Al dar un clic sobre la zona interactiva aparecerá el siguiente mensaje:

IX.- Asignando Comportamientos a los objetos1.- Del Panel Archivos ubicar el archivo llamado marco_principal, que es el que contiene el

conjunto de marcos que se creo en el Lab. Nº 3 y abrirlo.2.- En la parte inferior del documento seleccionar la etiqueta <body>.

3.- Ir al menú Ventana / Comportamientos, se abrirá el Panel Comportamientos.4.- Clic en el botón que tiene una cruz , Añadir comportamiento( ), y seleccionar la opción

Definir texto / Establecer texto de la barra de estado.5.- En el cuadro de dialogo Establecer texto de la barra de estado realizar lo siguiente:

A.- En el campo Mensaje digitar lo siguiente:Bienvenidos al portal web de CinePlan.

B.- Clic en el botón Aceptar.6.- En el Panel Comportamientos aparecerá el siguiente comportamiento acompañado de su

respectivo evento.

37

LABORATORIO 6

El evento OnLoad se desencadena o ejecuta al cargar la página.

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

X.-Manejo de Archivos1.- Debido a que la cantidad de archivos que contiene nuestro sitio web, es recomendable organizar

los archivos por carpetas.2.- Para ello es recomendable cerrar todos los documentos abiertos, debido que al reordenar la

ubicación de los archivos se modifica el código HTML.3.- Solo se debe reordenar los archivos desde Dreamweaver (desde el panel Archivos), pues si lo

hace desde Windows no se va a modificar el código HTML.4.- En el panel Archivos haga clic derecho en la carpeta Sitio y del menú desplegable seleccione la

opción Nueva carpeta

38


5.- Se crea una carpeta, en el cuadro de texto junto a la carpeta digite el nombre de senor_anillos.

6.- Seleccionar el archivo senordelosanillos.htm y arrastrarlo sin soltar el mouse hasta ubicarlosobre la carpeta que se creo. El archivo ahora se ubica dentro de la carpeta.

39

LABORATORIO 6

7.- Se abre el cuadro de dialogo Actualizar archivos, el cual muestra los archivos con los cualesesta vinculado este archivo. Haga clic en el botónActualizar.

8.- Haga clic en el botón Actualizar ( ) del panel Archivo, para actualizar los enlaces de todos losarchivos del sitio.

9.- Ubicar los siguientes archivos dentro de la carpeta senor_anillos y actualizar el sitio:• actores_anillos.htm• actoresdetalles_anillos.htm• escenas_elsenor.htm• button1.swf• button2.swf

10.- Al desplegar la carpeta en el panel Archivo debe visualizarse de la siguiente forma:

11.-Crear una carpeta y llamarla capitan_corelli e insertar dentro de esta carpeta los siguientesarchivos:

• actores_corelli.htm• capitan_corelli.htm• presentacion_corelli.htm• bio1.swf• bio2.swf• bio4.swf

40


• bio5.swf• bio6.swf• bio7.swf• bio8.swf• bios.swf• button5.swf• button6.swf• corelli_intro2

12.- Crear una carpeta y llamarla cines y mover dentro de esta carpeta los siguientes archivos:• alcazar.htm• arequipa.htm• centro.htm• norte.htm• primavera.htm• sanmiguel.htm

13.- Crear una carpeta y llamarla el_patriota e insertar dentro de esta carpeta los siguientesarchivos:

• elpatriota.htm• elpatriota_actores.htm• elpatriota_actoresdetalles.htm• escenas_elpatriota.htm• actores.swf• detalles.swf• presentacion.swf

14.- Crear una carpeta y llamarla estilos e insertar dentro de esta carpeta los siguientes archivos:• estilo.css• Estilo_Externo.css• Personalizado.css

41

LABORATORIO 6

15.- Crear una carpeta y llamarla estrenos e insertar dentro de esta carpeta los siguientes archivos:• abril.htm• agosto.htm• diciembre.htm• enero.htm• estreno_centro.htm• estreno_izquierdo.htm• estreno_superior.htm• estrenos.htm• febrero.htm• julio.htm• junio.htm• marzo.htm• mayo.htm• noviembre.htm• octubre.htm• setiembre.htm• button7.swf• button8.swf• button9.swf• button10.swf• button11.swf• button12.swf• button13.swf• button14.swf• button15.swf• button16.swf• button17.swf• button18.swf• proximos_estrenos.swf

42


16.- Crear una carpeta y llamarla portada e insertar dentro de esta carpeta los siguientes archivos:• portada.htm• estrenos.png• estrenos.gif• locales.png• locales.gif• noticias.png• noticias.gif• promociones.png• promociones.gif

17- Crear una carpeta y llamarla servicios e insertar dentro de esta carpeta los siguientes archivos:• aloplan.htm• nosotros.htm• Premium.htm• promociones.htm

Manual nº 06

Travel

Transcript of Manual nº 06