Frames
When I first started webdesign, the “logical” progression from basic HTML to an organized layout involved either tables or frames. For a novice with little to no knowledge or understanding of CSS, these tools were relatively easy and made sense at the time.
Now, I understand why someone may want to use either method but I also grasp the reasons why there may be better methods to design and organize a site. Still, I think that learning to use these can be a valuable lesson in HTML and design, even if the overall technique is lacking in some points. While a professional web designer should “know better,” the reasons for using other methods may not compare to the ease of using tables or frames when it comes to designing a website as a hobby.
I will continue to provide explanations of how tables and frames work and how they can be used in website layout, but will also provide information on why many do not find these methods preferable as well as information on other, more preferred options.
About
Frames can be a bit difficult to understand. Frames may appear as one page but are really made up of multiple web pages;the actual number depends on the type of frames (regular or I-frames) and the layout used. When viewing a page which uses frames, one will go to a certain URL – the page which contains the frames code – and the browser will load the pages which the code calls. The pages will appear in certain areas of the frames, depending upon how the owner has it set up.
Frames can help to make positioning easier by using separate frames for different parts of the page (left, right, top, bottom, center et cetera). Those who prefer frames often like them because content which may be frequently updated is more easily accessible. One can put navigation links in a separate file and only have to change that one file when updating. Furthermore, content which one may never update may work well in a frame because one can make a page, code the frames and “forget” about the page after that.
Examples
If one used frames to display two pages, navigation on the left and content/main page on the right, one would need three pages. Page 1 would contain the HTML code which would contain the code referencing Page 2 and Page 3, like this:
<frameset cols = “50%, *”>
<noframes>
<body><h1>I’m sorry, this page uses frames which your browser does not support. Please click <a href=”noframes.html”>here</a> to view the no frames version.s<h1> </body>
</noframes>
<frame src =”/left.html” />
<frame src =”right.html” />
</frameset>
When someone visits Page 1, Page 2 and Page 3 will automatically load into the frames in the position and sizes specified by the frame code.
I-Frames
Inline frames, better known as I-frames, are similar to regular frames in that one can specify the position and size of a frame which will display another web page (Page 2) when one loads a web page (Page 1). They differ, however, in that I-frames still display the original page (Page 1) “around” the I-frame so a user can still put content on that frame. When Page 1 is loaded, it is displayed along with Page 2 – at the specific positioning and size declared by the I-frame code similar to the code below:
<iframe name=”FRAMENAME” src=”page2.html” width=”100″ height=”280″ frameborder=”1″ scrolling=”no”></iframe>
When Page 1 is accessed in the web browser, it produces an effect similar to this
I-frames are often used with CSS to specify positioning, borders, size and transparency. Because Internet Explorer invented a CSS property which allows transparency, many users would set a certain element (background, scrollbar et cetera) of the page in the frame (Page 2) to an obnoxiously bright colour and then use CSS to delcare that colour transparent so the element would appear invisible. However, this only worked in that browser.
Disadvantages
However, frames have several disadvantages. For one, because the page one visits only contains the frames code to show several other pages, search engines such as Google, may not be able to properly index one’s web page which may affect the traffic to one’s site.
Additionally, older browser may no be able to display frames properly or at all which used to mean that most web sites had two versions – a non-frames version and a frames version which linked to the no frames version or the frames version use the NOFRAMES HTML tag to display a message to older browser users like this:
<noframes>
<h1>I’m sorry, this page uses frames which your browser does not support. Please click <a href=”noframes.html”>here</a> to view the no frames version.s<h1>
</noframes>
Also, because what appears as one page is really multiple pages, each page may have its own set of HTML code determining layout properties such as colour scheme which can result in an overall appearance which lacks uniformity. This can also make it more difficult to change the layout of one’s site becayse there are, ultimately, more pages one needs to edit.
Furthermore, when one uses frames, one must target links so that content will open in the correct frame (or window). Using frames and not targeting will cause all links to open in the current frame. If one’s navigation is in a different frame than one’s content, one will need to target navigational links to open in the content frame. If one is linking to an external web page, one will one to target those links to open in a new window instead of in the same frame as in the example below:
<a href=”noframes.html” target=”main”>Link</a>
Summary
To recap the pros and cons of frame:
- Pros
- Ease of positioning
- Less pages to update (with routine updates)
- Less code on each page (navigation can remain on one page only)
- Pages can be created then left alone
- Cons
- Difficult for search engines to index (limits traffic to one’s site)
- Older browser may not support
- Many pages to edit when changing layouts
- Must target links
