Travailler avec Bootstrap dans Dreamweaver

Name: Travailler avec Bootstrap dans Dreamweaver
Author: Patti Scully-Lane

La compréhension de HTML et CSS n’est pas obligatoire pour utiliser Dreamweaver. Cependant, il est recommandé. Dans ce module, vous vous familiariserez avec la…

Preview the first lesson free — get full access to all 5 lessons.

Demander une démo Se connecter

Cours : à la demande

Dans cette leçon, vous allez apprendre comment créer une nouvelle page vierge en utilisant le framework bootstrap. Maintenant, la première chose que nous devons faire avant de commencer à utiliser bootstrap, créez un site. On va donc remonter dans le menu du site, nous allons créer un nouveau site et nous allons cliquer sur cette recherche de dossier. Et j'ai enregistré les fichiers de cours pour ce module sur mon bureau. Et donc je vais entrer et je vais sélectionner le module deux leçon un et ça va être mon dossier. Et pour le nom de notre site, Je vais juste taper en travaillant avec bootstrap et enregistrer. Ainsi, lorsque nous regardons notre panneau de fichiers nous pouvons voir qu'il y a un dossier d'images, un dossier multimédia et un dossier divers. Il n'y a pas encore de fichiers HTML dans notre dossier. Il est donc important de comprendre quels dossiers nous avons parce qu'en une minute, lorsque nous créons notre page en utilisant Bootstrap, Dream Weaver va créer automatiquement quelques dossiers supplémentaires pour nous. Donc, nous allons aller dans le menu fichier pour nouveau et lorsque nous créons notre nouveau document HTML, les documents HTML que nous avons créés à partir de zéro ont utilisé le cadre de none mais cette fois nous allons utiliser le framework Bootstrap. Alors, qu'est-ce que Bootstrap exactement ? Eh bien, Bootstrap est ce que nous appelons un framework. Qu'est-ce que c'est, est un groupe de composants pré-construits que vous pouvez utiliser pour créer plus facilement les pages de votre site Web. Maintenant, tous ces composants sont construits sur, le nouveau balisage HTML cinq, et ils utilisent CSS trois, les dernières feuilles de style en cascade. Maintenant, non seulement Bootstrap a HTML cinq et CSS trois mais il utilise également JavaScript. Ainsi lorsque vous créez votre première page basé sur ce framework Bootstrap, Dream Weaver va créer des dossiers supplémentaires pour contenir notre CSS ainsi que notre JavaScript. Nous allons donc cliquer sur le bouton créer et quand nous le faisons, vous pouvez voir dans notre panneau de fichiers nous avons un dossier CSS et un dossier JavaScript. Et dans notre JavaScript nous avons trois fichiers JavaScript différents, dans notre CSS, nous avons un fichier CSS, et nous allons monter dans le menu fichier et nous allons faire une sauvegarde sur ce document tout de suite et nous allons l'appeler index dot HTML, et sauvegarder. Je veux parler un peu du dossier connexe donc ici en haut de notre page, nous avons notre code source et si nous cliquons sur ce bouton de code en haut nous pouvons voir que c'est le code source de notre page. Et actuellement, il n'y a vraiment rien ici mais nous avons un commentaire qui dit que le corps du texte va ici. Mais nous avons nos liens mis en place ici, nous avons donc ce lien vers le fichier bootstrap, nous avons également un lien vers les trois fichiers JavaScript. Ainsi, dans tous les composants que nous utilisons, certains des composants interactifs que nous avons, ils sont basés sur cette technologie, cette technologie JavaScript, elle est donc déjà sur notre page. Et si nous regardons en haut ce sont tous les fichiers que nous pouvons utiliser. Et si vous comprenez un peu le HTML et le CSS vous pouvez entrer et personnaliser ces fichiers. Et cela étant dit, c'est une bonne idée. Si vous allez travailler bootstrap, c'est une bonne idée d'avoir des bases en HTML et CSS être capable de regarder le code et d'apporter des modifications au code si nécessaire. Avec ces fichiers associés, Je veux porter à votre attention les deux bootstrap, sont bootstrap 4.4 0.1. C'est une technologie qui est sortie en 2019, ce n'est donc pas la dernière version de bootstrap. Dream Weaver ne fonctionne pas avec la dernière version mais c'est quand même une version très stable de bootstrap pour commencer. Maintenant, si nous passons à notre onglet d'insertion nous avons dans l'onglet d'insertion, nous avons différentes listes déroulantes et l'une de ces listes déroulantes est les composants d'amorçage. À partir de là, nous pouvons ajouter beaucoup de différentes mises en page prédéfinies sur notre page et nous allons apprendre à le faire dans les leçons suivantes. Mais pour l'instant, nous allons mettre juste un conteneur. Et vous remarquerez, j'ai la vue en direct sélectionné ici en haut. Lorsque vous travaillez en bootstrap, travailler en vue en direct est en fait une meilleure idée que de travailler en mode conception. Assurez-vous que nous avons notre curseur dans notre corps. Ici sur la gauche, on va cliquer là-dedans et nous allons cliquer sur ce conteneur. Et donc maintenant à l'intérieur de notre corps, nous avons un conteneur et dans ce conteneur est l'endroit où nous mettrons tous les autres composants de notre page. Nous allons donc simplement aller dans le menu Fichier et enregistrer cela et nous avons maintenant une page avec un conteneur dessus prêt pour nous de mettre notre contenu. Ainsi, dans cette leçon, vous avez appris à créer une page en utilisant le framework bootstrap dans Adobe Dream Weaver.

