Work with Bootstrap in Dreamweaver

Name: Work with Bootstrap in Dreamweaver
Author: Patti Scully-Lane

Understanding HTML and CSS is not a requirement to use Dreamweaver. However, it is recommended. In this module, you will familiarize yourself with the tag…

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

Request a demo Sign in

Course: On-Demand

In this lesson, you are going to learn how to create a new blank page using the bootstrap framework. Now, the first thing that we have to do before we start using bootstrap is create a site. So we're going to go up to the site menu, we're gonna create a new site and we're gonna click on this browse for folder. And I have saved the lesson files for this module to my desktop. And so I'm gonna go in and I'm gonna select module two lesson one and that's going to be my folder. And for our site name, I'm just gonna type in working with bootstrap and save. So when we look at our files panel we can see that there is an images folder, a media folder and a miscellaneous folder. There are not any HTML files yet in our folder. And so it's important to understand, what folders we do have because in a minute, when we create our page using Bootstrap, Dream Weaver is automatically gonna create a couple more folders for us. So we're gonna go to the file menu to new and when we create our new HTML document, the HTML documents that we've been creating from scratch have been using the framework of none but this time we're going to use the Bootstrap framework. So what exactly is Bootstrap? Well, Bootstrap is what we call a framework. What that is, is a group of pre-built components that you can use to more easily create the pages of your website. Now, all of these components are built on, the new HTML five markup, and they use CSS three, the latest in cascading style sheets. Now not only does Bootstrap have HTML five and CSS three but it also utilizes JavaScript. And so when you create your first page based on this Bootstrap framework, Dream Weaver is going to create additional folders to hold our CSS as well as our JavaScript. So we're gonna click on the create button and when we do, you can see over in our files panel we have a CSS folder and a JavaScript folder. And in our JavaScript we have three different JavaScript files, in our CSS, we have one CSS file, and we're gonna go up to the file menu and we're gonna do a save on this document right now and we're gonna call it index dot HTML, and save. I wanna talk a little bit about the related file so up here at the top of our page, we have our source code and if we click on that code button up at the top we can see this is the source code for our page. And currently, there really isn't anything here but we do have a comment that says body copy goes here. But we have our links set up in here, so we have that link to the bootstrapped file, we also have a link to the three JavaScript files. So in any of the components that we use, some of the interactive components that we have, they're based on this technology, this JavaScript technology so it's already on our page. And if we look up at the top these are all of the files that we can use. And if you understand a little bit about HTML and CSS you can go in and customize these files. And that being said, it is a good idea. If you are going to be working bootstrap, it's a good idea to have a grounding in HTML and CSS to be able to look at code and make changes to the code where needed. With these related files, I do want to bring to your attention the two bootstrap ones, are bootstrap 4.4 0.1. This is technology that came out in 2019, so it is not the latest version of bootstrap. Dream Weaver does not work with the latest version but it is still a very stable version of bootstrap to begin with. Now, if we go over to our insert tab we have in the insert tab, we have different dropdowns and one of those dropdowns is bootstrap components. From in here, we can add lots of different predesigned layout to our page and we're gonna learn how to do that in subsequent lessons. But for right now, we are going to put in just a container. And you'll notice, I have the live view selected up here at the top. When you work in bootstrap, working in live view is actually a better idea than working in design view. Make sure we have our cursor in our body. Over here on the left, we're gonna click in there and we're gonna click on this container. And so now inside of our body, we do have a container and into that container is where we will put all of the other components of our page. So we're just going to go to the file menu and save that and we now have a page with a container on it ready for us to put our content. So in this lesson, you learned how to create a page using the bootstrap framework in Adobe Dream Weaver.

Intermediate Provider : Patti Scully-Lane 5 Lessons · 39m in Arabic, German, English, Spanish, French, Portuguese, Urdu, Chinese

Course Description

Understanding HTML and CSS is not a requirement to use Dreamweaver. However, it is recommended. In this module, you will familiarize yourself with the tag structure of an HTML page and how Dreamweaver makes it easy to use the code view to learn HTML when creating pages. You will learn and apply the functions of the Bootstrap Framework to easily add new pages and insert items into them.

What You'll Learn

Recognize and use HTML syntax while working in Dreamweaver's code view
Create a new blank page using the Bootstrap framework
Insert navigation and photo slideshows into a page with Bootstrap
Insert rows and columns into a page using Bootstrap
Create a page based on a Bootstrap method
Work with code view in Dreamweaver to learn and edit HTML

Key Takeaways

Understanding HTML and CSS is not required to use Dreamweaver, though it is recommended.
Dreamweaver's code view makes it easy to learn HTML while creating pages.
The Bootstrap framework lets you easily add new pages and insert items into them.
Bootstrap can be used to insert navigation, photo slideshows, rows, and columns into a page.

Frequently Asked Questions

Do I need to know HTML and CSS before taking this course?

No. Understanding HTML and CSS is not a requirement to use Dreamweaver, although it is recommended. The course helps you familiarize yourself with the tag structure of an HTML page using Dreamweaver's code view.

What will I be able to build with Bootstrap in this course?

You will learn to create a new blank page with Bootstrap and insert navigation, a photo slideshow, and rows and columns into a page, as well as create a page based on a Bootstrap method.

What skills does this course cover?

The course covers Adobe Dreamweaver, the Bootstrap front-end framework, the Bootstrap Protocol, and HTML scripting, and relates to Adobe Dreamweaver and Dreamweaver MX certification.

Who is this course for?

It is suited to learners who want to familiarize themselves with the tag structure of an HTML page and apply the functions of the Bootstrap framework in Dreamweaver to add new pages and insert items into them.