DIY – Everything about creating a website using free templates
Posted on 26. Jan, 2010 by admin in Uncategorized
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.
Structure Of A Website
To begin with, think of the overall structure of your website. The structure of your website is composed of different sections and navigation within those sections. If you develop a good website structure, everything else will fall into place.
The home page influence vistor’s first impression of your website. Therefore it should answer questions such as WHO you are and WHAT is the purpose of the site.
In addition to pages introducing your products and services, a good website should also provide a sitemap to guide visitors to the information they seek. If visitors are able to find the information quickly and easily, they will enjoy and may return to the website again.
Hosting and domain name
Once you have your website design ready, you can begin to search for a reliable web hosting company. You can register your desired domain name with the hosting company. A reliable hosting company will have step-by-step instructions to lead you to set up your domain name registration, web space and email addresses. Some hosting company websites provide online live support which you can get instant response.
At one time, all the domain names cost the same: USD $70 to register the name for the first two years and USD $35 a year thereafter. Today, you will probably pay less to register a domain name with some registrar charge less than USD $10 per domain name. However, there’s a catch. Many domain name registrars make money by selling extra services, such as mandatory web hosting packages. Others require you to pay registration fees several years in advance.
If you do not wish to buy a domain or pay for hosting, you can still get a website live by using a free hosting that allows you to create a ’sub-domain’, which is just a part of another domain. However, if you are serious about your web site, using sub-domains is not recommended. Its like using someone else’s business card and putting your name on it.
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 and About Us 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. Make sure that the checkbox for “Update page when template changes” is checked. 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.
Create About Us page
This page tells the web visitors more about the company and its business.
1) Click “File | New” again and select “Page from Template” if it is not already selected. Once again, click “Create”
2) Above your document, in the line with “Code”, “Split”, “Design” and “Title”, replace the existing text in the “Title” field with “About Example.com” where “Example.com” is the name of your company.
3) In the editable region which currently holds “Welcome” (or the equivalent on your page), replace it with “About Us”.
4) In the editable region labeled “Page Description”, enter information you wish to comment about your company. Note that you are not restricted to a single paragraph. Just hit the ENTER key (or the RETURN key in Mac OS X) to create a new paragraph whenever you need.
5) If you have defined an optional region and you wish to turn it off, select “Modify | Template Properties”. A dialog box appears showing you the optional region you have defined. Select it (if it is not already selected) by clicking on its name. Then uncheck the box next to the words “Show OptionalRegion1″ (or whatever name that you have given that region). Click OK. Your optional region should disappear.
6) Select “File | Save As” and type in “aboutus.html” (without the quotes) into the dialog box that appears. This is the same filename that we entered into the navigation menu bar, so now is not the time to be creative and start changing names or your menu will not work properly.
It is recommended that you creates a Site Map too using the same steps above. A Site Map is a comprehensive list of all the pages on your website. It is a useful tool for visitors who are looking for a particular page on your website but cannot find a direct link to it from whatever page they happen to be at.
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). Select “Ignore Selection” so that Dreamweaver does not upload your template file. Click OK. Dreamweaver will then upload the files you specified.
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. Article Source:http://www.articlesbase.com/web-design-articles/diy-everything-about-creating-a-website-using-free-templates-1785722.html
