WebsiteX5.info - The ultimate guide for Incomedia's WebsiteX5

WebsiteX5 comes with a large number of website templates, which you can use to create great looking websites. And if you can't find one to your taste you create a 'Custom template' to create your own look.

Although you can change the index.html of a custom template (you can find then in the folder C:\Program Files\WebSite X5 Evolution\Models\_Custom\Ver or C:\Program Files\WebSite X5 Evolution\Models\_Custom\Hor), using a normal template has some advantages. When you create more than one website you can keep track of the changes you've made to the template and you could even try your hands at a webpage with the menu on the right...

So why not create your own template. It isn't that difficult. The most difficult part is creating your graphics.
However, you will need some basic HTML- and CSS knowledge. There are many good starter manuals on the web.


Many thanks to Cheekyman (Frank) and ICM for reviewing this tutorial and for their suggestions and improvements.


A few tips on tools you might need
Although you can do almost everything with a standard text editor and a graphics program there are a few tools which make life a lot easier:

Firefox + Firebug
The Firebug plug-in for Firefox gives you the ability to examine the structure of a page and the properties of all the elements on a page. You can also debug JavaScript using Firebug. You can find the plug-in using the Add Ons function of Firefox.

Firefox + Web Developer Toolbar
The Web Developer toolbar adds a toolbar to Firefox with a large number of very useful functions. You can, for example. examine the css, which is for the page and also outline all the Block level elements on a page.

An HTML editor
Although you can use Notepad to edit the files for a template, an HTML editor can be very useful. You could of course buy a program like Dreamweaver, but there are good freeware programs on the web. Which one you use depends on your taste.

Graphic image editor
If you don't have a graphics program like Adobe Photoshop you can find a number of good, free programs on the internet. For example:

• ' The Gimp'. This is an open source image editor which has some great features. It takes a bit of 'getting used to', but it is a great program. The images for this tutorial are created with this program.
• ArtWeaver is another good program with a more 'traditional' interface. There's also a portable version which you can place on your pen drive.
• Paint.net. also very nice.

Which one you choose depends on your taste.

Image slicer
When you have created your graphics design you will have to slice it up into the parts needed for the website. You could do this with a graphics editor, but there are several good utilities which are specially designed for this task. Here is one: Image Splitter.

Screen capture and eye dropper tool
You might need a tool capture an image of the screen or to determine the color-code of a screen element, for example the colour of the body background of your page. I use Faststone Capture (the portable version), but you can find many others on the internet.

Note!
The files in the template are in a folder under c:\Program Files, which is protected by Windows. You will need to set the security-settings of these files. To do so follow these steps:

• Right click on the document
• Go to properites/security
• Click on your username to allow you to modify
• Click edit (when you use UAC click continue)
• Click on username
• Tick all permissions
• Click apply
• Close the properties box

You can now modify the file.

Next -->