Chapter 7 -- Creating and Enhancing Web Pages with Frames Chapter 7 Creating and Enhancing Web Pages with Frames by William Robert Stanek CONTENTS Frame-Enhancing Your Documents Dividing a Browser Window into Frames Defining the NOFRAME Area Creating Individual Frames Adding Frame Borders with Margins User Adjustment of Frames Targeting and Naming Frames Creating Borderless Frames Creating Stylish Frames Main Document with Footnotes Navigation Bars with a Table of Contents A Top-Down, Three-Level Hierarchy A Nested Three-Level Hierarchy A Simple Table of Contents Summary Frames are an idea slightly ahead of their time-they enable you to create documents with multiple windows and, in doing so, open the door for an entirely new way to publish on the Web. Each frame is a mini-page in your Web publication. You can add scrollbars to a frame, let users manipulate the size of the frame, and add frames for permanent headers, footers, and menu bars. Hypertext references in frames can have pointers to any window defined on the page or can be used to launch an entirely new full-sized window. You can even create frames within frames. Frame-Enhancing Your Documents With frames, you can create documents with multiple windows. Netscape Navigator and Internet Explorer are currently the only browsers to support frames, but this will change quickly. There are plans to incorporate frames into the HTML 3.2 specification, and several other browsers plan to support frames in their next major release. The best thing about frames is that they finally give Web publishers a way to easily create unique pages for users with Netscape Navigator and Internet Explorer. The two primary tags you use to create frames are <FRAMESET> and <NOFRAME>. Using the <FRAMESET> tag, you specify a section of a document that will be used by frame-capable browsers; with the <NOFRAME> tag, you specify a section of a document that will be used by browsers that cannot use frames. Within the begin and end <FRAMESET> tag, you can only nest FRAME tags, which are used to identify the source of your document's frames. Although sources can be any type of document, they're typically HTML pages. The frame-enhanced page in Figure 7.1 uses three window frames. The contents of each mini-window come from a separately defined HTML document merged into a common window by using frames. As you can see, some of the frames have horizontal and vertical scrollbars that readers can use to read the additional material in the document. Figure 7.1 : The frame-enhanced Virtual Press home page. In Figure 7.1, the left-hand frame was created from a document with a title image. The title image is fully animated using client-pull/server-push and can be clicked on. The right-hand frame is the primary frame; as shown here, it contains the contents of a home page created specifically for Netscape and Internet Explorer-enhanced browsers. The bottom frame contains a text-based menu. When a menu item is clicked on, the contents of the associated document are normally loaded into the main frame. You don't have to frame-enhance all the pages at your Web site. A key concept in designing publications for frames is to define frames only on the main page readers use to access the publication. This can be your home page or any top-level page at your site. Using a top-level page reduces the amount of work you must do to frame-enhance your site and lets you use frames as they were meant to be used. Improvements have been made to frames since they were originally implemented. Internet Explorer 3.0 made the best improvement-users can now view frame-enhanced pages without borders. (See Figure 7.2.) These so-called borderless frames are the key to making frame-enhanced pages more user-friendly and may help propel frames into the spotlight where they belong. Figure 7.2 : The Microsoft Internet workshop with borderless frames. The page shown in Figure 7.2 has four frames. The six spheres in the upper-left corner supply a link to the workshop's home page. The frame below it on the left contains a title logo, and the frame to the right of the spheres has an image map menu to key areas of the workshop. The large main frame holds the main contents for the page. Dividing a Browser Window into Frames At first glance, the way you divide a browser window into frames can seem confusing. This is because window frames are organized much like a table is, with each window divided into one or more rows and columns. You count the rows for a window as the number of horizontal frame partitions and the columns for a window as the number of vertical frame partitions. Using the ROWS attribute, you can define the number and size of the rows to display in your browser window. The vertical size of a row is expressed as an absolute or relative value with multiple row assignments separated by a comma. The number of rows is equal to the number of items in the comma-separated list. With the COLS attribute, you can define the columns to display in your browser window. The size of a column is expressed as an absolute or relative value. When you have multiple columns, separate the column assignments with a comma. The number of columns is equal to the number of items in the comma-separated list. Column and row size can be defined in three ways: As an absolute value in pixels As a relative value in percentage of window width As a relative value following the CALS table model syntax Assigning an absolute value in pixels may seem the easiest way to create a column or row of frames, but it's never a good idea to define all the rows or columns in terms of pixels. The size of the browser window can vary quite a bit, depending on the display mode and sizing being used. To avoid filling the window with empty space, the browser will probably override the values you've assigned to make sure the entire window is filled. This can distort your row and column assignments. Consequently, you should use fixed pixel values with relative values. The following <FRAMESET> tag defines three rows of frames with fixed pixel sizes: <FRAMESET ROWS="100,300,240"> . . . </FRAMESET> Relative values can be expressed as a percentage or on a proportionate scale of the total window size. To use percentages, assign a value between 1 and 100 and follow it with a percent sign. If the total of all percentages assigned is greater than 100, the values are scaled down to 100. If the total of all percentages assigned is less than 100, the relative sizes are scaled up to 100-in this way, the relative-sized frames are given the extra space. The following <FRAMESET> tag defines two columns of frames with relative sizes: <FRAMESET COLS="10%,90%"> . . . </FRAMESET> For relative scaling, use an asterisk with or without a value. An asterisk with no associated value is interpreted as a request to give all remaining space in the row or column to the frame you're creating. An asterisk with a value in front of it is used to scale how much relative space to assign to a frame. A frame with the value "3*" would get three times as much relative space as other frames that have been assigned a relative value. The following <FRAMESET> tag defines two relatively scaled rows and two fixed-sized rows: <FRAMESET ROWS="3*,*,100,150"> . . . </FRAMESET> The way columns and rows of frames are displayed depends on how you make row and column assignments. Each column assignment you make after your row assignments divides successive rows of frames into columns. Conversely, each row assignment you make after your column assignments divides successive columns of frames into rows. In the example that follows, three rows are defined. The first row is divided by two columns of equal size. The other two rows extend across the entire width of the screen. Figure 7.3 shows how the following sample code is displayed: Figure 7.3 : Creating frames is easiest when using percentages. <HTML> <HEAD> <TITLE>New Frameset</TITLE> </HEAD> <FRAMESET ROWS="34%,33%,33%"> <FRAMESET COLS="50%,50%"> <FRAME SRC=FIRST.htm> <FRAME SRC=SECOND.htm> </FRAMESET> <FRAME SRC=THIRD.htm> <FRAME SRC=FOURTH.htm> </FRAMESET> </HTML> By reversing the order of the column and row assignments, you create an entirely different window. The next example has two columns of equal size. The first column is divided by three rows, and the second column extends down the full length of the window. Figure 7.4 shows a sample frame-enhanced page; the sample code is available in Listing 7.1. Figure 7.4 : A new window created by reversing column and row frames. Listing 7.1. Creating framesets. <HTML> <HEAD> <TITLE>Frameset 2</TITLE> </HEAD> <FRAMESET COLS="50%,50%"> <FRAMESET ROWS="34%,33%,33%"> <FRAME SRC=FIRST.htm> <FRAME SRC=SECOND.htm> <FRAME SRC=THIRD.htm> </FRAMESET> <FRAME SRC=FOURTH.htm> </FRAMESET> </HTML> Defining the NOFRAME Area With the <NOFRAME> tag, you can define an area of the document that's displayed by browsers that can't use frames. The <NOFRAME> tag is used in a pair with the begin tag <NOFRAME> specifying the start of the area for browsers that aren't frame-capable and the end tag </NOFRAME> specifying the end of this area. All frame-enhanced pages should have a fully defined NOFRAME area, which could simply contain your original page before you frame-enhanced it. Listing 7.2 shows a sample document with a NOFRAME area. Listing 7.2. Defining a NOFRAME area. <HTML> <HEAD> <TITLE>Your Home Page [Frame Enhanced]</TITLE> </HEAD> <FRAMESET COLS=25%,75%> <FRAMESET ROWS="20%,80%"> <FRAME SRC="title.html"> <FRAME SRC="menu.html"> </FRAMESET> <FRAME SRC="main.html"> </FRAMESET> <NOFRAME> <HEAD> <TITLE>Your Home Page [Non-Frame Enhanced]</TITLE> </HEAD> <BODY> . . . </BODY> </HTML> As you can see from the preceding example, documents with frame assignments aren't organized like other documents. In general, they don't need a header or body section. However, you can add a header section to the top of the document to specify the title for the frame-enhanced page. You can also add a header and body section to the NOFRAME area of the document. The header and body sections in the NOFRAME area are used by browsers that can't use frames; therefore, the second title will be used by browsers that aren't frame-capable. Creating Individual Frames The only tag you can use within the begin and end <FRAMESET> tag is the <FRAME> tag, used to specify the source for the frame and to assign the frame's key characteristics. The source document or object for the frame is specified with the optional SRC attribute. If you don't use the SRC attribute, the frame is displayed as a blank space in the window. Because only advanced browsers, like Netscape Navigator and Internet Explorer, support frames, the source you specify is usually a document with advanced features. In the following example, the window is divided into two columns. Although the first column is divided into three rows, the second column extends the full length of the windows. The first source assignment fills the first frame in column one, which is in the upper-left corner. The second source assignment fills the frame in the middle of column one, and the third source assignment fills the frame in the bottom column one. The final source assignment fills the large area for column two. Here is the code for the example: <FRAMESET COLS="25%,75%"> <FRAMESET ROWS="25%,25%,50%"> <FRAME SRC="titlepage.htm"> <FRAME SRC="subtitlepage.htm"> <FRAME SRC="menu.htm"> </FRAMESET> <FRAME SRC="homepage.htm"> </FRAMESET> The way you nest tags within <FRAMESET> tags is extremely important. The first <FRAMESET> tag should enclose all further assignments for frame sets and frames. In the previous example, all elements of the first column were defined first, and then elements of the second column were defined. You should define elements for rows and columns in the same way. Other optional attributes for the <FRAME> tag include the following: MARGINHEIGHT MARGINWIDTH NORESIZE SCROLLING NAME Adding Frame Borders with Margins The MARGINHEIGHT attribute controls the top and bottom margin size for the frame. Browsers that don't support borderless frames set a minimum margin size of one. For these browsers, if you assign a margin size of less than one, the browser displays the frame with a margin to make sure frame edges don't touch. If you do not assign a margin size, the browser uses a default margin size, which can vary. Consequently, you might want to assign a margin size for the frame's top and bottom margins. The MARGINWIDTH attribute controls the left and right margin size for the frame. For browsers that don't support borderless frames, the minimum margin size is also one. You can assign MARGINHEIGHT and MARGINWIDTH as follows: <FRAME SRC="titlepage.htm" MARGINHEIGHT=2 and MARGINWIDTH=2> Figure 7.5 shows a frame-enhanced page that uses wide margins. The markup for the frame source page is available in Listing 7.3. Figure 7.5 : Using margins in your frame-enhanced pages. Listing 7.3. Using margins in frames. <HTML> <HEAD> <TITLE>Frameset Using Margins</TITLE> </HEAD> <FRAMESET ROWS="15%,85%"> <FRAME SRC="BANNER.htm" MARGINWIDTH="10" MARGINHEIGHT="10"> <FRAMESET COLS="50%,50%"> <FRAME SRC="CONTEN.htm" MARGINWIDTH="10" MARGINHEIGHT="10"> <FRAME SRC="MAIN.htm" MARGINWIDTH="10" MARGINHEIGHT="10"> </FRAMESET> <NOFRAMES> <BODY> <P> </P> <P>This web page uses frames, but your browser doesn't support them.</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> If you examine the frame assignments in the previous listing, you will find references to three separate HTML documents. The first frame reference identifies a document called BANNER.htm. Listing 7.4 shows the markup for the BANNER.htm page. Listing 7.4. The BANNER.htm page. <HTML> <HEAD> <TITLE>Banner Frame</TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#FFFFFF"> <H3>Banner Frame</H3> <P>This frame should contain the main navigation links.</P> </BODY> </HTML> The second frame assignment references a document called CONTEN.htm. The markup for the CONTEN.htm page is shown in Listing 7.5. Listing 7.5. The CONTEN.htm page. <HTML> <HEAD> <TITLE>Table Of Contents</TITLE> </HEAD> <BODY BGCOLOR="FFFFFF"> <H3>Table Of Contents Frame</H3> <P>This frame should contain links to the main pages.</P> </BODY> </HTML> The final document referenced by the frame set is called MAIN.htm. The markup for this page is shown in Listing 7.6. Listing 7.6. The MAIN.htm page. <HTML> <HEAD> <TITLE>Main Frame</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H3>Main Frame</H3> <P>This frame holds the contents of the main page.</P> </BODY> </HTML> User Adjustment of Frames Users can adjust frames in two key ways: by using scrollbars and by resizing the frame. In general, users want to be able to manipulate your frames, especially if they're using a screen size other than the one you created the publication for. However, you can turn these features on or off by using the SCROLLING and NORESIZE attributes. By default, the browser decides whether a window should have scrollbars. If the entire document is visible in the frame, the browser automatically displays the frame without scrollbars, but if it isn't, the browser automatically displays the frame with scrollbars. The browser displays both horizontal and vertical scrollbars, regardless of whether both are needed. The SCROLLING attribute has three values: <FRAME SCROLLING=AUTO> <FRAME SCROLLING=YES> <FRAME SCROLLING=NO> You can override the default AUTO value for the SCROLLING attribute by setting SCROLLING=YES or SCROLLING=NO. The value SCROLLING=YES ensures that scrollbars are always visible, and the value SCROLLING=NO makes sure scrollbars are never visible. By default, the size of all frames can be adjusted by the user. Users adjust frames by moving the cursor over a frame edge, holding down the left mouse button when the resizing icon appears, and dragging the frame edge to a new position. You can turn the resizing feature off with the NORESIZE attribute. Keep in mind that even a single frame that cannot be resized affects whether other frames in the window can be adjusted. Targeting and Naming Frames The NAME attribute plays a key role in how your frames interact with other frames and windows. By default, hypertext references in a frame are targeted to the frame, so when you activate a link within a frame, the new document is normally loaded into the same frame. By naming a frame, you can target it from other frames on the page. To name a frame, use a keyword that begins with an alphanumeric character, as in this example: <FRAME SRC="homepage.html" NAME="MAIN"> By default, all frames are unnamed, but once you've assigned a name to a frame, the frame can be targeted by other frames. Usually, these frames are on the same page. For example, your page could have a main section named MAIN and a menu section targeted at the main frame. In this way, when a user clicked on a hypertext reference in the menu, the corresponding document would be loaded into the main frame. To target a frame, use Netscape's TARGET attribute for the anchor tag <A>. The value assigned to the TARGET attribute should be the name of the frame you want to target. If you wanted to target the frame called MAIN in the window described earlier, here is how you would do it: <A HREF="subpage.html" TARGET="MAIN"> You can assign a base target for all links in a document with the <BASE> tag. In this way, you don't have to insert target information for all links in a document. Keep in mind that a target defined in a link overrides the base target defined. Therefore, if you want to target most of the links to a single frame and some links to other frames, you can easily do this. Here's how you can assign the base target to the frame called MAIN: <BASE TARGET="MAIN"> An interesting way to use the base target is to target a name you haven't used elsewhere. If the target name is not a frame in the currently defined window, the browser opens a new window in addition to the current window. If the current window has two unnamed frames and one frame named CENTRAL1, this base target would open a new window: <BASE TARGET="WINDOW2"> The NAME and TARGET attributes can also be used to establish the current document's relationship to other documents. Currently, four relationships are defined: _blank        Load this link into a new, unnamed window. _self             Load this link over yourself. _parent        Load this link over yourself and reset the window. _top             Load this link at the top level. Although all these relationships are useful, the most useful relationship is _parent. By using the _parent relationship, you force the browser to reset the window entirely and avoid loading a frame document within the current frame. You should use this relationship whenever you have a link that leads to a page containing frame assignments. For example, if lower-level documents refer to your home page, you can use the following assignment to avoid getting a frame within a frame: <A HREF="yourhomepage.html" TARGET="_parent"> An example of frames with links targeted as other frames is shown in Figure 7.6. The code for the frame source page is available in Listing 7.7. Figure 7.6 : Targeting your frames. Listing 7.7. Using targeted links. <HTML> <HEAD> <TITLE>Targeting Frames</TITLE> </HEAD> <FRAMESET ROWS="20%,80%"> <FRAME SRC="FRBANNER.htm" NAME="BANNER" MARGINWIDTH="5" MARGINHEIGHT="5"> <FRAMESET COLS="20%,80%"> <FRAME SRC="FRCONTEN.htm" NAME="CONTENTS" MARGINWIDTH="5" MARGINHEIGHT="5"> <FRAME SRC="FRMAIN.htm" NAME="MAIN" MARGINWIDTH="5" MARGINHEIGHT="5"> </FRAMESET> <NOFRAMES> <BODY> <P> </P> <P>This web page uses frames, but your browser doesn't support them.</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> As you can see in the previous listing, the frame set references three HTML documents: FRBANNER.htm, FRCONTEN.htm, and FRMAIN.htm. The markup for the FRBANNER.htm document is shown in Listing 7.8. Listing 7.8. The FRBANNER.htm document. <HTML> <HEAD> <TITLE>Banner Frame</TITLE> <BASE TARGET="CONTENTS"> </HEAD> <BODY BGCOLOR="#888888" TEXT="#FFFFFF"> <H3>Banner Frame</H3> <P>This frame should contain the main navigation links. The links in this frame target the table of contents frame.</P> </BODY> </HTML> The contents of the FRCONTEN.htm document are listed in Listing 7.9. Listing 7.9. The FRCONTEN.htm document. <HTML> <HEAD> <TITLE>Table Of Contents</TITLE> <BASE TARGET="MAIN"> </HEAD> <BODY BGCOLOR="000000" TEXT="FFFFFF"> <H3>Table Of Contents Frame</H3> <P>This frame should contain links to the main pages. Links in this frame target the main frame.</P> </BODY> </HTML> The FRMAIN.htm document is shown in Listing 7.10. Listing 7.10. The FRMAIN.htm document. <HTML> <HEAD> <TITLE>Main Frame</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H3>Main Frame</H3> <P>This frame holds the contents of the main page. Links in this page do not target any other frame.</P> </BODY> </HTML> Creating Borderless Frames Internet Explorer 3.0 supports enhancements that let users view frames without borders. If you're frame-enhancing your pages specifically for Internet Explorer 3.0, you might want to use optional FRAMEBORDER and FRAMESPACING attributes for the <FRAMESET> tag. Set the FRAMEBORDER and FRAMESPACING field values to zero for all frames in your document, which is a trick you can use to get borderless frames. Keep in mind that borders and scrollbars are automatically added if the content of the frame is larger than the area dedicated to the frame, so keep document content to a minimum if you want to get borderless frames. Figure 7.7 shows a page with borderless frames. The markup for the frame source page is shown in Listing 7.11. Figure 7.7 : A page with borderless frames. Listing 7.11. Using borderless frames. <HTML> <HEAD> <TITLE>Borderless Frames</TITLE> </HEAD> <FRAMESET ROWS="20%,80%" FRAMEBORDER="0" FRAMESPACING="0"> <FRAME SRC="BANNER.htm"> <FRAMESET COLS="50%,50%" FRAMEBORDER="0" FRAMESPACING="0"> <FRAME SRC="CONTEN.htm"> <FRAME SRC="MAIN.htm"> </FRAMESET> <NOFRAMES> <BODY> <P> </P> <P>This web page uses frames, but your browser doesn't support them.</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> Creating Stylish Frames Frames offer endless possibilities for your pages. This section highlights the most common styles for frame-enhanced pages. You will find the complete HTML markup for these pages on the CD-ROM accompanying this book. Use the source code as a template to help you frame-enhance your own pages. Main Document with Footnotes Figure 7.8 shows a document with a Main frame and a scrolling Footnote frame. The Main frame targets the Footnote frame and should hold the main information for the document. When users click a link in the Main frame, the corresponding footnotes are displayed in the Footnote frame. Listing 7.12 contains the source code for this example. Figure 7.8 : Creating a document with footnotes. Listing 7.12. Using footnotes. <html> <head> <title>Frame With Footnotes</title> </head> <frameset rows="78%,22%"> <frame src="frmain.htm" name="main" marginwidth="1" marginheight="1"> <frame src="frfootno.htm" name="footnotes" marginwidth="1" marginheight="1"> <noframes> <body> <p>This web page uses frames, but your browser doesn't support them.</p> </body> </noframes> </frameset> </html> Navigation Bars with a Table of Contents Figure 7.9 shows a document with navigation bars at the top and bottom, a Table of Contents frame, and a Main frame. Navigation bars are usually image map banners. Both navigation bars target the Table of Contents frame and should contain the main navigation links. When users click a link in either navigation bar, their browser will load the referenced document into the Table of Contents frame. The frame source page for this example is shown in Listing 7.13. Figure 7.9 : Creating a document with navigation bars. Listing 7.13. Using navigation bars. <html> <head> <title>Frameset with Navigation bars</title> </head> <frameset rows="13%,73%,14%"> <frame src="frtop.htm" name="top" noresize> <frameset cols="25%,75%"> <frame src="frconten.htm" name="contents"> <frame src="frmain01.htm" name="main"> </frameset> <frame src="frbottom.htm" name="bottom" noresize> <noframes> <body> <p>This web page uses frames, but your browser doesn't support them.</p> </body> </noframes> </frameset> </html> A Top-Down, Three-Level Hierarchy Figure 7.10 shows a document with a top-down hierarchy split into three frames. The top frame targets the middle frame and should contain the main sections of your Web site. When users click a link in the top frame, their browser will load the referenced document into the middle frame. Listing 7.14 contains the source code for the frame-enhanced page shown in the figure. Figure 7.10: Creating a document with a top-down hierarchy. Listing 7.14. A three-level hierarchy. <html> <head> <title>A Top-Down Hierarchy</title> </head> <frameset rows="15%,29%,56%"> <frame src="frtop01.htm" name="top" marginwidth="1" marginheight="1"> <frame src="frmiddle.htm" name="middle" marginwidth="1" marginheight="1"> <frame src="frbott01.htm" name="bottom" marginwidth="1" marginheight="1"> <noframes> <body> <p>This web page uses frames, but your browser doesn't support them.</p> </body> </noframes> </frameset> </html> A Nested Three-Level Hierarchy Figure 7.11 shows a document with a nested hierarchy split into three frames. The left frame targets the right top frame and should contain the main sections of your Web site. When users click a link in the top frame, their browser will load the referenced document into the right top frame. The source code for the figure is shown in Listing 7.15. Figure 7.11: Creating a document with a nested hierarchy. Listing 7.15. Using a nested hierarchy. <html> <head> <title>Nested Three-level Hierarchy</title> </head> <frameset cols="23%,77%"> <frame src="frleft.htm" name="left" marginwidth="1" marginheight="1"> <frameset rows="18%,82%"> <frame src="frrtop.htm" name="rtop" marginwidth="1" marginheight="1"> <frame src="frrbotto.htm" name="rbottom" marginwidth="1" marginheight="1"> </frameset> <noframes> <body> <p>This web page uses frames, but your browser doesn't support them.</p> </body> </noframes> </frameset> </html> A Simple Table of Contents Figure 7.12 shows a document with a Table of Contents frame and a Main frame. The Table of Contents frame targets the Main frame and should contain links to the main pages in the current section of the Web or to all the bookmarks in the Main frame's current page. When users click a link in this frame, their browser will load the referenced document into the Main frame. Figure 7.12: Creating a document with a table of contents. The source code for the frame-enhanced page with a table of contents is shown in Listing 7.16. Listing 7.16. Using a table of contents. <html> <head> <title>Frameset with Table of Contents</title> </head> <frameset cols="18%,82%"> <frame src="frcont01.htm" name="contents" marginwidth="1" marginheight="1"> <frame src="frmain02.htm" name="main" marginwidth="1" marginheight="1"> <noframes> <body> <p>This web page uses frames, but your browser doesn't support them.</p> </body> </noframes> </frameset> </html> Summary You can frame-enhance a single page or your entire Web site. Frames are more than mini-windows within the larger browser window-they are the gateway to an entirely new way to publish on the Web. If you've ever wanted to add powerful features to your Web publications, frames offer definite starting points.