This page has a link at the top labeled: Contact Information. When clicked, this link executes a Show-Hide Layer behavior to reveal a hidden DIV containing contact information. This information is very important because it provides potential customers with the information they need to get in touch with you.
What happens if a potential customer has disabled JavaScript in her browser? She won't be able to contact you. This is not good. And what happens if a blind person visits your site using the latest version of the JAWS assistive reader? He won't be able to contact you either, because modern assistive readers understand and process CSS, but do not process JavaScript events.
This conundrum can be solved very easily by using the PVII WriteStyles Command. To see what's been done, you'll need to temporarily disable JavaScript in your browser, then reload this page.
This page contains a Layer named: contactinfo and its properties are contained in the style sheet embedded on the page:
#contactinfo {
background-color: #B9C6AB;
padding: 16px;
border: 1px solid #333333;
position: absolute;
width: auto;
left: 10%;
top: 8em;
font-size: .8em;
visibility: hidden;
}
Unfortunately, Dreamweaver makes it too easy to "draw" a Layer. The problem with drawing Layers is tha Dreamweaver embeds the CSS properties that make a Layer what it is, directly inside the <div> tag - like this:
<div id="Layer1" style="position:absolute; left:276px; top:188px; width:110px; height:136px; z-index:1"></div>
To make more efficiently Layers that can be addressed in a central style sheet, the style properties must be in the style sheet. Here is how you would do it in Dreamweaver:
Create a new style in your Style (either in your document or in an external style sheet):
#Layer1 {
position: absolute;
width: 200px;
top: 50px;
left: 50px;
}
You've made yourself an efficient, manageable Layer.