5a sessió: Taules. Mapes sensibles.

Taules.

Tothom hem fet servir taules per a organitzar dades des del nostre tractament de textos favorit. El llenguatge HTML permet la utilització de taules, i el Redactor ens facilita molt el seu disseny.

Amb el Redactor podem ajustar les mides, tant en % de la finestra com en píxels, podem fer que una cel·la ocupi més d'una fila o més d'una columna, podem ajustar l'alineació, podem seleccionar colors i imatges de fons, ...

El que no és tan comú és utilitzar taules per a organitzar l'espai. I realment és un dels recursos més freqüents utilitzat pels bons dissenyadors. Aquest recurs queda amagat el 99% de les vegades, ja que s'acostuma a triar com a amplada de contorn el valor 0, de manera que no es visualitzant les línies que indiquen les divisions de la taula.

Per tant, tenim l'espai dividit en zones, però les línies divisòries son amagades i obtenim documents de gran qualitat. Per a aquesta utilització és important desactivar l'opció  a la finestra de propietats de la taula.

Pensem que podem triar una imatge o color com a fons de la taula, fins i tot triar imatges i colors de fons independents per a cada cel·la. Això ens permet crear botoneres d'enllaços molt atractives. El següent exemple, fet només amb enllaços tipus text i canviant les mides i el color de fons de les cel·les ens permet accedir a captures de pantalla de les principals eines que té el Redactor per a la creació i edició de taules:
 
 

Característiques de la taula
Eliminar element
Edició cel·la
Edició cel·la

 

Mapes sensibles.

Moltes vegades hem vist imatges que ens oferien diferents enllaços segons on clicavem. Malhauradament, el Redactor no ens ofereix cap eina per a aquests mapes sensibles, i els haurem de dissenyar a mà. El procés és el següent:
  1. Preparem la imatge. Hem de fixar les seves mides als valors de visualització, ja que treballarem amb els píxels com a referència.
  2. Fem una llista amb els enllaços i el text alternatiu que volem incloure. Deixem un espai a cada enllaç per als  valors que fixaran el tros d'imatge associat.
  3. Des del Paint Shop Pro, per exemple, apuntem els valors per a cada enllaç. Si fem servir rectangles per delimitar els fragments d'imatge (opció que utilitzarem per ser la més aceptada pels navegadors), els valors son 4, en aquest ordre: coordenades x, y de la cantonada esquerra superior; coordenades x,y de la cantonada dreta inferior. Aquestes coordenades les veurem a l'extrem inferior esquerra del Paint Shop Pro quan posem el ratolí a sobre de cada cantonada, tenint seleccionat, per exemple, l'eina de selecció. Important: les zones no han de tenir cap punt en comú.
  4. Anem al nostre document i inserim la imatge (això ho podem fer des del Redactor, però no hem de canviar les mides).
  5. Editem a mà el document (Notepad). Abans de la imatge coificarem les zones amb els enllaços:

    6. <MAP NAME="nom">
    <AREA SHAPE  = "rect" COORDS = "x1,y1,x2,y2" HREF= "destino1.html" ALT="texto">
    ...
    <AREA SHAPE  = "rect" COORDS = "x1,y1,x2,y2" HREF= "destinoN.html" ALT="texto">
    </MAP>
    i, hem d'editar el codi d'inserció de la imatge per fer referència a aquest mapa i evitar el contorn blau:
    <IMG SRC = "grafico.gif" BORDER="0" USEMAP = "#nom">
Veiem un exemple. A la fotografia d'una alumna treballant, volem fer un enllaç amb el seu cap i un altra amb la seva mà:
  1. Preparem la imatge. Les mides ja son correctes (320x200).
  2. Llista d'enllaços:

    3. Mà: ma.html mà
    Cap: cap.html cap
  3. Coordenades:

    4. Mà: ma.html mà 206,163 245,210
    Cap: cap.html cap 114,4 189,106
  4. Inserim la imatge:

    5. macap
  5. Els codis a introduïr són:

    6. <MAP NAME="cos">
    <AREA SHAPE  = "rect" COORDS = "206,163,245,210" HREF= "ma.html" ALT="ma">
    <AREA SHAPE  = "rect" COORDS = "114,4,189,106" HREF= "cap.html" ALT="cap">
    </MAP>
    i, hem d'editar el codi d'inserció de la imatge per fer referència a aquest mapa:
    <IMG SRC = "mapa1.jpg" BORDER="0" USEMAP = "#cos">
En aquest cas, com veieu, no surten els textes ALT (almenys amb Navegador 4.7). En canvi, si la imatge es visualitzés al carregar la pàgina (aquesta està massa abaix al document), si que es veuríen (només Netscape 4.x i Explorer 5.x, no funciona al Explorer 4.x). Són aqueles coses que, fins que t'adones, et pot menjar la paciència. Podeu jugar una mica amb això editant un arxiu que només conté el mapa i la imatge.
 
 
 
© Jordi Orts, marg 2000