Table des matières
Si vous souhaitez vous aventurer à modifier la structure de vos pages ou à en créer de nouvelle, vous devez au préalable vous familiariser avec le concept de conteneur, car c'est une composante absolument essentielle de la construction de page.
Comme son nom l'indique, le conteneur est un élément qui contient d'autres éléments, ce qui permet mieux organiser sa page.
Une page web bien organisée est généralement constituée de dizaines de conteneurs imbriqués le uns dans les autres. A première vue, ce concept peut sembler compliqué, mais il est en réalité bien plus simple qu'il n'y parait. Pour cela, on va employer la métaphore de la maison :
Imaginons que vous soyez en train de construire un immeuble :
Voici ce que cela donne une fois transcrit sur Oxygen :
Pour faire simple, une page sans conteneurs se transformera très rapidement en un joyeux foutoir, car vous allez vous retrouver avec un grand nombre d'éléments que vous allez placer dans tous les sens, ce qui donnera un résultat peut satisfaisant et très difficile à modifier.
Exemple sans conteneurs
Exemple avec conteneurs
Il existe un certain nombre de conteneur différents : main, section, span ... qui peuvent venir complexifier la chose dans le cas du développement web classique. Sur Oxygen en revanche, un seul conteneur vous suffira dans 99% des cas : la div. Si vous entendez parler de conteneur via nos guides, c'est forcément une div.
La div est le conteneur de base, qui sert à segmenter vos éléments de la même manière que nous l'avons vu plus haut. Une div est tout simplement un rectangle qui peut contenir ou non des élément, et qui peut prendre n'importe quelle forme.
Sur Oxygen, la div est reconnaissable dans votre barre de structure (à droite) par l'icône de rectangle à côté du nom de votre élément.
Nous allons ici imaginer que vous construisez une page à partir de zéro, car il est conseillé de ne jamais intégrer un élément sans l'avoir rangé dans un conteneur au préalable en langage de développeur, on dit qu'on Wrappe l'élément dans une div (comme si on l'enroulait dans un wrap).
Si vous suivez le parcours recommandé de cette formation, vous pouvez revenir sur le cours relatif à la prise en main d'Oxygen pour apprendre à utiliser la barre d'édition (à gauche).
La barre de structure d'Oxygen permet de mieux visualiser l'architecture de votre page, mais elle a malheureusement un point faible : il arrive de mettre un conteneur au mauvais endroit dans l'architecture. En effet, surtout si vous déplacez un conteneur, vous devez faire très attention à bien identifier où vous allez mettre votre div pour éviter de le placer trop haut ou trop bas dans l'architecture, car il est facile de faire l'erreur au début. Reprenons notre exemple avec l'immeuble :
Vous l'aurez compris, il faut avoir l'oeil. C'est pour cette raison qu'il est primordial de bien comprendre comment est organisé l'architecture de votre page, quelle section est ici, et pourquoi. Evitez de commencer directement à déplacer des éléments dans votre page, ou vous risquez de casser votre mise en page sans comprendre pourquoi.
Vous comprenez également d'autant plus l'intérêt de nommer clairement les div que que ajoutez.
Vous avez fini de travailler dans une section de votre site ? Alors fermez les div qui la compose. A force de travailler sur un élément, puis un autre, vous vous retrouvez avec un fouillis incompréhensible, et vous décuplez le risque de déplacer un conteneur trop haut ou trop bas dans l'architecture.
Vous pouvez fermez toutes les div en cliquant sur le bouton Collapse all juste en dessus du conteneur inner content
Pour déplacer une div ou un élément, localisez l'élément que vous voulez déplacer dans la barre de structure puis déplacez-le avec votre souris à l'endroit souhaité.
Dans le cas où votre mise en page est particulièrement lourde, déplacer un élément à l'endroit voulu peut être un peu compliqué, car le logiciel commence à saturer, ce qui rend le contrôle moins précis. Arrangez -vous dans ce cas pour amener les éléments de bas en haut, cela marche mieux que de déplacer de haut en bas. Si vous avez absolument besoin de descendre un élément et que l'interface galère trop, descendez-le d'abord tout en bas, puis remontez-le à l'endroit voulu.
