Whether you love them or hate them, frames are a part of the Web as it exists today. There is an old rumor that Domino does not support frames. Let's put that to rest right here. Until Release4.6 it wasn't exactly easy or obvious, but Domino has supported frames since day one! Domino 4.6 includes a template called Frameset that allows you to create frames-based Web pages if you know just a little about what frames are and how they work on the Web.

This article introduces you to the concept of frames, describes how they work, and instructs you on how to implement them using the Frameset template provided with Domino 4.6. We'll look at a Web site that is probably familiar to most of you, the Lotus Web site, and show you how to create a similar structure for your own site.

Note: You can download a sample database that contains the finished frameset, as well as an additional agent for updating links later. You may have noticed that when setting default links in the R4.6 Frameset template, you cannot change the values later and have them apply to existing pages. This sample database's "Update Links" agent allows you to easily change existing links from the All Pages view.

What are frames?

In the beginning, or at least a few years ago, there was just the Web page. It was written in HTML, looked pretty, and was a giant step forward in getting information "out there" where people could access it easily. Then, came Web forms, which were useful for building applications, but left something to be desired in the user interface.

Frames are an attempt to bring advanced layout and user interface capabilities to the Web. The frames are separate rectangular panes within a Web browser window, and each pane displays its own HTML page. For example, the following screen shows the different frames that make up the Lotus home page:

The areas outlined in red, blue, green and magenta are separate frames. The Lotus home page actually consists of a "frameset" or "framesetting page" and four "framed pages." If you shrink your browser window while displaying the Lotus home page, you will notice that a scroll bar appears in the frame that I have outlined in green, but not in any of the other frames. You will also notice that there are no borders between the frames, and that the frames outlined in red and blue maintain their fixed size, while the other frames shrink in proportion to the window size. If you have navigated around the Lotus site much, you know that clicking on some of the links within the frame outlined in green cause the content in that frame to change, but clicking on other links in that frame cause the content in the frame outlined in magenta to change. This is known as "targeting."

The following Web sites have more related information about frames:

• Netscape Frames - Sharky's Netscape Frames tutorial.
• Fun with Frames - A CNET article on how to use frames.
• Frames? Whatever - A debate on the pros and cons of frames.

Back to top

Frames and Web site design

Frames are useful for a fewreasons:

• They allow a site designer to provide a consistent look and feel across an entire site without having to redundantly load graphics for every page, which potentially makes the site more responsive for users.
• They allow a site designer to change the look and feel of an entire site without having to update elements of every HTMLfile.
• They allow a user to scroll the main content of a site in one frame, while the links or buttons that provide site navigation remain in a constant screen location, much like view and form action buttons in the Notes client.

If you were wondering why I started this article with the phrase "Whether you love them or hate them...", let's be clear... Frames are far from perfect, and a lot of people wish they would go away. Here are some of the reasons:

• Frames were implemented in the browser first by Netscape, and then by Microsoft. As with many of the latest features of HTML, they each did it a little differently, which makes life particularly difficult for site designers.
• Framed sites usually don't print the way users want them to.
• Users usually don't like what happens when they bookmark a page within a framed site.
• Links to other sites within framed sites often bring up the linked-to site within the frameset of the linking site, and this is ugly and confusing.
• Bad designers run amok and create some truly horrible frames-based sites.

Back to top

Looking at the HTML

The remainder of this article assumes you've decided to build your site using frames despite these issues. So, let's dig a little deeper into how frames work.

If you choose View - Source in your browser while pointing at the Lotus site, you will get the HTML source for the framesetting page. It isn't very much code, and is definitely worth reading through if you're new to frames. Let's just look at the rough structure of the code.

You can see that there are two <frameset>...</frameset> tag pairs and four <frame> tags in the <head> section of the HTML. There is also a <noframes>...</noframes> tag pair, and in between them you will find a <body>...</body> tag pair. I've color-coded the lines in each graphic to match the outlined features in the other corresponding graphics in this article. Let's go through the code one line at a time:

Line 1 <html> is the tag that tells the browser that it is looking at an HTMLpage.

Line 2 <head> starts the header section of the page. Framesets and frames are defined within the header.

Line 3 <frameset cols = 150,*...> is a frameset tag. Now we know that what we're looking at is a framesetting page. It defines a frameset with two columns. The first column is 150 pixels wide, and the second takes up whatever is left of the window's horizontal area. This tag must be followed by either a <frame> tag, or a <frameset>...</frameset> tag pair for the first column, and then the same for the second column. This frameset tag is closed on Line 15.

Let's take a break from the line-by-line descriptions and visualize what we have so far:

Line 4 <frameset rows = 70,4,* ...> indicates that there is a nested frameset in the first column of Line 3's frameset. The nested frameset consists of three rows. The first row is 70 pixels high, the second is only 4 pixels high, and the third row takes up whatever is left of the window's vertical area. This tag must be followed by three <frame> tags or <frameset>...</frameset> pairs defining the three rows of the frame. This tag is closed on Line 8.

