Set up a Dreamweaver Template for Dreamweaver 2 with Nora McDougall-Collins


Home Dickinson UM FVCC

Dreamweaver JavaScript, Exercise 1
Return to Syllabus

For this exercise, we will create two layers and use JavaScript to turn them on and off. This will show how JavaScript can change a CSS property. The exercise will also show you how layers work with tables.

Create a new web page from your Template
Create a folder called JavaScript in your web space and save the file as JavaScriptLayers.htm.
Create a Dreamweaver Library Item
Click in the body and insert a layer: Insert -> Layout Objects -> Layer.
1. This will create an internal layer, which is not best practices, but we will use it for this isolated exercise.
2. Although it is problematic to create layer structure within tables because the placement is different, you can still add <div> to your table.
3. In Properties, set your <div> to be 150px wide and have a background color.
  An example of a page with a layer that floats right in a table.
4. Go to the top of the code and note that the layer code is in the <head>.
5. Type: float: right; as the last property in the layer code.
6. Preview the page.
7. Now, remove the position property that Dreamweaver added and preview your code again.
8. Type these words in your Layer: This layer is 150px wide and floats to the right.
9. Set your layer to be hidden by adding visibility: hidden; to the CSS code.
10. Note that Dreamweaver can't hide the layer, but the browser can.
Now we will make the layer appear when the viewer wants it to
1. Type Hidden Layer on your page - not in the layer.
2. Highlight the words and type javascript:; in the Link textbox. This creates a Null link. The link will be controlled by Javascript, not the address property.