2. DREAMWEAVER MX 2004 Chapter 7 Working with Layers
Copyright 2005, Paradigm Publishing Inc.

3. Performance Objectives
Understand layers and what they can be used for.
Set default layer preferences.
Draw layers.
Create nested layers.
Select, move, and resize layers.
Align multiple layers.
Insert content into layers.
Use the Property inspector to specify layer properties.
Add behaviors to layers.
Copyright 2005, Paradigm Publishing Inc.

4. left and top layer coordinates
Understanding Layers
A layer is indicated in an HTML document using paired division tags located in the body area of the page.
left and top layer coordinates
division tags
width and height
z-index
Copyright 2005, Paradigm Publishing Inc.

5. Understanding Layers…/2
Inside the tags are left and top layer coordinates that specify the location of the layer in relationship to the upper-left corner.
Layers will maintain their position on a page in a browser window even if the window is resized.
Specifying the same coordinate values for different layers places them one on top of the other in a page.
Layers can be hidden or visible, and behaviors can be used.
Copyright 2005, Paradigm Publishing Inc.

6. Understanding Layers…/3
The layer’s width, height, and z-index are specified inside the division tags.
The z-index indicates the order in which a layer will appear when it is stacked over other layers.
A layer with a higher z-index value will appear above a layer with a lower value.
The relative values determine the stacking order.
Copyright 2005, Paradigm Publishing Inc.

7. Understanding Layers…/4
layer with higher z-index value
Copyright 2005, Paradigm Publishing Inc.

8. Setting Default Layer Preferences
click Edit 
click Preferences
Copyright 2005, Paradigm Publishing Inc.

9. Setting Default Layer Preferences…/2
click Layers 
set the desired layer properties
Copyright 2005, Paradigm Publishing Inc.

10. Preferences – Visibility
This preference specifies the initial visibility of a layer.
When default is specified, most browsers will use inherit.
When inherit is specified, the visibility specified for a layer’s parent layer is applied.
The visible option makes a layer visible.
The hidden option hides a layer.
Copyright 2005, Paradigm Publishing Inc.

11. Preferences – Width and Height
These preferences specify the default height and width for layers created by inserting rather than drawing a layer.
Copyright 2005, Paradigm Publishing Inc.

12. Preferences – Background color
This preference specifies a default background color for layers.
Clicking the down-pointing arrow opens a color palette.
You can also type a hexadecimal color code in the text box.
Copyright 2005, Paradigm Publishing Inc.

13. Preferences – Background image
The Browse button can be used to browse and locate an image that will appear as the default background for layers.
Copyright 2005, Paradigm Publishing Inc.

14. Preferences – Nesting
This enables Dreamweaver MX 2004 to nest layers when the insertion point is placed inside a layer, and a new layer is drawn.
If this check box does not contain a check mark, placing the insertion point inside a layer and then drawing a layer creates an overlapping layer but does not nest the layer.
Copyright 2005, Paradigm Publishing Inc.

15. Preferences – Netscape 4 compatibility
This enables Dreamweaver MX 2004 to insert special JavaScript code in the head area of a document.
This will fix a resizing problem inherent in Netscape 4 browsers.
Copyright 2005, Paradigm Publishing Inc.

16. Creating Layers
One method is to draw layers using the Draw Layer button on the Insert bar.
Draw Layer button
layer-code marker
layer
Copyright 2005, Paradigm Publishing Inc.

17. Creating Layers…/2
When you move the mouse pointer into the Document window, it transforms into crosshairs.
Click and hold down the mouse button, and drag the crosshairs diagonally in any direction.
When you reach the desired layer size, release the mouse button.
Holding down the Ctrl key before or after clicking the Draw Layer button allows you to create multiple layers.
Copyright 2005, Paradigm Publishing Inc.

18. Creating Layers…/3
Layers also can be inserted using the Menu bar. 
click Insert 
point to Layout Objects 
click Layer
Copyright 2005, Paradigm Publishing Inc.

19. Creating Layers…/4
A layer appears at the insertion point location with the default dimensions specified in the Preferences dialog box Layers page.
If you cannot see layers, you need to make them visible. 
click the View Options button 
point to Visual Aids 
click to place a check mark
Copyright 2005, Paradigm Publishing Inc.

20. Creating Layers…/5
Layers containing no content are not visible when viewed in a browser unless a layer background color has been specified.
If the content inserted in a layer does not occupy the entire area of the layer, the remaining area is transparent, unless a layer background color has been specified.
Copyright 2005, Paradigm Publishing Inc.

21. Layer-Code Markers
When layers are created, yellow layer-code markers appear if the Invisible Elements option has been selected using the View options button and the Anchor points for layers check box is selected in the Preferences dialog box.
Copyright 2005, Paradigm Publishing Inc.

