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

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

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

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

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.

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.

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

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

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.

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!

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 rows load TOP to BOTTOM but columns load LEFT to RIGHT!

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

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%

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

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

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

Lets Look at a Layout... frame3 </HEAD frame3 HOME INDEX SPORTS COMICS Welcome1.html Welcome2.html Frameset: frame3a.html When click a link on top, the top changes (instead of bottom). See HOWEVER, … Flawed

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

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

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

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)

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)

How would that work? A Nested Frames Example lab6.html lab4.html lab7.html

So How Could We Get That to Work? Frames Example 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=“

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=upper src=blue.html name=lower The file nested_links.html When clicked load the HREF= document into the selction with name TARGET=

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.

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

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

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.

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