1. Choose File > New.
2. In the New Document dialog box, select the CSS style Sheets category from the category list on the left.
The list in the middle column of the dialog box is relabeled CSS Style Sheets. A list of pre-designed style sheets appears.
3. In the CSS Style Sheets list, select a style sheet. For the Global Car rental site, select Basic: Verdana, which redefines the body, td, and the tags by specifying fonts for them. Then click create
Dreamweaver creates a new text file containing a small set of predefined CSS styles.
4. Choose File > Save to save the new CSS file. Save it in the site’s assets folder; name it text.css (or any other name you like).
5. Choose File > Close to close the CSS file.
To style your text using CSS styles:
1. In the window menu, choose and HTML file (such as index.html).
Note: If your system preferences are set to now show file extensions, the index.html file appears in the window menu with the name index.
2. Choose Window > CSS Styles to display the CSS Style panel.
3. A the top of the CSS Styles panel, click the Edit Styles radio button to show available styles.
If you haven’t previously defined styles for this document, no styles are available.
1. At the bottom of the CSS Style panel, click the Attach Style Sheet button.
2. In the Link External Style Sheet dialog box, click Browse to locate a style sheet.
3. In the Select Style Sheet File dialog box browse to and select the new style sheet you created in the assets folder, then click OK (Windows) or Choose (Macintosh) to attach the style sheet.
4. In the Link External Style Sheet dialog box, click OK to attach the style sheet.
The style sheet’s name and contents appear in the CSS Style panel. The styles defined in the style sheet are applied to the text in the HTML document. For example, body text appears in Verdana.
5. Save your document.
To edit the styles in the style sheet:
1. At the top of the CSS Style panel, click the Edit Styles radio button to show available styles.
2. Select the name of the CSS file in the CSS Styles panel and click the Edit Style Sheet button at the bottom of the CSS Style panel.
A dialog box appears showing the names of the styles in the style sheet.
3. Select one of the styles, such as body, and click Edit.
The CSS Style Definition dialog box appears.
4. Enter a size for the text, such as 13 pixels. Adjust other options as you like.
5. Click OK to redefine the style.
6. Edit the other styles. To create the styles used in the Global Car Rental site, set the body, td,
and the styles to a size of 13 pixels.
When you're done editing styles, click the save button to save your changes and close the
stylesheet dialog box.
The changed styles are applied to your document. For example, body text appars in 13-pixel
verdana.
Set a style for links.
With the new styel appled you can barely distinguish the hypertext links in the documents. Let's create a style for the links.
1. In the CSS Styles panel, click the New CSS Style button (+) locateed at the bottom of the
panel.
The New CSS Style dialog box appears.
2. In Type, select Use CSS Selector.
3. In the Selector pop-up menu, select a: link.
4. In Define In, select This Document Only.
5. Click OK.
The CSS Style definition dialog box appears.
6. Set the following Type attributes for the Link:
In Decoration, select Overline
7. In color, in the text box, enter #FFCC99.
8. Click OK.
9. To see the style you applied to the links you must view the page in a browser, press F12 to
preview your page.
0 comments:
Post a Comment