ptg This page intentionally left blank From the Library of Lee Bogdanoff ptg Introduction 283 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 learned how to create page layouts using Cascading Style Sheets (CSS). 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 learn about frames and layers and see how making smart use of these layout tools 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 take a closer look at both these techniques and learn when to use (and when not to use) them. From the Library of Lee Bogdanoff ptg 284 HOUR 17: Frames and Layers FIGURE 17.1 The MSDN Library demon- strates an effec- tive use of frames and is also a good resource for fur- ther information on Microsoft applications and services includ- ing Expression Web. Frames: An Introduction Frames (plural) are a group of web pages displayed together in a web browser. A sep- arate Hypertext Markup Language (HTML) 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, which as its name suggests, 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 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 Net- work (MSDN) 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. 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: From the Library of Lee Bogdanoff ptg Frames: An Introduction 285 ▼ 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. 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 Creating a Web Page with Frames As it does with CSS layouts, Expression Web 3 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 panel, 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 pre- view of each frameset (see Figure 17.2). 3. Select Banner and Contents and click OK to build the frameset. This opens the frameset in Design view, and Expression Web 3 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. From the Library of Lee Bogdanoff ptg 286 HOUR 17: Frames and Layers FIGURE 17.3 After building the frameset, you define the con- tents of each frame by either inserting the address of an existing page or creating a new page. 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. Place your cursor in the top frame and press Ctrl+S again to save the new frame pages. This opens the Save As dialog for the top frame (the banner). Name this page banner.html and click Save. Expression Web 3 creates the file, and the Save As dialog opens again—this time for the left bar. Name this page navigation.html and click Save. The Save As dialog opens for a third time, this time for the main content area. Name the final page camera.html and click Save. You saved all the pages, and you can now start editing each one individually. The Frames folder now has four files in it: frameset.html, banner.html, navigation.html, and camera.html. The three last pages you created are normal HTML pages that you can open separately. frameset.html is an HTML file that con- tains only information about the spatial relationship between the different frames. From the Library of Lee Bogdanoff ptg Editing Individual Frames 287 ▲ FIGURE 17.4 By clicking the New Page but- tons in all three frames, you cre- ate three new pages. Watch Out! 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. Because you are now working with a frame layout, you need to consider the over- all layout of the frameset, not just the individual pages. For instance, applying the layout.css style sheet to each frame means they all will have the top background graphic applied to them individually, which will look strange. 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 typing Kipple Archive. Set the font style to H2, and create a body style with font-family set to 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. From the Library of Lee Bogdanoff ptg 288 HOUR 17: Frames and Layers ▼ FIGURE 17.5 The contents of each page within the frameset are styled sepa- rately by the styles defined in each page. Arial, Helvetica, sans-serif; text-transform to uppercase; color to #FFFFFF; and background-color to #3399FF. Expression Web 3 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 Canon EOS 1. In the final frame, insert the eos1.jpg image from the Images folder. Using the CSS skills you learned throughout this book, you can now make styling changes to the individual pages: Create a 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.5). 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. From the Library of Lee Bogdanoff ptg Editing Individual Frames 289 FIGURE 17.6 The Frame Prop- erties 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 dis- plays it. 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 con- text menu. This opens the Frame Properties dialog (see Figure 17.6). 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 con- tents 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 From the Library of Lee Bogdanoff ptg 290 HOUR 17: Frames and Layers buffer zone for the content. Setting the margins to zero can look strange but might be exactly what you want if you style 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 to decide 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 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.7). 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 con- trol 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.7 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 bor- ders, among other things. From the Library of Lee Bogdanoff ptg Making Framed Navigation 291 FIGURE 17.8 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. 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 For- mat, Frames, Delete Frame from the menu bar. ▲ Making Framed Navigation As you previously learned, 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 remem- ber the names of the different frames, but Expression Web has taken away that bar- rier and made the process much easier: 1. Before you can create a hyperlink to a new page, you need a new page to which you can link. In the Folder panel, open the Frames folder and open the camera.html file. Click File on the menu bar, select Save As, and change the filename to eos1detail.html. This creates a new HTML file, shown in the Folder List, called eos1detail.html (see Figure 17.8). Open the new file, right-click the image, select Picture Properties, and change the picture file to the eos1detail.jpg file found in the Images folder. Save the file and close it. From the Library of Lee Bogdanoff [...]... 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 panel 3 When you insert the inline frame, Expression Web 3 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... Layers FIGURE 17.10 When you set the inline frame hyperlink to an external site, Expression Web 3 loads the external site into Design view 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.11, the Inline Frame Properties dialog and its... 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 to insert 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 When web designers... 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 From the Library of Lee Bogdanoff Creating and Modifying Inline Frames 2 93 Inline frames can be inserted... you set in this dialog becomes the content of the inline frame Set the address to http://www designisphilosophy.com and click OK Because this is a live website, Expression Web 3 navigates to the site and inserts the page into Design view if you have an open Internet connection (see Figure 17.10) 4 To change the size of the inline frame, select it by clicking close to the outer edge of the inline frame,... that the paragraph does not split in two ▼ Try It Yourself Create a Layer Containing an Inline Frame You can use layers 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 To do so 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... iFrame into the new layer (see Figure 17.18) 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 3 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... beginning of the paragraph you insert the layer into is that Expression Web 3 wraps the layers in a tag As you previously learned in this book, tags are block tags that create a new separate line to be on So, if you place the cursor in the middle of a paragraph, the layer creates a new line that remains empty and breaks up the text Placing the layer at the beginning of the paragraph doesn’t... be done from the Inline Frame Properties dialog previously described 1 First you need an element in which you can attach the behavior Place the cursor below the inline frame and create a new button, either using the interactive button feature or by dragging an Input (button) instance from the Toolbox panel Set the button text to Change Text but don’t attach a link to it Click OK to insert the new button... 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 With the hyperlink copied, place the cursor at the beginning of the paragraph that contains the hyperlink Open the Layers panel and use the Draw Layer function to draw a medium-sized layer directly underneath the hyperlink From the Toolbox . 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 panel. 3. . all aspects of the inline frame. 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 Proper- ties. Bogdanoff ptg Creating and Modifying Inline Frames 2 93 Did you Know? Watch Out! Inline frames can be inserted anywhere within an HTML page and, as their name suggests, they work as other inline items.