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

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 :

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

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

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

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

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

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.