Consignas Dreamweaver

PROGRAMA DIGITAL JUNIOR
Prácticas de Dreamweaver - Nivel Fundamentos
TABLA DE CONTENIDOS
TEMA: INTRODUCCIÓN A DREAMWEAVER .......................................................................................................... 2

TEMA: CREAR SITIOS WEB ......................................................................................................................................... 3
TEMA: CONFIGURAR PÁGINAS WEB ....................................................................................................................... 4
TEMA: HOJAS DE ESTILO ............................................................................................................................................ 6
TEMA: LISTAS Y REGLA O LÍNEA HORIZONTAL* (adicional) ............................................................................ 8
TEMA: HIPERENLACES ............................................................................................................................................... 10
TEMA: INSERTAR IMAGENES ................................................................................................................................... 11
TEMA: TABLAS .............................................................................................................................................................. 15
TEMA: PLANTILLAS ..................................................................................................................................................... 20
TEMA: REPASO GENERAL ......................................................................................................................................... 24
PRACTICA FINAL .......................................................................................................................................................... 28
UTN – PROGRAMA DIGITAL JUNIOR
TEMA: INTRODUCCIÓN A DREAMWEAVER
OBJETIVO:
Comenzar a trabajar el entorno de trabajo de Dreamweaver, familiarizarse con el producto e
identificar los distintos elementos.
Ejercicio1:
 ARCHIVOS DE ESTA PRÁCTICA

 En carpeta “Ejercicio dw1”:
 Carpeta: umbertoeco encontrará umbertoeco.htm y la carpeta umbertoeco_archivos.
 EjercicioDW1.docx (Debe ser creado para contestar las preguntas, se deberá utilizar la numeración
de cada pregunta, si es necesario para la explicación se hará una captura de la pantalla.)
1) Mostrar en el entorno las barras de herramientas Estándar y Documento. Explique utilizando el

documento de Word qué otras barras mostró y cuáles son las maneras de mostrarlas y ocultarlas.
2) Cargue la página umbertoeco.htm. A continuación, cree una nueva página a través del menú Archivo.
Pase de un archivo a otro a través de la parte superior de la ventana del documento o a través del
menú Ventana. Explique cuál o cuáles son las opciones para pasar de un documento a otro.
3) En la página umbertoeco.htm, permita que se visualice el diseño y el código HTML a la vez. Explique
brevemente cuál es la opción y cómo se visualiza.
4) Pruebe mostrar distintos espacios de trabajo y observe la configuración del entorno en cada uno de
ellos. Cuando termine muestre el espacio de trabajo Diseño. Explique en qué barra y qué botón es el
que usa para mostrarlo.
5) Contraiga y expanda el conjunto que aparece en el espacio de trabajo Diseño. Sitúe como flotantes o
anclados alguno de los paneles o grupos de paneles. Pruebe distintas combinaciones entre los mismos,
agrupando y desagrupando. Finalmente restaure el espacio de trabajo. Explique qué utilizó para
contraer, expandir y restaurar.
6) Si en su equipo tiene instalado más de un navegador. Establezca uno de ellos por ejemplo el Internet
Explorer como principal y el otro como secundario. Muestre una vista previa de umbertoeco.htm con
cada uno de los navegadores y verifique si hay diferencias entre ambos. Explique cómo lo hizo y en
caso de no tener instalado más de uno como lo haría.
7) Obtener ayuda de Dreamweaver sobre paneles mediante el campo Buscar la ayuda mediante el
campo Buscar.
8) Utilice la ayuda de Dreamweaver y ubicar el tema “cambio de vista en la ventana del
documento”.
-2-
TEMA: CREAR SITIOS WEB
OBJETIVO:
Crear un sitio local vacío, en la que deberá diseñar la estructura y las páginas y rellenar algunas de
ellas.
Ejercicio 2:

 Texto: Juegos olímpicos.docx
1) Antes de comenzar deberá crear en su disco de trabajo una carpeta llamada Sitios Web dentro de
esta carpeta se incluirán los sitios locales que vaya creando.
2) Crear un sitio llamado JUEGOSOLIMPICOS con un esquema similar al siguiente observando los
nombres de los archivos.
a) La carpeta IMÁGENES contendrá las imágenes que se
encuentran en la carpeta imágenes_olimpicas.
b) los Juegos.html: El contenido de esta página lo deberá crear a
partir del texto llamado “juegos olímpicos.docx” con las
siguientes características.
i) Fondo de página #ffcc00
ii) Trabajar con HTML: Centrar el título: “Juegos olímpicos”
como encabezado1 y centrado.
iii) El texto “Fuente… “deberá quedar separado del texto y en
negrita.
a) Juegos invierno.html: contendrá el texto: “Página en
construcción” y le colocará un fondo de color #FFCCCC
c) Las demás páginas quedarán vacías.
Sugerencia:
Es bueno exportar el sitio, para evitar los inconvenientes surgidos de la pérdida de información.
Modelo los juegos.html
-3-
TEMA: CONFIGURAR PÁGINAS WEB
OBJETIVO:
Diseñar páginas web, dentro del sitio. Utilizar propiedades de la página y actividades de edición
Ejercicio 3:

 Carpeta Imágenes_olimpicas: Antiguos_fondo.jpg, Fondo_gato.jpg
