introduction to programming the www i cmsc 10100 winter 2003 lecture 6
Post on 03-Jan-2016
215 Views
Preview:
TRANSCRIPT
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
top related