NoShade.net est en vente — Contactez nous si vous êtes intéressé
Le siteTutoriauxInterviews
icone RSS NoShade.net

Accueil » Tutoriaux » Css » Créer une interface complète en CSS

Créer une interface complète en CSS


Beaucoup construisent encore leurs sites selon de vielles méthodes, à savoir en utilisant des tableaux pour mettre en place leur interface.
Cette méthode quelque peu "à l'arrache" n'est en réalité pas du tout adaptée à la création de sites web de qualité.
Nous allons donc ensemble créer une interface en XHTML + CSS, sans aucun tableau donc, et vous allez au passage découvrir au fur et à mesure les avantages d'utiliser les CSS.



Pour cet exercice, j'ai donc rapidement crée une interface sous Photoshop, en tant qu'image, que nous allons ensuite passer en code...
Voilà donc l'image sous Photoshop :


Bien entendu, les CSS ne permettent pas de créer des arrondis dans les angles par exemple, et nous allons donc devoir découper quelques parties de notre interface, que nous placerons par la suite dans le code pour les afficher.

Dans cette interface, nous découpons en fait simplement deux images que voici :



Le but de ce tutoriel n'étant pas de vous apprendre à manipuler Photoshop ou tout autre logiciel de graphisme pour créer une interface de site, je ne m'attarde donc pas sur l'étape "découpage" de l'interface.
Vous pouvez donc enregistrer directement sur votre disque dur ces deux images, que nous allons nommer "header.gif" pour l'image du header, ainsi que "image.gif" pour la photo qui ira dans le contenu.

Vous pouvez donc commencer à créer sur votre disque dur un dossier spécifique au site que nous allons créer et qui au final ne comportera que :
/index.html
/styles.css
/imgs/header.gif
/imgs/image.gif

Les images sont placées ici dans un dossier "imgs", bien entendu, si vous voulez le nommer "images_du_site" ou "krh9862KHJ3LnH" vous pouvez aussi, le code que je vous donnerais au fur et à mesure du tutoriel en sera modifié en conséquence. :-)

Alors, c'est parti, on va commencer par créer un fichier xhtml vide, nous avons donc ce simple code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
                <title>titre</title>
        </head>
        <body>

        </body>
</html>


Nous allons commencer de haut en bas, en écrivant la ligne de code qui va "lier" le fichier CSS "styles.css" à notre page html.

Entre les balises <head> et </head>, en dessous de la ligne <title> par exemple, nous ajoutons donc cette ligne :

<link href="styles.css" rel="stylesheet" type="text/css" />


Si vous n'avez aucune notions de CSS, je vous expliquerais pourquoi nous avons inséré cette ligne de code un peu plus tard, n'ayez pas peur! :D

Nous allons maintenant créer les différents blocs nécessaires à la mise en page de l'interface.
Dans ce cas précis, nous n'aurons que deux blocs. Pour que vous compreniez mieux, voici un croquis dessinant les deux blocs que nous allons créer :


Le bloc 1, que nous nommerons "page", contient la totalité du contenu du site.
Le bloc 2, que nous nommerons "header", contient uniquement la partir haute du site, et sera placée à l'intérieur du bloc "page".

Alors c'est parti, on place nos blocs dans le code html, entre les balises <body> et </body>, en toute logique! :-)

<div class="page">
        <div class="header">
        </div>
</div>


Héhé, on est bien avancés hein? :D
Bon, allez, on continue! :P

Dans le bloc "header", nous allons placer en tant que texte les noms de rubriques du site, ce qui donne donc pour le code du bloc "header" :

<div class="header>
<p>
<a href="#">Accueil</a> -
<a href="#">Actualité</a> -
<a href="#">Préstations</a> -
<a href="#">Localisation</a> -
<a href="#">Nous contacter</a>
</p>
</div>


