Les cadres sont des fenêtres incorporées dans la fenêtre principale. Vous créez d’abord votre page d’accueil contenant des cadres qui appellent d’autres pages. Ainsi, vous pouvez afficher un haut de page avec une bannière, un logo ou un titre puis un menu de liens à gauche pour naviguer sur le site et enfin une fenêtre qui affiche le contenu des pages appelées par un clic.
L’intérêt de ce procédé est d’avoir un seul fichier d’en-tête et un seul fichier de menu, ce qui simplifie la mise à jour puisque toutes les pages appellent le même en-tête et le même menu. L’inconvénient, c’est que tous les navigateurs web n’affichent pas la page de la même façon, ainsi certaines pages présentent des bords rognés par le cadre. D’autre part, les moteurs de recherche trouveront une première page vide qui sert uniquement de structure pour afficher d’autres pages…
Nous préférons utiliser des tableaux. Il suffit, pour cela, de concevoir un gabarit de page pour la création des pages du site. Vous enregistrez cette page type sous un autre nom (Fichier/Enregistrer sous) pour créer un nouveau fichier et en modifiez le contenu pour produire une nouvelle page. Le menu peut être élaboré à partir d’une table de la base de données.
La structure de la page, elle, est calquée sur un tableau invisible qui aide à disposer les éléments de la page. Procédure à suivre Créez votre page d’accueil que vous appellerez index.htm ou index.html.
Contentez-vous de construire vos cadres et d’appeler les vrais pages.
Procédez ainsi :
Listing : Des cadres : cadres.html avec répertoire cadres
<html>
<head>
<title>Des cadres</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<frameset rows="80,*" cols="136,*" frameborder="NO"
border="0" framespacing="0">
<frame name="cornerFrame" scrolling="NO" noresize src="logo.html" >
<frame name="topFrame" scrolling="NO" noresize src="titre.html" >
<frame name="leftFrame" scrolling="NO" noresize src="menu.html">
<frame name="mainFrame" src="page.html">
</frameset>
<noframes><body bgcolor="#FFFFFF" text="#000000">
votre navigateur n’accepte pas les cadres.
</body></noframes>
</html>
Vous disposez vos cadres dans la page en les dimensionnant. Vous avez deux unités de mesure : le pixel ou le pourcentage. Le pourcentage est préférable car vous ne connaissez pas les paramètres d’affichage des machines des internautes. L’étoile permet aussi d’indiquer que la taille dépendra du contenu.
Dans l’exemple, deux cadres sont créés à l’horizontale. Le premier possède une hauteur de 80 pixels et le second s’adaptera à son contenu (étoile). Dans le premier, nous avons placé deux cadres : un pour afficher le logo du site et un pour afficher une bannière. À l’intérieur du deuxième cadre horizontal, deux nouveaux cadres sont dessinés à la verticale. Le premier, menu, est large de 136 pixels, le second, page, s’adapte à la
dimension restante.
L’attribut NORESIZE empêche le navigateur de changer la dimension du cadre et le paramètre SCROLLING caractérise la glissière, en bas ou à droite, sur laquelle une jauge coulisse pour révéler les parties cachées du cadre.
Chaque cadre a pour paramètres un nom donné par l’attribut NAME et l’URL de la page appelée par l’attribut SRC (abrégé de source). Les balises <noframes></noframes> renferment un code qui s’affichera
si le navigateur ne reconnaît pas les cadres, ce qui est de plus en plus rare.
Résultat du code ci-dessus
Les pages appelées sont créées, comme n’importe quelle page HTML :
<html>
<head>
<title>des cadres</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body bgcolor="#663366" text="#000000">
<h1 align="center"><font face="Arial, Helvetica, sans-serif"
color="#FFFFFF">LE
MENU</font></h1>
</body>
</html>
Remarquez le lien qui contient l’attribut TARGET (pour cible), avec le nom du cadre qui affiche le contenu, en l’occurrence le cadre page. Cette dernière caractéristique affichera la page demandée par le visiteur dans le cadre page, c’est-à-dire le cadre de droite.
L’intérêt de ce procédé est d’avoir un seul fichier d’en-tête et un seul fichier de menu, ce qui simplifie la mise à jour puisque toutes les pages appellent le même en-tête et le même menu. L’inconvénient, c’est que tous les navigateurs web n’affichent pas la page de la même façon, ainsi certaines pages présentent des bords rognés par le cadre. D’autre part, les moteurs de recherche trouveront une première page vide qui sert uniquement de structure pour afficher d’autres pages…
Nous préférons utiliser des tableaux. Il suffit, pour cela, de concevoir un gabarit de page pour la création des pages du site. Vous enregistrez cette page type sous un autre nom (Fichier/Enregistrer sous) pour créer un nouveau fichier et en modifiez le contenu pour produire une nouvelle page. Le menu peut être élaboré à partir d’une table de la base de données.
La structure de la page, elle, est calquée sur un tableau invisible qui aide à disposer les éléments de la page. Procédure à suivre Créez votre page d’accueil que vous appellerez index.htm ou index.html.
Contentez-vous de construire vos cadres et d’appeler les vrais pages.
Procédez ainsi :
Listing : Des cadres : cadres.html avec répertoire cadres
<html>
<head>
<title>Des cadres</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<frameset rows="80,*" cols="136,*" frameborder="NO"
border="0" framespacing="0">
<frame name="cornerFrame" scrolling="NO" noresize src="logo.html" >
<frame name="topFrame" scrolling="NO" noresize src="titre.html" >
<frame name="leftFrame" scrolling="NO" noresize src="menu.html">
<frame name="mainFrame" src="page.html">
</frameset>
<noframes><body bgcolor="#FFFFFF" text="#000000">
votre navigateur n’accepte pas les cadres.
</body></noframes>
</html>
Vous disposez vos cadres dans la page en les dimensionnant. Vous avez deux unités de mesure : le pixel ou le pourcentage. Le pourcentage est préférable car vous ne connaissez pas les paramètres d’affichage des machines des internautes. L’étoile permet aussi d’indiquer que la taille dépendra du contenu.
Dans l’exemple, deux cadres sont créés à l’horizontale. Le premier possède une hauteur de 80 pixels et le second s’adaptera à son contenu (étoile). Dans le premier, nous avons placé deux cadres : un pour afficher le logo du site et un pour afficher une bannière. À l’intérieur du deuxième cadre horizontal, deux nouveaux cadres sont dessinés à la verticale. Le premier, menu, est large de 136 pixels, le second, page, s’adapte à la
dimension restante.
L’attribut NORESIZE empêche le navigateur de changer la dimension du cadre et le paramètre SCROLLING caractérise la glissière, en bas ou à droite, sur laquelle une jauge coulisse pour révéler les parties cachées du cadre.
Chaque cadre a pour paramètres un nom donné par l’attribut NAME et l’URL de la page appelée par l’attribut SRC (abrégé de source). Les balises <noframes></noframes> renferment un code qui s’affichera
si le navigateur ne reconnaît pas les cadres, ce qui est de plus en plus rare.
Résultat du code ci-dessus
Les pages appelées sont créées, comme n’importe quelle page HTML :
<html>
<head>
<title>des cadres</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body bgcolor="#663366" text="#000000">
<h1 align="center"><font face="Arial, Helvetica, sans-serif"
color="#FFFFFF">LE
MENU</font></h1>
</body>
</html>
Remarquez le lien qui contient l’attribut TARGET (pour cible), avec le nom du cadre qui affiche le contenu, en l’occurrence le cadre page. Cette dernière caractéristique affichera la page demandée par le visiteur dans le cadre page, c’est-à-dire le cadre de droite.
Aucun commentaire:
Enregistrer un commentaire