"65 Instant Web Design Answers", by Milana

Nastetskaya www.instantwebanswers.com
 copyright.html

Disclaimer: The author of this product tried to

present the most accurate information available
to her knowledge at the time of writing. The
author of this e-book shall not be held
responsible for any kind of losses or damages
caused by its use and implementation. If any
legal or technical advice is needed, consult
appropriate professionals.

Please, respect efforts of those who work hard to

bring you their quality info products. No part of
this book may be reprinted, electronically
transmitted, or reproduced in any way without
prior author's written permission under the
penalties of Federal Government Copyright Law.

To report unlawful distribution of this book,

please, contact
[email protected]

65 Instant Web Design Answers © 2001 Milana Nastetskaya

All Rights Reserved

To Mom, Dad and Alex.
Where would I be now...
 "65 Instant Web Design Answers"
www.instantwebanswers.com

INTRODUCTION

Welcome! My name is Milana Nastetskaya and you are about to discover the
webmasters' most wanted design secrets!

This book has been put together out of the many questions I receive in the mail
about web design. Every tip and technique here can be implemented within
minutes. Each piece of code is demonstrated through a real live example on my
web site. If you have never worked with HTML before, go to the Text Editor
section now. If you have modified your web pages in a text editor and feel
comfortable changing your HTML, jump directly to the Text section of the book.

At any time if you are stuck or need help, please, post your question on my web
design forum at http://network54.com/Hide/Forum/90384 and I or another forum
visitor should be able to help you.

Enjoy the ride!

 "65 Instant Web Design Answers"
www.instantwebanswers.com

WORKING EXAMPLES
How To Make 35%
Every Time You Sell Each section in this book is illustrated with a
This and Other Books
from My Catalog! working example. You may see exactly how a
techinque or a script is implemented by
It's easy to become my looking at a real web page that I created just for
partner. Simply use this book.
your free ClickBank
username and put a
link on your web site. To be able to access the examples for each
When someone clicks section, please, go to the address below:
on your link and buys http://www.instantwebanswers.com/examples.
this book from my site,
35% of the total sale You will be asked to enter your name and
will be immediately e-mail address and will immediately receive
deposited into your your password in the e-mail.
account.
If you have any problems viewing the
Everything is handled examples, let me know and I will help you
by ClickBank, the
Internet's most popular promptly: [email protected]
credit card processing
company. If you have a question, comments or
suggestions about this e-book, I would love to
To become my partner, hear from you. In fact, I would love it so much
click here.
that if I use your suggestion in my next book, I
will send you a special gift book - just ask me!
 How to Copy The Codes
Any time you want to copy and paste a
piece of HTML or JavaScript code in this
book, click your Acrobat Reader Text
Selection tool shown on the left. When
that tool is clicked, click and drag through
the section you want to copy and press
Ctrl+C to copy.

To paste this code into your HTML

document, simply open it in Notepad and
press Ctrl+V. For instructions on using
Notepad, please, read the Text Editor
section now.
 toc.html

Table of Contents
How To Use a Text Editor to Modify Your Web Pages
Difference between a text, HTML, and a WYSIWYG web page editors
How to open your Notepad
HTML Document Basics
How to modify your web page in a text editor

Text

How to stop a line of text from wrapping to the next line

How to allow your visitors to see your fonts, even if they don't have them installed
How to pre-format your text so it looks exactly the way you want it

Links

How to make non-underlined links

How to make two kinds of links with different colors
How to open a link in a new window
How to add a subject line, CC and body to the "mailto" link so people who e-mail you
don't have to
"Web Directories for Dummies" Organizing your web site into directories and
discovering linking techniques
How to create random links for my web site
How to display random image links
Can you make a button act as a link?
How to change the appearance of a link without creating a separate style sheet
How to create a link to a picture
How to create a link to a specific spot on the page

Graphics
 toc.html

How to make your graphics download three times faster

How to place a picture and text side by side without using tables
How to create a floating image on your web page (like Geocities)
How you can create your own animated banners and graphics and simple Flash
movies
How to create an animated slide show
How to make a new image appear when a mouse moves over a graphic (image
rollover)
How to make a multi-image rollover
How to make an image so that clicking on different parts of it takes visitors to other
pages (imagemaps)
How to create an image gallery of thumbnail pictures
How to take screen shots of your screen
Free Web Tools Resources

Tables

How to create a box with a border on your web page

How to align tables on the page
How to line up a banner with the rest of the information on the page
How to create a table that has an image as its border
How to design for different screen sizes
How to prevent text on your web page from overlapping with the border
How to make a stylish magazine layout for your web page using tables
How to create an empty table cell
How to change the color of the border in your table
How to create a table with rounded corners

Forms
 toc.html

How to add a simple feedback form to your site

How to change the background color of a button
How to make a graphic act as a button
How can I control the size of the text on a button?
How to make your form look lined up and neat
How to e-mail a form to more than one e-mail address
How can I control the width of a "select" box on my form?
How to have a partially filled out form on your web site
How to make some fields on your form "required"

Frames

How to create simple frames

How to prevent other people from putting your web site in a frame and making it look
like it's theirs
How to hide a long web address

Redirection

How to send your visitors to the address they choose from your pull down menu
How to redirect your visitors to another Internet location automatically
How to check which browser is used and direct your visitor to correct page

Rotation

How to display a different headline every day

Create a banner that rotates depending on the time of the day
Have a different image every day of the week

Marketing
 toc.html

How to add music to your web site

How to allow your visitors to add their e-mail to your mailing list
How to create a pop-up window and control the way it looks
How to create a "friendly" pop-up window and stop annoying your visitors
How to add today's date to your web site
How to make an automatic deadline for receiving free bonuses
How to let your visitors know when you last updated your site
How to make a "warning" or an "alert" box for your web page
How to allow your visitors to bookmark your web site even if they don't know how
How to allow your visitors to "Accept Terms" before viewing your web page

Protection

How to password-protect your web site

How to stop people from stealing your graphics by disabling right click on your
site

Getting Help

Working Examples

Bonus Report - "The Search Engine Race"

More Books...
 "65 Instant Web Design Answers"
www.instantwebanswers.com

How To Use a Text Editor to Modify Your Web Pages

A web page can be created in many different ways. You can use a simple web page
editor and insert text and pictures as if you were using a word processor. You can use a
special program that allows you to insert HTML tags by a click of a button. Or you can
use the most basic text editor and still end up with a great looking web page. Many
beginners start with a graphical web editor (as explained in the first example), yet some
want to learn HTML from the bery beginning and use a text editor.

?¿?
Whatever program you use to design your web page, you can make changes to it using a
simple text editor. You can insert HTML, save your file and view the changes in a
browser (Internet Explorer or Netscape). In this section you'll discover the difference
between the types of programs for creating and updating your web pages. If you are not
very familiar with HTML coding, you will learn enough here to make changes to your web
site. Have no fear! HTML is easy enough for a 7-year old to understand (just ask my
son!)

Difference between a text, HTML, and a WYSIWYG web page editors

A text editor allows you to create any text document. You can copy and paste, print out,
and save your documents. Some text editors even have a formatting capability (bold,
underline, font size). Others have a search function allowing you to find any word in your
document. You will be using a simple text editor to add to or modify your web page here.

