ThéorieFonctionnalitésAvancé

Structure HTML modèles standards b:v2


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Structure HTML 2010
Le découpage standard de la structure des modèles Blogger b:v2.
Disposition des éléments dans le fichier xml, découpage de chaque section et la liste des CSS par défaut utilisés dans les versions web et mobile.

Découpage du fichier

A la différence de la version 1 (b:v1), la version 2 (b:v2) contient une panoplie de fonctionnalités permettant d'interagir entre le modèle du blog et l'interface.
En conjuguant cette version avec un modèle à ossature unique, l'équipe Blogger est mieux armée pour tenir à jour ses modèles (du moins, en théorie :D).

Les sections b:skin, b:template-skin, macro:includable et les b:section-contents permettent de modifier l'habillage et la disposition des colonnes. Les composants varient au fil du temps en fonction des réglages effectués via l'interface (Onglet mise en page et éditeur de modèles).

Un modèle b:v2 est reconnaissable grâce aux mentions b:version='2' class='v2' qui sont contenues dans la balise <html >.



<b:skin></b:skin>

Tous les modèles b:v2 ont une construction identique à l'exception de cette section.

b:skin se charge de les différencier grâce aux CSS contrôlés par les définitions des variables, dont les polices et les couleurs sont raccordés à l'éditeur de modèles (volet Avancé).

Contrairement aux modèles b:v1, les définitions des variables définissent également d'autres types de données, comme par exemple des valeurs de types length, url, background et string.

b:skin est découpé en 3 parties :
  1. Les références du modèle (Le nom du modèle et les informations sur le designeur)
  2. Les définitions des variables.
  3. La feuille de styles qui reprend les données des variables.

En savoir plus sur la balise b:skin



<b:template-skin></b:template-skin>

b:template-skin joue à peu près le même rôle que b:skin. Cette section défini également des variables CSS destinées à modifier la disposition et les dimensions des colonnes.

Les valeurs sont modifiables dans l'éditeur de modèles, via le volet Ajuster la largeur.

A noter que les colonnes sont également gérées par les macros (voir les paragraphes body et macros).
Les macros définissent le nombre de colonnes et sous-colonnes et modifient en conséquence les b:section-contents (Sections qui accueillent les gadgets).



<body></body>

body est le squelette du modèle. Il contient un nombre impressionnant de blocs div et les b:section qui accueillent les gadgets.

L'une des particularités des b:v2 est l'apparition des macros.
body contient plusieurs inclusions de macros (macro:include) qui définissent le nombre de sous-colonnes dans une colonne.

Le nombre d'inclusions de macro:include est limité à 3:
  1. main-column-left-sections : Colonne latérale gauche.
  2. main-column-right-sections : Colonne latérale droite.
  3. footer-sections : Colonnes du pied de page.

Les données contenues dans les macro:include sont transmises à la section macro:includable, qui à son tour, génère et organise dans un tableau les b:section-contents qui sont placées dans des cellules.

En savoir plus sur les b:sections et la composition des gadgets Blogger.



<macro:includable></macro:includable>

Cette partie n'a pas d'autre but que de générer des tableaux pour aligner les sections des gadgets.

Elle converti également les b:section-contents en b:section.

La capacité du tableau est actuellement de 4 cellules (4 sous-colonnes).



<b:section-contents></b:section-contents>

Terre d'accueil pour les gadgets placés dans les colonnes latérales et dans le pied de page, les b:section-contents se positionnent à la fin du code HTML juste avant la balise </html>.


Une b:section-contents représente une colonne/sous-colonne à qui on attribue un identifiant spécifique à son emplacement.

Les id ci-dessous sont les identifiants des modèles par défaut pour les colonnes gauche/droite et pied de page.

Les préfixes et les numéros sont définis en fonction des valeurs mentionnées dans macro:include.


Identifiants Emplacements
sidebar-left-1Haut colonne principale gauche
sidebar-left-2-1Sous-colonne gauche 1
sidebar-left-2-2Sous-colonne gauche 2
sidebar-left-2-3Sous-colonne gauche 3
sidebar-left-2-4Sous-colonne gauche 4
sidebar-left-3Bas colonne principale gauche
sidebar-right-1Haut colonne principale droite
sidebar-right-2-1Sous-colonne droite 1
sidebar-right-2-2Sous-colonne droite 2
sidebar-right-2-3Sous-colonne droite 3
sidebar-right-2-4Sous-colonne droite 4
sidebar-right-3Bas colonne principale droite
footer-1Haut colonne principale pied de page
footer-2-1Sous-colonne pied de page 1
footer-2-2Sous-colonne pied de page 2
footer-2-3Sous-colonne pied de page 3
footer-2-4Sous-colonne pied de page 4
footer-3Bas colonne principale pied de page


Les fichiers CSS

Ne sont repris, que les principaux éléments de la structure.

Version web Version mobile
Fichier Fichier
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte TC :
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
DéveloppementsFichiers XML
Populaire