ARTICLE EN COURS DE RÉDACTION !
Les illustrations sont en cours également :o)
Petits rappels !
Les DIVs : toute une histoire de mise en page...
Il faut considérer un DIV comme une boîte rectangulaire dans laquelle il est possible de mettre du contenu.
DIV vient de l'anglais DIVision qui signifie section. Donc on crée un DIV et on y met des choses... et l'avantage de ce montage technique, c'est que, peu importe l'écran sur lequel la page sera lue, l'organisation va rester...
Ainsi, un texte illustré par une image fera un ensemble. Le texte pourra couler autour de l'image. La section suivante, elle aussi constituée d'un rédactionnel et de son illustration, restera bien en dessous. Et ce, peu importe l'écran, que l'on passe d'une version ordinateur à une version mobile.
L'on illustre ici, pour les 5 premieres lignes, la prise de position des éléments suivants aux premiers emplacements disponibles. Ainsi l'effet escalier (mais qui peut surtout etre un mélange de rédactionnel et illustration) est visible et la présentation peut être différente selon les écrans (mobile ou ordinateur).
Sur les 4 dernieres lignes, chaque bloc (ici de couleur alternée pour une question de visibilité) dispose de son image. La zone s'étend (car défini ainsi dans mes DIVs) verticalement au plus demandeur : image ou texte comme l'on voit par exemple sur la dernière ligne.
L'image utilisée est une image carrée, composée de 4 petits carrés noirs aux coins et un cercle jaune. Les petits carrés noirs délimitent l'image et la positionnent. Dans JCE l'image a été définie avant le texte et la position demandée est : alignée à droite.
Avant d'aller plus loin, je recommande la lecture d'un autre tuto : Mise en page : formats et styles CSS by Nico
C'est parti !
Les Formats
On va débuter par Afficher les blocs dans JCE (1). Cette option permet de voir la mise en page (côté technique) qui va être gérée par JCE.
On se positionne sur un nouveau paragraphe (2)
On change le Format de Paragraphe (p) à Bloc DIV (div + p) (3)
Et voilà, c'est fait... On a notre permier DIV !
On dispose d'un conteneur DIV avec dedans un paragraphe ! (4)
On notera en bas le Chemin, qui permet de sélectionner un objet ou un autrte (le paragraphe ou le DIV) (5).
Remarque : il est possible de se placer dans un paragraphe et le transformer en Bloc DIV (div + p)
Les Styles CSS
On vient de créer un DIV (une boîte), elle est pour le moment vide et surtout elle n'a pas d'attribut(s) défini(s).
Pas d'attribut(s) ? Oui, on parle d'attribut(s) quand on parle de couleur, de forme, de marge, de bordure... et de positionnement avec les autres éléments (dur dur la vie en collectivité ! il faut cohabiter !)
Pas de panique, les attributs sont en fait déjà préparés et bien rangés dans un Style CSS conçu pour le Site de l'Amofer :o)
Dans le Chemin (1), on sélectionne le DIV (2) et on affecte un style : bloc-article-by-nico (3)
A ce moment, le DIV a pris les propriétés voulues et il est possible d'y placer du contenu.
On en veut plus ? On peut affecter d'autres styles ! Par exemple affecter une couleur au DIV, une bordure, les 2.
Cela permet d'améliorer la présentation, de l'agrémenter de petits choses graphiques, de couleur qui rendent le contenu pluis agréable :o)
il y a danger donc c'est en rouge
Conclusion
Les DIVs permettent de garder une présentation, plus en regard de ce que l'on veut présenter... Fini les images qui, au détour d'un ordi, d'un smarphone, d'une tablette que l'on tourne passe d'un titre à un autre, d'une section à une autre... au risque de perdre les lecteurs ou de leur donner l'occasion de dire... Tiens, l'image d'illustration, elle est au mauvais endroit ! Le Webmestre n'a pas du relire son article !