Primer laboratorio

1

LABORATORIO1

LABORATORIO Nº 1Objetivos:

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

I.- Creando nuestro Sitio Web1.- 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 SitiosB.- 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 llamadaimágenes.

• Haga clic en el botón Aceptar

3

LABORATORIO1

D.- El Panel Archivos deberá aparecer de la siguiente manera:

II.- Creando y configurando nuestra página o documento HTML1.- Luego de haber creado nuestro Sitio Web, procederemos a crear nuestra primera página o

documento en estilo HTML.2.- Seleccione el menú Archivo / Nuevo3.- 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áginabásica seleccionar HTML.

B.- Clic en el botón Crear.

4


4.- Procedemos a guardar nuestro documento; Seleccione el Menú Archivo / Guardar, opresionando 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.

5

LABORATORIO1

La página deberá aparecer como se muestra a continuación:

6


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:


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 / FlashB.- 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 llamadopresentacion.swf.

• Haga clic en el botón Aceptar.

7

LABORATORIO1

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:

8


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:


B.- Haga clic en el botón Crear9.- 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 Tablas1.- En la página o documento elpatriota_actores.htm, insertaremos una tabla:

A.- Seleccione el menú, Insertar / TablaB.- 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:

9

LABORATORIO1

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 desdela carpeta, Laboratorio1\ el patriota \ textos y copiar cada texto, adjunto al CD-ROM

10


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:


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.

11

LABORATORIO1

B.- Activar la herramienta o botón Tabla de Diseño, y proceder a arrastrar sobre el área detrabajo.

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 tablacreada anteriormente. (Dibujar en total 3 celdas)

E.- La tabla quedará de la siguiente forma:

12


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 cadacelda).

I.- Colocar el cursor dentro de la celda superior derecha, aquí copiaremos el nombre de cadapersonaje correspondiente; estos seencuentranen la siguiente ruta laboratorio1 \ elpatriota\ textos \ nombre de personajes, adjunto al CD-ROM

J.- Colocar el cursor dentro de la celda inferior derecha, aquí copiaremos la descripción decada personaje correspondiente; estos se encuentran en la siguiente ruta laboratorio1\elpatriota \ 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:

�

�

�

��

�

�

��

13

LABORATORIO1

V1.- Creación de Hipervínculo y Anclas1.- 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 ( ).

14


D.- En el cuadro de diálogo que aparece, indicar un nombre que identifiquea 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

15

LABORATORIO1

• Al final del nombre del vinculo digitar el símbolo numérico seguido del nombre delancla 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 deancla.

V1I.- Creando un Álbum de Fotos1.- 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 ElPatriota

B.- En el campo Carpeta de imágenes de origen, clic en el botón de su derecha Examinar yubicar 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 lacarpeta 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

16


á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 Documentos1.- Abrir la página Web elpatriota htm.2.- Doble clic en el Botón Flash llamado Actores.

17

LABORATORIO1

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ículaEl Patriota, con su página Web diseñada anteriormente, para ello crearemos un mapa de imágenes enesta á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.

18


3.- Dibujar un círculo alrededor de la zona de la película El Patriota, arrastrando con el mousedentro de la imagen.

4.- El panel de Propiedades ahora mostrará propiedades de la Zona Interactiva creadaanteriormente.

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, presionarla tecla [F12].

Travel

Primer laboratorio