html frames tutorial
use this template
to get started (opens a new window)
how frames workin this example there is a 'navigation panel' on the left and a main page on the right.
to achieve this we need three pages.
The first page contains the the code for building the frame
a second page loads into the 'nav panel' on the left and a third page is loaded into the larger area on the right
this is the code for the main frameset
copy and paste it to your notepad or whatever text editor you use and save it as test.html
the first 'frame src' (frame source) is named 'nav' and the page 'nav.html' loads into it
the second 'frame src' is named 'main' and the page 'main.html' loads into it
this is the code for 'nav.html'
copy it and save it as nav.html
this is the code for 'main.html'
copy it and save it as main.html
linking to pages in the framethe whole point of having a 'nav panel' is that links to other pages can be put there, but if we put a normal link in the nav panel the new page will load in the in the smaller panel
to make a link work properly and load the new page in the larger frame on the right we have to make a slight adjustment to our links
the frame source tags have names, the second frame source tag is called 'main'
<FRAME SRC="main.html" NAME="main">
to load a page into the main frame panel from the nav panel, all we have to do is add
target="main" to our links
<A HREF="nextpage.html" TARGET="main">next page</A>
change the frame sizethe frameset in the example makes the nav panel 160 pixels wide
the frameset makes the main page stretch to fill the rest of the screen because instead of declaring an absolute size in pixels a * is used
we could also set the size of the frames as a percentage if we wish
frameset attributeswe can customize the frameset with a few attributes
we can set the border and bordercolor
<FRAMESET COLS="160,*" border="0"> (no border)
<FRAMESET COLS="160,*" border="20"> (border of 20 pixels)
<FRAMESET COLS="160,*" border="10" bordercolor="#FF0000">
we can set the scrollbars
<FRAME SRC="nav.html" scrolling="no"> (no scrollbars)
<FRAME SRC="main.html" scrolling="yes"> (scrollbars on)
by setting scrolling to auto, scrollbars only appear if they are required.
<FRAME SRC="main.html" scrolling="auto">
we can stop users resizing the frame
<FRAME SRC="main.html" NORESIZE>
the noframes tagAlthough older browsers that do not have a frames capability are rapidly being replaced we can include a <noframes> tag for the unfortunate few that cannot use frames.
anything included between the noframes tag can be seen by users that do not have frames ability.
it is common to see a phrase like 'sorry you need a frames capable browser to use this website' but a link to the document in the navigation frame would be less exclusive.
Also, because the frameset will probably be your index.html it will be beneficial to have plenty of text content between the noframes tags, thats if you don't want your homepage description in search engine results to look something like this example...
more frames templatespick a template, click on one of the images to see the frameset and get the code
(each opens in a new window)