IES de Gironella
Àrea de Matemàtiques
CV FEM UN PROJECTE WEB
 
TAULES (II)

Informació

Les taules serveixen per a fer quadrícules o graelles amb números i text. Però també es poden utilitzar per encolumnar i estructurar el text i les imatges amb més precisió. Sovint, els paràmetres d'alineació de les imatges no permeten situar-les amb precisió en el lloc desitjat, o el text es mostra en unes línies exageradament llargues, que ocupen tota l'amplada de la pantalla i en dificulten la llegibilitat.


Pràctiques
La finalitat de la pràctica següent és la creació d'una pàgina on es relacionin tres Webs de la comarca de la Garrotxa, amb la seva descripció i una imatge de cada enllaç. La utilització d'una taula facilitarà l'encolumnat, l'alineació i la presentació de les imatges i el text a la pàgina.
 
Imatge de la pàgina Webs d'interès de la Garrtoxa un cop finalitzada
 
Amb el Dreamweaver, obriu una pàgina en blanc. Definiu l'aspecte general de la pàgina amb l'opció Modificar | Propiedades de la página. Com que aquesta pàgina s'enllaçarà amb les pàgines de la Garrotxa fetes en el mòdul anterior convé que seguiu les mateixes directrius de disseny, quant al color del fons, el tipus, el color i la mida de la lletra. El títol de la finestra ha de ser Webs d'interès.
 
Abans de continuar treballant convé que deseu la pàgina a la carpeta de treball L:\eso_4t\usuari\web_personal\cweb\garrotxa\ amb el nom de webs.htm.
 
A continuació, situeu el punter del ratolí i seleccioneu l'opció Insertar tabla de la finestra d'objectes. Ompliu el quadre Propietats de la nova taula amb els valors següents:
 
Propietats de la nova taula
 
Teclegeu Webs d'interès a la primera cel·la de la taula. En el fitxer webs.txt trobareu les adreces i els comentaris necessaris per omplir les cel·les de la taula. Seleccioneu tota la taula i canvieu el tipus de lletra a Arial, Tam 2.
 
Ajusteu la mida de les columnes. Seleccioneu la primera columna i poseu 125 píxels d'amplada.

 

Amb el Paint Sho Pro retalleu les imatges net.gif, parc.gif i cit.gif de manera que només quedi la icona. Unifiqueu la mida de les tres imatges a 100 x 100 píxels. Deseu-les a la carpeta de treball L:\eso_4t\usuari\web_personal\cweb\garrotxa\. Inseriu-les a les caselles de la primera columna. Deseu i visualitzeu la pàgina.
 
Imatge de la taula després d'escriure el títol, el text explicatiu i inserir les imatges
 

Per defecte, les imatges queden centrades verticalment i alineades a l'esquerra de cada cel·la. Alineeu-les a la dreta i a la part superior de la cel·la. Seleccioneu les cel·les de la primera columna i, a la finestra de propietats, marqueu Derecha com a alineació horizontal i Superior com a alineació vertical.

 
A continuació es tracta de fer els enllaços a cada web. Seleccioneu i retalleu l'adreça http://www.citolot.com amb l'opció Edición | Cortar de la barra de menú ( o Ctrl X). Seleccioneu el títol Centre d'Iniciatives Turístiques d'Olot i a l'apartat Vínculo enganxeu l'adreça que prèviament heu retallat (amb Edición | Pegar o Ctrl V). També heu de definir l'enllaç des de la icona corresponent, seleccioneu-la i poseu l'adreça a Vínculo (recordeu-vos d'eliminar el contorn). Feu el mateix amb les altres dues adreces.
 
Milloreu la presentació de la taula, canviant els paràmetres de les propietats de la taula (cal que abans la seleccioneu):
 
•
Comproveu que el contorn de la taula està eliminat (Borde 0). En el Dreamweaver, es continua visualitzant una línia puntejada però és invisible al navegador.
 
•
Amplieu l'espai de separació entre el contorn i el contingut de les cel·les posant 6 píxels en el camp Esp. celda.
 
•

Per ajuntar les dues cel·les de la primera fila i aconseguir que el títol de la taula ocupi tota l'amplada heu de seleccionar les dues cel·les i prémer el botó de combinar celdas.

 

•
Canvieu el color de fons de la primera fila. Seleccioneu-la i trieu el color a Fnd. Modifiqueu els atributs de la cel·la: Arial, Tam 5 i color blanc.
 

Finalment, per guanyar espai entre el títol i el text inseriu una fila en blanc. Situeu el cursor a la segona fila i amb el botó dret del ratolí seleccioneu Tabla | Insertar fila. Deseu la pàgina webs.htm i comproveu com es visualitza amb el Navegador.
 
Només falta enllaçar la pàgina garrotxa.htm amb la que acabeu de fer. Amb el Dreamweaver, obriu el fitxer garrotxa.htm. Teclegeu el text Webs d'interès, seleccioneu-lo i definiu l'enllaç (Vínculo)a la pàgina webs.htm. Deseu la pàgina i comproveu l'enllaç a la pàgina webs.htm.

 

Atenció
Cliqueu la icona Botó maximitzar|minimitzar|restaurar de la barra de títol de la finestra per canviar la mida de la finestra del Navegador -més petita, més gran...-. Comproveu que les imatges i el text de la pàgina webs.htm sempre es veuen igual i no es desorganitzen. Feu les mateixes proves amb la pàgina garrotxa.htm. Noteu la diferència?