Production video - Nesting Bootstrap fluid containers

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

Questions

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

Hey, my name is Dan. Uh, in this video is one of the production videos. So I'm gonna go through and pretty much step  and repeat what we did for the nesting  and the centering on all these different columns. Go back to straight to live view. Okay? And I'm gonna click inside this column  and I am going to insert a row with a column.

Gonna nest it and it's just gonna be one like we did before. Great. So I've got click inside there. I've got my column, which is inside the row, which is  inside the column, which is inside the row. Okay. Now what I wanna do is I would like,  actually I wanted two columns in this case, didn't I?

Okay. I've just put one in. So if you've done that, it can either go  to undo and redo it. Okay? And put two columns in which I,  which is exactly what I wanted. But in this case, what I'm gonna do is I'm gonna drag this  one down, okay?

Um, to six and add a new column. Now there's no difference between doing it, uh,  the columns at the first time or doing  it afterwards like this. I've still got one row with two columns in it. If you're unsure about it. Sometimes looking at split view  and source code is an easier way to look at things. You can see I've got a row beginning and closing.

And inside of that I've got two  columns and they're both large. Keep an eye on that. Remember, if they start becoming small,  you're gonna have to go manually go and change them. 'cause we're dealing with the desktop view at the moment. Let's click live. All right?

Um, and what these needed to be is this top one here needed  to be 12, okay? And it pushes this column underneath. So this guy can be out at 12 as well. Just so that means that when it does get down  to mobile view, I remember I can scoot it up  and get these guys going side by side exactly how I want it  to be when I get to my uh, mobile view. But again, let's get it back to 12. So 12 and 12.

Inside of this one, I'm gonna insert my image, nest it. I'm going to grab my desktop. Dream of exercise files, uh, image. I'm gonna bring in my icon two  and you'll notice that I bring it in from my exercise files,  but it ends up copying  and pasting it inside my actual site files. And that's a nice thing that  Dreamweaver does for you as you go. So let's compare the two.

These are my exercise files on my desktop  that you've downloaded and they've got everything we need. Okay? Over here on my bootstrap website, okay? With all my site files you see in images,  it only brought in the ones that I've actually used so far. So there's the books and there's the two  icons that I just imported. Okay?

And it will slowly but surely shuffle them all across. You can save time by just selecting all of these  and pasting them all in this side here. There's no real difference, okay? Um, either dream weve doing it manually  one by one and bringing it across. Um, but just know that we've got duplicates of this now. So if I go into Photoshop  and start editing these icons in my exercise files, I need  to copy them back across into my actual site, okay?

'cause they're duplicates over here. Alright, back to Dreamweaver. And while I'm here, I am going to add the class  for this one called uh, center Block. Great. Click down here. I'm gonna insert paragraph, gonna nest it inside here.

We're gonna call this one app development. It's called app Dev. Great. And I'm gonna click out of it, have the P selected  and go in here and put and text. You can see the different ones in here. So you get a sense  after a while when you start seeing some  of these suggestions, you might get an idea of what some  of these other things might be doing.

Okay? So I know the center,  there's other ones called hide info Justify. So you might experiment with some of these as you find them. I know I need center, which is great. So let's do it all again. And what I could do now is I could go through  and save some time by going to Split View.

You can see here's this column. You can see it changing up here in my live view. That's that column. That's that column, okay? And there's nothing inside of it. This is the gap, okay?

Where stuff goes inside of it and there's nothing in it. So it's pretty empty over here though. This column. So here's that, here's that row. Okay, so there's the row over here  and there's inside of,  it's got another row and another column. So I can grab all of that.

Okay? So that's the nested row  and the column with the image inside of it. And I'm ready to go. If I copy that and I go into here  and I hit paste, so I'm inside this one, okay? There's another nested row  and column I gonna do the same for this guy. Paste him inside.

Okay. And I've just got nice little replicas of each other. I'm gonna have to go and do a couple of things. Okay? So I need to make sure I go through  and change the text in the image. That's easy enough to do.

I select on the image itself. I can click on here  and this little where it says source SRC, click that  or down the bottom here in your properties panel. It's up to you. It ends up at the same place. Click browse desktop, dream of exercise files, images. Let's bring in icon three.

Great. Make sure you add alt text. Now you can either old add it down here  or you can add it up here. Okay, I'm gonna add it up here. And this one is gonna be called, what is this one? This one's gonna be called photography.

Photography services. Great. Make sure I add the Make responsive. You'll probably think in to yourself. You didn't do it for this one, Dan. I know, I forgot.

Okay, make responsive down here. This one's gonna be called photography. That's why I like Dream. It's kinda the best of both worlds. You get to do kind of visual stuff up here that help, uh,  people like me who like to see things as they're working  and allows me to kind of jump in  and get amongst the code when I need to,  to when it makes sense. This one here, Click.

This one's gonna be icon  Four. Great. Gonna add some T text. And this one is  video production. Great. Gotta make sure it's responsive.

Great. Down here, I'm gonna adjust this one video. All right. Um, and  what you might notice is you're playing along  with my exercise files and I've done a little sneaky trick  because I wanted them all to have the same 'cause. I want this text all to line up together. Okay?

What I've done is in Photoshop, I've made sure  that these guys are exactly the same height and width. Can you see this image doesn't need to be this wide. Okay? Um, I've made it extra wide using the canvas in Photoshop  just to make sure that they're all equal so  that when they start stacking they stack all evenly. If they weren't, this guy would be a little thinner. This guy be, wouldn't be as tall as this one here.

And this guy would be a lot shorter as well. So that just would stack and this text would rise up  because there's a bit more space left  and would all push up and nothing would line up. I'll show you what I did. I thought I'd include the dodgy versions just  to show you the before and after. So in your exercise files,  there's this little sneaky folder here called  odd sized icons. Okay?

So if I use these exact icons,  they've got the exact same name, so I'm gonna do a little  thing, I'm just gonna replace them over here  and it's gonna freak out and say,  oh, you're gonna replace them. I'm gonna say yes, yes, yes, yes. Oh yes. Okay. So I've updated  them, actually I've moved them by accident. But anyway, let's go back into Dreamweaver  and it's not gonna update automatically.

Okay? It does eventually, but to, to speed it up,  there's this little refresh button here. Can you see? Because they're all odd sizes,  they're all trying to fill the width. So this thing to fill the width had to get really big. This one to fill the width, um,  had was a little bit shorter.

This one's even a little shorter again. And can you see now the text lines up. So what I did was, and it's really common when you want  to kind of do this kind of like stacking of similar shapes,  is just to make the physical size in Photoshop match. If you don't have Photoshop  or know it at all, there are lots  of other image editing, um, programs. You're just gonna have to go work out and try  and work out how to get the, um, documents  to be the exact same size. If you want to though, I've got a video course on how  to use Photoshop for web design.

Kind of precursor  to this one if you wanna go off and do that. So I'm gonna go back and over here, undo what I did, okay? And I'll dump all of these guys back in. Great. And hopefully now I've hit refresh. They're all the same size, so I'm gonna have less problems.

Alright, that's the end of this production video. See you in the next one.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025