Join Paul Trani for an in-depth discussion in this video Positioning elements, part of Creating a First Web Site with Dreamweaver CS6.
- View Offline
Currently you can see how my web page is set up. I do have some basic formatting, all of my text is in here, and I have a nice background, but still it's a far cry from my actual design that I created in Photoshop. So let's go ahead and take a look at that. Here I am in Photoshop, and you can see that I need to insert a logo, and I need to start creating some items in here, so I need to basically create a box to position in my navigation.
I need this header text to be right there, and I need to create a content box right here, where all my content will exist. So I need to start creating those various divisions for my web page. So I'm going to do that by going back into Dreamweaver and right in here in Dreamweaver I'm going to place my cursor at the top, and I'm going to insert an image. The image I'm going to insert happens to be in my Chapter 02, my 04 Begin folder, keep in mind this is where my index.html file exists.
So relative to that if I go in that images folder, that's where I have my PNG file. So I want to make sure the link to my graphic, that URL is relative, okay so that's what that should like. Selecting Open, I want to add some Alternate text, Eva Jones Design, search engines will pick up on this so that's why I want to add that Alternate text, there it is. Now I'm going to start positioning some of these items, and again, I want to start dividing up this content, so I'm going to use some divs.
Luckily, if I go to my Insert panel, and I change to Layout--and I have these different layout options--and really what I want to do is start to absolute position some divisions, some divs, so this gives me the ability to Draw an AP div. So selecting that I can just click and drag to make a box for my logo, with that drawn, I can select my logo, Cut it, place my cursor inside of that AP div, and then Paste it just like that.
Now if I select that yellow border, you can see that down here in my Properties panel I can start to adjust this accordingly. In fact, I want it to be about 100 pixels from the left side, and the top looks perfect, because I want it to be right up at the top edge just like that. It looks pretty good--the Z-index I'll get into later--but that's the depth that it's at, and usually any time I start creating these divs, I just start getting the habit of just saving my files so that's what I'm doing, I'll save my file.
My next objective here is going to be to create navigation bar, so I'm just going to place my cursor up here and just hit Return a couple times to give me a little bit of space, but I want to draw an AP div for the navigation. So selecting that, drawing my bar just like that, you can see I've drawn this AP div just like that. In fact, right down here, remember it was black, in my Photoshop design I can change the background to black just like that. So I've created that, again, I'm just going to get in a habit of saving, I've saved this specific CSS element, but now what I want to do is inside of here if I click in here I can start typing in some text.
So I need to have home, about, portfolio, and contact as those various links, so I'm just typing in some text. Now I want this text to be flush right. So, what I can do is I can go to my Properties panel, CSS tabs selected, and just make sure your page is saved, so I'm going to save this page and right over here, and I can go ahead and align right, selecting that, it will align its to the right-hand side.
So far so good, I'm going to insert a couple more, Draw AP div for this header right here. Just beneath the logo I can draw that just like that, taking that line, Selecting it, Cutting it, placing my cursor in there, Pasting it in there just like that. You'll notice this did change, because it didn't actually take the Heading 1 style, and this will happen, if that does just select it and just like you did before for a HTML tab, you need to make sure you change that to Heading 1, and there's your particular style. All right, that looks good.
I can even shorten this up a little bit if I want to. Next up is all of this text right here, as I scroll down. Well, same thing, drawing an AP div, how about halfway right here, I'll draw that AP div just like that. I'll change the background color to black, and now I can take this text, Selecting it All, and then Cutting it and then placing my cursor in here and Pasting it.
You can see all of that text, I'll scroll up. But look at my box, look, that black only goes so far down. Well, if I select that AP div, you can see right in here, oh, look the Height 236 pixels, well, that's not going to work, I can select that, delete it, hit Enter or Return, and you can see it fills it up all the way down. All right, so far so good. I think that's working out pretty well, in fact, I'm going to select Live view just to experience this a little bit more closely to what the end user will see, and you can tell, look what I have going on? This logo is actually behind this bar when really I need to change the depth of these items so that's what I'm going to do next, I'm going to turn off Live view.
I'm going to select this AP div. the first one that I drew, the Z-index is at 1, so it's like closest to the background. Well, I just need to make it higher than this nav, which happens to be at 2, so if select this one, I can select it, and you know what? Let's type in 200, okay? Because you can go much higher than say single digits, and now that always going to be on top, even when I start to draw more in there just like I plan on doing. So, selecting Live view you can see all of my content is positioned appropriately, and now I can move on to the next step, and the next up will be actually customizing the look of this even more.
- Understanding basic web principles
- Adding content to a web page
- Linking to web sites and email addresses
- Styling content with CSS
- Creating a layout that fits multiple browsers and devices
- Building an HTML5 layout
- Inserting images and video
- Adding a menu bar
- Creating a contact form
- Integrating a Twitter feed
- Uploading and testing a web site