Web templates are raw materials that need to be refurnished/edited to be published online. Editing web-templates could include
- content insertion,
- graphic insertion/modification,
- inserting company logo,
- changing styles,
- changing links,
- changing flash images etc.
Though editing is an easy task, you can always make use of template customization services that most template providers offer at affordable costs to help you edit your website. Some template providers like Buy Templates also offer affordable customization services irrespective of where you actually purchased the template from.
This article shows you the various techniques that you can use to edit your web templates effectively to create unique looking websites.
So lets begin!!!
Tutorial for Editing website templates effectively
For editing web templates, all you would require is an html editor like Dreamweaver, Photoshop, FrontPage or Go-live. Most of these html editors are WYSIWYG (what you see is what you get) kind and have a user friendly interface. You can do two types of editing to your web-templates, namely
- Content editing and
- Graphics editing.
1.) Editing the content of your web templates
The template provider would have supplied you with an ‘index.html’ file along with your template. This is the file that you would require for editing content of your templates. You can edit content using either of the following software programs
- a text editor
- an html editor.
- Editing using text editors
- Editing using text editors is the best possible way to edit your templates but it would require you to be conversant with Html in order to hand code your templates.
- Text editorswill ensure that your html coding remains clean and no unnecessary junk code is added.
- Notepad is probably the most well-known of all text editors. Other than Notepad some other good and advanced text editors are editpad (editpadpro.com), NoteTab Light (notetab.com), and arachnophilia (arachnoid.com/arachnophilia/index.html).
- Editing using Html editors
- Making use of an html editor is probably the easiest way of editing templates and would be useful to those who are not conversant with html.
- Most html editors are user friendly and have an easy-to-use interface.
- Some well known html web template editors are Dreamweaver, FrontPage and Go-live.
- To edit content of the template, all that you would need to do is
- load the index.html file in an editor
- After that you can simply cut and paste your content where the dummy content is provided and you are done.
Note - Adding content would also include changing links, adding content to tags and changing image sources if required.
- Make sure to change the title of all pages. The title can be
- a keyword or words that are most repeated in your content
- a description of your webpage. For instance you can use ‘ Florida tourism’ as the title for a webpage related to tourism in Florida.
- Change alt text of images and keep the alter text as a keyword. This is because search engines don’t read images but they do read the Alt texts. For instance you can use the tag ‘ Florida beach’ for a Florida beach image.
- Make sure to add proper anchor text to all your links. This is because Anchor texts are given special importance in search engines.
- Give proper headings to all your pages.
- The Heading can contain specific keywords.
- Headings are given using ‘h1, h2, h3 ….. h6’ tags.
- Text with-in heading tags are given more value by search bots.
- Be sure to check for spelling mistakes, grammatical errors, broken links and misspellings before loading the site
- Provide contact information.
2.) Editing images and graphics
Editing images would involve
- changing image colors,
- add/removing image layers,
- add/changing text used in images etc.
In order to make changes to the images used in the web template you would need to use the PSD file. Almost all template providers would supply you with a PSD file although some may charge you extra for the file.
What is a PSD file? A PSD file is basically a layered file that is created using Adobe PhotoShop. This file is compatible with many graphic editing programs which include Jasc Paint Shop Pro 7, Ulead PhotoImpact 7 & 8, ImageReady and Adobe Photoshop. For more information on PSD files you can visit adobe.com.
Note - In case you don’t have access to any of the above mentioned software programs for editing the templates, you may request your web template provider to give you BMP files instead of PSD files. A BMP file is a high quality bitmap image file that can be edited using any image editing software program.
Handy tips
- Change the color of images to suite and enhance your text visibility
- If needed, replace images used in the templates to add your own professional images.
Note- One good website from where you can get professional images is ‘gettyimages.com’
3.) Editing the styles of a template
- CSS style sheets are the ones that allow you to make changes to the style of the webpage like changing font color, line and paragraph spacing, font size, link color etc.
- Style sheets are useful as they allow you to make changes to many WebPages by altering one document.
- CSS can be edited using any Html editor or text editor. However, there are some specialized programs available, like ‘TopStyle’ (bradsoft.com)., that are meant specifically for editing CSS Stylesheets.
- There are many web template providers who offer internal style sheets or multiple font styles.
- It is difficult to edit internal style sheets and therefore is not recommended.
- Always make sure to go for template providers who offer you with external CSS Style Sheets.
Handy tips
- Make sure to use contrasting text and background colors
- Make sure to use same font type through out a webpage. Making use of different font types can make reading difficult. Arial and veranda are best suited for online reading.
- Never use justification for your text as it can make reading difficult.
- Provide a site map
|