Generació de la interfície

Preparar la pàgina amb taules

En aquesta pràctica intentareu completar la interfície de la manera més senzilla possible.

Al Dreamwaver, obriu la pàgina \m5\cataleg\gris.htm que ha generat el Fireworks a la pràctica anterior. A la part superior, veureu una taula sense contorns, espais entre cel·les ni encoixinament que conté la imatge trossejada.

Revisant el model que ja heu vist abans, podeu endevinar què queda per fer. Teniu la taula amb la interfície trossejada; l'anomenareu Taula 0. Però encara heu de fer el següent:

• Crear una Taula 1, estreta, a l'esquerra, amb el mateix color de fons. Aquesta taula contindrà els vincles de la secció activa.
• Crear una Taula 2, ampla, amb el fons blanc, que serà l'àrea de continguts.

Vegeu els passos que cal seguir:

Feu clic a qualsevol part buida de la pàgina. Tindreu el cursor parpellejant a la dreta de la taula. Al menú Insertar | Tabla, creeu una nova taula de dues files i una columna, 130 píxels d'amplada i la resta de valors a 0 (és la Taula 1).

Observeu la finestra Propiedades. Si no teniu la Taula 1 seleccionada, poseu el cursor a dins de la taula i aneu al menú Modificar | Tabla | Seleccionar tabla. Quan la Taula 1 estigui seleccionada, la finestra Propiedades tindrà aquest aspecte:

Si queda un espai entre les taules, és perquè heu premut sense voler la tecla Entrar abans de començar, amb la qual cosa heu inserit paràgrafs en blanc. Per eliminar-los, examineu el codi i esborreu la línia o les línies <p>&nbsp;</p>.

A la finestra Propiedades, obriu la llista desplegable Alinear i canvieu Predet. per Izquierda, tal com veieu a la imatge.

Després, altre cop feu clic a qualsevol part buida de la pàgina, de manera que el cursor quedi parpellejant a la dreta de la Taula 1.

Finalment, torneu a Insertar | Tabla i creeu la Taula 2 o de continguts: una fila i una columna, 625 píxels d'amplada, 20 de Relleno de celda i la resta a 0. Si la taula us queda a sota, és perquè no heu alineat la Taula 1 a l'esquerra.

Assignar colors

Ja teniu les taules fetes i ara heu de posar els colors de fons corresponents.

Notareu, per començar, que el color de fons de la pàgina no està establert i per això potser es veu de color gris un altre color. Premeu Modificar | Propiedades de la página I Categoría I Aspecto. A Color de fondo escolliu el color blanc. Aprofiteu de passada per posar Título a la pàgina: Cat-àleg. Recursos de llengua i literatura catalana a Internet. Per accedir al títol, seleccioneu Categoria I Título /Codificación al camp Título.

A continuació, poseu el cursor a dins de la Taula 1 i feu Modificar | Tabla | Seleccionar tabla per seleccionar-la. Ara observeu la finestra Propiedades.

Al quadre Col. Fondo escriviu #42BDAD (és a dir, el color verd de la pestanya activa, expressat en el format HTML que ja s'ha comentat al Fireworks). Premeu la tecla Entrar. La taula ha agafat el mateix color de fons que la pestanya. Heu creat la continuïtat que volíeu.

Arrodonir els contorns

Per suavitzar els contorns inferiors, inserireu una imatge que heu fet prèviament amb el Fireworks: inferior.gif. La trobareu a la carpeta \materials\m5. Copieu-la a la carpeta \cataleg amb l'Explorador del Windows. Si treballeu connectats, també podeu descarregar-la aquí mateix, fent-hi clic amb el botó dret.

inferior.gif

Aquesta imatge ha estat feta de manera molt similar a les pestanyes que ja heu elaborat. Heu creat una imatge de 130 x 12 píxels amb el fons blanc i l'heu fet força gran amb el zoom. Per omplir la figura, heu fet servir el mateix color que a les pestanyes actives (#42BDAD).

Ara poseu el cursor a la segona cel·la de la Taula 1 i obriu Insertar | Imagen (o feu clic a la icona corresponent de la barra Insertar). Seleccioneu el fitxer inferior.gif i accepteu-lo.

Si a continuació feu clic a qualsevol part buida de la pàgina, veureu com l'alçada de la taula s'adapta a la mida de la imatge.

La columna de vincles

Si escriviu els vincles a la Taula 1, us quedaran molt junts. Per evitar-ho, recorreu al sistema de taules imbricades. Això vol dir inserir una taula dintre d'una altra. Ho fareu així:

• Poseu el cursor dins de la primera cel·la de la Taula 1.
• A la finestra Propiedades, desplegueu la llista Horiz. i escolliu Derecha. Així, la nova taula s'alinearà a la dreta.
• Ara premeu Insertar | Tabla i inseriu una taula de 10 files i 1 columna, 110 píxels d'amplada, 2 píxels de Relleno de celda i la resta de valors a 0.

