Maestro Awards - Tutorials: Site design Tips

Tutorials: Website Design Tips

Handy and useful web design tips.

Useful resources...

Find a collection of most resourceful and useful sites below:


	Website Awards - How to Win Awards
	Webmasters Den - The webmaster's resource directory!
	What is Copyright - Do you need to know what copyright protection is all about?
	Award Scoop - All you need to know about Web Awards. Includes history, timeline and useful information about Web Awards.
	Award Sites! - Award and Design related articles and resources.

Free Downloads


	Worksheet and Revisions - plus free tutorials!
	Awards Organizer - Free templates to use to build your Awards section of your homepage - plus tutorials!

Book about Web awards!

Order the first-ever book written about Web awards today! First 1000 will receive a signed copy of the book!

HOW ABOUT YOU?
Want to see your tips here? Send them right away

1. Fix big gaps in Bulleted Lists

When you use a bulleted list, the <UL> element includes a default top and bottom margins, often using more than one line space. This phenomenon is widely experienced in Netscape and Opera browsers.

To fix this and to keep the bulleted list in close association with the rest of the text, you need to set values for these margins as explained in the example below:

<P STYLE="margin-bottom: 0pt">Listed are the following lines:</P> <UL STYLE="margin-top: 5pt"> <LI STYLE="font-size: 10pt">Listed text 1</LI> <LI STYLE="font-size: 10pt; margin-top: 3pt">Listed text 2</LI> <LI STYLE="font-size: 10pt; margin-top: 3pt">Listed text 3</LI> </UL>

2. Prevent popup menus appearing over images in IE 6

Now here is something that is as irritating as usual advertisement popup?s! A popup menu appearing if you scroll over an image, allowing others to save your images!

Here's how you can prevent this from happening. Simply add these two META tags in the <head></head> part of the HTML of the pages you wish to prevent that from happening:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META NAME="MSSmartTagsPreventParsing" CONTENT="TRUE">

3. Change the "grey" submit button to an image...

Ever wondered how some sites changed their search buttons to something more fashionable? Here's the clue! You need to look at your source codes (between the <form> and </form> tags), where you will find a code that looks similar to this:

<INPUT type="submit" value="Search">

To change the default gray button to an image, you will need to change the INPUT TYPE code to something similar to this:

<INPUT TYPE="image" value="search" SRC="images/search.gif">

Note that the INPUT TYPE is now an image, the value remained unchanged and a refer code to the image location was added.

4. Two Java scripts on one page

Are you using 2 JavaScript scripts, where one seems to works and the other doesn't? Here's how...

Make sure the variable and function names are not the same in both scripts - you'll cause numerous script errors if this occurs.
If the two scripts require the use of 'BODY on Load, the best (and easiest way) is to simply do the following :

<BODY on Load="script1(); script2()">

or...

<BODY on Load="window.status='Welcome to my homepage.'; statusscriptfunction(); script1(); script2()">

Note: "onLoad" should be without a space!!

5. Netscape and Tables

When working with complex page layouts using nested tables, it's very easy to forget to close a <TABLE> tag with a matching </TABLE> tag now and then. While Internet Explorer can usually guess where missing tags belong, Netscape is more strict, to the point where it will usually display a completely blank page when a </TABLE> tag is missing.

The moral of the story is to always check your page designs in Netscape. Not only will this ensure that your layout will work with more browsers, but it'll help you quickly spot little mistakes in your code. Think of Netscape as syntax checking tool.

6. Loading Two Frames Simultaneously

If your site has a frameset and you'd like to load two frames simultaneously by clicking on a link, this is how you do it:

In the <head></head> section of your html page, add the following script:

<Script Language="JavaScript">  </script>

And then in the <body> section, just add a link like this :

<a href="javascript:twoframes()">This link will load two frames simultaneously</a>

Previous Tutorial

Tutorials Index page