Euh non on a pas le droit --" alors je vais vous faire un tuto sur le codage HTML/CSS.
Tout d'abord, moi j'utilise le bloc notes mais d'autre logiciels peuvent être utilisés par exemple Dreamviewer...
Donc avant toute chose il faut faire un design sur photoshop donc ce tuto sera en 2 partis : Le design Photoshop et enfin le codage.
1ere Partie : le DesignI) Le langage web : si je met ce grand 1 ici et non pas dans la partie 2 c'est parce que il faut savoir ce que l'on va créer (quoi de plus normale ???)
Donc 1 : Le header c'est a dire la bannière (je pense que tout le monde sais ce que c'est)
- Le background donc le fond.
- Le menu
- Le Body c'est le corps de la page donc on peux presque dire ce que c'est la partie centrale.
- Le Footer c'est a dire le pied le page (© ...)
Voila maintenant je penses qu'une image serai mieux que des mots pour vous montrer l’emplacement de chacune de ces parties :
- Spoiler:
PS : nous pouvons déplacer le menu mais pas le reste exemple :
- Spoiler:
Ou encore :
(Pas envie de faire d'autres images ...)
On peux aussi positionner le menu à droite ou alors le mettre à gauche et à droite.
II) : Le Fond
Vous allez peut-être pas comprendre ici mais je pourrais vous expliquez si vous avez pas compris.
Un fond n'est extensible que si l'on met une couleur mais sans images. (extensible = si il n'y a rien sur votre page la page fera quand même la taille du fond)
Donc sans images une couleurs simple sa passe mais ce n'est pas très beau non? Alors j'ai une solution :
Mettre des images mais seulement en haut comme sa le fond n'est pas grand du tout et le reste est de la couleur si vous ne comprenez pas vous comprendrez lorsque on en viendra au chapitre sur le codage.
Alors ici on va créer un fond simple :
Lancez Photoshop, Créer une nouvelle image de 1600x900 pixels et une résolution de 72. et enin avec un fond transparent.
Utilisez l'outil "Pot de peinture" pour remplir votre fond de la couleur de votre choix.
J'ai choisis ici un grand assez sombre : #202020
Résultat :
- Spoiler:
La suite au prochain poste PS: désolé pour les doubles/triples postes que je vais faire mais ce tuto est long.
