Dreamweaver MX

1
Tutorial 6 Using Layers for Page Layout and
Behaviors for Functionality
2
Using Layers for Page Layout and Behaviors for
Functionality

• In this tutorial, you will
• Insert a layer into a Web page
• Select, resize and move a layer
• Add content to a layer
• Adjust layer stacking order
• Adjust the attributes of a layer
• Align layers
• Nest layers
• Add behaviors to a page
• Edit behaviors

3
Organizing Content with Layers

• A layer is a transparent container placed on a
  Web page to hold different types of content.
• Layers have some advantages over other types of
  layout options.
• They can be dragged and positioned anywhere on
  the screen and stay there so matter what the user
  does (absolute positioning).
• They can be stacked so that the content overlaps.
• They can be animated, made invisible, and the
  order can be changed.

4
Organizing Content with Layers

• Layers are part of dynamic HTML, which is a
  combination of HTML enhancements and scripting
  language.
• Dynamic HTML can hide a layer and then make it
  visible based on a user action, for instance.
• Like all of the more advanced techniques, some
  browsers do not display layers properly.

5
Organizing Content with Layers
Home Page with new layer added
6
Organizing Content with Layers

• You can insert a layer by drawing it in Design
  view.
• For every drawn layer, a layer-code marker (small
  yellow square) appears.
• Layer-code markers can be dragged to another
  location if they get in the way of placing the
  layer properly.
• To draw the new layer, open the Web page and
  click the Draw Layer button on the Common tab on
  the Insert bar.

7
Organizing Content with Layers
Drawing a Layer
8
Organizing Content with Layers
The Drawn Layer
9
Selecting, Resizing, and Moving a Layer

• As usual, you must select the layer before you
  can work on it.
• To select it
• Click anywhere in the layer
• Click the layer selection handle in the upper
  left corner
• Click the layer-code marker
• Shift click each of the layers to select multiple
  layers
• To resize a layer, drag the handles or enter the
  size values in the Properties inspector.

10
Selecting, Resizing, and Moving a Layer

• Layers are positioned by
• X coordinates the position of the left edge of
  the layer.
• Y coordinates the position of the top edge of
  the layer.
• Z-index number the layers stacking order.
• When layers overlap, the bottom layers show
  through if the upper layers are transparent,
  otherwise the bottom layers are covered.

11
Selecting, Resizing, and Moving a Layer
The Selected Layer
12
Selecting, Resizing, and Moving a Layer
Resizing the layer
13
Selecting, Resizing, and Moving a Layer
Repositioning the Layer
14
Adding Content to a Layer

• Layers can contain any type of content except
  frames.
• A layer can, however be placed within a frame.
• Content is added to layers in the same way it is
  added to a Web page.
• You can also move content to a layer from an
  existing page by dragging it.

15
Adding Content to a Layer
Adding a layer with content to a page
16
Adding Content to a Layer
Link text behind the layer
17
Adding Content to a Layer
Setting the attributes for a graphic in a layer
18
Adding Content to a Layer
Home page previewed in browser window before it
is maximized
19
Adding Content to a Layer
Home page previewed in browser window after it is
maximized
20
Adjusting Layer Attributes

• The Properties inspector of the layer includes
  attributes that can be modified
• Layer ID a unique name for that layer.
• L (Left) and T (Top) the positions of a layer
  measured in pixels from the left and top margin.
  In a nested layer, the references are to the
  parent layer.
• W (Width) and H (Height) the dimensions of the
  layer.
• Z-index the layers stacking order.

21
Adjusting Layer Attributes

• The Properties inspector of the layer includes
  attributes that can be modified (Cont)
• Vis (Visibility) whether or not the layer is
  visible when the page is loaded. Options are
  default, inherit, visible and hidden.
• Bg Image (Background Image) the background
  image for a layer. The default is transparent.
• Bg Color (Background Color) the background
  color for the layer. The default is transparent.

22
Adjusting Layer Attributes

• The Properties inspector of the layer includes
  attributes that can be modified (Cont)
• Tag The HTML tag that is created when a layer
  is created. Options are DIV and SPAN.
• Overflow specifies how a layer will appear if
  its content exceeds its specified size. Options
  are visible, hidden, scroll or auto.
• Clip the portion of a layer that will be
  visible in a browser.
• You can also create a CSS style to apply layer
  attributes.

23
Adjusting Layer Attributes
Overlapped layers
24
Modifying Layers

• Layers give you more control over the placement
  of content on the Web page.
• Layers can be stacked to give you more
  interesting designs and animation options.
• Layers are assigned z-index numbers in the order
  they are created.
• Higher z-index numbers mean that the layer will
  be on top of any with lower numbers.
• Stacking order is changed by changing the z-index.

25
Modifying Layers

• Z-index numbers can be changed in the Properties
  inspector.
• You can also change the stacking order of layers
  using the Layers panel.
• You change a layers order by dragging the layer
  to its new position in the list.
• Dreamweaver will automatically update the z-index
  numbers of the layers.

26
Modifying Layers
Adding a second layer to a page
27
Modifying Layers
Entering text into the new layer
28
Modifying Layers
Changing the order of the layers using the layers
panel
29
Modifying Layers
Repositioning the layer
30
Modifying Layers

• You can drag layers on the page to reposition
  them.
• You may also wish to align elements for a neater
  look.
• To align borders, hold the Shift key down and
  select the layers.
• All of the selected layers will align to the last
  one selected.
• You can align to the left, right, top or bottom.

31
Modifying Layers
Layers aligned at the top
32
Modifying Layers

