romy.tetue.net

Développement front et conception web
X-HTML, CSS, SPIP, sémantique et accessibilité

Paris-Web 2010, j’y vais ! (du 14 au 16 octobre).

Layout Gala : 40 modèles de page


16 novembre 2007,
par Romy Têtue

Partagez cet article : Voter pour cet artice sur hellocoton.fr Netvibes Yahoo myspace Technorati stumbleupon Digg Del.ico.us

« 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.

Un message, un commentaire ?

Qui êtes-vous ?

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 [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

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.