Hour 17 Frames and Layers

What You’ll Learn in this Hour:

How to create a frameset to separate the contents of a page

How to edit the frameset and its individual frames

How an inline frame differs from a frameset and how to use it

How to change the content of a frame using the Set Text of Frame behavior

What layers are and how they differ from frames

How to create and edit layers to create an interactive experience

How to use layers and inline frames together to make a preview of a hyperlink

Introduction

So far you have learned how to create page layouts using CSS (Cascading Style Sheets). But there are times when CSS just doesn’t cut it, and times when you want some added functionality you just can’t get with a style sheet. In this hour, you will learn about frames and layers and see how using these layout tools smartly can improve the functionality of your websites.

Frames and layers are layout tools that have been around for quite some time, and at one time each was the hot new thing in web design. In this hour you will take a closer look at both these techniques and learn when to use (and when not to use) them.

Frames: An Introduction

Frames (plural) are a group of web pages displayed together in a web browser. A separate HTML (Hypertext Markup Language) file, commonly referred to as a frameset, controls the frames. The frameset creates a group of frames, gives a name to each frame, and tells the browser how to position the different frames in relation to one another. There is also a subset of frames called an iFrame. The i is short for inline and, as its name suggests, this is a box in which a different HTML page displays inside the current page—more on that later.

For the most part, designers use frames to completely separate the navigational tools from the content. That way you can let the user scroll through lists of navigational links or large documents independently of other page elements. The Microsoft Developer Network Library uses frames in this manner to separate the header and sidebar navigation from the document content (see Figure 17.1). That way the visitor has immediate access to the navigational tools in the header and can scroll through the library archive to the left without losing her place in the document she is currently reading. Likewise she can scroll through the document without either the header or the sidebar moving away from its current location.

Figure 17.1 The MSDN Library demonstrates an effective use of frames and is also a good resource for further information on Expression Web 2.

The MSDN Library page consists of three separate frames that each display different web pages. This layout hints at one of the major problems when using frames: Because the actual page content is separate from the overall layout, the content pages don’t contain any navigational tools. As long as they display as intended within the frameset, this is not a problem. But if a user accesses them from outside the frameset, the visitor loses the ability to navigate to the rest of the site. This is especially problematic because search engines usually index individual pages and not framesets, so a visitor that finds a certain page in a search engine is likely to land on just the content page without any of the navigation attached.

Try it Yourself

Create a Web Page with Frames

As it does with CSS layouts, Expression Web 2 comes with a series of preconfigured framesets for you to use. This makes the initial process of building a frames-based web page much easier.

1. In the Folder List task pane, create a new folder called Frames and double-click it to select it. Select File, New, Page from the menu bar to open the New dialog.

2. In the New dialog, select Frames Pages from the menu. This opens the preset frames layouts in the next window and gives you a short description and a preview of each frameset (see Figure 17.2).

Figure 17.2 By selecting Frames Pages in the New dialog, you get a list of preconfigured frames layouts with a short description and a preview.

3. Select Banner and Contents and click OK to build the frameset. This opens the frameset in Design view, and Expression Web 2 asks you to set an initial page or create a new page for each frame (see Figure 17.3).

4. Before you continue, press Ctrl+S to save the frameset. Name the file frameset.html and save it in the Frames folder. Click the New Page button in the top banner. This changes the banner to a white page with a cursor in it. Now you are actually looking at two separate HTML pages: the frameset that defines the overall layout, and the new page that is visible only in the banner area. Do the same for the sidebar and the content area as shown in Figure 17.4.

5. Press Ctrl+S again to save the new frame pages. This opens the Save As dialog and highlights the first frame (the banner). Name this page bannerFrame.html and click Save. Expression Web 2 creates the file and the Save As dialog opens again—this time with the sidebar highlighted (see Figure 17.5). Name this page navigationFrame.html and click Save. The Save As dialog opens for a third time and Expression Web 2 highlights the main content area. Name the final page kenny.html and click Save. You saved all the pages and you can now start editing each one individually.

Figure 17.3 After building the frameset, you define the contents of each frame by either inserting the address of an existing page or creating a new page.

Figure 17.4 By clicking the New Page buttons in all three frames, you create three new pages.

Figure 17.5 As you save each page, Expression Web 2 opens the next one and tells you what frame you are saving by highlighting the frame in the preview window on the right. In this image, Expression Web 2 is highlighting the sidebar.

