manual nº 06
DESCRIPTION
TRANSCRIPT
![Page 1: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/1.jpg)
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.
![Page 2: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/2.jpg)
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.
![Page 3: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/3.jpg)
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.
![Page 4: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/4.jpg)
4
DISEÑO WEB PROFESIONAL MX 2004
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
![Page 5: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/5.jpg)
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:
![Page 6: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/6.jpg)
6
DISEÑO WEB PROFESIONAL MX 2004
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.
10.- 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.
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.
![Page 7: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/7.jpg)
7
LABORATORIO 6
12.- 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.
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.
![Page 8: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/8.jpg)
8
DISEÑO WEB PROFESIONAL MX 2004
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.
![Page 9: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/9.jpg)
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.
![Page 10: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/10.jpg)
10
DISEÑO WEB PROFESIONAL MX 2004
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.
![Page 11: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/11.jpg)
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
![Page 12: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/12.jpg)
12
DISEÑO WEB PROFESIONAL MX 2004
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.
![Page 13: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/13.jpg)
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.
![Page 14: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/14.jpg)
14
DISEÑO WEB PROFESIONAL MX 2004
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.
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: 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.
![Page 15: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/15.jpg)
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
7.- 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.
![Page 16: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/16.jpg)
16
DISEÑO WEB PROFESIONAL MX 2004
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
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.
![Page 17: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/17.jpg)
17
LABORATORIO 6
9.- 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.
10.- En el Panel Comportamientos aparecerán los siguientes comportamientos acompañados desus respectivos eventos.
11.- Guardar los cambios y ejecutar la página o documento.
ComportamientosEventos delcomportamiento
Al pasar el mouse sobre elbotón se desplegará su menú emergente.
![Page 18: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/18.jpg)
18
DISEÑO WEB PROFESIONAL MX 2004
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.
![Page 19: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/19.jpg)
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.
![Page 20: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/20.jpg)
20
DISEÑO WEB PROFESIONAL MX 2004
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.
![Page 21: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/21.jpg)
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:
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 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.
![Page 22: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/22.jpg)
22
DISEÑO WEB PROFESIONAL MX 2004
C.- De la lista categoría seleccionar Titulo/Codificación, realizar lo siguiente:• En el campo Titulo digitar Tarjetas Plan Premium.
D.- Clic en el botón Aceptar.
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:Programa de Usuario Frecuente Plan Premium.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 24 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: 640.B.- En el campo Al ingresar el siguiente valor: 232.
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
![Page 23: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/23.jpg)
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:
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 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.
![Page 24: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/24.jpg)
24
DISEÑO WEB PROFESIONAL MX 2004
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.
D.- Clic en el botón Aceptar.
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: Quienes Somos.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 24 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: 700.B.- En el campo Al ingresar el siguiente valor: 269.
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.
![Page 25: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/25.jpg)
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.
![Page 26: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/26.jpg)
26
DISEÑO WEB PROFESIONAL MX 2004
5.- Del cuadro de diálogo Mostrar menú emergente modificar lo siguiente6.- Clic en la Ficha Contenido y realizar lo siguiente:
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
7.- 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:
![Page 27: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/27.jpg)
27
LABORATORIO 6
• 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.
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
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 valo 22.
![Page 28: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/28.jpg)
28
DISEÑO WEB PROFESIONAL MX 2004
9.- 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.
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.
11.- Guardar los cambios y ejecutar la página o documento.
Al pasar el mouse sobre estebotón se desplegará su menú
![Page 29: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/29.jpg)
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.
D.- Clic en el botón Aceptar.
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: Promociones CinePlan.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 24 y en el segundo cuadroseleccionar de la lista píxeles.
B.- En el cuadro de color del texto ingresar el siguiente valor #FFB400.
![Page 30: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/30.jpg)
30
DISEÑO WEB PROFESIONAL MX 2004
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:
A.- En el campo Buscar en, ubicar la siguiente ruta: Laboratorio6\ Noticias adjunto al CDROM y seleccionar el archivo promo2.jpg.
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:
A.- En el campo Buscar en, ubicar la siguiente ruta: Laboratorio6\ Noticias adjunto al CDROM y seleccionar el archivo promo3.jpg.
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:
A.- En el campo Buscar en, ubicar la siguiente ruta: Laboratorio6\ Noticias adjunto al CDROM y seleccionar el archivo promo4.jpg.
![Page 31: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/31.jpg)
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.
![Page 32: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/32.jpg)
32
DISEÑO WEB PROFESIONAL MX 2004
5.- Del cuadro de diálogo Mostrar menú emergente modificar lo siguiente6.- Clic en la Ficha Contenido y realizar lo siguiente:
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:
• 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.
![Page 33: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/33.jpg)
33
LABORATORIO 6
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
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.
![Page 34: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/34.jpg)
34
DISEÑO WEB PROFESIONAL MX 2004
9.- 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.
10.- En el Panel Comportamientos Aparecerán los siguientes comportamientos acompañados desus respectivos eventos.
11.- Guardar los cambios y ejecutar la página o documento.
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.
![Page 35: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/35.jpg)
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
![Page 36: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/36.jpg)
36
DISEÑO WEB PROFESIONAL MX 2004
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.
![Page 37: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/37.jpg)
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
![Page 38: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/38.jpg)
38
DISEÑO WEB PROFESIONAL MX 2004
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.
![Page 39: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/39.jpg)
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
![Page 40: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/40.jpg)
40
DISEÑO WEB PROFESIONAL MX 2004
• 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
![Page 41: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/41.jpg)
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
![Page 42: Manual nº 06](https://reader033.vdocuments.mx/reader033/viewer/2022051109/547cb8ebb4af9fea158b520d/html5/thumbnails/42.jpg)
42
DISEÑO WEB PROFESIONAL MX 2004
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