Accueil  Calendrier  FAQ  Rechercher  S'enregistrerS'enregistrer  Connexion  

Partagez | 
 

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

Aller en bas 
AuteurMessage
mYn
Modératrice
avatar

Féminin
Nombre de messages : 4409
Age : 25
Localisation : 93 [Seine St-Denis]
Logiciels : Photoshop

MessageSujet: [PHP] Réaliser un site avec des includes (Design avec header)   Dim 16 Nov - 17:56

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>

<!-- On ouvre le balise body et on met le fond de la page -->
<BODY background="http://url_de_limage_de_fond.jpg" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<!-- On met le design -->
<img src="http://img.png" align="left">

<!-- on ouvre maintenant la balise de la zone de texte pour le contenu (Remplacer les dimensions)-->
<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:
<!-- on referme la balise de la zone de texte pour le contenu -->
</div>

<!-- on ouvre maintenant la balise de la zone de texte pour le menu (Remplacer les dimensions)-->
<div style="position: absolute; left:LARGEUR DE LA ZONE DE CONTENU px; width:175px; top:HAUTEUR DU HEADERpx; z-index: 1;" align="justify">

<!--Vous pouvez maintenant mettre votre texte-->
<h1> Menu</h1>
Lien<br>
Lien<br>
Lien<br>
Lien<br>
Lien<br>
Lien<br>

<!--Et on oublie pas de refermer les balises body et html-->
</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 qui permet d'afficher le haut du site -->
<? include'header.php';?>

<!-- Le contenu de votre site en HTML (vous pouvez aussi ajouter un script en PHP)  -->
<B>Bienvenue</B>
 Bonjour !

<!-- Include qui permet d'afficher le menu du site -->
<? 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.


Dernière édition par mYn le Dim 16 Nov - 18:04, édité 2 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://kpweb.c.la/
mYn
Modératrice
avatar

Féminin
Nombre de messages : 4409
Age : 25
Localisation : 93 [Seine St-Denis]
Logiciels : Photoshop

MessageSujet: Re: [PHP] Réaliser un site avec des includes (Design avec header)   Dim 16 Nov - 18:02

    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 */
}


Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://kpweb.c.la/
 
[PHP] Réaliser un site avec des includes (Design avec header)
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Webjam : créer un site en ligne
» Réaliser un tube avec le filtre GML Matting
» problème connexion certains sites seulement
» Acheter un Garmin d'occasion
» problème connexion certains sites

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Learning Design :: World wide web :: Les tutoriaux :: Le PHP-
Sauter vers: