Tabla periódica, Dreamweaver

En esta práctica hemos creado una tabla periódica de tipografias mediante sectores para cada cuadro de la tabla y así cada vez que pase el cursor encima de una casilla ésta cambia de color.
Cuando coloquemos las guías hacemos el contorno de las casillas utilizando la herramienta "sector", que puede convertir todas los tramos de guías en sectores "Objeto > Sector > Crear sector desde guías".

El primer paso ha sido convertir las imágenes del la foto de la tabla en sectores usando guías para controlar las medidas aproximadas. Este proceso se puede hacer desde Illustrator o Photoshop. Una vez introducidos los sectores guardamos el documento exportándolo para web (Archivo > Exportar para web o otros dispositivos). En este menú se puede guardar en varios formatos: jpg, png-8 (transparente y opaco), png (distintos grados de opacidad), gif, swf (flash animado), svg (gráfico vectorial) y wbmp (dispositivos móviles).

Nosotros hemos escogido ".jpg" ya que es el más apropiado por su poco peso.

Repetimos este proceso cambiando la imagen a escala de grises para así tener las imágenes de sustitución.

Las imágenes exportadas desde sectores se guarda en una carpeta denominada "imágenes".

Una vez exportadas las imágenes abrimos el Dreamweaver y insertamos la imagen original de la tabla de fondo así podremos calcar la tabla fácilmente. 

Creamos "Divs PA" que usaremos como sectores para las casillas de la tabla.

Una vez creados los sectores insertamos las imágenes normales una a una sobre los sectores usando la aplicación "Insertar > Objeto de imagen > Imagen de sustitución".