The Frames folder now has four files in it: frameset.html, bannerFrame.html, navigationFrame.html, and content.html. The three last pages you created are normal HTML pages that you can open separately. frameset.html is an HTML file that contains only information about the spatial relationship between the different frames. Beyond that, it is empty. If you press F12 to preview the page in your browser, you see the three frames but the address bar tells you that you are actually looking at the frameset.html file—the other pages are embedded.

Editing Individual Frames

Now that you have created the frames pages, it’s time to insert some content into the frames. Because each frame contains a separate HTML page, you can edit it in the same way you have done throughout this book—by inserting text and images and applying styles or style sheets.

This frameset will be a simple archive with a list on the left and pages for each of the items on the right. Start by placing the cursor in the banner frame and entering Kipple Archive. Set the font style to H1 and attach the kippleStyles.css style sheet to the page using the Attach Style Sheet function. Expression Web 2 applies the new style to only the top frame. In the left frame, create an unordered list and give the first list item the text Kenny Squeeze Toy. In the final frame, insert the KennyOriginal.jpg image from the Images folder.

Using the CSS skills you have learned throughout this book, you can now make styling changes to the individual pages. Create an li style in the page in the left frame, and change the List-Style-Type setting to None. Create a ul style in the same frame and set the borders and margins to 0px. Create a new class called .alignCenter in the right frame. Change the Margin-Left and Margin-Right settings to Auto and change the Display setting under Layout to Block. Apply the new class to the <img> tag using the Quick Tag Selector. Now you have three different style sets for the three different pages, all working together to create an overall layout (see Figure 17.6).

Figure 17.6 The contents of each page within the frameset are styled separately by the styles defined in each page.

Try it Yourself

Edit the Frames Layout

The actual layout and functionality of the frameset as a whole are contained within the frameset.html file, not the individual frames. So, to change the layout and/or relationship between the different frames, you have to edit frameset.html.

There are many ways in which to change the layout of the frames. The simplest one is to grab the frame borders with the mouse and drag them to a different size. But for more detailed control, it is better to use the Frame Properties dialog.

1. To open the Frame Properties dialog, right-click inside the frame you want to change (in this case the left frame) and select Frame Properties from the context menu (see Figure 17.7).

Figure 17.7 The Frame Properties dialog lets you configure the properties of the frame in relation to the other frames. These properties have no direct effect on the page within the frame, only how the browser displays it.

2. In the Frame Properties dialog, you can set various different attributes. The Name attribute is the identifying name of the frame. This is the name you use when targeting the frame with links. Change the name to sidebar.

3. Initial Page is the first page displayed when a browser opens the frameset.html page. Because this is the navigation frame, leave it the way it is.

4. Long Description and Title are fields used by screen readers to describe the contents of the frame for visitors that cannot see the content. Long Description links to a file with a long description. Title is a short description of the frame. These two attributes work in the same way as the alternative text and long description attached to image files. Leave the Long Description field blank and insert Kipple Archive list-menu in the Title field.

5. Frame Size defines the physical size of the frame in relation to the other frames on the page. The Width and Row Height attributes can be set to a numeric value that is relative (in relation to the other frames), percent (of the entire width or height of the page in the browser), or pixels. To give the menu some more room, set the Width attribute to 200 pixels.

6. Margins refer to the space between the walls of the frame and the content within it in much the same way that the padding in CSS relates to the box. Changing the margin values in the frame properties creates a smaller or larger buffer zone for the content. Setting the margins to zero can look very strange, but might be exactly what you want if you are styling the individual frame content with CSS. For this example, leave the values as they are.

7. Under Options, if the Resizable in Browser box is checked, the visitor can grab the frame borders and change the size of the frame in the browser (this affects only the page in the browser, not the actual page on the server). In this case, and almost every case, this option should be unchecked. Show Scrollbars gives you the option of deciding whether scrollbars should be visible if the content doesn’t fit on the screen. It can be set to Always, If Needed, or Never. In most cases, the If Needed option is the right way to go. The user has no way to see any content that spills outside the frame if this option is set to Never and the visitor has a very small screen or the content is too large to fit. Set Show Scrollbars to If Needed for this frame.

8. The last function in the Frame Properties dialog is the Frames Page button. This button opens the page properties for the frameset page (see Figure 17.8). When the visitor opens the frameset page, the browser considers this file to be the page and regards the pages within the frames as displayed information. In other words, all the information sent to the browser, such as title, page description, keywords, and so forth, comes from the frameset page. By clicking the Frames Page button, you have access to all these properties. This is also where you control the frame borders. Their width is defined in pixels by the Frame Spacing value and they can be turned on and off with the Show Borders setting. Set the Frame Spacing value to 1px and click OK twice to apply the changes.

