Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Setting up a Dreamweaver site with Bootstrap files

From: Up and Running with Bootstrap 2

Video: Setting up a Dreamweaver site with Bootstrap files

Now that we've downloaded our copy of Bootstrap, let's get started building our first HTML web page inside of Dreamweaver. I'm using Dreamweaver for this particular course because I've worked with Dreamweaver for a long time, and I'm familiar with it as an environment for editing HTML and CSS. You certainly don't have to use Dreamweaver to accomplish what I'm going to show you here, and in fact, we're going to be working in code view most of the time. You're welcome to use any sort of program whatsoever that will allow you to edit HTML and CSS files. That's what we'll be doing for the most part in this course.

Setting up a Dreamweaver site with Bootstrap files

Now that we've downloaded our copy of Bootstrap, let's get started building our first HTML web page inside of Dreamweaver. I'm using Dreamweaver for this particular course because I've worked with Dreamweaver for a long time, and I'm familiar with it as an environment for editing HTML and CSS. You certainly don't have to use Dreamweaver to accomplish what I'm going to show you here, and in fact, we're going to be working in code view most of the time. You're welcome to use any sort of program whatsoever that will allow you to edit HTML and CSS files. That's what we'll be doing for the most part in this course.

So I'm in Adobe Dreamweaver CS6, I'm in the default designer view, as you take a look at the screen here. So if you want to make your screen look exactly like mine, over here at the top right there's this item for Designer view. Make sure yours is set to Designer view, and then here where you see this thing called Business Catalyst, I'm just going to go ahead and close that whole tab group. We won't be using it in this course, and I'd like to make a little bit more room for my files which are down here at the bottom, so I can see what's going on. As always, when we start working with Dreamweaver, the very first thing to do is to make a Dreamweaver site.

So I'm going to go ahead and do that now by going to Site > New Site, and I'm going to give this site a name. I'm going to call it bootstrap, and I'm going to indicate where my local site folder is located, and I can do that by clicking on the folder icon here. I'm going to go to my Desktop, and I'm going to go to my bootstrap folder right here on the desktop, and inside of that are those three folders that we just downloaded from getbootstrap.com, they're all present there. Go ahead and say Select and then say Save, and you should see those three folders now show up over here on the side inside of the files, paneled over on the right side of Dreamweaver.

The next thing, once we have the Dreamweaver site established is to create a new HTML web page. So to do that, go to File > New, and you get this grid of options that you can choose from. We're certainly going to build a blank page. Don't be confused by the fluid grid layout. This is a Dreamweaver-based fluid grid layout, it has nothing to do with Bootstrap's grid layout, which I'll be covering in some later videos. So we want just the blank page. It's going to be an HTML page type, and then for the layout, none of the layouts need to apply.

Over here for the doc type, make sure you choose HTML 5, because that is what we will be working with for Bootstrap, which is designed to work with HTML 5, and then go ahead and say Create, and you should see a document very similar to this on your web page. So first thing I'm going to do is change my title from Untitled Document to Up and Running with Bootstrap, which is the title of the course. The next thing you might want to take a look at it is inside of your exercise files, I've given you a tiny little bit here of extra code that needs to appear inside of your Bootstrap document.

One thing is this line here, this meta tag, this is a meta tag indicating that the viewport starts with an initial scale of 1.0. This is important in responsive design. So we're going to go ahead and copy this by doing Ctrl+C or Command+C to copy that particular text from the document, and then just after here, where it says meta characters set of UTF-8, I'm going to Ctrl+V or Command+V to paste that line of code right on into place. The next thing I need to do is attach the style sheets that I'll be using in this particular document, and we can do that over here through the Styles Palette which is located on the right side of the screen. If you just hit refresh, you should be able to see the Styles Palette as it normally appears.

Down at the bottom of the Styles Palette there is a link icon to attach a stylesheet, go ahead and click that, and we're going to browse for our CSS folder, and inside of that, you'll find that there's actually four stylesheets that are available to you, and you're probably wondering what the differences are between these. So first of all, you'll see that there are two sets of two, really bootstrap and bootstrap.min, bootstrap-responsive and bootstrap-responsive.min. The differences here are the .min files are what are called minimized they've been processed so that all the space that is normally present in a stylesheet file has been taken out, and that will help the files download more quickly, which is great when you're actually using a production site, and you want to make sure your file sizes are small as possible so that mobile phone users have very, very small files to download.

