1. Introduction to Programming the WWW I CMSC 10100 Winter 2003 Lecture 6

2. Outline All about frames  frameset  frame  nested framesets  targeting links to frames  navigation via frames  deep linking  pros and cons of frames

3. The Frameset Element The frameset tag pair should follow the head element, replacing the body element The cols and rows attributes are used to divide the Web page into frames Each frame is represented by a separate frame element Specify DOCTYPE as “HTML 4.01 Frameset”

4. Setting up rows and columns Specify a certain number of rows or columns of certain sizes by This makes a three columns of 100 pixels, 300 pixels, and the rest of the screen Can also use percentages Use no more than one * in the list

5. The Frame Element Each frame tag should contain a name attribute The name attribute is used for targeting links (see later) Each frame tag should contain a src attribute that specifies a Web page Can turn off scroll bars with scrolling=“no” frame is a self-closing tag

6. Some more attributes You may specify frameborder, framespacing, and border attributes Only border seems to have a big effect HTML validator has trouble with frameborder See HTML p. 136, and W3C online for more information Example

7. Tabular layout By setting both the col and row attribute, you create a table of frames Frames are listed row by row Example

8. Nested framesets Irregular layouts are useful (the equivalent of using rowspan or colspan in a table layout) You can specify a instead of a frame to create nested framesets Or, you can set the src for a frame to point to a frameset file. Example

9. Linking in frames Target links to correct frame Avoid sucking in external sites

10. The target attribute In a frameset, you can specify which frame you want to load a file in  useful when using frames for site navigation loads the source into myframe target=“_top” clears the frameset target=“popup” loads in a new window

11. The base tag Rather than specifying the target for each link, you can add a line the header such as Sets default link Can also set default link targets to be “_top” to leave the site

12. Deep Linking A deep link is any absolute link inside a framed Web page that displays the destination page inside the frame system You can avoid deep links by sending them to a new browser window Any link can be routed to a new browser window with the target attribute

13. Frames for Site Navigation A typical frame layout uses two nested frameset elements to divide a Web page into three frames: 1. The title frame runs across the top of the Web page 2. A navigational frame occupies a left-hand border under the title frame 3. A content frame occupies the remainder of the Web page Example: bagpipes

14. Art Galleries with Frames A three-frame layout works well for an online art gallery Fill the navigation frame with clickable thumbnail previews When a user clicks on a thumbnail preview, send the original image to the content frame

15. Problems with Frames Not all browsers support frames (try it on a palm!) It is difficult for others to link to content inside a frame It’s easy to create deep links by accident Tougher to save sub-pages, messy with browser cache Complex layout awkward Doesn’t control layout inside each frame

16. Advantages of Frames Frames support intuitive site layouts that are easy to navigate Site development efforts can focus on content and navigation as independent problems Scalability: write one navigation tool bar and stick it in a frame - only change one file to change navigation system

17. Frames vs. tables Tables are tougher to code (but this is fixable through scripting) Tables have wider (but not universal) support on browsers Fewer gotchas for tables Frames are really quick to get going