Para
que nuestra imagen de fondo no se mueva cuando subimos o bajamos con la barra
de desplazamiento, en el código, dentro de la etiqueta de body, bgproperties="fixed"Vamos a hacer esta animación en dreamweaver MX: pulsa para verla
En primer lugar, hemos insertado una imagen de fondo, en el menú Modificar--> Propiedades de página -->Imagen de fondo. Examinaremos y buscaremos la imagen. Podemos usar la que he puesto yo, o bien usar una propia. En cualquier caso, no hay que olvidar que la imagen debe pesar poco. Descarga las imágenes en formato zip.(botón derecho-->guardar destino como)
Para
que nuestra imagen de fondo no se mueva cuando subimos o bajamos con la barra
de desplazamiento, en el código, dentro de la etiqueta de body, bgproperties="fixed"
Una vez que insertemos la imagen de fondo, crearemos una capa, a la que llamaremos "mardetras" . No olvidemos que no hay que poner guiones, espacios, acentos, etc en el nombre de la capa.
Es importante ponerle un nombre a la capa, para poderla localizar rápidamente en la ventana de capas (ventana-->otros-->capas)
Dentro de esa capa insertaremos una imagen. Pinchamos dentro de la capa, e insertar imagen. Buscamos la imagen "mar".
Arrastramos la imagen a la línea de tiempo. En un principio se crea una línea de tiempo color morado, de 15 fotogramas. Arrastramos el último fotograma clave más o menos hasta el fotograma 50. Nos colocamos en el primer fotograma clave, el 1 y ajustamos la posición de la capa hasta el lugar deseado. Lo mismo en el 50.
Para
que mover la capa en línea recta, usaremos el inspector de propiedades
, y en posición iz y sup podremos poner la situación exacta y
no temblará como si lo hacemos a mano, arrastrando la capa.
Haremos lo mismo con otra nueva capa, a la que llamaremos "mardelante". Y comenzaremos el movimiento al contrario que el movimiento anterior, si antes fue de izquierda a derecha, ahora será de derecha a izquierda.
En la imagen podemos ver las dos capas, y en principio, una sola línea de tiempo.
Probamos nuestra animación para ajustar bien el movimiento, tal y como deseemos. Pulsa f12 o bien en esa bola del mundo tan bonita (barra superior), desplegar el menú y elegir Vista previa en I.explorer.
Ahora vamos a animar al pez. En esta animación hemos añadido una novedad. En cierto momento, ocultamos la capa.
Insertamos una capa, a la que llamaremos "pez", y dentro insertaremos la imagen de nuestro revoltoso pez. La animación consiste en saltar de ola en ola. Pero, aquí nuestro pez está sobre las olas, y nosotros queremos que esté entre una y otra ola. Para ello buscaremos el inspector de capas, y arrastraremos la capa mardelante encima de la capa pez, de modo que nuestro ídice z sea 3 para la capa mardelante, 2 para la capa pez y 1 para la capa mardetras.
Ahora tenemos tres capas y tres líneas de tiempo. Pero no queremos que el pez se vea en todo momento. Así que insertamos varios fotogramas claves intermedios( picando en la línea de tiempo y botón derecho, saldrá el menú contextual y elegir "Agregar cuadro clave", o bien pulsando ctrl + clic en uno de los fotogramas).
Lo que hemos hecho es cambiar la visibilidad de la capa en los últimos fotogramas claves de la línea de tiempo, en este caso, "hidden" . Con ello conseguiremos que no se estropee la animación porque el pez aparezca por debajo.
Y ahora vamos a insertar las gaviotas. Es exactamente igual, insertar una capa, dentro la imagen gaviotas, y despues lo que hacemos es moverla onduladamente. Creamos fotogramas intermedios y movemos la capa arriba y en otro abajo.
Más o menos así queda la página, desde dreamweaver:
Y con esto y un bizcocho..
Por cierto, como veis esta página tiene muchos tipos de letra, que están realizados con los estupendos estilos css (hay un estilo para el texto normal, otro para los enlaces, otro para sobre los enlaces, otro para trucos y otro para las instrucciones de programa). Más adelante habrá un tutorial sobre estilos css.