Header fédéral

Toute communication gouvernementale doit être crédible. Une signature clairement identifiable indique au citoyen que l’information provient de l’autorité fédérale.

Voilà pourquoi il importe que l’en-tête fédéral figure sur tous les sites web des autorités fédérales. Cet en-tête incorpore au site un choix de langue, un lien vers le site portail www.belgium.be ainsi que le logo ".be, identifiant des autorités fédérales.

D'un point de vue graphique, deux versions sont disponibles, à savoir une version avec padding et une autre sans. Les deux versions recourent au même HTML. Une classe de style (CSS class) fait toute la différence.

Version avec padding :

Voorbeeld versie met padding

Cette version est utilisée sur les pages dont la partie contenu est limitée par une ligne ou une surface d’une autre couleur que celle de l’arrière-plan de la partie du contenu. Les boutons de choix des langues et le logo .be se démarquent respectivement par rapport à la marge gauche et droite (“padding”) pour éviter qu’ils ne touchent la ligne de délimitation, ce qui constituerait une gêne visuelle. (Cf. ci-dessous dans le document pour d’autres exemples.)

Version sans padding :

Voorbeeld versie zonder padding

Cette version est utilisée sur les pages dont la partie relative au contenu n’est pas limitée par une ligne ou une surface d’une autre couleur que celle de l’arrière-plan de la partie du contenu.

Implémentation

Le header doit uniquement comprendre les éléments qui apparaissent ci-dessous.  Par conséquent, aucun élément de navigation ne peut être ajouté ni supprimé.

Le code HTML du bandeau d’en-tête Belgium se présente comme suit :

<div id="blgm_belgiumHeader">
<div class="blgm_wrapper">
<ul id="blgm_languageSwitch">
<li class="blgm_first blgm_active">
<span lang="nl" class="blgm_lSwitch" title="Nederlands">nl</span>
</li>
<li>
<a href="#" lang="fr" class="blgm_lSwitch" title="Fran&ccedil;ais">fr</a>
</li>
<li>
<a href="#" lang="de" class="blgm_lSwitch" title="Deutsch">de</a>
</li>
<li class="blgm_last">
<a href="#" lang="en" class="blgm_lSwitch" title="English">en</a>
</li>
</ul>
<div id="blgm_beLink">Autres informations et services officiels :
<a href="http://www.belgium.be/" class="blgm_loglink" title=”http://www.belgium.be/nl/”>www.belgium.be</a>
</div>
<div id="blgm_beLogo"><img src="http://style.belgium.be/2.0/img/blgm_beLogo.gif"
alt="Logo des autorités fédérales belges" /></div>
</div>
</div>

Indiquer la version linguistique active/inactive

Tous les codes de langues sont affichés. Chaque code est placé dans une balise a ou une balise span. La langue active est disposée dans un span, tandis que les codes inactifs sont disposés dans une balise a avec comme href l’URL correct.

Le code langue actif :

<span lang="nl" class="blgm_lSwitch" title="Nederlands">nl</span>

Le code langue inactif :

<a href=”#” lang="fr" class="blgm_lSwitch" title="Fran&ccedil;ais">fr</a>

Avec ou sans padding

Comme déjà indiqué, le bandeau d’en-tête Belgium est disponible en deux versions. La structure HTML des deux versions est identique. Seul l’ajout d’un nom de classe suffira pour reproduire une version sans padding.

Version avec padding (standard) :

<div id="blgm_belgiumHeader"> .... </div>

Version sans padding :

<div id="blgm_belgiumHeader" class="blgm_stretch"> .... </div>

Code CSS

Le bandeau d’en-tête Belgium possède sa propre feuille de style qui est placée sur le serveur du portail Belgium. En vue d’une mise en page adéquate, il convient de prévoir sur chaque page dans laquelle est implémentée le bandeau d’en-tête Belgium un renvoi à cette feuille de style. La référence est disposée dans le bandeau d’en-tête de la page et possède l’URL suivante :

<link rel="stylesheet" type="text/css" media="all" href="http://style.belgium.be/2.0/style/belgium_header.css" />

Préfixe

Afin de garantir une nomenclature unique, tous les numéros d’identification et classes du bandeau d’en-tête Belgium commencent par “blgm_”.