Primer laboratorio
Upcoming SlideShare
Loading in...5
×
 

Primer laboratorio

on

  • 1,398 views

 

Statistics

Views

Total Views
1,398
Views on SlideShare
1,394
Embed Views
4

Actions

Likes
0
Downloads
143
Comments
0

1 Embed 4

http://www.peruaulavirtual.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Primer laboratorio Primer laboratorio Document Transcript

  • 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
  • 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
  • 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
  • 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
  • LABORATORIO 1 La página deberá aparecer como se muestra a continuación: 5
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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