DIY - Everything about creating a website using free templates

Jan. 26, 2010 - PRLog -- A web page template or HTML template is a prebuild web page that can be used repeatedly to develop other web pages. It is a collection of prebuilt linked pages, that can be used to speed up the development time of a complete website.

A web design application is required for creating web pages. Most of the templates come with HTML are compatible with Adobe GoLive, Macromedia Dreamweaver and Microsoft Frontpage. Among these web design application, we think Macromedia Dreamweaver is the best because it is easy to use and update. You will also need a image editor such as Adobe Photoshop to take care of images.


Let's Get Started


There are websites where you can download free web templates. If you can spare USD$30 ~ $50, try buying a template online instead. Paid templates usually look more professional than free ones. Although both are not too flexible in the layouts, these are prebuilt websites that let you jump-start by adding your own content. You can have your own website loaded up to the Internet within a day or two.

Step 1: Prepare the essential items.


(1) Website content
(2) Logo
(3) Related images
(4) Install Dreamweaver from Adobe.com (30-days trial)
(5) Install Photoshop from Adobe.com (30-days trial)
(6) Download a free or paid web design template
(E.g. http://www.freewebsitetemplates.com)


Step 2: Create a site in Dreamweaver


Firstly, define your site in Dreamweaver's Site Manager. Click the "Site" menu item on the menu bar and click "New Site...". A dialog box will appear with words "Site Definition for Unnamed Site 1".

At the top of the dialog box is the "Basic" tab. Click on it to select it.

In the edit box for "What would you like to name your site?", type in the name you wish to give to your site. If you are not sure what name you want for your site, use your domain name or any name you have in mind for your new domain name.

Once you have done the above, enter the web address of your site in the box following the question "What is the HTTP Address (URL) of your site?". For example, if you bought the domain "example.com", your website address will be "http://www.example.com/" (without the quotes), unless your web host tells you otherwise.

Click the "Next" button at the bottom of the window to proceed. Accept the default "No, I do not want to use a server technology" for now.

The next screen allows you to define where Dreamweaver saves the files you create. The default is to place the files in a folder with the same name as your website. You can change the location if you wish. Note that this folder merely determines where on your computer the website files are saved. You will be taught how to publish those files to your web host in a later step. It is always good practice to keep a copy of your website on your own computer. If you don't know what to do here, just accept the default.

When you click "Next", you will be asked "How do you connect to your remote server?". For now, select "None" in the drop-down box and click "Next" again. You will then be given a "Site Definition" summary. Click "Done".

Step 3: Creating template in Dreamweaver using a prebuilt web page


To make it easier, you may like to download this template beautycompany.zip. Start up Dreamweaver and open the file index.html. Index.html is a general page, which is often referred to as main page when someone type in your domain name in a browser. Save this as a template using Dreamweaver by clicking "File | Save as Template". A dialog box will appear asking you whether you wish to update links. Click "Yes" and Dreamweaver will create a new folder in your computer's website folder named "Templates".

The filename displayed at the top of the window showed that Dreamweaver has replaced the current file with the template file, which needs to be configured.

Dreamweaver by default creates a template that has no editable regions. Editable region is when you create a page based on the template you just saved, you will not be able to change anything on that page. To fix that, we will need to specify areas of the template that can be modified.

Type in the word "Welcome" with a large bold in the main content section of the document and mark this text, "Welcome", as editable so that it can be replaced with the title of page being created.

Select "Insert | Template Objects | Editable Region" from the menu. Type "Page title" into the dialog box appeared. Dreamweaver marks that section with a visual cue to show you that it is editable.

Next, select the paragraph under that page title and mark it editable. When prompted for a name to that editable section, type in "Page description".

As the "Page description" subtitle and the section that follows may not be present in the other pages of the website, we will mark the entire of this section as an "Optional Region". To do this, select the entire block comprising the "Page description" subtitle, the picture underneath and the block of text beside the picture with your mouse. Click "Insert | Template Objects | Optional Region". A dialog box will appear. You can give this section whatever name you wish. If in doubt, just accept the default name given.

Save the template by clicking "File | Save" on the menu. You will be prompted with a message that putting an editable region in a block prevents users from creating new blocks in that region. Click OK.

Step 4: Create Home page


Create your Home Page
****************************

Now that you have created your template, you can create as many web pages as you like using different filenames. At present, your home page, the index.html, is not regarded by Dreamweaver as being based on the template you created. Since we want Dreamweaver to handle all the mundane and tedious job of updating all our pages every time we change the design of our site, we need to associate the page with the template.

The easy way to do this is to overwrite your old index.html file with a new file created based on the template. You can do this with no loss of data since your template was created from the index.html file with no changes other than to define editable regions and the like.

1) Close all open files. To do this, click "File | Close All".

2) Click "File | New". A dialog box appears. You saw a dialog box. This time, look at the left column and click "Page from Template". The middle columns will show information about the template you created earlier, and the rightmost column will show a thumbnail picture of your template. Click "Create".

3) Click "File | Save As". A dialog box opens allowing you to specify the filename. Enter "index.html" (without the quotes) or just select the "index.html" file that appears in the window. Click "Save". A message box appears asking if you want to overwrite the existing file. Click "Yes".

You have replaced your old index.html with an identical copy, except that this time, Dreamweaver has recorded the index.html as being dependant on the template, so that the next time you modify the design of your template, this page will be automatically updated.


Step 5: Publish the Website


Now that you have multiple pages to upload, it probably isn't efficient to use "Site | Put" to upload files, since that is more useful for uploading individual pages. Instead, click "Site | Synchronize Sitewide". A dialog box appears. Make sure that in the "Synchronize" box, the "Entire 'Example Company' Site" option is selected. In the "Direction", check that "Put newer files to remote" is selected.

Click "Preview". When a dialog box appears with the list of files that will be uploaded, click the right mouse button (Control-Click in Mac OS X) on the template file (the file in the "Template" folder).

You should now test your site in your IE browser and different browsers such as the popular Mozilla Firefox.

*Translation job listing available in our monthly newsletter issue at http://www.synergy-focus.com

# # #

Eric is a provider of multilingual language translation services in Singapore, Synergy Focus. But more than that, he is passionate about setting goals and achieving them. He is action-oriented and has a strong work ethic. He enjoys reading, writing, socializing, meeting people, and traveling.