Template Design Instruction

(1)

DC-OT-09 v 3.0

Template Design Instruction

To upload the template to site builder system, you have to archive the template files and images. Supporting archive format is .zip and .tar.gz.

Template Naming

Template name consist of 3 components,

{COLORGROUP}_{PICTURE}_{NAVIGATORSTYLE}.zip such as gold_ restaurant_2.zip. - Gold is a color group of the template. There are 13 color group, please refer to the

Appendix A for the color group name

- Restaurant is a main picture showing in the template

- 2 represent to the navigator alignment for your template (1 = vertical navigator, 2 = horizontal navigator)

Don’t use special symbol such as ?, !, _, *, ‘, ’’, # , @ , & and space. If you want to divide word, you need to use dash (-). Template name length must not exceed 30 characters.

Template File Structure

{COLORGROUP}_{PICTURE}_{NAVIGATORSTYLE}.zip {COLORGROUP}_{PICTURE}_{NAVIGATORSTYLE} ---- images ---- index.htm ---- style.css ---- s_preview.gif or s_preview.jpg ---- colordb.ini.php ---- colorConfig.ini.php

File names and folders are case sensitive, all in lowercase.

images

All images keeps in images folder. index.htm

This is a template html file. It must contain to following variable strings. {XMLCHARSET} {HTMLDIR} {TITLE}    {LOGO} {COMPANY_NAME} {SLOGAN} {NAVIGATOR} {SIDE1}

(2)

{TOP} {PATHWAY} {ICON} {BODY} {SIDE2} {FOOTER} {BOTTOM} {RVBANNER} {POWERED} style.css

This is the CSS file for your template. It must contain the following CSS classes. .company .slogan .magin a:link a:active a:hover a:visited s_preview.gif or s_preview.jpg

Preview image file. This will be display in the site builder step2.

colordb.ini.php

Navigator color ID database. Please refer to the Appendix B for the detail.

Creating index.htm

We will demonstrate creating index.htm by using DreamweaverMX as a tool. If you don’t use it, you still be able to learn and easily apply to your tool.

XHTML compliant

(3)

On the Preferences window choose ‘New Document’ and check the checkbox for ‘Make Document XHTML Compliant’.

HTML Header

Related variables: {XMLCHARSET}, {HTMLDIR}, {TITLE}, , ,

Start building the new index.htm by going to File > New > Create. On the code view, you will find the default HTML code below.

1 Change "iso-8859-1" to "{XMLCHARSET}"

2 Add {HTMLDIR} in the <html> tag. It will looks like this

3 Change <title>Untitled Document</title> to <title>{TITLE}</title>

4 Change <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

to

<link rel="stylesheet" href="style.css" type="text/css" /> 

(4)

 Finally you will get the code like this.

HTML body

Related variables: {LOGO}, {COMPANY_NAME}, {SLOGAN}, {NAVIGATOR}, {SIDE1}, {TOP}, {PATHWAY}, {ICON}, {BODY}, {SIDE2}, {FOOTER}, {BOTTOM}, {RVBANNER}, {POWERED} In the HTML body tag, you have to place several variables into the template. There are 3 variable groups for the HTML body.

{LOGO}, {COMPANY_NAME}, {SLOGAN}

<div style="position: absolute;">

<div id="Layer1" style="position:relative; left:47px; top:43px; width:100; height:60; text-align:center; z-index:1; overflow:visible; white-space:nowrap;"> {LOGO} </div> </div>

<div id="Layer2" style="position:relative; left:4px; top:114px; width:auto; height:auto; text-align:left; z-index:2; overflow:visible; white-space:nowrap;" class="company">

{COMPANY_NAME}</div>

</div>

<div id="Layer3" style="position:relative; left:4px; top:141px; width:auto; height:auto; text-align:left; z-index:3; overflow:visible; white-space:nowrap;" class="slogan">

{SLOGAN}</div>

(5)

There is no strict rule whether where to place and how to code the logo, slogan and company name. The only requirement is the variable {LOGO}, {COMPANY_NAME}, {SLOGAN} must exist on your template.

Our entire templates place the {LOGO}, {COMPANY_NAME}, {SLOGAN} in the layer for easily reuses the code and move around in the template to suitable with the design.

{BODY}, {NAVIGATOR}, {SIDE1}, {TOP}, {PATHWAY}, {ICON}, {SIDE2}, {FOOTER}, {BOTTOM} {BODY} is the editable area where you add text in the step5 of RVSiteBuilder.

{NAVIGATOR} is the location of navigator. Special Variables *:

{SIDE1}, {TOP}, {SIDE2}, {FOOTER} is the place holder for some of the future components such as banner ads, calendar, blog, and etc.

{BOTTOM} is the page footer for the future features such as the text based navigator and location of the privacy and acceptable usage policy.

{PATHWAY} is the website path way.

{ICON} is the print, favorite, and send email to friend buttons.

* These variables are mandatory even you don’t use them; you still need to place these variables in the template.

Special variables should surround with the HTML comment and HTML code. If the feature is not used, RVSiteBuilder will remove from the BEGIN HTML comment to END HTML comment, not just the {} variable in the published website. You are safely to surround the variables with tables, links, images and etc.

<tr>

<td align="left" width="99%">{PATHWAY}</td>   <td align="right">{ICON}</td>  </tr> </table> </td> </tr>

If the {PATHWAY} is not used while using the template in RVSiteBuilder, the final code will be automatically converted to:

(6)

If the {ICON} is not used while using the template in RVSiteBuilder, the final code will be automatically converted to:

