Voila,
Pour commencer un site avec un header et un fond, vous avez besoin de créer 3 pages en PHP : header.php qui contiendra votre header et votre fond, la page footer.php qui contient le menu, et la page index.php qui referme le tout, qui contient tout.
1) La première page est la page "header.php". Cette page ressemble à une page html pour ceux qui connaissent un peu, sauf qu'on a pas besoin de fermer les balises <HTML> et <BODY>. Ces balises seront terminées dans une autre page !
Voici le code à insérer dans votre nouvelle page ouverte avec Notepad ++
- 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">
Ensuite, on sauves la page sous "header.php" Tout ce qui est code à modifier sera fait plus tard en classe, je vous expliquerai le tout. Pour l'instant, ne modifiez RIEN !
2) Le menu : C'est la page qui termine le site, donc on oublie pas de fermer les balises de tout à l'heure !
Ouvrez une nouvelle page sous notepad++, puis insérez ce 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>
Comme pour la page header.pho, on oublie pas de sauver sa nouvelle page sous le nom de footer.php ! De même, les modifications seront expliquées en classe !
3) Index.php
Cette fois encore on ouvre une nouvelle page sous notepad++ que l'on sauvera à la fin sous "index.php"
Cette page regroupera grace aux include, les deux autres pages créées précédemment (header et footer)
C'est sur l'index.php qu'on arrivera quand on cliquera sur votre nom de site. En général, c'est sur cette page qu'on mets les news...
Code à insérer :
- 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';?>
Voilà !
L'étape suivante, une fois que vous avez sauvé les 3 pages, est de les mettre sur votre site grace à fillezilla ou un autre programme ftp
A ce sujet, un nouveau topic sera réalisé dans les prochains jours !
Topic réalisé grace au cours de mYn