Aide multipages html

Aide multipages html - HTML/CSS - Programmation

Marsh Posté le 26-02-2008 à 10:57:02    

Bonjour à tous, :hello:  
Voila je débute la création d'un site et j'aurais besoin de votre aide.
Je souhaiterais créer plusieurs pages, pour cela devrais je créer plusieurs copie de mon fichier html et juste changer le texte ou alors vous pouvez me conseiller une autre méthode?
J'avais pensé à créer une page avec juste le header, le menu et le fond et une autre pour le pied de page mais je ne vois pas trop comment faire
 
Merci d'avance  :jap:  
 
mon css:

Code :
  1. /* CSS  */
  3. body {
  4. background-color:#2A2A2A;
  5. color:#000000;
  6. font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
  7. font-size:70%;
  8. padding:0;
  9. margin:0;
  10. }
  12. div#contenu {
  13. background:url('./images/interface/bg_1.gif') repeat-y;
  14. width:780px;
  15. height:auto;
  16. margin:auto;
  17. }
  19. img { display:block; margin:0; padding:0; }
  20. a img { border:0; }
  21. div.clear { clear:both; }
  22. h1, h2, h3 { margin:0; padding:0; }
  23. .orange { color:#D27B1E; }
  25. div#contenu_2 {
  26. background:url('./images/interface/bg_2.gif') repeat-y;
  27. background-color:#FFF;
  28. width:746px;
  29. height:auto;
  30. margin-left:17px;
  31. }
  33. div#header {
  34. background:url('./images/interface/header.png') no-repeat;
  35. width:746px;
  36. height:162px;
  37. }
  39. div#name {
  40. width:654px;
  41. height:auto;
  42. position:absolute;
  43. margin:22px auto auto 46px;
  44. text-align:right;
  45. }
  47. div#name h1 { text-align:right; font-weight:normal; letter-spacing:-1px; }
  49. #nav {
  50. list-style: none ;
  51. margin: 0 ;
  52. padding: 0 ;
  53. overflow: hidden ;
  54. }
  56. #nav li {
  57. float:left;
  58. width: 149px;
  59. /*border: 1px solid #600;*/
  60. margin-right: 0px;
  61. color: #fff;
  62. background: #c00;
  63. border-color: #000000;
  64. }
  66. #nav li a {
  67. display: block ;
  68. background: #900 url(./images/interface/bg_menus.gif) left top no-repeat ;
  69. color: #fff ;
  70. font: 1em "Comic Sans MS", Courier, "Times New Roman", Verdana;
  71. font-size:13px;
  72. line-height: 1em ;
  73. padding: 4px 0 ;
  74. text-align: center ;
  75. text-decoration: none ;
  76. }
  77. #nav li a:hover {
  78. text-decoration: underline ;
  79. }
  81. div#contenu_3 {
  82. width:690px;
  83. height:auto;
  84. margin-left:17px;
  85. }
  87. div#txt {
  88. float:left;
  89. /*width:470px;*/
  90. height:auto;
  91. }
  93. div#txt p { margin-left:40px; padding:5px; }
  95. div.titre {
  96. width:auto;
  97. height:40px;
  98. margin-top:20px;
  99. }
  101. div.t_g {
  102. background:url('./images/interface/t_g.gif') no-repeat;
  103. width:21px;
  104. height:40px;
  105. float:left;
  106. }
  108. div.t_t {
  109. background:url('./images/interface/bg_t.gif') repeat-x;
  110. width:auto;
  111. height:40px;
  112. float:left;
  113. }
  115. div.t_t h2 { padding-top:12px; color:#FFFFFF; font-size:100%; }
  117. div.t_d {
  118. background:url('./images/interface/t_d.gif') no-repeat;
  119. width:21px;
  120. height:40px;
  121. float:left;
  122. }
  124. div#footer {
  125. background:url('./images/interface/footer.gif') no-repeat;
  126. width:746px;
  127. height:38px;
  128. margin-top:20px;
  129. font-size:80%;
  130. }
  132. div#footer p#copy_u { width:520px; margin-left:10px; text-align:center; float:left; }
  133. div#footer p#copy { width:162px; float:right; margin-right:33px; text-align:center; color:#FFFFFF; }


 
 
 
et mon fichier html
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  4. <head>
  5. <title>.::Quartes::.</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7. <meta http-equiv="Content-Language" content="fr" />
  8.  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  9.  <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <meta name="DC.Language" scheme="RFC3066" content="fr" />
  11. <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="Normal" />
  12. </head>
  13. <body>
  14. <div id="contenu">
  16. <div id="contenu_2">
  18.  <div id="header">
  20.   <div id="name">
  21.    <h1><span class="orange">Q</span>uartes</h1>
  22.   </div>
  24.  </div>
  26.   <ul id="nav">
  27.   <li><a href="index.html" title="Aller à  l'accueil">Accueil</a></li>
  28.   <li><a href="magasin.html" title="Visiter le magasin">Magasin en ligne</a></li>
  29.   <li><a href="conseiller.html" title="Utiliser le Conseiller">Conseiller</a></li>
  30.   <li><a href="apropos.html" title="Tout savoir de nous">A propos de nous</a></li>
  31.   <li><a href="*" title="Nous contacter">Nous contacter</a></li>
  32.   </ul>
  34.  <div id="contenu_3">
  35.   <div id="txt">
  36.    <div class="titre">
  37.     <div class="t_g"></div>
  38.     <div class="t_t">
  39.      <h2>Bienvenue chez quartes...</h2>
  40.     </div>
  41.     <div class="t_d"></div>
  42.    </div>
  44.    <p>texte </p>                                                     
  46.   </div>
  47.   <div class="clear">
  48.   </div>
  49.  </div>
  51.  <div id="footer">
  52.   <p id="copy">Une création de --- &copy; 2008</p>
  53.  </div>
  54. </div>
  56. </div>
  57. </body>
  58. </html>

Reply

Marsh Posté le 26-02-2008 à 10:57:02   

Reply

Marsh Posté le 28-02-2008 à 09:29:22    

Si tu utilises apache, regarde du côté des "server side include" (inclusions côté serveur), qui permettent d'assembler plusieurs composants (menus, entêtes, pieds de pages, ...) en une page.
Sinon, tu as le choix entre divers systèmes de templates (même principe), et si tu as l'intention d'y mettre des bases de données, un language tel que PHP ou ASP sera plus commode.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed