 Le
principe des cadres
Le
jeu de cadre ou <FRAMESET>
La
balise <FRAME> et ses attributs
Les
liens dans les frames
Les
cadres locaux <IFRAME> |
 |
1. Le principe des cadres
Les vieux naviguateurs ne pouvaient afficher qu'un seul html fichier
à la fois.
Avec la technique des "Frames", on peut diviser l'écran
en plusieurs fichiers html dont on définira la largeur et la
hauteur au sein du jeu de cadre ou <FRAMESET>.
A l'aide de frames il est possible de diviser l'affichage du navigateur
en différentes parties définissables librement.
Chaque partie peut avoir son propre contenu et les différentes
parties d'affichage (appelées frames) peuvent avoir un contenu
statique ou un contenu changeant.
Les liens dans une frame peuvent appeler des fichiers qui sont ensuite
affichés dans une autre frame.
Une frame est en fait un fichier html distinct; on parle également
de cadres. |
 |
2. Le conteneur FRAMESET
La balise <FRAMESET> prend la place de la balise <BODY>,
c'est elle qui définit les cadres, qu'ils soient verticaux
ou horizontaux, et leurs dimensions (en % ou en pixels).
Voici l'ossature d'un fichier HTML avec des frames :
<html>
<head>
<title>test de frame</title>
</head>
<frameset>
... définitions de frames...
</frameset>
<body>
Le texte est affiché si le navigateur ne reconnaît pas
de frames
</body>
</html>
Les balises <body> et </body> sont présentes de
manière à afficher quelque chose pour les naviguateurs
ne supportant pas les frames.
Les frames sont reconnues à partir de Netscape 2.0 et de MS
Internet Explorer 3.0, de ce fait, vous pouvez user de cette technique
sans prendre de risques.
Exemple :
<frameset cols="30%,70%">
<frame src="left.htm" name="zone1">
<frame src="main.htm" name="zone2">
</frameset>
Ici, le jeu de cadre définit deux zones verticales (colonnes),
qui occupent respectivement 30% et 70 % de la largeur de votre écran.
Ainsi, vous pouvez disposez vos liens dans la zone gauche et afficher
le contenu dans la zone principale. |
| |
|
| |
Zone1
fichier left.htm |
Zone2
fichier main.htm |
|
 |
| |
Les attributs de la balise <FRAMESET>
• Les attributs "rows" et "cols"
Lors de la définition d'un jeu de frames vous déterminez
comment la fenêtre d'affichage doit être divisée.
Vous devez vous représenter la fenêtre d'affichage comme
un tableau vide.
Pour que le tableau prenne forme vous devez d'abord définir
des rangées et des colonnes.
Les attributs "rows" et "cols" définissent
le type de cadre, qui peut être vertical ( rows ) ou horizontal
( cols ).
Ils prennent une liste de valeurs séparées par des virgules,
exprimées en pourcentage entre 1 et 100 ( valeur relative à
la largeur ou la hauteur de votre écran ) ou en pixel ( valeur
absolues ).
Quelques exemples :
<frameset rows="100,*,60">
...
</frameset>
En mentionnant rows="100,*,60" la rangée du
haut sera exactement de 100 pixels de haut, celle du bas exactement
de 60 pixels de haut et celle du milieu, reçoit le reste de
la fenêtre d'affichage selon la dimension de l'écran
de l'utilisateur.
Avec l'étoile * une surface d'une taille relative dépendant
des autres données est définie.
|
Frame 1
de 100 px |
Frame 2
prenant le reste de l'écran |
Frame 3
de 60 px |
|
|
<frameset cols="200,*">
...
</frameset>
La page est déterminée par cols="200,*"
pour que l'affichage se fasse en deux colonnes, de façon à
ce que la colonne de gauche ait 200 pixel de large tandis que la droite
prendra le reste.
|
Frame1
(200 pixels de largeur) |
Frame2 ( prend le reste de la largeur de
la fenêtre ) |
|
| |
<frameset cols="40%,60%">
... vous obtenez deux frames dont le contenu de la première
est précisé ici...
<frameset rows="20%,80%">
... Encore deux frames dont le contenu est précisé ici...
</frameset>
</frameset>
Dans cet exemple des lignes et des colonnes sont définies pour
un partage assez complexe de l'écran.
La fenêtre va tout d'abord dans notre exemple, être divisée
en deux colonnes.
Celle de droite de ces deux colonnes va ensuite être divisée
en deux rangées.
C'est pour cela qu'il est d'abord défini la répartition
en colonnes avec la commande cols="40%,60%".
Mais au lieu de définir simplement les deux frames il est défini
à la place de la deuxième frame un sous jeu de frames
qui divise la fenêtre de droite en deux rangées grâce
à la commande rows="20%,80%". |
|
 |
