New Perspectives on Creating Web Pages with HTML

1
New Perspectives on Creating Web Pages with HTML

• Tutorial 5 Using Frames in a Web Site

2
Tutorial Objectives

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

3
Tutorial Objectives Continued

• Create a Web page that is viewable by browsers
  that support frames and by those that do not
• Modify the appearance of your frame borders
• Create and implement floating frames

4
Considerations for a Web Site

• A Web site grows in size and complexity, each
  page is dedicated to a particular topic or group
  of topics.
• one page might contain a list of hypertext links
• one page might display contact information for
  the company or organization
• one page might describe the business philosophy
• As more pages are added to a Web site, a designer
  may what to display information from several
  pages at the same time.
• Such considerations contributed to the creation
  of frames.

5
Advantages to Using Frames

• Frames can give more flexibility in designing
  your Web presentation.
• You can place information in different Web pages,
  removing redundancy.
• Frames can make your site easier to manage.
• Frames allows you to update only a few files
  rather than the whole.
• Web designers advocate creating both framed and
  non-framed versions for a Web site and giving
  users the option of which one to use.

6
Disadvantages to Using Frames

• The browser has to load multiple HTML files
  before a user can view the contents of the site
  increasing the waiting time for potential
  customers.
• Some older browsers cannot display frames.
• Some users simply do not like using frames.
• Some web authors feel that frames are too
  constricting, limiting flexibility in designing
  the layout of a Web page.
• There is concern that frames can use up valuable
  screen space.
• The source code is removed from the user.

7
Introducing Frames

• A frame is a section of the browser window
  capable of displaying the contents of an entire
  Web page. For example
• the frame on the left may display the contents of
  a Web page containing a list of hyperlinks
• the frame on the right may display a Web page
  with product information

8
An Example of Frames
This figure shows a common use of frames
displaying a table of contents in one frame,
while showing individual pages from the site on
the another.
9
Activating a Hyperlink within Frames
This figure shows a list of hyperlinks that
remain on the screen while the user navigates
through the contents of the site.
10
Planning Your Frames

• Before you start creating your frames, it is a
  good idea to plan their appearance and how they
  are to be used. There are several issues to
  consider
• What information will be displayed in each of the
  frames?
• How do you want the frames placed on the Web
  page?
• What is the size of each frame?
• Which frames will be static, that is, always
  showing the same content?

11
Planning Your Frames Continued

• Which frames will change in response to
  hyperlinks being clicked?
• What Web pages will users first see when they
  access the site?
• Should users be permitted to resize the frames to
  suit the needs?

12
An Example of a Frame Layout
This figure shows an example of a frame
layout. It is recommended to draw an example of
what you would like your Web page to look like
before you get started.
13
Creating a Frame Layout

• The tag is used to store the
  definitions of the various frames in the file.
  These definitions will typically
• include the size and location of the frame
• include the Web pages the frames display
• The code does not include an opening
  and closing tag.
• the reason for this is that this HTML file
  displays the contents of other Web pages
  technically, it is not a Web page

14
Specifying Frame Size and Orientation

• To create a frame layout, you will use the rows
  and cols attributes of the tag.
• the rows attribute creates a row of frames
• the cols attribute creates a column of frames
• A frameset is defined by rows or columns, but not
  both.
• You must choose to layout your frames in either
  rows or columns.

15
Frames Defined in either Rows or Columns
This figure shows frame layouts in either rows or
columns.
16
The Frame Syntax

• The syntax for creating a row or column frame
  layout is
• height 3, . . .
• row height is the height of each row
• or
• column width 3, . . .
• column width is the width of each column

17
Row and Column Sizes

• Row and column sizes can be specified in three
  ways
• in pixels
• as a percentage of the total size of the frameset
• by an asterisk ()

18
Defining Rows and Columns Using an Asterisk ()

• The asterisk instructs the browser to allocate
  any unclaimed space in the frameset to the
  particular row or column.
