|
|
Frames are much like tables...but there is a major difference. A frame can contain links that change the contents of other frames. One frame can be used as a table of contents, while the other frame displays the links that are clicked on from the first frame. Confused? Don't worry...it isn't so hard. Frames are a way of presenting two or more web pages to the visitor at once. The Technical definition: "A frame is a rectangular region within the browser window that displays a web page, alongside other pages in other frames." To make frames, you create the pages that you want to use in the frames all separately....just like you have done before...create separate HTML documents, and save them in the same folder. You will then put them all together by using a "frameset document". A frameset document has no content...it just tells the browser which pages to load, and how to arrange them in the window. To make your frameset document, start a new page. The page will contain the following tags; <html>
First, notice that we didn't use a body tag...no need for one, because there is no content on this page...just a frameset. Now, the frameset tag (<frameset>) must specify if your frames will be in rows or cols (columns). Rows go across the page, columns go up and down on the page. So, now, our frameset tag would look like this: <frameset cols> Now, the rows and cols must specify a size... <frameset cols="20%,80%"> This tells the browser that the first frame will take up 20% of the page, and the second will take up the other 80%. You must add a size value for each frame that you want on your page...divided equally among the size of the page, which is 100%. For instance, if I wanted four columns of frames, I would put: <frameset cols="25%,25%,25%,25%">. Of course, since this is an even split, it would be simpler to tell the browser to just split it up evenly...like so: <frameset cols="25%,*,*,*"> That is all there is to configuring the frameset....next, you must configure the <frames> tag. So far, we have: <html>
Following this, we have: <frame name="Your Title" src="http://PageToDisplay.com" marginwidth="10" marginheight="10" scrolling="auto" frameborder="yes"> This tag tells the browser which HTML document to display in each frame. You will have this tag for each frame you want on your page. The src= tag, of course tells the browser which page to load in the frame. Marginwidth determines the size of the left and right margins of the frame in pixels, and marginheight determines the size of the top and bottom margins of the frame in pixels. Scrolling determines if there will be scroll bars or not for that frame. Frameborder determines if there will be a border or not. If you do not want the viewer to be able to resize your frames, you should also add the attribute "noresize", without the quotations. inside the frame tag. There is also a name attribute inside the frame tag. This does something special..and can be named whatever you want. With this attribute, you can make any link on the page change the contents of that frame using the <a target> attribute. For instance... You want the first frame to contain your menu, and you want the second frame on the page to show the viewer the pages contained in your menu when those links are clicked on. You would name the first frame menu, and perhaps name the second frame showpage. Now, in the first frame, you would display a page that just has a menu on it, and in that page, you would use your links as such: <a href="examplepage.html" target="showpage">
Now, you have two links in your menu frame, and when they are clicked on, the pages in your directory named examplepage.html and examplepage2.html, will be displayed in the second frame, because the name of the second frame is showpage and the target for those two links is showpage. Now, you can make frames...it's done like this: <html>
That was the hardest part...now back to the easy stuff!Contents |