Line 5 <frame src= ...> indicates that the first row of the frameset starting at Line 4 is a regular frame. The src attribute points to the page loaded in this frame, which happens to be the "Lotus" logo text.

Line 6 <frame src= ...> indicates that the second row of the frameset starting at Line 4 is a regular frame. The src attribute points to the page loaded in this frame, which is an empty page with a yellow textured background GIF. The Lotus site designers chose to use this pageas a visual divider instead of the browser's built-in frame borders (which are pretty ugly).

Line 7 <frame src= ...> indicates that the last row of the frameset starting at Line 4 is a regular frame. The src attribute points to the page loaded in this frame, which is a Notes view.

Line 8 </frameset> closes the nested frameset tag that began on Line 4, so this finishes the definition of the first column of the frameset defined at Line 3.

Line 9 <frame src= ...> indicates that the second column of Line 3's frameset is a regular frame. The src attribute points to the page loaded in this frame, which is the animated "Work The Web" page.

Line 10 <noframes> tells any browser that knows about frames to ignore everything between here and the </noframes> tag on Line 14.

Line 11 <body bgcolor=#FFFFFF> Older browsers that don't understand frames ignore everything from Lines 3 to Line 10 inclusive. They will find this <body> tag here, which implicitly closes the <head> section of the page and tells the browser to treat everything up to Line 13 as a regular page.

Line 12 Because there are still many users working with old browsers that don't understand frames, it is good practice to put up an alternate non-frames home page for your site, and this is where it fits into the frameset structure. By convention, a simple line to the non-frames version is placed here, and non-frames browsers will display it.

Line 13 </body> closes the page that is shown to non-frames browsers.

Line 14 </noframes> tells frames-capable browsers to start interpreting tags again.

Line 15 </frameset> closes the frameset started on Line 3.

Back to top

Building your frameset with the Frameset template

Now, let's try building a frameset for your own site. You can get a head start with the Frameset template because it provides you with the ability to:

• Use a wizard to design a framesetting page starting from one of 18preset configurations of two to four frames.
• Nest framesetting pages created with the wizard in order to achieve more complicated layouts.
• Manually design the HTML for a framesetting page with any arrangement of frames that you want.
• Create framed pages either using Notes as a WYSIWYG editor, or by typing in HTML syntax.
• Create pages that present a column of either text or graphical hyperlinks to other pages.

We'll use the Frameset template to put together a site that looks a little bit like the Lotus Web site. To do this, you can use the same four-frame layout, but dispense with the expandable categories of links that the Lotus site puts in a frame on the left of the window. Instead, you'llput a bunch of ordinary text links there. Here's a screen showing one of the two final frameset layouts:

Back to top

Creating the database

To create a new database using the Frameset (R.6) template:

1. Choose File - Database - New.
2. Choose Local from the dropdown list in the Server field.
3. Enter NotLotus in the Title field.
4. Enter NotLotus.nsf in the File Name field.
5. Select the Frameset (R4.6) template from the list of templates.
6. Click OK.

The design you want to create has four frames. For the purposes of this article you can call the frames: "LogoFrame," "DividerFrame," "LinksFrame," and "PageFrame." You will use these names later.

Back to top

Setting the default values for your links pages

In the NotLotus database, you need to set the default values used when you create "Column of Links" pages. Your design uses two different "Column of Links" pages, so this saves you a little bit of time. To create your Table of Links, which is the set of default values used in the Column of Links:

1. Choose Create - Step 1: Table of Links. Under the Hotspot Data column, enter "Link 1," "Link 2," and so on, through "Link 5", in each row. Hotspot Data is what you see on the screen.
2. Under the Link Data column, enter "Page 1," "Page 2,"and so on, through "Page 5," in each row. Link Data identifies the page the browser brings up when you click the corresponding hotspot. You create these pages later on.
3. Add additional links to Lotus' real home page, an interactive application, and a Site Map. These other links all use a special syntax in the Link Data column to tell the Frameset template that they are not referring to names of pages in the same database.
   • For the "Lotus' Real Home" link, enter "//www.lotus.com." The "//" syntax indicates that the template should build a link to another Web site.
   • For the "Application" link, enter "~/demo/app.nsf." The "~/" syntax in tells the template to build a link to another database on the same server.
   • For the "Site Map" link, enter "/Site+Map." The "/" syntax tells the template to link to something in the same database, but not an ordinary page. In this case, there is a view named "Site Map" in the Frameset, and we are generating a link that opens that view. The "/" syntax can also point to a form, a navigator, or anything else in the same database that has a valid URL. If the Link Data is just simple text, the Frameset template assumes that the value is the name of a page stored in the Frameset-based database.