• for example, the tag
  creates two rows of frames.
• Specify at least one of the rows or columns of
  your tag with an asterisk to ensure
  that the frames fill up the screen.
• You can use multiple asterisks.
• The browser divides the remaining display space
  equally among the frames with the asterisks.
• for example, the tag
  creates three rows of frames with equal heights.

19
Frames of Different Sizes
This figure shows frames of different sizes.
160 pixels wide
25 of the width of the display area
whatever space is left
20
Creating Two Rows of Frames
In this code, the top row is used for the company
logo, and the second row is used for the
remaining content of the Web page. A frame that
is 85 pixels high should provide enough space to
display the logo. The rest of the display area
is occupied by the second row.
21
Specifying a Frame Source

• To specify a source for a frame, use the
  tag with the syntax
• The URL is the filename and location of the page
  that you want to load.
• You must insert the tag between the
  opening and closing tags.

22
Logo and Placement
This figure shows a preview of the YCS logo and
its placement.
23
Inserting a Frame forthe Head.htm File
Because this is the first tag, the
browser displays head.htm in the first frame row.
Note that using the comment tag and indenting
the tag a few spaces helps make your HTML
code easier to follow and interpret.
24
Nesting Tag

• Remember that a frameset is defined by rows or
  columns, but not both.
• To create frames using both rows and columns, one
  frameset must be nested inside another.
• The interpretation of the rows and cols
  attributes changes slightly.
• for example, a row height of 25 does not mean
  25 of the display area, but rather 25 of the
  height of the frame into which that row has been
  inserted (or nested)

25
Creating a Nested Set of Frames in the Second
Frame Row
This specifies a width of 140 pixels for the
first column, and whatever remains in the display
area will be allotted to the second column.
two columns of frames nested in the second frame
row
26
Nested Frames
This figure shows the content of two pages and
their placement on the Web page.
27
Sources for the Two Framesin the Second Row
This figure shows the code for two new frames.
It is not necessary to indent the code, however,
it can make the code easier to read and interpret.
28
Result of Web Site with Nested Frames
29
Web Site with Frames
The design of the frame layout could use some
refinement. The appearance of scroll bars may or
may not be appropriate for the web pages.
30
Controlling the Appearanceof Your Frames

• You can control three attributes of a frame
• scroll bars
• the size of the margin between the source
  document and the frame border
• whether or not the user is allowed to change the
  size of the frame

31
Controlling the Appearanceof Scroll Bars

• By default, scroll bars are displayed when the
  content of the source page cannot fit within the
  frame.
• You can override the default setting using the
  scrolling attribute.
• The scrolling syntax is scrollingscrolling
• scrolling can either be yes (to always display
  scroll bars) or no (to never display scroll
  bars)
• If you dont specify a setting for the scrolling
  attribute, the browser displays scroll bars when
  necessary.

32
Removing the Scroll Barsfrom the Logo Frame
If the complete text cannot be displayed after
removing the scroll bars from a frame, you will
need to modify the frame margin.
33
Controlling Frame Margins

• The following should be consider for frame
  margins
• the browser determines the amount of space
  between the content of the page and the frame
  border
• occasionally, the browser sets the margin between
  the border and the content too large
• the margin should be big enough to keep the
  sources text or images from running into the
  frames borders
• the margin should not take up too much space,
  because you typically want to display as much of
  the source as possible

34
Specifying Margins Syntax

• The syntax for specifying margins for a frame is
  marginwidthvalue
• marginheight is the amount of space, in pixels,
  above and below the content of the page in the
  frame
• marginwidth is the amount of space to the left
  and right of the page
• If you specify only one, the browser assumes that
  you want to use the same value for both.
• Setting margin values is a process of trial and
  error as you determine what combination of margin
  sizes looks best.

35
Specifying the Margin Sizes for the Frames
The margin height is set to 0 pixels. The frame
margin width is set to 10 pixels, to keep the
page from running into the borders of its frame.
36
Result of Web Site with Resized Frame Margins
37
Controlling Frame Resizing

