À partir de la Grille proposée par défaut, composée de 2 lignes par 2 colonnes, il faut ajouter un certain nombre de lignes et de colonnes pour accueillir tous les contenus de la Page et, d'autre part, insérer dans les cellules les Objets nécessaires.

Pour ajouter des lignes et des colonnes il suffit d'utiliser les boutons présents dans la Barre des Outils. On peut créer une grille avec un maximum de 64 lignes et 12 colonnes.

En automatique, toutes les lignes et les colonnes de la Grille de mise en page ont la même largeur et hauteur.

Par défaut, la largeur des colonnes de la Grille est obtenue en divisant la largeur de la Page (déterminée par le Modèle) par le nombre de colonnes insérées. Vous pouvez régler manuellement la valeur de la largeur des colonnes en intervenant sur les curseurs sur le fond de la Grille:

En revanche, la hauteur des Lignes est déterminée par les Objets qui y sont insérés et ne peut être modifiée manuellement.

Vous pouvez travailler sur l'aspect graphique des Lignes à l'aide des paramètres rassemblés dans la fenêtre Style des Lignes rappelée à l'aide du bouton .

Une fois la Grille de mise en page définie, vous pouvez saisir un Objet en sélectionnant l'icône qui le représente dans la liste des Objets disponibles et le glisser-déplacer dans la cellule qu'il doit occuper.

Chaque Cellule de la Grille de mise en page peut contenir un seul Objet, mais un objet peut s'étendre sur plusieurs Cellules adjacentes, à la fois horizontalement et verticalement. L'icône de l'Objet sélectionné peut être glissée le long des bords des Cellules : dans ces cas, l'Objet occupera l'espace des Cellules intéressées. En outre, il est possible d'agir sur les ancres de sélection de l'Objet inséré pour l'étendre sur plusieurs Cellules.

Une fois défini le nombre de Cellules que doit occuper un Objet, ce nombre sera maintenu, de manière compatible avec la présence d'autres Objets, même si l'Objet est déplacé vers d'autres parties de la Grille. Pour votre commodité, vous pouvez travailler sur la Grille à l'aide des touches flèches :

En cliquant avec le bouton droit de la souris sur l'icône de l'Objet inséré dans une Cellule, un menu contextuel est rappelé avec les commandes permettant de gérer l'Objet lui-même : Couper, Copier, Coller, Supprimer, Style de l'Objet, Effet.

Ces commandes peuvent, par exemple, créer une copie d'un Objet en le collant dans une autre Cellule ou dans une autre Page, ou le supprimer. Un Objet inséré peut être supprimé de la Page en le faisant glisser en dehors de la Grille de mise en page ou par la touche SUPPR. Dans tous les cas, en insérant un nouvel Objet dans une Cellule déjà occupée, vous obtenez automatiquement la suppression du premier Objet et il est remplacé par le second. Toutefois, si vous faites glisser un Objet qui existe déjà sur une cellule déjà occupée, les deux objets échangent leur position.

Les commandes Style de l'Objet | Copier et Style de l'Objet | Coller dans le sous-menu appelé par la commande Style de l'Objet, vous permettent de vous assurer que les paramètres de la fenêtre Style de l'Objet pour l'Objet contenu dans une Cellule seront automatiquement appliqués à l'Objet contenu dans une deuxième Cellule.

De même, les commandes Effet | Copier et Effet | Coller permettent d'appliquer à un deuxième Objet le même effet configuré pour le premier Objet.

Enfin, les commandes Style de l'Objet | Modifier... et Effet | Modifier... permettent, respectivement, de rappeler la fenêtre Style de l'Objet et la fenêtre Effet d'affichage.

Une fois un Objet inséré, vous pouvez appeler la fenêtre qui permet effectivement de procéder à la définition de son contenu en double cliquant  sur l'Objet ou en appuyant sur le bouton Contenu Objet.

Afin de mieux comprendre comment exploiter au mieux les possibilités de mise en page, il faut remarquer que le fonctionnement du logiciel doit respecter les règles suivantes :

-

Le Box Model dans WebSite X5