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

Production video - Creating our fluid containers using Dreamweaver

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

Questions

1
1
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

Right. So let's go and create all the different bands. So let's go  and create a band for the who we are. So I'm gonna be on my main CSS,  I wanna make a selector called. Band  and this one's gonna be called Who We Are, who we ah into. I'm gonna go through and pick a background color for it. Now I've got some colors ready to go if you wanna copy me.

You can pick your own colors though if you want to. On the files that we've downloaded on the desktop,  I've got my DW exercise files, I'm gonna open 'em up  and I've got this one called Colors  and there's a bit of text in the colors folder. Okay? And there's my hero color. I'm gonna use the who we are color. So, um, remember  to grab the whole thing, including the hash.

I'm gonna copy it and I'm gonna jump into Dreamweaver. And in down here I'm gonna go to my background,  color, background color. Click on this and you'll notice I can  just type it in down here. Or what I'm gonna do is copy and paste it  or you can just slide around and pick your own colors. Great. There's my background color.

Now you notice it hasn't applied over here. Why not? Ah, you say you haven't applied that class. We've made the class. It exists,  but we haven't actually applied it to this container fluid. So let's go u call this one band  and this one's gonna be called who we are.

Lovely. Same thing in terms of the padding. Okay? Now in terms of how much padding, I'm gonna kind  of just guess from my Photoshop document. I want a bit of padding, that sort of size. Okay?

So, um, we can always,  it's good when you're throwing it in there just  to pick any size and you can go and finalize it later on. So I'm gonna go up to padding. Okay, there he is. And I'll put, I'm just gonna keep it consistent  and use 100 and 100. Great. All right, next one is, we're gonna go  and do this again for another container fluid.

So insert, now I've got this one here called Who we are. So if I insert another container fluid, I want it to be,  which one do I want it to be? Wrap Nest after. Before. I want it to be after. Okay, so down if I scroll down a little bit,  there he is there, there's my little container fluid.

So I'm gonna go CSS designer  and I'm gonna get a main CSS who we are. I'm gonna add, uh, one called band  and this one was called Services Great. And I'm gonna give it a background color. I've got my background colors here. Don't forget the hash. Okay.

And background color pop in him. And I'm gonna go up to padding. I'm gonna use 100. Enter, click in here, 100. You know, notice I'm not typing in pixels, it just,  if I had return, it assumes pixels, okay? And it's still not applied over here  because I haven't done this Okay.

Band. And we'll use the services. Great. Okay, so we've got our purple and  we're gonna do the next ones. Now, uh, that can get quite repetitive using  that. If you prefer  To do it in code view, that's totally fine.

The first thing we need to do is we need to go to our, um,  make sure you're on source code. Now you can keep doing it that way, just so you know,  but I'm gonna show you this extra way  that you could do if you prefer. Okay, so I'm gonna go to Code View. And you can see here it's pretty easy. I can, there's my opening  and close, so I've gotta make sure I grab all of that,  copy it, paste. And I might call this one band.

Uh, what is this one? Portfolio? Portfolio. So spelling is pre you gotta make sure you've spelled it  right here when you do your class. And we'll do the last one, which is gonna be the footer. So you can see, even though ah, co view can be scary,  it's actually sometimes a lot easier just  to do things in co view.

So, um, I've got my, uh, different ones here. If I go to Live View, you'll notice I've got a whole bunch  of bands down here, okay? Um, I've got my, uh, was it portfolio  and I've got my footer. Now notice though, they've got no styling. So what I'm gonna do is I'm gonna go from source code,  which is all H TM L over to my CSS. So I go to CSS.

There's my bad hero who we are services. So the exact same principle applies. You just gotta make sure that these names  match up perfectly. So I've copied and pasted services  and this one was called Portfolio. Okay? And hopefully if you hit File Saveable,  you'll have this one here  that is actually this exact same color.

So it's two purple ones. So what I wanna do is change this color portfolio to  where is it this portfolio color. Great. So I've got portfolio there. So style, the last one, which is the footer, copy him. And here's called Footer.

And I'm gonna go find my footer color, copy and paste,  and you can turn it into a bit more of a production line  by using code view. So I'm gonna go back to Live View  and you can see I've got my hair box, I've got my  who we are, my portfolio, my services, and my footer. Great. And whether you prefer to do it in co view  or whether you prefer  to do it in design view, it's totally up to you. When I'm finished, file save all just  to make sure everything is saved  and we can move on to the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025