Pour définir l'aspect graphique d'un Site, WebSite X5 permet d'utiliser un Modèle Prédéfini ou un Modèle Vide. Indépendamment de votre choix, vous pouvez utiliser les options mises à disposition par la fenêtre Structure du Modèle pour personnaliser complètement le Modèle Prédéfini choisi ou, dans le cas d'un Modèle Vide, pour le créer de toute pièce. Vous pouvez non seulement définir la structure du Modèle graphique pour l'affichage Bureau, mais dans le cas de la réalisation d'un Site adaptatif, vous pouvez également définir la manière dont le Modèle doit se présenter dans les affichages correspondant aux différents points de rupture configurés.
|
L'En-tête et le Pied de page du modèle réalisé peuvent être complétés en insérant des contenus comme: textes, images, animations, galeries, champs de recherche et liens. Les options nécessaires sont présentées dans la fenêtre Contenu du Modèle que vous rappelez en cliquant sur le bouton Suivant.
|
Pour faciliter le travail, la fenêtre Structure du Modèle offre un Aperçu montrant une représentation schématique de la Page.
De plus, si vous travaillez sur la création d'un Site adaptatif, le fenêtre présente également une Barre Adaptative qui reprend celle proposée dans la fenêtre Définitions et Conception Adaptative.
La Barre Adaptative repropose tous les points de rupture configurés et, en fonction de ceux-ci, identifie des Intervalles : il suffit de cliquer sur un Intervalle pour le sélectionner et procéder à la définition du Modèle pour l'Affichage correspondant.
Une fois que vous avez sélectionné l'Affichage sur lequel vous souhaitez travailler, vous pouvez ensuite choisir la section de page à modifier en utilisant la liste prévue à cet effet ou cliquer directement sur les différentes zones de la structure dans l'Aperçu de la page.
Il est donc conseillé de procéder par ordre décroissant, en définissant d'abord le Modèle pour l'Affichage Bureau, puis en définissant les changements du Modèle dans tous les autres cas, jusqu'à l'Affichage Mobile.
Pour créer un Modèle personnalisé, vous devez indiquer tout d'abord le Type de Structure, à savoir s’il est nécessaire de prévoir uniquement un en-Tête et un Pied de page ou également une Barre latérale. Les possibilités sont:
|
En-tête et Pied de page
|
|
En-tête, Pied de page et Barre latérale à gauche
|
|
En-tête, Pied de page et Barre latérale à droite
|
|
Après avoir choisi le type de Structure, sélectionnez la Section de page sur laquelle vous voulez travailler. Voici les sections de la page :
|
Arrière-plan de la page : c'est la zone externe de la page qui est affichée quand la fenêtre du navigateur est ouverte avec une taille dépassant la résolution du site.
|
|
Arrière-plan d'en-tête : c'est la partie de l'Arrière-plan de la page qui se trouve derrière l'En-tête.
|
|
En-tête : c'est l'en-tête, ou bannière supérieure, une section principalement graphique idéale pouvant contenir des éléments tels que le titre et le sous-titre du site, le logo de la compagnie, des champs de recherche, le Menu de navigation principal et le menu de service avec des liens, par exemple pour afficher le Plan ou choisir la langue de consultation.
|
|
Contenu de la page : c'est la zone destinée à accueillir le contenu des pages et, éventuellement, les Menu et sous-menu de navigation.
|
|
Pied de page : c'est le pied de page, une autre section principalement graphique qui a pour but de terminer visuellement la page. En général, cette zone contient des éléments comme des remarques, des avis de non-responsabilité, le copyright, le code Siret, des adresses e-mail.
|
|
Arrière-plan du pied de la page : c'est la partie de l'Arrière-plan de la page qui se trouve derrière le Pied de page.
|
|
Barre latérale : disponible uniquement si vous avez sélectionné un type de structure où elle est prévue, cette colonne, accompagnée à droite et à gauche des contenus de la Page, peut servir à créer un Menu de navigation vertical.
|
|
Si vous définissez l'Arrière-plan d'en-tête ou l'Arrière-plan du pied de la page comme Transparent, ceux-ci sont considérés comme faisant partie intégrante de l'Arrière-plan de la page et ils auront le même aspect. Autrement, vous obtenez des bandes pour l'En-tête et/ou le Pied de page qui occupent toute la largeur de la fenêtre du navigateur.
|
|
Pour toutes les sections de la Page, vous pouvez utiliser les Propriétés graphiques suivantes :
| ▪ | Couleur : spécifie la couleur à utiliser comme remplissage d'arrière-plan. |
| ▪ | Fichier image : sélectionner le fichier graphique (.JPG, .GIF, .PNG.) relatif à l'image à utiliser comme arrière-plan. Vous pouvez rechercher l'image dans la Bibliothèque en ligne consultable à l'aide du bouton  ou dans les dossiers locaux avec le bouton  Sélection fichier. |
| ▪ | Disposition : permet de définir s'il faut répéter ou non l'image utilisée comme arrière-plan. L'image peut être répétée horizontalement, verticalement ou dans les deux sens pour remplir tout l'espace disponible. Par ailleurs, seulement pour la section Arrière-plan de la page, vous pouvez adapter l'image, à savoir la redimensionner pour qu'elle couvre tout l'arrière-plan : dans ce cas, les proportions d'origine ne sont pas respectées. |
| ▪ | Alignement : permet de choisir l'alignement de l'image selon la zone de la page sélectionnée. |
Seulement pour la zone Arrière-plan de la page vous disposez de l'option :
| ▪ | Image d'arrière-plan fixe : si vous sélectionnez cette option, l'image insérée comme arrière-plan de la page reste fixe même quand vous faites défiler le contenu de la page à l'aide de la barre de défilement. |
|
Pour certaines zones de la Page, il est possible de spécifier aussi la Taille.
Selon la section de Page sélectionnée, les options suivantes peuvent être proposées :
| ▪ | Largeur : permet de configurer ou indique la valeur exprimée en pixels de la largeur de la zone de la page sélectionnée. Dans le cas spécifique du Contenu de la page, il n'est pas possible de configurer manuellement cette valeur: est automatiquement reprise la valeur configurée dans la fenêtre Définitions et Conception Adaptative à l'aide de l'option Définition du Site , dans le cas d'un Site Bureau, ou comme Affichage Bureau, dans le cas d'un Site adaptatif. |
| ▪ | Hauteur : permet de configurer ou indique la valeur exprimée en pixels de la hauteur de la zone de la page sélectionnée. |
| ▪ | Hauteur minimum : disponible uniquement pour la zone Contenu de la page, il configure la valeur exprimée en pixels de la hauteur minimum que la zone de la page destinée à contenir les contenus doit avoir, quelle que soit la hauteur des contenus réellement insérés. |
| ▪ | Agrandir à la largeur de la fenêtre du Navigateur : disponible uniquement pour les sections En-tête et Pied de page, il fait en sorte que l'aspect défini ne soit pas appliqué uniquement pour la largeur correspondant au contenu de la page, mais qu’il s’étende sur toute la largeur de la fenêtre du Navigateur. |
|
Grâce aux options disponibles, vous n'avez pratiquement aucune contrainte pour définir les dimensions et la position du Menu Horizontal inséré dans l'En-tête et vous pouvez ainsi obtenir des résultats inédits.
|
|
Enfin, toujours pour certaines zones de la Page seulement, il est possible d'afficher des Propriétés contenu.
Pour les sections Arrière-plan de la page et Contenu de la page vous disposez de l'option:
| ▪ | Marges : indique la valeur exprimée en pixels pour définir les marges. La marge est l'espace blanc entre le bord de la section et son contenu. |
Seulement pour les sections Arrière-plan de la page, vous disposez de cette option :
| ▪ | Alignement : définit comment doit être alignée la Page par rapport à la fenêtre du navigateur. |
Uniquement pour la section Barre latérale, l'option suivante est disponible :
| ▪ | Lors du défilement de la page, garder les objets toujours visibles : fait en sorte que, lors du défilement de la page, tous les contenus insérés dans la Barre latérale (à l’aide de la fenêtre Contenu du Modèle) se déplace de manière à rester toujours au premier plan. |
|
Bonnes pratiques :
