1. LABORATORIO 1
LABORATORIO Nº 1
Objetivos:
1. Creación de un Sitio Web o Web site.
2. Creación y Configuración de páginas o documentos HTML.
3. Inserción de Imágenes (Película Flash, Botones Flash).
4. Diseño de tablas.
5. Creación de Hipervínculos.
6. Creación de Álbum de Fotos
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
I.- Creando nuestro Sitio Web
1.- En la unidad C, cree una carpeta llamada cineplan y dentro de esta cree otra carpeta llamada:
Imagenes.
2.- Proceda a abrir el programa Macromedia Dreamweaver MX 2004 y realice lo siguiente:
A.- Seleccionar el menú Sitio / Administrar Sitios
B.- Del cuadro de diálogo que aparece dar clic en el botón Nuevo se desplegará un submenú,
seleccionar el comando Sitio.
C.- En el cuadro de diálogo Definición del sitio, realizar lo siguiente:
• En el campo Nombre del sitio, digitar CINEPLAN.
• En el campo Carpeta raíz local, haga clic en el icono de carpeta y elegir la carpeta
que se creo en la unida C llamada cineplan.
• Habilitar la casilla Actualizar lista de archivos locales automáticamente. Por
defecto siempre esta marcada.
• En el campo Carpeta predeterminada de imágenes, haga clic en el icono de
carpeta y elegir la carpeta que se creo dentro de la carpeta cineplan llamada
imágenes.
• Haga clic en el botón Aceptar
2

3. LABORATORIO 1
D.- El Panel Archivos deberá aparecer de la siguiente manera:
II.- Creando y configurando nuestra página o documento HTML
1.- Luego de haber creado nuestro Sitio Web, procederemos a crear nuestra primera página o
documento en estilo HTML.
2.- Seleccione el menú Archivo / Nuevo
3.- En el cuadro de diálogo Nuevo documento, realiza 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

4. DISEÑO WEB PROFESIONAL MX 2004
4.- Procedemos a guardar nuestro documento; Seleccione el Menú Archivo / Guardar, o
presionando las teclas Ctrl + S.
5.- 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 nombre portada.
C.- Haga clic en el botón Guardar.
6.- Para Configurar nuestro documento HTML realizaremos los siguientes pasos:
A.- Seleccione el menú Modificar / Propiedades de la página.
B.- De la lista categoría seleccionar Aspecto y realizar lo siguiente:
• En el campo Color de Fondo digitar el siguiente valor: #004488.
• En el campo Margen izquierdo: ingresar el valor Cero.
• En el campo Margen superior: ingresar el valor Cero.
C.- De la lista categoría seleccionar Titulo / Codificación y realizar lo siguiente:
• En el campo Titulo digitar Bienvenidos al Web Site de Cineplan.
D.- Haga clic en el botón Aceptar.
III.- Insertar Imagen:
1.- Activar el menú Insertar / Imagen.
2.- En el campo Buscar en: seleccionar la carpeta Laboratorio 1 adjuntar al CD-ROM, y
seleccionar el archivo cineplan.jpg.
3.- Haga clic en el botón Aceptar.
4

5. LABORATORIO 1
La página deberá aparecer como se muestra a continuación:
5

6. DISEÑO WEB PROFESIONAL MX 2004
1V.- Insertando Películas Flash (.SWF):
1.- Crea una nueva página o documento en estilo HTML:
• Seleccione el menú Archivo / Nuevo.
• En el cuadro de dialogo 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.
2.- Procedemos a guardar nuestro documento; Seleccione el menú Archivo / Guardar.
• 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 elpatriota.
C.- Haga clic en el botón Guardar.
3.- Configurar nuestro documento HTML:
A.- Seleccione el menú Modificar / Propiedades de la página.
B.- De la lista categoría seleccionar Aspecto, realizar lo siguiente:
• En el campo Color de Fondo seleccionar del cuadro de colores el color Negro.
C.- De la lista categoría seleccionar Titulo / Codificación, realizar lo siguiente:
• En el campo Titulo digitar: El Patriota.
D.- Haga clic en el botón Aceptar.
4.- Insertando una película Flash:
A.- Seleccione el menú Insertar / Media / Flash
B.- En el cuadro de diálogo Seleccionar archivo, realice lo siguiente:
• En la lista desplegable Buscar en, seleccionar la Carpeta Laboratorio 1 el patriota
películas adjuntar al CD-ROM y elija el archivo de tipo Flash llamado
presentacion.swf.
• Haga clic en el botón Aceptar.
6

