15. Cadres
<FRAMESET …>
<FRAME …>
<IFRAME …>
Les cadres (frames) permettent de partitionner une page HTML en plusieurs zones rectangulaires qui contiennent chacune un document HTML différent. On peut ainsi avoir, sur une même page, des zones fixes et des zones qui défilent sous le contrôle d’un ascenseur.
La balise
FRAMESET s’emploie
à la place de la balise
BODY. Elle définit des lignes et des colonnes. À chaque case correspond une balise
FRAME qui indique le document HTML à y afficher.
Remarque : la directive
DOCTYPE, première ligne d’un document HTML, qui est utilisée par l’outil de validation
validator.w3.org, devient
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"
>
Exemple :
<FRAMESET rows="100,*" cols="100,*">
<FRAME src="A.html" name="A">
<FRAME src="B.html" name="B">
<FRAME src="C.html" name="C">
<FRAME src="D.html" name="D">
<NOFRAMES>
Prévoir ici un contenu de remplacement pour les navigateurs n’affichant pas les cadres.
</NOFRAMES>
</FRAMESET>
|
produit :
|
<FRAMESET…>
rows="100,*" divise la page en deux zones séparées par un trait horizontal, la première, c’est à dire celle du haut, d’une hauteur de 100 pixels, la seconde occupant la hauteur restante.
cols="100,*" divise la page en deux colonnes, celle de gauche d’une largeur de 100 pixels, celle de droite s’étendant jusqu’au bord droit de la fenêtre.
Au lieu d’une dimension en pixels, on pourrait également indiquer un pourcentage de la hauteur ou de la largeur de la fenêtre.
FRAMESET a beaucoup de points communs avec
BODY, en particulier les gestionnaires d’événements
onLoad et
onUnload. Une différence importante est que la balise
FRAMESET n’est pas nécessairement unique dans un document. En particulier, en ensemble de cadres peut contenir un autre ensemble de cadres.
<FRAME…>
src="…" désigne le document (HTML ou autre) à inclure dans le cadre.
name="…" attribue au cadre un nom dont l’usage est décrit plus bas.
scrolling=AUTO (le défaut),
YES ou
NO autorise ou pas le défilement dans la fenêtre.
Remarque : différences entre
AUTO et
YES.
La valeur
YES entraîne l’affichage d’un ascenseur vertical, vide si la page ne déborde pas de la fenêtre, avant la disposition du contenu de la fenêtre. Si le contenu en hauteur excède la taille de la fenêtre, cet ascenseur se voit doté d’une barre de défilement, sans modification de l’affichage. À l’inverse, la valeur
AUTO peut amener, si le document le nécessite, ou si le visiteur rapetisse la fenêtre, l’affichage d’un ascenseur vertical qui va perturber l’agencement de la page et nécessiter un ascenseur horizontal, généralement peu souhaitable.
NORESIZE en l’absence de cet attribut, les bordures entre cadres adjacents sont sensibles au glisser/déplacer à la souris
Exemple :
<FRAMESET rows="160,*">
<FRAMESET cols="300,*">
<FRAME src="Aresize.html">
<FRAME src="B.html">
</FRAMESET>
<FRAMESET cols="300,*">
<FRAME src="Anoresize.html" NORESIZE>
<FRAME src="B.html">
</FRAMESET>
</FRAMESET>
|
produit :
|
frameborder=1 (le défaut) ou
0 indique au navigateur de dessiner une bordure entre le cadre et les cadres adjacents.
Exemple :
<FRAMESET rows="130,*">
<FRAMESET cols="300,*">
<FRAME src="Aborder.html" frameborder=0>
<FRAME src="B.html" frameborder=0>
</FRAMESET>
<FRAMESET cols="300,*">
<FRAME src="A.html">
<FRAME src="B.html">
</FRAMESET>
</FRAMESET>
|
produit :
|
marginwidth=# nombre de pixels des marges gauche et droite de la fenêtre.
marginheight=# nombre de pixels des marges superieure et inferieure de la fenêtre.
<IFRAME…>
La balise
IFRAME (
Inline Frame cadre en ligne)permet d’insérer une page web à l’intérieur d’une autre page web, qu’elle utilise ou non des cadres. Par son rôle et la syntaxe de ses attributs, cette balise ressemble à la balise
IMG, mais insère une page web au lieu d’une image.
Les attributs
src,
name,
scrolling,
frameborder,
marginwidth et
marginheight ont les mêmes fonctions et syntaxes que pour la balise
FRAME.
Les attributs
width,
height,
align,
hspace et
vspace ont le même rôle que pour la balise
IMG.
Exemple :
<IFRAME src="http://www.lemonde.fr" width=530 height=360>
Prévoir ici un contenu de remplacement pour les navigateurs qui ne supportent pas cette balise.
</IFRAME>
|
produit :
|
Attention : cette incorporation d’une page d’un site dans la page d’un autre est soumise à l’accord du responsable du site ainsi incorporé.
Programmes javascript en rapport avec les cadres.
- Pour empêcher une page web d’être incorporée, sans autorisation, dans un cadre sur un autre site, on y inclura le script suivant :
<SCRIPT type="text/javascript">
if (top != self)
top.location = self.document.location;
</SCRIPT>
- Inversement, il arrive qu’une page destinée à s’afficher dans un cadre de votre site soit référencée directement par un moteur de recherche. Pour assurer une visualisation correcte, on y inclura le script suivant (qui dépend de l’organisation du site ; dans l'exemple, on suppose que la page contenant les frames a pour adresse http://www.monsite.fr/HTML/frames2x2.html) :
<SCRIPT type="text/javascript">
if (parent.document.location.pathname != "/HTML/frames2x2.html")
top.location = "/HTML/frames2x2.html";
</SCRIPT>
Lexique
frame=cadre, column=colonne, height=hauteur, margin=marge, pixel (picture element)=point de l’écran, resize=redimensionner, row=rangée, scrolling=déroulement, set=ensemble, width=largeur