Treballem més còmodes i millor quan ho tenim tot a l'abast i sabem on és. Com més complex és un projecte, més necessari és tenir un entorn ben estructurat. És com un edifici: primer els plànols, després l'estructura, els acabats, la decoració, ...

Arbre del lloc Aquest curs és un edifici moderadament gran, però d'estructura senzilla que ens ve marcada pels propis mòduls, pràctiques i exercicis. Perfecte! Per una banda, ens servirà d'experiència per a futures realitzacions i, per l'altra, ens facilitarà la feina i podrem dedicar el temps a allò que toca, en comptes de perdre'l buscant coses que hauríem de saber on són.

L'estructura de carpetes i subcarpetes serà semblant a la dels materials del curs, com és lògic. Si tenim aquests materials al disc dur o al CD, podem usar l'explorador per veure com s'han organitzat i com s'han anomenat els arxius. Nosaltres farem el mateix, però amb noms més curts, perquè no hi escriurem "d108".

L'ús de l'explorador de Windows (o similar) és imprescindible si volem entendre les estructures de carpetes i treballar-hi amb agilitat. Si no hi estem acostumats, hauríem d'aparcar temporalment aquesta pràctica i revisar el curs de Windows.

  Elements HTML en aquest capítol
<script> i </script> delimiten un bocí de codi JavaScript.
<a href="..."> </a> Delimiten un enllaç.

Deixem les instruccions JavaScript, perquè n'hi ha poques i senzilles, per més endavant.

  1.- La pàgina per defecte
Com que volem crear una estructura buida, i que funcioni, haurem de tenir una pàgina per defecte, d'aquestes "en construcció" o similar. Podem fer-la tan sofisticada com vulguem. Aquí, però, en proposem una de ben senzilla, només l'adreça de l'arxiu.

Si encara no ho hem fet, hem de crear una drecera a la Llibreta del Windows dins de la carpeta "Windows \ SendTo", per tenir-la associada al menú del botó dret "Enviar a".

Obrim l'explorador, i ens situem a la carpeta de treball del curs i, a dins, en creem una de nova, anomenada "base". Ens hi situem. És buida. A la zona d'arxius (dreta de l'explorador) fem clic en el botó dret del ratolí i seleccionem "Nou - Document de text". L'anomenem "index.htm". Si el Windows ens avisa que hem canviat l'extensió, ho ignorem.

A continuació, sobre l'arxiu que acabem de crear, tornem a fer clic en el botó dret i seleccionem "Enviar a - Llibreta". Quan s'obri, escrivim el codi següent, després tanquem i guardem.

<script language="javascript">
document.write(location) ;
</script>
1.- Indiquem al navegador que comença un script.
2.- Escrivim l'adreça al document.
3.- Tanquem
 
2.- La carpeta base
És el moment de reflexionar. Què han de tenir en comú totes les carpetes? Perquè, per estalviar feina, si ja ho sabem, ho posarem tot a la carpeta base i, després, la clonarem per crear les altres.

En aquest curs no cal que ens hi trenquem massa el cap, és clar. En projectes més complexos, però, hi haurem de dedicar el temps i l'atenció que mereixi cada cas. Un bon plantejament d'aquesta carpeta ens pot estalviar moltes hores de feina.

Amb l'explorador, ens situem a la carpeta "base", al quadre d'arxius. Hi ha l'index.htm, que hem creat abans. Fem una nova carpeta per a imatges. Li podem posar "imatges" o "images" o "icons" o ... Si en tots els nostres projectes utilitzem els mateixos noms, ens resultaran més còmodes (la força dels hàbits és immensa). Aquí hem triat "images".

Parlant d'hàbits, com que construïm per a la web, ens hem d'acostumar a posar els noms d'arxius i carpetes en minúscules, i curts, fins a 8 caràcters. Aconseguirem la màxima compatibilitat amb tots els sistemes.
 
3.- Crear l'estructura
Un cop tenim una estructura base, podem copiar-la, enganxar-la, reanomenar-la, i en tindrem dues. Si ho anem repetint, en tindrem les que vulguem.

Aquesta tècnica de copiar i enganxar la utilitzarem molt. Convé, des d'ara mateix, que ens acostumem a fer-ho amb el teclat. És molt més ràpid:

    Control + X = Tallar           Control + C = Copiar           Control + V = Enganxar

De vegades, l'estructura que en resulta pot ser, al seu torn, la base, o una de les bases, per fer-ne una altra de més complicada. Això, com veurem durant el curs, es pot aplicar en molts camps. Amb el temps, podem tenir biblioteques d'estructures, scripts, plantilles, recursos, ... que ens facilitaran la feina de dissenyar llocs web.

Situats a la rel del nostre lloc, marquem la carpeta base al quadre d'arxius (dreta) de l'explorador i la copiem. La desmarquem i, amb el botó dret del ratolí sobre una zona buida, l'enganxem 10 vegades.

Reanomenem les còpies "m1", ..., "m8", "projecte" i "proves". Estructura acabada. Cada carpeta, còpia de "base", té a dins una pàgina i la carpeta d'imatges. Comprovem-ho.
 
4.- Enllaçar les pàgines
Ara hem d'aconseguir que funcioni. La pàgina principal, encara buida, ha d'enllaçar amb totes les altres. L'editem amb el Dreamweaver i li afegim contingut. De moment, no ens fixem en el format. Això ho tractarem a la pràctica següent.

Editem la pàgina d'entrada, "index.htm" amb el Dreamweaver. Abans de modificar-la, definim el lloc a la finestra "Sitio".

A continuació ens situem a la primera cel·la de la taula destinada als menús, escrivim "Menú 1", marquem l'últim <td> a la barra d'estat i fem clic sobre la icona de carpeta de "Vinculo", a la finestra de propietats. Seleccionem l'arxiu "index.htm" de la carpeta "m1".

Amb el <td> encara marcat, premem Control+C (copiar), ens situem a la cel·la de sota, la marquem a la barra d'estat i premem Control+V (Pegar). Ara ens posem a la tercera cel·la, la marquem i tornem a prémer Control+V. Ho repetim en totes les cel·les.

Només ens queda canviar els títols i enllaços dels mòduls 2 a 8. Provem de fer-ho a la "Vista de código" del Dreamweaver. Ens familiaritzarem més amb el llenguatge i és més ràpid que no pas fer-ho amb l'editor.
 
5.- Prova pilot
Si tot ha sortit com cal, la nostra pàgina d'entrada enllaça amb tots els "index.htm" de les carpetes. Deixem l'enllaç amb el projecte per a l'exercici d'aquest mòdul.

Podem fer una prova per veure com la pàgina d'entrada carrega els mòduls. Com que els hem fet amb Javascript, cada un mostra l'adreça de la pàgina. Naturalment, ho hem de provar amb diversos navegadors.

Si tenim la intenció de guardar l'estructura per poder-la reutilitzar, ara és un bon moment. Podem comprimir la carpeta amb el Winzip i guardar-la. Anomenem l'arxiu, per exemple, "curs8mod.zip" i així sabrem que es refereix a un curs de 8 mòduls.

També podem esperar, perquè, a la pràctica següent, li aplicarem estils.