:De nombreuses questions concernent la création ou l'emploi de cadres (frames) pour la création de sites Web : j'espère que cette petite chronique vous aidera à résoudre vos questions propres...
Je ne vais pas polémiquer ici sur la question du "plein écran" ou des "cadres" : en effet, chacun à ses adeptes et comme également chaque solution à ses avantages et inconvénients, c'est à vous de décider...
Vous devez savoir que tous les navigateurs ne sont pas capables de visionner les sites avec des cadres mais heureusement, ceux-ci deviennent de plus en plus rares et nous verrons d'ailleurs que l'on peut, en quelque sorte, prévenir ce problème.
Organisation ?
En premier lieu, vous devez vous poser la question de l'organisation de votre écran : combien de cadres (2,3..), une ou des pages en plein écran, des cadres différents (pages avec 2 cadres, d'autres avec 3 etc.).
L'appel des autres pages et leurs liens vont dépendre de ces réponses car on ne créer pas un lien identique vers une page plein écran ou vers des cadres différents.
Cadre exemple
Prenons comme exemple un écran avec trois cadres : un cadre à gauche qui constituera le menu des pages, un à droite (centre bas) qui constituera le corps de la page et enfin un au-dessus (centre haut) qui pourra servir à diverses utilisations comme l'affichage de bannières ou de menus complémentaires.
Cet exemple n'est pas le plus simple mais comme j'ai déjà des informations sur les cadres dans ma page "cadres" de ma section "Outils", cela pourra être un complément d'information. Ce type de partage de l'écran correspondait à l'ancien site de Page-Web. J'ai en fait changé la disposition du site, en le partageant en deux cadres (frames) pour disposer d'une plus grande vision des pages. Le menu de gauche (image et couleur différente suivant les sections) permet de revenir au menu principal de la section. Il semble que cette nouvelle organisation plaît assez bien aux visiteurs ;-)
Procédure
Dans WebExpert, cliquez sur l'onglet "Tableaux, Cadres et Listes" et choisissez le troisième bouton "Insérer des cadres"
:
Ensuite, vous obtenez l'écran suivant :
Pour obtenir trois cadres comme nous le voulons, il faut créer deux colonnes et deux rangées et ensuite fusionner les deux rangées de gauches comme sur l'image ci-dessus !
Avec WebExpert 3.0, il est beaucoup plus facile de créer des cadres car l'assistant est très convivial. Pour créer nos trois cadres, c'est très simple.
Vous cliquez en premier lieu (par exemple) sur le bouton
"Diviser le cadre verticalement" et automatiquement, WebExpert divise le cadre : vous pouvez alors, visuellement changer le partage des cadres, comme le montre l'image suivante :
Ensuite, positionnez votre curseur dans le cadre que vous voulez diviser horizontalement et cliquez sur le bouton
"Diviser le cadre horizontalement", vous dimensionnez alors également le cadre comme vous le désirez :
Si vous avez oublié de bien positionner votre curseur dans le bon cadre, pour la division de celui-ci, rien n'est perdu ! faites un clic droit et choisissez "Supprimer", la division du cadre est supprimée et vous pouvez placer votre curseur dans le bon cadre à diviser et
recommencer ou plus simplement encore, employer les différents boutons :
"Supprimer le cadre"
- "Supprimer l'ensemble des cadres"
En cliquant sur les bouton
"Propriétés du
cadre" ou "Propriétés de l'ensemble des cadres", situés à gauche, vous allez déterminer les propriétés des cadres : par exemple, celui de gauche, qui va nous servir de menu (entre autres utilisations) :
Vous indiquez le fichier source, c'est-à-dire la page HTML qui va remplir ce cadre lors du lancement de votre site (ou page avec cadres) : ici, j'ai pris le fichier menu.html (autant rester simple non ?).
Vous devez ensuite donner un nom au cadre lui-même car il faudra dans les futurs liens, renseigner le navigateur dans quel cadre il doit placer telle ou telle page... Je l'ai également appelé "menu". Vous pouvez remplir les autres options en fonction de vos désirs comme les marges, ne pas redimensionner (changer les dimensions du cadres)... WebExpert
5 vous propose même de donner un nom à votre cadre ("Suggérer le nom du cadre"), en prenant le nom du fichier HTML que vous avez choisi comme source !
Appelons les deux autres cadres, respectivement "bannieres" pour celui du haut et "pageweb" pour celui du centre. Pour cet exemple, j'ai choisi de ne pas pouvoir redimensionner le cadre
(ainsi le cadre reste toujours identique) etc.
La procédure sera la même pour déterminer les propriétés de tous les cadres... Vous faites donc de même pour les trois cadres de cet exemple. Vous cliquez sur le bouton "OK" et WebExpert crée automatiquement les codes HTML de la page de définition des cadres.
Voici le code créé par WebExpert :
<FRAMESET COLS="24%,*">
<FRAME NAME="menu" SRC="menuch9.html" NORESIZE >
<FRAMESET ROWS="16%,*">
<FRAME NAME="bannieres" SRC="ex1.html" NORESIZE>
<FRAME NAME="pageweb" SRC="ex2.html" NORESIZE>
</FRAMESET>
<NOFRAMES>
<BODY>
Code réservé aux navigateurs qui n'ont
pas la possibilité de visionner des cadres (<=2.x)
</BODY>
</NOFRAMES>
</FRAMESET>
Propriétés additionnelles
Je préfère vous indiquer comment effectuer les autres réglages "à la main" car je sais par expérience que l'on oublie certaines options et le code étant créé, il faudra bien le changer s'il on veut ne pas passer son temps à recommencer plusieurs fois la même opération. Mais vous pouvez choisir ces options directement lors de la création des cadres, avec l'assistant de WebExpert 3.0 !
Dimensions
Je vous conseille 24% pour le menu et 16% pour celui du haut (l'autre possédera ce qui reste de l'écran).
Barres de défilement
Vous pouvez décider d'avoir des barres de défilement (automatiques) ou non : pour cet exemple, j'ai choisi de ne pas en avoir pour le cadre du haut : cela veut donc dire que je ne peux pas avoir d'image ou de texte qui dépasse la largeur et la longueur du cadre car l'utilisateur ne pourra pas faire défiler l'écran !
Pour ce faire, l'option suivante est ajoutée dans la ligne de code du cadre "bannieres" :
SCROLLING="no"
De cette manière, seules les barres de défilement (scrolling) du cadre "menu" et
"PageWeb" seront visibles, mais vous pouvez ajouter la même option pour les enlever éventuellement.
Beaucoup de visiteurs demandent : "Comment faire pour ne pas voir de séparation entre les cadres ?" En fait, vous ajoutez le code suivant : ["FRAMEBORDER="no"]. Bien sûr, si vous désirez qu'un barre de défilement puisse apparaître, dans le cas où c'est nécessaire, vous laissez l'option "automatique", c'est-à-dire, ne pas spécifier ni "SCROLLING="Yes" ni SCROLLING="no".
<FRAMESET COLS="24%,*">
<FRAME NAME="menu" SRC="menuch9.html" SCROLLING="Yes"
MARGINWIDTH=0 MARGINHEIGHT=0 NORESIZE >
<FRAMESET ROWS="16%,*"FRAMEBORDER="no">
<FRAME NAME="bannieres" SRC="ex1.html" SCROLLING="No"
MARGINWIDTH=0 MARGINHEIGHT=0 NORESIZE>
<FRAME NAME="pageweb" SRC="ex2.html" MARGINWIDTH=0
MARGINHEIGHT=0 NORESIZE>
</FRAMESET>
<NOFRAMES>
<BODY>
Code réservé aux navigateurs qui n'ont
pas la possibilité de visionner des cadres (<=2.x)
</BODY>
</NOFRAMES>
</FRAMESET>
Vous remarquez de suite qu'il y a une partie de code spéciale : celle-ci sert en fait aux navigateurs qui ne peuvent pas visionner les cadres et de cette manière, les utilisateurs voient quand même la page avec un <BODY> spécifique que vous choisissez ainsi que les lignes de texte et/ou liens éventuels vers les pages pour charger votre site en page plein écran ou celles des sites où ils peuvent télécharger des navigateurs actuels. La section située entre <NOFRAMES> et </NOFRAMES> servira à cela...
Vous pouvez bien sûr personnaliser autant que vous le désirez vos cadres par leurs dimensions etc.
Liens
La partie la plus difficile, pour les néophytes, consistent à créer les liens corrects qui vont permettre de placer les pages HTML qu'ils désirent dans ces différents cadres :
Vous avez sans doute déjà remarqué, lorsque vous créez des liens externes, qu'il y a un onglet spécial "Cibles pour cadre" :
C'est en fait à cet endroit que vous devez spécifier le nom du cadre qui doit recevoir la
page...
De même, si vous voulez que le lien sorte du cadre (plein écran), c'est là également qu'il faut le spécifier.
Une page appelée "graphiq" doit venir remplir le cadre du centre, voici le code :
En fait, le texte du lien est 'page"graphiq" et l'option cible du cadre [TARGET ="PageWeb"].
Si vous voulez envoyer la même page dans le cadre du haut : vous indiquez dans "Cibles du cadre" le nom du menu, c'est-à-dire "bannieres" (l'accent n'est pas nécessaire et sera d'ailleurs enlevé par WebExpert 3.0 si vous l'aviez indiqué) : idem si la page doit venir remplacer celle du menu, dans ce cas, c'est le nom "menu" qu'il faut indiquer.
Mais, comme le menu du haut ne peut pas être "déroulé", vous devez appeler une page qui ne comprend pas plus d'espace écran que celui qui a été choisi, sinon, l'utilisateur ne pourra voir qu'une petite partie de la page ;-)
(vous trouverez trois liens dans le menu exemple que vous pourrez visionner et/ou télécharger...)
Si vous voulez appeler deux pages, qui viennent respectivement se placer dans les cadres du haut et de droite (sans changer le menu), en voici le code :
|
ATTENTION : RESPECTEZ PARFAITEMENT LE LIBELLE DES LIGNES DE CODES, IL Y A DES GUILLEMETS MAIS ÉGALEMENT DES APOSTROPHES ET POINT-VIRGULE ! |
Le code est un peu plus compliqué et pour ne pas rendre cette chronique trop longue, je vous conseille d'aller voir ma section "Trucs et astuces" de ma section "FAQ", qui dans la rubrique "1CLIC" vous explique en détail comment procéder...Il faut savoir que Windows donne un numéro de fenêtre à chaque cadre et que l'on spécifie ainsi dans le lien une fenêtre en plus à charger.
Liens vers trois cadresComme je désire accorder aux lecteurs de ces chroniques un petit plus ;-), voici le code d'un lien qui appelle trois pages, chacune venant remplir chaque cadre (cadre "menu", cadre "banniere" et cadre "pageweb"). C'est celui qui est employé dans la page "ex3.html" des exemples ci-dessous.
<A HREF="ex2.html" onClick="parent.frames[1].location ='ex1.html'; parent.frames[0].location = 'menuch9.html'" TARGET="pageweb">Trois cadres chargés simultanément</A>
Si vous voulez sortir des cadres pour appeler une page (d'accueil par exemple) plein écran, vous choisissez dans "Cibles pour cadre" la puce "_top" qui correspond qui correspond au lien vers une page "plein écran", par exemple :
<A HREF="graphiq.html" TARGET="_top">page "graphiq"</A>
Pour revenir dans des cadres, il vous suffit de recharger la page HTML qui contient la définition des cadres (celle avec les noms des cadres etc., que nous avons créé en premier lieu).
Caractéristiques des pages...Les configurations des pages appelés sont rigoureusement identiques à celles des pages HTML habituelles sauf, dans le cas de celles qui vont venir se placer dans le menu du haut, il faut penser à la dimension réduite ! Il y aura donc un BODY, du texte et des liens etc. comme pour des pages normales plein écran.
Vous pouvez laisser libre cours à votre imagination et par exemple créer des "faux cadres" ou plutôt, des cadres qui ne sont pas visibles ?
Pour ce faire, vous créer les pages avec des images qui sont découpées entre celles-ci et vous ne mettez pas de barre de défilement : jouez également sur les marges pour que l'effet visuel semble ne pas découper l'écran en trois, deux etc. et ainsi, vous pouvez par exemple, faire venir dans le cadre du centre des images ou texte différent sans que le reste ne bouge : l'effet visuel peut être intéressant... Microsoft par exemple emploie souvent cette méthode...
Je vous recommande d'aller visionner ma page "cadres" dans ma section "Outils" après avoir lu cette chronique car, même si vous y trouvez une petite répétition (ou confirmation), vous y trouverez également d'autres exemples et informations.
Pages exemplesTéléchargez les pages qui vont vous servir d'exemple : cadres-exemples
Comme toujours, n'hésitez pas à me communiquer vos remarques ou questions éventuelles sur cette chronique ;-)Bon travail...