7. LABORATORIO 1
5.- En la ventana de documento debajo de la película Flash, insertar dos botones de tipo Flash.
A.- Seleccione el menú Insertar / Media / Botón flash.
B.- En el cuadro de diálogo Insertar botón Flash, realizar las siguientes modificaciones:
• En el campo Estilo, seleccionar de la lista un estilo de botón, el que desee usted.
• En el campo Texto del botón digitar en este caso para el primero Actores y para el
segundo botón Escenas.
• En el campo Color de fondo, seleccionar el color negro.
• Haga clic en el botón Aceptar.
6.- Guarde el documento y haga una vista preliminar presionando la tecla (F12)
7.- Esta segunda pagina o documento debe aparecer de la siguiente manera:
7

8. DISEÑO WEB PROFESIONAL MX 2004
8.- Crea una nueva página o documento en estilo HTML.
• Seleccione el menú Archivo / Nuevo.
• 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.- Haga clic en el botón Crear
9.- Procedemos a guardar nuestro documento; Seleccione el menú Archivo / Guardar.
• 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 elpatriota_actores.
C.- Haga clic en el botón Guardar.
10.- Configurar nuestro documento HTML:
A.- Menú, Modificar / Propiedades de la página.
B.- De la lista categoría seleccionar Aspecto, realizar lo siguiente:
• En el campo Color de Fondo seleccionar del cuadro de colores el color Negro.
C.- De la lista categoría seleccionar Titulo / Codificación, y realizar lo siguiente:
• En el campo Titulo digitar Actores de la Película el Patriota.
D.- Haga clic en el botón Aceptar.
V.- Insertando Tablas
1.- En la página o documento elpatriota_actores.htm, insertaremos una tabla:
A.- Seleccione el menú, Insertar / Tabla
B.- En el cuadro de diálogo Insertar tabla, realizar las siguientes modificaciones:
• En el campo Filas digitar el número de filas: 9.
• En el campo Columnas digitar el número de columnas: 2.
• Clic en el botón Aceptar.
C.-Seleccionar la tabla y en el Panel Propiedades hacer las siguientes modificaciones:
• En el campo Col. borde seleccionar el color Blanco
• En la lista desplegable Alinear seleccionar Centro
D.- La tabla debe verse de la siguiente manera:
8

9. LABORATORIO 1
2.- En cada una de las celdas de la primera columna insertar imágenes:
A.- Ubicarse dentro de la primera celda, Seleccionar el menú Insertar / Imagen.
B.- En el cuadro de diálogo Seleccionar origen de imagen, realizar las siguientes
modificaciones:
• En el campo Buscar en, seleccione la carpeta Laboratorio1 el patriota fotos
pequeñas, adjuntar al CD-ROM.
• En la lista de archivos que aparece seleccionar el archivo mel2.jpg.
• Haga clic en el botón Aceptar.
• Las imágenes y los nombres de los actores irán en el siguiente orden:
• mel2.jpg Mel Gibson
• lisa2.jpg Lisa Brenner
• heath2.jpg Heath Ledger
• joely2.jpg Joely Richardson
• jason2.jpg Jason Isaacs
• chris2.jpg Chris Cooper
• rene2.jpg Rene Auberjonois
• tcheky2.jpg Tchéky Karyo
• tom2.jpg Tom Wilkinson
3.- Seguir los pasos A y B del paso 2 para cada uno de las siguientes celdas de la primera columna
(pero seleccionando una imagen distinta para cada celda).
4.- En las celdas de la segunda columna digitar el nombre del Actor o si desea puede copiarlo desde
la carpeta, Laboratorio1 el patriota textos y copiar cada texto, adjunto al CD-ROM
9

