A - Frames

Frames are on pages where the links are on your left, and when you click on the link, the right side of the page changes with a new HTML page.  It is used for content to appear on one side and links on the other.  With CSS and PHP, frames are no longer used, but still, it's great to try and use them.  So continue on.

Below is an example of using frames.  Normally you need at least three files.  One is the main page, one is the left hand side, and one is the file that goes to the right hand side.

Frame Set:

• frameset - The parent tag that defines the characteristics of this frames page. Individual frames are defined inside it.
• frameset cols="#%, *"- Cols(columns) defines the width that each frame will have. In the above example we chose the menu (the 1st column) to be 30% of the total page and used a "*", which means the content (the 2nd column) will use the remaining width for itself.
• frame src="" -The location of the web page to load into a specific section of the frame..

A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.

Adding a banner or title frame

Add a row to the top for a title and graphics with the code as follows:

frameset rows="#%, *"- rows defines the height that each frame will have. In the above example we chose the new title (the 1st row) to be 20% of the total page height and used a "*", which means that menu and content (which are the 2nd row) will use the remaining height.

Type in the following, and call it index.html.  Make sure that you have a file called "menu.html" and another frame called "content.html" or change the names to see this.  Then open up the one called index.html

Frameborder and Framespacing

You probably noticed those ugly gray lines that appear between the frames. It is possible to remove these and manipulate the spacing between frames with frameborder and framespacing. These attributes appear within the frameset tag.

Note: Framespacing and border are the same attribute, but some browsers only recognize one or the other, so use both, with the same value, to be safe.

• frameborder="#" - A zero value shows no "window" border.
• border="#"- Modifies the border width, used by Netscape.
• framespacing="#" -Modifies the border width, used by Internet Explorer.

Here's an example of the same frameset without the borders.

Naming and Targetting

When you name each frame (see below, one is named title, the other menu, and the last is content) you can now send a link to the right location or named section.  So if you have a list of links in the menu but you wanted them to go to the content section you need to do two thing.  In the frame page you need to do what is listed below:

then in the menu page, you need to write your links as usualy but you will add another element to the html code:

a href="new.html" target="content"

NOTE:  I did not put the < around the tag because it would disappear in this showing.

We first named the content frame "content" on our frame page and then we set the base target inside menu.html to point to that frame. Our frame page is now a perfectly functional menu & content layout!

noresize and scrolling

It's possible to further customize the tag using the noresize and scrolling="" attributes.

HTML Code:

frameset border="2" frameborder="1" framespacing="2" rows="20%,*"

frame src="title.html" noresize scrolling="no"

frameset border="4" frameborder="1" framespacing="4" cols="30%,*"

frame src="menu.html" scrolling="auto" noresize

frame src="content.html" scrolling="yes" noresize

• noresize - Do not let the frames be resized by the visitor when he/she makes the window bigger or smaller
• scrolling="(yes/no)"- Allow scrolling or not inside a frame. - you have yes or not, not both.

Above, the code set the scrolling for the content frame to yes to ensure our visitors will be able to scroll if the content goes off the screen. Also the code is set for scrolling for the title banner to no, because it does not make sense to have a scrollbar appear in the title frame.

That's it.  There's a lot here.  Start your Assignment/homework..