Tutoriel d'aide à la création d'un Webdesign.

Par Nimamoto                              

Aperçu du Rendu Final : (variable, je vous montre mon propre exemple, à qualité et taille réduite)



Sachez que le design que nous allons apprendre à faire est basique, si vous désirez faire un peu plus compliqué, vous devrez experimenter par vous même.

/!\ Avant toute chose, pour finir ce turoriel, vous devez avoir les bases en HTML et CSS, si ce n'est pas /!\ /!\ le cas, veuillez aller consulter les tutoriaux du site du zéro. /!\

.: Introduction à la notion de webdesign :.

Un Webdesign est en fait la base graphique d'un site, il se compose généralement d'au moins 3 parties principales, le menu, le header, et le corps (ici "bloc-page"). Vous pouvez tout à fait mettre deux barres de menu, on un footer, ou tout autre chose que votre imagination aurra jugé bon de vous suggerer. Sachez toute fois que mon exemple ne sera composé que de ces 3 parties.



Sur ce shema, vous pouvez voir les trois parties que je viens de citer, vous pouvez également voir deux taille, une taille en hauteur et une taille en largeur, ces taille représentent l'étendue minimale que peut avoir un écran, je vous conseille donc, lors que la conception de votre design de prendre en compte ces deux taille, sachez tout de même que la hauteur n'est pas vraiment importante étant donné que les barres de scroll (ou ascenceurs) existent. Vous pourriez me dire qu'elles existent également dans la largeur, mais il faut admettre que ce n'est pas très pratique ni très engageant de tomber sur un site pour lequel vous devez faire défiler la page toute les 3 secondes pour revenir au début ou à la fin d'une ligne.
Une autre chose que vous pouvez voir sur ce shéma est le conteneur, il ne devient obligatoire que si vous désirez centrer votre design (ce qui sera le cas ici), toutefois, je préfère l'utiliser en permanence, il sert en effet de limite et peut également être utile dans le positionnement des blocs (en parlant de bloc, je veux parler de div, les 3 parties sont en fait des div contenus dans le conteneur, qui est lui aussi un bloc div).
Toujours sur cet exemple, les trois parties sont collées, ce n'est absolument pas obligatoire. De plus, le header peut tout à fait aller également au dessus du menu qui se retrouvera à la même hauteur que le corps, ce dernier peut également se trouver à droite du corps etc. ...

.: Réalisation du webdesign :.

Que vous utilisiez photoshop, photofiltre, the gimp ou tout autre logiciel de création graphique, la démarche est sensiblement la même.

Note : Photoshop dispose d'un outil permettant de trancher votre design et de le coder automatiquement, toutefois, je vous déconseille fortement de l'utiliser, en effet, le code obtenu est fait avec des tableaux et est donc très délicat à modifier. Mais l'outils de découpe reste très interressant.

Je ne vais pas trop m'étendre sur cette partie du tutoriel, en effet, c'est chacun c'est goûts. Sachez quand même qu'il va vous falloir faire attention à plusieurs choses :

