home *** CD-ROM | disk | FTP | other *** search
/ Artville: Technology Concepts / ATC.zip / WIN_KUDO / PROGRAM / CUSTOM.TXT < prev    next >
Text File  |  1998-12-23  |  9KB  |  134 lines

  1. HTML Custom Template Tutorial
  2.  
  3. This brief tutorial describes how to make and use a Kudo custom HTML template. The Kudo HTML Export tool will use the custom template file to automatically add thumbnail images and named links to larger screen size images.  Although most will use images, any Kudo-supported file type can be linked to your custom HTML page. Some UNIX servers are unable to support filenames with certain characters (spaces, (~) the "tilde", and others); be sure that files to be uploaded to a web server use names legal for that server. 
  4.  
  5. A common HTML page looks like this:
  6.  
  7. *********************************************************************************************
  8. HTML PAGE BEFORE CONVERSION TO CUSTOM TEMPLATE:
  9. *********************************************************************************************
  10. <html>
  11. <head>
  12. <title>Imspace Systems Corp.</title>
  13. </head>
  14. <body background = "thumbs/bkground.gif" bgcolor="#C0C0C0" link="000000" vlink="444444">
  15. <div align="center"><center>
  16. <H4><FONT FACE="Verdana" SIZE=6 color="#FF0000">
  17. <p align="center"><i>Imspace Systems Corporation</i></p></FONT></H4><FONT FACE="Arial" SIZE=4 color="#000000">
  18. <p align="center">Check all our new products and promotions, please visit our WebPage: </FONT><br>
  19. <a href="http://www.kudo.com"><strong>http://www.kudo.com</strong></a></p>
  20. <table border="1" cellpadding="6" cellspacing="2" width="100%" bordercolor="#ff0000" bordercolordark="#ffffff" bordercolorlight="#000000">
  21. <tr>
  22. <td align="center" width="25%">
  23. <a href="images/1933.png"><img border=0 src="thumbs/1933.gif" width="78" height="120"></a></td>
  24. <td align="center" width="25%">
  25. <a href="images/1934.png"><img border=0 src="thumbs/1934.gif" width="80" height="120"></a></td>
  26. <td align="center" width="25%">
  27. <a href="images/24-4.png"><img border=0 src="thumbs/24-4.gif" width="74" height="120"></a></td>
  28. <td align="center" width="25%">
  29. <a href="images/24-5.png"><img border=0 src="thumbs/24-5.gif" width="74" height="120"></a></td>
  30. </tr>
  31. <tr>
  32. <td align="center" width="25%">
  33. <a href="images/1933.png"><p align="center"><strong>1933.png</strong></a><br><i>151959 Bytes</i></p></td>
  34. <td align="center" width="25%">
  35. <a href="images/1934.png"><p align="center"><strong>1934.png</strong></a><br><i>225080 Bytes</i></p></td>
  36. <td align="center" width="25%">
  37. <a href="images/24-4.png"><p align="center"><strong>24-4.png</strong></a><br><i>117582 Bytes</i></p></td>
  38. <td align="center" width="25%">
  39. <a href="images/24-5.png"><p align="center"><strong>24-5.png</strong></a><br><i>45848 Bytes</i></p></td>
  40. </tr><tr><td></td></tr>
  41. <td align="center" width="25%">
  42. <a href="images/6-0.png"><img border=0 src="thumbs/6-0.gif" width="78" height="120"></a></td>
  43. <td align="center" width="25%">
  44. <a href="images/absolut.png"><img border=0 src="thumbs/absolut.gif" width="100" height="120"></a></td>
  45. <td align="center" width="25%">
  46. <a href="images/act2.png"><img border=0 src="thumbs/act2.gif" width="84" height="120"></a></td>
  47. <td align="center" width="25%">
  48. <a href="images/c.png"><img border=0 src="thumbs/c.gif" width="92" height="120"></a></td>
  49. </tr>
  50. <tr>
  51. <td align="center" width="25%">
  52. <a href="images/6-0.png"><p align="center"><strong>6-0.png</strong></a><br><i>9856 Bytes</i></p></td>
  53. <td align="center" width="25%">
  54. <a href="images/absolut.png"><p align="center"><strong>absolut.png</strong></a><br><i>81223 Bytes</i></p></td>
  55. <td align="center" width="25%">
  56. <a href="images/act2.png"><p align="center"><strong>act2.png</strong></a><br><i>385082 Bytes</i></p></td>
  57. <td align="center" width="25%">
  58. <a href="images/c.png"><p align="center"><strong>c.png</strong></a><br><i>72836 Bytes</i></p></td>
  59. </tr><tr><td></td></tr>
  60. <td align="center" width="25%">
  61. <a href="images/carbon1.png"><img border=0 src="thumbs/carbon1.gif" width="120" height="80"></a></td>
  62. <td align="center" width="25%">
  63. <a href="images/carbon2.png"><img border=0 src="thumbs/carbon2.gif" width="120" height="96"></a></td>
  64. <td align="center" width="25%">
  65. <a href="images/carbon3.png"><img border=0 src="thumbs/carbon3.gif" width="78" height="120"></a></td>
  66. <td align="center" width="25%">
  67. <a href="images/carbon4.png"><img border=0 src="thumbs/carbon4.gif" width="120" height="96"></a></td>
  68. </tr>
  69. <tr>
  70. <td align="center" width="25%">
  71. <a href="images/carbon1.png"><p align="center"><strong>carbon1.png</strong></a><br><i>87591 Bytes</i></p></td>
  72. <td align="center" width="25%">
  73. <a href="images/carbon2.png"><p align="center"><strong>carbon2.png</strong></a><br><i>181943 Bytes</i></p></td>
  74. <td align="center" width="25%">
  75. <a href="images/carbon3.png"><p align="center"><strong>carbon3.png</strong></a><br><i>218063 Bytes</i></p></td>
  76. <td align="center" width="25%">
  77. <a href="images/carbon4.png"><p align="center"><strong>carbon4.png</strong></a><br><i>176844 Bytes</i></p></td>
  78. </tr><tr><td></td></tr>
  79. </table>
  80. </center></div>
  81. <p align="center">page # 1</a><br></p>
  82. <a href="CINCO2.htm"><p align="center"><strong>next page</strong></a><br></p>
  83. <FONT FACE="Arial" SIZE=1 color="#FF0000">
  84. <p align="center"><i>This webpage was automatically generated using KudoÆ catalogs<br>
  85. from Imspace Systems Corporation.<br>
  86. To learn more about this technology please contact us at:</i><br>
  87. <a href="http://www.kudo.com"><strong>http://www.kudo.com</strong></a></p></FONT>
  88. </body>
  89. </html>
  90. **************************************************************************************************
  91.  
  92. To convert the above HTML page to a Kudo template, 8 simple replacements have to be made:
  93.  
  94. 1.-     Replace ALL the original image path references with the word IMAGEPATH, all UPPER case.
  95.     i.e. <a href="images/carbon1.png"> converts to <a href="IMAGEPATH/carbon1.png">
  96.  
  97. 2.-    Replace ALL the original thumbnail path references with the word THUMBPATH, all UPPER case.
  98.     i.e <img border=0 src="thumbs/carbon1.gif" width="120" height="80"> converts to
  99.     <img border=0 src="THUMBPATH/carbon1.gif" width="120" height="80">
  100.  
  101. 3.-     Replace ALL the original image name references with the word IMAGENAME, all UPPER case,
  102.     follow by the image number. This number corresponds to the order the images are laid out
  103.     in your Kudo catalog, this number will go from one to the number you entered as
  104.     images per page. If you entered 12, you will have IMAGENAME1 thru IMAGENAME12.
  105.     i.e. <a href="images/carbon1.png"> converts to <a href="IMAGEPATH/IMAGENAME1">
  106.  
  107. 4.-     Replace ALL the thumbnail name references with the word THUMBNAME, all UPPER case,
  108.     followed by the thumbnail number. This number should be the same one you used for the
  109.     image so THUMBNAME1 corresponds to imagename1, and as in the image case, will
  110.     go from one to the number you entered as images per page.
  111.     i.e. <img border=0 src="thumbs/carbon1.gif" width="120" height="80"> converts to 
  112.     <img border=0 src="THUMBPATH/THUMBNAME1" width="120" height="80">
  113.  
  114. 5.-     Replace ALL the thumbnail "width=" numbers and "height=" numbers with the word THUMBWITH, and                         THUMBHEIGHT all UPPER case, follow by the thumbnail number, as shown earlier, and as in previous                         cases, will go from one to the number you entered as images per page. 
  115.     i.e. <img border=0 src="thumbs/carbon1.gif" width="120" height="80"> converts to 
  116.     <img border=0 src="THUMBPATH/THUMBNAME1" width="THUMBWITH1" height="THUMBHEIGHT1">
  117.  
  118. 6.-     If you are using other image information as: image byte size, and/or image notes,
  119.     replace all references to them with the words IMAGESIZE, and IMAGENOTES, followed by 
  120.     the corresponding image number, so the line: <a href="images/carbon1.png"><p                 align="center"><strong>carbon1.png</strong></a><br><i>87591 Bytes</i></p></td> will convert to:
  121.     <a href="IMAGEPATH/IMAGENAME1"><p align="center"><strong>IMAGENAME1</strong></a><br><i>IMAGESIZE1                         Bytes</i></p></td>
  122.  
  123. 7.-    You can insert the page number by inserting the word PAGENUMBER were you want 
  124.     this information to go. i.e. the line <p align="center">page # 1</a><br></p> converts to
  125.     <p align="center">page # PAGENUMBER</a><br></p>
  126.  
  127. 8.-    Lastly, you can insert the next html page reference by inserting the word NEXTPAGE were you want 
  128.     this information to go. You need to mark the whole string from when it starts, with the word             PAGESTART to where it ends, with the word PAGEEND so the line:
  129.     <a href="custom1.htm"><p align="center"><strong>next page</strong></a><br></p> converts to:
  130.     PAGESTART<a href="NEXTPAGE"><p align="center"><strong>next page</strong></a><br></p>PAGEEND
  131.     of course, the program will NOT insert this entry on the last html page.
  132.  
  133. That is all there is to it, The new custom template should look like the CUSTOM.HTM file in the KudoIMS5/Program directory..
  134.