how to make navigational frames in an html document by: patrick clahane
TRANSCRIPT
How to Make Navigational How to Make Navigational Frames in an HTML Frames in an HTML
DocumentDocument
By: Patrick ClahaneBy: Patrick Clahane
IntroductionIntroduction
HTML Frames HTML Frames Divides page into multiple blocksDivides page into multiple blocks Allows user to display multiple documents in one Allows user to display multiple documents in one
windowwindow
UsersUsers People with a vary basic knowledge of HTMLPeople with a vary basic knowledge of HTML
MaterialsMaterials Computer with internet connection and notepadComputer with internet connection and notepad Header, Links, and Home HTML supporting filesHeader, Links, and Home HTML supporting files
Step 1: FramesetStep 1: Frameset
Begin by typing <html>Begin by typing <html><frameset rows=“20%, 80%> in notepad<frameset rows=“20%, 80%> in notepad
This starts the HTML document and breaks This starts the HTML document and breaks the page up into 2 rows the page up into 2 rows
The 20% row is the header frameThe 20% row is the header frame
The 80% row is the links and main framesThe 80% row is the links and main frames
Step 2: Header FrameStep 2: Header Frame
Type <frame src=”header.html”> below the Type <frame src=”header.html”> below the <frameset> code<frameset> code
This will make the header.html file appear in This will make the header.html file appear in the top 20% of the pagethe top 20% of the page
If no header.html file is present, in the current If no header.html file is present, in the current folder, a message will appear in the windowfolder, a message will appear in the window
Step 2: ContinuedStep 2: Continued
Step 3: Links & Main FramesStep 3: Links & Main Frames
Type <frameset cols=“20%, 80%”>Type <frameset cols=“20%, 80%”>
This breaks the 80% row, created in step 1, This breaks the 80% row, created in step 1, into 2 columnsinto 2 columns
The 20% column is the links frameThe 20% column is the links frame
The 80% column becomes the main frameThe 80% column becomes the main frame
Step 4: Links FrameStep 4: Links Frame
Type <frame src=“links.html”> below the Type <frame src=“links.html”> below the second <frameset> codesecond <frameset> code
This will make the links.html document appear This will make the links.html document appear in the 20% columnin the 20% column
If no links.html file is present, in the current If no links.html file is present, in the current folder, a message will appear in the frame folder, a message will appear in the frame
Step 4: links FrameStep 4: links Frame
Step 5: Main FrameStep 5: Main Frame
Type <frame src=“home.html” Type <frame src=“home.html” name=“showframe”>name=“showframe”>
This will make the home.html document This will make the home.html document appear in the 80% column (main frame)appear in the 80% column (main frame)
The name=“showframe” part allows the links The name=“showframe” part allows the links to be opened in the main frameto be opened in the main frame
If no home.html document is present, in the If no home.html document is present, in the current folder, a message will appearcurrent folder, a message will appear
Step 6: Closing Frame TagsStep 6: Closing Frame Tags
Type </frameset> </frameset></html> Type </frameset> </frameset></html> after the <frame> tag in step 5after the <frame> tag in step 5
The 2 </frameset> codes close the frames The 2 </frameset> codes close the frames
The </html> code closes the html documentThe </html> code closes the html document
Step 7: Targeting LinksStep 7: Targeting Links
In the links.html document add the code In the links.html document add the code ‘target=“showframe”’ to each of the <a ‘target=“showframe”’ to each of the <a href> links that you want to appear in the href> links that you want to appear in the main frame.main frame.
Without this code the link will open and Without this code the link will open and take over the entire windowtake over the entire window
Step 7: Targeting LinksStep 7: Targeting Links
ConclusionConclusion
Questions?Questions?
Works CitedWorks Cited
"Frames." "Frames." W3SchoolW3School. 2008. 30 June 2008 . 2008. 30 June 2008 <http://www.w3schools.com/HTML/html_fr<http://www.w3schools.com/HTML/html_frames.asp>. ames.asp>.