• Les dimentions, en effet, les différentes parties de votre design doivent s'encastrer parfaitement les unes avec les autres, un seul pixel de décalage et l'esthétique finale peut être gachée (je fais cette remarque tout particulierement aux utilisateurs de photoshop qui a tendance à arrondir la selection à un pixel près, des décalages peuvent donc apparraître). De plus, les blocs ne doivent pas dépasser du conteneur une fois assemblés, ça risquerai, une fois de plus, de donner un rendu très... laid.
• Les images, ne mettez pas de texte ! A moins que celui-ci fasse partie intégrante de votre réalisation graphique, évitez à tout prix de mettre du texte sur vos images (mis à part les boutons ou autres choses du même genre). En effet, tout ce que vous allez créer comme image (pour le webdesign) sera déstinné à être un fond accueillant un texte (ou pas). Si vous désirez doter vos titres d'effets particuliers (bisautage,...), vous devrez les modifier un à un s'il vous arrivait de vouloir changer quelquechose. L'interêt du CSS est de n'avoir à faire qu'une chose pour la répéter plusieurs fois.
• Les motifs répétitifs (désolé, j'ai pas trouvé mieux), en effet, si vous désirez que votre design soit extensible dans le sens de la hauteur (ce qui est préférable sinon indispensable), vous devrez faire attention à ce que vos motifs, correspondant aux fonds des zones extensibles, puissent se répéter verticalement.

Personnellement, je réalise (vous l'aurez sant doute compris) mes parties séparemment, faire comme ceci évite la fastidieuse phase du découpage, je vous conseille donc également de faire un aperçu en image de ce que pourrait donner votre design en assemblant ces parties, cela vous permettra de voir et de corriger les petites erreurs avant de commencer. Vous pouvez mettre du texte sur cet aperçu étant donné que vous ne l'utiliserez pas directement.

.: Codage HTML du webdesign :.

Note : Pour le design d'exemple, j'ai choisi de ne pas représenter le bloc-page qui aura un fond blanc, quand vous faites comme ici, je vous conseille tout de même de lui attribuer, via le css, un fond de couleur, vous pourrez ainsi le positionner précisemment et enlever cette couleur une fois tout ceci fini.

Si vous maitrisez correctement le HTML, la partie du codage en HTML ne devrez vraiment pas vous poser trop de problème.

Vous devez savoir qu'une page HTML à un squelette :




Etant donné que notre design comporte 3 blocs plus le conteneur et dans mon cas, pour faciliter la mise en place, je vais rajouter un autre div qui contiendra le header et le corps, nous allons les insérer dans ce squelette.




Note : Si vous ne comprenez pas pourquoi nous avons placé les blocs div à cet endroit, je vous conseille fortement de vous remettre dans les tutos du site du zéro.

Une fois nos div placés, nous allons les nommer pour pouvoir les utiliser avec le CSS, étant donné que ces div sont uniques, c'est l'attribut id qui sera utilisé.




Une fois ceci fait, nous allons lier la page CSS à la page HTML.




Voilà, maintenant, nous ne toucherons plus du tout à cette page HTML jusqu'à la fin de ce tutoriel, toutefois, c'est là dedans que vous mettrez vos liens, vos textes, vos images etc...

.: Le Webdesign en CSS :.

Note : Encore une fois, si vous n'êtes pas sur de pouvoir suivre, allez relire les tutoriels correspondant sur le site du zéro.

Lorsque vous mettez votre CSS en place, je vous conseille de commencer par le général pour descendre vers le détail, mais également de tout trier par type, les classes avec les classes, les balises avec les balises et les id avec les id, ça permet de mieux s'y retrouver.

Nous allons donc commencer par la balise body, qui est la plus générale :
Dans cette balise, il va falloir définir plusieur chose : la couleur de fond de page, la couleur générale de police (que l'on peut aussi mettre ailleurs, ce n'est pas le plus important), la taille de police, l'alignement etc...


En l'occurence, ceci devrait suffir, bien sur ce n'est qu'un exemple et ce n'est pas le plus important, disons que ça fait office de petit rappel.




Comme vous pouvez le voir, j'ai également placé le conteneur, le content et les trois blocs div, mais je n'ai pas mis les marges, qui vont nous permettre de placer les blocs, certains d'entre vous vont peut-être raller parce que j'utilise les marges, c'est peut-être un peu barbare, mais c'est simple, et ça marche, donc ça me suffit. Le seul soucis, c'est que je n'ai pas eu la nécéssité de mettre les marges, car ici, il n'y en a pas... Je viens de me rendre compte de mon erreur, étant donné que les blocs se touchent, il n'y a pas d'espace entre eux... en effet, j'ai mis les blancs dans les images de fond, remarquez que ça peut être une solution...
Mais comment peux-tu placer tes blocs alors me direz-vous ? Et bien en fait, les esprits fins que vous êtes auront sans doute remarqué les attribut float, ce sont en fait eux qui font tout le travail, en effet, j'ai rassemblé le header et le corps dans le div content. J'obtiens donc deux blocs de même niveau : le menu, et le content, j'ai mis le menu à gauche et le content à droite (j'aurais très bien pu faire le contraire), et à l'interieur du bloc content, j'ai organisé les blocs header et corps, un en haut, et un en bas.

Tout ça c'est super, mais du coup, vous ne savez pas comment utiliser les marges, donc dans mon élan d'altruisme incommensurable, je vais vous expliquer quand même :

En fait, ce n'est pas compliqué un peu de logique, un peu d'addition/soustraction et voilà...

Mais avant tout, j'aimerai vous rappeller comment fonctionne l'attribut margin (=marges), il décale un objet par rapport à un autre, mais, comme vous le savez certainement, il peut s'écrire de différentes manières :

      Manière 1 :

      Manière 2 :

      Manière 3 :


Comme ma logique est très grande, je vais commencer par la manière... 3 ! Vous l'avez bien sur deviné : s'il y a quatre nombres, c'est pour les quatres côtés, mais seulement voilà, le problème, c'est quel nombre correspond à quel côté ? Et bien en fait, il faut commencer par le côté du haut et tourner dans le sens des aiguilles d'une montre, un petit dessin ne sera pas de trop je pense :



Ne vous inquiétez pas pour les proportions,
elles ne sont pas du tout réspéctées....

Pour le manière deux, c'est un peu la même chose, seulement les côtés vont par deux, on commence toujours par celui du haut, le premier nombre correspond donc aux côtés haut et bas et le deuxième aux côtés droit et gauche.

Et enfin, pour la première manière, c'est encore plus simple, la nombre vaut pour la marge de tous les côtés...


Passons maintenant à l'utilisation des marges, pour cela, sachez que les nombres que vous avez vu plus haut peuvent très bien êtres négatifs.

Tout d'abord, les marges dépendent entièrement de la taille des objets, je dis "des", parce que les marges fonctionnent avec au moins deux objets : celui qui à la marge, qui sera donc décalé, et celui qui servira de point de repère.
De plus, les marges doivents se completer, si la marge gauche et la marge droite ne donnent pas quelquechose de parfaitement logique, vous risquez d'avoir des problèmes au niveau du résultat.
Et enfin, il vous faut savoir que Internet Explorer et Firefox ne gèrent pas les marges de la même manière (et encore, s'il n'y avait que ça...), heureusement, le css dispose d'un petit quelquechose que Firefox reconnait et pas IE, donc ça va nous aider : petite explication :



Et oui, le !important nous sauve la mise ! En fait, firefox prend en compte les deux lignes, mais le !important met la priorité sur la première et IE lui, s'en fiche complètement et ne tien compte que de la deuxième. Sachez qu'il va vous falloir régler tout ça sur les deux navigateur, on ne peut pas laisser une grande partie des internautes de côté.


Passons à l'explication maintenant :

Tout d'abord, comme je vous l'ai dit précédemment, les objets intéragissent entre eux, et, forcément, plus il y a d'objets, plus ça devient dur à gérer.
Prenons ce design comme exemple :




Il va vous falloir découper votre design en plusieurs blocs plus facilement éditables :



Et pour chacun de ces blocs il va falloir déterminer une position :




Enfin, à l'interieur de chacun de ces blocs, il faut définir les marges :

       

J'ai délibérémment laissé des espaces pour augmenter la clarté.
Et ne vous en faite pas si vous trouvez des erreurs, je n'ai pas fait très attention...

Il s'agit donc en fait de simples calculs/mesures. Je vous laisse ensuite mettre en place tout cela avec les float, les margin mais aussi les padding, qui sont en fait des marges, mais à l'interieur d'un bloc, et non plus à l'exterieur. C'est donc le contenant qui agit et plus le contenu (mais attention, ça peut carrémment déformer votre bloc) et également, si nécéssaire, les !important.


Pour vous aider un peu, j'ai fait un petit simulateur, vous pourrez évidemment en profiter pour voir les différences entre firefox et IE (car il y en a...) : Cliquez ici !

Je met également le webdesign de test en téléchargement ici : design.zip (100 Ko) , et en visualisation ici : Cliquez ici !

Note : Je n'ai pas pris le temps de rendre ce design compatible sous IE si vous utilisez ce navigateur, tant pis pour vous ;) , pour les autres, ça sera l'occasion de voir les différences qui peuvent exister.

Et voilà, j'espère que ce tutorial aura été à la hauteur de vos attentes, s'il vous reste des questions, vous pouvez toujours venir les poser dans la section entraide du forum Arts-Graphique.



Réalisé par Nimamoto - Ne pas copier