Diferència entre revisions de la pàgina «HTML marcs»

De Cacauet Wiki
Salta a la navegació Salta a la cerca
 
(Hi ha una revisió intermèdia del mateix usuari que no es mostren)
Línia 6: Línia 6:
  
 
Bàsicament cal utilitzar 2 tags:
 
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''': 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 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.
 
** <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''': utiltizarem aquest tag per incloure un arxiu web extern. Per exemple:
−
*: <FRAME src="menu.html">
+
*: <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.
+
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:
 +
 
 +
<table border="1" width="400">
 +
  <tr>
 +
    <td rowspan="2" valign="top">MENU<br/>link1<br/>link2<br />...</td>
 +
    <td align="center">el títol de la web</td>
 +
  </tr>
 +
  <tr>
 +
    <td>el contingut (aquí van a parar els links)<br /><br /><br /><br /></td>
 +
  </tr>
 +
</table>
 +
 
 +
El codi seria el següent:
 +
<syntaxhighlight lang="xml">
 +
<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>
 +
</syntaxhighlight>
 +
 
 +
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 ==
 
== Ús dels links per canviar un frame determinat ==
−
Els links del menú lateral caldrà modificar-los perquè ataquin el frame desitjat.
+
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.
 +
 
 +
<syntaxhighlight lang="xml">
 +
<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>
 +
</syntaxhighlight>
 +
 
 +
 
 +
== Exercicis ==
 +
Hi ha diversos [http://www.imaginaserveis.com/manuals/html/marcs.html 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.
 +
 
 +
<table border="1" width="400">
 +
  <tr>
 +
    <td colspan="2" align="center" >títol de la web</td>
 +
  </tr>
 +
  <tr>
 +
    <td valign="top">MENU<br/>link1<br/>link2<br />...</td>
 +
    <td>el contingut (aquí van a parar els links)<br /><br /><br /><br /></td>
 +
  </tr>
 +
</table>
 +
 
 +
 
 +
=== Exercici 2 ===
 +
Realitza la següent plantilla amb marcs:
 +
 
 +
<table border="1" width="400">
 +
  <tr>
 +
    <td colspan="3" align="center" >títol de la web</td>
 +
  </tr>
 +
  <tr>
 +
    <td valign="top">MENU 1<br/>link1<br/>link2<br />...</td>
 +
    <td>el contingut (aquí van a parar els links)<br /><br /><br /><br /></td>
 +
    <td valign="top">MENU 2<br/>link1<br/>link2<br />...</td>
 +
  </tr>
 +
</table>

Revisió de 18:51, 27 gen 2011

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.

Divisions de la pàgina[modifica]

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[modifica]

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[modifica]

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[modifica]

Hi ha diversos exemples en la pàgina que us he proposat al principi:


Exercici 1[modifica]

  • 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[modifica]

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
...
Obtingut de «https://cacauet.org/wiki/index.php?title=HTML_marcs&oldid=717»