Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Using the PVII WriteStyles Command

The WriteStyles Command allows you to write a style sheet dynamically - before your page content loads - so that you can include selected styles that a browser will use only if it is capable of running JavaScript. The browser interprets these styles before any content is rendered onscreen, making the entire process seamless. Visitors will not perceive that anything out of the norm has taken place. You can now define styles that will support accessibility guidelines and assistive readers, as well as browsers and internet devices which either do not support JavaScript or whose users have disabled it. You can even define extra styles to make hidden dhtml menus fully accessible in JavaScript-disabled browsers.

This tutorial will show you how to take a popup Layer controlled by Dreamweaver's default Show-Hide Layers behavior and make the contents of the Layer accessible to all browsing devices by using the PVII WriteStyles Command to style it dynamically.

Download and Setup

To complete the tutorial, you'll need to download the work files and the WriteStyles extension. The work files zip archive contains a finished example page and a page that has been set up for you to use as you go through this tutorial.

Install and Unzip

  • Double-click the extension file to install it
  • Restart Dreamweaver to initialize the WriteStyles Command
  • Unzip the work file archive and move the two files (fin_example.htm and workpage.htm) it contains to a folder inside your local web site

Preview the finished example page

Before you begin, open fin_ example.htm and preview it your browser. If you haven't downloaded the files yet, you can preview the online example page:

See the online example page

The example page contains an overview, which you should read before continuing the tutorial.

Deploying WriteStyles

You're going to copy two styles from the style sheet embedded in the work page and then paste them inside the WriteStyles window.

  • Open workpage.htm
  • Switch to Code View

Locate these two CSS rules within the page's Style Sheet:

#contactinfo {
background-color: #B9C6AB;
padding: 16px;
border: 1px solid #333333;
position: absolute;
width: auto;
left: 10%;
top: 8em;
font-size: .8em;
visibility: hidden;
}
.hidestuff {display: block;}

The first rule (#contactinfo) is what makes the contact info box a Layer, styles it, and positions it. The second rule (.hidestuff) is a class assigned to the paragraph that contains the link that's clicked to show the popup box, and also to the paragraph containing the link that's clicked to hide it.

You'll cut both rules to your clipboard, then you'll open the WriteStyles window and paste them in:

  • Select both style rules
    Selecting both rules in Code View
  • Press Ctrl + X (Command + X on Mac) to delete them while placing a copy on your computer's clipboard
  • Switch back to Design View
  • Choose Commands - Studio VII -WriteStyles by PVII

The WriteStyles window will open

The WriteStyles Window

Paste in the two style sheet rules you cut:

  • Insert your cursor in the Styles To Write box
  • Press Ctrl + V (Command + V on Mac) to paste the two rules you cut earlier
  • Uncheck the Version 5+ Browsers Only option
  • Click OK

Note: You unchecked the Version 5+ Browsers Only option because version 4 browsers support Show-Hide Layers.

Notice that the contact info box is now visible in your Dreamweaver window.

Preview the page. The contact popup works fine. To test the difference that WriteStyles made, temporarily disable JavaScript in your browser and reload the page. Note that the contact info box is no longer a box, but appears inline, just below the page heading.

What happened

You started with a page that relied exclusively on JavaScript to show and hide a popup box containing mission critical information. You moved the styles responsible for making that box hidden and for making it absolutely positioned, from the page's default style sheet to a special style sheet that is written dynamically by the PVII WriteStyles script. And this is the result:

Browsers that are JavaScript-enabled hide the box and present a link to click that causes the box to become visible. The box is absolutely positioned, so it sits atop your content. That's fine, because there is also a link to click that hides the box.

Browsers that cannot read JavaScript never the see the styles that make the box a Layer, nor do they see the the links that control the box's visibility, because those links are rendered invisible by the WriteStyles dynamic style sheet. So, what non-JavaScript browsers see is the contents of the popup box rendered inline at the top of the page.

In Conclusion

What you can accomplish with PVII WriteStyles is not limited to hiding and showing popup boxes. As you learn more about CSS, you will discover dozens of uses for this most powerful utility. Keep it in ready in your toolbox for now - and for later.

For a more technical discussion, please see:

The PVII WriteStyles information page

For anothe example of how to use WriteStyles, please see:

The SwapClass Menu Tutorial