Prenez en main WeWeb

Dans le chapitre précédent, vous avez vu que derrière chaque page se cache un trio inséparable : une structure (HTML) pour faire tenir les murs, une organisation (Layout) pour ranger les meubles, et une apparence (CSS) pour la décoration. C'était une étape indispensable pour forger votre "modèle mental" et comprendre les contraintes avec lesquels WeWeb fonctionne. Maintenant, il est temps de passer à la pratique.

Dans ce chapitre, nous allons mapper vos connaissances théoriques sur l'outil réel. Vous allez apprendre à lire l'arborescence (HTML), à manipuler le panneau de style (CSS) et à naviguer dans le "cockpit" global pour ne jamais vous perdre. Attachez votre ceinture, on décolle !

Explorez l’arborescence

Souvenez-vous de notre analogie des boîtes imbriquées (Parents et Enfants). En code HTML, cette structure est écrite sous forme de texte indenté. Dans WeWeb, celle-ci est présentée par le Navigateur (ou l'Arborescence).

Situé généralement dans le panneau latéral gauche, le Navigateur est sans doute l'outil le plus critique pour un développeur WeWeb. Pourquoi ? Parce que le canvas central (la zone où vous voyez votre page) peut être trompeur. Visuellement, deux éléments peuvent sembler côte à côte, mais structurellement, ils peuvent être dans des "pièces" totalement différentes.

Le Navigateur vous montre la vérité structurelle de votre page. C'est ici que vous voyez réellement qui est le parent de qui.

• Les Sections : Ce sont les grandes boîtes qui découpent votre page horizontalement.

• Les Conteneurs (Divs) : Ce sont les boîtes intermédiaires qui regroupent des éléments.

• Les Éléments terminaux : Textes, Images, Boutons.

Lorsque vous ouvrez le panneau "Ajouter" (le bouton + souvent en haut à gauche) et que vous glissez un élément sur votre page, regardez immédiatement ce qui se passe dans le Navigateur. Une nouvelle ligne apparaît. Si vous glissez un bouton dans une carte, la ligne du bouton se décale vers la droite sous la ligne de la carte.

L'une des grandes forces de WeWeb est de permettre la manipulation de cette structure par simple glisser-déposer. Vous voulez que votre titre passe au-dessus de l'image ? Ne le faites pas au hasard sur le visuel. Allez dans le Navigateur, attrapez la ligne "Titre" et remontez-la au-dessus de la ligne "Image". 

De même, cette vue vous permet de sélectionner des éléments difficiles à attraper à la souris. Parfois, un conteneur est si ajusté autour de son contenu qu'il est impossible de cliquer dessus directement. Dans le Navigateur, aucun problème : vous cliquez sur la ligne du parent, et WeWeb le sélectionne instantanément. C'est la traduction directe de votre structure HTML, rendue manipulable.

Modifiez le style des éléments

Maintenant que vous maîtrisez le squelette (via le Navigateur), parlons de la peau. Vous avez sélectionné un élément. Comment le rendre beau ? Tout se passe dans le Panneau de droite, qui est votre studio de CSS visuel.

Dès que vous cliquez sur un élément (disons, un bouton), le panneau de droite s'anime. Il ne vous affiche pas du code, mais des champs à remplir, des curseurs et des palettes de couleurs. Pourtant, chaque action que vous faites ici écrit une ligne de CSS en arrière-plan. Ce panneau est généralement découpé en catégories logiques qui suivent la structure du CSS :

1. Layout (Disposition) : C'est ici que vous décidez comment les enfants de l'élément se rangent. Souvenez-vous du chapitre précédent : Vertical (Column) ou Horizontal (Row). C'est la propriété CSS display: flex que WeWeb active pour vous. C'est ici que vous gérez les alignements (centré, à gauche, justifié).

2. Spacing (Espacement) : Vous y trouverez deux notions clés : les Marges (l'espace autour de la boîte pour la pousser des voisins) et le Padding (l'espace à l'intérieur de la boîte pour que le contenu ne touche pas les bords).

3. Size (Taille) : Pour définir la largeur et la hauteur (Width/Height). Vous apprendrez vite à préférer les unités relatives (%) aux unités fixes (px) pour le responsive.

4. Typography & Background : C'est la partie purement déco. Couleur de fond, police, taille du texte, ombres.

Style local vs Style global (Classes)

Une notion fondamentale à repérer très tôt dans l'interface est la différence entre modifier un élément unique et créer une règle réutilisable. Dans WeWeb, comme en CSS, vous pouvez créer des Classes (souvent appelées "Classes CSS" ou styles globaux). Imaginez que vous ayez 50 boutons sur votre site. Si vous changez la couleur du premier bouton "à la main" dans le panneau de droite, seul ce bouton change. C'est du style local.

Mais si vous créez une classe nommée "Bouton Principal" et que vous l'appliquez à vos 50 boutons, alors modifier la couleur dans la classe mettra à jour tout le site d'un coup. Repérez dans l'interface la zone (souvent en haut du panneau de droite) où vous pouvez nommer votre style. C'est la clé de la productivité.

Découvrez l’interface globale

Parler ne suffit pas, il faut voir par soi-même ! Regardez cette vidéo pour explorer l'interface complète de WeWeb.

Dans ce screencast, nous avons identifié les principales zones de l’interface WeWeb pour mieux s’y repérer.

• Barre latérale gauche : elle sert à construire le site. On y ajoute des éléments (+), on navigue entre les pages, on gère le Design System (couleurs, polices) et on connecte des données via les Collections.

• Barre latérale droite : c’est le centre de configuration. On y ajuste le style, les paramètres techniques, et on crée des interactions grâce aux Workflows (équivalent du JavaScript).

• Barre supérieure : elle permet de piloter le projet, tester le responsive avec les breakpoints, prévisualiser le site (Preview) et le publier en ligne.

À vous de jouer

Pour valider votre compréhension de l'interface, nous allons reprendre l'exemple de notre Carte Produit (la paire de baskets "Running Pro 2024") du chapitre précédent. 

Cette fois, vous n'allez pas l'imaginer, vous allez commencer à identifier où la construire dans WeWeb.

Contexte

Vous êtes dans l'éditeur WeWeb. Vous souhaitez commencer à construire la structure de la carte produit que nous avons analysée théoriquement au chapitre P1C2 (une image, un titre, un prix et un bouton).

Consignes

1. Exploration : Ouvrez un projet WeWeb (même vierge). Repérez le Navigateur à gauche et le Panneau de Style à droite.

2. Action Structure (HTML) : Ajoutez un Bouton sur votre page depuis le menu "Ajouter" (+). Observez où il se place dans l'arborescence (Navigateur).

3. Action Style (CSS) : Sélectionnez ce bouton. Changez sa couleur de fond pour une couleur visible et arrondissez ses angles (Border Radius) à 20px via le panneau de droite.

4. Identification : Sans le construire entièrement, repérez dans le panneau de droite où vous devriez cliquer pour mettre le prix et le bouton sur la même ligne (Indice : cherchez les options de Layout/Flexbox).

Prenez le temps de manipuler ces zones. Le but est de cliquer, pas de réussir un design parfait. Vous pouvez comparer votre travail avec la vidéo ci-dessous.

Dans ce screencast, vous avez réalisé vos premières manipulations concrètes dans WeWeb en reliant théorie et interface.

• Ajout (Structure) : vous avez utilisé le bouton + pour glisser un élément Button sur la page, puis vérifié son apparition dans le Navigateur, preuve que la structure HTML est en place.

• Modification (Style) : en sélectionnant le bouton, vous avez modifié son apparence dans le panneau de droite (couleur de fond, bordures arrondies), ce qui correspond à l’écriture de règles CSS.

• Identification (Layout) : enfin, vous avez repéré où gérer l’alignement des éléments grâce au Layout du conteneur parent (Column ou Row), afin de placer des éléments côte à côte.

Vous avez ainsi connecté les notions HTML, CSS et Flexbox aux outils visuels de WeWeb.

En résumé

• Le Navigateur (Barre de gauche) est votre outil de vérité : il affiche la structure HTML réelle (parents/enfants) et permet de manipuler la hiérarchie avec précision.

• Le Panneau de Style (Barre de droite) est votre éditeur CSS : il contrôle l'apparence (couleurs, polices) et la disposition (Layout) des éléments sélectionnés.

• Le Layout (Flexbox) se gère dans le panneau de style, en choisissant une direction (Verticale ou Horizontale) pour organiser les enfants d'un conteneur.

• La Barre Supérieure sert à gérer le projet : prévisualiser le résultat (l'œil) et vérifier l'affichage responsive sur mobile ou tablette.

• L'interface sépare les rôles : On ajoute à gauche, on configure à droite, on pilote en haut.

Dans le prochain chapitre, nous allons entrer dans le vif du sujet en construisant de A à Z une fonctionnalité complète, en assemblant toutes ces pièces pour créer quelque chose de fonctionnel. Préparez vos briques !