| ||||||
 Main Page Basic HTML Advanced HTML Images Frames Tables Forms Geo Quick Help META Tags Page Tips ASCII Codes Color (Hex) Codes Links Webrings What's New Contact Me Feedback Form Help Forum 
|
Basic Frames Layout When you see a page designed with frames, you probably think it's only one big file. In actuality, if you see a page with two frames, there are three files that make it up. One of those three files specifies the layout of the frames and their properties. The other two are actually HTML files that are "pasted" into the frames. What will follow is a basic layout of what a frames document's HTML code (let's use a two frame page as an example) would look like: <FRAMESET>
Now let's break down each tag:
Back to index Attributes This section will discuss the different attributes for the <FRAMESET> and <FRAME SRC> tags.
Attributes for both <FRAMESET> and <FRAME>
<FRAMESET> Attributes:
<FRAME> Attributes:
Back to index Non Frames Browsers Although frames can add a special touch for a page, not all browsers can view them, particularly older browsers. It is a good idea to have alternative text on your page to alert the viewers with a non frames browser that your page is not viewable to them. (It is also suggested to have a non frames alternative to your site so everyone will be able to view it in some way or form.) This section will show the tags needed to give that alternative text. Here is a sample layout of what you would put in your page: <NOFRAMES>
Keep in mind that the sentence I typed in is only an example. You can replace it with whatever you want. Also, the body tag's colors can be changed. You can see this in action in the examples section. Back to index Examples This section will go over 4 different frames documents, and their HTML source codes. You can customize each to fit your own needs. Keep in mind that the file names that are used in these documents are not the ones you will be using. You'll have to change the file names to suit your purposes, and also colors and text. Most of the attributes are not neccessary, so I will not be using them all. It is up to your own discretion whether to use them or not. This section is here to give a basic layout of different frames pages. Click the links above each HTML source code to see how the frames would look. (Note that if you don't have a frames compatible browser you won't see the frames, but will instead see what's inserted between the <NOFRAMES> tags. Use your browser's back button to get back to this page after each example.
Example One: A two frames document with one small lefthand column and one large righthand column. See how it would look The Code: <HTML>
Example Two: A three frame document with one small lefthand column, one large middle column, and one small righthand column. See how it would look The Code: <HTML>
Example Three: A two frame document with one large top row and one small bottom row. See how it would look The Code: <HTML>
Example Four: A complex nested frames document. This has two columns: one small lefthand one and one large righthand one. The large righthand column is then further split into two rows: one small top row and one large bottom row. This makes a total of three frames. See how it would look The Code: <HTML>
Back to index Targeting Did you notice that on some of the above examples there were links on the side frame? Well, if you were to click one of those links, the page would come up in the main frame. Let's take another look at Example 1. This time click each of the links and see what happens: Example 1 The way we do this is with targeting. Without targeting, if you click a link, it comes up in the frame it was clicked in. With targeting, the link comes up in whatever frame you specify. That's why we NAME out frames. (a href="#attrib">See more on NAME in the Attributes section.) Let's take a look at the source code for that frames document again: <HTML>
If you take a look at the part in red, you'll see that we named the small lefthand frame "side", and the large righthand frame "main". Also remember that the links themselves are not in the frames document, but in the one that gets pasted into it. If you look above, the document that was pasted into the "side" frame was "side1.html". There are two ways to target within this "side1.html" document. One is to put the following between the <HEAD> tags (not of the frames document, but in the "side1.html"):
<BASE TARGET="main">
This tells the browser that any links clicked within "side1.html" (which is in the "side" frame) would come up in the frame named "main". Got that? Now the other way to target, is to do it with each individual link. You can do this by adding TARGET="main" to your link tags. (More on linking.) Let's say the page being linked is "page1.html". It's going to be targeted to come up in the "main" frame. It would look like this: <A HREF="page1.html" TARGET="main">Link</A>
Now, let's say there's a link in one of your documents that you don't want to show up in a frame. Remember how we chose to target the links to the "main" frame? Well, if you want the link to come up in a new browser window, you replace "main" with "_top". So it would be TARGET="_top" added to the link tag, or: <BASE TARGET="_top">
Back to index | |||||
|
Webmaster is a Yahoo! GeoCities Community Leader in the neighborhood of Hollywood. Please email me at knarrly@yahoo.com if you need help with your homepage, or Yahoo! GeoCities in general. Community Leaders are always glad to help! Please visit Hollywood's pages made by your CLs: Hollywood's Community Center and Hollywood's Committees and Special Events Center. Most graphics and headers were made using Paint Shop Pro. Please do not take any images off these pages without my permission. If you are looking for a logo or header for your own website, use the request form at Graphics Source. 
The webmaster is not responsible for any banners that may appear on the GeoGuides or LinkExchange banners on these pages. I am not endorsing any ads that come up in the banner rotations, and my apologies in advance if anything comes up in them that is unsuitable for younger audiences. Thank you. | ||||||