#master { margin:auto; La stratégie architecturale de la page est assez simple : ¶ un conteneur pour l’en-tête avec la bannière comme image de fond ; ¶ un conteneur pour la partie cent
Trang 1La balise acronym permet au navigateur d’afficher un drapeau qui déploie
le libellé complet de l’acronyme au passage de la souris Encore une fois,
la balise nommée hr arrive à point pour fermer ces boîtes et ouvrir la voie
à la dernière boîte du cartouche, nommée avis
#opquast { background: #ebf4fd url("/images/opquast.png") no-repeat right top;
}
#w3c { background: #ebf4fd url("/images/w3c.png") no-repeat top right;
}
#wcag { background: #ebf4fd url("/images/wcag.png") no-repeat top right;
float: left;
}
#engagement2 { width: 45%;
float: right;
background: transparent url("/images/charte.png")
Quelques sites
Trang 2no-repeat top left;
} engagement zone { background-color: #ebf4fd;
}
#engagement2 zone { margin: 0 !important;
padding-top: 0.6em !important;
}
Trang 3Le point remarquable dans la construction des styles de la page est que ladistribution est cohérente entre les dimensions relatives aux images (et àtout ce qui s’y rattache), qui sont formulées en pixels, et celles des autresboîtes, qui sont en em, c’est-à-dire en une dimension relative.
Ainsi, la réduction de la résolution de l’écran ou de la taille de la fenêtre
du navigateur ne défait pas cette savante architecture, qui est blement élastique L’agrandissement des caractères dans un navigateur nenuit pas, non plus, à l’harmonie ou à la lisibilité de l’ensemble
remarqua-m Figure 5.24 : Réduction de taille 1
Quelques sites
Trang 4b Figure 5.25 :
Réduction de taille 2
Trang 5La première page du site commence par une astuce qui permet detransformer la photo du positif au négatif lorsque la souris passe sur le lien
en légende La photo représente la porte d’un phare
#index_photo { display:block;
width:448px;
height:297px;
border:1px solid #808080;
background:url(images/bazar/phare_nega.jpg) no-repeat 50% 0%;
}
#index_photo img { filter:alpha(opacity=1);
-moz-opacity:0.1;
}
L’auteur a utilisé une boîte avec une image de fond dans laquelle il ainséré une photo L’image de fond est en négatif et l’image de "surface"est en positif, toutes les deux en noir et blanc Pour que l’image de fondapparaisse, la photo de surface est affectée d’une transparence (voirFigure 5.27)
Il s’agit d’une propriété CSS3, ce qui oblige l’auteur à adjoindre du codeJavaScript Le JavaScript permet, au passage de la souris sur le lien, de
m Figure 5.26 : Arrivez
Atelier d’artiste
Trang 6modifier l’opacité de la photo de surface, qui devient transparente, et derévéler ainsi la photo de fond.
La propriété filter appelle des effets Paradoxalement, ils sont acceptéspar Internet Explorer 6, mais pas par Firefox 1.5
Le filtre alpha utilisé ici a une transparence maximale, attribuée avecopacity=1
5.3 Un site fédérateur
Le site www.fleurs-livraison.info propose au visiteur des offres deplusieurs sites de fleurs sur Internet et de prestataires de livraison, avec unlarge éventail de bouquets ou de budgets Il fait office d’intermédiaireentre les sites de livraison de fleurs et l’acheteur (voir Figure 5.28)
La ligne graphique est claire et la feuille de style bien ordonnée etintelligente
m Figure 5.27 : Entrez
Trang 7L’auteur fait d’abord table rase des réglages des navigateurs par défaut.
body { margin:0;
/** Centrage de la page dans ie **/
m Figure 5.28 : La page d’accueil
Un site fédérateur
Trang 8Les marges sont remises à 0 et le centrage des blocs qui, sur InternetExplorer, se fait avec text−align, est assuré Ce centrage signifie que, unpeu plus loin, il faudra rectifier et ajouter text−align: left, une fois que
le centrage des blocs pour les navigateurs conformes aura été indiqué
#master { margin:auto;
<body>
<div id="master">
La stratégie architecturale de la page est assez simple :
¶ un conteneur pour l’en-tête avec la bannière comme image de fond ;
¶ un conteneur pour la partie centrale ;
− un conteneur pour la navigation ;
− un conteneur pour le contenu propre à la page ;
¶ un conteneur pour le pied de page
Pour que les deux colonnes du contenu central, prises en sandwich entrel’en-tête et le pied, puissent se terminer proprement afin de faire placenette et de laisser de l’espace au pied de page, une balise br avec le nomclearcomme classe est incluse à la fin de la deuxième colonne
/** Utiles **/
.clear {clear:both;}
Tous les conteneurs de gauche sont tracés au cordeau car le motif de fondest un rectangle répété de haut en bas (repeat−y) Cette ligne a une
Trang 9bordure latérale qui lui donne son apparence de relief Le conteneur estcoiffé d’une balise h2 avec, comme image de fond, le haut arrondi ducartouche, tandis que le bas est rempli d’une classe avec l’image de fond
title="Livraison fleurs - Le bouquet Nantais" >
Le bouquet Nantais </a></li>
<li><a href="livraison/pres_de_chez_vous.asp"
title="Livraison fleurs - Près de chez vous" >
Près de chez vous </a></li>
</ul>
<span class="menu2bottom"></span>
</div>
<! Fin colonne de gauche >
La feuille de style, elle, ajoute les images
b Figure 5.29 :
Un conteneur de gauche
Un site fédérateur
Trang 10#menu1 a {background: url(images/menu1-puce.gif) no-repeat;
font-weight: bold; color:#306376;}
#menu2 a {background: url(images/menu2-puce.gif) no-repeat;
color: #666666; font-weight: bold;}
#menu1 a:hover {background: url(images/menu1-puce.gif) no-repeat; font-weight: bold; color:#ffffff;}
#menu2 a:hover {background: url(images/menu2-puce.gif) no-repeat; color: #ffffff; font-weight: bold;}
Trang 11.menu1bottom, menu2bottom {height:15px; width:190px;
La balise li a comme propriété display: block Ainsi, tout "survol" duconteneur li provoque le changement de couleur du lien Le padding agitsur le retrait de la puce
Le formulaire de recherche est remarquable par son code XHTML et safeuille de style
/** Formulaire de recherche **/
#frm-recherche { width: 190px;
background: url(images/bg_recherche.gif) repeat-y;
margin-bottom:0px;
}
#frm-recherche h2 { background: url(images/bg_recherche-top.gif) no-repeat;
Trang 12}
#frm-recherche p { margin: 0 12px }
#frm-recherche label { font-size:0.9em;
margin-top:6px;
} frmrecherche-bottom { background: url(images/bg_recherche-bas.gif) no-repeat bottom;
height:15px;
width:190px;
margin:0;
display:block }
Le cartouche du formulaire de recherche est réalisé de la même façon queles deux autres, avec le haut et le bas qui terminent la bordure avec desangles ronds
À l’intérieur du formulaire, les champs de texte ou du menu sont d’unecouleur légèrement plus claire que le fond background−color:#EEEDC4
et que le bouton de soumission du formulaire, qui contient la propriétéinput
b Figure 5.35 :
Le cartouche de recherche
Trang 13<label for="Facultatif"> Facultatif :<br>
<em>(Nom, couleur, type…</em> ) </label>
</p>
<p class="Style10">
<input autocomplete="off" name="facultatif" id="facultatif"
type="text" onkeyup="declenche(this);" maxlength="50" >
<select name="boutique" class="select" id="boutique">
<option value="0" selected> Toutes</option>
Un site fédérateur
Trang 14.annoncespl p{padding-left:146px}
Le XHTML s’égrène selon le même modèle que précédemment
<div class="annoncespl">
<span class="annoncespltop"></span>
<img src="photo-accueil.jpg" alt="Femme avec roses rouge">
<p>Offrir des…<br><br>En plus de…<br><br>
Vous pouvez… <br><br>Nous vous souhaitons d’avance…<br>
</p><span class="annoncesplbas"></span>
</div>
m Figure 5.36 : La colonne "de droite"
Trang 15Le pied de page se divise en deux parties horizontales La première estdans un cartouche beige et la deuxième est un texte en petits caractères sur
le fond blanc
/** Pied **/
.piedtop { width:800px;
height:8px;
display:block;
background: url(images/bg_pied-top.gif) no-repeat bottom;
margin-top:6px }
#pied p.infos { font-size:0.75em;
Trang 16Fleurs-livraison est un joli site au service d’une bonne idée, à savoirregrouper toutes les offres de fleurs sur Internet, livraison comprise.
5.4 Construction du site
Auparavant, la seule manière de construire une page était de créer untableau invisible avec des cellules dans lesquelles se positionnaient desimages, des titres, des textes, des liens de navigation, le pied de page, lelogo, la bannière de publicité Le tableau est, en HTML, la seule balisepermettant d’ordonner et de placer les éléments Le HTML est conçu, audépart, pour afficher des textes avec des images qui sont prises comme deséléments de texte et qui s’insèrent là ó le code est placé La seulepossibilité est d’aligner le texte sur l’image avec la propriété align.Celle-ci place le texte au bas, au milieu ou en haut de l’image, en prenantrespectivement les valeurs bottom, middle et top
La conception des calques (layers) révolutionne tout cela, avec Netscape
le navigateur le plus utilisé à l’époque Elle n’a jamais été validée par leconsortium W3C Viennent ensuite les balises DIV promues par Microsoftsur son navigateur Internet Explorer Ces containeurs ont été validés SansCSS, ces boỵtes sont disposées verticalement, les unes sur les autres, dans
ce qu’on appelle le flux
Le flux est la lecture ligne à ligne opérée par un navigateur quand ildécode du HTML Les premières données affichées sont écrites au début
du fichier source Les boỵtes ont ce privilège de suivre le flux courant oud’en sortir (voir Figure 5.38)
Le site classique est composé de trois colonnes, d’un en-tête et d’un pied,c’est-à-dire de cinq boỵtes Il s’agit ici de disposer ces boỵtes dans unensemble harmonieux et régulier Ces cinq boỵtes sont matérialisées parles conteneurs DIV
Trang 17Avant de créer à proprement parler un site, il faut commencer par ledessiner, non pas sur support informatique, mais sur papier avec descrayons de couleur et affiner peu à peu le dessin Ensuite, il est plus facile,une fois le dessin finalisé, de le reporter sur un logiciel comme Photoshop,
ou autre Fireworks
L’un des défauts des sites web est qu’ils sont tracés au cordeau, commedes jardins à la française Pour certains d’entre eux, ce n’est pas undéfaut ; mais les angles droits, les lignes parfaites et les parties clairementdélimitées ne conviennent pas systématiquement
Les webmasters s’ingénient à trouver des astuces, avec des images GIF àfond transparent ou des habillages de cartouche qui masquent le planarchitectural de la page et cassent le bel ordonnancement L’outil est au
m Figure 5.38 : Site à cinq boîtes
Construction du site
Trang 18service de la conception de la page Disposer d’un bon outil, c’est bien…encore faut-il savoir ce que l’on peut en faire.
Une fois le dessin réalisé, le webmaster le découpe en code et en images.C’est là qu’il faut choisir le positionnement des colonnes et les imbrica-tions de conteneurs
Types de boîtes
Les CSS proposent deux types de boîtes :
¶ les boîtes en ligne (inline) ;
¶ les boîtes bloc
Tab 5.1 : Différences entes les boîtes bloc et les boîtes en ligne
Caractéristiques des boîtes bloc Caractéristiques des boîtes en ligne
Elles sont disposées naturellement les unes au-dessus des autres.
Elles sont disposées naturellement les unes après les autres.
m Figure 5.39 : Un site avec découpe
Trang 19Tab 5.1 : Différences entes les boîtes bloc et les boîtes en ligne
Caractéristiques des boîtes bloc Caractéristiques des boîtes en ligne
Elles occupent toute la largeur du conteneur qui les contient.
Elles entourent horizontalement leur contenu.
Elles possèdent quatre marges externes (haut, bas, gauche, droite).
Elles possèdent deux marges externes (gauche, droite).
Elles sont insécables Elles sont sécables (pour aller à la ligne) Elles peuvent seulement contenir d’autres
boîtes en ligne.
Elles peuvent contenir tout type de boîte.
Il faut préciser la hauteur pour mettre de l’air autour du contenu.
Elles permettent de définir la taille des marges intérieures (padding).
Elles prennent en charge span, em, a, img, br, i, strong.
Elles prennent en charge div, body, p, table, span, a, blockquote, h1−h6,
ol, ul, li, hr, img, form.
La frontière entre "en ligne" et "bloc" est poreuse
Avec la propriété display: block ou display: inline, il est possible de forcer le type de la boîte ou de l’affirmer pour certains navigateurs peu respectueux des normes W3C.
Position des boîtes
La position par défaut, position: static;, est dans le flux normal.Positionner une boîte signifie la sortir du flux naturel du HTML et laplacer arbitrairement dans la page La position peut être calculée parrapport à la page web (absolute), par rapport aux autres boîtes (rela-tive) ou par rapport à l’écran (fixed)
Trang 20div#navigauche { position: absolute;
left: 10px;
top: 120px;
}
Cette boîte sera positionnée à 120 pixels du bord supérieur du site et à
10 pixels du bord gauche, quelle que soit sa place dans le code HTML etquelle que soit la place des boîtes qui la contiennent
m Figure 5.40 : Position absolue
Trang 21#fruit { background: #ACF;
border: 2px solid #800;
height: 100px;
margin: 30px;
}
Maintenant l’exercice va consister à extraire le noyau du fruit, c’est-à-dire
à sortir le conteneur intérieur du conteneur extérieur avec la positionabsolute La propriété padding évite que le texte soit collé au bordinterne du conteneur Le conteneur noyau est à 10 pixels du bord inférieur
et à 10 pixels du bord droit
#fruit { background: #ACF;
Trang 22#fruit { background: #ACF;
b Figure 5.42 :
Fruit et noyau 2
Trang 23Si le texte s’allonge et si la boîte est dotée d’une hauteur précise, le textedébordera de la boîte Si la hauteur n’est pas précisée, à travers lapropriété height, la boîte va s’adapter à la longueur du texte.
overflow
La propriété overflow gère le comportement du texte par rapport à la boîte qui le contient Le comportement par défaut est visible : le texte déborde de la boîte si celle-ci est trop petite Avec la valeur hidden, le texte reste contenu dans les limites de la boîte, mais aucun ascenseur ne permet de voir ce qui est caché Avec scroll, le texte est contenu dans les limites de la boîte et est associé à une glissière quelle que soit la taille du texte contenu auto provoque l’apparition de la glissière seulement si la taille du texte le demande.
relative
La position relative ne se calcule plus par rapport à la page du site mais
en fonction de la place que l’élément devrait occuper en étant dans le fluxnormal Le flux normal dans l’exemple précédent place le noyau dans lefruit Reprenons l’exemple précédent :
#fruit { background: #ACF;
border: 2px solid #00F;
b Figure 5.43 :
Fruit et noyau 3
Construction du site
Trang 25Une boîte de navigation transportant des liens de navigation peut avoirbesoin, comme une palette flottante dans de nombreux logiciels graphi-ques, d’être à portée de clic de souris
b Figure 5.45 :
Fruit et noyau 5
Construction du site
Trang 26Pour peu que la page soit très haute, trois possibilités se présentent pour
y avoir accès à partir du bas de la page :
¶ utiliser l’ascenseur ;
¶ disposer d’une ancre qui renvoie en haut de la page ;
¶ disposer d’une boîte, qui, pour n’être pas flottante, n’en est pas moinstoujours rangée à la même place sur l’écran
Le résultat n’est pas performant graphiquement, mais il est pratique pourl’utilisateur, à condition que cette boîte reste de dimension modeste
Une page à trois colonnes avec la position relative
Pour faire une page en trois colonnes, le développeur pose des boîtes sur
la page En fait, elle contient classiquement cinq boîtes :
¶ la boîte d’en-tête qui s’étend sur toute la largeur de la page ;
¶ une colonne gauche avec les liens de navigation ;
¶ une colonne centrale qui contient le contenu de la page ;
m Figure 5.47 : Même boîte, même position dans le navigateur