1. 1 DePaul University SNL 262 Web Page Design Frames! - Chapt 20 Yet Another Way to Divide Up The Screen. Instructor: David A. Lash

2. 2 Outline l Advantages and disadvantages of frames. l Using frameset »How to use frameset »How to “name” frame areas l Nesting frames »How to build nested frames »How to get them to work right

3. 3 FRAMES - Yet Another Way to Divide Up The Screen.  Frames - a method for dividing the browser window into smaller sub-windows, each displaying a different HTML document.  Frames look like the following:  http://24hourhtmlcafe.com/hour20/syrup.htm http://24hourhtmlcafe.com/hour20/syrup.htm

4. 4 FRAMES - Advantages and Disadvantages  Advantages  Allow parts of page to remain static while other parts scroll. (E.g., the navigational items might remain on screen.)  Can unify documents and items that remain on different servers. For example, keeps your frame navigation items on the screen while you display graphic or document on different server.

5. 5 FRAMES - Advantages and Disadvantages  Disadvantages  Not supported by older browsers  Can increase the complexity of the site (have to organize all the documents for the frames.)  Frames can be more difficult to navigate.  Users cannot bookmark individual pages nested within a framed document.  It decrease the size of the screen displayed to the user.

6. 6 Outline l Advantages and disadvantages of frames. l Using frameset »How to use frameset »How to “name” frame areas l Nesting frames »How to build nested frames »How to get them to work right

7. 7 The Frameset Document l Frames are made up of a set of HTML documents. »E.g., one for navigation, one for banner one for center screen. l The separate HTML documents needed to display the frames is held together by a single frameset document. Main Content My Web Site link1 link2 link3 banner.html navigation.html content.html

8. 8 Frameset?  The frameset document:  defines what gets loaded in each part of frame  Looks like a regular HTML document but  tag is used instead of the  is used to define the rows and columns of the indivudual frames.  The individual frames are identified by tag.

9. 9 Frameset Example: l Here is a simple example (Click here) the cols *.* uses default sizes of the frames.Click here A Simple Frame Your browser does not support frames Make 2 evenly spaced columns Load Lab4.html on left. Load Lab5.html on right. Show this if older browser. Note that the frameset does NOT have a tag!

10. 10 FRAMESET- Using Rows Instead of Columns l Suppose want 2 rows instead of 2 columns? »Here is a simple example (Click here) using the rowsClick here ReFrame Make 2 evenly spaced rows Load Lab6.html on left. Load Lab7.html on right. Note Columns load TOP to BOTTOM but rows load LEFT to RIGHT!

11. 11 So how does this work? myframe.html lab6.html mytitle Lab6 ReFrame lab7.html mytitle Lab7 Lab6 Frameset describes page layout Lab7 The URL of this page would be condor.depaul.edu/~dlash/myframe.html

12. 12 Controlling Border l Can set border to 0 to erase lines between frames ReFrame l http://condor.depaul.edu/~dlash/website/frame3a.html http://condor.depaul.edu/~dlash/website/frame3a.html

13. 13 Adjusting Col and Row Width l Can set ROWS or COLS to a size from 1- 100%, (or an absolute pixel size). »

14. 14 Lets look at a Layout... frame3 </HEAD frame3 HOME SITE INDEX SPORTS PAGE COMICS Welcome1.html Welcome2.html Frameset: frame3a.html When click a link on top, the top changes (instead of bottom). See http://condor.depaul.edu/~dlash/website/frame3a.html http://condor.depaul.edu/~dlash/website/frame3a.html HOWEVER, … Flawed

15. 15 Outline l Advantages and disadvantages of frames. l Using frameset »How to use frameset »How to “name” frame areas l Nesting frames »How to build nested frames »How to get them to work right

16. 16 Giving Frame Areas Names... Frames Example <!-- cols for vertical divisions src=links1.html name=apple src=i.html name=orange Links The "A" page The "B" page The "C" page The "D" page ~ The file links1.html When one of these is clicked will load document in section named “orange”. The frameset document frame4.html http://condor.depaul.edu/~dlash/ website /frame4.html

17. 17 Nesting Frames... lab6.html Suppose you wanted to create a frame as follows: lab4.html lab5.html This could be described as 2 columns - First col: lab6.html on left - Second Col: Split into top (lab4.html) and bottom (lab5.html)

18. 18 Likewise … lab6.html Suppose you wanted to create a frame as follows: lab4.html lab5.html This could be described as 2 Rows: - First Row: lab4.html on top - Second row: Split into left (lab6.html) and right (lab5.html)

19. 19 How would that work? A Nested Frames Example lab6.html lab4.html lab7.html For example http://www.depaul.edu/~dlash/website/Frames4.htmlhttp://www.depaul.edu/~dlash/website/Frames4.html

20. 20 So How Could We Get That to Work? Frames Example <!-- cols for vertical divisions src=links1.html name=left src=h.html name=uppoer src=i.html name=lower For example http://condor.depaul.edu/~dlash/website/frames9a.htmlhttp://condor.depaul.edu/~dlash/website/frames9a.html The frameset documement Defines a document to load “src=“ and an arbitrary name “name=“

21. 21 How the links.html file looks... Links The "A" page The "B" page The "C" page The "D" page src=links1.html name=left src=h.html name=uppoer src=i.html name=lower For example http://condor.depaul.edu/~dlash/website/frames9a.htmlhttp://condor.depaul.edu/~dlash/website/frames9a.html The file links.html When clicked load the HREF= document into the selction with name TARGET=

22. 22 Some Frameset Attributes »bordercolor=#rrggbb or color name »longdesc=url - A link to a document containing a long description of the frame and its contents. It may be useful for non-frame browsers. »name=text - Assigns a name to the frame. This name is typically referenced by targers within links to make the document load in the named frame. »src=url - Specifies the location of the HTML file to display in the frame. »noresize - Prevents users from resizing the frame. (Default allows resize). »scrolling=yes|no|auto - If scrollbar appears in a frame.  yes ===> scrollbars always appear, no ===> scrollbars never appear, auto ===> (default) scrollbars appears automatically when contents not fit in the screen.

23. 23 Scroll Bar Example Frames Example By default scroll bars on enabled http://condor.depaul.edu/~dlash/website/Frame10.html See an example Can change a couple lines and disable scrolling http://condor.depaul.edu/~dlash/website/Frame101.html

24. 24 Summary l Advantages and disadvantages of frames. l Using frameset »How to use frameset »How to “name” frame areas l Nesting frames »How to build nested frames »How to get them to work right