CREACIÓ DE PÀGINES WEB AMB KOMPO
6. Marqueu els marcs

Els objectius de la sisena lliçó són:

Activitat 6.1. Funcionament dels marcs

Els marcs són les diferents finestres en què es pot dividir la pantalla quan estem veient una pàgina d’Internet. Cadascuna d’aquestes finestres és independent, i una d’elles, generalment la més gran, sol ser la principal. El normal és que hi hagi dos o tres finestres quan s’utilitzen marcs, però pot haver-hi més. Un exemple de marcs, sense anar més lluny, és aquesta pàgina del curs de Kompozer. Tenim una finestra a l’esquerra, que és el sumari o índex del curs, i una altra finestra que ocupa la resta de la pantalla, que és la principal. Les dues finestres són documents diferents que s’elaboren per separat, però cal connectar perquè funcionin alhora en la pantalla.

Els marcs solen ser criticats per molts usuaris d’Internet, potser perquè de vegades compliquen el funcionament d’una pàgina, i avui dia no s’utilitzen molt en grans llocs de la Xarxa, però segueixen sent útils en pàgines com la nostra, petites i centrades en una comesa molt específic. En elaborar aquesta pàgina s’ha considerat que el lector havia de tenir l’índex molt a mà per moure amb rapidesa entre els continguts, per això s’ha optat per utilitzar el disseny amb marcs. Els marcs són també recomanables quan es tracta d’una pàgina web amb continguts informatius que se suposa que l’usuari pot voler imprimir, perquè d’aquesta manera podrà imprimir el marc principal, on es troba el text informatiu, sense destorbar el menú addicional que generalment ho acompanya.

 

Activitat 6.2. Els marcs d’aquesta pàgina web

Per crear marcs cal utilitzar un fitxer de base que contingui la informació de l’ estructura de la pàgina. Un altre arxiu inclourà el contingut de la finestra esquerra, la de l’índex. Finalment, a la finestra principal s’aniran veient els diferents arxius que es van cridant des de la finestra esquerra. Aquesta és l’estructura d’aquesta pàgina i la de gairebé totes les pàgines que utilitzen marcs. Naturalment, l’autor pot complicar més l’estructura, però aquí anem a analitzar el que és més corrent. Vegem, per tant, el codi font de l’arxiu que serveix de base a aquesta pàgina:

<Html>
<head>
<title> creació de pàgines web amb Kompozer </title>
</head>
<frameset cols = "22%, *">
<nom del marc = src "índex" = "sumario.html" frameborder = "0">
<nom del marc = "principal" src = frameborder "presentacion.html" = "0">
<noframes>
<p> This page this configurada amb marcs </p>
</noframes>
</frameset>
</html>

Es pot observar que en aquesta estructura no es troba el cos de la pàgina (<body>) i que l’etiqueta <frameset> és la que vertebra tota l’organització dels marcs. El seu únic atribut en aquest cas és cols, que indica el nombre i l’amplitud de les columnes (finestres verticals) que es compon la pàgina. Aquí són dues finestres: l’esquerra ocupa el 22% de la pantalla, i la dreta ocupa la resta de la pantalla (el que s’expressa amb un asterisc), encara que l’amplada també es pot indicar en píxels o en altres mesures. A més, podria haver files (rows), i en aquest cas les finestres serien horitzontals. Les altres etiquetes són les <frame>, que tenen com a atributs el nom dels marcs i el dels arxius que s’obriran a l’inicia en cada marc. L’etiqueta <no frames> s’inclou per si el navegador de l’usuari no inclou marcs (el que no és normal) o per si l’usuari ha desactivat els marcs en el navegador. Dins d’aquesta etiqueta es pot incloure el text que vulguem.

Altres atributs de <frame> podrien ser:

  • noresize: Indica que la barra que separa els marcs no es pot moure de la seva posició inicial.
     

  • scrolling = yes, no, acte: Indica si existirà o no una barra de desplaçament vertical, o només quan sigui necessari.
     

  • frameborder = 1 | 0: Amb l’1 indica que hi ha d’haver un separador entre aquest marc i els adjacents. Amb el 0 no hi ha separador.Per defecte és l’1.

A la nostra pàgina, la finestra de l’esquerra va a tenir sempre el mateix arxiu (sumari.html), però la finestra dreta, anomenada "principal", va obrir-se amb l’arxiu presentacio.html, i després canviarà d’arxiu conforme l’usuari vagi fent clic en els hipervincles de la finestra de l’índex. Per tant, aquests hipervincles hauran de dirigir-se a la finestra principal utilitzant el nom d’aquesta finestra. Observem, per exemple, el primer hipervincle de la finestra de l’esquerra:

<a href="presenta.htm" target="principal"> Presentació </a>

La paraula "Presentació" obre l’arxiu presentacion.html a la finestra anomenada "principal", que és l’objectiu o target. Si no especificàrem target, l’arxiu s’obriria a la finestra de l’esquerra, on es troba el hipervincle. I així es creen tots els altres hipervincles.

Les opcions preestablertes per a l’atribut target són les següents:

  • _blank: Obre l’arxiu vinculat en una finestra nova del navegador.
     

  • _parent: Obre el fitxer en el conjunt de marcs de l’inici de la pàgina.
     

  • _self: Obre el fitxer en el marc actual.
     

  • _top: Obre el fitxer en el conjunt de marcs principal i desapareixen tots els marcs actuals.

Activitat 6.3. Activitat 6: Dissenyar la pàgina del Monstre amb marcs

Farem ara una activitat per a nota. Es tracta de dissenyar la nostra pàgina del monstre amb dos marcs, igual que la versió web d’aquesta pàgina del curs.

