Introduction
Ce tutorial a pour but de vous apprendre à créer votre propre site et son
design, avec comme seule image, la bannière (autres images en option).
Voici ce que contiendra votre site :
- Un menu général à gauche
- Un sous-menu à droite
- Votre corps au centre
- Un pied de page
Voici ce dont vous aurez besoin :
- Un hebergeur (www.xdir.fr par exemple)
- Filezilla pour le transfert de vos fichiers sur votre serveur
- Notepad ou autre éditeur de texte pour le codage du site
- Une bannière
N'oubliez pas de sauvegarder assez souvent votre avancement.
C'est parti
1. La base du site en HTML
Ouvrez votre éditeur de texte.
On va commencer par créer un bloc "conteneur" qui contiendra le site et qui permettra d'aligner le tout parce qu'on l'aura centré :
- Code:
-
<center><div id="conteneur"></div></center>
Quand je ne le préciserai pas, vous insérerez le code dans ce bloc.
Mtn, on va créer un bloc qui contiendra votre bannière :
- Code:
-
<div id="header"></div>
Pour l'instant, on n'inserera rien dans les blocs, tout se mettra dans le CSS.
Ensuite on va créer trois blocs : deux menu et le corps. Je vous conseille de les mettre dans l'ordre suivant :
- Code:
-
<div id="menug"></div>
<div id="menud"></div>
<div id="corps"></div>
Et pour finir cette première partie, nous allons mettre notre pied de page :
- Code:
-
<div id="footer"></div>
N'oubliez pas de mettre des sauts a la ligne.
Voici ce que vous devriez obtenir :
- Code:
-
<html>
<head>
<title>Mon site</title>
</head>
<body>
<center>
<div id="conteneur"></div>
<div id="menug"></div>
<div id="menud"></div>
<div id="corps"></div>
<div id="footer"></div>
</div>
</center>
</body>
</html>
2. On met de l'ordre dans nos blocs
Après avoir fait un lien depuis votre fichier HTML vers la page CSS :
- Code:
-
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
enregistrez le (personnelemnt je l'ai appelé "index.html") puis ouvrez une nouvelle page vide et enregistrez-la ("style.css").
Cette page contiendra le style du site.
Nous allons commencer par donner une largeur au bloc "conteneur" :
- Code:
-
#conteneur {
width: 80%;
}
Pour rendre notre site un peu plus beau, on va lui donner une couleur de fond :
- Code:
-
body {
background-color: black;
}
Variante :- Spoiler:
Vous pouvez mettre une image en arrière plan :
- Code:
-
body {
background-image: url("fond-jpg");
}
Puis nous allons donner une hauteur, une largeur et une image du fond au bloc "header" :
- Code:
-
#header {
width: 500px;
height: 400px;
background-image: url("header.png");
}
Et maintenant c'est le plus dur de cette étape 2, positionner nos deux menus et le corps :
- Code:
-
#menug {
float: left;
border: 2px solid grey;
width: 15%;
height: 340px;
}
#corps {
border: 2px solid grey;
height: 340px;
width: 66%;
position: center;
}
#menud {
float: right;
border: 2px solid grey;
width: 15%;
height: 340px;
}
Option :- Spoiler:
Vous pouvez mettre une image (exemple) en arrière-plan de vos deux menus, cette image ne sera que en haut du bloc (par une repetition-x) :
- Code:
-
#menug {
float: right;
border: 2px solid grey;
width: 15%;
height: 340px;
background-image: url("fondmenu.jpg");
background-repeat: repeat-x;
}
Puis faites pareil pour le bloc droit.
Et pour finir cette deuxième étape, on va positionner le pied de page :
- Code:
-
#footer {
width: 100%;
border: 2px solid grey;
height: 20px;
}
Donc voici ce que vous devriez avoir dans votre page CSS :
- Code:
-
body {
background-color: black;
}
#conteneur {
width: 80%;
}
#header {
width: 500px;
height: 400px;
background-image: url("header.png");
}
#menug {
float: left;
border: 2px solid grey;
width: 15%;
height: 340px;
}
#corps {
border: 2px solid grey;
height: 340px;
width: 66%;
position: center;
}
#menud {
float: right;
border: 2px solid grey;
width: 15%;
height: 340px;
}
#footer {
width: 100%;
border: 2px solid grey;
height: 20px;
}
3. Le site prend forme
Bon si vous êtes un petit peu curieux vous aurez déjà ouvert votre fichier "index.html". Ok a part vos deux blocs de menu, le corps et la bannière, votre site est vide. Ne vous inquiétez pas c'est normal, tout ce qui nous reste à faire c'est insérer les liens et le texte.
Pour commencer, on va insérer le menu général à gauche :
- Code:
-
<p>
<h2>MENU</h2>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Divers</a></li>
</ul>
</p>
On va maintenant mettre le sous-menu à droite :
- Code:
-
<p>
<h2>ACCUEIL</h2>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Présentation</a></li>
<li><a href="#">Membres</a></li>
<li><a href="#">Divers</a></li>
</ul>
</p>
Un peu de texte à l'intérieur du corps :
- Code:
-
<h1>Accueil</h1>
<br />
Un petit peu de texte pour combler les espaces du corps du site.
Et pour finir les droits d'auteur dans le footer :
- Code:
-
<center>Copyright ++rammstein++ | tous droits reservés</center>
Variante :- Spoiler:
Vous pouvez mettre des liens à la place du "copyright".
Votre code HTML est deja un peu plus long qu'avant :
- Code:
-
<html>
<head>
<title>Mon site</title>
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
</head>
<body>
<center>
<div id="conteneur">
<div id="header"></div><br />
<div id="menug">
<p>
<h2>MENU</h2>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Divers</a></li>
</ul>
</p>
</div>
<div id="menud"><p>
<h2>ACCUEIL</h2>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Présentation</a></li>
<li><a href="#">Membres</a></li>
<li><a href="#">Divers</a></li>
</ul>
</p></div>
<div id="corps">
<h1>Accueil</h1>
<br />
Un petit peu de texte pour combler les espaces du corps du site.
</div><br />
<div id="footer"><center>Copyright ++rammstein++ | tous droits reservés</center></div>
</div>
</center>
</body>
</html>
4. Couleurs & alignement
Bon, notre site est terminé au niveau du codage HTML, il ne reste plus qu'à finaliser le CSS.
Tout d'abord, nous allons redonner de la couleur aux trois titres pour qu'ils soient visibles.
Les deux petits titres :
- Code:
-
h2 {
color: darkgrey;
}
Et le grand titre :
- Code:
-
h1 {
color: darkgrey;
}
Mtn il nous faut modifier le code CSS pour le corps, il faut y rajouter une couleur pour le texte, je choisis gris :
- Code:
-
#corps {
border: 2px solid grey;
height: 340px;
width: 66%;
position: center;
color: grey;
}
On fait pareil dans le "footer" :
- Code:
-
#footer {
width: 100%;
border: 2px solid grey;
height: 20px;
color: grey;
}
Il ne reste plus que nos deux menus. Il faut rendre leur puces en couleurs et les liens en couleur aussi. Pour les puces, elles se changent comme du texte, on va donc utiliser la fonction "color" :
- Code:
-
#menug {
float: left;
border: 2px solid grey;
width: 15%;
height: 340px;
color: grey;
}
- Code:
-
#menud {
float: right;
border: 2px solid grey;
width: 15%;
height: 340px;
color: grey;
}
On va maintenant mettre nos liens en couleur :
- Code:
-
a {
color: white;
}
Et on va les faire changer de couleur lorsqu'on les survole :
- Code:
-
a:hover {
color: black;
background-color: grey;
}
Option :- Spoiler:
Vous pouvez aussi mettre une couleur pour les liens visités mais personnelement je ne mets jamais :
- Code:
-
a:visited {
color: lightgrey
}
Et maintenant il ne reste plus que l'alignement des menus :
- Code:
-
ul {
text-align: left;
}
Conclusion
Ce tutorial est la preuve que l'on peut faire un site assez bien en peu de temps.
Vous pouvez toujours modifer mon code pour rajouter d'autres choses (par exemple rajouter un 3ème menu en dessus du bloc central).
Ce tutorial est tiré de mon dernier site :
www.site-essai.fr.tc/gz/
Mais dans ce tutorial je ne vous ai pas tout expliqué mais vous savez surement comment le faire (par exemple mettre deux menus a gauche).
Si vous avez des questions, des problèmes ou que vous voyez une erreur, n'hésitez pas à me contacter.
Copyright 2007 ++rammstein++