Structure et mise en page du site

Vous êtes ici : Accueil >> Créer un site dynamique >> Structure du site XHTML et CSS >> Structure et mise en page du site

Structure et mise en page du site

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 :

Le corp de la page.
Le pied de page.
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 et .
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.

Suite : Création de la base de données

Catégorie Créer un site dynamique

Commentaire sur : Structure et mise en page du site

Structure et mise en page du site