Part 1: Export your design to template.htm file.
Site Builder CX lets you load your own custom design template. You can then duplicate the rest of your web pages from the template.
| | 
| 1. This is an original template that you have designed or purchased from a third party templates provider. | | 2. Normally, the template will come with Photoshop format (PSD) file where you can do some editing and remove unnecessary layers. It is best that you can have the layout to be in 4 different areas : Header, Menu, Content and Footer. |
3. Next, you will need to publish the graphical template design into HTML format file. You can use Dreamweaver, or if you have good HTML editing skill, write the HTML codes from scratch to have your codes much more organized. Do make it as a practice to use vAlign=top for the table's cell so that the content will be aligned up to the top.
4. Save the file as template.htm.
5. Then, you will need to insert some special tags in order for the Site Builder program to recognize which area to load the content, menu, and text.
[[config]] : Load the required system configuration file.
[[websitetitle]] : Display website title.
[[slogan]] : Display website slogan.
[[content]] : Display main content.
[[copyright]] : Display copyright text | [[menu1]] : Load Menu 1
[[menu2]] : Load Menu 2
[[menu3]] : Load Menu 3
[[menublock1]] : Display menu block 1
[[menublock2]] : Display menu block 2 |
6. Just enter the tag with the double square brackets, with the exact word. The program will replace the tags with PHP codes when loading the dynamic content.
7. Also, you will need to insert the tags for the page Title and META header in your HTML source as below:-
<head>
<title>[[title]]</title>
<meta http-equiv="Content-Type" content="text/html; charset=[[charset]]">
<meta name="keywords" content="[[metakeyword]]">
<meta name="description" content="[[metadescp]]">
</head>
8. For example, you can view our sample file here.
Part 2: Generate the menu code for the Menu tags
1. If you are familiar with HTML editing, you will realise that the HTML codes are actually duplicate when we want to display a list of links in the website nagivation menu. See the example below.
Link 1
Link 2
Link 3 | <a href=http://yourdomain.com/link1.php>Link 1</a><br>
<a href=http://yourdomain.com/link2.php>Link 2</a><br>
<a href=http://yourdomain.com/link3.php>Link 3</a><br> |
2. If you view the HTML source code of your design template file, you will be able to identify such duplication of codes, either with TD tags if the menu involves table, or just a simple <BR> if the links just begin with new line.
3. Site Builder CX works in such a way that it generates your menu links automatically from a list of pages you have created.
4. We have identified 3 major menu locations in common website layout where we named them as Menu 1, Menu 2 and Menu 3.
5. From your template file, you will need to extract the HTML codes which will be duplicated when generating new menu. Then replace them with special bracket tags so that dynamic menus can be created.
Below is what you have to extract and put in the templatemenu.htm file.
[[menu1]]:<td><a href="[[menulink]]"><font size=2><b>[[menutext]]</b></font></a></td>
[[menu2]]:<a href="[[menulink]]">[[menutext]]</a>
[[menu3]]:<a href="[[menulink]]"><b>[[menutext]]</b></a>
6. This means if you have 2 pages assigned for Menu 2, it will generate the code as:- <a href="link1.php">Link 1</a> <a href="link2.php">Link 2</a>
7. After you have done finalize the menu codes in the templatemenu.htm file, all you need to do is to insert the [[menu1]], [[menu2]], [[menu3]] tags in your template.htm file to identify where the menu should be call up to load.
Please download the sample file that we have provided for reference.
Part 3: Package all into a ZIP file.
1. It is recommended that you put the all the files in a folder and subfolder when you are working on the template.
sampletemplate/image
sampletemplate/template.htm
sampletemplate/templatemenu.htm | This folder is where you store all your image files.
The main template file.
The menu file which generates the dynamic menu. |
2. In your Windows Explorer, right click on the 'sampletemplate' and compress it. Please take note that do not compress by selecting all the files under the folder.
3. Save it as a ZIP file, and you will be able to load it in the Design Template area.
If you need any assistance, please contact our technical support to assist you in packaging your own template file.
Attachment : sampletemplate.zip |
