"Dreamweaver Tutorial: Building Page Layouts in Dreamweaver, Pt 3" by Geoff Blake, http://www.TenTonOnline.com
Watch Part 1: http://www.youtube.com/watch?v=Af91HIRG5ms
Greetings. This is Geoff Blake from TenTonOnline.com and this is the third part, the third installation of our three-part series on Building Page Layouts inside Dreamweaver. If you're just joining me, I'm going to stick a link into the video because you'll most likely want to start back in part one to really get the most out of this tutorial series. And the other thing I should mention as well is that you really should go and pick up the free PDF guide that I've put together for this tutorial series to really help you get the most out of all of this. It's a free guide, as I say. There's the URL: TenTonOnline.com/go/dwcs6 All right? So go ahead and grab the guide, make sure you have it and without further ado, here it is. This is the third installation of our three-part tutorial series.
All right, so there are a few outstanding issues related to this web layout, this CSS driven layout that you and I have built here inside Dreamweaver over the last few tutorials. Let me show you something here. I'm going to head up towards the top of the Dreamweaver interface. We have this little globe drop-down menu preview/debug in browser. What we can do is, we can go and preview our work inside a browser. Okay? So by the way, as a quick aside, the design view inside Dreamweaver, I don't really trust it. Even the live view, I don't trust at all. I want to see my layout in an actual browser to see what it really looks like. Okay? So this is how things are looking right now for me. Okay? So it's okay. It looks decent but it isn't exactly what I'm after. What I would prefer is, rather than the layout being shifted as you can see here over toward the left hand side of the browser window, I want it to be centered inside the browser window. Okay? And furthermore, I want the slideshow, this guy right here, I want him to be centered inside the layout as well. Okay? So there's a couple of neat things that we can do here to pull this off. I'm just going to flip back over to Dreamweaver. By the way, this flipping back and forth between your open applications, people ask me all the time "How do you do that?" All it is, is here on the Mac side, it's command+tab, and over on the Windows side, it's alt+tab. That's all there is to it, it's pretty cool. Anyway, more importantly, let's go and center this layout. Now what I'm going to do to center this layout is I'm going to do some hand coding. Okay? So again, I want to get used to code, I want to get used to hand coding things because often times, you know, it's the best way to go about pulling something off. Right? Like centering a layout. So before we get into the hand coding though, I want to give you a sense of what we're going to do. We're going to take our entire layout, everything that we've built here, all these DIV's, all these layout blocks that you and I have put together, and I want to enclose them inside 1 parent DIV, if you will. One outermost DIV, which I always call the Master DIV. and then we'll take this master DIV and we'll center align them. Okay? So here's what I'm going to do. I'm going to flip over into my code view. Okay? And once again, if you're not too comfy with code, I'm going to make this nice and easy, nice and simple for us. Okay? So here we have all of the DIV's, all of the code that appears inside the body area of my document. Right? What I'm going to do is, I'm going to look for my opening body tag. This guy right here. Okay? And I'm just going to hit 'enter' just to give myself an extra line of space. And this is where I'm going to open up my master DIV, so I'm going to do something like this. Open angle bracket, div. all right? And then I'm going to throw in a space and I'm going to say id=, and then in quotes, I'm going to type in master div id="master". So this is very similar to one of our earlier tutorials where we hand coded our footer. I'm sure you recall that. Okay? So it's the same sort of idea. Okay? But what I'm going to do here is, well what I've done is I've gone and inserted a DIV and I want him to be controlled by an ID CSS role called 'Master', which you and I haven't created yet. But what I'm going to do here is, I'm going to wrap all of the code that you and I have inserted previously into this master DIV. so there's the opening master tag, and then I'm going to move my cursor all the way down and I'm going to look for the closing body tag and I'll click just before him.
Learn more about Dreamewaver: http://www.tentononline.com/dreamweaver