workpart9

MAKING WEB PAGES WORK FOR YOU AND YOUR CLIENTS antelp2.gif (4746 bytes)

PART IX - OTHER TECHNIQUES

CERTAIN ELEMENTS IN A SITE ARE BEING DEBATED.

Example: should you debute a Web site before it's really finished? Users who click on the unfinished section see a small "under construction" sign. Some Web users hate it and some don't seem to mind. The users who hate it won't return to that site especially if they revisit and it's still under construction. "Under construction" sites still receive visitors. Some developers claim it to be a smart marketing move, it piques the interest of visitors who figure an unfinished site is worth revisiting to see how it turns out.

Deciding to roll out an unfinished site you can apply two rules:

First, finish most of the site.

Second, date the unfinished section so visitors know when completion is to expected.

Otherwise, returning several times to an "under construction" site with no signs of ever being finished, they'll give up. (Don't use "UNDER CONSTRUCTION")

Clever sites attract visitors who will return regularly to see what's new. One trick to encourage users to revisit, is a short flashing warning on the computer screen when an external link is clicked on. Messages like, "You're now leaving our site. Save the URL so its easy to come back."

Users can choose to save the address in their browser software's memory just by pulling down the "save" option on the menu bar. This is called "bookmarking," it saves users from remembering long, awkward URLs of the sites they visit often. Instead, they select a site from the bookmarked list on the browser, and the software remembers the URL.

Users may buy something while browsing the sites. If there is no sale, how is the company going to know that anyone has stopped by? It's not a real store, where the proprietor can see how many customers have come in. No, it's better–Web-site operators can collect more information than store owners. Such as: "In a given time period how many people stopped in?" and "Where did they come from, how long did they stay, and what did they look at?"

FORMS

Are a method of creating interactive pages where readers answer questions and send their response to you. They are a very complex topic, and cannot be covered in a small period, this will be a very basic introduction.

To start any form, you must declare that you are making a form, and give your information to the browser about what to do with it. You can do this in the form tag, through two required parameters, action and method.

To create a form uses the mailto action:

<form action="mailto:Yourname@email.com"
method="post" name="My Form" enctype="text/plain">

The action parameter specifies where results will be sent, and the method parameter specifies how information will be sent there. At the end of the form close the form tag (</form>).

INSIDE THE FORM

In the form you can specify any kind of HTML codes you wish. The only ones that are important are the input types and the submit tags. Name parameters are headings that appear on the form and help organize the data.

Following are different input types:

•radio - click your choice of buttons •checkbox •name - is a one line box to enter information •hidden - important information not visible on the screen

Example of a radio box and a checkbox:

Do you like this example? OYes ONo
Do you understand so far? Yes No

Coding for the above radio form:
<input type="radio" value="Yes"

name="Do you like this?">Yes
<input type="radio" value="No"
name="Do you like this?">No

Coding for the above checkbox form:
<input type="checkbox" value="Yes"
name="Do you understand?">Yes
<input type="checkbox" value="No"
name="Do you understand?">No

Name input example:
Enter Your First Name:

The creating code for the above name entry blank is:
<input name="First Name" size="35">
35 is the width of the input box created.



Text area input example :

Further Comments:



The creating code for the above text area input box is:

Further Comments:

<text area name="Further Comments" rows="5" cols="40">
</text area>

The box is 5 rows top to bottom, 40 columns left to right. Please note the text area must be closed afterwards.

A hidden text example:

<input type="hidden" name="subject" value="My Form Calling">

For easy identification and to send the form to the correct recipient with an appropriate subject heading, these are necessary.

Select - is a menu list you choose from.

An example:

Your overall impression of this tutorial was:

Coding for the above menu selection is:
<select name="Impression of Tutorial">
<option value="Very Useful">Very Useful</option>
<option value="Somewhat Useful">Somewhat Useful</option>
<option value="Below Expectations">Below Expectations</option>
<option value="You Really Don't Want To Know">You Really Don't
                        Want To Know</option>

</select>

The option tag is closed at the end of each choice. Select tags are closed at the end of the choices. Value parameters are the text printed in the menu choices.

Submit buttons - are used to send information off to where it’s going.

Reset buttons - clear any data entered.
The creating code for the above submit and reset buttons:
<input type="submit" value="submit">
<input type="reset" value="reset">

FAST LOADING PAGES

Visitors, statistics show, are willing to wait about 10 seconds for a page to load before moving on.

If your front page takes a longer than this load into a browser, you may want to redesigning it so the number of visitors that decide to stay at your site increase.

Not everyone has a cable modem, a T1, or ISDN connection. The truth is a very large number of surfers have modems less then 56k.

There are ways to speed up the loading time:

1. First take out the embedded multimedia (background song, videos etc.) unless they’re absolutely necessary. They might be a great effect, but if the visitor gets impatient and leaves, then it’s a loss to you.

2. Save loading time by using some of the images on the other pages (these will be on the browser's cache and will load faster).

3. If an image loads slowly, put it on the page leading to it (at the bottom of the page) by adjusting the width and height to 1.

For example: Doing this will make the image on the first page almost invisible, but will save your image in the browser's cache.

4. Use height and width tags on the images, so the browser will know were everything is before it’s loaded. That way users can read what is on your site before the images are loaded.

5. Your images need to be reduced.

6. If sharp resolution is not really needed, use GIFs since they load faster than JPEGs.

7. When using tables, don't make large ones, instead use several small ones (you can link them up if you want). This will be quite a bit of help. Also, tables inside other tables will take longer for the browser to work out the spacing.

8. Remove the spaces between your coding. Do this manually to avoid confusion and get the best results.

9. Last, make sure the front page is short. A long page will take time to load, even if it's all text. You can use a link for extra info on another page.

WHEN YOUR MOUSE MOVES OVER AN IMAGE

You've probably seen it on many other sites, it's where the images interact with your cursor, once you pass it over them. Well, what happens is there are 2 images, and when your mouse moves over the image you see, it is replaced by another.

To do this, you will need two images that are similar or will look good when being replaced by each other.

Let's call the first image to the right "banoff.gif" and the second one "banon.gif". You want it to appear as though the first button changes color and text when the cursor is placed over it.

Place the following Java Script below on your web page, somewhere between the <HEAD> and the </HEAD> tags.
You will only need to change the names of the images. <SCRIPT LANGUAGE = "JavaScript">


</SCRIPT> Next, identify the image itself on the Web page. Copy the link and image insertion HTML below to do this: <A HREF ="INSERT_URL.html" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')">

<IMG SRC="banoff.gif" NAME="img1" border=0></A> If you want to do this with more than one image, concentrate on the blue part of the script. You will copy the blue part, and paste it directly below it. Next, make changes to what was just pasted. So change the 1's to 2's, then change the images to what you want to use for your second image replacement.

To place the second image on the page, copy the blue areas as before, but change all "img1" to "img2" and make sure to change the IMG SRC tag for the second image. You have to change the link too. You can do this for as many images as you want, just continue replacing the numbers and images.

End, Are there any other questions:

Go back to Index Page