"Dreamweaver Tutorial: Building Page Layouts in Dreamweaver, Pt 2" by Geoff Blake, www.TenTonOnline.com
Watch Part 1: www.youtube.com/watch
Hey, how are you? It's Geoff Blake from TenTonOnline.com
This is part two of our look at Building Page Layouts inside Dreamweaver CS6. If you're just joining me, you'll most likely want to start off in part one, so I'll make sure to put a link into the video to take you back to part one. And if you enjoyed part one, I hope you went and grabbed your free PDF guide that I put together for this tutorial series. You can go and pick it up at TenTonOnline.com/go/dwcs6
All right, now with your PDF guide in hand, let's jump into it. Here it is, this is part two of our look at Building Page Layouts in Dreamweaver.
All right, now where we left off from the previous tutorial is I mentioned that the CSS styles panel was kind of keeping an eye on us and keeping track of all of the CSS Rules that you and I had been setting up all the way along. Okay? So what I want to do now in this tutorial is, I want to try and space apart the layout. As you can see, everything's kind of jammed up here and the 3 content boxes that you and I went and set up, they're all stacked on top of one another, and of course inside our PDF guide, inside that rough sketch that I had done, we see that the 3 content boxes are supposed to be beside one another horizontally, so we have to adjust that. So this tutorial really is about spacing objects apart and getting things set up, and I hope to introduce you to some new concepts inside CSS and also inside Dreamweaver, and of course building your overall web layouts. Okay? So specifically, what I want to do is, I want to attack the slideshow. Okay? Because what I want to do is, I want to increase the amount of space above the slideshow and also below the slideshow. So I can see that the slideshow is touching or rubbing up against the bottom edge of the main navigation DIV, this guy here, and he's also touching the first content box, this guy here. That's no good. I want to push things apart a little bit. Okay? Now once again, I'm assuming that you've never really done this sort of work before. In CSS, we have a bunch of different ways that we can space apart or control spacing, and the property or the method that I want to make use of here is called 'margin'. And what you need to know about margin is that margin is the space on the outside of the object. Okay? So if you grab a scrap piece of paper and you draw a rectangle, margin would be the space on the outside, all the way around all 4 sides of that rectangle. Okay? So what I'm going to do here is, I'm going to make use of my CSS styles panel here as well. I'm going to go and find 'slideshow' inside my list of CSS Rules, and what I'm going to do is, I'm going to double click on him. And when I double click on 'slideshow', that gets me back to this dialogue box. Remember this guy from the first tutorial? The CSS Rule definition dialogue box for our slideshow. And of course, if I go back to the 'Box' category, sure enough, there's my dimensions, back to the 'Background' category, there's the temporary background color. So we're editing the 'slideshow' CSS Rule or the 'slideshow' ID selector. Okay? Now what I want to do is, I want to head back into his 'Box' category because inside the 'Box' category, down in the bottom right area, we have 'Margin'. And we already know that margin is the space on the outside edge of the object. So what I'm going to do is, I'm going to un-check 'Same for all' underneath the 'Margin' area and I'm going to set a value for 'Top' and for 'Bottom'. Now here's another thing that often times comes up. People will say "Well how much space should I set? What number should I use?" and I say "I don't know. How much space do you want?" They say "Well I want a lot of space" so I say "All right, type in 50. Type in 100" You know? That'll give you tons of space. Right? Here, I don't want a massive amount of space; I want just a little bit of space. So I'm going to try 10, maybe I'll come back, maybe I'll wind up using 20 or something like this. Okay, so this is going to be 'Top' and 'Bottom'. All right? But I guess the point that I'm trying to make is people don't really know what value to use. I say type in a value and see what you get, and if it's too much, come back and reduce the value. If it's not enough, come back and increase the value. We really don't know until we see it. Right? That's kind of like saying "How big should I make the font size?" I don't know. How big do you want the text? Right? All right, so there we go. So there's our margin top and margin bottom.
Learn more about Dreamewaver: www.tentononline.com/dreamweaver