Examples of a text editor are Notepad or WordPad (available on any Windows machine) and
TextPad (http://www.textpad.com)

An HTML editor is a program that allows you to insert HTML tags with a click of a button.
For example, if you highlight a sentence and click the "Bold" button, the sentence will
become surrounded by <B> and </B> tags. Such editors will allow you to insert images
and links by selecting from a menu of actions. With many HTML editors you also have a
capability to view your web page the way it will look on the Web.

Examples of an HTML editor are NoteTab (http://notetab.com) and a Page Spinner

 "65 Instant Web Design Answers"
www.instantwebanswers.com

(http://download.cnet.com/downloads/0-10235-100-4641260.html)

A WYSIWYG editor simply stands for "what you see is what you get". With such editors
you don't even have to know HTML (though they do have a way to modify your code
manually). You can make tables, insert images and links, make headings and add a
background image without ever seeing HTML. Many such editors have an ability to
publish your web site to the Web without using a special FTP program.

Examples of a WYSIWYG web page editor are Netscape Composer (http://www.netscape.com)

and CoolPage at
http://download.cnet.com/downloads/0-4003353-100-4538193.html?tag=st.dl.10000-103-1.lst-7-16.4538193

How to open your Notepad

As I already mentioned, all computers that have Windows system come with a Notepad.
To launch it all you need to do is click on
"Start-->Programs-->Accessories-->Notepad" .

To be honest I prefer WordPad, but not all Windows computers have it. If you have it on
your computer, you should be able to open it the same way as Notepad -
"Start-->Programs-->Accessories-->WordPad" If it is not there, to check if you have it
elsewhere on your computer, simply perform a search on your computer by clicking on
"Start-->Find-->Files and Folders" and typing "WordPad" in the search box. If it finds
the program, double-click it to open.

To open a file in either program, click on "File-->Open" on the menu at the top of the
window, and double-click the file name to open it. Just to practice, try opening an existing
HTML document (e.g. contact_us.html or index.html).

If you have never seen HTML coding before, you might be a little overwhelmed at first.
But don't worry: in the next section I will explain the basics of an HTML document . You
will become skilled enough to use the tips and tricks in this book.

HTML Document Basics

HTML is the language of the Web. Every web page you see is made of HTML.
 "65 Instant Web Design Answers"
www.instantwebanswers.com

An HTML document consists of text and tags. Text goes between the tags that specify
how this text will look on the web page. For example, if you put the word "Welcome"
between <B> and </B> tags, it will look bold:

The result of the code:

<B>Welcome!</B>

is

Welcome

Other formatting tags include:

<I>...</I> (Italics )
<U>...</U> (Underlined)
<H1>...</H1> (Large size heading)

...and many others.

In addition to formatting tags, there are HTML tags that define a document structure.
Some of them are :

<HTML>...</HTML> (signifies the start and the end of an HTML document)

<HEAD>...</HEAD> (document header contains title, author, keywords
and description)
<BODY>...</BODY> (contains all the objects of the document , such as
text, links and pictures)

...and tags that create special objects:

<TABLE>...</TABLE> (creates a table on your web page)

<FORM>...</FORM> (makes a form for people to fill out on your web site)
<HR> (makes a horizontal line)

Notice that each tag consists of two parts - opening and closing. An exception here is
the <HR> tag. A few others don't need to be closed either:

<P> (new paragraph)

<BR> (new line, or break)
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Many of these tags can contain extra information about them (attributes). For example,
<BODY> tag can also specify a background color of the page like this:

<BODY BGCOLOR="PINK">

A <TABLE> tag can also specify width like this:

<TABLE WIDTH=80%>

Just two more tags that I would like you to get familiar with: <IMG SRC=...> and <A
HREF=...>

The first one inserts a graphic into your web page. It can be a graphic from your own web
site:

<img src="mylogo.gif">

Or it can be a graphic from another web site:

<img src="http://www.helpingfoot.com/companylogo.gif>

The second tag makes a link to another web page. You can link to a page on your own
web site:

<A HREF="services.html">

Or to an external web page:

<A HREF="http://www.helpingfoot.com/services.html">

These are just a few of the most common HTML tags you'll want to know before starting
the next section. The only reason I am teaching you these basics is so you could
comfortably move around the document when you need to insert a few lines of code. Try
opening one of your HTML documents in a text editor that you chose to use, and see if
you can find familiar tags. In the following sections I will tell you where to insert a few
lines of code to achieve a certain effect or create a certain tool on your web site.
 "65 Instant Web Design Answers"
www.instantwebanswers.com

One last thing I will mention about HTML. When you want to add a comment visible only
to your eyes but not to your site visitors, use these comment tags:

<!--Here is a comment. I will use comment tags when I need to explain a

line of code to you.-->

For more information about HTML, please, visit http://www.htmlprimer.com

How to modify your web page in a text editor

OK, now let's do it together. Start your Notepad or WordPad. Then click on " File-->Open"
and open your web page (e.g. index.html or services.html ). Here is similar to what you
should see:

I am going to change the <TITLE> tag of the page to "Learn To Modify Pages". I delete
everything between <TITLE> and </TITLE> tags and type in a new title. Here is how it
should look now:
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Notice that only the title of the page has changed. You may also change any other part of
the HTML code on the page, but make sure you save a back-up copy under a different file
name just in case.

To see the changes you've made to your page, save it as a text file and make sure to type
.html, as shown below:

Now go back to your browser and open your web page there (before you upload it to the
Web) to make sure it looks the way you expected. Click on "File-->Open" and locate the
 "65 Instant Web Design Answers"
www.instantwebanswers.com

file you just modified. Look at the blue bar at the top: has the title changed the way you
wanted?

This is basically all you need to know to be able to modify your pages' HTML code. Open
it in a text editor, make changes, save it , then view it in a browser.

For more web design tips and techniques

please visit my web site

Table Of Contents | Next Section

 "65 Instant Web Design Answers"
www.instantwebanswers.com

TEXT

OK, you say. Text is text. What can you possibly do to a line of text?! You are right - not
much. But if it is not displayed correctly, looks too crowded, or the fonts are funny, people
will not be able to read the information you worked so hard to put together. The next two
techniques will help you ensure that you see what your visitors see. Plus a little special
effect you can do with your text!

#1
How to stop a line of text from wrapping to the next line

Sometimes you want the words to stay together on the same line without going over to the
next. The way to control it is by using a special HTML tag and enclosing your line of text in
it. This special tag is a <NOBR> tag and you can use it in the following manner:

<NOBR>This line of text will not wrap no matter how long it is.....</NOBR>

Notice that this tag must be closed by a matching </NOBR> to allow the rest of the text to
wrap correctly. No matter how small you make your browser window, the above text will
not wrap to the next line.

Working Example

#2
How to allow your visitors to see your fonts,
even if they don't have them installed
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Did you know that when you specify a handsome and fancy font for your web page, your
site visitors might not even see it (in fact 75% will see a plain "Times New Roman" font
instead)? You can control your fonts by using an image instead of text. Simply create a
graphic in PaintShop Pro or any other image editing program, and put your text in it. Image
will be displayed the same way on any computer with the exception of slight color
alterations. This way everyone will see the font you want them to see.

Here is a list of inexpensive or free graphic editing programs:

http://www.serif.com/photoplus5/
http://www.webattack.com/shareware/gmm/swgraphicedit.shtml
http://www.webattack.com/features/cdhiep.shtml

Working Example

#3
How to pre-format your text so it looks
exactly the way you want it

Sometimes you might want to make your text display exactly the way you see it in a text
file. Let's say that you want it appear like this, with all the indentation:

<PRE>
This could be a line from a verse
That needs to appear indented like this
Or could be a song
A rhyme or a poem, whatever it is
I want it to look exactly like this.
</PRE>

Using the <PRE> tag (which stands for pre-formated text) will allow you to display it exactly
like this:

This could be a line from a verse

That needs to appear indented like this
Or could be a song
A rhyme or a poem, whatever it is
I want it to look exactly like this.

Without the <PRE> tags the above text will appear on one line, with a single space
between each word. To achieve the same look without this tag you would need to use
 "65 Instant Web Design Answers"
www.instantwebanswers.com

special "non-breaking-space" characters (&nbsp;) many times throughout the above text.

Working Example

For more web design tips and techniques

please visit my web site

Table Of Contents | Next Section

 "65 Instant Web Design Answers"
www.instantwebanswers.com

LINKS

Links are what the Web is all about - interconnecting pages from all over the world and creating
a global network. There are many ways to effectively use links. You can control the way they
look, the way they open and much much more, if you know how.

Ready? Let's get rolling!

#4
How to make non-underlined links

When you have many links on your web site, you might want to remove the underlining feature of
your links to avoid a crowded looking page. The most common way to do this is by using a
simple style sheet in your web page.

A style sheet is a list of rules for how objects, such as links, paragraphs, and images, should
look throughout a web page. Web designers use style sheets to create a consistent look for
their web pages and to achieve special effects such as making links different color and size or
not underlined.

Here is a simple style sheet example you may use. The text-decoration: none part tells the
browsers not to underline links:

<STYLE TYPE="TEXT/CSS">
<!--
a:link { font-family: Verdana, Arial, Helvetica; font-size: 10pt;
font-weight: normal; color: blue; text-decoration: none}
 "65 Instant Web Design Answers"
www.instantwebanswers.com

a:hover { font-family: Verdana, Arial, Helvetica; font-size: 10pt;

font-weight: normal; color: blue; text-decoration: underline}

a:visited { font-family: Arial, Helvetica; font-size: 10pt;

font-weight: normal; color: blue; text-decoration: none}
-->
</STYLE>

Insert the above code anywhere on your page and all your links will become not underlined,
have a size of 10 points in blue color. You may change any of these attributes as you wish but
make sure to leave the syntax the same. For example, you may want to change the color to
maroon, or the font-size to 8pt.

For more information on style sheets, please, go to http://www.wdvl.com/Authoring/Style/Sheets/Intro

Working Example

#5
How to make two kinds of links with different colors

Sometimes you want to create several sets of links that look different from each other. For
example, you might want to make all external links (to other web sites) green, and all internal
links (to pages within your web site) red.

To achieve this you need to create two classes of links by using this simple style sheet:

<STYLE TYPE="text/css">
.artred { color: #FF3070 ; font-family: arial; font-size: 9pt }
.artgreen { color: #00FA9A ; font-family: arial; font-size: 10pt }
</STYLE>

Remember what a link tag looks like? <A HREF="pageaddress.html"> is the basic syntax.
Then inside the link tag refer to a certain class like this:

<A href="tellafriend.html" CLASS="artred">This link will look red</a>

<A href="tellafriend.html" CLASS="artgreen">This link will look green</a>

If you are confused by this notation - color: #FF3070 - then let me explain to you that this is just
 "65 Instant Web Design Answers"
www.instantwebanswers.com

another form of specifying colors. It's called a hexidecimal format. A great source for looking up
a color in hexidecimal format is at http://www.dreamartists.com/hexcode.html

You can create as many classes as you wish and use them not only for links but for any other
web page object (paragraph, body text, text in the table etc.). Again, to learn more about creating
your own style sheets go to http://www.wdvl.com/Authoring/Style/Sheets/Intro.

Working Example

#6
How to open a link in a new window

To keep your web site open even if your visitor clicks on another link you can open that link in a
different window. This technique will help you open a "related information" page without leaving
your main web site. Here is how you can accomplish it:

<a href=http://www.anyaddress.com target=top>Click here</a>

What you are doing here is telling your browser to create a new window and load the page in it.
In this code you are not specifying the measurements of that new window. To have more control
over how your window looks, you must use the window.open function described in the pop-up
window section.

Working Example

#7
How to add a subject line, CC and body to the "mailto" link
so people who e-mail you don't have to

Talking about saving time for your visitors, you may want to put a subject into your e-mail link.
This way when someone wants to e-mail you from your web site, the subject line will be already
filled in for them. Here is how to do it:

For advertising rates, e-mail me at

<a href=mailto:[email protected]?subject=advertising_rates>[email protected]</a>
 "65 Instant Web Design Answers"
www.instantwebanswers.com

You can also use this technique for sorting out and tracking your e-mail: you can immediately
see where this person got your e-mail address from and what they are interested in.

For more advanced techniques to create your "mailto" link, please, see below.

You can also specify the "CC", "BCC", and the "BODY" for your e-mail. This way when someone
clicks on your "mailto" link, they will see a subject line, a "cc" and "bcc" addresses filled in, and
their message will be already started.

Here is how to do it. Insert this code into your web page:

<a
href=mailto:[email protected][email protected]&subject=Advertising%20rates&body=It%20really%20works!>

E-mail</a>

Question mark "?" begins the fields specifications and should be only used once as
shown above.
The "&" symbol has to be inserted to separate the fields (subject, CC, BCC, body) and
should be used in front of each field you want to specify (except the first one as it already
has a question mark in front of it).
If I tell you that "%20" is actually replacing a space, the above code makes more sense
now.

Here is what your visitors will see when the click on the above link:

Three fields are filled out for them and the message has been partially started.

Working Example
 "65 Instant Web Design Answers"
www.instantwebanswers.com

#8
"Web Directories for Dummies"
Organizing your web site into directories and discovering linking
techniques

Many new webmasters tend to upload all pages, graphics and other documents into one folder -
main (root) directory. While this is easier to do at first, once your web site grows into tens or
hundreds of pages and graphics, you will be lost in such a large number of files on your web
server.

A solution for this problem is to organize your web site's files into directories (folders). Create a
separate directory for all graphics. Create another directory for your monthly newsletter files.
Once you organized your web site into different folders, you will be able to locate any file in a
matter of seconds!

But how do you link to pages that are located in other directories? Or how do you insert an
image that resides in another folder? This is what I would like to teach you here in a brief "Web
Directories for Dummies" tutorial.

What is a web directory?

It is a folder on your web server. The main (or the root) directory is where you upload your
index.html file. This way when your visitors come to your web site, the first thing they see is your
index.html. When you create other directories, make sure you each of them has an index.html
file of its own. If a directory doesn't have its own index.html file, your visitors will see a list of files
when they arrive. For example, try renaming your current index.html file into something else.
Then go to your browser and check out your web site now. What do you see? A list of all the
files on your web server. Great security, isn't it! :-)

How do I create a new directory?

A web directory is easily created through your FTP program that you use for uploading files to the
Web. I use WS_FTP, but any other program should have a "Make Directory" button. Click the
button, give your new directory a name and press "Enter". A new directory has now been
created.

How do I upload my files into this new directory?

Now that you have a new web folder, double-click it in your FTP program to open. Upload your
files there just like you always do. Because the new directory is open, the files will be placed in
it instead of the main directory.
 "65 Instant Web Design Answers"
www.instantwebanswers.com

How can I make sure I uploaded the file correctly?

To be certain that you uploaded the file into your new directory, go to your browser and type this
into your location bar: www.yourwebsite.com/newdirectoryname/filename.html

For example, if I have a web site www.helpingfoot.com and I just created a new directory called
"mylogos" and uploaded my company logo "fbw.gif", here is what I will type in the browser:
www.helpingfoot.com/mylogos/fbw.gif

When I press "Enter", I should see the picture. Now, what happens if I just type
www.helpingfoot.com/mylogos? My browser will display a list of all the files in that directory
(which at this time is just one fbw.gif file). To prevent people from seeing all my file names, I
will create an index.html file and also upload it to my new directory. Now when people type the
above address, they will see my index.html file instead of a list.

How do I link to a file located in my new directory?

As you might already know, linking can be relative and absolute. Relative links can only be used
while linking to the pages of your own website. Absolute links can be used for both internal
(your own pages) and external (other web sites) pages. An absolute link always starts with
"http://" Here is an example of an absolute link:

<a href="http://www.marketingshark.com/Catalog">Click here for a catalog of e-books</a>

A relative link can point to a file on your web server, located in the main directory or a
subdirectory. Here are examples of relative links:

<a href="services.html">Our Services</a>

In this case the web page you are linking from and services.html are located in the same
directory.

<a href="servicesfolder/resumes.html">Resume Preparation</a>

Here I am linking to a resumes.html page which is located in a folder called "servicesfolder".

<a href="servicesfolder">List of Our Services</a>

This link points to the folder called "servicesfolder" on your web server. Considering what I have
mentioned earlier about each directory having their own index.html file, this link is equivalent to:

<a href="servicesfolder/index.html">List of Our Services</a>

How do I insert an image located in another directory?

 "65 Instant Web Design Answers"
www.instantwebanswers.com

If you created a separate folder for all your graphics and now want to use one of the images on
your web page, here is how you insert it:

<img src=picsfolder/graphic.jpg>

In the working example I show you different kind of links and images demonstrating the use of
directories on your web site.

Working Example

#9
How to create random links for my web site?

Imagine you have a web site full of links. You really want all your links to be in a spotlight when
your visitors come in, instead of just the first ones at the top. How can you do it? The script
below will randomly pick one link from your web page to display every time a page is refreshed.
In other words if you have 10 links and if the same person comes to your web site 10 times, he
or she theoretically should see a different link each time. (Script reprinted with George's
Chiang's permission from http://www.wsabstract.com:

<Script>
<!--
function random_all(){
var myrandom=Math.round(Math.random()*(document.links.length-1))
window.location=document.links[myrandom].href
}
//-->
</script>
<form>
<input type="button"onClick="random_all()"value="Marketing Article">
</form>

Insert this script where you want the random link button to appear and every time you refresh
your web page, the click of a button should take you to a different (random) link. The only thing
you need to change is what the button link will say (highlighted in red).

Working Example
 "65 Instant Web Design Answers"
www.instantwebanswers.com

#10
How to display random image links

Random image links can create a feel of "constant update" for your web site. This technique
can also be used to create a random advertising for your sponsors. A variation of the previous
script will help you do just that.

This script has also been reprinted with George Chiang's permission from his collection of
scripts at http://www.wsabstract.com.

<SCRIPT language="JavaScript">
<!--

function random_imglink(){
var myimages=new Array()
//specify your images below. You can have as many as you wish
myimages[1]="image1.gif"
myimages[2]="image2.gif"
myimages[3]="image3.gif"
myimages[4]="image4.gif"
myimages[5]="image5.gif"
myimages[6]="image6.gif"

//specify corresponding links below

var imagelinks=new Array()
imagelinks[1]="http://www.wsabstract.com"
imagelinks[2]="http://www.netscape.com"
imagelinks[3]="http://www.microsoft.com"
imagelinks[4]="http://www.dynamicdrive.com"
imagelinks[5]="http://www.freewarejava.com"
imagelinks[6]="http://www.cnn.com"

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
}
random_imglink()
//-->
</SCRIPT>

You must insert this entire script where you want the random image links to appear. Don't forget
to change the images names and links URLs for your website.
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Working Example

#11
Can you make a button act as a link?

You have seen those form buttons that you click and go to another web page. It acts as a link
but looks as a button. To make such a button link use this code:

<form>
<INPUT TYPE=BUTTON VALUE="Click for HelpingFoot"
onClick="location.href='http://www.Helpingfoot.com'">
</form>

Insert this code where you want the button link to appear. You may also use more than one
button in the form by adding more <input> tags that look like the one in the code above. And
don't forget to change the URL to take your visitors to the right address.

Working Example

#12
How to change the appearance of a link
without creating a separate style sheet

If you don't want to create a separate style sheet for your web pages but still want to specify the
way a link should look on your site, you can use an "inline style sheet". Simply insert the "style"
attribute inside the tag and your link will be changed accordingly.

<a href="http://www.firstbusinesswebsite.com/affiliate"style="font-size: 12px;">Make 35% on

Each Sale!</a>

The above link will have a size of 12 pixels. You could also remove the underlining feature of
this link by modifying the above code like this:
 "65 Instant Web Design Answers"
www.instantwebanswers.com

<a href="http://www.firstbusinesswebsite.com/affiliate" style="text-decoration: none;">Make 35%

on Each Sale!</a>

The inline style sheets come quite handy in any other HTML tags. In the following example I will
make the entire paragraph goldenrod color text:

<p style="color: goldenrod;">Text goes here and it is all in goldenrod</p>

To learn more about style sheet techniques, please, visit

http://www.wdvl.com/Authoring/Style/Sheets/Intro

Working Example

#13
How to create a link to a picture

Sometimes I get too lazy and don't want to make a page to display a single image. In that case I
link directly to the image instead of an HTML page, using regular hyperlink syntax:

<a href=mypicture.gif>Click here to see my photo</a>

This way you are saving space on your server and time creating another page.

Working Example

#14
How to create a link to a specific spot on the page

When you have a long page of text and information, people have to scroll a lot to get to a certain
section. If they want to go back up they need to scroll again. To avoid this problem you can
break your web page into sections and create a link to each section on the page using HTML
targets.

You know that you are looking at a target technique when you see a "Back to Top" link. Clicking
 "65 Instant Web Design Answers"
www.instantwebanswers.com

on such a link will take you right back to the top of the page without scrolling. Follow this 2-step
process to create target links for your web page.

Step 1:

Insert this tag right before the section you want people to get to when they click on the link:

<a name = "order">

Step 2:

Add a link anywhere on your page that takes people to that section:

<A href="#order">Click here to order</A>

Notice that in step 2 all you see is a regular hyperlink, except it points to the "#order" target
instead of another web page. Each section has to have its own target name. In the above
example, I named my target "order". You can give it any name you wish as long as they match
each other in both steps 1 and 2.

Working Example

For more web design tips and techniques

please visit my web site

Table Of Contents | Next Section

 "65 Instant Web Design Answers"
www.instantwebanswers.com

GRAPHICS

Graphics are a very important part of any web site. Some skillful webmasters find a
way to get around using them and still make their web site attractive through the use of
lines, colors, tables and fonts.
Other web site owners like to use images to enhance their site and since I am one of
them, let me show you how you can effectively use pictures on your web site, without
slowing it down or make it look crowded.

#15
How to make your graphics download
three times faster

Many web sites take a long to time to display information and images because they
are not constructed correctly. By following these 3 simple techniques below you can
improve your pages' download time a great deal:

You can load a lower resolution image first by specifying a 'lowsrc' attribute.
Once this image is loaded, the image specified in the 'src' attribute will then
load. You may create a lower resolution image by altering it in a graphics
program to a "lower quality" graphic with fewer colors. You may also use this
free tool to reduce the size of graphic:
http://www.webattack.com/freeware/gmm/fwgcomp.shtml

By adding the HEIGHT, WIDTH and ALT attributes to the IMG tag, you can load
your page text before the graphics load. This allows the viewer to start reading
while the graphics load.
Example tag:
 "65 Instant Web Design Answers"
www.instantwebanswers.com

<img lowsrc="first.gif" src="second.gif" height="200" width="300" alt="Company Logo">

You may also use these free tools that will help you decrease your graphic size
dramatically by removing unused colors:
http://www.netmechanic.com/GIFBot/optimize-graphic.htm
http://www.webattack.com/freeware/gmm/fwgcomp.shtml

Working Example

#16
How to place a picture and text side by side without using tables

When you are creating a product description on your web page and using an image for
each product, you can arrange your page so that there is no unnecessary white space
between a picture and text. Compare these two examples:

Example 1:

The complete eBayª Marketing Course Discover how to get started and where to get
products, marketing strategies and what to do at the close of each auction. You can be
running your own eBayª Business, and making money today!

This package will pay for itself plus more with just a little time and effort from you. This
book reveals how to make money on the most popular auction site on the Internet. Buy
it today at only $9.95 by visiting http://www.marketingshark.com/Catalog web site.

Example 2:
 "65 Instant Web Design Answers"
www.instantwebanswers.com

The complete eBayª Marketing Course Discover how to get

started and where to get products, marketing strategies and
what to do at the close of each auction. You can be running
your own eBayª Business, and making money today!

This package will pay for itself plus more with just a little time
and effort from you. This book reveals how to make money on
the most popular auction site on the Internet. Buy it today at
only $9.95 by visiting http://www.marketingshark.com/Catalog
web site.

Can you see how second example makes use of space more efficiently and creates a
well balanced look? It is very easy to achieve (prepare to be shocked just how easy!)

Remeber we talked about the <IMG SRC=...> tag? Simply put an align=left or
align=right inside it like this:

<img src=ebay.gif align=left width=100 height=200>

Then right after the image tag start typing your text. The graphic will automatically be
displayed to the left of text. You could of course create a table and put a picture and
text in two separate columns, but this is much faster to do and if your text is long
enough it will nicely wrap around the graphic which can't be achieved using a table.

If you think the graphic is too close to the text, you may adjust it by adding two more
attributes to the tag - vertical space and horizontal space, just like this:

<img src=ebay.gif align=left hspace=5 vspace=5 width=100 height=200>

Working Example

#17
How to create a floating image on your web page (like Geocities)

Have you ever seen a Geocities logo following you anywhere you go on the page?
Yes, it is a bit annoying, but it reminds visitors where they are. You can create the
same location/brand awareness by making your company logo or any other image
(e.g. a current special) into a floating graphic: whether your visitor scrolls up or down,
the graphic will always be visible.

Follow these directions:

 "65 Instant Web Design Answers"
www.instantwebanswers.com

Place this script in between the <HEAD> and </HEAD> tags at the top of your
web page:

<SCRIPT LANGUAGE="JavaScript">
function setVariables() {
imgwidth=100; // logo width, in pixels
imgheight=40; // logo height, in pixels
if (navigator.appName == "Netscape") {
horz=".left";
vert=".top";
docStyle="document.";
styleDoc="";
innerW="window.innerWidth";
innerH="window.innerHeight";
offsetX="window.pageXOffset";
offsetY="window.pageYOffset";
}
else {
horz=".pixelLeft";
vert=".pixelTop";
docStyle="";
styleDoc=".style";
innerW="document.body.clientWidth";
innerH="document.body.clientHeight";
offsetX="document.body.scrollLeft";
offsetY="document.body.scrollTop";
}
}
function checkLocation() {
objectXY="branding";
var availableX=eval(innerW);
var availableY=eval(innerH);
var currentX=eval(offsetX);
var currentY=eval(offsetY);
x=availableX-(imgwidth+20 )+currentX;
y=availableY-(imgheight+80 )+currentY;
evalMove();
setTimeout("checkLocation()",10);
}
function evalMove() {
eval(docStyle + objectXY + styleDoc + horz + "=" + x);
eval(docStyle + objectXY + styleDoc + vert + "=" + y);
}
// End -->
</SCRIPT>

Place this script in the <body> tag of your web page (specify your own image
and its dimensions):

<BODY onload="setVariables(); checkLocation();">

This goes in the body of your document:
<div id="branding" style="position:absolute; visibility:show;
 "65 Instant Web Design Answers"
www.instantwebanswers.com

left:235px; top:-50px; z-index:2">

<table width=10 bgcolor=#ffffff><td>
<a href="http://www.your_url.com"
onmouseover="window.status='Thanks for visiting!';return true"
onmouseout="window.status='';return true"><center><IMG ALT =
"Description" SRC = "your_image.gif" border = 0 width="100"
height="40"></center></a></font></td>
</table>
</div>

Change the things in red to work with your web site.

Place the rest of your web site content after the last <div> tag.

Tip: to change the location of your floating image, modify the numbers 20 and 80 (see
above in green color). You won't hurt anything by experimenting with these numbers,
just make sure to remember the original ones.

This script was reprinted with Randy Bennett's permission from

home.thezone.net/~rbennett/utility/javahead.htm

Working Example

#18
How you can create your own animated banners and graphics
and simple Flash movies

To create an animated banner all you need is a simple program that allows you to put
several images into one animated graphic.

Even though you may find many available, my personal preference is GIF Construction
Set which can be downloaded for a free evaluation at
http://www.mindworkshop.com/alchemy/gifcon.html#download. This program is very easy to use
and has a lot of options for creating any animated graphic.

Here is a brief description of the animated banner creation procedure:

1. Create graphics that you want to use for your banner

2. Start your animation program
3. Insert all the images you created, in the order you want them to appear
4. Specify how long each one will show and how many times the animation will
repeat (looping)
5. Save finished animation as a .GIF file and add it to your web site.
 "65 Instant Web Design Answers"
www.instantwebanswers.com

An example of such animation is at http://www.helpingfoot.com/ADS/uksprite.gif

You may find a list of other animation programs (free or very inexpensive) at
www.webattack.com/shareware/gmm/swani.shtml

If you have always wanted to create your own Flash movies like the ones you see on
many web sites today, there is a simple and inexpensive program out there that I
recently discovered myself. It is called CoffeCup Firestarter. It is only about $50.00
(the real Flash program costs hundreds of dollars!) and so simple to learn that my
7-year old thinks he has a new computer game now :-)

You can create a professional Flash movie in minutes using Firestarter. To download
a 30-day trial version, go to http://www.coffeecup.com/firestarter.

#19
How to create an animated slide show

You can download and use one of the free slide show tools that will generate
professionally looking demonstrations for your web page in minutes. Just go to
http://www.webattack.com/freeware/webpublish/fwgallery.shtml to select a program that fits you
best.

You can also use this very simple JavaScript on your web site, as I did for one of my
customers.

Here is what you need to do to make the slide show work.

Create several images in a graphic editing program such as PainShop Pro and
make sure they are all the same size. To do that, start with a blank image and
fill it with the background color of your web page (leave it white if you are not
using a background). Then copy and paste one image at a time into that blank
template you created saving it each time under a different name.

For example, I created 12 same size images and named them

"slide1.jpg", "slide2.jpg", etc. I then placed their names in the script as
you will see below.
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Insert this script in the HTML code of your web page where you wanted the
slide show to appear. Upload this web page and all the images (slides) you
created into the same directory on your web server.

<BODY BGCOLOR="BLACK" TEXT="WHITE" onLoad="show()">

<SCRIPT LANGUAGE="JAVASCRIPT">

var ImgArray = new Array()

ImgArray[0]= new Image

ImgArray[1]= new Image
ImgArray[2]= new Image
ImgArray[3]= new Image
ImgArray[4]= new Image
ImgArray[5]= new Image
ImgArray[6]= new Image
ImgArray[7]= new Image
ImgArray[8]= new Image
ImgArray[9]= new Image
ImgArray[10]= new Image
ImgArray[11]= new Image

ImgArray[0].src="slide1.jpg"
ImgArray[1].src="slide2.jpg"
ImgArray[2].src="slide3.jpg"
ImgArray[3].src="slide4.jpg"
ImgArray[4].src="slide5.jpg"
ImgArray[5].src="slide6.jpg"
ImgArray[6].src="slide7.jpg"
ImgArray[7].src="slide8.jpg"
ImgArray[8].src="slide9.jpg"
ImgArray[9].src="slide10.jpg"
ImgArray[10].src="slide11.jpg"
ImgArray[11].src="slide12.jpg"

function show() {

setTimeout("document.images[0].src=ImgArray[1].src", 3000);
setTimeout("document.images[0].src=ImgArray[2].src", 5000);
setTimeout("document.images[0].src=ImgArray[3].src", 7000);
 "65 Instant Web Design Answers"
www.instantwebanswers.com

setTimeout("document.images[0].src=ImgArray[4].src", 9000);
setTimeout("document.images[0].src=ImgArray[5].src", 11000);
setTimeout("document.images[0].src=ImgArray[6].src", 13000);
setTimeout("document.images[0].src=ImgArray[7].src", 15000);
setTimeout("document.images[0].src=ImgArray[8].src", 17000);
setTimeout("document.images[0].src=ImgArray[9].src", 19000);
setTimeout("document.images[0].src=ImgArray[10].src", 21000);
setTimeout("document.images[0].src=ImgArray[11].src", 23000);
}
</SCRIPT>

<BR><IMG src=slide.jpg width=300 height=260>

<FORM><INPUT type=button onClick="show()" value="Watch Slide Show
Again"></FORM>

Notice that the slide show will start as soon as the page is loaded:

<BODY BGCOLOR="BLACK" TEXT="WHITE" onLoad="show()">

But if your visitor wanted to watch it again, he could click on the button:

<FORM><INPUT type=button onClick="show()" value="Watch Slide Show

Again"></FORM>

...and the slide show would play again.

Working Example

#20
How to make a new image appear when a mouse moves over a
graphic (image rollover)

To provide more information about a subject, product or service or simply create an

attractive visual effect you can use mouse rollovers. Here is a description of how it
works:

1. You create a button in a graphic editing program (e.g. bookcover.gif)

2. Make a slight change to it (different color, beveled effect, shadow, text

etc. but leave the size of the button the same) and save it under a
 "65 Instant Web Design Answers"
www.instantwebanswers.com

different name (e.g. bookcover2.gif):

bookcover.gif bookcover.gif

3. Insert a special code in your web page (see below)

4. When your visitor touches that button with his mouse, the second
button will replace the first one which creates the "rollover" effect.

After you have created 2 buttons, upload them to your web server. Then place the first
button on your web page by inserting this tag (replace bookcover.gif with your own
graphic):

<img src=bookcover.gif>

The above code assumes that homepage.gif is located in the same web directory as
your web page. If you placed the graphic in subfolder, then you should specify its
name like this:

<img src=foldername/bookcover.gif>

To make your rollover work, you need to make this image a link. Create a <A HREF...>
tag around it and insert the onMouseOver attribute. It should now look like this:

<A href=page.html onmouseover="document.images[0].src='bookcover2.gif'; return

true" onmouseout="document.images[0].src ='bookcover.gif'; return true"><img
src=bookcover.gif></a>

Make sure this code is all on one line and no hard returns, please. I checked this code
many times - it will NOT work if you press "Enter" key in the middle of this tag.

Also, document.images[0] simply means that you are refering to the very first graphic on
your web page (JavaScript starts counting objects from 0). If you need to change a
graphic that follows the other images, simply count them starting with zero and insert
the number of that graphic in this code. For example, if you have 6 images on your
web page and want to create a rollover effect for the 6th one, use document.images[5] in
your code.

In the example below I am using only one image, that's why I use [0] as the number in
my link code.
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Working Example

#21
How to make a multi-image rollover

You may want to create a similiar rollover effect but on multiple buttons, the way I have
it on my http://www.firstbusinesswebsite.com. So that when you touch any of the
buttons, each one is replaced with another graphic.

Please, read the previous section about the basics of a rollover effect before
proceeding.

Here is how to add this effect to your web page:

Create matching sets of buttons.

For example, if you want to create 5 buttons (home, services,

products, faq and contact us), you will want to make a variation of
each button so that you end up with 10 buttons alltogether.
Notice that in the script below I give the variation of an image a
name that corresponds to its original. For example, if the
original image is "button_contactme.jpg" its variation is
"button_contactme2.jpg"

For example:

Set 1 Set 2

Insert this script anywhere on your web page (change the graphics'
names to those you have created). Notice that I start with the 3rd
graphic (0,1,2) as explained in the previous section:

<SCRIPT LANGUAGE="JavaScript">
var offImgArray = new Array()
offImgArray[2]= new Image
 "65 Instant Web Design Answers"
www.instantwebanswers.com

offImgArray[3]= new Image

offImgArray[4]= new Image
offImgArray[5]= new Image
offImgArray[6]= new Image
offImgArray[7]= new Image

offImgArray[2].src="button_order.jpg"
offImgArray[3].src="button_newsletter.jpg"
offImgArray[4].src="button_webforum.jpg"
offImgArray[5].src="button_contactme.jpg"
offImgArray[6].src="catalog_button.jpg"
offImgArray[7].src="affiliates_button.jpg"

var onImgArray = new Array()

onImgArray[2]=new Image
onImgArray[3]=new Image
onImgArray[4]=new Image
onImgArray[5]=new Image
onImgArray[6]=new Image
onImgArray[7]=new Image

onImgArray[2].src="button_order2.jpg"
onImgArray[3].src="button_newsletter2.jpg"
onImgArray[4].src="button_webforum2.jpg"
onImgArray[5].src="button_contactme2.jpg"
onImgArray[6].src="catalog_button2.jpg"
onImgArray[7].src="affiliates_button2.jpg"

function imageOn(i) {
document.images[i].src = onImgArray[i].src
}

function imageOff(i) {
document.images[i].src = offImgArray[i].src
}
</SCRIPT>

Insert the code for your images and links.

Here is how your regular buttons would look without the

rollover effect:

<A href="order.html"><IMG
SRC="button_order.jpg"></A><br>
<A href="contact.html"><IMG
SRC="button_contact.jpg"></A><br>
<A href="services.html"><IMG
SRC="button_services.jpg"></A><br>
 "65 Instant Web Design Answers"
www.instantwebanswers.com

And here is how they would look with the rollover effect:

<A href="order.html" onmouseover="imageOn(2);

return true" onmouseout="imageOff(2);return
true"><IMG SRC="button_order.jpg"></A><br>

<A href="order.html" onmouseover="imageOn(3);

return true" onmouseout="imageOff(3);return
true"><IMG SRC="button_contact.jpg"></A><br>

<A href="order.html" onmouseover="imageOn(4);

return true" onmouseout="imageOff(4);return
true"><IMG SRC="button_services.jpg"></A><br>

Again, notice that I start my rollover with the 3rd image (number 2 in JavaScript actually
means 3rd) and continue through the 5th one. That is because my first two images on
the page are the company logo and a blank image that acts as a space holder. That is
how I knew I needed to start with the 3rd one.

Working Example

#22
How to make an image so that clicking on different parts of it
takes visitors to other pages (imagemaps)

These are called "clickable images" or "imagemaps". You can use this technique to
create one large image and allow your visitors to click on any part of it to get to another
web page.

There are two ways to make an imagemap: the hard way and the easy way. The hard
way is to manually code it calculating the coordinates of the image and pointing a set
of coordinates to a URL.

The easy way (my way!) is to use a tool that does it for you automatically. I prefer using
MapEdit, but you may choose from this list of free imagemap generation programs for
your computer: CNET Downloads

Here is how MapEdit works:

You open an image in MapEdit (.gif or .jpg)

Select several areas on the image and assign a URL to each area
Save it and MapEdit inserts a special code to your web page's HTML
 "65 Instant Web Design Answers"
www.instantwebanswers.com

You can specify a circular, triangular or a rectangular area using MapEdit. When you
open your web page now, you will see a strange code which you would have to
hand-code otherwise.

Working Example

#23
How to create an image gallery of thumbnail pictures

You can easily organize your images to display products, save space and download
time and allow your visitors to view samples of your work.

The easiest and fastest way to create thumbnails for your images is by using a special
program. I have seen anything from basic thumbnail generators to gallery publishing
tools. One that I personally decided to use for my needs is called Easy Thumbnails
and can be downloaded from http://www.fookes.com/ezthumbs/index.html?1.0 completely
free.

It creates thumbnails from all the images located in the folder you specify - in
seconds! I found it extremely easy to use, and believe me - I don't like steep learning
curves and neither do you :-)

In case you want to try a different program, or have more options and a sophisticated
interface, I would recommend going to http://www.webattack.com/freeware and searching
their web site for "thumbnails" software. I noticed that a couple of other programs
there even create a web page for your "thumbnail gallery" automatically, with caption
and headers. Check it out - you will be overwhelmed with great choices!

If you are serious about creating a professional and easy maintainable image gallery,
you might want to use one of these simple but professional tools:
http://www.webattack.com/shareware/webpublish/swgallery.shtml

#24
How to take screen shots of your screen

Many times you find yourself wanting to save your screen as a graphic, to use on your
web site or for a future reference. This is very easy to do on either a Windows or a Mac
computer.
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Macintosh

Press these three keys on your keyboard, one after another holding them all together:
command-shift-4. When you do that, your cursor will turn into a plus sign and you will
be able to click and drag the cursor around the area you want to capture.

You may also capture the entire screen by doing the same technique but pressing 3
instead of 4: command-shift-3.

A file a of type "PICT" will be saved on your hard drive. You may now open it in your
favorite graphics program.

Windows

To capture the image of the whole screen, press your "PrintScreen" key. If you need to
capture just the currently active window, press two keys one after another holding them
together: Alt-PrintScreen.

A screen shot will be immediately placed on the clipboard. To modify it or save it as a

graphic file, open your graphic editor, start a new image and press CTRL-V at the
same time to paste the screen shot in.

At this point you can modify and save it as any graphic type your graphic editor allows.

#25
Free Web Tools Resources

Web Sites listed below are essential to any webmaster. They contain free interactive
tools and services such as a mailing list tool, guestbooks, site searches, tell-a-friend
and many many more:

http://www.Bravenet.com
http://www.sitegadgets.com
http://www.webgenie.com
http://www.atomz.com
http://www.network54.com
http://www.boardhost.com
http://www.thefreesite.com/Webmaster_Freebies
http://www.homepagetools.com/
 "65 Instant Web Design Answers"
www.instantwebanswers.com

http://www.mycomputer.com/
http://www.webpage-tools.com/
http://www.freeguestbooks.com/
http://www.sitemason.com
http://www.buttonland.com

Free Graphic Software

PhotoPlus - http://www.webattack.com/features/photoplus.shtml
CDH Image Explorer Pro
http://www.webattack.com/features/cdhiep.shtml
Graphic Viewers -
http://www.webattack.com/shareware/gmm/swviewers.shtml
Graphic Editors -
http://www.webattack.com/shareware/gmm/swgraphicedit.shtml

Other Free Software

http://www.webattack.com/freeware/
http://www.webattack.com/shareware/
http://download.cnet.com/

For more web design tips and techniques

please visit my web site

Table Of Contents | Next Section

 "65 Instant Web Design Answers"
www.instantwebanswers.com

TABLES

As you learn more about tables, they will become your best friend in designing web pages.
You can do anything you can visualize with tables - pure magic! While the subject of using
HTML tables practically has no limit, I will teach a few neat techniques to make you a table
pro. Here we go!

#26
How to create a box with a border on your web page

A neat way to design your web page could be creating a box and putting all information in it.
This type of layout can help you control how your page is displayed on different monitors and
in different browsers, as well as make it look more compact and organized.

A box can be created using nested tables on your web page - table within a table. Here is
how to do it.

1. Create a table with a dark background.

2. Then create a table inside the first one, but with a white background.
3. Set first table to a width a little larger than the second one.
4. Do not use % width. Instead, specify a set number for each table width (e.g. "500"
and "450")

The following code will accomplish this task:

<center>
<table BORDER CELLSPACING=5 CELLPADDING=5 COLS=1 WIDTH="500"
BGCOLOR="gray">
<tr>
<td>
 "65 Instant Web Design Answers"
www.instantwebanswers.com

<center><table CELLSPACING=5 CELLPADDING=5 COLS=1 WIDTH="450"

BGCOLOR="white" >
<tr>
<td>This box has been created using nested tables - table within a table. The outer table
has a gray background. The inner table has been set to a white background. </td>
</tr>
</table></center>
</td>
</tr>
</table></center>

Notice that both tables have an opening <table> and a closing </table> tags. Every <tr> and
<td> tag is also matched with a corresponding closing tag. It is very important for the tables
to work!

Working Example

#27
How to align tables on the page

When you make a table on your web page, you can't place anything else on the same line
with that table. In other words, if you start typing immediately after the table, that text will
automatically appear on the next line, like this:

Cell 1 Cell 2
Here is the text right after the table.

There is a way for you to align tables so that more text or graphics can be added on the
same line. Simply add the align attribute inside the <TABLE> tag like this:

<table align=left width=30%>

Anything you insert after this table will appear right next to it - not below:

Here is the text right next to the table. For the longest time I didn't think this was possible. I
bet you are surprised as well :-)
Cell 1 Cell 2

Working Example
 "65 Instant Web Design Answers"
www.instantwebanswers.com

#28
How to line up a banner with the rest of the information on the page

When you have an ad banner on your web site or any other wide image, the text that follows it
can be perfectly aligned with that image. This way the banner will look like a part of the
whole, and not like just a banner.

The way you achieve this is by putting all information and images after the banner in a
table. The table width should be the same as the banner width.

Here is the code for this example:

<!--first insert the banner picture-->

<img src=banner.gif width=400 height=50>
<!--now let's start the table and insert some text in it. Notice both banner and table width is
400.-->
<table width=400><tr><td>
Information and images go here. Anything you insert in this table will be perfectly ligned up
with the banner because the table is the same width as the table. You may choose to
have a border or not. This example doesn't include it.
</td></tr>
</table>

Working Example

#29
How to create a table that has an image as its border

This special effect is used to get rid of the boring gray-colored table borders and replace
them with bright, colorful and vibrant ones. First, decide what image you will be using for
the border. It has to have a "small" pattern to display well. If you are using a photograph of a
person, for example, then only the parts of the face will be visible :-)

Use this HTML code to create two tables - outer and inner (nested tables).
 "65 Instant Web Design Answers"
www.instantwebanswers.com

<TABLE BACKGROUND="gallery.gif" BORDER="0" WIDTH="200" HEIGHT="200"

CELLPADDING="20">
<TR>
<TD>

<table bgcolor="white" background="" border="0" width="160" height="160"

cellpadding="9" cellspacing="0">
<tr>
<td>Text goes here</td>
</tr>
</table>

</TD>
</TR>
</TABLE>

Light blue color signifies the outer table tags. This is the table that will have an image as its
background (see in red). Dark blue color belong to the inner table tags and has a white
background. Because the outer table has a cellpadding of "20", you can see the background
graphic as a frame around the white table.

Working Example

#30
How to design for different screen sizes

Designing for different screen sizes has been an issue for every new webmaster. Let me
show you a way to forget this problem has ever existed!

Here is what you do. Make a table. Set the width of the first cell(s) in pixels (under 400).
Then set the last cell width to 100% to fill up the screen's leftover space. Here is a good
example:

<TABLE WDITH="100%">
<TR>
<TD WDITH=250>Use this cell for navigation or ads.</td>
<TD WDITH="100%">This cell will stretch to the end of the window</td>
</TR></TABLE>

As you will see in the working example below left side is meant for navigation purposes.
You can fill it up with more links or button ads. You may also use it for testimonials. The
right column is stretching all the way to the end of the window since it is set to 100% width,
no matter how small or how large the screen is.
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Working Example

#31
How to prevent text on your web page from overlapping with the border

When you are using a bordered background you need to make sure the main text doesn't
overlap with the border. There are several ways of doing it, but this one is the fastest to
implement and practically guarantees the results on all types of screens.

Follow these steps:

1. Make a 2-column table where the left column is as wide as the page border. Make
sure the table cellpadding (distance between text and table border) and cellspacing
(distance between two cells) are at least 5.
2. Create a small transparent GIF image using your favorite graphics software (I use
PaintShop Pro)
3. Place this graphic anywhere in the left column and set its width to the width of the
border)

Here is the code to use:

<TABLE WIDTH="600" cellpadding=5 cellspacing=5>

<!--Here I am assuming that the border is 125 pixels wide and make the transparent graphic
the same width-->
<TR><TD valign="top"><img src=graphic.gif width=125 height=1>
...the rest of the left column content goes here...</TD>
<TD>...This is the right column. Information and pictures should be placed here...</TD>
</TR></TABLE>

Notice that the height of transparent image (graphic.gif) is only 1 pixel - you don't even need it
to be visible. It is used purely for adjusting the width of the cell.

The right cell will contain information and graphics.

Working Example

#32
How to make a stylish magazine layout for your web page using tables
 "65 Instant Web Design Answers"
www.instantwebanswers.com

So that you know what I am talking about, please, take a look at this web page: Working
Example

To create a professionally looking web site by using a stylish magazine-like layout, you need
to use a 2-4 column table. Each column has to be the same width. And each column has to
use a couple of small sized graphics for an appealing look.

To separate two cells filled with text with a thin dark line, I created an additional cell between
the first and second cell and between the second and third one. I specified a dark
background for it and placed the <br> tag in it. The cell will be smaller than one space, but
will display a dark separator.

Here is the basic HTML code for creating the magazine layout:

<CENTER><TABLE CELLSPACING=6 CELLPADDING=0 >

<TR VALIGN=TOP>

<TD WIDTH="250">
Text for the first column goes here
</TD>

<TD WIDTH="1" BGCOLOR="navy">

<BR></TD>

<TD WIDTH="250">
Text for the third column goes here
</TD>

<TD WIDTH="1" BGCOLOR="navy">

<BR></TD>

<TD WIDTH="250">
Text for the fifth column goes here
</TD>

</Tr>
</TABLE></CENTER>

The two columns that make dark (navy) separators are highlighted in red color. In the
working example I have also added a dark header for a special effect. Here is the code for
the header that has to be placed right before the other table:

<CENTER><TABLE CELLSPACING=4 CELLPADDING=4 COLS=1 WIDTH="100%"

BGCOLOR="navy">
<TR>
 "65 Instant Web Design Answers"
www.instantwebanswers.com

<TD><B><FONT face="arial" color="white" size=+2>Professional Web Site

Critique</FONT></B></TD>
</Tr>
</TABLE></CENTER>

After you have created your table and placed the text in the cells, add some small graphics to
make it look more stylish and professional. Align each graphic so that the text wraps
around it. Use align=left or align=right attributes in the <img> tag to do that. See my
Working Example for how it is done.

Working Example

#33
How to create an empty table cell?

When you create a calendar-style table (with many cells and rows), cells if left empty will not
display a border around them. You can force the border to still show up even if the cell
contains no information, by using this simple technique.

Place a non-breaking space character in the cell like this:

<TD>&nbsp;</TD>

You may also use a <br> or <p> tag instead of the &nbsp; The cell will "think" it has
something in it and will display its border.

Working Example

#34
How to change the color of the border in your table

In the early days of web page development you could only create tables with a gray border
around them. Recent versions of Netscape and Internet Explorer allow you to create a
colored border around a table. All you need to do is use the BORDERCOLOR attribute like
this:
 "65 Instant Web Design Answers"
www.instantwebanswers.com

<table bordercolor=maroon>

Another way to create a colored border for your table (a sure way which works even with
older browsers!) is to use nested tables: table within a table. Use a dark background color
for the outer table and a white background for the inner table. This technique is similiar to
the one discussed in "How to create a table that has an image as its border" and in "How to
create a box with a border on your web page".

Working Example

#35
How to create a table with rounded corners

Is it really possible to make a table with rounded corners? Well, yes... if you cheat :-) There
is no HTML code that can round your corners, but there is a technique that can create the
look you need.

