Designing with CSS – Part 5: Defining Columns and Vertical List Navigation
Note: This article has been updated for Dreamweaver 8. If you are still using Dreamweaver MX 2004, please read the version of this article series for Dreamweaver MX 2004. The CSS features in Dreamweaver have been vastly improved in Dreamweaver 8. You can learn about those changes in Julie Hallstrom’s article, An Overview of CSS in Dreamweaver 8.
Welcome to Part 5 of this article series on CSS design concepts. If you missed the earlier tutorials in this series you can access them from the links below:
This series reviews how you can use Dreamweaver 8 to move toward using CSS as a positioning technique when developing web pages. Parts 1 and 2 showed you how to use some of the techniques common to most designs that use the CSS positioning technique. Part 3 described creating your first CSS design and Part 4 introduced you to using the float technique to create a two-column layout.
In Part 5, you will use the design you created in Part 4. However, you will make some navigation changes. You will remove the horizontal list and replace it with a vertical navigation so that the new navigation system resides in the left column you added to the design in Part 4.
Make backups of your current layout if you intend to use it in any future work. By the end of Part 5 you will have two very different layout structures that you can customize to suit your own needs.
We have covered the various options that Dreamweaver affords when laying out a design with CSS. You saw how to use panels to create ID, class, and tag selectors, and you also saw how to use code hints to write the same selectors directly into your style sheet without using Dreamweaver panels at all. These are two very different techniques. The latter should be your goal. Using Dreamweaver panels is fine but there is no substitute for becoming familiar with the syntax of CSS.
If you wish, download the files from the link below or simply open your existing files in Dreamweaver and pick up from where you left off, at the end of Part 4.
You may find it advantageous to read an earlier tutorial I wrote for the Developer Center on relative, absolute, and static positioning, called Introduction to CSS Positioning in Dreamweaver MX 2004. It should give you a decent grounding in what you can achieve with each positioning value.
On with the show!
To complete this tutorial you will need to install the following software and files: