Designing a Web Page with Tables

Download Report

Transcript Designing a Web Page with Tables

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