Exemples d’agencement de cadre
Exemple n°1 : 2 cadres verticaux
<frameset cols="20%, 80%">
<frame src="frame1.html" name="gauche" title="titre du cadre 1">
<frame src="frame2.html" name="droite" title="titre du cadre 2">
</frameset>L’attribut cols permet de diviser le frameset en plusieurs colonnes (ici 2 colonnes). La première prendra 20 % de la largeur de la page et la seconde 80 %.
Exemple n°2 : 2 cadres horizontaux
<frameset rows="20%, 70%, 10%">
<frame src="frame1.html" name="haut" title="titre du cadre 1">
<frame src="frame2.html" name="centre" title="titre du cadre 2">
<frame src="frame3.html" name="bas" title="titre du cadre 3">
</frameset>L’attribut rows permet de diviser le frameset en plusieurs lignes (ici 3 lignes). La première prendra 20 % de la hauteur de la page et la deuxième 70 % et la dernière 10 %.
2 cadres horizontaux et un vertical
<frameset cols="20%, 80%">
<frame src="frame1.html" name="gauche" title="titre du cadre">
<frameset rows="50%, 50%">
<frame src="frame2.html" name="droit_haut" title="titre du cadre">
<frame src="frame3.html" name="droit_bas" title="titre du cadre">
</frameset>
</frameset>2 cadres verticaux et un horizontal
<frameset rows="20%, 80%">
<frame src="frame1.html" name="haut" title="titre du cadre">
<frameset col="50%, 50%">
<frame src="frame2.html" name="gauche" title="titre du cadre">
<frame src="frame3.html" name="droite" title="titre du cadre">
</frameset>
</frameset>Comment créer un agencement de cadre ?
Les attributs de la balise <frameset>
L’attribut rows
L’attribut rows permet de créer des cadres horizontaux. Il peut prendre différent type de valeur (%, px, *, …).
Pourcentage (entre 1 et 100). Exemple : rows="20%,80%".
Valeur en pixels.
Valeur *.
En fixant une seule des valeurs et en donnant à l’autre la valeur * (étoile), la valeur s’ajuste automatiquement. Exemple : rows="100px,*"
L’attribut cols
L’attribut cols permet de créer des cadres verticaux. Il peut prendre différent type de valeur (%, px, *, …).
Pourcentage (entre 1 et 100).
Exemple : cols="20%,80%"
Valeur en pixels.
Valeur *.
En fixant une seule des valeurs et en donnant à l’autre la valeur * (étoile), la valeur s’ajuste automatiquement. Exemple : cols="100px,*"
Exemple : cols="100, 3*, *"
la première colonne aura comme dimension 100 pixels (fixe), la deuxième colonne (variable) aura comme dimension 3/4 du reste de la page, tandis que la dernière colonne aura comme dimension le dernier 1/4 de la page(* équivaut à 1*).
L’attribut frameborder
yes (valeur par défaut)no
Indique si le cadre a une bordure ou non.
L’attribut border=n
n est une valeur définissant la taille de la bordure en pixel.
Indique la taille de la bordure
L’attribut bordercolor
nom de la couleur
Valeur de la couleur en hexadécimal.
Indique la couleur de la bordure
L’attribut framespacing=n
n est une valeur définissant l’espace entre les cadres
Indique l’espace entre les cadres
Les attributs de la balise <frame>
La balise <frame> permet de définir un ou plusieurs cadres au sein de la balise <frameset>
src
url
Définis l’emplacement de la page à afficher dans le cadre
name
« nom »
Définis un nom qui permettra d’afficher un autre document dans le cadre grâce à l’attribut target
L’attribut marginwidth=n
n est un entier spécifiant le nombre de pixels
Taille des marges latérales
L’attribut marginheight=n
n est un entier spécifiant le nombre de pixels
Taille des marges du haut et du bas
L’attribut frameborder
yes
no
Détermine si les cadres auront ou non une bordure
border=n
n est un entier spécifiant le nombre de pixels
Taille de l’espace entre les cadres (uniquement pour Netscape)
noresize
(Aucune)
Interdit à l’utilisateur de redimensionner les cadres (Ce n’est pas la valeur par défaut)
scrolling
yes
no
auto
Permets ou non l’affichage d’une barre de défilement (auto laisse le navigateur décider de son utilité)
title
title= »valeur correspondant au contenu du cadre »
Attribut universel, qui permet de donner un titre à une frame, obligatoire pour l’accessibilité de votre site.
Comment éviter les erreurs avec les navigateurs non compatibles ?
On utilisera les balises <noframes> et </noframes> permettant de spécifier un texte html à afficher en cas de navigateur ne permettant pas d’afficher les frames. Le texte entre les balises <noframes> et </noframes> doit donc contenir les balises <body> et </body>.
Exemple
<frameset cols="20%, 80%">
<frame src="frame1.htm" name="gauche" title="titre du cadre">
<frame src="frame2.htm" name="droite" title="titre du cadre">
</frameset>
<noframes>
<body>
Cette page html nécessite un navigateur supportant les frames…
</body>
</noframes>Désigner un cadre avec un lien hypertexte
Pour faire afficher des liens dans un des cadres, il suffit d’utiliser l’attribut target dans la balise <a href…> pour spécifier le nom du cadre qui a été spécifié dans la balise par l’attribut name.
Par exemple :
<a href="page.htm" target="gauche">