XP 1 Tutorial 5 Using Frames in a Web Site

XP 2 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

XP 3 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.

XP 4 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.

XP 5 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?

title frames Creating a Frameset 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 code does not include an opening and closing tag.

XP 8 The Frame Syntax  row1, row2, etc. are the heights of the frame rows  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

XP 9 Frames of Different Sizes 160 pixels wide 25% of the width of the display area whatever space is left

XP 10 Specifying a Frame Source  To specify a source for a frame, use the tag with the syntax: The url is the filename and location of the page that you want to load.  You must insert the tag between the opening and closing tags.

<frameset rows="85,*"> <frame src= “head.htm" scrolling= "no” /> <frameset cols=“140,*"> <frame src= “links.htm” /> <frame src= “home.htm” />

<frame src= “head.htm" scrolling= "no” marginheight= “0” /> <frame src= “home.htm” marginheight= “0” marginwidth= “0” />

XP 13 Controlling the Appearance of Scroll Bars  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.  scrolling is “yes” or “no”

XP 14 Specifying Margins Syntax  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.

XP 15 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 

XP 16 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

XP 17 Files and Links in a Web Site home.htm philosph.htm lessons.htm tours.htm staff.htm

XP 18 Assigning a Name to a Frame  To assign a name to a frame, add the name attribute to the frame tag. name is of the frame 

XP 19 Specifying a Link Target  Use the target attribute to open a linked target page in a specific frame.  The syntax is: name is the name you’ve assigned to a frame  Home Page Our Philosophy Climbing Lessons

XP 20 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. . tours  The target in the tag overrides any target specified in the tag

XP 21 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

XP 22 Using Reserved Target Names  Tours  Staff Loads the staff.htm into the full display area, replacing the current frame layout Loads the tours.htm into the same frame

XP 23 Using the Tag  Use the tag to allow your Web site to be viewable using browsers that do not support frames.  When you use the tag, you must include tags. Page Title frames Page content

XP 24 Working with Frame Borders  There are additional attributes you can apply to the 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

XP 25 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 tag, or to individual frames, using the tag.  The syntax for this attribute is: color is either a color name or a hexadecimal color value

XP 26 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 tag, and not in individual tags. The syntax is: value is the size of the border in pixels.  You can also remove the frame borders entirely using: value is “0” to hide the border and “1” to display it

XP 27 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.  url is the name and location of the file you want to display in the floating frame 

XP 28 Viewing a Floating Frame floating frame 