Using Frames in a Web Site Maureen Smith Professor, Saddleback College Tutorial 5.

Using Frames in a Web Site Maureen Smith Professor, Saddleback College Tutorial 5

Lesson Plan n Review n Tutorial 5 - Using Frames in a Web Site –Session 5.1 –Session 5.2 n Review

Objectives n Create frames for a Web site n Control the appearance and placement of frames n Control the behavior of hyperlinks on a page with frames n Use magic target names to specify the target for a hypertext link

n Create a page that is viewable both by browsers that support frames and by those that do not n Work with extensions that change the appearance of frames

Session 5.1 n In this session you will create a Web site that contains frames –You will learn about the HTML tags that control the placement and appearance of frames n You’ll also learn how to specify a source document for each frame, and how to nest one set of frames inside another

Introducing Frames n When Web sites contain several pages, each is usually dedicated to a particular subject –One might contain a list of hypertext links –One might display contact information –Another might describe the company’s history and philosophy n As more pages are created, might want user to view information simultaneously

n One solution would be to repeat the info on several pages –Would require great deal of time and effort to duplicate the same information over and over –Would need to change the same info on all other pages if something needed to be changed

n Such considerations led to the creation of frames –Frames are windows that appear within the browser’s display area n Each capable of displaying contents of a different HTML file n See Figure 5-1 where hypertext links are in the left frame and the home page is in the right frame

n Frames can be permanent, allowing users to move through the contents while always being able to see an overall table of contents in a frame that doesn’t change or disappear –See Figure 5-2 n Downside of frames is that you are causing browser to load multiple HTML files; longer delay for users

–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 place 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 and change the layout of the page? n You are going to design a Web site for The Colorado Experience –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 Colorado Experience 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 company logo and always be visible (static) –Frame on left will display the ToC 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 ToC frame n CE home page should be first page user sees n This is standard layout and a typical use of frames n First task is to insert the code that creates the type of layout she wants

Creating a Frame Layout n Frame layout is defined using the tag <HTML><HEAD> Page Title Page Title </HEAD><FRAMESET> Frame definitions </FRAMESET></HTML>

n Notice that this code does not include the 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 tags is when you are creating a page that can be displayed whether the browser supports frames or not

–And you can use more than one tag in your file if you place one inside another

Specifying Frame Size and Orientation n tag has 2 properties: –ROWS and COLS –Use ROWS when you want to create frames that are laid out in rows –Use COLS to lay frames out in columns –See Figure 5-5 –Must choose only one layout for a single tag, either rows or columns

n Syntax for row or column layout: –or –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: –Example: n Can use all three ways of specifying row/column size in a single tag –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

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 60 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 TAG –where document is the URL or filename of page you want to load –Inserted between tags n Top frame should display Head.htm file which contains company logo

n Logo consists of company name, formatted as transparent GIF and placed on a tiled background of mountain images –Using a tiled background is common technique for frames that display logos –And guarantees that the mountain images will fill the frame under any monitor resolution

n See Colorado5-11.htm n You’ve specified source for first row, but what about second row? –Will contain two additional frames –Rather than specifying a source for second row, have to create another set of frames n Will nest a second set of tags

Nesting Tags n Because a tag can include either a ROWS or COLS property but not both, have to nest tags to create a grid of frames –When you do this, the meaning of the ROWS/COLS property for the nested 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 ToC, and second should display various Colorado Experience documents

–Will specify a width of 140 pixels for first column, and whatever remain in second –See Colorado5-12.htm

n Next you’ll specify sources for two frames in this row –Frame in first column should display Links.htm file –Colorado Experience home page (TCE.htm) should appear in second frame –See Colorado 5-13.htm n Page shows the 3 files Debbie wants

–However, the page’s appearance needs improvement n Company name is cut off in logo, which causes a scroll bar to appear –So let’s control how each frame appears on the page

Controlling the Appearance of Your Frames n You can control 3 properties 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’s width or height n First property we will work with is controlling the scroll bars

Controlling the Appearance of 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 property –where value 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 property to logo tag –But does want them in the other frames n Note that when making changes to a framed Web page with Netscape, will have to reopen file to view changes –Reload won’t do it –Not the case with IE; use Refresh button

