UD 1: Disseny web amb Macromedia Dreamweaver

Taules

Les taules són un conjunt de files i columnes que donen com a resultat una graella de caselles on hi pot haver lletres, números, imatges... De fet, les taules d'una pàgina HTML són semblants a les d'un processador de textos i serveixen per encolumnar i estructurar el text i les imatges amb més precisió.

Creació d'una taula

- Objectiu: creació d'una taula resum de les dades estadístiques de distribució de la població segons sexe i edat a la comarca.
- Dades: prenem-les de la web del Idescat

Modificar l'aspecte de la taula

- Taula per introduir un nom per la taula.
- Filas i Cols. , per modificar el nombre de cadascuna.
- An i Al , per especificar l'amplada i l'alçada amb percentatge o amb píxels. Escriviu 350 al camp An i activeu l'opció píxels . Observeu com la taula ha canviat de mida i ja no està ajustada a l'amplada de la finestra del programa. Si especifiqueu l'amplada de la taula en píxels eviteu que aquesta canviï de mida quan redimensioneu la finestra dels navegadors.
- 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 navegadors.

- Rell.celda , per especificar el nombre de píxels que hi ha entre el contingut de la cel·la i el límit d'aquesta (encoixinament). Augmenteu-lo al valor 2 .

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

- Borde per especificar l'amplada del contorn de la taula en píxels. recordeu que la majoria dels navegadors mostren el contorn com a una línia tridimensional quan el seu valor és superior a 0.

- Col. borde per seleccionar el color del contorn per a tota la taula. Feu clic a sobre del camp i seleccioneu el valor #003399 .

- Col. Fondo per seleccionar el color de fons de la taula. Feu clic a sobre del camp i seleccioneu el valor #003399 .

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

- Canvieu el tipus de lletra de tota la taula. Situeu el punter del ratolí a la cel·la amb el text Edats i seleccioneu totes les cel·les de la taula arrosegant el cursor fins el final de la taula. Activeu la llista desplegable del camp corresponent a la font i seleccioneu Arial, Helvética... , al camp Tam. seleccioneu 2 . Visualitzeu els canvis.
- Poseu en negreta tot el text de la primera fila. Seleccioneu el seu contingut i feu clic al botó Negreta de la finestra Propiedades . Repetiu l'operació amb la columna de l'esquerra.
- Alineeu al centre tots els elements de la taula. Situeu el punter del ratolí a la cel·la amb el text Edats i seleccioneu totes les cel·les de la taula arrossegant el cursor fins el final de la taula. Feu clic al botó Alinear al centro . Per unificar les cel·les, arrodoniu tots els valors a dos decimals.
- El següent pas serà ajustar la mida de les columnes. Situeu el punter del ratolí a la primera cel·la de la columna de la dreta. Seleccioneu tota la columna. A la finestra Propiedades escriviu 175 al camp An .
- Seguint el mateix procediment canvieu l'amplada de la segona columna a 75 píxels . Repetiu el procés per a la tercera columna. Fixeu-vos que la suma de les tres columnes (175+75+75) és igual a l'amplada total de la taula (325). Si els valors no són coherents, en el moment de la visualització els navegadors ajustaran les mides.
- Modifiqueu el color de fons de les cel·les. Situeu el cursor a la cel·la Edats i seleccioneu totes les cel·les de la taula. A la finestra Propiedades opció Fnd. situada a la part inferior (la que fa referència a l'element seleccionat, no al text) seleccioneu el color de fons #FFFFFF .
- Canvieu a #FF9900 el color de fons de les cel·les de la primera fila. Canvieu també el color del text d'aquesta fila. Seleccioneu el text i teclegeu al camp Color de texto de la finestra Propiedades el valor #FFFFFF .

- Deseu la pàgina poblacio.htm i comproveu com es visualitza
- Després de la taula afegiu una referència a la web d'on s'ha obtingut la informació: Web de l'Institut d'Estadística de Catalunya
- Per acabar es tracta d'enllaçar la pàgina garrotxa.htm amb la que acabeu de fer poblacio.htm .