Nous créons déjà les liens, en les pointant tous vers "#" pour qu'ils n'aient aucune influence lors du clic, lorsque nous visualiserons le fichier index.html, mais de façon à pouvoir tester les effets de survol de la sourie que nous allons configurer plus tard (hé oui, c'est ça aussi les CSS :p).

Pour ce qui est du contenu, c'est du texte, je vais donc vous donner le code complet de la page "index.html" et commenté :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
                <title>L'art des CSS</title>
                <link href="styles.css" rel="stylesheet" type="text/css" /> <!-- on joins le fichier CSS -->
        </head>
<body>

<div class="page">
        <div class="header">
                <p>
                <a href="#">Accueil</a> -
                <a href="#">Actualité</a> -
                <a href="#">Préstations</a> -
                <a href="#">Localisation</a> -
                <a href="#">Nous contacter</a></p>
        </div> <!-- Fin du bloc page -->

        <h1>Lorem indulor</h1>
        <p>Laoreet dolore magna aliquam erat volutpat ut wisi enim ad minim veniam. Blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla: facilisi nam liber tempor cum. Tincidunt ut quis nostrud exerci tation ullamcorper suscipit lobortis. Dolore eu feugiat nulla facilisis at vero eros et accumsan. Assum typi non habent claritatem insitam est usus legentis in iis.</p>
       
        <p>Consequat duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie. Minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Demonstraverunt lectores legere me lius quod ii legunt saepius claritas est etiam processus dynamicus qui. Eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim? Accumsan et iusto odio dignissim qui blandit praesent.</p>
        <hr />
        <h1>Tincidunt nostrud</h1>
        <img src="imgs/image.gif" alt="" align="right" /><p>Dolore te feugait nulla facilisi nam liber tempor. Decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes. Legere me lius quod ii legunt saepius claritas est etiam.</p>
       
        <p>Est notare quam littera gothica quam nunc putamus parum claram anteposuerit, litterarum formas humanitatis. Vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis. Lectorum mirum per seacula quarta decima et quinta decima eodem modo typi. Nihil imperdiet doming id quod, mazim placerat facer possim assum.</p>
                       
</div> <!-- Fin du bloc page -->

</body>
</html>


Besoin d'un peu d'explications peut-être?

Alors, déjà, c'est quoi ces "<h1>" ?
Ce cont les titres, ceux en gris sur l'interface que nous avons dessiné. :-)

Heu, c'est quoi ce truc align="right" sur le code de l'image ?
Alors, ça, c'est tout simplement pour que l'image se place à droite dans le bloc "page", laissant ainsi le texte passer à sa gauche. On peut aussi mettre "left" pour centrer l'image à gauche, ou ne rien mettre pour la centrer au milieu. :-)

OK! Donc, notre page index.html est finie, on va pouvoir passer au vif du sujet, le fichier "styles.css"! 8-)

Alors, pour éditer notre fichier css, de quoi à t'on besoin?
Tout d'abord, un logiciel tel que Dreamweaver ou Golive sait parfaitement gérer ça, mais nous n'allons pas utiliser une telle usine à gaz, bien qu'en débutant, vous puissiez vous en aider... mais vous verrez rapidement que ce n'est pas forcément la meilleure méthode, et qu'il est bien plus appréciable d'écrire tout soi-même! :P (oui, je suis un peu geek sur les bords parfois...)

Vous pouvez donc utiliser un simple éditeur texte (Bloc notes sous Win, TextEdit sur Mac), ou un éditeur de texte qui colore le code, je vous laisserais le choix d'en trouver un sur des sites tels que www.versiontracker.com, il en existe des dizaines gratuits. :-)

Nous créons donc un nouveau document, "styles.css" que nous sauvegardons à la base de notre dossier du site que nous sommes en train de créer en CSS.
Pour information, puisque je vais en utiliser, les commentaires en CSS se placent entre des balises /* et */.

Commençons par configurer l'aspect général du site.
voici le début du code commenté :
body {
        margin: 0; /* On définit des marges à 0 */
        padding: 0; /* On définit un remplissage à 0 */
        background-color: #673F42; /* Couleur du fond de la page */
        font-family: Arial, Sans-serif; /* Classes de polices */
        font-size: 0.8em; /* Taille des polices */
        color: #673F42; /* Couleur du texte */
        }


Quelques explications :

Les marges et le padding servent à définir un écart entre l'interface du site, et les bords de votre fenêtre du navigateur internet. Ici, on les fixes à 0.
On ne précise pas d'unité en CSS lorsque l'on utilise la valeur 0, pour la simple raison que 0 pixels, 0% ou 0em mesurent la même chose. ;-)

