Introduction to Programming the WWW I

Introduction to Programming the WWW I

CMSC 10100

Winter 2003

Lecture 6

OutlineOutline

• All about frames frameset frame nested framesets targeting links to frames navigation via frames deep linking pros and cons of frames

The Frameset ElementThe Frameset Element

• The frameset tag pair should follow the head element, replacing the body element• The cols and rows attributes are used to

divide the Web page into frames• Each frame is represented by a separate frame element• Specify DOCTYPE as “HTML 4.01

Frameset”

Setting up rows and columnsSetting up rows and columns

• Specify a certain number of rows or columns of certain sizes by

<frameset cols=“100,300,*>

• This makes a three columns of 100 pixels, 300 pixels, and the rest of the screen

• Can also use percentages

• Use no more than one * in the list

The Frame ElementThe Frame Element

• Each frame tag should contain a name attribute

• The name attribute is used for targeting links (see later)

• Each frame tag should contain a src attribute that specifies a Web page

• Can turn off scroll bars with scrolling=“no”

• frame is a self-closing tag

Some more attributesSome more attributes

• You may specify frameborder, framespacing, and border attributes

• Only border seems to have a big effect

• HTML validator has trouble with frameborder

• See HTML p. 136, and W3C online for more information

• Example

Tabular layoutTabular layout

• By setting both the col and row attribute, you create a table of frames

<frameset rows=“20%,*” cols=“*,10%”>

• Frames are listed row by row

• Example

Nested framesetsNested framesets

• Irregular layouts are useful (the equivalent of using rowspan or colspan in a table layout)

• You can specify a <frameset> instead of a frame to create nested framesets

• Or, you can set the src for a frame to point to a frameset file.

• Example

Linking in framesLinking in frames

• Target links to correct frame

• Avoid sucking in external sites

The target attributeThe target attribute

• In a frameset, you can specify which frame you want to load a file in useful when using frames for site navigation

<a href=“foo.html” target=“myframe”>• loads the source into myframe• target=“_top” clears the frameset• target=“popup” loads in a new window

The base tagThe base tag

• Rather than specifying the target for each link, you can add a line the header such as

<base target=“main”>

• Sets default link

• Can also set default link targets to be “_top” to leave the site

Deep LinkingDeep Linking

• A deep link is any absolute link inside a framed Web page that displays the destination page inside the frame system

• You can avoid deep links by sending them to a new browser window

• Any link can be routed to a new browser window with the target attribute

Frames for Site NavigationFrames for Site Navigation

• A typical frame layout uses two nested frameset elements to divide a Web page into three frames:

1. The title frame runs across the top of the Web page

2. A navigational frame occupies a left-hand border under the title frame

3. A content frame occupies the remainder of the Web page

• Example: bagpipes

Art Galleries with FramesArt Galleries with Frames

• A three-frame layout works well for an online art gallery

• Fill the navigation frame with clickable thumbnail previews

• When a user clicks on a thumbnail preview, send the original image to the content frame

Problems with FramesProblems with Frames

• Not all browsers support frames (try it on a palm!)

• It is difficult for others to link to content inside a frame

• It’s easy to create deep links by accident• Tougher to save sub-pages, messy with

browser cache• Complex layout awkward• Doesn’t control layout inside each frame

Advantages of FramesAdvantages of Frames

• Frames support intuitive site layouts that are easy to navigate

• Site development efforts can focus on content and navigation as independent problems

• Scalability: write one navigation tool bar and stick it in a frame - only change one file to change navigation system

Frames vs. tablesFrames vs. tables

• Tables are tougher to code (but this is fixable through scripting)

• Tables have wider (but not universal) support on browsers

• Fewer gotchas for tables

• Frames are really quick to get going