LES CADRES


Il est possible de diviser l'écran en plusieurs cadres ou fenêtres ( appelés frames en anglais) detaille variable: soit un cadre supérieur, soit une cadre latéral, soit les deux et d'autres combinaisons sont possibles.

Inconvénients:

- Tous les logiciels ne sont pas capables de lire des présentations FRAMESET initiées par Netscape.

- L'abus peut réduire appréciablement la taille de l'écran occupant l'espace de la page principale.

Avantages:

- Permet de mettre sous les yeux, soit au haut (ou au bas) de la page, soit latéralement la liste des documents qui apparaîtront dans le grand cadre.

Une ou deux lignes en plus petit caractère, occupant 10 -15 % du haut (ou au bas) de l'écran par exemple, permet d'établir de 10 à 12 liens vers la page principale.

Cette liste pourrait être plus longue en plaçant le cadre en colonne latérale gauche, mais la longueur des mots est un peu limitéeet la largeur de l'écran est réduite.

Ceci ne convient pas pour la table des matières d'un livre entier , mais pour un chapitre ou un groupe plus limité de documents.
-----------------------------
Le conteneur FRAMESET.

Cette balise se trouve à l'intérieur de <HTML>, il n'y a pas de BODY.

Elle remplace et équivaut à BODY dans des documents sans cadres.

Elle contient le marqueur FRAME, qui se trouve à l'intérieur de FRAMESET et qui correspond à un cadre.

Elle peut contenir le conteneur NOFRAMES qui contient un document standard avec BODY pour être utilisé par un navigateur qui necomprend pas FRAMESET.

Les navigateurs qui comprennent FRAMESET ignorent la balise NOFRAMES et les navigateurs qui ne comprennent pas FRAMESET (de plus en plus rare) affichent le contenu de NOFRAMES, ignorant FRAMESET.

Lorsque des balises ne sont pas reconnues par un navigateur, il les ignore purement et simplement.

Notons pour être complet que un FRAMESET peut se trouver à l'intérieur d'un autre FRAMESET.

La balise FRAMESET accepte deux attributs: ROWS et COLS.

Un document FRAMESET doit comporter soit ROWSqui indique des séparations en cadres horizontaux, soit COLS qui indique une séparation verticale.

Toutefois FRAMESET peut comporter les deux. attributs: d'abord ROWS (avec son contenu, un cadre supérieur étroit et un cadre inférieur le plus haut), puis COLS avec son contenu en deux cadres verticaux qui divisent le grand cadre créé ci-dessus. .
Il y aura alors 3 FRAMEs.

Dans ROWS et COLS , on indique le nombre de colonnes, séparées par des virgules, soit en pixels, soit en % dont le total ne dépassera pas 100%!

Nous retiendrons ici l'expression en %, la plus simple à "manipuler"

Ex: <FRAMESET ROWS="20%, 70%,10%">

Ceci donnera trois cadres horizontaux répartissant l'écran en trois parties inégales.

Ex: <FRAMESET COLS="20%, 80%">

