Site Design

Page 5

Intermediate HTML (Frames Pages)

Okay, this page will still be on the basics, but it takes you something about frames pages.

Here we will do some elements for creating a web site done in frames pages and give it some type of structure.  After all, a well organized web site is the key to success.

Frames pages are done much differently in that one page brings up a menu page, a main page and sometimes a title page.  I've created a frames pages for you to see at least one way they can be done.  The link to it is below and it will open in a new web browser.

To identify and explain what a frameset is, what it does and why.  Think of a frameset as a window with individual panes.  Each pane shows different information.  Dividing a page is called a frameset, and it allows the visitor to see more than one page at a time, without completely cluttering up their screen.  Each frame contains its own web page, and theoretically could be viewed independently in a separate window.

Frames should be in the same folder for ease of operation or you will need to spell out specifically where they are if they choose to place them in different places.

The beauty of having several web pages open on a screen at a time, however, lies in the ability to interrelate the information in each of the pages.  For example, you can have a stationary banner frame across the top of the window that includes your site name and logo.  Meanwhile, a dynamic frame on the left side of the window can include a table of contents.  Finally, the main area of the window will be devoted to the contents frames, whose data (information) changes each time your visitor clicks on a new topic in the table of contents.

Another nice thing to using a frameset is that the menu can be on the left, right or any place you choose to place it.  Most however, place it on the left.

Example Frames Pages

Starting a web page with Notepad:

First, you need to start the coding that will tell the browser (i.e. Internet Explorer Browser) that it is a frames web page.  To do this, you would create the index.html page like one of the two examples below.

The index.html page itself has ONLY the tags below.  This is what tells your browser that it is a frames web page.

The first frames pages index page is done the following way:

<title>New Page 1</title>


<frameset rows="64,*">
<frame name="banner" scrolling="no" noresize target="contents" src="title.htm">
<frameset cols="150,*">
<frame name="contents" target="main" src="menu.htm">
<frame name="main" src="main.htm">


<p>This page uses frames, but your browser doesn't support them.



Your menu page would be as below:

<base target="main">



This would the "Menu Page".



Your title page would be as below:


<base target="contents">



<p align="center">
This would be the "Title Page".


Your main page would be as below:



This would be the "Main Page" where you would place your text and images.  It is also the place where all of your other pages are direct for people to view.



This type of web pages are rather neat to work with and allow your visitors to have the menu page to the left of their viewing at all times.

After creating the pages above, you can add pages to the site without to much trouble.  Just create the page, add the link to the links in the menu page and you're all set.

If you want, you can place tables in the title, menu and main pages by following the instructions on page two of this section.  Remember, web site building is an experience that will be unforgettable and rewarding.

You also need to remember that each page should have a different name when saving them.

Example page names:

index.html  (With frames, this would be the page that calls up your other pages.)

page1.html or page1.htm

page2.html or page2.htm

Example frames pages names:  (These page names are best used for the beginning of your frames pages.)

index.html ---> is the page that calls up your other pages.

title.htm ---> gives the the title of the site on one page and leaves the other pages free for text and images of your choose.

menu.htm ---> gives a list of the pages on your web site with links to each page.  If you prefer, you can use image on this page for links.  (Page 4 gives examples of coding for this.)

main.htm ---> this is where you place your text and images.

Of course, you can name the pages anything you wish, but always name them so that you can remember which page is which for your convenience.

Again, I actually recommend using Mircosoft Frontpage for designing any web site because you don't need to know html in order to build.

[ Site Design 1 | Site Design 2 | Site Design 3 | Site Design 4 | Site Design 5 | Site Design 6 ]


[ About Me | Site Legal Info | Site Design | CSS Coding ]
[ JavaScripts | Hints & Tips | BackGrounds | Misc. Images ]
[ Templates | Logo Page | Special Characters | Color Chart ]
[ Contact Us! | Awards Won | Links ]
[ Home | Site Map ]


Go to Top

Webmaster & Owner: Anita Eberline
No part may be reproduced without prior permission by Anita Eberline