Laying Out Your Page


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 .

Figure 6.10. Start your new page off by adding your first div.


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 .

Figure 6.11. And here it is on your page, with the standard dummy text.


Figure 6.12. The CSS panel shows the style rules and properties.


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 .

Figure 6.13. When a div has a background, it shows up automatically.


Figure 6.14. Using the top style gives the div a 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.

Figure 6.15. Placing the logo on the header makes the div the correct height.


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 .

Figure 6.16. Two more parts of the page have been added: the navcontainer and content divs.


Figure 6.17. The navcontainer style floats the navigation to the left with a width of 160 pixels.


Figure 6.18. The content style contains the body of the page, pushed 200 pixels to the right.


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.

Figure 6.19. The two previously covered divs now contain navlist and photofeature , respectively.


Figure 6.20. The navlist style will contain the future navigation bar.


Figure 6.21. The photofeature style will contain not just the image but also the caption, floating them both to the right.


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.

Figure 6.22. The content and caption have been added here, and they're doing just what they've been told to do.


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.

Figure 6.23. The footer goes at the bottom of the page.


Figure 6.24. Here are the footer properties. The footer is not fixed in a particular place, so the page can be a variable length.


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.

    Figure 6.25. Hovering over a div gives you useful information about that element.





Macromedia Dreamweaver 8 for Windows & Macintosh Visual QuickStart Guide
Macromedia Dreamweaver 8 for Windows & Macintosh
ISBN: 0321350278
EAN: 2147483647
Year: 2005
Pages: 239

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net