[HTML] solution pour mon site

**cdevl32** · 18/09/2007, 06h45

Bonjour,

J'ai créer un site qui contient 4 pages .html et 1 page .css, je voudrais réaliser un template car pour toutes les pg il y a juste le contenu qui changent.

Pouvez vous m aider pour se template car je ne sais pas trop comment faire ?

merci à vous

index.html

Code HTML :

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
22
23
24
25
26
27
28
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<link href="itech.css" rel="stylesheet" type="text/css">
	</head>
 
	<body>
	<div id="conteneur">		
		<h1 id="header"><a href="index.html" title="ici votre logo"></a></h1>
 
		<ul id="menu">
			<li><a href="index.html">Accueil</a></li>
			<li><a href="bienetre.html">Bien être</a></li>
			<li><a href="minceur.html">Minceur</a></li>
			<li><a href="product.html">Nos Produits</a></li>
			<li><a href="mailto:email@adresse.com">Contact</a></li>
		</ul>
 
		<div id="contenu">
			<h2>Indiquez ici la description de votre société</h2>
				<p style="text-align: center"><b><a href="../shop.html">
                <font size="4" color="#FF0000">Retour vers Store online</font></a></b></p>
		</div>	
		<p id="footer">© Copyright 2007 Votre Société</p>
	</div>
	</body>
</html>

bienetre.html

Code HTML :

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
22
23
24
25
26
27
28
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<link href="itech.css" rel="stylesheet" type="text/css">
	</head>
 
	<body>
	<div id="conteneur">		
		<h1 id="header"><a href="index.html" title="ici votre logo"></a></h1>
 
		<ul id="menu">
			<li><a href="index.html">Accueil</a></li>
			<li><a href="bienetre.html">Bien être</a></li>
			<li><a href="minceur.html">Minceur</a></li>
			<li><a href="product.html">Nos Produits</a></li>
			<li><a href="mailto:email@adresse.com">Contact</a></li>
		</ul>
 
		<div id="contenu">
			<h2>Bien être xxxxxxxxxxxxxxxxxxxx</h2>
				<p style="text-align: center"><b><a href="../shop.html">
                <font size="4" color="#FF0000">Retour vers Store online</font></a></b></p>
		</div>	
		<p id="footer">© Copyright 2007 Votre Société</p>
	</div>
	</body>
</html>

itech.css

Code CSS :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
 
 
		body
		{
			margin: 10px 0 ;
			padding: 0 ;
			text-align: center ;
			font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
			background: #dea ;
		}
 
		div#conteneur
		{
			width: 770px ;
			margin: 0 auto ;
			text-align: left ;
			border: 2px solid #ab4 ;
			background: #fff ;
		}
 
		h1#header
		{
			height: 258px ;
			margin: 0 ;
			background: url(pomme.jpg) no-repeat left top ;
		}
 
		h1#header a
		{
			width: 400px ;
			height: 70px ;
			display: block ;
			background: url(title.gif) no-repeat ;
			position: left ;
			left: 350px ;
			top: 15px ;
		}
 
		h1#header a span
		{
			display: none ;
		}
 
		ul#menu
		{
			height: 35px ;
			margin: 0 ;
			padding: 0 ;
			background: url(bg_menu.gif) repeat-x 0 -25px ;
			list-style-type: none ;
		}
 
		ul#menu li
		{
			float: left ;
			text-align: center ;
		}
 
		ul#menu li a
		{
			width: 130px ;
			line-height: 25px ;
			font-size: 1.2em ;
			font-weight: bold ;
			letter-spacing: 2px ;
			color: #fff ;
			display: block ;
			text-decoration: none ;
			border-right: 2px solid #dea ;
		}
 
		ul#menu li a:hover
		{
			background: url(bg_menu.gif) repeat-x 0 0 ;
		}
 
		div#contenu
		{
			padding: 0 25px 0 100px ;
			background: url(bg_page.gif) no-repeat 15px 15px ;
		}
 
		div#contenu h2
		{
			padding-left: 25px ;
			line-height: 25px ;
			font-size: 1.4em ;
			background: url(little_apple.gif) no-repeat left bottom ;
			color: #9b2 ;
			border-bottom: 1px solid #9b2 ;
		}
 
		div#contenu h3
		{
			margin-left: 15px ;
			padding-left: 5px ;
			border-bottom: 1px solid #9b2 ;
			border-left: 3px solid #9b2 ;
			color: #9b2 ;
		}
 
		div#contenu p
		{
			text-align: justify ;
			text-indent: 2em ;
			line-height: 1.7em ;
		}
 
		div#contenu a
		{
			color: #8a0 ;
		}
 
		div#contenu a:hover
		{
			color: #9b2 ;
		}
 
		p#footer
		{
			margin: 0 ;
			padding-right: 10px ;
			line-height: 30px ;
			text-align: right ;
			color: #8a0 ;
		}
 
		pre
		{
			overflow: auto ;
			background: #dea ;
			border: 2px solid #9b2 ;
			padding: 5px 0 0 5px ;
			font-size: 1.2em ;
		}
 
 
		pre span
		{
			color: #560 ;
		}
 
		pre span.comment
		{
			color: #b30000 ;
		}

