Designing a Web Site with Frames Maureen Smith
Designing a Web Site with Frames Maureen Smith Professor, Saddleback College Tutorial 5
Lesson Plan Review n Tutorial 5 – Designing a Web Site with Frames n – Session 5. 1 – Session 5. 2 n Review
Objectives Describe the uses of frames in a Web site n Lay out frames within a browser window n Display a document within a frame n Format the appearance of frames by n – Setting the margin widths
– Removing scrollbars – Specifying whether users can resize frames Direct a link target to a specific frame n Direct a link target outside of a frame layout n Add page content for browsers that don’t support frames n
Format the color and size of frame borders n Incorporate an inline frame in a page n
Session 5. 1 n 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 n 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 n 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 To. C in one frame; individual pages in another
Links remain on screen while user goes through contents of the site n Downside of frames is that you are causing browser to load multiple HTML files; longer delay for users n – 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 n 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? n 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
n 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
n 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 n 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 n This is standard layout and a typical use of frames n n First task is to insert the code that creates the type of layout she wants
Creating a Frameset n Frame layout is defined using the <frameset> tag <html> <head> <title>Page Title</title> </head> <frameset> Frame definitions </frameset></HTML>
n 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 n 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 n The other in three rows n
n Syntax for row or column layout: <frameset rows=“row 1, row 2, row 3, . . . ”> – or <frameset cols=“column 1, column 2, 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 n Row/column sizes are specified 3 ways: – In pixels – As a percentage of the total size of the frameset – By an asterisk (*) n Tells browser to allocate any unclaimed space in frameset to the particular row/column
– Example: <frameset rows=“ 160, *”> n Can use all three ways of specifying row/column size in a single <FRAMESET> tag <frameset cols=“ 160, 25%, *”> – See Figure 5 -6 n 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 n Initial file has been created – See tutorial 5/yale 1. htm
n 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
n 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 n 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 n Top frame should display head. htm file which contains company logo
– See tutorial 5/yale 2. htm n 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 n Will nest a second set of <frameset> tags
Nesting framesets n 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 n Second row of current frame should consist of two columns – First should display a To. C, and second should display various YCS documents
– Will specify a width of 140 pixels for first column, and whatever remains in second – See tutorial 5/yale 3. htm
n 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 tutorial 5/yale 4. htm
– However, the page’s appearance needs improvement n 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 n 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 n First property we will work with is the scrolling attribute
Hiding and Displaying Scroll Bars n 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 n 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 n 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 tutorial 5/yale 5. htm
n 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
n 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 n 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 n 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”
n 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 n n 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 n Links frame does not require change – See tutorial 5/yale 6. 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 n 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 n Have to specify that the frame borders cannot be resized noresize=“noresize”
n noresize attribute takes no value – Simply include it within <frame> tag – See tutorial 5/yale 7. htm n Have completed work with frame layout and appearance – Now must specify how the hyperlinks interact between one frame and another
Session 5. 2 n 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 n Now you’re ready to work on formatting the links on the page – The To. C frame contains 5 links: Home Page, Our Philosophy, Climbing Lessons, Tours, Staff n See Figure 5 -17 to see the files to which each of these hyperlinks point n n 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 To. C – Wants Staff to replace entire browser window n 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 n 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 tutorial 5/yale 8. htm n 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 n 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 n Ones you want displayed in pages frame of yale. htm file
– See tutorial 5/links 1. htm – See tutorial 5/yale 9. htm (type links 1)
Using Reserved Target Names n 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 n Does not contain any information about individual tours
– Instead, it is an expanded To. C of YCS pages, some of which are devoted to individual tours Each tour has its own Web page n See Figure 5 -21 n n Debbie wants the tours. htm file to appear in the links frame – Will give effect of expanding the To. C 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 n n 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 n All reserved target names begin with underscore character (_) to distinguish them from other target names – Are case-sensitive so must enter them in lowercase
n 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 links 2. htm
n Tours. htm file is an expanded To. C 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 tours 1. htm – See tutorial 5/yale 9. htm (type tours 1) n Technique employed here is one commonly used for To. Cs that double as hypertext links – Clicking tours link gives effect that list is expanding and contracting
– What is actually happening is that one To. C file is being replaced by another n 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 n 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 n 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 n Inaccurate impression
n Let’s add _top target name for Staff link to the link’s <a> tag – See tutorial 5/links 3. htm n Because tours. htm also acts as a To. C, should also edit the hyperlink to the staff page in that file – Then a user can click Staff hyperlink from both the To. C with expanded list of tours and the original To. C
– See tutorial 5/tours 2. htm – See tutorial 5/yale 10. htm n 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 n 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> n 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 n Yale Climbing School has been using a nonframed version of its home page for some time – See Figure 5 -29
n 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 /tutorial 5/yale 11. htm n 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 n Some people just don’t like frames!
Working with Frame Borders n Some browsers support additional attributes used to change border size and appearance – Remove borders – Change color of frame borders
Setting the Frame Border Color n 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 n Results can be unpredictable
– Not supported by XHTML n Debbie asks you to test the bordercolor attribute by changing the color of the frame borders to brown – See tutorial 5/yale 12. htm n Another way of modifying frame borders is to change their widths
Setting the Frame Border Width n Can also remove frame borders entirely – <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 n 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 tutorial 5/yale 13. htm
n 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 n Others point out that hiding frame borders confuses some users
Creating Inline Frames n 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
n 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
n 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
n Let’s create an inline frame – See tutorial 5/yale 14. 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 n Do not turn off vertical and horizontal scrolling unless you are certain that the page content will fit within the specified frame size n
Assign names to all frames in order to make your code easier to read and interpret and to direct links to the correct target n Simplify your HTML code by using the base element when most of the links in your frame document point to the same target n
n 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
- Slides: 89