Here you will find User guide How to quick and easy edit our templates, and you will be able to download empty buttons and logos for templates. In tutorials will be explained how to step by step edit template using empty buttons and logos.

STEP 1

Getting started

When you have downloaded our Free Template, the template is in a zip file. Windows Xp comes with a utility to unzip this file. If you aren't using Xp you can download some zip software from sites that we have listed below:

Download Winzip from www.winzip.com

Download WinRAR www.win-rar.com

Unziping the file by using Windows Xp

Double click on the template zip file that you just downloaded This will bring up the extraction wizard, then click File/Extract all.

The wizard window will popup, click next.

Now you will have to select the folder to extract the file to (Remember the place where you have extracted the template, so you can find it later). When you typed the place to extract click next.

By clicking next the template is extracted to location that you have selected.

If you are using some other operating system the process is very similar.

STEP 2

Basic tamplate information

When you have unziped the template, find it and double click to open it.

In the template folder you will find some picture gif files, css style and index.htm file.

Double click to index.htm to open it. In index.htm you will see the template with our logo and buttons just for example. Every our free template is made of one page (index.htm), with our logotype and our buttons for example. To adjust them to your needs you have to edit a logotype, buttons and make a few pages.

For easiest editing we made free buttons and logotypes for every free template, in which you have to put a text, and you can downloaded them from our pages.

Some template have graphic buttons, but some don't. The template without the graphic buttons haven't got the names of empty buttons because their menu is made only of links, but every template has a graphics logo.

When you have downloaded the template, empty buttons and logo you can start editing.

STEP 3

Template editing

For editing a template you need three programs:

1. Microsoft Front Page ( for editing htm files, index.htm ), or any other html editor

2. Jasc Paint Shop Pro ( for editing picture files, buttons and logo ) - you can download Free trial version from www.jasc.com

3. Microsoft Notepad ( for editing css style ), or any other font editor

Before editing a template create a copy.

Editing logo

First find a empty logo in empty buttons and logo folder (in this example the name of folder is template 12, because the template name is web template 12).

When you find the name of the file open it using Jasc Paint Shop Pro ( right click on a file> open with> Jasc Paint Shop Pro ).

Increase Color to 16 millions ( Image>Increase Color Depth>16 million Colors )

To enter your text in an empty logo use Text Tool ( A ). Click on A to select the text tool. Now that the text tool is selected click on the empty logo in the general area of where you would like your logo to be. This will bring up a menu that will allow you to edit border, colors, size, font face and other options. We suggest creating it as a selection with anti-alias checked.

When you are done, click "apply" so that you can put the text in the logo and put him to the place you wont using your mouse.

When text is selected you can use some effects like Drop Shadow ( Effects/3D effects/Drop Shadow ), Inner Bevel ( Effects/3D effects/Inner Bevel ). If you make a mistake, you can click on undo to go back. Save logo (File > Save As > name of logo) using save as type "gif".

STEP 4

Editing buttons

Every button is made of two images. The first image is the image you can always see, the second one is the image you see when you go across the button with your mouse. So, by editing one button you have to edit two images.

First find the names of the empty buttons in empty buttons and logo folder (in this example the name of folder is template 12, because the template name is web template 12).

In this example you will have 3 empty buttons, one for starting a menu, the other for in the middle from which you can make more buttons and the third for the end. Hover buttons you will make alone. In some other templates you will have only two buttons (exp. button and button hover). That means that you can make the whole menu from first button (in this example that will be three buttons), and the second button (button hover) you use for making the hover buttons (the buttons which shows up when you cross over the button with a mouse).

When you find it open the first button using Jasc Paint Shop Pro ( right click on a file> open with> Jasc Paint Shop Pro ).

Increase Color to 16 millions ( Image>Increase Color Depth>16 million Colors )

Zoom the image about 5 times using the scroll button on the mouse for easiest editing (click on the image with left button on the mouse and then zoom with the scroll button).

Enable the grid (View>Grid).

To enter your text in an empty button use Text Tool ( A ). Click on A to select the text tool. Now that the text tool is selected click on the empty button in the general area of where you would like your text to be. This will bring up a menu that will allow you to edit border, colors, size, font face and other options. We suggest creating it as a selection with anti-alias checked. When you have done all that, click apply and locate the text in the center of the button using your mouse.

Now save the button in the template folder (File>Save Copy as), for example "home". Use save as type "gif".

This is the end of the editing the first image.

For second image first open the image that you have just saved (so you could compare) and the first empty button that you have edit.

Increase Color to 16 millions and zoom both images for about 5 times.

In the empty image enter the same text using Text Tool ( A ).

In this image you can change the color of the text and his position (in our first image the text is white but in the second image the text is yellow an a little bit more left and up than in the first image. That gives the effect when you go across the button, the text changes the position and color in to yellow).

Now save this image in the template folder (File>Save Copy as), for example "homehover". Use save as type "gif".

Other buttons you can edit the same way.

STEP 5

Putting logo in a template

Open index.htm file using Microsoft Front Page or some other html editor ( right click on a file> open with> Microsoft Front Page ).