Les couleurs, comme à la ligne "background-color" ou "color", sont écrites en hexadécimal, votre logiciel d'images vous donne forcément cette valeur dans votre plage de couleurs.
Pour information, vous pouvez utiliser des couleurs tels que le rouge, vert, bleu ou autre, en anglais, par exemple "backgroud-color: red". Mais celles-ci sont quelque peu ... très flashy et très limitées, par contre, pour du noir (black), blanc (white) ou gris (grey) cela peut être très utile d'utiliser ces valeurs. :-)

Pour les polices, nous utiliserons par exemple ici prioritairement la police "Arial", et si jamais le visiteur ne dispose pas de cette police sur son ordinateur, nous utiliserons une classe "Sans-serif". Pour en savoir plus, reportez vous au manuel du W3C...

La taille des polices (font-size) peut être exprimée en pourcentage (%), pixels (px) en points (pt) mais le plus propre reste de l'exprimer en "em".
1 em correspond à la taille de base d'une police à l'écran. En ramenant à 0.8em votre taille de police, nous la réduisons donc à 80%, si on veut ...

Enfin, la ligne "color" correspond à la couleur de votre texte, ici, le texte sera de couleur bordeaux.

Sachez également que, et ceci est valable pour toute la suite du tutoriel, vous pouvez placer ces lignes dans n'importe quel ordre entre les crochets { et } de notre classe ("body" dans le cas présent).

à ce stade, voici à quoi ressemble notre page index.html si on la regarde dans un navigateur web :



Passons maintenant aux deux blocs! :-)

.page {
        background-color: #EEEEEE;
        position: absolute;
        left: 150px;
        top: 10px;
        height: auto;
        width: 506px;
        margin: 0;
}

.header {
        background-image: url('imgs/header.gif');
        padding: 0;
        margin: 0;
        height: 123px;
        width: 506px;
}


Nous créons donc une classe "page" et "header", comme dans notre fichier html. (hein heiinn!!!)

- Page :
La position du bloc "page" est en "absolute", ce qui signifie que nous allons placer ce bloc en définissant ou il se trouve par rapport au bord haut-gauche de votre fenêtre.
Ici, le bloc est donc fixé à 150 pixels du bord gauche de votre fenêtre et à 10 pixels du bord haut de votre fenêtre.

Nous fixons sa hauteur (height) en automatique, puisqu'elle dépendra de la taille du contenu de la page, puis nous donnons une largeur (width) de 506 pixels à notre bloc, avec des marges (margin) de 0.

- Header :
Le fond de notre bloc "header" sera donc l'image que nous avons découpé dans notre interface web, que je vous ai fait renommer "header.gif" et que vous avez normalement placée dans un dossier "imgs". ;-)

Nous définissons donc des marges (margin) et marges de remplissages (padding) à 0, une hauteur (height) de 123 pixels, soit la même hauteur que l'image en elle-même, tout comme sa largeur (width), qui est elle de 506 pixels, comme le bloc "page" d'ailleurs. ;-) (Allez y, relisez cette phrase 3 ou 4 fois ...) =)

à ce stade, nous obtenons donc ceci :


On commence doucement à obtenir ce qu'on veut, mais c'est pas encore ça! :P
Ce qu'il manque, c'est tout bêtement la mise en forme du texte.

Commençons par régler le décalage du texte dans le header.

.header p {
        margin: 0 auto 0 10px;
        padding-top: 91px;
        color: #673F42;
}


Commençons par préciser qu'en définissant une classe ".header p", nous allons influencer notre texte en paragraphe uniquement dans le bloc "header". Une classe "p" sera crée par la suite, et qui influencera sur tout le contenu de la page.

On définit ici des marges quelque peu différemment de ce que nous avons fait pour les blocs.
On donne les valeurs à "margin" à la chaine, en tournant dans le sens des aiguilles d'une montre, on pourait donc traduire la ligne par :

        marges: haut droite bas gauche;