Com Kompozer no té capacitat per editar marcs, caldrà crear un arxiu base que anomenarem index2.html. Per elaborar aquest fitxer podem utilitzar Kompozer: obrim un arxiu nou, anem al codi font (al menú Veure i l’opció HTML...), esborrem tot el codi que hi ha en ell i escrivim el codi dels marcs. També es pot utilitzar qualsevol editor de text pla com, per exemple, el Bloc de notes o l’ Editor de textos, i escriure el següent:

<Html>
<head> <title> La web del Monstre </title> </head>
<frameset border = 0 cols = "20%, 80%">
<frame name = " índex src "=" sumari.html " >
<nom del marc = " director src "=" monstre.html ">
</frameset>
</html>

Com es veu, crearem més dos arxius nous: un que inclogui l’índex (sumario.html) i un altre que inclogui la pàgina principal del Monstre, ara anomenada monstre.html, que és la mateixa pàgina que index2.html, però a la qual li hem tret el primer formulari i li hem afegit la enquesta creada a la lliçó anterior, realitzant els ajustos necessaris en els marcadors o enllaços interns. També haurem de canviar el nom del fitxer coleccio.html, de la col·lecció d’objectes, que ara anomenarem coleccio2.html; cal canviar-hi els dos hipervincles d’aquest arxiu que ho enllacen amb la pàgina principal (ara index2.html) ia més hauran d’indicar: target = "parent", perquè apareguin en el conjunt de marcs pare de l’enllaç.

Una altra novetat important és que els marcs no tindran la vora. Per a això hem d’incloure l’expressió border = 0 en l’etiqueta <frameset>, perquè no hi hagi espai entre els marcs. Aquests canvis es poden veure al codi mostrat a dalt.

Haurem de crear els dos arxius per separat, ja que Kompozer no té capacitat per editar els marcs, així que cal veure el resultat final al navegador. Si obrim el fitxer index2.html en Kompozer, no veurem res; només podrem veure el codi font i modificar-lo si cal. En l’arxiu sumari.html, que internament es dirà "índex", anem a introduir 05:00 hipervincles: quatre d’ells van dirigits a l’arxiu index2.htm (marc "principal") però a diferents marcadors i el cinquè va a obrir l’arxiu coleccion2.html a la finestra principal. Per comprendre millor, vegem el següent esquema, que explica el nou disseny creat per la pàgina amb marcs:

Marc esquerra de la pàgina
(índex ··> sumari.html)

Text dels hipervincles: Professió ·> Aficions ·> La meva col·lecció ··> Enllaços ·> Enquesta ··>





 

Marc dret de la pàgina
(principal ·> index2.html)


Marcadors dels hipervincles: professió aficions (S’adreça a l’arxiucoleccion2.html) enllaços enquesta





 

Els quatre enllaços que dirigeixen a l’arxiu index2.html ho fan a diferents marcadors que són dins el mateix arxiu; per tant, quan premem en ells s’obrirà aquest arxiu en el marc principal, però ho farà col·locant en la part superior de la pantalla la secció corresponent. En llenguatge HTML, el primer d’ells caldria escriure així:

<A href = " # monstre.html professió objectiu "=" principal "> <strong> Professió </strong> </a>

L’atribut href inclou el nom del marcador immediatament després del nom de l’arxiu: monstre.html #professió. I l’hipervincle va dirigit al marc anomenat "principal". Cal observar que hem posat en negreta el text dels enllaços (<strong>).

Per tal de realitzar aquest enllaç des Kompozer hem de tenir oberts els dos arxius: monstre.html i sumari.html perquè el programa pugui llegir els marcadors realitzats en el primer d’ells. Després, anem a l’arxiu del sumari i destaquem la paraula "Professió". A continuació, premem el botó de creació d’enllaços i apareixerà una finestra de diàleg:

Modificar hipervincle

El primer que cal fer és anar a la secció de Pàgines obertes de la finestra i destacar el nom del títol de la pàgina principal, monstre.html, que nosaltres hem anomenat "Web del monstre". Després, cal obrir el menú desplegable anomenat Marcador, on es troben tots els marcadors existents a la pàgina principal, i hem de triar el marcador "professió". Només cal escriure en el camp de text anomenat Marc de destinació (target) la paraula "principal", que és el marc al qual s’adreça aquest enllaç. A continuació, premem en la pestanya "World Wide Web" per obrir aquesta secció, i veiem que automàticament apareix l’enllaç en el quadre de Direcció URL. I d’aquesta manera crearem els altres enllaços de marcadors.

Hipervincle amb marcador

Només ens queda crear l’enllaç de "El meu col·lecció" de la mateixa manera en què ho hem creat anteriorment, però aquesta vegada cal afegir el marc de destinació, que serà la finestra "principal". Quedarà així:

<a href="colec2.htm" target="principal"> <strong> La meva col·lecció </strong> </a>

Finalment, encara queda per canviar el color dels enllaços en el marc esquerre. Com el color de fons és blau fosc, hem triat el blanc per als enllaços i per als enllaços visitats, i un color blau clar per als enllaços actius.

Ara, mans a l’obra. La nova pàgina amb marcs pot quedar de manera semblant a la que es veu en prémer el següent botó. Cal observar que també s’han realitzat alguns canvis en els enllaços del marc esquerre utilitzant fulls d’estil, que analitzarem en la següent lliçó i que serà objecte d’una altra activitat. Per veure en el navegador la pàgina final amb els dos marcs cal obrir l’arxiu index3.htm, que és el que té elfitxer base amb la composició dels marcs.

Pàgina amb marcs