Novell Home

HowTo: Create simple effective web pages for a business

Novell Cool Solutions: Feature
By Stomfi

Digg This - Slashdot This

Posted: 4 May 2005
 

StomfiLearning to use Linux at Home and Work
Welcome to my ongoing series of HowTo articles designed to help Linux newbies get comfortable with Linux. Before trying any of these HowTos, take a few minutes to study the prerequisites so you can hit the ground running.
--Stomfi

This How To uses Mozilla Composer with a bit of HTML editing to create a set of three simple but effective web pages for promoting a business. If you like NVU you can use that instead. It doesn't publish the site. We might address that in a later How To.

First create a folder in your home directory to store all the pages. Mine is /home/stomfi/RSITE. Create a sub folder named "images" to store all the images.

I have used background images for each page to add interest for the viewer. The first page has the most interesting background, and tell the viewer what the business does. It includes two images which are links to the other two pages. One of them is animated as the content of the link is a page where simple gif animations of manufacturing processes can be viewed.

The other page is an inquiries page giving the email address and postal address of the company.

Each of the two link pages contains a link back to the home page.

The beauty of using simple gifs for the animation page is that they are easily created by the average newbie, using a tool like the Gimp and a digital camera that takes short video clips. Because of this simplicity they can be changed every 1 to 3 months, to generate interest in the site.

Some Java Script is included on this page so that images are cached to speed up the viewing experience.

Here are two pictures of my folders, with dummy gif files. You'll have to visit the site to see the real thing.





Here is the Home page as I created it in Mozilla Composer.

Select all your pictures and backgrounds you are going to use and save a copy in the "images" sub folder. It you use a tile background it will load much quicker. Setting the background is done via the Format menu in the menu bar. Click on Page Colors and Background.

Here is the dialog window. Because my background is so dark the text disappears as you can see in the next dialog.

Click on the "Use custom colors" radio button and customise them to suit like this.

I used the text size controls, the alignment and the bold feature to make the information noticeable, but importantly, I have only used a single font. Using too many fonts, confuses the brain.

The two images which link to the other pages are down the page where the eye will naturally go. Each one has an explanatory text.

This is the dialog window for inserting graphics:

Because I want the images to be relative to the site folder I delete the first part of the path.

Insert a tool tip if you need one, and an Alternative text. This is in case the path to the image gets broken.

The final job is to join the link.

This is done for each of the two images on the Home page. The other link is joined to the page called "enquiries.html".

This is the page:

In this case the link is joined to the rsite.html page.

This is the Animates.html page:

Each one of these pictures is a static image, with the tool tip "Click to Animate" and an Alternative name about the animation it activates. The static image is one of the animation images.

All the work is done by Java script functions. Clicking the <HTML> Source tab at the bottom of the Composer window, allow you to edit the source.

Here is the modified source to allow the animations to start and stop:

<html>

<head>

<meta content="text/html; charset=ISO-8859-1"

http-equiv="content-type">

<title>animate</title>


<script language="JavaScript">

<!--

function imageLoad(){

imgstat1 = new Image

imganim1 = new Image

imgstat1.src = "images/braid1.gif"

imganim1.src = "images/braidani.gif"

imgstat2 = new Image

imganim2 = new Image

imgstat2.src = "images/corl1.gif"

imganim2.src = "images/corlani.gif"

imgstat3 = new Image

imganim3 = new Image

imgstat3.src = "images/drift1.gif"

imganim3.src = "images/driftani.gif"

imgstat4 = new Image

imganim4 = new Image

imgstat4.src = "images/helix1.gif"

imganim4.src = "images/helixani.gif"

imgstat5 = new Image

imganim5 = new Image

imgstat5.src = "images/moeb1.gif"

imganim5.src = "images/moebani.gif"

imgstat6 = new Image

imganim6 = new Image

imgstat6.src = "images/mygrey1.gif"

imganim6.src = "images/mygreyani.gif"

imgstat7 = new Image

imganim7 = new Image

imgstat7.src = "images/swimyuk1.gif"

imganim7.src = "images/swimyuk.gif"

imgstat8 = new Image

imganim8 = new Image

imgstat8.src = "images/zwavout1.gif"

imganim8.src = "images/zwavout.gif"

}

