17.- Trabajar con capas.

Vamos a hacer un trabajo concreto con capas para aprender sobre su funcionamiento e intuir posibles utilidades.

El trabajo que quiero hacer es un pasatiempo denominado "cuadrado mágico". Consiste en colocar determinados números en un cuadrado con un número igual de filas y de columnas de tal manera que las filas sumen lo mismo que las columnas y las diagonales del cuadrado.

Nuestro cuadrado mágico va a ser de 3 filas x 3 columnas, nueve casillas en total a ocupar por las cifras del 1 al 9. La suma de todas las filas y de todas las columnas y diagonales debe ser 15.

Lo que primero hay que hacer es diseñar, con un programa gráfico, las 9 cifras:

A continuación iremos insertando capas e introduciendo una imagen dentro de cada una de las capas (observa que el cursor esté dentro de la capa antes de insertar la imagen).

Es conveniente cambiar el tamaño de la capa para adaptarla al contenido:

Vamos incorporando nuevas capas y, en cada una de ellas, colocamos un número. Dreamweaver llamará a la primera capa Layer1 (y estará la imagen del 1) a la segunda capa Layer2 (y estará la imagen del 2)... Es conveniente ser consciente del nombre que Dreamweaver le va dando a cada capa (Inspector de Propiedades).

Cuando hayamos acabado tendremos en la parte superior izquierda de la página los nueve iconos que representan las nueve capas que hemos introducido.

A su vez hemos ido arrastrando las capas para colocarlas, más o menos ordenadas, y dejar sitio en la parte superior. Observa cómo, en el momento capturado por la imagen superior, está seleccionada la capa 9 en la imagen y en el icono: . Puedes ir pinchando en todos los iconos de capa: para comprobar que se seleccionan todos y cada uno de los números. Ten abierto el Inspector de Propiedades y comprueba, una vez más, el nombre de la capa.

A continuación vamos a colocar los números tal y como como van a estar en la solución final. Empezamos por la casilla superior izquierda que, en esta solución, va a ser el 4. Lo llevamos más o menos al centro de la pantalla y le damos a Ventana > Comportamientos

Se abrirá la siguiente ventana:

Ahora pincharenos en el icono y se desplegará el siguiente catálogo de comportamientos:

De todos los comportamientos elegimos Arrastrar capa (si no tuvieses activo este comportamiento al pinchar en la cruz, pincha dentro de la capa para seleccionar la imagen y vuélvelo a hacer).

Aparecerá la siguiente ventana:

Ya hemos hecho varias cosas:

Le damos a Aceptar y comprobamos nuestra capa con el Inspector de propiedades antes de pasar al siguiente número:

Vamos colocando cada uno de los números procurando que estén perfectamente alineados con sus vecinos. Podemos ajustar y modificar la posición escribiendo directamente en el Inspector de Propiedades la posición Iz y Sup:

Si el primer número ha quedado a 250 puntos de la izquierda y a 100 puntos de arriba, y cada capa (e imagen) ocupa 100 x 100, el segundo número deberá quedar a 350 puntos de la izquierda y a 100 puntos de arriba, el tercer número a 450 puntos y a 100 puntos respectivamente. El siguiente número será el primero de la segunda fila, por eso deberá estar a 250 puntos de la izquierda y a 200 puntos de arriba, el siguiente a 350 - 200, el siguiente a 450 - 200. Por último la tercera fila: 250 - 300 ; 350 - 300 y 450 - 300.

Repetimos el proceso indicado para el número 4 de añadir comportamiento "arrastrar capa" para cada uno de los números según se vayan quedando colocados en su posición "de solución".
Al número que vamos a colocar en el centro (el 5) no le adjuntamos el comportamiento de "arrastrar capa". Su posición será inamovible: El visitante de la página no lo podrá mover de su posición central.

Cuando lo hayamos acabado y, para que pueda ser un pasatiempo para el visitante, tendremos que desordenar los números: Cambiar los números que nos parezca excepto el del centro que no lo tocaremos. El visitante de la página recibirá el cuadro tal como lo hayamos guardado esta última vez, pero, al ser manipulado por él, el programa recordará la posición que tenía cuando el cuadro estaba bien resuelto y cada imagen se dejará llevar automáticamente a su posición correcta cuando el número se acerque menos de 20 puntos y el jugador suelte el ratón.

Para ver el resultado del pasatiempo pincha aquí.