Quan algu et demana que facis un grapat de pàgines web, si abans de començar a construir pàgines i pàgines ens aturem una mica i planifiquem bé el que volem, ens podem estalviar molta feina.
En aquesta unitat veuràs algunes tècniques per planificar bé les teves pàgines de manera que, si et repenses i vols canviar alguna cosa, puguis fer-ho ràpidament.
A banda, també et proposaré un altre disseny per la teva botiga virtual.
Aquesta és la pàgina que has d'aconseguir al final de la unitat:
Aquesta pàgina que sembla tant senzilla té dos peculiaritats:
1) Tots els elements els has de dissenyar tu (excepte el Bart).
2) Els botons reaccionen en passar el punter per sobre i canvien de color.
3.0. ORGANITZAR ELS ARXIUS.
Abans de començar amb un nou tutorial, és necessari recordar com s'organitza la carpeta. En el darrer enviament, molts encara em vau lliurar carpetes excessivament pesades i desordenades. Clica en el següent enllaç que t'ajudarà a assimilar-ho.
- Còpia els arxius de la unitat 2 en aquesta carpeta. Recorda que has de copiar les HTML i les imatges. L'únic que no cal que copiïs és l'arxiu "index.html" perquè el refarem sencer.
- Crea un document nou.
- Comença la pàgina creant una taula com la que t'indico. En la unitat anterior ja vas construir unes quantes taules. Per tant, he de suposar que ja ho sabràs fer tu sol. Procura no preguntar al professor, abans repasa la unitat 2. Utilitza el mètode que prefereixis.
- Escriu les següents caselles, només per situar-nos en el maquetat.
Escribim el text en anglès perquè així queda més snob. Jeje...
Ara guardarem l'arxiu, però ho farem de la manera habitual, NO!
- Selecciona Archivo < Guardar como plantilla.
En el quadre que apareix, escriu "paginaBase" i prem a Guardar.
Si et fixes bé en els arxius del teu lloc web, hi veuràs una nova carpeta: "Templates" i dins d'ella l'arxiu "paginaBase.dwt", doncs això és el que acabes de crear. Has fet una plantilla. Què vol dir?
Una plantilla és un document que et serveix de BASE per construir la resta de pàgines del teu lloc web.
En el nostre disseny volem que la capçalera sigui fixa en totes les pàgines. El que canviarà serà el que hi ha a sota: el contingut de la pàgina.
Per indicar-ho, hem de configurar una "Región editable". Amb això marcarem una zona que SÍ anirà canviant de pagina en pàgina: el contingut.
- Situa el cursor a sota de la taula capçalera.
- Selecciona Insertar < Objetos de plantilla < Región editable.
- Escriu el nom de la regió: "contingut". És important escriure sempre noms que ens siguin fàcil de recordar.
- Allò que t'apareix tant petit i de color blau és on posaràs TOT el contingut de les teves pàgines.
Què és molt petit! Tranquil que el tamany no importa... A mida que hi afegeixis coses anirà creixent.
- De moment, guarda la plantilla amb un simple Archivo < Guardar. (ja li hem dit abans lo de Guardar como plantilla, així que no cal repertir-ho)
3.2. CREA UNA PÀGINA BASADA EN LA PLANTILLA.
Aquest apartat és molt senzill però l'has de fer amb cura i ASSEGURAR-TE D'ENTENDRE BÉ TOT EL PROCEDIMENT.
Abans t'he fet copiar totes les pàgines de la unitat 2 excepte l'index.html. Crearem la pàgina "index.html" a partir de la plantilla que tenim creada:
- Fes Archivo < Nuevo. En el quadre que t'apareix selecciona la pestanya "Plantillas" i marca la plantilla "paginaBase".
En la pantalla apareix la famosa plantilla. Fixa't en 2 detalls:
1) Si intentes modificar la plantilla no et deixa. Només et deixarà modificar el que hi ha dins de Contingut.
2) En la part superio dreta d'indica que estem creant una pàgina a partir de la plantilla "paginaBase".
- Modifica el "Contingut" escrivint una presentació de la teva pàgina Web. Fins i tot pots afegir la imatge modaBart.gif. Veuràs que la regió editable va creixent i creixent a mida que ho necessitis.
De moment ja ho tenim bé.
- Guarda aquesta pàgina amb Archivo < Guardar i posa el nom "index.html"
3.3. APLICA LA PLANTILLA A LA RESTA DE PÀGINES.
Ara farem que la resta de pàgines també adoptin la capçalera que tenim esbosada.
- Obre l'arxiu "samarretes.htm"
- Selecciona Modificar < Plantillas < Aplicar plantilla a pàgina. Selecciona la plantilla "paginaBase".
- En el quadre que apareix et demana que estableixis correspondències amb la plantilla. És a dir:
1) El que veus a la pantalla (tecnicament anomenat "body"), en quin lloc s'ha de posar de la plantilla? ---> En "contingut".
2) El paràmetres de control (tecnicament anomentat "head"), en quin lloc s'han de posar de la plantilla? ---> En "head".
Fes-ho i accepta.
- Guarda la pàgina Samarreta.htm
- Repeteix aquest procediment amb la resta de pàgines del teu lloc Web.
ACTIVITAT 3.1. - AMPLIA LA PLANTILLA.
- Obre la plantilla per a poder editar-la. Per fer-ho has d'anar a la carpeta "Templates" i obrir l'arxiu paginaBase.dwt
- A sota de la taula de capçalera crea una altra taula com la que et mostro en la imatge. Les mides són:
Primera columna: 100 px
Segona columna: 500 px
- Fes "Cortar" i "Pegar" amb la regió editable Contingut per posar-la dins de la taula.
- Fes Archivo < Guardar. Et demanarà si vols actualitzar les pàgines. Diguès que SÍ.
Observa que en totes les pàgines (index, samarretes, pantalons, etc.) ha aparegut la nova taula dins de la qual s'ha posat el contingut.
AIXÒ ÉS LA GRANDESA DE LES PLANTILLES. JO MODIFICO LA PLANTILLA I ELS CANVIS S'ACTUALITZEN A TOTS ELS ARXIUS ESTALVIANT-ME FEINA.
Ja pots tancar tots els documents del Dreamweaver, que ara ens centrarem una mica en el el Fireworks.
3.4. CREA LA TEVA PRÒPIA CAPÇALERA.
Un cop tenim plantejada la maqueta, anem al Fireworks i crearem un disseny per la capçalera de la nostra pàgina.
- Obre el Fireworks.
- Crea un document nou de 600x125 pixels (les mides de la taula).
- Fes un doble clic sobre l'eina mà per centrar el document en la pantalla.
- Assegura't que tens les regles a la vista. Sino, obre el menú Ver < Reglas:
- Clica sobre una regla i arrastra el punter. Veuràs que apareix una línia, s'anomena Guia. Són unes línies que, en realitat, no existeixen però ens seran útils per pautar el disseny que volem fer.
- Ves creant Guies fins reproduir la taula en el document de Fireworks:
- Dibuixa un rectangle i modifica'l com et mostro en la següent animació:
- A continuació deformarem lleugerament el rectangle. Prem l'eina Subseleció (la flexeta blanca) i deforma el rectangle tal i com et mostro:
Quan ho intentis, t'apareixerà un missatge d'advertència. Accepta'l sense por.
- Crea un títol amb el text "El Cul Enlaire.com".
- Anteriorment, has vist com crear un efecte de relleu. Pel mateix lloc pots crear un efecte d'ombra. Investiga una mica i prova-ho, és fàcil:
Fes que l'ombra sigui BLAVA i l'opacitat del 100%, així serà més contrastada.
I ja que hi estem posats, afegeix també una ombra de fons del cartell (però vigila que no se surti de la imatge):
- I per acabar, de moment, afegim un fons de color. Pots fer-ho amb Modificar < Lienzo < Color de Lienzo.
Saps que? aquest estampat de fons és una mica "mariconada", oi? L'hem fet perquè aprenguessis el procediment però, si et sembla (i si no també), ara el treurem.
- Selecciona el requadre i marca que vols un Relleno del mateix GROC que el fons i de color llis. Per aplicar el color llis posa la textura al 0%:
- Obre la imatge amb el Fireworks. Aquesta bucòlica imatge, la utilitzarem com a logo de la nostra botiga virtual. M'ha costat un dineral aconseguir els drets, així que no la desaprofitis.
En primer lloc eliminarem el fons blanc:
- Selecciona l'eina Vareta Màgica: . Amb aquesta vareta pots seleccionar totes les zones que tinguin un color similar. En el nostre cas seleccionarem el blanc que hi ha al voltant de Bart.
- I no et deixis el trocet que hi ha entre les cames. Pots afegir-ho a la selecció amb el MAYUSCULES premut i clicant amb la vareta allí.
I un cop ho tenim seleccionat, ho suprimirem.
- Deselecciona el fons amb Seleccionar < Anular selección.
- Ara ja podem arrossegar a Bart a sobre de la capçalera que estem dissenyant.
- Ens queda molt gran, però fent CONTROL+T podem modificar l'espai i ajustar-lo al nostre gust.
- Completem la proposta "culinària" afegint un ombra al nostre amic Bart:
- Guarda amb el nom d'arxiu "capsalera.png".
3.6. AFEGEIX ELS BOTONS.
I, finalment, el darrer detall per la nostra capsalera: els botons de navegació.
- Escriu els següents textos en el disseny. Recorda aplicar una ombra blava com has fet als altres, però aquest cop millor que sigui menys difuminada.
En la part dreta de la pantalla hi tens una paleta que hi diu Fotogramas y Historial. Si no la tens la pots activar a Ventana < Fotogramas.
- Clica en la paleta i selecciona Duplicar fotograma.
- Accepta el missatge que surt a continuació.
- Observa que en la paleta apareix un nou fotograma:
En aquest segon fotograma definirem que els botons canviïn de color quan hi passem el punter per sobre. Què és complicat? Qué va! Poc a poc ho aniràs fent sense ni tan sols adonar-te'n.
- Tenint Fotograma 2 actiu modifica ara el color dels botons fent que el text sigui BLAU i l'ombra VERMELLA.
- Torna a activar el Fotograma 1.
Si fas memòria de la unitat anterior, per posar aquesta imatge en una taula, l'hem de dividir com si fos un puzle.
- Selecciona l'eina División:
- Crea totes les divisions per tal de reproduir la forma de la taula dissenyada al començament de la unitat. Te la recordo:
Les línies Guía que tens en la pantalla et seran molt útils, però assegura't que les dimensions de cada divisió coincideixen, EXACTAMENT, amb les dimensions de la taula. Un error d'1 miserable píxel ens pot donar molts mal de caps.
Un cop fet ja pots ocultar les guíes desactivant Ver < Guías < Mostrat guías. T'ha de quedar així:
(I no parlo d'un "més o menys". T'ha de quedar EXACTAMENT així).
- Guarda amb el nom d'arxiu "capsalera.png".
3.7. EXPORTA LA CAPSALERA.
Ara que ja tenim la capçalera enllestida i només ens falta exportar-la per posar-la en la taula de la plantilla del Dreamweaver.
- Crea una carpeta en el teu lloc web amb el nom "imatgesCapsalera".
- En la paleta Optimizar assegura't de tenir el format GIF activat:
- Selecciona Archivo < Exportar. Situat dins de la carpeta "imatgesCapsalera" i, en el quadre que apareix, configura:
Nom: Capsalera
Tipo: "Solo Imàgenes"
Marca el quadre "Solo fotograma actual":
Si vas a mirar que ha passat en la carpeta "imatgesCapsalera" veuràs que s'han guardat els diferents fragments de la capsalera per separat.
Però recorda que haviem canviat els botons en el fotograma 2. Què em de fer amb ells? També els exportarem.
- Activa el Fotograma 2.
- Fes clic dret en el botó samarretes i selecciona Exportar división seleccionada.
- S'obre un quadre similar a l'anterior. Observa que el nom de l'arxiu és "capsalera_r2_c2". Si el guardem amb aquest nom sobreescriurem un arxiu que ja existeix. Modifica el nom per "capsalera_r2_c2_f2" (hem afegit f2 de fotograma 2, original no?).
- Guarda la divisió i repeteix-ho amb la resta de botons, afegint a tots "_f2" a la cua.
En la carpeta "imatgesCapsalera" has de tenir tot aquest grapat d'arxius:
Ja ho tenim tot preparar per afegir-ho a la nostra plantilla!
- Guarda amb el nom d'arxiu "capsalera.png".
3.8. Porta la capçalera a la plantilla.
Tornarem a modificar la plantilla per donar una mica més de color a la nostra botiga virtual.
- Obre el Dreamweaver i la plantilla paginaBase.dwt (està dins de la carpeta Templates).
- Esborra els textos que tens escrits en la capçalera i inserta les imatges (amb Insertar < Imagen) en el lloc que correspon. Has de montar el puzle sense els botons:
Recorda que els botons volem que canviïn quan el cursor es situi a sobre d'ells. Per això hem dibuixat 2 versions de cada botó.
- Selecciona l'opció Insertar < Objetos de imagen < Imagen de sustitución
- En el quadre que apareix configura per a que és carreguin les 2 versions dels botons (capsalera_r2_c2 i capsalera_r2_c2_f2) i la resta de paràmetres com t'indico:
- Repeteix aquest passos amb la resta de botons, en cada cas posa les dades adequades que no és tan difícil.
Al final, t'ha de quedar la capçalera completa:
Finalment, anem a fer un darrer retoc a la pàgina:
- Selecciona Modificar < Propiedades de pàgina.
- Assigna un color GROC de fons de pantalla i color VERMELL pel text. Accepta.
- Escriu també un títol:
- Guarda la plantilla amb Archivo < Guardar. Si et demana actualitzar, ACTUALITZA!
- Prem F12 i comprova com, passant el punter per sobre dels botons, aquests canvien.
- Obre les altres pàgines i veuràs que en totes ha aparegut la capçalera, el fons i tot...
ACTIVITAT 3.2. - AMPLIA LA PLANTILLA (2).
Recorda que abans has crear una taula a sota de la capçalera.
Doncs ara es tracta de que l'utilitzis per posar un panell lateral com el que et mostro. Revisa tots els passos que has anat fent anteriorment. És molt important que els assimilis bé.
Tinguès en compte que, a cada casella de la taula has d'indicar que vols ALINIACIÓ VERTICAL SUPERIOR.:
Si no ho fas, les coses es poden dequajeringar en qualsevol moment.
Actualitza la plantilla a tots els documents.
De passada, també hauries d'ajustar la mida de modaBart (en l'arxiu indes.html) per a que el conjunt de la pàgina quedi equilibrat.
PROJECTE FINAL UNITAT 3: Crea la teva plantilla pels projectes.
Crea una plantilla utilitzant totes les eines que has après en aquesta unitat. Pots construir una capçalera superior com hem fet aquí, una de lateral o totes dues. Pots utilitzar l'estil de còmic o un altre que t'agradi més.
Pensa que has de tenir els següents botons:
Portada
Linux i software de lliure distribució
Mitjans Audiovisuals
Crear un servidor Web
Xarxes
Seguretat en xarxes
Web 2.0
Aplica la plantilla a totes les pàgines que ja tens creades.
Has de donar una estètica uniforme a totes les teves pàgines. Si utilitzes molts tipus de lletra, i mides i colors, has d'uniformitzar-ho.
VALORARÉ:
Creativitat i originalitat.
Grau d'Elaboració del disseny.
Ús de les eines apreses.
Arxius clasificat en carpetes i amb noms adequats.
3.0. ORGANITZAR ELS ARXIUS. 
En el quadre que apareix, escriu "paginaBase" i prem a Guardar. 
ACTIVITAT 3.1. - AMPLIA LA PLANTILLA.
- Obre la plantilla per a poder editar-la. Per fer-ho has d'anar a la carpeta "Templates" i obrir l'arxiu paginaBase.dwt 
per centrar el document en la pantalla.
(la flexeta blanca) i deforma el rectangle tal i com et mostro:
Fes que l'ombra sigui BLAVA i l'opacitat del 100%, així serà més contrastada. 
. Amb aquesta vareta pots seleccionar totes les zones que tinguin un color similar. En el nostre cas seleccionarem el blanc que hi ha al voltant de Bart.
I un cop ho tenim seleccionat, ho suprimirem. 
En la part dreta de la pantalla hi tens una paleta que hi diu Fotogramas y Historial. Si no la tens la pots activar a Ventana < Fotogramas.
Si no ho fas, les coses es poden dequajeringar en qualsevol moment. 
