Convert the Layout into an HTML Template

[This is Step 7 of the Website Building Tutorial]

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:

  1. 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. Depending on which graphics editor you used to design your layout you can use Fireworks or Photoshop for this.

  2. Using a WYSIWYG HTML editor like 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.

  3. Using Dreamweaver, create the HTML page of the overall layout and insert the images, create the menus and apply the stylesheet.

  4. Convert this to a template in Dreamweaver. This is a special (.dwt) file that can be used as a basis to create the pages of your website.

Check out our Adobe Dreamweaver CS3 Tutorial for detailed instructions on how to create a site in Dreamweaver.

Professionally designed, premade HTML layouts, Joomla templates and Wordpress themes are also available for purchase. These can be customized to represent your website's identity.

Related Resources

Go to Step 8 >>

 

Website Building Tutorial Menu

Overview: Components of a successful website

Step 1: Determine the Website's Niche

Step 2: Choose Website Building Tools

Step 3: Hosting Server - decide on where you are going to host the site

Step 4: Buy domain name

Step 5: Plan the site

Step 6: Design the layout

Step 7: Convert the layout into an html template

Step 8: Create the pages as per the site plan

Step 9: Install any additional scripts on the server

Step 10: Link the pages

Step 11: FTP the files to the hosting server

Step 12: Submit to search engines and promote the site

Step 13: Website Monetization

Step 14: Maintain the site

Suggestions for Improvement? If you have a suggestion to improve this tutorial please contact us. We would love to hear from you.



God Loves You! "For God so loved the world that he gave his one and only Son (Lord Jesus Christ),
that whoever believes in him shall not perish but have eternal life." - John 3:16, Bible