Here's where things get interesting: now that we've got the theory, it's time to put it into practice. Chapter 5 covered the basics of creating style sheets and divs and attaching style sheets, so if you need a refresher, take a look at those sections again. Before you start laying out your page, you need to think about what you want on that page and where you want it to go. As discussed back in Chapter 2, the best way to do that is with pencil and paper. That should tell you what styles you'll need: for instance, a header, footer, content area, navigation area, and lastly, a container to hold all of them. Once you've sketched it all out, create a new style sheet (as covered in Chapter 5) and add those styles in as previously described. Now you're ready to start. We'll work from a blank Web page and a complete style sheet. To lay out your page: 1. | Add a div to your page by clicking the Insert Div Tag button in the Common category on the Insert Bar . The Insert Div Tag dialog appears ( Figure 6.10 ). From the ID pop-up menu, select the appropriate stylehere, it's container . | 2. | Click OK to accept. The Web page now shows the new div container ( Figure 6.11 ). Because the container i d was previously set up in the style sheet, it already has the properties we know we'll need: in this case, the margin is set to 10px and the border is set to be a solid 1 pixel in a nice shade of light blue ( Figure 6.12 ). Because we're using ids (as opposed to classes), we know that the name is unique on the page. And because of that, the term " container " can now mean both the div named container and the style named container . | 3. | The next div to add (as described above) is the page header, which here has the id top ( Figure 6.13 ). It goes inside the container div (actually, everything on the page will). The header's background graphic automatically shows up because top 's properties ( Figure 6.14 ) include background-image . | 4. | Drag the logo over from the Assets panel to give the page header the desired height ( Figure 6.15 ). HTML defaults to putting it on the far left of the div, so it doesn't need any positioning changes to be in the right place for this example. | 5. | Add the two main parts of the page: navcontainer and content ( Figure 6.16 ). The navcontainer style ( Figure 6.17 ) will contain the future navigation area, and so, is floated to the left and assigned a fixed width of 160 pixels. The content style ( Figure 6.18 ) has a left margin of 200 pixels, which moves it away from navcontainer . | 6. | Each of those two main parts has a child element: in this case, navlist and photofeature , so it's time to add them ( Figure 6.19 ). The navlist style ( Figure 6.20 ) will contain the future navigation, which will consist of styled list elements. The photofeature style ( Figure 6.21 ) includes both the photograph and the caption, so it's not just floated to the right; it also has a text color and font style. | 7. | Add an image and caption to the photofeature div ( Figure 6.22 ), and you'll notice something interesting: that div now extends outside the area of its parent div. Don't fret; that's okay. | 8. | Add footer to the page ( Figure 6.23 ), and its style properties ( Figure 6.24 ) move it to the bottom after everything else. Now, all that's left is to add your text and navigation links, and your page is done. | Tips -
Dreamweaver automatically adds the text 'Content for id "idName" Goes Here' whenever you create a new div. You'll want to delete that, but don't do it immediately. It can be hard to click inside an empty div, so leave that text there until you've added something inside. -
As you add divs to the page and assign ids to them, you'll notice that the list of divs shown in the Insert Div Tag ID popup menu gets shorter and shorter. That's because Dreamweaver knows that each id must be unique on the page, and once you've assigned it to a div, it's no longer available for use. If you make a mistake and apply the wrong id somewhere, you'll need to remove it from the first usage before you can assign it to its correct element. -
If you hover over an element on the page (as in Figure 6.25 ), a pop-up tip appears giving you information about that element. In this case, you can see that it's a div, that its name is photofeature , and that it's floated to the right. |