Elaboració d'una taula

Taules

Les taules representen una eina de treball molt potent que facilita el control sobre l'estructura vertical i horitzontal de les pàgines HTML i permeten disposar dades, text, imatges i efectes a la pàgina web, garantint-ne una visualització correcta. Les taules tenen tres elements bàsics: Files (espai horitzontal), Columnes (espai vertical i  Cel·les (contenidors que s'originen en les interseccions de les files i les columnes).

És molt recomanable utilitzar la vista de Disposición per al disseny de pàgines. Aquesta vista facilita la utilització de taules com a estructura subjacent quan s'elabora el disseny de la pàgina.

Crear una taula

La finalitat d'aquesta pràctica és la creació d'una taula a partir de les dades estadístiques d'ús del correu electrònic a la XTEC.

Obriu el Dreamweaver. Apareixerà una pàgina en blanc. Definiu-ne l'aspecte general amb l'opció de la barra de menú Modificar I Propiedades de la página. Definiu l'aspecte (color de fons, text, marges...), els vincles i altres directrius que desitgeu. Poseu el títol de la pàgina Ús del correu electrònic. Per exemple:

Una vegada heu canviat les propietats de la pàgina, teclegeu a la part superior de la pàgina el títol de la taula (lletra Arial, mida petita, color negre i negreta): Estadística de correu electrònic (professorat i centres docents), i a continuació inseriu una taula.

També podeu activar el menú Insertar I Tabla:

Una vegada feta una de les dues accions anteriors, apareixerà el quadre de diàleg Insertar tabla. Aquest quadre de diàleg sempre manté els valors de la configuració més recent introduïda per a una taula. Ompliu el quadre amb els valors següents:

Si especifiqueu l'amplada de la taula amb píxels i no amb percentatge, eviteu que  aquesta canviï de mida i es redimensioni al navegador produint efectes no desitjats.

L'aspecte de la taula serà aquest:

Teclegeu els valors següents a la taula que acabeu de crear:

Veureu que el Dreamweaver redimensiona automàticament les cel·les adaptant-les al text que s'escriu (generalment s'amplien en horitzontal per donar cabuda a la paraula més llarga i, a continuació, s'amplien en vertical) i el col·loca per defecte arrenglerat a l'esquerra.

Modificar l'aspecte d'una taula

Aquest apartat de la pràctica us ajudarà a conèixer com canviar l'aparença i els components de la taula mitjançant la configuració de les seves propietats.

El Dreamweaver, una vegada creada la taula, permet modificar-ne l'aparença i l'estructura, i afegir-hi contingut; eliminar, dividir, combinar, afegir files i columnes; modificar les propietats de taula, columna, fila i cel·la (alineació, color...) i dels elements que es trobin al seu interior (text...), etc.

Per seleccionar tota la taula i aplicar els canvis que desitgeu, podeu optar per fer clic al cantó superior dret de la taula o a qualsevol punt del contorn dret o inferior, o bé fer clic a la taula i escollir de la barra de menú Modificar I Tabla I Seleccionar tabla.

Per fer aquest canvi de configuració, el programa disposa de l'eina Inspector de propiedades.

Si no teniu activada aquesta finestra, obriu el menú Ventana I Propiedades. Per veure totes les propietats, feu clic a la fletxa d'ampliació, situada al cantó inferior dret.

Podeu modificar i/o donar valors a cadascun d'aquests camps:

• Taula per introduir un nom per a la taula.
• Filas i Cols per modificar el nombre de cadascuna.
• An i Al per especificar l'amplada i l'alçada amb píxels o com a percentatge de la finestra del navegador. Escriviu 100 al camp An i activeu l'opció %. Observeu com la taula s'ha ajustat a l'amplada de la finestra del programa. Si canvieu l'amplada d'aquesta finestra, la taula s'adaptarà mantenint el percentatge que heu indicat. Torneu a escriure els valors de la taula en 450 píxels.
• Alinear, per especificar com cal arrenglerar la taula amb altres elements del mateix paràgraf (text, imatges...).
• Els botons Borrar alto de fila i Borrar ancho de columna per esborrar tots els valors d'alçada de fila i amplada de columna de la taula.

• Els botons Convertir ancho de tabla a píxeles per convertir l'amplada de la taula expressada en percentatge a píxels i Convertir ancho de tabla a porcentaje per convertir l'amplada de la taula expressada en píxels a un percentatge de la finestra del navegador.

• Rell. celda per especificar el nombre de píxels que hi ha entre el contingut i el límit de la cel·la (encoixinament).

• Esp. celda per especificar el nombre de píxels que hi ha entre les cel·les de la taula. Modifiqueu el valor 1 i substituïu-lo per 0.

• Borde per especificar l'amplada del contorn de la taula en píxels. Recordeu que la majoria de navegadors mostren el contorn com una línia tridimensional quan el seu valor és superior a 0. Modifiqueu el valor 0 i susbtituïu-lo per 1. 