This section is based on a simple and fun tutorial taken from

http://www.vortex-webdesign.com (reprinted with permission of Jon Hughes, the
webmaster).

The first step in creating rounded corners for a table is to determine the colors to be used.
You will need to know the color of the page background and of the table cells which are to be
rounded. You should also have a rough idea of what sort of radius you want your corners to
have.

For a very simple method of creating rounded corners, this set of Photoshop compatible
filters includes an extremely handy quarter-round filter for making rounded corner images.
To make the corner images manually, follow the instructions below.

To create the images that will be used for the corners, open your graphics program and
create a new file with dimensions of 100 x 100 pixels (we'll resize this in a minute). Fill the
image with the same color as the background of your page (figure 1). Now make a circular
selection 100 pixels in diameter and place it in the exact center of the image. Fill this circle
with the color you want your corners to be (figure 2).
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Figure 1 Figure 2

Resize this image so that it is twice the size you want your corners to be. 40 x 40 makes for a
nice 20 pixel corner. Use the guides function (or similar) of your image editor to divide this
image into quarters (figure 3). Select one quarter of the image, copy it and paste it into a new
image (figures 4 and 5).

Figure 5
Figure 3 Figure 4

Convert this image to indexed color and save a copy as .gif. It may also be desirable to save
as a transparent .gif, with the background color being transparent. (When you save these
corner images, it is wise to use a filename that will help you identify them, e.g., for an upper
right corner image, corner_ur.gif.)

To create the other three corners (assuming that you want to round all four corners of your
table), simply rotate the image 90 degrees and save another copy. Repeat this two more
times and you'll have four corners.

Now we construct the table into which the corners will be placed. The structure is three rows,
three columns. In the following example, I left borders set to 1 for clarity and the corner
images have not yet been added:
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Content goes here

Here's the HTML that was used to create the table:

<TABLE WIDTH="30%" BORDER="1" CELLSPACING="0" CELLPADDING="0">

<TR>
<TD WIDTH="20">corner1.gif</TD>
<TD WIDTH="100%" BGCOLOR="#9999FF">&nbsp;</TD>
<TD WIDTH="20">corner2.gif</TD>
</TR>

<TR>
<TD WIDTH="20" BGCOLOR="#9999FF">&nbsp;</TD>
<TD WIDTH="100%" BGCOLOR="#9999FF" ALIGN="CENTER">
<P>
<P>Content goes here
<p>
</TD>
<TD WIDTH="20" BGCOLOR="#9999FF">&nbsp;</TD>
</TR>

<TR>
<TD WIDTH="20">corner3.gif</TD>
<TD WIDTH="100%" BGCOLOR="#9999FF">&nbsp;</TD>
<TD WIDTH="20">corner4.gif</TD>
</TR>
</TABLE>

The rounded corner graphics are highlighted in red. As always with images, you may name
them anything you wish. A couple of important notes about the above code:

In the finished table, the value for the table border will be set to "0".

Notice that there are no empty cells. Each cell must be populated with something in
order for its attributes to be recognized by the majority of browsers. In this example, I
used a non-breaking space (&nbsp;) to populate the empty cells. For smaller tables
where a non-breaking space would be too large, a 1 x 1 transparent spacer could be
used.

This table uses a combination of fixed widths and percentages for sizing of the cells.
For example, the three cells of the top row are sized at 20 px, 100%, and 20 px. This
is a bit of a hack, but the middle cell needs to be 100% in order to keep the corner
.gifs pushed out to the corners where we want them. If you don't need for the table to
be flexible, you can just use pixel values for all size attributes.

Finally, there is no background color specified for the corner cells. The color will be
 "65 Instant Web Design Answers"
www.instantwebanswers.com

provided by the corner .gifs you created.

Here is the table again, this time with the corner .gifs added and the borders set to zero:

Content goes here

When you add your corner images to this table, be sure to include the necessary attributes
in the image tag (height, width and alt):

<IMG SRC="corner_ur.gif" HEIGHT="20" WIDTH="20" ALT="corner image">

Working Example

If you need help setting up any of the features in this section,

I can do that for you for a small fee.

Table Of Contents | Next Section

 "65 Instant Web Design Answers"
www.instantwebanswers.com

FORMS
Forms are what makes web sites interactive. You can have a feedback form, a
questionnaire, a tell-a-friend, a newsletter subscription, an order form. All of the above
accomplished via HTML forms. While this is not meant to be a tutorial on forms, I do
explain the basics here. If you are not familiar with forms, please, visit the sites for easy
tutorials for beginners listed below. Otherwise, get ready to learn some tricks in creating
forms on your web site!

#36
How to add a simple feedback form to your site

Forms allow you to receive information directly from your web site by asking your visitors
specific questions. To encrypt information being sent you need an access to a secure
server and the ability to process a CGI script. I will not get into this here, and instead will
show you how to make a simple form and have its content e-mailed to you.

<form action="mailto:[email protected]" method=post enctype="text/plain">

First Name<input name=first_name><br>
Last Name<input name=last_name><p>
Age<p>
<input type=radio name=your_age value="18-40">18-40<br>
<input type=radio name=your_age value="40+">40+<p>
<input type=submit value="Click here to send data">
</form>

While this is not meant to be a tutorial on HTML forms, I would like to take a look at this
code line by line to better understand what we are doing:

<form action="mailto:[email protected]" method=post enctype="text/plain">

 "65 Instant Web Design Answers"
www.instantwebanswers.com

Specify the e-mail address to send the form data. Make sure to include ALL the other
attributes of this tag.

First Name<input name=first_name><br>

Last Name<input name=last_name><p>

Ask for the person's first and last name.

Age<p>
<input type=radio name=your_age value="18-40">18-40<br>
<input type=radio name=your_age value="40+">40+<p>

Ask for person's age. The form is also giving your visitors a choice between 18-30 years
old and 40+. Note that type "radio" simply creates small round buttons for people to click
in to make a selection.

<input type=submit value="Click here to send data">

</form>

Creates a button to click on and closes the form.

Here is the result of this HTML code:

When your visitor fills out this form and presses the button, here is what you will receive in
your e-mail:

first_name: Jane
last_name: Smith
your_age: 18-30 (or 40+, whichever is selected on the form)
 "65 Instant Web Design Answers"
www.instantwebanswers.com

You can add more questions and choices to your form by using various form tags. To
learn more about working with a form, please, see the included "Form Tutorial". You may
also visit other tutorials at

http://www.w3.org/TR/REC-html40/interact/forms.html
http://www.weballey.net/forms
http://www.pagetutor.com/pagetutor/forms/index.html

Working Example

#37
How to change the background color of a button?

All buttons on the forms look gray. You can change that by using a special attribute within
a button tag.

<input type=submit style="background-color:blue" value="Click Me">

Even though some tutorials claim that this feature works with all browsers that support
style sheets, in my experience only Internet Explorer displayed it correctly.

Working Example

#38
How to make a graphic act as a button

To get rid of the boring gray form buttons you can use attractive graphics as buttons. Here
is how to do it.
First create your button using any graphic editing software such as Paintshop Pro. Don't
forget tha you may also get it free from clipart web sites. Upload this button to your web
server where your web page with the form is located.
 "65 Instant Web Design Answers"
www.instantwebanswers.com

In your form instead of using this code:

<input type=submit value="Go">

Use this one:

<input type=image src="image.jpg">

...where image.jpg is the button image you uploaded to your web server. For example, to
create a form that will e-mail the data to you with a graphical button, use this code:

<form action="mailto:[email protected]" method=post enctype="text/plain">

First Name <input name=first_name><br>
Last Name <input name=last_name>
<input type=image src="image.jpg">
</form>

Working Example

#39
How can I control the size of the text on a button?

You may want to use smaller or larger text on the form buttons, or use a different type of
font to match the rest of the web site text. You can achieve this effect in Netscape and IE
4.0, but in Internet Explorer 5.0 and above this feature is ignored.

All you need to do is surround the button with the font size commands:

<form action="mailto:[email protected]" method=post enctype="text/plain"><input

name=first_name><input name=last_name><font size=-1><input type=submit
value="Click here to send data"></font></form>

Working Example
 "65 Instant Web Design Answers"
www.instantwebanswers.com

#40
How to make your form look lined up and neat

Have you ever seen those terribly looking forms where boxes are spread around on the
screen randomly? That is because no special formatting was used, though it is extremely
simple to do.

Let's take a basic form that we created earlier:

<form action="mailto:[email protected]" method=post enctype="text/plain">

First Name <input name=first_name><br>
Last Name <input name=last_name>
<input type=image src="button-image.jpg">
</form>

Now let's make it look lined up by placing each label (e.g. First Name) and each tag (e.g.
<input name...) in a table cell:

<center>
<table width=50%>
<form action="mailto:[email protected]" method=post enctype="text/plain">
<tr><td>First Name</td><td><input name=first_name></td></tr>
<tr><td>Last Name </td><td><input name=last_name></td></tr>
</table>
<input type=image src="button-image.jpg">
</form>
</center>

Notice that the button is placed after the table to center it well, but if you place it in the table
it will still work correctly.

Working Example

#41
How to e-mail a form to more than one e-mail address
 "65 Instant Web Design Answers"
www.instantwebanswers.com

You can allow more than one person to receive information from your web site. In your
form tag simply place all e-mail addresses separated by comas in double-quotes, just like
this:

<form action="mailto:[email protected],[email protected],[email protected]"
method=post enctype="text/plain">

Then insert the rest of the form's tags below. When "Submit" button is pressed all the
information put in by your site's visitor will be sent to the e-mail addresses listed in the
form.

Working Example

#42
How can I control the width of a "select" box on my form?

A select box is a part of a form. You can use it for making a list of all the pages on your
web site, or links to other web sites. Some people use them for putting their customers'
testimonials thus saving a lot of room for other things on the page.

Sometimes you want to control the width of your select box to match the width of another
object (image, another select box etc.) creating a balanced or symmetric look on your web
page. While you can't reduce its width (except for using fewer words), you can easily
expand it.