Figure 17.8 By clicking the Frames Page button, you can access the page properties for the frameset page. From here you can control the thickness and visibility of the frame borders, among other things.

You can also split and delete frames just as you would with table cells. To split a frame into two frames, either horizontally or vertically, select the frame by clicking anywhere inside it and choose Format, Frames, Split Frame from the menu bar. This opens the Split Frame dialog where you can choose whether to split the frame in two horizontally or vertically. To delete a frame, select it in the same way and choose Format, Frames, Delete Frame from the menu bar.

Making Framed Navigation

As you learned earlier, the main reason you would use frames is to separate the navigation from the content. After the frameset is set up, this is a simple operation as long as you keep tabs on what you are doing. This is where the frame name comes in. When you create a hyperlink in one frame that you mean to open in a different frame, you target that frame using the frame’s name. In the past you had to remember the names of the different frames, but Expression Web 2 has taken away that barrier and made the process much easier:

1. Before you can create a hyperlink to a new page, you need a new page to link to. In the Folder List task pane, open the Frames folder and open the kenny.html file. Click File on the menu bar, select Save As, and change the filename to desk.html. This creates a new HTML file called desk.html (see Figure 17.9). Right-click the image in the new file, select Picture Properties, and change the picture file to the desk.jpg file found in the Images folder. Save the file and close it.

Figure 17.9 Creating a new file can be as easy as clicking Save As and changing the name in the Save As dialog. After you create the new file, you can make changes to it without having to worry about the old file.

2. In the frameset.html file, add a second list item to the left frame and call it The Kippled Desk. Highlight the first line item, right-click, and select Hyperlink from the context menu to open the Insert Hyperlink dialog. Navigate to the kenny.html page in the Frames folder. Then click the Target Frame button to open the Target Frame dialog (see Figure 17.10). There you can pick what frame the hyperlink should open the new page in, either by clicking the frame in the Current Frames Page area or selecting one of the Common Targets. Click the left frame in the Current Frames area and the Target setting changes to Main (the name of the right frame). Click OK twice to create the hyperlink.

Figure 17.10 The Target Frame dialog lets you pick what frame to target by clicking a visual representation of the current frameset or selecting one of the common targets.

3. Repeat the same process with the second line item and link it to the desk.html page you created earlier. Save and preview the page in your browser.

When you click the two hyperlinks in your browser, you see that the right frame changes between the Kenny.html page and the desk.html page whereas the banner and sidebar frames remain unchanged.

Creating and Modifying Inline Frames

Unlike the frameset, which is a series of frames that contain the content, the inline frame (often referred to as the iFrame) is a frame inserted into a page to display the contents of a different page. An easy way to understand how an inline frame works is to imagine the frame as a hole cut into the page and filled with the contents from a different page.

Inline frames can be inserted anywhere within an HTML page and, as their name suggests, they work as other inline items. That is, they line up alongside the current line of text. Inline frames are a great way of inserting content from other websites into a page without having to either copy the content over or link to it.

1. Create a new page and call it inlineFramePage.html. In the page, insert a headline and two paragraphs of text.

2. Place the cursor at the beginning of the second paragraph and press Enter to create a new paragraph. Move the cursor to the new empty paragraph in the middle. Insert an inline frame in one of two ways: select Insert, HTML, Inline Frame from the menu bar, or drag and drop an inline frame from the HTML submenu in the Toolbox task pane (see Figure 17.11).

Figure 17.11 You can insert an inline frame by dragging and dropping the Inline Frame function into Design view from the Toolbox task pane.

3. When you insert the inline frame, Expression Web 2 gives you the same two choices you saw with the frameset: Set Initial Page and New Page. Select Set Initial Page and the Insert Hyperlink dialog opens. The hyperlink you set in this dialog becomes the content of the inline frame. Set the address to http://blog.pinkandyellow.com and click OK. Because this is a live website, Expression Web 2 navigates to the site and inserts the page into Design view if you have an open Internet connection (see Figure 17.12).

Figure 17.12 When you set the inline frame hyperlink to an external site, Expression Web 2 loads the external site into Design view.

4. To change the size of the inline frame, select it by clicking close to the outer edge of the inline frame and then drag the handles to the desired size.

