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ó, ...![]() 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. |