1. 1 Web Page Design Frames! - Chapt 20 Yet Another Way to Divide Up The Screen. Using HTML and JavaScript to Develop Website

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 Competency Objectives 1. Can build a basic frame using frameset 2. Can set up a site with nested frames 3. Can get nest frames to correctly link to targeted areas. Competency Alert: You need to know this ! Common Problem Area! People seem to forget this

4. 4 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

5. 5 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.

6. 6 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.

7. 7 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

8. 8 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

9. 9 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.

10. 10 Frameset Example: Using cols *.* and default frames sizes. A Simple Frame Your browser does not support frames Make 2 evenly spaced columns Load file on left. Load file on right. Show this if older browser. Note that the frameset does NOT have a tag!

11. 11 FRAMESET- Using Rows Instead of Columns Use rows=“*,*” A Simple Frame Your browser does not support frames Make 2 evenly spaced rows Load on file on top. Load file on bottom. Note Columns load TOP to BOTTOM but rows load LEFT to RIGHT!

12. 12 Adjusting Col and Row Width l Can set ROWS or COLS to a size from 1- 100%. »

13. 13 Adjusting Sizes of Frames Can specify percent size with rows= or cols= A Simple Frame Your browser does not support frames Make top file 20% and bottom 80% Top frame has 20% of window but bottom has 80%

14. 14 Remember need multiple files myframe.html lab6.html mytitle Lab6 ReFrame lab7.html mytitle Lab7 Lab6 Frameset describes page layout Lab7 The URL of this page would be indelible-learning.com/myframe.html

15. 15 Controlling Border l Use border=0 to erase lines between frames frame3

16. 16 Creating Site Layouts l Frames make it possible to create clean navigation layouts. When click link on top, want bottom frame to change.

17. 17 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://indelible- learning.com/website/mod_frames/frame_no_border.html http://indelible- learning.com/website/mod_frames/frame_no_border.html HOWEVER, … Flawed

18. 18 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

19. 19 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

20. 20 Another example Links A blue page A Red page A green top_links.html Frames Example Frame_l_r_nav.html The Blue page This is the BLUE page. It is a very blue page. blue.html See: http://indelible-learning.com/website/mod_frames/Frame_nav/frame_l_r_nav.htmlhttp://indelible-learning.com/website/mod_frames/Frame_nav/frame_l_r_nav.html

21. 21 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)

22. 22 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)

23. 23 How would that work? A Nested Frames Example lab6.html lab4.html lab7.html For example http://indelible-learning.com/website/mod_frames/Frame_nav/tri_split.htmlhttp://indelible-learning.com/website/mod_frames/Frame_nav/tri_split.html

24. 24 So How Could We Get That to Work? Frames Example <!-- cols for vertical divisions src=nested_lines.html name=left src=red.html name=upper src=blue.html name=lower The frameset documement Defines a document to load “src=“ and an arbitrary name “name=“ For example http://indelible-learning.com/website/mod_frames/Frame_nav/frame_l_r_nav_nested.htmlhttp://indelible-learning.com/website/mod_frames/Frame_nav/frame_l_r_nav_nested.html

25. 25 How the nested_links.html file looks... Links A blue page A Red page A green A purple page A yellow page Src= nested_links.html name=left src=red.html name=uppoer src=blue.html name=lower The file nested_links.html When clicked load the HREF= document into the selction with name TARGET=

26. 26 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.

27. 27 Scroll Bar Example Frames Example Can change a couple lines and disable scrolling

28. 28 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

29. 29 Hands-on Lab l Get the following web page to work correctly. Here is the main frameset document: frame3 Make red.html any page you wish frame3 blue red yellow Here is Welcome1.html: Need to add name= and target= attributes.

30. 30 One Possible Solution frame3 blue red yellow frame3 lab_links.html frame_lab1.html