22. Layer-Code Markers…/2
Right-clicking a layer-code marker opens a context-sensitive menu.
Layer-code markers can make page elements shift position, although this occurs only in the Document window.
Copyright 2005, Paradigm Publishing Inc.

23. Deleting Layers
Layers can be deleted by selecting them and then pressing the Delete or Backspace keys.
Selecting a layer’s layer-code marker and pressing the Delete or Backspace keys will delete both the layer-code marker and its corresponding layer.
When deleting many layers, hold down the Delete or Backspace keys to speed up the process by deleting layers simply by clicking them.
Copyright 2005, Paradigm Publishing Inc.

24. Creating Nested Layers
A nested layer is contained inside another layer.
The layer nested inside another layer is referred to as a child layer.
The layer it is contained in is referred to as the parent layer.
A nested layer moves with its parent layer and inherits its visibility properties.
A child layer can be selected and moved independently of its parent layer.
Copyright 2005, Paradigm Publishing Inc.

25. Creating Nested Layers…/2
If the Minus button next to a parent layer name is displayed, nested layers are indicated in the Layers panel by a line connecting the layers.
If you see a Plus button, click it to see the names of any nested layers.
contracted mode
expanded mode
Copyright 2005, Paradigm Publishing Inc.

26. Creating Nested Layers…/3
If the Nesting option has been enabled in the Preferences dialog box, you can nest a layer by positioning the insertion point inside a layer and clicking the Draw Layer button.
Copyright 2005, Paradigm Publishing Inc.

27. Creating Nested Layers…/4
If the Nesting option has not been enabled, you can nest a layer by positioning the insertion point inside a layer and then dragging the Draw Layer button to a point inside the layer.
Another method is to click Insert on the Menu bar, point to Layout Objects, and then click Layer.
Look at the Layers panel to see the nesting status of a selected layer.
Copyright 2005, Paradigm Publishing Inc.

28. Selecting Layers
Click a layer-code marker to select its corresponding layer.
Layers can also be selected by moving the insertion point across a layer’s border until the move pointer appears.
Clicking the move pointer selects the layer.
You can also select layers by holding down the Shift key while clicking inside a layer.
Copyright 2005, Paradigm Publishing Inc.

29. Selecting Layers…/2
When a layer is selected, small black boxes appear on each of its borders and corners.
selected layer
move pointer
Copyright 2005, Paradigm Publishing Inc.

30. Using the Layers Panel Each layer is indicated under a default name.
Clicking a layer listing selects the corresponding layer in the Document window.
The Layers panel also indicates default layer visibility status.
An open eye indicates that a layer is visible.
A closed eye indicates that a layer is hidden.
Copyright 2005, Paradigm Publishing Inc.

31. Using the Layers Panel…/2
The Layers panel also contains a Prevent overlaps check box.
When this check box contains a check mark, layers cannot be overlapped.
Prevent overlaps
check box
hidden layer
visible layer
layer name
z-index value
Copyright 2005, Paradigm Publishing Inc.

32. Using the Layers Panel…/3
The z-index value for a layer is displayed.
Layers with higher values appear above layers with lower values.
You can change the z-index value by clicking it and typing a new value or by using the Layer Property inspector.
Another method is to drag the layer up or down in the Layers panel.
Dragging a layer upward increases the z-index number, while dragging it downward reduces it.
Copyright 2005, Paradigm Publishing Inc.

33. Using the Layers Panel…/4
Change default layer names by double-clicking them and typing a new name.
Rename layers descriptively so that their functions are easy to identify.
Layer names cannot contain spaces and should be composed only of letters and/or numbers.
The Layer Property inspector also can be used to change layer names.
Copyright 2005, Paradigm Publishing Inc.

34. Moving Layers
Place the insertion point over a layer border until the move pointer appears.
Click and drag the layer to the desired location.
Layers also can be moved 1 pixel at a time by selecting them and then pressing the Up, Down, Left, or Right Arrow keys.
If the Shift key is held down while the arrow keys are pressed, layers can be moved 5 pixels at a time.
Copyright 2005, Paradigm Publishing Inc.

35. Moving Layers…/2
Layers also can be moved by changing their left and top coordinates in the Layer Property inspector.
Layers cannot be moved so that they overlap if the Prevent overlaps check box is checked in the Layers panel.
Copyright 2005, Paradigm Publishing Inc.

36. Moving Layers…/3
When a layer is selected using the Layers panel, it can be moved by clicking the layer box to make the move pointer appear.
The layer then can be dragged to a new position.
layer box
Copyright 2005, Paradigm Publishing Inc.

37. Resizing Layers
Resize layers by selecting them and then dragging one of the resize handles.
resize handle
Copyright 2005, Paradigm Publishing Inc.

