Structure et mise en page du site

Attention, depuis PHP 5.5.0, certaines extensions SQL sans doute utilisées dans ce tutoriel peuvent être obsolètes et seront supprimées dans le futur, vous devez donc adapter les codes! Exemples ici.

Pour commencer, nous allons partir d'une structure XHTML simple qui sera utilisé tout au long des différents tutoriels. Cette structure servira aussi bien pour la partie "visible" du site que pour la partie administration.

Voici donc le code XHTML que nous allons utiliser :

<!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" lang="fr-fr">   <head>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <title>***</title> <meta name="Description" content="***" /> <link href="style.css" rel="stylesheet" type="text/css"/>   </head>   <body>   <div id="moncadre"> <div class="cadredumenudroite"> <h1>***</h1> <ul> <li>***</li> </ul> </div>   <div class="cadrecentrale"> <h1>***</h1>   <p>Contenu.</p>   </div>     <div class="footer">***</div>   </div>   </body>   </html>
Pour une mise en page plus sympa, nous utilisons du CSS (style.css):
body {
background: #078FB9;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 10px auto;
}
/*Conteneur*/
#moncadre {
width:900px;
margin: 0px auto;
background-color:#FFF;
border:solid 1px #0072A1;
overflow:auto;
}
/*Menu de droite*/
.cadredumenudroite {
float:right;
text-align:left;
width:140px;
background-color:#FFF;
border-left:1px solid #D5F4FF;
color:#666666;
margin:5px;
padding:5px;
}
.cadredumenudroite h1{
color:#FFF;
font-size: 15px;
border: 1px solid #0072A1;
background:#0072A1;
margin:5px;
padding:5px;
text-align:center;
}
/* cadre du conteneur */
.cadrecentrale {
width:720px;
border:1px solid #D5F4FF;
background-color:#FFF;
margin:5px;
padding:5px;
}
/*Pied de page*/
.footer {
color:#669900;
margin:5px;
padding:5px;
}
/*liste*/
ul{
list-style-type: none;
padding: 5px;
}
/*************Décoration*******************/
/*Titre*/
h1 {color:#0072A1;font-size: 25px;border-bottom: 1px solid #0072A1;}
h2 {color:#669900;font-size: 20px; border-bottom: 1px solid #669900;}
h2 a{color:#669900;}
h2 a:hover{color:#000;text-decoration : none;}
/*Lien du menu*/
a.menu {
display : block;
text-decoration : none;
color : #0072A1;
}
a.menu:hover {
display : block;
background : #D5F4FF;
text-decoration : none;
color : #0072A1;
}
/*Couleur des liens*/
a {color : #FF0096; text-decoration:none;}
a:hover {color : #FF0096; text-decoration:underline;}
/*on enlève les bordures aux images*/
img {border:none;}
/*un cadre*/
.cadre{
height: auto;
background:#ECFAFF;
border: 1px solid #D5F4FF;
margin:5px;
padding:5px;
overflow:auto;
}
/*Erreurs*/
.erreur{
text-align: center;
color : red;
font-weight: bold;
border: 1px solid red;
height: auto;
width: 300px;
margin:auto;
padding:5px;
}
/*Formulaire*/
fieldset {border:1px solid #D5F4FF;}
form {text-align : center;}
input {
border : 1px solid #D5F4FF;
background : #ECFAFF;
}
input:focus { background : #fff; }
textarea {background : #ECFAFF; border : 1px solid #D5F4FF;}
textarea:focus { background : #fff;}
/***********tableau***************/
td {text-align: center; border: 1px solid #FFFFFF; background-color:#FBFBFB ; 
color
:#000000; } .hauttd {text-align: center; font-weight: bold; background-color:#ECFAFF;} /*autre*/ pre,blockquote{ height: auto; background:#ECFAFF; border: 1px solid #D5F4FF; margin:5px; padding:5px; }
Il est à noter que cette feuille de style nous servira pour la partie administration et la partie "visible", sinon dit, le site en lui même.

Découpage du site


Pour nous faciliter la tâche pour la suite, nous allons découper la partie XHTML en 3 parties qui seront :
  1. Le corp de la page.
  2. Le pied de page.
  3. Le menu.
Nous utiliserons donc des includes pour "assembler" le tout.

Le corp de la page correspond au modèle ou gabarit que nous utiliserons sur l'ensemble du site (gabarit.php) :
<!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" lang="fr-fr">
 
<head>
 
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  <title>***</title>
  <meta name="Description" content="***" />
  <link href="style.css" rel="stylesheet" type="text/css"/>
 
</head>
 
<body>
 
<div id="moncadre">
<?php include('menu.php');?>
 
<div class="cadrecentrale">
<h1>***</h1>
 
<p>Contenu.</p>
 
</div>
 
 
<?php include('footer.php');?>
 
</div>
 
</body>
 
</html>
Le menu (menu.php) :
<div class="cadredumenudroite">
<h1>***</h1>
<ul>
<li>***</li>
</ul>
</div>
Le pied de page (footer.php) :
<div class="footer">***</div>

Une base en commun...

Histoire de partir sur la même base, nous allons voir les fichiers et dossiers que nous devons avoir en commun.

Nous allons partir d'un dossier que l'on va nommer "creer-un-site-dynamique" que vous créez sur votre bureau.
Dans ce dossier, nous plaçons le fichier gabarit.php, menu.php, footer.php et style.css.
Toujours dans ce même dossier, nous créons un nouveau dossier que l'on va nommer "admin" et dans lequel vous y placez une copie de gabarit.php et de menu.php.
Dans le dossier "admin", vous créez un nouveau dossier nommé "images" qui contient les 2 images suivante modifier et supprimer.
Voila pour la base ^^.

Note: Dans les tutoriels suivant et lorsque nous avons besoin de créer une nouvelle page, nous ferons un simple copié/collé du contenu du fichier "gabarit.php". Donc, souvenez-vous bien que: nouvelle page=copier/coller du contenu du fichier "gabarit.php" .. je ne le répeterais pas ;)!

PS: Utilisez les mêmes noms de fichiers et de dossiers que moi. Vous pourrez les modifier par la suite si celà vous arrange.

Voir/déposer un commentaire (7) | Signaler un problème