CSS : Positionnement et mise en page

Définir les CSS et le positionnement

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Au niveau du positionnement, il est important de faire le tour des divers modules de travail en CSS. Ainsi, faites le tour des différentes possibilités.
04:24

Transcription

Afin d'aborder plus sereinement, l'ensemble du positionnement CSS, il est important de se rapprocher, dans un premier temps, de toutes les descriptions de spécifications que l'on a sur le cours. Déjà, je vous invite à venir sur l'ensemble des spécifications globales, quelles qu'elles soient au niveau des CSS, de les parcourir et de faire votre marché ici, pour regarder tout ce qui va pouvoir constituer le positionnement avec le CSS. Alors, vous avez une deuxième grille de lecture qui sont les travaux actuels. En plus vous pouvez participer à ces groupes de réflexion et c'est très important, au moins pour amener des bugs sur des fonctions. On le verra plus tard pour les shape notamment au niveau des régions, des exclusions, etc. Donc ici vous avez l'ensemble des travaux. Donc, ça reprend toutes les spécifications et ça vous indique le positionnement de l'écriture de ces recommandations actuelles. Ce qu'on va regarder au départ, c'est de bien se dire qu'on va bien distinguer les 2 types d'éléments principaux qu'on a c'est-à-dire les éléments de type bloc et les éléments de type inline, alors chaque fois je vous montre et je vous indique les recommandations. Après ce qui est important de faire, c'est toujours de se dire si j'arrive sur la CSS Inline Layout ici pour les éléments de type en ligne, ce qui est intéressant de regarder aussi, c'est la version de l'éditeur, c'est-à-dire avant que le groupe de travail puisse avoir validé cette réflexion et donc là on va passer dans quelque chose de plus récent, d'un peu plus abouti, donc dès fois dans les échanges vous allez voir qu'il y a des évolutions qui sont faites. On prendra le dernier module justement pour pouvoir mettre en application un travail sur quelque chose qui est assez à la frise un peu du développement. Ici, sur le modèle de boîte et sur le positionnement et l'alignement de ce module de boîte. Ensuite, vous allez pouvoir regarder aussi à l'intérieur de ces blocs avec le travail sur la multicolonne. Et puis après on va regarder comment on va pouvoir positionner ces éléments quand on a vu les modèles de boîte, que ce soit en ligne ou bloc on va avoir les marges, les paddings, les bordures qui vont écarter les éléments les uns des autres pour pouvoir les positionner, ici, on est directement dans un élément qui va être positionné notamment au travers de la propriété display. Et donc c'est très important de voir qu'on va pouvoir agir sur le mode de représentation de l'affichage. Il existe aussi les flexible box, les flex-box qui ont été longtemps travaillées par les divers éditeurs, éditeurs de navigateurs et puis qui maintenant arrivent vraiment à se focaliser autour d'un standard, à devenir applicable dans les navigateurs de dernière génération. Et puis aussi, s'appuyer sur ce qu'on appelle les modèles de grilles et là on va pouvoir avoir des grilles qui seront standards, qu'il ne sera plus nécessaire d'utiliser des grilles externes. Donc, d'aller voir des éditeurs de grilles on pourra directement les utiliser en interne. Ensuite on a aussi tout ce qui va être les mises en modèle d'affichage, avec des régions qui pourront être définies par exemple avec des shapes, des formes qui vont venir découper, et puis des zones d'exclusion propres à l'affichage. Beaucoup d'éléments au niveau des CSS qui bougent et qui nous permettent de pouvoir travailler le positionnement. Alors sur quoi allons-nous nous focaliser au travers de cette formation ? Je vous propose dans un premier temps de regarder par exemple, les grilles donc au niveau des grilles, travailler avec les grilles qui existent actuellement ou les modèles de grilles. Donc tous les ensembles de jeu que l'on va pouvoir ajouter à nos développements, pour pouvoir se positionner sur un mode de grille. Ensuite, on verra les éléments eux-mêmes. Comment se positionnent-ils dans le flux ? Et puis les différences d'éléments entre inline et boîte. Alors faites bien attention, vous avez aussi un autre catalogue, une formation sur les fondamentaux des CSS, sur lesquels je vous préconise de vous rapprocher pour revenir sur les bases fondamentales de ces éléments, nous irons un peu plus loin que ce qui a été approché dans les fondamentaux des CSS. Ensuite, sur les éléments de boîte, on verra qu'on peut travailler avec des colonnes, on verra qu'on peut jouer avec les marges et le positionnement, et puis justement qui dit positionnement on viendra sur la propriété display et le travail avec les flex-box. Ensuite, on approchera toutes les zones géographiques d'une page qui va nous permettre de travailler avec quelque chose d'un peu à la frise aujourd'hui des recommandations CSS puisque rien n'est vraiment validé ça avance, ça recule un peu. On verra qu'il faudra installer des vieux navigateurs des fois pour pouvoir faire fonctionner ces éléments-là. Et donc, on verra les shapes, les exclusions et les régions. Donc une fois qu'on a défini ce que sont les CSS et les positionnements, il est aussi bien important de revenir sur ce qu'on entend par mise en page.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !