Convertir Une Page Existante /
Suite

Différence (dernière édition) (Auteur, affichage normal de la page)

Modifié: 155c155

Le sommet original et les bordures du bas étaient obtenus par l'effet combinatoire d'images blanches à l'intérieur des cellules de table, aussi faisons un peu de maths :

Le sommet original et les bordures du bas étaient obtenus par l'effet combiné d'images blanches à l'intérieur des cellules de table, aussi faisons un peu de maths :

Modifié: 255c255

== Styles pour les notes (ratings) =

==Styles pour les notes (ratings)=

Après avoir travaillé le déshabillage de la structure, le haut de la page et la sidebar, l'intention pédagogique est désormais de s'occuper de la feuille de style en rapport avec la cellule du Contenu. Pour retourner au début aller à ConvertirUnePageExistante.

Table des Matières Cellule Contenu    Restauration du Titre    Donner un style à la citation    Les bons styles pour le côté droit    Styles pour les notes (ratings)    Astuce de style    Fixer le Pied de Page

Cellule Contenu    

La principale cellule de contenu est véritablement la plus facile à styler mais elle contient néanmoins quelques défis. L'un est de donner l'élément td une identification du contenu. Les paragraphes sont les plus simples :

td#leftside table {margin-top: 3px;}
td#content p {font: 85% Arial, Helvetica, Verdana, sans-serif;}

Nous avons stylé ces paragraphes en utilisant un sélecteur descendant simplement au cas où nous irions plus tard à l'intérieur des paragraphes dans la conception ou voudrions ajouter d'autres paragraphes dans une future maintenance du site.

Nous avons aussi besoin d'envisager l'espace à l'intérieur de celle cellule qui existe dans la conception originale. Cet espace a été forcé en utilisant une table comme ceci :

<table width="100%" border="0" cellspacing="15" cellpadding="0">
<tr>
<td width="10"><img src="blank.gif" height="1" width="10" alt=""></td>
<td>

Deux choses à considérer dans ce cas. Le cellspacing et la largeur width des cellules images. Une fois fixées les distances, nous pouvons revenir avec le padding que nous voulons pour régler la cellule du contenu.

Tout en haut, il y a un espace de 15px à partir du haut ; entièrement du à la valeur du cellspacing. Sur les côtés il y a un espace de 40 pixels : 10 pixels pour les images blanches et 15px vers chaque côté des cellules qui contiennent les images blanches. De ce fait, nous écrivons la commande suivante :

td#leftside table {margin-top: 3px;}
td#content {padding: 15px 40px;}
td#content p {font: 85% Arial, Helvetica, Verdana, sans-serif;}

Cette évolution est visible dans la figure 1.10 suivante. Nous voyons ainsi qu'il reste à mettre en page le titre et la citation au milieu du contenu.

Restauration du Titre    

Dans le design original, le titre du contenu ("Ragged Point Inn") a été stylé en utilisant une table HTML :

<table width="100%" border="0" cellpadding="1" cellspacing="1">
<tr>
<td>
<font size="+2" face="Arial, Helvetica, Verdana, sans-serif" color="#602020"><b>Ragged Point Inn</b></font>
</td>
</tr>
<tr>
<td bgcolor="#804040"><img src="blank.gif" height="1" width="1" alt=""></td>
</tr>
</table>

Nous allons véritablement remplacer tout cet ensemble avec une construction vraiment plus simple :

<td id="content">
<h1>Ragged Point Inn</h1>
<p>The views from the Ragged Point Inn are as spectacular as any along the coast. 
Every room in the inn faces a sheer drop to the ocean; we recommend asking for one of the few second-floor rooms 
for an even better view. When the time of year is right, it's not uncommon to see migrating whales just offshore.</p>

Un simple élément h1 (que vous ajouterez dans la vue html dans le CityDesk) est tout ce qu'il faut. Ceci nous donnera l'occasion de recréer l'apparence originale en utilisant des règles CSS vraiment simples à savoir réger le style de police et la couleur :

td#content p {font: 85% Arial, Helvetica, Verdana, sans-serif;}
h1 {font: bold 150% Arial, Helvetica, Verdana, sans-serif;
  color: #602020;}
</style>

Nous aurons encore à recréer le petite ligne sous le texte. En regardant en arrière vers le design original, nous observons que la ligne a été créée avec une image d'une hauteur de 1px. Cependant la cellule de la table avait aussi un cellpadding de 1px, ce qui signifie que la hauteur visible de cette cellule était véritablement de 3px (un chacun pour le haut et le bas de la cellule et un pour la hauteur de l'image). De ce fait :

