Convert the Layout into an HTML Template
Once you have finalized the layout you can convert it into an HTML template. This will be your template on which you will built your entire site.
To create an HTML template follow these steps:
- Slice images that have to stay as images even on the final site. Optimize them to load quickly on the web and yet look good. Usually images with flat colors are better optimized as .gif files and photos or those with large span of colors are better optimized as .jpg files. You can use Adobe Fireworks for this.
- Using a WYSIWYG html editor like Adobe Dreamweaver, create a css style sheet for elements of the layout that can be recreated in html e.g. heading, subheading and content font styles and colors, background colors etc.
- Using Dreamweaver, create the html page of the overall layout and insert the images, create the menus and apply the stylesheet.
- Convert this to a template in Dreamweaver.
Checkout our Adobe Dreamweaver CS3 Tutorial for detailed instructions on how to create a site in Dreamweaver.
You can also buy pre-built dreamweaver templates and customize them.
In case you are planning to build your site on Joomla you can buy Joomla templates and customize them.
| Customizable Website Templates | |
NOTE: You will need software like Adobe Dreamweaver, Photoshop and Flash to customize these templates. |
more templates |
Website Building Tutorial Menu
Overview: Components of a successful website
Step 1: Hosting Server - decide on where you are going to host the site
Step 2: Buy domain name
Step 3: Plan the site
Step 4: Design the layout
Step 5: Convert the layout into an html template
Step 6: Create the pages as per the site plan
Step 7: Install any additional scripts on the server
Step 8: Link the pages
Step 9: FTP the files to the hosting server
Step 10: Submit to search engines and promote the site
Suggestions for Improvement? If you have a suggestion to improve this tutorial please contact us. We would love to hear from you.
