Retrouvez cet article dans : Linux Magazine HS 22

NIVEAU : AVANCE

Décorer un site peut se faire de différente manière. Même si la mode actuelle est aux sites épurés et à fond blanc, il est possible de faire des choses assez riche et chargée. Encadrer ses pages est donc parfois une bonne idée.

1. Cette fois, l'image de base sera de grande taille. Nous allons travailler sur une sorte de version prototype de la futur page Web. Créez donc une image transparente de 850 pixels de haut sur 800 de large. Plaçons notre premier jeu de guides, horizontalement à 50, 100, 600 et 750 pixels et verticalement à 50, 100, 150 et 800 pixels. Ces guides nous permettront de composer la forme de base de la bordure.

2. Faites une sélection d'une zone rectangulaire utilisant les guides les plus extérieurs sauf pour le haut où nous utiliserons le guide centrale. Notre sélection fait 700 pixels de large sur autant de haut. Retenez ces valeurs dans un coin de votre cerveau. Utilisez ensuite Sélection/Rectangle arrondi. Là, réglez le rayon sur 15% et appliquez le changement. Enfin, agrandissez la sélection de 10 pixels et remplissez de noir.

3. Annulez la sélection existante. Dans les options de l'outil de sélection elliptique choisissez une taille fixe de 100 par 100 pixels. Utilisez l'intersection des seconds guide verticaux et horizontaux pour faire une sélection partant du centre (touche [CTRL] après le clic). Ajoutez ensuite une autre sélection circulaire de manière symétrique de lautre coté de l'image. C'est plus délicat en termes de touches de raccourcis : [MAJ] pour ajouter au moment du clic à l'intersection des guide puis relachement de [MAJ] et maintient de [CTRL] pour la sélection à partir du centre. Ajoutez ensuite une sélection rectangulaire entre les deux cercles (touche [MAJ] au clic puis relachez pour étendre la sélection).

4. Agrandissez la sélection de 10 pixels, remplissez de noir, réduisez de 20 et coupez le contenu de la sélection. Notre forme de base est terminée.

5. Réglez la couleur de premier plan sur une couleur quelconque avec 80% de valeur. Ajoutez un calque remplis de cette couleur. Récupérez la sélection depuis l'alpha sur le calque de forme et ajoutez un masque sur le calque de couleur. Dans la boîte de dialogue utilisez l'option «Sélection» afin que le masque corresponde à la sélection active.

6. Réglez la couleur de premier plan sur noir et ajoutez un calque de cette couleur au dessus de tous les autres. Normalement la sélection est toujours active, réduisez-là de 5 pixels et remplissez de blanc. Enfin, annulez la sélection, appliquez un léger flou gaussien d'une dizaine de pixels et passez le calque en mode «Superposer». Si le résultat n'est pas à la hauteur, changez simplement la couleur du calque immédiatement inférieur.

7. Ajoutez un calque transparent au dessus des précédents puis récupérez la sélection à partir de l'alpha depuis le calque contenant la forme de base. Agrandissez la sélection et remplissez de blanc. La sélection toujours active, déplacez-là vers le bas (utilisez la touche [ALT]) de manière à ce qu'elle repose sur le guide le plus proche. Ceci fait, coupez la sélection. Enfin, appliquez un flou gaussien de 10 pixels de rayon.

8. Ajoutez maintenant un calque transparent au dessus du calque de fond blanc. Récupérez encore une fois la sélection de la forme de base, réduisez la sélection de 5 pixels, déplacez la sélection vers le bas, remplissez de noir, annuler la sélection et appliquez un flou gaussien. Ouf... c'est fini.

9. L'organisation des calques est la suivante. Vous pouvez changer la couleur à loisir en remplissant le calque de base. Il est également possible d'utiliser une texture mais ce ne sera pas compatible avec l'utilisation du prototype.

10. Si vous êtes satisfait du résultat, applatissez l'image et retirez tous les guides existants. Nous allons en placer de nouveaux nous permettant, cette fois de découper l'image et non plus la construire. commençez par placer des guides à 25 pixels de chaque bord de l'image. Les guides suivant nous permettront de découper proprement les coins. Le rayon de courbure des coins peut être calculé : 700/2*(15/100) soit 15% de la moitier de la hauteur de la sélection à arrondir. Ajoutons 50 pour la distance par rapport au bord horizontalement et nous y sommes. Il en va de même pour le guide horizontal du bas. Enfin, placez des guides pour la zone centrale à 200 pixels du bord de l'image.

11. On distingue plusieurs zones de découpe. en vert les zones de taille fixe. En bleu sont présentés les zone de taille variable. On notera qu'entre D et E se glissera une autre zone bleu. Enfin, la zone G en jaune présente l'intérieur de la page ou prendra place le contenu de la page Web. Découpez l'image est un jeu d'enfant. Il suffit en effet de fait des sélections, copier puis utiliser Edition/Coller en tant que nouveau.

Voici la liste des fichiers et leurs dimensions :

On passe au HTML

A présent que vous disposez de tous les éléments graphiques vous permettant de composer une page HTML avec la bordure que nous venons de créer. Bon nombre de personnes ayant déjà composer ce genre de pages feraient usage de tables. Mais les critiques concernant cette méthode ne manquant pas, nous utiliserons ici la technique plus adéquate des balises div.

Il existe plusieurs manières de concevoir ce type de réalisation. L'utilisation des div et des CSS autorise en effet plusieurs structures. Ici nous allons diviser la page en trois parties distinctes : La partie supérieure contenant le titre de la page, la zone centrale contenant la page elle-même et le pied de page fermant la bordure.