1) Si no dispone del sitio creado en el ejercicio 2, deberá crearlo.
2) antiguos.html
a) Establezca la imagen “ antiguos_fondo.jpg” como fondo de
página, pero no se deberá repetir en mosaico, sino que sólo se
debe repetir verticalmente.
b) Título “Juegos Olímpicos antiguos” en “encabezado 1” y color
blanco.
c) Título de la página: juegos olímpicos antiguos.
3) modernos.html
a) Establezca el fondo de color #3FF.
b) Título de la página: Juegos olímpicos modernos.
c) Escriba el siguiente texto, teniendo en cuenta el final de cada fila
o renglón.
Juegos Olímpicos Modernos

Los Juegos Olímpicos Modernos fueron establecidos en su aspecto deportivo en 1896 por Pierre de
Coubertin y hasta la actualidad siguen practicándose.
En 1829 el gobierno francés, y en 1875, el gobierno alemán, hicieron excavaciones para desenterrar
Olimpia. En 1881 quedaron completamente descubiertas las ruinas.
Aunque siempre que se habla del renacimiento de los Juegos Olímpicos, el hecho se le atribuye a Francia y
a Pierre de Coubertin que es llamado el padre de los Juegos Olímpicos Modernos, la verdad es que el
primer intento se hizo en Grecia, gracias al entusiasmo de un griego llamado Evangelios Zappas, mucho
antes de que se pensara hacerlo en Francia. Fue así que en Grecia se efectuaron los primeros Juegos
Olímpicos Modernos el 15 de noviembre de 1859, el 15 de noviembre de 1870, el 18 de mayo de 1875 y el
18 de mayo de 1889
FUENTE:
http://es.wikipedia.org/wiki/Juegos_Olímpicos
4) sedes.html
a) Establezca el fondo de color #00CCFF (#0CF).
b) Titulo de la página: “sedes”.
5) mascotas.html Cree esta página, dentro de la carpeta mascotas.

a) Establezca la imagen “fondo_gato.jpg” como fondo de página, pero no se repite.
b) Título de la página: ”mascotas”.
c) Escriba el siguiente texto, teniendo en cuenta el final de cada fila o renglón.
-4-
Mascotas de los juegos Olímpicos

Las mascotas de los Juegos Olímpicos o Mascotas Olímpicas son uno de los principales símbolos de cada
uno de los eventos olímpicos. Las mascotas son, usualmente, animales o figuras antropomórficas
representativas de la zona de realización de los Juegos o del evento en sí. En la actualidad, las mascotas
son elementos de gran importancia para los diversos productos licenciados que se generan en torno a los
Juegos.
Las mascotas empezaron a ser utilizados en los Juegos Olímpicos a partir de Grenoble 1968 y, a nivel de
los Juegos de Verano, desde Múnich 1972. Previamente, en los Juegos Olímpicos de México 1968 fue
utilizada la imagen de un jaguar rojo para identificar el evento aunque su utilización fue bastante menor a
la de una mascota tradicional
FUENTE:
http://es.wikipedia.org/wiki/Mascotas_de_los_Juegos_Olímpicos
Sugerencias:
 Trabaje aumentando y disminuyendo el tamaño para ver cómo se muestra el documento y
luego vuelva al 100%.
 Muestre el código de la página e identifique el encabezamiento (HEAD) y luego el cuerpo
(BODY).
Modelo antiguos.html
-5-
TEMA: HOJAS DE ESTILO
OBJETIVO:
Trabajar con las hojas de estilo internas y externas y su correspondiente aplicación
Ejercicio 4:
1) Si no dispone del sitio creado en el ejercicio 2/3, deberá crearlo, o importarlo en el caso de que lo
haya exportado.
a) Vamos a modificar algunas páginas ya creadas en ejercicios anteriores, por lo tanto si no las tiene
trate de tener los textos cargados.
2) Abra modernos.html.
a) Cambie el color de fondo, editando la regla CSS body que se ha creado anteriormente para que el
color por defecto sea ahora #0F9.
b) Cree la regla CSS llamada “.título” para el formato del texto del primer párrafo de esta página
(donde aparece el texto Juegos Olímpicos modernos) indicando un tamaño de 23 pixeles, en
negrita y cursiva (italic) con un color #F66 y alineado al centro.
c) Deberá cambiar el formato a los textos:
i) “Pierre de Coubertin” y “Evangelios Zappas” creando y aplicando una clase denominada
“.resaltar“, estos textos se deberán ver en negrita y de color rojo. (a elección).
3) Mueva o Exporte los estilos .títulos y .resaltar creados a una hoja de estilos externa, a la que llamará
estilos_olimpicos.css y guárdela en la raíz del sitio. Una vez guardados realice lo siguiente:
a) Revise que no estén los estilos internos sueltos.
b) Vincule la hoja de estilos externa a la página actual.
4) Abra mascotas.html.
a) Dentro de esta página se deberá cambiar el color del texto (excepto el título) creando una clase
llamada .color que deberá tener #6ff.
b) Vincular la hoja de estilos estilos_olimpicos.css .
i) Al título “Mascota de los juegos olímpicos” aplicar estilo .titulo.
ii) Seleccionar el texto: “a partir de Grenoble 1968 y, a nivel de los Juegos de Verano,
desde Múnich 1972” aplicar estilo .resaltar.
-6-
Modelo mascotas.html
Modelo modernos.html
-7-
TEMA: LISTAS Y REGLA O LÍNEA HORIZONTAL* (adicional)
OBJETIVO:
Trabajar con listas, insertar línea o regla horizontal. Pegado y pegado especial
Ejercicio 5:

 Juegos olímpicos modernos 2.docx
 Deportes olímpicos.docx