• By default, users can resize frame borders in the
  browser by simply dragging a frame border.
• Some Web designers prefer to freeze, or lock,
  frames, so that users cannot resize them.
• this ensures that the Web site displays as the
  designer intended
• The syntax for controlling frame resizing is
  
• The noresize attribute is included within the
  tag to prevent users from modifying the
  size of the frame.

38
Working with Frames and Hypertext Links

• By default, clicking a hyperlink within a frame
  opens the linked file inside the same frame.
• You can display hyperlinks in many ways
• in a different frame
• in a new window
• in the entire window
• When you want to control the behavior of
  hyperlinks in a framed page, there are two
  required steps
• give each frame on the page a name
• point each hyperlink to one of the named frames

39
Files and Hyperlinksin a Web Site
40
Assigning a Name to a Frame

• To assign a name to a frame, add the name
  attribute to the frame tag.
• The syntax for this attribute is srcURL nameframe_name
• frame_name is any single word you assign to the
  frame
• case is important in assigning names
  information is considered a different name than
  INFORMATION

41
Assigning a Name to Each Frame
Once the frames are named, the next task is to
specify the target frame for each hyperlink.
42
Specifying a Link Target

• You can use the target attribute to open a page
  in a specific frame.
• The syntax for this is targetframe_name
• frame_name is the name youve assigned to a frame
  on your Web page
• When a page contains dozens of hyperlinks that
  should all open in the same frame, HTML provides
  a way to specify a target frame for all the
  hyperlinks within a single page.

43
Assigning a Target to a Hyperlink
Make sure to test your hyperlinks.
44
Using the Tag

• Use the tag to specify the default target
  for hyperlinks in a frame layout.
• Appears in the HEAD section of the HTML file.
• Used to specify global options for the page.
• One of the attributes of the tag is the
  target attribute, which identifies a default
  target for all of the hyperlinks in a page.
• The syntax for this attribute is targetframe_name
• frame_name is the name of the target frame

45
Using the Tag Continued

• The tag is useful when your page contains
  a lot of hypertext links that all point to the
  same target.
• Rather than adding the target attribute to each
  tag, you can enter the information once with
  the tag.
• You can still use the tag even if your
  file contains links that point to a different
  target than the one specified in the tag.
• The target in the tag overrides any target
  specified in the tag.

46
Specifying a Default Target for all Hyperlinks
47
Using Reserved Target Names

• Reserved target names are special names that can
  be used in place of a frame name as the target.
• They are useful in situations
• where the name of the frame is unavailable
• when you want the page to appear in a new window
• when you want the page to replace the current
  browser window
• All reserved target names begin with the
  underscore character ( _ ) to distinguish them
  from other target names.
• Reserved target names are case-sensitive, they
  must be entered in lowercase.

48
Reserved Target Names
This figure describes the reserved target names.
49
Using the _Self Target Name
You can use the reserved target name, _self,
which overrides the target specified in the
tag and instructs the browser to open the
page in the same frame that contains the
hypertext link.
page will appear in the frame containing the
hyperlink
50
Using the _Top Reserved Target Name
To target a link to the full display area, you
will use the _top reserved target name. The
_top target is often used when a framed page is
accessed from another. Its also used when you
are linking to pages that lie outside your Web
site altogether.
51
Using the Tag

• Use the tag to allow your Web site to
  be viewable using browsers that do or do not
  support frames.
• When a browser that supports frames processes
  this code, it ignores everything within the
  tags and concentrates solely on the
  code within the tags.
• When a browser that doesnt support frames
  processes this code, it doesnt know what to do
  with the and tags, so it
  ignores them.
• When you use the tag, you must include
  tags, this way, both types of browsers are
  supported within a single HTML file.

52
The Syntax

• The syntax for the tag is
• Page Title
• Frame Definitions
• Page Layout

