How to install bootstrap using Dreamweaver?

Okay so we’re going to create our first bootstrap document so all the other things we’ve done up until now have been little play around just to get used to things, now we’re going to build our full site. So first thing we need to do is, remember, 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 it onto the next project or the next trial. So, we’re going to go to new site, we’re going to call this one ‘My BootStrap Website’ you can give it something else, remember that name can be anything you like. We’re going to pick a local file, so I’m going to put it on the desktop. I’m going to call this one ‘BootStrap Website’ click choose. The only other thing I’m going to do is, under advanced settings, I’m going to go to images, I’m going to create a folder in here called ‘images’ and click choose. Great, lets click save.

So next thing we’re going to do is go to file>new, and up the top we’re going to pick HTML and instead of ‘none’ we’re going to start with ‘bootstrap’. Now this tick is on by default. The ‘include prebuilt layout’ and that’s kind of cool, watch this, if I pick prebuilt, it’s got a full website ready to go. You could jump in here but you’ll get lost pretty quick if you start with something this complex. So what we’re going to do is close it down and we’re going to go ‘file>new’ and we’re going to start with just a plain document and we’re going to build it up together to build our own website. Make sure it’s set to ‘create new’ and make sure that’s unticked and lets click create. What you might’ve noticed quite quickly there it just had an images folder a second a go but now it’s got this CSS folder, a fonts folder and a javascript folder. That’s because all the premade stuff for bootstrap has been installed into all of those folders. Lets go and have a look at what was created.

We’re going to go to finder, find my desktop and theres my bootstrap website and you can see there’s CSS, there’s the Bootstrap CSS, there’s some fonts that have been installed, they’re all glyphicons and some javascript to get it going, some jQuery and some special bootstrap stuff. Great so all of those files come together to produce out website. Along the top here you can see we’ve got a bunch of different things, we’ve got our source code, at the moment it’s untitled so lets save that. File>save, this is our HTML, we’re going to call it index.html. Whenever you’re building a website you need to at least 1 page called index.html and has to be spelt like that, lowercase, and that will be your home page, you can’t call your home page “home-page”, you’ve got to call it index.html, every other page you get to name, you can name whatever you like but for the home page it needs to be called index.html. Click save.

So we’ve got a bunch of files, we’ve got our HTML file which is him, and at the top here there is a CSS sheet and a couple of javascript files that help bootstrap work. Now they’re all seperate files but remember Dreamweaver quite clever and helps us see them all, if I click on CSS, it shows you down here, these are seperate files but Dreamweaver is really quite good because it shows them all together and how they interact. I’m going to back to source code, and I’m going to go back to live view, safety, get away from all that code. Actually before we go from code view lets go back to split and lets click on Source Code, this shows me the HTML of the index page. Now down the bottom here, I guess the big thing actually, lets go to full code view. Now you can see up the top here, it’s linking to my CSS sheet, it’s added some extra bits of code so you can see here in the head it’s got something called and HTML shim, don’t worry about it, just don’t remove it. It just helps older browsers deal with bootstrap, you can see in here it says IE8 support kind of helps make HTML5, just don’t remove it and you’ll be fine.

The reason I came in here to show you is I just want to refer to this thing called the head and the body. 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. 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. In the body, anything that you actually see in the website goes in the body. There’s the open and there’s the close. so this is where our logo is going go, all our images are going to go that needs to be in this body tag. Alright 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.