A Tutorial for Layering Images in Dreamweaver

Create professional websites with Dreamweaver.

Dreamweaver is web development software that even those with little knowledge and experience in web design can use. While you can experiment with Dreamweaver, it helps to learn the technicalities of placing and manipulating content. Layering images involves working with complimentary, overlapping pictures, clip art or photographs. Proper usage of image layering can give a webpage a clean, modern and professional look. Like most software, Dreamweaver has much to offer those willing to learn.

Instructions

1. Open Dreamweaver and go to the menu bar. Click "Insert," "Layout," and "Layers." A box will appear on the screen, and this is where you will add your content.

2. Open the Properties window. Choose a background color or background image. Insert the images you will use. Edit the size of the layers you are working on in the Properties window.

3. Select "Windows" on the toolbar, which will be at the top or lefthand side of the blank document, depending on the version of Dreamweaver you are using. Select "Layers" to go to the layers panel, the panel will appear to the right. Click on the name of any layer and rename it. This will allow you to keep track of layers you are working on simultaneously.

4. Click on the "open-eye icon" to make layers visible or invisible. The icon is located to the left of the name of the layer. To make a layer momentarily disappear so you can focus on an overlapping layer, click on the "eye-icon."

5. Change the order of the layering by dragging the layers up or down. Click and hold the name of the layer and drop it in a new position. To the right of the layer name in column Z, you can see the order in which layers are stacked. The layer with the highest number is stacked on top.

References

• Entheos Web: Dreamweaver Tutorials
• Adobe: What is Dreamweaver