• You can also realign layers using the grid.
• The grid is a set of intersecting evenly spaced
  lines that provide a grid for your use in
  aligning objects.
• The grid is hidden by default, but can be
  displayed.
• The Snap to Grid command forces every object to
  jump to the closest grid lines.
• You can adjust the grids size or appearance in
  the Grid Setting dialog box.

33
Modifying Layers
Repositioning layers using grid lines
34
Modifying Layers

• Nested layers work like nested tables and frames,
  except that nested layers do not have to be
  physically positioned within each other.
• Nesting layers instead refers to the underlying
  code.
• To nest layers, you use the Layers panel, press
  and hold the Ctrl key and then drag the layer to
  be nested over the parent layer.
• The nested layer will be indented under the
  parent layer in the Layers panel. The reverse
  action will un-nest the layers.

35
Modifying Layers
Adding a third layer to the page
36
Modifying Layers
Nesting the third layer in the second layer
37
Modifying Layers
The Nested layer on the page
38
Using the Netscape Resize Fix

• Netscape 4 has a bug that causes layers to move,
  scale improperly or disappear if a viewer resizes
  the browser window.
• Dreamweaver has a built in fix for this error
  that you can add to pages with layers.
• The Netscape Resize Fix forces the page to reload
  if the window is resized, eliminating the
  problem.
• This fix option is available in the Layers
  section of the Preferences dialog box.

39
Using the Netscape Resize Fix
The layers Category in the Preferences dialog box
40
Converting Layers to Tables

• Layers are great tools for creating Web page
  layouts, but often have display problems with
  some of the older browser versions and may not be
  displayed properly.
• A solution is to use layers to create the page
  and then create a second version of the site that
  uses tables instead of layers.
• Code in the layered Web page would then route the
  user with older versions of browsers to the
  alternate page.

41
Converting Layers to Tables

• The Layers to Table command will convert the
  layers on a page to a table (or vice-versa).
• This will not work on layers that are nested or
  overlap, so you will want to enable the Prevent
  Overlap feature in the Layer panel.
• Dreamweaver will maintain the original layout and
  create empty cells to hold the content in place.
• Dreamweaver will also create a file called
  transparent.gif and use it to maintain cell size.

42
Converting Layers to Tables
A Table created from the layers on the page
43
Converting Layers to Tables
Repositioning the logo after the conversion
44
Understanding Behaviors

• A behavior is code added to a Web page that
  causes an action when the user does something.
• A behavior is like an equation
• an object an event an action
• Where
• Object is the element on the Web page that the
  behavior is attached to.

45
Understanding Behaviors
Event is what takes place and has two
parts user event (trigger action) event
handler (code used to refer to the event). Action
is what happens when the event is performed on
the object.
46
Understanding Behaviors

• The easiest way to insert behaviors into your
  pages is to use a preset behavior tool.
• You have already used several of these tools,
  i.e. Rollover buttons and the Navigation Bar
  button.
• You can see the behaviors that Dreamweaver has
  created for you by selecting an object and
  opening the Behaviors panel.
• You can also use the Behaviors panel to create
  customized behaviors.

47
Understanding Behaviors

• When using the Behaviors panel to create
  behaviors, you select an object, and then a
  prelisted action/event handler.
• Dreamweaver will combine them and create the code
  to create the behavior.
• You can also create your own custom behaviors by
  writing your own code.

48
Understanding Behaviors

• The Behaviors panel is a menu for ordering
  behaviors You have several choices
• Object first you chose the object on the page.
• Target browser then you choose the browser
  brand and version to be compatible with.
• Action you will then choose from within actions
  that are compatible with the chosen browser.
• Event Dreamweaver then displays a list of
  possible events for you to chose from.
• Dreamweaver will then create the behavior and
  insert the correct code.

49
Understanding Behaviors
Adding a graphic to a layer
50
Understanding Behaviors
The new graphic selected
51
Understanding Behaviors
Hotspots added to the graphic
52
Understanding Behaviors
A Link added to the layer
53
Understanding Behaviors
A third layer added to the page
54
Understanding Behaviors
The images visually aligned
55
Understanding Behaviors
The behavior added to the hotspot
56
Understanding Behaviors

• There are several ways to insert behaviors
  without using the Behaviors panel.
• You have already used the Common Tab of the
  Insert bar to insert Rollover and Navigation bar
  buttons.
• You have also added links which are also
  behaviors.
• You may want to also create an e-mail link to
  allow a user to e-mail a message to you by typing
  mailto and your e-mail address in the link text
  box.

57
Understanding Behaviors
Previewing graphic behavior in a browser window
58
Understanding Behaviors
Previewing a hidden layer in a browser window
59
Understanding Behaviors

• You can also edit and delete behaviors.
• Once created, you can edit the event that happens
  or you can delete the behavior entirely.
• Using the behaviors panel, you can select the
  object and change the event associated with it.

60
Understanding Behaviors
Modifying the event associated with the behavior
61
Updating the Web Site on the Remote Server

• When pages are changed, they should be updated on
  your remote site.
• To update
• Connect to the remote server using the Connects
  button on the Site panel
• Click View list and Local View.
• Select the updated files and then the Put Files
  button
• Click the View list and then Remote view
• Disconnect using the Disconnects button

62
Tutorial Summary

• You should now be able to
• Create, select, resize and move layers
• Add content to layers
• Set layer and attributes
• Adjust the stacking order of layers
• Align and nest layers
• Convert a page with layers to one with tables
• Create and edit behaviors