Quelques petites astuces...
La page qui contient les informations sur les frames s'appelle le framset. Il diffère assez d'une page HTML classique. Les indications qu'il contient, mises à part les balises <HEAD> et <TITLE>, ne concernent que les, frames.
|
|
La balise <FRAMESET> définit les informations proprement dites et divise la fenêtre du navigateur en plusieurs colonnes (de gauche à droite) ou lignes (de. haut en bas). Elles sont représentées par les attributs COLS (pour les colonnes) et ROWS (pour les lignes). Définissez leurs valeurs en pixels ou en pourcentages en commençant par la frames de gauche pour Ies colonnes (ou du haut pour Ies lignes).
Les balises <FRAME> établissent le nom de la page et du fichier à charger dans ces colonnes. L'attribut NAME Ies nomme (comme son nom l'indique d'ailleurs). Pensez à utiliser un nom précis, l'attribut SRC pointe, lui, sur le fichier HTML à charger dans la frame. Une fois encore, elle se présente de gauche à droite, ou de bas en haut.
Un essai en code ? Un frameset de base qui divise une page en deux colonnes se présente ainsi :
<HTML>
<HEAD>
<TITLE> Un petit exemple de frames </TITLE>
</HEAD>
<FRAMESET COLS= "100,500">
<FRAME NAME="vert" SRC="menu.htm">
<FRAME NAME="blanc" SRC="accueil.htm">
</FRAMESET>
</HTML>
Notez que la balise <FRAMESET> a besoin d'une balise de fermeture <IFRAMESET>, mais également que cette page ne contient pas de balise <BODY> (elle est remplacée par <FRAMESET>). Les navigateurs Netscape ignorent les frames s'ils détectent la présence d'une balise <BODY> avant leur description. Vous êtes prévenu(e) ! Enregistrez ce Fichier avec l'extension classique .htm.
Et si vous changez l'attribut COLS en attribut ROWS, la colonne devient un bandeau.
Vous avez toujours besoin de deux colonnes, mais cette fois l'une d'elles se divise en deux lignes, une pour la pub, l'autre pour le contenu principal du site.
|
|
|
Créez une nouvelle page HTML nommée pub.htm et colorez la en jaune :
Et maintenant, modifiez le frameset. Ajoutez une nouvelle balise <FRAMESET> à l'intérieur de la précédente :
La frame contenant la bannière fera 90 pixels de haut, et celle qui occupe le bas de la page se loge dans l'espace restant de la fenêtre du navigateur, c'est ce qu'indique le symbole * utilisé dans 1'attribut ROWS.
Pour qu'une page se charge dans une frame spécifique, il vous faut utiliser l'attribut TARGET de la balise <A>. La valeur de cet attribut correspond au nom de la frame définie dans le frameset.
Dans cet exemple, nous voulons charger les pages dans la frame appelée "blanc",
La page valentin.htm se chargera dans la frame blanche.
Si vous utilisez souvent la même frame comme cible, vous pouvez la définir comme cible par défaut dans la page. pour ça, servez-vous de l'attribut TARGET de la balise <BASE> dans l'en-tête de votre fichier HTML, :
si le contenu d'une page dépasse la taille de la frame, des barres de défilement apparaissent. A cet fin, on utilise l'attribut SCROLLING de la balise FRAME. SCROLLING ="yes" signifie l'affichage de ces barres. SCROLLING ="no" signifie la désactivation de ces barres.
Pour une utilisation universelle des frames ( internautes avec version non compatible frame ex netscape 1.0) , utilisez la balise <NOFRAME> dans le frameset. Elle se place après le dernier </FRAMESET> mais avant le </HTML>
La ligne qui sépare vos différentes frames se nomme bordure. On en fait ce qu'on veut très facilement. Quand Netscape 2.0 a introduit les frames dans le monde du HTML, les concepteurs de site ne supportaient pas cette bordure. Ils ont aussitôt inventé un attribut BORDER pour la faire disparaître. Comme par exemple :
Mais les bordures ne se limitent pas à apparaître/disparaître, être activées/désactivées. Elles possèdent une largeur propre, définie par l'attribut FRAMESPACING. La largeur séparant deux frames se mesure en pixels :
Si vous avez vraiment la manie du détail, rien ne vous empêche de choisir une couleur pour vos bordures. C'est l'attribut BORDERCOLOUR qui s'en chargera cette fois :
Bien sûr, les amoureux des beaux-arts seront déçus de savoir qu'ils ne pourront appliquer u'une seule couleur à la fois aux bordures, quel que soit le nombre de FRAMESET sur la page. La couleur utilisée dans le dernier FRAMESET écrasera toujours les couleurs définies précédemment.
Grand avantage des frames, le contrôle des marges des pages qui y sont incluses, c'est-à-dire l'écart entre le bord de la frame et le début du texte de celle-ci. Pour calibrer cette marge, utilisez les attributs MARGINWIDTH et MARGINHEIGHT de la balise FRAME.
MARGINWIDTH contrôle les marges horizontales du document entre le texte et les bordures gauche et droite de la page, MARGINHEIGHT les marges verticales entre les bordures du haut et du bas du document. Les deux se définissent en pixels. Une marge de 20 pixels à gauche, à droite, en haut et en bas de la page donne plus de clarté à vos textes. Donner une valeur de 0 à ces deux attributs leur confèrent un air de site à la mode.
Les frames sont « dimensionnables " à merci, simplement en lissant leurs bordures dans votre navigateur. Mais en tant que créateur, vous aurez sans doute envie que les surfeurs voient vos pages telles que vous les avez créées, et pas autrement. Alors, interdisez à vos lecteurs de redimensionner les frames de vos pages ! Placez simplement un attribut NORESIZE dans la balise FRAME concernée, pas besoin d'autre argument.
Vous pouvez toujours essayer de déplacer les bordures de vos frames, elles sont désormais bien fixées et ne bougeront pas de sitôt!
Bien qu'inventées par Netscape, les frames ont remporté un tel succès qu'Internet Explorer n'a pu s'empêcher de les intégrer dans sa version 3. Tout aurait été pour le mieux si Microsoft n'avait pas décidé d'y ajouter ses petites particularités. Est donc apparue la balise <IFRAME> que vous utiliserez sûrement très peu, mais qu'il vous faut pourtant connaître... ne serait-ce que par curiosité.
Bien sûr, dans un monde parfait, toutes les balises HTML devraient fonctionner de la même manière sur Internet Explorer, ou sur Netscape Navigator, et la vie des concepteurs de sites serait simple et heureuse. Mais... le monde n'est pas parfait! Il est tout de même bien dommage que la balise IFRAME ne soit pas devenue un standard, parce qu'elle facilite bien souvent la tâche.
Ces frames flottantes se placent n'importe où sur la page, et pas seulement sur le bord comme un cadre-frame traditionnel. Pour imager, une frame flottante équivaut un peu à un gigantesque champ texte au milieu de la page, à cela près que vous afficherez n'importe quelle page à l'intérieur (comme dans toute autre frame). Rappelez-vous : la balise IFRAME n'a pas besoin de frameset pour s'appliquer. Utilisez la balise <IFRAME>, et c'est tout.
Deuxième certitude : au contraire de <FRAMESET>, la balise <IFRAME> s'utilise dans le corps <BODY> </BODY> de la page HTML. Comme une image ou n'importe quel élément classique du HTML. II vous suffit de définir la taille de votre frame flottante :
Vous pouvez aussi exprimer ces valeurs en pourcentages, si vous le souhaitez. Souvenez-vous simplement que chacune des balises <IFRAME> se ferme par une balise </IFRAME>. Désormais, il vous suffit d'appeler le contenu de la frame. Comme dans beaucoup de cas, on utilise l'attribut source SRC à cette fin :
Charger une page dont la taille est plus grande que votre frame flottante n'est pas interdit : le navigateur ajoute alors automatiquement des ascenseurs sur les bords de la frame. Les options de la balise <IFRAME> sont limitées, mais elles existent! La position par défaut de la page est au centre, mais l'alignement est possible sur la droite ou sur la gauche de la frame. L'attribut est ALIGN :
Alternativement, il est possible d'utiliser les feuilles de style en cascade ou les balises <DIV> </DIV> pour perfectionner le positionnement de la frame. La finesse de la bordure est également définie par l'attribut FRAMEBORDER, et l'espace libre autour de la frame par les attributs VSPACE et HSPACE, respectivement pour l'espace vertical et horizontal.
Créer un lien vers une frame flottante fonctionne exactement de la même manière que créer un lien vers une frame tout ce qu'il y a de classique. Pour ouvrir un lien à l'intérieur d'une frame flottante, il vous faut d'abord le nommer :
Son nom établi, ajoutez l'attribut TARGET aux liens à utiliser :
Désormais, ce sera la page IMAGEI.HTM qui remplacera le contenu ACCUEIL.HTM de la frame flottante appelée ACCUEIL (quand ce lien sera activé bien sûr).
Une bonne idée pour présenter une galerie photos sans s'obliger à manipuler des pages trop longues à charger.