Les blocs sont, avec les zones et les tableaux, les éléments principaux de la mise en page du site web de l'ULB.

Un bloc regroupe de l'information qui sera traitée de manière homogène (en "bloc"). Cette information sera notamment affichée dans une mise en page particulière, qui permettra de la distinguer du reste des informations présentes sur la page.

Les blocs les plus simples sont des éléments <bloc>. Ils peuvent contenir n'importe quel ensemble d'éléments d'information dans une page (des titres, des paragraphes, des images, des vidéos, d'autres blocs, etc). D'autres blocs existent, plus évolués. Ils sont destinés à contenir des informations plus spécialisées telles que des tables de matière, des zones d'actualités, etc.

Les éléments suivants se comportent tous comme des blocs:

• <bloc> pour regrouper de l'information

• <toc> pour des tables de matières

• <nuage> pour des nuages de tags

• <index> pour des index de mots-clés

• <coordonnées> pour des coordonnées extraites de l'annuaire téléphonique

• <valves> pour des actualités (notamment extraites d'Act'ULB), des annonces, des publications...

• <présentation> pour des présentations d'images ou d'informations diverses en diaporama (slideshow)

• <galerie> pour des galeries d'images

• <exemple> pour afficher des exemples (notamment du code informatique)

• <popup> pour ouvrir une fenêtre popup

• <formulaire> pour un formulaire web

• <inclusion> pour inclure du code commun à plusieurs pages

L'attribut style permet d'appliquer une mise en page particulière à un bloc. On peut le complèter de l'attribut bords (ou ses variantes: bords-haut, bords-bas, etc.) pour utiliser des coins carrés ou arrondis dans cette mise en page.

On peut remarquer que la largeur d'un bloc s'adapte automatiquement à toute la largeur disponible, là où le bloc est affiché. Si le bloc est placé directement dans l'élément <page> le bloc prendra toute la largeur de la page. Si le bloc est utilisé dans une colonne, il prendra toute la largeur de cette colonne.

C'est le cas des deux blocs qui suivent (un élément <bloc> et un élément <coordonnées>):

L'attribut style permet d'appliquer une mise en page particulière à un bloc. Cet attribut et les valeurs qu'il peut contenir sont valables pour tous les types de bloc. Vous pouvez choisir sa valeur dans une longue liste de style prédéfinis.

Cette mise en page se fera de différentes manières: en entourant le contenu par un cadre, en placant le contenu sur un aplat de couleur (sur une couleur de fond), en mettant le titre du bloc en évidence (également par un aplat de couleur), etc.

Afin de garder une mise en page et un aspect homogène pour l'ensemble du site de l'ULB, il n'est pas possible de choisir n'importe quel style et n'importe quelle couleur.

Vous ne pouvez choisir que parmi un grand nombre de styles prédéfinis, qui ont été choisis afin de s'harmoniser avec le reste du site (si votre site le nécessite, vous pouvez toujours introduire une demande auprès la Cellule web afin de créer un style supplémentaire).

La colonne de droite vous présente quelques-uns des styles existants. Ces blocs ont été obtenus à l'aide des codes suivants:

<zones>
   <zone id="droite">
      <bloc bords="arrondis" style="défaut+titre">
         <titre3>Exemples de styles</titre3>
         <p>Style "défaut+titre"</p>
      </bloc>
      <bloc bords="arrondis" style="défaut">
         <p>Style "défaut"</p>
      </bloc>
      <bloc bords="carrés" style="colorBar2">
         <p>Style "colorBar2", bords carrés</p>
      </bloc>
      <bloc bords="arrondis" style="colorBar3">
         <p>Style "colorBar3", bords arrondis</p>
      </bloc>
      <bloc bords="carrés" style="postit2">
         <p>Style "postit2"</p>
      </bloc>
      <bloc bords="arrondis" style="blow4">
         <p>Style "blow4", bords arrondis</p>
      </bloc>
      <bloc bords="arrondis" style="barre-menu">
         <p>Style "barre-menu", bords arrondis</p>
      </bloc>
   </zone>               
   ...
</zones>