h1 {font: bold 150% Arial, Helvetica, Verdana, sans-serif;
  color: #602020; border-bottom: 3px solid #804040;}
</style>

Pour finir, nous devrions reproduire la séparation entre le texte et la bordure. Les cellules dans la table ont eu 1 px de padding, mais seul le padding dans la cellule "Ragged Point Inn" sera prise en considération parce que nous l'avons déjà comptabilisée pour le padding dans la cellule de bordure. Il y avait aussi 1 px d'espacement de cellule, ce qui signifie deux pixels d'espace en plus ( comme nous le voyons dans la figure 1.11)

h1 {font: bold 150% Arial, Helvetica, Verdana, sans-serif;
  color: #602020; border-bottom: 3px solid #804040;
  padding-bottom: 2px;}
</style>

Donner un style à la citation    

Inutile de s'attarder sur un code initial plutôt très laid !

<table width="160" border="0" cellpadding="0" cellspacing="1" align="right">
<tr>
<td width="5"><img src="blank.gif" height="1" width="5" alt=""></td>
<td>
<table width="100%" border="0" cellpadding="2" cellspacing="1">
<tr>
<td bgcolor="#908070"><img src="blank.gif" height="3" width="1" alt=""></td>
</tr>
<tr>
<td><font color="#A09080" face="Arial, Helvetica, Verdana, sans-serif">
<b>Repeat customers are known to come from as far away as Virginia</b></font></td>
</tr>
<tr>
<td bgcolor="#908070"><img src="blank.gif" height="3" width="1" alt=""></td>
</tr>
</table>
</td>
<td width="5"><img src="blank.gif" height="1" width="5" alt=""></td>
</tr>
</table>

La différence ici est que la partie visible de cette citation est incluse à l'intérieur d'une autre table. La tâche consistera ici à aligner la citation à droite, définir une largeur et les attributs de caractère.

La première étape consiste à jeter tout ce vieux code pour le remplacer par un nouvel élément propre qu'Eric appelle le pullquote. Le seul code nécessaire sera :

<div class="pullquote">
Repeat customers are known to come from as far away as Virginia
</div>

Comme dans la figure 1.12, définissons le style de cette citation :

div.pullquote {float: right; width: 160px; 
 font: bold 1em Arial, Helvetica, Verdana, sans-serif;}
</style>

Et voilà le début d'une citation bien mise en page (figure 1.12)

Nous avons réglé la valeur de la taille de la police (font-size) à 1em parce qu'il n'y a vait pas d'attribut de taille pour l'élément font dans la conception originale et nous l'avons listé parce que font requiert que sa valeur contienne tant sa taille et sa famille dans cet ordre. La valeur width a été extraite de la conception originale de la table externe.

Réglons la couleur du texte et créons les bordures. Pour régler la couleur on ajoutera dans le div.pullquote :

color: #A09080;

Le sommet original et les bordures du bas étaient obtenus par l'effet combiné d'images blanches à l'intérieur des cellules de table, aussi faisons un peu de maths :

• les images avaient une hauteur de 3 pixels
• les cellules dans lesquelles elles résidaient avaient un padding de 2px

Nous ne pouvons simplement régler la bordure entière de la citation à une ligne de 7px de largeur parce que les bords gauche et droit n'ont pas de bordures. Il y a bon nombre de manières de régler ce paramètre, mais dans ce cas nousallons régler la couleur et le style de la bordure avec une déclaration et la largeur des bords avec une autre déclaration :

div.pullquote {float: right; width: 160px; color: #A09080;
 border: solid #908070; border-width: 7px 0;
 font: bold 1em Arial, Helvetica, Verdana, sans-serif;}

Les bons styles pour le côté droit    

De tous les morceaux de cette conception, le plus compliqué reste sans doute la barre de droite. Beaucoup d'information y est charriée et cette information est contenue dans peu d'élements.

Comme d'habitude, commençons par les fondamentaux, à savoir donner un id à la cellule qui définit cette barre à droite.

<td id="rightside">

En faisant ça, nous pouvons définir la largeur de la cellule et la taille du texte à l'intérieur :

div.pullquote {float: right; width: 140px; color: #A09080;
   border: solid #908070; border-width: 7px 0;
   font: bold 1em Arial, Helvetica, Verdana, sans-serif;
   padding: 3px 2px; margin: 1px 7px;}
td#rightside {width: 150px;}
td#rightside td {font-size: 66%; padding: 1px;}

La seconde règle réglera le texte pour toutes les cellules de la table trouvées à l'intérieur de la cellule rightside pour être à 66% de la taille normale. Ceci correspond à peu près à la construction HTML <font-size="2">. Nous allons styler les têtes de séparation entre chaque morceau d'information dans la barre à droite. Par exemple, la cellule contenant le mot Ratings'' utilisée pour paraître comme ceci :

<tr>
<td colspan="2" align="center" bgcolor="#D6B58C">
<font size="-2" face="Verdana, Arial, Helvetica, sans-serif"><b>Ratings</b></font></td>
</tr>

Avec tout la présention HTML, nous avons besoin d'ajouter une class qui indique quel type d'information est trouvée dans cette cellule.

<tr><td colspan="2" class="head">Ratings</td></tr>

Un autre exemple de la même chose en bas de la colonne à droite :

<tr><td class="head">Nearby Stops</td></tr>

Une fois classées l'ensemble de ces quatre cellules qui contiennent des séparateurs de texte, nous pouvons les styler d'une manière plus cohérente ( voir figure 1.14)

td#rightside td {font-size: 66%; padding: 1px;}
td.head {background: #D6B58C; text-align: center; font-weight: bold;}
</style>

A ce stade, nous sommes très proches d'avoir terminé la barre de droite, au moins sur un point de vue visuel. Tout ce qu'il reste à faire est de styler le haut de la sidebar, la table de Ratings et le Traveler's Tip en bas.

Le haut de la colonne droite sera simple. Dans ce cas, plutôt que d'attacher une autre id à la cellule, nous changerons la nature de la cellule

<tr>
<th colspan="2>Ragged Point Inn & Restaurant</th>
</tr>
<tr>
<td colspan="2" class="head">Ratings</td>
</tr>

parce que l'information dans la cellule est un type d'en-tête pour la totalité de la colonne de droite, cela n'a pas de sens de convertir td vers un th. Ceci nous laisse aussi styler la totalité de l'élément d'un seul tenant :

td.head {background: #D6B58C; test-align: center; font-weight: bold;}
td#rightside th {font-size: 85%; padding: 2px;
background: #774411; color:white; text-align:center; }
</style>

Cela peut vous paraître singulier que le sélecteur de règle dispose d'un th suivant le td#rightside, mais c'est voulu. Cela parce que les éléments th descendent du td de la barre de droite. Ils descendent aussi des éléments table et tr qui les contiennent. Les éléments entre le td et le th n'empêchent pas le sélecteur descendant de fonctionner.

Pour centrer un titre dans une table, même si la plupart des navigateurs centreront automatiquemnet les contenus d'un élément th, vous ne savez jamais quand un nouveau navigateur sortira et ne le ferait pas : telle est la raison pour laquelle nous avons explicitement défini un text-align dans notre règle th de td#rightside.

Voir la figure 1.15

Styles pour les notes (ratings)    

Vous pourriez penser que nous allons convertir les ratings (étoiles) vers une sorte de jeu complexe d'éléments et de CSS mais ne c'est pas le cas. Cela a du sens de représenter ces informations dans une table, alors nous n'allons pas modifier cet aspect de la page. Dans la conception originale il y avait différentes couleurs de texte pour différents nombres d'étoiles. Aussi les second et quatrième lignes avaient une couleur donnée #F7f0E7 donnant un effet alternée. Pour reproduire ces effets, nous devons revoir la structure de la table.

Pour la mise en valeur de la ligne, nous pourrions simplement classer les lignes comme étant paires ou impaires, selon leur placement. Ainsi pour les ratings cela a du sens de les classer selon le nombre d'étoiles contenues. Ainsi voilà ce que donne le code :

<tr class="odd">
<td>Amenities</td><td class="r3">***</td>
</tr>
<tr class="even">
<td>Location</td><td class="r5">*****</td>
</tr>
<tr class="odd">
<td>Dining</td><td class="r5">*****</td>

</tr>
<tr class="even">
<td>Service</td><td class="r5">*****</td>
</tr>
<tr class="odd">
<td>Overall</td><td class="r5">*****</td>
</tr>

Nous avons démarré avec odd parce que naturellement 1 est un chiffre impair, de telle manière que la première ligne est une ligne impaire. Avec les lignes classées de la sorte, surligner toutes les autres se fait de manière simple. Nous pouvons aussi utiliser cette règle pour régler la largeur des cellules pour correspondre à la conception originale.

td#rightside th {font-size: 85%; padding: 2px;
  background: #774411; color: white;}
tr.even td {background: #F7F0E7; width: 50%;}

Nous pourrions aussi appliquer la couleur d'arrière-plan à l'élément tr lui-même, mais pas de garantie que le navigateur saura comment styler la ligne de la table actuelle. Parce qu'il n'y a pas d'espace entre les cellules de cette table, nous pouvons aller plus loin et styler les cellules. Leurs arrières-plans seront aussi affectés et de ce fait fourniront l'apparence d'un style pour une ligne unique.

Styler les cellules de ratings est aussi facile :

tr.even td {background: #F7F0E7; width: 50%;}
td.r3 {color: #660;}
td.r5 {color: #060;}

Avec ces styles mis en place, les aires de Ratings de la page sont prêts à partir, comme nous pouvons le voir dans la figure 1.16

Astuce de style    

Enfin proches du but ! Tout ce qu'il reste à faire est le cartouche Traveler's Tip et nous en aurons fini de cette barre de droite. Après cela nous mettrons en page le pied de page et ce sera terminé.

Le balisage original pour le cartouche tip nous est désormais familier : une table incluse à l'intérieur d'une table. Dans ce cas, cependant le point était de tracer une bordure autour d'un bloc de texte avec un arrière-plan différent. Nous pouvons recréer cela facilement :

<div id="traveltip">
<b>Traveler's Tip</b><br>
Call to reserve a room at least six weeks in advance of your arrival, double that in the summer.
</div>

Nous laisserons les éléments b et br en place parce qu'il n'y a pas de raison de les supprimer. Bien sûr nous pourrions les remplacer par un élement h5 et les styler. Mais cela suffira Une fois fait quelques calculs, nous trouvons que la bordure fait 3 pixels de large et la div devrait avoir 8 px de padding. Le texte a besoin d'être centré, la couleur d'arrière-plan réglée et l'élément complet doit avoir une marge haut qui n'encombre pas le bas de l'aire Nearby Stops.

Nous devons régler le texte à la même taille que le reste de la barre de droite. Nous devons le faire parce que le tip n'est plus à l'intérieur de la cellule du tableau : aussi la règle td#rightside td ne s'applique plus à cet élément. Nous devrons reproduire la valeur utilisée pour styler le reste de la sidebar. Ceci nous conduit à écrire la règle suivante ( voir figure 1.17)

td.r5 {color: #060;}
div#traveltip {border: 3px solid #804040; background: #EBDAC6;
  text-align: center; margin-top: 1.5em; padding: 8px; font-size: 66%;}
</style>

Fixer le Pied de Page    

Même chose, il faut identifier le pied de page pour faciliter le style.

<tr id="footer">
<td id="feedback"><a href="/feedback.html">Feedback - Contact</a></td>
<td id="tg">Travel Guide</td>
<td id="copyright">Copyright 2002</td>
</tr>

D'abord réglons la taille de la police, l'alignement horizontal et le style des polices. Dans la conception originale, le texte FeedBack - Contact était centré, le texte Travel Guide centré et plus large que les deux autres cellules, et le copyright placé en italique et justifié. En outre, la ligne entière était réglé selon valign=middle.

Pas de problème ici comme le prouve la figure 1.18

div#traveltip {border: 3px solid #804040; background: #EBDAC6;
  text-align: center; margin-top: 1.5em; padding: 8px; font-size: 66%;}
tr#footer td {vertical-align: middle; font-size: 66%;}
td#feedback {text-align: center; padding: 0.2em;}
tr#footer td#tg {font-size: 85%; text-align: center;}
td#copyright {text-align: right; font-style: italic;}
</style>

Avec ces styles en place, tout ce dont nous avons besoin désormais est la coloration du pied de page conforme à l'original. Une caractéristique de conception est la bordure de 3px courant entre le contenu principal et le pied de page. Ceci était créé avec une image blanche à l'intérieur d'une cellule de table. Cependant cette cellule de table et cette image sont désormais supprimées, aussi nous les remplacerons avec quelque chose d'autre comme une bordure au sommmet des trois cellules de la ligne du footer :

tr#footer td {vertical-align: middle; font-size: 66%;
  border-top: 3px solid #EFE1D1;}

Pour finir, voilà les couleurs d'arrière-plan et de polices pour le footer :

td#feedback {text-align: center; padding: 0.2em;
  background: #EFE1D1;}
tr#footer td#tg {font-size: 85%; text-align: center;}
td#copyright {text-align: right; font-style: italic; color: #999;}

Ces derniers changements nous mènent au résultat final montré dans la figure 1.19 et à la fin de la recréation de cette présentation HTML fondée sur CSS. La feuille de style complète est présentée ci-après.

Voir LaFeuilleDeStyle et les avantages !