XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 1 Creating Dynamic Pages

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 2 Creating Dynamic Pages 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 layer attributes –Align layers –Nest layers –Add behaviors to a page –Create an link –Edit and delete behaviors

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 3 Using 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.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 4 Using Layers Layers are used in conjunction with 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.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 5 Inserting Layers You can insert a layer by drawing it in Design view. The borders of each layer that you draw in a page are visible in the Dreamweaver environment to make them easier to work with. The layer borders do not appear in the browser window. To draw the new layer, open the Web page and click the Draw Layer button on the Layout category on the Insert bar.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 6 Using Layers Home Page with new layer added

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 7 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 Property inspector.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 8 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 coordinates (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.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 9 Selecting, Resizing, and Moving a Layer Selected layer

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 10 Selecting, Resizing, and Moving a Layer Resizing a layer

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 11 Selecting, Resizing, and Moving a Layer Repositioning a Layer

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 12 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.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 13 Adding Content to a Layer Adding a Layer with Text Content to a Page

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 14 Adding Content to a Layer Layer with Text and Image Content

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 15 Adding Content to a Layer Setting the attributes for a graphic in a layer

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 16 Adding Content to a Layer Home page previewed in browser window before it is maximized

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 17 Adding Content to a Layer Home page previewed in browser window after it is maximized

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 18 Adjusting Layer Attributes The Property 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 layer’s stacking order.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 19 Adjusting Layer Attributes The Property 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.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 20 Adjusting Layer Attributes The Property inspector of the layer includes attributes that can be modified (Cont): –Class – A list of styles you created. You can select a style from the list to apply that style to the layer. –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.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 21 Adjusting Layer Attributes Layer with CSS Style Applied in Browser

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 22 Examining the Code for Layers Layers are actually div tags that use CSS styles to define the positions of the content elements within the opening and closing div tags. When you create a layer in Dreamweaver, a CSS style that defines the following is created inline: –The type of positioning –The layer’s left and top coordinates –The layer’s width and height –The overflow value –The z-index number

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 23 Examining the Code for Layers The style: style=“position:absolute; left:535px; top:200px; width:219px; height:101px; z-index:1; overflow: visible;” is placed as an attribute in the opening div tag. Style is the attribute name and everything to the right of the equal sign and in the quotation marks is the value.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 24 Examining the Code for Layers When you drag a layer to a new position or when you change the attributes in the Property inspector, Dreamweaver updates the inline style. It is sometimes useful to create external styles to define the layer positioning, for instance, if you plan to use the same positioning for multiple layers.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 25 Examining the Code for Layers Layer in Split View

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 26 Modifying Layers Layers: - give you more control over the placement of content on the Web page. - can be stacked to give you more interesting designs and animation options. - are assigned z-index numbers in the order they are created.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 27 Modifying Layers 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. Z-index numbers can be changed in the Property inspector. You can also change the stacking order of layers using the Layers panel. You change a layer’s order by dragging the layer to its new position in the list. Dreamweaver will automatically update the z-index numbers of the layers.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 28 Modifying Layers Adding a second layer to a page

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 29 Modifying Layers Changing the order of the layers using the layers panel

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 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.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 31 Aligning Layers Layers aligned at the top

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 32 Positioning Layers and Other Elements Using the Grid 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. You can adjust the grid’s size or appearance in the Grid Settings dialog box.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 33 Modifying Layers Repositioning layers using grid lines

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 34 Creating Nested 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.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 35 Modifying Layers Adding a third layer to the page

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 36 Modifying Layers Nested Layer Repositioned

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 37 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.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 38 Using the Netscape Resize Fix The layers Category in the Preferences dialog box

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 39 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.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 40 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.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 41 Converting Layers to Tables A Table created from the layers

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 42 Understanding Behaviors A behavior is code added to a Web page that allows users to interact with various elements in the Web page. 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.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 43 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.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 44 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.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 45 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.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 46 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.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 47 Understanding Behaviors Graphic added to the background layer

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 48 Understanding Behaviors Selected graphic in background layer

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 49 Understanding Behaviors Hotspots added to the graphic in the background layer

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 50 Understanding Behaviors A Second Layer and a Link Added to the Page

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 51 Understanding Behaviors The behavior added to the selected hotspot

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 52 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 link to allow a user to a message to you by typing mailto: and your address in the link text box.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 53 Understanding Behaviors Hidden layer previewed in a browser

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 54 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.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 55 Understanding Behaviors Edited Behavior for the SCLayer2 Layer

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 56 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 to Remote Host button on the Files panel toolbar –Click View list arrow and Local View –Select the updated files and then the Put Files button –Disconnect using the Disconnects from Remote Host button –Click View list arrow and Local View

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 57 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