L'essentiel de Dreamweaver CC 2017

Se servir de Bootstrap

Testez gratuitement nos 1246 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Bootstrap est bien intégré à la barre d'insertion. Il vous facilitera le glisser-déposer de fragments de code ou l'édition des contenus avec restitution en temps réel de la page.
05:42

Transcription

Pour accélérer la mise en place de nos maquettes et de nos prototypes, nous pouvons nous appuyer sur la librairie Bootstrap qui va nous permettre de mettre en place rapidement des structures de sites et puis, d'utiliser des composants. Alors, soit vous partez depuis un modèle classique et proposé ici, donc il suffit de regarder les modèles qui utilisent Bootstrap, soit vous pouvez créer également un nouveau document à partir de Bootstrap et vous allez créer ce document à part entière. Alors ici j'ai créé un site autonome, parce que Bootstrap va installer une flopée de fichiers, et donc pour pouvoir les regarder plus en détail, j'ai préféré isoler l'ensemble de ces éléments de manière beaucoup plus claire ici. Donc ici, je vais utiliser soit une mise en page prédéfinie, soit rien du tout. Donc je vais partir sur un document qui est vierge et je n'utiliserai pas Extract, je vais simplement partir sur un document de base, pur et dur, blanc Bootstrap. Donc ici, lorsque je le crée, je vais avoir un fichier code source HTML, une librairie CSS, jquerry bien sûr, et la librairie Bootstrap.js. Si j'enregistre ce document, alors ici on fait quand même partie du fichier 11-06 donc je vais l'enregistrer en tant que tel, sauf que je vais lui donner indirectement l'extension '-1' ici pour pouvoir le distinguer éventuellement si on en crée un autre. Dès cet instant-là, tous ces fichiers Bootstrap, ici, sont présents, il me suffit d'actualiser ici pour les voir apparaître mais sont tous verrouillés et ne sont pas accessibles en écriture. Alors le boostrap.js, lui, ici, vous pouvez venir, si vous le voulez, le modifier, le jquerry, pareil, aucun intérêt de venir modifier ces librairies-là mais bon, vous pouvez le faire ; par contre, si vous regardez le CSS, il est vraiment verrouillé. Alors pour quelle raison il est verrouillé ? Pour être sûr de ne pas surcharger ce qui est natif à Bootstrap, ce qui est nécessaire à Bootstrap pour pouvoir fonctionner. Maintenant, si vous, vous voulez rajouter vos propres styles CSS, vous allez devoir passer par le CSS Designer, ici, et venir ajouter un nouveau fichier CSS qui va prendre en compte vos modifications et vos personnalisations. A l'instar de tous les autres langages ou utilisations, vous avez ce qu'on appelle les Composants Bootstrap qui sont à disposition. Alors là encore, on va les placer dans la partie – je vais prendre la palette d'insertion, je vais la mettre en haut ici –, pour pouvoir voir plus clairement tous les éléments par leur nom. Vous avez la possibilité d'utiliser des Container, Container-fluid et Grid Row. Je vous invite à vous rapprocher de notre catalogue et à suivre une formation spécialement dédiée à Bootstrap si vous avez besoin de décortiquer cette librairie ; pour ceux qui la connaissent, vous voyez que Dreamweaver intègre donc tous les composants de container de base propres à Bootstrap. Vous avez ensuite tous les composants d'interface on va dire, c'est-à-dire les Carrousels, les Images responsives, les petites vignettes, la barre de navigation, et chaque fois, vous avez des petits onglets ici qui vont permettre d'utiliser soit l'Inverted Bar, la fameuse classique Inverted Bar mais aussi les barres fixes sur la partie basse, les basics classiques ou la fixe sur la partie haute. Vous avez également l'utilisation de certains Glyphicons qui vont pouvoir être constamment utilisés, comme le Menu hamburger ici, la croix de Remove, la Validation, le Home, le Mail. Vous avez ensuite tous les boutons avec les différents types de classes qui peuvent être affectées, c'est-à-dire Large, Small, Default, Primary. Donc tout est présent directement dans cette bibliothèque de composants ici, vous allez pouvoir vraiment les utiliser simplement par glisser-déposer ou par insertion directement dans le code HTML. Sachez que dans la partie HTML Dreamweaver – alors là il faut passer en mode rendu En direct, c'est le plus sympa –, Ici, Dreamweaver est capable de vous rendre, de vous restituer directement, de regarder, si je prends par exemple une barre de navigation, je vais prendre la Navbar directement ici, dans la partie haute ici, et je vais demander une Basic Navbar, elle directement placée et elle fonctionne de manière réactive ou non en fonction des besoins et des paramètres que vous avez définis. Vous voyez qu'ici vous allez pouvoir rajouter une nouvelle colonne directement, vous allez pouvoir dupliquer l'élément vous allez pouvoir utiliser vraiment toute une grande souplesse d'utilisation au niveau de l'interface, dans la mesure où vous, maintenant, vous avez plus que des outils de glisser-déposer qui vont vous aider à positionner les éléments et à les redéfinir d'un point de vue imbrication. Tout reste éditable de manière classique, que cela soit depuis le code ou depuis l'interface de rendu. Il suffit de double-cliquer sur un élément pour en modifier le contenu. Voilà, donc tout reste identique à ce que vous avez l'habitude d'utiliser dans Dreamweaver. Vous allez pouvoir éditer et placer votre propre logo ou en-tête, ici, mais pour ceux qui la connaissent, vous voyez que Dreamweaver intègre tous les composants de container de base propres à Bootstrap. Enfin une autre partie, c'est que dans les fragments de code également a été intégré tout un ensemble de snippets propres à Bootstrap, ici. Et puis vous avez tous les messages qui sont pour la dernière librairie, qui est la 3.3.7 actuellement, si je ne me trompe. On doit être en 3.3.7 sur cette version intégrée, mais ici vous avez de compilé l'intégralité des composants qui fonctionnaient légèrement différemment avec un 3.3.4 ici qui ont été intégrés. Encore une fois, vous pouvez aussi ajouter vos propres snippets et venir enrichir cette librairie. Voilà, donc Bootstrap fait partie intègre de Dreamweaver. Je vous invite vraiment à venir découvrir cette librairie si vous ne la connaissez pas et si vous utilisez Bootstrap de manière native, n'hésitez pas à venir le découvrir au travers de Dreamweaver, vous allez voir, l'intégration est vraiment bien faite au niveau du glisser-déposer et surtout de pouvoir bénéficier toujours de ce rendu temps réel au niveau de l'interface de rendu.

L'essentiel de Dreamweaver CC 2017

Prenez en main l’environnement de travail de Dreamweaver. Créez des documents, utilisez les CSS, gérez les liens hypertexte, les fichiers multimédia, les formulaires, etc.

7h28 (98 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :30 janv. 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 !