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.

Things You'll Need

  • Web page editing software
  • Graphics editing software

Customize the HTML File

  • 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.

  • 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.

  • 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.

  • 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.

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

  • 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.

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

Customize the Graphic Files

  • 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.

  • 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.

  • 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.

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

Related Searches


Promoted By Zergnet



You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!