Designing a Web Site with Frames

Designing a Web Site with Frames Maureen Smith Professor, Saddleback College Tutorial 5

Lesson Plan • Review • Tutorial 5 – Designing a Web Site with Frames • Session 5.1 • Session 5.2 • Review

Objectives Objectives! • Describe the uses of frames in a Web site • Lay out frames within a browser window • Display a document within a frame • Format the appearance of frames by • Setting the margin widths

Removing scrollbars • Specifying whether users can resize frames • Direct a link target to a specific frame • Direct a link target outside of a frame layout • Add page content for browsers that don’t support frames

Format the color and size of frame borders • Incorporate an inline frame in a page

Session 5.1 • As a Web site grows in size and complexity, each page is dedicated to a particular topic • List of links, contact info, philosophy • Might want to display info from several pages at same time • Could duplicate that info across the site • Time/effort to repeat same info

Each time a change is made, need to repeat the edit for each page in site • This contributed to creation of frames • A frame is a section of the browser window capable of displaying contents of an entire Web page • See Figure 5-1 • Commonly used to display a ToC in one frame; individual pages in another

Links remain on screen while user goes through contents of the site • Downside of frames is that you are causing browser to load multiple HTML files; longer delay for users • Some browsers have difficulty printing pages within individual frames • Should try to create both framed and nonframed versions

Also, not all browsers can display a framed page • With the increasing popularity of frames, this is less of an issue • Should still try to create both framed and nonframed versions however

Planning Your Frames • Plan appearance and use • What info will be displayed in each frame? • How do you want the frames placed on the page? What is the size of each frame? • Which frames will be static--always showing same content? • Which frames will change in response to hyperlinks being clicked?

What Web pages will users see first when they access the site? • Do you want to allow users to resize the frames? • You are going to design a Web site for The Yale Climbing School • Debbie has already thought about what info should be displayed • See Figure 5-3 for a list of files for these pages

The files are organized into various topic areas such as tour descriptions, climbing lessons, company philosophy • Two do not cover topics, but rather contain hyperlinks to other Web pages • What should the user see first? • Debbie has sketched out a layout; see Figure 5-4

She would like 3 frames: • Top will display school’s logo and always be visible (static) • Frame on left will display the list of pages with each item acting as a hyperlink to a specific page • Should always be visible, but users should be able to expand it

Third frame on right will display different Colorado Experience documents, depending on which hyperlink the user clicks in the Links frame • Yale home page should be first page user sees • This is standard layout and a typical use of frames • First task is to insert the code that creates the type of layout she wants

Creating a Frameset • Frame layout is defined using the <frameset> tag <html> <head> <title>Page Title</title> </head> <frameset> Frame definitions </frameset></HTML>

Notice that this code does not include the <body> tags • A page with frames displays the content of other pages; there is no body page to speak of • One situation in which to use <body> tags is when you are creating a page that can be displayed whether the browser supports frames or not

Specifying Frame Size and Orientation • Frames are placed within a frameset in either rows or columns, but not both • See Figure 5-5 which shows 2 framesets • One in three columns • The other in three rows

Syntax for row or column layout: <frameset rows=“row1, row2, row3, ...”> • or <frameset cols=“column1, column2, column 3, ...”> • where row height is height of each row, and column width is width of each column

No limit to the number of rows/columns for a frameset • Row/column sizes are specified 3 ways: • In pixels • As a percentage of the total size of the frameset • By an asterisk (*) • Tells browser to allocate any unclaimed space in frameset to the particular row/column

Example: <frameset rows=“160,*”> • Can use all three ways of specifying row/column size in a single <FRAMESET> tag <frameset cols=“160,25%,*”> • See Figure 5-6 • At least one row/column should be specified with asterisk

To guarantee that the frames fill up the screen regardless of monitor resolution • Can also use multiple asterisks for equal sizes • Initial file has been created • See tutorial5/yale1.htm

First set of frames will have two rows • Top row will be used for company logo • Second row will be used for text of page’s content • A frame 85 pixels high should be tall enough for the logo • Rest of browser’s display area will be taken up by second row

Initial frame layout is now defined • Will include later the third frame • For now, need to specify source for the two frame rows

Specifying a Frame Source • Tag used to specify page that will be inserted into a frame is <FRAME> TAG <frame src=“url” /> • where url is the URL of page you want to load • Inserted between <frameset> tags • Top frame should display head.htm file which contains company logo

See tutorial5/yale2.htm • You’ve specified source for first row, but what about second row? • Will contain two frames • Rather than specifying a source for second row, have to create another set of frames • Will nest a second set of <frameset> tags

Nesting framesets • Because a <frameset> tag can include rows or columns but not both, have to nest <frameset> tags to create a grid of frames • When you do this, the meaning of the rows/cols attributes for the nested <frameset> tag changes slightly

