Dans WebSite X5, les Pages sont créées à l’aide d’une Grille et l’on peut perfectionner la mise en page en intervenant sur les marges des Objets contenus dans les Cellules, modifiables grâce aux options disponibles dans la fenêtre Marge et Alignement rappelée par le bouton Marges présent dans la barre d’outils de l’Étape 4 - Création de la page.
Pour mieux comprendre ce que signifie Marge et réussir à agir avec précision sur la mise en page des contenus, il faut comprendre le Modèle de Boîte utilisé.
Quand vous écrivez le code d'une Page Web, tous les éléments HTML sont considérés comme des blocs (ou boîte) et l'ensemble des règles qui gère l'aspect visuel des éléments du bloc se nomme Modèle de Boîte. Chaque boîte comprend un certain nombre de composants de base, chacun modifiable avec les propriétés des CSS : marges, bordures, remplissages et contenu.
L'image suivante montre les parties du Modèle de Boîte :
Dans WebSite X5 la grille de mise en page proposée identifie une série de Cellules où vous pouvez insérer différents Objets. De manière plus précise, chaque Objet est inséré dans un récipient qui est lui-même inséré à l'intérieur d'une Cellule de la Grille de mise en page. Pour chaque Cellule, on applique le Modèle de Boîte illustré.
Ainsi les éléments sont :
| ▪ | Contenu (zone verte) : c'est le contenu inséré en faisant glisser l'un des Objets disponibles. |
| ▪ | Marge intérieure (zone rose) : c'est l'espace entre l'Objet actuel et le bord de son récipient. |
| ▪ | Bordure : c'est le bord du récipient de l'Objet; l'aspect de ce bord peut-être défini à l'aide des options de la fenêtre Style de l'Objet. |
| ▪ | Marge extérieure (zone orange) : c'est l'espace entre le bord du récipient de l'Objet et les bords de la Grille de mise en page. |
Compte tenu de ces définitions, l'espace entre deux Objets côte à côte (horizontalement ou verticalement) est égal à la somme des Marges Extérieures définies pour les Cellules contenant ces objets.
