Frames Basics of Working with Frames

1
FramesBasics of Working with Frames

• By Robin K. Ashford
• University of Phoenix

2
Overview

• Generally speaking
• Simple frames
• Frames in Rows x Columns
• Combining Framesets
• Frame Attributes
• Targeting Links to Particular Frames
• Targeting Links to Special Spots
• Changing the Default Target

3
Generally Speaking

• Frames allow a visitor to see more than one page
  at a time
• Each frame contains its own Web page
• Each could be viewed independently in separate
  Window
• Ability to inter-relate the information in each
  of the pages

4
Disadvantages to Frames

• Can be hard to navigate
• Scroll bars can take up screen space
• Hard to get indexed in a search engine
• W3C discourages the use of frames
• Recommend embedding content on a page through
  fixed positioning and the use of the object
  element
• Nevertheless frames can be handy tool,
  especially in company intranets (e.g., policies
  procedures)

5
Frame Your Window Panes

• Think of a frameset as a window with individual
  panes
• Build the window
• Create the initial landscape behind each window
  by assigning individual URLs to each pane (i.e.,
  frame)

6
Tips

• DOCTYPE Frameset
• Create a title in each framed page use this
  title when you target links to that frame
• Use to allocate whatever leftover space is
  available in window
• Can use more than one will divide space
• BODY element only used to offer alternative to
  frames
• Closing tag!!

ltNOFRAMESgtltBODYgt alternative content
lt/BODYgtlt/NOFRAMESgt
7
Simple Frameset Example
lt!DOCTYPE html PUBLIC -//WC//DTD XHTML 1.0
Frameset//EN http//www.w3.org/TR/xhtml1/DTD
xhtml1-frameset.dtd?gt lthtml xmlnshttp//www.w3.or
g/1999/xhtmlgt ltheadgt lttitlegtFrames in
Rowslt/titlegt lt/headgt ltframeset rows65,,60gt ltfr
ame namebanner srcbanner.html/gt ltframe
namephotos srcopeningpage.html/gt ltframe
namebuttons srcbuttons.html?gt lt/framesetgt lt/
htmlgt
namebanner
namephotos
namebuttons
8
Creating Frames in Rows Columns

• Similar to a table
• Tips
• Limits you to same number of frames in each row
  or column
• To create one row with one frame, another with
  two or more frames, etc., requires combining
  (nesting) multiple framesets.

9
R x C Frames - Example
Set the size of rows and columns in the FRAMESET
tag. This example has 4 rows and 4 columns.
Then define each row from left to right and from
top to bottom.
lt/headgtltframeset frameborder0
rows,193,104, 165,
cols, 110, 110, 110, gt ltframe nameborder1
srcborder.html scrollingno marginwidth1
marginheight1 /gt Repeat for the five more
borders ltframe nameborder6 srcborder.html
scrollingno marginwidth1 marginheight1
/gt ltframe nametopleft srcbalcony1.html
scrollingno marginwidth1 marginheight1/gt
ltframe nametopmiddle srcbalcony2.html
scrollingno marginwidth1 marginheight1/gt
Etc. repeat for the various frames
10
Combine Multiple Framesets

• Commonly seen
• One row at the top (banner frame)
• Second row divided into two columns (i.e., two
  frames)
• Achieve effect by inserting an additional
  frameset in the second row
• Example code follows

11
Combining Frames Example
lt!DOCTYPE html PUBLIC -//WC//DTD XHTML 1.0
Frameset//EN http//www.w3.org/TR/xhtml1/DTD
xhtml1-frameset.dtd?gtlthtml xmlnshttp//www.w3.or
g/1999/xhtmlgtltheadgtlttitlegtCombining
Framesetslt/titlegtlt/headgtltframeset
rows65,,60gtltframe namebanner
srcbanner.html/gt ltframeset cols120,gt
ltframe name indexcol srcindexcity.html /gt
ltframe namemainwin srcopeningpage.html /gt
lt/framesetgt ltframe namebuttons
srcbuttons.html/gtlt/framesetgt lt/htmlgt
12
Frame Attributes

• Adjust margins
• ltframe marginwidthw marginheighth /gt
• Showing or hiding scroll bars
• ltframe scrollingyes /gt
• Yes No Auto note auto is the default
• Stop resizing of frames
• Type noresize in the frame tag
• Depending on browser and version
• Can also use very small pixel values
• Or set border width to 0

13
Adjusting Frame Borders

• Adjusting color of borders
• In frameset to change all of them
  bordercolorcolor
• In frame tag for specific rows, columns, or
  frames
• Adjusting frame borders
• Border tag controls width of space between frames
• Frameborder tag lets you fill it with sculpted
  borders or leave it blank

14
Targeting Links to Frames

• Initial content of given frame specified with src
  tag
• The trick to changing the content is add a
  pointer TARGET to the links to those pages
• Somewhat similar to how an anchor works
• TARGET
• Make sure the target frame has a NAME!
• Targets only work if the frame in which you want
  the page to appear has a name

15
Target Link Example
Make sure the target frames are NAMED
ltframeset rows65,,60gtltframe nameTopBanner
src/gtltframe nameSideMenu srcindexpols.html/
gt ltframe nameMainWind srcwelcome.html/gt
NameTopBanner
NameSideMenu
NameMainWind
Make sure the link specifies the name of the
frame where the destination page is to open
Also watch out for case sensitivity in your
names! Unix systems are case-sensitive.
NameBottomFoot
16
Building Your First Window Frame

• First Create a Reference Sketch
• Second Create the various source files, the
  content that will fill the frames
• Third Create the frameset and the various
  frames
• Following your reference sketch to keep
  everything straight

17
1st Sketch Your References
Name - TopBanner

• Sketch the frame layout

Initial Source File Name rel URL/filename1
Name - MainWindw
Name RefList
Initial Source File Name rel
URL/filename2

• Name each frame with descriptive name

SRC rel URL/List.html

• Note name of each initial source file to build

Name - BottomPane
Initial Source File Name rel URL/credits.html
18
2nd Build Your Source Files

• Create and save individual HTML files
• Filename1.html
• List.html
• Filename2.html
• Credits.html

19
3rd Build Your Frameset
ltframe namepink srcbanner.html/gt
ltframeset cols120,gt
ltframe name indexcol srcindexcity.html
/gt ltframe namemainwin srcopeningpage.html
/gtlt/framesetgt
ltframe namegreen srcbuttons.html/gtlt/frames
etgt
RememberFramesets are read from left to right
top to bottom
20
Targeting Special Spots

• Four special target names, each starts with an
  underscore
• _blank to have the link open in a new window
• _self to open the link in the same frame window
• _top to use the entire current window for the
  link, breaking out of frames all together
• _parent to open the link in the frame window
  that contains the current frameset

Example lt.. Target_self gt
21
Offer Alternatives to Frames

• Some browsers dont support frames, especially
  text-based browsers like handhelds.
• Offer alternative

22
NoFrame Alternative - Example
lt/headgtltframeset rows65,,60gtltframe
namebanner srcbanner.html/gtltframeset
cols120,gtltframe name indexcol
srcindexcity.html /gtltframe namemainwin
srcopeningpage.html /gtlt/framesetgtltframe
namebuttons srcbuttons.html/gt
ltnoframesgtltbodygt Aflkjd adfhaslkfhaslh fskldhf
akshf your html lt/bodygtlt/noframesgt lt/framesetgt lt/h
tmlgt
Text based browsers ignore everything but the
portion between the noframes tags. Frame based
browsers do the opposite.
23
Theres more but thats nuf.
Keeping track of frames names links requires
attention to DETAIL!