|
|
|
|
|
|
|
|
|
|
- Présentation
- Génération en mode "Responsive (zoning et agencements)"
- Comment utiliser la génération en mode zoning ?
- Mode "Responsive (zoning et agencements)" : Taille de référence des pages
- Créer et manipuler des zones de mise en page sous l'éditeur
- Présentation
- Créer des zones de mise en page
- Menu contextuel de la zone de mise en page
- Fenêtre de description de la zone de mise en page
- Sémantique associée à une zone de mise en page (onglet "Détail")
Edition des pages : mode Responsive (Zoning et agencements)
Le mode "Responsive (zoning et agencements)" est le mode d'édition des pages proposé par défaut. Ce mode d'édition permet de notamment une simplicité de manipulation des pages sous l'éditeur. De nombreuses fonctionnalités sont disponibles dans ce mode : - génération de la page optimisée.
- définition d'une taille de référence pour les pages,
- définition de zones de mise en page,
- ancrage simplifié des champs,
- utilisation des agencements (site "Mobile-friendly"),
- ...
Génération en mode "Responsive (zoning et agencements)" Comment utiliser la génération en mode zoning ? Par défaut, toutes les pages créées utilisent la génération en mode "Responsive (zoning et agencements)". Ce mode de génération peut être configuré directement dans la fenêtre de description de la page : - Affichez la fenêtre de description de la page (option "Description" du menu contextuel de la page).
- Dans l'onglet "Général", sélectionnez l'option "Responsive (zoning et agencements)".
- Validez.
Les avantages de ce mode sont notamment : - des pages très proches en exécution de leur mise en page sous l'éditeur.
- une grande liberté sur la manipulation des champs.
- un code généré clair et simple.
Mode "Responsive (zoning et agencements)" : Taille de référence des pages En mode "Responsive (zoning et agencements)", lors de l'édition d'une page sous l'éditeur, il est possible de définir la taille de la page : - soit directement, en utilisant la souris et en redimensionnant la page.
- soit en indiquant les nouvelles dimensions de la page dans la barre d'état de l'éditeur :
Les champs sont positionnés par rapport à la page et à sa taille définie sous l'éditeur. L'utilisation d'une taille de référence pour la page permet notamment : - d'afficher automatiquement des ascenseurs si nécessaire lors de l'affichage de la page sur un navigateur spécifique (par exemple affichage sur le navigateur d'un iPhone).
- de gérer les ancrages.
Créer et manipuler des zones de mise en page sous l'éditeur Présentation Le mode "Responsive (zoning et agencements)" simplifie l'édition d'une page en utilisant le concept de "zones de mise en page". Ces zones de mise en page permettent par exemple de définir l'architecture de la page : entête, pied de page, ... Ces zones de mise en page sont matérialisées et facilement manipulables sous l'éditeur. Par exemple, l'agrandissement de la hauteur de la zone d'entête déplace automatiquement les zones de mise en page situées en-dessous : zone corps de page et de bas de page. Créer des zones de mise en page Deux méthodes permettent de créer des zones de mise en page. - Méthode 1 :
- Sous le volet "Création", dans le groupe "Conteneurs", déroulez "Zoning" :
- Pour créer une zone horizontale, cliquez sur "Découper horizontalement".
- Pour créer une zone verticale, cliquez sur "Découper verticalement".
- Pour créer une subdivision horizontale, cliquez sur "Subdiviser horizontalement".
- Pour créer une subdivision verticalement, cliquez sur "Subdiviser verticalement".
- Le curseur se transforme en crayon.
- Cliquez dans la page pour créer la zone à la position du clic. Si nécessaire, les zones peuvent être redimensionnées et déplacées.
- Méthode 2 :
- Sous le volet "Page", dans le groupe "Edition", déroulez "Zoning" :
- Pour créer une zone horizontale, cliquez sur "Découper horizontalement".
- Pour créer une zone verticale, cliquez sur "Découper verticalement".
- Pour créer une subdivision horizontale, cliquez sur "Subdiviser horizontalement".
- Pour créer une subdivision verticalement, cliquez sur "Subdiviser verticalement".
- Le curseur se transforme en crayon.
- Cliquez dans la page pour créer la zone à la position du clic. Si nécessaire, les zones peuvent être redimensionnées et déplacées.
Remarques : - L'option "Découper" permet de partager une zone de mise en page existante en deux zones distinctes.
- L'option "Subdiviser" va créer deux nouvelles zones mais en conservant la zone initiale. Il y aura donc à la fin de la manipulation 3 zones : la zone initiale et les deux nouvelles zones à l'intérieur de la zone initiale.
- La création de zones de mise en page est possible :
- dans les pages et les modèles de pages,
- dans les pages popup,
- dans les "conteneurs" : cellules, superchamps, zones répétées, modèles de champs, ...
- La création de zones n'est pas possible dans les pages internes.
Menu contextuel de la zone de mise en page Le menu contextuel d'une zone de mise en page permet de réaliser plusieurs opérations : - Cliquez sur la zone de mise en page. Le contour de la zone de mise en page permet d'identifier la zone sélectionnée.
- Effectuer un clic droit sur la zone. Le menu contextuel apparaît : Ce menu permet notamment de :
- Afficher la fenêtre de description de la zone de mise en page.
- Ancrer la zone de mise en page.
- Fractionner verticalement ou horizontalement la zone de mise en page.
Remarque : Pour supprimer la zone de mise en page, il suffit d'utiliser la touche Suppr. Si une zone de mise en page est supprimée, tous les champs contenus dans la zone de mise en page sont conservés. Fenêtre de description de la zone de mise en page La fenêtre de description de la zone de mise en page est accessible par le menu contextuel de la zone de mise en page. Les informations importantes contenues dans cette fenêtre sont les suivantes : - Onglet "Général" : Cet onglet permet de spécifier le nom de la zone de mise en page et liste les champs présents dans la zone de mise en page.
- Onglet "UI" : Cet onglet permet notamment de définir l'ancrage de la zone de mise en page, la gestion du mode épinglé et la gestion des plans.
- Onglet "Détail" : Cet onglet permet d'indiquer la sémantique associée à la zone de mise en page.
- Onglet "Style" : Cet onglet permet de définir les options de cadrage et débordement de la zone de mise en page, son image de fond et son cadre. Ces options permettent d'éviter l'utilisation d'une cellule.
Sémantique associée à une zone de mise en page (onglet "Détail") WEBDEV offre la possibilité d'associer une sémantique HTML 5 spécifique à chaque zone de mise en page. Cette information n'est pas obligatoire et permet notamment d'optimiser le référencement par les moteurs de recherche (SEO, Search Engine Optimization). Ces informations permettent également d'améliorer l'accessibilité d'un site (par exemple, un site saura quel est le titre de la page et pourra le grossir dans le cadre d'un affichage en mode "accessibilité").
Liste des exemples associés :
|
Exemples complets (WEBDEV) : WW_Forum_AWP
[ + ] Cet exemple propose les fonctionnalités principales d'un forum utilisateur (création de forums, de sujets (ou topics) et de messages, modération par un administrateur, recherche, etc...) WW_FORUM_AWP utilise entre autres les fonctionnalités suivantes : - Recherche fulltext - Champs riches - Zones répétées - Pages POPUP - AJAX - ...
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|