Creating Frames in FrontPage 97

This is the process of creating a basic frame page layout that matches the layout of these pages (the ones you are reading).

Open the FrontPage Explorer.

Open your 'index.html' file in the FrontPage Editor.

Create a link to 'frmain.htm' on the 'index.html' file (note: you will be creating this file later).

a.		Type in the text My Frame Page.
b.		Highlight the text.
c.		Select menu 'Insert' 'Hyperlink'
d.		In the 'Page' field fill in: frmain.htm
e.		Press OK.
f.		You wil get an Error Message - page does not exist, press 'OK' to create the link anyway.

Save the 'index.html' file.

Using the menu 'File' 'New', create six files:

frhome.htm	-	This page will contain the link (top left corner) to your home page, type the word 'Home' on the page.

frbanner.htm	-	This page will contain the banner (top right), type the word 'Banner' on the page.

frindex.htm	-	The index (left bottom) page, links to pages to be displayed in the main frame, type the word 'Contents' on the page.

frone.htm	-	First page (right bottom), displayed in the frame used to display the main content pages, type the word 'Page1' on the page.

frtwo.htm	-	Second page (right bottom), displayed in the frame used to display the main content pages, type the word 'Page2' on the page.

frnone.htm	-	The non-frames page, you will add links to all your content pages here for non-frames users, type the word 'No-Frames' on the page.

Starting the 'Frames Wizard' to create 'frmain.htm' the main frames page.

a.		Open the FrontPage editor
b.		Drop down the File menu, and select the New sub-menu option.
c.		The New Page dialog will pop up.
e.		Select the Frames Wizard in the template or wizard list.
f.		press OK.

The Frames Wizard Dialog - Choose Technique

a.		Push the Make A Custom Grid radio button.
b.		press Next.

The Frames Wizard Dialog - Edit Frameset Grid page

a.		Fill in Rows = 2, Columns = 2
b.		press Next.

The Frames Wizard Dialog - Edit Frame Attributes page

Frame

Select the top/left box (click with mouse) of the sample page, and fill in the fields:


Name:		frhome
Souurce URL:		frhome.htm
Margin Width:		4
Margin Height:		1
Scrolling:		no
Not Resizable:		uncheck

Frame

Select the top/right box (click with mouse) of the sample page, and fill in the fields:


Name:		frbanner
Souurce URL:		frbanner.htm
Margin Width:		4
Margin Height:		1
Scrolling:		no
Not Resizable:		uncheck

Frame

Select the left/bottom box (click with mouse) of the sample page, and fill in the fields:


Name:		frindex
Souurce URL:		frindex.htm
Margin Width:		4
Margin Height:		1
Scrolling:		auto
Not Resizable:		uncheck

Frame

Select the right/bottombox (click with mouse) of the sample page, and fill in the fields:


Name:		frdisplay
Souurce URL:		frone.htm
Margin Width:		4
Margin Height:		1
Scrolling:		auto
Not Resizable:		uncheck

Press Next, to move to the next page of the Frames Wizard Dialog.

Note, by dragging the separator bars of the sample page, you can resize the frames (but we will manually set them later).

10.

The Frames Wizard Dialog - Choose Alternate Content

a.		Push the Browse button.
b.		The Choose Source URL dialog pops up.
c.		Select frnone.htm
d.		press OK.
e.		press Next to move to the next page of the Frames Wizard Dialog.

11.

The Frames Wizard Dialog - Save Page

a.		Fill in the Title field: My Frames
b.		Fill in the URL field: frmain.htm
c.		Press Finish. This generates the 'frmain.htm' main frames page.

12.

Manually editing the frames sizes. I do this because the Frames Wizard in FrontPage does not let you exactly size the Frames. If you resize the frames in the Frames Wizard (drag separator bars of the sample on the Edit Frame Attributes page), and want pages that resize proportionally, you can skip this step.

a.		In the FrontPage editor open 'index.html'.
b.		Drop down the File menu and select the sub-menu option Preview in Browser.
c.		Preview 'index.html' in MS Internet Explorer.
d.		Click on the link to your frames page (frmain.htm).
e.		In MS Internet Explorer, drop down the View menu and select the sub-menu option Source.
f.		Notepad should open with the source for the 'frmain.htm' page looking something like: . . . <frameset rows="50%,50%" cols="50%,50%"> <frame src="frhome.htm" name="frhome" marginwidth="4" marginheight="1" scrolling="no"> <frame src="frbanner.htm" name="frbanner" marginwidth="4" marginheight="1" scrolling="no"> <frame src="frindex.htm" name="frindex" marginwidth="4" marginheight="1"> <frame src="frone.htm" name="frdisplay" marginwidth="4" marginheight="1"> <noframes> <body stylesrc="frnone.htm" bgcolor="#FFFFFF"> <!--webbot bot="Include" tag="BODY" u-include="frnone.htm" startspan --><p>Overview</p> <p> </p> <!--webbot bot="Include" endspan i-checksum="14583" --> </body> </noframes> </frameset> . . .
g.		Using Notepad Change: <frameset rows="50%,50%" cols="50%,50%"> To: <frameset rows="72," cols="120,">
h.		In Notepad, drop down the File menu and select the sub-menu option Save.
i.		In MS Internet Explorer, press the Refresh button. Your frames should be resized, and look like mine.

13.

Go to FP Frames 2.

Note: By default, MS Internet Explorer uses windows Notepad for viewing source. If you want to tweek your HTML, you can browse to your page on your hard drive, view the source, tweek the HTML, save it, and then press the Refresh button in MS Internet Explorer to reload the page.