A row height of 25% does not mean 25% of the display area, but 25% of the height of the frame into which that row has been nested • Second row of current frame should consist of two columns • First should display a ToC, and second should display various YCS documents

Will specify a width of 140 pixels for first column, and whatever remains in second • See tutorial5/yale3.htm

Next you’ll specify sources for two frames in this row • Frame in first column should display links.htm file • Yale Climbing School home page (home.htm) should appear in second frame • See Figure 5-11 • See tutorial5/yale4.htm

However, the page’s appearance needs improvement • Address info is cut off in logo, which causes a scroll bar to appear • So let’s control how each frame appears on the page

Formatting a Frame • You can control 3 attributes of a frame’s appearance • Frame’s scroll bars • Size of margin between source document and frame border • Whether or not the user is allowed to change frame size • First property we will work with is the scrolling attribute

Hiding and Displaying Scroll Bars • By default, scroll bars appear whenever the content of the source page cannot fit in the frame • Can override by using scrolling attribute scrolling= “type” • where type can either be yes (always display scroll bars) or no (never)

If you don’t specify, browser will use them when needed • Because the logo is not centered vertically within its frame and not entirely visible, scroll bars appear on right side of frame • Debbie feels they are not appropriate for a logo and wants to make sure they never appear

So must add scrolling=no attribute to logo <frame> tag • But does want them in the other frames • Note that when making changes to a framed Web page with some browsers, will have to reopen file to view changes • Reload won’t do it • See tutorial5/yale5.htm

Keep in mind that you should remove scroll bars from a frame only when you are convinced that all the contents in the frame source will be displayed in the frame • Should use different monitor resolutions to view it • Very irritating if some content is missing

With that in mind, next task is to solve problem of the missing text in the logo frame • Have to modify internal margins of frame

Setting Frame Margins • When browser retrieves a Web page to display inside a frame, automatically determines amount of space between page’s content and frame border • Sometimes makes the margin too large • Generally you want margin to be big enough to keep source’s text/images from running into frame’s borders

However, you do not want margin to take up too much space, because you usually want to display as much of source as possible • Have noted that margin height for logo frame is too large and has caused part of logo’s text to be pushed down beyond frame’s border

To fix this, need to specify a smaller margin for frame • Should cause logo to move up and allow entire text to be displayed marginheight=“value” marginwidth=“value”

Here, marginheight is amount of space (pixels) above and below frame source • marginwidth is amount that appears to page’s left and right • Do not have to specify both, but if you only specify one, browser will assume you want to use same value for both

In general, will want to have margin sizes of 0 or 1 pixels for frames that display only an inline image (like the logo) and 5 to 10 for frames that display text • Trial and error • To correct problem with logo, will decrease margin size to 0 pixels • And to keep home page text from running into frame borders, will specify margin width of 10 pixels for its frame

However, since Debbie would like users to be able to view more of the home page without scrolling, she asks you to decrease margin height for home page to 0 pixels • Links frame does not require change • See tutorial5/yale6.htm • Debbie is satisfied • Next task is to “lock in” sizes and margins for each frame to prevent users from resizing the frames

Controlling Frame Resizing • By default, users can resize frame borders by dragging it • Allows them to see more of a frame’s content without scrolling • But some Web authors prefer to freeze the size of the frames • Have to specify that the frame borders cannot be resized noresize=“noresize”

noresize attribute takes no value • Simply include it within <frame> tag • See tutorial5/yale7.htm • Have completed work with frame layout and appearance • Now must specify how the hyperlinks interact between one frame and another

Session 5.2 • In this session you will learn how hyperlinks work within frames • You will control which frame displays the source of an activated hyperlink • You’ll also learn how to create a Web page that can be used both by browsers that support frames and browsers that don’t

Working with Frames and Links • Now you’re ready to work on formatting the links on the page • The ToC frame contains 5 links: • Home Page, Our Philosophy, Climbing Lessons, Tours, Staff • See Figure 5-17 to see the files to which each of these hyperlinks point • By default, clicking a hyperlink within a frame will open the linked file inside the same frame

However, that’s not what Debbie wants • Wants Home Page, Our Philosophy, and Climbing Lessons to open in frame currently occupied by the home page • Wants Tours to replace current ToC • Wants Staff to replace entire browser window • When you want to control behavior of links, have to do 2 things:

Give each frame on the page a name and then point each link to one of those named frames

Assigning a Name to a Frame • To assign a name to a frame, add name attribute to frame tag <frame src=“url” name=“name” /> • where name is any single word you want • Case is important in assigning names • You’ll name the 3 frames “logo,” “links,” and “pages”

See tutorial5/yale8.htm • Now that you’ve named the frames, next will specify the “pages” frame as target for Home Page, Our Philosophy, and Climbing Lessons links • Clicking each of these links will open the corresponding file in home page frame

Designing a Web Site with Frames