Kushika 0 Report post Posted February 3, 2006 -------------------------------------------- INTRO -------------------------------------------- [quote name='http://forums.xisto.com/no_longer_exists/ you have a website, and you would like add a menu / navigation bar on every page? Well, there are a few options, you can use ugly frames (which many people don't like) or you can add a navigation bar on every page. But if you would like to change it, you have to edit ALL the pages. Which is OK if you have a 5 page website, but once it starts to grow and you get 15 or more pages, it can prove to be quite the hassle! (I did the mistake of doing that ^^') BUT! I can tell you a little secret of mine..... I can teach you a magical amazing thing, that lets you edit once file and it will instantly, magical show up on all of your pages! What is this you ask? Well, it is SSI, Server Side Includes. (It is an alternative to the PHP include - if you don't know what that is, well it doesn't matter). BUT you cannot use SSI with things that generate the HTML code for you, such as 'simple sitE builders' You have to use 'solid HTML' and know how to edit HTML files -------------------------------------------- STEP BY STEP -------------------------------------------- 1. MAKE SURE YOUR HOST SUPPORTS SSI! If you don't know have a look at their 'features' page, or their FAQ or contact customer support. 2. First of all you need to build a layout with a navigation menu, and a space for content. 3. You need to separate the HTML: Take the HTML from the top of the page to your content, put it into a file called 'top.txt', make sure you include everything, including the <html><head> tags. Now, take everything from the end of your content to the very bottom, right to the </html> tag. Put it into a file called 'bottom.txt' Confusing? Well here is a little diagram of a layout. top.txt should contain only the BLUE bits of the diagram the banner and left navigation. bottom.txt should contain the PINK bits, the right navigation (if any) and footer (if any). 4. Now we get onto the fun stuff, the SSI. Make a page named whatever.shtml and add the following code, editing where needed. On the content page add <!--#include virtual="top.txt"-->[HTML of content here]<!--#include virtual="bottom.txt"-->(if you have no right navigation and footer you may delete the above line). -------------------------------------------- EDIT THE MENU / NAVIGATION BAR -------------------------------------------- Just edit top.txt or bottom.txt, and the effect will appear on all of your pages which have the SSI code. Simple eh? -------------------------------------------- TROUBLESHOOTING -------------------------------------------- 1) Make sure your host does support SSI, also, read your host's FAQ / contact customer support, some hosts, such as 1asphost.com, need you to change the URL to '/username/top.txt' 2) Make sure the SSI code is correct....mistakes are very easy to make 3) DO NOT include any SSI code in top.txt or bottom.txt 4) Make sure the page with the content has the extention of .shtml 5) If your the top.txt and bottom.txt files in different directories than the content, then you need to change the code to: <!--#include virtual="/yourdirectory/yourfile.txt"--> 6) All of the pages, including top.txt and bottom.txt must be on the same server or webspace. -------------------------------------------- ADDITIONAL NOTES -------------------------------------------- I am the owner of Pichu's World; the tutorial is also posted on that site, however, I am the rightful owner of the information. If in doubt, go to the contact section and e-mail the owner which is me. I can then e-mail you back with verification that I am the rightful owner and that I posted this. Notice from twitch: I have approved this tutorial, but in future remember that any content copied, even if it is your own work, requires that you have used quote tags. You shouldn't be given credit twice for doing one thing. In future, I will simply remove your whole thread. Share this post Link to post Share on other sites
