Not Your Ordinary Frames in a Web Page Part Two

1
Not Your Ordinary Frames in a Web PagePart Two

• ByAl R. Fichera, MAA

2
Using the Tag

• The tag appears within the tags of
  your HTML file and is use to specify global
  options for the page.
• One property of this tag is the TARGET property,
  which identifies a default target for all the
  page's hyperlinks.
• Use this syntax

3
When to Use the Tag

• The tag is useful when your page contains
  a lot of hypertext links that all point to the
  same target.
• Instead of adding the TARGET property to each
  anchor tag, enter it just once in the
  tag.e.g.,

4
Over-ride Tags

• If an tag must point in a different
  direction, then it's own target takes
  precedence.window"

5
Using Special Target Names

• Special target names are useful in situations
  where you want the page to appear in a new window
  or to replace the current frame layout.
• All these names begin with the underscore
  character ( _ ).
• Note Special target names are case-sensitive,
  must be lower-case only!

6
Special Name _self

• target"_self"
• The default behavior.
• Loads into the same frame or window that contains
  the hyperlink tag.
• Usually to override any Base Target information.

7
Special Name _blank

• target"_blank"
• Loads the document into a new browser window.
• Can cause confusion over navigation since a new
  window is now opened.

8
Special Name _parent

• target"_parent"
• Break out of a Child frameset and display the
  link in the parent frameset one level up.
• At best, using nested framesets is poor
  navigation design that will ultimately confuse
  your user.

9
Special Name _top

• target"_top"
• Loads the document into the full display area,
  replacing the current frame layout.
• Used to escape a frames document.
• The most useful of all the special names.
• For a little practice with targets use the
  following linkhttp//www.geocities.com/prof_al/e
  xamples/frames/framesBEST.html

10
Extending Your Frames

• Lets look at some of the attributes you can
  include inside the and tags to
  gain more control over the layout and appearance
  of your frames.

11
Frames and Scroll Bars

• Frames automatically appear with scroll bars
  inside when necessary, so that users can scroll
  the contents.
• If you dont want these scroll bars type the
  following inside the tag.
• scrolling"no"
• If scroll bars are disabled, the user may not be
  able to read all of the contents in the frame.

12
More on Scroll Bars

• Frames are usually resizable, The user can adjust
  the size of the frame by clicking and dragging on
  the frames border. You can disable this feature
  also by typing this in the tag
• noresize"noresize"

13
Don't Frame Me Up!

• You have a couple of options when presenting a
  Frames page to your viewers.
• Provide information and a link to a Non-Frames
  version of your page.
• Include the actual Non-Frames document within the
  Frames page.

14
Being Frames Enriched

• Be kind to your page viewers and keep the frames
  to two or three at most.
• Learn more on frames by going to Netscape online
  at http//home.netscape.com/assist/net_sites/fram
  e_syntax.html

15
Using Frameset Tables

• Use Tables in each HTML file to keep the content
  aligned within the Frameset.
• Setting the Table Width to 80 or 85 will keep
  all the content visible in any resolution.
• Example next series of slides.

16
Demo Frameset Tables

• Copy this simple Two-Column FRAMESET. Save as
  tableframeset.html

• Using Tables in Framesets

17
Demo Frameset Tables

• Copy this NAVIGATION Link.
• Save as links.html

Left Side of
Frameset

Links P
age 1 Page
2 Page
3 Page
4
18
Demo Frameset Tables

• Copy this MAIN PAGE Link.
• Save as page1.html

Right Side of
Frameset
align"center"
border"2" PAGE ONE
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonummy nibh
euismod.

19
Place-Holder Text

• Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit, sed diem nonummy nibh euismod
  tincidunt ut lacreet dolore magna aliguam erat
  volutpat. Ut wisis enim ad minim veniam,quis
  nostrud exerci tution ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat.
  Duis te feugifacilisi. Duis autem dolor in
  hendrerit in vulputate velit esse molestie
  consequat, vel illum dolore eu feugiat nulla
  facilisis at vero eros et accumsan et iusto odio
  dignissim qui blandit praesent luptatum zzril
  delenit au gue duis dolore te feugat nulla
  facilisi. Ut wisi enim ad minim veniam, quis
  nostrud exerci taion ullamcorper suscipit
  lobortis nisl ut aliquip ex en commodo consequat.

Presented by Professor Al Fichera
June 24, 2003
19
20
Screen Shots 640x480
White space expands!
BORDER TO BE REMOVED!
Presented by Professor Al Fichera
June 24, 2003
20
21
Screen Shots 800x600
White space expands!
BORDER TO BE REMOVED!
Presented by Professor Al Fichera
June 24, 2003
21
22
Screen Shots 1024x768
White space expands!
BORDER TO BE REMOVED!
Presented by Professor Al Fichera
June 24, 2003
22
23
Screen Shots 640x480No-Tables
White space shrinks!
24
Disguising Frames Pages

