Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Frames - People Search
Transcript
XP Tutorial 5 Using Frames in a Web Site 1 XP Tutorial 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 Direct a link target to a specific frame Direct a link target outside of a frame layout Format the color and size of frame borders Incorporate an inline frame in a page 2 XP Frames for a Web Site To display information from several pages at the same time contributed to the creation of frames. A frame is a section of the browser window capable of displaying the contents of an entire Web page. 3 XP Disadvantages to Using Frames The browser has to load multiple HTML files increasing the waiting time for potential customers. It is difficult to bookmark pages that uses frames Internet search engines can have problems adding framed pages to their listings There is concern that frames can use up valuable screen space. 4 XP Planning Your Frames What information will be displayed in each frame? How do you want the frames placed on the Web page? What is the size of each frame? Which frames will be static, that is, always showing the same content? Which frames will change in response to hyperlinks being clicked? Should users be permitted to resize the frames to suit the needs? 5 Creating a Frameset <html> <head> <title>title</html> </head> <frameset> frames </frameset> </html> The frameset element describes how the frames are organized within the browser window. The frame element defines which document is displayed within a frame. The <frameset> code does not include an opening and closing <body> tag. XP The Frame Syntax <frameset rows=“row1, row2, . . .”> row1, row2, etc. are the heights of the frame rows <frameset cols=“col1, col2, . . .”> col1, col2, etc. are the widths of the frame columns Row and column sizes can be specified: in pixels as a percentage of the total size of the frameset by an asterisk (*) to allocate any unclaimed space 8 XP Frames of Different Sizes 160 pixels wide 25% of the width of the display area whatever space is left <frameset cols=“160,25%,*> 9 XP Specifying a Frame Source To specify a source for a frame, use the <frame> tag with the syntax: <frame src=“url”> The url is the filename and location of the page that you want to load. You must insert the <frame> tag between the opening and closing <frameset> tags. 10 <frameset rows="85,*"> <frame src= “head.htm" scrolling= "no” /> <frameset cols=“140,*"> <frame src= “links.htm” /> <frame src= “home.htm” /> </frameset> </frameset> <frame src= “head.htm" scrolling= "no” marginheight= “0” /> <frame src= “home.htm” marginheight= “0” marginwidth= “0” /> Controlling the Appearance of Scroll Bars XP By default, scroll bars are displayed when the content of the source page cannot fit within the frame. You can override the default setting using the scrolling attribute. <frame src=“url” scrolling=“scrolling”> scrolling is “yes” or “no” 13 XP Specifying Margins Syntax <frame src=“URL” marginheight=“value” marginwidth=“value”> marginheight is the amount of space above and below the content of the page in the frame marginwidth is the amount of space to the left and right of the page Setting margin values is a process of trial and error as you determine what combination of margin sizes looks best. 14 XP Controlling Frame Resizing By default, users can resize frame borders in the browser by simply dragging a frame border. Some Web designers prefer to freeze, or lock, frames, so that users cannot resize them. this ensures that the Web site displays as the designer intended <frame src=“url” noresize=“noresize”> 15 XP Working with Frames & Links By default, clicking a link within a frame opens the linked file inside the same frame. Display links in: a different frame a new window the entire window Controlling the behavior of links in a framed page, requires two steps: give each frame on the page a name, and then point each link to one of the named frames 16 XP Files and Links in a Web Site home.htm tours.htm philosph.htm staff.htm lessons.htm 17 XP Assigning a Name to a Frame To assign a name to a frame, add the name attribute to the frame tag. <frame src=“url” name=“name” /> name is of the frame <frame src="head.htm" marginheight="0" name="logo" /> <frame src="links.htm" name="links" /> <frame src="home.htm" marginheight="0" marginwidth="10" name="pages" /> 18 XP Specifying a Link Target Use the target attribute to open a linked target page in a specific frame. The syntax is: <a href=“url” target=“name”> name is the name you’ve assigned to a frame <a href="home.htm" target="pages"> Home Page</a><br /> <a href="philosph.htm" target="pages"> Our Philosophy</a><br /> <a href="lessons.htm" target="pages"> Climbing Lessons</a><br /> 19 XP Specifying a Link Target When a page contains many links that should all open in the same frame, specify the target frame in the base element within the head. <head> <base target=“pages” /> </head> . <a href=“links.htm” target=“_self”> tours</a><br /> The target in the <a> tag overrides any target specified in the <base> tag 20 XP Using Reserved Target Names Reserved target names may be used in place of a frame name as the target in situations: when you want the page to appear in a new window when you want the page to replace the current browser window _blank Loads the target into a new window _self _top 21 XP Using Reserved Target Names <a href=“tours.htm” target=“ _self”>Tours</a> Loads the tours.htm into the same frame <a href=“staff.htm” target=“ _top”>Staff</a> Loads the staff.htm into the full display area, replacing the current frame layout 22 XP Using the <noframes> Tag Use the <noframes> tag to allow your Web site to be viewable using browsers that do not support frames. When you use the <noframes> tag, you must include <body> tags. <html><head><title>Page Title</title></head> <frameset> frames </frameset> <noframes> <body> Page content </body></noframes></html> 23 XP Working with Frame Borders There are additional attributes you can apply to the <frame> tag that allow you to change border size and appearance. For example: you can remove borders from your frames to free up more space for text and images you can change the color of the frame border so that it matches or complements the color scheme for your Web site 24 XP Setting the Frame Border Color To change the color of a frame’s border, use the bordercolor attribute. The attribute can be applied either to an entire set of frames, using the <frameset> tag, or to individual frames, using the <frame> tag. The syntax for this attribute is: <frameset bordercolor=“color”> <frame bordercolor=“color”> color is either a color name or a hexadecimal color value 25 XP Setting the Frame Border Width Another way of modifying frame borders is to change their widths using the border attribute. The border attribute can be used only in the <frameset> tag, and not in individual <frame> tags. The syntax is: <frameset border=“value” /> value is the size of the border in pixels. You can also remove the frame borders entirely using: <frame frameborder=“value” /> value is “0” to hide the border and “1” to display it 26 XP Creating Inline (Floating) Frames A floating frame is displayed as a separate box or window within a Web page. The frame can be placed within a Web page in much the same way as an inline image. <iframe src=“url” other-attributes> </iframe> url is the name and location of the file you want to display in the floating frame <iframe src="bios.htm“ width="400" height="250“ style="float: right; margin: 0 0 0 5"> </iframe> 27 XP Viewing a Floating Frame <iframe src="bios.htm“ width="400" height="250“ style="float: right; margin: 0 0 0 5"> </iframe> floating frame 28
