Frames in HTML

Speaker Notes

Slide 1:

This presentation deals with frames.

You should definitely find a site on the web or in a text book to gather additional information on frames.

Slide 2:

This page has two frames - one on the left and one on the right.

Each of the frames contains a page that was developed. If you open the page that is included in the frame as a separate page, it will occupy a full screen.

Slide 3:

This slide shows the page that was displayed in the left frame on the previous slide as a separate page.

Slide 4:

This is the page that contains the two frames. They are defined within the FRAMESET as two columns - each taking up 50% of the page.

Refer to the slide that shows the frame containing the image on the left and the image on the right.

Slide 5:

This shows the code that sets up the frame and the code in the frame that appears on the left side.

Slide 6:

This slide shows the page that sets up the two frames (code on the top left).

It also shows the code that appears in the RIGHT frame of the page.

Slide 7:

This page has two frames - one on the top and one on the bottom.

Slide 8:

This shows the FRAMESET that contains two frames. One frame is underneath the other.

Slide 9:

This is the code that will appear in the top frame on the page when indexTB.html is displayed. (indexTB.html appears in the top left of the slide).

Slide 10:

This slide shows HdrB.html which appears in the bottom frame when the page indexTB.html is on the screen.

IndexTB.html is shown in the top left of this slide.

Slide 11:

This slide shows 4 pages arranged in frames.

The code for this will be explained on the next slide.

Slide 12:

This slide show the code that produce the 4 frames that contained 4 individual pages. This page was illustrated on the previous slide.

Note that since COLS and ROWS both split the space evenly, I have 4 frames of the same size.

Slide 13:

This slide shows HdrT.html which will appear in the top left corner when shown within the context of the FRAMESET. If shown alone you would simply see the screen with the header, text and image.

Slide 14:

IndexTLRB.html is in the middle of this slide pointing to the pages that will show in the four frames that have been set up.

Slide 15:

This shows a different layout using 4 frames. Each frame is showing a separate page. Notice that the frame at the top and the frame at the bottom are not able to show all of the image (therefore all of the information on the page). Because of this, the scroll bars were automatically added.

Slide 16:

This setup is showing a FRAMESET within a FRAMESET.The first FRAMESET divides the screen into three rows.

The second FRAMESET is where the second row would be layout. It breaks the second the second row into two columns.

Slide 17:

This slide shows the page indexTLRB.html which sets up four frames.

A row across the top of the page contains the page called HdrT.html.

A middle row broken into two columns contains the page calledHdrL.html on the left and the page called HdrR.html on the right.

A bottom row which contains the page HDRB.html.

Slide 18:

This page is indexLRtar1.html

This shows two frames. When the NEXT is clicked the page in the right frame will be replaced with a new page.

Slide 19:

This frame set allocates the frame on the right 33% of the area and the frame on the left the rest (67%) of the area.

The frame on the right contains the code:

<A HREF="HdrRnew.html" TARGET="_self><IMG SRC="NEXT.gif"</A>

This means that the page HdrRnew will be loaded onto the screen and the target will be self, meaning it will load in the same place the HREF was issued from.

Between the <A...> and the close</A> we traditionally see the words that can be clicked on to make the link happen. In this case, instead of words we are given an IMG to click on. The image is NEXT.GIF.

Slide 20:

After NEXT is clicked, a new page will be loaded into the right frame. The frame on the left will be unaffected.

Target="_self" means replace myself with the new image. Since the frame on the right called for the replace, the new page will appear on the right.

Slide 21:

This shows the new page in the right frame. The left frame is the same.

Slide 22:

This page is indexLRtar2.html.

In this frame when the NEXT is clicked a new page will be loaded as a full screen. Nether of the frames will be visible. When the full screen is displayed, the standard back will bring you back to this page.

Slide 23:

The command:

<A HREF="HdrRnew.html" TARGET="_top">

means that the new screen HdrRnew.html will be loaded as a full screen. Because of <IMG SRC="NEXT.gif"</A> this will happen when the NEXT is clicked on.

Slide 24:

After NEXT was pressed this page loaded into full screen.

Slide 25:

When target = "_blank" the designated page will be loaded in a new window. That means there will now be two windows open. You cannot get back to the original page by using back, you need to click on the window on the command bar at the bottom of the screen.

Slide 26:

This page is indexLRtar3.html.

In this page when the NEXT is clicked, the new page will be loaded into a new window. This means that when you are in the new page you cannot press back since you are in a different window. To get back, you need to use the command bar at the bottom of the screen

Slide 27:

This shows the two open windows. One for the page that brought up this page (original page) and one for the current page.

Slide 28:

This is indexRTtar4.html.

When NEXT is clicked on, a new page will be loaded into the right frame.

Slide 29:

This slide illustrates loading a page into a named frame. The frame names are assigned when the frame is first defined. Other pages can be moved to that frame by using the frame's name.

Slide 30:

This shows the new page after the NEXT was pushed. A new page has been loaded into the right frame.

Slide 31:

The frames we have looked at up until now have had scroll bars added if needed and the user has had the ability to resize the frames.

On this page, the parameters have been set so that there can be no scrolling or resizing.

Slide 32:

To avoid the user resizing the screen or to keep scroll bars from being included, the NORESIZE and SCROLLING=NO clauses can be added.