1. FRAMES

2. Frames allow you to divide the page into several rectangular areas and to display a separate document in each rectangle. Each of those rectangles is called a "frame".

3. Name: Password: What kind of shirt are you wearing? Shade: Dark Light Size: Small Medium Large Select your favorite cartoon characters. Goofy Donald Bugs Bunny Scooby Doo College Degree? Musical Taste

4. Think of frames as creating a "table of documents" on the page. Like a table, a group of frames has rows and columns. Each cell of the table contains a document which is stored in a separate file. defines the beginning and end of the table, and how many rows and columns that table will have. defines what will go into each cell ("frame") of the table.

6. A Basic Example of Frames

7. Start the "table of documents". ROWS="75%, *" The table should have two rows. The first row should take up 75% of the height of the page, the second should take up the rest. COLS="*, 40%"> The table should also have two columns. The second column should take up 40% of the width of the page, the first column should take up the rest. Put the four files into the frames.... Every framed page should have a no-frames alternative. The content should go inside the outermost tag, usually just before the last. The most efficicent method for no-frames content is to link to a page which is specifically designed for no- frames. End the frameset. There are several other aspects of frames to note from this example:

8. src="address" (Frame) Specifies the address of the document to be displayed in the frame. name="window_name" (frame) The NAME attribute is used to assign a name to a frame so it can be targeted by links in other documents. ATTRIBUTES OF FRAMESET AND FRAME TAGS

9. frameborder="1|0" (frameset) When set to "1" a separator is drawn on every side next to another frame. When set to "0" the decision to draw separators is left to surrounding frames.

10. marginwidth="value" (frame) The MARGINWIDTH attribute is used to control the left and right margins. The value for MARGINWIDTH is in pixels. This insures that frame objects won't touch frame edges marginheight="value" It controls the upper and lower margins.

11. noresize (frame) The NORESIZE attribute doesn't require a value. It is used to indicate that the frame is not resizable by the user. The NORESIZE attribute is optional; by default all frames are resizable.

12. scrolling="yes|no|auto" (frame) The SCROLLING attribute indicates whether the frame should have scrollbars or not. "yes" results in scrollbars always being visible on that frame. "no" results in scrollbars never being visible. "auto" instructs the browser to decide whether scrollbars are needed, and to place them where necessary.

13. Framespacing =“value” (frameset) To increase the space between adjacent frames.

14. NESTED FRAME

15. Name: Password: What kind of shirt are you wearing? Shade: Dark Light Size: Small Medium Large Select your favorite cartoon characters. Goofy Donald Bugs Bunny Scooby Doo College Degree? Musical Taste

16. Nested Framesets Let's move now to a more real world example, and a few more techniques for using frames. One of the most popular uses for frames is the "title bar and side menu" method. We'll use as an example a page of recipes, pictured at right. The title of the page, "Great Recipes" stays stationary in a frame at top, a contents list is on the left, and the recipes themselves are in the large box on the right. As you click on the name of a recipe in the contents list, that recipe appears on the right. Remember that a frameset is like a "table of documents" with rows and columns. The recipes page, however, has one column on top, but two on bottom. This is done by nesting framesets, putting one frameset inside another.

19. Great Recipes

21. The first tag says "this frameset will have two rows". The first tag puts a document in the first frame. The second frame is filled in not by a document but by another frameset. The second is creating a "table within a table", or, to be more correct, a frameset within a frameset.

22. Links in a frame

24. Source code for the linked page CONTENTS

25. Targeting Frames Each frame is given a name using. These names uniquely identify each frame. Using these names, links in other frames can tell the browser which frame the link targets. For example, this code creates a framed page, naming the frames TITLE, SIDEBAR, and MAIN: To target one of these frames, the link should have a TARGET attribute set to the name of the frame where the linked page should appear. So, for example, this code creates a link to tfetacos.html and targets that link to the MAIN frame:TARGET this codeproduces this my link the link in this pagethis page

26. Targeting the Whole Window Eventually in a framed site you want to "break out"... link to a page and have that page take over the entire window. To create this sort of link, we add TARGET="_top" to the tag: this codeproduces this the link in this pagethis page In the previous example we used TARGET to refer to a frame we had named MAIN. In this example, however, we refer to a frame we never named: "_top". We can do this because the outermost frame (that is, the entire window) is already named "_top". "_top" is a reserved name which is automatically given to the entire window. So when we say TARGET="_top", we are saying "put the new web page in the entire window". Note that "_top" needs to be in all lower-case, it should have quotes around it, and don't forget the underscore ("_").previous example TARGET=NAME OF THE DOCUMENT,