The HTML Ebook Frameset

60
rate or flag this page

By Chrysanthus


HTML Ebook - Part 3

Introduction
This is part 3 of my series, HTML Ebook. In this part of the series we look at the frameset for the HTML ebook project.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

A Frameset
A frameset is still an HTML document, but instead of the HTML BODY element, it has the FRAMESET element. The FRAMESET element defines the different frames for the HTML document. It has the number, position and size of the different frames.

Our Project Frameset
This is the code for the frameset of our project.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title of Ebook</title>
    <script type="text/javascript">
        searchVar;
    </script>
</head>
<frameset rows= "125,*">
    <frame name="banner" src="banner.htm" scrolling = "no">
    <frameset cols="25%, 75%">
        <frame name="sidebar" src = "sidebar.htm" scrolling = "yes">
        <frame name="content" src = "cover.htm" scrolling = "yes">
    </frameset>
</frameset>
</html>

There are two framesets, one nested in another. The outer one divides the browser window into two rows: a small row higher for the banner frame and a big row lower for the rest of the window. The nested frameset divides the lower portion of the outer frameset into two columns: the left small column is for the sidebar frame and the right big column (rest of portion) is for the content frame. The outer frameset has the banner frame. The nested frameset has the sidebar frame and the content frame. Note the attributes of the frame tags.

Scrolling
The banner frame does not have scroll bars, so it has the value, "no" for the attribute, "scrolling". The sidebar frame has scroll bars, so it has the value, "yes" for the attribute, "scrolling". The content frame has scroll bars, so it has the value, "yes" for the attribute, "scrolling". The information (text and maybe some images) in the content frame can always grow downward below the bottom edge of the content frame; so the content frame needs scroll bars. As the tree of links in the sidebar is expanded, it grows to the right and downward, and may cross the right and bottom sidebar edges, so the sidebar needs scroll bars.

Frame Borders
By default a frame would display its borders. So the above frameset would display borders for the frames. Let us allow this situation for this simple project. In your commercial project, you can remove the borders, and give the pages for the different frames, slightly different background colors, to differentiate the frames; you can also add some beauty.

The Source Attributes
This frameset page, the banner, sidebar and initial content HTML page are in the same directory (head directory). So the values of the source attributes for the frames are not preceded by any path. Note the names of these values, which are the names for the HTML files for the frames. The files for the banner and sidebar will never change. The file for the content will change as the user clicks links.

Name Attribute of Content Frame
The name attribute of any frame gives the name of that frame. This value of the name attribute of the content frame is, "content". This value will be used to send an HTML page to the content frame.

JavaScript
The frameset has a JavaScript. This JavaScript is in the HEAD element of the frameset. The JavaScript has just the declaration of a variable. We shall come back to this variable later.

Wow, not as difficult as it appeared. We take a break here and continue in the next part of the series.

Chrys

Comments

RSS for comments on this Hub

No comments yet.

Submit a Comment

Members and Guests

Sign in or sign up and post using a hubpages account.


optional


  • No HTML is allowed in comments, but URLs will be hyperlinked
  • Comments are not for promoting your hubs or other sites

working