|
Building Web Pages From Ground Zero
By Professor Nibble ã Nibble University 2000-2007 |
|
|
HyperJump to
Simple Frameset Rows, Simple Frameset Columns, Frames With Rows & Columns, Frameset Attributes, Targeting Frames, No Frames, Assignments
Lesson 11 - CREATING FRAMES |
|
|
Have you ever seen a web page that was divided into smaller windows? Often you will see a table of contents along the left, a heading across the top and then the third and largest window contains the main data. These windows are called frames. Each frame behaves independantly from the others, so it's like having more than one web page visable at one time. Some people just love web pages with frames, and others hate them. The thing I like best about using frames is having a hpertext Table of Contents (TOC) visable at all times on a web page. That way I don't have to jump back and forth from my pages to the Table of Contents. I know, I could put a TOC on each page, but if you have a long TOC it doesn't look that great. The thing I hate about frames is giving up good real estate that could be used for data and images. If you're using a 15 inch monitor, you need all the viewing area you can get! I especially dislike it when the web page architect forces you to stay in a frame when you hyperjump to other web pages that are not designed to be viewed in a frame. I go balistic when I'm stuck in a multiframe web page and another multiframe web page loads into the first frameset. However, using frames is sometimes a good way to go, and if you design your web pages properly, you can help people like me avoid frustration. OK. Now that I've set the stage, let's light this candle. |
| TOP |
The first page of a web site that contains frames is an html file that has no actual content. The source code on this initial page simply defines what your frames will look like. It is called the FRAMESET. There are no <BODY> tags on the FRAMESET page. You should give each frame a name and load an html file into it. You must also define the dimensions of each frame and what attributes it should have. Building frame pages is not for the weak of heart, but the best way I've found to make sense out of this stuff is to study actual examples and then try to create something similar. The first example we'll look at has 3 frames, and each frame will be a row. We'll call the top row "top", the middle row "main", and the bottom row "bottom". This is what the source code looks like:
<HTML> Now that you've looked at the source code and the result, I want to point out a few things. Look at the line of code that sets up the row widths. We have "50,*,50". The first number is for the width in pixels of the first frame - the top. Then there is an asterik. More in a second about that. The third value is also the number 50, and it defines the bottom frame. The asterik is a wildcard. It is used like this. The top and bottom frames are defined with a width in pixels. The second value - * - means that everything left over on the screen will be the main frame. If we had row values of "*,50,50", the bottom two frames would be 50 pixels wide and the top frame would take up the rest of the screen real estate. If you say nothing about scrolling, a scrolling bar will only appear when necessary. Now, that's not so tough, is it? |
| TOP |
If you choose to layout your frames in columns rather than rows, you could do something like this:
<HTML> |
| TOP |
If you choose to layout your frames in columns and rows, you could do something like this:
<HTML> Because we want rows and columns, we need to have two different framesets - one for rows and one for columns. The heading row goes all the way across the screen and is 75 pixels wide. The second row will take up the rest of the screen and will be divided into two columns. We put an asterik to define the second row. The columns have a 150 pixel left area with the remaining screen taking up the second column. Remember each frame must have a name and an html file associated with it. The best way to get the result you want is to play around with the code. Important - Each frameset should be closed when one is nested inside of another. |
| TOP |
You can adjust a frame's margins by using MARGINWIDTH=w and MARGINHEIGHT=h at the end of the FRAME NAME tag and before the closing >. The "w" and "h" should be in pixel numbers. Play around with this to see how it works. If you wish to prevent a scrollbar from being placed at the side or bottom of your frame, place a SCROLLING="NO" attribute at the end of the FRAME NAME tag and before the closing >. If you wish to hide the frame borders, put a FRAMEBORDER=0 inside the top-most FRAMESET tag before the closing >. (To include a frame border on one of the frames but not others, put FRAMEBORDER=1 inside the desired FRAME or FRAMESET tag.) |
| TOP |
When you create your frames, it is very important that you use targeting. Let me give you an example. Let's say you have a three frame web site with a heading row, left Table of Contents, and main frame window. Your Table of Contents consists of links to other parts of your web site. When a visitor to your web site clicks on a link, the page will be loaded into the narrow left frame unless you do something to prevent this. I'm going to cheat a little and use one of my files from example three. Here is an example of bad coding:
<HTML> Our Frameset example above is just fine. Our bad coding comes in the left Table of Contents frame. Take a look at it and then view the example.
<HTML> |
| TOP |
This is the correct coding and example:
<HTML> The name of the main window is MAIN. My link needs to target the MAIN window so the page will be loaded into it. Let's look at something else. Take a look at my BACK link that I added to the left Table of Contents frame. It is very important. This is the line of code you should focus on:
<P><A HREF="html11.htm#target TARGET=_parent>BACK</A>
The BACK link will take us back to the file - Html11.htm. I don't want the Html11.htm file to load at the beginning. I want to go back to the section on Targeting, so I add #target to go to the anchor (bookmark) entitled target. It just so happens that this anchor is named target. It could be anything.
Now look at the other attribute I've added to this BACK link. It is called the TARGET attribute. When using frames, this attribute is extremely important. You already know we need to use it to make sure the web page is loaded into the correct frame. We also need to use it to get back to our HTML lessons, which is a NOFRAME web site. We have some handy options here:
The option I used was _parent. It will open the link into the current window, but since the link comes from a NOFRAMES web page the frames disappear. _top will open the link in the current browser window but independently of the rest of the frameset to which it currently belongs. _self will open the link in the same frame that contains the link. _blank will open the link into a new, blank window. You can experiment with these different options to get a handle on how they can be used.
|
| TOP |
If you want to be really nice to those visitors who refuse to use one of the newer browsers that support frames, you can add a <NOFRAMES> tag after your last FRAMESET. Between the <NOFRAMES> </NOFRAMES> tags you place <BODY> </BODY> tags. Include data between the <BODY> tags for those people who cannot read a frames web page. You could either say "Sorry Charlie, this web site uses frames.", or you could provide a series of pages that do not use frames. Some people don't like frames, so you might want to provide your information in a frames and noframes version, and create a link between the body tags on your frameset file that steers them to your noframes pages.
<HEAD><TITLE>NoFrames Example</TITLE></HEAD> |
| TOP |
Adjust frame example number three above so your left Table of Contents frame runs along the entire left side of your screen. As it is now, it starts below the heading frame. Remember, you will have four files when you are finished - one for the Frameset and three for the html files that go into your three frames. (You may use any of the html files you've previously made for your three files.) Print out your source code and result to hand in. I only need the Frameset source code. No need to print out your three html files. |
| TOP |
Use your work from assignment two lesson 8 - Favorite Dog Breeds, and create a three frame setup. The title "Favorite Dog Breeds will go in the heading frame. Put the Table of Content frame along the right side of the screen. Use one of the doggie backgrounds for the Table of Contents. You may use a doggie or solid color background for the heading frame. The remainder of the screen real estate goes to the main data. Give each of the three frames names of your choice and make sure the data is always loaded into the main (largest) window frame. Create a link from the bottom of your Table of Contents to your NO Frame version of Favorite Dog Breeds. This will give the viewer an option. Print out a copy of your source code and show me your results in a browser. |
| Table of Contents |