I.E.S. CARLOS III . TOLEDO
DPTO. TECNOLOGÍA
EJERCICIO PREVIO.- Crear una carpeta, dentro de la carpeta de tu CURSO, con el nombre EJERCICIOSDREAMTUNOMBRE. EJERCICIO Nº1.- Crear una página web. Realizar una página web con texto y enlaces (WWW) y guardar con el nombre prueba1.htm.
EJERCICIO Nº2- Crear un sitio web local sin conexión internet. 1 Copia en la carpeta de ejerciciosdreamtunombre las carpetas ANIMALES, DEPORTES, COCINA. 2 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 3 Haz clic sobre el menú Sitio. 4 Elegir la opción Nuevo sitio. Se abrirá una nueva ventana. 5 Selecciona la pestaña Avanzadas de la nueva ventana. 6 Selecciona Datos locales en Categoría. 7 En Nombre del sitio escribe Animales. 8 En Carpeta raíz local busca la carpeta animales, que se encuentra dentro de la carpeta ejerciciosdreamtunombre, y selecciónala. Puedes hacerlo a través del botón con forma de carpeta. 9 En Carpeta predeterminada de imágenes busca la carpeta imágenes, que se encuentra dentro de la carpeta animales, y selecciónala. Puedes hacerlo a través del botón con forma de carpeta. 10 Haz clic sobre el botón Aceptar.
EJERCICIO Nº3.- Crear nuevo documento y modificar sus propiedades. 1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2 Abre el menú Archivo y elige la opción Nuevo, o bien haz clic sobre el botón barra de herramientas.
de la
3 Selecciona la pestaña General de la nueva ventana. 4 Selecciona Página básica en Categoría. 5 Selecciona HTML en Página básica:. 6 Haz clic sobre el botón Crear. 7 A partir de este momento vamos a realizar todos los ejercicios en la vista diseño. Haz clic sobre el botón Mostrar vista de diseño
.
8 Haz clic con el botón derecho sobre el documento en blanco, para abrir su menú contextual. 9 Elige la opción Propiedades de la página en el menú contextual. 10 En Título escribe Perros Gatos. 11 En Fondo: escribe #CCCC99. 12 En Vínculos: escribe #CC6600. 13 En Vínculos visitados: escribe #CC9933.
DREAMWEAVER. EJERCICIOS
1/17
I.E.S. CARLOS III . TOLEDO
DPTO. TECNOLOGÍA
14 En Vínculos activos: escribe #CC9966. 15 Haz clic sobre el botón Aceptar. 16 Haz clic sobre el botón Guardar de la barra de herramientas. Guarda el documento con el nombre menu.htm, dentro de la carpeta animales
EJERCICIO Nº4.- Crear sitio local y modificar las propiedades de la página. Ejercicio 4.1.- Deportes 1 Crear un sitio local con el nombre Deportes, cuya carpeta raíz sea la carpeta deportes, que se encuentra dentro de la carpeta ejerciciosdreamtunombre. 2 Abrir el documento quienes.htm y modificar sus propiedades, para que su título sea ¿Quienes somos?, el color del fondo sea #99CCCC y el color del texto sea #003333. 3 Guardar los cambios y cerrar el documento.
Ejercicio 4.2.- Cocina. 1 Crear un sitio local con el nombre Cocina, cuya carpeta raíz sea la carpeta cocina, que se encuentra dentro de la carpeta ejerciciosdreamtunombre. 2 Abrir el documento menu.htm y modificar sus propiedades, para que su título sea Menú, el color de los vínculos y los vínculos visitados sea negro, y el color de los vínculos activos sea #FF9999. 3 Establecer como imagen de fondo la imagen fondo.gif, que se encuentra dentro de la carpeta imágenes del sitio. 4 Guardar los cambios y cerrar el documento.
EJERCICIO Nº5.- Insertar texto y modificar sus propiedades. 1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2 Si no aparece el panel Sitio, ábrelo a través del menú Ventana, opción Sitio. 3 Selecciona el sitio Animales en el panel Sitio. 4 Haz doble clic sobre el documento gatos.htm, que aparece en el panel Sitio. Se abrirá el documento en Dreamweaver. 5 Inserta el texto ¿COMO PREVENIR LOS PROBLEMAS DENTALES? encima de la línea Alimentar al gato... 6 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades. 7 Selecciona el texto ¿COMO PREVENIR LOS PROBLEMAS DENTALES?. 8 En Formato, del inspector de propiedades, elige Encabezado 3. 9 Haz clic sobre el botón Sangría de texto 10 Haz clic sobre el botón Guardar
DREAMWEAVER. EJERCICIOS
.
de la barra de herramientas
2/17
I.E.S. CARLOS III . TOLEDO
DPTO. TECNOLOGÍA
EJERCICIO Nº6.- Convertir texto en una lista 1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2 Si no aparece el panel Sitio, ábrelo a través del menú Ventana, opción Sitio. 3 Selecciona el sitio Animales en el panel Sitio. 4 Haz doble clic sobre el documento gatos.htm, que aparece en el panel Sitio. Se abrirá el documento en Dreamweaver. 5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades. 6 Selecciona las cuatro líneas de texto desde Alimentar al gato... hasta la última. 7 Haz clic sobre el botón Lista sin ordenar
del inspector de propiedades.
8 Selecciona la línea de texto Preferiblemente que coma pienso. 9 Haz clic sobre el botón Sangría de texto 10 Haz clic sobre el botón Guardar
del inspector de propiedades.
de la barra de herramientas.
EJERCICIO Nº7.- Crear estilo HTML 1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2 Si no aparece el panel Sitio, ábrelo a través del menú Ventana, opción Sitio. 3 Selecciona el sitio Animales en el panel Sitio. 4 Haz doble clic sobre el documento gatos.htm, que aparece en el panel Sitio. Se abrirá el documento en Dreamweaver. 5 Haz clic sobre el menú Ventana. 6 Elige la opción Estilos HTML, para abrir el panel Estilos HTML. 7 Haz clic sobre el botón Nuevo estilo
, del panel Estilos HTML.
Aparecerá la ventana Definir estilo HTML. 8 En Nombre escribe TituloAnimales. 9 En Aplicar a: selecciona la opción Párrafo. 10 En Al aplicar: selecciona la opción Borrar estilo existente. 11 En Color escribe #663300. 12 Haz clic sobre el botón Negrita
.
13 Haz clic sobre el botón Cursiva
.
14 En Formato elige Encabezado 1. 15 Haz clic sobre el botón Aceptar. 16 Seleccionar la palabra gatos,que aparece al comienzo del documento. 17 Haz clic sobre TituloAnimales, del panel Estilos HTML. 18 Pulsa fuera del texto para que deje de estar seleccionado y se le aplique el último cambio. 19 Haz clic sobre el botón Guardar
DREAMWEAVER. EJERCICIOS
de la barra de herramientas
3/17
I.E.S. CARLOS III . TOLEDO
DPTO. TECNOLOGÍA
EJERCICIO Nº8.- Modificar las propiedades del texto. Ejercicio 8.1.- Deportes 1 Abrir el sitio Deportes. 2 Abrir el documento instalaciones.htm. 3 Aplicar el formato Encabezado 1 al texto Nuestras instalaciones, de la primera línea. 4 Convertir las siguientes seis líneas, que hacen referencia a las instalaciones, en una lista desordenada (con viñetas). 5 Aplicar dos sangrías a la lista. 6 Guardar los cambios y cerrar el documento
Ejercicio 8.2.- Cocina. 1 Abrir el sitio Cocina. 2 Abrir el documento postresemana.htm. 3 Convertir las líneas siguientes al texto PREPARACIÓN: en una lista ordenada, numerada con números romanos en mayúsculas. 5 Aplicar una sangría a la lista. 6 Guardar los cambios y cerrar el documento.
EJERCICIO Nº9.- Crear un hiperenlace 1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2 Si no aparece el panel Sitio, ábrelo a través del menú Ventana, opción Sitio. 3 Selecciona el sitio Animales en el panel Sitio. 4 Haz doble clic sobre el documento inicio.htm, que aparece en el panel Sitio. Se abrirá el documento en Dreamweaver. 5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades. 6 Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botón para desplegar sus propiedades más avanzadas. 7 Selecciona la imagen del logotipo de aulaclic. Para ello hay que hacer clic sobre ella. 8 En Vínculo, del inspector de propiedades, escribe http://www.aulaclic.com. 9 En Destino selecciona la opción _blank. 10 Pulsa fuera del texto para que deje de estar seleccionado y se le apliquen todos los cambios. 11 Haz clic sobre el botón Guardar
de la barra de herramientas.
EJERCICIO Nº10.- Crear un vínculo de correo electrónico 1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2 Si no aparece el panel Sitio, ábrelo a través del menú Ventana, opción Sitio. 3 Selecciona el sitio Animales en el panel Sitio.
DREAMWEAVER. EJERCICIOS
4/17
I.E.S. CARLOS III . TOLEDO
DPTO. TECNOLOGÍA
4 Haz doble clic sobre el documento menu.htm, que aparece en el panel Sitio. Se abrirá el documento en Dreamweaver. 5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades. 6 Escribe el texto Sugerencia e-mail. 7 Selecciona el botón Alinear al centro
del inspector de propiedades.
8 Selecciona el texto e-mail que acabas de escribir. 9 En Vínculo, del inspector mailto:direccionprueba@aulaclic.com.
de
propiedades,
escribe
10 Pulsa fuera del texto para que deje de estar seleccionado y se le aplique el último cambio. 11 Haz clic sobre el botón Guardar
de la barra de herramientas
EJERCICIO Nº11.- Crear hiperenlaces. Ejercicio 11.1.- Deportes 1 Abrir el sito Deportes. 2 Abrir el documento quienes.htm. 3 Crear un hiperenlace a www.aulaclic.com en la imagen de aulaclic. 4 Hacer que el enlace se abra en la ventana completa del navegador. 5 Guardar los cambios y cerrar el documento.
Ejercicio 11.2.- Cocina. 1 Abrir el sito Cocina. 2 Abrir el documento menu.htm. 3 Crear un hiperenlace a quienes.htm en el texto Quienes somos, escribiendo derecho como destino. 4 Crear un hiperenlace a platosemana.htm en el texto Plato de la semana, escribiendo derecho como destino. 5 Crear un hiperenlace a postresemana.htm en el texto Postre de la semana, escribiendo derecho como destino. 6 Crear un hiperenlace a tureceta.htm en el texto Tu receta, escribiendo derecho como destino. 7 Guardar los cambios y cerrar el documento
EJERCICIO Nº12.- Insertar una imagen. 1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2 Si no aparece el panel Sitio, ábrelo a través del menú Ventana, opción Sitio. 3 Selecciona el sitio Animales en el panel Sitio. 4 Haz doble clic sobre el documento menu.htm, que aparece en el panel Sitio.
DREAMWEAVER. EJERCICIOS
5/17
I.E.S. CARLOS III . TOLEDO
DPTO. TECNOLOGÍA
Se abrirá el documento en Dreamweaver. 5 Inserta una línea en blanco encima del texto Sugerencia e-mail, y sitúa el cursor en dicha línea. 6 Haz clic sobre el menú Insertar. 7 Elige la opción Imagen. 8 Selecciona la imagen logo_animales.gif, que se encuentra dentro de la carpeta imágenes del sitio. 9 En Relativa a: selecciona la opción Documento. 10 Haz clic sobre el botón Aceptar. 11 Pulsa fuera de la imagen para que deje de estar seleccionada y se apliquen todos los cambios. 12 Haz clic sobre el botón Guardar
de la barra de herramientas.
EJERCICIO Nº13.- Crear botones Flash. 1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2 Si no aparece el panel Sitio, ábrelo a través del menú Ventana, opción Sitio. 3 Selecciona el sitio Animales en el panel Sitio. 4 Haz doble clic sobre el documento menu.htm, que aparece en el panel Sitio. Se abrirá el documento en Dreamweaver. 5 Inserta una línea en blanco entre la imagen y el texto Sugerencia e-mail, y sitúa el cursor en dicha línea. 6 Haz clic sobre el menú Insertar. 7 Elige la opción Imágenes interactivas. 8 Elige la opción Botón Flash. Se abrirá una nueva ventana. 9 En Estilo: selecciona Generic-Gold. En Muestra: aparecerá el botón
Si en Estilo: no aparece el botón Generic-Gold, selecciona otro cuyos colores sean similares a los del botón anterior. 10 En Texto del botón: escribe Inicio. 11 En Fuente: selecciona Comic Sans MS. 12 En Tamaño: escribe 18. 13 En Vínculo: escribe inicio.htm. 14 En Guardar como: escribe binicio.swf. 15 Haz clic sobre el botón Aceptar. 16 Inserta un nuevo botón debajo del que acabas de crear, repitiendo los pasos del 6 al 15, pero con las siguientes diferencias: En Texto del botón: escribe Perros. En Vínculo: escribe perros.htm. En Guardar como: escribe bperros.swf.
DREAMWEAVER. EJERCICIOS
6/17
I.E.S. CARLOS III . TOLEDO
DPTO. TECNOLOGÍA
17 Inserta un nuevo botón debajo del que acabas de crear, repitiendo los pasos del 6 al 15, pero con las siguientes diferencias: En Texto del botón: escribe Gatos. En Vínculo: escribe gatos.htm. En Guardar como: escribe bgatos.swf. 18 Inserta un nuevo botón debajo del que acabas de crear, repitiendo los pasos del 6 al 15, pero con las siguientes diferencias: En Texto del botón: escribe Consultas. En Vínculo: escribe consultas.htm. En Guardar como: escribe bconsultas.swf. 19 Pulsa fuera del botón para que deje de estar seleccionado y se apliquen los cambios. 20 Haz clic sobre el botón Guardar
de la barra de herramientas
EJERCICIO Nº14.- Insertar imágenes. EJERCICIO Nº14.1.- Deportes. 1 Abrir el sito Deportes. 2 Abrir el documento instalaciones.htm. 3 Insertar la imagen basket .gif, que se encuentra dentro de la carpeta imágenes del sitio, a la derecha del texto Nuestras instalaciones. 4 Hacer que la alineación de la imagen sea Medio absoluta. 5 Guardar los cambios y cerrar el documento
EJERCICIO Nº14.1.- Cocina. 1 Abrir el sito Cocina. 2 Abrir el documento menu.htm. 3 Insertar un rollover debajo del vínculo Tu receta, cuya imagen original sea email1.gif, y la imagen de sustitución email2.gif. Establecer e-mail como texto alternativo. 4 Crear en el rollover un enlace de correo electrónico a micorreodeprueba@aulaclic.com. 5 Guardar los cambios y cerrar el documento.
EJERCICIO Nº15.- Crear y rellenar una tabla. 1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2 Si no aparece el panel Sitio, ábrelo a través del menú Ventana, opción Sitio. 3 Selecciona el sitio Animales en el panel Sitio. 4 Haz doble clic sobre el documento perros.htm, que aparece en el panel Sitio. Se abrirá el documento en Dreamweaver. 5 Sitúa el cursor en la línea en blanco que se encuentra sobre el texto CUIDADOS POSNATALES. 6 Haz clic sobre el menú Insertar.
DREAMWEAVER. EJERCICIOS
7/17
I.E.S. CARLOS III . TOLEDO
DPTO. TECNOLOGÍA
7 Elige la opción Tabla. 8 En Filas: escribe 6. 9 En Columnas: escribe 4. 10 En Ancho: selecciona Píxeles y escribe 500. 11 En Borde: escribe 2. 12 Si en Relleno de celda: aparece algo escrito, bórralo. 13 En Espacio entre celdas: escribe 2. 14 Haz clic sobre el botón Aceptar. 15 Rellena la tabla para que quede del siguiente modo:
DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE DIFERENCIAS
PERRO
HOMBRE
PEQUEÑO
GRANDE
Duración crecimiento
10 meses
18 a 24 meses
Tiempo de gestación
58 a 63 días
9 meses
Duración de vida del pelo/cabello
1 año
2 a 7 años
16 Haz clic sobre el botón Guardar
16 años
de la barra de herramientas.
EJERCICIO Nº16.- Modificar las propiedades de la tabla 1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2 Si no aparece el panel Sitio, ábrelo a través del menú Ventana, opción Sitio. 3 Selecciona el sitio Animales en el panel Sitio. 4 Haz doble clic sobre el documento perros.htm, que aparece en el panel Sitio. Se abrirá el documento en Dreamweaver. 5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades. 6 Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botón para desplegar sus propiedades más avanzadas. 7 Selecciona la tabla. Para ello puedes pulsar sobre el borde que la rodea. 8 En Im, del inspector de propiedades, busca la imagen fondopatas.gif, que se encuentra dentro de la carpeta imágenes del sitio, y selecciónala. Puedes hacerlo a través del botón con forma de carpeta. 9 Selecciona la primera fila de la tabla. Puedes hacerlo situando el cursor junto al borde izquierdo de la tabla, a la altura de la primera fila, y haciendo clic cuando el puntero adquiera la forma de flecha. 10 En Tam, del inspector de propiedades, selecciona 4.
DREAMWEAVER. EJERCICIOS
8/17
I.E.S. CARLOS III . TOLEDO
DPTO. TECNOLOGÍA
11 En el botón Color de texto escribe #FFFFFF.
, que se encuentra a la derecha de Tam,
12 Haz clic sobre el botón Alinear al centro 13 En Fnd
.
escribe #663300. escribe #000000.
14 En Borde
15 Selecciona la segunda y la tercera fila. Puedes hacerlo situando el cursor junto al borde izquierdo de la tabla, a la altura de la segunda fila, y haciendo clic cuando el puntero adquiera la forma de flecha. Después deberás hacer lo mismo con la tercera fila, mientras mantienes pulsada la tecla Ctrl (Control). 16 En Tam selecciona 4. 17 Haz clic sobre el botón Alinear al centro 18 En Fnd 19 En Borde
.
escribe #FFCC66. escribe #000000.
20 Selecciona las dos celdas que contienen el texto PEQUEÑO y GRANDE. Puedes hacerlo pulsando con el ratón sobre una de ellas, y manteniéndolo pulsado mientras lo arrastras sobre la otra. 21 En Tam seleccionar Ning. 22 En Fnd
escribe #FF9966.
23 Selecciona las cuatro últimas filas. 24 Haz clic sobre el botón Alinear al centro
.
25 Pulsa fuera de la tabla para que las filas dejen de estar seleccionadas y se apliquen todos los cambios. 26 Haz clic sobre el botón Guardar
de la barra de herramientas.
EJERCICIO Nº17.- COMBINAR CELDAS 1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2 Si no aparece el panel Sitio, ábrelo a través del menú Ventana, opción Sitio. 3 Selecciona el sitio Animales en el panel Sitio. 4 Haz doble clic sobre el documento perros.htm, que aparece en el panel Sitio. Se abrirá el documento en Dreamweaver. 5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades. 6 Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botón para desplegar sus propiedades más avanzadas. 7 Selecciona la primera fila de la tabla. Puedes hacerlo situando el cursor junto al borde izquierdo de la tabla, a la altura de la primera fila, y haciendo clic cuando el puntero adquiera la forma de flecha. 8 Hacer clic sobre el botón Combinar las celdas seleccionadas propiedades.
DREAMWEAVER. EJERCICIOS
, del inspector de
9/17
I.E.S. CARLOS III . TOLEDO
DPTO. TECNOLOGÍA
9 Selecciona la primera celda de la segunda y la tercera fila. Puedes hacerlo pulsando con el ratón sobre una de las celdas, y manteniéndolo pulsado mientras lo arrastras sobre la otra. 10 Haz clic sobre el botón Combinar las celdas seleccionadas
.
11 Selecciona la última celda de la segunda y la tercera fila. 12 Haz clic sobre el botón Combinar las celdas seleccionadas
.
13 Selecciona la segunda y la tercera celda de la segunda fila. 14 Haz clic sobre el botón Combinar las celdas seleccionadas
.
15 Selecciona la segunda y la tercera celda de la cuarta fila. 16 Hacer clic sobre el botón Combinar las celdas seleccionadas
.
17 Selecciona la segunda y la tercera celda de la quinta fila. 18 Hacer clic sobre el botón Combinar las celdas seleccionadas
.
19 Selecciona la segunda y la tercera celda de la sexta fila. 20 Haz clic sobre el botón Combinar las celdas seleccionadas
.
21 Modifica el tamaño de las columnas para que se ajusten mejor al contenido. Puedes hacerlo manteniendo pulsado el ratón sobre los bordes de las columnas, arrastrándolos hacia las posiciones deseadas. 22 Haz clic sobre el botón Guardar
de la barra de herramientas.
EJERCICIO Nº18.- Modificar tablas Ejercicio 18.1.- Deportes. 1 Abrir el sito Deportes. 2 Abrir el documento reservas.htm. 3 Modificar la segunda tabla de la página para que quede como la siguiente:
ACTIVIDAD
TARIFA/HORA
AEROBIC 3€ STEP MUSCULACIÓN
4€
4 Guardar los cambios y cerrar el documento.
Ejercicio 18.2.- Cocina. DREAMWEAVER. EJERCICIOS
10/17
I.E.S. CARLOS III . TOLEDO
DPTO. TECNOLOGÍA
1 Abrir el sito Cocina. 2 Abrir el documento postresemana.htm. 3 Modificar la tabla para que quede como la siguiente:
INGREDIENTES 1 kg.
boniatos
1/4 litro
miel
abundante aceite 4 Guardar los cambios y cerrar el documento.
EJERCICIO Nº19.- Crear y configurar marcos 1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2 Si no aparece el panel Sitio, ábrelo a través del menú Ventana, opción Sitio. 3 Selecciona el sitio Animales en el panel Sitio. 4 Haz doble clic sobre el documento inicio.htm, que aparece en el panel Sitio. Se abrirá el documento en Dreamweaver. 5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades. 6 Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botón para desplegar sus propiedades más avanzadas. 7 Haz clic sobre el menú Insertar. 8 Elige la opción Marcos. 9 Elige la opción Izquierda. 10 Si no aparece el panel Marcos, ábrelo a través del menú Ventana, opción Otros, opción Marcos. 11 Selecciona el documento de marcos. Puedes hacerlo pulsando sobre el borde exterior de los marcos, en el panel Marcos. 12 En Título: que aparece en la barra de documento, escribe PERROS GATOS. 13 En Bordes, del inspector de propiedades, selecciona No. 14 En Ancho escribe 0. 15 En Selección Fila Col. pulsa sobre la columna de la izquierda. 16 En Columna selecciona Píxeles y escribe 142. 17 En Selección Fila Col. pulsa sobre la columna de la derecha. 18 En Columna selecciona Relativo y escribe 1. 19 Pulsa sobre el marco izquierdo en el panel Marcos.
DREAMWEAVER. EJERCICIOS
11/17
I.E.S. CARLOS III . TOLEDO
DPTO. TECNOLOGÍA
20 En Nombre del marco, del inspector de propiedades, escribe leftFrame. 21 En Origen escribe menu.htm. 22 En Desplaz selecciona No. 23 En Bordes selecciona No. 24 Activa la casilla Mismo tamaño. 25 Pulsa sobre el marco derecho en el panel Marcos. 26 En Nombre del marco, del inspector de propiedades, escribe mainFrame. 27 En Desplaz selecciona No. 28 En Bordes selecciona No. 29 Desactiva la casilla Mismo tamaño. 30 Selecciona el documento de marcos. Puedes hacerlo pulsando sobre el borde exterior de los marcos, en el panel Marcos. 31 Haz clic sobre el botón Guardar de la barra de herramientas. Guarda el documento con el nombre marcos.htm, dentro de la carpeta animales. 32 En el caso de haber insertado mapas de imagen en la imagen del perro y el gato, selecciona cada uno de ellos y elige mainFrame en Destino, que aparece en el inspector de propiedades. 33 Selecciona el primer botón Flash, y pulsa sobre el botón Editar, del inspector de propiedades. En Destino: selecciona mainFrame. Pulsa sobre el botón Aceptar. Haz lo mismo para el resto de botones Flash. 34 Haz clic sobre el botón Guardar todo
de la barra de herramientas.
EJERCICIO Nº20.- Crear y configurar marcos Ejercicio 20.1.- Deportes. 1 Abrir el sito Deportes. 2 Abrir el documento marcos.htm. 3 Modificar las propiedades del marco inferior, para que el documento que se cargue inicialmente en él sea el documento quienes.htm. 4 Modificar las propiedades del marco inferior, para que muestre de forma automática las barras de desplazamiento. 5 Modificar las propiedades del marco inferior, para que se muestre su borde de color #003333. 6 Guardar los cambios y cerrar el documento.
Ejercicio 20.2.- Cocina. 1 Abrir el sito Cocina. 2 Abrir el documento marcos.htm.
DREAMWEAVER. EJERCICIOS
12/17
I.E.S. CARLOS III . TOLEDO
DPTO. TECNOLOGÍA
3 Modificar las propiedades del conjunto de marcos, para que se muestren sus bordes de color #CC9999 y de ancho 3. 4 Guardar los cambios y cerrar el documento.
EJERCICIO Nº21.- Insertar una capa 1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2 Si no aparece el panel Sitio, ábrelo a través del menú Ventana, opción Sitio. 3 Selecciona el sitio Animales en el panel Sitio. 4 Haz doble clic sobre el documento gatos.htm, que aparece en el panel Sitio. Se abrirá el documento en Dreamweaver. 5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades. 6 Sitúa el cursor en la línea en blanco que hay debajo de la tabla. 7 Haz clic sobre el menú Insertar. 8 Elige la opción Capa. 9 Sitúa el cursor dentro de la capa. 10 En Formato selecciona Párrafo. 11 En Tam selecciona 4. 12 Haz clic sobre el botón Alinear al centro
.
13 Inserta una línea en blanco. Debajo de la línea en blanco inserta el texto Este es Golfo y es de Valencia. Debajo de esta otra línea inserta el texto Cerrar. 14 Inserta una línea en blanco entre las dos últimas líneas, y sitúa el cursor en ella. Vamos a insertar una imagen. 15 Haz clic sobre el menú Insertar. 16 Elige la opción Imagen. 17 Selecciona la imagen gato1.gif, que se encuentra dentro de la carpeta imágenes del sitio. 18 Haz clic sobre el botón Aceptar. 19 Pulsa sobre la imagen para seleccionar la capa. También puedes seleccionarla pulsando sobre el cuadrado blanco que aparece en su esquina superior-izquierda. 20 En ID de capa, del inspector de propiedades, escribe gatosemana. 21 En Iz escribe 10px. 22 En Sup escribe 69px. 23 En An escribe 320px. 24 En Al escribe 320px. 25 En Col. Fondo
escribe #FFCC66.
26 En Vis selecciona hidden.
DREAMWEAVER. EJERCICIOS
13/17
I.E.S. CARLOS III . TOLEDO
DPTO. TECNOLOGÍA
27 Pulsa fuera de la capa para que deje de estar seleccionada y se le aplique el último cambio. 28 Haz clic sobre el botón Guardar
de la barra de herramientas
EJERCICIO Nº22.- Insertar capas Ejercicio 22.1.- Deportes. 1 Abrir el sito Deportes. 2 Abrir el documento quienes.htm. 3 Insertar una capa con el nombre oferta. 4 Insertar en la capa el texto: Este fin de semana, disfruta de clases gratuitas de aeróbic, simplemente por visitar nuestras intalaciones. cerrar 5 Modificar las propiedades del texto de la capa, para que se muestre centrado, en negrita, y de tamaño 4. 6 Establecer #CCFFCC como color de la capa. 7 Establecer 460px como anchura de la capa, y 82px como altura. 8 Establecer 150px como distancia del margen izquierdo, y 128px como distancia del margen superior. 9 Hacer que la capa sea visible. 10 Guardar los cambios y cerrar el documento.
Ejercicio 22.2.- Cocina. 1 Abrir el sito Cocina. 2 Abrir el documento menu.htm. 3 Insertar una capa con el nombre correo. 4 Insertar en la capa el texto: No olvides mandarnos tus dudas y sugerencias. 5 Modificar las propiedades del texto de la capa, para que se muestre centrado, en negrita, y de tamaño 4. 6 Establecer #FF9999 como color de la capa. 7 Establecer 133px como anchura de la capa, y 87px como altura. 8 Establecer 28px como distancia del margen izquierdo, y 320px como distancia del margen superior. 9 Hacer que la capa esté oculta. 10 Guardar los cambios y cerrar el documento
DREAMWEAVER. EJERCICIOS
14/17
I.E.S. CARLOS III . TOLEDO
DPTO. TECNOLOGÍA
EJERCICIO Nº23.- Crear comportamiento 1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2 Si no aparece el panel Sitio, ábrelo a través del menú Ventana, opción Sitio. 3 Selecciona el sitio Animales en el panel Sitio. 4 Haz doble clic sobre el documento gatos.htm, que aparece en el panel Sitio. Se abrirá el documento en Dreamweaver. 5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades. 6 Si no aparece el panel Comportamientos, ábrelo a través del menú Ventana, opción Comportamientos. 7 Haz clic sobre la imagen del gato para seleccionarla. 8 Haz clic sobre el botón
del panel Comportamientos.
9 Elige la opción Mostrar-Ocultar capas. Si no te aparece la opción Mostrar-Ocultar capas, tendrás que dirigirte a la opción Mostrar eventos para y seleccionar un navegador más actual. Elige IE 5.5 o IE 6.0. Después haz clic sobre el botón
y selecciona la opción Mostrar-Ocultar capas.
10 En Capas con nombre: selecciona la capa capa "gatosemana", que es la única que aparecerá en la lista, al ser la única capa del documento. 11 Haz clic sobre el botón Mostrar. 12 Haz clic sobre el botón Aceptar. En el panel Comportamientos aparecerá el nuevo comportamiento. 13 Haz clic sobre el comportamiento en el panel. 14 Haz clic sobre el botón
, que aparece a la derecha del evento.
15 Selecciona el evento onClic. 16 Pulsa sobre la imagen
para seleccionar la capa.
17 Selecciona el texto Cerrar. 18 En Vínculo, del inspector de propiedades, escribe #. De este modo, la imagen contendrá un vínculo vacío. 19 En Color del texto escribe #000000. De este modo, el texto no adquirirá el color establecido para los vínculos, que por defecto es el color azul. 20 Haz clic sobre el botón
del panel Comportamientos.
21 Elige la opción Mostrar-Ocultar capas. 22 En Capas con nombre: selecciona la capa capa "gatosemana". 23 Haz clic sobre el botón Ocultar. 24 Haz clic sobre el botón Aceptar. En el panel Comportamientos aparecerá el nuevo comportamiento. 25 Haz clic sobre el comportamiento en el panel. 26 Haz clic sobre el botón
, que aparece a la derecha del evento.
27 Selecciona el evento onClic. 28 Haz clic sobre el botón Guardar
DREAMWEAVER. EJERCICIOS
de la barra de herramientas.
15/17
I.E.S. CARLOS III . TOLEDO
DPTO. TECNOLOGÍA
EJERCICIO Nº24.- Crear comportamientos Ejercicio 24.1.- Deportes. 1 Abrir el sito Deportes. 2 Abrir el documento quienes.htm. 3 Insertar un comportamiento que oculte la capa al hacer clic sobre el texto cerrar. 4 Guardar los cambios y cerrar el documento.
Ejercicio 24.2.- Cocina. 1 Abrir el sito Cocina. 2 Abrir el documento menu.htm. 3 Insertar un comportamiento que muestre la capa al situar el ratón sobre el rollover. 4 Insertar un comportamiento que oculte la capa al dejar de situar el ratón sobre el rollover. 5 Guardar los cambios y cerrar el documento.
EJERCICIO Nº25.- Insertar una regla horizontal 1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2 Si no aparece el panel Sitio, ábrelo a través del menú Ventana, opción Sitio. 3 Selecciona el sitio Animales en el panel Sitio. 4 Hacer doble clic sobre el documento inicio.htm, que aparece en el panel Sitio. Se abrirá el documento en Dreamweaver. 5 Sitúa el cursor a la derecha del texto Inicio, que aparece en la parte superior del documento. 6 Haz clic sobre el menú Insertar. 7 Elige la opción Regla horizontal. 8 Haz clic sobre el botón Guardar
de la barra de herramientas.
EJERCICIO Nº26.- Insertar otros elementos Ejercicio 26.1.- Deportes. 1 Abrir el sito Deportes. 2 Abrir el documento donde.htm. 3 Covertir la última línea de texto (Para más información...) en una marquesina. 4 Guardar los cambios y cerrar el documento.
Ejercicio 26.2.- Cocina 1 Abrir el sito Cocina. 2 Abrir el documento quienes.htm.
DREAMWEAVER. EJERCICIOS
16/17
I.E.S. CARLOS III . TOLEDO
DPTO. TECNOLOGÍA
3 Insertar a la derecha del texto Fecha última modificación: la fecha de última modificación del documento, para que se actualice automáticamente cada vez que se guarde. Ejemplo de fecha: 10 Junio, 2003 4 Guardar los cambios y cerrar el documento.
DREAMWEAVER. EJERCICIOS
17/17