HTML Lesson 5

HTML Lesson 5

Frames

Ask Maggy Mae is created using frames. Frames divides the browser into several web pages. On Ask Maggy Mae there are 3 pages displayed each time you click. When you enter the site you have the logo on the top, which is one page; the navbar on the left side, which is a second page; and the front page on the right which will change each time you click on a link on the navbar.

Using frames makes it much easier to add pages to Ask Maggy Mae. At the moment there are 122 pages on the site. I chose to use frames to make my work much simpler. My considerations were, changing the logo, the constantly adding new pages which could end up costing me many hours of senseless programming to change the navigation menu on each page every time I added or even deleted a page from the site. I did consider doing away with frames because the navbar I use is created in such a manner that editing would not be difficult but because the navbar is a JavaScript navbar I reconsidered in the case of those who do not have JavaScript enabled browsers and use the backup navbar I've included in my site.

There really isn't a lot of work to creating a frames page, but it is very important to make sure the links within the frames are created properly.

Tags & Attributes

The basic tags and attributes you will need to know in order to use frames are as follows.

<FRAMESET> </FRAMESET>	<FRAMESET> tag establishes frames within the HTML document, it will end with the </FRAMESET> tag.
ROWS	will set the size for rows in either pixels, percentage or "*" can be used to signify remaining space.
COLS	will set the size for columns in either pixels, percentage or "*" can be used to signify remaining space
<FRAME>	This tag is used to identify the frame's characteristics and load the initial content.
SRC="url"	identifies the page that will be loaded into the frame
NAME	this will label a frame so it can be referred to from other frames or windows.
<NOFRAMES>	sets a section of the HTML document that will be visible to a browser that does not support frames. Basically it will tell the person that the page is a frames page and their browser does not support it.

Below you will see the basic HTML code for a frames page that is set up with a the frames in rows. You can also set the frames so they are in columns with the COLS attribute.

<HTML>
<HEAD>
<TITLE>Sample Frames Page</TITLE>
</HEAD>
<FRAMESET ROWS="128,*">
<FRAME NAME="header" SRC="url for top frame">
<FRAME NAME="main" SRC="url for bottom frame">
</FRAMESET>
</HTML>

You can add formatting to your basic frames page to create a design that suits you. The attributes listed below should only be used within the <FRAME> tag.

FRAMEBORDER=?	allows you to set the border around the frame or remove it
NORESIZE	stops visitors from being able to resize the frame
SCROLLING="?"	allows or stops the visitor from scrolling the frame, the values are Yes or No and Auto
MARGINHEIGHT=?	sets the margin height (in pixels) above and below the content within the frame
MARGINWIDTH="?"	sets the margin width (in pixels) before and after the content within the frame
BORDERCOLOR="?"	sets the color of the frame border (if you have chosen to have a border)

The HTML code below is the code used to create the frames page for this sample created originally for the MSN Tutorial on adding music to your site using frames. My pages have been created with FrontPage so I removed the Meta Tag lines to show just the frames coding. This sample shows all of the attributes except FRAMEBORDER and BORDERCOLOR.

<html>
<head>
<title>Ask Maggy Mae</title>
</head>
<frameset rows="128,*">
<frame name="header" scrolling="no" noresize target="main" src="musicpage.htm" marginwidth="0" marginheight="0">
<frame name="main" src="AMMQuilt.htm">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>

Navigation

There are two ways to set your navigation of your frames page. Either your visitors can click in one frame and the result of that click will appear in another frame, or your visitors can click in one frame and the result of that click will appear in the same frame. I have used both these options when I created the frames page for Ask Maggy Mae. When going from one navbar to the other the click navigates the visitor within the same frame bringing up a new navbar that is not JavaScript, but when the visitor clicks on any of the links in the navbar other than switching navbars the click will result in a page opening in the frame beside the navbar. The top frame holding the Ask Maggy Mae logo never changes. This is where the use of TARGET="?" comes in. You will use the TARGET attribute to instruct the browser in which frame the click will open in.

Site Map