Ceci indique deux colonnes verticales. On peut aussi écrire <FRAMESET COLS="20%,*"> (L'astérique équivaut "au reste")

Notons que, avec la souris, on pourra modifier la largeur des cadres,si on n'a pas introduit de balise qui l'interdit (NORESIZE)
----------------------------------------------
La balise FRAME

Elle se trouve à l'intérieur de FRAMESET.
Elle définit les propriétés et le contenu de chacun des FRAMEs annoncées par FRAMESET.

Elle comporte essentiellement deux attributs : SRC et SCROLLING.

SRC="URL" définit l'URL du document qui doit êtreinséré dans le FRAME.

SCROLLING="yes" - optionnel - définit qu'on peut faire défiler le contenu du cadre, si le document dépasse le cadre. Par défaut, c'est "yes"

Si l'on veut éviter le défilement, on écrit SCROLLING="No"

Par défaut, il y aura moyen de rétrécir ou élargir les cadres avec la souris.

Le document qui se place dans le cadre est un document HTML normal, comportant BODY avec ses attributs éventuels, tels que la couleur

Notons que tant la balise FRAMESET que la balise FRAME acceptent l'attribut BORDERCOLOR , qui permet de définir la couleur du cadre. Si cet attribut se rapporte à FRAME, il se substitue à celui qui aurait étéattribué à FRAMESET.
La couleur s'exprime de la même manière que pour BGCOLOR(voir la balise BODY).

On peut assi éviter les bords du cadre en indiquant : FRAMEBORDER="0"
--------------------------------------------------
La balise NOFRAMES

Comme dit plus haut, cette balise est indispensable pour que le document puisse être lu si on ne dispose pas d'un navigateur capable de représenter des cadres.

Exemple:

<HTML>
<HEAD>
<TITLE>HOMEPAGE for FRAMES</TITLE>
</HEAD>

<FRAMESET ROWS="35%,65%">

<NOFRAMES>
<BODY BGCOLOR="#FFFFFF">
<CENTER><H2>ATTENTION</H2></CENTER>
<P ALIGN="center">
<B>Si vous lisez ce texte, votre navigateur ne permet pas de visionner plusieurs cadres sur votre &eacute;cran. Vous pouvez cependant utiliser l'alternative
<A HREF="noframes.html">NOFRAMES</A></B>
</BODY>
</NOFRAMES>
<FRAME SRC="exemple3.htm" SCROLLING="YES">
<FRAME SRC="exemple1.htm" SCROLLING="YES">

</FRAMESET>
</HTML>

N.B.: Le document "noframes.html" est une page HTML normale comprenant les liens vers le contenu des cadres de FRAMESET.

Alternative : 3 cadres:

Cet exemple ne sert qu'à montrer la possibilité de créer trois cadres. Un deuxième FRAMESET divise le deuxième cadre horizontal mais il n'y a encore aucun lien entre les documents mentionnés dans la colonne de gauche et la grande cadre.

<HTML>
<HEAD>
<TITLE>HOMEPAGE for FRAMES</TITLE>
</HEAD>

<FRAMESET ROWS="15%, 85%">

<FRAME SRC="exemple3.htm" SCROLLING="YES">
<FRAMESET COLS="20%, 80%">
<FRAME SRC="framelist.htm">
<FRAME SRC="exemple1.htm" SCROLLING="YES">
</FRAMESET>
</FRAMESET>
</HTML>

L'utilisation la plus intéressante des cadres est sans conteste la possibilités de placer sur le même écran, àla fois une liste de documents appelables et chacun de ces documents HTML, eux-mêmes pouvant avoir des liens avec d'autres documents externes.

Pour cela, il faut que chacun des documents d'une liste soit complétépar un nouvel attribut appelé TARGET indiquant dans quel cadre le document lié doit être placé.

De plus, il faut que le FRAME qui doit accueillir les documents mentionnés dans la liste soit doté de l'attribut NAME indiquant le nom du cadre.

Voici un exemple dans lequel nous reprenons tous les exemples de ce cours.

SELECTIONNEZ ce passage en rouge - COPIEZ - et IMPRIMEZ

<HTML>
<HEAD>

<TITLE>LIENS entre CADRES </TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">

<FRAME SRC="framelist.htm">
<FRAME SRC="bonjour.htm" NAME="frame2" SCROLLING="YES">

</FRAMESET>
</HTML>

----------------------------------------------------

Pour voir comment cet exemple est reproduit par le navigateur, cliquez I.C.I.

----------------------------------------------------
Remarquez que le deuxième FRAME, qui couvrira 80 % de l'écran, présente l'URL d'une page d'accueil ( bonjour.htm) et l'attribut NAME, suivi du nom du cadre (frame2)

Voyons à présent comment est écrit le document "framelist.htm"

<HTML>
<BODY>
<P>
<H3>Documents</H3>
<HR><BR>
<A HREF="exemple1.htm" TARGET="frame2">Exemple1</A>
<P>
<A HREF="exemple2col.htm" TARGET="frame2">Exemple2</A>
<P>
<A HREF="exemple4.htm" TARGET="frame2">Exemple4</A>
<P>
<A HREF="Biblio.exemple.htm" TARGET="frame2">Bibliographie</A>
<P>
<A HREF="Simpletab.htm" TARGET="frame2">Tableau simple</A>
<P>
<A HREF="Complextab.htm" TARGET="frame2">Tableau complexe</A>
<P>
<A HREF="Biblio.exemple.htm#neuro" TARGET="frame2">Lien dans untexte</A>
<P>
<A HREF="images.pdf" TARGET="frame2">Document en PDF</A>
<P>
<HR>
<P>
<A HREF="bonjour.htm" TARGET="frame2"><FONT SIZE="-1"> Retour &agrave; la page d'accueil</FONT></A>
</BODY>
</HTML>

REMARQUEZ que c'est une liste d'URL normale avec une seule différence, c'est l'attribut TARGET suivi du nom du cadre "frame2" qui dirige le document vers le NAME, attribut du FRAME précédent.

Le document à l'intérieur du grand cadre peut lui-même contenir des liens - à l'intérieur de lui-même ( ex.: Bibliographie) ou vers l'extérieur (ex 2 et 3)

Remarquez aussi l'URL précédant "Lien dans un texte" C'est la même adresse que pour la bibliographie complètée par # neuro qui renvoit vers une ancre <A NAME="neuro"> placée dans le texte "Biblio.exemple.htm". On peut ainsi se diriger directementà l'intérieur d'un plus long document.

Notez que le "Retour à la page d'accueil" pourrait être le retour à la table des matières d'un livre...

Enfin : Un exemple plus complexe d'un cadre imbriqué dans un autrecadre : 3 images et un document déroulant.


--------------------> Voir l'exemple

--------------------> Voir l'écriture en HTML


Retour au sommaire