Designing a Web Site with Frames Maureen Smith Professor, Saddleback College Tutorial 5 Lesson Plan Review Tutorial 5 – Designing a Web Site with Frames – Session.
Download ReportTranscript Designing a Web Site with Frames Maureen Smith Professor, Saddleback College Tutorial 5 Lesson Plan Review Tutorial 5 – Designing a Web Site with Frames – Session.
Designing a Web Site with Frames Maureen Smith Professor, Saddleback College Tutorial 5 Lesson Plan Review Tutorial 5 – Designing a Web Site with Frames – Session 5.1 – Session 5.2 Review 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 by – Setting the margin widths – Removing scrollbars – Specifying whether users can resize frames Direct a link target to a specific frame Direct a link target outside of a frame layout Add page content for browsers that don’t support frames Format the color and size of frame borders Incorporate an inline frame in a page Session 5.1 As a Web site grows in size and complexity, each page is dedicated to a particular topic – List of links, contact info, philosophy – Might want to display info from several pages at same time Could duplicate that info across the site – Time/effort to repeat same info – Each time a change is made, need to repeat the edit for each page in site This contributed to creation of frames – A frame is a section of the browser window capable of displaying contents of an entire Web page – See Figure 5-1 – Commonly used to display a ToC in one frame; individual pages in another Links remain on screen while user goes through contents of the site Downside of frames is that you are causing browser to load multiple HTML files; longer delay for users – Some browsers have difficulty printing pages within individual frames – Should try to create both framed and nonframed versions – Also, not all browsers can display a framed page – With the increasing popularity of frames, this is less of an issue – Should still try to create both framed and nonframed versions however Planning Your Frames Plan appearance and use – What info will be displayed in each frame? – How do you want the frames placed on the page? What is the size of each frame? – Which frames will be static--always showing same content? – Which frames will change in response to hyperlinks being clicked? – What Web pages will users see first when they access the site? – Do you want to allow users to resize the frames? You are going to design a Web site for The Yale Climbing School – Debbie has already thought about what info should be displayed – See Figure 5-3 for a list of files for these pages The files are organized into various topic areas such as tour descriptions, climbing lessons, company philosophy – Two do not cover topics, but rather contain hyperlinks to other Web pages – What should the user see first? – Debbie has sketched out a layout; see Figure 5-4 She would like 3 frames: – Top will display school’s logo and always be visible (static) – Frame on left will display the list of pages with each item acting as a hyperlink to a specific page Should always be visible, but users should be able to expand it – Third frame on right will display different Colorado Experience documents, depending on which hyperlink the user clicks in the Links frame Yale home page should be first page user sees This is standard layout and a typical use of frames First task is to insert the code that creates the type of layout she wants Creating a Frameset Frame layout is defined using the <frameset> tag <html> <head> <title>Page Title</title> </head> <frameset> Frame definitions </frameset></HTML> Notice that this code does not include the <body> tags – A page with frames displays the content of other pages; there is no body page to speak of – One situation in which to use <body> tags is when you are creating a page that can be displayed whether the browser supports frames or not Specifying Frame Size and Orientation Frames are placed within a frameset in either rows or columns, but not both – See Figure 5-5 which shows 2 framesets One in three columns The other in three rows Syntax for row or column layout: <frameset rows=“row1, row2, row3, ...”> – or <frameset cols=“column1, column2, column 3, ...”> – where row height is height of each row, and column width is width of each column – No limit to the number of rows/columns for a frameset Row/column sizes are specified 3 ways: – In pixels – As a percentage of the total size of the frameset – By an asterisk (*) Tells browser to allocate any unclaimed space in frameset to the particular row/column – Example: <frameset rows=“160,*”> Can use all three ways of specifying row/column size in a single <FRAMESET> tag <frameset cols=“160,25%,*”> – See Figure 5-6 At least one row/column should be specified with asterisk – To guarantee that the frames fill up the screen regardless of monitor resolution – Can also use multiple asterisks for equal sizes Initial file has been created – See tutorial5/yale1.htm First set of frames will have two rows – Top row will be used for company logo – Second row will be used for text of page’s content – A frame 85 pixels high should be tall enough for the logo – Rest of browser’s display area will be taken up by second row Initial frame layout is now defined – Will include later the third frame – For now, need to specify source for the two frame rows Specifying a Frame Source Tag used to specify page that will be inserted into a frame is <FRAME> TAG <frame src=“url” /> – where url is the URL of page you want to load – Inserted between <frameset> tags Top frame should display head.htm file which contains company logo – See tutorial5/yale2.htm You’ve specified source for first row, but what about second row? – Will contain two frames – Rather than specifying a source for second row, have to create another set of frames Will nest a second set of <frameset> tags Nesting framesets Because a <frameset> tag can include rows or columns but not both, have to nest <frameset> tags to create a grid of frames – When you do this, the meaning of the rows/cols attributes for the nested <frameset> tag changes slightly – A row height of 25% does not mean 25% of the display area, but 25% of the height of the frame into which that row has been nested Second row of current frame should consist of two columns – First should display a ToC, and second should display various YCS documents – Will specify a width of 140 pixels for first column, and whatever remains in second – See tutorial5/yale3.htm Next you’ll specify sources for two frames in this row – Frame in first column should display links.htm file – Yale Climbing School home page (home.htm) should appear in second frame – See Figure 5-11 – See tutorial5/yale4.htm – However, the page’s appearance needs improvement Address info is cut off in logo, which causes a scroll bar to appear – So let’s control how each frame appears on the page Formatting a Frame You can control 3 attributes of a frame’s appearance – Frame’s scroll bars – Size of margin between source document and frame border – Whether or not the user is allowed to change frame size First property we will work with is the scrolling attribute Hiding and Displaying Scroll Bars By default, scroll bars appear whenever the content of the source page cannot fit in the frame – Can override by using scrolling attribute scrolling= “type” – where type can either be yes (always display scroll bars) or no (never) – If you don’t specify, browser will use them when needed Because the logo is not centered vertically within its frame and not entirely visible, scroll bars appear on right side of frame – Debbie feels they are not appropriate for a logo and wants to make sure they never appear – So must add scrolling=no attribute to logo <frame> tag – But does want them in the other frames Note that when making changes to a framed Web page with some browsers, will have to reopen file to view changes – Reload won’t do it – See tutorial5/yale5.htm Keep in mind that you should remove scroll bars from a frame only when you are convinced that all the contents in the frame source will be displayed in the frame – Should use different monitor resolutions to view it – Very irritating if some content is missing With that in mind, next task is to solve problem of the missing text in the logo frame – Have to modify internal margins of frame Setting Frame Margins When browser retrieves a Web page to display inside a frame, automatically determines amount of space between page’s content and frame border – Sometimes makes the margin too large – Generally you want margin to be big enough to keep source’s text/images from running into frame’s borders – However, you do not want margin to take up too much space, because you usually want to display as much of source as possible Have noted that margin height for logo frame is too large and has caused part of logo’s text to be pushed down beyond frame’s border – To fix this, need to specify a smaller margin for frame – Should cause logo to move up and allow entire text to be displayed marginheight=“value” marginwidth=“value” Here, marginheight is amount of space (pixels) above and below frame source – marginwidth is amount that appears to page’s left and right – Do not have to specify both, but if you only specify one, browser will assume you want to use same value for both – In general, will want to have margin sizes of 0 or 1 pixels for frames that display only an inline image (like the logo) and 5 to 10 for frames that display text Trial and error To correct problem with logo, will decrease margin size to 0 pixels – And to keep home page text from running into frame borders, will specify margin width of 10 pixels for its frame – However, since Debbie would like users to be able to view more of the home page without scrolling, she asks you to decrease margin height for home page to 0 pixels Links frame does not require change – See tutorial5/yale6.htm – Debbie is satisfied – Next task is to “lock in” sizes and margins for each frame to prevent users from resizing the frames Controlling Frame Resizing By default, users can resize frame borders by dragging it – Allows them to see more of a frame’s content without scrolling – But some Web authors prefer to freeze the size of the frames Have to specify that the frame borders cannot be resized noresize=“noresize” noresize attribute takes no value – Simply include it within <frame> tag – See tutorial5/yale7.htm Have completed work with frame layout and appearance – Now must specify how the hyperlinks interact between one frame and another Session 5.2 In this session you will learn how hyperlinks work within frames – You will control which frame displays the source of an activated hyperlink – You’ll also learn how to create a Web page that can be used both by browsers that support frames and browsers that don’t Working with Frames and Links Now you’re ready to work on formatting the links on the page – The ToC frame contains 5 links: Home Page, Our Philosophy, Climbing Lessons, Tours, Staff See Figure 5-17 to see the files to which each of these hyperlinks point By default, clicking a hyperlink within a frame will open the linked file inside the same frame – However, that’s not what Debbie wants – Wants Home Page, Our Philosophy, and Climbing Lessons to open in frame currently occupied by the home page – Wants Tours to replace current ToC – Wants Staff to replace entire browser window When you want to control behavior of links, have to do 2 things: – Give each frame on the page a name and then point each link to one of those named frames Assigning a Name to a Frame To assign a name to a frame, add name attribute to frame tag <frame src=“url” name=“name” /> – where name is any single word you want – Case is important in assigning names – You’ll name the 3 frames “logo,” “links,” and “pages” – See tutorial5/yale8.htm Now that you’ve named the frames, next will specify the “pages” frame as target for Home Page, Our Philosophy, and Climbing Lessons links – Clicking each of these links will open the corresponding file in home page frame Specifying a Link Target To display a page within a specific frame of another page, will add target attribute to <a> tag of the hyperlink – Recall that <a> tag is used to specify a hyperlink target=“name” – where name is name you’ve assigned to a frame on your page – In this case the target name for the frame you need to specify is “pages” – To change targets for the links, have to edit the <a> tags in links.htm file – Will start by editing only the <a> tags pointing to Home Page, Our Philosophy, and Climbing Lessons pages Ones you want displayed in pages frame of yale.htm file – See tutorial5/links1.htm – See tutorial5/yale9.htm (type links1) Using Reserved Target Names Last two tags in list of links point to a list of tours offered by the Yale Climbing School and to a staff information page – Tours hypertext link points to Tours.htm file Does not contain any information about individual tours – Instead, it is an expanded ToC of YCS pages, some of which are devoted to individual tours Each tour has its own Web page See Figure 5-21 Debbie wants the tours.htm file to appear in the links frame – Will give effect of expanding the ToC whenever a user clicks tours link – Because the tours.htm page will appear in the links frame, could specify links (name of frame) as its target – However, there is another way to do this Reserved target names Reserved target names are special names that can be used in place of a frame name as a target for a hypertext link – Useful in situations where you want the page to appear in a new window or to replace the current frame layout – See Figure 5-22 to see list that describes reserved target names All reserved target names begin with underscore character (_) to distinguish them from other target names – Are case-sensitive so must enter them in lowercase Because Debbie wants contents of tours.htm file to appear in links frame, can use _self reserved target name – Will take precedence over <base> tag and directs browser to open page in same frame that contains the link – See links2.htm Tours.htm file is an expanded ToC for Web pages containing information re specific tours – Debbie wants each of them to appear in pages frame – To do this, need to specify pages frame as default link target in tours.htm file – Tours.htm file also contains link that takes user back to links.htm file – Should specify _self as target for this link – See tours1.htm – See tutorial5/yale9.htm (type tours1) Technique employed here is one commonly used for ToCs that double as hypertext links – Clicking tours link gives effect that list is expanding and contracting – What is actually happening is that one ToC file is being replaced by another Last link in list points to page of staff biographies, stored in staff.htm file – Debbie asked another employee to produce contents of this page – See Figure 5-26 This page also uses frames – How should this page be displayed within your frame layout? – If you use pages frame as target, will end up with the series of nested frame images shown in Figure 5-27 Not what Debbie wants – Wants Staff page to load into full display area, replacing frame layout with its own layout – To target a link to the full display area, use the _top target name – Often used when one framed page is accessed from another – Also used when you are linking to pages that lie outside your Web presentation, such as to pages on the Web – A link to Colorado Tourism Board Web site should not appear within a frame of the YCS page – First, once you go outside your Web presentation, you lose control of frame layout and could end up with nested frame images – Second, such a setup could confuse users, making it appear as if the Colorado Tourism Board is another component of the Yale climbing school Inaccurate impression Let’s add _top target name for Staff link to the link’s <a> tag – See tutorial5/links3.htm Because tours.htm also acts as a ToC, should also edit the hyperlink to the staff page in that file – Then a user can click Staff hyperlink from both the ToC with expanded list of tours and the original ToC – See tutorial5/tours2.htm – See tutorial5/yale10.htm Debbie has viewed all the hypertext links and is satisfied – But she wonders what would happen if a user with an older browser encountered the page – Is there some way to accommodate them? – Yes, by using the <noframes> element Using the <noframes> Element If you want your page to be viewable by browsers that don’t support frames, as well as by those that do, need to use <noframes> tags – Identify a section that contains code to be read by frame-blind browsers <html> <head> <title>Page Title</title> </head> <frameset> Frames <noframes> <body> Page content </body> </noframes> </frameset> </html> If a browser that supports frames retrieves this code, it knows that it should ignore everything within the <noframes> tags and concentrate solely on code within <frameset> tags – If a browser that doesn’t support frames retrieves this code, it doesn’t know what to do with the <frameset> and <noframes> tags, so just ignores them – However, it does know that it’s supposed to render whatever appears within <body> tags – In this way, both types of browsers are supported in single HTML file – Note that when you use the <noframes> tag, need to include <body> tags to indicate to frame-blind browsers what to display Yale Climbing School has been using a nonframed version of its home page for some time – See Figure 5-29 If you want this page to appear for frame-blind browsers but still use your framed version, need to copy the HTML code, including the <body> tags, from the source code of the nonframed file and place it in a pair of <noframes> tags in your framed file – See /tutorial5/yale11.htm Another way of supporting browsers that do not display frames is to create a Web page that contains links to the framed and nonframed versions – User with older browser can therefore avoid the frames – This technique has added advantage that users who don’t like working with frames can avoid the frame version and go directly to nonframed version Some people just don’t like frames! Working with Frame Borders Some browsers support additional attributes used to change border size and appearance – Remove borders – Change color of frame borders Setting the Frame Border Color Bordercolor property can be applied either to an entire set of frames (within the <frameset> tag) or to individual frames (within <frame> tag) <bordercolor=“color”> – where color is either a color name or hexadecimal number – Applying bordercolor attribute to set of frames colors all the frames and nested frames within the set – Applied to a single frame tag, that color of that frame’s border will change in IE, but in Netscape all the frame borders will change – Bottom line is that when you apply these types of tags and properties, should always view in variety of browsers and versions Results can be unpredictable – Not supported by XHTML Debbie asks you to test the bordercolor attribute by changing the color of the frame borders to brown – See tutorial5/yale12.htm Another way of modifying frame borders is to change their widths Setting the Frame Border Width Can also remove frame borders entirely – <frame frameborder=“value” /> – where value of “0” removes border and value of “1” displays border – Deprecated; and some browsers do not support it now – IE and Netscape also support <frameset border=“value”> … </frame> – where value is width of frame borders in pixels Note: border attribute is applied to frameset element; frameborder attribute is apply only to the frame element – Let’s change the size of the borders – See tutorial5/yale13.htm By removing borders, created more space for text/images – Also created impression of “seamless” Web page – Some authors prefer to eliminate frame borders in order to give illusion of having a single page rather than 3 separate ones Others point out that hiding frame borders confuses some users Creating Inline Frames Another way of inserting frames is to use floating frames – Introduced by IE 3.0 and added to HTML 4.0 specs (but not currently supported by Netscape), a floating frame or inline frame appears as a separate box or window within a page much like an inline image To create a floating frame, use <iframe> tag <iframe src=“url”> alternate content </iframe> – where url is name of the document you want displayed in the inline frame and alternate content is content for nonframe browsers Inline frames support many of the same features as inline images – Resize them – Float them on page margins – Specify size of margin around frame – See Figure 5-34 for attributes of inline frames Let’s create an inline frame – See tutorial5/yale14.htm Tips for Using Frames Create framed and frameless versions of your Web site to accommodate different browsers and to offer a choice to users who don’t like frames Do not turn off vertical and horizontal scrolling unless you are certain that the page content will fit within the specified frame size Assign names to all frames in order to make your code easier to read and interpret and to direct links to the correct target Simplify your HTML code by using the base element when most of the links in your frame document point to the same target NEVER display pages that lie outside of your Web site within your frames – Use the “_top” target to open external sites in the full browser window