Étape 4 - Pages

Après avoir articulé le Plan du projet, vous pouvez commencer la création de chaque page insérée dans le site. La fenêtre Création de la page permet de définir la structure de mise en page et d'entrer les contenus.

Le chemin et le titre de la page sur laquelle vous êtes en train de travailler sont indiqués comme Page courante.

Pour rendre plus intuitive la mise en page des contenus, WebSite X5 propose une grille qui est composée, par défaut, de 2 lignes et 2 colonnes : il suffit de faire glisser les objets à l'intérieur des cellules de cette grille (un objet par cellule), pour composer la page.

Bien évidemment, vous pouvez ajouter des lignes et des colonnes pour disposer d'un plus grand nombre de cellules et aussi définir manuellement la largeur de chaque colonne. Grâce à ces possibilités de dessin de la grille et au fait de pouvoir placer un objet dans plusieurs cellules adjacentes, vous pouvez obtenir des mises en page très raffinées.

Une précision importante : l'utilisation de la grille sert seulement à simplifier et guider la mise en page des contenus. Exception faite pour quelques cas particuliers spécifiques, représentés par des combinaisons de mise en page très complexes, la grille de mise en page n'est pas "traduite" par un tableau de code HTML des pages. Dans tous les cas, la grille de mise en page ne sera jamais visible pendant la navigation avec le navigateur.

Comme dit précédemment, chaque cellule de la grille peut contenir un seul objet mais chaque objet peut être placé sur plusieurs cellules adjacentes horizontalement ou verticalement, de façon à occuper un plus grand espace sur la page.

L'aspect des cellules de la grille de mise en page change selon les différents états de la cellule :

▪	si elle contient un objet qui n'a pas encore été construit, elle montre l'icône correspondant au type d'objet sur un arrière-plan composé de lignes obliques grises ;

▪	si elle contient un objet qui a déjà été construit, elle montre l'icône correspondant au type d'objet sur un arrière-plan bleu ciel uniforme ;

▪	si elle contient l'objet sélectionné, elle montre l'encadrement et les poignées de sélection.

Pour plus de commodité, toutes les lignes de la Grille sont numérotées (l'indication figure à gauche) tandis que les curseurs pour agir sur la largeur des colonnes sont placés sur le bord inférieur.

Juste au dessus de la Grille de mise en page, on peut trouver une Barre d'Outils qui met à disposition les commandes suivantes :

	Contenu Ouvre la fenêtre qui permet de procéder à la création de l'objet sélectionné dans la Grille de mise en page. La fenêtre rappelée varie selon le type d'objet (texte, image, etc.).
	Style Permet de rappeler la fenêtre Style de l'Objet pour définir l'aspect graphique de l'Objet sélectionné à l'intérieur de la Grille de mise en page.
	Marges Rappelle la fenêtre Marge et Alignement : grâce aux options disponibles, vous pouvez configurer la valeur en pixel pour les marges extérieures et intérieures de l’Objet courant, ou bien aligner verticalement et/ou horizontalement l’Objet par rapport à la Cellule qui le contient (voir Le Box Model dans WebSite X5).
	Élargir Fait en sorte que l’Objet sélectionné s’élargisse en dépassant la largeur de la Page (déterminée par le Modèle) et occupe tout l’espace mis à disposition par la fenêtre du Navigateur. Le bouton est toujours actif mais, de fait, agit uniquement si l’Objet sélectionné est le seul présent dans la ligne. Sur la Grille de mise en page, les Objets pour lesquels la fonction Élargir a été activée sont facilement repérables dans la mesure où il sont plus larges que les colonnes qui composent la Page. En cliquant une deuxième fois sur le bouton Élargir, l’Objet retrouve son comportement normal et s'adapte à la largeur de la Page et non plus à celle de la fenêtre du Navigateur.
	Effet Rappelle la fenêtre Effet d'affichage pour définir la transition à associer à l'Objet sélectionné à l'intérieur de la Grille de mise en page.
	Définir une Ancre à l'Objet sélectionné Crée une Ancre et l'associe à l'Objet sélectionné dans la Grille de mise en page. Si vous cliquez sur la flèche à côté du bouton, il est possible d'afficher un menu avec les commandes suivantes:Insérez Ancre..., Modifier... et Supprimer.

L'Ancre est une référence qui permet d'identifier la position d'un Objet dans la Page: elle est utilisée pour définir des liens direct à l'Objet même ou à une Ligne.

	Ajouter une ligne avant la cellule sélectionnée/Ajouter une colonne avant la cellule sélectionnée Permet, respectivement, d'ajouter une ligne ou une nouvelle colonne dans le Grille de mise en page. Si vous cliquez sur la flèche à côté des boutons, il est possible de choisir si la ligne/colonne doit être ajoutée avant ou après la cellule sélectionnée. Vos grilles peuvent avoir au maximum 64 lignes et 12 colonnes.
	Supprimer la ligne choisie/Supprimer la colonne choisie Permet, respectivement, de supprimer la ligne ou la colonne sélectionnée de la Grille de mise en page. Au minimum la Grille de mise en page est composée d'une seule cellule (1 ligne x 1 colonne).
	Style des Lignes Rappelle la fenêtre Style des Lignes pour définir l'aspect graphique de la bande de la Page occupée par les Objets insérés dans la ligne en question de la Grille de mise en page.
	Adaptatif Rappelle la fenêtre Paramètres Adaptatifs pour spécifier le comportement de chaque Objet inséré en fonction de la définition de la Page.

Pour pouvoir travailler avec les options de la fenêtre Paramètres Adaptatifs il est nécessaire, au préalable, d'avoir choisi de créer un Site Adaptatif en activant l'option homonyme présente dans la fenêtre Définitions et Conception Adaptative.

À côté de la Grille de mise en page, vous trouverez la liste des Objets disponibles. Pour insérer un objet dans une page, il suffit de sélectionner l'icône relative dans la liste des objets disponibles, puis de la glisser-relâcher dans la grille de mise en page, au niveau de la cellule voulue.

Pour faciliter votre choix, les Objets peuvent être filtrés et gérés avec les commandes suivantes :

Liste Filtres

Propose la liste des filtres disponibles pour sélectionner, parmi tous les Objets disponibles, ceux répondant à un objectif spécifique. Il est possible, par exemple, d'afficher tous les Contenus principaux Page ou bien les Contenus principaux Modèle.

Afficher la gestion des objets

Rappelle la fenêtre Gestion des objets avec laquelle vous pouvez gérer l'installation, la désinstallation et la mise à jour de tous les Objets qui ne sont pas installés comme objets de base avec le programme.

Les Objets comptant parmi les Contenus principaux Page et les Contenus principaux Modèle sont :

	Objet Titre		Objet Menu
	Objet Texte		Objet Image
	Objet Bouton		Objet Tableau
	Objet de la galerie		Objet Vidéo/Son
	Objet Formulaire de Contact		Objet Content Slider
	Objet Commentaires et Notes		Objet Animation HTML5
	Objet Catalogue des produits		Objet Contenu dynamique
	Objet de code HTML		Objet Recherche

Une fois l'Objet inséré dans la Grille de mise en page, il suffit de le sélectionner et de cliquer sur le bouton Contenu (ou cliquez deux fois) pour ouvrir la fenêtre de création.

Bonnes pratiques :

-	Comment définir une Page à travers la Grille de mise en page
-	Comment créer et utiliser les Ancres