div .cadre {
padding: 10px;
margin: 10 px;
background-color: #233A00;
font-size: smaller;
}
La stratégie de l’emplacement des blocs vise plusieurs objectifs :
¶ hiérarchiser l’information ;
¶ attirer l’attention du lecteur en cassant un agencement trop symétrique
et ordonné ;
¶ casser les gros pavés illisibles en petites unités pour donner plusieurs
perspectives sur le même contenu ;
¶ entraîner le lecteur, par des accroches soigneusement disposées, à lire
l’article entier.
Un coup d’œil sur certaines pages peut causer une indigestion. La subtilité
consiste à donner plusieurs entrées à l’article. Avant la lecture était
littérale. Maintenant elle est de plus en plus spatiale. Les téléspectateurs
voient chaque chaîne de télévision comme une facette d’un réel morcelé.
m
Figure 3.12 : Disposition des informations
La disposition
Double Poche CSS • 501
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Avec la mode des mangas par exemple, les jeunes prennent l’habitude de
lire un livre en commençant par la fin, à la façon japonaise. Sur le Web,
il en est de même : le visiteur s’introduit dans le site par n’importe quelle
page, parcourt, clique, revient, lit encore, comme quand il cherche sur sa
télévision le morceau de réel qui va l’intéresser 5 minutes.
3.4
La couleur
La couleur s’exprime de plusieurs façons, via les images, la police de

caractères et le fond, qu’il s’agisse de blocs ou de menus, et enfin les filets.
Les couleurs sont restituées à partir des trois couleurs primaires : le rouge,
le vert et le bleu (RVB ou RGB). Le mélange des trois donne le blanc en
couleurs additives et le noir avec des couleurs soustractives. Les différen-
ces de proportion reconstituent les couleurs du spectre. Les couleurs
additives sont obtenues avec une source lumineuse comme un spot, un
projecteur vidéo ou un écran d’ordinateur (CFT ou LCD). Les couleurs
soustractives sont obtenues par le mélange des colorants (procédé utilisé
dans l’imprimerie). Comme la somme de tous les pigments ne donne pas
m
Figure 3.13 : Le chromographe
3
Les règles de mise en page
502 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
exactement le noir, mais un marron foncé, on a ajouté le noir. Ainsi ce
procédé se nomme CMJN (cyan, magenta, jaune et noir). C’est la
quadrichromie.
Le contexte coloré de l’ensemble joue aussi un rôle essentiel sur la
perception de la couleur d’un objet. Ainsi, une police de caractères rouge
ou bleue sur un fond noir paraît plus claire, et plus foncée sur un fond
blanc. Ces effets de contraste ainsi que d’autres mécanismes visuels
interviennent dans la perception de la couleur.
L’œil est influencé par la perception du cerveau. Dans les langues
celtiques, la couleur glas (en breton) représente le vert, le bleu et le gris
avec, pour référence, l’ardoise. En breton moderne, le mot "gwer" a été
ajouté pour caractériser les étoffes vertes (le vert synthétique). Les anciens
Bretons distinguaient-ils ce vert ? Cette étude a aussi été faite sur les
anciens Grecs. Ainsi le cerveau distingue différemment les couleurs, selon
leur contexte et selon la culture du spectateur.

m
Figure 3.14 :
La couleur
Double Poche CSS • 503
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
La balance des blancs dépend de la température de couleur. Elles ne sont
pas les mêmes selon le moment du jour : elles passent du rouge au jaune,
puis au bleu. Ces variations sont mesurées en kelvins. Les écrans
d’ordinateurs sont calibrés différemment selon leur type (autour de
9 300° K pour un CFT, et de 6 500° K pour un TFT) et leur marque. Le
calibrage se fait sur un blanc "neutre". C’est l’étalon sur lequel se base
tout le spectre affiché à l’écran.
¶ 9 300° K (blanc bleuté lumineux) ;
¶ 7 500° K (blanc bleuté) ;
¶ 6 500° K (blanc légèrement bleuté) ;
¶ 5 000° K (blanc légèrement jaune) (voir Figure 3.16).
Ainsi le spectre de couleurs que le développeur voudra rendre sur son site
variera d’un moniteur à l’autre. Il est donc inutile d’être trop perfection-
niste dans ce domaine.
On distingue les couleurs froides, chaudes ou neutres, relaxantes ou
toniques, complémentaires ou opposées, etc.
m
Figure 3.15 : Couleur ardoise bleu-ardoise.fr
3
Les règles de mise en page
504 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Le logiciel Color Schemer permet de dégager quelques couleurs dominan-
tes. À celles-ci peut s’ajouter une couleur tonique qui "réveillera" le visiteur.
Il existe deux principales propriétés de couleur :