Your Table of Links appears as follows:

The frameset template will use these default links, listed above,in both of the "Column of Links" documents that you'll create later.

Back to top

Creating the Web pages to display in the main page frame

Next create the pages you need to get the site started:

1. Choose Create - Step 2: Frame Content - Web Page.
2. Enter Page 1 in the "Enter a page name for the URL" field.
3. Enter "Page 1 for Not Lotus" in the "Enter a page title for the browser" field.
4. Enter One in the "Enter content for your Web page below" field.
5. At the "Include this page in the site map?" option, select Yes.
6. Enter Home Page in the "Specify an area in the site map" field.

Here's what Page 1 looks like:

Repeat the above steps to fill in Pages 2 through 5. For each of these pages, change only the page number and the content of the "Specify an area in the site map" field, which changes from "Home Page" to "More Pages."

Back to top

Creating the logo page to display in the logo frame

Create a page for a logo. For demo purposes, use plain text instead of a logo, as follows:

1. Choose Create - Step 2: Frame Content - Web Page.
2. Enter Logo in the "Enter a page name for the URL" field.
3. Enter The Logo in the "Enter a page title for the browser" field.
4. Enter Not Lotus in the "Enter content for your Web page below" field.
5. At the "Include this page in the site map?" option, select No.

Back to top

Creating the divider page to display in the divider frame

Repeat the stepsfor creating the logo page to create a page to divide your logo from your links on the left side of the browser window. (Remember, the Lotus site uses a yellow page for the divider.)The page you use for a divider will just be a blank page with a background color of green. You can set the background color by right-clicking on the page, choosing Document Properties, and selecting a background color on the Background tab. For the "Include this page in the site map?" field, select "No" for the divider page.

Back to top

Creating the links page to display in your links frame

The next thing you need is your first "Column of Links" page.

1. Choose Create - Step 2: Frame Content - Column of Links to Target Frame.
2. Enter Links1 in the "Enter a page name for the URL" field.
3. Enter "Links Page One for Not Lotus" in the "Enter a page title for the browser" field.
4. The "target" for your links is the frame named "PageFrame." Enter this in the "Enter the name of the target frame" field. The links are the ones set by default in the Table of Links document.

Your screen appears as follows:

Back to top

Creating a framesetting page

You need to createa framesetting page, which defines how the browser window will be subdivided into frames and identifies the pages that are loaded into each frame. The wizard in the Frameset template can generate the following frame arrangements:

None of these are exactly what you want, so you have two choices. You can:

• Bypass the wizard and create a framesetting page by hand.
• Create two framesetting pages and nest one from within the other.

To show off the power of the Frameset template a little better, take the latter approach. The two layouts that you should use are

and

First use the wizard to define a framesetting page that contains two frames stacked horizontally. Use this to display your LogoFrame and DividerFrame.

1. Choose Create - Step 3: Frame Set.
2. Click Yes at the "Use the Frames Wizard?" prompt.
3. The wizard shows four layouts consisting of two frames, select the one on the right. A screen with six small buttons on it appears. The following graphic shows these buttons with numbers labeled one through five:
   Figure 12. Settings for the frames
   
   
4. Click the button labeled "1) Frame Name and URL".
5. Enter "LogoFrame" as the frame name.
6. Select the "Page from this database" option, and select "Logo" from the dropdown list. Click OK.
7. Click the button labeled "2) Other Frame1 attributes." The More Settings for Frame 1 dialog box appears.
8. Enter zero in the Spacing field, and click OK.
9. Press the button labeled "3) Vertical." The Dimension for Frame 2 dialog box appears. HTML can specify frame sizes either in terms of pixels or as a percentage of the available space in the window. For your divider, you want to specify a fixed height in pixels.
10. Select Pixels, and enter 4 in the Width field.Click OK.
11. Click the button labeled "4) Frame Name and URL."
12. Enter DividerFrame in the Frame Name field.
13. Under Source, select "Page from this database" and select Divider from the dropdown list.Click OK.
14. Click the button labeled "5) Other Frame2 attributes."
15. Enter zero in the Spacing field.Click OK.
16. Click the "Continue to Step 3" button, then click the "Overall Appearance" button and enter zero for both the Border Width and Spacing fields. Click OK.
17. Choose "Continue to Step 4," name this frameset "Inner," accept the defaults for everything else, and save the document.

Back to top

Creating a nested framesetting page

Create a second framesetting page. This one references the "Inner" framesetting page that we've already created, so the result is a set of nested framesets.

1. Choose Create - Step 3: Frame Set.
2. In the wizard select the layout that looks like this:
   Figure 13. Three-frame layout
   
   
