Example Page 9
For this example we are going to change our menu page into a frames menu page. I have decided to go with the banner and contents frame layout. This is what my frame page layout will look like:
Feel free to choose any other layout you want, but keep in mind that you would have to place at least two, or, in this case, three pages on the screen to get the desired effect. To create my frame layout though, we have to create four new HTML documents. Do not delete or edit your current menu page, since we are going to change our welcome page to allow the user to choose whether they want to view a frame or non-frame version of your personal homepage. Your existing menu page will thus be your non-frame version.
Let's start off by creating our title frame page. For this I'm going to create a page with my title image and a burning torch on both sides, remember that this is accomplished again with a table. Save the document as title.html, and this is what the code should look like:
| Click here to see what the output of the above code would look like. To come back to this page when you've finished looking at the result, close the new window it opened in. |
Next is our menu frame. Create the same menu options as mentioned in Example Page 6. You can align the menu options any way you want, but I put them to the left of my page. In case you can't remember the menu options, they are: "ABOUT MYSELF" - (about.html), "LINKS" - (mylinks.html), "SIGN MY GUESTBOOK" - (guestbk.html) and "E-MAIL ME" - (mailto:contact_tentacle@hotmail.com), with the links in brackets of course. Remember to open the links in the body of your frame page. In my page I named my body frame "contents" so my target has to point to that. Save your menu document as frmmenu.html, the code should look something like this:
| Click here to see what the output of the above code would look like. To come back to this page when you've finished looking at the result, close the new window it opened in. |
For the body of my frame page, I'm going to use my about document. This is the page I created in Example 5, and which I saved as about.html.
And last, but not least, our frame page has to be created to tie all of this together. Create a new document and save the file as framepge.html.
| Click here to see what the output of the above code would look like. To come back to this page when you've finished looking at the result, close the new window it opened in. |
Just a reminder to keep all your HTML and other related files in the same directory on your computer. If you don't you have to make sure your links point to the file with the correct path, otherwise your browser won't find the files and will display an error page.