Simply nsert multiple &nbsp; characters ("non-breaking-space") which will adjust the
width of the box:

<form method=post action=mailto:[email protected]>

<select name=age>
<option value="18-36">18-36
<option value="37-50">37-50
<option value="51+">51+
<option
value="widthadjuster">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</select>
</form>

Here is how it would look on your web page:

 "65 Instant Web Design Answers"
www.instantwebanswers.com

And here is how it would look when you click on it:

Notice that the last line is blank. That is where the &nbsp; characters are used. You may
also use '-------------' characters instead to create a separator.

Another way to do so is using a style sheet technique:

<select name="age" size="1" style="width: 60mm">

Adjusting the width of your select box may be necessary sometimes to increase the size of
a table cell where the select box is located. Remember that when putting a select box into
a table cell, you are making that table cell expand to the width of that box. In other words, if
the cell width is "40", but your select box has a width of "60", the table cell will stretch to
"60". I usually try to remove unnecessary words and characters to reduce its width.

Working Example

#43
How to have a partially filled out form on your web site

When you want your visitors to fill out the information using your feedback form, you might
want to have it partially filled out to help your visitors. It is especially important when users
forget to enter information, or when you want to suggest what should be entered.

This can be done by using the "value" attribute of a form tag. For example, if you are asking
how your visitors found your web site, you might suggest your answer to help them out:

How did you find our web site? <input name="how_found" value="Search Engine">

Notice that I am already answering for them. If this answer is not correct, the user can
delete it and type their own. Here is how it looks on a web page:
 "65 Instant Web Design Answers"
www.instantwebanswers.com

If you are using radio buttons or check boxes (which are just different tags of a form), you
can make a selection for your users to suggest the answers. Below is the code for how to
do that with radio buttons:

Age:
<input name="age" type="radio" value="Over 18" CHECKED>Over 18
<input name="age" type="radio" value="Under 18">Under 18

Notice that the first option is checked. Here is how it would look on a web page:

Now let me give you the code to use for check boxes. If you studied the subject of HTML
forms, you will remember that only one radio button can be selected in the same group of
buttons, while more than one check boxes can be checked in the same group:

Your Hobbies:
<input name="hobbies" type="checkbox" value="Hiking" CHECKED>Hiking
<input name="hobbies" type="checkbox" value="Swimming" CHECKED>Swimming
<input name="hobbies" type="checkbox" value="Painting">Painting

Here is the result of this code on your web page:

When you want to choose an answer from a select box, use SELECTED inside the tag:

<select name=age>
<option value="18-36">18-36
<option value="37-50" SELECTED>37-50
<option value="51+">51+
</select>

Even though the first option is "18-36", the second option will be pre-selected for your

visitor:

Any of these options can be easily changed by users, but you are saving their time by filling
them in. Isn't what the Internet is about? :-)

Working Example
 "65 Instant Web Design Answers"
www.instantwebanswers.com

#44
How to make some fields on your form "required"

When someone fills out a form on your web site you may want to "force" them to fill out
certain fields while making others optional. Let's say you want to know what computer
system this person is using so you can help serve them better. You also want them to tell
you their name and e-mail so you could reply:

Put a star next to each question required to be answered. Here is the HTML code for this
form:

<form onSubmit="return checkrequired(this)"

action="mailto:[email protected]"method=post>
<table cellspacing=4>
<tr><td><font color=red>*</font>Name</td><td><input
name=requiredrealname></td></tr>
<tr><td><font color=red>*</font>E-mail</td><td><input name=requiredemail></td></tr>
<tr><td><font color=red>*</font>Computer System</td><td><input
name=requiredsystem></td></tr>
<tr valign=top><td>Your Question</td><td><textarea cols=27 rows=5
name=question></textarea></td></tr>
<tr><td><input type=submit value="Submit Form"></td></tr>
</table>
</form>

Notice that there is only one field not required to be filled out - "question". Why, you
wonder, every required field has the word "required" in front of it? Because we need it for the
script that will check if the required fields have been filled out - the checkrequired script
highlighted in red in the above code. Also notice that the information will be e-mailed to
me at [email protected].
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Make sure your <form> tag contains the onSubmit="returncheckrequired(this) statement so it

works properly.

Please, note: due to the "optional" nature of check and radio boxes, this script cannot be
used to mark them as required. Giving check or radio boxes a "required" prefix will do
nothing.

Now that we have created a form and indicated which questions must be answered, let's
insert the script to check this form when it is submitted (reprinted with George Chiang
permission from www.wsabstract.com):

<script>
function checkrequired(which){
var pass=true
if (document.images){
for (i=0;i<which.length;i++){
var tempobj=which.elements[i]
if (tempobj.name.substring(0,8)=="required")
{
if (((tempobj.type=="text"||tempobj.type=="textarea")&&tempobj.value=='')
||(tempobj.type.toString().charAt(0)=="s"&&tempobj.selectedIndex==-1))
{
pass=false
break
}
}
}
}
if (!pass){
alert("One or more of the required elements are not completed. Please complete them, then submit
again!")
return false
}
else
return true
}
</script>

The only thing you can change in the above script without breaking it is the line in red - the
actual alert message that people see when they try to submit form without filling it out
completely. Place it anywhere in your HTML page. Please, note, that the code in green
color has to appear on one line without hard returns. See how I did it in the example.

Working Example

For more web design tips and techniques

 "65 Instant Web Design Answers"
www.instantwebanswers.com

please visit my web site

Table Of Contents | Next Section

 "65 Instant Web Design Answers"
www.instantwebanswers.com

FRAMES

Frames are a way to split your browser window into several smaller windows. A while
ago web designers liked to use a lot of them to demonstrate their cutting edge
technology skills :-) But today it became annoying and many times unnecessary. Use
frames only if it absolutely can't be avoided.

One of the ways to utilize frames is creating an easy maintainable navigation system for
your web site. When you need to add a new link you add it only to one page instead of
every page that has links. Frames can also come handy when you need to display a
fixed footer or header on your site that will always show.

#45
How to create simple frames

While this is not meant to be a frames tutorial, I will show you the basics of creating a
frameset of two pages. Here is the simple code to create two frames:

<FRAMESET rows = "10,90" Border = 1>

<FRAME name = "top" src = "home.shtml" scrolling = no noresize>

<FRAME name = "bottom" src = "portraits.shtml">

</FRAMESET>

Notice that the above code will place one frame on top of the other. If you wanted two
frames to be side by side (left and right), change the first line to:

<FRAMESET cols = "10,90" Border = 1>

 "65 Instant Web Design Answers"
www.instantwebanswers.com

The numbers "10,90" simply indicate how large you want your frames to be compared to
each other. So here the first frame will take 10% of the entire window, and the second
one will take the other 90%.

The other two things (highlighted in red) are the file names that will be loaded into each
frame. If you want, you may use a full URL of each page instead of just its file name:

<FRAME name = "top" src = "http://www.helpingfoot.com/home.shtml" scrolling=no

noresize>
<FRAME name = "bottom" src = "http://www.helpingfoot.com/portraits.shtml">

It is VERY IMPORTANT to place your frameset between <HEAD> and </HEAD> tags as it
will not work in the body of the page.

To learn more about constructing frames, please, visit this frames tutorial:
http://www.pagetutor.com/pagetutor/frames/index.html

Here is a little tip on working with frames. When you make changes to any of the pages
in the frame, or to the frameset itself, pressing "Refresh" or "Reload" button on your
browser most likely will not work. To see these changes, put your mouse cursor in the
location bar (where the address is typed in) and press "Enter".

Before deciding to use frames, please, read the "Problems with frames in Web site
design" article at http://www.clienthelpdesk.com/website_tips/problems_with_frames.html

Working Example

#46
How to prevent other people from putting your web site in a frame
and making it look like it's theirs

Many web sites like to put other people's web sites in their frame so it looks like it is
theirs. One web site that developed a strategy around using this technique is
AskJeeves.com. When you use their web site to search and then click on one of the
links in the search results, AskJeeves displays that link in their own frame. Most visitors
don't even realize that they are looking at a different web site now, so the next time they
want to get to the same web site they go to AskJeeves and do the same search again.

If you don't want your web site to ever be put in someone else's frame, just insert the
script below into your web page (reprinted with permission of Brian Clark of
www.gmdstudios.com)
 "65 Instant Web Design Answers"
www.instantwebanswers.com

<SCRIPT>
function unframeit()
{
page = self.location.href;
if (page != top.location.href)
{
top.location.href = page;
return true;
}}
</SCRIPT>

<BODY onLoad="unframeit()";>

The only thing you need to change in the above script is your web site URL. The entire
script should be placed between the <head> and </head> tags.

Notice that the last line of the above code is actually starting the body of your web page.
Replace your current <body> tag with the one above so it could run the script correctly
and get your web page out of frames if anyone ever tries that trick on you :-)

Working Example

#47
How to hide a long web address

Long web addresses are easy to mispell and hard to remember. If you have a long
URL, you can use frames to hide it from your visitors' eyes. Let's say you have a free
web page on Geocities and would like to link to it from your main web site. All you do is
make two frames and set one of them to size "0". Here is the code:

<FRAMESET rows = "* ,100%" Border = 0>

<FRAME name = "top" src = "page.html" scrolling = no noresize>

<FRAME name = "bottom" src = "http://help.yahoo.com/help/us/geo/tour/tour-01.html">

</FRAMESET>

Notice that the second frame is set to 100% of the entire window (while the first one has
the rest *). When you place this code into a web page and save it (for example,
page.html), all you will see is the content of the 2nd frame since it is set to 100%. In the
example you will notice that the address in the location bar says instantwebanswers,
while the page displayed belongs to Geocities. Pretty cool trick!
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Working Example

