This time we decided to create an eye-catching website that can greatly work for car clubs, portals and forums, auto dealers, auto tuning and repair services, automobile driving schools, auto insurance services, automobile racing teams, car wash business, car rental services, websites for selling cars online and etc. In other words, this web design will refer to everything related to cars.

This tutorial will teach you how to make a website and perform all necessary customization on the basis of a website template. At the end you will also read our recommendations concerning domain name and hosting provider.

Choosing a template design

The fastest and easiest way to create a professional looking website (if you are not a web designer, of course) is to take an opportunity of pre-made web templates on the basis of which you will create an attractive website. When you start searching for a site template, you will come upon many web page designs. But as usual, I recommend you to review website templates provided by TemplatedBusiness. It offers high quality design products that can be easily customized to meet your project needs. Here you will find both car website templates and car Flash templates that correspond to the main web standards and concentrate on the customers' core requirements both in terms of usability and information. Well, my choice is 21169.

After purchase you will find HTML-version and source PSD file of the main page, fonts which are used in the template and some screenshots in the archive.

In case of a low-budget project, you may take advantage of free web templates that will help you solve both problems: time and money. FreeTemplatesOnline.com offers quality free web page designs that can be easily customized and used as a basis for your website.

Template Customization

Now it's time for the template customization. But if you feel that you don't have enough knowledge or time to go though the whole customization process, you may take the opportunity to use Template Tuning services. Here you can order the template customization at an affordable price. Their web developers will easily and skillfully do all the necessary changes for you. But if you are not afraid of difficulties, then let's go on! As it was said above, we will start from the HTML version.

To perform all necessary modifications you will need Adobe Photoshop CS+; Adobe Dreamweaver 8+ or any other HTML editor. Before you start you should install necessary fonts (usually they are placed in "sources/fonts" folder- in this tutorial you'll find more detailed description. After that open .psd file in Photoshop and let's learn how to make necessary customization.

The first thing we are going to do is to modify the template header. With the help of Horizontal Type Tool enter your company name instead of the default one and change a tag line. If the slice is not long enough and your site title goes out of its limits, don't worry. You may easily resize the slice. For this choose the Slice Select Tool and highlight the logo (mouse left click + CTRL). By mouse left clicking stretch the slice borders.

After making all these changes we need to save the customized logo and then replace the existing one. While the slice is still selected, go to "File" -> "Save for Web and Devices". Leave the settings as they are because everything has already been done by a coder. Press the Save button to save files to the Image directory replacing the file logo.jpg.

The next step is to modify text titles. I must admit that all text titles in this website template are made as pictures. And if you even don't want to modify them, you need to re-save them anyway.

The next thing we are going to customize is the menu buttons. The screenshot below shows the customized menu.

Note please that each menu button has two modes: active (with an arrow) and inactive. That means you need to save the buttons two times when they are active and inactive. Choose .JPG format while saving them.

Now we should re-save the "Members Area" and "Register Now" slices.

After that we should customize the "Join Our Club" and "Go to Gallery" buttons. With the help of Horizontal Type Tool edit the button text. Then highlight the button slice (mouse left click + CTRL), go to "File" -> Save for Web & Devices and replace the file in the "Images" folder.

Then you will need HTML editor. Open file index.html and start customizing text. Write a Welcome paragraph presenting your car club.

The same should be done with the other pages. First of all, you have to decide what pages you need for your website. In my case I have the following pages: About Us, Why Join, Races, Gallery, Contact Us and Privacy Policy. Don't forget to re-save the menu buttons when they are active.

Some attention should be paid to the "Gallery" page that attracts by quality car images. Let's put thumbnail images to the left Gallery section. Pay attention to the size of the photos - they need to fit the dedicated section accurately to prevent harming your layout. Open file gallery.psd in Photoshop and paste the desired image.

Drag the image to the proper location and then re-save the editing slice.

To make the Gallery work properly ("Previous" and "Next" buttons) we need to insert a small javascript. Just paste the script presented below in the following tags using any HTML editor:

Javascript:

var countPics = 6; var currentPic = 0; var pics = new Array(countPics); pics[0] = "images/6-p7.jpg"; pics[1] = "images/6-p8.jpg"; pics[2] = "images/6-p9.jpg"; pics[3] = "images/6-p10.jpg"; pics[4] = "images/6-p11.jpg"; pics[5] = "images/6-p12.jpg"; function showPic(n) { currentPic = n; document.getElementById("galleryPic").src = pics[n]; return false; } function showPrev() { if (currentPic - 1 >= 0) { currentPic-; } else { currentPic = countPics - 1; } return showPic(currentPic); } function showNext() { if (currentPic + 1 < countPics) { currentPic++; } else { currentPic = 0; } return showPic(currentPic); }

Where var countPics = 6; : 6 is the quantity of images;
images/6-p7.jpg - images/6-p12.jpg: image file names.

Insert this code for each thumbnail image:

…..

where "N" is the number of a thumbnail image.

Let's verify the code:

After that insert the following code for the "Previous" and "Next" buttons:

For the Previous button: ….
For the Next button: ….

So, now clicking on the thumbnail images on the left opens big image preview. It looks pretty nice.

Contacts Page

On the Contact Us page write your postal address and customize the contact form. For contact from implementation you need to have some PHP programming skills and while I don't have them I recommend to order it from TemplateTuning website. They said that it will cost you about $60 - for any type you choose.

Choosing a hosting provider

When choosing the hosting services you should be guided first of all by other people reviews, prices and quality. On this basis I recommend you webhostingbuzz.com.

If you experience any troubles with registering a domain name or hosting you can always contact TemplateTuning.com professionals.

Website Promotion

You may find a lot of website promotion services all over the Internet. But probably, one of the most reliable among them is website promotion services from Web Design Library. It offers:

- Search Engines Inclusion
- Website Analysis Report
- Keyword Research Report
- Link Building Campaign
- Link Analysis Report
- Search Engine Optimization Report
- Search Engine Rankings Report.

There are two packages:
- Standard package: it would be great for new websites
- Pro package: a complex approach to website promotion.

There is no monthly fee. And by ordering a pro package you will get a 30% discount. Moreover, if you purchase a website template from TemplateMonster.com or TemplatedBusiness, you will get 50% off on the SEO services provided by Webdesign.org. You don't need to learn the secrets of search engines algorithms in order to increase your ranking, because everything will be performed by qualified SEO specialists.

Well done!

You can visit sample website to see the final result or compare your code.