haya exportado.
2) Abra la página modernos.html.
a) Antes de copiar el texto que se detalla a continuación se colocará el título “Comité Olímpico
Internacional” se le aplicará Encabezado1 pero se modificará mediante Encabezados (CSS) de la
siguiente manera: Fuente: Tahoma, Geneva, sans-serif; 18 px y color #60F.
b) Debajo del texto copie desde el archivo “juegos olímpicos modernos2.docx” el texto (recuerde el
pegado especial) y aplique una lista ordenada desde Austria hasta Suecia, estableciendo la lista
con romano mayúscula.
c) Agregue en la parte inferior de la página una línea horizontal de 500 pixeles de ancho y 10 de
alto. Debe aparecer en el explorador con un color sólido.
d) Opcional: Debajo de la línea insertada añadir el texto: Última actualización: inserte un campo
fecha que se actualice automáticamente al modificar la página. El formato a utilizar debe estar con
formato HTML con la combinación de fuentes Verdana, Geneva, Sans-serif, un tamaño de 12
pixeles color a elección y la clase se llamará .fuente1.
3) Abra la página los juegos.html.
a) El color de fondo debe quedar en la propiedad adecuada de la regla CSS body.
b) Agregue en la parte inferior de la página una línea horizontal al 100% de ancho y 10 de alto. En el
explorador no deberá quedar con un color sólido.
c) Debajo de la línea insertada copiar el texto que se encuentra en “deportes olímpicos.docx”.
d) Vincular la hoja de estilos estilos_olimpicos.css.
i) Al título “Deporte Olímpicos” y “Deportes reconocidos” aplica estilo .titulo
e) Desde “Actividades subacuáticas” hasta “Wushu” deberá aplicar una lista no ordenada en el estilo
que quiera.
4) Realiza una revisión Ortográfica.
*Este tema no se encuentra especificado en el temario de examen
-8-
Modelo modernos.html
-9-
TEMA: HIPERENLACES
OBJETIVO:
Trabajar con enlaces a una carpeta del mismo sitio, a una dirección externa y a una dirección de
correo, más el uso de marcadores.
Ejercicio 6:
haya exportado.
2) Crear una página llamada menú_mascotas.html en la carpeta mascotas con el siguiente menú:
MASCOTAS DE LOS JUEGOS OLÍMPICOS (título)

CONTENIDO (título)
 Juegos olímpicos de invierno(hipervínculo a página “juegos invierno.html”)
 Juegos olímpicos de verano (hipervínculo a página “juegos verano.html”)
 Ir a la página principal (hipervínculo a página “los juegos.html”
 Enlace a juegos olímpicos de Munich (hipervínculo a
http://es.wikipedia.org/wiki/Juegos_Olímpicos_de_Múnich_1972)
 Enlace a juegos olímpicos de Londres 2012
(http://es.wikipedia.org/wiki/Juegos_Olímpicos_de_Londres_2012)
Envía tus comentarios a nuestra dirección de mail mascotas@olimpia.es
a) Todas las páginas deberán cargar en una página nueva (destino).

b) Vincular la hoja de estilos estilos_olimpicos.css.
i) Aplicar el estilo .título a los títulos “Mascotas de los juegos olímpicos” y “Contenido”.
3) Abra la página los juegos.html.

a) Vínculos CSS: Indicar fuente “Verdana, Geneva, sans-serify” tamaño 16 vínculo visitado #CC00CC.
b) Colocar un marcador (nombre: comienzo) al comienzo del título “Juegos Olímpicos”.
c) Al final del documento colocar el texto: “Volver al comienzo” y desde allí un hipervínculo hacia el
marcador.
Modelo menú_mascotas.html
-10-
TEMA: INSERTAR IMAGENES
OBJETIVO
Insertar imágenes, imagen de sustitución, hipervínculo a un documento de Word
Ejercicio 7:

 Juegos Olímpicos de Verano_mascotas.docx
 Frases que nos sacan una sonrisa.docx
 juegosolimpicosde Londres1948.pdf
 estadios.rar
 Imagen trabajando.png
 Globo terráqueo girando.swf
1) Si no dispone del sitio creado en el ejercicio 2/3 y sucesivas, deberá crearlo, o importarlo en el caso de
que lo haya exportado.
2) Abra juegos verano.html.

