ptg 11 11 259 Creating Frames Introduction When it comes to Web design, frames have been around for quite a long time. In that time they have constantly fallen in and out of favor. Some Web designers can't live without them, and some designers would never in a million years use them. However, whether you love them or dislike them, frames are here to stay… at least for today. Frames are an interesting way to design a Web document. Think of a window with separate panes of glass. Now, think of that window as a Web page, and each one of those sepa- rate panes of glass as a separate HTML document, and you've got a pretty good visualization of a Web page contain- ing frames. For example, you can have a two-frame page with one frame containing the navigation for the site, and the other frame the contents. When you click on a link in the nav- igation frame, the content frame displays another HTML doc- ument, and the frame containing the navigation never changes. There's a certain beauty in being able to change one area of a Web page and leave another area static. Good Web designers with a good sense of how to utilize frame technol- ogy can create some pretty awesome Web sites. A framed document is composed of a frameset page (called so because it uses the <frameset> tag), and two or more HTML documents. When the frameset page loads on the visitor's browser, it calls and loads the HTML documents, and displays the page. Dreamweaver makes the coding and managing of frames easy with a point-and-click interface. You control the com- mands for modifying the properties of the overall frames, and each individual frame. This chapter will give you the essentials of creating frames, and information for inserting and modifying frames and framesets, as well as how you might apply them in your own Web designs. What You’ll Do Introduce Frames Create a New Frame Open a Web Page in a Frame Provide Information for No Frame Support Select Frames and Framesets Add Frameset Information Save a Frameset Modify Frames Change Frame Properties Change Frameset Properties Target Links Create Quick and Easy Frame Links From the Library of Wow! eBook ptg 260 Chapter 11 Frame documents use a <frameset>… </frameset> tag set to create documents in multiple views. The multiple view nature of frame documents lets designers keep certain information visible, while other windows within the frame are scrolled or replaced. For example, within the same window, one frame might display a static banner, a second a nav- igation menu, and a third the main document that can be scrolled through or replaced by navigating in the second frame. If you were to design a Frame page directly in HTML, it might look something like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>A frameset </title> </head> <frameset cols="20%, 80%"> < frameset rows="100, 200"> <frame src="doc1.html"> < frame src="doc2.gif"> </ frameset > < frame src="doc3.html"> </ frameset > </html> Image Frames divide a browser window into two or more document windows, each displaying a different document, or a different part of the same document. Frames in an HTML docu- ment cause a web page to look as if it's divided into multiple, scrollable regions. Each separate frame has a distinct name, which the frameset uses to load specific HTML docu- ments. Frames in HTML documents are created and controlled through three distinct element types: FRAMESET, FRAME and NOFRAMES. The Frameset Element A frameset divides the browser window into two or more rectangular regions. For example the following HTML code describes a basic frameset: <frameset cols="30%,30%,40%"> This code describes a frame set divided verti- cally into three regions, and each region is a percentage of the width of the browser win- dow (30%, 30%, and 40%). Since the rows attribute was not used, this frameset does not include rows. Introducing Frames From the Library of Wow! eBook ptg Chapter 11 Creating Frames 261 The Frame Element The Frame element defines a single frame in a frameset, and can include up to seven attributes: src, name, frameborder, margin- width, marginheight, scrolling, and noresize. Since the frame tag is not defined as a con- tainer, it has no matching end tag. The follow- ing is an example of a frame element: <html> <frameset rows="20%,80%"> <frame src="http://www.power.com/"> <frameset cols="60%,40%"> <frame src="http://www.andy.com/"> <frame src="http://www.steve.com/"> </frameset> </frameset> </html> The <noframes> Tag The noframe element contains content that should only be rendered when frames are not displayed. Noframe is typically used in a Frameset document to provide alternate con- tent for browsers that do not support frames or have frames disabled. The following is an example of the noframes tag. <noframes> <p>The Frameset contains: <ul> <li><A href="contents_of_frame1.html">con- tent_1</A> <li><img src="image.gif"> <li><A href="noframes.html">Some other neat contents</A> </ul> </noframes> From the Library of Wow! eBook ptg 262 Chapter 11 Most of the framesets on the Web today use two or three frames. For example, a common setup is to have one narrow frame spanning the top of the page to hold a banner and some site navigation; a lower-left frame to hold a table of contents or additional navigation; and a large lower-right frame to hold the content of the site. Or it can be as simple as two frames: one small frame for navigation, and a larger frame for the main body of information. You can create a new document with frames using samples from the New Document dialog box or add frames to an existing document using the Frames button or dragging a frame border. After you create a frameset, you can enter text, images, and other content in each of the frames, as you would for any normal HTML document, or you can instruct the frame to load a previously cre- ated HTML document. Creating a New Frame Create a Frameset from a Sample Click the File menu, and then click New. Click the Page from Sample category. Click Frameset in Sample Folder options. Select a Sample Page. TIMESAVER Click the Get more content link to add more templates to the New Document dialog box. Click Create. The Frame Tag Accessibility Attributes dialog box opens. Click the Frame list arrow, select a frame, and then enter a name (one word, start with a letter, and case- sensitive) for each frame in the document. Click OK. 7 6 5 4 3 2 1 5 2 3 Did You Know? You can use a grid to help layout a frame document. Click the View menu, point to Grid, and then click Show Grid to show the grid. 4 From the Library of Wow! eBook ptg Chapter 11 Creating Frames 263 Insert a Frameset Create a new HTML document, or open an existing one. Click the Layout tab on the Insert bar. Click the Frames button, and select a frameset from the available options (in this example, Left Frame). The Frame Tag Accessibility Attributes dialog box opens. Click the Frame list arrow, select a frame, and then enter a name (one word, start with a letter, and case- sensitive) for each frame in the document. Click OK. Create a Frameset with Click and Drag Create a new HTML document, or open an existing one. Click the View menu, point to Visual Aids, and then click Frame Borders. Dreamweaver creates a heavy outline around the edges of the document window. Position the cursor over one of the borders until it turns into a double- headed arrow, and then drag to create a new frame. Continue dragging from the vertical or horizontal border until you have the frames you want. TIMESAVER Hold down Alt (Win) or Option (Mac) while you drag an existing frame border to create a new frame instead of moving it. 4 3 2 1 5 4 3 2 1 1 4 5 2 1 3 2 4 3 From the Library of Wow! eBook ptg After you create a frame, you can specify the content you want to appear in it. You can insert new content in a frame the same way you insert other content, such as text or images, into a Web page or open an existing HTML Web page in a frame. If you consistently use the same Web page in a frame, you can make the page the default docu- ment when the frameset appears in a browser. 264 Chapter 11 Opening a Web Page in a Frame Open an Existing Web Page in a Frame Open the Web page with frames you want to modify, and then click to place the insertion point in the frame where you want to insert a Web page. Click the File menu, and then click Open in Frame. TIMESAVER Press Ctrl+Shift+ O (Win) or A +Shift+O (Mac). Navigate to the drive and folder location where you want to open the Web page. Click the Files of Type list arrow (Win) or popup (Mac), and then select the type of file you want to open. Select the page you want to open from the page list in the working folder, or type the URL of the page you want. Click OK. 6 5 4 3 2 1 2 File opened in a frame 1 4 3 5 6 From the Library of Wow! eBook . page with one frame containing the navigation for the site, and the other frame the contents. When you click on a link in the nav- igation frame, the content frame displays another HTML doc- ument,. same window, one frame might display a static banner, a second a nav- igation menu, and a third the main document that can be scrolled through or replaced by navigating in the second frame. If. divide a browser window into two or more document windows, each displaying a different document, or a different part of the same document. Frames in an HTML docu- ment cause a web page to look as