–See Colorado5-16 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 off-centered logo –Have to modify internal margins of frame

Controlling 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

n Here, MARGINHEIGHT is amount of space (pixels) that appears above and below content in frame –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 Trial and error n 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 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 Colorado5-17 –Debbie is satisfied –Next task is to “lock in” sizes and margins for each frame to prevent users from moving the borders

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

n NORESIZE property takes no value –Simply include it within tag –See Colorado5-18.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 –Finally, you’ll examine some extensions to the and tags

– And you’ll learn how to create internal frames, using the tag

Working with Frames and Hypertext Links n Now you’re ready to work on the hypertext links on the page –The ToC frame contains 5 hyperlinks: n 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 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 frame structure n When you want to control behavior of hyperlinks, have to do 2 things:

–Give each frame on the page a name and then point each hyperlink to one of those named frames

Assigning a Name to a Frame n To assign a name to a frame, add NAME property to FRAME tag –where frame_name is any single word you want –Case is important in assigning names –You’ll name the 3 frames “Logo,” “Links,” and “Documents”

–See Colorado5-21.htm n Now that you’ve named the frames, next will specify the Documents frame as target for Home Page, Our Philosophy, and Climbing Lessons hyperlinks –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 property to tag of the hyperlink –Recall that tag is used to specify a hyperlink –where frame_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 “Documents” –To change targets for the links, have to edit the tags in Links.htm file –Will start by editing only the tags pointing to Home Page, Our Philosophy, and Climbing Lessons pages n Ones you want displayed in Documents frame of Colorado.htm file

–See Links2.htm –See Colorado5_22.htm n Sometimes a ToC frame will contain many hyperlinks that should be opened in same frame –Would be tedious to type TARGET properties for each link –Fortunately, HTML gives a way to specify a target for all the hyperlinks in a single file

Using the Tag n tag appears within tag and is used to specify global options for the page –One of the properties of it is the TARGET property which identifies a default target for all the page’s hyperlinks –where frame_name is name of the target frame

–Useful when your page contains a lot of hypertext links that all point to same target –Rather than adding TARGET property to each tag, can enter it once with tag n Can use it even if your file contains a few links that you do not want pointing to the target in the tag

–Can specify a different target for any links that should open in a different location –When tag points to one target, and an individual tag points to a different target, the target in the tag takes precedence for that link n To see how tag works, you’ll use it to specify the Documents frame as default target for all hyperlinks in the Links.htm file

–Will remove the TARGET properties you’ve just entered –See Links3.htm –See Colorado5_23.htm n Have so far worked only with first 3 hyperlinks in list –Remaining require different methods since Debbie wants them to appear in different frames

Using Magic Target Names n Last two tags in list of links point to a list of tours offered by The Colorado Experience 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 ToC of Colorado Experience Web pages, some of which are devoted to individual tours n Each tour has its own Web page n See Figure 5-22 n 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 n Magic target names n Magic 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-23 to see list that describes magic target names n All magic 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 Tour.htm file to appear in Links frame, can use _self magic target name –Will take precedence over tag and directs browser to open page in same frame that contains hypertext link –See Links4.htm –See Colorado5_25.htm

n Tours.htm file is an expanded ToC for Web pages containing information re specific tours –Debbie wants each of them to appear in Documents frame –To do this, need to specify Documents frame as default hyperlink target in Tours.htm file –Tours.htm file also contains hyperlink that takes user back to Links.htm file

–Should specify _self as target for this hyperlink –See Tours2.htm –See Colorado5_25.htm n 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 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-27 n This page also uses frames

–How should this page be displayed within your frame layout? –If you use Documents frame as target, will end up with the series of nested frame images shown in Figure 5-28 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 magic 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 Colorado Experience 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 Colorado Experience climbing school n Inaccurate impression

n Let’s add _top magic target name for Staff link to the link’s tag –See Links5.htm n 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 Tours3.htm –See Colorado5_29.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 tag

Using the Tag 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 tags –Identify a section that contains code to be read by frame-blind browsers <HTML><HEAD>

Page Title Page Title </HEAD><FRAMESET> Frame Definitions </FRAMESET><NOFRAMES><BODY> Page Layout </BODY>

</NOFRAMES></HTML> n If a browser that supports frames retrieves this code, it knows that it should ignore everything within the tags and concentrate solely on code within tags

