• Création de la page et du bandeau.
• Création des différents éléments du bandeau d'entête (titre et logo).
• Test de la page.

Création d'une page

1. Cliquez sur parmi les boutons d'accès rapide.
   • La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Page" puis sur "Page".
   • L'assistant de création d'une page se lance.
2. Sélectionnez le type de page à créer : "Vierge" et validez. La page est automatiquement créée et affichée sous l'éditeur.
3. Affichez la fenêtre de description de la page : Sous le volet "Page", dans le groupe "Description", cliquez sur "Description".
4. Dans l'onglet "Général", sélectionnez le mode d'édition "Tranches (Responsive historique pour compatibilité)".
   
5. Validez la fenêtre de description.
6. Les différentes tranches apparaissent dans la page affichée sous l'éditeur. Par défaut, le mode utilisé est le mode "Desktop First - Edition en taille max.".
7. Affichez le menu contextuel de la page (clic droit) et sélectionnez "Description".
8. Saisissez le nom de la page "PAGE_utilisationcellule".
9. Validez la fenêtre de description.
10. Enregistrez la fenêtre (Ctrl + S).

Création du bandeau d'entête

1. Cliquez dans la tranche Bureau.
   Rappel : Il faut toujours commencer par travailler dans la tranche de référence :
   • Tranche Bureau dans le mode Desktop First.
   • Tranche Mobile dans le mode Mobile First.
2. Sous le volet "Création", dans le groupe "Conteneurs", sélectionnez "Cellule".
3. Cliquez dans la page : le champ apparaît en création.
4. Positionnez le champ dans le coin en haut à gauche puis agrandissez-le en largeur sur toute la largeur de la page. Il n'est pas nécessaire dans notre exemple de modifier sa hauteur.
   Astuce : Ne pas hésiter à mettre une couleur de fond dans la cellule afin de mieux la visualiser.
   Dans cet exemple, la cellule a une couleur de fond orange et un cadre arrondi.
5. Le résultat est le suivant :
   • tranche "Bureau" :
     
   • tranche "Tablette" :
     
   • tranche "Mobile" :
     

1. Affichez la tranche "Bureau" : cliquez sur l'entête "Bureau".
2. Cliquez sur la double flèche dans la bulle "Largeur du navigateur". Maintenez le bouton gauche de la souris enfoncé et déplacez-vous vers la gauche.
   
3. Déplacez la souris vers la gauche ou vers la droite : la largeur du navigateur est modifiée sous l'éditeur.
4. La cellule suit la largeur du navigateur.
   
   En effet, la cellule a un ancrage qui lui permet de suivre la largeur de la grille, donc de s'adapter à la largeur de la page.

1. Sélectionnez le champ Cellule.
2. Affichez le menu contextuel (clic droit) et sélectionnez l'option "Ancrage". La fenêtre d'ancrage apparaît :
   
