Content Model et Floats

Jean-Marc Lecarpentier

 

Content Model et Floats

Le layout des pages web peut aujourd'hui être présenté de différentes façons : utilisation de colonnes, One page layout, etc. Les moyens de réaliser ces layout sont eux aussi variés : utilisation des éléments flottants, des propriétés display de CSS3 ou bien du module CSS Flexbox qui offre de nombreuses possibilités intéressantes.

Points essentiels

  • Content Model de XHTML et HTML5
  • Notions de float, clearer et clearfix
  • Propriété CSS display
  • Mise en page en plusieurs colonnes
  • Règles de positionnement
  • Module Fexbox
  • CSS3 et bordures, ombres, etc

Travail personnel

Exercice 1 : Présentation en deux colonnes

On veut réaliser une page avec une bannière, un pied de page, une partie centrale et deux menus latéraux comme sur cette figure :
Exemple de page à réaliser

Important : pour optimiser le référencement et l'accessibilité, le contenu de la partie centrale doit figurer dans le code source AVANT le contenu des parties latérales.

Réaliser ce rendu de deux façons différentes  :

  1. Avec la technique des float et clearfix
  2. Avec le module Flexbox

On pourra utiliser du faux-texte lorem ipsum.

Exercice 2 : Présentation en trois colonnes

On veut réaliser une page avec une bannière, un pied de page, une partie centrale et deux menus latéraux comme sur cette figure :
Exemple de page à réaliser

Important : pour optimiser le référencement et l'accessibilité, le contenu de la partie centrale doit figurer dans le code source AVANT le contenu des parties latérales.

Réaliser ce rendu de deux façons différentes  :

  1. Avec la technique des float et clearfix
  2. Avec le module Flexbox

On pourra utiliser du faux-texte lorem ipsum.

Exercice 3 : page complète

Réaliser la partie HTML-CSS de l'examen HTML-CSS M1 DNR année 2010-2011

Important commencer par un dessin sur papier pour réfléchir à la structure globale de la page : zones de contenu principal, zones de navigation, etc. Réaliser cette structure en premier. Puis affiner petit à petit la réalisation pour arriver au résultat final.

 
Tim Berners Lee, créateur de HTTP et HTML. A l'origine du Web, il dirige maintenant le W3C C'est avec Mosaic, premier navigateur graphique que le web pris réellement son essor en 1993
 
Fermer