[Plan du site]
Vous êtes ici ---
> Le Site du Zéro
> Les tutoriels
> Non-Officiels
> Site Web
> XHTML / CSS
> Des bordures personnalisées, pour des cadres fixes ou extensibles
> Lecture du tutoriel
Des bordures personnalisées, pour des cadres fixes ou extensibles
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Bonjour !
Dans ce tuto, vous allez apprendre à créer des « bordures » personnalisées en graphisme, et à les coder de manière sémantique.
Après avoir suivi ce tuto, vous devriez donc être capables de faire ceci :
.
Bon, j'admets, ce n'est pas hyper joli, mais l'important ici est d'apprendre à manier un logiciel de graphisme, et surtout d'apprendre à coder ce type de design.
Mais avant toute chose, j'aimerais vous sensibiliser à la sémantique.
Si vous êtes convaincus que les tableaux, c'est génial pour faire du graphisme en XHTML, je vous invite à lire les articles suivants avant de vous lancer dans mon tutoriel :
Votre mission (si vous l'acceptez) :
Créer un design complet pour site web avec des cadres aux coins arrondis.
Vos outils :
Un logiciel de manipulation d'images et un éditeur de texte (qui colorise le texte, de préférence).
Votre méthode :
C'est la mienne, celle qui suit.
Le temps qui vous est imparti :
Ça dépend...
Le matériel (ou plutôt les logiciels 
) nécessaire(s)
Il vous faut bien sûr un logiciel de création graphique.
Celui-ci doit gérer la transparence, posséder un système de calques et, si possible (c'est beaucoup plus difficile sans), posséder un système de règles.
Vous pouvez par exemple utiliser
The GIMP :
zerro a créé un tutoriel court et sympa pour bien débuter sur ce site :
Coup d'oeil sur Gimp - Débuter. Il y a aussi
The Gimp sous tous les angles de
Filzonfire, ainsi que
The Gimp : --Initiation-- qui ont l'air plus complets, mais je n'ai malheureusement pas encore eu le temps de les lire
. Personnellement, je vais vous guider avec The GIMP ; vous utilisez donc le logiciel que vous souhaitez, mais ne me demandez pas de conseils pour utiliser Photoshop
.
Création du cadre
Sous The GIMP, faites "
Fichier" > "
Nouveau" pour ouvrir un nouveau document.
En taille, mettez 500 px en largeur et 500 px en hauteur, et déroulez "
Options avancées" pour mettre "
Transparence" dans le champ "
Remplir avec".
Appuyez maintenant sur "
Valider".
C'est bon, j'ai pas perdu la moitié d'entre vous ?
Les survivors vont vérifier que les règles sont bien activées en cochant "
Affichage" > "
Afficher les règles", si ce n'est pas déjà fait.
Faites "
Sélection" > "
Tout" (Ctrl + A) de manière à sélectionner tout le calque.
Faites ensuite "
Sélection" > "
Rectangle arrondi..." et mettez un rayon de 10 %, par exemple
(
sans cocher "concave").
Prenez alors l'outil "Pot de peinture", et cliquez à l'intérieur de votre sélection.
Vous pouvez bien sûr changer la couleur ou la texture de remplissage dans l'onglet "
Option des outils"
.
Pour ma part, je me prends une couleur rouge bordeaux (156 rouge, 0 vert et 0 bleu) en
PP, je choisis "
Remplir avec la couleur de PP" et "
Remplir toute la sélection".
Nous allons maintenant découper à l'intérieur de notre rectangle arrondi.
D'abord, sachez que pour faire un rectangle arrondi, The GIMP fait des calculs mathématiques complexes : il est donc difficile de prévoir le rayon en valeur absolue (c'est-à-dire en pixels).
Dans le cas d'un cadre de 500 * 500 px avec un rayon à 10 %, ça fait environ 21 px ; mais qu'en serait-il dans le cas d'un cadre de 400 * 400px avec un rayon de 7 % ?
Impossible de le savoir (à moins d'avoir capturé un matheux pour ses besoins personnels
) !
On va donc faire au feeling.
Pour cela, nous allons utiliser les guides
.
Les guides sont très pratiques pour faire du webdesign, vous aurez vite fait de vous en rendre compte
.
Normalement, vous n'avez pas supprimé la sélection !
Ne le faites pas avant que je vous l'aie dit !
Pour créer un guide, positionnez le pointeur de votre souris sur la règle à droite de la fenêtre de votre projet (si vous ne voyez pas les règles, faites "
Affichage" > "
Afficher les guides"), puis faites un cliquer-glisser sur votre image, jusqu'à la fin du coin haut gauche.
Une fois le guide posé, vous pouvez remarquer que vous n'avez alors plus le pot de peinture comme outil, mais la flèche de déplacement (GIMP a changé d'outil tout seul, comme un grand
).
Faites la même chose avec la verticale, en créant un guide par un cliquer-glisser à partir de la règle du haut.
Vous devez obtenir quelque chose ressemblant à ceci :
Prenez maintenant l'outil rectangle de sélection.
Vérifiez que "
Affichage" > "
Aligner sur les guides" est coché : cela sert à faire du magnétisme (non, l'esprit ne va pas frapper 3 coups
).
Sélectionnez la partie qui se trouve à l'intérieur, et faites "
Édition" > "
Couper", de manière à supprimer la partie qui ne nous intéresse pas.
Vous devez obtenir ça :
On peut maintenant s'amuser à ajouter des petits filtres à notre image : vous pouvez par exemple faire "
Script-Fu" > "
Décor" > "
Ajouter un biseau".
Moi, je choisis une épaisseur de 10, je décoche "
Travailler sur une copie" (pour qu'il ne nous ouvre pas une nouvelle fenêtre) et je laisse décoché "
Conserver le calque de relief" ; le calque normal et le calque de relief seront alors fusionnés
.
Maintenant qu'on a bien avancé, je vous conseille d'enregistrer votre projet.
Faites "
Fichier" > "
Enregistrer sous", et déroulez "
Sélectionner le type de fichier".
Vous avez alors deux possibilités :
- Enregistrer "selon l'extension", et nommer votre projet "nomduprojet.xcf".
- Sélectionner "GIMP XCF image" (ayant pour extension .xcf), et nommer votre projet "nomduprojet".
J'avoue que j'ai plus l'habitude d'enregistrer "
selon l'extension", en changeant l'extension suivant le type de fichier que je veux, je trouve ça plus rapide
.
Le découpage
Commencez par prendre l'outil "rectangle de sélection".
Dézoomez un peu (66 % devraient suffire pour une résolution d'écran de 1024 * 780), et sélectionnez le coin haut gauche en partant en dehors de l'image, et en se rapprochant des guides.
Quand vous sentez que la sélection colle aux guides, vous pouvez relâcher la souris.
Faites "
Édition" > "
Couper".
On va maintenant créer un nouveau fichier pour y coller notre coin : "
Fichier" > "
Nouveau".
Normalement, la taille de l'image est de la taille de votre coin (pratique, non ?), pour moi : 21 * 21 px.
Dans "
Options avancées" > "
Remplir avec", mettez "
Transparence" comme pour tout à l'heure
.
Faites maintenant "
Édition" > "
Coller" pour coller votre coin.
Votre coin collé, vous pouvez l'enregistrer : "
Fichier" > "
Enregistrer sous" > "
hg.png" ("
Selon l'extension").
Une fenêtre vous lance alors un avertissement nous disant que PNG ne gère pas les calques, que ceux-ci devront être fusionnés et que l'image sera exportée avant d'être enregistrée.
Confirmez en cliquant sur "
Exporter".
Arrive ensuite une autre fenêtre pour paramétrer les options.
Laissez comme c'est déjà réglé, et cliquez sur "
Valider".
Vous avez donc enregistré votre premier coin
.
Il faut maintenant faire pareil pour les autres parties de l'image.
Je suppose que je n'ai pas besoin de tout vous réexpliquer pour chaque partie : adaptez simplement, de toute manière c'est assez intuitif
.
Comment nommer vos éléments de design
Pour qu'on ait tous la même chose, je vous indique comment j'ai appelé mes éléments de design :
| Nom | Description |
|---|
| bd.png |
le coin bas droit |
| b.png |
la bordure du bas |
| bg.png |
le coin bas gauche |
| d.png |
la bordure de droite |
| g.png |
la bordure de gauche |
| hd.png |
le coin haut droit |
| h.png |
la bordure du haut |
| hg.png |
le coin haut gauche |
Éléments de design créés et découpés
Si vous êtes arrivés jusqu'au bout, je vous félicite : c'est vrai que ce n'est pas hyper évident, le design web
.
Vous pouvez maintenant remercier
Wilber (la mascotte de The GIMP), et fermer votre outil de création graphique préféré
.
Au fait, sachant que le
PNG-24 n'est pas supporté sous IE, il faut, une fois votre projet fini, faire "
Image" > "
Mode" > "
Couleurs indexées", cocher "
Générer une palette optimale" avec un "
Nombre maximal de couleurs" de 256. Validez.
Quand vous enregistrerez, ce sera du PNG-8
.
Voilà : nous avons fait le plus dur ; maintenant,
il ne reste plus qu'à faire la partie code (tiens des triplés
).
Donc, nous allons utiliser des
<div></div> : oui, mais comment ?
Bah oui... comment ?
Eh oui ! C'est là qu'est toute la question.
Bah... euh... on pourrait prendre 3 div de base : une pour le haut, une pour le milieu et une pour le bas et mettre à l'intérieur des <div></div> inline.
Mouais... théoriquement on pourrait... moi, j'ai essayé : je n'ai pas réussi...
Ça pose pas mal de problèmes en plus, et on peut d'ailleurs trouver plus simple.
Nous allons utiliser
{roulement de tambours} ...
... ... ... ... ... ...
... ... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ... ... ... ... ...
les imbrications de balises !
J'ai vaguement lu sur le forum que l'imbrication des tableaux nuisait à l'accessibilité d'un site ; ça risque pas de faire la même chose avec les <div></div> ?
Non, pas vraiment puisque les div sont des balises créées spécialement pour le design ; de plus, elles ne contiennent pas d'images qui ne font pas partie du contenu, vu qu'on va insérer notre bordure grâce à la propriété CSS
background.
Certains m'accuseront peut-être de divite (utilisation de
<div></div>, alors qu'on peut appliquer du style à des balises
<hx><hx> ou
<p></p>), mais je trouve qu'il est plus pratique pour la suite de faire de cette manière (le code est plus pérenne, plus fiable
).
Bon alors, le code !
D'abord le contenu, toujours (c'est pour justement voir si on n'a pas déjà des balises auxquelles on peut appliquer du style avant de rajouter des
<div></div>).
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>La vie de Kazayarama le chamow</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>La vie de Kazayarama le chamow en images</h1>
<div class="element_menu">
<h2>Le menu des chamows</h2>
<ul>
<li><a href="edito.html">Édito</a></li>
<li><a href="kazayarama_sur_le_web.html">Kazayarama sur le Web</a></li>
<li><a href="qui_est_kazayarama_le_chamow">Qui est Kazayarama le chamow ?</a></li>
</ul>
</div>
</body>
</html>
|
Qu'est-ce qu'on a donc comme balises déjà présentes ?
On a donc un
<h2></h2>, un
<ul></ul>, et un
<div class="element_menu"></div>.
Soyons clairs. On ne se servira pas du
<div class="element_menu"></div> : je me base sur le code du tuto
"Créons le design de votre site web" de M@teo21 : ce
<div></div> ne vous servirait donc qu'à espacer verticalement les différents sous-menus (et éventuellement leur taille, quoique ça, M@teo21 le fait dans un
<div id="menu"></div> qui englobe tous ces
<div class="element_menu"></div>, il me semble...).
Il nous reste donc le
<h2></h2> et le
<ul></ul>.
On pourrait mettre
hg.png en fond du
<h2></h2>, et le
g.png en fond du
<ul></ul>, mais si jamais on veut mettre un
margin entre le
<h2></h2> et le
<ul></ul>, le coin haut gauche sera séparé du côté gauche, ce qui n'est pas terrible (à la limite, on pourrait changer le
margin en
padding, mais comme vous êtes vraiment têtus, vous voulez vraiment un
margin, pas un
padding, vous n'en demordez vraiment pas
: je suis donc obligé de vous proposer une autre solution).
Il n'est donc pas question de séparer le contenu du menu : on va donc mettre tout ce contenu dans un <div></div>.
Et pour bien repérer ce div au moment du CSS, on va lui donner un nom (une "class").
Appelons-le "cote_droit", par exemple.
Code : HTML1
2
3
4
5
6
7
8
9 | <div class="cote_droit">
<h2>Le menu des chamows</h2>
<ul>
<li><a href="edito.html">Édito</a></li>
<li><a href="kazayarama_sur_le_web.html">Kazayarama sur le Web</a></li>
<li><a href="qui_est_kazayarama_le_chamow">Qui est Kazayarama le chamow ?</a></li>
</ul>
</div>
|
Et si on appliquait un style à ce div ?
Code : CSS1
2
3
4
5 | div.cote_droit
{
background: url("d.png") right repeat-y;
padding-right: 23px; /* 21 px + 2 px pour faire plus joli. Remplacez par votre valeur à vous */
}
|
On a donc réussi à placer notre bordure droite, et à faire en sorte que le texte n'aille pas par dessus grâce à la propriété
padding-right.
Pour connaître la taille d'une image, vous pouvez logiquement la trouver grâce à l'explorateur de votre système d'exploitation (du moins, pour Windows XP et Ubuntu Linux), mais vous pouvez aussi la trouver via The GIMP, en faisant "Image" > "Échelle et taille de l'image".
Et si on faisait la même chose pour l'autre côté ?
Code : HTML 1
2
3
4
5
6
7
8
9
10
11 | <div class="cote_gauche">
<div class="cote_droit">
<h2>Le menu des chamows</h2>
<ul>
<li><a href="edito.html">Édito</a></li>
<li><a href="kazayarama_sur_le_web.html">Kazayarama sur le Web</a></li>
<li><a href="qui_est_kazayarama_le_chamow">Qui est Kazayarama le chamow ?</a></li>
</ul>
</div>
</div>
|
1
2
3
4
5 | div.cote_gauche
{
background: url("g.png") left repeat-y;
padding-left: 23px; /* 21px + 2px pour faire plus joli. Remplacez par votre valeur à vous */
}
|
Il nous manque maintenant le haut et le bas.
Mais comment faire pour que ce soit extensible ?
Eh bien nous allons mettre trois div :
Code : HTML1
2
3
4
5
6 | <div class="coin_hg">
<div class="coin_hd">
<div class="bordure_h">
</div>
</div>
</div>
|
Et puis on va faire la même chose que pour le texte, sauf que dans le div du milieu, on va mettre un fond
.
On a donc ça :
Code : CSS 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | div.coin_hg
{
background: url('hg.png') left top no-repeat;
padding-left: 21px; /* Remplacez par votre valeur à vous */
}
div.coin_hd
{
background: url('hd.png') right top no-repeat;
padding-right: 21px; /* Remplacez par votre valeur à vous */
}
div.bordure_h
{
background: url('h.png') top repeat-x;
}
|
Vous voyez quoi, quand vous lancez la page ?
Rien
.
Vive l'arnaque
!
Meuhnon, c'est normal, c'est parce qu'il n'y a rien dans les
<div></div>, donc on ne nous affiche rien.
On va donc mettre une
height au div le plus imbriqué, de manière à ce que ceux qui l'encadrent soient aussi agrandis.
Code : CSS1
2
3
4
5 | div.bordure_h
{
background: url('h.png') top repeat-x;
height: 21px; /* Remplacez par votre valeur à vous */
}
|
C'est bien mieux, non ?
Non
.
Il y a un espace entre la bordure du haut et les bordures latérales, et ce quelque soit mon navigateur, comme ça :
C'est pô juste
.
Beuh, faut pas se mettre dans tous ces états pour si peu, c'est juste le
margin par défaut du
<h1></h1> qui pose problème ; d'ailleurs, ça ferait pareil en bas avec le margin du
<ul></ul> (mais on n'a pas encore mis les
<div></div> et les
background en bas
).
Il faut donc faire en sorte que ce
margin ne sorte pas.
Euh...
overflow ?
Bingo !
On va faire un
overflow: hidden;.
Oui, mais sur quel
<div></div> ? Le plus imbriqué, ou le moins imbriqué ?
À votre avis ? Vous pouvez toujours essayer les deux
.
Si on le met sur le moins imbriqué, le margin sortira quand même du plus imbriqué.
Il faut donc mettre le
overflow: hidden; sur le
<div></div> le plus imbriqué !
Capitche ?
Code : CSS1
2
3
4
5
6
7 | div.cote_droit
{
background: url("d.png") right repeat-y;
padding-right: 23px; /* 21 px + 2 px pour faire plus joli. Remplacez par votre valeur à vous */
overflow: hidden;
}
|
Cool, ça marche
...sauf sous
IE...
Tant pis
.
...
...
...
Bon, okay, je crache le morceau.
Il existe une solution : mettre
margin-top: 0; sur le
<h2></h2>, et un
margin-bottom: 0; sur votre
<ul></ul>.
Ce n'est pas hyper pratique mais au pire, vous pouvez toujours faire comme moi : interdire l'accès à votre site aux visiteurs utilisant IE
.
Reste plus qu'à faire pareil pour le bas :
Code : HTML1
2
3
4
5
6 | <div class="coin_bg">
<div class="coin_bd">
<div class="bordure_b">
</div>
</div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 | div.coin_bg
{
background: url('bg.png') left top no-repeat;
padding-left: 21px; /* Remplacez par votre valeur à vous */
}
div.coin_bd
{
background: url('bd.png') right top no-repeat;
padding-right: 21px; /* Remplacez par votre valeur à vous */
}
div.bordure_b
{
background: url('b.png') top repeat-x;
height: 21px; /* Remplacez par votre valeur à vous */
}
|
Le code en entier
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>La vie de Kazayarama le chamow</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<h1>La vie de Kazayarama le chamow™ en images</h1>
<div class="element_menu">
<div class="coin_hg">
<div class="coin_hd">
<div class="bordure_h">
</div>
</div>
</div>
<div class="cote_gauche">
<div class="cote_droit">
<h2>Le menu des chamows</h2>
<ul>
<li><a href="edito.html">Édito</a></li>
<li><a href="kazayarama_sur_le_web.html">Kazayarama sur le Web</a></li>
<li><a href="qui_est_kazayarama_le_chamow">Qui est Kazayarama le chamow ?</a></li>
</ul>
</div>
</div>
<div class="coin_bg">
<div class="coin_bd">
<div class="bordure_b">
</div>
</div>
</div>
</div>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51 | div.coin_hg
{
background: url('hg.png') left top no-repeat;
padding-left: 21px; /* Remplacez par votre valeur à vous */
}
div.coin_hd
{
background: url('hd.png') right top no-repeat;
padding-right: 21px; /* Remplacez par votre valeur à vous */
}
div.bordure_h
{
background: url('h.png') top repeat-x;
height: 21px; /* Remplacez par votre valeur à vous */
}
div.cote_gauche
{
background: url("g.png") left repeat-y;
padding-left: 23px; /* 21 px + 2 px pour faire plus joli. Remplacez par votre valeur à vous */
}
div.cote_droit
{
background: url("d.png") right repeat-y;
padding-right: 23px; /* 21 px + 2 px pour faire plus joli. Remplacez par votre valeur à vous */
overflow: hidden;
}
div.coin_bg
{
background: url('bg.png') left top no-repeat;
padding-left: 21px; /* Remplacez par votre valeur à vous */
}
div.coin_bd
{
background: url('bd.png') right top no-repeat;
padding-right: 21px; /* Remplacez par votre valeur à vous */
}
div.bordure_b
{
background: url('b.png') top repeat-x;
height: 21px; /* Remplacez par votre valeur à vous */
}
|
Donc ?
Bon bah voilà ! En gros, c'est fini !
N'oubliez pas de faire les modifications nécessaires sur les éventuels éléments qui pourraient avoir un
margin sortant du cadre.
Le chapitre qui suit est une extension de tuto qui vous permettra d'aller plus loin : vous pouvez le prendre comme un
TP, si vous voulez.
Je vous conseille quand même de le lire, ça peut vous permettre de faire des cadres plus jolis
.
D'abord je voudrais féliciter ceux qui sont arrivés jusque là : ce n'était pas facile (maintenant que c'est fait, on peut le dire
).
Bon !
Vous avez en quelque sorte amélioré la propriété
border, et ça fait plus joli, mais... cela a-t-il un réel intérêt ?
...alors qu'on peut aller plus loin.
Bon : pas
beaucoup plus loin... mais plus loin quand même.
On va faire un truc joli
.
Une petite icône en haut à gauche, et un "graffiti" en bas à droite
Ça va être un peu la même opération que tout à l'heure pour The GIMP, quant au code : il . ne . change . pas ! (ou presque
)
Nous allons faire ça :
Bien sûr, vous pouvez remplacer le biohazard par des bulles, la cible par un poisson, et le rouge par du bleu si vous voulez faire un style
aqua.
Ou bien mettre des
desert eagles à la place, le tout en jaune-orangé.
C'est vous qui voyez !
Ce dont on a besoin
Vous devez d'abord reprendre votre projet, que vous avez normalement enregistré sous le nom de projet.xcf.
Faites-en une copie (de manière à ce que vous ayez toujours l'original), sous le nom "projet 02.xcf" par exemple.
Vous aurez besoin des deux images suivantes :
Faites un clic droit dessus et "
Enregistrer l'image sous...", ou quelque chose du genre.
La partie graphisme
On va commencer par agrandir le cadre de notre image vers le haut et vers la gauche, afin de pouvoir y placer le BioHazard (ou autre chose).
Faites donc "
Image" > "
Taille du canevas" ; mettez 600 px en largeur et 600 px en hauteur pour agrandir votre image, et faites un décalage de 100 px en X, et 100 px en Y de manière à ce que votre image soit agrandie vers le haut et la gauche.
Il nous faut maintenant importer notre BioHazard dans notre projet.
Faites "
Fichier" > "
Ouvrir comme un calque...", et allez chercher le BioHazard que vous avez normalement enregistré tout à l'heure.
Prenez maintenant l'outil de déplacement.
Dans l'onglet "
Option des outils", vérifiez qu'il affecte bien les calques (premier rectangle) et qu'il est coché "
Déplacer le calque actif".
Sélectionnez alors le calque du BioHazard, et déplacez le calque dans le coin de votre bordure, en haut à gauche (positionnez le centre du rondeau à l'intersection du guide vertical et du guide horizontal, si vous les avez laissés).
Vous obtenez alors ça :
- On peut maintenant passer à la découpe
.
- Déjà ?
- En fait, non
.
Il nous reste un truc à règler.
Il faut remplir de noir (encore une fois : "ou autre chose") l'intérieur de notre cadre.
- Pourquoi ?
- Vous devriez comprendre au moment de la découpe et du codage.
Dans la palette de calques (l'onglet des calques, quoi), positionnez-vous sur le calque où se trouve votre cadre (il se nomme "
Arrière-plan" chez moi
).
Prenez maintenant la baguette magique (raccourcis clavier Z).
Règlez ainsi :
| Seuil |
0 |
| Échantillonner sur tous les calques |
Décoché |
| Sélectionne des régions transparentes |
Coché |
| Rayon |
0 |
| Mode |
Remplace la sélection courante  |
Cliquez à l'intérieur du cadre pour créer votre sélection, puis prenez le pot de peinture et remplissez votre sélection de noir.
Faite ensuite "
Sélection" > "
Aucune" pour tout désélectionner.
Pour qu'on puisse tout découper d'un coup, faites un clic droit sur le calque du biohazard et faites "
Fusionner vers le bas" de manière à ce qu'on n'ait plus qu'un seul calque.
Vous pouvez éventuellement faire "
Image" > "
Découpage automatique de l'image", histoire de supprimer les blancs (ou plutôt devrais-je dire « les transparents ») de l'image.
Reprenez l'outil de déplacement.
Dans "
Option des outils", cochez cette fois-ci "
Sélectionner un calque ou guide", pour qu'on puisse sélectionner... notre guide, gagné
.
Déplacez le premier guide vertical sur le bord gauche de l'image (pour magnétiser le bord de l'image pour notre future sélection).
Remettez-en un autre (vertical) à la fin du biohazard.
Déplacez le premier guide horizontal sur le bord haut de l'image.
Remettez-en un autre (horizontal) à la fin du biohazard.
Enfin, toujours pour magnétiser les bords de l'image, placez des guides sur le bord droit et le bord bas.
Si vous avez fait exactement ce que je vous ai dit, c'est-à-dire que vous avez laissé les guides qui étaient à droite et en bas, sur les bords intérieurs de la bordure, alors ça devrait être bon
.
Vous devriez avoir quelque chose comme ça :
Il vous suffit maintenant de faire comme tout à l'heure : sélectionner chaque rectangle délimité par les guides, faites "
Édition" > "
Copier" > "
Coller en tant que nouveau" et enregistrez au format PNG.
Je vous conseille de les enregistrer dans un sous-dossier nommé "persos" (que vous aurez au préalable créé, bien entendu) : comme ça, vous pourrez appeler les éléments de design pareil, en rajoutant juste "persos/" devant dans le CSS
.
Pensez à faire "Image" > "Mode" > "Couleurs indexées" avec 256 couleurs, si vous voulez que votre PNG puisse être lu sans problème par le vieux navigateur qu'est Internet Explorer, sans avoir à rajouter quoique ce soit (du Javascript, par exemple).
Si vous commencez à découper votre projet comme ça, vous allez vite tomber sur une fonction très pratique (ironie inside
) de The GIMP, qui va en fait vous handicaper. En effet, lorsque tout un bord horizontal ou vertical d'une sélection que vous copiez est vide (
cad transparent), alors la sélection est automatiquent réduite.
Pratique, hein ?
Bon : n'ayez pas peur, il y a une solution à tout (si si, sinon, c'est qu'il n'y a pas de problème
) : il suffit, avant de faire votre sélection, de créer un nouveau calque ("
Calque" > "
Nouveau calque"), de le placer dans la palette des calques en arrière-plan (faites juste un cliquer-glisser vers le bas), et, en se plaçant sur ce calque (en cliquant dessus), le remplir grâce au pot de peinture, de préférence avec une couleur qui ne fait pas partie de votre image (dans mon cas, du bleu, si vous faites un style marin, préférez du vert
).
Il n'y a plus ensuite qu'à faire un clic sur le calque le plus en haut, et cliquer sur "
Fusionner vers le bas".
Suivez maintenant les instructions énoncées précédement (découpe, création d'une nouvelle image), et utilisez l'outil "
Sélectionne des régions par couleur" en prenant soin de mettre le "
Seuil" à 0, de manière à ce que cet outil ne prenne bien que la couleur voulue, et pas celles qui s'en approchent
.
Un petit "
Édition" > "
Couper", et c'est bon, reste plus qu'à enregistrer.
Eh oui, la route est longue, mais la voie est libre
.
Maintenant, sachez que
vous n'êtes nullement obligés de copier la partie noire du milieu : ça, on pourra l'inclure en CSS avec la propriété
background-color.
Et si vous avez bien suivi la structure du XHTML et le fonctionnement du CSS, vous devriez avoir remarqué quelque chose.
Lorsque vous arrivez au bord gauche, vous vous rendez sûrement compte que le noir prend une grande partie, supprimez-le.
Pour ce faire, utilisez l'outil "
Découper et redimensionner", faites une sélection (tout, sauf le noir, cela inclut la zone transparente) et cliquez sur "
Découper".
La partie XHTML/CSS
Vous avez donc les éléments de design suivants :
| Nom du fichier de l'image | Image |
|---|
| bd.png |
 |
| b.png |
 |
| bg.png |
 |
| d.png |
 |
| g.png |
 |
| hd.png |
 |
| h.png |
 |
| hg.png |
 |
Il nous faut donc coder tout ça...
Et si on repartait du code de tout à l'heure ?
Nous avions donc ça tout à l'heure :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>La vie de Kazayarama le chamow</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="style 02.css" />
</head>
<body>
<h1>La vie de Kazayarama le chamow™ en images</h1>
<div class="element_menu">
<div class="coin_hg">
<div class="coin_hd">
<div class="bordure_h">
</div>
</div>
</div>
<div class="cote_gauche">
<div class="cote_droit">
<h2>Le menu des chamows</h2>
<ul>
<li><a href="edito.html">Édito</a></li>
<li><a href="kazayarama_sur_le_web.html">Kazayarama sur le Web</a></li>
<li><a href="qui_est_kazayarama_le_chamow">Qui est Kazayarama le chamow ?</a></li>
</ul>
</div>
</div>
<div class="coin_bg">
<div class="coin_bd">
<div class="bordure_b">
</div>
</div>
</div>
</div>
</body>
</html>
|
Vous remarquerez que j'ai créé une nouvelle feuille de style nommée "style 02.css" : n'oubliez pas de la lier à votre document XHTML
.
Code : CSS 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59 | div.coin_hg
{
background: url('persos/hg.png') left top no-repeat;
padding-left: 123px; /* Remplacez par votre valeur à vous */
}
div.coin_hd
{
background: url('persos/hd.png') right top no-repeat;
padding-right: 21px; /* Remplacez par votre valeur à vous */
}
div.bordure_h
{
background: url('persos/h.png') top repeat-x;
height: 114px; /* Remplacez par votre valeur à vous */
}
div.cote_gauche
{
background: url('persos/g.png') left repeat-y;
padding-left: 56px; /* Remplacez par votre valeur à vous */
}
div.cote_droit
{
background: black url('persos/d.png') right repeat-y;
padding-right: 23px; /* 21 px + 2 px pour faire plus joli. Remplacez par votre valeur à vous */
padding-left: 2px;
overflow: hidden;
color: white;
}
div.milieu
{
background: url("persos/cible.png") bottom right no-repeat;
}
div.coin_bg
{
background: url('persos/bg.png') left top no-repeat;
padding-left: 56px; /* Remplacez par votre valeur à vous */
}
div.coin_bd
{
background: url('persos/bd.png') right top no-repeat;
padding-right: 21px; /* Remplacez par votre valeur à vous */
}
div.bordure_b
{
background: url('persos/b.png') top repeat-x;
height: 21px; /* Remplacez par votre valeur à vous */
}
|
Qu'est-ce qui ne va pas, là-dedans ?
Il faut bien sûr changer les valeurs de la marge intérieure gauche (
padding-left) pour tout le côté gauche, même pour le milieu et le bas, à cause du côté transparent, qui, à part en étant remplacé par un
margin-left, est obligé d'être là pour aligner le milieu et le bas avec le haut.
Rappelez-vous : pour connaître la taille d'une image via The GIMP, faites "Image" > "Échelle et taille de l'image".
Attention cepedant, vous n'êtes pas obligés, pour le milieu, de mettre autant que pour le haut (et c'est pour ça qu'on a coupé la partie noire, on n'est pas obligés d'avoir une si grande marge à l'intérieur).
Et c'est pareillement valable pour le bas, quoique là, ça ne change strictement rien, qu'on le rétrécisse ou pas
.
Il nous faut aussi augmenter la valeur de la propriété
height du haut, pour laisser apparaître correctement le BioHazard.
Par contre, là, vous ne pouvez pas mettre un peu plus de marge intérieure (
padding-left) pour le
.cote_gauche, parce que si vous faites ça, vous risquez d'avoir une autre couleur en dessous, blanc par exemple au lieu de noir.
Il vous faut donc mettre le
padding-left sur le
dv.cote_droit.
Et j'ai le bonheur de vous annoncer que c'est tout
.
Et le "graffiti" ?
Ah bah oui, c'est vrai ça, le graffiti
.
Il nous manque un élément pour pouvoir insérer une propriété
background en plus.
Rajoutez donc un
<div class="milieu"></div> entre les balises du
<div class="cote_droit"></div>, et rajoutez la propriété de
background sur
.milieu .
Code complet
On a donc pour résumer ça :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>La vie de Kazayarama le chamow™</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="style 02.css" />
</head>
<body>
<h1>La vie de Kazayarama le chamow™ en images</h1>
<div class="element_menu">
<div class="coin_hg">
<div class="coin_hd">
<div class="bordure_h">
</div>
</div>
</div>
<div class="cote_gauche">
<div class="cote_droit">
<div class="milieu">
<h2>Le menu des chamows</h2>
<ul>
<li><a href="edito.html">Édito</a></li>
<li><a href="kazayarama_sur_le_web.html">Kazayarama sur le Web</a></li>
<li><a href="qui_est_kazayarama_le_chamow">Qui est Kazayarama le chamow ?</a></li>
</ul>
</div>
</div>
</div>
<div class="coin_bg">
<div class="coin_bd">
<div class="bordure_b">
</div>
</div>
</div>
</div>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59 | div.coin_hg
{
background: url('persos/hg.png') left top no-repeat;
padding-left: 123px; /* Remplacez par votre valeur à vous */
}
div.coin_hd
{
background: url('persos/hd.png') right top no-repeat;
padding-right: 21px; /* Remplacez par votre valeur à vous */
}
div.bordure_h
{
background: url('persos/h.png') top repeat-x;
height: 114px; /* Remplacez par votre valeur à vous */
}
div.cote_gauche
{
background: url('persos/g.png') left repeat-y;
padding-left: 56px; /* Remplacez par votre valeur à vous */
}
div.cote_droit
{
background: black url('persos/d.png') right repeat-y;
padding-right: 23px; /* 21 px + 2 px pour faire plus joli. Remplacez par votre valeur à vous */
padding-left: 2px;
overflow: hidden;
color: white;
}
div.milieu
{
background: url('persos/Cible.png') right bottom no-repeat;
}
div.coin_bg
{
background: url('persos/bg.png') left top no-repeat;
padding-left: 56px; /* Remplacez par votre valeur à vous */
}
div.coin_bd
{
background: url('persos/bd.png') right top no-repeat;
padding-right: 21px; /* Remplacez par votre valeur à vous */
}
div.bordure_b
{
background: url('persos/b.png') top repeat-x;
height: 21px; /* Remplacez par votre valeur à vous */
}
|
Il est vrai que je n'ai pas trop détaillé les rajouts que j'ai faits, mais vu que je n'ai rien rajouté d'autre que ce que j'avais dit, je pense que vous devriez être en mesure de comprendre
.
Il y a toujours néanmois le problème de
margin qui ne passe pas sous IE : pensez donc à enlever les
margin sur les éléments comme
<h1></h1> (pourquoi pas en les remplaçant par des
padding ?) si vous avez des visiteurs utilisant IE.
Alors ? Vous l'aimez votre cadre ou non ?
C'est bien, ou ce n'est pas bien ?
Arf non, pas les patates
!
Plus sérieusement, ce tuto est effectivement terminé.
J'espère qu'il vous a plu, et surtout, vous aura aidés
.
S'il y a quelque chose que vous n'avez pas compris, si j'ai fait une faute d'orthographe, que j'ai oublié de mettre un espace avant un point d'exclamation, n'hésitez surtout pas à me le faire savoir, je me ferai une joie d'éditer ce tutoriel
.
Et puis, si vous aimez The GIMP (mais seulement si vous l'aimez, hein
), vous pouvez arborer fièrement dans le bas de votre page un des logos que vous trouverez sur
gimp.org.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
.
434 Zéros connectés |
8 requêtes |
0.1125s (0.1006s)