| |
Voici le code HTML de ce
jeu de cadres :
<frameset cols="40%,60%">
<frame src="Lien.htm" name="gauche">
<frameset rows="20%,80%">
<frame src="titre.htm" name="haut">
<frame src="infos.htm" name="bas">
</frameset>
</frameset>
Dans la balise <FRAME>, vous indiquez l'emplacement du
fichier HTML et vous donnez un nom à la zone;
Ainsi, des liens pourront figurer dans la zone nommée "gauche"
et pointer vers la zone nommée "bas".
Le lien s'écrira alors : <a href="infos.htm"
target="bas">Cliquer ici</a> |
| |
|
3. La balise <FRAME> et ses
attributs src
Cet attribut permet d'indiquer la source des fichiers HTML qui définissent
les cadres.
- name
Il est obligatoire de donner un nom aux différentes zones de
votre jeu de cadre. Ces noms permettront d'identifier chaque zone
lorsque vous souhaiterez y faire pointer un lien.
- scrolling
Votre navigateur gère automatiquement les barres de défilement
de chaque fenêtre de frame.
Cependant, vous pouvez forcer le navigateur à afficher les
barres de défilement ou à les masquer.
Ici, j'ai forcé le navigateur à insérer des barres
de défilement sur les deux frames.
Les différentes valeurs de l'attribut scrolling sont
:
- yes : on force le navigateur à afficher les barres
- no : on force le navigateur à masquer les barres
- auto ou rien du tout : le navigateur affiche les barres uniquement
si cela s'avère nécessaire.
Voici le code HTML de cet exemple :
<frameset cols="30%,70%">
<frame name="zone1" scrolling="yes"
src="left.htm">
<frame name="zone2" scrolling="yes"
src="main.htm">
</frameset>
|
|
- noresize
Grâce à l'attribut "noresize" dans le
repère de définition d'une frame, vous empêchez
l'utilisateur de modifier sa taille.
- border, framespacing et frameborder
L' Explorer Internet MS et Netscape soutiennent tous les deux à
partir de la version 3.0 les frames sans cadre de fenêtre visible.
Avec les cadres de fenêtre invisibles, les fenêtres frame
semblent être des surfaces jointes l'une à l'autre sans
couture sur l'écran.
Malheureusement la syntaxe pour le faire manque encore d'uniformité,
de sorte qu'il vous faut encore à l'heure actuelle plusieurs
mentions pour obtenir l'effet désiré dans les deux navigateurs.
- border= [pixels] est la syntaxe de Netscape et détermine
la largeur du cadre en pixels. Des valeurs numériques sont
permises entre 0 (ne pas afficher de cadre) et plus.
- frameborder= [1/0 ou yes/no]: la mention signifie d'après
la syntaxe Microsoft si le cadre doit être affiché en
trois dimensions ou non.
- framespacing= [pixels] est de la syntaxe Microsoft et détermine
l'espace entre les fenêtres frame par conséquent la largeur
des cadres en pixels.
pour simplifier, si vous souhaitez relier vos frames sans bordure,
avec des cadres de frames invisibles, vous devez pour être compatible
Netscape et IE Microsoft, insérer les 3 attributs à
savoir border=0, frameborder=0 et framespacing=0.
|
|
Voici le code HTML de cet xemple :
<frameset cols="30%,70%" bordercolor="#CC0000"
frameborder="NO" border="0" framespacing="0">
<frame name="zone1" scrolling="no"
noresize src="left.htm">
<frame name="zone2" scrolling="no"noresize
src="main.htm">
</frameset>
- bordercolor
Vous pouvez forcer le cadre entre les fenêtres frame à
être représenté en couleurs.
Attention, cet attribut ne fonctionne qu'avec Internet Explorer de
Microsoft.
Cet attribut appartient à la balise <FRAMESET>
- marginwidth et marginheight
Grâce à l'attribut marginwidth dans le
repère de définition d'une frame, vous déterminez
l'espace entre le bord gauche ou droit de la fenêtre et le contenu
de la fenêtre.
Grâce à l'attribut marginheight vous déterminez
l'espace entre le bord haut ou bas de la fenêtre et le contenu
de la fenêtre.
Les marges gauche et droite sont toujours de même taille ainsi
que les marges haute et basse. |
4. Les liens dans les frames
La gestion des liens hypertextes dans un jeu de cadre est très
simple à partir du moment où vous avez donner un nom
à chacune des zones composant votre jeu de cadre.
Ainsi, si vous avez une structure de cadres composée de 3 frames
avec une frame à gauche, une frame en haut et une frame au
centre, exactement comme mon site, vous pouvez insérer des
liens sur la frame gauche ou la frame haute et faire pointer ces liens
dans la frame centrale.
Voici la structure du jeu de cadre : |
Zone1
( name=left )
fichier nav.htm |
Zone2 ( name=haut )
fichier nav_haut.htm |
Zone3 ( name=centre )
fichier pricipal.htm |
|
|
Pour faire pointer les liens
de la zone1 ou de la zone2 vers la zone 3, il suffit d'utiliser l'attribut
target="nom de la frame"
Exemple de lien situé dans la zone1 et pointant vers la
zone 3 :
<a href="principal.htm" target="centre">infos</a> |
Tous les liens situés dans la zone 1 et 2 pointent vers la
cible zone3, c'est à dire vers la frame nommée "centre".
|
| |
|
| |
| Cependant, il existe des noms
réservés de frame cible dont voici les différentes
valeurs :
_self : L'URL cible va s'afficher dans la même frame
que le lien
_parent : L'URL cible va s'afficher dans la fenêtre
d'affichage qui était active avant le démarrage de
votre jeu de frames.
_blank : L'URL cible va s'afficher dans une nouvelle fenêtre
ouverte par le navigateur
_top : L'URL cible va s'afficher dans toute la fenêtre
du navigateur et les frames disparaissent
_new : Identique à _blank (nouvelle fenêtre)
|
5. Les cadres locaux où
<IFRAME>
Les frames incorporées où IFRAME sont interprétées
par l' Explorer Internet MS à partir de la version 3.x, par
contre toujours pas par Netscape jusqu'à sa version 4.x comprise.
Depuis HTML 4.0 elle font partie du standard HTML.
Les cadres locaux sont un moyen original de configuration pour la
préparation de l'information, qui fonctionne autrement que
les frames "normales".
Les frames incorporées ne crées pas de division de l'écran
spécifique, mais sont au contraire semblables à des
graphiques ou des passage vidéos à l'intérieur
d'un fichier HTML, dans lesquelles des sources étrangères,
avant tout d'autres fichiers HTML peuvent être affichés.
|
|
| Exemple : |
| |
Voici un IFRAME dont
la largeur est de 450 pixels et la hauteur de 200 pixels.
Le fichier iframe.htm est appelé dans un cadre de 450 px de largeur
sur 200 px de hauteur.
Les attributs de la balise <IFRAME> sont les suivants :
- width : vous déterminez la largeur de la frame
incorporée.
- height : vous déterminez la hauteur de la frame
incorporée.
- align ( left / center / right ) : Avec align=left
vous alignez la frame incorporée à gauche. Le texte
qui suit passe à droite autour de la frame.
Avec align=right vous alignez la frame incorporée à
droite et le texte qui suit passe à gauche autour de la frame.
- vspace / hspace : Avec hspace, vous déterminez
l'espace entre la frame incorporée et le texte passant à
son côté, que ce soit à gauche ou à droite
de l'iframe.
- scrolling : avec cet attribut, vous pouvez forcer
ou empêcher que la frame incorporée soit pourvue de barres
de défilement.
- name : Il est très important de nommer votre
iframe afin de pouvoir charger cette zone avec un autre fichier html.
Avec le nom du cadre incorporé, vous définissez une
cible pour vos liens.
Exemple :
Retrouvons notre iframe de l'exemple précédent :
Cliquez sur ce bouton pour charger un autre fichier html dans le cadre
incorporé :
Cliquez sur ce bouton pour retrouver l'autre fichier : 
|
|
|
|
|
