How to Build Your First Website with a Free Website Template

The look of your website will define your business for every person that visits. It will attract a specific type of audience, and communicate the quality of your products/services before they even see them. The goal of this tutorial is to help you build a simple and useful website from a generic free website template.

As you consider the website templates available to you, ask yourself the following questions:

1) What is the purpose of my website?
2) Who will visit my website?
3) How will I display my products/services on this pre-designed template?

Begin by visiting the websites of your competition. Make a list of the ones you like and the ones you don't like, and then ask yourself why? Next, begin your search for website templates that meets the needs of your business.

You should also determine at the outset if you want to build a HTML of Flash based website, or some combination of both. Here are somae things to consider:

1) When building a website in Flash you should consider the fact that search engines don't see most of the content that you place on your website when it's in Flash. When they can't see it, they can't display it in their search results.
2) Flash websites give the appearance of navigating from one page to another, though they are really always on the same page. To Google your site would be a one page website. Because Google outwardly states that they favor "large and well established websites", building a Flash website places you in the worst of all possible situations.

If you are set on launching a Flash based website, consider a site that includes Flash where it will benefit your service/product, and keep the rest of your site in HTML. YouTube, owned by Google, is one the most successful examples on how to blend HTML and an unreadable element - in their case video. Since search engines can't see video either, they use HTML for Titles, Descriptions and Tags, and have thus created million of points of entry to their website in natural search results.

Downloading Your Website Template
Once you have found a website template theme that you like, click the download link to download the template to your computer. The templates are typically packed in a .zip file. This file folder may contain files for one template, or several variations on your theme.

Unpacking Your Website Template
The first step is to unpack your website template. Begin by renaming the file "My New Website" (substitute the name of your site), and then click on the folder.

In this folder you may find:

PS Files - If your folder includes PS (Photoshop) files your template can be edited with Adobe Photoshop, Photoshop Elements.

AI Files - If your folder includes AI (Adobe Illustrator) files, as the free website templates on StorehouseBuilder.com do, your template must be edited with Adobe Illustrator.

Index.html Files - If your folder includes a HTML file, it means that the code that formats your content is complete. It will, however, need to be edited with a text editor or Dreamweaver to include information about your service/business.

CSS Files - If your file includes a CSS (Cascading Style Sheet) file, it includes code that will define the look and formatting of the content of your HTML web pages. For example, the style sheet may set the font size and color site wide, so that their is no need to add code page by page. This inclusion will help your website to load faster. This file can be edited with a text editor or Dreamweaver.

Image Files - If your folder includes an image file, the file will include website graphics and pictures that make your website template look the way it does. The names of these images should not be changed, as they will be requested by name when your website loads.

Finding Editing Software
Finding the right tools to edit your website template will depend first on the type of files you found in the .zip file that you downloaded from the website that offered the template.

Adobe Photoshop - If you need Adobe Photoshop you may download the full version of the application for a free 30 day trial on the Adobe website.

Adobe Illustrator - If you need Adobe Illustrator you may download the full version of the application for a free 30 day trial on the Adobe website.

Text Editor - If you need a text editor, and you own a MAC computer, you can find a basic text editor, caled TextEdit, in the applications folder. TextWrangler is also a excellent free download for both MAC and PC.

FTP (File Transfer Protocol) - FTP software will allow you to transfer the edited text file to the server where you will host your website. If you need a FTP client for MAC, you can download a free trial version of Fetch. For PC, you can download the open source FTP client FileZilla.

Dreamweaver - If you would like to edit your template with Dreamweaver, the industry-leading website source code authoring and editing software, you may download the full version of the application for a free 30 day trial on the Adobe website.

Editing Your Website Template
The next step is to edit the text and images of your website template by adding content that describes your product/service and personalizes the site.