Idem pour les autres pages minceur.html ect

**trotters213** · 18/09/2007, 11h31

Tu peux par exemple utiliser un include (php) dans ton div contenu afin d'inclure une page en fonction du lien sur lequel tu cliques.

**cdevl32** · 18/09/2007, 13h27

Bonjour,

Merci à vous pour votre réponse, comment dois je faire pour l include ??

Merci à vous.

ps : sorry je suis débutant

**Momodedf** · 18/09/2007, 13h39

Include est une fonction en PHP permetant d'inclure une page dans une autre (entre autre).
La syntaxe est la suivante :

include("mapage.html");

Si tu ne connais pas ce langage tu peux commencer par ça :
http://php.developpez.com/cours/

**cdevl32** · 18/09/2007, 13h55

J ai essayer avec la doc mes je ne comprend pas comment je dois faire car toute mes pg son en .html

**Bisûnûrs** · 18/09/2007, 13h58

Renomme simplement tes pages en .php pour pouvoir utiliser la fonction d'include.

**cdevl32** · 18/09/2007, 14h10

désoler de vous faire perdre votre temps, serait il possible de m expliquer pas à pas les étapes à suivre pour faire un genre de template ?

Enfait tout fonctionne parfaitement mes vu que je vais encore rajouter 2 bouton en plus a ma pg index.html je trouve sa domage de chaque fois reprendre à nouveau le code existant.

Merci encore à vous

**onirisme** · 18/09/2007, 15h31

Bonjour,

Pour réaliser une sorte de template hyper simple en php avec 4 pages :

index.php -> Page d'accueil
page1.php -> Page1
page2.php -> Page2
etc...

Réalise une page template.php, cette page contiendra tous ce qui est récurrent. Tu mets tes balises <html>,< Head>, <body>. Dans cette page, tu pourras créer ton menu de navigation.

Le code de template.php :

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
 
<!--Document template.php-->
<html>
	<head>
	<link href="style.css">
	<!--etc... Tu mets tous tes informations necessaires-->
	</head>
<body>
	<!--Ici le document qui contient les informations recurentes :
	Un menu de navigation par exemple...-->
 
	<a href="#">Lien1</a>
        <a href="#">Lien1</a>
        etc...
</body>
</html>

Tu sauvegarde cette page. Il ne te reste plus qu'à l'inclure dans tous tes documents:

Code de la page index.php

Code :

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

1
2
3
 
<?php include("template.php"); ?>
<!--En dessous tu places le contenu de ta page index.php-->

Repete l'opération sur les autres pages.

Tu peux également utiliser la même méthode pour ajouter un footer.

Le résultat (en brut) est ICI

**cadoudal56** · 18/09/2007, 16h44

Cela necessite bien sur que tes pages soit hébergée sur un serveur qui accepte le PHP.
Qui plus est, en local, cela necessite que tu ai un serveur avec du PHP si tu veux devellopper tranquillement à la maison...

Il aurait peut-etre fallu commencer par ces pré-requis

@+
cadou

**cdevl32** · 18/09/2007, 22h35

bonsoir,

Pour se qui est de l installation en local tout fonction j ai Eseayphp 1.8.

Le problème c est que je bloque sur se template, mon source fonctionne parfaitement mes bon sa serais mieux qu il soit plus lisible avec un systeme de template.

bonne soirée

**Bisûnûrs** · 18/09/2007, 22h40

Si tu nous dis pas ce qui te bloque et si on n'a pas ton code source déjà réalisé jusqu'à maintenant, on va difficilement pouvoir deviner ton problème.

Et je pense que sur ce topic tu as tout ce qui est nécessaire à la réalisation d'un include.

**cdevl32** · 18/09/2007, 23h48

bonsoir,

Merci à vous pour vos réponse sa fonctionne, désoler encore mes pas simple les templates au début.

bonne soirée

**trotters213** · 19/09/2007, 10h28

Si je peux me permettre, je te déconseille très fortement la méthode de onirisme qui pond un code (X)HTML archi-faux : en effet si on regarde le code source de ses liens, il y a des balises hors de la balise <html>.

**onirisme** · 19/09/2007, 10h42

J'ai fais ça rapidement, le but n'était pas de réaliser un site complet mais d'expliquer une méthode et un principe de liaison.

Alors milles excuses pour la syntaxe... Je vais corriger les pages

**trotters213** · 19/09/2007, 10h54

Envoyé par onirisme

J'ai fais ça rapidement, le but n'était pas de réaliser un site complet mais d'expliquer une méthode et un principe de liaison.

