Working with Layers
| Now that you have a formal understanding of the power layers expose, let's actually insert and work with them in Dreamweaver. In the following sections, you'll learn about the various techniques for inserting layers, modifying layer properties through the Properties Inspector and the Layers panel, building a table-less web page, and using behaviors to facilitate interaction between the user and layers in the page. To begin working with the examples in this chapter, you'll need to download the support files online. As you have done for the rest of the chapters in this book, you can work with the examples in this chapter by downloading the files from www.dreamweaverunleashed.com. You'll want to save the files for Chapter 11 in an easy-to-find location. I'll place mine in C:\Dorknozzle\Chapter11. Inserting a LayerYou have a couple options for inserting layers into a web page; the method you use depends on your needs and skill set. By far the easiest method for inserting a layer is to use the Layer option in the Insert, Layout Objects submenu. To use this method, follow these steps:
Initially, you'll notice that the layer simply appears as a box with a 1-pixel border surrounding it. You can easily select the layer by rolling your cursor over the border of the layer until your cursor turns into the Move icon. Now simply click to select the layet. Notice that the layer highlights blue and displays small blue squares, otherwise known as resize handles, at each point and in the middle of each line. Also notice that a handle appears in the top-left corner of the layer, also shown in Figure 11.3. You can use the small black resize handles to click, hold, and drag out to resize the layer vertically, horizontally, or both. Furthermore, you can use the top-left handle to select and move the layer anywhere you want on the page. TIP Dreamweaver also allows you to select a layer by its border and move it around on the page. If you use this method, make sure that you don't accidentally select a resize handle, or you'll find yourself resizing the layer as opposed to moving it. Drawing a LayerAnother simple alternative to adding a layer to the page is to use the Draw Layer method. With this method, you can easily click and draw a layer in the page to any dimensions that you want. To use this method, follow these steps:
The layer is eventually created to look similar to the one created with the first method. The only difference is that by drawing a layer, you can set the initial dimensions to anything you want as opposed to setting them at the default 200 pixels by 115 pixels. We'll use this method, in conjunction with the Grid (explained later in the chapter) to draw layers when we build the table-less version of the Dorknozzle site. Inserting Content into LayersInserting content into a layer is just as easy as it is to insert content into the cell of a table. To demonstrate this, I'll insert text into the first layer (the one at the top-left of the page) and insert an image into the second layer (the one on the center of the page). To insert text into the first layer, simply place your cursor into the layer and start typing the text Ada the Admin Assistant. Now let's insert Ada's headshot photograph into the second layer. To do this, drag the head_adatheadminassistant.gif image (located in the Images folder of our defined site in the Files panel) into the layer. When you've finished, the page will resemble Figure 11.4. Figure 11.4. Add text to the first layer and drag an image into the second layer. Notice that the text and the image are slightly undersized compared to the size of the layers. To resize the layers to correspond with their content, simply click, hold, and drag the resize handle located in the bottom-right of each layer to resize the layer respective to the size of the content within it. Finally, move the layer that contains the headshot photograph and place it just underneath the text layer. The result looks like Figure 11.5. Figure 11.5. Resize the layer so that it matches the size of the content within it and drag the headshot layer so that it sits just underneath the text layer. You'll begin to notice the flexibility that layers expose: Adding them to the page is easy, moving them is easy, and resizing them respective to the content within them is easy. In the next few sections, we'll discuss the various properties you can set using the Properties Inspector and the Layers panel. Modifying Layer Properties with the Properties InspectorLike every feature in Dreamweaver, layers expose properties you can customize using the Properties Inspector. If you haven't noticed, the layers-based Properties Inspector becomes available when you select a layer. As you can see in Figure 11.6, the Properties Inspector exposes properties that uniquely identify the layer, that set the dimensions of the layer, set the stacking order or z-index of the layer, and so on. Also notice that moving your cursor just over the layer displays properties already set for the layer within a yellow ToolTip. Figure 11.6. The layers-based Properties Inspector exposes numerous customizable properties. Moving your cursor over the layer exposes the properties already set for the layer within a ToolTip. A complete list of customizable properties exposed by the layers-based Properties Inspector is given here:
As you'll see throughout the chapter, a layer is nothing more than a <div> or <span> tag complete with a unique ID and a document-wide style rule (by default). Modifying properties in the Properties Inspector simply changes the document-wide style rule accordingly. To demonstrate this, switch to Code view. As you can see from Figure 11.8, each layer is nothing more than a <div> tag with an ID and a document-wide style rule. Figure 11.8. Layers are nothing more than a <div> or <span> tag complete with a unique ID and an inline style rule. You're probably thinking that inline styles aren't the best way of manipulating properties for layers. If that's what you're thinking, you're right! Assuming that you were developing your site entirely in layers, changing all the layer's properties in your site would be a nightmare if all the styles were developed inline. A much better alternative is to create an ID within a style sheet that defines layer properties similar to the styles you'd use in the document-wide method. When you want to make global properties adjustments (such as positioning properties), you make them once in the style sheet and you're done. We'll demonstrate this process later in the chapter. Modifying Layer Properties with the Layers PanelAnother option for customizing layer properties is the Layers panel. You can use the Layers panel as a way to set a layer's ID, Visibility properties, Z-Index, and whether or not layers can overlap each other. The Layers panel, shown in Figure 11.9, can be selected directly from the CSS Styles panel group or by choosing the Layers option from the Window menu or by pressing F2. Alternatively, you can right-click a layer's border to access the context menu and choose the Layers Panel option to open the Layers panel. Figure 11.9. Use the Layers panel to visually set visibility, Z-Index, layer ID, and overlapping properties.
With the Layers panel open, notice that the style and overall appearance is strikingly familiar, looking much like a Layers panel would in an image-editing program such as Fireworks. For instance, you can drag layers above or below other layers, effectively changing the Z-Index of the layers on the page. TIP If you drag a layer in the Document window that doesn't contain a Z-Index, Dreamweaver automatically adds one for you. You can also click in the eyeball column to change the initial Visibility property for a layer. Finally, you can double-click in the Name column to change the Layer ID of the selected layer. All this and more is possible through the Layers panel. The following features are exposed from the Layers panel:
It's important to understand the place of the Layers panel. Sure, most of these properties can be set by simply selecting the layer and making the necessary change in the Properties Inspector. The difference between the Properties Inspector and the Layers panel however, is that the Layers panel allows you to work with layers even when they're hidden from view. Because the Properties Inspector becomes available only when a layer is selected, there is no way of changing the Visibility of a layer back to Visible once it's been Hidden if it weren't for the Layers panel. Also, it's important to note that the Layers panel represents the collection of layers on the page as opposed to a single layer, which is what the Properties Inspector is for. The Prevent Overlaps check box prevents all layers on the page from overlapping each other, as discussed in the next section. Preventing Layers from OverlappingAs mentioned in the previous section, you can use the Prevent Overlaps check box in the Layers panel to prevent all layers on your page from accidentally overlapping each other when you position them. To demonstrate this feature, follow these steps:
As mentioned earlier, this feature comes in handy when designing layer-based websites because it can prevent you from accidentally moving a layer above or below another layer. Nesting LayersSimilar to the process of nesting tables within a cell of another table, layer nesting is the process of placing content in one layer within another layer. By default, Dreamweaver doesn't automatically nest layers; instead, Dreamweaver allows you to enable this option in the Layers category of the Preferences window. To enable layer nesting in your site, follow these steps:
With that preference set, you can now create layers within other layers. For the most part, the process of nesting a layer within a second layer is as simple as drawing or inserting a layer within another layer. To do this, follow these steps:
It won't be overly obvious that the new layer is nested within the BgLayer layer. However, you can see that the layer is in fact nested by looking at the Layers panel, also shown in Figure 11.10. As you can see, the NestedLayer layer appears as a child node beneath its parent BgLayer layer. The real benefit to nesting layers becomes evident when working with Visibility properties. Because the default Visibility property of a layer is Inherit, the child layer always inherits the properties of its parent layer. What this means is that all we have to modify is the parent BgLayer layer. Visibility changes made to this layer propagate down to all child layers, effectively saving us from doubling our efforts. Although it may seem obvious that dragging a nested layer out of its container layer would un-nest a layer, this is in fact not true. To un-nest a layer, you must use the Layers panel to drag a child layer out of its current position and reposition it higher in the Layers panel list. Deleting a LayerIf you decide that a particular layer is no longer needed, you can easily delete it using one of three methods. The easiest way to delete a layer is to select it on the page and press the Delete or Backspace key on your keyboard. This action effectively removes the layer and its content from the document. Alternatively, select a layer from the Layers panel and press the Delete or Backspace key. Either method produces the same result. The third option for deleting a layer from the Document window is to right-click the <div> tag in the Tag Selector and choose the Remove Tag option from the context menu. |
EAN: 2147483647
Pages: 237