How to install bootstrap using Dreamweaver?

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.