On définit des marges de 0 en haut, les marges à droite sont en automatiques, nous n'avons pas besoin de les définir, les marges du bas sont à 0 et celles de droite à 10 pixels, pour que notre texte soit décalé un peu vers la droite.
On donne une valeur de 91 pixels au décalage haut du texte (padding-top), pour que celui-ci vienne se caller pile en bas sur notre image de fond dans le bloc.
Enfin, la couleur des rubriques est définie.

On en est là, mais on à pas encore fini :



Comme vous pouvez le voir, le fait que des liens soient crées va donner une couleur bleue, et souligner le texte... et ça c'est le genre de choses sur lequel on influe très facilement en CSS! :-)

a {
        text-decoration: none; /*  on supprime le soulignement des liens */
        color: inherit; /* On ramène la couleur des liens à celle fixée dans le body */
}

a:visited { /* Lorsque le lien a été visité */
        color: inherit;
}

a:hover { /* Lorsque l'on passe le curseur au dessus du lien */
        color: #6C6C6C; /* La couleur change */
}


Les classes "a" vont donc influencer sur les liens.

Au cas où vous n'auriez pas encore remarqué, on crée des classes "p" pour influencer le texte entre des balises <p> et </p> (paragraphe), des classes "a" pour influencer le contenu des balises <a> et </a> (les liens), et il en va de même pour tout...
Ainsi, nous allons voir plus bas que nous pourrons contrôler l'affichage d'une barre (<hr /> en html), mais nous pouvons également contrôler plein de choses, par exemple la couleur de fond d'un champ de texte (imput) ou bien d'autres choses... Et là, j'arrête un peu, allez me nettoyer ce filet de bave au coin de votre bouche! :P

Voilà, c'est tout beau tout comme il faut! :D



Passons au texte.

h1 { /* Les titres h1 */
        font-size: 1.8em; /* La police grandit */
        margin-left: 15px; /* On décale à droite le titre */
        color: #6C6C6C; /* On change la couleur en gris */
}

p {
        margin: 4px; /* Marges de 4 pixels autour du texte en paragraphe */
        text-align: justify; /* On justifie le texte */
}


Héhé, on approche du but dites donc! :D

Bon, il y a un petit truc pas très beau, c'est le texte qui cole l'image à sa gauche, on va donc définir des marges à toutes les images pour éviter ce problème. ;-)
On en profitera pour définit des bords à 0 pour les images.

img {
        border: 0;
        margin: 4px;
}


Voilà, ça, c'est fait! :D

Plus qu'un petit détail et on à fini, il s'agit de la barre entre les deux "articles", je vous en parlais précédemment, nous n'avons donc qu'à créer une classe "hr" pour traiter l'affichage de cette barre de séparation.

hr {
        border: 0; /* On supprime les bords */
        height: 4px; /* On règle une hauteur de 4 pixels */
        background-color: #673F42; /* On reprend la couleur de fond de page */
}


Voilà, on à finit! Au final on obtient donc ceci :



Vous pouvez donc voir que la barre à radicalement changé d'aspect. ;-)

Au cas ou vous ayez zappé une étape, revoici le contenu intégral de nos deux fichiers :

index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
                <title>L'art des CSS</title>
                <link href="styles.css" rel="stylesheet" type="text/css" /> <!-- on joins le fichier CSS -->
        </head>
<body>

<div class="page">
        <div class="header">
        <p>
        <a href="#">Accueil</a> -
        <a href="#">Actualit&eacute;</a> -
        <a href="#">Pr&eacute;stations</a> -
        <a href="#">Localisation</a> -
        <a href="#">Nous contacter</a></p>
        </div> <!-- Fin du bloc page -->

<h1>Lorem indulor</h1>
<p>Laoreet dolore magna aliquam erat volutpat ut wisi enim ad minim veniam. Blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla: facilisi nam liber tempor cum. Tincidunt ut quis nostrud exerci tation ullamcorper suscipit lobortis. Dolore eu feugiat nulla facilisis at vero eros et accumsan. Assum typi non habent claritatem insitam est usus legentis in iis.</p>

<p>Consequat duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie. Minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Demonstraverunt lectores legere me lius quod ii legunt saepius claritas est etiam processus dynamicus qui. Eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim? Accumsan et iusto odio dignissim qui blandit praesent.</p>
<hr />
<h1>Tincidunt nostrud</h1>
<img src="imgs/image.gif" alt="" align="right" /><p>Dolore te feugait nulla facilisi nam liber tempor. Decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes. Legere me lius quod ii legunt saepius claritas est etiam.</p>