To make more advanced changes to an inline frame, you can change the inline frame properties by right-clicking the inline frame and selecting Inline Frame Properties from the context menu. As you can see from Figure 17.13, the Inline Frame Properties dialog and its functions are similar to the Frames Properties dialog you encountered earlier (refer to Figure 17.7).

Figure 17.13 The Inline Frame Properties dialog gives you detailed control of all aspects of the inline frame.

From here you can change the initial page URL, the size, whether to use scrollbars, the alternative text (if the browser does not support inline frames), and a host of other options. You can also give the inline frame a unique name just like the earlier frames so that hyperlinks and actions can target it.

Set Text of Frame Behavior

You learned about behaviors in Hour 16, “Using Behaviors,” but a couple behaviors were not covered: specifically, the Set Text behaviors. Now that you know how to use frames, you can take a closer look at the Set Text of Frame behavior

The Set Text of Frame behavior sends a block of predefined HTML code to the defined frame and replaces the current content of the frame with this code. You can use it to target any frame, whether in a frameset or an inline frame. Because the Set Text of Frame behavior only works on frames displaying pages from the current site, before starting this tutorial you need to change the hyperlink of the inline frame to one of the other pages in the MyKipple site, for example default.html.

1. First you need an element to attach the behavior to. Place the cursor to the right of the inline frame and create a new interactive button by choosing Insert, Interactive Button from the menu bar. Set the button text to Change Text and choose one of the layouts available. Make the changes you want to the button, but leave the Link area empty (see Figure 17.14). Click OK to insert the new button.

Figure 17.14 When you leave the Link area in the Interactive Button dialog empty, Expression Web 2 does not attach an onclick event to the button. One has to be inserted later.

2. With the new button selected, choose Task Panes, Behaviors from the menu bar. Click Insert and select Set Text of Frame from the Set Text submenu. Doing so opens the Set Text of Frame dialog (see Figure 17.15).

Figure 17.15 The Set Text of Frame dialog lets you control what frame to target, what text to insert (in HTML code), and whether you want the frame to retain its background color.

3. In the Set Text of Frame dialog, you can choose what frame to target from a drop-down menu (in this case there is only one frame on the page and therefore only one option). In the Text area, you can insert plain text, HTML code, or a combination of both. The Preserve Background Color check box lets you decide whether you want to keep the background color from the last content visible in the frame. Insert some text with basic HTML coding such as <strong> or <em> and click OK to apply the behavior to the button. A new onclick event appears in the Behaviors task pane with the Set Text of Frame action attached.

4. Save the page (the Save Embedded Files dialog opens to save the image files for the new button) and test it in your browser.

When you click the button you just inserted, the content of the inline frame changes to the text you inserted in the Set Text of Frame dialog (see Figure 17.16).

Figure 17.16 When triggered, the Set Text of Frame behavior changes the text content of the targeted frame to what the designer defined.

As an example, you could use the Set Text of Frame behavior in conjunction with the jump menu to display different messages to the user depending on his selections in the menu.

Creating Advanced Functionality Using Layers

Another advanced layout technique is the use of layers. Whereas inline frames are inserted into the content of the page, layers contain boxes that float on top of the content in the page. This can be a very useful tool when you want to create a more interactive experience for the visitor. One of the reasons layers are used is the ability to make them invisible. As a result, you can create highly advanced elements such as pop-up menus or boxes that the user can trigger.

By default, Expression Web 2 places all layers within an absolutely positioned <div> tag so that you have complete control of the position of the layer within the page. Because the layer is absolutely positioned, three attributes control the layer’s physical placement. Left controls the distance between the left side of the layer and the left side of the page, Top controls the distance between the top of the layer and the top of the page, and Z-Index controls the imagined position of the layer in three-dimensional space if you stack several layers on top of one another.

Creating a Layer

To help create and edit layers, Expression Web 2 has a specialized task pane just for this layout tool. To open it, select Task Panes, Layers from the menu bar. The Layers task pane opens in the same area as the Behaviors task pane (see Figure 17.17).

Figure 17.17 The Layers task pane gives you full access to all the layers and layer functionality on the page.

1. In the inlineFramePage.html page, place the cursor at the beginning of the first paragraph. Click the Draw Layer button in the Layers task pane, and draw a small box by clicking and dragging the mouse in Design view (see Figure 17.18).

Figure 17.18 To draw a layer, simply click the Draw Layer button and then click and drag the layer to the desired size in Design view. You can always re-size it later.

