Pédagogie Multimédia Conception
Les cadres (frames)
Les cadres, plus connus sous le nom de frames, nous permettent de créer des fenêtres dans une page Web. Chacune de ces fenêtres contiendra une page Web indépendante.
Le document principal, devra contenir à la place de la balise usuelle <BODY> </BODY>, une directive <FRAMESET> </FRAMESET>.
Ainsi, un programme définissant des cadres aura la structure principale suivante:
|
<HTML> Début du programme (c'est la première ligne) <HEAD> Début de l'en-tête du programme <TITLE> Titre du programme </TITLE> </HEAD> Fin de l'en-tête du programme <FRAMESET> Début de votre programme C'est dans cette partie que vous décrirez vos cadres par des directives du type <frame src="fichier.html" name="nom du cadre"> </FRAMESET> Fin du corps du programme </HTML> Fin du programme |
Voyons quelques exemples :
Exemple 1
Division du document en fenêtres horizontales :
|
<HTML> <HEAD> <TITLE>Exemple 1 </TITLE> </HEAD> <FRAMESET ROWS="30%,70%"> <frame src="fenetre1.htm"> <frame src="fenetre2.htm" name="cadre2"> </FRAMESET> </HTML> |
Avec cette commande, nous avons divisé le document en deux cadres horizontaux (ROWS) dont l'un occupe 30% du document et l'autre 70%.
Chaque fenêtre contient son propre document HTML.
Nous avons donné un nom, cadre2, à la seconde, qui servira à nommer ce cadre dans une directive TARGET="cadre2" décrite plus bas.
Voici ce que vous obtiendrez.
Exemple 2
Division en trois fenêtres horizontales :
|
<HTML> <HEAD> <TITLE>Exemple 2 </TITLE> </HEAD> <FRAMESET ROWS="30%,50%,20%"> <frame src="fenetre1.htm" name="cadre1"> <frame src="fenetre2.htm" name="cadre2"> <frame src="fenetre3.htm" name="cadre3"> </FRAMESET> </HTML> |
Nous avons divisé le document en trois fenêtres horizontales. La première occupe 30%, la deuxième 50% et la troisième 20% du document.
Avec <FRAMESET ROWS="30%,50%,*"> nous aurions obtenu le même résultat. L'étoile "*" prendra par défaut la valeur de 20% qui est le reste de 100% - (50%+30%).
Voici ce que vous obtiendrez.
Exemple 3
Division du document en fenêtres verticales :
|
<HTML> <HEAD> <TITLE>Exemple 3 </TITLE> </HEAD> <FRAMESET COLS="40%,60%"> <frame src="fenetre1.htm"> <frame src="fenetre2.htm" name="cadre2"> </FRAMESET> </HTML> |
<FRAMESET COLS="40%,60%"> Nous avons divisé le document en deux fenêtres verticales (COLS) dont l'une occupe 40% du document et l'autre 60%.
Voici ce que vous obtiendrez.
Exemple 4
Division en trois fenêtres verticales :
|
<HTML> <HEAD> <TITLE>Exemple 4 </TITLE> </HEAD> <FRAMESET COLS="*,60%,*"> <frame src="fenetre1.htm" name="cadre1"> <frame src="fenetre2.htm" name="cadre2"> <frame src="fenetre3.htm" name="cadre3"> </FRAMESET> </HTML> |
Ici <FRAMESET COLS="*,60%,*"> est équivalent à <FRAMESET COLS="20%,60%,20%">.
Voici ce que vous obtiendrez.
Exemple 5
Division du document en fenêtres mixtes :
|
<HTML> <HEAD> <TITLE>Exemple 5 </TITLE> </HEAD> <FRAMESET COLS="30%,70%"> <frame src="fenetre1.htm" name="cadre1"> <FRAMESET ROWS="35%,65%"> <frame src="fenetre2.htm" name="cadre2"> <frame src="fenetre3.htm" name="cadre3"> </FRAMESET> </FRAMESET> </HTML> |
Dans le <FRAMESET COLS="30%,70%">, nous avons mis le premier fichier fenetre1.htm dans la zone de grandeur de 30%; ensuite, la zone de grandeur de 70%, nous l'avons divisée en deux fenêtres verticales dont l'une occupe 35% (fenêtre2.htm) et l'autre occupe 65% (fenêtre3.htm).
Voici ce que vous obtiendrez.
Exemple 6
Division du document en 5 fenêtres :
|
<HTML> <HEAD> <TITLE>Exemple 6 </TITLE> </HEAD> <FRAMESET ROWS="40%,60%"> <FRAMESET COLS="50%,*"> <frame src="fenetre1.htm" name="cadre1"> <frame src="fenetre2.htm" name="cadre2"> </FRAMESET> <FRAMESET COLS="33%,*,*"> <frame src="fenetre3.htm" name="cadre3"> <frame src="fenetre4.htm" name="cadre4"> <frame src="fenetre5.htm" name="cadre5"> </FRAMESET> </FRAMESET> </HTML> |
Nous avons divisé le document en deux fenêtres horizontales (<FRAMESET ROWS="40%,60%">). La première a été divisée en deux parties égales (<FRAMESET COLS="50%,*">) et la deuxième fenêtre a été divisée en trois autres parties égales (<FRAMESET COLS="33%,*,*">).
Voici ce que vous obtiendrez.
En plus des attributs ROWS et COLS, la balise FRAMESET accepte les attributs suivants:
Bordure des cadres : Si vous voulez supprimer les bordures, utilisez <FRAMESET BORDER="0">
Couleur des bordures : La commande est <FRAMESET BORDERCOLOR="#FF8080">
(voir Des couleur et encore des couleurs)
La balise FRAME peut aussi avoir comme attributs :
<FRAMESET NORESIZE> va interdire le redimensionnement de ce cadre.
<FRAME SCROLLING="AUTO"> va créer des barres de défilement automatiquement et ce, dès que le contenu de la page l'excède. C'est le cas pour la deuxième fenêtre dans l'exemple précédant.
<FRAME SCROLLING="YES"> va créer des barres de défilement à droite et en bas de la page que son contenu soit suffisant ou non. C'est le cas pour la première fenêtre dans l'exemple précédant.
<FRAME SCROLLING="NO"> ne va créer aucune barre de défilement même si la page est insuffisante pour son contenu. C'est le cas pour la troisième fenêtre dans l'exemple précédant.
Cette directive permet de spécifier la zone de l'écran ou il convient de placer l'URL spécifié dans un lien HREF. Son utilisation principale est dans un contexte de cadres. Un cadre contient une table des matières et un second, la page sélectionnée.
Dans les liens de la table des matières il faut indiquer que les pages citées doivent être affichées dans la seconde fenêtre
Ceci se fait par la syntaxe :
<A HREF="fichier2.htm" TARGET="Nom_de_la_fenêtre"> Message </A>
La variable Nom_de_la_fenêtre sert à référencer les différentes fenêtres, et elle peut être initialisée de différentes façons, par une directive NAME="valeur".
Ainsi dans un document multi fenêtres, vous pouvez faire en sorte d'appeler un document dans une autre fenêtre depuis une fenêtre de contrôle.
L'appel à une fenêtre se fait par la variable TARGET :
Ainsi chacune de ces balises appellera la fenêtre définie par la directive NAME.
La balise TARGET doit être définie par une chaîne de caractères commençant par une lettre de l'alphabet.
Enfin des valeurs particulieres peuvent être attribués à TARGET, ils commencent par le caractère _ :
Essayez l'exemple pour voir toutes les implications de ces options. La commande TARGET="_blank" est utilisée pour exécuter l'exemple dans une nouvelle fenêtre.
©
Pédagogie Multimédia Conception