Deixeu-ho així. Després ja escriureu els vincles.

Els vincles de les pestanyes

Ja gairebé heu acabat. Us falta una penúltima cosa: establir l'enllaç entre cada pestanya i la pàgina corresponent.

• Feu clic a la pestanya Inici. La imatge queda seleccionada.
• A la casella Vínculo de la finestra Propiedades escriviu index.htm, ja que aquest vincle portarà a la pàgina principal de la web.

Ara feu clic a la pestanya Llengua. A la casella Vínculo de la finestra Propiedades escriviu llengua.htm. Repetiu el procés amb la resta de pestanyes.

Ja deveu haver observat que esteu fent vincles a pàgines que encara no existeixen. Però ara mateix les fareu.

Recordeu que no s'han de posar majúscules, accents, espais ni caràcters estranys als noms de les pàgines (i de les imatges). Els caràcters "estranys" inclouen la ce trencada (ç).

Desar la pàgina

Noteu que no us heu ocupat dels vincles de la línia d'utilitats. Podríeu fer vincles entre les imatges i la pàgina corresponent, o millor encara, fer vincles amb mapa d'imatge. En tot cas, el moment de fer-ho seria ara, abans de desar la pàgina, per no haver-ho de fer després a totes les pàgines.

Ara deseu la feina feta: premeu Archivo | Guardar como i guardeu la pàgina a la carpeta \m5\cataleg com a cataleg.htm. Aquesta serà la base sobre la qual construireu les pàgines de les diferents seccions.

Les seccions

Ja podeu completar la pàgina de cada secció:

• Feu clic a la pestanya Inici.
• La imatge queda seleccionada. Ara, al seu lloc, posareu la pestanya Inici de color verd.
• A la finestra Propiedades al camp Origen canvieu la imatge gris_r2_c2.gif per la imatge verd_r2_c2.gif. Feu clic a qualsevol punt de l'àrea de treball per fer efectiu el canvi. També podeu fer aquest canvi suprimint la selecció que heu indicat al punt anterior i anant al menú Insertar | Imagen (o feu clic a la icona correponent de la barra Insertar I Común), seleccioneu la imatge verd_r2_c2.gif i accepteu-la.
• Feu Archivo | Guardar como i deseu la pàgina com a index.htm a la carpeta \m5\cataleg.

Amb el mateix procediment, feu la secció de llengua. Amb Archivo | Abrir (o utilitzant la drecera del final del menú Archivo) torneu a obrir la pàgina cataleg.htm. Esborreu la pestanya Llengua i inseriu al seu lloc la imatge verd_r2_c4.gif (la pestanya Llengua de color verd). Deseu el resultat com a llengua.htm a la mateixa carpeta.

I de la mateixa manera, feu les seccions restants: obriu cataleg.htm, canvieu una pestanya per l'altra i deseu-ho amb el nom de la secció.

Les pàgines

El mateix procediment d'anomenar i desar us pot estalviar feina a l'hora de construir les pàgines de cada secció.

Suposeu que la secció Llengua ha de constar a les pàgines següents:

A la pàgina llengua.htm escriviu totes aquestes paraules a la columna de l'esquerra. Seleccioneu la paraula Ortografia i al quadre Vínculo de la finestra Propiedades escriviu ortografia.htm. Feu el mateix amb totes les paraules, establint vincles entre Gramàtica i gramatica.htm, Lèxic i lexic.htm, etc.

Un cop fet, apliqueu format als vincles: lletra Arial, mida 2, negreta i de color blanc.

Al model hi ha un estil que treu el subratllat als vincles del tipus text-decoration: none; color: #FFFFFF i que està inserit al head del document. Feu una ullada des de la vista Código.

Ja teniu els vincles fets, però no les pàgines, ja que un altre cop heu fet vincles a pàgines que no existeixen. Però no hi ha res més senzill que fer-les: premeu Archivo | Guardar como i deseu la pàgina actual (llengua.htm) com a ortografia.htm a la mateixa carpeta. Torneu a Archivo | Guardar como i deseu ortografia.htm com a gramatica.htm. I així amb totes les pàgines de la secció.

Fent això a les seccions restants, tindreu ja tota una web… però completament buida. Això sí, en perfecte funcionament i llesta per posar els continguts de cada pàgina.

Desactivar els vincles a la pàgina actual

Els vincles a la pàgina actual són aquells que, en fer-hi clic, tornen a carregar la mateixa pàgina on sou. No cal dir que això provoca desconcert i cal evitar-ho.

Les pàgines que heu fet tenen un vincle a la pàgina actual: ortografia.htm té el vincle Ortografia, gramatica.htm té el vincle Gramàtica, etc.

Quan afegiu els continguts a cada pàgina, heu de desactivar el vincle. És una bona idea modificar-ne també el format: mida o color de la lletra, color de fons de la cel·la, etc.