Combinació de plantilles i CSS

 

Treballar amb diversos fulls d'estil externs alhora

A les pràctiques anteriors heu vist les possibilitats que presenten el treball amb fulls d'estil i la combinació d'aquest amb la incorporació de les capes com a objectes d'estils.

Gràcies a les propietats d'herència i cascada, podeu tenir una fulla d'estil interna i una altra d'externa, o bé diverses fulles externes controlant al mateix temps un únic document. Cal recordar que la cascada implica que els estils poden ser additius i que el codi més proper a l'element imposa les seves regles d'estil.

Imagineu-vos que teniu un lloc web molt gran, per exemple, la web de tots els departaments del vostre centre i voleu que hi hagi un estil comú de disseny per a tots els departaments.

Caldria crear un full d'estil per a tot el lloc web que defineixi els marges de pàgina, les fonts, les mides bàsiques i poca cosa més. Després, cada deparatment tindrà el seu full d'estil amb un esquema de color propi com a fons de pàgina i uns blocs de contingut adaptats a les necessitats de cada departament. A continuació, podeu veure el que podria ser un possible diagrama d'estils, tot i que no fareu cap pràctica amb múltiples fulls d'estil:
 

diagrama estils  

Podeu vincular o adjuntar tants fulls d'estil com vulgueu a un document html, però cal recordar que, de les regles de la cascada, la que hi ha al final de la llista sempre tindrà preferència.
 

Modificar un document canviant-ne el full d'estils

La finalitat d'aquesta pràctica és, d'una banda, modificar l'aspecte d'un document modificant només el seu full d'estil, i després crear una plantilla per donar format a d'altres documents.

Obriu el Dreamweaver. Recupereu l'arxiu text1.htm que hi ha a la carpeta ../\materials/m4/fullsestil des de la barra de menú Archivo I Abrir. Obriu també el full d'estil revista_capes.css que heu vinculat a l'arxiu. Deseu aquest full d'estil amb el nom revista_capes2.css.

A continuació, esborreu el full d'estil revista_capes.css de l'arxiu text1.htm i al seu lloc adjunteu el full revista_capes2.css. Aparentment no passa res, perquè encara no heu introduït cap modificació al full d'estil, però de seguida modificareu l'aspecte del document, introduint canvis en el full d'estil.

Per tal treballar amb tranquil·litat, deseu primer l'arxiu amb el nom text2.htm.

Modifiqueu els atributs del full d'estil introduint els canvis següents:

A l'etiqueta body canvieu el tipus de font i el seu color, la imatge de fons i el color de fons, i accepteu-los:

Categoria Tipo| Fuente: Verdana, Tamaño:12px. Categoria Fondo: Color de fondo ##FFCCFF, imagen de fondo: fonsestil2.gif, i Color: #000033.

Al selector ID #cap afegiu-hi la categoria Fondo | Color de fondo: #CC66FF.

Al selector ID #text1 introduïu els canvis següents: borde: 1px punteado #CC00FF. Feu el mateix amb els ID #text2 i #imatge afegint aquest atribut.

Per acabar els canvis, modififqueu ID #autors afegint-hi la categoria Fondo | Color de fondo: #CC66FF.

Guardeu el full d'estil amb els canvis que heu introduït i el document, i comproveu els canvis amb els navegadors. El resultat hauria de ser similar al de la imatge:
 
Document amb full
 

Combinació de plantilles i fulls d'estil CSS

Amb les pràctiques que heu anat fent en els mòdul anteriors, heu pogut comprovar la versatilitat del treball amb plantilles i amb fulls d'estils CSS. La combinació de plantilles que incorporen un full d'estil CSS proporcionen un major dinamisme i possibilitats de modificació d'un lloc web amb molta facilitat. Si una plantilla té vinculat un full d'estil i voleu modificar l'aparença del lloc, simplement canviant el full d'estil es modificaran tots els documents que treballin amb aquella plantilla.

La finalitat d'aquesta darrera pràctica és preparar una plantilla amb un full d'estil CSS vinculat. Per fer-ho, treballareu amb els darrers documents que hem estat treballant.

Obriu el document text2.htm i amb l'opció de menú deseu-lo de nou com a plantilla: Archivo | Guardar como plantilla. Guardeu la plantilla amb el nom revista1.dwt (recordeu que les plantilles es guarden a la carpeta Templates del vostre lloc).

Un cop creat l'arxiu de plantilla, observeu com té vinculat el full d'estil revista_capes2.css que havíeu creat i vinculat al document anterior. Aquest full està vinculat i no és editable. Ara cal crear les regions editables i esborrar el contingut que hi ha escrit per deixar la plantilla preparada per a d'altres documents.

Per crear les regions editables, recordeu que cal que situeu el cursor a la zona que voleu que sigui editable. En aquesta ocasió fareu editables totes les zones a excepció de la capa autors.

  • Situeu el cursor a la capa #cap de la vostra plantilla i activeu des de la barra de menús Insertar I Objetos de Plantilla I Nueva region editable. Escriviu de nom titol a l'interior de l'etiqueta h1, d'aquesta manera el títol ja tindrà l'etiqueta h1. Esborreu el contingut que hi ha i escriviu, per exemple, titol .
  • Dintre de la matexia capa #cap situeu el cursor a l'interior de l'etiqueta h2 i creeu una Nueva región editable que anomenareu subtítol. Esborreu també el contingut i escriviu com a contingut subtítol.
  • Situeu el cursor a la capa #text1 i creeu una regió editable amb el nom text1; esborreu el contingut i escriviu espai per escriure text presentació.
  • Feu el mateix amb la capa #text2 creant la regió text2; esborreu el contingut i escriviu-hi espai per escriure l'editorial de la revista
  • A la capa #imatge creeu dues regions editables: una per a la imatge que anomenareu imatge (esborreu el contingut i escriviu el text insertar imatge) i una altra per a la capa #peufoto, que anomenareu peu foto (esborreu el contingut i afegiu-hi text peu de foto).

Guardeu de nou el document de plantilla amb el nom revista1.dwt i comproveu-ne l'aspecte amb els navegadors.
 
Plantilla amb css

 
Per acabar la pràctica, creeu un document nou des d'Archivo | Nuevo desde plantilla, seleccioneu la plantilla revista1 i comproveu-ne el funcionament omplint de contingut les zones editables. En acabar, deseu el document amb el nom revista_editorial.
Arxiu nou des de plantilla