 |
Mòdul 4 |
Disseny i creació de pàgines web
|
Exercicis
|
||||||||||||||||
|
||||||||||||||||
| Pràctica |
|
|
|
|
|
|
Exercicis
|
|
||||||||
|
El full d'estils CSS |
||||||||||||||||||||||||||||
Per què utilitzar un full d'estils A les pràctiques anteriors, hem vist la utilitat de definir estils de text. Quan escriviu amb el processador de text, hi ha la tendència de modificar el tipus de lletra sobre la marxa. Modifiqueu la mida, el format, l'alineació i tots els atributs que aneu necessitant. Totes aquestes modificacions tenen sentit en textos curts, però, en textos que ocupen unes quantes pàgines, la feina pot resultar més feixuga, i correu el risc que us apareguin discordances indesitjades, és a dir, paràgrafs de text amb atributs diferents. A les pràctiques anteriors, heu après a agrupar propietats d'un text en un estil, però aquests estils només queden definits a la pàgina en què esteu treballant. Això vol dir que, si heu d'aplicar els mateixos estils a diferents pàgines de la vostra web, s'haurien de definir tots de nou. La solució és crear un fitxer, que anomenareu full d'estils CSS, vinculat permanentment a totes les pàgines de la vostra web. Dins aquest full, aneu afegint els estils que necessiteu per a capçaleres, títols, subtítols, paràgrafs, llistes numerades, etc. D'aquesta manera, aconseguireu que totes les pàgines de la vostra web mantinguin una uniformitat i que el seu manteniment sigui més còmode. Es proposa de fer una web amb diferents pàgines enllaçades entre si que continguin un text llarg i un aspecte final semblant a l'arxiu webtext.htm. Per facilitar-vos la veina, s'han preparat els textos als arxius: roma1.rtf , roma2.rtf, roma3.rtf i roma4.rtf, que podreu copiar i enganxar o modificar lliurement. Però això ho fareu a la pràctica següent. Ara comenceu per crear un full d'estils on es defineixin els que necessiteu en el vostre treball. |
||||||||||||||||||||||||||||
Desenvolupament de la pràctica |
||||||||||||||||||||||||||||
 |
Des del menú Ventana, assegureu-vos que teniu visible l'opció Ocultar paneles. D'aquesta manera, podreu accedir a totes les finestres amb totes les eines. Si, pel contrari, està visible l'opció Mostrar paneles, voldrà dir que aquests estan amagats. També podeu prémer F4 per fer-los visibles.
Deseu el full d'estils nou amb el nom webtext. L'extensió CSS es posa automàticament.
|
|||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
| A partir d'aquí, començaran a aparèixer les finestres que us permetran definir els atributs del primer estil que contindrà i que heu anomenat Títol. | ||||||||||||||||||||||||||||
Apliqueu els atributs següents:
Observeu que també permet definir un color de fons d'aquest text, o bé que aparegui una imatge a sota, però en l'exemple ho deixareu en blanc. |
||||||||||||||||||||||||||||
Apliqueu i accepteu totes les finestres. |
||||||||||||||||||||||||||||
 |
|
|||||||||||||||||||||||||||
Creeu els estils següents dins webtext.css, tal com heu fet abans amb l'estil Titol. Els estils nous que heu de crear s'anomenaran Titol2, Text, nomspropis, llistes_a i ressaltat. |
||||||||||||||||||||||||||||
| Les propietats de cadascun seran aquestes:
|
||||||||||||||||||||||||||||
A l'escriptori, us apareixerà una pestanya amb el contingut del codi font de tots els estils que acabeu de definir. Per acabar, deseu els canvis aplicats al full. |
||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||
|
|
En aquesta pràctica, heu creat una col·lecció d'estils que heu guardat a l'arxiu webtext.css. En la pròxima pràctica, vinculareu aquest fitxer a diferents pàgines que hauran de tenir la mateixa uniformitat. |
|||||||||||||||||||||||||||
 |
||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
