Featured Templates
Home
HTML and CSS
Tutorials
Advanced Formatting
Added: Oct 03, 2005 Rating: Less than 3 votes yet
Level: Beginner Software:
Frame-Based Pages
- With the introduction of Netscape Navigator 2.0 came a whole host of new HTML tricks that really spiced things up. Perhaps the most interesting, but poorly utilized feature was the frame.
- Frames allow you to work with the browser window itself. Not only can you clone other windows for your usage, but you can also divide up a single window into separate frames that can each access separate HTML pages.
- Go ahead and check out the Selena Sol Scripts Archive that uses frames in its navigation.
- Notice first that we popped up that web page in a separate window. This new window is fully featured and even has its own history list.
- Now, on the Scripts Archive, try navigating around the site using the table of contents frame on the left. Notice that what you do in the table of contents frame guides what happens in the main frame. What's more, the table of contents frame does not get replaced. It is always there to make sure you do not get lost in the fairly complex site displayed in the right hand frame.
- So how is this done?
Creating Popup Browser Windows
- The first thing we should get under our belts is the process of creating a separate window.
- Really, this is incredibly easy and simply involves an extension to the <A> tag.
- Specifically, in Navigator 2.0, Netscape rallied behind the TARGET attribute that would instruct the browser to create a new frame/window as a separate target for an HTML document.
- Thus, to open up another browser window and display the Scripts Archive in the last section, we simply used the following code:
| <A HREF = "http://www.extropia.com/Scripts" TARGET = "ResourceWindow"> |
- So the HREF part should be familiar by now. But what is this "ResourceWindow" thingy?
- Well, every window that pops up from your browser is named so that you can always reference it later. In this case, we have named our second window "ResourceWindow". The name does not matter, it could be "GoochySmoochy" if you wanted. All that maters is that you know the name and that when you wish to modify the contents of that window, you call it by name with the TARGET attribute.
Single Window Frames
- Popup windows are cool, but single-window frames are what really took off with Netscape Navigator 2.0
- Single-window frames allow you to divide up a single browser window into separate browsers, each able to load unique HTML documents and each named and targetable by each other.
- You have already seen a frame-based page in the introduction, so we won't waste any more time, and get right into the details...
- Frames are specified using the <FRAMESET>, <FRAME> and <NOFRAME> tags and various attributes for each.
- The table below outlines the functions of each
<FRAMESET> - </FRAMESET>
The main frame definition tag. This tag goes within the <HEAD> element.
ROWS
<FRAME>
Defines the size and number of rows using a comma-delimited list of height values either in absolute pixels or as a percentage of the total usable area.
COLS
Defines the size and number of columns using a comma-delimited list of width values either in absolute pixels or as a percentage of the total usable area.
Defines a single frame within a frameset. There is no closing tag
SRC
<NOFRAME> - </NOFRAME>
Defines the HTML source document that should be loaded into a frame. It takes a URL just as the HREF attribute in the <A> tag.
NAME
Specifies the name that will be used to identify the frame by other frames or other windows. This can be any text string, but try to make it meaningful such as "table_of_contents_frame". Several key names have been reserved. These are _blank, _self, _parent, and _top. So don't use these unless you mean to reference those particular frames
MARGINWIDTH
Sets a horizontal margin of the given number of pixels.
MARGINHEIGHT
Sets a vertical margin of the given number of pixels.
SCROLLING
This attribute is used to manipulate a scroll bar within the frame. It can be set to YES, NO, or AUTO. If it is set to yes, there will always be a scrollbar. If it is set to no, there will never be a scrollbar. And if it is set o AUTO, a scrollbar will appear only when needed (ie: the user resizes the frame)
NORESIZE
This attribute prevents the user from resizing the frame.
Specifies content in case the browser viewing the document does not support frames. It is a very good idea to make sure that your site navigation works with or without frames.
Column Frames
- Okay, let's look at an example of creating a frames document. Specifically, let's divide a browser window into two columns.
- Since this is best explained by example, consider the following code:
<HTML> <HEAD> <TITLE>Frame Column Example</TITLE> <FRAMESET COLS = "100, 100"> <FRAME SRC = "afraid_icon.gif" NAME = "afraidFrame"> <FRAME SRC = "asterix_icon.gif" NAME = "asterixFrame"> <NOFRAME> Well, if you do not have a frames capable browser, this whole section will be meaningless. :( </NOFRAME> </FRAMESET> </HEAD> </HTML> |
- On the web, the previous code would like the following figure. Notice that we used two images for our frames, but we could easily insert HTML documents or anything else that can be referenced with HREF.
- Suppose we did not want to hardcode the frame size. The COLS attribute also takes percentages as values to allow for a percentage- based sizing. Thus, the previous code could be rewritten as the following (notice we include one full URL as a frame and a relative link as the other):
<HTML> <HEAD> <TITLE>Frame Column Example</TITLE> <FRAMESET COLS = "50%, 50%"> <FRAME SRC = "http://www.eff.org/" NAME = "lFrame"> <FRAME SRC = "relative_link.html" NAME = "rFrame"> <NOFRAME> Well, if you do not have a frames capable browser, this whole section will be meaningless. :( </NOFRAME> </FRAMESET> </HEAD> </HTML> |
- Finally, you can use an asterix to specify "anything else" as a sizing component. Thus the following code would create three columns. One column would be 25 pixels wide, one would be 25 pixels wide, and the third would take up all the remaining space depending on how the user resized the browser window.
<HTML> <HEAD> <TITLE>Frame Column Example</TITLE> <FRAMESET COLS = "25, 25, *"> <FRAME SRC = "http://www.eff.org/" NAME = "lFrame"> <FRAME SRC = "relative_link.html" NAME = "rFrame"> <NOFRAME> Well, if you do not have a frames capable browser, this whole section will be meaningless. :( </NOFRAME> </FRAMESET> </HEAD> </HTML> |
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com
10 Random HTML and CSS Tutorials :
10 Random Markuptutorials.com Materials: