HTML marcs
Pots llegir aquest article sobre marcs com a referència per la pràctica.
Els marcs serveixen per dividir la pàgina en diverses parts. Abans es feia servir molt per tal de no haver de recarregar el títol i el menú de la web. Amb les velocitats actuals d'internet s'ha deixat d'utilitzar ja que restringeixen molt les possibilitats de disseny gràfic de la pàgina.
Contingut
Divisions de la pàgina
Bàsicament cal utilitzar 2 tags:
- FRAMESET: per fer divisions. Si volem dividir per columnes caldrà utilitzar l'atribut cols i si volem dividir per files utilitzarem l'atribut rows:
- <FRAMESET cols="200,*"> : dividiria la web en 2 columnes. La 1a ocuparia 200 píxels i la segona (*) la resta.
- <FRAMESET rows="150,*"> : dividiria la web en 2 files. La 1a de 150 píxels i la segona (*) la resta.
- FRAME: utiltizarem aquest tag per incloure un arxiu web extern. Per exemple:
- <FRAME src="menu.html" name="menu" >
- L'atribut src apunta a l'arxiu HTML que es visualitzarà.
- L'atribut name etiqueta el marc per tal de que després puguem canviar el seu contingut (des del menú). Es pot posar l'etiqueta que vulguem (en l'exemple és "menu" però modria dir-se "menu1" o "cosa").
Segons el disseny que fem de la web caldrà fer les subdivisions per files o per columnes successivament. El següent exemple cal subdividir primer en 2 columnes i després en 2 files:
| MENU link1 link2 ... |
el títol de la web |
| el contingut (aquí van a parar els links) |
El codi seria el següent:
<html>
<head>
<!-- etiquetes diverses -->
</head>
<frameset cols="160,*">
<frame src="menu.html">
<frameset rows="120,*">
<frame src="titol.html">
<frame src="exercici.html" name="contingut">
</frameset>
</frameset>
</html>
Com podeu comprovar, una pàgina amb marcs (frames) com aquesta no te BODY i ens apareixen al menys 4 arxius:
- L'arxiu de frames (el que hem posat d'exemple): no té cap contingut, només defineix l'estructura. Es podria dir index.html o marcs.html o com vulgueu.
- menu.html
- titol.html
- exercici.html
Cadascun d'aquests 3 arxius ha de tenir el seu tag HTML, HEAD i BODY.
Ús dels links per canviar un frame determinat
Els links del menú lateral caldrà modificar-los perquè ataquin el frame desitjat. Si no ho fem així, al clicar-los ens carregaran la pàgina dins del marc del menú.
S'ha d'afegir la propietat target="nom_del_marc" al tag de link, per exemple:
<A href="exercici2.html" target="contingut">
el target="contingut" fa referència al marc definit anteriorment amb l'atribut "name":
...
<FRAME src="exercici.html" name="contingut">
...
A part del nom del marc, el valor "target" del link prendre els valor:
- "_self": el mateix marc on està el link
- "_parent": marc "pare" (el que el conté)
- "_top": marc principal (el carregaria en una pàgina sense marcs).
Ajustant el marc per defecte dels links
Per no anar repetint el target="..." dins de tots els links, podem posar un valor en la capçalera de la pàgina dels menús, que indiqui quin és el marc per defecte on atacaran els diversos links.
<html>
<head>
<BASE target="contingut" />
</head>
<body>
...
<A href="ex5.html>Exercici 5</A> <!-- fixeu-vos que aquí no poso target perquè ja l'hem posat al BASE -->
...
</body>
<html>
Exercicis
Hi ha diversos exemples en la pàgina que us he proposat al principi:
Exercici 1
- Realitza una pàgina amb marcs com la següent plantilla
- El menú ha de ser amb taules arrodonides.
- Posa aquesta pàgina al capdamunt de la carpeta dels exercicis que anirem fent, i col·loca al menú els links de cadascun dels nous exercicis. D'aquesta manera quedarà sumaritzada tota la feina que aniràs fent.
| títol de la web | |
| MENU link1 link2 ... |
el contingut (aquí van a parar els links) |
Exercici 2
Realitza la següent plantilla amb marcs:
| títol de la web | ||
| MENU 1 link1 link2 ... |
el contingut (aquí van a parar els links) |
MENU 2 link1 link2 ... |
