Elaboració d'una plantilla (I)

Plantilles

Una plantilla és un document que serveix per a la creació d'un nombre elevat de pàgines que comparteixen un mateix disseny. Les plantilles faciliten enormement el manteniment del lloc web, ja que permeten modificar-lo o bé redissenyar l'aspecte de totes les pàgines ràpidament.

Les plantilles tenen el seu origen en programes de maquetació adreçats al disseny imprès, on era imprescindible poder fer canvis a diferents elements de les pàgines màsters (navegació, tipografia, gamma de colors...), que després s'aplicaven a les pàgines resultants de la manera més àgil possible.

La incorporació d'aquesta eina permet modificar alguns dels elements d'una plantilla fent que canviïn totes i cadascuna de les pàgines creades a partir d'aquesta. Això resulta d'especial utilitat quan s'elaboren webs de centres, revistes electròniques escolars..., on el disseny general no canvia (capçalera, fons...), però sí els títols i els continguts (apartats, articles...). Són de gran utilitat quan treballem amb els alumnes, ja que el dissenyador controla l'aspecte general i la resta de components de l'equip de treball incorporen contingut, però no tenen la possibilitat de canviar el disseny.

Les pàgines creades amb plantilles no admeten les conversions de taules a capes ni les de capes a taules. 

Crear una plantilla

La finalitat d'aquesta pràctica és la creació de diferents plantilles per a l'edició d'una revista electrònica escolar.

El Dreamweaver MX 2004 permet crear una plantilla a partir d'un document HTML ja existent (fent les modificacions que es considerin necessàries) o bé crear-ne una a partir de zero. 

La plantilla creada es desa amb l'extensió .dwt a l'interior d'una carpeta anomenada Templates a la carpeta arrel local del lloc web. Si aquesta carpeta no està creada, el Dreamweaver ho farà de manera automàtica. Si traieu la plantilla d'aquesta carpeta, amb molta probabilitat es produiran errades a les rutes d'accés, per tant, es recomana no moure la carpeta ni canviar-li el nom. També cal tenir present que les plantilles creades amb el Dreamweaver MX 2004 no funcionen com a tals amb versions anteriors del programa.

Quan es crea una plantilla, el programa permet bloquejar regions de manera que el disseny apareixerà constant d'una pàgina a l'altra, o bé desbloquejar aquelles regions que seran objecte de canvis (per exemple, el text d'un article).

Si voleu incorporar informació addicional de la plantilla (autor, característiques específiques, data d'actualització...) podeu crear un arxiu de Design Notes d'aquesta plantilla. Per fer aquesta operació, feu clic a Archivo I Desing Notes...

Copieu els arxius que es troben a la carpeta del curs .../materials/m4/plantilles. Creeu una carpeta amb el mateix nom al directori del vostre ordinador on esteu fent les pràctiques del curs (C:\cursd98\m4) i col·loqueu-hi a l'interior els arxius copiats.

Obriu el Dreamweaver MX 2004. Teniu preparades tres versions del mateix arxiu amb un maquetatge diferent. L'arxiu editorial1.htm ha estat maquetat amb taules, l'arxiu editorial2.htm ha estat maquetat amb capes de posició absoluta i l'arxiu editorial3.htm ha estat maquetat amb capes de posicionament relatiu ( a les capes /div en aquest cas se'ls ha afegit l'atribut de border de 2px de color vermell per tal de facilitar la visualització de les seccions).

Crear una plantilla amb taules

Recupereu primer l'arxiu editorial1.htm des de la barra de menú Archivo I Abrir... que hi ha a la carpeta plantilles que acabeu de crear. 

Aquest document és la pàgina corresponent a l'editorial d'una revista escolar. Ja té definides les característiques i incorpora les imatges que representen la capçalera (Editorial), un subapartat (La nostra portada) i un botó de navegació simulat (Accés a altres seccions). Com que és un document HTML, en accedir-hi podríeu fer canvis tant en l'estructura com en els components.

Per convertir aquest document en una plantilla que sigui reutilitzable i adaptable als diferents números de la revista al llarg de temps, cal que seguiu un procés que comença fent clic a la barra de menús Archivo I Guardar como plantilla... Escriviu com a nom de la plantilla editorial1 i deseu-la:

Activeu-ho des de la finestra Archivos. Observareu com el programa ha creat una carpeta anomenada Templates. Hi ha l'arxiu editorial1.dwt (l'extensió és Dreamweaver Template), que correspon a la plantilla que heu creat.

Després de desar l'arxiu com una plantilla, cal indicar quines de les zones voleu que puguin ser modificades (regions editables) i quines han de restar sense accés (regions no editables). 

Per inserir una regió editable, cal col·locar el cursor a la cel·la que desitgeu.

Repetiu aquesta operació amb les cel·les restants anomenant la cel·la 2 text 2, la cel·la 3 imatge i la cel·la 4 text 3. A continuació, deseu la plantilla.

Ara cal comprovar que tot funciona com heu planificat. Accediu al menú Archivo I Nuevo de plantilla. A la finestra Nuevo desde plantilla marqueu editorial1 i feu clic a Crear.

Si voleu que el document que aneu a crear s'actualitzi quan es modifiqui la plantilla, activeu la casella Actualizar página cuando cambie la plantilla. 

Ara teniu una pàgina amb l'aspecte definit a la plantilla elaborada. Observeu com en els documents basats en plantilles, a més dels contorns de les regions editables, tota la pàgina es troba envoltada per un contorn de color, amb una fitxa a la part superior dreta on veureu el nom de la plantilla d'on prové el document.

Si desplaceu el cursor per sobre de les diferents cel·les, comprovareu com aquelles que no heu definit com a editables es troben bloquejades i no en permeten la manipulació. En canvi, les definides com a editables permeten incorporar text o imatge (o qualsevol altre recurs) segons les nostres necessitats. Escriviu text a les zones editables i inseriu-hi una imatge. Deseu l'arxiu a la carpeta C:\cursd98\m4\plantilles amb el nom provaedicio1.htm i visualitzeu-lo amb els navegadors.