🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.

How to install bootstrap using Dreamweaver?

Course contents
SECTION: 9
How to backup 4:44
SECTION: 17
Finished 1:58

Questions

0
0
0
0
0
0
0

Course info

53 lessons / 5 hours

Overview

NOTE: this course uses Bootstrap 3. Dreamweaver has recently updated to Bootstrap version 4. You can change it back to 3 using the ‘New Document > Bootstrap > Preferences'. Please do this before starting the course.

Some versions of Dreamweaver will require you to download the specific Bootstrap version you want to use and link it within the site. You can download Bootstrap 3 here: http://getbootstrap.com/docs/3.3/

Hi - my name is Dan and I’ll be leading you through this course on how to Make money building mobile friendly websites using Dreamweaver.

I built this course for the visual person, the right brained person. We won't hide from code but we'll use all the visual tools that makes Dreamweaver so amazing.

These are the skills you’ll need to become a professional web designer. You’ll learn how to make responsive websites in Dreamweaver as well as learning what to charge and how to manage a website project.

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. During the course we’ll create a website for a mock creative agency - creating mobile and desktop versions. See our example here:

I’m a Dreamweaver Certified Instructor and an Adobe Certified Web Specialist.

With exercise files you can download and work along with me. At the end of each video I have a downloadable version of where we are in the process so you can compare your project with mine making it easy to see where you might have a problem.

I’ll be showing you how to work with Dreamweaver to easily create HTML & CSS websites. How to create mobile and tablet versions of your design and how to test your website on your phone.

I’ll be teaching you how to create navigation bars, how to work with responsive images and favicons.

We’ll work with Dreamweaver’s new Bootstrap integration to easily add carousels, tabbed menu’s and accordions. Even easier you’ll learn to impress clients by embedding videos, calendars, maps, event ticketing & social sharing options. 
 
 Know that I’ll be around to help - if you get lost you can message in the forum and together we’ll get you back on track.

Now it’s time to upgrade your skills, get that better job and impress your clients.

What are the requirements?

  • You'll need a copy of Dreamweaver CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Dreamweaver or web design experience is necessary.

  • If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.

What am I going to get from this course?

  • 60 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. For people who prefer not to work in code. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary. People with knowledge of previous versions of Dreamweaver CC 2014 and below will also get great value from this course as the software has changed so much.

  • NO: This course is NOT suited to people experienced in using HTML & CSS. If you prefer to work in code only then this course isn’t right for you.

Course duration 5.5 hours + your own study.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

Okay, so we're gonna create our first bootstrap document. So all the other things we've done up  until now have been little play  arounds just to get used to things. And then we're gonna build our full site. So first thing we need to do, remember, is  to create a site definition. We need to do that for every new site. Even if you're just playing around, make a new site for it.

Play around with that one, but make a new site when you move  on to the next project or the next trial. So we're gonna go to New site,  we're gonna call this one My Bootstrap website. You'd give it something else that, okay,  that name remember can be anything you like. We've gotta pick a local file. So I'm gonna put it on our desktop. I'm gonna call this one, uh,  bootstrap website.

Click choose. And the only other thing I'm gonna do is at  under advanced settings, I'm gonna go to images. I'm gonna create a folder in here called  Images and click choose. Great. Let's click save. Okay, so at next thing we're gonna do is gotta file new  and up the top here we're gonna pick HTML.

And instead of none, we're gonna start with Bootstrap. Now, uh, this tick on is, is on by default. That include prebuilt layout,  and that's kind of cool, which says if I click prebuilt,  it's got a full website ready to go. Now, uh, it's probably, you could jump in here,  but you'll get lost pretty quick if you  start with something this complex. So what we are gonna do is close it down  and we're gonna file new,  and we're gonna start with just a plain document  and we're gonna build it up together  to build our own website. So just make sure it's set to create new  and make sure that's Unticked and let's click Create.

Okay, what you might have noticed quite quickly there,  it just had an images folder a second ago,  but now it's got the CSS folder,  a fonts folder, and a JavaScript folder. That's because all the pre-made stuff for Bootstrap, um,  has been installed into all of those folders. Let's go and have a look at  what created, I'm gonna go to Finder. I'm gonna find my desktop, and there's my Bootstrap website. And you can see, uh, there is, in the CSS,  there's the Bootstrap CSS. There's some fonts that have been installed.

They're all Gly, Fons and some JavaScript to get it going. Okay. Some jQuery and some special bootstrap stuff. Great. So all of those files come together to produce our website. Along the top here, you can see we've  got a bunch of different things.

We've got our source code, okay,  at the moment it's Untitled. So let's save that file. Save. This is our H TM L. Now we're gonna call it index html. Whenever you're building a website,  you need at least one page called index html,  and it has to be s spelled like that,  Lowercase.

And, and that will be your homepage. You can't call your homepage homepage,  you gotta call it Index. Do html. Every other page you get to name. Um, you can name whatever you like,  but for the homepage, it needs to be called index html. Let's kick save.

So we've got a bunch of files,  we've got our L file, which is him. Okay? And at the top here, there is a CSS sheet  and a couple of JavaScript files that help bootstrap work. Now, they're all separate files,  but remember Dreamweaver is quite clever  and helps us see them all. If I click on, uh, CSS, it shows you down here. These are separate files,  but Dreamweaver is really quite good  because it shows them all together and how they interact.

So we're gonna go back to Source Code, okay? And we're going back to Live View Safety. Okay? Get away from that code. Actually,  before we go from Code View, let's go back to Split  and let's click on Source code. That shows me, um, the HTML, okay, of the index page.

Now down the bottom here, um,  I guess the big thing actually, it's got a full code view. Wow. Now, um, you can see at the top here,  it's linking to my CSS sheet. It's added, it's added some extra bits of code. Okay? So you can see in here in the head it's  got something called H tm L Shim.

Don't worry about it, just don't remove it. Um, it just helps, um, older browsers deal with Bootstrap. Okay? Um, you can see in here it says IE eight, um,  support kind of helps some HTML five features. Just don't remove it and you'll be fine. The reason I came in here to show you is I just wanna  quickly refer to this thing called the Head and the Body.

Okay? You can see the head has an opening  and you can see a slash then head for the close. So everything in here is stuff  that gets onto the document that you don't see. Okay? So there is the title of my page. There is the linking  to the different CSS sheets and JavaScript files.

So lots of that type of stuff goes in the head. Now, in terms of the actual website,  it's this stuff down here, okay? In the body. So anything  that you actually see in the website goes in the body,  and there's the open and then there's the close. So this is where our, uh, logo's gonna go. All our images are gonna go, that needs  to be in this body tag.

All right? So when you create a new file in Dreamweaver,  it produces all the files you need,  sticks them in the folder for you ready to go.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025