//-->

</script>

</head>


<body onload="imageLoad();"

style="background-image: url(images/Marble01.jpg);">

<table

style="height: 60%; margin-left: auto; margin-right: auto; width: 100%; text-align: left;"

border="0" cellpadding="2" cellspacing="2">

<caption><big><big><big><big>ROGERS

INDUSTRIES</big></big></big></big><br>

CLICK PICTURES TO VIEW ANIMATIONS OF OUR MANUFACTURING PROCESSES<br>

CLICK THE LAST PICTURE TO RETURN TO OUR HOME PAGE<br>

<br>

</caption><tbody>

<tr>

<td style="text-align: center;"> <img

onmouseout="document.click1.src=imgstat1.src"

onclick="document.click1.src=imganim1.src"

style="width: 117px; height: 93px;" src="images/braid1.gif"

alt="Gravity Die Casting" title="Click to Animate" name="click1"> <br>

</td>

<td style="text-align: center;"><img

onmouseout="document.click2.src=imgstat2.src"

onclick="document.click2.src=imganim2.src"

style="width: 117px; height: 93px;" alt="Low Pressure Die Casting"

title="Click to Animate" src="images/corl1.gif" name="click2"><br>

</td>

<td style="text-align: center;"><img

onmouseout="document.click3.src=imgstat3.src"

onclick="document.click3.src=imganim3.src"

style="width: 117px; height: 94px;" alt="Finishing"

title="Click to Animate" src="images/drift1.gif" name="click3"><br>

</td>

<td style="text-align: center;"><img

onmouseout="document.click4.src=imgstat4.src"

onclick="document.click4.src=imganim4.src"

style="width: 117px; height: 93px;" alt="Drilling"

title="Click to Animate" src="images/helix1.gif" name="click4"><br>

</td>

</tr>

<tr>

<td style="text-align: center;"><img

onmouseout="document.click5.src=imgstat5.src"

onclick="document.click5.src=imganim5.src"

style="width: 117px; height: 124px;" alt="CNC Milling"

title="Click to Animate" src="images/moeb1.gif" name="click5"><br>

</td>

<td style="text-align: center;"><img

onmouseout="document.click6.src=imgstat6.src"

onclick="document.click6.src=imganim6.src"

style="width: 117px; height: 84px;" alt="3D Milling"

title="Click to Animate" src="images/mygrey1.gif" name="click6"><br>

</td>

<td style="text-align: center;"><img

onmouseout="document.click7.src=imgstat7.src"

onclick="document.click7.src=imganim7.src"

style="width: 117px; height: 115px;" alt="Plastic Injection Moulding"

title="Click to Animate" src="images/swimyuk1.gif" name="click7"><br>

</td>

<td style="text-align: center;"><a href="rsite.html"><img

alt="Go To Home Page" title="Click to Return Home"

src="images/zwavout1.gif"

style="border: 2px solid ; width: 117px; height: 98px;"></a><br>

</td>

</tr>

</tbody>

</table>

<br>

<br>

</body>

</html>

The part that starts <script and ends /script> describes a function that will load all the images into holding names in the browser cache, where they can be quickly displayed.

In the body section the function is called with the onLoad command.

Each image after the <img tag the onmouseout and onclick functions are given document actions that will load either a static or animation gif image and the image is given a name like "click1" which is also the second part of the action.

This is all there is to this simple web site. Use these simple rules to create your own site.


Novell Cool Solutions (corporate web communities) are produced by WebWise Solutions. www.webwiseone.com

© 2014 Novell