Les Frames HTML
Il est possible de scinder une fenêtre verticalement ou horizontalement en 2 ou plusieurs parties.
Dans chacune de ces parties viendra s'insérer une page html. Sur une page lue par le navigateur, apparaît en réalité le contenu d'une, de deux ou de plusieurs pages html...
C'est ce qu'on appelle des cadres ou des frames html. Il faut donc concevoir une page de cadres initiale qui pointe vers les autres pages html et qui ne doit pas contenir les balises <body>...</body>!
Sur cette page initiale, il faudra définir le chemin d'accès, interne ou externe, des pages html qui doivent apparaître dans les cadres.
Cette option de mise en page est devenue relativement obsolète (remplacée par les 'iframes') et est généralement déconseillée, mais peu parfois encore être très utile...
Division horizontale :
Exemple :
<html>
<head>
<title>Frames horizontales</title>
</head>
<frameset rows="20%,80%">
<frame src="page1.html" name="zone1">
<frame src="page2.html" name="zone2">
</frameset>
</html>
Résultat :
Dans chacune de ces parties viendra s'insérer une page html. Sur une page lue par le navigateur, apparaît en réalité le contenu d'une, de deux ou de plusieurs pages html...
C'est ce qu'on appelle des cadres ou des frames html. Il faut donc concevoir une page de cadres initiale qui pointe vers les autres pages html et qui ne doit pas contenir les balises <body>...</body>!
Sur cette page initiale, il faudra définir le chemin d'accès, interne ou externe, des pages html qui doivent apparaître dans les cadres.
Cette option de mise en page est devenue relativement obsolète (remplacée par les 'iframes') et est généralement déconseillée, mais peu parfois encore être très utile...
Division horizontale :
Exemple :
<html>
<head>
<title>Frames horizontales</title>
</head>
<frameset rows="20%,80%">
<frame src="page1.html" name="zone1">
<frame src="page2.html" name="zone2">
</frameset>
</html>
Résultat :
Division verticale :
Exemple :
<html>
<head>
<title>frames verticales</title>
</head>
<frameset cols="20%,80%">
<frame src="page1.html" name="zone1">
<frame src="page2.html" name="zone2">
</frameset>
</html>
Résultat :
Exemple :
<html>
<head>
<title>frames verticales</title>
</head>
<frameset cols="20%,80%">
<frame src="page1.html" name="zone1">
<frame src="page2.html" name="zone2">
</frameset>
</html>
Résultat :
Partage avec bannière et sommaire :
Exemple :
<html>
<head>
<title>Partage avec bannière et sommaire</title>
</head>
<frameset rows="20%,80%">
<frame src="page1.html" name="zone1">
<frameset cols="20%,80%">
<frame src="page2.html" name="zone2">
<frame src="page3.html" name="zone3">
</frameset>
</frameset>
</html>
Résultat :
Partage avec hiérarchie imbriquée :
Exemple :
<html>
<head>
<title> partage avec hiérarchie imbriquée</title>
</head>
<frameset cols="20%,80%">
<frame src="page1.html" name="zone2">
<frameset rows="20%,80%">
<frame src="page2.html" name="zone1">
<frame src="page3.html" name="zone3">
</frameset>
</frameset>
</html>
Résultat :
Exemple :
<html>
<head>
<title> partage avec hiérarchie imbriquée</title>
</head>
<frameset cols="20%,80%">
<frame src="page1.html" name="zone2">
<frameset rows="20%,80%">
<frame src="page2.html" name="zone1">
<frame src="page3.html" name="zone3">
</frameset>
</frameset>
</html>
Résultat :
Liens entre cadres :
Par défaut un navigateur ouvrira la page correspondant au lien dans la même fenêtre que celle du lien.
Pour forcer cette commande il faut utiliser l'attribut TARGET dans le tag du lien.
Exemple :
<A HREF="fichier.htm" TARGET="zone3">
TARGET indique le nom du cadre cible où devra s'afficher le fichier html.
_blank : ouvre une nouvelle fenêtre pour afficher la page.
_self : affiche dans la même fenêtre (par défaut).
_parent : affiche dans le cadre supérieur.
Les attributs des frames :
Les attributs peuvent se cumuler.
-> L'attribut frameborder :
Cet attribut permet de déterminer si les cadres auront ou n'auront pas de bordure. Il a deux valeurs yes ou no.
frameborder=yes ou frameborder=no
-> L'attribut border :
Cet attribut permet de déterminer la taille des bordures entourant les cadres. Il peut prendre plusieurs valeurs ex: border=n, n étant une valeur en pixels définissant la taille de la bordure. La valeur 0 indique qu'il n'y a pas de bordure.
border=0 ou par exemple border=5
-> L'attribut bordercolor :
Cet attribut permet de déterminer la couleur de l'ensemble des bordures des cadres. Il suffit pour cela de spécifier une couleur sous forme de nom ou de sa valeur hexadécimale.
bordercolor="red" ou bordercolor="#ff0000"
-> L'attribut framespacing :
Cet attribut permet de déterminer un espace entre les cadres. Il peut prendre plusieurs valeurs ex: framespacing=n, n étant une valeur en pixels définissant l'espace entre les cadres. La valeur 0 indique aucun espace.
framespacing=0 ou par exemple framespacing=5
-> Les attributs marginwidth et marginheight :
- marginwidth permet de spécifier la grandeur des marges de gauche et de droite du cadre créé, la valeur doit être exprimée en pixels, elle peut avoir comme valeur 0.
- marginheight permet de spécifier la grandeur des marges de haut et de bas du cadre crée, la valeur doit être exprimée en pixels, elle peut avoir comme valeur 0.
-> L'attribut noresize :
En utilisant cet attribut, vous interdisez à l'utilisateur de redimensionner les cadres. Par défaut les cadres peuvent être redimensionnés.
-> L'attribut scrolling :
Cet attribut permet d'attribuer ou non une barre de défilement (scrollbar) à un cadre.
Il possède trois valeurs :
- yes : Indique que la barre de défilement sera toujours visible
- no : Indique que la barre de défilement ne sera jamais visible (à tester avant de l'utiliser)
- auto : Indique que le navigateur déterminera si la barre de défilement est nécessaire
Par défaut un navigateur ouvrira la page correspondant au lien dans la même fenêtre que celle du lien.
Pour forcer cette commande il faut utiliser l'attribut TARGET dans le tag du lien.
Exemple :
<A HREF="fichier.htm" TARGET="zone3">
TARGET indique le nom du cadre cible où devra s'afficher le fichier html.
_blank : ouvre une nouvelle fenêtre pour afficher la page.
_self : affiche dans la même fenêtre (par défaut).
_parent : affiche dans le cadre supérieur.
Les attributs des frames :
Les attributs peuvent se cumuler.
-> L'attribut frameborder :
Cet attribut permet de déterminer si les cadres auront ou n'auront pas de bordure. Il a deux valeurs yes ou no.
frameborder=yes ou frameborder=no
-> L'attribut border :
Cet attribut permet de déterminer la taille des bordures entourant les cadres. Il peut prendre plusieurs valeurs ex: border=n, n étant une valeur en pixels définissant la taille de la bordure. La valeur 0 indique qu'il n'y a pas de bordure.
border=0 ou par exemple border=5
-> L'attribut bordercolor :
Cet attribut permet de déterminer la couleur de l'ensemble des bordures des cadres. Il suffit pour cela de spécifier une couleur sous forme de nom ou de sa valeur hexadécimale.
bordercolor="red" ou bordercolor="#ff0000"
-> L'attribut framespacing :
Cet attribut permet de déterminer un espace entre les cadres. Il peut prendre plusieurs valeurs ex: framespacing=n, n étant une valeur en pixels définissant l'espace entre les cadres. La valeur 0 indique aucun espace.
framespacing=0 ou par exemple framespacing=5
-> Les attributs marginwidth et marginheight :
- marginwidth permet de spécifier la grandeur des marges de gauche et de droite du cadre créé, la valeur doit être exprimée en pixels, elle peut avoir comme valeur 0.
- marginheight permet de spécifier la grandeur des marges de haut et de bas du cadre crée, la valeur doit être exprimée en pixels, elle peut avoir comme valeur 0.
-> L'attribut noresize :
En utilisant cet attribut, vous interdisez à l'utilisateur de redimensionner les cadres. Par défaut les cadres peuvent être redimensionnés.
-> L'attribut scrolling :
Cet attribut permet d'attribuer ou non une barre de défilement (scrollbar) à un cadre.
Il possède trois valeurs :
- yes : Indique que la barre de défilement sera toujours visible
- no : Indique que la barre de défilement ne sera jamais visible (à tester avant de l'utiliser)
- auto : Indique que le navigateur déterminera si la barre de défilement est nécessaire