10. DISEÑO WEB PROFESIONAL MX 2004
5.- Esta página o documento debe aparecer de la siguiente manera:
6.- Crea una nueva página o documento en estilo HTML.
• Seleccione el menú Archivo / Nuevo.
• En el cuadro de dialogo 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.- Haga clic en el botón Crear.
7.- Procedemos a guardar nuestro documento; Seleccione el menú Archivo / Guardar.
8.- 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 elpatriota_actoresdetalles.
C.- Clic en el botón Guardar.
9.- Configurar nuestro documento HTML:
A.- Seleccione el menú Modificar / Propiedades de la página.
B.- De la lista categoría seleccionar Aspecto, y realizar lo siguiente:
• En el campo Color de Fondo seleccionar del cuadro de colores el color Negro.
C.- De la lista categoría seleccionar Titulo / Codificación, y realizar lo siguiente:
• En el campo Titulo digitar Descripción de los Actores.
D.- Haga clic en el botón Aceptar.
10.- Crear una tabla en vista de diseño:
A.- Del Panel Insertar, seleccionar la ficha Diseño y haga clic en el botón Diseño.
10

11. LABORATORIO 1
B.- Activar la herramienta o botón Tabla de Diseño, y proceder a arrastrar sobre el área de
trabajo.
C.- Se creara una tabla en forma de un rectangulo con fondo gris.
D.- Activar la herramienta Dibujar Celda de Diseño, y proceder a arrastrar dentro de la tabla
creada anteriormente. (Dibujar en total 3 celdas)
E.- La tabla quedará de la siguiente forma:
11

12. DISEÑO WEB PROFESIONAL MX 2004
F.- Colocar el cursor dentro de la celda de la izquierda e ir al Menú Insertar / Imagen.
G.- En el cuadro de dialogo Seleccionar origen de imagen, realizar las siguientes
modificaciones:
• En el campo Buscar en, ubicarse en la carpeta laboratorio1 el patriota fotos grandes,
adjunto al CD-ROM
• En la lista de archivos que aparece seleccionar el archivo mel.jpg.
• Haga clic en el botón Aceptar.
El orden de las imágenes debe coincidir con el orden de las otras imágenes de la página anterior
(elpatriota_actores.htm), para poder llevar un mejor control de ellas.
H.- Este mismo modelo de celdas se repetirá para todos los personajes en esta misma tabla.
Siguiendo el paso D del punto Nº 10 (pero seleccionando una imagen distinta para cada
celda).
I.- Colocar el cursor dentro de la celda superior derecha, aquí copiaremos el nombre de cada
personaje correspondiente; estos se encuentran en la siguiente ruta laboratorio1 el patriota
textos nombre de personajes, adjunto al CD-ROM
J.- Colocar el cursor dentro de la celda inferior derecha, aquí copiaremos la descripción de
cada personaje correspondiente; estos se encuentran en la siguiente ruta laboratorio1el
patriota textos, adjunto al CD-ROM
• Las imágenes y los nombres de los personajes irán en el siguiente orden:
• mel.jpg Benjamin Martin
• lisa.jpg Anne Howard
• heath.jpg Gabriel Martin
• joely.jpg Charlotte Selton
• jason.jpg Coronel William Tavington
• chris.jpg Coronel Burwell
• rene.jpg Reverendo Oliver
• tcheky.jpg Mayor Jean Villeneuve
• tom.jpg General Cornwallis
K.- Su página se verá de la siguiente manera:
12

