Summer is the time of vacations, recreation and active rest, traveling and new experience.  And of course, everybody wants to spend it usefully, to get new impressions, emotions and indulge yourself with the sun and sea. Summer provides a lot of opportunities for different kinds of outdoor activities and sports. That’s why this time we decided to create a sport-related website.

So, 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 sport website templates and sport 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 23897.

This website template can greatly work for kitesurfing schools, kite clubs and forums and just for those how have passion for kitesurfing and kiteboarding. The splendid graphics and elaborate color scheme will definitely capture everybody’s attention.

After purchase you will find HTML-version and source PSD files of the website pages, 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 and tag line. 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 re-save the “Read more” button. If you need to change the button text, you may easily do it with the help of a Horizontal Type Tool. Notice that before re-saving it, you should disable all background layers on which the buttons is placed.

Then select the customized slice and go to “File” -> “Save for Web and Devices”. Replace file read_more.png in the “Images” folder.

The next thing we are going to do is to customize two banners at the right bottom of the Home page. Using a Horizontal Type tool edit the text. Please note: these two files: page1-banner1 and page1-banner2 are in .JPG format, but for correct display we need to save them in .PNG. So, select the first banner slice, then go to File -> Save for Web and Devices. Make sure you have selected .PNG file format.

Then open file index.html in HTML editor and change image format from .JPG to .PNG. After that open index.html in your browser (I’m using Fire Fox) to verify the result.

And now it’s time to start customizing website texts. Open file index.html in HTML editor. First of all customize the menu buttons: just edit the menu buttons names using the HTML editor. I decided to change “Lessons” button to “Kite Club”, so that the design could suit me perfectly. Other buttons names are left as they are.

Then write down a welcome paragraph, describe the services you provide and customize the “News” section. And your Home page is ready.

Let’s look at the final result.

Now it’s time to start customizing other pages. Open index-1.html in HTML editor to edit the “Events” page. Everything should be done as with the Home page, so it won’t make difficulties for you to customize it.

Events page

Write down about the special kitesurfing events that will take place in your kite club. The Latest News section will keep your visitors and club members up to date and well informed. “Main Scheduler” section will help to organize the time.

Kite Club Page

This page presents more detailed information about the kite club, its members, services, kite equipment and latest events and news. But here is one peculiarity: don’t forget to change the format of banners from .JPG to .PNG. As these files have already been saved in the “Images” folder during the Home page customization, the only thing you need to do is to change their format in HTML editor. Click on the banner image and in the Code view window the banner code will be highlighted.

Replace this code: <img alt=”" src=”images/page1-banner1.jpg” class=”margin2″ />

With this one: <img alt=”" src=”images/page1-banner1.png” class=”margin2″ />

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.

discuss this topic to forum