[XHTML] [Débutant] Aide pour navigation avec cadres

**calogerogigante** · 17/06/2006, 18h27

Bonjour !

Contexte de ma question : après des années d'utilisation intensive de Dreamweaver, je me décide enfin à vouloir comprendre et à coder moi-même mes pages web html.
Et, conscient de l'avenir du XHTML, je fais en ce moment une sorte d'étude "parallèle" des tutoriels concernant le HTML et des tutoriels concernant le XHTML (je suis résolument décidé à coder en XHTML dans le futur).

Ma question concerne les frames.
Je n'arrive pas à trouver un exemple simple et minimaliste mettant en oeuvre une page contenant deux cadres. Sur le cadre de gauche, le menu avec 3 liens simples, qui mènent chacuns vers une page xhtml (simples aussi) qui s'ouvriraient dans le cadre de droite.

La seule chose que j'arrive à faire, c'est ceci, une page avec deux frames affichant deux pages différentes :

index.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
                      "DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemple de cadres en XHTML</title>
</head>
 
<frameset cols="25%,*">
<frame src="page_01.html" />
<frame src="page_02.html" name="content" />
</frameset>
</html>

page_01.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Document page 1</title>
</head>
<body>
<p>Un simple petit paragraphe<br />de la page 1</p>
</body>
</html>

page_02.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Document page 2</title>
</head>
<body>
<p>Un simple petit paragraphe de la page 2</p>
<p>Comment faire ?</p>
</body>
</html>

Alors voilà.
Quelqu'un aurait-il un exemple ultra-simple d'une navigation à deux cadres (menu à gauche, ouverture des pages à droite) en XHTML ?

Merci d'avance...

[EDIT] J'ai lu le tutoriel suivant :
http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

Mais je trouve qu'il ne va pas assez loin. Je ne comprends pas
comment y mettre réellement en fonctionnement l'affichage des
pages dans le cadre principal.

**Kerod** · 18/06/2006, 05h44

Alors pour ouvrir ta page dans la frame principale tu composes ton lien ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="url de la page à charger dans la frame" title="Titre du lien" target="nom du frame">Texte, image ou autre</a>

ou tu peux carrément mettre cette petite ligne (il me semble que ce serait dans index pour toi):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <base target="nom frame destination">

Et il aura pour effet de définir par défaut le target de tous tes liens. Petit problème : si tu as des liens externes qui doivent s'ouvrir dans la fenetre entiere ou dans une autre fenetre tu devras redéfinir le target dans le lien

ps : le tutoriel que tu as lu ne s'applique pas à ton cas (enfin il me semble), car il y a pas d'utilisation de frame

**psychoBob** · 18/06/2006, 09h44

Vu que tu es en pleine révolution de ta conception de la création de site web, tu pourrais en profiter pour jeter à la poubelle les frames et passer au tout css.
Je pense pas que tu trouveras un développeur sur le forum pour te dire que les frames valent encore quelque chose

**calogerogigante** · 18/06/2006, 10h14

Envoyé par psychoBob

Vu que tu es en pleine révolution de ta conception de la création de site web, tu pourrais en profiter pour jeter à la poubelle les frames et passer au tout css.

Oui ! Oui, PsychoBob ! J'attaque aussi les CSS.

Mais je comptais y aller en douceur...

Je me suis en effet rendu-compte que des sites xhtml n'utilisaient plus les frames (et si c'est encore utilisé, c'est qu'on est en "xhtml-transitionnel").

J'ai aussi compris ça dans l'exemple du livre suivant aux éditions WROX

Code_du_livre

Où on y trouve l'exemple complet (et superbe) d'un site entièrement fait en xhtml. En effet, le menu de gauche est toujours recopié dans chaque page : et donc pas de frames !!

Mais j'ai l'impression qu'il y a tant de choses à apprendre en une fois, quand on passe de Dreamweaver au codage soi-même, que je préfère encore pour l'instant le transitionnel (passage en douceur) !!

Merci pour l'info Kerod. Je bidouille un mini-exemple, et je le posterais ici pour avoir vos avis...

**calogerogigante** · 18/06/2006, 15h55

