Créer son premier site web

Par Neuromancer

Les frames

Beaucoup de sites s’en servent mais je ne suis pas trop pour ça créé quelques problèmes avec les vieux navigateurs et d’autres petits désagréments mais c’est très pratique pour les webmasters débutants car cela permet d’afficher plusieurs pages sur une seule.

Un exemple ? L’ancienne version de Zebulon (pour ceux qui ont connu !). Le cadre et le menu du site étaient des frames.

Comment ça marche ? C’est simple. Nous allons prendre l’exemple d’un webmaster en herbe qui veut avoir un menu sur la gauche de son site. Cliquez ici pour voir son site.

L’index
En page d’accueil de son site (généralement c’est index.html chez la plupart des hébergeurs), il aura une page qui ressemblera à ça :

<html>
<head>
<title>Index</title>
</head>
<frameset cols=”150,*”>
<frame name=”menu” src=”framemenu.html” scrolling=”no” frameborder=”no”>
<frame name=”corps” src=”framecorps.html” frameborder=”no”>
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>

On détaille maintenant le code :
La structure de base reste la même. Ensuite à la place du body, on définit les frames avec la balise <frameset>. Le paramètre cols désignent 2 choses. D’abord que les frames seront verticales et ensuite la largeur des 2 frames : 150 (c’est en pixels. On peut le spécifier en % mais ce n’est pas recommandé à cause des différentes résolutions des visiteurs) pour celle de gauche et le reste pour celle de droite(*).
Ensuite on définit chaque frame avec la balise <frame>. Les différents paramètres sont assez faciles à comprendre :

  • name : c’est le nom du cadre. Indispensable car, on le verra plus tard, c’est utile pour pointer les liens du menu vers le corps.
  • src : comme une image, il faut donner la source du cadre qui est un document html (nous détaillerons leur contenu plus tard).
  • scrolling : 3 valeurs possibles. Soit on met “yes” et on aura toujours une barre de défilement à droite de la frame, soit on met “no” et on n’aura jamais de barre, soit on ne met pas le paramètre et le navigateur mettra la barre s’il y en a besoin.
  • frameborder : si on met “no” le cadre n’aura pas de bord, si on ne met pas le paramètre, il y aura un bord (je trouve que ça fait plus “classe” sans bord mais c’est une affaire de goût ;o)

Ensuite, viennent les balises <noframes>. Elles servent à définir ce que doit afficher le navigateur s’il n’est pas capable d’afficher les frames (les vraiment très vieux navigateurs).
Généralement, on met entre les balises <body> un texte du style : Votre navigateur n’est pas capable d’afficher les cadres. Veuillez télécharger un navigateur compatible pour naviguer sur notre site.
Les moins feignants feront une version de leur site sans frames.

Voilà, une fois cela fait, normalement on a plus à toucher à ce fichier index.html.

Le menu
C’est là que rentre en jeu la petite subtilité au niveau des liens. Voici un exemple :

<html>
<head>
<title>Menu</title>
</head>
<body bgcolor=”#c0c0c0″ text=”#000000″ link=”#0000ff” vlink=”#800080″ alink=”#ff0000″>
<div align=”center”><u><b><font size=”5″ color=”#0000ff”>Menu</font></b></u></div><br>
<a href=”frameacceuil.html” target=”corps”>Acceuil</a><br>
<a href=”frameimages.html” target=”corps”>Images</a><br>
<a href=”frameliens.html” target=”corps”>Liens</a><br>
</body>
</html>

Comme vous le voyez, c’est un fichier HTML normal. Mais la particularité, ce sont les liens. Pour que les liens pointent vers le cadre “corps”, il faut ajouter aux liens le paramètre target (qu’on a déjà vu) et la valeur de ce paramètre c’est le nom du cadre de droite (“corps”).

Le corps
Il y a la même subtilité que pour le menu. Voilà l’exemple :

<html>
<head>
<title>Acceuil</title>
</head>
<body>
<div align=”center”><u><b><font size=”5″
color=”#0000ff”>Acceuil</font></b></u></div><br><br><br>
<div align=”center”><font size=”7″><b><big>Bienvenue</big></b></font>
<br><br>Blablabla…<br><br>
Allez voir les <a href=”frameimages.html” target=”_self”>images</a> ou visitez les <a href=”frameliens.html” target=”_self”>liens</a>.</div>
</body>
</html>

Encore une fois, il faut rajouter le paramètre target aux liens. La valeur du paramètre est “_self” qui signifie que le lien pointe vers le cadre où il se trouve. On aurait pu mettre “corps” mais c’est bien de voir les différentes possibilités.

Vous aimerez aussi

S’abonner
Notifier de
guest
14 Commentaires
plus ancien
plus récent Le plus populaire
Commentaires en ligne
Voir tous les commentaires
TheClem

Un guide impecable 🙂
Bravo !

quadvosges

tres bien ce petit cour ;o)
merci

Neuromancer

Merci, j’espère avoir été clair malgré les petites fautes de frappe :op

Imrahil

Guide tres sympathique dont j espere faire une bonne utilisation 🙂

grobb

Merci! Tout compris, c’est quand que démarre les cours de javascript, de php et de flash? 🙂
@+

Neuromancer

Ben le PHP, je débute chuis pas vraiment un pro, le Javascript j’aime pas ça et le Flash chuis une bouse.
M’enfin, y a surement quelqu’un qui va se dévouer.

Ou alors ça sera moi quand j’aurais fini la formation que je vais faire.

ethaniel

wouhaa !!! vachement clair comme expliquation , je planais un peu maintenant j’y vois plus clair grace a toi (lol) merci ….

005

je vois qu’on en est au même point niveau “langages” Web: le PHP je commence, le JS j’aime pas ça et le Flash chuis une daube 😛 Faut voir aussi que l’interface de Flash est pas là pour aider…

† B3R7R4NÐ †

Alors là ça tombe HYPER BIEN parce que je commence en ce moment même à m’intéresser au sujet ! HTML, PHP, FLASH… les tutos HTML répondent exactement aux questions que je me posais, notamment les FRAMES. Bien joué, continuez !!!

khaman

trés bonne explication merci je vais crée mon site grace a toi cooll longue vie a toi tchao

Bruno costard

Bonjour,

Du clair, du précis, de l'essentiel… pour quelqu'un comme moi qui, pas doué en micro, à des tas d'idée pour des sites internet (monde fabuleux allant de l'extraordinaire au plus détestable) j'ai touvré, via cet article, des bases pour la compréhension global du fonctionnement de sites… Pouvez-vous me conseiller quelques lectures "claires" et suffisament "synthétiques" pour parfaire mon approche ?

D'avance merci.

higher

t’es vraiment génial, ce tutoriel reste parmi les meilleurs que j’ai rencontré sur le net. Félicitation, continue comme ça :bigglasses:

pedrolito49

Trés bonne explication, par contre je galére au niveau de l’affichage des images ou de la musique que je veux mettre sur mon site, chez ifrance comme multimania, il ne veux pas m’afficher ou lire les deux, pourriez vous m’aider? Est ce une histoire de .xhtml ou .html ? J’utilise web expert pour crée mes sites .

Wullfk

Super explicatif :), par contre pas bien compris l’histoire de l’espace illimité sur MultiMania (si on en fait la demande) car de base c’est que 1Go.
Mais bon c’est qu’un détail, par rapport aux explications fournis 😉

😉 😉 😉

14
0
Nous serions ravis d'avoir votre avis, laissez un commentaire !x