Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Part 1: Layers 101
In this section, you'll get a quick overview of what layers are. Then you'll learn how to create, size, and position layers exactly where you want them. After creating and positioning layers, you'll insert static images into your layers and also learn how to use Dreamweaver's Rollover Image behavior to insert the drop down menu links.
Quick Overview of Layers
On May 12, 1998, the World Wide Web Consortium (W3C) released its second Cascading Style Sheet specification, CSS Level 2. CSS Level 2 added support for a number of presentation methods, one of the most important of which is Cascading Style Sheet positioning (CSS-P).
Think of CSS-P as a language for creating a container in the shape of a box or rectangle. This container can contain Web elements, such as tables, forms, text, images, and so on.
Precise Positioning and Sizing
This "container" (a layer) can be precisely positioned anywhere you want on a page using x,y coordinates. You also have complete control over a container's size. Both positioning and sizing can be specified using a number of measurement types. The default unit of measurement that we'll be using is pixels (px), just like the units of measurement for your monitor. Layers can also support centimeters, ems, inches, millimeters, picas, percentages, and points for units of measurement. In this article, we'll use pixels (px) and percentages (%).
Why the Name Layers?
CSS-P supports a z-index property, which allows you to stack one container on top of another. Because these containers can be stacked on top of one another, they're ubiquitously referred to as layers.
Browsers That Support CSS-P (Layers)
CSS-P is supported to varying degrees, depending on the browser version and manufacturer. The drop-down menu you'll learn to create in this article works in Microsoft Internet Explorer version 4.0 and above, Netscape's Navigator browser version 4.0 and above, and the Mozilla browser version 1.0 and above on the MAC, PC, and Linux/UNIX OS environments.
Now that you understand the basics, let's get to work!
Creating Layers
In this section, you'll create the layers for your project. Before you begin, set up your workspace:
Open the dhtml-dropdown-menu.html page.
Click Window, Layers to display the Layers palette.
Click Window, Objects to display the Objects palette.
In the Objects palette, select the Common panel, shown in Figure 1.
Figure 1
Selecting the Common panel in the Objects palette.Next, click the Draw Layer icon, located in the Object palette's Common panel, as shown in Figure 2.
Figure 2
To insert a layer, start by clicking the Draw Layer icon in the Object palette's Common panel.Your cursor turns into a + sign. Draw a rectangular box across most of the width of the document window, and then release your mouse button. (Don't worry about specific size and placement right now[md]you'll adjust the properties shortly.) A rectangular box appears, as shown in Figure 3.
Figure 3
Drawing a layer to an approximate size.
)
Figure 1)
Figure 2)
Figure 3Deleting a Layer
Deleting a layer is really simple: Select the layer you want to delete, then press the Delete key. (Don't delete the layer that's on your page; you're going to be using it in the next set of exercises.)
Selecting a Layer
You can select a layer in Dreamweaver in a few ways:
Click the layer's border.
Select the layer in the Layers panel, as shown in Figure 4.
Figure 4
Selecting a layer in the Layers panel.
)
Figure 4The easiest way to select a layer that's hidden or buried beneath other layers is through the Layers panel.
Regardless of how you select a layer, you can tell when one is selected because eight sizing handles appear around the layer, as shown in Figure 5.
)
Figure 5
You can tell that a layer is selected because eight sizing handles appear around it.
Resizing a Layer
You can resize a layer in two different ways:
Use the sizing handles (for rough changes)
Change the size width or height attribute in the Property inspector (for precise changes)
Resize the layer you created using the sizing handles:
Select the layer by clicking its name in the Layers panel.
Drag one of the sizing handles in or out, as shown in Figure 6, to modify its size.
Figure 6
To resize a layer to a general size, drag one of the sizing handles in or out.
)
Figure 6Next, you'll resize the layer to a specific size using the Property inspector:
Select the layer you created. The Property inspector displays the layer's current properties.
In the Property inspector, make the following changes to the width and height attributes, shown in Figure 7:
- W: 100%
- H: 39px
Figure 7
To resize a layer precisely, change the width (W) and height (H) values in the Property inspector.
)
Figure 7Setting the width to 100% ensures that the layer takes up the entire width of the browser, regardless of what resolution the user's monitor is set to or what size the browser is.
Moving a Layer
When designing Web pages with layers, you're constantly moving them around to find the ideal
Use the selection handle
Use the arrow keys on your keyboard
Change the left (L) and top (T) properties in the Property inspector
When you want to move a layer across a page—or more than just a few pixels—use the selection handle; here's how:
Select the layer you want to move.
Click the selection handle in the top-left corner of the layer, as shown in Figure 8.
Figure 8 Preparing to move a layer to another location on the
page.Hold down the mouse button while you drag the layer toward the bottom of the page.
Release the mouse button to drop the layer in its new position.
)
Figure 8You'll come across scenarios in which you need to move the layer just a few pixels to align it perfectly with another layer. To move a layer a very short distance, use the arrow keys. Here's how:
Select the layer you created.
Press the arrow key that corresponds to the direction you want to move the layer. Each time you press the arrow key, the layer moves in that direction 1px.
Finally, when you know the exact position you want to move a layer, you can type in the appropriate coordinates in the Property inspector:
Select the layer you created.
In the Property inspector, change the left (L) and top (T) properties as follows:
- L: 0px
- T: 0px
After you've typed in these two variables, press the Enter key or click anywhere in Dreamweaver's document window. The layer moves to the very top-left corner of the browser window, as shown in Figure 9.
)
Figure 9 The first layer you created, precisely positioned in the top =
0px, left = 0px position.
Setting the layer's top position to 0px ensures that there will be no space between it and the top of the browser's document window. Likewise, setting the layer's left position to 0px ensures that there won't be any space between the left edge of the document window and the left edge of the layer.
NOTE
For clarity, you're typing the unit of measurement for the top, left, width, and height properties. Browsers use pixels (px) as the default unit of measurement when working with layers. Because of this, you could just type 0 instead of 0px. When you don't specify a unit of measurement, a browser assumes you're referring to pixels.
Naming a Layer
When you create a layer in Dreamweaver, it automatically assigns a generic name to it, such as layer1 or layer2. You'll want to have more descriptive names so that they're easy to tell apart. Rename your layer1 to logo:
In the Layers panel, double-click the name layer1. The name is highlighted.
Type the new name for this layer, logo, as shown in Figure 10.
Press Enter.
Figure 10 Renaming a layer in the Layers panel.
)
Figure 10Make sure you follow these guidelines when naming layers, to avoid JavaScript errors:
Use only alphanumeric characters (a–z, A–Z, and 0–9) or the underscore (as in layer_name).
Even though you can use numbers in a layer's name (as in layer91), don't name a layer with only numbers (as in 9999), and don't begin a layer's name with a number (as in 9layer).
Don't use spaces. Either concatenate multiple words (as in layername) or use an underscore (as in layer_name)
Don't use hyphens (–), ampersands (&), or asterisks (*) in a layer's name. Some browsers will ignore the layer or render it incorrectly.
Make sure that each layer's name is unique to the page. You'll encounter problems when you have a layer named logo and an image named logo.
Don't use JavaScript function or method names as the name of a layer (as in open or close).
Creating and Positioning the Remaining Layers
Now that you understand the basics of working with layers, you'll create the rest of the layers you need for the DHTML drop-down menu. For each layer, remember to follow these steps:
Click the Draw Layer icon in the Object palette's Common panel.
Draw a layer in Dreamweaver's document window (don't worry about size).
Select the layer you just drew.
Change the layer's name through the Layers panel (like you did earlier) or by typing it into the Layer ID box, located in the Property inspector (as shown in Figure 11).
Change the layer's top (T), left (L), width (W), and height (H) properties in the Property inspector, as specified in Table 1.
Figure 11 shows what Dreamweaver's document window and the Property inspector look like after you create the hidedropdown layer.
)
Figure 11 The Dreamweaver document window and the Property inspector after
creating the hidedropdown layer.
NOTE
Don't worry about any other layer properties. We'll address those later.
Table 1: Layer Properties
|
Layer Name |
Left (L) |
Top (L) |
Width (W) |
Height (H) |
|
hidedropdown |
7px |
23px |
350px |
172px |
|
mainnav |
0px |
47px |
337px |
22px |
|
logonavdivider |
0px |
39px |
100% |
8px |
|
dropdown |
44px |
65px |
128px |
105px |
After you've created all of the layers, your document window will look like the one in Figure 12. Your Layers panel will look like the one in Figure 13.
)
Figure 12 The Dreamweaver document window with all the layers you
created.
)
Figure 13 The Layers panel with all the layers you created.
Hiding Invisible Elements
After you insert all the layers, you'll notice five yellow symbols, each with the letter C at the top of the document window. Each of these represents a layer on the page. Because of their position, these can become an annoyance while you're working. To hide them, click View, Visual Aids, Invisible Elements.
Determining the Left and Top Coordinates
At this point, you may be wondering how I determined the left and top coordinates used to place each layer where it needs to go. Before I explain that, take a look at the finished page again.
Notice that the end result is a page that looks like one continuous image, not a number of separate layers containing images. To achieve this, let's step back even further to understand how the graphics are split up and the layer coordinates are determined:
I started by creating a mockup in a graphics program of how I wanted the drop-down menu to look.
To achieve the drop-down menu effect, I knew that I needed to be able to control portions of the image (dynamic pieces), while other portions could remain undisturbed (static pieces). So, I determined what pieces needed to be dynamic and what pieces could be static.
Next, I determined what portions of the graphic could be mimicked using a simple color fill instead of requiring an image. I also determined what portions could be sampled and then repeated an infinite number of times. This optimization step gave me fewer images, faster download times, and a flexible look that adjusts to any resolution and browser size combo.
Next, I cropped the image into these different pieces, like a jigsaw puzzle.
I then measured each of the graphics pieces so that I would know where each layer should start and end, relative to the top-left corner of the browser (left = 0, top = 0) and how they fit together (like putting a jigsaw puzzle back together).
For example, the logo layer will hold an image that is 39px tall. That would mean that the logo layer starts at top = 0px (which you specify) and extends to top = 39px. To ensure that there are no gaps between the logo layer and the layer below it (logonavdivider), I needed to set logonavdivider to start at the same point at which the logo layer ends (39px).
Inserting Images and Applying Color Settings
With all the layers created and positioned correctly, it's time to insert the images, set the background colors, and specify background images, where necessary.
logo Layer
The first layer you'll insert an image into is the logo layer.
In the Layers panel, click the logo layer to select it. Sizing handles appear around the edges of the layer, confirming that it's selected.
Click inside the logo layer. A blinking cursor appears inside the left edge of the logo layer, as shown in Figure 14.
Figure 14 The logo layer with a blinking cursor on the left side.NOTE
To confirm that you're in the correct layer, look at the Layers panel. After you click inside a layer, that layer's name appears in bold.
In the Object palette's Common panel, click the Insert Image icon, shown in Figure 15.
Figure 15 The Insert Image icon, located in the Object palette's
Common panel.The Select Image Source dialog box appears. Open the images subdirectory that you downloaded earlier. Select the logo.gif image.
Click Select.
)
Figure 14)
Figure 15The logo.gif image appears in the logo layer, as shown in Figure 16.
)
Figure 16 The document window with the logo.gif image appearing in the
logo layer.
Applying a Background Color
As you look at the logo layer, you'll notice that the logo graphic does not extend all the way across the document window. The image was cropped to provide the smallest file size—and quickest download time. Because the logo's background is a solid color, you can fill in the rest of the layer by setting the BG Color property:
In the Layers panel, select the logo layer.
In the Property inspector, type #5E543C in the BG Color text box.
Press Enter.
Now the dark brown background color extends all the way across the layer, as shown in Figure 17. And because you set the width of the logo layer to 100%, the brown will always extend to the right edge of the browser, no matter what size the browser window is set to.
)
Figure 17 The logo layer with a background color (BG color)
applied.
hidedropdown Layer
In this exercise, you're going to insert a tiny transparent image into the hidedropdown layer. Then you'll resize the image so that it takes up the full width and height of the layer.
Start by inserting the image into the layer:
Select the hidedropdown layer in the Layers panel.
Click inside the hidedropdown layer; a blinking cursor appears in the top-left corner.
Click the Insert Image icon, located in the Object palette's Common panel.
Select the image named transparent.gif, located in the images subdirectory that you downloaded earlier.
Click the Select button.
At this point, you'll have a small, square, white graphic at the top-left corner of the hidedropdown layer. Now you need to stretch that small graphic so that it fills the hidedropdown layer:
If the image is not selected, go ahead and select it now: Because the image is so small and is surrounded by other layers, it can be difficult to tell whether you selected it. The easiest way to select the small image is as follows:
Click inside the hidedropdown layer. A blinking cursor appears to the right of the graphic.
Hold down the Shift key and then press the left arrow key. The small graphic now is selected.
In the Property inspector, change the width and height of the transparent.gif image to match the layer it's in (so that it fills the entire layer):
- W: 350px
- H: 172px
You won't be able to see the image because it's transparent, but you can confirm that the image resized properly: A white border appears along the inner edge of the layer, and three sizing handles appear on the lower-left side, as shown in Figure 18.
)
Figure 18 The transparent.gif image, resized to fill the hidedropdown
layer.
mainnav Layer
The mainnav layer will hold four images: a left border followed by three navigational links: Products, Support, and Contact Us. To insert the first of four pieces, follow these steps:
Click inside the mainnav layer. A blinking cursor appears inside on the left side.
Click the Insert Image icon, located in the Object palette's Common panel. The Select Image Source dialog box appears.
Go to the images subdirectory that you downloaded earlier.
Click left-of-prod.gif.
Click the Select button.
The small graphic appears on the left side of the mainnav layer. Next, insert the Products graphic:
Click the mainnav layer to select it.
Click inside the mainnav layer. A blinking cursor appears to the right of the left-of-prod.gif graphic.
Click the Insert Image icon in the Object palette's Common panel. The Select Image Source dialog box appears.
Go to the images subdirectory that you downloaded earlier.
Click the products.gif graphic.
Click the Select button.
You now have two images inserted, as shown in Figure 19.
)
Figure 19 Two images inserted in the mainnav layer.
The third image you'll insert into the mainnav layer will appear just to the right of the products.gif graphic:
Click the mainnav layer in the Layers panel.
Click inside the mainnav layer. A blinking cursor appears to the right of the products.gif graphic.
Click the Insert Image icon in the Object palette's Common panel. The Select Image Source dialog box appears.
Go to the images subdirectory that you downloaded earlier.
Click the support.gif graphic.
Click the Select button.
Insert the last image, contactus.gif, into the mainnav layer:
Click the mainnav layer in the Layers panel to select it.
Click inside the mainnav layer. A blinking cursor appears to the right of the support.gif graphic.
Click the Insert Image icon, located in the Object palette's Common panel. The Select Image source dialog box appears.
Go to the images subdirectory that you downloaded earlier.
Click the contactus.gif graphic.
Click the Select button.
All four graphics have now been added to the mainnav layer, as shown in Figure 20.
)
Figure 20 All graphics inserted in the mainnav layer.
Press F12 to preview the drop-down menu page in a browser. As Figure 21 shows, there is a gap between the main logo layer and the mainnav layer. The layer that fills that gap is the logonavdivider layer, which you'll add graphics to now.
)
Figure 21 A preview of the Web page before inserting the logonavdivider
layer.
logonavdivider Layer
As you recall, the size of the logonavdivider layer is supposed to be 8px. The Dreamweaver document window renders it incorrectly (failing to collapse it to 8px) because it is empty. In this section, you'll insert an image into the layer and then specify a background image for the layer.
Start by inserting the image:
Click the logonavdivider layer in the Layers panel.
Click inside the logonavdivider layer.
Click the Insert Image icon in the Object panel's Common palette.
In the Select Image Source dialog box, find the images subdirectory that you downloaded earlier.
Click the logo-links-sep.gif graphic.
Click the Select button.
After you insert the logo-links-sep.gif graphic, Dreamweaver collapses the layer in Design view, displaying it at the correct size.
The next task is to set the background image so that the logo-links-sep.gif graphic appears to extend all the way to the right edge of the browser:
Click the logonavdivider layer in the Layers panel.
The Property inspector displays the layer's properties. On the right side of the Property inspector, click the Browse for File folder, shown in Figure 22.
Figure 22 Click the Browse for File folder in the Property inspector when
you're not sure about the path of a file.The Select Image Source dialog box appears. Open the images subdirectory that you downloaded earlier.
Select the logo-links-sep-right.gif graphic.
Click the Select button.
)
Figure 22Preview the page again by pressing F12. Your drop-down menu page is coming together nicely, eh? The last layer you need to insert images into is the drop-down menu layer itself.
dropdown Layer
The dropdown layer consists of seven graphics, each stacked on top of each other to form the drop-down menu. From top to bottom, the first, third, fifth, and seventh are static graphics and will be inserted the same way you inserted the previous graphics. The second, fourth, and sixth graphics will be inserted in a slightly different way because they are rollover images. Even though two types of graphics are being inserted, the most straightforward way to approach this is to insert the graphics from top to bottom (one static, one rollover, one static, and so on).
You'll begin by inserting the first graphic:
Click the dropdown layer in the Layers panel to select it.
Click inside the dropdown layer.
Click the Insert Image icon, located in the Object palette's Common panel.
In the Select Image Source dialog box, open the images folder that you downloaded.
Select dropdown-0.gif.
Click Select.
The dropdown-0.gif image should still be selected. Press the right arrow on your keyboard. The blinking cursor should be on the right side of the image. Don't worry—because the layer is only as wide as the images you're inserting, the next image that you insert will automatically appear directly below the first one. That's how it'll work for every subsequent image you insert.
Now insert the first rollover image:
With the cursor blinking to the right of the first image that you inserted, click the Insert Rollover icon, located in the Object palette's Common panel, shown in Figure 23.
Figure 23 The Insert Rollover icon, located in the Object palette's
Common panel.The Insert Image Rollover dialog box appears. Complete each field as follows:
- Image Name: sp1
- Original Image: images/dropdown-sp1.gif
- Rollover Image: images/dropdown-sp1h.gif
- Preload Rollover Image: (checked)
- When Clicked, Go to URL: #
)
Figure 23When your Insert Rollover Image dialog box matches the one in Figure 24, click OK.
)
Figure 24 The Insert Rollover Image dialog box, configured
properly.
Dreamweaver inserts the HTML and JavaScript code needed to implement the JavaScript rollover effect you're after. Press F12 to test the rollover. When the page loads, move your mouse over the SuperProduct 1 image (the background image in Figure 25). When you move your mouse over the image, the highlighted version appears, as shown in the foreground of Figure 25.
)
Figure 25 Testing the SuperProduct 1 rollover effect.
Next, you'll insert a spacer image below the SuperProduct 1 rollover images.
Select the dropdown layer in the Layers panel.
In the dropdown layer, select the SuperProduct 1 image and then press the right arrow.
Click the Insert Image icon in the Object palette's Common panel.
Find the image named dropdown-1.gif and select it.
Click the Select button.
The spacer image (dropdown-1.gif) appears in the layer. Click anywhere outside the dropdown layer. If the image has a colored border around it, follow these steps to remove it:
Highlight the image.
In the Property inspector, type 0 in the Border text box.
Press Enter. The border should have disappeared.
Insert the SuperProduct 2 rollover images:
Select the dropdown layer in the Layers panel.
Select the bottom-most image in the dropdown layer. With the cursor blinking to the right of the first image you inserted, click the Insert Rollover icon, located in the Object palette's Common panel, as shown in Figure 23.
The Insert Image Rollover dialog box appears. Complete each field as follows:
- Image Name: sp2
- Original Image: images/dropdown-sp2.gif
- Rollover Image: images/dropdown-sp2h.gif
- Preload Rollover Image: (checked)
- When Clicked, Go to URL: #
When your Insert Rollover Image dialog box matches these settings, click the OK button.
The next image to insert is dropdown-2.gif, the spacer image that goes below the SuperProduct 2 rollover images.
Select the dropdown layer in the Layers panel.
In the dropdown layer, select the SuperProduct 2 image and then press the right arrow.
Click the Insert Image icon in the Object palette's Common panel.
Find the image named dropdown-2.gif and select it.
Click the Select button.
The spacer image (dropdown-2.gif) appears in the layer. Click anywhere outside the dropdown layer. If the image has a colored border around it, remove it by following these steps::
Highlight the image.
In the Property inspector, type the number 0 in the Border text box.
Press Enter. The border should have disappeared.
Insert the SuperProduct 3 rollover images:
In the dropdown layer, select the logo layer.
Select the bottom-most image in the dropdown layer. With the cursor blinking to the right of the first image you inserted, click the Insert Rollover icon, located in the Object palette's Common panel, as shown in Figure 23.
The Insert Image Rollover dialog box appears. Complete each field as follows:
- Image Name: sp3
- Original Image: images/dropdown-sp3.gif
- Rollover Image: images/dropdown-sp3h.gif
- Preload Rollover Image: (checked)
- When Clicked, Go to URL: #
When your Insert Rollover Image dialog box matches these settings, click the OK button.
The last image to insert is the bottom border for the drop-down menu:
Select the dropdown layer in the Layers panel.
In the dropdown layer, select the SuperProduct 3 image and then press the right arrow.
Click the Insert Image icon in the Object palette's Common panel.
Find the image named dropdown-3.gif and select it.
Click the Select button.
The spacer image (dropdown-2.gif) appears in the layer. Click anywhere outside the dropdown layer. If the image has a colored border around it, remove it by following these steps:
Highlight the image.
In the Property inspector, type the number 0 in the Border text box.
Press Enter. The border should have disappeared.
Finally! You're done inserting all the images. Your document window will look like the one in Figure 26.
)
Figure 26 The drop-down menu page, with all images inserted into their
respective layers.
With all the images in place, you can move on to Part 2, where you learn about the CSS-P's z-index property.