11
Mise en page
Page & Grille système
La page est composée d'un nombre quelconque d'éléments, elle occupe toute la largeur de la fenêtre du navigateur. Une grille système de positionnement des éléments est construite automatiquement au fur et à mesure de la construction de la page.
Une cellule système est une zone rectangulaire (une "case") de cette grille.
Les colonnes de la grille peuvent être redimensionnées en pourcentage, en fonction de la configuration de la page. Les séparations modifiables sont marquées par une barre grise verticale qui apparaît au passage de la souris et peut être déplacée pour retailler la largeur de la cellule correspondante. La colonne sélectionnée est celle qui est du côté où l'on clique par rapport à la barre (Vidéo >>).
Les largeurs
Les éléments sont rectangulaires et occupent généralement toute la largeur disponible dans la cellule. Certains éléments ont une largeur fixe, par exemple les images ou les blocs dont on a fixé la largeur.
La page couvre par définition la largeur de la fenêtre du navigateur, elle peut contenir une nombre quelconque de blocs à largeur fixe; si tout son contenu est encapsulé dans un bloc de largeur fixe, le visiteur la verra comme une page de largeur fixe; pour produire des effets plus sophistiqués on pourra par exemple fixer la largeur du corps de la page et laisser l'en-tête et le pied de page élastiques, ou encore définir des largeurs minimales et/ou maximales pour certaines parties.
Faire varier la largeur de fenêtre de votre navigateur pour voir le comportement sur cette page ou la page exemple >>.
Les hauteurs
Hauteur de cellule
La hauteur des cellules est calculée par le navigateur, en fonction du contenu et de l'espace disponible. Une cellule principale occupe toute la fenêtre, même si le contenu est plus petit. Selon le navigateur utilisé il peut apparaître des différences de hauteurs relatives, visibles en particulier entre Chrome et Firefox.
Création d'une cellule
Une nouvelle cellule est créée soit par le glissé-déposé d'un élément vers une cible rouge, soit à la création d'un nouvel élément à droite ou à gauche de l'élément sélectionné (Créer/déplacer un élément >>).
Par exemple, une façon de mettre un pied de page en bas d'écran consiste à amener l'élément souhaité sur une ligne rouge en extrême bas de page, en-dessous de la cellule principale.
Bloc pleine hauteur
La hauteur d'un bloc peut être paramétrée de façon à occuper toute la hauteur disponible dans la cellule qui le contient, les autres éléments étant alors repoussés vers le haut ou vers le bas. Plusieurs blocs dans une même cellule peuvent ainsi se partager la hauteur de la cellule, sans espace vide entre eux en dehors des marges souhaitées.
Faire varier les dimensions de la fenêtre du navigateur sur la page exemple >>.
Voir aussi
