La structure (XHTML)

Tout d'abord, il faut trouver la structure XHTML la plus souple possible, dans laquelle nous avons peu de modification à faire du XHTML, tout en ayant la possibilité, avec les feuilles de styles, de faire un maximum de mises en page possibles.

Au niveau de l'en-tête (<head>...</head>), utilisons une DTD XHTML 1.0 Strict. Nous choisissons cette DTD, car c'est la dernière norme en vigueur du W3C. Elle permet de spécifier la langue du document : pour chacune des langues, chaque en-tête doit être différente.

Dans le corps de la page (<body>...</body>), nous retrouvons tout d'abord un div#page contenant l'intégralité du site. Grâce à ce calque, il est possible de restreindre le site en largeur, pourquoi pas en hauteur, et puis de le centrer.

  • Le premier calque enfant du calque #page est #accessibility. On y retrouve des liens d'évitement qui nous permettent d'accéder directement au menu, au contenu,...(cf Alsacréations - les liens d'évitements).
  • Un calque #banner, avec un titre reprenant un titre générique à votre projet (pensez aux mots clefs ...) et un lien sur ce titre, permet de revenir à la page d'accueil.
  • Ensuite, le calque #wrapper, va lui contenir les calques #conteneur, #leftbar et #rightbar. A l'aide de cet élément, nous pouvons dissocier l'affichage des éléments de contenu (le menu, les outils et le contenu) qui peuvent être contraints en largeur et centrés, de la bannière qui elle peut s'adapter à la largeur de l'écran. Cet élément va également servir à mettre une image de fond sous ces trois colonnes.
  • Les calques #leftbar et #rightbar correspondent aux deux colonnes de la page de base. A l'intérieur de ces deux colonnes, retrouvons un menu et des outils par exemple.
  • Le calque #footer donne la possibilité d'y mettre des liens pour revenir en haut de page, ou bien pour faire un rappel/accéder à des rubriques importantes de votre site.
  • Et pour finir, un calque de signature #signature, dans lequel vous retrouverez la signature du/des créateurs de votre projet. Ce calque est le seul ne faisant pas parti du calque #page.

Imbrication des éléments dans le flux

positionnement dans le flux

La mise en forme (CSS)

Utiliser des feuilles de style ne fait pas tout, encore faut-il bien les utiliser. Tout d'abord, n'utilisez pas une unique feuille de style mais plusieurs feuilles de style. Ceci vous permettra d'économiser un temps non négligeable lors de vos intégrations, car plutôt que de naviguer dans une seule feuille de style qui fait des milliers de lignes, vous n'aurez qu'à sélectionner la bonne feuille de style pour trouver tout de suite ce que vous désirez.

Pour permettre de s'y retrouver encore plus facilement, indenter ses feuilles de style est un bon moyen de regrouper toutes les déclarations qui servent à mettre en page un élément :

#menu{}
     #menu ul{}
          #menu ul li{}
          #menu ul li.toto{}
          #menu ul#toto li{}
                  #menu ul li a{}
                  #menu ul li a:hover{}
                  #menu ul li a:visited{}
                  #menu ul li.active a{}

Supprimez toutes les marges par défaut *{margin:0;padding:0;}. On trouvera cette déclaration dans la feuille de style de base (celle qui importera toutes les autres). Cela servira à annuler les styles que toutes les balises HTML ont par défaut. Désormais grâce à cet élément, plus besoin de se poser la question si les éléments auxquels on veut appliquer des styles héritent d'une propriété qui a été écrite ou bien du style par défaut que possèdent toutes les balises HTML (notamment pour les listes des menu). Ceci va également éviter de mettre les marges internes et externes à zéro. Enfin, nous devrons penser aux espaces entre les paragraphes par exemple, plutôt que de se laisser porter par les styles HTML par défaut.

Attention particulière afin de contourner le problème du "box model" : ne pas mélanger, et des propriétés width, et du padding. Il est préférable d'appliquer le padding, si besoin, à un calque enfant. Par exemple :

#box{
width:250px;
}
#box div{
padding:15px;
}

Concernant le style de la balise body, inutile de vous rappeler qu'il est toujours important de déclarer ses polices de caractères de façon relative (si besoin est, alsacreations a un très bon tutoriel)

Il est important de dédier une feuille de style qui va permettre d'installer uniquement l'ergonomie du site, celle-ci ne sera pas parasitée par la mise en place d'autres éléments. La zone #banner sera fixe en hauteur pour pouvoir placer tout ce qui se trouvera dedans de façon absolue, et aussi appliquer de jolis fonds en CSS. Ensuite on va retrouver le calque #conteneur qui prend la totalité de la largeur de son parent (#wrapper), et auquel on attribut un float:left; pour que les éléments qui le suivent #leftbar et #rigthbar reviennent vers leur gauche. Ces deux derniers éléments ont des largeurs d'appliqués avec des marges négatives sur la gauche afin de venir se placer au dessus de #conteneur. Attention dans le cas d'une design liquide (qui s'adapte à la largeur de l'écran), la largeur de la colonne de gauche se doit d'être à -100%. Mais dans le cas d'une design restreint il faudra spécifier pour internet explorer une marge négative de la largeur de l'élément conteneur. Logiquement le -100% devrait suffire, car 100% de 770px par exemple, ça fait 770px ! Et bien de temps à autres, Internet Explorer ne comprend pas, il faudra donc spécifier des largeurs en pixels dans les cadres de designs qui ne s'adaptent pas aux écrans. Ensuite, nous avons un élément avec un style de type clear:left;, afin que l'élément conteneur (#wrapper) puisse savoir où il se termine. Mais pourquoi utiliser une structure aussi compliquée avec toutes ces marges négatives ? En fait, le but de cette structure, est d'utiliser le moins possibles d'éléments avec des clear:both;, tellement problématiques sous Internet Explorer...

Afin d'optimiser le poids de ses feuilles de styles, utilisons des propriétés raccourcies. Par exemple, pour appliquer un fond en CSS, il existe toutes une série de propriétés qui peuvent être remplacées par une seule :

#element{
background-color:red;
background-image:url(/images/monimage.jpg);
background-repeat:repeat-y;
background-attachment:scroll;
background-position:top left;
}

équivaut à

#element{
background:red url(/images/monimage.jpg) repeat-y scroll top left;
}

On peut faire ça avec les propriétés de font, padding; margin, border, list-style, outline et background bien sûr.

Pour l'insertion des images, dans une logique de sémantique et d'accessibilité, les images qui seront inclues en feuille de style sont uniquement les images de décoration. Dès qu'une image apporte du sens à votre page web, dès qu'il y a du texte dessus, il est préférable de l'inclure en XHTML.

Quelque chose de plus didactique (à la alsacréations, si si) sera réalisé dans les prochaines semaines afin de mieux comprendre comment est réalisé le style par défaut.