romy.tetue.net

Conception web et développement front
X-HTML, CSS, SPIP, sémantique et accessibilité


Layout Gala : 40 modèles de page


16 novembre 2007,
par Romy Duhem-Verdière

« Layout Gala » est une collection d’une quarantaine de modèles de mise en page différentes, à télécharger gratuitement d’un seul zip.

Tous présentent la même structure HTML à cinq blocs principaux :

<div id="container">
 <div id="header">Header</div>
 <div id="wrapper">
   <div id="content">Content</div>
 </div>
 <div id="navigation">Navigation</div>
 <div id="extra">Extra stuff</div>
 <div id="footer">Footer</div>
</div>

Cette structure peut être ainsi traduite en français [*] :

<div id="page">
 <div id="entete">Entête</div>
 <div id="conteneur">
   <div id="contenu">Contenu</div>
 </div>
 <div id="navigation">Navigation</div>
 <div id="extra">Extra</div>
 <div id="pied">Pied</div>
</div>

C’est le code CSS différent de chaque modèle qui dispose ces blocs de multiples façons, proposant quarantes mises en page fluides (en % ou en em) ou en largeur fixe, à une, deux ou trois colonnes.

modèles Layout Gala

Réalisés par l’italien Alessandro Fulciniti, ces modèles de page sont valides HTML et CSS, sans hacks, compatibles avec la majorité des navigateurs (testés avec succès sur Internet Explorer/Win 5.0, 5.5, 6 et la version beta 2 d’IE7 ; Opera 8.5, Firefox 1.5 et Safari 2). À utiliser sans modération, en veillant toutefois à ne pas trop dégrader le code initial pour en garder l’avantage.

[*] Comme dans les squelettes par défaut de SPIP 2.0 qui s’appuient sur la structure HTML des modèles Layout Gala depuis août 2007.

Voter pour cet artice sur hellocoton.fr

Un message, un commentaire ?


Qui êtes-vous ? (optionnel)

Pour afficher votre trombine avec votre message, enregistrez-la d'abord sur gravatar.com (gratuit et indolore) et n'oubliez pas d'indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP et le code HTML.

Suivre les commentaires : RSS 2.0 | Atom



© 2000-2010 Romy Duhem-Verdière | Certains droits réservés | Qui suis-je ? | Contact | Aide | Top ↑
Vérifiez vous-même la qualité du code de cette page en la soumettant aux validateurs XHTML et CSS.