Lorsque l'on construit les pages de son site web, on se retrouve rapidement à paramétrer un grand nombre d'options et à définir tout un tas de règles. Pour éviter de se retrouver empêtré dans un fouillis incompréhensible et / ou des règles contradictoires, une hiérarchisation est faite en fonction de la profondeur a laquelle vous aller modifier un élément.
En développement web, pour modifier l'apparence d'un élément, on utilise un langage de programmation bien précis : le CSS. Bien que vous n'ayez pas à l'apprendre pour modifier votre site, il est intéressant de savoir que les différentes options de personnalisation que vous utiliserez sur Oxygen Builder se base sur de vraies règles CSS. En somme, en utilisant Oxygen, vous écrivez en quelque sorte du CSS !
Par conséquent, lorsque vous modifiez un élément, il est important que vous sachiez avec quoi vous interagissez. Il existe trois manière d'interagir avec un élément ;
Pour faire simple, l'ID est le numéro d'identification d'un élément, un peu comme sa carte d'identité. Il est différent de la classe, car chaque élément a son propre ID, ce qui permet de différencier par exemple deux textes avec la même classe.
Dans le développement classique, un élément n'a pas forcément d'ID, mais sur Oxygen, tous les élément ont un ID. Il se présente généralement avec un nom alambiqué, par exemple div_block_860-1 ou headline_478-2 ...
La hiérachie en CSS se présente de cette manière :
Cela signifie que si vous définissez la taille d'un texte sur 14px en utilisant une classe, puis que vous la définissez sur 18px en utilisant l'ID, le texte fera 18 px.
En développement classique, voici comment une ligne de texte se présente en HTML (le langage de base utilisé pour structurer les pages web) :
A présent, prenons un exemple pour illustrer et écrivons un peu de CSS :
Pour commencer, nous utilisons la balise pour demander à TOUS les textes du site d'être de couleur bleue :
Ensuite, nous utilisons la classe texte-accueil pour rendre les textes de la section accueil verts. Par conséquent, tous les textes du site sont bleu, sauf ceux qui portent la classe texte-accueil, qui sont vert. En effet, la classe est plus puissante que la balise.
Enfin, nous utilisons l'ID text-1 pour rendre le premier texte de la section accueil rouge. Par conséquent, les textes de la section d'accueil sont tous vert, sont le premier qui devient rouge. En effet, l'ID est plus puissant que la classe.
Bien sûr, vous n'aurez pas à écrire de code sous cette forme avec Oxygen. Mais il est important de comprendre comment fonctionne la hiérarchisation des éléments. Néanmoins si écrire du code CSS "en dur" vous intéresse, consultez le guide dédié.
Pour commencer, Ouvrez une page avec Oxygen Builder.
Lorsque vous utilisez éditez un élément avec la barre d'édition à gauche de l'écran, vous remarquerez un élément situé juste au dessus des format d'écran, avec une petite étiquette bleu ou verte à gauche et une autre étiquette state a droite.
Cliquez sur l'étiquette pour faire apparaître l'ID et la liste des classes éventuelle que contient l'élément (NB : l'élément est la balise) :
Cliquez ensuite sur l'ID ou la classe que vous souhaitez modifier.
ATTENTION : Gardez à l'esprit qu'en modifiant une classe, vous modifiez TOUS les élément qui portent cette classe, même s'ils sont sur une autre page (sauf s'il sont eux-même édités via leur ID). Soyez donc prudent en travaillant avec une classe.
Si vous avez peur d'une fausse manip, vous pouvez verrouiller une classe en cliquant sur le bouton lock situé juste au-dessus. Vous éviterez ainsi de la modifier par mégarde. Elle se débloque en cliquant à nouveau sur le bouton.
Langage de programmation universellement utilisé sur le web, le javascript est un langage plus difficile à maîtriser que ses deux autres camarades, mais de loin de plus puissant. Il est essentiel pour réaliser les actions complexes du site, comme le déploiement d'un menu déroulant, ou la mise en place d'un diaporama d'images (aussi appelé carrousel).
On va également l'utiliser pour animer le site et lui donner du mouvement lorsque le CSS commence à montrer ses limites. Les effets les plus complexes de votre site sont souvent conçus en javascript, puis stylisés avec du CSS.
Le Javascript va aussi servir à mettre en place les actions internes d'un site web, comme par exemple la procédure de connexion à un compte, ou la validation d'un paiement.
Visuellement, le Javascript se présente généralement de cette manière :
Sur votre site, le Javascript est contenu dans l'extension Advanced Script. Pour y accéder, consultez votre panneau de contrôle, onglet outils.
Contrairement au CSS, le Javascript nécessite un apprentissage préalable, c'est pourquoi nous ne l'abordons quasiment jamais dans cette formation, même si certains de éléments de votre site peuvent être configuré grâce à ce langage. Vous aurez besoin de vous former à l'utilisation de ce langage si vous souhaitez les modifier.
Acronyme pour Cascading Style Sheet (feuille de style en cascade), le CSS permet donner l'apparence voulue à tous les éléments du site. On va notamment l'uriliser pour spécifier les couleurs principales et secondaires, la polices et la taille des textes, l'alignement et l'espacement de chaque élément ... C'est également à cette étape qu'on va mettre en place le responsive design, qui consiste à modifier l'organisation du site en fonction de la taille d'écran, pour qu'il s'adapte aux tablettes et aux mobiles.
Le CSS, s'il est bien utilisé, peut également permettre des effets de styles très impressionnants qui vont améliorer l'aspect général du site et le rendre plus attayant pour les internautes. Il sera par exemple possible de faire des boutons qui changent de couleur lorsque l'on passe la souris dessus, d'ajouter une ombre à un élément, voir même d'animer un élément ... Les possibilités sont presques infinies ! En revanche, le CSS n'est pas un langage de programmation et ne permettra donc pas de programmer des actions complexes. C'est le Javascript qui s'en charge.
Visuellement, le CSS se présente généralement de cette manière :
Sur votre site, le CSS est contenu dans l'extension Advanced Script. Pour y accéder, consultez votre panneau de contrôle, onglet outils.
Si vous souhaitez apprendre à écrire du CSS sur votre site, consultez le guide dédié.