3. Dans cette fenêtre, dans la zone "Ancrage en largeur", l'option sélectionnée est "Agrandir ou réduire comme le navigateur (ou son conteneur)". Ainsi, la largeur de l'élément sélectionné (dans notre cas, la cellule) est adaptée à la largeur de notre page. Dans ce cas, la cellule suit la largeur de la page (nous l'avons vu précédemment).
4. Pour tester, modifiez le paramètre "Largeur" et sélectionnez l'option "Largeur fixe".
5. Validez.
6. Activez les erreurs d'UI si nécessaire :
   • sous le volet "Projet", dans le groupe "Projet", cliquez sur "Description" : dans l'onglet "Compilation" de la description du projet, cochez l'option "Activer la compilation d'UI".
   • affichez le volet "Erreurs de compilation" et cliquez sur l'icône .
7. Enregistrez la page (Ctrl + S).
8. Nous allons tester la différence de comportement :
   • Affichez la tranche "Bureau" : rien ne change.
   • Affichez la tranche "Tablette" ou "Mobile" : la cellule ne se redimensionne plus en largeur.
     
   • La cellule est plus large que la résolution limite : des erreurs d'UI apparaissent :
     

• Solution 1 : Revenir au paramètre d'ancrage en largeur précédent : "Agrandir ou réduire comme le navigateur (ou son conteneur)".
• Solution 2 : Dans chaque tranche où se situe l'erreur, changer spécifiquement la largeur de la cellule. La largeur de la cellule sera ainsi fixée dans chaque tranche.
  Par exemple, dans l'illustration ci-dessous, la largeur de la cellule a été modifiée dans la tranche "Mobile".
  

1. Affichez la tranche "Bureau".
2. Sélectionnez le champ Cellule et affichez le menu contextuel (clic droit). Sélectionnez l'option "Ancrage".
3. Dans la zone "Ancrage en largeur", sélectionnez l'option "Agrandir ou réduire comme le navigateur (ou son conteneur)".
4. Validez

Création du titre et d'un logo

1. Affichez la tranche "Bureau".
2. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur puis cliquez dans la page en haut à gauche dans la cellule : le champ apparaît en création.
   

1. Affichez la tranche "Bureau".
2. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Image" et sélectionnez "Image".
3. Cliquez dans la page en haut à droite dans la cellule : le champ apparaît en création.
   

Mise en place du logo

1. Sélectionnez une image dans le catalogue de WEBDEV :
   • Affichez la fenêtre de description du champ Image (option "Description" du menu contextuel).
   • Dans l'onglet "Général", cliquez sur le bouton à droite du champ "Image". Dans le menu qui s'affiche, sélectionnez l'option "Catalogue".
     
   • Dans le catalogue d'images, saisissez le mot "voiture" par exemple et sélectionnez une image de la liste.
     
   • Sélectionnez une largeur de 80 et validez.
   • Validez l'écran suivant pour enregistrer l'image dans le répertoire du site.
2. La fenêtre de description de l'image est mise à jour. Validez.

Après ces manipulations, vous obtenez :

1. Sélectionnez la tranche "Tablette" puis la tranche "Mobile".
   • Tranche "Tablette" :
     
   • Tranche "Mobile" :
     
2. Dans les deux modes de présentation, l'image déborde de la zone. Ce problème d'affichage provient d'un problème d'ancrage.
3. Restez dans la tranche "Mobile" pour commencer. Nous corrigerons et vérifierons les autres tranches par la suite.
4. Consultez les paramètres d'ancrage du champ Image (option "Ancrage" du menu contextuel du champ).
   
   L'image conserve la largeur de création dans l'éditeur de WEBDEV. La largeur n'est pas dépendante (et donc proportionnelle) à la largeur de la page.
5. Il faut déplacer l'image vers la gauche pour l'afficher correctement et ne plus être en dehors de la page.
   
6. Sélectionnez la tranche "Tablette". Le même problème d'affichage apparaît.
7. Réalisez les mêmes manipulations pour corriger l'affichage.
   
   

Mise en place du titre

1. Affichez la tranche "Bureau".
2. Saisissez le titre et choisissez un style pour le texte :
   • Affichez le menu contextuel du champ Libellé (clic droit) et sélectionnez l'option "Description".
   • Dans la fenêtre de description :
     • Donnez un nom au champ : "ZTR_TITRE".
     • Cliquez sur le bouton "Editez le texte riche" et saisissez par exemple le texte "Page avec cellules".
     • Choisissez la police "Times New Roman" en taille 20 pixels.
3. Utilisez la touche Echap pour sortir du mode édition du champ.
   
4. Affichez les tranches "Tablette" puis "Mobile" :
   • Tranche "Tablette" :
     
   • Tranche "Mobile" :
     
5. Le libellé est rétréci en largeur, le texte n'est plus visible dans la tranche "Mobile". Dans la tranche "Tablette", le libellé est juste visible.

1. Sélectionnez si nécessaire la tranche "Mobile".
2. Sélectionnez le champ Libellé.
3. Dans le menu contextuel du champ (clic droit), sélectionnez l'option "Ancrage".
   
4. Modifiez l'option d'ancrage en largeur. Sélectionnez "Largeur fixe" et validez.
5. Le champ s'étire pour que le contenu soit visible entièrement.
   

1. Lancez le test de la page ( parmi les boutons d'accès rapide).
2. Vous obtenez ces 3 représentations (diminuez la largeur de votre navigateur pour simuler une exécution sur une tablette ou un mobile).
   • Navigateur (tranche "Bureau") :
     
   • Navigateur (tranche "Tablette") :
     
   • Navigateur (tranche "Mobile") :
     

1. Sélectionnez la tranche "Bureau".
2. Sélectionnez le champ Image.
3. Dans le menu contextuel du champ (clic droit), sélectionnez l'option "Ancrage".
4. Modifiez l'option d'ancrage. Sélectionnez "Droite" () et validez.
5. Lancez le test de la page ( parmi les boutons d'accès rapide).
6. L'image est bien alignée même dans une petite résolution.