How to Make Navigational Frames in an HTML Document By: Patrick Clahane

Introduction HTML Frames HTML Frames Divides page into multiple blocks Divides page into multiple blocks Allows user to display multiple documents in one window Allows user to display multiple documents in one window Users Users People with a vary basic knowledge of HTML People with a vary basic knowledge of HTML Materials Materials Computer with internet connection and notepad Computer with internet connection and notepad Header, Links, and Home HTML supporting files Header, Links, and Home HTML supporting files

Step 1: Frameset Begin by typing Begin by typing in notepad in notepad This starts the HTML document and breaks the page up into 2 rows This starts the HTML document and breaks the page up into 2 rows The 20% row is the header frame The 20% row is the header frame The 80% row is the links and main frames The 80% row is the links and main frames

Step 2: Header Frame Type below the code Type below the code This will make the header.html file appear in the top 20% of the page This will make the header.html file appear in the top 20% of the page If no header.html file is present, in the current folder, a message will appear in the window If no header.html file is present, in the current folder, a message will appear in the window

Step 2: Continued

Step 3: Links & Main Frames Type Type This breaks the 80% row, created in step 1, into 2 columns This breaks the 80% row, created in step 1, into 2 columns The 20% column is the links frame The 20% column is the links frame The 80% column becomes the main frame The 80% column becomes the main frame

Step 4: Links Frame Type below the second code Type below the second code This will make the links.html document appear in the 20% column This will make the links.html document appear in the 20% column If no links.html file is present, in the current folder, a message will appear in the frame If no links.html file is present, in the current folder, a message will appear in the frame

Step 4: links Frame

Step 5: Main Frame Type Type This will make the home.html document appear in the 80% column (main frame) This will make the home.html document appear in the 80% column (main frame) The name=“showframe” part allows the links to be opened in the main frame The name=“showframe” part allows the links to be opened in the main frame If no home.html document is present, in the current folder, a message will appear If no home.html document is present, in the current folder, a message will appear

Step 6: Closing Frame Tags Type after the tag in step 5 Type after the tag in step 5 The 2 codes close the frames The 2 codes close the frames The code closes the html document The code closes the html document

Step 7: Targeting Links In the links.html document add the code ‘target=“showframe”’ to each of the links that you want to appear in the main frame. In the links.html document add the code ‘target=“showframe”’ to each of the links that you want to appear in the main frame. Without this code the link will open and take over the entire window Without this code the link will open and take over the entire window

Step 7: Targeting Links

Conclusion Questions?

Works Cited "Frames." W3School June "Frames." W3School June 2008.