|
Incorporate both style sheets into your documents
Now that you have a Macintosh style sheet and a Windows style sheet, you need to write some JavaScript to ensure that the correct style sheet is used for each platform.
When you add this JavaScript to your document, the styles no longer appear in the Document window in Dreamweaver. However, the styles remain in their respective CSS files. You can always make changes to the styles later by linking to the style sheets directly as demonstrated in the previous procedures.
To incorporate both style sheets into a page:
| 1 |
In Dreamweaver, open the test file you used for the previous two procedures. |
| 2 |
In the CSS Styles palette, click the Open Style Sheet button. |
| 3 |
Select the linked style sheet and click Remove. |
| 4 |
Click Done. |
| 5 |
Choose View > Head Content if the HEAD area is not already visible. |
| 6 |
Click in the HEAD area and choose Insert > Script. |
|
The HEAD area turns white when it has focus and gray when the BODY area has focus. |
| 7 |
Paste the following JavaScript into the dialog box that appears: |
|
// If the platform is Macintosh, use the Macintosh style sheet.
if (navigator.platform.indexOf('Mac') != -1) {
document.write('<link rel="stylesheet" href="/macstyles.css">');
// Otherwise, use the Windows style sheet.
} else{
document.write('<link rel="stylesheet" href="/winstyles.css">');
}
|
| 8 |
Click OK, and then save the file. |
| 9 |
Select the file in the Site window and click Put. |
| 10 |
View the results from browsers on both Windows and Macintosh. |
|
Note: You can't see the style sheets if you preview the file locally because the paths to the style sheets are site-root-relative. This is a convenience that makes the same script work in any page on your site. |
 |
|
If you've been using FONT tags to specify type in your pages, the next step is to replace those FONT tags with the above script in all the pages on your site. You can remove all FONT tags if you like; however, because color information is lost if pages are viewed in a browser that does not support styles, you might want to leave the FONT tags that define color.
Note: It's best to try this procedure on a few representative files before removing all the FONT tags on your site. As with any site-wide change, it's a good idea to start by backing up the current version of your site so you can restore it if necessary.
To remove the FONT tags from your pages and replace them with cross-platform style sheets:
| 1 |
Select the local root folder in the Site window. |
| 2 |
Choose Edit > Replace. |
| 3 |
Set up a search that finds every FONT tag that contains a SIZE attribute and removes the SIZE attribute. Click Replace All to initiate the search. |
|
|
|