3. Press the buttons in the wizard and change the settings to match the following.
   
   Frame 1a :
   Vertical -- 20%
   Horizontal -- 20%
   Frame Name and URL -- Outer (Nested)
   Other Frame1a attributes -- scrolling=Auto
   frameborder=No Framespacing=0
   
   Frame 1b :
   Vertical -- *
   Horizontal -- 20%
   Frame Name and URL -- LinksFrame (Links1)
   Other Frame1b attributes -- scrolling=Auto
   frameborder=No Framespacing=0
   Common attributes for Frame 1a and Frame1b -- frameborder=No Border=0, framespacing=0
   
   Frame 2 :
   Horizontal -- *
   Frame Name and URL -- PageFrame(Page+1)
   Other Frame2 attributes -- scrolling=Auto frameborder=No Framespacing=0
   
   Frameset Settings :
   Overall appearance -- frameborder=No border=0 framespacing=0
   Message for browsers that don't support frames -- This page requires a browser that supports frames. <a href="/demos\NotLotus.nsf/Site+Map"> Click here to use non-frames pages. </a>
   
   Your screen should appear as follows:
   Figure 14. Frame and Frameset Settings
   
   
4. Save this frameset as Main. Note that Main comes alphabetically before Nested. This is important because the Frameset template's database properties has the "On database open" launch option set to open the first document in the "All Pages" view. You can change this to any of the other available launch options. If you don't change it, you have to make sure that the frameset that you want users to come to first is alphabetically first in the All Pages view.

At this point you have a minimally functional frames-based site that looks like this:

Back to top

Enhancing the result

Hotspots in the LinksFrame change the content of the PageFrame. The site isn't particularly exciting looking, but it is only a demo and we haven't really tried to make it look pretty. Now you can change the content of the LinksFrame. Add a new page to the database, and call it Page 6. You can do this by choosing Create - Step 2: Frame Content - Web Page Using HTML. Fill in the following HTML and JavaScript in the document:

<html>
<head>
<script
language="JavaScript">
<!--
function ChangeLinks()
{
parent.LinksFrame.location.href="Links2"
}
-->
</script>
<title>Page 6 for
Not Lotus</title>
</head>
<body
onload=ChangeLinks()>
<br><br>
<H1>Six</H1>
</body>
</html>

				

The JavaScript in this page executes as soon as it loads into the browser. The script modifies the location.href setting for the LinksFrame. So as soon as Page 6 loads into the browser, the set of available links changes automatically. To demonstrate this, create a new Column of Links document called Links2, with "Link A," "Link B," and so on, through "Link E." Links2 doesn't have "Lotus' Real Home," "Application," and "Site Map" specified.

To get Page 6 to load, create a doclink to it on Page 1. Create five more simple documents with page names "Page A," "Page B," and so on, through "Page E." To make these pages look a little different from Pages 2 through 5, create these new documents in a separate area of the Site Map called "Letter Pages." Your site now looks like this:

Back to top

A final word about frames and R4.6.1

Your final frameset should now look structurally identical to the Lotus Web site. There is one difference in the function of the site that is worth noting. In what we're calling the "LinksFrame," the Lotus site uses a categorized view to set up an expandable hierarchy of links. The Lotus site designers had to use a great deal of pass-thru HTML to make this work appropriately. They had to do this because there is no straightforward way in Domino 4.5x or 4.6 to specify that the categories should expand in the current frame, but the categorized documents should display in another frame. Domino 4.61 eliminates the need for this by generating a target=_self attribute on the twisties in a categorized view.

To see how this works, the sample database includes a frameset named "AlternateMain," which loads the SiteMap view into the LinksFrame. There is a view template for the SiteMap that contains a <base> tag that targets all documents to PageFrame. If you load this database on a 4.61 server and bring up the alternate frameset in a browser by entering the URL "http://server/path/notlotus.nsf/pages/alternatemain," you will see that the categorized view links behave the same way as they do on the Lotus site.

Resources

• Domino R4.6 Framesets Sample download
  
  
• Netscape Frames
  
  

About the author

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• What are frames?
• Frames and Web site design
• Looking at the HTML
• Building your frameset with the Frameset template
• Creating the database
• Setting the default values for your links pages
• Creating the Web pages to display in the main page frame
• Creating the logo page to display in the logo frame
• Creating the divider page to display in the divider frame
• Creating the links page to display in your links frame
• Creating a framesetting page
• Creating a nested framesetting page
• Enhancing the result
• A final word about frames and R4.6.1
• Resources
• About the author
• Comments

Local resources

• IBM Innovation Center - Austin, TX
• IBM Innovation Center - Chicago, IL
• IBM Innovation Center - Dallas, TX
• IBM Innovation Center - San Mateo, CA
• IBM Innovation Center - Waltham, MA
• Technical Briefings in North America

My developerWorks community

Dig deeper into Lotus on developerWorks

Calling all developers

Download no charge Lotus Domino Designer

Special offers