Aujourd'hui, je vous propose un petit tuto qui j'espère en ravira plus d'un ! On va commencer par présenter ce projet :
On va créer un site clair, concis et très simple d'utilisation : tout ça avec des divs, sans tableaux ! Je vous entend d'ici, "Bien beau tout ça, mais tu nous prends pour des pros toi ? On n'est que des pingouins très nuls !
"
Et bien non ! Les divs sont d'une simplicité effarante. Elles vont nous permettre en quelques boules de neige de créer une structure à votre page, puis de la peaufiner avec quelques images simples et du css de base. Après, votre imagination prendra le large ! Il n'est donc pas necessaire d'etre un hacharné du xHTML pour réussir
.
Commençons de suite avec ce que nous allons avoir besoin :
Pour ce tutorial, vous aurez besoin :
De quelques notions de HTML
De quelques notions de CSS
D'un logiciel comme photoshop, Fireworks ou autre...
D'un éditeur de texte pour votre code comme Script edit, Notepad ++, Bloc Note etc...
D'un design simple comprenant un header, un menu à gauche, un corps, un footer.
D'un peu de patience et de réflexion
Pour nos images dans le design simpliste
Télécharger les programmes ici : Lien
Voilà à quoi devrait ressembler notre site à la fin : Là
I - Des bases solides
Nous allons donc commencer par choisir notre DOCTYPE, je prends par habitude un xhtml 1.0 strict, mais cela importera peu en fait.
Commençons donc par créer notre base. Nous allons mettre de suite une div globale. Ceci veut dire que notre site sera avalé dans une div unique, donc tout ce qui sera appliqué à cette div le sera au reste du site
.
- Code: Tout sélectionner
<!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" xml:lang="fr" >
<head>
<title>Tuto 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div class="global">
</div>
</body>
</html>[
Mettons une pointe de css, nos polices, la couleur de fond, la taille du texte, un petit margin:auto et le texte aligné à gauche =)
- Code: Tout sélectionner
/* Body */
body
{
margin: auto;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 13px;
color: #656565;
}
.global
{
margin: auto;
text-align: left;
}
Voilà notre base très simple qui prend 5 minutes et qui, ma foi, n'est pas dure mais essentiel
.II - Le header
Pour tout site de ce nom, il faut un header propre ou encore appeler une bannière, une en-tête, un logo, et j'en passe. Bref, si vous voulez devenir le plus grand pingouin sur la banquise internet, il faut un bel espace pour afficher votre header. On va alors créer une header sur toute la largeur de la page, avec deux parties :
* La première sera l'image, à gauche
* A droite, se sera un dégradé, ou la même couleur prolongée
Cette technique est souvent utilisée dans les headers, permettant de changer la partie droite si besoin (pour créer un espace de connexion, un script js pour l'heure,...)
Dans la partie html, nous allons uniquement ajouter deux "div" pour créer le conteneur de ces deux parties :
- Code: Tout sélectionner
<div class="header2"><div class="header"></div></div>
Côté CSS, ça se corse un peu, mais cela reste surtout de la logique :
- Code: Tout sélectionner
/* HEADER */
.header
{
width: 568px; /* l'image fait 568 sur 113, expliquant les width et height */
height: 113px;
float:left; /* deux parties, droite, et gauche, logique */
margin: 0 auto;
background-image: url('image/header.png'); /* l'image en question, ici le logo de pays-froid redimensionné */
background-repeat: no-repeat;
}
.header2
{
height: 113px; /* la seconde partie fait la même hauteur, encore logique */
margin: 0 auto;
background: #308ce8 /* je n'ai pas mis d'image, mais une simple couleur proche, à vous après de créer ;) */
}
III - Un contenu
Nous allons ensuite, toujours dans la globale du début, inciser un contenu en deux parties :
* A gauche (signifie float
), les menus en blocks* A droite, le réel contenu de votre site, le texte.
Côté html, rien de plus simple, on crée des divs pour chaque menu, avec la même class pour le même css dessus, puis on passe au texte... rien de plus simple, une div pour un élément comme d'habitude
- Code: Tout sélectionner
<div class="contenu">
<div class="les_menus">
<h2>Menu 2</h2>
<div class="menu2">
<a href="#">ABC</a>
<a href="#">DEF</a>
<a href="#">GHI</a>
<a href="#">JKL</a>
<a href="#">MNO</a>
</div>
<h2>Menu 3</h2>
<div class="menu2">
<a href="#">PQR</a>
<a href="#">STU</a>
<a href="#">VWX</a>
<a href="#">YZ</a>
<a href="#">Autres</a>
</div>
<h2>Menu 4</h2>
<div class="menu2">
<a href="#">12</a>
<a href="#">34</a>
<a href="#">45</a>
<a href="#">67</a>
<a href="#">89</a>
</div>
</div>
<div class="texte">
<h1>Bienvenue...</h1>
<p>Bienvenue sur mon site... Blablabla...
<h1>Titre 1/h1>
<p>Votre texte..............................</p>
</div>
</div>
Ici le contenu englobe bien les menus et le texte qui englobe eux mêmes les paragrapes et les menus 2. Assez simple à comprendre : ce sont juste des poupées russes
Le CSS n'est pas beaucoup plus compliqué en fait. On colore un peu le contenu, en gris clair, puis on enlève les bordures des images, et on enlève le violet des liens surlignés. Enfin, la div .texte est positionnée.
- Code: Tout sélectionner
/* CONTENU */
.contenu
{
background-color: #f7f5f6;
padding: 2px;
-moz-border-radius: 20px;
margin: 20px;
}
a img
{
border: none;
}
a{
text-decoration: underline;
color: #5ca4ee;
}
a:hover{
text-decoration: underline;
color: #0cb8f8;
}
.texte
{
text-decoration: none;
text-indent: 1em;
margin-left: 230px;
margin-right: 25px;
}
On applique aussi aux titres (h1 et h2) un display block (logique puisque il est dans une div, il faut le remettre comme un paragraphe), ainsi qu'une petite image comme au menu en ligne de toute à l'heure...
- Code: Tout sélectionner
h1
{
display: block;
background: #ffffff url('images/h1.jpg') 0 0 repeat-x;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
color: #f1970d;
padding: 5px;
}
Pour les menus, on applique un simple display:block comme prévu et on met un petit css pour décorer les liens, et bien mettre en valeur...
- Code: Tout sélectionner
/* MENUS */
.les_menus
{
float: left;
}
.menu
{
width: 183px;
background-image: url('image/menu.jpg');
padding-left: 20px;
background-repeat: no-repeat;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
color: #ffffff;
padding: 7px;
margin-left: 25px;
text-align: center;
}
.menu2
{
background-color: #FFFFFF;
width: 172px;
margin-left: 25px;
padding: 5px;
clear: both;
}
.menu2 a
{
text-decoration: none;
color: #878787;
width: 172px;
display: block;
text-align: center;
border-bottom: 1px #d6d6d6 dotted;
}
.menu2 a:hover
{
width: 172px;
color: #f1970d;
display: block;
text-align: center;
background-color: #fafafa;
border-bottom: 1px #d6d6d6 dotted;
text-decoration: none;
}
On a appliqué un css, pour les liens, visités, survolés. Comme d'habitude j'ai envie de dire
Et bien, on regarde à quoi ça ressemble ? Là
Non, vous ne rêvez pas ! Vous avez bien réussi =) ! Et le mieu, c'est que vous avez tout compris et que vous avez trouvez ça facile !!! C'est incroyable comme les divs nous ont facilité la tâche là-dessus ! A quelle magie
IV - Améliorons...
Ceci n'est pas une finalité, vous pouvez très bien améliorer ce site, bien entendu, voici quelques pistes utilisables :
* Refonte des images pour un design plus beau.
* Création d'un module "bas" pour le copyright par exemple.
* Le header de droite peut être utilisé autrement, comme pour un module membre.
* Le site peut être en php, alors, il sera plus aisé de mettre les différents menus et texte en include.
* Le CSS peu être épuré je pense.
* La sémantique du menu peut être revu.
* Faites appel à votre imagination pour imaginer une forme original au design (posision sur la gauche etc...)
Voici donc quelques trucs, de plus, avant de vous lancer, vérifier surtout que les divs sont bien refermés si vous voulez être aux normes W3C
Allez les pinguins, à la prochaine
...
