CODER UN DIV-LAYER

Hello ;) Avec ce tuto, on va apprendre à coder un layout en div ( houhou la classe ). Je vous donne juste la base et quelques trucs en CSS.

Vous aurez besoin des logiciels suivants :
• Photoshop (j’utilise CS2)
• Notepad++

Sous Photoshop :
1. Déjà, il faut créer votre layout. Voilà le mien : voir

Ensuite, pour éviter le chargement du layout en 45 heures, il faut le couper en tranche. Pour ça, appuyez sur la lettre K de votre clavier, l’outil Tranche sera automatiquement sélectionné :

3. Retournez sur votre layout et faites un clic-droit dessus, puis selectionnez « Diviser la tranche » Et vous entrez ça : voir
Vous verrez des lignes oranges sur votre lay’, c’est normal x).

4. Une fois vos tranches faites, cliquez sur Fichier-> Enregistrer pour le Web.
Vérifiez que vous avez les mêmes réglages que moi à droite : voir
Et enfin, cliquez sur Enregistrer ( à droite ).
A « Nom du fichier », mettez : index.html et pour « Type » sélectionnez « HTML et images (*.html) »

Voilà, votre layout est prêt à être codé?.

Sous Notepad++ :

1.Faites : Fichier-> Ouvrir, et ouvrez le fichier « Index.html » se trouvant dans le dossier dans lequel vous avez enregistrer votre layout précédemment.

2.Dans la balise : (3e ligne), mettez le nom de votre site à la place du « x ». Je mets :

<title>heavenly Dream</title>

3.A la 6e ligne, enlevez le : bgcolor="#FFFFFF", il sera placé dans le CSS.

4.Retournez à la 4e ligne, et sautez une ligne et entrez le code suivant :

<link rel="stylesheet" type="text/css" media="screen" title="User Defined Style" href="style.css"/>

ce qui donne : voir, c’est pour que le CSS prenne effet sur la page .

5.A la 7e ligne, sautez une ligne et entrez :

<div class="contenu">Votre contenu </div>
N’oubliez surtout pas de fermer la balise car sinon, le contenu ne s’affichera pas ou s’affichera n’importe où.

6.Pour le menu, sautez une ligne après le contenu et entrez :

<div id="subnav"> <p class="nav-menu">Categorie</p> <a href="index.php">Exemple</a> <a href="index.php">Exemple</a> <a href="index.php">Exemple</a> <a href="index.php">Exemple</a> <a href="index.php">Exemple</a> <p class="nav-menu">Categorie</p> <a href="index.php">Exemple</a> <a href="index.php">Exemple</a> <a href="index.php">Exemple</a> <a href="index.php">Exemple</a> <a href="index.php">Exemple</a> </div>

7.Voilà votre page est prête, sauvegardez là : Appuyez sur la disquette en haut, en dessous du menu Edition.

8.Créer un nouveau document en cliquant sur la feuille avec le « + » vert en dessous du menu Fichier. Puis cliquez sur le menu « Langage » et sélectionnez « CSS »

9.Collez ceci : ( je vais vous expliquer comment on code ça, ne fermez pas là page xD )

body { font-family: Verdana; margin: left; width: 800px; font-size: 9px; color: #9d979f; background-image: url("images/index_10.jpg"); background-repeat: repeat-y; background-color: #ddbfd3; background-position: left;} .contenu { position: absolute; top: Ypx; margin-left: X px; width: TAILLEpx;} .menu { position: absolute; top: Ypx;margin-left: Xpx; width: TAILLEpx; text-align: center; margin-top:0px; } a:link { color: #cb61a6; text-decoration:none;} a:visited { color: #cb61a6; text-decoration:none;} a:hover { color: #885586; text-decoration:none;} a:active { color: #cb61a6; text-decoration:none;} B {color : #a096cc;} U{color : #97788b;} I{color : #be9865;} S{color : #5e566a;}

Dans l’ordre :
Font-family : Entrez la ou les polices utilisées pour votre site.
Margin : Width : La largeur de votre layout.
Font-size : La taille de l’écriture sur votre site.
Color : Couleur de l’écriture.
background-image: url("images/index_10.jpg"); Url de l’image qui répètera la suite du layout. Par exemple si vous mettez beaucoup de contenu, la hauteur du lay’ augmentera et il faudra donc une image qui continue le layout, dans notre cas vous laissez « images/index_10.jpg »
Background-repeat : Allez voir ici : http://heavenly.dream.free.fr/css.php?page=bg , dans mon cas, je mets repeat-y.
Background-color : la couleur du fond de la page.
Background-position : Position de votre background-image. Si votre margin est « auto » mettez top center, pour le reste vous mettez pareil (left ou right).

.contenu
{ position: absolute; top: Y px; margin-left: X px; width: TAILLEpx;}

Alors là c’est un peu plus dur. Retournez sous photoshop, sur votre layout. Sélectionnez l’endroit où sera votre contenu.
Puis à droite, il y a une fenêtre où on voit votre layout en entier (dans une petite fenêtre) vous êtes sur « Navigateur ».
Maintenant, passez sous « Infos »et là où vous voyez le X et le Y, cliquez sur le petit + à gauche, puis sélectionnez Pixels.
Prenez votre curseur, et pointez dans le coin en haut à gauche de votre sélection, NE BOUGEZ PLUS et regardez ce qu’il y a marqué dans « Infos », à côté du X et du Y, reportez ces informations dans le CSS.
Puis maintenant, copiez le morceau sélectionnez du contenu ( sur votre layout ), faites Fichier-> Nouveau et entrez le numéro écrit pour la largeur dans le CSS. Chez moi, 386.
Ce qui donne donc :

.contenu { position: absolute; top: 366px; margin-left: 3px; width: 386px;}

Faites la même chose pour le menu, sauf qu’il y a : text-align: center, c’est l’alignement de votre menu, center, left ou right. Et margin-top c’est l’espacement, la marge du haut.
Link : lien normal
Visited : lien visité
Hover : lien survolté
Active : lien actif (quand vous êtes sur la page.
Color c’est la couleur des liens.
Text-decoration c’est la déco du texte XD, vous pouvez mettre :

underline = souligné.
overline = ligne au dessus.
line-through = barré.
blink = clignotant.
none = normal (pas de décoration du texte).

B : gras
U : souligné 
I : italique
S : barré

Voilà ! Vous pouvez admirer le résultat XD. ( voir ), j’ai pas mis de menu car sur mon div il faut faire d’autres modifications dans le css et ça prends trop de temps à expliquer xD.
Par contre, ne mettez aucun espace entre une valeur et « px » par exemple top: 366px, sinon ça ne s’affiche pas °°.

posté par Ivy le 06/03/09