Photoshop - After you have downloaded Photoshop, you can click on the Photoshop software icon to open Photoshop. Next, choose Open in the File menu, and then select your file and click Open to open your website template Photoshop file in the workspace. To edit the text, simply select the black arrow from the tool bar, and click on the text. A text box will appear around the sample text. At that point you may begin adding information about your product/service. In some cases you may not have the correct font installed on your computer. You may be able to find that font on a free font website. To add an image, create a new layer, and select Open from the File menu. Find the image that you would like to add to your template, click on it, and then click Open. Position the new image, and then delete the old layer. You could also create the new layer, and then copy/paste the new image. If you template file has been pre-sliced, then be careful when replacing the image. It must be exactly the same size, and must be placed in exactly the same location. Changes may create display issues when viewing your website in a browser.
Adobe Illustrator - After you have downloaded Adobe Illustrator, you can click on the Adobe Illustrator software icon to open Adobe Illustrator. Next, choose Open in the File menu, and then select your file and click Open to open your website template Photoshop file in the workspace. Then simply select the black arrow from the tool bar, and click on the text. A text box will appear around the sample text. At that point you may begin adding information about your product/service. In some cases you may not have the correct font installed on your computer. You may be able to find that font on a free font website. If the text is grouped with graphics, you may need to click several times to get to the text. Once you have added your product/service infomation, click on the white space surrounding the design. To add an image, select Open from the File menu. Find the image that you would like to add to your template, select it, and then click Open. Click on the image to select it, copy it, then paste the image into your website template file. Resizing the image is as easy as it is in your word processing program. Select the image with the black arrow, and drag the corner until it's the right size for your template.
Text Editor - After you have downloaded your text editor, click on the software icon to open it. From the File menu, select Open. Select the file that you want to open, and then click Open. Your HTML file will be displayed in source code view. Find the text that you would like to edit, provide information about your business/service, and save the file. Be careful not to make changes to the code that serves to format your text and images.
Dreamweaver - After you have downloaded Dreamweaver, click on the Dreamweaver software icon to open Dreamweaver. Dreamweaver will allow you to open and view any HTML file in very much the same way as it will appear in your browser, while it writes the source code for you as you adjust the text and visual appearance. From the File menu, select Open. Select the file that you want to open, and then click Open. You will see your template in the workspace. Make any edits that your find necessary, and then save your work.

The Cross Road
The creation of your future website, to this point, has been relatively simple, and the steps you have already taken will allow you to enjoy a significant savings.

If you desire to press on, you will need to assess the needs of your particular template, complete the source code, decide if your would prefer a .html, or .php site, and load the source code and image files into your FTP client. After your get everything looking right in your favorite browser, you will need to check for issues in all of the popular browsers including Firefox, Safari, Explorer and Google Chrome.

HTML Website - A simple website structure where each page must be edited manually.

PHP Website - A more sophisticated website structure where some information that is included (includes) on each page may be managed globally.

If this seems a little daunting, you might consider allowing an experienced website designer help you complete your journey.

Turning Your Abobe Illustrator Template into HTML Code
If you started with a free website template that was deliver to you as an Adobe Illustrator file, you will need to slice the design. You can do that with the slice tool in Illustrator. Slice the design, save it at 50% quality to create a smaller file, then save it for web/devices - Format: Images and HTML. When the images and HTML file appear on desktop, open the HTML file in Dreamweaver.

Website Hosting
Just before you are ready to launch your website you should purchase website hosting. If you are just starting out, it's best to begin with the hosting plan that is the least expensive. As you speak with the representative at your chosen hosting company, try to resist the "extras."

Uploading Your Website Template
When your HTML files ready, you'll need to send them to your host's server with a FTP (File Transfer Protocol) client. This process can be accomplished with the programs mentioned above.

To open the workspace you will need to click on the FTP software icon, and then enter your account infomation, including:

1) Hostname (www.yourwebsite.com)
2) Username
3) Password

If you didn't record this information when you purchased hosting, you can contact your website hosting provider for this information. When you have entered this information, click Connect.

To publish your files, you will drag and drop your files into the FTP workspace. Begin by draging your index file into the root directory. Next, create a folder in your root directory, and name it "Images". (If your website template came with HTML files, it will most likely expect the file to be named as such.) Drag and drop your images into this folder. If you have a small website that you anticpate will always be small, you may place these pages in the root directory as well. If you expect your website to grow quite large over time, you will want to consider creating additional folders that will group similar sets of pages. The addition of the various set folders will necessitate the change of your navigation links, depending on the names you gave to the folders.

For example, the general application articles on this website are placed in a folder called "General". The website URL is thus structured in the following way:

http://storehousebuilder.com/general/how-to-write-titles.php
(http://mywebsite.com/root-directory-folder/title-of-article.php)

Once loading is complete, you may type your website address into your favorite browser to review your work.

Website Marketing
The day will come when your website is launched, and you will say to yourself, "Good Job, Me!" If you have done you homework and launched a graphically dazzling website that is easy to navigate and ever so informative, you will certainly deserve the praise. However, there is one more step... you need to tell someone about your new website.

My free eBook Oh Internet, More Traffic Please will help you get that marketing mindset, and provide you with the tools you need to make your new website a great success.

Oh, Internet, More Website Traffic Please by Andrew Fling
Funny Name. Serious Strategies for Building Website Traffic.

Download Instructions: Left click to read eBook online. Right click and save linked file to your desktop if you would like to make our eBook easily accessible.

I wish you the best!

by Andrew Fling

Share |

LinkBuilder Program
Get your first link from us. Add our link on your new website, and we will give you a
high quality link from our family of websites for free! More info...