Bon, voilà. J'ai enfin réussi à faire un mini site xhtml-transitionnel avec 3 cadres.
Tout est correctement validé par le w3c validator.
Les voici ci-dessous.

Mais j'ai un dernier petit problème. En mettant frameborder="0", les cadres sont encore visibles en BLANC !!!! Bigre de bougre !

Comment les supprimer ?

Voici les différents fichiers :

------------------------------------------------------
index.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Cadres - exemples</title>
</head>
 
<frameset rows = "15%,85%">
	<frame src = "banner.html" frameborder="0" noresize="noresize" />
	<frameset cols = "30%,70%">
		  <frame src = "nav.html" frameborder="0" noresize="noresize" />
		  <frame src = "display0.html" frameborder="0" noresize="noresize" name = "display" />
	</frameset>
 
	<noframes>
    <body>Ce site est mieux affich&eacute; sous Firefox.</body>
	</noframes>
</frameset>
 
</html>

------------------------------------------------------
banner.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Frameset Banni&egrave;re</title>
</head>
<body style="background-color:black; color:white;">
<h1 style="text-align: center;">Banni&egrave;re sup&eacute;rieure</h1>
</body>
</html>

------------------------------------------------------
nav.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Frameset Navigation</title>
</head>
<body style="background-color:gray; color:white;">
<h1 align="center">Cadre navigation</h1>
<ul>
<li><a href="display1.html" target="display">Display 1</a></li>
<li><a href="display2.html" target="display">Display 2</a></li>
<li><a href="display3.html" target="display">Display 3</a></li>
<li><a href="display4.html" target="display">Display 4</a></li>
</ul>
</body>
</html>

------------------------------------------------------
display0.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Frameset Display Area</title>
</head>
<body style="background-color:red; color:white;">
<br />
<h1 align="center">Affichage d'accueil</h1>
<br />
<br />
<br />
<br />
<br />
<br />
<p align="center">Bienvenue sur ce site d'essai !</p>
</body>
</html>

------------------------------------------------------
display1.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Page 1</title>
</head>
 
<body style = "background-color:beige;">
<h1 align = "center">Cadre num&eacute;ro 1</h1>
<br />
<br />
<br />
<p align = "center">
Voici le cadre 1.
</p>
 
</body>
</html>

------------------------------------------------------
display2.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Page 2</title>
</head>
 
<body style = "background-color:green;">
<h1 align = "center">Cadre num&eacute;ro 2</h1>
<br />
<br />
<br />
<p align = "center">
Voici le cadre 2.
</p>
 
</body>
</html>

------------------------------------------------------
display3.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Page 3</title>
</head>
 
<body style = "background-color:blue; color:white;">
<h1 align = "center">Cadre num&eacute;ro 3</h1>
<br />
<br />
<br />
<p align = "center">
Voici le cadre 3.
</p>
 
</body>
</html>

------------------------------------------------------
display4.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Page 4</title>
</head>
 
<body style = "background-color:yellow;">
<h1 align = "center">Cadre num&eacute;ro 4</h1>
<br />
<br />
<br />
<p align = "center">
Voici le cadre 4.
</p>
 
</body>
</html>

------------------------------------------------------

Comment venir à bout de ces bords blancs ?

**Kerod** · 18/06/2006, 17h59

Il faut juste modifier le code de index :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Cadres - exemples</title>
</head>
 
<frameset rows = "15%,85%" framespacing="0" border="0">
    <frame src = "banner.html" frameborder="0" noresize="noresize"/>
    <frameset cols = "30%,70%">
          <frame src = "nav.html" frameborder="0" noresize="noresize" />
          <frame src = "display0.html" frameborder="0" noresize="noresize" name = "display" />
    </frameset>
 
    <noframes>
    <body>Ce site est mieux affich&eacute; sous Firefox.</body>
    </noframes>
</frameset>
 
</html>

**calogerogigante** · 18/06/2006, 23h43

Génial !!
Je peux mettre ce post en résolu !

Merci Kerod pour ton aide...

[XHTML] [Débutant] Aide pour navigation avec cadres

HTML

Discussions similaires

Partager

Partager