Subscribe or Login to watch video

Login or Subscribe to watch video

8 - How to install bootstrap using Dreamweaver?


Questions & Comments

Rhett Eshleman - 1 year ago

Is this in "design view"? In the previous videos you seemed to strictly use the Code view. Maybe the older version is throwing me off?

I'm confused on which video modules to start with. I watched the "code your first responsive website in DW 2017" video which is newer than this, but you clearly demonstrate Bootstrap is the way to go when doing responsive sites. It would be helpful to clearly define where we should start watching the video modules. I understand some can't be grouped but these can, along with the designing in PS etc.. Thanks.

Administrator Tayla Coman - 1 year ago

Hi Rhett, this course uses Design view a lot. As you said it's hard to group, it depends on what you want to learn exactly. Tell me what your desired outcome is and I'll try guide you towards the best courses for you!

Rhett Eshleman - 1 year ago

Hi Tayla, thank you for the response. I'll eventually watch all the videos so I guess the end result will be the same :-). It just threw me off that the latest video was not using bootstrap to make it responsive, but rather media queries. It'll all work out though, these videos are great. Thank you

Administrator Tayla Coman - 1 year ago

Awesome! Yeah with updates come a few technicalities in regards to course content as it's hard to ALWAYS be creating a whole course after each update. Let us know how you go!

Glen Brewton - 1 year ago

When you create a new html bootstrap page does Dreamweaver CC link to the new bootstrap version 4.0?

Administrator Tayla Coman - 1 year ago

Hi Glen, from memory it does if you choose the initial 'Bootstrap' option when looking at templates. Otherwise you can just get a CDN link by searching "Bootstrap CDN" in google and copying and pasting the link into your HEAD

steven twyford - 9 months ago

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'. Ok so what now, just click apply?

Administrator Tayla Coman - 8 months ago

Hi Steven, yeah try hitting Apply and see if it works, you should be able to see the Bootstrap version in the head of your Index.html file, if it's still linking to a 4.x.x.x version then you can manually change it.

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/

Chris Simmons - 8 months ago

I had the same problem as Steven. This worked for me — https://forums.adobe.com/thread/2464454:
'… you can create a site using the previous version by selecting 3.3.7 in Site Settings > Advance Settings > Bootstrap > Bootstrap Version."

Loz - 5 months ago

Hi - I'm not sure if this is a big deal but when I created a new site it didn't create a fonts folder?

ALL ACCESS: $12 per Month + Cancel anytime   

Video Description

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/

Video Transcription

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.

ALL ACCESS: $12 per Month + Cancel anytime