Getting Started
Editors
Design Tips
Home



HTML:

The Basics
Adding Color
Adding Images
Backgrounds
Links
Text Format
Page Format
Tables
>>Frames
Forms



More Than HTML:

Audio
Meta Tags
JavaScript
Cut & Paste JScripts
Style Sheets
IE with Style
IE Form Colors
MS Trans. Effects
Special Character Set



Help Desk:
Quick Reference


Free Stuff:

Graphic Designs
Fonts
Midis


 

 

Frames

BEGINNERS! Please READ this section carefully before attempting frames. Frames are an advanced topic in HTML, be sure you understand the basics fully.

Frames can be used for easy navigation of your site. A header and/or footer, and a link page will be kept on the screen while each page is being viewed. Many people do not like frame sites because once you are in a frame, if you do not have a link that will "break" it, your visitor will be stuck in your frame until he/she either manually types in a URL in the location bar or closes his/her browser. So be kind and provide a non-frames version of your site.


A frame specification is done without the usual HTML main tags. The frame will be a separate file, save this file as index.html. It is very important to name the file index.html if you want the frame to appear when your site is first accessed.

The Code:

<FRAMESET COLS="15%,*">
<FRAME SRC="linkpage.html" NAME="link">
<FRAMESET ROWS="15%,*" NORESIZE>
<FRAME SRC="headerpage.html" NAME="header">
<FRAME SRC="mainpage.html" NAME="main">
</FRAMESET>
</FRAMESET>

You can make your frame any way you like; with or without borders, with or without header/footer, you can even choose whether or not the viewer is able to resize the frame. You can have as many frames on the page as you want with any number of HTML pages liked to it. As in any other code, all you have to do is specify what you want in the main tags. For example, the default for resizing the frame is "true" to make the viewer unable to resize your frame you would specify NORESIZE in the <FRAMESET> tag.

<FRAMESET COLS="15%,*" NORESIZE>

To set your frame with no borders:

<FRAMESET COLS="15%,*" NORESIZE BORDER=0>

To set your frame to have only a navigation frame and a main frame, (no header or footer), you would omit the <FRAMESET ROWS> tag and the second </FRAMESET> tag. It's that simple.

Other commands for the <FRAMSET> element are:

  • BORDER="no|yes"
  • BORDERCOLOR="colorname|#rrggbb"
  • FRAMESPACING="width in pixels"
  • MARGINHEIGHT="height in percentage"
  • MARGINWIDTH="width in percentage"
  • NORESIZE="no|yes"

    HTML 4.0 ...

  • STYLE="proterty: value"
  • FRAMEBORDER="size in pixels"
  • LONGDESC="Text for description of frame"
  • NAME="name"
  • SRC="page.html"


Linking other Pages in your frame.

The most frequent problem people have with frames is linking other pages and making the page show up in the main window. Each link to another page will need to be "targeted" to the correct window.

<A HREF="page.html" TARGET="windowname">Link Text</A>

If you have named your navigation window as "link" you would target any page you want to show up in that window to TARGET="link". If you named your main window "main" you would target any page that is to show up in the main window TARGET="main". And so on for any other window you may have.

It would be considered good webmastership if you provide a "frame break" for linking pages outside your site. IE..

<A HREF="http://url.com/" TARGET="_top">Link Text</A>


To provide an entry to those who are still using non-frame browsers, you will need to begin an html page below the <FRAMESET> tag. IE..

<NO FRAMES>
<HTML>
<HEAD>
<TITLE>Your Title</TITLE>
</HEAD>
<BODY>

.....

</BODY>
</HTML>
</NOFRAMES>


To provide a non-frames version of your site without having to create two versions of the same page, just add a navigation bar at the bottom or top of each of your pages the same way you would any normal html page. To create the link that will break the frames, use this code:

<A HREF="main.htm" TARGET="_top">NO FRAMES PLEASE</A>


Inline Frames

Inline frames will provide a frame inside a page:

<center>
<IFRAME SRC="page.html>
</IFRAME> </center>

Here is an example of inline frames:


Copyright © 2004 - 2005 S&W Concepts