<td align="left" width="99%">{PATHWAY}</td>

</tr> </table> </td> </tr>

If both {ICON} and {PATHWAY} are not used while using the template in RVSiteBuilder, all of the above code will not show on the finale website.

Template Design tips:

• {NAVIGATOR} should inside the table or CSS layer. Its height should not less than 32 pixels. 32 pixels is the best fit.

(7)

{RVBANNER}, {POWERED}

{RVBANNER} is the place holder for Created by RVsiteBuilder icon. You need to add this variable in your template. In RVSiteBuilder Manager, you can hide the icon and don’t show on the

published website.

{POWERED} is the place holder for Powered by icon. You need to add this variable in your template. In RVSiteBuilder Manager, you can configure your web hosting company and show the icon on the published website.

Creating style.css

The file name of the CSS style must be style.css. All letters are lowercase. All templates have to have style.css file and contain the following CSS class. You can set your own style or use the default below.

Default CSS body { font-size:76%; margin:0; padding:0; } table { font-size:100%;}

a:active {color: #8C4F01; text-decoration: underline;} a:link {color: #FEA100; text-decoration: underline;} a:visited {color: #FEA100; text-decoration: underline;} a:hover {color: #8C4F01; text-decoration: underline;} .magin {padding:5px;} .company{ font-family: verdana,arial,helvetica; font-size: 14px; color: #666666; font-weight:bold; }

(8)

.slogan { font-family: verdana,arial,helvetica; font-size: 10px; color: #666666; font-weight:bold; }

body, table : This will set the font size for your template. The default one is the best font size enable cross browsers and cross platforms.

a:link, a:active, a:hover, a:visited : This will apply to the links in{BODY}.

a:active {color: #8C4F01; text-decoration: underline;} a:link {color: #FEA100; text-decoration: underline;} a:visited {color: #FEA100; text-decoration: underline;} a:hover {color: #8C4F01; text-decoration: underline;}

.magin : This will apply to {BODY} to provide the space around the editable text in the SiteBuilder.

.magin {padding:5px;}

.company : It will be the CSS style for the company name, {COMPANY_NAME}, in your template. .company{ font-family: verdana,arial,helvetica; font-size: 14px; color: #666666; font-weight:bold; }

.slogan : It will be the CSS style for the company name, {SLOGAN}, in your template. .slogan { font-family: verdana,arial,helvetica; font-size: 10px; color: #666666; font-weight:bold; }

Creating preview image

• Supporting image extension are .gif and .jpg .

• Image size is 145 x 135 pixels

• Maximum file size is 30 Kbytes

• The name of the image must be s_preview.gif or s_preview.jpg. File name is case sensitive. All letters are lowercase.

(9)

(10)

Appendix A: Color Group

1. Lightblue 2. Blue 3. Lightgreen

Cyan 00FFFF Dodgerblue 1E90FF Aquamarine 7FFFD4

Paleturquoise AFEEEE Blue 0000FF Lightgreen 90EE90

Lightblue ADD8E6 Royalblue 4169E1 Springgreen 00FF7F

Lightskyblue 87CEFA Steelblue 4682B4 Greenyellow ADFF2F

Deepskyblue 008FFF Mediumblue 0000CD Yellowgreen 9ACD32

Darktrquoise 00CED1 Navy 000080 Limegreen 32CD32

Indigo 4B0082 Darkseagreen 8FBC8F

4.Darkgreen 5. Beige 6. Gold

Darkkhaki BDB76B Beige F5F5DC Khaki F0E68C

Olive 808000 Linen FAF0E6 Yellow FFFF00

Olivedrab 6B8E23 Bisque FFE4C4 Gold FFD700

Seagreen 2E8B57 Wheat F5DEB3 Goldenrod DAA520

Green 008000 Tan D2B48C Orange FFA500

Teal 008080 Roybrown BC8F8F

Darkolivegreen 556B2F

(11)

Darkslategray 2F4F4F

7. Maroon 8. Red 9. Pink

Peru CD853F Coral FF7F50 Mistyrose FFE4E1

Chocolate D2691E Tomato FF6347 Pink FFC0CB

Sienna A0522D Indianred CD5C5C Hotpink FF69B4

Maroon 800000 Crimson DC143C Palevioletred DB7093

Red FF0000 Deeppink FF1493

10. Magenta 11. Purple 12. White

Thistle D8BFD8 Mediumppurple 9370DB White FFFFFF

Plum DDA0DD Darkviolet 9400D3 Whitesmoke F5F5F5

Violet EE82EE Blueviolet 8A2BE2 Gray 808080

Magenta FF00FF Purple 800080 Silver C0C0C0

13. Black

Black 000000

(12)

Appendix B: colordb.ini.php

[bgcolor]

color_bgn = Navigator background color color_opp = Opposite color of the color_bgn color_bgh = 30% black foreground of color_bgn color_bgc = 30% white foreground of color_bgn [link]

color_anor = Color of normal state of the navigator hyperlink color_ahov = Color of the hover state of the navigator hyperlink color_acur = Color of the current state of the navigator hyperlink [line]

color_line1 = 50% black foreground of the color_bgn color_line2 = 50% white foreground of color_bgn

(13)

Navigator Vertical

• 3dbullet

(14)

• Arrow

(15)

• Digit bullet

(16)

• Catching border

(17)

• Duo closing

(18)

• Header tab

(19)

Navigator Horizontal

• Circle

• Arrow

(20)

• Classic button

• Dashtab

(21)

• Line bottom

• Separate

(22)