Dreamweaver Gu A De Ejercicios

Dreamweaver 
Acciones comunes a todos los ejercicios:
● Generar una carpeta con el nombre del ejercicio donde estarán todos los elementos que utilicemos.
● Definir el sitio del ejercicio en esa carpeta.
● Abrir la página index de cada ejercicio (si lo hay).

Ejercicio 1. Página maquetada con tabla y diseñada con CSS
Urratsa

Prozesua

Observaciones

1

●
●
●

Tabla: 1 fila, 1 columna, ancho 90%Tabla: 1 fila, 2 columnas, ancho 90%
Tabla: 1 fila, 1 columna, ancho 90%

Creamos la estructura de la página.

2

●

Vincular la hoja de estilo.

Con esta hoja de estilo le daremos forma a nuestro contenido.

3

●
●

Tabla superior, escribe: “Mi primera página con estilos”
Tabla central, escribe: “Este es el texto de mi página” + intro
Copia y pega dos párrafos de texto.
Tabla baja, escribe:“copyright yo mismo”

Dotamos de contenido las tablas.

●

4

●
●
●

Tabla central, columna derecha: tamaño 200
Teclea: opción 1, opción 2, opción 3,
Inserta una tabla anidada en la parte superior de la celda.Tabla:
1 fila, 1 columna, ancho 200.

5

Tabla superior:
● td: topbar
● selecciona el texto “Mi primera página con estilos” y botón
dercha/ajustar código: asignamos la etiqueta spam.
● spam: logo

6Tabla central.

Asignamos clases y una nueva etiqueta para diferenciar el estilo
del texto del de la celda.

●
●

Selecciona “Este es el texto de mi página” y en menú formato:
encabezado 1
Cursor en párrafos. Etiqueta p: mainparagraf
(a todos los
párrafos)a

7

Tabla central, columna drch:
● teclea: “selecciona una opción” Formato: encabezado 2 (escribe
fuera de la tabla)
● Las opciones. p:sideparagraf
● td: sidebarbg (formato a la celda)

8

Tabla inferior
● Seleccionar texto y aplicar spam. Spam: copyright
● td: bottonbar

9

Generamos dos copias de la página, cambiamos títulos y navegamos
entre ellas.

Ejercicio 1. Planteamiento de ejercicio libre. Tablas + CSS
Urratsa

Prozesua

1

●

Genera una página con una estructura generada por tablas.

2

●

Relena de un contenido.

3

●Crea desde cero una hoja de estilo con las clases necesarias y la
vinculas a tu página.

Observaciones

Trabajo previo:
Instalar el comportamiento: DW4w3ccolorchanger.

●

Ejercicio 2. Página maquetada con capas. Menu flotante.
Urratsa

Prozesua

1

Observaciones
Preparamos el fondo.

●
●
●

Generar nuevo HTML: index.
Vincular la hoja de estilo: ejercicio 2
Edita la hoja. Body: fondo imagen:ch2bg.gif, repetir eje x.

●
●
●

Insertar capa logo: insertar/objeto de diseño/ DIV PA
I: 0, D: 0, A: 243, A: 59
Insertar el logo: logo.gif

●
●
●

Insertar la capa: women
I: 30, D: 60, A: 144, A: 32
Insertar la imagen women

●
●
●
●

Insertar la capa: women_menu
I: 30, D: 92, A: 140, A: 32
Insertar tabla: 1, 1, 140, 0, 0, 0
Propiedades: fondo blanco.

●
●
●
●
●
●

Td = comportamiento Objectcolorchanger
Nuevo color: #D6D3CE + OK
Evento en MouseOver
Td = comportamiento Object colorchanger (otra vez, sí)
Nuevo color: #FFFFF(blanco) + OK
Evento en MouseOut

●

Con la tecla TAB hacemos 7 filas más, en total tiene que haber 8 filas.

2

3

4

5

6

Esto hace que cuando pasemos el cursor la celda
cambie de color.

●
●

Fila 4, color de fondo en propiedades: #CC9999
Cambiamos el comportamiento deesta fila (object colrchanger)

●
●
●
●

Insertar la capa: women_submenu
I: 169, D: 132, A: 140, A: 32
Insertar tabla: 1, 1, 140, 0, 0, 0
color de fondo en propiedades: #CC9999

●
●
●
●
●
●

Td = comportamiento Object colorchanger
onMouseOver = #D6D3CE
onMouseOut = #CC9999
Añadimos 7 filas más
Hay que cambiar el color de la fila 4
Insertamos las imágenes.

●

Del menú women, seleccionamos la imagen yen propiedades definimos una zona
activadora con la herramienta rectangular.

●
●
●

Insertar la capa: cierra_menus
Posición (z) = 2
meter imagen transparente (shim) = 400 alto, 100% ancho.

●
●

Seleccionar la imagen transparente.
Comportamiento/mostrar-ocultar elementos: ocultar todos las capas

7

8

9

10

11
●

Aplicar los comportamientos para activar y desactivar las capas.

●

Las...