La mise en page

La mise en page de site a considérablement évolué ces dernières années. Pour le développeur Web qui a appris le métier à la fin des années 90, le changement est rude. Il est bien loin, le temps des sites optimisés pour IE en 800x600.

Avec l'avènement des standards, l'arrivée de nombreux navigateurs alternatifs, le support de XHTML et des CSS dans les nouvelles versions de MSIE, la nécessité de faire des sites accessibles, la trop fréquente réduction des coûts qui a suivi la fin de la nouvelle économie, tout cela contribue à l'utilisation croissante de XHTML et de CSS.

L'utilisation de tableaux pour la mise en page est abandonnée car trop coûteuse en maintenance, et donne des sites difficilement accessibles. Les feuilles de style et leurs possibilités de positionnement s'imposent, avec l'avantage d'une maintenance simplifiée.

A l'attention des développeurs expérimentés, qui utilisent déjà les CSS pour styler du texte, notre contributeur Laurent Denis nous gratifie d'une série d'articles sur le positionnement CSS , qui pourra aussi rendre service aux débutants, dès lors qu'ils ont compris les bases des CSS .

Mais comment passer à XHTML sans trop perdre de temps ? OpenWeb a pensé à vous proposer un tutoriel qui devrait vous prendre moins d'une heure pour apprendre la base du web moderne. Pour les développeurs web de la première heure, un autre article leur est dédié, se focalisant sur les différences entre HTML et XHTML .

Le modèle de tableaux étant différent de celui des CSS, un certain nombre d'auteurs Web se sont demandé comment centrer un bloc dans une page. Les membres d'OpenWeb sont eux aussi passés par là et livrent tous leurs secrets sur ce sujet épineux.

Pour le gourou qui croit déjà tout connaître d'XHTML et de CSS, Nous avons préparé avec amour un article sur l'Overflow avec un fond fixe qui secoue les neurones à en décoller la pulpe du fond.

Avec de telles lectures, produire du contenu conforme aux spécifications ne devrait être qu'une simple formalité, non ?

Tous les articles

Avoir plusieurs présentations alternatives pour votre site par Nicolas Hoffmann, le 11.03.2005 pour Expert, Débutant, CSS, (X)HTML, Mise en page
Les styles alternatifs : leur utilité, leurs avantages, et la mise en place d'une structure unique permettant leur implémentation.
Utilisation de background par Pascale Lambert, le 21.03.2005 pour Débutant, CSS, Mise en page
Comment utiliser la propriété CSS background pour gérer des images d'arrière-plan ?
Styles auteur, utilisateur et agent utilisateur : 3 raisons de lâcher prise sur votre design par Laurent Denis, le 21.03.2005 pour Expert, Débutant, CSS, Mise en page
Le rendu final d'une page Web n'est pas le produit figé des règles de présentation fixée par son auteur : il résulte de la combinaison des 3 sources de styles de l'auteur, de l'agent utilisateur et de l'utilisateur lui-même.
Cascade CSS et priorité des sélecteurs par Laurent Denis, le 21.04.2005 pour Expert, Débutant, CSS, Mise en page
CSS signifie « feuilles de styles en cascade »... Mais au fait, la cascade, qu'est-ce que c'est, à quoi ça sert, comment cela fonctionne ? Plongez avec nous dans la cascade sans risque de noyade !
Passer aux feuilles de style par Laurent Denis, le 27.01.2004 pour Expert, Débutant, CSS, Mise en page
Vous utilisiez les balises HTML de présentation ? Pour tirer parti des avantages offerts par les standards, découvrez le vocabulaire élémentaire des feuilles de style.
Les problèmes de la mise en page par tableaux par Mathieu Pillard, le 24.10.2003 pour Expert, Débutant, (X)HTML, Mise en page
Pourquoi éviter les tableaux pour faire de la mise en page.
Initiation au positionnement CSS : 1.flux et position relative par Laurent Denis, le 21.03.2003 pour Expert, CSS, Mise en page
Par défaut, les navigateurs affichent les boîtes issues du document html dans l'ordre du flux normal. En position relative, un élément peut être décalé verticalement et/ou horizontalement.
Initiation au positionnement CSS : 2.position float par Laurent Denis, le 21.03.2003 pour Expert, CSS, Mise en page
La position float retire une boîte du flux normal pour la placer le plus à droite ou le plus gauche possible dans son conteneur. Comment l'utiliser dans une mise en page CSS ?
Initiation au positionnement CSS : 3. position absolue et fixe par Laurent Denis, le 24.03.2003 pour Expert, CSS, Mise en page
La position absolue et la position fixe permettent de placer une boîte par rapport aux limites de la zone d'affichage ou du conteneur. Comment les utiliser dans une mise en page CSS ?
Initiation au centrage CSS par Laurent Denis, le 21.03.2003 pour Expert, CSS, Mise en page
Les différentes méthodes de centrage d'un contenu HTML.
Utilisation des images dans les CSS par Sébastien Desvignes, le 21.04.2003 pour Expert, Gourou, CSS, Mise en page
Comment utiliser une feuille de style pour insérer dans le contenu HTML des images décoratives.
Bouton CSS par Pascale Lambert, le 21.04.2003 pour Débutant, CSS, Mise en page
Pour créer un bouton changeant d'aspect au passage de la souris, on peut utiliser les styles légers et accessibles.
Habillage de tableaux avec des CSS par Pascale Lambert, le 24.10.2003 pour Expert, Débutant, CSS, Mise en page
Faire des tableaux de données accessibles et respectant les standards avec les CSS
Des puces en images par Pascale Lambert, le 01.05.2004 pour Débutant, CSS, Mise en page
Afin de rendre plus attrayante une liste à puces, l'utilisation des CSS permet de remplacer les traditionnelles puces par des images, de façon extrêmement simple.
Zoom d'images avec les CSS par Pascale Lambert, le 01.06.2004 pour Débutant, CSS, Mise en page, Multimédia
Parmi les multiples techniques permettant de zoomer une image à l'écran, voici celle qui, uniquement à l'aide de CSS2, permet un zoom au survol d'une image avec la souris.
Overflow avec fond fixe en CSS par Olivier Meunier, le 21.03.2003 pour Gourou, CSS, Mise en page
Comment créer en CSS un overflow avec une image de fond fixée dans le bloc défilant ?

Une question, une remarque ? Écrivez à l'auteur à tristan.nitot@openweb.eu.org.

Page valide XHTML 1 Strict, CSS2 et accessible AA.
Ce site s'affiche mieux dans un navigateur conforme aux standards, voici pourquoi.
Site hébergé par l' APINC et actualités dopées par Dotclear.