Frames

1
Frames

• Web Authoring

2
What are frames?

• Frames technology allows you to have more than
  one web page on your screen at the same time.
• Typically a frames site will include a navigation
  menu down the side or across the top, with the
  main or contents page filling the rest of the
  screen
• There is a time and a place for using frames
• If your strategy includes maximum visibility,
  frames are not the best solution.

3
To use Frames or Not to Use Frames?Some
Advantages

• Frames are one way to make your site easy to
  navigate because you can have a constantly
  visible navigation menu - and easy navigation is
  one of the most important aspects of website
  design.
• Frames can make your site faster because you can
  include the site theme (images, logo, etc..) and
  the navigation menu in frames that do not have to
  download each time a visitor looks at a new page.
  Only the contents page changes.
• Using frames can make site maintenance easy,
  especially if you have a large site. If for
  example you want to add a new page that is linked
  from the other pages on your site, you simply add
  a link on your navigation menu you do not have
  to add links on each and every page.

4
To use Frames or Not to Use Frames?Some
Disadvantages

• The original argument was that not all browsers
  support frames, but this must be a very small
  percentage now. You can get around this by
  including an area below your frameset.
• In this noframes area you can include information
  such as a simple navigation menu and a "Sorry
  your browser does not support frames" statement -
  OR if you want you can have a separate version of
  your website for non-frames browsers but be
  prepared to do twice as much work maintaining the
  site.
• Search engines treat frames as hyperlinks to
  other pages, so if for example they manage to
  spider the frame containing your menu, they pages
  they index will be indexed but without the
  surrounding frames. If someone finds one or your
  pages on a search engine they will not be able to
  navigate around your site.
• The most important disadvantage is that it is
  difficult to link to a particular page on your
  site other than the page containing the frames
  (usually the homepage) - this is a big
  disadvantage if you use email to market your site
  and you want to link to different parts of your
  web site.

5
html code for Frames

• Learning how to use frames is easy once you have
  mastered the concept that a hyperlink can lead to
  a page in its own frame (TARGET"self") the
  default option, or in another frame in the
  frameset
• e.g.(TARGET"main").

6
html code for Frames
All this code only sets up your holder of your
content

• ltframeset rows"150,550" cols"150,590gt
• ltframe name"corner" src"page1.htm"
  scrolling"no" frameborder"0" noresizegt
• ltframe name"header" src"page2.htm"
  marginwidth"0" marginheight"0" scrolling"no"
  frameborder"0" noresizegt
• ltframe name"menu" src"page3.htm"
  marginwidth"0" marginheight"0 "scrolling"auto"
  frameborder"0" noresizegt
• ltframe name"main" src"page4.htm"
  marginwidth"0" marginheight"0" scrolling"auto"
  frameborder"0" noresizegt
• lt/framesetgt

7
What does all the code mean?

• How many pages were made?
• What was shown is a frames page that contains 4
  other web pages which you would have to create.
• page1.htm - where you could place your logo.
• page2.htm - where you could place your header
• page3.htm - where you could place a menu
• page4.htm - where you could place the contents of
  your first page.

8
Linking the pages

• The most difficult part of using frames is to get
  the links right on the menu page.
• As well as specifying which page you want to link
  to, you also have to give the link the target
  frame you want the page to load in.
• In the last example we have 4 frames, corner,
  header, menu and main. (you can name these
  whatever you want).
• If you want to load a new page in the main frame
  your HTML link in the menu page should look like
  this
• lta href"page5.htm" target"main"gtClick
  herelt/agt

9
One note.

• If you do not specify a target for your link, it
  will load in the current frame by default
• so if you did not specify target"main" in the
  last example the new page would simply replace
  the menu page.
• If you have links in the main content of your
  frames (page4.htm in the last example) you would
  not need to specify any target.

10
Still confused? Thats ok

• Remember, frame commands are used to break up the
  screen.
• So, what goes in the frame cells?
• Other pages go in the frame cells.
• Frame commands allow you to display more than one
  page at the same time, in the same browser
  screen.
• Heres a sample
• If that table were a browser screen using FRAME
  commands, there would be THREE pages involved
• The frames page template that breaks up the page
  and "Page_A.htm", "Page_B.htm". The frame
  commands that would create a page like the
  example above would look like this
• ltHTMLgt ltTITLEgtFirst Frame Pagelt/TITLEgt
• ltFRAMESET COLS"50,50"gtltFRAME
  SRC"PAGE_A.htm"gtltFRAME SRC"PAGE_B.htm"gtlt/FRAME
  SETgt lt/HTMLgt

11
What happened

• There were two pages displayed at the same time.
• I simply split the screen into two parts and
  placed a different page in each part.

12
Lets get the terms down

• FRAMESET starts any frame page. It alerts the
  browser that FRAMES are going here.
• COLS denotes that you want columns.
• In this case, I want two each 50 of the screen.
  Can I do other percentages? Of course you can. Go
  nuts if you want, just separate the percentages
  by commas and get it all to add up to 99 or
  100. 99?! Yes. You see, 33, 33, 33 adds to
  99 and splits the screen three ways. The browser
  just distributes the final 1 over the three
  spaces. Dig?
