ONLINEPDFPROOFING.COM

color key proof - www.onlinepdfproofing.com

Menu


Using Built-In CSS Page Designs One of the hottest web development topics going is the process of laying out web page structures using CSS


instead of traditional HTML-based methods such as tables or frames. As the web evolves, so too does the process of creating web pages. With that said, tables are viewed as an archaic method of page structuring; as a web developer you should start becoming aware of that fact. As a way of evolving, Dreamweaver is beginning to support CSS as a method for structuring web pages. Although CSS functionality is not yet fully integrated, workarounds do exist. As a starting point, you can simply use layers, explained with more detail in Chapter 11. An alternative is to use the built-in set of CSS structured page designs available from the New Document dialog. To use a built-in page design that's based on standards-compliant CSS, follow these steps: 1. Select the New option from the File menu. The New Document dialog appears. Select the Halo Left Nav option from the Page Designs (CSS) category and click Create. 2. Dreamweaver attempts to save the new HTML file. Name it index_css.htm and click Save. 3. Dreamweaver attempts to save all the dependant images. Click the folder icon to open the Select Destination Folder for Dependant Images dialog. 4. Click the Create New Folder icon and name the folder Images_css. 5. Dreamweaver opens the new folder. Click Select again. The Select Destination Folder for Dependant Images dialog closes and returns you to the Copy Dependant Files dialog. Click Copy. 6. The dialogs close and the new standards-compliant CSS page appears in the Document window (see Figure 7.36). Figure 7.36. The new CSS-based page appears in the Document window. [View full size image] Preview the page in the browser so that you can see the effect. Although you won't notice much of a difference, it's safe to say that the design meets standards expectations as defined by the World Wide Web Consortium. We'll re-design the Dorknozzle site using CSS in Chapter 11.           Summary If used correctly, CSS can greatly extend your ability to create attractive web designs. And because current browsers have excellent support for CSS standards, CSS should be used whenever possible in effort to create standards-compliant web pages. As you saw, Dreamweaver lets you define and edit styles through a menu interface, making it easy to apply styles to text, create boxes, or even lay out an entire web page. You also learned that you can create custom style classes, redefine the appearance of an HTML tag, or employ CSS selectors for more precise definition. From this point forward, we won't be using traditional methods of HTML formatting, but rather we will opt to use standards-compliant CSS to format the look of our page whenever possible.