–If a browser that doesn’t support frames retrieves this code, it doesn’t know what to do with the and tags, so just ignores them –However, it does know that it’s supposed to render whatever appears within tags –In this way, both types of browsers are supported in single HTML file

–Note that when you use the tag, need to include tags to indicate to frame-blind browsers what to display n Colorado Experience has been using a nonframed version of its home page for some time –See Figure 5-30

n If you want this page to appear for frame-blind browsers but still use your framed Colorado.htm file, need to copy the HTML code, including the tags, from the source code of the nonframed file and place it in a pair of tags in your Colorado.htm file

–See Colorado5_31.htm n To test page, should locate a browser that doesn’t support frames –Retrieve early versions of Netscape or IE –Note that the table structure of the frameless page closely matches the frame layout you created –In this case, the first row is a single cell that spans 2 columns and displays logo

–Second row contains list of links in the first cell and the home page text in the second cell 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 Finished with Colorado Experience page –But there are some additional features you can add to this page, which are not supported by all browsers

Using Frame Extensions n Netscape and IE both support extensions to tag that allow you to change border size and appearance –Can remove borders from frames to free up more space for text/images –Or can change color of frame border so it matches color scheme more closely

–Should use care when implementing these extensions because they might not be supported by all browsers or all versions of Netscape and IE

Setting the Border Color n One of the extensions is ability to change color of frame’s border –BORDERCOLOR property can be applied either to an entire set of frames (within the tag) or to individual frames (within tag) or

–Applying BORDERCOLOR property 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

n Debbie asks you to test the BORDERCOLOR property by changing the color of the frame borders to blue –See Colorado5_33.htm n Another way of modifying frame borders is to change their widths

Setting the Border Width n Netscape and IE also support BORDER property –Extension that allows you to specify width of frame borders –Unlike BORDERCOLOR property, this one can be used only in tag and not in individual tags

–where value is width of frame borders in pixels n To see how this affects appearance, Debbie asks you to use it to remove frame borders by setting width to 0 –Change may not appear in all browsers –See Colorado5_34.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

n Can create similar effect by using FRAMEBORDER property –Supported by Netscape and IE –Specifying FRAMEBORDER=NO in a tag removes borders from frames –IE also supports FRAMESPACING property n Has same effect as BORDER property n Netscape doesn’t support this

Creating Floating 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 internal frame appears as a separate box or window within a page rather than on one side or top or bottom

–A floating frame can be placed within a Web page in same way that an inline image is placed –To create a floating frame, use tag –where width and height values are in pixels and URL is document that appears in frame

–In addition to WIDTH and HEIGHT properties, can use other properties you’ve already applied to inline images via tag n ALIGN property allows you to control placement of frame on page and way text flows around frame n HSPACE and VSPACE specify amount of space between floating frame and surrounding text

n As with tag, tag also supports FRAMEBORDER property to control width of frame border –MARGINHEIGHT and MARGINWIDTH properties control size of interior frame border –SCROLLING can turn scrolling on or off –Can also use NAME property with tag if need to direct hyperlink targets to the floating frame

n Figure 5-35 shows example of tag with staff profiles from Colorado Experience Web site –Can view it by opening IFrame.htm in Tutorial.05 folder –As you can see, contents of IFrame.htm appear in the floating frame –By using vertical scroll bars, can view entire document of staff biographies

n n If you want to use floating frames in your page, must make sure users are running IE 3.0 or higher – –Other browsers might not be able to see the floating frame at all n n You’ve completed your work with the Web page for the Colorado Experience!

n Once again, remember that when you use these IE extensions, effects you see will not be duplicated in other browsers –Will display usual grid layout –Always test under different browsers

Using Frames in a Web Site Maureen Smith Professor, Saddleback College Tutorial 5.

Similar presentations

Presentation on theme: "Using Frames in a Web Site Maureen Smith Professor, Saddleback College Tutorial 5."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Using Frames in a Web Site Maureen Smith Professor, Saddleback College Tutorial 5.

Similar presentations

Presentation on theme: "Using Frames in a Web Site Maureen Smith Professor, Saddleback College Tutorial 5."— Presentation transcript:

Similar presentations

About project

Feedback