¶ color concerne la couleur de surface, c’est-à-dire le plus souvent la
couleur du texte.
¶ background−color désigne la couleur de fond.
Notation hexadécimale
Les couleurs sont désignées par un code hexadécimal complet (ou
abrégé), de 6 caractères précédés par un dièse (#), ce qui permet d’éco-
nomiser de la place. 16 777 216 couleurs sont ainsi répertoriées.
m
Figure 3.16 : Balance des blancs
b
Figure 3.17 :
Hexa
La couleur
Double Poche CSS • 505
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Le code hexadécimal des couleurs
Les nombres en Occident sont en base 10 (de 0 à 9). C’est le
code décimal. Le code hexadécimal est en base 16. Après 9, il
utilise les lettres A pour 10, B pour 11… jusqu’à F pour 15. La couleur
est codée sur 8 bits. Chaque couleur de base (rouge, vert, bleu) est
codée sur deux caractères (de 16 possibilités chacun), ce qui donne
256 possibilités, donc 216
3
, soit 16 777 216 possibilités. Le code cou-
leur de ce qu’on appelle les couleurs sécurisées, référence
216 couleurs.
Les codes formés de paires de caractères identiques peuvent être abrégés.
Ainsi #11BBDD correspond à #1BD.
Notation par mot-clé
Les couleurs peuvent être nommées par leur nom en anglais :

Tab. 3.7 : Les mots-clés représentant les couleurs
Mot-clé Correspondance
aqua Cyan
black Noir
blue Bleu moyen
fuchsia Rose fuchsia
gray Gris foncé
green Vert moyen
lime Vert printemps
maroon Marron foncé
navy Bleu marine
olive Vert olive
purple Violet
red Rouge
silver Gris moyen
teal Vert sapin
3
Les règles de mise en page
506 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Tab. 3.7 : Les mots-clés représentant les couleurs
Mot-clé Correspondance
white Blanc
yellow Jaune
Attention aux erreurs d’orthographe en anglais !
color: teal;
Notation en pourcentage
Cette notation consiste à calibrer de 0 % à 100 % la quantité de chaque
composante (rouge, vert, bleu) d’une couleur, 0 % correspondant à
l’absence de la composante. Il est possible d’utiliser des décimales, ce qui

accroît le nombre de nuances possibles.
color: rgb(42%, 70.25%, 0%);
m
Figure 3.18 : Couleurs prédéfinies
La couleur
Double Poche CSS • 507
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Notation décimale
Cette notation utilise les nombres de 0 à 255 pour caractériser la propor-
tion des composantes (rouge, vert et bleu) de la couleur.
color: rgb(25, 0, 255);
0 dénote l’absence de la composante et 255 la présence à 100 % de la
composante.
Notation en référence à l’interface de l’utilisateur
Cette notation donne au développeur les outils pour imiter les fonction-
nalités auxquelles l’utilisateur est habitué. Ces couleurs intègrent l’inter-
face du navigateur avec les couleurs du site comme sur le site Gaesys
(www.gaesys.com).
Certaines possibilités, comme la coloration de la barre de défilement du
navigateur, ne sont disponibles qu’avec Internet Explorer. Pour intégrer
cette glissière verticale, il faut dans ce cas intégrer la couleur de
l’ascenseur dans la page.
m
Figure 3.19 : Gaesys
3
Les règles de mise en page
508 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Tab. 3.8 : Les couleurs se référant à l’interface de l’utilisateur
Désignation Signification

ActiveBorder Couleur de la barre de titre active de la fenêtre
ActiveCaption Couleur du titre de la barre de titre active de la fenêtre
AppWorkspace
Couleur de l’arrière-plan de la fenêtre de l’application active
Background Couleur de l’arrière-plan du Bureau
ButtonFace Couleur des boutons des boîtes de message
ButtonHighlight Couleur des ombrages en 3D des boutons des boîtes de
message
ButtonText Couleur du texte des boutons dans les boîtes de message
CaptionText Couleur des titres dans les boîtes de message
GrayText Couleur du texte désactivé dans les boîtes de message
Highlight Couleur des éléments sélectionnés dans des listes de choix
HighlightText Couleur du texte sélectionné
InactiveBorder Couleur d’une ligne de titre d’une fenêtre non active
InactiveCaption Couleur du titre dans la ligne de titre d’une fenêtre non active
InfoBackground Couleur de fond des info-bulles
InfoText Couleur du texte des info-bulles
Mmenu Couleur des barres de menus
MenuText Couleur des éléments de menus
Scrollbar Couleur de la barre de défilement dans les fenêtres
ThreeDDarkshadow Couleur sombre des ombrages des éléments 3D
ThreeDFace Couleur des éléments 3D
ThreeDHighlight Couleur des éléments 3D sur lesquels l’utilisateur vient de
cliquer
ThreeDLightShadow Couleur claire des ombrages des éléments 3D
ThreeDShadow Couleur sombre des ombrages des éléments 3D
Window Couleur d’arrière-plan des fenêtres de document
WindowFrame Couleur des bordures de fenêtre
WindowText Couleur de texte normal des fenêtres de document
La couleur

Double Poche CSS • 509
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
On peut imaginer une fausse fenêtre de message, créée de toute pièce à
partir des attributs de couleur courants.
.fenetre {
color: buttonText;
}
Les couleurs et images d’arrière-plan
La couleur de fond obéit à la propriété background−color.
body {
color: black;
background-color: #FD9;
background-image: url(images/image_de_fond.png);
background-repeat: no-repeat;
background-position: top left;
}
L’image désignée par background−image peut être répétée avec
background−repeat et positionnée avec background−position.
m
Figure 3.20 : Fond fixe 1 hersandesign.com
3
Les règles de mise en page
510 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Il est possible de faire en sorte que le décor suive l’ascenseur vertical.
background-attachment:fixed;
Les valeurs peuvent être regroupées dans la propriété background de la
façon suivante :
background: background−color background−image background−
repeat background−attachment background−position;

body {
background: navy url(image_de_fond.png)
no-repeat fixed left bottom;
}
Background-position
La propriété background−position définit une position verticale et une
position horizontale : top ou bottom, left ou right. Cette position peut
m
Figure 3.21 : Fond fixe 2 hersandesign.com
La couleur
Double Poche CSS • 511
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
être aussi un pourcentage de gauche à droite et de haut en bas (de 0 % à
100 %).
background-position: 0% 100%;
L’équivalent est :
background-position: top right;
Pour placer un décor au milieu :
background-position: top right;
L’équivalent est :
background-position: 50% 50%;
Background-repeat
La valeur par défaut de background−repeat est repeat.
Tab. 3.9 : La répétition du décor
Valeur Effet
no−repeat L’image n’est affichée qu’une fois.
repeat−x L’image est répétée horizontalement.
repeat−y L’image est répétée verticalement.
repeat L’image est répétée ad libitum.
3.5

La pagination
La pagination dans un livre est la distribution du texte en pages qui se
suivent, tandis que sur le Web, la pagination ne comporte pas d’ordre :
chaque page est plutôt un chapitre avec un texte beaucoup plus court que
celui d’un livre. Par ailleurs, le visiteur peut entrer dans le site par
n’importe quelle page. De cela découlent plusieurs obligations :
¶ faciliter l’identification de la page ;
¶ reporter les éléments de navigation sur chaque page ;
¶ garder une cohérence tout au long des pages du site.
3
Les règles de mise en page
512 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Faciliter l’identification de la page
Il s’agit de donner un titre explicite et de bien caractériser le sujet de la
page. Pour indiquer un titre, il existe plusieurs manières de procéder. Il est
possible de l’intégrer sur la page en haut au centre via la balise h1.La
barre ou le menu de navigation peut désigner la page courante par une
couleur différente. Le lien peut prendre une autre couleur par le seul fait
qu’il ne comporte que l’intitulé qui, alors, n’est pas encadré par la balise
<a>.vers une page quelconque.
Reporter les éléments de navigation
Le menu de navigation est une clé du site : il contient les liens vers chaque
page, il hiérarchise l’information et lui donne une cohérence. La cohé-
rence est donnée par l’ordre d’affichage des liens, ce qui constitue déjà
une hiérarchie, mais aussi par des marqueurs comme des couleurs ou des
puces différentes. Il est aussi possible de suggérer quelle est la page
suivante, via un lien au bas de la page courante qui conduit vers la page
suivante avec un intitulé explicite. Ce lien vers la page suivante est très
souvent utilisé sur des sites linéaires, comme les tutoriaux.

m
Figure 3.22 : www.bleu-safran.com
La pagination
Double Poche CSS • 513
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Garder la cohérence
La cohérence d’un site est surtout basée sur sa charte graphique,
c’est-à-dire sur l’habillage des pages et la disposition des textes, des titres,
des menus, qui font que le visiteur sait immédiatement sur quel site il se
trouve. C’est l’identité graphique du site. Une façon de l’identifier est
aussi d’insérer une icône dans la barre d’adresse et dans l’onglet dans les
navigateurs à onglets, ainsi que dans les favoris. Cette icône placée dans
le répertoire principal est nommée favicon.ico.
C’est ici qu’intervient la feuille de style à laquelle toutes les pages sont
rattachées. La feuille de style donne un cachet au site et aide les
internautes à l’identifier.
3
Les règles de mise en page
514 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
4
La
réalisation
du site
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
4.1
La page d’accueil
La page d’accueil est essentielle. Elle donne une première impression, qui
sera primordiale pour l’internaute dans sa décision de poursuivre sa visite.
La page d’accueil s’affiche quand l’internaute saisit le nom de domaine du

site. Si elle est nommée index et qu’elle soit la seule à porter ce nom de
fichier, elle s’affiche quand l’internaute saisit dans
cet exemple. L’extension de fichier peut être .htm ou .php.
Il est important que le visiteur soit directement dans le sujet, sans page
intermédiaire sur laquelle cliquer, ou pire, sans avoir à attendre qu’une
animation se termine ou à chercher un lien trop discret sur lequel cliquer.
La page d’accueil garde la même configuration, ou au moins un même
aspect graphique, que le reste du site. Le logo peut être plus gros que sur
le reste des pages, pour signifier l’importance de cette page. Si une
bannière de publicité apparaît en haut, il vaut mieux faire en sorte que
m
Figure 4.1 : Une vraie page d’entrée
4
La réalisation du site
516 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
cette publicité ne puisse pas être confondue avec le titre de la page ou
prise à tort pour le thème du site.
Lien vers la page d’accueil
Si la barre des liens est identique sur chaque page, il est
préférable de ne pas avoir un lien actif vers la page d’accueil sur
ladite page d’accueil et de distinguer le lien inactif par une couleur qui
le démarque des autres liens.
La page d’accueil contient les liens de navigation vers tout le site,
l’information essentielle qu’il propose et les dernières nouvelles. En
entrant dans la page d’accueil, le visiteur doit découvrir le sujet du site et
les thèmes qui seront abordés dans ses pages. Son regard ne doit pas avoir
à chercher où aller. Soit le site est un site d’information et il affiche les
nouvelles dans sa page d’accueil, soit c’est un autre type de site et les liens
de navigation doivent être mis en évidence. En effet, si le nouveau venu

s’attarde un peu sur la page d’accueil, l’internaute fidèle, lui, prend la page
d’accueil comme un carrefour, un accès central aux autres pages et aux
annonces de mise à jour.
"Que vient chercher l’internaute sur le site ?" est la bonne question à se
poser. Il doit trouver aisément ce qu’il vient chercher en cliquant le moins
de fois possible sur des liens.
m
Figure 4.2 : Le moteur de recherche comeverbena.com
La page d’accueil
Double Poche CSS • 517
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Certains visiteurs préfèrent utiliser un moteur de recherche pour naviguer
sur un site. Il est donc indispensable d’en installer un en première page.
Le moteur de recherche Atomz est gratuit dans sa version basique
(www.osinet.fr/code/prix.asp?CodeMarque=ATOMZ) et s’insère par-
faitement dans un site, en en prenant les couleurs.
Le titre de cette page donne un premier indice du contenu du site. Entre
les balises title, il vaut mieux éviter d’inscrire "Page d’accueil
d’Écoute S’il Pleut" et préférer "Écoute S’il Pleut, Invitez−vous
au jardin extraordinaire !" par exemple, plutôt que "Bienvenue
sur notre page d’accueil".
Sur la page d’accueil, le visiteur est à la croisée des chemins. Plusieurs
options peuvent être choisies :
¶ soit afficher les liens avec chaque thème résumé par un petit
paragraphe ;
¶ soit afficher simplement les liens comme sur n’importe quelle page ;
m
Figure 4.3 : Atomz
4
La réalisation du site

518 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
¶ soit faire un texte unique qui introduit certaines rubriques plus
importantes.
Le texte de la page d’accueil doit séduire pour donner envie d’aller plus
loin. Même si le visiteur a envie de connaître le thème traité par le site, son
désir a besoin d’être attisé. Il faut instaurer ici la confiance, voire la
connivence. Le visiteur vient sur la page d’accueil, attiré par un intitulé
dans le moteur de recherche ou un lien sur un autre site. Souvent, il ouvre
le lien en affichant une nouvelle fenêtre ou en se disant qu’il pourra
toujours revenir en arrière avec le bouton adéquat sur son navigateur.
Ainsi il parcourt rapidement la page d’accueil pour vérifier si le site
satisfait sa curiosité. Il est donc nécessaire de l’accrocher par ce qui fait
l’originalité du site. Cette information originale doit être mise en avant, à
un endroit stratégique de la page.
4.2
Le site
La création du site a commencé par la création du logo, composé d’un
fond jaune clair (#FFFFE1) sur lequel figure la phrase "Les jardins
d’Écoute S’il Pleut", dont la première partie est colorée en vert clair
m
Figure 4.4 : www.clic-images.com
Le site
Double Poche CSS • 519
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
(#8CBD23) et la deuxième en bleu foncé (#1D1779) avec une ombre portée.
La carte du site a été dressée, ce qui permet de monter les liens de
navigation. Deux types de liens de navigation se sont dégagés : ceux
concernant le gîte et le tourisme et ceux tournés vers le commerce et le
service. Il est indispensable de matérialiser leur différence. Le choix des

couleurs se porte vers un dégradé de verts : d’un côté des verts à
dominante jaune, de l’autre des verts à dominante bleue.
La construction d’un site commence par la rédaction d’un cahier des
charges qui répertorie les desiderata du client et l’aide à préciser sa
demande. Ensuite le graphiste crée une page type sur un logiciel
graphique. La création des feuilles de style vient ensuite.
Dans notre cas, il est décidé de mettre la totalité des liens de navigation
sur chaque page de façon à ce qu’un visiteur atterrissant sur une page
quelconque du site ait les outils pour remonter à la page d’accueil ou
évoluer directement dans le site.
4.3
Le XHTML
Le XHTML est un HTML plus strict au niveau de ses règles. Les règles
sont assez simples à énumérer et des programmes de validation permettent
de détecter les erreurs de syntaxe (voir Figure 4.6).
¶ Toute balise ouvrante doit comporter une balise fermante ou un trait
oblique signalant que cette balise est ouvrante et fermante.
¶ Les containeurs peuvent s’imbriquer, mais pas s’entrelacer.
¶ Les noms des balises et des propriétés doivent être en minuscules.
¶ Les propriétés ou attributs doivent avoir une valeur.
¶ Les valeurs des propriétés sont encadrées par des guillemets.
¶ Le standard utilisé pour le code de la page doit être précisé.
m
Figure 4.5 : La bannière ardaee.com
4
La réalisation du site
520 • Double Poche CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.