a) Establezca el fondo de color #00CCFF (#0CF).
b) Titulo de la página: “juegos de verano”.
3) Copiar el texto que se encuentra en el archivo “juegos Olímpicos de Verano_mascotas.docx.
a) Vincular la hoja de estilos estilos_olimpicos.css.
i) Aplicar la clase título al título “Juegos Olímpicos de Verano”.
ii) Agregar a la hoja de estilos, una clase que llamará .título2 con las siguientes características:
(1) indicando un tamaño de 18 pixeles, en negrita y cursiva (italic) con un color #00C ,
primera letra mayúscula y alineado a la izquierda.
b) Deberá aplicar .título2 a los subtítulos, y una lista no ordenada, como especifica el modelo y
bajar los textos tal como se ve a continuación.
-11-
4) Agregar las imágenes, reducir los tamaños, colocar texto alternativo, establecer espacio horizontal
para que no quede pegada al texto y realizar los ajustes similares al modelo.
a) 1988…; 1992… especificar ancho y alto de 100, colocarle borde, espacio horizontal 16 y ajustarlo
al texto.
b) 2004…tamaño 150x112, colocarle borde, espacio horizontal 16 y ajustarlo al texto.
c) 2008…tamaño 200x150 colocarle borde, espacio horizontal 16 y ajustarlo al texto.
d) 2012_londres_ mascota1.jpg se sustituirá con 2012_londres_mascota2.jpg, tamaño 150x200 con
borde y ajustada, de manera que se pase el mouse se sustituya la imagen.
-12-
5) Insertar un vínculo en la imagen 2008_beijing.gif para que cargue la página:

http://www.olimpiadasbeijing2008.com/
6) Insertar un vínculo en la imagen de sustitución hacia el sitio oficial de los juegos olímpicos Londres 2012:
http://www.london2012.com/. Deberá aparecer en una página nueva.
7) Abra la página juegos invierno.html
a) En el ejercicio anterior, le habíamos colocado el fondo y un título.
b) Corregimos ahora el título: “PAGINA EN CONSTRUCCIÓN” deberá llevar encabezado1.
c) Insertamos la imagen trabajando.png tamaño200x200, la colocamos a la izquierda del texto.
d) Escribimos el texto: Para que la espera de nuestra página le arranque una sonrisa le brindamos
esta información :
e) Realizamos un hipervínculo al documento: frases que nos sacan una sonrisa.docx, sobre el texto
Documento para leer.
8) Abra menú_mascotas.html
a) Vamos a modificar el archivo para agregarle una película flash.
i) Debajo del título principal “MASCOTAS DE LOS JUEGOS OLÍMPICOS” insertar globo terráqueo
girando.swf.
ii) Observar el modelo y escribir el texto que aparece a continuación de los enlaces y realizar un
hipervínculo a un archivo .pdf: juegosolimpicosde Londres1948.pdf
iii) Observar el modelo y escribir el texto que aparece debajo del texto anterior y realizar un
hipervínculo a un archivo .rar estadios.rar.
-13-
-14-
TEMA: TABLAS
OBJETIVO:
Trabajar con tablas y tablas anidadas, rellenar, colores, combinar y dividir celdas seleccionar
elementos de la tabla, formato, manejo de los elementos de la tabla.
Ejercicio 8:

 Tablas1.jpg

1) Diseñe un tablero de juego respetando el modelo que encontrará como tablas1.jpg , deberá tener en
cuenta los siguientes puntos:
a) Tabla de 3 filas por 3 columnas.
b) Ancho 600 pixeles.
c) Relleno, espaciado y borde en 0(cero).
d) Alineación centrada.
 Deberá observar que cada celda tiene un diseño particular. Debe tener en cuenta de utilizar para este
ejercicio todas las propiedades de la tabla y tablas anidadas. En los casos que considere necesario
deberá aplicar estilos.
 Características
 Trabajar con el tipo de selector clase con el nombre .borde que se aplicará al borde de la tabla en
color bordó oscuro de tamaño 2. Fondo de la tabla en color #0F9.
 Fila 1:
 Sorteo número 1: Verdana 12pts. Estilo .celda1.
 El cuadrado con mucho color, deberá generar estilos de color para los textos.
 Este es el cuadrado más grande, preste atención para combinar las celdas.
 Fila 2:
 Columna 1 y 2 deberá aplicar anidamiento de tablas utilizando los rellenos y espaciados de
celdas adecuados. Rellenos de color de celda y alineación según corresponda.
 Fila 3:
 Columna 1 y 2 deberá aplicar anidamiento de tablas utilizando los rellenos y espaciados de
celdas adecuados. Rellenos de color de celda y alineación según corresponda.
 Mis letras son verdes: Podrá utiliza el estilo utilizado en “el cuadrado con mucho color”.
En el modelo tablas1.jpg no tiene fondo para facilitar la lectura del mismo.
-15-
Ejercicio 9:

 En carpeta “Ejercicio dw9”
 En la carpeta banderas encontrará las banderas de los países que debe insertar en las tablas.
