Com ja ho sabeu, SPIP tracta separadament el contingut de la seva configuració i el de la seva aparença gràfica: els esquelets ordenen i mostren els continguts desitjats en pàgines HTML, l’aparença gràfica de les quals és realitzada pels fulls d’estil CSS. Passeu a una rapidesa major per vestir els vostres esquelets: utilitzeu els fulls d’estil amb SPIP!
Per què els fulls d’estil ?
Si realitzeu pàgines Web de forma «tradicional», les indicacions gràfiques s’insereixen directament al codi HTML de la vostra pàgina. D’aquesta manera, cada vegada que vulgueu posar un text en vermell, heu d’escriure <font color="red">. Per mostrar una taula amb vores gruixudes, heu d’escriure <table border="2">.
Amb aquest mètode i un lloc estàtic (en el que cada article te una pàgina HTML específica), canviar la maqueta de tot el lloc és com un malson: cal buscar dins de tots els fitxers HTML els trossos d’HTML que es vol modificar, i fer les modificacions una per una (per exemple substituir <font color="red"> per <b> si es decideix que els elements antics que es mostraven en vermell siguin a partir d’ara en negreta).
Com ja sabeu, SPIP millora i molt la situació: no cal que modifiqueu centenar de fitxers HTML, sinó només alguns esquelets; i la vostra compaginació s’actualitza automàticament en el conjunt del lloc Web.
Tot i així el problema no està totalment resolt. Per exemple, suposem que heu decidit fer servir un cert color blau pastel en molts elements del lloc Web, amb la finalitat de donar una identitat gràfica al vostre lloc: els enllaços, els encartaments, certs elements de navegació... es mostren de color blau pastel. El dia que vulgueu substituir aquest color blau pastel per un verd pàl·lid, haureu de modificar tots aquells indrets de la plantilla (esquelet) on apareixia aquest color blau cel i substituir-los pel color verd pàl·lid. Pot ser descoratjador: no és fàcil en aquestes condicions canviar ràpidament la visualització realista de les pàgina, i molt menys per fer proves.
La solució la trobem en la utilització dels «fulls d’estil externs». Un full d’estil és un fitxer on definiu un conjunt de propietats gràfiques, i els indrets on aquestes s’apliquen. Trobem dues avantatges notables en els fulls d’estil:
- el full d’estil és un fitxer únic i centralitzat, que podeu aplicar a tants fitxers HTML (i esquelets SPIP) com desitgeu;
- les propietats gràfiques es defineixen una sola vegada en el full d’estil, sigui quin sigui el nombre d’indrets on aquestes propietats són aplicades en l’HTML.
Concretament
Per a ser aplicat a un fitxer HTML (que pot ser un esquelet SPIP), el full d’estil s’ha de declarar a l’encapçalament de la vostra pàgina, és a dir entre les etiquetes <head> de la següent manera:
<link rel="stylesheet" type="text/css" href="mes_styles.css" />
- Aquí el fitxer mes_styles.css conté les propietats gràfiques que voleu aplicar a la pàgina HTML (en tot el que explicarem a continuació del tutorial, suposarem que mes_styles.css és el nom que heu escollit per aquest fitxer).
- Aquest fitxer porta l’extensió «css». En efecte, CSS és el nom del llenguatge utilitzat pels fulls d’estil, de la mateixa manera que HTML és el nom del llenguatge utilitzat per a la realització de pàgines Web. Fixeu-vos bé el CSS no és un nom propi d’SPIP sinó que es trcta d’un estàndard Web [1].
Nota: un full d’estil es pot aplicar tan a una pàgina HTML clàssica («estàtica») com a un esquelet SPIP («dinàmica»). Això vol dir que qualsevol astúcia CSS vàlida en HTML clàssic també la podreu fer servir en un esquelet del vostre lloc Web.
Tot i haver llegit bé els paràgrafs anteriors, potser tindreu alguns dubtes: si, és necessari aprendre un nou llenguatge per fer servir els fulls d’estil (SPIP no hi és per res!). Els CSS no utilitzen, efectivament, la sintaxi de l’HTML. Tot i així aquest llenguatge és molt simple, i n’hi ha prou amb alguns exemples per poder començar. Existeix arreu nombrosa documentació sobre aquest tema; podeu consultar els recursos proposats en aquesta pàgina: «article 2488».