38. Resizing Layers…/2
If you hold down the Ctrl key, the Down Arrow key and Right Arrow key also can be used to resize a selected layer 1 pixel at a time.
Layers can also be resized by changing their width and height dimensions in the Layer Property inspector.
Copyright 2005, Paradigm Publishing Inc.

39. Resizing Layers…/3
More than one layer can be selected at a time by holding down the Shift key while clicking layer borders.
last layer selected
Copyright 2005, Paradigm Publishing Inc.

40. Resizing Layers Using the Menu Bar
The width or height dimension will be changed to match the corresponding dimensions of the last layer selected. 
click Modify 
point to Align 
click an option
Copyright 2005, Paradigm Publishing Inc.

41. Aligning Layers
Dreamweaver MX 2004 provides an easy way to align selected layer borders. 
click Modify 
point to Align 
click an option
Copyright 2005, Paradigm Publishing Inc.

42. Aligning Layers…/2
Depending on the layer position and the border that was aligned, layers might appear stacked.
The arrow keys can be used to separate them.
left borders aligned
Copyright 2005, Paradigm Publishing Inc.

43. Inserting Content into Layers
Layers can contain almost any kind of content, including text, images, tables, and multimedia.
Frames are one of the few types of content that layers cannot contain.
Text can be inserted into layers by positioning the insertion point inside a layer and then typing.
Copied text can be pasted into layers.
When selecting a layer with content, it is easy to inadvertently select the content instead of the layer.
Copyright 2005, Paradigm Publishing Inc.

44. Inserting Content into Layers…/2
Images, multimedia, and tables can be inserted into layers. 
click Insert 
select an option
Copyright 2005, Paradigm Publishing Inc.

45. Using the Layer Property Inspector
When layers are selected, the Layer Property inspector appears.
Copyright 2005, Paradigm Publishing Inc.

46. Layer Property Inspector – Layer ID
The Layer ID text box identifies a layer’s name.
New layers appear with default names.
A new name can be created for a layer or a previously named layer can be renamed by typing a new name.
Copyright 2005, Paradigm Publishing Inc.

47. Layer Property Inspector – L and T
Left (L) and top (T) are the coordinates used for positioning a layer on a page.
The values are indicated in pixels.
Left is the leftmost position of a layer and top is the topmost.
Copyright 2005, Paradigm Publishing Inc.

48. Layer Property Inspector – W and H
The width (W) and height (H) text boxes specify the dimensions of a layer in pixels.
Percentage values can be entered by replacing px (pixel) with a % (percent sign).
Copyright 2005, Paradigm Publishing Inc.

49. Layer Property Inspector – Z-Index
The Z-Index text box specifies the stacking order of the layer.
A higher number indicates that a layer will appear on top of a layer with a lower number.
The numbers do not have to be consecutive.
The z-index number can be changed by typing a new number over the old number.
Copyright 2005, Paradigm Publishing Inc.

50. Layer Property Inspector – Bg image
The Bg image text box specifies a background image for a layer.
The Browse for File button can be clicked to browse and locate a background image.
Copyright 2005, Paradigm Publishing Inc.

51. Layer Property Inspector – Vis
The Vis text box specifies the initial visibility of a layer.
When default is specified, most browsers will use inherit.
The inherit option follows the visibility specified for a layer’s parent layer.
The visible option makes a layer visible.
The hidden option hides a layer.
Copyright 2005, Paradigm Publishing Inc.

52. Layer Property Inspector – Bg color
The Bg color color box and text box specifies a background color for a layer.
Leaving this text box blank specifies a transparent layer.
Copyright 2005, Paradigm Publishing Inc.

53. Layer Property Inspector – Overflow
The Overflow property determines what happens when layer content exceeds its specified dimensions.
The visible option stretches a layer to display extra content.
The hidden option hides extra content.
The scroll option adds scroll bars to a layer.
The auto option instructs browsers to add scroll bars only when a layer’s content exceeds its specified dimensions.
Copyright 2005, Paradigm Publishing Inc.

54. Layer Property Inspector – Clip
The Clip property determines the visible portion of a layer.
Specifying left (L), right (R), top (T), and bottom (B) coordinates for a clip creates a rectangle or box inside a layer that contains the layer content that will be visible.
Clipping can be used to mask or crop portions of an image, but it is more frequently used for scripting purposes.
Copyright 2005, Paradigm Publishing Inc.

55. Adding Behaviors to Layers
Behaviors use JavaScript code to create events and actions that can be associated with layers to make them interactive.
Dreamweaver MX 2004 graphical tools enable you to attach behaviors to layers without knowing JavaScript.
When a viewer performs an event, an associated action is performed.
More than one action can be assigned to an event.
Copyright 2005, Paradigm Publishing Inc.

