CSS : Positionnement et mise en page

Utiliser les grilles

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Examinez comment 960.gs s'emploie. Une fois que vous aurez récupéré les fichiers, vous verrez ce que vous avez à votre disposition.
05:09

Transcription

Pour travailler avec un framework, j’ai volontairement choisi 960 parce qu’il est relativement complet et propose énormément de choses en parallèle et en satellite. Après, tous fonctionnent exactement de la même manière. Donc vous vous rendez sur la page du framework en question, ce que je vous conseille de faire dans un premier temps c’est de télécharger soit de par-là soit de par-là l’intégralité des fichiers, mais vous pouvez également accéder toujours à un fichier de démo et à généralement une plateforme Github qui va vous permettre de récupérer en gros les fichiers que vous avez téléchargés d'un seul bloc mais mis à jour, avec éventuellement quelques commit. Ici dans les modes de démo, ce qui est intéressant c’est qu’on peut aller directement dans le code source de la page récupérer ce qui nous intéresse, en partie des classes de travail, etc. pour mieux comprendre comment porter les choses, comment explorer les choses. Regardons du côté du fichier téléchargé et ce que nous avons dans le fichier, à l’origine, ce sont des plugins par exemple, le code qui va être utilisé, les licences d’exploitation, les logos, les sketch-sheet. Alors ça, c’est intéressant parce qu’en gros il s’agit de documents pdf qui nous permettent, si vous travaillez, mettons en 16 colonnes ici d’avoir des documents prêts à imprimer quoi, donc, ici vous pouvez développer l’intégralité du site et le porter sur les grilles, avoir des observations, en mode 12 colonnes, etc. donc c’est assez sympa de pouvoir l’utiliser. Et puis des templates, c'est là où c’est intéressant ce sont des templates pour presque toutes les applications. Rappelez-vous, quand j’ai fait Fichier, Ouvrir dans Fireworks les templates ici, on retrouve les modes grille 12, 16 et 24 colonnes, mais vous l’avez également pour Balsamiq, vous l’avez pour Illustrator, Photoshop, Omnigraffle, Inscape, Indesign, Quarkexpress, Visio de Microsoft, donc quasiment toutes les applications qui tournent autour vont pouvoir bénéficier de ces templates-là que vous n’aurez pas à construire et vont pouvoir les utiliser. Ce que je vous montrais tout à l’heure au début c'était dans les plugins, vous avez un plugin photoshop et un plugin fireworks. Donc pour installer le plugin Photoshop c’est très simple, vous avez une action, ici, qui a été définie, et il suffit de vous rendre dans Photoshop, vous appelez la fenêtre des actions ici, et puis vous ouvrez le menu contextuel ici et vous faites Charger les actions et vous pointez vers ce fichier atn qui a été fourni. Une fois installé, ça vous place ce script, donc soit vous voulez travailler en douze colonnes directement, vous n’avez aucun document d’ouvert, vous exécutez le script et ça vous ouvre le document et ça vous fabrique directement le mode grille dessus, soit vous avez déjà un document qui est ouvert, et vous voulez y plaquer le mode 12 colonnes, par exemple, vous l’ouvrez, vous sautez la première étape qui sert à créer le document, vous placez sur la seconde et vous faites Play et vous allez peupler directement ce document, ça exécute le script directement. Pensez à verrouiller le calque et à rajouter un calque pour travailler par-dessus ou par-dessous en fonction d'où vous voulez placer vos éléments par rapport à ce mode grille. Voilà, c’est très simple. Avant d’utiliser le mode grille, première chose à avoir c’est d’avoir déjà au moins une idée du rendu que l’on va avoir, pour déjà fabriquer le html, et puis avoir une idée de comment fabriquer les éléments. Donc ici ce mode de rendu a été fabriqué dans Fireworks, il suffit maintenant d’avoir un document html structuré et fabriqué en fonction de ce template. Je vous invite à vous rapprocher de notre catalogue sur les fondamentaux html ou la mise en page html avec un mode grille, pour arriver à fabriquer directement le html. Maintenant ce qu’on va faire, c’est plaquer ce mode grille. Alors une fois que vous avez téléchargé, forcément, à l’intérieur du document de 960 grids, vous avez les codes et dans les codes vous avez plusieurs éléments, alors ici vous le sautez, c’est la démo, vous pouvez utiliser la démo également en nature mais utilisez les CSS. Dans les CSS, vous avez toute une flopée de fichiers nécessaires. Ce qui va être important, c’est de savoir si vous travaillez en mode 12, 16 ou 24 colonnes, donc ici c’est en 12 colonnes, on va récupérer simplement cette partie-là. On va utiliser le mode col ou normal ou rtl, pour right to left si vous travaillez en fichiers html qui va de droite à gauche et non pas de gauche à droite, et ensuite vous avez les minified, les minified sont des fichiers CSS compactés que vous allez utiliser pour gagner du poids. Donc, en mode développement je vous préconise de travailler plutôt avec ceux-là, de façon à pouvoir voir les classes, comme elles sont construites, si des fois vous avez un artefact ou une incompatibilité qui se passe. Ensuite vous allez utiliser le reset pour réinitialiser dans l’intégralité des balises html classiques, et le texte, c’est en gros le fichier de départ que vous allez utiliser. Pour mettre tout cela en pratique, prenons notre fichier html de base et ajoutons ces 3 fichiers. Attention à bien placer le fichier reset en premier afin qu’il n’écrase pas les classes des autres fichiers. Pour cet exemple, je les ai regroupés dans ce dossier mais vous pouvez les placer où vous souhaitez dans votre arborescence. Le tout, c’est qu’ils ne soient pas trop éparpillés pour pouvoir les travailler. Une fois que vous enregistrez et que l'on passe en mode aperçu en direct, que se passe-t-il ? Pas grand chose, si ce n’est que l’ensemble des propriétés ont été réinitialisées, et que les valeurs de typo se sont calées sur celles définies par le fichier text.css. Voilà notre fichier est maintenant prêt pour l’étape suivante qui consistera à mettre en forme le contenu de cette 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 !