When you open it on the bottom of the screen you will see three options (Normal, Html, Preview). In "Normal" you edit template (like in word), in "Html" you edit the html code and Preview is made for web page preview.

Putting a logo

For putting your logo let the normal options open.

Then select our logo by clicking on it. Click on insert on the top of the screen (Insert > Picture > From File) and find the place where you save your logo and open it. That will change our logo in to yours.

To check how it looks in browser click on File > Preview in Browser > and chose the browser in which you want to look a template.

STEP 6

Putting buttons in a template

Open index.htm using Microsoft Front Page or some other html editor ( right click on a file> open with> Microsoft Front Page ).

When you open it on the bottom of the screen you will see three options (Normal, Html, Preview). In " Normal" you edit template (like in word), in " Html" you edit the html code and Preview is made for web page preview.

Putting buttons

Every our template is made of few buttons (usually 5 but you can create them even more). Every button is made of two images. The first image is the image you can always see (home.gif), the second one is the image you see when you go across the button with your mouse. (homehover.gif).

First button in every our template is a home button. He is made of two images home.gif and homehover.gif. To change him you have to change his names in html code. (It's important that the buttons in which you will change the button home or some other button, you have save in a template folder where are the other template files.

In bottom of the screen click on "Html" to see html code.

Then find this button home script:

In a script you will find the names: home.gif (they are marked blue), homehover.gif (marked red). Replace them with your button names. Don't touch the rest.

The same way you can put the other buttons in a template.

STEP 7

Editing css style

For editing css style use Notepad, because if you use Microsoft Front Page, that could change the code in Style.

Open the template folder and find the style css.

Open it by using Notepad ( right click on a file> open with> Notepad). When you open it you will find this or similar code in it :

P {
FONT-SIZE: 12px; COLOR: #000000; TEXT-INDENT: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: deafult
}
A:link {
FONT-SIZE: 12px; COLOR: #F6AF3E; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
A:visited {
FONT-SIZE: 12px; COLOR: #F6AF3E; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
A:hover {
FONT-SIZE: 12px; COLOR: #F6AF3E; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: underline
}

First line (marked red) marks the size, color and kind of the text on the web pages.

Second, third and forth line are for links.

Here you can change color and size of the text and links if you don't like the one that we have put on.

In some template you will also have this code:

.crni {
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}
A.crni:link {
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; COLOR: #000000; FONT-SIZE: 11px; TEXT-DECORATION: none
}
A.crni:visited {
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; COLOR: #000000; FONT-SIZE: 11px; TEXT-DECORATION: none
}
A.crni:hover 1
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; COLOR: #000000; FONT-SIZE: 11px; TEXT-DECORATION: none
}
A.crni:active {
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; COLOR: #000000; FONT-SIZE: 11px; TEXT-DECORATION: none
}

He is for links but for different kind of links. If you wont more different links on your web page (some have underline effect, some bold effect) you can make them using this code. Exp. this link has the name "crni", but you can change it in any other name (important is that you change all five of them).

If you wont that some link has that effect (in this exp. "crni") you have to add "class" with the name "crni". You can do that by opening index.htm file in Microsoft Front Page, mark the text from which you wont to make a link and click on Insert > Hyperlink, write the link address and click on style so you can mark its "class".

In this example the name "class" is "crni".

If you don't write the name "class" link will use the basic effect for links:

A:link {
FONT-SIZE: 12px; COLOR: #F6AF3E; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
A:visited {
FONT-SIZE: 12px; COLOR: #F6AF3E; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
A:hover {
FONT-SIZE: 12px; COLOR: #F6AF3E; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: underline
}

STEP 8

Editing scrollbar

For scrollbar editing open index.htm file in Microsoft Front Page and in Html code find this script:

<STYLE>
BODY {
scrollbar-arrow-color:FFDEAD;
scrollbar-shadow-color:B5C2D5;
scrollbar-face-color:B5C2D5;
scrollbar-highlight-color:FFDEAD;
scrollbar-darkshadow-color:FFDEAD;
</STYLE>

You can change the Scrollbar color by changing colors (marked red). Every color marks one part of the scrollbar. Experiment.

Creating more pages

First open index.htm using Microsoft Front Page.

If you have already edit/put your logo and your buttons, you will make the other pages by clicking on File > Save As >choose template folder where is the index.htm file and save it under the name you wont. This way you can make as many pages as you wont.

When you have made few pages you have to connect them with links. In first line there are buttons but also other links that you can make. To put links on buttons and with that connect other pages you must click on a button (exp. about us) and then Insert > Hyperlink > find the page that you made before on which you wont that this link leads. In our case the page would be aboutus.htm, if we have made it.

Put it all online

FTP program is the best way to put web pages and files on server. You can also use Internet Explorer, in that case you have to write your web address but instead http use ftp protocol (ftp://www.name of your page.com), and then write username and password. After that transfer all files to server by method Cut and Paste. You can also use Microsoft Front Page (File > Publish Web > write your web address, username and password). For more information ask your hosting administrator.

Many hosting services offers you FTP program for transfer files on server.

The most important thing is that you transfer all files.