Macromedia Dreamweaver - Creating different style sheets for different platforms in Dreamweaver 3 and 4: Creating the foreign style sheet

Home > Products > Dreamweaver > Support > Designing Page Layout

Creating the foreign style sheet

When you're done creating the native style sheet, view the page on the other platform to see how the styles need to be adjusted. Typically, if you're going from Macintosh to Windows, the font sizes need to be reduced; if you're going from Windows to Macintosh, they need to be increased.

This is also an opportunity to see how the font faces map; for example, if you've specified "Arial, Helvetica, sans-serif" as your font, you'll most likely see Helvetica on the Macintosh and Arial on Windows. Because you're going to have a different style sheet for each platform, a cross-platform font cascade isn't really necessary. For example, instead of specifying "Tahoma, Geneva, Arial, Helvetica, sans-serif" for both platforms, you can specify "Geneva, Helvetica, sans-serif" for the Macintosh and "Tahoma, Arial, sans-serif" for Windows.

To create the foreign style sheet:

1	Switch to the foreign platform and view the page in Netscape Navigator and Microsoft Internet Explorer by typing the URL for the page into the browser window.
	If you created your native style sheet on the Macintosh, view the page from a Windows computer, and vice versa.
2	Return to Dreamweaver on the native platform. In the local pane of the Site window, select the style sheet you created in the last procedure (either macstyles.css or winstyles.css) and choose Edit > Copy.
3	Leaving the style sheet selected in the Site window, choose Edit > Paste.
	A copy of the style sheet appears in your site's root folder.

4	Select the file called Copy of [mac or win]styles.css and single-click the file name. Rename the file to be appropriate for the foreign platform.
	For example, if the file you've selected is named Copy of macstyles.css, rename it winstyles.css.
5	In the CSS Styles palette, click the Open Style Sheet button.
6	In the Edit Style Sheet dialog box, select the linked style sheet and click Remove.
7	Click Link. In the dialog box that appears, type / and the name of the foreign style sheet.
	For example, if you're using a Macintosh version of Dreamweaver, type /winstyles.css.
	The name of the new linked style sheet appears in the Edit Style Sheet dialog box.
8	Double-click the name of the linked style sheet.
	This opens a second Edit Style Sheet dialog box that you can use to edit the external style sheet.
9	Look at the page on the foreign platform again and decide which styles need adjusting and how.
	For example, you may have used 11-point Geneva for your `TDs` and `P` s on the Macintosh, but on Windows Arial appears instead, and 11 points is too large. You might decide instead to use 10-point Tahoma for the `TDs` and `P` s in the Windows style sheet.
10	From the list of styles in the Edit Style Sheet dialog box, select a style to change and click Edit.
11	Make the necessary changes and click OK.
12	Repeat steps 10 and 11 for the remaining styles you want to adjust.
13	Click Save to dismiss the linked style sheet dialog box, and then click Done.
14	Upload the document and foreign style sheet to a server by selecting the files in the local pane of the Site window and clicking Put.

15	Reload the page in the browser(s) on the foreign platform and check your work.
	If you need to make further adjustments, repeat steps 9 through 15.