Solid HTML That's As Simple As It Gets: FramesOct 31 '01 Write an essay on this topic.
Popular Products in Books
The Bottom Line Frames make it possible for content from web page files to appear in the web browser at once. Frames can be arranged in rows or columns. Frames can be nested.
A web page which uses frames is a web page which divides the web browser window into sections, and each section contains the contents of a web page file. If a web page uses 3 frames (top, middle, and bottom), then each frame has the contents of one web page file (top.html, middle.html, or bottom.html). One web page will contain HTML specifying the layout of the fames and which web pages will be shown in which frames. At least one web page must exist so it can be included within the frame. In the case of the 3-frame web page, there are four web pages: the main file, top.html, middle.html, and bottom.html. The files top.html, middle.html, or bottom.html should already exist-- they contain whatever needs to appear in the main web page. However, what is needed is a way to call up the three web page files into their appropriate frames. For this reason we will focus on the main file (named here mainfile.html). __________________________________________________ Frames Arranged in Rows Since there are files called top.html, middle.html, and bottom.html, this means that the frames of mainfile.html are arranges in rows. Here is the HTML for mainfile.html: ========== <HTML> <HEAD> <TITLE>This is MAINFILE.HTML</TITLE> </HEAD> <FRAMESET ROWS="*,*,*"> <FRAME SRC="top.html"> <FRAME SRC="middle.html"> <FRAME SRC="bottom.html"> </FRAMESET> </HTML> ========== That's it. If a web page relies on frames, all the dirty work is done within its subordinate web pages. The subordinate web pages are invoked by the SRC attribute of the FRAME tag. The FRAME tags are contained within FRAMESET tags. Because frames are being used, there is no BODY tag-- since each subordinate web page contains BODY tags, the BODY tag is omitted from the mainfile.html web page file. Each frame takes up as much space as needed, and this is shown the asterisk character("*"). However, sizes can be specified by the use of percentages or pixel values. Below is mainfile.html with allocated percentage sizes fro each frame: ========== <HTML> <HEAD> <TITLE>This is MAINFILE.HTML</TITLE> </HEAD> <FRAMESET ROWS="15%,70%,15%"> <!-- ---------------------------------------------------- --> <!-- Also, "15%,70%,*" is the same as "15%,70%,15%" --> <!-- since the "*" uses whatever percentage is left over. --> <!-- ---------------------------------------------------- --> <FRAME SRC="top.html"> <FRAME SRC="middle.html"> <FRAME SRC="bottom.html"> </FRAMESET> </HTML> ========== Depending on what effect is desired by the web page creator, pixel values can be used instead of percentages. If screen resolution is set to 800 pixels across by 600 pixels high and the web browser window is maximized, then the next version of mainfile.html is equivalent to the earlier version. Here is mainfile.html with pixel values instead of percentages: ========== <HTML> <HEAD> <TITLE>This is MAINFILE.HTML</TITLE> </HEAD> <FRAMESET ROWS="90,420,90"> <!-- ------------------------------------------------- --> <!-- Also, "90,420,*" is the same as "90,420,90" since --> <!-- the "*" uses whatever percentage is left over. --> <!-- ------------------------------------------------- --> <FRAME SRC="top.html"> <FRAME SRC="middle.html"> <FRAME SRC="bottom.html"> </FRAMESET> </HTML> ========== Percentages and pixel values have their merits as expressions of frame sizes. To make sure that a web page using frames looks as intended whether the web browser window is maximized or at some intermediate size, percentages are preferred. If a web browser window is guaranteed to be maximized, then pixel values can be used. __________________________________________________ Frames Arranged in Columns What was written for web pages using frames arranged in rows also holds true for web pages arranged in columns. However, COLS is the attribute used instead of ROWS. The following example shows mainfile.html using columns instead of rows fro the frames: ========== <HTML> <HEAD> <TITLE>This is MAINFILE.HTML (with columns)</TITLE> </HEAD> <FRAMESET COLS="15%,70%,*"> <FRAME SRC="left.html"> <FRAME SRC="middle.html"> <FRAME SRC="right.html"> </FRAMESET> </HTML> ========== For mainfile.html to make sense I renamed left.html to top.html, and I renamed bottom.html to right.html; however, I could have kept those names since the contents of the files don't change. It doesn't matter what the names of the files are as long as they are used by the correct frame. __________________________________________________ Nested Frames Like many elements of HTML, frames can be nested within frames. However, the FRAME tag which will act as host to the other frame is replaced by another set of FRAMSET tags. To show nested frames in action mainfile.html will split the frame containing right.html so that the nested frames contain top.html and bottom.html: ========== <HTML> <HEAD> <TITLE>This is MAINFILE.HTML (with columns and nested frames)</TITLE> </HEAD> <FRAMESET COLS="15%,70%,*"> <FRAME SRC="left.html"> <FRAME SRC="middle.html"> <!-- FRAME SRC="right.html" --> <!-- Nested FRAMESET replaces FRAME SRC="right.html" --> <FRAMESET ROWS="36%,*"> <FRAME SRC="top.html"> <FRAME SRC="bottom.html"> </FRAMESET> </FRAMESET> </HTML> ========== Notice that the frame with (SRC="right.html") was replaced by a FRAMESET containing two rows. The top row of the nested frame takes up 36% of the web browser window area. The bottom row of the nested frame uses the remaining space of the web browser window area (in this case, 64%). The line containing (FRAME SRC="right.html") was made into a comment to show that it was replaced by the nested frameset. Since this line is a comment, it can be removed. __________________________________________________ FRAME Tag Attributes The SRC attribute is required by the FRAME tag-- without SRC, nothing will appear in the frame. However, there are 5 other attributed which can be used by the FRAME tag: • NORESIZE • SCROLLING • MARGINHEIGHT • MARGINWIDTH • NAME The NORESIZE attribute is used to keep a frame static. Some frames can be resized by dragging the mouse pointer over the frame separator. If a frame contains content which can be hidden from view if the web browser is not set to the proper size, then frame border needs to be moved to a better location. If NORESIZE is specified in the FRAME tag, this capability is gone; however, the problem remains. More often than not, avoid using the NORESIZE attribute. The SCROLLING attribute is used to specify whether scrollbars should be present or not. (SCROLLING="yes") makes scrollbars visible even if they are not needed. (SCROLLING="no") keeps the frame free from scrollbars even if content if off screen in the frame. By default (SCROLLING="auto") is used so that scrollbars are added only when needed. The MARGINHEIGHT and MARGINWIDTH attributes imply what their names say, and the sizes are expressed in pixels. While margins can be set within HTML tables, the coding for margins is confusing or obscure-- in this respect, declaring margins for frames is far easier. Finding the right pixel values for MARGINHEIGHT and MARGINWIDTH is an exercise in trial and error, but at least it is manageable. MARGINHEIGHT and MARGINWIDTH can be useful depending on the layout of a web page. The NAME attribute is used to identify a frame to other frames as well as to scripts and hyperlinks which lead to the frame on the frame-enhanced web page. Other web pages can point to the frame containing bottom.html, but those web pages need to have the TARGET attribute next to the HREF attribute of the A (for anchor) tag. Below is a sample hyperlink and then mainfile.html with NAME attributes: ========== <A HREF="about.html" TARGET="Main">About Me</A> ========== <HTML> <HEAD> <TITLE>This is MAINFILE.HTML (with columns and nested frames)</TITLE> </HEAD> <FRAMESET COLS="15%,70%,*"> <FRAME SRC="left.html" NAME="TOC"> <FRAME SRC="middle.html" NAME="Main"> <!-- FRAME SRC="right.html" --> <!-- Nested FRAMESET replaces FRAME SRC="right.html" --> <FRAMESET ROWS="36%,*"> <FRAME SRC="top.html" NAME="Navigation"> <!-- ---------------------------------------------- --> <!-- bottom.html contains the hyperlink shown above. --> <!-- ---------------------------------------------- --> <FRAME SRC="bottom.html" NAME="About"> </FRAMESET> </FRAMESET> </HTML> ========== The nested frameset contains a frame which shows the contents of the file bottom.html; bottom.html itself contains a hyperlink labeled "About Me." If this hyperlink is clicked or selected, then the contents of the frame named Main disappear and are replaced by the contents of the file named about.html. This is how the contents of a frame change in the web browser. Some web pages have frames containing links which point to another frame, and this can be found by web sites which use a Table of Contents frame or an Index frame-- these frames contain links to the Main frame. With HTML it is possible for data in Frame A to be changed by clicking a hyperlink in Frame B. One link to one frame. If anyone wants to change multiple frames with one click of a hyperlink, scripting languages such as JavaScript must be used. Depending on the nature of the web page, though, HTML may be enough to accomplish a desired effect. __________________________________________________ Recognizing Older Web Browsers For a number of reasons there are people using web browsers which don't recognize frames. Since their visits are just as important as visits from people using newer web browsers, they need to be able to access the information in a different way. The NOFRAMES tags serve this purpose. Below is mainfile.html with NOFRAMES tags added: ========== <HTML> <HEAD> <TITLE>This is MAINFILE.HTML (with columns and nested frames)</TITLE> </HEAD> <FRAMESET COLS="15%,70%,*"> <FRAME SRC="left.html" NAME="TOC"> <FRAME SRC="middle.html" NAME="Main"> <!-- FRAME SRC="right.html" --> <!-- Nested FRAMESET replaces FRAME SRC="right.html" --> <FRAMESET ROWS="36%,*"> <FRAME SRC="top.html" NAME="Navigation"> <!-- ---------------------------------------------- --> <!-- bottom.html contains the hyperlink shown above. --> <!-- ---------------------------------------------- --> <FRAME SRC="bottom.html" NAME="About"> </FRAMESET> <NOFRAMES> <BODY> Text goes here. </BODY> </NOFRAMES> </FRAMESET> </HTML> ========== Since NOFRAMES is used for web browsers which don't recognize frames, the BODY tag is required within the NOFRAMES container tags. Between the NOFRAMES tags can be text specifying a hyperlink leading to a non-frames edition of the web page. Between the NOFRAMES tags can be text simulating the main section of a web page. This may be necessary if a web site is in transition from one layout to another. NOFRAMES tags can be used to state the obvious, or they can be used in such a way that no one visiting the web site would know there is a frames-only version and a non-frames version of the web site. I prefer making invisible the fact that a web site is frames-only or non-frames. If the web site is designed properly, this can be transparent to users of web browsers and known only when web browsers are switched or upgraded. Sometimes NOFRAMES tags are used to display text stating the web browser doesn't recognize frames and needs to be upgraded. This may be true, but many times pages like these aren't useful (and sometimes they are impolite or simply rude). If I am told to upgrade my web browser, then I expect to see a link which will lead me directly to a place where I can download an upgraded web browser. If I am told to upgrade my web browser, then I expect some options (Netscape Communicator, Microsoft Internet Explorer, Opera 5.12, Neoplanet, etc.). Proper use of the NOFRAMES tags can enhance the web site experience of anyone visiting a web site which uses frames. Some people have valid reasons for using web browsers which don't handle frames, and if they are simply told to upgrade they can take that suggestion the wrong way and not come back to the web site. Their traffic is just as important as anyone elses, so their web site experience needs to be just as productive as everyone else's. Of course, if everyone in a firm or organization uses the same web browser then NOFRAMES can stay unused. Think of the target audience when making a web site which uses frames. __________________________________________________ Making web pages which use frames is easy. As long as subordinate web pages already exist for each frame, the main web page containing the frames is nearly trivial. Frames can be arranged in rows, and they can be arranged in columns. Frame sets can be nested within a frame (or the space which would have been used by a frame). Frame sizes can be specified as percentages or as pixel values, and percentages are preferred. A number of attributes can be included within the FRAME tag to control how a web page containing frames looks. So that a web page can be opened by a web browser which doesn't handle frames, content is enclosed within NOFRAMES container tags. The final HTML guide will cover HTML tags used for formatting text. While existing HTML knowledge would achieve the same effects, it is good to know about the other HTML tags so they can be used to save effort and time. The PRE tag was introduced in the HTML guide for tables. There are many more text formatting tags where that came from. Let's see what they are.  |
| Write the first comment on this review! |
|
Ads by Google
|
