Je vais vous expliquer et vous donner les grandes lignes de codes que vous pourrez utiliser pour creer votre site. Tout cela sans que vous ne soyez un "pro" du HTML ou du CSS. De plus, je ne vais pas vous casser les pieds avec toutes ces histoires de tableaux. Vous allez donc pour creer votre design facilement et rapidement
.
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
Certain des logiciels de la liste sont présent sur le site en "Téléchargement".
I) L'imagination
Imaginez tout d'abord le design que vous allez creer. Dans ce tutorial, on ne fera qu'un site simple contenant un Header (une banniere en haut du site), un menu à gauche, un corps (situé à droite du menu), un footer (le copyright en bas).
N'hésitez pas à le dessiner sur une feuille de brouillon avant de commencer la réalisation. Il est préférable de réfléchir 1h et de faire son site comme on le souhaite plutôt que de le refaire 10 fois
.
Une fois votre croquis réalisé (couleur du design compris), il faut reperer les images du design qui pourrai être dupliquees à fin d'éviter d'utiliser trop d'image pour une seul et même page. Cela ralentirai le chargement du site
. Pensez que ces images pourront être dupliquées aussi bien horizontalement que verticalement. N'oubliez pas le background (le fond du site) qui lui aussi peut être dupliqué si ce n'est pas une image bien sur 
.
II)Découpe de votre design
Maintenant que vous avez réalisé votre design sur papier (ou dans votre tête), il va faloir le réaliser. Pour cela, utilisez le logiciel de création graphique (Photoshop ou Fireworks). Faites le entièrement avec les couleurs que vous avez choisies.
Maintenant, votre design est prêt a la découpe. La découpe va, comme vous avez pu l'imaginer, vous permettre de découper votre design en plusieur petites images que l'on utilisera pour votre site. On n'aura qu'à "recoller" toutes ces images
.
Le Header :
Prenez votre Header que vous aurez sauvegardé en .JPG ou . PNG (évitez les autres extensions qui donnent un moins bon résultat). Placez le dans un répertoire "images" par exemple. Si l'image est trop grande, essayer de le couper en plusieurs parties pour permettre un chargement de la page web plus rapide. Appelez l'image header.png.
Le Menu :
Le Menu est souvent composé d'un haut arrondi ou comprenant un arrondit. Il en est de même pour le bas du Menu. Selectionnez le haut et le bas en entier (s'il y a un arrondi, ce n'est pas grave puisque le 'fond' sera deja coloré) et mettez les aussi sous forme d'image. Nommé les de manière explicite : menu_haut.png et menu_bas.png.
Pour la partie centrale du Menu, il y a plusieurs possibilitées. Si c'est un fond d'une couleur unie, ne le touchez pas. Sinon, faite aussi une selection la plus petite possible afin d'éviter de faire une image trop lourde. Appelez l'image menu.png.
Le Corps :
La technique est exactement la même que pour le Menu. Appelez les : corps_haut.png, corps_bas.png, corps.png
Le Footer :
Si le Footer ne contient qu'une barre où du texte sera superposé par la suite, ne faites rien. Sinon selectionnez l'image la plus petite possible. Appelez l'image footer.png.
Attention : N'oubliez pas que l'image peut être répéter. Au lieu de selectionner tout un rectangle, regardez si ce n'est pas une image où les motifs se répetent. Dans ce cas, ne prennez qu'un seul motif
.
Aide : Dans le logiciel photoshop, vous pourrez vous servir de l'outil "coupe" pour faire les selections. Puis allez dans Fichier->Enregistrer pour le web->Enregistrer. De cette manière, vos images seront coupé très facilement.
III)La partie xHTML - CSS : Codage
Nous y voila enfin. On va maintenant devoir "collé" les images pour reformer le design. Je vous propose de faire le site en xHTML 1.1
. tant qu'à faire un site, autant le faire bien .
Créez un dossier "mon_site" dans lequel vous aurez mi le dossier "images" qui contient les images précédements découpées.
Un début :
Nous allons tout d'abord creer une page qui nous servira de squelette pour la suite. On y ajoutera des éléments celon notre envie
.
Code :
- Code: Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titre</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="squelette">
</div>
</body>
</html>
Le "div" placé entre les balises "body" vont nous servir de squelette. Il pourra definir la taille du site par exemple ou la font. On placera donc tout les autres éléments du tutorial dans ce div
.Voila le Code CSS pour cette partie du site. Biensur, libre à vous d'ajouter ou d'enlever les éléments que vous souhaitez.
Code :
- Code: Tout sélectionner
body {
background-color:#FFFFFF;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
padding:0;
margin:0;
background-image:url('./images/background.png');
background-repeat:repeat;
}
.squelette {
width:800px;
margin:0 auto 0 auto;
border:1px solid #26333B;
}
ul , li { margin:0; padding:0; list-style-type:none; }
a { color:#000000; text-decoration:none; }
a:hover { color:#C0C0C0; }
h1 { text-align:center; margin:0; }
p { margin:0; padding:0; }
div.clear { clear:both; }
img { display:block ; border:0; }
Bien sur, il vous faudra adapter le width en focntion de la taille de votre design.
Le Header :
Si vous n'avez qu'une image : Placez au début du "div" votre image sous cette forme.
Code:
- Code: Tout sélectionner
<img src="./images/header.png" alt="" />
Si vous n'avez qu'une image : Vous noterez qu'on a mis dans le css la caractéristique "display:block;" pour les images. Cela a pour conséquence l'arret des block d'images : les images se recolerons parfaitement sans retour a la ligne
!!Code :
- Code: Tout sélectionner
<img src="./images/header1.png" alt="" />
<img src="./images/header2.png" alt="" />
Le Menu :
Dans ce code, il est pissible de mettre les images comme de ne pas les mettre. par exemple, si vous souhaitez faire un effet arrondi, il vous est conseillé de faire comme cela
. Sinon, enlevez les.Code :
- Code: Tout sélectionner
<div class="menu">
<img src="./images/menu_haut.jpg" alt="" />
<ul class="menus">
<li> <a href="#">Menu1</a> </li>
<li> <a href="#">Menu2</a> </li>
<li> <a href="#">Menu3</a> </li>
<li> <a href="#">Menu4</a> </li>
<li> <a href="#">Menu5</a> </li>
</ul>
<img src="./images/menu_bas.jpg" alt="" />
</div>
On met toujours un menu sous la forme d'une liste
. Me problème est qu'il va y avoir des petit points à coté des liens ? Pas du tout . Merci le CSS !Mais il est possible aussi de mettre deux menus à gauche (voir plus
). Il vous suffit tout simplement de mettre un menu comme cela (pour 2 menus).Code :
- Code: Tout sélectionner
<div class="menu">
<img src="./images/menu_haut.jpg" alt="" />
<ul class="menus">
<li> <a href="#">Menu1</a> </li>
<li> <a href="#">Menu2</a> </li>
<li> <a href="#">Menu3</a> </li>
<li> <a href="#">Menu4</a> </li>
<li> <a href="#">Menu5</a> </li>
</ul>
<img src="./images/menu_bas.jpg" alt="" />
<img src="./images/menu_haut.jpg" alt="" />
<ul class="menus">
<li> <a href="#">Menu1</a> </li>
<li> <a href="#">Menu2</a> </li>
<li> <a href="#">Menu3</a> </li>
<li> <a href="#">Menu4</a> </li>
<li> <a href="#">Menu5</a> </li>
</ul>
<img src="./images/menu_bas.jpg" alt="" />
</div>
Mais le problème de la séparation des deux menus survient. Il y a donc 2 possibilités :
On ajoute un ou plusieurs <br /> entre les deux menus. On joute le code ci-dessou avec le CSS qui va avec (l'espace de séparation sera donc paramétrable).Code :
- Code: Tout sélectionner
<div class= "espace"></div>
CSS :
- Code: Tout sélectionner
.espace {
height :XXpx ; \**\
}
La suite arrive bientôt