56. Adding Behaviors to Layers…/2
Click the Behavior panel Plus (+) button to open a drop-down menu.
Behaviors drop-down menu
Copyright 2005, Paradigm Publishing Inc.

57. Adding Behaviors to Layers…/3
Click a behavior to open a contextual dialog box that can be used to define behavior properties.
After you close the dialog box, the behavior appears in the Behaviors panel.
behavior events
behavior actions
Copyright 2005, Paradigm Publishing Inc.

58. Adding Behaviors to Layers…/4
The Show Events For command allows you to change the events listed in the drop-down menu to events supported by specific browser versions.
Clicking an event selects it.
Clicking the drop-down arrow displays a drop-down list with event types.
events drop- down menu
Copyright 2005, Paradigm Publishing Inc.

59. Draggable Layers
A Drag behavior can be attached to layers so that viewers can use the mouse to drag them.
This behavior can be used to create puzzles, games, and other interactive activities.
Copyright 2005, Paradigm Publishing Inc.

60. Draggable Layers…/2
Clicking the Drag Layer command opens the Drag Layer dialog box.
can be used to define area constraining layer movement
specifies how close layer must be to snap to drop target area
defines drop target area
Copyright 2005, Paradigm Publishing Inc.

61. Pop-up Message Windows
Pop-up messages are small dialog boxes that pop up when an event triggers this action.
Pop-up messages can be used only to contain a message, and the only choice a viewer has is to click the OK button to close the pop-up message.
Copyright 2005, Paradigm Publishing Inc.

62. Pop-up Message Windows…/2
More than one pop-up message can be attached to the same event.
In that case, messages appear consecutively.
Clicking the Popup Message command opens a Popup Message dialog box.
Copyright 2005, Paradigm Publishing Inc.

63. Show-Hide Layers
The Show-Hide Layers behavior can be used to cause a hidden layer to show or a visible layer to hide.
Clicking the Show-Hide Layers command opens the Show-Hide Layers dialog box.
Copyright 2005, Paradigm Publishing Inc.

64. Go To URL
The Go To URL behavior can be attached to a layer so that a layer event opens an HTML document in the same browser window.
When the Go To URL behavior is clicked, the Go To URL dialog box appears.
Copyright 2005, Paradigm Publishing Inc.

65. Converting Layers to Tables
The conversion process is not recommended because it produces unwieldy code that is difficult to edit.
If tables are to be used for page layout, it is much better to design them in Standard mode.
Learning CSS-Positioning for layer positioning is an even better and more forward-looking strategy.
Nested layers cannot be converted to tables.
Copyright 2005, Paradigm Publishing Inc.

66. Converting Layers to Tables…/2
click Modify 
point to Convert 
click Layers to Table
Copyright 2005, Paradigm Publishing Inc.

67. Converting Tables to Layers
click Modify 
point to Convert 
click Tables to Layers
Copyright 2005, Paradigm Publishing Inc.

68. COMMANDS REVIEW    How do you align layer borders? click Modify
point to Align 
click an option
Copyright 2005, Paradigm Publishing Inc.

69. COMMANDS REVIEW…/2    How do you convert layers to tables?
click Modify 
point to Convert 
click Layers to Table
Copyright 2005, Paradigm Publishing Inc.

70. COMMANDS REVIEW…/3    How do you convert tables to layers?
click Modify 
point to Convert 
click Tables to Layers
Copyright 2005, Paradigm Publishing Inc.

71. COMMANDS REVIEW…/4    How do you insert a layer? click Insert
point to Layout Objects 
click Layer
Copyright 2005, Paradigm Publishing Inc.

72. COMMANDS REVIEW…/5   How do you insert content into layers?
click Insert 
select an option
Copyright 2005, Paradigm Publishing Inc.

73. COMMANDS REVIEW…/6    How do you resize multiple layers?
click Modify 
point to Align 
click an option
Copyright 2005, Paradigm Publishing Inc.

74. COMMANDS REVIEW…/7    How do you specify layer preferences?
click Edit 
click Preferences 
click Layers
Copyright 2005, Paradigm Publishing Inc.

75. COMMANDS SUMMARY Align layer borders
Modify, Align, and then Left, Right, Top, or Bottom
Convert layers to tables
Modify, Convert, Layers to Table
Convert tables to layers
Modify, Convert, Tables to Layers
Insert a layer
Insert, Layout Objects, Layer
Insert content into layers
Insert, and then choose object
Resize multiple layers
Modify, Align, Make Same Width or Make Same Height
Specify layer preferences
Edit, Preferences, Layers Page
Copyright 2005, Paradigm Publishing Inc.