1. Compiled by ackoo Creating Frames

2. Compiled by ackoo Recall this… Table cell 1 Table cell 2 Table cell 3 Table cell 4

3. Compiled by ackoo How frames work? With frames, you can display more than one Web page in the same browser window. This page contains three frames: 1) Top frame for logo 2) Navigational table as the left frame 3) Content loads on the third frame.

4. Compiled by ackoo How frames work? Frames are described from top to bottom, and left to right. Approach frames design with caution. Don’t overuse it.

5. Compiled by ackoo Advantages and Disadvantages of Frames Advantages: ? Disadvantages: ?

6. Compiled by ackoo Advantages and Disadvantages of Frames Advantages: Ability to have one portion of window always visible while others scroll through longer content. Provide navigational possibilities. Unify information from several sites onto one page. Disadvantages: Difficult to click through them. Difficult to be bookmarked or found by search engines. More work for developers and a heavier load for the server. Is not supported by some browsers. Unable to print the whole pages (include logo)

7. Compiled by ackoo Example of Frameset and Frame Tags

8. Compiled by ackoo HTML Tags for Frames: and Frameset Page You need a frames-enabled browser to view this page. NOTES: Frameset doesn’t need a tag because it has no body. If you put contents in the tag, the contents won’t be displayed.

9. Compiled by ackoo Html tags for frames and its attributes. TagAttributesDescription Border=“number” Cols=“measurements” frameborder=“1” or “0” Rows=“measurements” Declare the body of a framed document. Border thickness in pixels when border is on. Number of columns (vertical frames). Specifies whether borders appear between the frames (1=yes, 0= No). Number of rows (horizontal frames) marginwidth=“number” marginheight=“number” name=“text” scrolling=“yes” or “no” or “auto” src=“url” Adds a frame to a framed document. Pixel space held on the left edge of the frame. Pixel space held on the top edge of the frame. Name of the frame (for targeting) Specifies whether scrollbars appear in the frame name of the file to load in the frame. Content that will display in a non-frames browser

10. Compiled by ackoo Do it now! Click for some examples of how frames are used: http://www.w3schools.com/html/html_examp les.asp Let’s explore these examples

11. Compiled by ackoo Linking pages/contents to the navigation items. Example: ABOUT US VIDEO SLIDESHOW Do you notice the target attribute for link?? (Also, see an example from w3school).example

12. Compiled by ackoo Linking pages in your site’s frames There are several types of link target: Target to a frame (put the frame name, as previous example) Target to a blank browser window (_blank) Target to the same frame (browser window) (_self) Target to the parent frame, which cause breaking out of the frameset, ie the frameset that is one step up in the nested frame hierarchy. (_parent) Target to the top level of the browser window, breaks out its frameset and displayed in the full browser window. (_top)

13. Compiled by ackoo Do it now! To practice, download this zip file (and extract it): (http://10.100.3.9/~ackoo/tutorials/html_ba sic/notes/frame_practice.zip).http://10.100.3.9/~ackoo/tutorials/html_ba sic/notes/frame_practice.zip Do this: Create an “index.html” file with frames: A top frame for logo page, a left frame for navigation page and a right frame for contents to load. Create the links for the navigation panel.

14. Compiled by ackoo More reading about Frame http://www.w3schools.com/html/html_frames.asp