Trackin
html008
Les cours HTML1. Structure d'un document HTML
2. Le traitement du texte
3. Listes d'élément
4. Les liens hypertextes
5. Les images
6. Attributs de présentation
7. Les tableaux
8. Les frames
9. Concept avancé
Kezako, frames? Et pourtant vous en avez rencontré sur Internet. Les frames sont les cadres créés dans la fenêtre de votre navigateur. Chaque cadre peut recevoir un fichier HTML différent. Ce principe est surtout utilisé pour des barres de navigations, des hauts de page (où sont placés des publicités ou plus simplement le nom de la compagnie ou du site visité). Un moment très en vogue, les frames tendent à se faire plus rares sur Internet. D'abord parce que la mise à jour du site est plus difficile (vous le verrez dans cette leçon) et surtout parce que les frames accroissent sensiblement les temps de chargement pour vos visiteurs. Qui plus est, esthétiquement, les frames ont tendances à "charger" le design des sites.
Dans le cas d'une page contenant deux frames, il faut au moins trois fichiers (un fichier par cadre créé - son contenu) :
- le fichier <FRAMESET>, celui qui répartit les cadres dans la fenêtre
- deux fichiers HTML pour le contenu de chaque cadre
Le fichier <FRAMESET>
Comme un tableau, un fichier frameset se construit en lisant les cadres de haut en bas, et de gauche à droite. Mais commençons par un exemple de code simple :
<HEAD>
<TITLE>Mon site</TITLE>
</HEAD>
<FRAMESET cols="20, *">
<FRAME SRC="fichier2.html" name="colDroite">
</FRAMESET>
</HTML>
Le fichier <FRAMESET> est le fichier qui crée et répartit dans la fenêtre les différents cadres (frames) de notre page. Les balises <FRAMESET> et </FRAMESET> remplacent les balises traditionnelles <BODY> et </BODY>.
Ici, nous avons créé deux colonnes, la première fait 20 pixels de large et la seconde occupe le reste disponible de la fenêtre du navigateur. Dans le colonne de gauche de 20 pixels de large - son nom étant "colGauche" -, nous chargeons le fichier "fichier1.html" et dans la colonne de gauche - "colGauche" -, nous chargeons le fichier "fichier2.html".
Au cas où le navigateur de notre visiteur ne supporterait pas les balises de frames, nous fournissons un contenu alternatif via les balises <NOFRAMES>. Ici, un lien vers fichier2.html.
Les attributs des FRAMES
1- Les attributs de la balise <FRAMESET> :
| cols="pixels / %, pixels / %" | crée des colonnes dont la largeur peut être spécifiée en pixels ou en pourcentage de la fenêtre totale. Les dimensions pour chaque colonne sont séparées par des virgules. (on note aussi qu'il est possible d'indiquer le signe "*" pour indiquer que la colonne occupe l'espace restant). |
| rows="pixels / %, pixels / %" | crée des cadres horizontaux (lignes). Il n'est pas possible d'utiliser cols et rows dans le même frameset (voir dans l'exemple en fin de leçon). |
| framespacing="pixels" | indique l'espace entre les deux cadres. |
| frameborder="pixels" | épaisseur de la bordure des cadres. |
| bordercolor="code héxadécimal" | couleur de la bordure des cadres (ici, les noms des 16 couleurs standard ne sont pas possibles). |
| border="pixels" | épaisseur de la bordure entre les cadres. |
NOTE IMPORTANTE : si vous désirez que vos cadres n'aient pas de bordure, il vous faut fixer les trois attributs suivants à la valeur de "0" pour que cela fonctionne sous Netscape et Internet Explorer : framespacing, frameborder et border. Certains de ces attributs sont redondants, mais c'est parce qu'ils ne fonctionnent soit que sous Internet Explorer soit sous Netscape.
2- Les attributs des balises <FRAME> :
| Src="fichier" | indique le fichier initialement chargé dans la fenêtre. |
| name="texte" | spécifie un nom pour la fenêtre créée. C'est particulièrement important car vous ferez appel à ce nom lorsque vous voudrez charger un fichier dans ladite fenêtre. |
| scrolling="yes / no / auto" | autorise ou non la présence d'ascenseurs de défilement pour le cadre. "auto" laisse au navigateur le soin d'afficher des ascenseurs si besoin est (c'est l'option par défaut si rien n'est spécifié). |
| marginheight="pixels" | marges disposées en haut et en bas du cadre. |
| marginwidth="pixels" | marges disposées de chaque côté du cadre. |
Bien que le nom que vous donnez à vos fenêtres soit libre, il existe certains noms qui sont réservés en HTML :
"_top" : le fichier est chargé dans la fenêtre entière (efface les frames)
"_blank" : une nouvelle fenêtre est ouverte dans votre navigateur pour y charger le fichier. L'ancienne fenêtre reste ouverte en arrière plan.
"_parent" : ouvre le fichier dans une fenêtre supérieure hiérarchiquement (dans le cas où plusieurs fenêtres du navigateur sont ouvertes).
3- Des fichiers HTML et des frames
En fait, rien ne différencie à première vue les fichiers HTML pour un site avec des frames des autres fichiers HTML. La seule différence s'observe dans les liens hypertextes : il faut préciser la frame de destination pour l'affichage du fichier à charger. Par défaut, si rien n'est indiqué, le fichier se charge dans le cadre où se trouvait le lien hypertexte.
Voici un exemple de code :
4- Exemples de codes pour des fichiers avec des Frames
<FRAME>
L'attribut COLS="largeur1,largeur2,...,largeurN" définit la largeur des différentes fenêtres en cas de division verticale.
La largeur s'exprime en pixels ou en %. Dans ce cas, on veillera à ce que le total soit égal à470;
On peut mélanger les deux :
<FRAMESET COLS="30%,70%">
<FRAME>
Pour l'instant, nos frames sont vides. On va donc leur donner à manger par des attributs de la balise :
On construit 3 fichiers HTML élémentaires que l'on place dans le même répertoire que le fichier de frames :
| A.htm | B.htm | C.htm |
| <HTML><BODY>
<H4>A</H4> </BODY></HTML> |
<HTML><BODY>
<H1>B</H1> </BODY></HTML> |
<HTML><BODY>
<H1>C</H1> </BODY></HTML> |
On reprend le fichier de frame précédent que l'on complète.
<FRAMESET COLS="30%,70%">
<FRAME SRC="C.htm">
Les ascenseurs, comme à la fenêtre A, apparaissent automatiquement.
Par l'attribut SCROLLING="yes/no/auto" de la balise <FRAME> vous pouvez indiquer si la fenêtre doit ou non posséder une barre de défilement.
NAME indique le nom de la fenêtre de telle sorte que cette frame puisse être utilisée comme cible d'un lien hypertexte.
Ainsi, je voudrais faire un lien sur B pour afficher le contenu de ce lien (prenons le fichier A.htm pour éviter de l'encodage) dans C .
Le fichier de frames devient :
<FRAMESET COLS="30%,70%">
<FRAME SRC="C.htm" NAME="fenetreC">
Et on met un lien vers A.htm dans le fichier B.htm en désignant comme cible la frame C.
<BODY>
</HTML>
Meilleurs partenaires Trackin VIP
