Designing CSS Page Layouts with Dreamweaver CS5
- Displaying Link States and Other Style Rendering
- Finding CSS Layouts with Background Colors
- Revealing Coding with Inspect
- Disabling CSS Properties
- Previewing in Adobe BrowserLab
- New CSS Starter Pages
- Final Notes
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Dreamweaver CS5 introduces several substantial enhancements to page layout and design tools. These changes make it easier to identify and edit Cascading Style Sheets (CSS) code that controls the look and behavior of everything from page layout to text fonts. In this article, I'll show you how to use those new features.
In addition, Dreamweaver CS5 comes with a set of much cleaner, more carefully documented starter pages for CSS development. I'll walk you through using those as well.
Displaying Link States and Other Style Rendering
Compared to Dreamweaver CS4, Dreamweaver CS5 gives you the ability to do a lot more previewing in the Design window, without resorting to previewing a page in a browser. In CS4, for instance, links could only be viewed in one state: unvisited. But links in CS5 display in essentially four possible states: unvisited, visited, active, and hovered-over (or the similar "focus" state). In Dreamweaver CS4, you had to preview a link in a browser window, click the link to follow it, and then return to the original page to see what the link looked like when it was displaying in the visited state. That's too many steps!
In Dreamweaver CS5, you can quickly and easily preview how links will look in any state, right in the Design window. Figure 1 shows how links appear in the normal, unvisited state.
){kind=small}
Figure 1 Viewing links in the Dreamweaver CS5 Design view.
To see how these links will look in the visited, active, or hovered-over state (or the similar "focus" state), simply choose the desired state from the icons in the Style Rendering toolbar. (If the toolbar isn't visible, choose View > Toolbars > Style Rendering.) Alternatively, you can choose View > Style Rendering and then select a link state from the submenu. Figure 2 shows the same web page as in Figure 1, this time with links in the visited state.
)
Figure 2 Viewing links in the visited state.
The new Style Rendering toolbar also includes other handy—if less frequently used—rendering options. You can see what your page will look like when visitors enlarge or decrease the size of type in their browsers, or you can preview how your open page will look in different handheld devices, when printed, or in other display environments.