<p>Est notare quam littera gothica quam nunc putamus parum claram anteposuerit, litterarum formas humanitatis. Vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis. Lectorum mirum per seacula quarta decima et quinta decima eodem modo typi. Nihil imperdiet doming id quod, mazim placerat facer possim assum.</p>



</div> <!-- Fin du bloc page -->

</body>
</html>


styles.css


/* ------------------------------ */
/*     Mon super fichier CSS      */
/* Merci le tuto de NoShade.net ! */
/* ------------------------------ */


/* ============= */
/* Page generale */
/* ============= */

body {
        margin: 0;
        padding: 0;
        background-color: #673F42;
        font-family: Arial, Sans-serif;
        font-size: 0.8em;
        color: #673F42;
}

/* ===== */
/* Blocs */
/* ===== */

.page {
        background-color: #EEEEEE;
        position: absolute;
        left: 150px;
        top: 10px;
        height: auto;
        width: 506px;
        margin: 0;
}

.header {
        background-image: url('imgs/header.gif');
        padding: 0;
        margin: 0;
        height: 123px;
        width: 506px;
}

/* ============= */
/* Mise en forme */
/* ============= */

.header p {
        margin: 0 auto 0 10px;
        padding-top: 91px;
        color: #673F42;
}

h1 {
        font-size: 1.8em;
        margin-left: 15px;
        color: #6C6C6C;
}

p {
        margin: 4px;
        text-align: justify;
}

a {
        text-decoration: none;
        color: inherit;
}

a:visited {
        color: inherit;
}

a:hover {
        color: #6C6C6C;
}

img {
        border: 0;
        margin: 4px;
}

hr {
        border: 0;
        height: 4px;
        background-color: #673F42;
}


Je me suis permis au passage d'arranger un peu mon fichier styles.css, pour en améliorer sa présentation, vous pouvez en faire de même si vous le souhaitez. ;)

Vous souhaitez tester en ligne le résultat final? Aucun souci, venez voir! :D



J'espère que vous aurez bien compris le principe des CSS, je vous conseille de refaire plusieurs fois ce tutoriel si vous débutez totalement, sinon, de le refaire sans regarder du tout le code que je vous donne ici, pour voir si vous seriez capable de refaire ce mini-site seuls.

Si vous vous posez des questions sur l'utilité d'une ligne de ce "charabia", demandez à Google il vous répondra sans trop de difficulté. :-)

En vous souhaitant une bonne utilisation des CSS, je vous dis à bientôt, nous reviendrons certainement sur les CSS pour vous en faire savoir toujours un peu plus! ;-)
Le 08/02/2006 par Legibe

Partager ce tutoriel : icone Scoopeo icone del.icio.us icone Digg icone Facebook icone Technorati icone TwitThis icone Google icone Live icone MySpace icone Wikio icone Mixx icone Reddit icone NewsVine

Vous avez aimé ce tutoriel ?

Faites un don pour nous encourager à en écrire d'autres! :-)

Commentaires :

ds a écrit :

chapeau!

toto a écrit :

heuuuuuuuuuuu...bonjour les erreurs dans le style css!

Entre les "&nbsp;" et "<span style="...</span>", je doute que sa fonctionne nickel.

Legibe a écrit :

@toto : oups! ma dernière modif sur noshade à crée un bug dans les encarts de code, grr!!! je vais régler ça dessuite! :(

ps: le résultat du tuto lui fonctionne et est bien valide W3C etc...

EDIT : Bug corrigé, merci toto! :)

micropro7 a écrit :

j'ai apprécié c'est super bien
je vais m'en servir pour créer
des pages web en css
vous pouvez me contacter

Ajouter un commentaire sur ce tutoriel

CSS, Créer interface, Design, Diz, Template
Si vous avez remarqué une erreur (une faute ou tout autre type de problème que nous puissions corriger), n'hésitez pas à nous écrire!
Soyez aussi précis que possible et n'oubliez pas de nous indiquer le tutoriel dans lequel l'erreur se trouve. Merci!! :)