[PHP] Réaliser un site avec des includes (Design avec header)

Note : Pour faire un site en PHP je vous conseille d'utiliser Notepad++

I - Explications.

Je vais vous expliquer comment réaliser une page en PHP avec des inclusions simples mais plus spécifiquement avec un header de ce genre. La page se résumera à ça : Le "haut" (avec le header de votre site), le contenu (le texte et tout le blabla) et le menu (qui viendra refermer le code de votre page).
Il y aura donc 3 sortes de page : header.php (le haut) + index.php (le contenu) + footer.php (le menu)

II - Le haut.

On va commencer par la page " header.php "
Cette page est comme une page HTML normale sauf qu'il ne faut pas fermer les balises <HTML> et <BODY>. Ces balises seront fermées sur footer.php

Code:: <html>
<head>
<title>Titre de mon site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>


<BODY background="http://url_de_limage_de_fond.jpg" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>


<img src="http://img.png" align="left">


<div id="contenu" style="position: absolute; width:LARGEUR DU HEADER MOINS 190 px; z-index: 1; left:0px; top:HAUTEUR DU HEADERpx">

III - Le menu

On va maintenant s'attaquer au menu, c'est-à-dire footer.php !
C'est la page qui finit le site, donc on va fermer les balises body et html.

Le code :

Code:: 
</div>


<div style="position: absolute; left:LARGEUR DE LA ZONE DE CONTENU px; width:175px; top:HAUTEUR DU HEADERpx; z-index: 1;" align="justify">


<h1> Menu</h1>
Lien<br>
Lien<br>
Lien<br>
Lien<br>
Lien<br>
Lien<br>


</body></html>

IV - L'assemblage (sur l'index)

Pour finir, on va créer la page où se trouvera votre contenu. on appellera la page sur laquelle on arrivera sur votre site (celle avec les news par exemple) index.php.
On ajoute sur cette page 2 balises PHP. Ce sont des includes. Elles servent à afficher le haut du site (header.php) et le menu (footer.php)

Code:: 
<? include'header.php';?>


<B>Bienvenue</B>
Bonjour !


<? include'footer.php';?>

Pour faire les autres pages de votre site, mettez ce même code mais enregistrez-les sous un nom différent (par exemple biographie.php). Et surtout n'oubliez pas de mettre le .php en enregistrant votre page.

Votre page doit alors ressembler à ceci.

V - Le CSS

Maintenant on va créer une feuille de style en CSS pour mettre en forme la page. Si vous n'y connaissez rien en CSS lisez ce cours.

On commence par définir les caractéristiques générales de la page :

Code:: body
{
width: 800px;
margin: left; /* La page sera alignée à gauche */
background-image: url("http://img.jpg"); /* Image de fond de page */
text-align: justify;
font: verdana; /* Police du texte */
font-size: 10px; /* Taille du texte */
}

Ensuite on définit les zones de texte du contenu et du menu :

Code:: #contenu
{
padding: 5px; /* Espace entre le texte et la bordure de la zone de texte */
color: #B3B3B3;
background-color: #FFFFFF; /* couleur de fond */
background-image: url("http://img.png");
background-repeat: repeat; /* pour que l'image se répète */
border: 2px solid #777777; /* Vous pouvez ajouter une bordure. Dans ce cas, changez la couleur et l'épaisseur en fonction de ce que vous désirez comme résultat */
}

#menu
{
margin-left: 10px; /* Une marge pour écarter le menu du contenu */
padding: 5px; /* Espace entre le texte et la bordure de la zone de texte */
color: #393939;
background-color: #CDCDCD; /* couleur de fond */
background-image: url("http://img.png");
background-repeat: repeat; /* pour que l'image se répète */
border: 2px solid #667781; /* Vous pouvez ajouter une bordure. Dans ce cas, changez la couleur et l'épaisseur en fonction de ce que vous désirez comme résultat */
}

Et voici le résultat !

» Commencer un site... Avec un fond et un header.