For more web design tips and techniques

please visit my web site

Table Of Contents | Next Section

 "65 Instant Web Design Answers"
www.instantwebanswers.com

REDIRECTION

Redirection happens when a visitor is taken to another web address by a click of a

button, making a selection from a menu or automatically. Here are some of the most
common ways to utilize redirection technique.

#48
How to send your visitors to the address
they choose from your pull down menu

To simplify or compact your web site's navigation system you may want to create a list of
locations and place them all in a thin box like this one:

When clicked on, the box expands and displays the list of all the pages listed (and of
course each title has a corresponding web address):
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Here is how to do it, step by step.

Step 1:

Insert this script anywhere in your web page's HTML code:

function goThere()
{
var website = document.form.linklist.options[document.form.linklist.selectedIndex].value;

window.location.href = website;
}
</SCRIPT>

Step 2:

Create your menu box using this template:

<form name=form><select name=linklist onChange="javascript:goThere()">

<option value="">Visit My Web Sites
<option value="http://www.helpingfoot.com/?iwa">Milana Web Design
<option value="http://www.helpingfoot.com">Helping Foot
<option value="http://www.marketingshark.com">e-Book Catalog
</select></form>

The most important thing here is that the list name in step 1 should match the list name
in step 2 (highlighted in red) whatever you decide to name it. In the above example it is
 "65 Instant Web Design Answers"
www.instantwebanswers.com

named linklist. Change the URLs and the title of each link (all in red) to those you want
for your web site. You may also add more links by add more <option> tags as shown
above.

Working Example

#49
How to redirect your visitors to another Internet location automatically

When you change your web site address or location of a certain page, your visitors might
still have you bookmarked under the old location. Search Engines might also have you
listed under the old address. To avoid losing these visitors you can insert this short
JavaScript into your old page which will redirect people to the new address:

<SCRIPT language=JavaScript>
window.location="http://www.helpingfoot.com/newlocation.html"
</SCRIPT>

Insert it between the <head> and </head> tags at the top of your old page.

If you are moving to a new domain name, ask your hosting company if they can redirect
your old domain to your new one. This is called "domain name forwarding" and most
hosting companies should offer it for up to 1 year. In the following example you will be
redirected from one HTML page to another (my web design forum). And if you are quick
enough to press STOP button on your browser and View Source, you will be able to see
the above JavaScript code :-)

Working Example

#50
How to check which browser is used and direct your visitor to
correct page

When you know that your web site looks good in Netscape but doesn't display correctly in
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Internet Explorer, you can send your visitors who use Explorer to a different page that will
look good in their browser.

First, create two different pages: one should look good in Netscape, the other one should
display well in Internet Explorer.

For example, you have two pages - indexIE.html and indexNS.html. Here is the code you
should add to your home page (index.html or whatever is the default first file for your web
site):

<SCRIPT language="JavaScript" type="text/javascript">

<!--
var name = navigator.appName
if (name == "Microsoft Internet Explorer")
url=("indexIE.html");
if (name == "Netscape")
url=("indexNS.html");
else
url=("indexOTHER.html")
window.location=url;
// -->
</SCRIPT>

Notice that if your visitor is using neither Internet Explorer, nor Netscape, you should
specify which page they will see. In the code above I stated that if it is a different browser,
simply use the indexOTHER.html. Please note that if your visitor is using a Macintosh
Internet Explorer, he will be redirected to indexOTHER.html as well via the above
JavaScript.

If the version of a browser is important to you, use the script at

http://javascript.internet.com/user-details/browser-version-redirect.html which redirects
not only according to the browser but its version as well.

Working Example

If you need help setting up any of the features in this section,

I can do that for you for a small fee.

Table Of Contents | Next Section

 "65 Instant Web Design Answers"
www.instantwebanswers.com

ROTATION

Though rotating objects can be used as a marketing technique, I created a separte

section to discuss rotation. Rotating is different from randomness. A random picture
appears after refreshing a web page, while a rotating picture appears at a pre-defined
time of the day, week, month or year. Here are some of the useful rotation techniques
that you can put to use immediately.

#51
Display a different headline every day

This could become a great testing tool for your web site. You set up a different headline
every day and keep track of which day brings you the most sales, leads or feedback.
Here is how to do it.

Insert this code into your web page in place of your regular headline. Make sure to
change each headline to your own.

<SCRIPT language="JavaScript">
<!--
now = new Date() //this line determines what day it is
if (now.getDay() == 5)
document.write("Get your web site up and running in 10 days!")
if (now.getDay() == 6)
document.write("Stop wasting your money on web designers!")
if (now.getDay() == 0)
document.write("FREE e-boook teaches you web design")
if (now.getDay() == 1)
document.write("Do NOT overpay your web designer!")
 "65 Instant Web Design Answers"
www.instantwebanswers.com

if (now.getDay() == 2)
document.write("Discover how easy web design is!")
if (now.getDay() == 3)
document.write("Make 35% each time you sell this book!")
if (now.getDay() == 4)
document.write("I am running out of headlines :-)")
// -->
</SCRIPT>

Now when you check your log files, pay attention which day your web site received the
greatest response. Of course you should also take into consideration that weekends are
usually the slowest for Internet users, and mid-week is usually swamped with surfers.

Working Example

#52
How to rotate sales letters or any other pages

Let's say you have several versions of your sales copy and want to test it automatically,
without manually changing it every time. This script will redirect your visitors to a different
page depending on the day of the week.

If you see that your greatest number of sales or leads happens on Tuesday, for example,
then you will know that the sales copy you specified for that day works the best (excluding
all other variables like weather, holidays, weekends, special promotions etc.)

Substitute my URLs with yours:

<BODY onload=gettime()>

<script language=javascript>
function gettime() {
now = new Date()
if (now.getDay() == 0){
window.location="http://www.yourwebsite.com/index1.html"
}
if (now.getDay() == 1) {
window.location="http://www.yourwebsite.com/index2.html"
}
if (now.getDay() == 2) {
window.location="http://www.yourwebsite.com/index3.html"
}
 "65 Instant Web Design Answers"
www.instantwebanswers.com

if (now.getDay() == 3) {
window.location="http://www.yourwebsite.com/index4.html"
}
if (now.getDay() == 4) {
window.location="http://www.yourwebsite.com/index5.html"
}
if (now.getDay() == 5){
window.location="http://www.yourwebsite.com/index6.html"
}
if (now.getDay() == 6){
window.location="http://www.yourwebsite.com/index7.html"
}
}
</script>

</BODY>

In the working example below you will be redirected to a different web site depending on
the day of the week. For example, on Monday you will be taken to www.cnn.com, on
Tuesday - to www.google.com and so on.

Working Example

#53
Have a different image every day of the week

This feature can be used to create "rotate" advertising, to update your web site
automatically or to get a better ad response. It can be used for tracking which
images/banners received better response (though do take a different week day into
consideration - monday is usually very busy, weekends are slow...) or simply to rotate
your advertisers' banners.

First, create 7 images (for 7 days in a week) and name them "1.jpg", "2.jpg", "3.jpg", and
so on. You may then create a directory called "graphics" and upload all seven images in
it. Now place this script where you want your graphic to appear:

<script language="JavaScript"><!--
var today = new Date();
var number = today.getDay() + 1; //remember, JavaScript starts counting from zero, so
we add a number here
document.write('<img src="graphics/' + number + '.jpg">');
//--></script>
 "65 Instant Web Design Answers"
www.instantwebanswers.com

If your images are in GIF format instead of JPG, then change the extension in the code,
as shown above in red. You may also change the name of the folder your graphics
reside in, or remove the folder name completely like this:

