Home Page ...

You've heard that word before...  sounds simple right ? well.. it is !

Because we're not going to get into the nitty gritty commands specific to each editors these instructions will work for Front Page or anything else...  Most of these have good interface so you should be able to figure out where to click to insert a link, make your headline bold or insert an image or line.

For a club website, the home page is what most visitors will find first, from where they can get to other sections and where they can find the latest information on your club.

Open your editor, a blank page will appear and simply type the very basic info you need, something like the sample page on the left.

This is the basic text you would put in with the very basic formating, like center, bold, underline, colors, ...  Even thought this is done in  HTML format, it works just like if you were typing a document in Word or any other word processor...

Like all the other thumbnails you're going to see in this tutorial, click on the image to get a larger view...

We're going to keep this simple, but you can use the built in features to add a background color to your page, colors and more but for now let's "Keep It Simple, S... hall we ?"

Save your page but here is an important detail : create a folder on your computer where you're going to save all the files related to you project. You can even put that folder on your desktop if you want to keep it handy. When you save your new home page in this folder, name this page index.html regardless of the name of your site or club. When saving you may be prompted for a title, which is what will appear in the title of the browser window, so just type in Conch Republic Jaguar Club Home page.

If you are using Word instead of a true HTML editor, make sure you use Save As and choose HTML

About pictures...

Your digital camera or Photo CD usually will provide you with high resolution images... beautiful and sharp but useless for a web site as  visitors using a modem won't have the patience to wait for them to download.  You need to convert those images for the web which is very easy.

Remember iView, that neat little program we downloaded in part 1 ? well it's time to use it... Start it and open one of your picture. Chances are this image fills up your screen so you're going to downsize it by clicking selecting Resize from the Image menu. The most common size on a page to display a picture is 640x480 but you can pick any value you want depending on how you want your page to look. The important thing is too keep the current aspect ratio so that the image isn't deformed.

Once you have your image resized, you need to save it and while saving it you should compress. Of course make sure you save it as a JPG file and when in the Save As dialog box, click on Options and set the quality to 60% which is nice compromise. The size will shrink, a lot, but you will not see a difference on your screen.  As a result of these 30 seconds you spent, your image probably went down from 200k to only 30k... on a modem that's reducing download time from 45 seconds to 5 seconds...

Always keep the original file on your disk and save your smaller file in the folder you created earlier, it will make transfering everything a breeze. If you want to be real organized, create a sub folder called pics in that main folder and save your pictures there. As your site grow it will help keeping things under control.

Adding images to your page...

Ok... so you want a logo in there and an image of the month to make that home page a little more excitig ? sure, that's easy... you've just done the toughest part which was to prepare the image.

Here we'll assume you have your logo already on a disk... First, copy the file to  the same folder where you saved your page or preferably in the pics sub folder created above.  Then, click on the page where you want the image to be and use the image insert tool in your editor, find that folder and select the image. It will be placed on the page. The following text will be pushed down but if you want the text to flow around or stay next to the image, click on the image and then click on the left align icon in Front Page.  In Composer, you probably need to open the image properties and set the alignement.

Procedures will vary from one editor to the next but the end result should be the same because your editor actually does all the coding and taging for your page behind the scene and this coding is standard...

We'll add a second image on our page, this time leaving it in the middle, a line to mark the footer and here is the result.

Navigation ? that sounds tough !

yes, you will need to navigate and no... it's very easy !

Text or images, it's up to you... we'll do basic text here but you can easily create some icons or buttons and use them.

Go to the top of the page and under the title, type : Home - Calendar - Membership - Events - Gallery
You can play around and make the text bold if you wish... or larger... or British Racing Green or whatever looks good !

Then, you need to decide what other pages your site will have. We're going to keep to our basic theme and within 60 minutes so we'll just have a Calendar, Membership info, past event and member gallery.

Highlight the word  Calendar  and click on the link tool. In the URL field, type : calendar.html 

Repeat the process for the other words using   member.html , events.html and   gallery.html ... for home, type   index.html

You should end up with something like this. While not very fancy, it works... and gives you a base to improve things in the future. One of the basic rule of creating a web page is that people do not visit it to admire your design skills but to find information on your club ... keep this in mind !

On to part 3 ...  the other pages

 

[HOME] [MEMBERS] [CALENDAR] [LIBRARY] [STANDINGS] [CLUBS] [JOIN] [CLASSIFIEDS] [FORUMS] [ABOUT] [CONTACT US] [JAGUAR JOURNAL] [SITE MAP]