How to Use a Downloaded Design Template

A downloaded design template is a great way to shortcut creating a new website. With a template, you don't need to agonize over the design because it's already done for you. Even the graphics are included. You will, however, need to customize the template to fit your website needs. This requires web editing software, ideally one with a design layout view such as Adobe Dreamweaver, and graphics editing software, such as Adobe Photoshop or Adobe Fireworks, that can read PNG and PSD files and is able to export JPG and GIF files.

Difficulty: Moderate

Instructions

Things You'll Need:

• Web page editing software
• Graphics editing software

Customize the HTML File

1. 
    
   Website Template Files

   Look at the files included with the downloaded design template. They will be a mixture of HTML, CSS and graphics files. Some graphics may be labeled as "editable," meaning these are the ones the designer expected you to want to customize for your website, such as the banner. Other graphics you probably don't need to edit are spacers, bars and backgrounds that hold the design together.

2. Make a copy of the folder containing the template files. This way you can edit one set of files and keep the originals somewhere else in case you want to use them again.

3. 
    
   Template Index File Opened in Dreamweaver

   Open your web editing software program and open the template file labeled something like index.html. This would be the home page for the template.

4. 
    
   Image Selected to Note Filename

   Examine the template in your web editing tool and look for the areas you want to customize. Click on the images to find out what their filenames are so you can locate them in the template files to edit. Also, note the image dimensions (height and width). When you customize template graphics you must make sure your new files are the same dimensions as the originals or you will skew the layout.

5. 
    
   Template Text Selected for Editing

   Edit text areas on the template and add your new content.

6. Remove any parts of the template you don't want, but remember some templates that use tables in the layout may have graphics or text in certain locations to hold the width of a column at a specific measurement. If you remove those items, the column might shrink, distorting the layout. Replace them with a graphic or text of equal size to keep the column width from changing.

7. Use the Save command in your web editing tool to save your changes, then exit the web editing tool.

Customize the Graphic Files

8. 
    
   Editables Folder in a Website Template

   Open your graphics editing tool and open the template files you want to customize. The ones you noticed in the HTML file will probably have JPG or GIF extension, which are compressed files optimized for the web. The files you want to edit are the "original" files that these compressed versions came from. They should be in PNG or PSD or another format other than JPG or GIF and are probably stored in a separate folder inside the template folder.

9. Use the editing tools in your graphics software to change the files to how you want them to appear on your web page and save the changes.

10. 
     
    Export Window in Adoble Firworks

    Export the edited graphic files in the JPG or GIF format that matches the format of the files you're replacing in the template, and place them in the same folder with the HTML file you saved in part one. Don't change their file names or the references in the HTML file will be broken. Your graphics program will notify you that the exported file is replacing an existing file and that's what you want.

11. 
     
    Index File with Two Updated Images

    Reopen the HTML index file in your web editing tool to see how the updated graphics look and make adjustments as necessary.

References

• How to Edit a Website Template

Resources

• Adobe Dreamweaver Home Page
• 25 Useful WYSIWYG Editors
• Free Dreamweaver Templates