Embed Size (px)
Citation preview
The Web Wizard’s The Web Wizard’s Guide to HTMLGuide to HTML
Chapter SevenFrames
Chapter ObjectivesChapter Objectives
Show how to construct frame-based displays
Explain how frames can be used to facilitate Web site navigation
Show how to make and easy-to-browse art of photo gallery with frames
Explore the controversial practice of deep linking
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
The Frame ElementThe Frame ElementEach frame tag should contain a name
attribute
The name attribute can be used by a target attribute if you want to send a link destination from a hyperlink in one frame to a different frame
Each frame tag should contain a src attribute that specifies a Web page
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
Frames for Site Navigation Frames for Site Navigation (example)(example)
<!DOCTYPE html public "-//W3C//DTD HTML 3.2 Final//EN"><HTML><HEAD> <TITLE>Hello There</TITLE> <META name="description" content="GlobalEyes Telecommunications - Southern Illinois' local telephone alternative"> <META name="keywords" content="GlobalEyes Murphysboro Carbondale Southern Illinois"></HEAD><FRAMESET border="no" frameborder="0" framespacing="0" bordercolor="#ffffff" cols="130,*"> <FRAME marginwidth="0" marginheight="0" bordercolor="#FFFFFF" name="index" scrolling="auto" src="/Community/"> <FRAMESET border="no" frameborder="0" framespacing="0" bordercolor="#ffffff" rows="96,*"> <FRAME marginwidth="0" marginheight="0" bordercolor="#FFFFFF" name="banner" scrolling="no" src="title.html"> <FRAME marginwidth="0" marginheight="0" bordercolor="#FFFFFF" name="main" scrolling="auto" src="about.html"> </FRAMESET></FRAMESET><NOFRAMES> <BODY> <A href="/Community">For our Community pages, click here</A> <A href="/WWW">For our WWW pages, click here</A> <A href="About.html">For a brief description of our services, click here</A> <H1><A href="http://www.Gettelco.com">Find out about our competitive local telephone service</A></H1> </BODY></NOFRAMES></HTML>
Art Galleries with FramesArt Galleries with Frames The 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
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
Problems with FramesProblems with Frames
Not all browsers support frames It is difficult for others to link to content
inside a frame It’s easy to create deep links by accident Search engines may not index framed sites
completely Individual pages may lose their context if
linked indepently
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
