Comment travailler sur le Style de l'Objet

Bonnes pratiques > Étape 4 - Pages >

Comment travailler sur le Style de l'Objet

Previous pageReturn to chapter overviewNext page
Montrer/Cacher le texte caché

En travaillant à la Création de la page, après que vous avez glissé un des Objets disponibles dans une Cellule de la Grille de mise en page, il est possible de définir l'aspect graphique de l'Objet même en cliquant sur le bouton et en utilisant les options proposées dans la fenêtre Style de l'Objet appelée.

Cliquez pour etendre/reduireEn pratique : Comment créer une image de fond qui s'adapte aux dimensions de la Cellule

L'aspect de l'Objet peut être personnalisé de différentes façons: entre autre il est possible d'importer une image (fichier dans le format  .JPG, .GIF, .PNG) et de l'utiliser comme fond de l'Objet même. Selon le type d'image importée il sera nécessaire de choisir l'option Arrière-plan image, définir les différents paramètres pour les éléments Disposition et Alignement , ou utiliser l'option Ajuster à la cellule, pour réussir à obtenir le meilleur résultat.

Exemple 1

L'image importée a les mêmes dimensions que la Cellule contenant l'Objet.

Arrière-plan : Arrière-plan image

Disposition  : Ne pas répéter

Alignement  : Haut - Gauche

Cliquez pour etendre/reduire

Exemple 2

L'image importée est un modèle, ou une image créée de telle sorte qu'en la répétant, à la fois horizontalement et verticalement, vous ne remarquez pas de points de conjonction.

Arrière-plan : Arrière-plan image

Disposition  : Mosaïque

Alignement  : Haut - Gauche

Cliquez pour etendre/reduire

Exemple 3

L'image importé est celle importée d'un cadre qui doit s'adapter à des Cellules de tailles différentes.

Arrière-plan : Ajuster à la cellule

Largeur bloc  / Hauteur bloc  : définir la taille des blocs la plus appropriée.

Cliquez pour etendre/reduire

Pour mieux comprendre comment fonctionne le Ajuster à la cellule, qu'est ce que sont les blocs et comment en définir correctement la taille, considérez les images suivantes :

Image 1

Image 2

Image 3

L'image originale (image 1) montre un cadre très élaboré, mais qui est bien adapté pour être découpé en blocs et pour s'adapter à n'importe quelle dimensions que puisse avoir la Cellule: les éléments décoratifs ajoutés dans les coins occupent, en effet, une surface bien définie et facilement délimitable et toutes les nuances peuvent être répétées aussi comme un modèle sans provoquer de brusques changements de teinte.

Dans l'image 2 on peut voir les blocs dont vous devez définir les dimensions (options Largeur bloc et Hauteur bloc ). Les valeurs de largeur et de hauteur des blocs (tous égaux les uns aux autres) sont définis en pourcentage par rapport à la largeur et hauteur de l'image originale et peuvent varier entre 5% et 45%. Dans ce cas, il est nécessaire de définir la dimension de la coupe à 35% pour les deux côtés des blocs afin qu'ils comprennent complètement l'image positionnée sur les coins.

Comme on le voit dans l'image 3, en identifiant les blocs A, B, C, D il est possible de déduire les autres 5 sections, a, b, c, d, e: ce sont les coupes qui sont faites par le Programme pour déduire de l'image d'origine toutes les images nécessaires pour composer le fond de la Cellule. Ainsi, alors que les images correspondantes aux blocs A, B, C, D sont maintenues telles quelles sont et simplement placées dans les coins, les images correspondantes aux sections, a, b​​, c, d, e sont répétées de façon à remplir tout l'espace nécessaire.

Comme il est facile de comprendre, cette procédure permet une grande flexibilité : à partir d'une seule image bien réalisée, en effet, vous pouvez résoudre l'aspect d'Objets contenus dans des Cellules dont les dimensions sont très différentes entre elles.

Cliquez pour etendre/reduireEn pratique : Comment utiliser la Librairie des Styles

Grâce à la Bibliothèque, vous pouvez réduire le temps nécessaire : si vous prévoyez de définir les même paramètres graphiques à plusieurs Objets, il est préférable de définir le premier Objet, enregistrer ensuite le style et l'appliquer, sans avoir à le recréer à chaque fois, aux autres Objets.

Pour créer un nouveau Style :

Dans la Grille de mise en page sélectionnez l'Objet que vous voulez modifier et cliquez sur le bouton pour appeler la fenêtre Style de l'Objet.
Utilisez les options mises à disposition dans les différentes sections Style et Textes pour obtenir le résultat souhaité.
Ouvrez la section Bibliothèque et cliquez sur le bouton Ajouter: selon les paramètres définis un nouveau Style est créé. Un' Aperçu du Style créé est ajouté à la liste des Styles Personnalisé.

Pour appliquer un Style :

Dans la Grille de mise en page sélectionnez l'Objet que vous voulez modifier et cliquez sur le bouton pour appeler la fenêtre Style de l'Objet.
Ouvrez directement la section Bibliothèque et sélectionnez l'aperçu du Style que vous voulez utiliser, en choisissant dans la liste des Styles Présélections ou dans celle des Styles Personnalisé.
Cliquez sur le bouton Appliquer.

 


Approfondissements :

-

Le Box Model dans WebSite X5