Featured Templates
Home
HTML and CSS
Tutorials
Advanced Formatting
Added: Oct 03, 2005 Rating: Less than 3 votes yet
Level: Beginner Software:
Row Frames
- Making frame rows is essentially the same as making columns. Let's look at an example of creating a row-based frames document. Specifically, let's divide a browser window into two rows.
- Since this is best explained by example, consider the following code:
<HTML>
<HEAD>
<TITLE>Frame Row Example</TITLE>
<FRAMESET ROWS = "100, 100">
<FRAME SRC = "http://www.eff.org"
NAME = "topFrame">
<FRAME SRC = "http://www.extropia.com"
NAME = "botFrame">
<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.
- Suppose we did not want to hardcode the frame size. The ROWS attribute also takes percentages as values to allow for a percentage-based sizing. Thus, the previous code could be rewritten as the following:
<HTML>
<HEAD>
<TITLE>Frame Row Example</TITLE>
<FRAMESET ROWS = "50%, 50%">
<FRAME SRC = "http://www.eff.org"
NAME = "topFrame">
<FRAME SRC = "http://www.extropia.com"
NAME = "botFrame">
<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 rows. One row 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 Row Example</TITLE>
<FRAMESET ROWS = "25, 25, *">
<FRAME SRC = "http://www.eff.org"
NAME = "topFrame">
<FRAME SRC = "http://www.extropia.com"
NAME = "botFrame">
<NOFRAME>
Well, if you do not have a frames capable browser,
this whole section will be meaningless. :(
</NOFRAME>
</FRAMESET>
</HEAD>
</HTML>
|
Complex Frames
- In real life, most uses of frames involve a combination of rows and columns. Thus, you will want to be familiar with a more complex frame structure design.
- In this example, you can see that there are three frames divided into two columns. The column on the left is a viewer frame used for reading web site information. The column on the right is divided into two rows and is used for navigation. The top row is a clickable image that points to the homepage. The bottom row is a table of contents for the site.
- Here is the code:
<HTML>
<HEAD>
<TITLE>Selena Sol's Public Domain CGI Script
Archive and Resource Library</TITLE>
<FRAMESET COLS = "141, *" BORDER = "0">
<FRAMESET ROWS = "97, *" BORDER = "0">
<FRAME SRC = "home.html" SCROLLING = "no">
<FRAME SRC = "toc.html" SCROLLING = "auto">
</FRAMESET>
<FRAME NAME = "main"
SRC = "/Scripts_archive/index.cgi">
</FRAMESET>
</HEAD>
</HTML> |
- Notice that we will follow design logic very similar to the tables within tables idea. In this case, we will set a frame of rows within a frame of columns.
Exercise Eleven
- Okay, now take about 15 minutes to play with some frames
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: