How do I make a website template?

Ready-made website design templates are both paid andfree, for every taste. However, all of them have a huge drawback - they are not unique. Even if you bought a template, then someone else can buy it.

How to be, if you want to have your own website,and you can not order a website design in a professional studio? You can and should try to make your own design template for your site. A template is a kind of preparation for the design of the pages of your web project, which you then fill in with the necessary content.

So, where to start. First step - preliminary careful consideration, howYou want to see the design of your site, it may seem superfluous. However, only at first glance. It is better to draw a future design on paper, experiment with different options and only then start working in a graphics editor.

Next step, as you probably already guessed, is drawing a design in a graphic editor. Which at the same time choose the editor - a matter of personal tastes and preferences. The most common graphic package - Adobe Phohtoshop, so consider the creation of a template for the design of the site will be on his example.

The pages of your future site will be the cells of the table if you use table layout or blocks, if block. Place the picture you have drawn design layout site into these cells or blocks is the next step in creating a site template. To do this, you need to divide one single image into several parts, by the number and size of the cells or blocks you need.

In the program Adobe Phohtoshop there is a special tool for cutting images - Slice Tool. With this tool, literally like a knifethe image is cut into the required number of pieces. It should be taken into account that when filling out the text, some table cells or blocks on the site page can "stretch". Therefore, for these cells, you need to cut out pieces of the image so that when copying they do not create an impression of the tile.

When the image is cut into the required number of parts, you need to save it. In Adobe Phohtoshop, this is easy. On the menu File you need to select item Save for Web devices. In the dialog that appears, you need toselect the file type "HTML & images", specify the name of the file "index.htm" or "index.html" (the .htm extension is preferable) and save this file to the root folder of your future site. If everything was done correctly, then the corresponding index.html file and the images directory will appear in this folder. In images, just all the chopped pieces of the image will be.

What's next? It remains only to edit the file index.html so that when you fill it with textThere was no rupture of the image or white stripes. In order to avoid such problems, it is necessary to select for which cells the images should be background, which cells will be stretched or combined. Do not be discouraged if you did not succeed in perfect cutting the image from the first time, you might need a few painful attempts. But as a result, the design of your site will be exactly what you wanted, and the site itself will please you originality and uniqueness.

Based on the materials of the site webstudio2u.net