Enrera
Mòdul 4
Disseny i creació de pàgines web
  Pràctica
1
2
3
4
5
6
   
Exercicis
Exercicis
 
 

Les taules

Les taules són un conjunt de files i columnes que donen, com a resultat, una graella de caselles on pot haver text, 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 fer columnes i estructurar el text i les imatges amb més precisió.

Els tres elements bàsics són: Files (espai horitzontal), Columnes (espai vertical) i Cel·les (contenidors que s'originen a les interseccions de les files i les columnes).

Exemple de taula 

   
Desenvolupament de la pràctica
   
Pràctica

L'objectiu final d'aquesta pràctica serà la creació d'una taula on inserireu l'horari de classes setmanals d'un grup d'alumnes amb una aparença similar a la del fitxer horari.htm.

Obriu un pàgina HTM nova amb el Dreamweaver MX 2004.

Definició de les propietats d'una pàgina

Per accedir al menú contextual que us permetrà definir les propietets de la pàgina (fons, color dels enllaços, etc.), podeu fer-ho de tres maneres diferents:

  1. Menú Modificar | Propiedades de la pàgina.
  2. Prement Control + J.
  3. Prement el botó dret del ratolí i escollint directament l'opció Propiedades de la pàgina.

Un cop hagueu obert aquest menú contextual, apliqueu el color de fons de la pàgina #FFDFAA, tal com veieu a la imatge de sota.

Prpietats de la pÓgina

Inserir una taula

Desplegueu el meú Insertar: trobareu una sèrie d'elements que podreu inserir a la vostra pàgina web. El primer element que estudiareu serà les taules.

Inserir Taula

Si ho preferiu, també podeu inserir una taula prement Control + Alt + T.

El menú contextual que apareix us demana el nombre de files, columnes, l'amplada en píxels, l'alçada interior de la cel·la i l'espaiat de les cel·les.

Propietats de la taula

Seguidament, us mostra quatre models de taules que poden contenir uns encapçalaments (text en negreta) a la columna esquerra, a la fila superior, totes dues, o, a la primera opció, una graella sense capçaleres.

També us permet inserir un títol a la taula i ajustar la posició.

Inicialment, se us proposa crear una taula amb l'horari de classes d'un determinat curs de primària o secundària que podeu adaptar al vostre centre.

Inseriu una taula amb aquests paràmetres:

9 files, 6 columnes, 560 píxels d'amplada, 3 píxels de contorn, 8 punts d'amplada, espai entre cel·les: 0

Poseu-hi encapçalament a la primera columna i a la primera fila.

Propietats de la taula

Si voleu que la primera columna de l'esquerra us resulti una mica més estreta però que conservi l'amplada de les altres, premeu la tecla de majúscules mentre desplaceu la línia vertical.

Modificar amplada de columnes amb ratolÝ

Des de la finestra de Propiedades, podeu modificar les propietats de la taula al vostre gust.

ParÓmetres de la taula

  • Id de tabla per introduir un nom per a la taula.
  • Filas i Cols per modificar el nombre de cada una.
  • An i Al per especificar l'amplada i l'alçada amb píxels o com a percentatge de la finestra del navegador. Escriviu 560 al camp An i activeu l'opció pix. 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.
  • 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 d'amplada de columna de la taula.

Esborrar els valors d'amplada i alšada.

 

Ajudes visuals

Des del menú Ver, seleccioneu Ayudas visuales i feu clic sobre Anchos de tabla. Amb aquesta oció activada, us serà molt fàcil fer modificacions a les cel·les.

Veure l'amplada

 

 

També podeu posar color a les línies de les cel·les, fer que la taula tingui una imatge de fons o color diferent al de la pàgina, com veureu més endavant.

Estils de text

És molt important que el text guardi coherència amb tota la pàgina i mantingui unes propietats definides prèviament. Per exemple, el nom de les assignatures tindria aquestes propietats:

  • Font de lletra Arial, Helvetica, sans serif (lletra de pal sec)
  • 12 píxels d'amplada
  • Text centrat
  • Alineat al mig de la cel·la
 
Propietats del text
 

Com ja sabeu, en escriure en un processador de textos, podeu modificar a voluntat el tipus de font, la mida, l'alineació, el format (negreta, cursiva, subratllat); i, per fer-ho, heu de seleccionar el text i aplicar aquestes propietats d'una a una. Però aquesta feina seria molt feixuga repetir-la a cada cel·la i, per tant, agrupareu totes les propietats, que heu enumerat abans, en un estil que anomenareu classes. D'aquesta manera, només caldrà seleccionar el text, desplegar el menú Estilo, seleccionar Classes, i veureu com s'apliquen automàticament totes aquestes propietats al text.

Naturalment, abans haureu de definir aquest estil dins aquest menú per poder-lo utilitzar.

Vegeu-ho tot seguit:

Desplegueu el menú Estilo i escolliu l'opció Administrar estilos: us apareixerà el menú contextual següent des d'on en creareu un de nou anomenat .classes. Definir estils de text

llista d'estilsAdministraciˇ d'estils

De moment, feu que aquest estil només s'apliqui a aquesta pàgina, però com podeu veure a la penúltima opció, els estils es poden desar en un full que vinculi les propietats del text a múltiples documents HTML. Igualment, qualsevol modificació del full d'estil afectarà tots els documents del lloc web que tinguin aquest full d'estil, i controlaran les característiques de text, format i alineació.

Per a aquesta primera pràctica, especifiqueu les categories:

  • Tipus: Arial, Helvetica, sans serif; i mida: 10 píxels.

  • Bloc: alineació vertical i de text centrat.

Propietats de l'estil-Bloc

Apliqueu i accepteu els menús contextuals.

Un cop heu escrit totes les matèries a cada cel·la, premeu Control mentre amb el ratolí les aneu seleccionant totes. Finalment, apliqueu a tot el text seleccionat l'estil .assignatura i observeu que tot el text queda amb les mateixes propietats.

Podeu fer el mateix per a la primera fila i la primera columna. En aquest cas, no caldrà especificar que el text estigui en negreta si teniu activada la casella Enc.
Capšalera de celĚla

Les cel·les corresponents al pati i a l'hora de dinar es poden combinar, un cop seleccionades amb l'eina Combinar celĚles de la finestra Propiedades. D'aquesta manera, se us esborraran les separacions entre les cel·les d'una mateixa fila.

Afegir estils nous

De la mateixa manera, podeu crear estils nous per als rètols de les hores (primera columna de l'esquerra). Creeu un estil nou anomenat .hores amb els mateixos atributs que l'estil .classes, però en negreta.

Creeu, també, un estil anomenat .descans que aplicareu a "PATI" i a "A DINAR" amb les propietats següents:

Tipus de lletra:

  • Font: Arial, Helvetica, sans serif
  • Mida: 18 píxels
  • Gruix: negreta
  • Color: blanc

Bloc:

  • Espai entre paraules: 8 píxels
  • Espai entre lletres: 5 punts
  • Alineació vertical: centrat
  • Alineació del text: centrat

Fons d'una cel·la

Cadascuna de les cel·les pot tenir un color de fons diferent o bé una imatge. Situeu-vos dins la cel·la del "PATI", obriu la finestra Propiedades i inseriu la imatge de fons pati.gif, que trobareu a la carpeta fitxers\d72m4\imatges\pati.gif.

Inseriu, també, la imatge safata.gif, que trobareu a la mateixa carpeta fitxers\d72m4\imatges\safata.gif, a la cel·la corresponent a "A DINAR".

Per acabar, podeu fer que el fons de les cel·les corresponents a "Matemàtiques" aparegui de color #FF9FFF.

Comproveu el resultat obtingut amb el fitxer: horari.htm

Atenció !
  • Les cel·les de les taules poden contenir tot tipus d'informació.
  • Podeu ajustar els paràmetres des de la barra de propietats.
  • Les ajudes visuals us amplien la informació de cada cel·la i us faciliten les modificacions.
  • La taula pot tenir un color o una imatge de fons diferent al de la pàgina, així com cadascuna de les cel·les.
  • Els estils CSS ajuden a mantenir la uniformitat de les característiques del text.

Consideracions addicionals al codi font de la pàgina respecte dels estils CSS

En aquesta pràctica, heu vist com es defineixen els estils de text CSS, que s'apliquen a una pàgina concreta. Visualitzeu el codi font de la pàgina horari.htm prement , on trobareu les propietats definides al principi del document. Observeu que a l'inici hi ha el següent.

En pràctiques següents, veureu com aplicar els mateixos estils a pàgines diferents sense necessitat de definir-los de nou a cada una de les pàgines. En aquest cas, quedaran definits en un fitxer extern, que s'anomena Full d'estils CSS.

   
   
 
Amunt