13. LABORATORIO 1
V1.- Creación de Hipervínculo y Anclas
1.- Enlazaremos las imágenes de la página o documento elpatriota_actores.htm con el contenido
correspondiente a esa imagen que se encuentra en la página elpatriota_actoresdetalles.htm.
2.- En la página elpatriota_actoresdetalles.htm realizar los siguientes cambios:
A.- Volver a la Vista estándar del documento o página.
B.- Colocar el cursor al final del nombre del personaje (que se encuentra en la celda superior
derecha)
C.- En el panel Insertar, en la Ficha Común, clic en el botón Anclaje con
nombre ( ).
13

14. DISEÑO WEB PROFESIONAL MX 2004
D.- En el cuadro de diálogo que aparece, indicar un nombre que identifique
a ese punto o ancla (poner el primer nombre del personaje). Ejemplo:
Benjamin.
E.- Repetir los pasos B, C y D para los demás personajes.
3.- En la página elpatriota_actores.htm realizar las siguientes modificaciones:
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 diálogo que aparecerá realizar lo siguiente:
• En el campo Buscar en ubicar la carpeta raíz cineplan y de los archivo que aparecen
seleccionar elpatriota_actoresdetalles
• En el campo Nombre aparecerá el archivo que seleccionaste.
• Haga clic en el botón Aceptar
14

15. LABORATORIO 1
• Al final del nombre del vinculo digitar el símbolo numérico seguido del nombre del
ancla para este actor: elpatriota_actoresdetalles.htm#Benjamin
4.- Esto se visualizara de la siguiente manera en el navegador:
5.- Realizar los puntos 3 y 4 para el resto de las imágenes del archivo elpatriota_actores,
enlazados con la página Web elpatriota_actoresdetalles, pero con su respectivo nombre de
ancla.
V1I.- 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 Escenas de la Película El
Patriota
B.- En el campo Carpeta de imágenes de origen, clic en el botón de su derecha Examinar y
ubicar la siguiente ruta Laboratorio1 el patriota escenas, adjunta al CD-ROM.
C.- En el campo Carpeta de destino, clic en el botón de su derecha Examinar, selecciona la
carpeta raíz Cineplan.
D.- En el campo Columnas digitar el numero 4.
E.- Haga clic en el botón Aceptar.
F Automáticamente se abrirá el programa Macromedia Fireworks MX 2004 para crear el
.-
15

16. DISEÑO WEB PROFESIONAL MX 2004
á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_elpatriota.htm. (Menú Archivo Guardar Como).
H.- Debe aparecerte una nueva página o ventana de documento así como esta:
V1II.- Enlazando Páginas o Documentos
1.- Abrir la página Web elpatriota htm.
2.- Doble clic en el Botón Flash llamado Actores.
16

17. LABORATORIO 1
3.- En el cuadro de diálogo hacer el siguiente cambio:
A.- En el campo Vinculo, clic en el botón Examinar, selecciona la página elpatriota_actores
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, selecciona la página esce-
nas_elpatriota.htm que se encuentra dentro de la carpeta raíz Cineplan.
B.- Haga clic en el botón Aceptar.
6.- Al ejecutarlo en el navegador debe salir de esta manera:
1X.- Creando Mapas de Imágenes.
Para finalizar este laboratorio necesitamos enlazar desde la portada principal el área de la película
El Patriota, con su página Web diseñada anteriormente, para ello crearemos un mapa de imágenes en
esta área.
1.- Abrir la página Web Portada.htm.
2.- Seleccionar la imagen insertada en esta página, y en el panel de Propiedades, activar la herramienta
Zona Interactiva Oval.
17

18. DISEÑO WEB PROFESIONAL MX 2004
3.- Dibujar un círculo alrededor de la zona de la película El Patriota, arrastrando con el mouse
dentro de la imagen.
4.- El panel de Propiedades ahora mostrará propiedades de la Zona Interactiva creada
anteriormente.
5.- En la casilla Vínculo, dar clic en el icono de carpeta, se abrirá una ventana.
6.- Seleccionar el archivo con que se vinculará a esta Zona Interactiva: elpatriota.htm.
7.- Guardar los cambios realizados y luego para ver una vista preliminar en el explorador, presionar
la tecla [F12].
18