1) Si no dispone del sitio creado en el ejercicio 2/3 y sucesivas, deberá crearlo, o importarlo en el caso de
que lo haya exportado.
2) Abrir la página sedes.html.
a) Titulo de la página Sedes invierno y verano.
b) Cree2 tablas escribiendo los datos (ver modelo) con las siguientes características:
i) tabla de 11 filas por 4 columnas,
ii) ancho de la tabla 650 píxeles,
iii) grosor del borde 0 píxeles; relleno de celda 0 y espaciado entre celdas 4,
iv) Centrada.
Modelo Sedes.html
c) La tabla debe quedar como el modelo (escribir los datos), tal como se muestra a continuación,
considerar combinar celdas en:
i) Fila 1 en ambas tablas.
ii) Fila 11 en la tabla 1, debe aparecer “Elección el 7 de setiembre de 2013” en 2 columnas.
d) Luego de cada tabla se aplicará una línea horizontal de 400 pixeles y una altura de 3.
e) Vincular la hoja de estilos estilos_olimpicos.css.

f) Aplicar el estilo .título a los títulos: Sedes “SEDES DE LOS JUEGOS DE VERANO DESDE 1988 AL
2020” y “SEDES DE LOS JUEGOS DE INVIERNO DESDE 1988 AL 2020”.
g) Aplicar estilo .titulo2 a los subtítulos.
h) En la cuarta columna, se deberán insertar las imágenes de las banderas, centradas en la celda.
-16-
Ejercicio 10:

 En la carpeta IMÁGENES: argentinamap.jpg.
 En la carpeta TEXTOS: textos_turismo.docx.
1) Crear la página mapa.html.

a) Colocar un fondo de color #FFFFCC.
b) Centrado en la página escribir el texto “Argentina” aplicarle una clase llamada .estilo con las
siguientes características. Fuente: "Courier New", Courier, monospace; tamaño 36 px, y negrita.
i) Delante del texto Argentina se aplicará un marcador llamado #inicio, al que se llegará desde
cada región.
c) Crear una tabla de 73 px. Relleno de celda y espaciado de 5, borde 1. Fondo #FFFFFF.
i) Insertar la imagen argentinamap.jpg alinear.
ii) Dentro del mapa en la zona :
(a) de Jujuy y Salta aplicar zona interactiva con hipevínculo al marcador noroeste.
(b) de Buenos Aires aplicar zona interactiva con hipervínculo al marcador Buenos Aires.
(c) de Misiones (cataratas) aplicar zona interactiva con hipervínculo al marcardor
Cataratas.
(d) de Rio Negro (San Carlos de Bariloche) aplicar zona interactiva con hipervínculo al
marcador Bariloche.
d) debajo del mapa insertar una tabla de 8 filas y 1 columna al 100%.
i) Fila 1, 3 5 y 7 tendrán el título de cada Región respectivamente. Por ejemplo en la fila 1
aparecerá Buenos Aires, luego al final de cada texto se colocará un hipervínculo que diga
“Volver “ y retornará al marcador #inicio.
-17-
Aquí continúan las otras regiones.
Ejercicio 11

 Carpeta “Ejercicio dw11”:
 En la carpeta IMAGENES encontrará lo que necesita para el ejercicio.
 En la carpeta TEXTOS encontrará los textos a cargar en la página.
1. Abrir o importar el sitio Juegos Olímpicos que se encuentra dentro de la carpeta Sitios Web.
2. Página index.html.
a) Vincular a la página estilos_olimpicos.css creado en el ejercicio 4.
b) Aplicar a los títulos “JUEGOS OLÍMPICOS” y “DEPORTISTAS ARGENTINOS PARA LONDRES 2012” la
clase de nombre .titulos de la hoja de estilos anterior.
c) Insertar la imagen Juegos-Olímpicos-2012.jpg de tamaño 200x200 con un hipervínculo a
http://www.olympic.org/
d) Insertar una tabla de 1 fila por 4 columnas, relleno de celda y espaciado en 5 y borde 2.
i) Dentro de la tabla se deber especificar los siguientes hipervínculos:
(1) Mascotas va a la página dentro del sitio mascotas.html.
(2) Juegos de verano va a la página dentro del sitio juegos verano.html .
(3) Juegos de invierno va a la página dentro del sitio juegos invierno.html.
(4) Sedes va a la página dentro del sitio sedes.html.
e) Insertar una tabla de 1 fila por 1 columna, de 850 px., relleno de celda y espaciado en 0 y borde 0
i) Insertar el texto que se encuentra en la carpeta textos.
f) Insertar una tabla de 4 filas por 2 columnas, de 650 px, relleno de celda y espaciado en 0 y borde
2.
i) Fila 1;
(1) Se combinas las celdas y se inserta la película flash “Figura humana andando.swf”,
especificar tamaño de 180x153. Fondo de celda color #CC33CC.
(2) Las celdas de la columna 1, se rellenarán con imágenes utilizando imagen de sustitución
en todos los casos.
ii) Fila 2 columna 1 imagen1: BALLIENGO1.jpg imagen de sustitución BALLIENGO2.jpg.
iii) Fila 2 columna 2 texto de Balliengo de la carpeta textos.
iv) Fila 3 columna 1 imagen1. LAS LEONAS.jpg imagen de sustitución SOLEDAD GARCIA.JPG.
v) Fila 3 columna 2 texto de las leonas de la carpeta textos.
vi) Fila 4 columna 1 imagen 1 Sebastián Crismanich.jpg imagen de sustitución carola
rodriguez.jpg.
vii) Fila 4 columna 2 texto de Sebastián Crismanich y Carola Rodríguez de la carpeta textos.
-18-
-19-
TEMA: PLANTILLAS
OBJETIVO:
Trabajar con plantillas para crear una o varias páginas Web. Realizar hipervínculos con mapa de
imágenes. Crear estilos e hipervínculos a otras páginas.
Ejercicio 12:

 Carpeta “Ejercicio dw12”:
 En la carpeta imágenes encontrará lo que necesita para el ejercicio.
