Le Webdesigning
Salut et bienvenue à toi petit Trashien.
Dans ce nouveau tutoriel by PokémonTrash, nous allons apprendre à faire une page web complète.
Oui, une page web. Une page comme celle sur laquelle vous êtes en ce moment ! Ce qui implique que vous allez également devoir vous occuper du codage, mais avouons-le, sans ce petit plus, ce serait nettement moins drôle :p
Donc pour ce tutoriel, vous allez avoir besoin de :
-Quelques petites connaissances des outils de Photoshop.
-Quelques notions de Html et de Css (je ne vais pas faire un cours la dessus, de nombreux sites proposent d’excellents tutoriels .
Admettons que vous ayez ces bases, nous allons enfin pouvoir commencer.
Mais avant, histoire que vous sachiez ce que vous allez faire, voici un aperçu du genre de site que l’on va faire :
Lien du site démo
Comme vous pouvez le constater, nous n’allons pas tout à fait faire un site pour naviguer, mais plutôt une sorte de portail, avec des liens, et une présentation quelconque de votre site, ou autre.
Nous allons commencer.
Ouvrez ce bon vieux Photoshop, puis créez un nouveau document de taille 800*800 pixels.
Vous pouvez mettre un fond transparent, mais je vous conseille vivement de laisser le fond blanc afin de mieux visualiser votre rendu.
Maintenant, appliquez une couleur (évitez les dégradés, vous allez comprendre pourquoi). Notez que ce sera la couleur de votre page, c’est pour cela que je vous déconseille un rouge flashy.
Pour ma part, avec l’outil pot de peinture, je vais prendre une couleur qui s’accorde avec le mini-site, un bleu/gris (#bfd1e6).
Pour l’instant, ce n’est rien de bien extraordinaire, on va doucement aborder quelque chose de plus complexe, ne vous inquiétez pas.
Nous allons mettre un petit carré de 400*400 pixels. Ce carré nous servira de « zone de texte » pour notre site. Si vous n’avez pas envie de prendre votre règle pour mesurer la taille exacte, (chose que je conçois parfaitement :p ) créez un nouveau document de 400*400 pixels que vous ferez glisser sur votre plan de travail.
Note : Vous pouvez faire un carré plus ou moins grand, mais retenez bien ses dimensions, dans le cas contraire, vous aurez de gros problème avec le codage....
Voilà le travail, j’ai coloré ce carré en blanc afin qu’on puisse le différencier du reste, je vous invite à faire la même chose :
Maintenant, il va s’agir de centrer ce petit carré, mais au préalable, nous allons juste y rajouter un petit cadre, vous verrez, c’est très esthétique.
Pour ce, cliquez sur le petit « fx » en dessous de la fenêtre des calques=>contour.
Une fenêtre va alors s’ouvrir, mettez les réglages suivants :
Taille: 3px
Position: extérieur
Mode de fusion : normal
Opacité : 100%
Type de remplissage : couleur
Et choisissez la couleur de votre choix (#2e607d pour moi).
Maintenant, petite manœuvre pour centrer ce petit carré :
Sur le calque du petit carré (le 2ème normalement), avec l’outil rectangle de sélection, faites une sélection qui occupe toute la largeur, mais pas toute la longueur, comme ceci :
Puis, allez dans :
Calque=>Aligner les calques sur la sélection=>Centres dans le sens horizontal.
Cela va donc centrer horizontalement votre image.
Maintenant, toujours avec l’outil rectangle de sélection faites une autre sélection qui fait toute la hauteur, mais pas toute la largeur de l’image (le contraire d’avant) puis :
Calque=>Aligner les calques sur la sélection=>Centres dans le sens vertical.
Voilà ! Maintenant, notre petit carré est centré, nous allons pouvoir enfin continuer.
On en arrive à une autre sorte de graphisme, nous allons passer à la décoration .
Premièrement, vous pouvez, si vous le voulez, changer la couleur de fond du petit carré, le blanc, c’est assez fade. Je vous conseille de prendre une couleur proche de celle du fond mais un peu coupée avec du blanc (#e0e9f3 pour moi)
Voilà donc le résultat :
Passons donc au plus important, la décoration. C’est là que votre imagination entre en jeu. Brushs, renders, et autres motifs seront de mise. Je ne vais pas vous apprendre ça, faites vraiment comme vous le sentez.
Tant que j’y suis, surtout, pensez à ne pas mettre de brushs ou autres à l’intérieur du petit carré, ainsi on gardera une lisibilité optimisée.
Pour moi, après quelques petites minutes, voilà le résultat :
Lien de l'image
(le Queulorior proviens de « pearlsaurus » )
Maintenant, passons à la 2ème partie de ce tutoriel : Le Codage !
Comme dit plus haut, pour suivre cette partie, il vous faut tout de même les bases en xHTML et en CSS afin de pouvoir suivre convenablement.
Ouvrez donc votre éditeur de texte (dreamweaver pour moi, mais notepad++ convient
Et mettez le traditionnel :
<!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=utf-8" />
<title>Tutoriel PokémonTrash </title>
</head>
<body>
</body>
</html>
Ce que nous allons faire, vous allez voir, est d’une simplicité déconcertante :p
A l’intérieur des balises <body></body> nous allons insérer ce qu’on appelle les divisions.
Comme leur nom l’indique, elles permettent de fragmenter la page en plusieurs éléments, leur propriétés se modifient bien évidement dans le CSS, mais nous nous en occuperons juste après.
Pour le design final que l’on désire, 2 divisions nous suffisent amplement :
-Une pour ajuster notre image faite tout à l’heure sur Photoshop.
-Une pour régler correctement notre texte juste dans le petit carré (je vous avais bien dit de retenir le format dudit carré).
Appelons donc la première division « design » sachant qu’elle nous servira effectivement à intégrer tous le design. Nous allons également déjà mettre le 2ème division que je vais appeler « texte » puisque encore une fois, celle-ci nous servira à configurer l’emplacement du texte.
On obtient donc ça :
<!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=utf-8" />
<title>Tutoriel PokémonTrash </title>
</head>
<bod<div id="design"></div>
<div id="texte"></div>
</body>
</html>
Je vais vous surprendre en vous disant que le codage en HTML est terminé ? :p
En fait, vous aurez une dernière chose à faire la dessus : Mettre votre texte, mais ce n’est pas vraiment du codage...
N’oubliez pas d’enregistrer la page avec l’extension .html
Bref, une fois ceci fait, nous allons commencer à faire le CSS.
Sur votre éditeur de texte, ouvrez donc un nouveau document.
Nous allons commencer avec les réglages indispensables du « body »
body
{
width: 800px;
margin: auto;
margin-top: 0px;
background-color:# bfd2e6;
}
Alors, quelques explications :
width : 800px ; Je dis donc que la largeur doit faire 800 pixels, ce qui correspond à la largeur de notre « planche » faite sur Photoshop.
margin: auto ; va tout simplement permettre de centrer notre contenu.
margin-top: 0px ; ici, cela ne servira à rien puisque la valeur est de 0px, mais si vous voulez décoller l’image du haut de la page, il suffit de mettre 10px ou bien 20px ou la valeur que vous désirez.
background-color:# bfd2e6 ; pourquoi mettre un fond de couleur alors que nous avons déjà une image me diriez vous? Et bien, cette couleur correspond à la même que celle que j’ai utilisé pour faire le fond de mon image, cela va donc permettre de faire une sorte de continuité de la couleur et ainsi éviter la coupure bleu/blanc qui est très laide.
On en à fini avec body, passons donc aux paramètres de notre « planche » :
#design
{
width: 800px;
height: 800px;
margin: center;
background-image:url(images/planche.png);
}
Notez le # avant le « design » n’oubliez pas que pour demander les divisons, on utilise les # et pour demander les classes, on utilise un . (un point quoi).
Donc avec ces propriétés CSS, je modifie directement la division « design » que nous avons faite dans le HTML (si vous avez appelé cette division autrement, mettez le nom en fonction de ce nom, cela va de soi).
Donc :
width: 800px; comme avant, il faut préciser que notre image fait 800px de large.
height: 800px; on précise également sa hauteur.
margin: center; nous permet de centrer notre image.
background-image:url(images/planche.png); et donc enfin le chemin qui fera apparaitre notre planche en tant qu’image de fond. Faites très attention au chemin que vous donnez.
Si l’image se trouve dans le même dossier que votre page css et html (disons que votre dossier s’appelle « site ») le chemin sera juste « planche.png » si elle se trouve dans un sous dossier nommé par exemple « images » (ce qui est mon cas), le chemin sera donc « images/planche.png ».
Cela paraît anodin, mais c’est le genre d’erreur dont on ne se rend pas forcément compte, je vous mets juste en garde .
Pour ma part, j’obtiens ça :
[img
Maintenant, vous allez me dire « ok, génial, j’ai mon image et un fond qui apparaissent, mais, euuuh, le texte, je le mets où? »
Pas d’inquiétudes, on s’y met tout de suite :’) .
On rajoute des nouvelles propriétés CSS, cette fois ci sur la division « texte ».
Voici ce que cela donne :
#texte
{
width: 400px;
height: 400px;
margin-top:-600px;
margin-left: 200px;
width: 400px; définit la largeur de notre division (la taille du petit carré, vous vous souvenez ?).
height: 400px; définit la hauteur de notre division (bah oui, un carré ça a la même largeur que la hauteur).
margin-top:-600 px; alors là, ça se complique légèrement. En fait, les propriétés « margin-top », « margin-bottom » .... permettent d’ajuster notre division, de la faire se « balader » un peu où on veut sur notre page. J’ai donc du un peu bidouiller pour pouvoir faire coller ma division de 400*400 px juste à l’intérieur du petit encadré.
Bon allez, je vais vous donner une astuce pour mieux vous y retrouver :
Dans le CSS de la division texte, mettez un petit :
Background-color : red ;
En plus, cela va donner une magnifique couleur rouge flash à votre carré de 400*400 px et ainsi, vous pourrez mieux le placer à votre guise :
Certes ce n’est pas beau, mais pas d’inquiétudes, une fois le réglage fait, retirez cette propriété .
margin-left: 200px; même chose que pour avant, sauf que cette fois, nous réglons sur le sens horizontal.
Cette fois, le compte est bon !
Vous pouvez maintenant écrire du texte qui se casera automatiquement dans notre petit carré.
Enregistrez cette page sous l’extension .css et ABSOLUMENT dans le même dossier que la page HTML et non pas dans un sous dossier ou autre !
Appelez là de préférence « design.css » de façon à ne pas s’emmêler les pinceaux.
Retournez sur votre page HTML et dans les balises « head » rajoutez :
<link rel="stylesheet" type="text/css" href="design.css" />
Si votre fichier CSS s’appelle autrement, nommez-le avec le nom que vous avez utilisé.
Cela va juste permettre de relier la page CSS à celle en HTML (pour que vos propriétés s’appliquent tout de même).
Et pour terminer, sur votre page html, à l’intérieur de la division « texte », mettez votre texte, vos lien ou autres.
N’oubliez pas qu’il faut coder avec les balises habituelles, mais vous êtes censés le savoir.
On obtient donc une petite page d’accueil pour introduire vos sites web etc.
Revoilà le lien final :
Voilà, nous sommes arrivés à la fin de ce tutoriel, certes pas compliqué, mais le résultat est plutôt sympathique, je suis sûr que cela vous a été utile .
Sur ce, je vous souhaite une bonne journée et à bientôt !
L’équipe de PokémonTrash.
