Dreamweaver CS6 : Les nouveautés

Gérer les feuilles de style

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Une fois le prototypage terminé, il nous faut alors passer à la personnalisation CSS de chaque environnement. Il n'existe pas de processus idéal, chacun travaillant de la manière qui lui sera la plus conviviale. Il faut juste garder à l'esprit l'architecture de cascades CSS qu'utilise Boilerplate.
03:14

Transcription

La partie la plus minutieuse et la plus complexe à gérer dans ce type de processus de développement va être d'apporter des feuilles de styles différentes pour chacun de ces éléments. Il faut bien comprendre l'architecture qui est utilisée pour structurer tout ça. Roller plate ici, va être une feuille de style CSS qui va styler l'intégralité du contenu, par défaut, de votre document html, mais pas de son contenu ajouté. Ça va être simplement sur la partie qui va redéfinir, restructurer l'intégralité, une sorte de recette CSS. Voilà l'intégralité des balises par défaut. Votre feuille de style que vous avez rajoutée au moment de la création du document, je vais donc passer à un mode pur et dur, pour mieux le voir, va se baser sur trois feuilles de style imbriquées les unes dans les autres. Alors regardez, dans la partie : disposition pour mobile, on a une première feuille de style qui est purement adaptée au mobile. Ici, un petit curseur est apparu, qui est inutile, c'est sur la partie mobile, puisque c'est mobile first, c'est-à-dire que tout va être fait pour mobile CSS là. Dès l'instant où on va être à : media-only-screen minimum with 481, ça veut dire que dès que je suis en plateforme de type tablette, à ce moment-là, je vais avoir exactement les mêmes propriétés mais qui vont venir écraser les parties propres au mobile. Je vais lui dire : média, uniquement ceux qui sont supérieurs à 769, et là, c'est uniquement les balises de position donc, voyez que le great conteneur de départ qui est la balise globale avec le header, le navigation, le contenu et le footer que l'on a créés qui va venir écraser tout le monde et passer au-dessus. Si vous voulez apporter une visualisation qui sera pour tout le monde, il faudra venir la décrire dans la partie mobile, ici. Et faire attention que si cette représentation doit être différente dès que vous allez travailler par exemple, en tablette ou en grand écran, vous devrez les porter pour venir écraser ces règles-là. Faites donc attention de ne pas venir écrire dans le boiler plate, essayez de garder ce document-là, par défaut, tel qu'il doit l'être, éventuellement, venir enrichir la partie de reset, si vous en avez besoin par rapport à vos types de travaux, mais, porter tous les documents que vous avez modifiés sur cette partie-là. Et le responder js, de la partie Java Script minifiée, va elle, venir basculer entre ces feuilles de style, en fonction des éléments que vous allez avoir pour la redistribution des largeurs de colonnes, etc. Donc, comme je le disais avant, la partie un peu plus complexe va être de définir ces feuilles de style-là. Il n'existe pas de manière ou de méthodologie de travail c'est à chacun d'y aller de sa subjectivité, de la manière dont il sera le plus convivial pour lui de travailler, pour ma part, j'aime bien, au départ, éclater des feuilles de style très précises par bloc et de venir les rajouter directement, dans les parties concernées, ici, en copiant-collant directement, et en venant enrichir ce document-là et de pouvoir contrôler ce qui se passe quand je vais basculer d'un environnement de développement vers l'autre.

Dreamweaver CS6 : Les nouveautés

Allez à la découverte des nouveautés de Dreamweaver CS6, qui gravitent autour du développement d’applications mobiles, de la pluri-distribution et de sites Internet réactifs.

3h16 (40 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Spécial abonnés
Date de parution :23 avr. 2012
Mis à jour le:5 avr. 2017

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 !