Frames & Inline Frames


NOTE: An important concept to understand before you start making frames is that frames JOIN more than one page together. This is why in the frames codes, you'll have to put in several different page URLs: those are the pages that will be joined together by the frame. You put the actual content of your site on those pages, and the actual frame code on a 3rd, blank page. Something else that is very important is targeting the links, so that they open in the other frame. Remember to read EVERYTHING here carefully! Click here to learn about targeting


Regular frames

M
E
N
U
main page named: main.html

Above is an EXAMPLE of a typical frames set. On the left is the menu page and on the right frame is the main page. on the right is the code for the actual frameset.
<FRAMESET COLS="20%,80%"> <FRAME SRC="MENU PAGE URL" name=S> <FRAME SRC="MAIN PAGE URL" name=T> </FRAMESET>
Put this code on a 3rd, separate, blank page, that is NOT the main or menu one. The numbers beside cols (example, these numbers: 20%,80%) are the size of each frame, you can change them to change the size of each side frame. 20% is the menu page and 80% is the main page. Change the menu and main page url's to those 2 pages, and the frame names can be changed to any one-word name. The name is essential for targeting the links to the frames.
(click here to learn how)

More Advanced Frames

main page1.html
2.html
3.html

Above is an example of adding rows to your frames. 3 frames on the right and 1 big frame on the left. For columns, where it says "ROWS" in the html code change just that to "COLS" and you will have columns. You can change the names to whatever you want
<FRAMESET COLS="50%,50%"> <FRAMESET ROWS="100%"> <FRAME SRC="MAIN URL" name=BLAH> </FRAMESET> <FRAMESET ROWS="33%,33%,33%"> <FRAME SRC="URL HERE" name=BLAH2> <FRAME SRC="URL HERE" name=BLAH3> <FRAME SRC="URL HERE" name=BLAH4> </FRAMESET> </FRAMESET>


Colorful Frame Borders
Change the "#" to any number, and the COLOR to any color. These style codes can be added to any frame code.
<FRAMESET COLS="65%,35%"> <FRAME SRC="URL HERE" style="border: # solid COLOR> <FRAME SRC="URL HERE"> </FRAMESET>


No Scroll Bar/Resizing
Add into your frame code "scrolling=no" if you dont want a scroll bar, and "noresize" for no adjusting the size.
<FRAMESET ROWS="10%,90%"> <FRAME SRC="URL HERE" style="border: 2 solid blue noresize scrolling=no> <FRAME SRC="URL HERE" style="border: 2 solid pink noresize scrolling=no> </FRAMESET>

INLINE FRAMES

<iframe FRAMEBORDER="1" width=80 height=80 src="URL HERE" name=COOLFRAME></iframe>
you can change the size and width by erasing width="100" and height="80" and
putting the size you want. And you
can change the border size by changing
the FRAMEBORDER="1" to another number, 0 is the lowest. the src="url" is the page that will automatically show up in the frame. NOTE: the src part does NOT work on expage

Colorful IFrame Borders
<IFRAME width=# height=# name=BLAH style="border:# solid COLOR"> </IFRAME>



Targeting Inline Frames
(Also see below, at Targeting Links)

click here!

  • The code for the link:<a href="URL HERE" target=COOLFRAME>TEXT HERE</a>
  • The code for the frame:<iframe FRAMEBORDER="1" width=100 height=80 name=COOLFRAME> </iframe>
  • Notice how the target and the frame name
    are the same thing, so the
    link knows where to OPEN into




    TARGETING LINKS

  • this is VERY important: in order to have your links in your menu page show up in opposite frames, you have to target them. In order to do this, right after the url in all the link codes, put target=FRAMENAME. The names of the frames are specified in the actual frame code, with "name=whatever". Each frame should be named something different, and target the links to the frame which you want them to open in. The target and the frame name should be exactly the same, even capital letters.
    <a href="URL HERE" target="FRAMENAME">TEXT HERE</a>
  • to target a link to the top of your screen and to get out of frame you would put
    <a href="URL HERE" target="_top">TEXT HERE</a>
  • to target a link to a new browser put:
    <a href="URL HERE" target="new">TEXT HERE</a>
  • Related Sites