Giz Gears: Design Area - Hints and Tips

~~~~~~~~~~
Visit Esta's
How to Design
A Website Series
for more tips
~~~~~~~~~~

Updated: 12/11/2004 12:02:03 PM (Broken Link? Report It Here)

Design Area

What is the purpose of the Design Hints and Tips area?

Many times one has enough knowledge about a subject to be beyond the need of a tutorial but not enough to know exactly how to accomplish a certain task or reach a certain goal. Often one finds himself needing to learn how to do just one small thing instead of a receiving a full course instruction. And then there are times where you learn something interesting and useful just by browsing around; but without really intending to learn.

That's the purpose of the Design Hints and Tips area - to teach you something small, but interesting and useful. To show you how to do just one thing at a time and help you reach your goal. More importantly, to provide you the opportunity to learn something new each day; which is a goal most people envision and strive for.

Membership requirements for Giz Gears.

This interactive area within Giz Gears does not require an active Giz-Net Network membership in order to participate.

Design Tidbits

Working With CSS Working With Forms Working With JavaScript Working With Tables

Protect Your Source Code with Body Tags

There is no fool-proof way to prevent others from taking your source code. However there are ways to make it hard to get. Sometimes simple deterrents are enough of a frustration to stop visitors from viewing and stealing your valuable code.

Use the below tidbits scripting code inside your webpage's <BODY> Tag and see what they accomplish for a little added security:

Disable Right Click to prevent viewing your source code:
<body oncontextmenu="return false">

Disable Mouse Dragging to prevent highlighting text on your webpage:
<body ondragstart="return false">

Disable Keyboard Use to prevent selecting/copying:
<body onselectstart="return false">

Note: I added the last two tags to this webpage so you could see the effects. I did not load the right-click tag though because I am using a different style of protection code.

Using Comments in HTML - Contributed by Jean Grey!- Added 28 Nov

Add comments to your HTML to help guide you later. When first inputting your HTML code, the code may make sense. However, later on it may not make sense when you are trying to edit it. The comments will help you remember why you inputted the code in the first place.

You would input a HTML comment using greater then/less than, hyphens and exclamation point symbols. For example:

Font Tag Loses Its Value? - Contributed by Jean Grey!

The rumors on the Internet are that the tag in HTML is no longer the approved standard. This means that newer browsers at some point will no longer parse this tag. So how do you set your font data in HTML then? Consider using CSS styles instead. Here's how:

Or a simpler coding style -

Text Background Highlighting - Contributed by Jean Grey!

To highlight the background of your text, type in this Span Tag:
The background is red!

The background is red!

Turn Off Internet Explorer's (6.0) Image Toolbar - Contributed by AquaMan!

IE 6 has a little toolbar that appears when someone places their mouse pointer over an image on a webpage. The tool bar offers some convenience, but it slows IE down a little and can get in the way of other images. To turn it off for web pages on your website, you can:

1. Insert the code below between your <head></head> tags to turn the image toolbar off for the whole page.

2. Insert the code below on each image where you don't want the toolbar to appear:

Align Images to Absolute Vertical Center of Text

To align your images vertically with your text, add the following code to your image tag:

<img src="image.gif" align="absmiddle">

For example:

This is how an image looks when it is not aligned vertically.

This is how an image looks when it is aligned vertically.

Eliminate Interference and Distractions from Your Webpage - Contributed by Mystique!

People want to find what they are looking for without interference and as quickly as possible. Flash intro pages, slow-loading graphics or even sound files often cause interference for the visitor. Many times they serve only to distract visitors from their objective of finding the right information. These distractions and interference often result in failure at meeting your objective of delivering information to the visitor; so try to avoid them if at all possible.

How Important Is Your Opening Paragraph (Introduction)? - Contributed by a Forum Guest!

Have you ever visited a website, read their introductory paragraph and still have no idea what their website is about? Believe it or not, the attention span of surfers is extremely short. If they don't pick up enough information quickly to make them decide to continue browsing your website, they will leave in search of another website.

Your opening paragraph should follow the rules that journalists use. Try to capture the 5 W's into your opening paragraph: Who, What, Where, Why and How. Answer these questions quickly, and let the surfer know exactly what's in it for them and chances are they will stay around awhile.

Browser Status Bar Messages - Contributed by Jean Grey!

Display a message in your browser's status bar by using the link hover function. Just type your code as follows:

<a href="index.htm" OnMouseOver="self.status='Go to my homepage!';
return true" onmouseout="self.status=''; return true">Visit this page.</a>

Move your mouse over this link to see the message "Browser Status Bar Message Example" appear in your browser's status bar.

Working With CSS Working With Forms Working With JavaScript Working With Tables

Contributions for Giz Gears.

If you have a great web design source you would like to share, please let me know! I give credit for all sources of contributions; links, tutorials, downloads, hints, tips, etc. If you would like to see other pages added to this area, please let me know either through email or through the Forum.

Top of Page