Using Design Files


Initially, you might think that it's difficult to get started using CSS for positioning, but thankfully, Dreamweaver has included something to make getting started easy as can be: using Dreamweaver design files . These files are flexible, professionally developed templates that are available to use as a starting point.

To use a Dreamweaver design file:

1.
From Dreamweaver's menu, choose File > New. The New Document dialog appears ( Figure 6.4 ).

Figure 6.4. The familiar New Document dialog contains handy CSS page designs to get you started.


2.
If it wasn't chosen by default, select the category "Page Designs (CSS)," and six designs will be listed in the center column: Halo Left Nav, Halo Right Nav, Three-Column Left Nav, Three-Column Right Nav, Two-Column Left Nav, and Two-Column Right Nav. Choose any of these to see a preview in the right column ( Figure 6.5 ). Directly below the preview is a short description of the design.

Figure 6.5. You can look at the Preview column to decide which of the designs you want to use as the basis for your page.


3.
If you see a design you like, click Create. A new untitled Dreamweaver document opens in the chosen design, and the Save As dialog appears ( Figure 6.6 ).

Figure 6.6. Save the file to begin.


4.
Choose a name for your new file and click Save. The Copy Dependent Files dialog appears ( Figure 6.7 ). If the design file you chose has dependent files that go with it, here's your chance to get them all in one fell swoop. Click Copy to accept them.

Figure 6.7. Then copy over the dependent files in order to have the complete look.


5.
You now have a template for your site that's entirely CSS-based ( Figure 6.8 ). You can now modify both the page and the accompanying CSS files.

Figure 6.8. Here's your new page, ready to take your content.


Tips

  • Even if none of the included design files suits your taste, take a look at them and check out how they work. They're a good way to learn how to use CSS to position elements on a page.

  • Want someone else to do the layout work for you, and the included design files aren't what you're looking for? Check out http://www.positioniseverythingfinet/, a great site with plenty of different layouts ( Figure 6.9 ). Choose view source for a page you like, select all, and copy. Then go back to Dreamweaver, create a new blank HTML page, switch into Code view, and paste. You'll have everything you need. As the site itself says, "The source code for each demo has all the relevant CSS embedded in the head section. Please feel free to take, use, and if need be, abuse all code found on this site."

    Figure 6.9. The colors might be loud, but the three-column layout works well.





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