Este documento proporciona instrucciones para crear un sitio web sobre universidades privadas en El Salvador utilizando Dreamweaver. Incluye instrucciones para agregar tablas, vínculos, objetos multimedia como botones flash, texto flash, películas flash, reproductores de audio y video. El objetivo es crear una página principal con información sobre 8 universidades privadas salvadoreñas y vincular logotipos a sus respectivos sitios web.
Criterios ESG: fundamentos, aplicaciones y beneficios
Guia 2 De Dreamweaver
1. Escuela en Ingeniería en Computación
Diseño Web Multimedia I
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.
1
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.
Instructores: Milagro de Arévalo, Christopher Lara, Carlos Narváez, Josué Fortis.
2. Escuela en Ingeniería en Computación
Diseño Web Multimedia I
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.
1
2
3
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):
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.
Instructores: Milagro de Arévalo, Christopher Lara, Carlos Narváez, Josué Fortis.
3. Escuela en Ingeniería en Computación
Diseño Web Multimedia I
12. Seleccione las 8 celdas de la tabla interior, y cambie en Propiedades el
alineamiento horizontal a Centro, y el vertical a Medio (1)
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.
Instructores: Milagro de Arévalo, Christopher Lara, Carlos Narváez, Josué Fortis.
4. Escuela en Ingeniería en Computación
Diseño Web Multimedia I
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.
Instructores: Milagro de Arévalo, Christopher Lara, Carlos Narváez, Josué Fortis.
5. Escuela en Ingeniería en Computación
Diseño Web Multimedia I
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.
Instructores: Milagro de Arévalo, Christopher Lara, Carlos Narváez, Josué Fortis.