Commençons par la zone suppérieure. Celle-ci se compose de 6 éléments graphiques. De gauche à droite : le coin, une fourche, la zone de titre, une fourche, une barre de remplissage et le coin droit. Parmi ces éléments graphiques nous avons seulement deux d'entre eux qui possèdent une taille variable. Tout d'abord la zone de titre qui prendra automatiquement la taille du titre lui-même et la barre de remplissage.

En utilisant les div et surtout en spécifiant leurs propriétés dans la CSS nous pouvons composer cette partie très simplement. Nous plaçerons tous ces éléments graphiques comme fond de div, eux-même seront inclus dans un div plus important occupant la largeur complète de la page. C'est ce div que nous appelerons un conteneur, qui aura en fond le fichier zb.png. Les div placés à l'intérieur masqueront alors ce fond et laisserons apparaître les éléments graphiques de taille fixe.

Commençons par définir les propriétés du conteneur dans la CSS :

#conteneurhaut {
  height: 150px;
  width: 100%;
  display:block;
  background: transparent url(zb.png);
}

Cet identifiant possède une auteur identique à celle du morceau d'image qu'il utilise en fond. La largeur est 100%, c'est à dire toute la page. Passons à la suite, c'est à dire le coin gauche et la fourche :

#a {
  width: 78px;
  height: 150px;
  float: left;
  display:block;
  background: transparent url(a.png);
} 

#b {
  width: 97px;
  height: 150px;
  float: left;
  display:block;
  background: transparent url(b.png);
}

Ces deux éléments possèdent une taille fixe. Il s'agit de division flottante. Ceci nous permet de placer les éléments de gauche à droite sur une seule ligne. La zone de titre est très similaire en termes de placement :

#c {
  height: 150px;
  float: left;
  display:block;
  background: transparent url(c.png);

  text-align: center;
  line-height: 150px;
  font-size: x-large;
  text-decoration: none;
  color: #c30000;
  font-family: Verdana, Arial, Helvetica, serif;
}

Nous ne précisons pas de taille horizontale puisque c'est le texte contenu dans cette division qui s'en chargera. Nous en profitons pour spécifier les propriétés du texte lui-même comme la taille, la couleur, etc... Enfin, nous finissons avec les deux éléments restant :

#d {
  width: 97px;
  height: 150px;
  float: left;
  display:block;
  background: transparent url(d.png);
}

#e {
  width: 78px;
  height: 150px;
  float: right;
  display:block;
  background: transparent url(e.png);
}

Notez que le coin droit est placé à droite et non à gauche (ce qui est est parfaitement logique me direz-vous). Nous avons donc un vide plus ou moins grand entre la fouche de droite et le coin droit. Cette zone ne contient rien et laisse donc apparaître le fond du conteneur, la barre de remplissage.

Passons maintenant à la zone centrale contenant la page. Ici il n'est pas nécessaire d'utiliser un conteneur. En effet, nous n'avons qu'à superposer deux divisions en utilisant des marges internes adéquates :

#f {
  display:block;
  background: transparent url(f.png);
  background-position: left;
  background-repeat: repeat-y;
  padding-left: 78px;
}

C'est notre première division. Nous spécifions un fond qui se répètera verticalement. La propriété importante ici est padding-left. En spécifiant une marge interne correspondante à la largeur de l'image de fond, nous obligeons le contenu de la division à se placer en dehors de celle-ci. Pour obtenir un effet identique sur la droite, il suffit de définir les propriétés pour une autre division :

#h {
  display:block;
  background: transparent url(h.png);
  background-position: right;
  background-repeat: repeat-y;
  padding-right: 78px;
  padding-top: 1px;
  padding-bottom: 1px;
}

Nous spécifions cette fois une marge interne sur la droite. Cette division prendra place dans la division précédente, ainsi le texte ou tout autre éléments placés dans cette division ne chevauchera pas sur l'image de droite. Comme cette division elle-même ne chevauchera pas sur la barre de gauche, nous obtenons le résultat espéré. Notez que nous précisons également une petite marge de sécurité pour le haut et le bas de cette division.

La partie inférieure est assez semblable à celle du haut de page. Nous définissons les propriétés du conteneur :

#conteneurbas {
  height: 78px;
  width: 100%;
  display:block;
  background: transparent url(j.png);
}

Puis celles de chaque coin flottant :

#i {
  width: 78px;
  height: 78px;
  float: left;
  display:block;
  background: transparent url(i.png);
} 

#k {
  width: 78px;
  height: 78px;
  float: right;
  display:block;
  background: transparent url(k.png);
}

Notre CSS est maintenant terminée. Nous n'avons plus qu'à composer la page HTML en faisant usage de tout cela. Commençons par la zone de titre :

<div id="conteneurhaut">
 <div id="a"></div>
 <div id="b"></div>
 <div id="c">UN TITRE</div>
 <div id="d"></div>
 <div id="e"></div>
</div>

Notez que les différents éléments graphiques sont placés dans le conteneur. Passons ensuite à la zone centrale :

<div id="f">
<div id="h">
<p>Et voici le texte de la page...<p>
</div>
</div>

Ici, les deux div sont imbriqués sans conteneur. Et enfin, nous avons la partie inférieure :

<div id="conteneurbas">
<div id="i"></div>
<div id="k"></div>
</div>

12/13. Le résultat est, bien sûr, ce que nous avions dans The Gimp. Cependant, il est adaptable à souhait en fonction du contenu de la partie centrale. La bordure «habillera» automatiquement à la fois le titre de la page et son contenu.

14. Le but des CSS, en dehors du fait de permettre divers exentricités graphique est également de simplifier le HTML. Vous le constatez ici, construire une page comme celle-ci, en HTML, se résume à quelque lignes. De plus, on pourra très facilement décliner cette page en plusieurs versions de couleurs différentes.