Justement, la méthode n'est pas bonne c'est pour cela que je dis qu'il ne doit pas prendre exemple dessus. Ce que tu dis est l'inverse de ce qu'il faut faire : c'est dans ta page template.php que tu inclus les autres pages et non pas l'inverse

Envoyé par onirisme

Alors milles excuses pour la syntaxe... Je vais corriger les pages

Pas de problème, c'est simplement pour lui pour qu'il ne parte pas sur de mauvaises bases.

**onirisme** · 19/09/2007, 11h42

Je sais pas si ça va beaucoup t'aider et si c'est le bon forum...

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <title>TITRE DE LA PAGE</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="menu">
    <h1>Mon site</h1>
    <a href="index.php?page=accueil" title="Accueil">Accueil</a>
    <a href="index.php?page=page2" title="Page2">Page2</a>
    <a href="index.php?page=page3" title="Page3">Page3</a>
    </div>
<div id="contener">    
    <div id="pages">
    <?php
    //Liste des pages du site
    $listePages = array('accueil' => 'page1.php',
                    'page2' => 'page2.php',
                    'page3' => 'page3.php');
  
    //On test si les pages sont listées
    if ( (isset($_GET['page'])) && (isset($listePages[$_GET['page']])) ) {
      //Si c'est ok, on inclu la page demandée
      include($listePages[$_GET['page']]);
    } else {
      //Page de démarrage par défault
      include('page1.php');
    }
    ?>
    </div>
</div>
</body>
</html>

The document located at <http://onirisme.free.fr/dvp/template/index.php> was checked and found to be valid HTML 4.01 Strict. This means that the resource in question identified itself as "HTML 4.01 Strict" and that we successfully performed a formal validation using an SGML or XML Parser (depending on the markup language used).

Le lien - ICI

**trotters213** · 19/09/2007, 14h10

Mieux

Envoyé par onirisme

Le lien - ICI

Ton lien pointe vers ton localhost

**cdevl32** · 19/09/2007, 15h27

Bonjour,

Merci à vous pour vos réponse, je ne m 'en sors pas, j ai vraiment pas facile avec se template, je comprend le fonctionement mes pas au niveau du code se que je dois indiquer dans mon cas en + j ai une page .css se qui me complique les choses.

Serait t il possible de regarder mon source ?

encore merci à vous pour votre patience.

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Website PME</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
		<link href="itech.css" rel="stylesheet" type="text/css">
	</head>
 
	<body>
	<div id="conteneur">		
		<h1 id="header"><a href="index.html" title="ici votre logo"></a></h1>
 
		<ul id="menu">
			<li><a href="index.html">Accueil</a></li>
			<li><a href="services.html">Nos Services</a></li>
			<li><a href="tarif.html">Nos Tarifs</a></li>
			<li><a href="idee.html">Vos Idées</a></li>
			<li><a href="mailto:email@adresse.com">Contact</a></li>
		</ul>
 
		<div id="contenu">
			<h2>Indiquez ici la description de votre société</h2>
			<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx .</p>
			<h2>Indiquez une brève description des services proposés</h2>
			<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p>
				<h3>Indiquez les coordonnées de votre société ici</h3>
				<p>xxxxxxxxxxxxxxxxxxxxxxxxxx</p>
				<p style="text-align: center"><b><a href="../shop.html">
                <font color="#FF0000" size="4">Retour</font></a></b></p>
		</div>
 
		<p id="footer">© Copyright 2007</p>
	</div>
	</body>
</html>

services.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
22
23
24
25
26
27
28
29
30
31
32
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Website PME</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
		<link href="itech.css" rel="stylesheet" type="text/css">
	</head>
 
	<body>
	<div id="conteneur">		
		<h1 id="header"><a href="index.html" title="ici votre logo"><span>Logo de votre société</span></a></h1>
 
		<ul id="menu">
			<li><a href="index.html">Accueil</a></li>
			<li><a href="services.html">Nos Services</a></li>
			<li><a href="tarif.html">Nos Tarifs</a></li>
			<li><a href="idee.html">Vos Idées</a></li>
			<li><a href="mailto:email@adresse.com">Contact</a></li>
		</ul>
 
		<div id="contenu">
			<h2>Indiquez ici le contenu de ce service</h2>
			<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p>
		</div>
 
		<p id="footer">© Copyright 2007</p>
	</div>
	</body>
</html>

IDEM POUR idee.html et tarif.html

**onirisme** · 19/09/2007, 18h03

Envoyé par trotters213

Mieux

Ton lien pointe vers ton localhost

désolé...

ICI

Je vais regarder ça mais seulement demain...
C'est la journée des enfants... alors je donne un peu de temps à mon fils et je lui en prend un peu du sien

**cdevl32** · 19/09/2007, 22h16

Ok merci à vous, j ai encore essayer pas moyen de réaliser mon template.

bonne soirée.

[HTML] solution pour mon site

HTML

Discussions similaires

Partager

Partager