Comportamientos en Dreamweaver

Crear lbum de fotos I. II. Crear carpeta raz Album Crear sitio web album1

III.

Crear un nuevo documento HTML e insertar tabla: Fila: 1 Columnas: 2 Ancho de tabla: 955 Grosor del borde: 0

Profesor: Samuel Molina Javier

Pgina 1

Comportamientos en Dreamweaver
IV. Cambiar propiedades de tabla Alineacin de tabla: centro Cambiar alineacin de la 1ra celda: horizontal centro y vertical superior Cambiar alineacin de la 1ra celda: horizontal centro y vertical medio

V.

Insertar las imgenes en la 1ra celda Tamao de cada imagen: 250 x 150 Asignar nombre a cada imagen ejemplo. Img1

Profesor: Samuel Molina Javier

Pgina 2

Comportamientos en Dreamweaver
VI. Ahora insertar imagen otra imagen en 2da celda: Tamao de imagen: 670 x 490 Nombre de imagen: contenedor

VII.

Ahora activamos el panel de comportamientos

Profesor: Samuel Molina Javier

Pgina 3

Comportamientos en Dreamweaver
VIII. Seleccionar img1

IX.

Seleccionamos tipo de comportamiento Clic en signo + del panel comportamientos Clic en Intercambiar imagen

Profesor: Samuel Molina Javier

Pgina 4

Comportamientos en Dreamweaver
X. En ventana intercambiar imagen Seleccionar Imagen contenedor del cuadro imgenes Y luego hacer clic Examinar Seleccionar img1 e insertar

XI.

Desactivar la opcin Restaurar imgenes OnMouseOut y clic en aceptar.

Ahora seleccione img2 y ejecute los mismos procedimientos que realizaste con img1 Una vez terminada guar la pgina con nombre mi_album1

Profesor: Samuel Molina Javier

Pgina 5

Comportamientos en Dreamweaver

XII.

Para ver el resultado presiona F12 y veraz que al pasar el cursos por encima de cada imagen cambiar de tamao en imagen contenedor.

XIII.

Agregando ms efectos de comportamiento a nuestro lbum. Seleccione la img1 Y veraz en el panel comportamientos onMouseOver Cambiamos a evento onClick Tambin cambiamos color de relleno de tabla anegro

Profesor: Samuel Molina Javier

Pgina 6

Comportamientos en Dreamweaver

Al presionar F12 veras que ahora al pasar el curso sobre img1 no cambia sino recin al hacer click XIV. Realiza el mismo cambio para cada imagen

Profesor: Samuel Molina Javier

Pgina 7

Comportamientos en Dreamweaver
XV. Agregar efecto desvanecer y aparecer Seleccione img1 Click en signo + del panel comportamientos Click en efectos Click en aparecer/Desvanecer

En ventana aparecer/Desvanecer Seleccione img contenedor del elemento de destino En efecto: aparecer

Profesor: Samuel Molina Javier

Pgina 8

Comportamientos en Dreamweaver
XVI. Ahora seleccione realiza el mismo procedimiento para cada imagen y veras el resultado final es muy interesante.

Profesor: Samuel Molina Javier

Pgina 9