CityDesk et Standards du Web - le wiki

Convertir Une Page Existante /
La Feuille De Style


Table Matières de ConvertirUnePageExistante
La feuille de style complète   
Les avantages de tout ce travail   
A compléter (exercices)   

La feuille de style complète    

body {margin: 4px; color: black; background: white;}
table {width: 100%; margin: 0;}
table td {padding: 0; border-width: 0; vertical-align: top;
  font-family: Verdana, Arial, Helvetica, sans-serif;}
a:link {color: #990000;}
a:visited {color: #990099;}
td#title {vertical-align: bottom; color: #442200;
   background: transparent url(topbg.gif) top left;
   font: bold 200% Arial, Helvetica, Verdana, sans-serif;}
td#advert {width: 234px;}
#content-top td {vertical-align: middle; color: white;
  font-weight: bold; padding: 0.1em 0.2em 0;}
tr td#sidetop {background: #663300;
  font: bold 115% Arial, Helvetica, Verdana, sans-serif;}
tr td#crumbs {background: #997753; font-size: 85%;}
tr td#crumbs a:link {color: white;}
tr td#crumbs a:visited {color: gray;}
td#leftside {width: 120px; background: #EBDAC6;}
td#leftside td {border-bottom: 1px solid #A98763; font-size: 85%;
  padding: 0 0 1px 0.33em;}
td#leftside table {margin-top: 3px;}
td#content {padding: 17px 42px;}
td#content p {font: 85% Arial, Helvetica, Verdana, sans-serif;}
h1 {font: bold 150% Arial, Helvetica, Verdana, sans-serif;
  color: #602020; border-bottom: 3px solid #804040;
  padding-bottom: 2px;}
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;}
td.head {background: #D6B58C; text-align: center; font-weight: bold;}
td#rightside th {font-size: 85%; padding: 2px;
  background: #774411; color: white;}
tr.even td {background: #F7F0E7; width: 50%;}
td.r3 {color: #660;}
td.r5 {color: #060;}
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%;
  border-top: 3px solid #EFE1D1;}
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;}

Les avantages de tout ce travail    

  • Structure du document plus propre et plus facile à maintenir et modifier
  • Economie en termes de taille de fichiers (bande passante) : 35% de réduction
  • Moins de hits serveurs
  • Si la feuille de style est extraite de la page comme nous le verrons plus tard, elle n'est chargée qu'une fois.

A compléter (exercices)    

Nous verrons plus tard comment optimiser ce modèle pour le CityDesk.

  • extraction de la feuille de style
  • Mise en place des variables (nom du site, body, headline et sidebar)
  • Nouveaux styles dérivés
A bientôt !

 
© GPL 6 Juin, 2004