1. Dentro de la carpeta Sitios Web creado en el Ejercicio Dw2, deberá incluir la carpeta
rutas_argentinas que pertenecerá al nuevo sitio web.
2. Crear un sitio llamado rutas_argentinas con un esquema similar al siguiente observando los
nombres de las carpetas y los archivos.
3. En este ejercicio creará solamente las páginas de las provincias a partir de la plantilla creada a tal
efecto.
Características de la plantilla:
4. A partir de un documento en blanco se creará la plantilla de nombre baseprov.dwt .
a) Crear una tabla de 2filas por 1 columna de 950 pixeles.
b) Primera fila:
i) Dividir la fila en 2 columnas.
ii) En la primer celda insertar escudo.gif y en la segunda celda rutas1.jpg.
c) Segunda fila:
i) Insertar una tabla anidada de 1 fila por 2 columnas.
(1) Primera celda: Colocar color de fondo #00CCFF, se deberá crear la lista sin ordenar e
insertar una imagen. Observar que quizás es necesario crear otra tabla, en esa celda.
(2) Ir a Turismo va a http://www.turismo.gov.ar/
(3) Home va a index.html.
(4) Insertar mail.gif y hacer un vínculo en la imagen al correo electrónico:
contacto@turismo.gov.ar, revisar alineación.
(5) Segunda celda: Colocar color de fondo #00ffff, esta contendrá la región editable para
permitir insertar el mapa de la provincia que corresponda.
-20-
Modelo de plantilla:
5. Cordoba.html: Utilizar la plantilla baseprov.dwt creada anteriormente y aplicarla a la Página.

a) Insertar el mapa de Cordoba.gif y centrarlo.
6. Rio Negro.html: Utilizar la plantilla baseprov.dwt creada anteriormente y aplicarla a la Página.
a) Insertar el mapa de Rio negro.gif y centrarlo.
7. Santiago del estero.html Utilizar la plantilla baseprov.dwt creada anteriormente y aplicarla a la Página.
a) Insertar el mapa de Santiago del estero.gif y centrarlo.
Modelo Córdoba
-21-
Ejercicio 13:

 Carpeta “Ejercicio dw13”
 En la carpeta IMAGENES encontrará lo que necesita para el ejercicio.
1) Dentro de la carpeta Sitios Web en el sitio rutas_argentinas del ejercicio Dw10, ha creado una
plantilla llamada baseprov.dwt que utilizará para este ejercicio.
2) Abra esa plantilla y modifíquela de la siguiente manera y guárdela como baseprov2.dwt.
a) Fila 1:
i) Queda como está.
b) Fila 2 celda 1:
i) Se transforma en editable para cargar la lista de provincias con lista sin ordenar.
Buenos Aires Chaco Catamarca
Chubut Córdoba Corrientes
Entre Ríos Formosa Jujuy
La Pampa La Rioja Mendoza
Misiones Neuquén Río Negro
Salta San Juan San Luis
Santa Cruz Santa Fe Santiago del Estero
Tierra del fuego Tucumán
ii) De Córdoba realizar un hipervínculo a cordoba.html.

iii) De Rio Negro realizar un hipervínculo Rio negro.html.
iv) De Santiago del Estero realizar un hipervínculo a Santiago del estero.html.
c) Fila 2 celda 2:
i) Insertar una tabla anidada:
(1) Primera fila el texto tendrá un estilo llamado .titulo con las siguientes características:
(a) Negrita, Tahoma, Geneva, sans-serif tamaño 24, centrado.
(2) Insertar el mapa_argentina.gif con borde y centrado en la celda.
(a) Mediante mapa de imágenes realizar los siguientes hipervínculos:
(i) De Córdoba realizar un hipervínculo a cordoba.html.
(ii) De Rio Negro realizar un hipervínculo Rio negro.html.
(iii) De Santiago del Estero realizar un hipervínculo a Santiago del estero.html.
3) No olvidar colocar el título de la página.
a) Cordoba.html es Córdoba.
b) Rio Negro.html es Rio Negro.
c) Santiago del estero.html es Santiago.
d) Index.html es Rutas argentinas.
-22-
-23-
TEMA: REPASO GENERAL
Ejercicio 14:

 Carpeta “Ejercicio dw14”
 En la carpeta IMAGENES encontrará lo necesario para el ejercicio.
 Los textos necesarios se encuentran en la carpeta TEXTOS.