2. When the layer is drawn, the cursor should appear within it. If not, click it with your mouse to activate it. Drag and drop the kennyOriginal_small.jpg image into the layer. The image should now hover over the rest of the content.

3. In the Layers task pane, right-click the layer1 instance and select Modify ID from the context menu. Change the ID of the layer to kennyThumb.

4. In the Layers task pane, click twice on the layer just underneath the eye to set the Visibility attribute to Hidden (no eye means default, open eye means visible, and closed eye means hidden). The image disappears from the screen (see Figure 17.19). If you look in the CSS Properties task pane, you see that the Visibility attribute has been set to Hidden.

5. Highlight a word in the first paragraph next to the layer you just inserted and create a hyperlink that points to the kenny.html file you created in the Frames folder.

Figure 17.19 You can use the eye icon in the Layers task pane to toggle a layer’s visibility among default, visible, and hidden.

6. With the new hyperlink selected, go to the Behaviors task pane and insert a new Change Property behavior.

7. In the Change Property dialog, check the Select Element option, and set the element type to <div> and the element ID to kennyThumb. Doing that means the Change Property behavior will affect the layer you just created.

8. Click the Visibility button and set the visibility style to Visible. Click OK. Check the Restore on Mouseout Event option and click OK to apply the behavior (see Figure 17.20).

Figure 17.20 You can use the Change Property behavior to change the visibility of layers.

9. The default event for the Change Property behavior you just added is onclick. Change it to onmouseover so that the image becomes visible when a visitor hovers over the hyper-link. Save and test the page in your browser.

When you open your browser and hover over the hyperlink you just created, the layer with the image becomes visible and hovers on top of the text (see Figure 17.21).

Figure 17.21 The layer with the kennyOrigina l_small.jpg image hovers over the rest of the content when the mouse touches the hyperlink.

To move the location of the layer, click the layer in the Layers task pane to select it and hover the mouse over the tag selector to turn it into a four-way arrow. By clicking the tag selector, you can move the layer anywhere on the page. As you learned earlier, the layers have absolute positioning, so the distance from the left and top edges of the page or a containing tag with its position defined form the basis for the layers’ final position (see Hour 14, “Building the Framework,” on positioning).

Creating a Layer Containing an Inline Frame

You can use layers in conjunction with inline frames to make a fancy pop-up effect in which the user previews the linked page in real-time without going to the actual page

1. Open the default.html page and find the text Do Androids Dream of Electric Sheep? that contains a hyperlink to the Amazon.com page for the book. Right-click the text, choose Hyperlink Properties, and copy the hyperlink address by highlighting it and pressing Ctrl+C. Close the Edit Hyperlink dialog without making any changes.

2. Place the cursor at the beginning of the paragraph that contains the hyperlink. Open the Layers task pane and use the Draw Layer function to draw a medium-sized layer directly underneath the hyperlink. From the Toolbox task pane, drag and drop an iFrame into the new layer (see Figure 17.22).

Figure 17.22 Layers can contain any kind of HTML element, including inline frames.

3. Click the Set Initial Page button in the inline frame and paste the Amazon.com link you copied earlier into the address bar. Expression Web 2 might tell you that the content on the page requires extra software to display properly. If it does, just click No. The page might not display properly inside Design view, but it will in a browser. Select the inline frame by clicking close to the outer border and resize it to fit the layer.

4. Change the Layer ID to amazonPreview by double-clicking the layer name in the Layers task pane (see Figure 17.23). Set the Visibility attribute of the layer to Hidden by clicking twice on the area underneath the eye.

5. Select the hyperlink and use the Behaviors task pane to attach a Change Property behavior to it. In the Change Property dialog, select the div element amazonPreview and set the Visibility attribute to Visible. Check the Restore on Onmouseout Event box and click OK to apply the behavior.

6. With the hyperlink still selected, change the event of the Change Property action to onmouseover. Save the page and preview in your browser.

Figure 17.23 Even after setting the layer’s visibility to hidden, the inline frame will still be visible in Design view. But when you preview the page in a browser, you see that the browser hides the frame.

When you hover the mouse over the hyperlink in your browser, the layer opens with the inline frame inside it and shows you what the linked page looks like in real-time (see Figure 17.24).

Figure 17.24 With the Change Property behavior attached to the hyperlink, the layer with the inline frame opens only when the visitor hovers over the hyperlink.

Set Text of Layer Behavior

