| Consistency is a vital element in web design. Change is another. The issue is how to balance consistency of the look of the page against the fact that things will change. No matter how you look at it, a huge amount of extra work is involved. Cascading Style Sheets (CSS) is the answer. CSS can be used to control a number of elements on a page, and when set up, changes can be applied throughout the site with a minimum of extra work. Anything that makes your life easier is something that should be considered , but there is an even more important reason to use CSSthe issue of platform and browser compatibility. Specify a text size on a PC or Mac, and you are handing its appearance on the screen over to the browser. This means factors such as the user 's screen resolution and whether the browser's owner has decided to enlarge fonts come into play. The end result is your design will be compromised. Use CSS, and you can control the fonts by specifying their size in pixels, which ensures the page looks the same across the platforms and browsers. That is just one aspect of the power of CSS. The standard allows you to control everything from fonts to multi-column layouts. The purpose of this section is to introduce you to CSS in Dreamweaver MX 2004 and to create and apply a style sheet to a dynamic page. We are not going to turn you into a CSS expert. The subject is huge, and one of the best books on the market for learning CSS is Eric Meyer on CSS , published by New Riders. Cascading Style Sheets and Dreamweaver MX 2004 This release of Dreamweaver MX 2004 has seriously "beefed up" the application's CSS management capabilities. Among the changes are: -
CSS Layout Visualization: Layouts are much easier to create when done entirely in CSS. Div tags and other block elements are now available in design view, and they can now be modified through the Property Inspector. -
A New CSS Panel: The CSS panel has been expanded to provide even more editing options. In addition, the Apply button has been removed, and text styles can now be applied directly from the text Property Inspector. -
CSS-based Text Property Inspector: By adding this feature to the Text Property Inspector, you don't have to constantly switch between modes to select a CSS Style. A pop-down menu now presents you with all the current styles, and a built-in preview lets you see what a change looks like before the style is applied. -
CSS Code Hints: If you hand-code CSS, the appropriate options will appear in the Code View. You can also have them appear in Code View by pressing Control-Spacebar (PC) or Command-Spacebar (Mac). We are now going to build a CSS-driven page that manages the Oakbridge Community Center's images on the site being used by the production team. This will demonstrate many CSS basics. Building CSS in Dreamweaver MX 2004 To build a relatively simple CSS style sheet in Dreamweaver MX 2004, follow these steps: -
If you haven't done so already, download the Chapter 7 Exercise folder from the book's web site. Open the folder named CSSEX and open the page named Index in Dreamweaver MX 2004. -
Open the CSS Styles panel. If your CSS Styles panel isn't open, select Window, CSS Styles or press the Shift-F11 keys to open the CSS Styles panel. When the panel opens, select New CSS Style from the Panel Options pop-down or click the New CSS Style button at the bottom of the Panel. This will open the New CSS Style dialog box. -
The new style sheet we are creating will change the background color of the cells in a table. Name the style .backcol . The period is importantit establishes a custom class. Don't omit it. Select Make Custom Style (class) in the Type area and select New Style Sheet File in the Define in: area. When finished, your New CSS Style dialog box should resemble Figure 7.12. Click OK. You will now be prompted to save the style sheet. Name the file (we used "ImageChooser") and save the sheet to the CSSEx folder. Figure 7.12. CSS styles are named in the New CSS Styles dialog box.  -
Clicking OK launches the CSS Style Definitions dialog box. Click the categories button and change the Background color to #CCCC99. Click OK. Your new style appears in the Style area of the Property Inspector, as shown in Figure 7.13. If you open the Style pop-down, you will see the style and the color. The sheet you created is now listed in the CSS panel, and the style is listed as a pop-down from the CSS sheet name in the CSS Styles panels. Figure 7.13. CSS styles, when created, are available through the Styles pop-down of the Property Inspector and in the CSS Styles panel.  -
There will be two colored backgrounds used in the table. Open the New CSS Style dialog box. Name the style backcol2 , set the Type to Make Custom, and select the ImageChooser file from the Define In pop-down list. This adds the style to the ImageChooser document. When the CSS Definition dialog box appears, select #CCCCFF as the background color. Click OK. -
To apply these two styles to the tables, select the table at the top of the page with the links and select the backcol style from the pop-down list in the Styles area of the Property Inspector. With the Shift key pressed, click each of the three cells at the bottom of the page and apply the backcol style. Press the Control (PC) or Command (Mac) key and roll over the table cell containing the Lorem text. The cell will be visible when it is surrounded by a thin red line. Click the mouse to select the cell and apply the backcol2 style to the selected cell . Your page should resemble that shown in Figure 7.14. Figure 7.14. CSS styles are applied by selecting the areas to which the Style is to be applied and then selecting the Style from the Styles pop-down in the Property Inspector.  -
Formatting the text in the cell beside the image is the next task. Open the New CSS Style dialog box, create a new custom style named .mainHead , and attach it to the ImageChooser style sheet. Click OK, and the CSS Style Definitions dialog box will open. -
Select the Type category and use these settings: Click OK. -
Create another style named bodyText . When the CSS Style Definitions dialog box opens, use the following settings in the Type category: Click OK. -
To apply the styles, select the headline and select the mainHead style from the Style pop-down. Select the body text and select the bodyText style from the Style pop-down. -
If you want to edit the style, right-click (PC) or Command-click (mac) the style name in the CSS Styles panel to open the Context Menu for the selected style. Select Edit from the menu, and the CSS Styles Definition dialog box will open. New to this release of Dreamweaver is the capability to select a style or class in the CSS Styles panel and to be able to edit the specific properties of the selection in the Selection panel, as shown in Figure 7.15. Figure 7.15. The properties for individual CSS styles can now be edited individually in the Selection panel.  -
If you want to edit the code for the style sheet, simply double-click the Style Sheet Name or one of the styles. This will open the actual CSS document. Creating Links Using CSS At the top of the page are four bits of text that can be used as links. These links will become the various states of a rollover through the use of "pseudo-classes." These are preset definitions for styles in links. The styles are "link," "visited," "hover," and "active," and you can use a CSS selector to define a style for each state. The order in which these pseudo-classes appear is absolutely critical. The order must be Link, Visited, Hover, and Active. If they don't appear in that order, they may not work in the way you decide. Follow these steps to have them change color when the user rolls over or clicks them: -
Open a New CSS Style and name it a.alink:link . Set the type to Use CSS Selector and make sure it is attached to the ImageChooser document. Click OK to open the CSS Styles Definition dialog box. -
Use the following settings in the CSS Styles Definition dialog box: Selecting None as the decoration will remove the underline that inevitably appears below an HTML link. -
Open a New CSS Style and name it a.alink:visited . Set the type to Use CSS Selector and make sure it is attached to the ImageChooser document. Click OK to open the CSS Styles Definition dialog box. -
Use the following settings in the CSS Styles Definition dialog box: -
Open a New CSS Style and name it a.alink:hover . Set the type to Use CSS Selector and make sure it is attached to the ImageChooser document. Click OK to open CSS the Styles Definition dialog box. -
Use the following settings in the CSS Styles Definition dialog box: -
Open a New CSS Style and name it a.alink:Active . Set the type to Use CSS Selector and make sure it is attached to the ImageChooser document. Click OK to open the CSS Styles Definition dialog box. -
Use the following settings in the CSS Styles Definition dialog box: -
Select the word "home" and link the word to http://www.macromedia.com by selecting Home and adding the address to the Link input box of the Property Inspector. Apply the alink style to the link. You can verify that the style has been applied to the link by switching to Code and Design view. Your link should look something like this: <a class="alink" href="http://www.macromedia.com">home</a> When the pseudo classes and links have been added, your CSS Properties panel and the Dreamweaver Property Inspector will change, as shown in Figure 7.16. Figure 7.16. Various rollover states for hyperlinks can be applied using the CSS pseudo classes.  -
Test the page in a browser by selecting File, Preview in the Browser or by pressing the F12 key. |