• There are times when you may wish to hide or
  enhance parts of a Frames page.
• The borders for one thing can be an annoyance to
  the esthetics of the page. The following
  information will introduce the idea of working
  with the borders.

25
Copy the Following CodeSave as
framelessframeset.html

• Frameless Frameset
• framespacing"0"
• frameborder"0" marginwidth"0" marginheight"0"
  noresize"noresize" scrolling"auto"
• frameborder"0" marginwidth"0" marginheight"0"
  noresize"noresize" scrolling"auto"

26
Explaining Frameless Framesets

• framespacing"0"

• In this arrangement there are two columns, the
  first is set to be 155 pixels wide.
• The second is to determined by the browser.
• Notice that there is to be
• NO BORDER
• NO FRAMEBORDER
• NO FRAMESPACING

27
More Frameless Framesets

• frameborder"0" marginwidth"0" marginheight"0"
  noresize"noresize" scrolling"auto"

• In this frame src tag we are targeting a Frame
  Name called "navbar".
• Notice the rest of the tags used here
• NO BORDER
• NO MARGINWIDTH or MARGINHEIGHT
• NORESIZE but SCROLLING will be automatic

28
Wrapping up Frameless Frames

• frameborder"0" marginwidth"0" marginheight"0"
  noresize"noresize" scrolling"auto"

• In this example "main" refers to which window
  that the frame src doc3.html will land up in.
• Notice the rest of the tags used here
• NO BORDER
• NO MARGINWIDTH or MARGINHEIGHT
• NORESIZE but SCROLLING will be automatic

29
Screen Shot Frameless Frames
Notice that there are no borders or scrollbars,
and that the page looks more like a single page
with two columns rather than two separate pages.
30
Another Live Example of a Nested Borderless
Frameset
This example is from my Web site and features
five (5) frames, one of which is the actual
target. Notice the scrollbar that gives it away.
Presented by Professor Al Fichera
June 24, 2003
30
31
Take a look under the Hood!
OK, so you wonder where the five frames are,
here's what the last frameset looks like without
its targeted documents. I added borders so you
could see the divisions.
32
Playing with Borders

• Using the previous example we'll change the look
  with colored borders. This trick only works in
  Netscape.
• We'll increase the Margin height and width to 10
  to keep away from the new border.

33
Using Frame Extensions

• The following applies only to Netscape.
• Define the Color of your Borders.
• Affects all the Borders in the Frameset.
• OR
• Affects only a single Frame.

34
Using Frame Extensions

• The following applies only to Netscape.
• Define the Width of your Borders.
• Affects all the Borders in the Frameset. The term
  pixels above refers to a number such as 8 or 10,
  whatever.

35
Screen Shot Border Colors
This gold colored border can not be moved or
resized until we change it's properties
36
Getting Out of a Frameset

• You may add a bit of JavaScript code to any of
  your pages if you feel that your Web page would
  not look good in someone else's frameset. Use
  this link to get the codehttp//www.geocities.co
  m/prof_al/examples/frames/OutofFrames.html

37
Floating I-Frames

• A nice effect, even though it only appears in
  MSIE, (Netscape should reconsider.)
• Has all the functions of a regular FRAMES page
  without a Frameset.

38
More on I-Frames

• There are some options that you can add to the
  Floating I-Frame if you wish, but it will work
  with just a minimum of options too.
• The basic recipe for an I-Frame is " something " src "filename.html" width "n"
  height "n" /

39
I-Frame Options

• Here are some of the add-ons if you wish
• marginwidth "n" marginheight "n"
• scrolling "yes, no, or auto"
• frameborder "1 or 0"

40
More I-Frame Options

• vspace the height of the margin
• hspace the width of the margin
• align the choice are list belowleft,
  right, middle, top, bottom,alsoabsbottom,
  absmiddle, texttop, and baseline.

41
An I-Frame Web Page
42
Bibliography

• Carey, Patrick, Creating Web Pages with HTML,
  Comprehensive, Course Technology, Cambridge,
  Mass., 1998 (9 tutorials).
• Burns, Joe, HTML Goodies, QUE Macmillian
  Publishing, Inc., Indianapolis, IN, 1999 (527
  pages).
• Martin, Teresa and Glenn Davis, The Project Cool,
  Guide to Enhancing Your Website, John Wiley Sons,
  Inc., New York, NY, 1998 (416 pages).
• Oliver, Dick and Molly Holzschlag, Teach yourself
  HTML4 in 24 hours, Sams.net Publishing,
  Indianapolis, IN, 1997 (405 pages).
• Ibañez, Ardith, and Natalie Zee, HTML Web Magic,
  Hayden Books, Indianapolis, IN, 1997 (230 pages).
• Vodnik, Sasha, Dynamic HTML, Course Technology,
  Cambridge, Mass., 1998 (7 tutorials).
• Jasc Software, Paint Shop Pro 5, Jasc Software,
  Inc., Minnetonka, MN, 1998 (335 pages).