Intermédiaire Fournisseur : Patti Scully-Lane 5 leçons · 39m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Ourdou, Chinese

Description du cours

La compréhension de HTML et CSS n’est pas obligatoire pour utiliser Dreamweaver. Cependant, il est recommandé. Dans ce module, vous vous familiariserez avec la structure des balises d’une page HTML et la façon dont Dreamweaver facilite l’utilisation du mode code pour apprendre le HTML lors de la création de pages. Vous apprendrez et appliquerez les fonctions du Framework Bootstrap pour ajouter facilement de nouvelles pages et y insérer des éléments.

Objectifs de la formation

Ce que vous allez apprendre

Reconnaître et utiliser la syntaxe HTML tout en travaillant dans la vue code de Dreamweaver
Créer une nouvelle page blanche à l'aide du framework Bootstrap
Insérer une navigation et des diaporamas photo dans une page avec Bootstrap
Insérer des lignes et des colonnes dans une page à l'aide de Bootstrap
Créer une page basée sur une méthode Bootstrap
Travailler avec la vue code dans Dreamweaver pour apprendre et modifier le HTML

Points clés à retenir

La compréhension de HTML et de CSS n'est pas requise pour utiliser Dreamweaver, bien qu'elle soit recommandée.
La vue code de Dreamweaver facilite l'apprentissage du HTML lors de la création de pages.
Le framework Bootstrap vous permet d'ajouter facilement de nouvelles pages et d'y insérer des éléments.
Bootstrap peut être utilisé pour insérer une navigation, des diaporamas photo, des lignes et des colonnes dans une page.

Foire aux questions

Dois-je connaître le HTML et le CSS avant de suivre ce cours ?

Non. Comprendre le HTML et le CSS n'est pas une exigence pour utiliser Dreamweaver, bien que cela soit recommandé. Le cours vous aide à vous familiariser avec la structure des balises d'une page HTML à l'aide de la vue code de Dreamweaver.

Que serai-je capable de créer avec Bootstrap dans ce cours ?

Vous apprendrez à créer une nouvelle page blanche avec Bootstrap et à insérer une navigation, un diaporama photo et des lignes et colonnes dans une page, ainsi qu'à créer une page basée sur une méthode Bootstrap.

Quelles compétences ce cours couvre-t-il ?

Le cours couvre Adobe Dreamweaver, le framework front-end Bootstrap, le protocole Bootstrap et les scripts HTML, et se rapporte à la certification Adobe Dreamweaver et Dreamweaver MX.

À qui s'adresse ce cours ?

Il s'adresse aux apprenants qui souhaitent se familiariser avec la structure des balises d'une page HTML et appliquer les fonctions du framework Bootstrap dans Dreamweaver pour ajouter de nouvelles pages et y insérer des éléments.