• FRAME SRC denotes the source of the frame. Frames
  read like you do, left to right. The first source
  offered will be hard left. I only have two frame
  sections so I need only 2 sources.
• /FRAMESET ends the whole deal.

13
Qs As

• Q Do I have to write pages skinny enough to fit
  in only one-half of the page frame?A Nope. The
  browser will cram it all in there, but it tends
  to look smooshy.
• Q What if my page is taller than the screen? How
  do I put in a vertical scroll bar?A The browser
  will do it for you. Don't concern yourself with
  it. Write for content, not for frame.
• Q Columns are nice, but can I get rows too?A
  Yes. Here's how you do it...

14
Adding Rows To Columns

• Perhaps you want this look
• Enter this
• ltFRAMESETgt
• ltFRAMESET COLS"50, 50"gt ltFRAME NAME"A"
  SRC"cell_1.htm"gtltFRAMESET ROWS"50,
  50"gtltFRAME NAME"B" SRC"cell_2.htm"gtltFRAME
  NAME"C" SRC"cell_3.htm"gtlt/FRAMESETgt
• lt/FRAMESETgt

This is B
This is A
This is C
See any new html terms?
15
NAME command

• In order for me to ask the computer to send data
  to another frame cell, I have to make a point of
  naming each of the cells.
• That's the NAME deal in the example.
• Name them whatever you want, but it's my
  suggestion to keep it simple -- like capital
  letters.

16
TARGET command

• Now that you have the cells named, you can make
  any hypertext link inside of them targeted.
• You're going to add a TARGET command to the usual
  ltA HREFgt.

17
Still confused? Lets try it

• First we will work with just the name command

18
Enter thissave it as frameset.html

• lthtmlgt
• ltheadgt
• lttitlegtUsing Frameslt/titlegt
• lt/headgt
• ltFRAMESETgt
• ltFRAMESET COLS"50, 50"gt
• ltFRAME NAME"A" SRC"cell_1.html"gt
• ltFRAMESET ROWS"50, 50"gt
• ltFRAME NAME"B" SRC"cell_2.html"gt
• ltFRAME NAME"C" SRC"cell_3.html"gt
• lt/FRAMESETgt
• lt/FRAMESETgt
• ltbodygt
• lt/bodygt
• lt/htmlgt

This is our holder for all of the pages and
directs the other pages where to go!
19
Now what?

• We need to make the three pages we referenced in
  the last html code
• Cell_1.html
• This will be the far left panel
• Cell_2.html
• This will be the top right panel
• Cell_3.html
• This will be the bottom right panel

20
Cell_1.html

• lthtmlgt
• ltheadgt
• lttitlegtThe Essentials for a Web Pagelt/titlegt
• lt/headgt
• ltFRAMEgt
• ltFRAME NAME"A" SRC"cell_1.html"gt
• lt/FRAMEgt
• ltbodygt
• Let's put some link here to our other web pages
  we have made.
• ltbrgt
• lta hreffruit.html"gtFruit Pagelt/agt
• ltbrgt
• lta hreffavorites.html"gtFavorites Pagelt/agt
• ltbrgt
• lta hreflists.html"gtList Pagelt/agt
• ltbrgt
• lt/bodygt
• lt/htmlgt

These links will only work if YOU saved your
pages with these names!
21
Cell_2.html

• lthtmlgt
• ltheadgt
• lttitlegtThe Essentials for a Web Pagelt/titlegt
• lt/headgt
• ltFRAMEgt
• ltFRAME NAME"A" SRC"cell_2.html"gt
• lt/FRAMEgt
• ltbodygt
• Let's put some junk here too!
• lt/bodygt
• lt/htmlgt

22
Cell_3.html

• lthtmlgt
• ltheadgt
• lttitlegtThe Essentials for a Web Pagelt/titlegt
• lt/headgt
• ltFRAMEgt
• ltFRAME NAME"A" SRC"cell_3.html"gt
• lt/FRAMEgt
• ltbodygt
• Let's put some junk in here.
• Let's put some junk in here.
• Let's put some junk in here.

23
A few more frame commands

•  Here are a few more commands that you can use in
  order to alter the frames on your page.
• Each is fairly self-explanatory stick the
  command, with whatever setting you want, into the
  FRAME command to see it work.
• HEIGHT"--" This acts just like the height
  command in terms of an image. It defines the
  frame's height, in pixels or percentage.
• WIDTH"--" Ditto this one in terms of frame
  width.
• MARGINWIDTH"--" This sets the margin width in
  either pixels or percentage.
• MARGINHEIGHT"--" Ditto, but on height.
• SCROLLING"--" If the information inside the
  frame is too long to display, then a scroll bar
  will appear. You can stop it by adding this
  command set to "no."
• ALIGN"--" This works like the align command in
  terms of images It denotes where text will appear
  when surrounding the frame.
• NORESIZE Add this, and the user will not be able
  to resize your frame.

24
Whats next?

• Questions?
• Your assignment