Site hosted by Angelfire.com: Build your free website today!
dropdown
Navigate Here
Mini-tutorial
This is called a mini-tutorial, because I don't have time to explain the use of javascripts and CSS from the beginning. If you have experience with HTML and adding (not writing) scripts, you should be able to figure out what everything is used for. A good rule of thumb for beginners is to start out small, change only links and names of links and change only one thing at a time so you know what you did if the page crashes. The dropdown menu code is from dynamicdrive.com.

There are 7 uses of Javascript in this template in addition to Cascading Style Sheets (CSS):
  • Dropdown Menu (also uses CSS for placement)
  • Navigate Here button mouseover on index pages
  • Preload so that the Navigate Here mouseover works immediately
  • Date
  • Auto open/close pop-up window
  • User open/close pop-up window
  • Status text on non-index pages
If you are looking for backwards compatibility in older browsers, this is not a good choice. This template requires Netscape and IE 4+. I haven't tested it in other browsers, so I don't know how/if it will work in them.

There are three index pages:
  • index.html - the first one you saw with the text on the bottom and pop-up ad
  • index2.html - this one has no text on the bottom but still has the pop-up ad
  • index_no_popup_ad.html - no text on the bottom, no pop-up ad
The pop-up add is called ad2.html. You can edit this to say whatever you want. It stays up for a few seconds and closes on it's own. If you don't want to use a pop-up add, use the index_no_popup_ad.html template as your index.html file.
If you want to use the pop-up ad, either use index.html or index2.html as your main page.

On the index files, if you click on the ©, another little window opens that can be closed by clicking on close in the window itself. The file in the little window is called ad.html. It can also be edited to whatever you want in it.

To use this template, change the links at the top of the page:
menu1[0]='<font face=Arial size=2><b><a href=mini_tutorial.html>Help Page</a></font><br>'
Unless you know javascript, only change the the name of the HTML file and the name of the link. I've highlighted these in pink above. Do not add quotes( " ) before and after the name of the HTML file or the javascript will not work.
You can also change the name and size of the font or get rid of it all together. These are highlighted in yellow.
Change or get rid of the links below the same way, except you can leave the quotes( " ) in since they aren't in javascript.

Using the Blank Page Template (blank.html):
After your vistors enter your site, you will probably want them to go to a page like this one as opposed the opening HTML with more graphics. I've provided a blank template for you to use. If you open blank.html in your HTML editor, you will see this HTML code:
<!-- Start your text below -->
Use this page as a template for your additional pages.
<!-- End your text above -->
Simply replace the text between Start and End with whatever you want to say.

The javascripts make this a little complicated, but they also make it more interesting, too!

Download dropdown.zip to use this template. It contains all of the files and graphics you've seen here.
dropmenu | templates | free! area | home webmaster
OutWorld Arts