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