guia 2 de dreamweaver

Escuela en Ingeniería en Computación

Diseño Web Multimedia I

Instructores: Milagro de Arévalo, Christopher Lara, Carlos Narváez, Josué Fortis.

Guía 2 de Dreamweaver

Vínculos.

1. ¿Recuerda el sitio que creamos la clase anterior? Guardamos los archivos en una

carpeta llamada Valores. Además, tenía que terminar el resto de páginas, si no

lo ha hecho, apresúrese a terminar estas páginas.

2. Abra en Dreamweaver el archivo Home.htm

3. Seleccione la frase La Honestidad, en el Panel Propiedades vamos a asignar

un vínculo para esta frase. Haga clic en el folder que encuentra a la derecha de

Vínculo (1), luego seleccione en el cuadro de diálogo el archivo

Honestidad.htm, que también creamos la práctica anterior. Para finalizar haga

clic en Aceptar.

4. Haga lo mismo con cada uno de los vínculos que deber enlazar con una de las

páginas que creo sobre valores.

5. Para comprobar nuestro trabajo, haremos clic en Vista Previa (Ver imagen

inferior).

6. Guarde los cambios realizados, y cierre los archivos de la carpeta Valores.

Enlaces, tablas, objetos de media.

1. Debe tener disponible la carpeta Práctica2, o descargue el escudo de 8

Universidades de nuestro país.

2. Cree una nueva carpeta en su dispositivo de almacenamiento, llamada

Directorio, guarde la carpeta Práctica2 ahí.

3. Cree en Dreamweaver un nuevo archivo HTML, guárdelo con el nombre de

index.htm 4. Haga clic en el menú Insertar||Tabla.

1




5. En el cuadro de diálogo Tabla, establezca 3 filas y 1 columna (1), cambie en

ancho de la tabla a 100 Porcentaje (2), y escoja el estilo de Encabezado

Superior (3), haga clic en Aceptar.

6. En las Propiedades, escriba como nombre de la tabla Tabla1 (Ver imagen

inferior)

7. En la primera fila de la tabla, escriba: DIRECTORIO DE UNIVERSIDADES

PRIVADAS DE EL SALVADOR.

8. En la segunda fila, insertaremos otra tabla, coloque el punto de inserción en la

segunda fila, y cree una tabla de 4 filas, 2 columnas, 100 porcentaje de ancho,

borde 1, relleno de celda 2, espacio entre celdas 4, y Encabezado Ninguno.

(Note que en el Panel Insertar, también se encuentra un comando para insertar

Tablas, tal como se ve en la imagen inferior)

9. Vamos a modificar algunas propiedades de la segunda tabla que hemos creado.

Observe que justo sobre el panel de propiedades, se encuentran estructuradas las

etiquetas que estamos utilizando (1):

10. Si la etiqueta <table> que aparece señalada en la imagen anterior no está

seleccionada, haga doble clic sobre ella.

11. Cambie en Propiedades el nombre la tabla a Tabla2, la alineación a Centro.

1

2

3

1




12. Seleccione las 8 celdas de la tabla interior, y cambie en Propiedades el

alineamiento horizontal a Centro, y el vertical a Medio (1)

13. En cada una de las celdas de la Tabla2, inserte el logotipo o escudo de una

universidad. Puede usar las que están en la carpeta Práctica2. Modifique el

tamaño de las imágenes si lo considera necesario. El resultado debe ser más o

menos así:

14. Enlace cada imagen con el sitio Web correspondiente. Si utilizó las imágenes de

la carpeta Practica2, las direcciones para los vínculos son:

Http://www.itca.edu.sv

Http://www.uca.edu.sv

Http://www.udb.edu.sv

Http://www.uees.edu.sv

Http://www.ufg.edu.sv

Http://www.ujmd.edu.sv

Http://www.usam.edu.sv

Http://www.esen.edu.sv

15. Cambiaremos las propiedades de cada Vínculo, seleccione una imagen, y

luego haga clic sobre la etiqueta <a> que aparece indicada sobre las

Propiedades.

1




16. Cambiaremos el Destino del vínculo a _blank, de esta forma, al hacer clic sobre

cada vínculo, nos abrirá una ventana nueva.

Haga lo mismo con el resto de imágenes.

Objetos Media 1. En la última fila de la Tabla1, inserte una tabla de una fila por tres columnas,

ancho 100 porcentaje, grosor 5, relleno 10, espacio 10.

2. Cambie el nombre de la tabla recién creada a Tabla3.

3. En la primera celda de la tabla, coloque el punto de inserción. Ahora haga clic

en el menú Insertar||Media||Botón Flash.

4. Cambie el Estilo a StarSpinner (1). En Texto del botón, escriba: Buscar en

Google (2), cambie la fuente a Comic Sans MS y el tamaño a 12 (3). En

Vínculo, escriba: http://www.google.com.sv (4), y en Destino escoja _blank.

Haga clic en Aceptar.

5. En la celda de la derecha, incluiremos un Texto Flash. Nos colocamos en dicha

celda, hacemos clic en el menú Insertar||Media||Texto Flash.

1 2 3

4




6. Escoja la Fuente y Tamaño de su preferencia, aplique Negrita y Alineación

centrada. Cambie el Color, y el Color de sustitución, por dos colores de su

preferencia (colores que claramente se ven diferentes). En Texto, escriba: Visita

el Ministerio de Educación. En Vínculo, escriba: http://www.mined.gob.sv, y

en Destino seleccione _blank.

7. En la última celda de la Tabla3, insertaremos una película Flash.

8. Haga clic en el menú Insertar||Media||Flash.

9. Seleccione el archivo texto_luminoso.swf que se encuentra en la carpeta

Práctica2.

10. En Propiedades, asegúrese de tener seleccionadas las opciones Bucle y Rep.

Autom., de esa forma nuestra película iniciará automáticamente, y una vez

termine, se volverá a repetir.

11. Debajo de todas las tablas, inserte una tabla de 1 fila por dos columnas.

12. En la primera celda de la tabla, haga clic en el menú Insertar||Media||Plug-in,

seleccione al archivo Cancion1.mp3, que se encuentra en la misma carpeta antes

mencionada.

13. En la segunda celda de la tabla inserte el video Video1.avi

14. Vea su trabajo final, asegúrese de guardar todos los cambios.

guia 2 de dreamweaver

Education