The Set Text of Layer behavior works the same way as the Set Text of Frame behavior. When applied, it changes the content of the selected layer to the text or HTML content inserted into the Set Text of Layer dialog (see Figure 17.25).

Figure 17.25 The Set Text of Layer behavior works exactly the same way as the Set Text of Frame behavior except it targets layers rather than frames.

Summary

Frames and layers have been, and still are, important components of advanced web design. In this hour, you got a thorough walkthrough of how you can use these layout elements to add interactivity to your sites.

This hour was packed with a lot of information, so it is not surprising if you feel a little bit overwhelmed by all the new things you learned. To help you make sense of it all, think of it this way:

A frame (and an inline frame) is a hole cut in the page and you fill it with the contents of a different page.

A layer is a box placed on top of the page and you fill it with HTML content including inline frames.

In this hour, you learned how to set up and use a frameset to completely separate the contents from the navigation. You learned how to define and configure framesets, how to change and resize the individual frames, and how to make hyperlinks that target the other frames.

You also learned how to make and use inline frames, and saw how they can enhance your site. Inline frames differ from framesets in that they are placed inside a page rather than alongside other frames. Designers often use them to display external content, such as other web pages, and interactive content, such as Silverlight applications.

To top off the frames portion of this hour, you learned how to use the Set Text of Frame behavior to change the contents of a frame. You can use this behavior to target both inline frames and framesets.

In the second half of the hour, you learned about layers—more specifically how to create them and edit them. One of the most important features of layers is the ability to hide them and their content and then use behaviors to make them visible again. This technique enables you to make some highly interactive and very impressive features easily.

This hour only scratched the surface of what is possible when using layers. In the next hour, you will create a full fledged drop-down navigation menu using the same techniques you learned here.

Q&A

Q. I created a new hyperlink in the frameset, but when I clicked it in the browser the contents in the same frame changed rather than the one I wanted to change.

A. When you click a link and the current frame changes (or a different frame from the intended one changes, for that matter), there is something wrong with your targeting. Most likely you simply forgot to change the target frame or you clicked the wrong target frame in the Target Frame dialog. To fix this problem, open the Hyperlink Properties dialog and ensure that the target frame is correct.

Q. When I click one of the links, the entire frameset appears in the right frame. Now the entire site is doubled up!

A. A common problem when using framesets is nested frames, which means that the entire frameset opens inside one of the frames. This is because you created a hyperlink to the frameset rather than the actual page you wanted to link to. To avoid this problem, always include the word frameset in the filename for your framesets and the word frame in the filename of single frame pages.

Q. I created several different layers, but there is no real system to which one appears on top. What is going on?

A. If you create multiple layers in one location and you want them to appear in a particular order, you need to change the z-index of each of the layers so that the lowest layer has the lowest number and the highest layer has the highest number.

Workshop

The Workshop has quiz questions and exercises to help you put to use what you just learned. If you get stuck, the answers to the quiz questions are in the next section. But try to answer the questions first. Otherwise you’ll only be cheating yourself.

Quiz

1. What is the difference between a frame and a layer?

2. When should you use a frameset rather than a single HTML file to create a page?

3. How do you set the position of a layer on your page?

Answers

1. A frame can be thought of as a hole cut in your page that contains another page. A layer by contrast can be thought of as a box that is placed on top of the content of the page that contains HTML.

2. A frameset should be used if you need to keep the navigation or other elements completely separate from the content so that when the visitor scrolls through the content the other element stays put. A good example would be to use layers to create an index page where the index itself is in one frame and the pages it points to appear in a different frame.

3. By default the layers inserted by Expression Web 2 are placed inside absolutely positioned <div> tags. Therefore they are positioned in relation to the top left corner of the closest element with a position other than static. To position a layer you can either drag it to the desired location using your mouse or set the X and Y values manually using CSS. You can also change the positioning of the <div> tag to any of the other values for a different effect although setting it to static defeats the purpose of a layer.

Exercise

Create a new frameset with four frames and create new files for each frame. Select one of the frames as the navigation frame and create a series of hyperlinks that change the contents of each of the other three frames to different pages on the Web. Use percentages in setting their widths and heights to resize the frames so that they take up the same amount of space.

Create a series of layers slightly offset from one another and insert different images into each layer. Change the z-index for each layer to set the order. Preview the page in your browser to see how the images stack on top of one another. Go back to Expression Web 2 and change the z-index for some of the layers to change the order. Preview the page in your browser again to see what happened.

Create a new button and use the Set Text of Layer behavior to change the top layer to predefined text when you click the button.