document.write('<img src="number + '.jpg">');

Remember to insert this code in place of graphic, not in the header of the web page!

Working Example

If you need help setting up any of the features in this section,

I can do that for you for a small fee.

Table Of Contents | Next Section

 "65 Instant Web Design Answers"
www.instantwebanswers.com

MARKETING

Chances are you have a web site to sell your products or services. Marketing experts will
tell you there are hundreds of ways to optimize your web site to sell better. Still you need
to know exactly how to do it. Whether it is adding a deadline to your web page or
subscribing people to your mailing list, you need to know how it is done. This section
shows you how to implement some of the most common marketing techniques, step by
step.

#54
How to add music to your web site

Many people believe that adding music to a web site reflects its subject better and
prolongs your visitor's stay. Before you decide to use embeded music, though, please
read this argument about visitors' experiences:
http://www.aitech.ac.jp/~ckelly/midi/help/embed.html

To add music to your web site you need to do two things:

Create or find a music file

Insert an HTML code to invoke it

The easiest type of files to use on a web page is MIDI. There are basically two ways a
MIDI file can be used on a Web page - as a hypertext link that can be clicked on or as an
embedded file (background music) which plays automatically when the page is loaded.

Embedded files are loaded along with the rest of the page, so the MIDI file starts playing
whether or not the user chooses to do so. When you want to embed a music file, you
should use this code:
 "65 Instant Web Design Answers"
www.instantwebanswers.com

<BGSOUND="surfing.mid" LOOP ="infinite">

<EMBED SRC="surfing.mid" WIDTH="142" HEIGHT="58" AUTOSTART="TRUE"
REPEAT="TRUE">

Here are the explanations of each attribute and how you can change them:

WIDTH and HEIGHT are the size of the control panel that appears on the page. I set them to
142 and 58, but you can try making the panel larger or smaller.

You can hide the control panel completely by setting WIDTH="0" HEIGHT="2". This way, the
music plays in the background but the viewer of the page cannot stop or restart it.

AUTOSTART="TRUE" is the default setting, causing the music to begin automatically when you
open that page. If you set AUTOSTART="FALSE" it will start playing only when the Play button
on the control panel is pressed.

REPEAT="TRUE" causes playback to loop until the Stop button is pressed. If you set
REPEAT="FALSE" or leave this code off entirely, the song will stop after it plays once.

When you want to put a link to a music file, add it like any other link:

<A HREF="surfing.mid">Click Here To Play</A>

This code assumes that "surfing.mid" file is located in the same directory as the web
page you are linking from.

Here is just a few web sites where you can find MIDI files. To save a music file to your
hard drive you need to right click on its link and choose "Save target As" from the menu.

http://midimarket.8m.com/
http://mp3.about.com/musicperform/mp3/library/weekly/aa050701.htm
http://midimusic.about.com/musicperform/midimusic/msub2.htm
http://www.aitech.ac.jp/~ckelly/midi/loops/

Make sure to upload your MIDI files just as with any other file on your web site.

Working Example

#55
How to allow your visitors to add their e-mail to your mailing list
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Every marketing guru will tell you how important it is to capture your visitors' information
so you could send out mailings and newsletters or announce special sales and events
later. Depending on what you want to do with your mailing list after you have it, there are
several ways of collecting your visitors' e-mails.

I use two free services that allow me to do different things with my mailing lists. Bravenet
and GetResponse. Both of these services give you a special HTML code to insert on
your web site, but here is the difference: Bravenet is a mailing list management system
and GetResponse is an autoresponder.

Bravenet will allow you to send out a mailing (like a newsletter or an announcement) to
your list, while GetResponse will send out an initial message to your subscriber, then
will follow up with automatic messages at the time intervals you specify.

Let me give you specific examples of how I use both services.

I am running a free newsletter called "Web Expert or Not". Every two weeks I mail out the
edition using Bravenet. People subscribe to my newsletter by entering their information
on my web site at http://www.helpingfoot.com, then they receive the newsletter when I am
ready to send it out.

I am also giving away a free chapter of my book - "Create Your First Business Web Site in
10 days" - so people could try it out before they buy. After they download the chapter, I
want to follow up with them to see if they had any problems downloading, what they
thought of it and remind them about it once in a while (people sign up or try things, but
then tend to forget about it). That's where GetResponse comes in. Since people don't
download my free chapter all in the same day, I would be extremely busy trying to follow
up with each one individually. GetResponse actually allows you to create your follow up
messages in advance and set up the time intervals at which they will be sent out.

Decide which service suits best your needs then sign up for either http://Bravenet.com or
http://GetResponse.com. There are other similiar services available on the Web, but I
found these to work the best for me.

To insert the HTML code into your web page, simply follow the instructions on how to
modify your web page in a text editor.

#56
How to create a pop-up window and control the way it looks

Using pop-up windows is a contraversial issue in web design. Some love it, some hate
 "65 Instant Web Design Answers"
www.instantwebanswers.com

it. The fact is if you use it correctly, you can capture your visitors' attention immediately as
they arrive at your site. The trick is to allow your visitors to get rid of the pop-up in a
convenient way.

Let me first tell you how pop-windows work. In order for a pop-up to happen you need
two pages. One web page will tell the other one to open in a new window. The first web
page is called the "main window" and the second one is the "pop-up".

Let's create a simple pop-up window. All you do is use JavaScript's window.open
function and its attributes, like this:

<SCRIPT LANGUAGE = "JavaScript">

function popup()
{

//the next two lines have to be placed on a single line with no hard returns

win2=window.open('page.html','','toolbar=no,menubar=yes,location=no,scrollbars=yes,
height=500,width=380,left=20,top=20');

}
</SCRIPT>
<body ONLOAD="popup()">

Make sure to change the file name (in red) to the one you would like to load into your
pop-up window. For example, if you would like to create a pop-up that will display the
contents of "specials.html", then that's what has to replace page.html

Notice that all the attributes in the parantheses can be modified. For example, you can
change the size of your pop-up window by changing the height and width values. You
can also control where your pop-up will show up on the screen - more to the left, more to
the bottom etc. - by changing the left and top values.

Place the above code at the top of the web page which has to open this pop-up window.
This code will create a pop-up window as soon as the page is loaded (that's why you
see <body ONLOAD...)

Working Example

#57
How to create a "friendly" pop-up window and stop annoying your
visitors

What if you have a frequent visitor who doesn't want to see your pop-up every time he
 "65 Instant Web Design Answers"
www.instantwebanswers.com

arrives at the site? What you can do is allow him to close the window and not see it until
the time you want him to see it again. I accomplish this on my web site using special
feature called "cookies". Here is how to create a user friendly pop-up window (parts of
this code were taken from http://members.ozemail.com.au/~dcrombie/javascript/chap14.html with
Duncan Crombie's kind permission)

Step 1.

Insert this script in the main web page's HTML code (e.g. index.html or whichever page
you want to invoke the pop-up):

<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var bikky = document.cookie;
function getCookie(name)
{
var index = bikky.indexOf(name + "=");
if (index == -1) return null;
index = bikky.indexOf("=", index) + 1;
var endstr = bikky.indexOf(";", index);
if (endstr == -1) endstr = bikky.length;
return unescape(bikky.substring(index, endstr));
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE = "JavaScript">
<!--
if (!getCookie("HelpingFoot"))
{

//the next two lines have to be placed on a single line with no hard returns

win2=window.open('page.html','','toolbar=no,menubar=yes,location=no,
scrollbars=yes,height=500,width=380,left=20,top=20');

document.cookie = "visited=true";
}
//-->
</SCRIPT>
</HEAD>

<BODY bgcolor="#FFFFFF" ONLOAD="getCookie('HelpingFoot')">

Notice that most of the above script belongs in the header of your web page (<HEAD>
and </HEAD> tags should surround it). The last line, though, is starting the body of your
web page. The rest of the information (text and pictures) should follow this line and be
closed by the </BODY> tag..

Step 2.
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Then create a file that you would like to load into your pop-up window (in my case, it is
page.html) and insert this code in it:

<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
<!--
// This function gets things set up, creates the cookie,
// and then moves to the next page
//
function BakeIt() {
// Get the value of the "data" field in the form
var cookieData = "No-popup";
var cookieName = "HelpingFoot";
var days = 30;

// Calculate the expiration date

var expires = new Date ();
expires.setTime(expires.getTime() + days * (24 * 60 * 60 * 1000));
// Set the cookie
SetCookie(cookieName, cookieData, expires);
}
function SetCookie(cookieName, cookieData, expireDate)
{
document.cookie = cookieName + "=" + escape(cookieData) + "; expires=" +
expireDate.toGMTString();
window.close();
}
//-->
</SCRIPT>

<BODY BGCOLOR="white" window.onLoad="window.focus()">

<FORM NAME="cookieForm" onSubmit="return false;">

<INPUT TYPE=BUTTON VALUE="Don't show this window again" onClick="BakeIt()">
</FORM>

This code actually sets the cookie when the button is pressed. You may rename your
cookie into anything you want. I named it HelpingFootbut it can be anything else, as long
as it matches the name in step 1 (I highlighted it for you in red, as well).

You may also play around with the expiration date. For example, mine is set to 30 days.
This means that even if my visitor clicks on the "Don't show this window again" button, in 30
days he will see it again and will need to click that button to get rid of the pop-up for the
next 30 days.

To see how this works, please, visit my main web site - http://www.helpingfoot.com. If you
haven't closed the pop-up window on it before (or within the last 30 days), you should
see it pop up.
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Working Example

#58
How to add today's date to your web site

To let people know your site is updated on a regular basis and is kept current, you might
want to add "today's date" feature to your web page. It will display a new date
automatically each day.

Simply insert this script into your web page HTML code where you want the date to
appear:

<script language="JavaScript"><!--
today = new Date()
var year = today.getFullYear();
var month = today.getMonth();
var date = today.getDate();
document.write(month + "/" + date + "/" + year);
//-->
</SCRIPT>

The result of this script is something like this: 4/25/2001. If you would like to insert an
expanded date, then use the 2nd script below:

<SCRIPT LANGUAGE="Javascript"><!--

// Specify names of days:

var dayNames = new Array("Sunday","Monday","Tuesday","Wednesday",
"Thursday","Friday","Saturday");

// Specify names of months:

var monthNames = new Array("January","February","March","April","May","June","July",
"August","September","October","November","December");

var now = new Date();

var thisday = dayNames[now.getDay()];
var thismonth = monthNames[now.getMonth()];
var thisdate = now.getDate();
var thisyear = now.getFullYear();

document.write(thisday + ", " + thismonth + " " + thisdate + ", " + thisyear);
// -->
 "65 Instant Web Design Answers"
www.instantwebanswers.com

</SCRIPT>

The result of this script is this format: Wednesday, April 25, 2001. Remember, this script
has to be inserted exactly where you want the date to appear - not in the header. You
may surround it with other text or pictures on your web page.

Working Example

#59
How to make an automatic deadline for receiving free bonuses

Many people like to add some sort of rush to their ordering system by creating a "Order
before this date to get free bonuses" feature. If you would like to do the same, just modify
the above script by adding a number of days to the var thisdayand changing the way the
date is displayed. I used this feature on my http://www.firstbusinesswebsite.com

Here is how your script will look now:

Order Before
<SCRIPT LANGUAGE="Javascript">
<!--

// Specify names of days:

var dayNames = new Array("Sunday","Monday","Tuesday","Wednesday",
"Thursday","Friday","Saturday");

// Specify names of months:

var monthNames = new Array("January","February","March","April","May","June","July",
"August","September","October","November","December");

var now = new Date();

var thisday = dayNames[now.getDay() +2];
var thismonth = monthNames[now.getMonth()];
var thisdate = now.getDate();
var thisdate=thisdate + 2;
var thisyear = now.getFullYear();

document.write(thisday + ", " + thismonth + " " + thisdate + ", " + thisyear);

// -->
</SCRIPT>
and Get 6 Bonuses FREE!
 "65 Instant Web Design Answers"
www.instantwebanswers.com

I show my new code in red. You may change number of days to anything you want by
replacing number 2. This code will display the date 2 days after today's date. So if today
is April 16 2001, here is what your visitors will see:

Order Before April 18 and Get 6 Bonuses FREE!

Make sure that both numbers in red are the same (in my example it is 2). Again, insert
this code where you want this line to appear. Oh, yeah... and don't forget to change the
number of bonuses :-)

Working Example

#60
How to let your visitors know when you last updated your site

If your web site is information-driven, it is a good idea to let your visitors see how fresh
the information on your site is.

To insert a long non-formatted date that will look like this: Wednesday, April 18, 2001
22:12:56 add this code where you want it to appear:

<script language=JavaScript>
document.write(document.lastModified)
</script>

If you want the date to look like this: April 18, 2001, insert this script where you want the
date to appear on your web page (used with kind permission of John Walker of
http://321WebLiftOff.net):

<script LANGUAGE="JavaScript">
<!-- The JavaScript Source!! http://javascript.internet.com
var months=new Array(13);
months[1]="January";
months[2]="February";
months[3]="March";
months[4]="April";
months[5]="May";
months[6]="June";
months[7]="July";
months[8]="August";
 "65 Instant Web Design Answers"
www.instantwebanswers.com

months[9]="September";
months[10]="October";
months[11]="November";
months[12]="December";
var time=new Date();
var lmonth=months[time.getMonth() + 1];
var date=time.getDate();
var year=time.getYear();

// Y2K Fix by Isaac Powell

// http://onyx.idbsu.edu/~ipowell

if ((navigator.appName == "Microsoft Internet Explorer") && (year < 2000))

year="19" + year;
if (navigator.appName == "Netscape")
year=1900 + year;
document.write("<FONT face=verdana color=brown><b><center>" + lmonth + " ");
document.write(date + ", " + year + "</center><b>");
// End -->
</script>

As you can see, the second script makes your date look more user friendly and better
formatted.

Working Example

#61
How to make a "warning" or an "alert" box for your web page

Alert boxes can be used to provide extra information to your visitors. For example, when
someone is filling out a form, you might allow them to click on your questions for more
information. I do this on my "FREE Mail Form" tool:
 "65 Instant Web Design Answers"
www.instantwebanswers.com

When people click on the blue links, they get an alert box that gives them more
information on how to fill out my form:

Here is the code for creating an alert box which appears when the link is clicked:

<a href="javascript:window.alert('Your visitors may respond in two ways: typing their

answer, or selecting from the answers you provide here')">How would you like your
visitors to respond?</a>

I like using these alert boxes better than opening a new page with instructions. The box
takes no time to load and can be easily closed by clicking "OK". It is important not to
abuse this technique, however. Too many boxes can be irritating to your visitors. Only
use them when absolutely necessary.

Working Example

#62
How to allow your visitors to bookmark your web site
even if they don't know how
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Some new Internet users might not remember how to bookmark a web site. You can
easily allow them to book mark your site by providing them with a link. Insert this code
anywhere on your web page:

<A href="http://www.helpingfoot.com/:Add This Page To Your Favorites!"

onDragstart="return false" onClick="window.external.AddFavorite(location.href,
document.title);return false">Add this page to your Favorites</A>

You may change the wording from "Add this page to your Favorites" to "Bookmark this
page" by typing over the text in red. And don't forget to change the URL location to your
own. While this is a very handy tool, it will only work on Windows machines.

Working Example

#63
How to allow your visitors to "Accept Terms"
before viewing your web page

This technique is frequently used by web site owners who want their visitors to agree to
certain terms before viewing a page. For example, adult web sites may want to use it to
filter minors and those who might be offended by their content. Another way to use this
technique is to require your visitors to agree to the rules of the club before becoming a
member.

This code has been kindly provided to me by Colin PC, the webmaster of the
www.insighteye.com):

Step 1

Replace your existing body tag with this one:

<BODY onLoad="loadedvar=true;">

Step 2

Insert this code where you want the button to appear:

<FORM name="terms" action="http://www.helpingfoot.com" method="get">

I accept: <INPUT type="checkbox" name="agree" value="ON">
<INPUT onclick="if (loadedvar) {if (document.terms.agree.checked) {document.terms.submit();} else
 "65 Instant Web Design Answers"
www.instantwebanswers.com

{window.alert('You must check the box to continue.')}}

else {window.alert('Please wait...')}" type="button" value="Continue...">

<INPUT type="button" value="Exit" onclick="document.location.href='http://www.helpingfoot.com;">

</FORM>

Things in red can be changed. Make sure that both URLs are the same in the above
code (in my example it is http://www.helpingfoot.com)

If the visitor does not check the "Accept" box, he or she will be prompted to do so.
Otherwise, the next page will not be accessible. Keep in mind, though, that if someone
can read JavaScript they will be able to figure out what that next page is and visit it without
agreeing to your terms. This is only a loose way to protect your content. If you need more
security, use password protection available from your host as discussed in the
"Protection" section.

Working Example

For more web design tips and techniques

please visit my web site

Table Of Contents | Next Section

 "65 Instant Web Design Answers"
www.instantwebanswers.com

PROTECTION
Very often webmasters look for a way to protect their web pages from public viewing.
Whether it is for creating a membership web site, or just to have a certain page visible
exclusively to friends and family, there are several ways to do it. Find out what is the best
protection for your web site by reading this section.

#64 - How to password-protect your web site

There are many ways to password-protect a web page. You can use a JavaScript to do
that, a third-party service or rely on your hosting company's servers' ability to do that. The
last one is considered the most secure way, but I will tell you about other ways as well.

George Chiang of wsabstract.com has created a relatively secure technique to

password protect your web site. Fill out his form at
http://wsabstract.com/epassword/index.htm, press "Generate Code" button and a
special code will be generated for your web page protection. Follow George's
simple instructions.

Another way to password-protect your web site is by using a third-party service

like the one Bravenet.com offers. All you do is open an account with them, tell
them what URL you are trying to protect and insert the code they give you into your
web site's HTML.

The most reliable way to protect your files, though, is still using your web host's
capabilities. Every directory that you want to password-protect must contain two
files: .htaccess and .passwd

While the first one has to be named that way, the second file which
contains the actual password can be named anything you choose. My
hosting company allows me to make changes to username and
password, as well as add new users, through their Account Control
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Center on their web site.

Since creating password protection using .htaccess is a little more

advanced topic, I will leave it up to you and your hosting company. Contact
them and ask what is the procedure of password-protecting your files.

A good host will guide you through this. To be fair, I must say my host is
terrific in this respect. I only pay $5.95 a month to my hosting company -
Pair.com, and get full e-mail support and complete control over my
account via their online Account Control Center.

! If you have access to cgi-bin and are comfortable installing a CGI

script on your web site, you can always check out these free
password protection scripts that will do a great job of managing
users and passwords:
http://webknowhow.net/dir/CGI/Scripts/Passwords

If you need help installing your CGI scripts, check out my new book
called "How To Install CGI Scripts" at
http://www.firstbusinesswebsite.com/InstallCGI or e-mail me at
[email protected] for help.

#65
How to stop people from stealing your graphics
by disabling right click on your site

To prevent people from stealing your graphics, you can use this script to disable
right-click on your web page. Simply put it in the <HEAD> tag of your page: (reprinted with
permission from http://developer.irt.org/script/969.htm)

<head><SCRIPT language="JavaScript">
<!--
var sorry="Sorry, the right-click has been disabled..."

function click(e) {
if (document.all) {
if (event.button == 2) {
alert(sorry);
eturn false;
}}
 "65 Instant Web Design Answers"
www.instantwebanswers.com

if (document.layers) {
if (e.which == 3) {
alert(sorry);
return false;
}}}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// -->
</SCRIPT>
</head>

Remember, though, that anyone who is a little more than a newbie on the Web, can look
at your HTML code and figure out how to get this image. For example, if you come
across a web page that has a right-click disabled, you can go to View-->Source on your
menu bar and find the name and location of the image. Then you can go back to their
web site and type it in the location bar.

For example, if the web site address is www.foolishtricks.com, and you found the name
of the graphic to be logo.gif, type this into your location bar to view this graphic:

www.foolishtricks.com/logo.gif

If you found the name of the graphic to be something like picfolder/logo.gif, then type
this into your location bar:

www.foolishtricks.com/picfolder/logo.gif

Once you see the image, right-click it to save. There is nothing here to protect the picture
from saving. As you see, this is quite trivial, and if you use this script, it will only keep
away those who are new or only somewhat experienced to the Internet.

Working Example

Table Of Contents | Next Section

If you need help setting up any of the features in this section,

I can do that for you for a small fee.
"65 Instant Web Design Answers"
www.instantwebanswers.com
 "65 Instant Web Design Answers"
www.instantwebanswers.com

GETTING HELP
How To Make 35% Every
Time You Sell This and
Other Books from My
Catalog!

It's easy to become my

partner. Simply use your
free ClickBank username
and put a link on your
web site. When someone The 65 techniques in this book should be easy to understand and implement.
clicks on your link and Every webmaster, however, has a different level of skills and knowledge. If you
buys this book from my
site, 35% of the total sale have never manipulated HTML before or if this is your first time seeing a
will be immediately JavaScript, you might need some help to get started.
deposited into your
account. First source of help I would recommend is my web design forum - most likely
another visitor or I will help you out. Just click on
Everything is handled by http://network54.com/Hide/Forum/90384 and post your question.
ClickBank, the Internet's
most popular credit card
processing company. I can also provide you with custom help and explain to you how I did it, for a
small fee. If you need help setting up any of the features discussed in this book,
To become my partner or any of the free Web tools outlined below, please, contact me at
today, click here. [email protected] and I will be glad to help.

Below are the Web tools that I can help you install on your web site. If you don't
see what you are looking for, please, ask me - you never know! :-)

Visitor Poll/Survey (collect opinions)

Forum/Message Board (host discussions)
Live Chat (hold live discussions)
Classified Ads (generate repeat traffic)
Simple Password Protection (members only)
Guestbook (gather feedback)
Search Engine (search enable your site)
Counter (count visitors)
Feedback Form (collect visitors' information)
Daily Headlines (automatic site update)
Daily Cartoons (create fun content and repeat visitors)
Music background (set the mood)
Tell-a-friend (create a traffic stampede)
Autoresponder (follow up with customers automatically)
Mailing List (collect visitors e-mails)
Animated slide show (product demonstrations)
Shopping Cart (digital delivery or physical shipments)

Table Of Contents | Next Section

 "65 Instant Web Design Answers"
www.instantwebanswers.com

BONUS REPORT

As promised, here is your bonus. I asked Simon Marcantonio to write it specifically for
this book. Simon is an expert on Search Engines as he is the founder of the UKSprite
search engine. I know his expertise first hand. Ever since he placed my web site in his
search engine, the traffic to my web site at least doubled! Read this almost scientific
report revealing the most secret insights into how Search Engines work to achieve
incredible results with your search engine rankings.

The Search Engine Race

In the search engine race your site needs to finish at in least third place; that is, within
the first three pages of search results from any of the major search engines. As the
majority of searchers will only use the first three pages, finishing anywhere else in this
race can mean the difference between your website receiving a flood of traffic to a trickle
of hopeful searchers.

Because the first three pages of search results usually equals only thirty listings getting
your site into one of those coveted places can seem impossible. Fortunately there is
help at hand in the form of 'meta data'.

Meta data is invisible information; it's data about data, and for web pages this data helps
to describe what material is contained within a page. Meta data is invisible because
although it is contained in your web pages it is not visible on screen to your users.
However, search engines do read meta data, and if used correctly this invisible content
can improve the position of your site in search engine results.

Structure Of Meta Data

So how is this invisible meta data used? You may already be familiar with its key forms -
the 'description' and 'keyword' tags used in many millions of web pages.

But if millions of web pages are already using meta data, how can you achieve an
advantage by employing its use at your site? Simple, most people do not spend
anywhere near enough time constructing and refining meta data. In fact many sites use
the same meta data throughout the site, the same data on every page. If meta data is
supposed to describe other data, or the contents of a page, there is no point in using the
 "65 Instant Web Design Answers"
www.instantwebanswers.com

same meta data on all pages - what you would be saying is that all your pages are
identical!

Meta data is placed between the opening <head> and the closing </head> tags of your
html source and its structure is simply:

<meta name="keywords" content="">

<meta name="description" content="">

You can see from the above how simple it is to embed meta data into a web page,
perhaps it is this simplicity that causes many webmasters to spend only a few minutes
attempting to fill these tags with useful and ultimately profitable information. By spending
time refining your own meta data you are already giving your site an advantage over
millions of others.

Choosing The Best Keywords And Descriptions

First there are some important rules, and in some places laws that you must remember:

Don't use trademarks, product names or the names of businesses in your meta data
unless you have permission to do so. For example, just because your e-commerce site
sells a Disney video does not necessarily mean you have the right to include the Disney
name in your meta data. Check first before you use the intellectual property of another
organization or individual.

Don't use the same meta data on every page. As mentioned earlier, meta data is 'data
about data' - it is intended to clarify the content of each individual page - not an entire
site. Although some search engines are now attempting to 'theme' websites, it is still
important to describe the contents of individual pages. It is not yet clear how effective
search engines will be at grouping an entire website into one theme, so for now stay with
the current play of the game.

Don't include words, phrases or descriptions in your meta data that do not relate to the
material on the page. This is a common practice of spammers who attempt high search
engine positions for popular search terms in the hope of attracting users to an unrelated
site. By including meta data that does not match the theme of your page you may
unwittingly place yourself on the same blacklists that many spammers are relegated to.
It is difficult to restore a clean sheet to a site that has been banned from a search engine.

Don't try to frame the contents of another site within your own site with the hope of using
their content to boost your position; search engines will index the framed site individually,
making no connection with your own domain name no matter what meta data you
employ.

Don't try to outsmart the search engines. That's a short-term game that will ultimately
backfire, so play by their rules and play it safe!

Now are you ready to begin constructing your meta data. We'll start with the 'keywords'
meta tag. As a simplified example we'll imagine a site that lists recipes and cookery
tips. Each section of the site deals with a different aspect of cookery, such as omelettes.
 "65 Instant Web Design Answers"
www.instantwebanswers.com

In the omelettes section we have a page with a recipe for a cheese omelette (not much
there, but it's just an example). Your meta 'keywords' tag may look like this:

<meta name="keywords" content="cookery tips how to make cheese omelettes

recipes">

It is important not to separate each word with a comma, doing this forces the search
engine to group the words into phrases and so limits the number of times this page will
be returned in a search. By keeping the data free of commas we are allowing the search
engine to return the site when any of the keywords above are used in a search - in any
combination. We also use plurals whenever possible, most search engines will match
the singular version of a keyword based on its plural. With the above data our site has a
chance of a higher-placed listing for searches such as 'how to make cheese omelettes',
'omelette recipes', 'cheese omelettes', 'omelettes', etc. Because search engines usually
ignore words such as 'a' and 'the' we can leave those out of our keywords tag. With this
simple example it's easy to see the power of hidden meta data.

The keywords above could list any other relevant terms that a user at a search engine
might look for, and you will find most of those terms on the page you have constructed.
Notice however, that there is no mention of 'fried chicken' - it's not on the page so we
don't include it in the meta data - even though our site is all about recipes. Once you
have the user at your site, your content and navigation will guide them to the other pages.

We construct the 'description' tag next. This tag serves two purposes, first, it helps your
search engine ranking if you have a well-constructed tag, and second, it provides search
engines such as AltaVista with a description to display with your listing. With no
description tag AltaVista will take the first few words of your page and display that to the
user. If the first line of text on your page is a navigation bar the description that potential
visitors could see may not make much sense, and there's little point having a great
ranking if most users skip over your link in favour of something more comprehensible.

So what should you put in the description tag? This tag should be a human-friendly
summary of the contents on your page. In the recipe example above a useful description
may be:

<meta name="description" content="A large collection of detailed recipes for cooking

delicious cheese omelettes. Many other recipes are available at this site.">

Some search engines may also use the words in your description tag when determining
the position of your site and so again, the contents of this tag should closely match the
actual content of the page it represents.

Your keyword tag should be limited to approximately twenty words, while the description
tag should not exceed twenty-five words, anything longer is usually shortened in the
search engine listings.

Useful Tools

It is especially difficult to build a useful 'keywords' meta tag for each page because you
need to think of as many keywords as possible that your users may type into a search
 "65 Instant Web Design Answers"
www.instantwebanswers.com

engine. You probably have a list already, based on the contents of each page, but how
can you evaluate every possible combination?

Of course, it's impossible to think of all keyword combinations, but you can get very close
using one of the best tools available on the Internet; GoodKeyWords.

Good Key Words

GoodKeyWords by Softnik Technologies is a free download that enables you to enter a
keyword and then build a list of related words based on the searches from several
popular search engines. If the keywords it returns are relevant to your page you can add
them to your 'keywords' tag.
http://www.goodkeywords.com

Agent Web Ranking

Although not a keyword generator, you can use Agent Web Ranking to quickly and easily
find where your site currently ranks on many search engines for any keyword you specify.
This free ad-supported software supports all of the well-known search engines along
with a selection from the United Kingdom and Germany.
http://www.agentwebranking.com

Search Engines Using Meta Data

All major search engines with the exception of FAST, Google and Northern Light take
meta descriptions into account when evaluating search engine rankings. All major
engines other than FAST, Google, Northern Light and Excite take meta keywords into
account.

Not all search engines read meta data, but many do and there is no harm in supplying
this information in your pages. Search engines that consider meta data to be important
will rank your site according to the information you supply - others will simply ignore the
meta tags in your page.

For an hour or two of work, one meta tag friendly search engine may list you in their top
ten and send you considerable traffic. Bearing in mind the amount of time and effort put
into building a web site, an extra hour could make all the difference.

Conclusion
Search engines are constantly updating the methods they use to rank sites, they do this
to provide better search results based on the habits of their users and to combat the
ever-evolving methods used by spammers to gain higher rankings. Because of this
constant evolution it is important to stay up-to-date with the latest changes and to make
modifications to your meta data when necessary.

However, by adding useful meta data you can be sure that you have taken an important
step to ensure the success of your site in the search engine race; a step that much of
your competition will be oblivious to.
 "65 Instant Web Design Answers"
www.instantwebanswers.com

By Simon J Marcantonio
A Director and founder of the UKSprite search engine.
http://www.UKSprite.com

Table Of Contents | Next Section

 "65 Instant Web Design Answers"
www.instantwebanswers.com

I have personally been looking for quality products to add to my

catalog. I spent time and money purchasing the resell rights to
these e-books. Now you can have any one of them in a matter of
seconds for a very low price! To order any of these products, click
on "Buy Now" link next to each book cover, or purchase the entire
package of 15 books for just one low price (see below).

If you have questions, please, contact me at

[email protected] and I will be glad to help you.

Purchase each book individually, or get entire

package (except 1st book ) for just $69.95
Click Here to Order All 15 Books!

Almost Each Book In The Package Comes With

Resell Rights Automatically!
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Create Your First Business Web Site in 10 days!

No Experience Required.
Interactive Manual

Learn creating your first web site by watching video in this step-by-step
manual for the true beginner in web design! There is a hard way and
an easy way of learning things. Reading a tutorial full of technical
jargon and confusing procedures is a hard way. Watching someone
else do it right in front of your eyes - IS THE EASY WAY!

This manual utilizes Netscape Composer, an easy to use web page

editor, to guide you through adding text, links, images and other
objects to your web site.
$47.00
Sys. Req: Windows or Mac OS
Buy Now

Killer Net Ads. Writing Words That Scream BUY ME!

by Bob Silber

Table Of Contents (13 chapters)

Surviving In The Belly Of The Beast, Your Artist Tools - The Care &
Feeding Of Your Muse, Jump Start Your Project Or How To Avoid
Writer's Block Every Time, How To Create Movies & Dreams In The
Mind Of Your Reader, This Twist Technique Is A Wee Wicked Marketing
Tool, The Art Of Manipulation Or Spinning Gold As A Marketing Spin
Doctor, Become A Marketing Savvy Whirlwind Using Word Stories, The
Marketing Of Chicken Lips Or The Theater Of The Absurd, Using
Superstar Endorsement Power Free, The Piggyback Game: A Neat
Little Trick To Capitalize On The Millions Spent By The Major
$17.00 Advertisers, The Quick & Dirty Guide To Getting Published By The
Major Players, Interviews With DEMC & InternetDay With Tips From The
Buy Now Editors On Getting Published, Secrets To Writing Killer Net Ads Like
The Pros, Anatomy Of A Master Sales Presentation.

No Resell Rights for This Book

 "65 Instant Web Design Answers"
www.instantwebanswers.com

7 Secrets to The Complete

Unlimited Guide to Building
Traffic Your Own Web
Site
Sys. Req: Windows
95/98/NT and
Internet Explorer 4
A Fully Interactive
or above Training Workshop for
Discover the most any one who wants
important things to to build a web site. It
do to generate is not just a book to
major traffic to read. We have used
your web site. the great qualities of
the Internet to allow
$9.97 $11.97 you to partake in
This is a short
ebook that offers practical exercises.
Buy Now seven suggestions Buy Now This means that you
on how to increase will be learning many
traffic to your Web of the skills and
site. Learn about terminology
targeting, ezines, necessary to get your
search engines, site built and loaded
and other ready for the world to
techniques that view. We teach you
take advantage of the different aspects
the power of the of the web page
Internet to bring design, such as
more traffic to your backgrounds,
site. It's easy to formats, graphics,
read, the interface tables and much
is attractive, and more. (more info)
you may be able to
pick up some
pointers fairly
quickly.
 "65 Instant Web Design Answers"
www.instantwebanswers.com

E-Mail Marketing Classified Ad

Strategies Secrets 2001

Simple 4 Step System Classifieds are the best

To Create Your Own dollar-for-dollar return in
Internet Cash advertising! This eBook?
Machines! Are you will show you the secrets
ready to learn a simple to writing and making
system that Master money with
Marketer Allen Says of "order-pulling" classified
the Internet Marketing ad. It also comes with ...
Warriors has used over -----Free Bonus # 1 - A
the last 5 years to sell complete State-By-State
$24.97 hundreds of thousands $9.97 list of classified ad
of dollars in products sources where you can
Buy Now and services? advertise your ad all over
Buy Now North America at very low
prices.
-----Free Bonus # 2 -
Classified Ad Blaster -
Using free software and
our easy-to-use interface
you can submit your
classified ad to hundreds
of online ad sites in
minutes. Our Classified
Ad Blaster is the fastest
way to post your
classified ad online.

The complete eBook Cover

eBay™ Templates
Marketing
Course More than 120
eBook cover and
Software box
Discover how to get templates ready for
started and where you to add wording
to get products, and graphics. Now
marketing strategies you can create
and what to do at images for your
the close of each information products
auction. in just minutes. Use
the images for your
$9.97 You can be running $9.97 self or sell them to
your own eBay™ the others, even just
Business, and Buy Now to sell the Templates.
Buy Now making money Whatever you
today! choose to do. You
keep every cent you
make.
This package will
pay for itself plus
more with just a little
time and effort from
you.
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Your eBook Daily E-Mail

Marketing Plan!? Marketing
Strategies
Best seller at Revealed!
Amazon.com
How To
This is a detailed Eliminate The
daily eBook Three Most Lethal
Marketing Plan And Costly
designed for a Mistakes That
period of four weeks Everybody Else is
to help you to $29.95 Making!
market your eBooks How To Use
$9.97 on-line. Buy Now E-Mail Marketing
So You Never Get
Buy Now Perform just 3 in Trouble With
marketing activities Your ISP - No
per day and you will Matter What Type
begin to see the of Business You
best possible results Have!
within 60 days or How To Turn a
less.
Lot More of Your
Web Site Visitors
into Repeat
Customers!
Start Seeing
Profits From
E-Mail
Immediately!
Plus...
Free Proven
Sales Letters,
Promotional Tools
provided by the
Author upon
registration.
 "65 Instant Web Design Answers"
www.instantwebanswers.com

Magic Letters - Net Success - Build a

How To Write So Successful Web Site
People Buy Now! that generates cash
flow effortlessly!
If you want to make
money on the This is a fast, no-frills
Internet - this eBook guide to earning money
is the first step. It will on the internet. In a
reveal the methods compact, "checklist" style,
used by history's you will get the
Direct Response explanations and the
Master's! "features to look for" in
many internet marketing
$19.97 issues: affiliate programs,
$9.97 banners and banner
Buy Now exchanges, web site
Buy Now hosting services,
reciprocal links, publicity,
traffic analysis,
communities, and much
more.

That "checklist" style

gives hundreds of quick
guidelines for successful
marketing in newsgroups,
email, and other venues.

A Cheap And Self publish at

Easy Guide To the Speed of
Self-publishing Thought
eBooks Best Seller at
Best seller at Amazon.com
Amazon.com
Learn how to self
This eBook is a publish your
complete guide that thoughts and your
teaches step by eBooks with the
step instruction on best selling eBook
how to publish your author and
eBooks. It includes self-publisher.
where to find the
most up to date This eBook will
$9.97 marketing $9.97 walk you step by
information, how to step through
Buy Now sell eBooks without writing your first
"talking and selling" Buy Now eBook and then
anyone. present free
resources and
This eBook includes marketing plans
many marketing that will allow you
techniques that to market your
require no marketing eBooks using the
budget. It also same free
teaches you how to resources that
negotiate eBook helped the author
publishing contracts publish 3 eBook
 "65 Instant Web Design Answers"
www.instantwebanswers.com
publishing contracts
from your computer bestsellers and
two print on
at home.
demand best
selling title at
Amazon.com.

The Ultimate Autoresponder Magic

eLibrary 3000+
A Massive Collection of
Here you will find Winning Autoresponder
3,000+ Free Messages to Model, Copy
eBooks, Reports, and Swipe. This new
Software, Free ebook contains some of
Services, Free Web the most successful and
Space, Free persuasive autoresponder
Games, Free messages ever written. It's
Screen Savers, jam-packed with
$9.97 Free eCards, Free autoresponder messages
Chat Rooms ... and that have been proven to
many other useful work by the top Internet
Buy Now
resources. Pros.
$14.95
Buy Now
While others are For example, one series
claiming the written by Declan Dunn
eBooks alone are has been used
worth $1,000, you successfully for over 2
will get them all years (and it's on
complete autopilot - he
from here for Free.
doesn't even lift a finger)
to sell hundreds of
There are tons of thousands of dollars of his
stuff you will be products and services.
able to download.
Some of the
download files will
generate hundreds
of files and
reports. We advise
you that you
choose what you
need then
download and try
them as you go.

Table Of Contents