A cornerstone of modern Web standards and practices is the separation of content from presentation. Expression Web 2 helps you with this separation by leaning strongly toward cascading style sheets for presentational tasks such as formatting text and creating visual elements for your layout.
In this exercise, you will modify some of the cascading style sheet elements in the Dynamic Web Template (DWT), which is a feature of Expression Web 2 that you can use to create and include global elements that attach to your content pages. This feature greatly aids in creation, modification, and management of Web sites.
Note
USE the CH3 sample site you modified in the previous exercise.
OPEN the CH3 site, if it isn’t already open, and display the master.dwt page.
Click Split at the bottom of the workspace to display the page in Split view. Select the navigation bar at the top of the page. If necessary, set your insertion point in the navigation bar, and then click the <div #navigation> entry on the quick tag selector.
The entire <div id="navigation"> element is selected.
In the CSS Properties task pane on the left, click the CSS Properties tab if it’s not already active in the pane. Under Applied Rules, click #navigation for style0.css, and then in the CSS Properties task pane, note the gray style (#DCDBE0) next to background-color.
Important
When working in the CSS Properties task pane, it’s important to click the Show Set Properties On Top, Sort Alphabetically, and Summary buttons. By doing this, you’ll stack all of the properties that have been specifically styled at the top of the list and you won’t have to search through the entire list to find the style you’re looking for.
Click background-color, and then click the arrow that appears, to show the Color Selector. Click More Colors. Then in the More Colors dialog box, click Select.
Pause the eye dropper over the image to the left of the navigation bar in the page’s design surface, and pick up the color of the image area that is adjacent to the navigation bar.
Click OK to accept your selection.
The background color of the navigation bar changes.
There are more style rules in play for that navigation bar than the color of the DIV element that contains it.
When the navigation DIV element is selected, point to the other elements on the quick tag selector bar to see how they relate to the irregular area within that DIV element: <ul>, <li>, and <a>.
Notice that when the pointer is over the <a> element, the culprit is visible.
On the quick tag selector bar, click <a> to display its properties in the CSS Properties task pane.
Delete the text to the right of the top entry for the border style to remove the borders and border colors for the #navigation a style.
The navigation bar is now starting to look more uniform.
On the toolbar, click the Save button. Allow Expression Web 2 to update all of the pages that the Dynamic Web Template is attached to, and allow the style sheet to be saved.
Display the default.htm page, and view the presentation of this Dynamic Web Template’s elements. Then preview the page in your browser. Notice that the navigation bar looks uniform. Now point to the links in the navigation bar. They don’t look very uniform.
In Expression Web 2, open the master.dwt file. To remedy the consistency issues in the navigation bar, and for a better workflow, double-click the #navigation a entry in the Manage Styles task pane.
Your style sheet opens, with the selected style ID in focus.
On the style sheet, look for the entry #navigation a:hover. This entry controls the link’s appearance when you point to it. Remove the following line of code:
border: 1px solid #DCDBE0;
Save your style sheet, and then switch to default.htm to preview the file in your browser.
Notice that the navigation bar is starting to take shape and is looking more uniform. The borders are gone from the <a> element both when you point to it and when you don’t.
In Expression Web 2, switch to master.dwt. On the quick tag selector bar, in the navigation <div> element, click <a>. In the CSS Properties task pane, scroll down to Color.
Notice that the setting is a dark color.
Select the color entry to open the Color selector, and change the color attribute to a lighter color.
Save the Dynamic Web Template, and when prompted, save the style sheet. Switch to default.htm, and then click the Preview button to view the file in Internet Explorer. Point to the navigation links.
The navigation links now have a uniform appearance. They all have the lighter text color and lack the border.
Close your browser. In Expression Web 2, switch to master.dwt. In the Design pane, set the insertion point in the editable region on the right, and click the <div #column_right> tag on the quick tag selector.
In the CSS Properties task pane, scroll to background, and change the color value from #F7F7F9 to #D7DCDF, which is more appropriate for this page.
Click Save to save your changes to the Dynamic Web Template. Allow Expression Web 2 to update all of the pages that the Dynamic Web Template is attached to, and allow the style sheet to be saved.
Switch to default.htm, preview the page in a browser, and review your changes. Notice that there is now a silver background for the column on the right. Click the navigation links to review all of the pages.
During the preceding exercise, you made global changes to the presentation of every page in a site by simply editing a few lines on a style sheet. You edited the style sheet’s code both directly and by using the Expression Web 2 user interface. Though it might seem trivial on such a small site, think about how effective this method would be on sites with thousands of pages!
Imagine changing the link colors or other elements in every single page by simply editing one line in one single file. In addition, imagine how much less code is required for this type of arrangement than endless <font> tags to control presentation within the page code itself.
This is the just tip of the iceberg in regard to separation of content and presentation.