Copyright Michael Karbo, Denmark, Europe.
Chapter 24. A frame set
Now you have made a number of home pages. Why not put them all together and give them a joint introductory page?
You will do that now, and that is done using frames.
What are frames?
Frames are a somewhat controversial concept in web design. We are talking about a design where more than one independent HTML document can be visible simultaneously. Typically the screen is divided in two or possibly more sections, in which different documents are shown. The most common version of frames consists of a vertical ”window” in the left side of the screen that is used for navigation:
Figure 55. A typical frame. The links in the left window control the content of the right.
The user experiences frames like a home page, but actually they are ”screwed together” from different HTML documents.
Frames are controlled by a master file that among others defines the size of the windows. When the user wants to see a home page that consists of different frames, the master file opens. You will see all of that soon.
Some ”experts” are very much against the use of frames, which also have certain problematic built-in side effects, among others relative to the Internet search engines. Personally I am very enthused about frames that can be used as excellent navigation tools. I use them in all my own home pages.
If you are careful and stay with a simple frame set, the HTML code is quite easy to control. And that gives great advantages!
Create a master file
You are going to make a frame set for your home pages. You will need three HTML documents: index.htm (that defines the frame set) plus left.htm and start.htm:
So the master file is named index.htm, and that opens a frame set that (to begin with) consists of the two other HTML documents (left.htm and start.htm). Later I will go in depth about all of this, but let us start by creating the master file.
1. Open NoteTab.
2. Close all open HTML documents by pressing Control+Shift+F4.
3. Then open a new document with Control+n. Save it right away in the folder HTML (not in the folder site1) under the name index.htm:
It is important for the exercise that you save index.htm in the right place, and that is in the folder ”above” page1.
4. Now you have an empty HTML document. We need to fill that with the code that can create a frame set. On the home page for this book you can find the link The frameset. Click on it.
5. Then select the 11 line code and make a copy:
6. Insert the copy in index.htm and save the file.
7. Now you can test your frame set; hit F8, and check the result in the browser. For the time being it does not look very pretty:
Figure 56. Here the browse shows a frame set that does not work.
Understand the frame set
Were you disappointed about the result in Figure 56? Pretty it is not, but there is still some system in it. Notice that the screen image is divided in two windows. A beam separates the two windows:
That is because of the code in index.htm. It defines that the screen shall be divided in two frames, and that the left shall be 145 pixels wide. The right shall have a width of 620 pixels. You can see that here, where the code FRAMESET defines the two vertical windows:
In both windows you see an error message (”The page can not be shown”), and what causes that? Well, if you look again in the code for the index file, then it ”calls” the two other HTML documents. That is done with the two FRAME codes, where the parameter SRC specifies the individual file to be inserted in the window:
Since the two HTML documents left.htm and start.htm do not exist, you get two error messages like in Figure 56. But you do not need to study the code that creates the frameset in detail. It just has to work, and it does.
Now you need to create the two pages so the frameset works.
1. Open the document template2.htm, and save it twice, first as left.htm and then as start.htm. Both files need to be placed in the same folder as index.htm.
2. Reopen the file left.htm, so you have all three frameset files open in NoteTab:
3. Now you
are going to work in the document in start.htm, so make that active. Enter
this heading there:
4. Change the heading code from H1 to H2 (remember both start- and end code).
5. Then click on left.htm in the Quick list panel in the right side of the screen to activate this document:
6. Delete the heading codes and type in stead the text My pages.
7. Save all documents. You do that easiest by pressing Alt f a. That activates the menu File à Save All.
8. Then shift to the index.htm document, and press F8 to see it in the browser. Now the frameset works; both documents are entered side by side. You can not see the border between them, but it is there.
the background color in left.htm to:
10. Check the result in the browser again. Now you can see the two HTML documents clearly.
11. Now to try to insert a picture or some more text in the document start.htm, so it gets more interesting.
Figure 57. A frameset consisting of the two documents.
On with the project
Now your frameset is ready for use. You need to understand that start.htm is a start page that is read when the frameset opens. The idea is that you place links to your various pages in left.htm. When the user clicks on them, the corresponding documents are opened in the right window instead of start.htm.
1. Start by entering this code in the HEAD section of the document left.htm:
This code causes the documents selected in the left window (by clicking on links) will always be shown in the right window.
2. You are going to insert the first link in left.htm. Use the clip hl1 from the Autotext library.
3. That inserts a link code that you need to adjust to make it look like this:
Notice here that the reference to the HTML document fisharegoof.htm also includes the folder name page1. That is necessary, since the fish page is in another folder than the frameset.
4. Test the link in the browser. If you have done it right the result will look fine when you click on the link. The fish page replaces start.htm in the right window:
5. Now copy the code for the link and insert the copy three times in left.htm. Adjust the three links so they refer to the HTML documents: raphael_css.htm, zebra.htm and venezia.htm, that all are placed in the site1 folder.
6. Use BR codes to separate the four links. The result should look like this in the browser:
7. Now you also link to the animals hippopotamus, goose, horse, leopard and ostrich, that are all found in the HTML document animals.htm, which is placed in the animals folder.
8. Start with the hippopotamus. Insert again a copy of the code to the link and correct the reference to animals/animals.htm#hippo.
9. Notice that the HTML document animals.htm is in the folder animals, and that the reference goes to the documents bookmark #hippo. Both appear from the code, can you see that?
10. Repeat the operation four times as you insert links to the animals Goose, Horse, Leopard and Austrich. If you forgot what the bookmarks are called, then check in the document animals.htm.
11. Save the document and test the frameset in the browser. All links must work and there has to be BR codes between the individual links!
12. The only thing lacking is a link to the start page. Make that yourself; it needs to be in top of the document left.htm like here, where it is followed by a P code:
13. Save the file and test the home page again. Now the technical is ready; the page works, there is navigation to all your home pages from the left panel.
A quick shortcut to your page
Now you have made smart ”entrance” to your home pages. If you just open index.htm in the browser, you have access to all the home pages. So make a ”smart-button” that opens index.htm:
1. Open Windows Explorer. You could do that with keyboard shortcut Windows+e.
2. Find the folder C:\HTML (or the folder where you have saved your HTML documents), and select that in the left panel.
3. Then select the file index in the right panel:
4. Now drag this file down to the quick start line (to the right of the start button). While you hold the mouse button down find a space for it; you can see its position like a black vertical beam. Release it:
5. Now you have made a shortcut (like a smart button) to the file index.htm. It can be activated with a single mouse click:
6. Try that – that opens your page in a new browser window. When you work with the same home pages, it is very practical to have easy access to open them.