WebBlocks, Structures

L'édition des webBlocks se base sur une imbrication de tableaux dans lesquels vous pouvez créer des lignes et des colonnes.

 
 Manipulations des lignes et des colonnes

Un webBlock contient au minimum un tableau de UNE ligne et UNE colonne. C'est le cas lorsque vous démarrez un webBlock "Vierge". Pour ajouter des lignes ou des colonnes, cliquez sur les présents sur les bordures du tableau.


Vous disposez de plusieurs outils pour intervenir sur ces lignes et colonnes :
  • permet de d'ajouter une ligne ou un colonne au tableau.
  • permet de supprimer une ligne ou une colonne du tableau.
  • permet de faire passer une ligne au dessus de la précédente.
  • permet de basculer une ligne sous la suivante.
  • permet de déplacer une colonne vers la droite.
  • permet de déplacer un colonne vers la gauche.
  • permet d'ajouter une ligne en dupliquant la ligne courante (et son contenu) dans la suivante.
 
 Notion de Cellules

L'intersection de chaque ligne et colonne est une cellule.

Chaque cellule d'un tableau propose un menu contextuel de deux colonnes permettant d'accéder à diverses fonctionnalités. Ce menu s'affiche par défaut en haut à droite de la cellule et peut être également accessible en cliquant à l'intérieur de celle-ci avec le bouton gauche.



Chaque cellule est définie par des propriétés éditables en cliquant sur l'élément de menu prévu à cet effet dans la 1ère colonne du menu contextuel. Ces propriétés permettent de régler les paramètres suivants :
  • Couleur de fond et Image d'arrière-plan : Permet de définir une couleur ou une image d'arrière plan pour la cellule.

  • Alignement horizontal/vertical : détermine le positionnement des éléments contenus dans la cellule.

  • Largeur : Ce paramètre peut être défini en pourcentage ou en pixels. Il est à noter que la valeur s'applique à toute la colonne, sauf :
    • Si une autre cellule de la même colonne a une largeur supérieure.
    • Si un élément contenu dans une des cellules de cette colonne a une largeur supérieure à celle de la colonne. Dans ce cas, la colonne sera "élargie" par l'élément.

    Ce phénomène est expliqué en détail dans la FAQ Comment définir la largeur d'une cellule ou d'une colonne ?

  • Hauteur : Ce paramètre peut être défini en pourcentage ou en pixels. La valeur s'applique à toute la ligne, sauf :
    • Si une autre cellule de la même ligne a une hauteur supérieure.
    • Si un élément contenu dans une cellule de cette ligne a une hauteur supérieure à celle de la ligne. Dans ce cas, la ligne sera "agrandie" par l'élément.

  • Étalement vers la droite (en cellules) : Permet de fusionner une cellule avec celle de la colonne (ou des colonnes) située(s) à sa droite.

  • Étalement vers le bas (en cellules) : Permet de fusionner une cellule avec celle de la ligne (ou des lignes) située(s) au dessous.
 
 Notion d'élément

Dans chaque Cellule, vous pouvez ajouter un ou plusieurs éléments.

Un élément peut être un texte, une image, une vidéo... Vous trouverez toutes les informations concernant les éléments dans l'aide en ligne suivante : WebBlocks, Elements

Il est possible d'ajouter plusieurs éléments dans une même cellule. Ces éléments s'affichent alors les uns à la suite des autres jusqu'à ce que le cumul de leurs largeurs dépasse la largeur définie pour la cellule. Ils passent alors à la ligne et ainsi de suite.

La plupart du temps, vous n'utiliserez donc probablement qu'un seul élément par cellule afin de bénéficier d'un meilleur "contrôle" sur le positionnement de celui-ci. Toutefois, dans certains cas cette possibilité s'avère très utile, par exemple si vous souhaitez changer le style ou appliquer une action de navigation à seulement certains mots d'une phrase lors de l'utilisation d'éléments de type Texte.

 
 Copie de cellules et d'éléments

Le menu contextuel des cellules propose les options classiques de couper/copier/coller qui permettent de dupliquer ou déplacer le contenu d'une cellule vers une autre. La fonction coller permet de récupérer à la fois le contenu et les propriétés de la cellule copiée. Le système propose également une fonction "Coller les éléments" qui autorise à coller uniquement le contenu sans la mise en forme de la cellule (les éléments).

Notez que cette copie s'applique également aux cellules contenant des tableaux (voir chapitre suivant) ce qui permet de récupérer et dupliquer facilement la mise en page réalisée dans ces derniers.

 
 Imbrication de tableaux

Vous êtes libre d'insérer des éléments de type "table" (tableau) à l'intérieur d'une cellule. Vous pouvez ainsi réaliser des imbrications multiples de tableaux.

Cette possibilité s'avère très intéressante pour présenter des produits, par exemple, notamment pour la réalisation d'une page d'accueil en webBlock.


 
 Propriétés des tableaux
Chaque tableau (ou élément "table") possède ses propres propriétés éditables en cliquant sur l'icône présent en haut à gauche du tableau. Les propriétés définissables pour chaque tableau sont les suivantes :
  • Taille de la bordure : Permet de définir une bordure HTML. Notez que vous ne pouvez pas personnaliser les bordures générées par ce biais.

  • Alignement de la table : Détermine l'alignement du tableau dans la page

  • Largeur de la table : Peut être paramétrée en pourcent ou en pixel. Notez que si le cumul des largeurs des colonnes de ce tableau est supérieur à la valeur définie ici, le tableau sera alors "élargi" pour s'adapter à son contenu.

  • Espacement des cellules : Définit un écart (en pixels) appliqué entre chaque cellule.

  • Marge intérieure des cellules : (en pixels) permet d'espacer le contenu de la cellule de sa bordure.

  • Fond Sonore : (proposé uniquement pour le tableau principal) permet de jouer un fichier midi (.mid) à l'affichage de cette page. Nous vous déconseillons toutefois l'utilisation de cette fonctionnalité désormais désuète.
  • Fond Couleur / Image d'arrière-plan : Couleur ou image de fond appliquée au tableau. Notez que cette couleur ou image seront masquées par les cellules du tableau qui utiliseront également une couleur ou une image de fond.
  • Propriétés avancées : Cette zone permet de créer un ID ou de rattacher une classe spécifique pour chaque tableau de vos webBlocks afin de leur appliquer des règles CSS spécifiques. Ces règles pourront :

    Pour en savoir plus sur les CSS, les classes et ID, nous vous invitons à vous référer à l'aide suivante relative à ce sujet : Présentations CSS

    Cette fonctionnalité permet, par exemple de créer des bordures personnalisées pour les tableaux des webBlocks.
 

Ajouter aux favoris : http://www.oxatis.com/Help/HelpCenterContent.asp?ActionID=512&TID=55232&MID=5000%7C55799&LangID=0
© 2001-2017 Oxatis. Tous droits réservés.