Initiation à l'écriture de feuilles de style destinées à un affichage optimisé des pages destinées à la publication
Cette page est censée être optimisée "toutes résolutions" ...
Dans bon nombre de sites, la recherche d'une mise en page optimisée peut être intéressante. En fait, qu'est-ce qu'une mise en page optimisée ? Il s'agit, ni plus ni moins, de l'affichage d'une page dont l'aspect général (la présentation) sera identique quelle que soit la résolution d'écran adoptée par le visiteur ... du moins jusqu'à un certain point. Pour des raisons esthétiques, la seule réserve à ce type de mise en page concerne la taille des objets, qu'il s'agisse de dessins, graphiques ou photos. Ces dernières souffriraient, naturellement, d'un agrandissement (le contraire est moins vrai) de taille si leur définition était optimisée. La mise en page sera donc surtout étudiée dans le but de "garder les mêmes proportions" entre les textes et leur contenant, le plus souvent des calques. Ceci est surtout important si ces calques ont des couleurs de fond distinctes.Un petit rappel des principales propriétés/valeurs vous serait utile ? Si c'est le cas, revoyez cette partie relative aux calques ou boîtes !
... à partir d'une fenêtre aux dimensions de 640 x 480 pixels
Voici une page écrite en fonction de cette recherche d'optimisation. Affichez-là dans des fenêtres de tailles différentes, modifiez la taille des polices comme vous pouvez le faire avec tout "butineur" qui se respecte et observez le résultat de ces modifications successives. Vous remarquerez que la mise en page reste cohérente, du moins jusqu'à une fenêtre de taille horizontale supérieure à 600 pixels. Cela signifie que tout navigateur, même réglé en taille de résolution minimale (640 x 480 pixels) sera capable d'afficher une présentation de qualité visuelle pratiquement équivalente.
Vous trouverez ci-dessous la totalité de la feuille de style qui régit la présentation de cet ensemble. Elle fait appel à des règles variées, tant dans le choix que dans l'écriture, afin de vous amener à une réflexion plus approfondie à propos des multiples possibilités des FDS. Si vous éprouvez des difficultés à en comprendre le sens, une révision des principales familles de propriétés et leur description vous sera sans doute utile. Vous pourrez alors suivre plus aisément les méandres de l'esprit :-) qui ont présidé à l'élaboration de ce petit exercice de style.
body{background-image:url(valimage/astufond.jpg); color:#fff; font-family:"Ms sans serif";sans-serif;arial;}
p{text-indent:0.7em;}
a{text-decoration:none; color:blue;}
a:hover, a:focus, a:active{color:red; text-decoration:underline overline;}
img{border-style:none;}
#log1{float:left; padding-bottom:13px}
#log2{float:right; padding-bottom:13px}
#log3{margin-left:-120px;}
#illus1{float:left; margin-left:7px; margin-top:7px;}
#illus2{float:right; margin-right:13px; margin-top:7px;}
h2{color:blue; text-align:center; margin:13px;}
h3.n1{clear:both; padding:1px; border:3px inset yellow; background-color:#049; font-variant:small-caps; color:#ffffcc; text-align:center;}
h3.n2{clear:both; padding:1px; border:3px inset lime; background-color:#049; font-variant:small-caps; color:#ffffcc; text-align:center;}
h4 {display:inline; font-variant:small-caps; color:#ffffcc;}
#page{background-color:navy; color:#000; width:91%; margin:auto; padding:1%; text-align:center;}
#intro1{float:right; max-width:81%; font-size:small; border:3px double blue; padding:7px 7; margin:7px 0; background-color:#ffffcc; color:#000; text-align:justify;}
#intro2{float:left; max-width:81%; font-size:small; border:3px double red; padding:1%; margin:0.5%; background-color:#fffeee; color:#blue; text-align:justify;}
#source{clear:both; background-color:#ffffdc; color:#000; border:3px double silver; padding:1%; margin:0.5%;}
#caddr{border-left:1px ridge; margin-left:120px; padding:0 7px; text-align:left;}
#liens{background-color:#ccccff; border:1px solid red; padding:0.5%; margin:0; color:#000; font-size:small; text-align:right;}
.prot1{color:blue; font-size:x-small}
.prot2{font-family:verdana,"times new roman",arial;sans-serif; font-size:x-small; border:3px double yellow; padding:0.5%; margin:0; background-color:navy; color:white; text-align:center;}
</style>
L'élément de base de cette mise en page est son contenant : page dont la taille relative (en pourcentage) maintiendra tous les autres composants dans la fenêtre prévue. Deux de ces composants, seulement, font également appel à des valeurs similaires (mais non égales !) : intro1 et intro2 qui contiennent les deux premières fenêtres de texte. Ils comportent une autre propriété : max-width non utilisée pour les autres calques, que ne "comprend" pas Internet Exploser, mais qui est indispensable à la famille Mozilla. Si la valeur associée n'était pas précisée, les logos situés à gauche et à droite des textes ne seraient pas à la même hauteur mais soit au dessus, soit en dessous de ceux-ci.
A quelques détails près, nos deux navigateurs de test affichent une page dont la présentation est identique. La différence la plus marquante réside dans le non-centrage de l'ensemble par IE, qui ne respecte pas la propriété/valeur margin:auto du calque principal. Pour le reste, les alignements et dimensions des autres calques trouvent leur singularité dans l'interprétation différente des propriétés border et padding dont vous avez eu l'explication dans un exposé précédent.
L'écriture (ou l'ordre d'écriture, si vous préférez) des différents éléments de la page sera le plus souvent réalisée en "flux naturel" en fonction de leur affichage dans la page terminée et reproduite par le navigateur. En effet, vous aurez constaté qu'il n'existe aucune valeur absolue dans le positionnement des calques ... et pour cause. Le float y règne en maître absolu. Pour étudier cet ordre d'écriture, voyez en code source et adaptez à vos besoins.
Un dernier rappel : cette technique peut avantageusement s'adapter aux sites dont le contenu essentiel est fait de texte et d'illustrations de petites dimensions. Si celles-ci constituent l'élément de base d'un site et sont de dimensions importantes, elles sont généralement "entourées" de textes ou de légendes. Il est alors le plus souvent préférable de s'en tenir à des valeurs absolues, au moins dans le dimensionnement du contenant. Dans le cas contraire, la présentation risque d'être très sérieusement chamboulée, voire totalement détruite.
A vous de voir ce qui conviendra le mieux à votre "oeuvre" ...
Tous les textes, photos et dessins sont, sauf mention particulière, propriété de Docanski Concept et interdits de reproduction, quel que soit le support utilisé !
Toute reproduction, totale ou partielle, est interdite sans le consentement de l'auteur !
