Tutorial: 2. Changing text-based menu options
Level: Intermediate. Published on 6 January 2003 in How to change the menu options
If you're using a PageKit with text-based menus, read this tutorial to learn how to edit them.
If you're working with one of the PageKits that uses HTML text menus, you're in luck, as these are the easiest type to change. You don't even need to use Photoshop or Paint Shop Pro!
In this example, we'll edit the Hi PageKit and change the menu option called "guestbook" to "products":
If you would like to work through this example, unzip the Hi PageKit files and PSD Zip files to your hard drive somewhere (you can download the PageKit and PSDs here).
1. Open the HTML file in a text editor
The first step is to find the HTML source file for this page and open it in your favourite text editor. (You can, of course, use a page editor such as Dreamweaver as well, if you prefer.)
Find the hi folder that you created when you unzipped the hi.zip file. In there, you'll find a couple of HTML files, index.html and page.html:
Open index.html in your text editor or Web page editor. If you're on Windows and you're not sure what to use, we recommend WordPad (Start > Programs > Accessories > WordPad). This editor is better than Notepad because it handles line breaks better when editing files that were created on Macs (as a lot of the PageKits were). For Mac users we recommend TextEdit or TextWrangler.
2. Change the "guestbook" menu option
Once you've opened index.html, scroll down until you see this line:
index.html
<TD><B><a href="page.html">guestbook</a> | </td>
This is the line that controls the "guestbook" link on the page. Change the word "guestbook" to "products":
index.html
<TD><B><a href="page.html">products</a> | </td>
Also, assuming that your "products" page was called products.html, you'd want to change the link from the generic page.html to products.html, as follows:
index.html
<TD><B><a href="products.html">products</a> | </td>
3. Save the file and check the results
Save the index.html page to save the changes you just made, then open index.html in
your Web browser (you can often do this by just double-clicking on the file's icon):
You'll then see that the "guestbook" link has changed to "products":
Congratulations! You've now customized your first menu option. You should now be able to change the whole menu to suit the requirements of the website you're building. Good luck!
The end
That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!