1) Dentro de la carpeta Sitios Web crear el sitio portal_deportivo Con la siguiente estructura:
2) En este ejercicio se crearán las páginas de deportes a partir de la plantilla creada a tal efecto. Luego
se desarrollará el index.html.
Características de la plantilla
3) A partir de un documento en blanco se creará la plantilla de nombre deportes.dwt.
a) Crear una tabla de 5 fila por 2 columnas de 67% de ancho, con borde 1.
b) Primera fila:
(1) Se combina y se crea una región editable llamada deporte y que contiene imagen futbol2.jpg
y la palabra Futbol, tamaño encabezado2.
c) Segunda fila y subsiguientes: Todas las celdas de la columna 2 tendrán regiones editables, para
poder variarlas según el deporte que corresponda.
d) Primera columna:
(1) Fila 2 a 5 se deberán colocar los textos: Categoría, Días y horarios, Tarifas y Profesor a
cargo.
e) Colocar color de fondo en apariencia html #009900.
-24-
4) Página index.html .
a) Título de la página “portal deportivo”.
b) Se trata de realizar tablas anidadas y colocar hipervínculos en las imágenes.
c) Crear una tabla de 837 px de 5 filas por 4 columnas. Relleno y espaciado de 0 y borde de 1,
centrada.
d) Fondo de página en apariencia html #009900 y vínculos #FFFF99.
FILA 1:
(1) Combinar y colocar el título: “Club Atlético Victoria Deportiva” en encabezado1.
(2) Ajuste el tamaño de la imagen escudo.gif a 60x50 y luego insértela delante del título.
FILA 2:
e) primera celda: Colocar ajedrez.jpg como fondo. Colocar los textos que se ven en el modelo.
Torneo…times new roman 24 ptos. rojo.
f) Segunda celda: Insertar una tabla de (4x4) 100 % fondo gris (#CCCCCC ).
(1) Insertar las imágenes mediante imagen de sustitución según la disciplina, por ejemplo: para
la disciplina gimnasia con aparatos las imágenes son: aparatos.jpg y la sustitución es
aparatos1.jpg
(2) En cada imagen se hace un hipervínculo a la disciplina correspondiente.
(3) Tercera celda: Fondo amarillo.( #FFCC00) Insertar texto e imagen tecanasta.jpg.
FILA 3:
(4) Primera celda: Fondo celeste. Insertar texto según modelo.
(5) Segunda celda: imagen novedades.gif.
(6) Tercera celda: Fondo gris (#CCCCCC ). Se coloca el texto.
(7) Cuarta fila: Fondo negro (#000000) Texto e hipervínculo a correo (tener en cuenta que aquí
se ve el correo).
En todos los casos observar las alineaciones que correspondan.
5) Ahora deberá desarrollar las páginas que utilizan la plantilla generada para tal fin.
a) Como imagen se usarán las que tienen el número 2 al final, por ejemplo en aparatos será
aparatos2.jpg.
-25-
-26-
-27-
PRACTICA FINAL
Ejercicio 15:

 Carpeta “Ejercicio DW 15”
 En la carpeta IMAGENES encontrará lo necesario para el ejercicio.
 Los textos necesarios se encuentran en la carpeta TEXTOS.
.
1) Dentro de la carpeta Sitios Web crear el sitio turismo_argentina Con la siguiente estructura
2) En este ejercicio se crearán las páginas de las regiones a partir de la plantilla creada a tal efecto.
Luego se desarrollará el index.html
Características de la plantilla:
3) A partir de un documento en blanco se creará la plantilla de nombre provincias.dwt.
a) Crear un hoja de estilos llamada textos.css.
i) Dentro contendrá selectores de tipo clase con los siguientes nombres.
(1) .textos con fuente Arial, Helvetica, sans-serif, 16 pixeles, italic, color #FFFFCC.
(2) .titulos con fuente Arial, Helvetica, sans-serif, 24 pixeles.
b) Colocar un título MAPA, que contendrá un hipervínculo al archivo mapa.html creado en ejercicio 10,
este hipervínculo se cargará en una página nueva. A continuación se creará una zona editable para
poder colocar el nombre de la zona que se necesite. Esta página puede formar parte del sitio si así
lo desea.
c) Crear una tabla de 1 fila por 2 columnas de 850 pixeles, con borde 1.
d) Primera columna:
i) Insertar un tabla anidada de 4 filas y 1 columna, alinearla.
ii) Todas las celdas deben ser editables, para incorporar las fotos que correspondan a cada
provincia.
e) Segunda columna:
i) Colocar color de fondo #000000, esta contendrá otra región editable para permitir insertar el
texto correspondiente a la provincia. No olvidar alinear en la celda.
4) Debajo de la tabla deberá escribir “Volver al inicio” y se realizará un hipervínculo a index.html, deberá
cargar en una página nueva.
Nota: El modelo que se adjunta no está con el fondo negro, a los efectos de visualizar las regiones
perfectamente.
-28-
5) Página de Bariloche.html.
a) Se basa en la plantilla creada a tal efecto.
b) Aplique a las imágenes bariloche1.jpg, bariloche2.jpg, bariloche3.jpg y chocolate.jpg un tamaño de