53
Frameless Version of a Web Site
54
Inserting the Noframes Code
Web site will contain no frames
55
Frames and Browsers

• To test your Web page, use a browser that does
  not support frames.
• 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 of your Web site.
• It is important to correctly identify the target
  for hyperlinks within frames.
• by default, the target of the hyperlink will be
  the current frame
• Use the _top target to hyperlinks to documents
  that lie outside of the Web presentation.

56
Working with Frame Borders

• There are additional attributes you can apply to
  the tag that allow you to change border
  size and appearance. For example
• you can remove borders from your frames to free
  up more space for text and images
• you can change the color of the frame border so
  that it matches or complements the color scheme
  for your Web site

57
Setting the Border Color

• To change the color of a frames border, use the
  bordercolor attribute.
• The attribute can be applied either to an entire
  set of frames, using the tag, or to
  individual frames, using the tag.
• The syntax for this attribute is
• or
• color is either a color name or a color value

58
Setting the Border Color Continued

• Applying the bordercolor attribute to the
  tag affects all of the frames and
  nested frames within the set.
• If you apply the bordercolor attribute to a
  single tag, that particular color of the
  border changes in Internet Explorer, but in
  Netscape Navigator, all of the frame borders
  change.
• View the page using different browsers and
  browser versions.

59
Web Site with Brown Frame Border
60
Setting the Border Width

• Another way of modifying frame borders is to
  change their widths using the border attribute.
• The border attribute can be used only in the
  tag, and not in individual
  tags.
• The syntax for the border attribute is bordervalue
• value is the width of the frame borders in pixels

61
The frameborder Attribute

• Adding frameborderno to a tag
  removes the borders from the frames in your page.
• by removing the borders, more space for the text
  and images in each of the Web pages is created
• Internet Explorer also supports the framespacing
  attribute, which has the same effect as the
  border attribute.
• Netscape does not support the framespacing
  attribute.

62
Removing the Frame Borders
Some Web designers prefer not to show frame
borders in order to give the illusion of having a
single Web page rather than three separate ones,
while other Web designers believe that hiding
frame borders can confuse users as they navigate
the Web site.
63
Web Site without Frame Borders
64
Creating Floating Frames

• Another way of using frames is to create a
  floating frame.
• A floating frame, or internal frame, is displayed
  as a separate box or window within a Web page.
• The frame can be placed within a Web page in much
  the same way as an inline image.

65
The Floating Frames Syntax

• The syntax for a floating frame is srcURL frameborderoption
• URL is the name and location of the file you want
  to display in the floating frame
• the frameborder attribute determines whether the
  browser displays a border (yes) or not (no)
  around the frame
• in addition to these attributes, you can use some
  of the other attributes you used with fixed
  frames, such as the marginwidth, marginheight,
  and name attributes

66
Attributes Associated with the Tag
This figure shows some of the other attributes
associated with the tag.
67
Creating a Floating Frame
HTML code to create a floating frame
68
Viewing a Floating Frame
If you want to use floating frames in your Web
page, you must make sure that your users are
running at least Internet Explorer 3.0 or
Netscape 6.2. Users of other browsers and
browser versions might not be able to view
floating frames.
69
An Example of a Web Site with Frames
70
Changing Web Page Content

• When changing Web page content, you may want to
  reload or refresh the Web page
• for Netscape, you will need to close and then
  open the file for the changes to the frames to
  take effect. Simply clicking the Reload button,
  your changes are not displayed
• for Internet Explorer 3.0 and above, in which you
  can view changes to the page by clicking the
  Refresh button

71
Tutorial 5 Summary

• Learned how to display multiple Web pages in a
  Web browser using frames.
• Learned how to create a frame layout and specify
  the source document for each frame.
• Learned how to control the behavior and
  appearance of each frame.
• Learned how to specify which frame will contain
  the results of an activated hyperlink
• Learned how to support "frame-blind" browsers.
• Discussed extensions of frames supported by some
  browsers.