• Col. borde per seleccionar el color de contorn per a tota la taula. Feu clic sobre el camp i seleccioneu el valor de color #000099 (també podeu escriure directament aquest codi hexadecimal). Observeu el canvi.

• Col. fondo per seleccionar el color de fons de la taula. Feu clic sobre el camp i seleccioneu el valor de color #FFFFCC. Visualitzeu el canvi. 

Aquesta opció també permet establir una imatge com a fons de la taula. Recupereu la imatge correu.gif i deseu-la a la carpeta c:\cursd98\m3 junt amb l'arxiu estadistica.htm que ja teniu. Feu clic sobre la icona carpeta Buscar archivo que hi ha a la dreta del camp Img. S'obre el quadre de diàleg Seleccionar imagen. Seleccioneu l'arxiu correu.gif. Visualitzeu l'aspecte de la taula i deseu la pàgina estadistica.htm. 

Haureu observat que la imatge encaixa, ja que té la mateixa mida que la taula. Si voleu posar una altra imatge més petita a l'interior de la taula, es produirà la repetició automàtica de la imatge fins que l'ocupi tota. Podeu fer la prova repetint els passos per inserir una imatge explicats anteriorment. Utilitzeu en aquest cas l'arxiu sobre.gif. Una vegada visualitzeu l'efecte, torneu a inserir la imatge correu.gif i deseu la pàgina estadistica.htm.

Modificar l'aspecte de columnes, files i cel·les

Una vegada configurades les propietats de la taula, podeu modificar l'aparença de columnes, files i cel·les seleccionant cadascun d'aquests components.

Per seleccionar una cel·la, situeu-hi el punter del ratolí a l'interior i feu-hi clic. Per seleccionar més d'una cel·la, repetiu el procés i arrossegueu el cursor fins a una altra. Si voleu seleccionar una fila o una columna, el procediment és l'indicat anteriorment, arrossegant el cursor horitzontalment o vertical.

Per seleccionar un conjunt de cel·les no contigües, pressioneu la tecla Control i mantenint-la premuda feu clic a l'interior de les cel·les que voleu seleccionar.

Un cop feta la selecció, la finestra Propiedades permet aplicar format tant a l'element seleccionat com al contingut. Observeu que segons la selecció que s'ha fet, l'aspecte d'aquest quadre de diàleg manté uns elements comuns i uns altres que canvien:

Podeu modificar i/o donar valors de la selecció realitzada a cadascun d'aquests camps:

• Horiz i Vert, menús emergents per configurar l'alineació horitzontal o vertical de la selecció.

• An i Al, per especificar en píxels l'amplada i l'alçada de l'element seleccionat. Per utilitzar percentatges, introduïu el símbol % darrere del valor.

• Fnd, per especificar una imatge o un color de fons de la selecció. Recupereu l'arxiu estadistica.htm. Col·loqueu el punter del ratolí sobre la cel·la superior esquerra i arrossegueu el cursor cap a la dreta fins al final de la taula. Haureu seleccionat l'opció Fila. Cliqueu sobre el camp i seleccioneu el  valor de color #FFCC66 (també podeu escriure directament aquest codi hexadecimal). Visualitzeu el canvi. 

  Col·loqueu ara el punter del ratolí sobre la cel·la ocupada per l'any 1996. Arrossegueu el cursor cap a baix fins al final de la taula. Haureu seleccionat l'opció Cel·la (fixeu-vos que no s'activa l'opció Columna, ja que no heu seleccionat la cel·la superior dreta). Feu clic sobre el camp i seleccioneu el valor de color #FFFFCC. Visualitzeu el canvi. Deseu la pàgina estadistica.htm.

• Borde, per especificar el color que assigneu al contorn de la selecció.

• No aj., per evitar que el text s'ajusti.

• Enc., per aplicar el format d'encapçalament de la selecció.

• El botó Combinar celdas, per combinar la selecció i crear una cel·la. Aquesta acció agruparà totes les dades de les cel·les seleccionades. Feu una prova amb una cel·la de la columna de la dreta. No deseu els canvis.

• El botó Dividir celdas per dividir una cel·la en files o columnes. Feu una prova amb la primera cel·la de la columna de l'esquerra. No deseu els canvis.

També podeu modificar i/o donar valors als elements que es troben a l'interior de columnes, files o cel·les:

• Formato per definir formats de text tipus H1,H2... mitjançant una llista desplegable. També permet modificar el tipus de font, mida, color, negreta, cursiva, arrenglerament, sagnia... del text que es trobi a la selecció. 

El Dreamweaver proporciona la possibilitat d'aplicar un esquema de disseny predefinit a la taula. Seleccioneu tota la taula de l'arxiu estadistica.htm. Accediu a la barra de menú Comandos I Formatear tabla. Apareixerà un quadre de diàleg on podreu escollir tot un ventall de dissenys predefinits i modificar alhora cadascun dels camps. Una vegada tingueu feta la selecció, feu clic al botó Aceptar o Aplicar i observeu els canvis que s'han produït.