What is this?
Frames allow you to show two or more sites at one time. They are a bit more complicated html, but still doable. For a site with two frames, there will actually be three pages involved. One page will include the code for the frames and will be the url that visitors to your site will view, and the other two will be the two that are displayed.
1. Start a page as explained on the Start your Web Page page. After the head tag, type <frameset.
2. Type rows="a, to create horizontal frames or cols="a, to create vertical frames, where a is the height/width of the first row/column. It may either be a percentage of the screen, a number of pixels, or a variable (*) which will depend on the size of the other rows/columns. I would recomment to use the variable * once and only once if you define your widths/heights with pixels. If you define this attribute as "cols="180,*,180" the left and right columns will be 180 pixels wide and the center frame will be whatever number of pixels are left over. This allows for your page to be displayed on screens of different sizes.
3. Type b, where b is the height/width of the second row/column, again expressed as explained in step 2.
4. Repeat step 3 for as many rows/columns as you wish. On the last time you do this, leave out the , at the end of the value.
Note: I would recommend using the variable * once and only once if you define your widths/heights with pixels. If you define this attribute as "cols="180,*,180" the left and right columns will be 180 pixels wide and the center frame will be whatever number of pixels are left over. This allows for your page to be displayed on screens of different sizes.
5. (optional) Type border=#, where # is the size in pixels of the border of the frames.
6. (optional) Type frameborder=#, where # is the size in pixels of the border of the frames.
7. (optional) Type framespacing=#, where # is the size in pixels of the space in between each row/column.
Note: to get no space between your frames, each of the attributes in steps 5-7 must be set to zero, as well as in 12-13.
8. Type ">.
9. Type <frame.
10. Type name=framename, where frame name is the name of that particular frame, i.e. menu, index, main. This name will be used when you're targeting links to that frame (see Links). If you don't name the frame, all links in the frame will change the page displayed in that frame rather than in the frame you want. For example, if you have a links frame and a main frame, you might want the main frame to change to Rules.html instead of Main.html, but the link is in Links.html. The name allows you to click a link in one frame and have another frame change pages.
11. Type src=page.html, where page.html the url of the page that frame will display initially.
12. (optional) Type border=#, where # is the size in pixels of the border of that frame.
13. (optional) Type marginwidth=# and marginheight=#, where # is the width or height of the margin of that frame. Note: to get no space between your frames, each of the attributes in steps 12-13 must be set to zero, as well as in 5-7.
14. (optional) Type noresize to make it so that viewers will not be able to change the size of that frame.
15. (optional) Type scrolling=no, which will tell the browser to not put a scroll bar on that particular frame.
16. Type >.
17. Repeat steps 9-16 for each row you defined in steps 2-4.
18. Type </frameset>.
19. Create the pages that will be displayed in the frames that you referenced to in step 12.
When completed correctly, these tags will look like this in your code: (notice there is no body tag)
<html>
<head>
<title>Title</title>
</head>
<frameset cols="180,*,180" bordercolor=black border=0 frameborder=0 framespacing=0>
<frame scrolling=no name=links src=Links.html border=0 marginwidth=0 marginheight=0 noresize>
<frame name=main src=Main.html border=0 marginwidth=0 marginheight=0 noresize>
<frame scrolling=no name="news" src=News.html border=0 marginwidth=0 marginheight=0 noresize>
</frameset>
</html>
Click here to see a sample of frames, with the code above.