Since we're doing this in a development environment, I'm going to link to the full version of these stylesheet files in case we ever want to go and take a look at them. So we want the more human readable format. So I'm going to link directly to just the regular Bootstrap file here first, and I'm going to say OK. Dreamweaver is going to warn me that it's going to use a file path until I've saved my document, which we'll save in just a moment, so go ahead and say OK for that and OK again. So this has gone ahead and attached that bootstrap.css file to my document.

Right after that, we are going to attach the second stylesheet, hit the browse button here, and we want the bootstrap-responsive stylesheet. Make sure the bootstrap-responsive stylesheet comes after the bootstrap stylesheet, because in some cases, this bootstrap-responsive stylesheet will override within the bootstrap stylesheet, so the order does indeed matter. Go ahead and say okay, it'll give you the same message again about the file path, and so now you can see that I have two lines of code here, one calling for regular bootstrap.CSS, one calling for the bootstrap responsive, and to make that code a little easier, I'll go ahead and save this now.

So go to File > Save, and I'm going to save it right into the root of my website here. I'm just going to call this index.html, always a good named to call an HTML document, and you'll see that the paths here inside of Dreamweaver adjust accordingly and correctly to take a look at those two stylesheets. Before we leave the head of this document, there's one last thing I'd like to add, and this will come just after the CSS for the bootstrap-responsive. I'm going to put an extra space here inside of your exercise files. You'll see that I have a little snippet of code here, which is an HTML 5 shim.

This is a particular piece of JavaScript that's available at Googlecode.com, it's designed to help backwards compatibility in Internet Explorer browsers. This itself is not part of Bootstrap, but it will help make your websites more compatible with Internet Explorer, and you can definitely just drop this right into your Bootstrap document to improve backwards compatibility, particularly with IE. So go ahead and highlight that code, do a Ctrl+C or Command+C to copy, and here inside of Dreamweaver Ctrl+V or Command+V to paste that on in, and you'll see that we have that particular little bit of code added as well.

This is an optional bit of code, but I'm recommending that you add it. I think it'll save you some hair pulling later on as you do more with Bootstrap. All right, so now if you scroll on down your page a little bit you'll see that we have a starting body tag and slash body tag, put a few spaces in between those and just before the slash body tag, we're going to add some JavaScript declarations. So the first one that we're going to include is the script tag, and the source for that script tag will be http://code.jquery.com/jquery-latest.js and then a /script tag.

So this itself will load the latest version of jQuery, which is a JavaScript framework from the jQuery website. So in order for this line of code to work, make sure that you are on the Internet so that it is able to download this little bit of code. If you're not on the Internet, you may want to go to jquery.com and download the latest version of jQuery creating that as a file and linking that up here, but if you use this specific line of code, even if jQuery continually changes its version, the latest version whatever it is will always be located here, and that's a great way to keep your Bootstrap site up to date.

The next thing that we're going to add is a line of code for the specific Bootstrap JavaScript, and if you take a look over here in your local files, really quickly you'll see once again we have two versions of Bootstrap JavaScript. One is bootstrap.js, and the other is bootstrap.min.js. Once again, this is the minimized versions of the code. You can see the difference between 55K for the bootstrap.js and 25K for the minimized version of this.

So by using the min versions, you'll definitely save some download time for mobile phone users in particular, certainly, those on dial-up as well. So since we're not going to be taking a look at JavaScript in great detail in this course, I'm going to go ahead and link directly to the min version of the JavaScript file. So we're going to go ahead and add that over here in Dreamweaver. Once again, script src=, and I'm going to hit this little Browse icon right here, go to the JavaScript folder and pick the min version of the JavaScript, and that will go ahead and put that path in there for me, close the tag, just like that.

So this basic document that I've put together here for you is a great point for starting any Bootstrap web page. It's got everything that you need here, it's got the links to the stylesheets in the right order, it has HTML5 shim for backwards compatibility with Internet Explorer, it has a meta tag, that's important for responsive design, and down here, towards the bottom of the page, we've linked to both of the JavaScript pieces that are required to make Bootstrap work. So once you have this in place, we're ready to start building our first page with Bootstrap.

Show transcript

This video is part of

Image for Up and Running with Bootstrap 2
Up and Running with Bootstrap 2

32 video lessons · 19744 viewers

Jen Kramer
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Up and Running with Bootstrap 2.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.