180x153 y luego insértelas en la página bariloche.html.
c) Al lado de MAPA agregar el texto SAN CARLOS DE BARILOCHE, aplicando la clase títulos, que se
encuentra en textos.css.
d) Cargar el texto correpondiente a bariloche que se encuentra en el documento textos_turismo.docx
6) Páginas buenos aires.html, cataratas.html y noroeste.html tendrán las mismas características que
bariloche.html. Los textos y las imágenes se encuentran divididas para su mejor localización.
7) En todas las páginas colocar titulo de página según corresponda, por ejemplo: la de bariloche deberá
decir bariloche, y así todas.
8) Index.html
-29-
Se trata de una página que los llevará por las distintas regiones de turismo, tanto desde el texto, como
desde el mapa.
a) Diseñar la página tal como lo muestra el modelo.

i) Título de la página: turismo Argentina.
ii) Centrado en la página escribir el texto “Maravillas de Argentina” aplicarle una clase llamada
.estilo con las siguientes características. Fuente: "Courier New", Courier, monospace; tamaño
36 px, y negrita.
iii) Colocar a los costados del texto la imagen bandera.gif (ajustar).
iv) Colocar el fondo ( fondo.gif).
v) Crear una tabla de 1 fila y 4 columnas, de 500 px, relleno y espaciado 0, borde 2. Fondo
#00CC66.
(1) Escribir los textos Noroeste, Buenos Aires, Cataratas y Bariloche, desde cada uno se hará un
hipervínculo a cada una de las páginas que se encuentran en el sitio respectivamente.
(2) Establecer el vínculo visitado en color #f09.
vi) Crear una tabla de 73 px. Relleno de celda y espaciado de 5, borde 1. Fondo #FFFFFF.
(1) Insertar la imagen argentinamap.jpg alinear.
(2) Dentro del mapa en la zona.
(a) de Jujuy y Salta aplicar zona interactiva con hipevínculo a noroeste.html.
(b) de Buenos Aires aplicar zona interactiva con hipervínculo a Buenos aires.html.
(c) de Misiones (cataratas) aplicar zona interactiva con hipervínculo a Cataratas.html.
(d) de Rio Negro (San Carlos de Bariloche) aplicar zona interactiva con hipervínculo a
Bariloche.html.
(e) En todos los casos los hipervínculos deberán especificarse para que aparezcan en hoja
nueva.
-30-

Consignas Dreamweaver

Cargado por

Copyright:

Formatos disponibles

Consignas Dreamweaver

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Consignas Dreamweaver

Cargado por

Copyright:

Formatos disponibles

PROGRAMA DIGITAL JUNIOR

Prácticas de Dreamweaver - Nivel Fundamentos

TEMA: INTRODUCCIÓN A DREAMWEAVER .......................................................................................................... 2

TEMA: INTRODUCCIÓN A DREAMWEAVER

 ARCHIVOS DE ESTA PRÁCTICA

1) Mostrar en el entorno las barras de herramientas Estándar y Documento. Explique utilizando el

TEMA: CREAR SITIOS WEB

 ARCHIVOS DE ESTA PRÁCTICA

Modelo los juegos.html

TEMA: CONFIGURAR PÁGINAS WEB

 ARCHIVOS DE ESTA PRÁCTICA

1) Si no dispone del sitio creado en el ejercicio 2, deberá crearlo.

Juegos Olímpicos Modernos

5) mascotas.html Cree esta página, dentro de la carpeta mascotas.

Mascotas de los juegos Olímpicos

TEMA: HOJAS DE ESTILO

TEMA: LISTAS Y REGLA O LÍNEA HORIZONTAL* (adicional)

 ARCHIVOS DE ESTA PRÁCTICA

*Este tema no se encuentra especificado en el temario de examen

MASCOTAS DE LOS JUEGOS OLÍMPICOS (título)

a) Todas las páginas deberán cargar en una página nueva (destino).

3) Abra la página los juegos.html.

TEMA: INSERTAR IMAGENES

 ARCHIVOS DE ESTA PRÁCTICA

2) Abra juegos verano.html.

5) Insertar un vínculo en la imagen 2008_beijing.gif para que cargue la página:

 ARCHIVOS DE ESTA PRÁCTICA

En el modelo tablas1.jpg no tiene fondo para facilitar la lectura del mismo.

 ARCHIVOS DE ESTA PRÁCTICA

e) Vincular la hoja de estilos estilos_olimpicos.css.

 ARCHIVOS DE ESTA PRÁCTICA

1) Crear la página mapa.html.

Aquí continúan las otras regiones.

 ARCHIVOS DE ESTA PRÁCTICA

 ARCHIVOS DE ESTA PRÁCTICA

5. Cordoba.html: Utilizar la plantilla baseprov.dwt creada anteriormente y aplicarla a la Página.

 ARCHIVOS DE ESTA PRÁCTICA

ii) De Córdoba realizar un hipervínculo a cordoba.html.

TEMA: REPASO GENERAL

 ARCHIVOS DE ESTA PRÁCTICA

 ARCHIVOS DE ESTA PRÁCTICA

b) Aplique a las imágenes bariloche1.jpg, bariloche2.jpg, bariloche3.jpg y chocolate.jpg un tamaño de

a) Diseñar la página tal como lo muestra el modelo.

También podría gustarte