Excel Lessons Online

For this tutorial, you can find everything you need here.

You will need the following to complete the tutorial:
• Html Editor (you can use notepad with this tutorial)
• Image Editor (you can use Fireworks - now from Adobe, with this tutorial)
• FTP Client (you can use FileZilla)

Please note that the only thing you have to pay for is a domain name and hosting, both of which have become affortable in recent years.


Downloading, Unzipping and Opening a File
1. First you have to download the zip file with the website template and unzip it - Windows XP comes with a built in extraction utility that can be used to unzip.

2. To unzip, right click the file and choose “Extract All” - this will enable the extraction wizard and all the data will be extracted into one file. Save this file on your computer’s hard drive.

3. Open the index.html page with a text editor, or html editor - both are essentially the same thing. This could be FrontPage, Dreamweaver, or simply Microsoft’s own notepad, but don’t use Word. In this tutorial, please note we use notepad.

Editing a Website Template

1. To edit the logo or add a logo, click file>open and locate the extracted file containing the templates. Click the image folder and open the file named:headerlogo.gif, right click>edit with fireworks - or your favorite image editor.

2. Please note that the canvas(area to edit image) is exactly the same size as the logo, which makes it a bit hard to work on and edit. To increase the size of the canvas, go to modify>Canvas >Canvas size and type in 200 by 200.

3. Next, select the rectangle tool on the left hand toolbar in the “Vector” section, draw a white rectangle over the logo, and make it’s size about 168 w 99 h.

4. Next, you can send it to the background by going to Modify>Arrange>Send Backward. The logo should be visible again and you can now select the logo and move to the right, left, or leave it in the middle.


5. At this point, you can give the website a name by clicking the “A” on the left hand toolbar to activate the text tool that will let you write.

6. Next click, select>select all, after everything is selected go to modify>group. It should now be one picture instead of different layers.

7. Next, go to Modify>Canvas>Fit Canvas, save a copy with the default png extension and then export preview a copy as a jpg. If you make a mistake just remember to click Edit>Undo.

Now, go to the folder you downloaded and right click index.html file and open with notepad or your favorite html editor.

Please note you can edit below comments such as these or are highlighted
< ! -- ******** Insert the name of your company or website below********-->

8. To edit the content, you can add your own content in the highlighted areas as seen in the picture below.

9. Before editing the menu section, have the website page names ready to insert. Where you see the pound sign in between the quotes, that is where you insert the link address that you want to access; for example: http://www.mysite.com/about.html

10. You can enter a name for the page “About Us.” Usually, the name of this page should have something to do with the name of the link. In this example, we named the link “about,” therefore we named the page “About Us.”

11. With the front page already built, you can duplicate it and make additional pages. Go to the folder containing the index.html file and right click on it, select copy and paste it.
You’ll probably wind up with something that says “copy of index.html”
right click on it as the picture below shows and rename it. DO NOT delete the .html part.

12. Now, you have a second page for your website. Simply open this one up and edit it as you did the first one. Repeat as many times as needed. Don’t forget to add all these new pages to the menu.

Sending a File to Your Server Using FTP

Please note that many hosts have file upload functions, but these may be time consuming and cumbersome to use. In this tutorial, we’ll use FileZilla as our FTP client - remember to have your FTP address, Username, and Password for your host.

1. To setup FileZilla click File>Site Manager.

2. Click New Site. Where it says host, type in your ftp address and click normal for logontype.

3. Finally, type in your username and password and click connect. Remember that if you have any difficulties, you can always contact your web host.

By following these simple steps you will be editing and custimizing your own website templates quickly saving you time, money and resources. Please visit us again for more easy to use tutorials.

Good Luck!

If this tutorial was helpful, please consider donating.

2 Comments

Comments RSS TrackBack Identifier URI

Leave a comment