Accessibility
 
Home > Products > Dreamweaver > Support > Designing Page Layout
Dreamweaver Icon Macromedia Dreamweaver Support Center - Designing Page Layout
Creating the native style sheet

Start by creating the CSS style sheet for the platform on which you run Dreamweaver. That is, if you have a Macintosh version of Dreamweaver, start by creating the Macintosh style sheet; if you have a Windows version of Dreamweaver, start by creating the Windows style sheet. This style sheet is referred to in the following procedures as the "native" style sheet. The style sheet for the other platform is referred to as the "foreign" style sheet.

To create the native style sheet:

1 Open a representative document from your site in Dreamweaver.
A representative document is any document that contains the full range of styles you need to represent.
2 Choose File > Save As and save the file in a test folder within your site.
Keeping a folder called test inside each of the local sites you work on provides you with a place to store experiments and other files that aren't meant to be public.
3 Choose Window > CSS Styles to open the CSS Styles palette, and then click the Open Style Sheet button.
4 In the Edit Style Sheet dialog box, click Link.
5 In the dialog box that appears, type either /macstyles.css or /winstyles.css, depending on the platform you're using, and click OK.
By typing in the filename of a style sheet that doesn't yet exist, you're creating a new one. The slash before the filename ensures that the style sheet is saved in the root folder of your site.
6 Double-click the name of the linked style sheet in the Edit Style Sheet dialog box.
This opens a second style sheet editing dialog box (with the name of the linked style sheet in its title bar) on top of the first one. (The first Edit Style Sheet dialog box may be completely obscured by the second.) You can use this second dialog box to edit the external style sheet.

7 Create a style by clicking New. Choose whether to create a custom style, redefine an HTML tag, or create a CSS selector. (For information on those options, see the Dreamweaver documentation.)
8 In the resulting Style Definition dialog box, adjust your fonts and font sizes. To try out different settings without closing the Style Definition dialog box, click Apply after each setting change. For more information on the options for creating styles, see "Formatting text with CSS style sheets" in the Formatting Text section of Dreamweaver 3 Help. When you're satisfied with your style definition, click OK.
9 Repeat steps 7 and 8 until you have defined styles for all the elements that need them.
10 Click Save to dismiss the linked style sheet dialog box, and then click Done to dismiss the Edit Style Sheet dialog box.
11 Upload the document and style sheet to the server by selecting the files in the local pane of the Site window and clicking Put.
12 View your page on your native platform in version 4.0 or later of both Microsoft Internet Explorer and Netscape Navigator by typing the URL for the page into the browser window.
If any styles need adjusting, reopen the CSS Styles palette, then click the Open Style Sheet button. Select a style from the list, and click Edit to make changes.
To Table of Contents Back to Previous document Forward to next document