Dreamweaver CC 2017/2018 : Les nouveautés

Créer une page avec Bootstrap 4

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Cette vidéo vous propose d'aborder une nouveauté introduite en mars 2018 : le support pour Bootstrap 4 dans Dreamweaver. Vous verrez comment créer un nouveau site et une nouvelle page sur base de Bootstrap 4.

Transcription

La seule nouveauté introduite par la mise à jour de mars 2018 est le support par Dreamweaver de la toute dernière version du framework Bootstrap. Bootstrap 4 était publié en janvier 2018 et vous constatez que quelques semaines plus tard, soit en mars 2018, Dreamweaver vous propose une mise à jour de son intégration avec Bootstrap. Alors, dans cette vidéo, vous allez voir comment vous pouvez créer un nouveau site basé sur Bootstrap 4. Ça commence dans le menu Site, puis Nouveau site Je vais créer un nouveau site que je vais appeler Bootstrap 4, par exemple. Je vais créer ça dans un dossier sur mon disque local que je vais appeler bs4 pour Bootstrap 4. Voilà, le site est créé. Je vais maintenant créer dans ce site une nouvelle page HTML. Pour ça, j'ai le gros bouton Créer ici sur l'écran d'accueil. Je peux également me rendre dans le menu Fichier - Nouveau. Dans les deux cas, j'arrive sur cette boîte de dialogue qui s'appelle, vous le voyez, Nouveau document. Je vais créer un document HTML Alors, j'ai ici deux onglets, un onglet AUCUN pour créer un document HTML tout à fait générique. Mais dans mon cas, j'ai envie de baser ce nouveau document HTML, cette nouvelle page, sur une structure de type Bootstrap. Donc, je vais créer un nouveau fichier Bootstrap, un nouveau fichier CSS, pour Bootstrap. Je ne vais pas utiliser de mise en page prédéfinie. Je peux également personnaliser Bootstrap, donc je vais cliquer ici sur ce bouton. Alors, si vous êtes familiarisés avec l'ancienne version de Bootstrap, avec Bootstrap 3, nous avons toujours par défaut, dans Bootstrap 4, 12 colonnes, ça n'a pas changé par rapport à la version précédente. Nous avons toujours une gouttière de 30 pixels entre chacune des colonnes, ça non plus, ça n'a pas changé par rapport à la version précédente de Bootstrap. Mais ce qui a changé, c'est la disposition des points d'arrêt, des breakpoints. Vous voyez que le point d'arrêt Petit, il se situait dans l'ancienne version à 768 pixels. Il est maintenant situé à 576 pixels. C'est beaucoup plus adéquat pour les petits écrans des smartphones. Vous avez un décalage qui a été opéré, donc le breakpoint, le point d'arrêt Petit se trouve à 576 pixels, le point d'arrêt Moyen se trouve à 768 pixels, le point d'arrêt Grand se trouve à 992 pixels et on a un nouveau point d'arrêt qui s'appelle Très grand et qui se trouve, lui, à 1200 pixels de large, tout ça par défaut bien sûr. N'hésitez pas à modifier ces paramètres par défaut. Je vais maintenant créer cette nouvelle page HTML. Là voici, vous voyez qu'elle est vide. Je vais la sauvegarder dans mon site, je vais l'appeler index.html comme ceci. Alors au niveau du panneau d'affiché, vous remarquez l'apparition de ma nouvelle page, bien sûr, index.html mais vous remarquez également l'apparition de deux dossiers, un dossier js qui contient trois fichiers JavaScript, le fichier jquery, donc la bibliothèque jQuery, une autre bibliothèque qui s'appelle popper et puis surtout le fichier Bootstrap-4.js. Donc ça, ce sont les fichiers JavaScript requis par Bootstrap 4, et puis dans le dossier CSS, vous avez ce fichier qui s'appelle Bootstrap-4.css Alors remarquez que ce fichier est en lecture seule, vous avez ici un petit cadenas devant le fichier. C'est tout simplement parce que le jour où Dreamweaver mettra à jour Bootstrap dans Dreamweaver, par exemple quand on passera à Bootstrap 4.1, puis 4.2, ce fichier risque de changer dans votre site pour refléter, donc, ces versions futures de Bootstrap. Si vous voulez inclure vos propres styles CSS en plus de ceux de Bootstrap, il est requis, il est conseillé plutôt, de créer votre propre feuille de style ici à côté de celle de Bootstrap. Au niveau du code de cette page, vous allez remarquer ici qu'il y a un lien vers la feuille de style Bookstrap-4.css. Et ici dans le fond de la page, juste avant la fermeture de la balise Body, vous trouvez l'inclusion des trois fichiers JavaScript dont je vous ai parlé plus tôt. Je vais donc retourner en mode En direct, comme ceci, et voilà donc comment vous pouvez créer une page basée sur le nouveau Framework Bootstrap 4 dans Dreamweaver.

Dreamweaver CC 2017/2018 : Les nouveautés

Optimisez votre flux de travail avec les nouveautés de Dreamweaver. Faites le tour des améliorations de l'interface, appréciez les évolutions de l'éditeur de code, etc.

Aucun commentaire n´est disponible actuellement
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :2 nov. 2016
Mis à jour le:13 juin 2018

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 !