Dans certains cas, un bloc peut contenir un autre bloc (par exemple, un <bloc> peut être inséré dans un <bloc> ou une <présentation>). Vous pouvez ainsi combiner plusieurs styles différents, tout en essayant de garder une cohérence graphique dans votre page.

Pour vous aider, vous pouvez parcourir le document présentant la liste des styles complète. Dans ce document, il suffit de cliquer sur le style désiré, ensuite de cliquer sur le nom de la couleur de fond utilisée dans ce style et finalement de sélectionner les différents tests d'affichage qui s'offrent à vous. Ces tests vous montreront toutes les combinaisons de styles possibles, et vous n'aurez plus qu'a choisir celles qui s'accordent le mieux.

Si vous avez défini un style, vous pouvez décider d'avoir des coins carrés ou des coins arrondis à l'aide d'un ou plusieurs attributs à choisir parmi les suivants:

• bords: qui définit le type de cadre pour l'ensemble du bloc (coin haut/gauche, haut/droite, bas/droite et bas/gauche)

• bords-haut: qui définit le type de cadre pour la partie haute du bloc (coin haut/gauche et haut/droite)

• bords-bas: qui définit le type de cadre pour la partie basse du bloc (coin bas/droite et bas/gauche)

• bords-gauche: qui définit le type de cadre pour la partie gauche du bloc (coin haut/gauche et bas/gauche)

• bords-droite: qui définit le type de cadre pour la partie droite du bloc (coin haut/droite et bas/droite)

• bord-haut-gauche: qui définit le type de cadre pour le coin en haut et à gauche du bloc

• bord-haut-droite: qui définit le type de cadre pour le coin en haut et à droite du bloc

• bord-bas-gauche: qui définit le type de cadre pour le coin en bas et à gauche du bloc

• bord-bas-droite: qui définit le type de cadre pour le coin en bas et à droite du bloc

La valeur de ces attributs ne pourra être que carrés ou arrondis. La valeur carrés est utilisée par défaut.

