Template Design Instruction

Transcription

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 File names and folders are case sensitive, all in lowercase. images All images keeps in images folder. {COLORGROUP}_{PICTURE}_{NAVIGATORSTYLE} ---- images ---- index.htm ---- style.css ---- s_preview.gif or s_preview.jpg ---- colordb.ini.php ---- colorconfig.ini.php 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 First, you need to set the preference by going to Edit > Preferences.

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 " to "{XMLCHARSET}" 2 Add {HTMLDIR} in the <html> tag. It will looks like this <html xmlns=" {HTMLDIR} > 3 Change <title>untitled Document</title> to <title>{title}</title> 4 Change <meta http-equiv="content-type" content="text/html; charset=iso " /> 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 style="position: absolute;"> <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 style="position: absolute;"> <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> </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 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 class="magin"> <table cellpadding="0" cellspacing="0" width="100%"> <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:  <tr> <td class="magin"> <table cellpadding="0" cellspacing="0" width="100%">

6 <tr>  <td align="right">{icon}</td>  </tr> </table> </td> </tr>  If the {ICON} is not used while using the template in RVSiteBuilder, the final code will be automatically converted to:  <tr> <td class="magin"> <table cellpadding="0" cellspacing="0" width="100%"> <tr>  <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. {BODY} should wrap with.margin CSS class.

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 in the SiteBuilder. : This will apply to {BODY} to provide the space around the editable text.magin {padding:5px;}.company template..slogan : It will be the CSS style for the company name, {COMPANY_NAME}, in your.company{ font-family: verdana,arial,helvetica; font-size: 14px; color: #666666; font-weight:bold; } : It will be the CSS style for the company name, {SLOGAN}, in your template. Creating preview image.slogan { font-family: verdana,arial,helvetica; font-size: 10px; color: #666666; font-weight:bold; } 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 Limegreen 32CD32 Indigo 4B0082 Darkseagreen 8FBC8F 4.Darkgreen 5. Beige 6. Gold Darkkhaki BDB76B Beige F5F5DC Khaki F0E68C Olive Linen FAF0E6 Yellow FFFF00 Olivedrab 6B8E23 Bisque FFE4C4 Gold FFD700 Seagreen 2E8B57 Wheat F5DEB3 Goldenrod DAA520 Green Tan D2B48C Orange FFA500 Teal Roybrown BC8F8F Darkolivegreen 556B2F Darkgreen

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 Crimson DC143C Palevioletred DB7093 Red FF0000 Deeppink FF Magenta 11. Purple 12. White Thistle D8BFD8 Mediumppurple 9370DB White FFFFFF Plum DDA0DD Darkviolet 9400D3 Whitesmoke F5F5F5 Violet EE82EE Blueviolet 8A2BE2 Gray Magenta FF00FF Purple Silver C0C0C0 13. Black Black

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 Bullet color tone [dark, light, white, black]