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

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 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 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: 

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 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 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 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 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 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 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 Adjusting Col and Row Width l Can set ROWS or COLS to a size from %. »

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 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 Controlling Border l Use border=0 to erase lines between frames frame3

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

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

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 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 How would that work? A Nested Frames Example lab6.html lab4.html lab7.html For example

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

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 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 Scroll Bar Example Frames Example Can change a couple lines and disable scrolling

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 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 One Possible Solution frame3 blue red yellow frame3 lab_links.html frame_lab1.html