CUSTOMER LOGIN>

This tutorial with give you the basics in how to setup your first web site, and upload your files to your new hosting package.

This tutorial assumes that you are using a web page making program. There are many web page programs that are available and the choice you make depends on your budget, requirements and in depth knowledge of web design. For beginners, a WYSIWYG (What You See Is What You Get) program is best. FrontPage Express is one such program and is freely available and can be downloaded from Microsoft.com . There are also many other programs that you can download freely from the web which will do the job just as well. A good source for finding such programs is TUCOWS.COM . For more advanced web page design programs, look for Dreamweaver from Macromedia.com , FrontPage from Microsoft.com and GoLive from Adobe. These are the best of the bunch. It is possible to make a web page using Microsoft Word and Publisher, but this method is NOT recommended, as the pages produced have variable results when actually viewed once uploaded.

BASIC SITE LAYOUT

Firstly, before you design your first page, you should design on paper a basic layout of how your site is going to end up. You should consider how many pages you need to make, general layout of your pages and think about the navigation that your site visitors are going to use to travel around your website.

For our tutorial we are using the following overall general site layout:

As you can see we are going to be designing 6 pages. We have already given each page a file name, this will help us when designing the navigation links. Notice that the Home Page in our example is titled INDEX.HTML, this is not a mistake, but is required. (For your home page to be viewed when someone types your website address into their browser, your home page needs to be saved as index.html or index.htm (or default). This is a web wide standard for all web sites).

SETTING UP YOUR SITE ON YOUR PC

Now you need to decide where you are going to save your web site files on your PC. This step is very important, as it will prevent broken links and unavailable images when your site is eventually uploaded to the web. For ease, we shall make a new folder on your desktop and call it 'My Site', this folder will contain all of our site files. To make a new folder, right click on your desktop and select NEW>Folder, now you can name your folder 'My Site'. Now to make things easy to manage, we need to make a seperate folder for all of the images we are going to add to our web pages. Open you newly created folder, and create a new folder inside it and name it 'images', using the same method as described previously. You should now have a folder called 'My Site' containing a folder called 'images':

DESIGNING YOUR PAGES

Whichever program you are using to make your pages, you should ensure that the pages are saved within the 'My Site' folder. In order to make things easier for you, it is best to design a web page that you you can use as a template for all of your pages. To do this make a page containing the layout and links you need for your site and save it as template.html. When you make each additional page, simply open the template file, save it as either index.html, product.html, services.html, pictures.html, contact.html or links.html and edit the page accordingly. To add a text link in most editing programs, simply highlight the text that you wish to use as a link and either enter the link in a seperate management box, or right click and select hyperlink. (This will be different depending on your editing program). You can also use images for links.

IMPORTANT: If you intend to add images to your pages, you should place the images that you are going to use in the 'images' folder that you have created prior to inserting into a web page, this will prevent broken links. You should also save the web page to the 'My Site' folder BEFORE you insert the image. See below for details.

.

ADDING IMAGES TO YOUR PAGES

To make your site more appealling to the eye, you may wish to add images and photographs. Before you insert images into your pages, there are a number of considerations that you need to make e.g. what format should they be in?, how big are the file sizes?, how big is the image?

IMAGE FORMATS

As a general rule of thumb, you should only plan to use .gif and .jpeg (or .jpg) files for your web pages. .jpeg is the best format for photographs and .gif is the best format for other graphics.

IMAGE FILE SIZE

If you have a .jpg photograph that you wish to add to your page, you should check to see how big the file is, and how big the image is. You can do this in Windows by right clicking on the image and selecting properties. You do not want to place images that have a large file size, as this will make your web pages take longer to load, neither should you place the images into your webpage, then adjust the size (this will not change the size of the image or its file size, but will only change the size of the image that is viewed). In order to adjust the image/photograph suitable for your web page, you should edit in an appropriate image editing program. In the example below we are using Microsoft Paint to format our photograph to a useable size.

ADJUSTING THE IMAGE USING MICROSOFT PAINT

Open the image in Microsoft paint, and select IMAGE>STRETCH/SKEW:

Now we need to adjust the size of the image. In our example we are adjusting the image to 1/3rd the size. NOTE: You need to set the same percentage for both horizontal and vertical stretch as this will prevent distortion of the image. Click on OK when you have entered your chosen adjustment.

Now you have adjusted your image, you need to save it to your 'images' folder which is inside of your 'My Site' folder. To do this, click on FILE>SAVE AS. Now navigate to the images folder (Your 'My Site' folder should be accessible directly from the drop down menu, so select it and click on the 'images' folder to select the correct folder). You now need to give your new image a memorable name, and ensure that it is saved as .jpeg. NOTE: It is good practice NOT to leave any spaces in the name i.e. 'mypicture.jpg' is better than 'my picture.jpg' as this can cause problems in some browsers.

Our image has now been adjusted and is ready to be placed into our web page. (In our example our new file is 28KB in size with dimensions of 396 x 297. Considerably smaller than our original).

You can now repeat this process for any additional images that you wish to place in your web pages. Once you are ready to place the image into your page, be sure that you have SAVED your page to your 'My Site' Folder BEFORE you insert the image. This will prevent problems later. You can normally insert images easily from within your editing program by clicking on INSERT>IMAGE then selecting the image ( ONLY select images from within the 'images' folder to prevent bad links). The process by which you insert images into your page may vary dependant upon the editing software that you are using.

CONCLUSION

We now know how to design the layout of our website, and adjust images to be placed in our web pages.

Proceed to Part 2 of this tutorial to begin uploading your site, and checking that all is working correctly.