Vous pouvez combiner ces différents attributs. Les attributs du bas de la liste seront traités en priorité par rapport à ceux du haut de la liste (par exemple, si vous avez défini bords="carrés" et bords-haut="arrondis", les coins du haut seront arrondis (car le 2e attribut est prioritaire sur le premier) et les coins du bas carrés (car dans ce cas, seul le premier attribut s'applique).

Ici, c'est une table des matières qui apparait quand on clique sur un bloc (voir le code de cet exemple).

<toc bords="arrondis" style="colorBar5" ancre="tocA" cible="ouvrirFermer:tocA" état="fermé">
   <titre>
      <titre2 toc="non">Table des matières</titre2>
   </titre>
   <résumé>
      <p><i>Cliquez ici pour faire apparaître la table des matières</i></p>
   </résumé>
   <page-titre2/>
</toc>

Ici, ce sont des coordonnées qui apparaissent quand on clique sur un bloc (voir le code de cet exemple).

<coordonnées idref="ulb:services:cellule-web" bords="arrondis" style="clair" 
             ancre="coord" cible="ouvrirFermer:coord" état="fermé">
   <résumé>
      <p puce="attention">Contactez-nous !</p>
   </résumé>
</coordonnées>

Le même principe peut être utilisé pour ajuster la hauteur d'un bloc placé seul dans une zone (généralement dans une petite colonne à gauche ou à droite d'une colonne principale) à la hauteur des autres colonnes. L'attribut à utiliser est également ajuster-hauteur="oui".

Ici aussi, cela ne peut fonctionner que pour un seul bloc dans la zone (un seul bloc sera de hauteur variable). Si plusieurs blocs utilisent l'attribut ajuster-hauteur, seul le dernier sera pris en compte.

C'est le cas du bloc dans la colonne de gauche, qui est obtenue avec le code suivant:

<zones>
   <zone id="droite">
      <bloc style="clair-cadre2" bords="arrondis" ajuster-hauteur="oui">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</p>
      </bloc>
   </zone>
   <p>Le même principe peut...</p>
   <p>Ici aussi, cela ne peut ...</p>
   ...
</zones>

Il est possible de rendre un bloc optionnel, à l'aide d'un attribut options. Celui-ci va alors se comporter comme une section optionnelle.

Il pourra apparaître ou disparaître sur base d'une condition (lien hypertexte, profil de l'utilisateur dans l'Intranet, etc.).

A titre d'exemple, voici un bloc qui sera affiché de manière conditionnelle à l'aide d'une option o1 qui sera activée ou désactivée par un lien hypertexte.

<bloc style="class6">
   <p>
     <a cible="inverser:o1">
        <section options="o1">masquer le bloc</section>
        <section options="!o1">afficher le bloc</section>
      </a>
   </p>
</bloc>

<bloc style="class1+titre" options="o1">
   <titre3 toc="non">Lorem Ipsum</titre3>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>						
</bloc>

Pour plus d'information, consultez toute la documentation consacrée aux sections optionnelles et aux options.

A titre d'exemple, cliquez ici pour ouvrir et fermer le bloc ci-contre, ou ici pour le masquer ou le montrer.

Dans cet exemple, une table des matières se sert de liens cible pour gérer l'affichage d'un bloc dont l'ancre est égale à bloc1.

<liste>
   <p><a cible="ouvrirFermer:bloc1">ouvrir/fermer</a> le bloc</p>
   <p><a cible="ouvrir:bloc1">ouvrir</a> le bloc</p>
   <p><a cible="fermer:bloc1">fermer</a> le bloc</p>
   <p><a cible="montrerMasquer:bloc1">montrer/masquer</a> le bloc</p>
   <p><a cible="montrer:bloc1">montrer</a> le bloc</p>
   <p><a cible="masquer:bloc1">masquer</a> le bloc</p>
</liste>	
					
<bloc style="clair-cadre" bords="arrondis" ancre="bloc1">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</p>
 </bloc>

Cet exemple l'illustre sur un bloc de coordonnées. Ici, le lien hypertexte qui ouvre/ferme le bloc se trouve sur le titre même du bloc.

<coordonnées ancre="thisBloc" idref="ulb:services:cellule-web" état="fermé">
   <titre cible="ouvrirFermer:thisBloc">
      <titre3 toc="non">Plus d'info ?</titre3>
   </titre>
</coordonnées>		

Dans cet exemple, l'attribut cible utilise l'action ouvrirFermer. Elle va alternativement ouvrir/fermer le bloc courant qui contient ce lien, à savoir le bloc <coordonnées>.

<coordonnées idref="ulb:services:cellule-web" état="fermé">
   <titre cible="ouvrirFermer">
      <titre3 toc="non">Plus d'info ?</titre3>
   </titre>
</coordonnées>		

Une icône peut également être utilisée pour ouvrir ou fermer un bloc. Il suffit pour cela de mettre un attribut refermable="oui" sur votre bloc.

<bloc style="clair-cadre" bords="arrondis" refermable="oui">
   <titre>
      <titre2 toc="non">Lorem Ipsum</titre2>
   </titre>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</p>
</bloc>	

Remarque: si vous n'utilisez que cette icône, il n'est pas nécessaire de mettre une ancre sur votre bloc (cette ancre n'est utile que lorsque vous voulez contrôler l'ouverture et la fermeture du bloc par un lien hypertexte).

De même, une icône peut être utilisée pour masquer un bloc. Il suffit pour cela de mettre un attribut masquable="oui" sur votre bloc.

<bloc style="clair-cadre" bords="arrondis" masquable="oui">
   <titre>
      <titre2 toc="non">Lorem Ipsum</titre2>
   </titre>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</p>
</bloc>	

Il est évident que, ici, l'icône ne pourra pas servir à montrer le bloc à nouveau une fois qu'il aura été masqué (il faut utiliser un lien pour montrer le bloc à nouveau).

Les deux icônes peuvent, bien sûr, être utilisées simultanément:

<bloc style="clair-cadre" bords="arrondis" refermable="oui" masquable="oui">
   <titre>
      <titre2 toc="non">Lorem Ipsum</titre2>
   </titre>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</p>
</bloc>

Dans cet exemple, si le bloc est fermé en cliquant sur l'icône, un message donné par l'élément <résumé> sera affiché à la place du contenu du bloc.

<bloc style="clair-cadre" bords="arrondis" refermable="oui">
   <titre>
      <titre2 toc="non">Lorem Ipsum</titre2>
   </titre>
   <résumé>
      <p style="léger"><i>cliquez sur l'icône pour ouvrir le bloc à nouveau</i></p>
   </résumé>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</p>
</bloc>	

Même exemple que le précédent, mais ici, le bloc est fermé intialement.

<bloc style="clair-cadre" bords="arrondis" refermable="oui" état="fermé">
   <titre>
      <titre2 toc="non">Lorem Ipsum</titre2>
   </titre>
   <résumé>
      <p style="léger"><i>cliquez sur l'icône pour ouvrir le bloc</i></p>
   </résumé>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</p>
</bloc>	

Dans cet exemple, c'est le lien sur le bloc (attribut cible) qui fait apparaître les coordonnées de la Cellule web.

<coordonnées idref="ulb:services:cellule-web" style="voile" bords="arrondis" 
             état="fermé" cible="ouvrirFermer">
   <résumé>
      <p style="léger"><i>un renseignement?</i></p>
   </résumé>
</coordonnées>	

<bloc style="clair-cadre" bords="arrondis" refermable="oui" groupe="g1">
  ...
<bloc style="clair-cadre" bords="arrondis" refermable="oui" groupe="g1">
  ...
<bloc style="clair-cadre" bords="arrondis" refermable="oui" groupe="g1">
  ...
<bloc style="clair-cadre" bords="arrondis" refermable="oui" groupe="g1">
  ...

Lors du chargement de la page, tous les blocs dont l'état est défini par un attribut état seront affichés d'après celui-ci (ouvert, fermé ou masqué).

Ceux qui ne possèdent pas cet attribut seront ouverts, fermés ou masqués de la manière suivante:

• le premier de ces blocs sera ouvert, si aucun bloc ne se trouve déjà dans cet état

• les autres seront fermés si au moins un bloc est fermé, masqués si au moins un bloc est masqué, fermés dans les autres cas

Dans l'exemple précédent, il y aura toujours un bloc d'ouvert. Si vous le fermez, le bloc suivant s'ouvrira automatiquement. Il n'en va pas de même s'ils avaient tous été fermés (attribut état="fermé") lors du chargement de la page, comme dans l'exemple suivant:

<bloc style="clair-cadre" bords="arrondis" refermable="oui" groupe="g2" état="fermé">
  ...
<bloc style="clair-cadre" bords="arrondis" refermable="oui" groupe="g2" état="fermé">
  ...
<bloc style="clair-cadre" bords="arrondis" refermable="oui" groupe="g2" état="fermé">
  ...
<bloc style="clair-cadre" bords="arrondis" refermable="oui" groupe="g2" état="fermé">
  ...

Dans cet exemple, le bloc ouvert peut être fermé sans nécessairement en ouvrir un autre.

Dans cet exemple, un seul bloc sera ouvert à la fois, les autres seront masqués. Les blocs contiennent eux-mêmes des liens servant à ouvrir le bloc suivant ou le bloc précédent, ce qui fermera automatiquement le bloc courant.

<bloc style="clair-cadre" bords="arrondis" ancre="bl1" groupe="g3" état="ouvert">
   ...
   <p><a cible="montrer:bl4">précédent</a> - <a cible="montrer:bl2">suivant</a> </p>
</bloc>

<bloc style="clair-cadre" bords="arrondis" ancre="bl2" groupe="g3" état="masqué">
   ...
   <p><a cible="montrer:bl1">précédent</a> - <a cible="montrer:bl3">suivant</a> </p>
</bloc>
	
<bloc style="clair-cadre" bords="arrondis" ancre="bl3" groupe="g3" état="masqué">
   ...
   <p><a cible="montrer:bl2">précédent</a> - <a cible="montrer:bl4">suivant</a> </p>
</bloc>

<bloc style="clair-cadre" bords="arrondis" ancre="bl4" groupe="g3" état="masqué">
   ...
   <p><a cible="montrer:bl3">précédent</a> - <a cible="montrer:bl1">suivant</a> </p>
</bloc>