{"id":9685,"date":"2011-07-20T04:04:26","date_gmt":"2011-07-20T08:04:26","guid":{"rendered":"http:\/\/info.template-help.com\/?p=9685"},"modified":"2016-03-30T04:49:03","modified_gmt":"2016-03-30T08:49:03","slug":"flash-template-quick-guide","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/flash-template-quick-guide.html","title":{"rendered":"Flash template quick guide"},"content":{"rendered":"<h3>1. Unzipping  Template Package<\/h3>\r\n<p>After  unzipping the template package you will find 3 folders: &ldquo;<strong>screenshots<\/strong>&rdquo;, &ldquo;<strong>site<\/strong>&rdquo;, &ldquo;<strong>site_flash<\/strong>&rdquo;  and another zip archive called &ldquo;<strong>sources_############.zip<\/strong>&rdquo; which you are to  unzip. You may check the video tutorials on how to unzip the template package   below:<\/p>\r\n<p><a href=\"\/help\/unzipping-your-template.html\">How to unzip a template (Windows OS) <\/a><\/p>\r\n<p><a href=\"\/help\/how-unzip-template-mac.html\">How to unzip a template (MAC OS) <\/a><br>\r\n<\/p>\r\n<p>While  unzipping &ldquo;sources_############.zip&rdquo; archive you will be prompted to enter a password,  which you<br>\r\n  can  find at your <em><strong>Product Download Page <\/strong><\/em>(open  the link in the email you received from our company).<\/p>\r\n<p>You  should now have 4 folders in total: &ldquo;<strong>screenshots<\/strong>&rdquo;, &ldquo;<strong>site<\/strong>&rdquo;, &ldquo;<strong>site_flash<\/strong>&rdquo;, &ldquo;<strong>sources<\/strong>&rdquo;<\/p>\r\n\r\n\r\n<p>&nbsp;<\/p>\r\n<h3>2. General  Information and Template Structure<\/h3>\r\n<p><strong>&nbsp;<\/strong>Your  type of template includes 2 versions of the same design: one with a Flash  (animated) layout, and the<br>\r\n  other  \u2013 with HTML (static) layout. Refer to the corresponding section of the  instructions below, depending<br>\r\nwhich  version of the template you would like to use:<\/p>\r\n<ul>\r\n  <li>HTML  version (non-animated layout)<\/li>\r\n  <li>Flash  version (animated layout)<\/li>\r\n<\/ul>\r\n<ul>\r\n  <li><strong>screenshots\/ <\/strong>\u2013  contains screenshots of the template. No editable files here<\/li>\r\n  <li><strong>site\/ <\/strong>\u2013  contains .HTML and .CSS files for the non-animated version of the template<\/li>\r\n  <li><strong><em>images <\/em><\/strong>\u2013  contains all the images used in .HTML files<\/li>\r\n  <li><strong>site_flash\/ <\/strong>\u2013  contains .HTML and .CSS files for the animated version of the template<\/li>\r\n  <li><strong><em>flash <\/em><\/strong>\u2013  contains .SWF flash movie(s) used in .HTML file<\/li>\r\n  <li><strong><em>images <\/em><\/strong>\u2013  contains all the images used in .HTML files<\/li>\r\n  <li><strong>sources\/ <\/strong>\u2013  contains source files<\/li>\r\n  <li><strong><em>clipart_library <\/em><\/strong>\u2013  bonus materials not related to the template design<\/li>\r\n  <li><strong><em>flash <\/em><\/strong>\u2013  contains Flash .FLA source file(s)<\/li>\r\n  <li><strong><em>psd <\/em><\/strong>\u2013  contains Adobe Photoshop .PSD file(s)<\/li>\r\n<\/ul>\r\n\r\n\r\n<p>&nbsp;<\/p>\r\n<h3>3. Installing  Fonts<\/h3>\r\n<p><strong>&nbsp;<\/strong>If  the template uses some non-standard fonts in the design, then those are  provided with the template<br>\r\npackage.<\/p>\r\n<p>After  you unzip the template package, there can be a file &ldquo;fonts_info.txt&rdquo; there you  will find font name and download link If  the above mentioned file is missing, then the fonts are probably part of the  template package. Open the folder &ldquo;<strong>sources<\/strong>&rdquo; and look for the folder &ldquo;<strong>fonts<\/strong>&rdquo;. After  the fonts have been downloaded\/located, you need to copy them into the  C:\/Windows\/fonts directory<\/p>\r\n\r\n\r\n<p>&nbsp;<\/p>\r\n<h3>4. Editing HTML version of the template<\/h3>\r\n<p><strong>Software Required: <\/strong>You  can download trial (30 days free) versions by the links below<\/p>\r\n<p><strong><em>Adobe  Dreamweaver (or Microsoft Expression Web)<\/em><\/strong><br>\r\n  <a href=\"http:\/\/www.adobe.com\/products\/dreamweaver\/\">http:\/\/www.adobe.com\/products\/dreamweaver\/<\/a><br>\r\n<a href=\"http:\/\/www.microsoft.com\/expression\/products\/Web_Overview.aspx\">http:\/\/www.microsoft.com\/expression\/products\/Web_Overview.aspx<\/a><\/p>\r\n<p><strong><em>Adobe  Photoshop<\/em><\/strong><br>\r\n<a href=\"http:\/\/www.adobe.com\/products\/photoshop\/photoshop\/\">http:\/\/www.adobe.com\/products\/photoshop\/photoshop\/<\/a><\/p>\r\n\r\n\r\n<p>&nbsp;<\/p>\r\n<p><em><strong>a) Editing HTML page  content<\/strong><\/em><br>\r\n  All  the editable HTML files are located in &ldquo;site&rdquo; folder of the template package  (index.html, index-1.html,<br>\r\nindex-2.html,  etc.) Each index-#.html file represents one page of the template.<\/p>\r\n<p><br>\r\n  To  open .html file with Adobe Dreamweaver software, you should right mouse click  on the file, and in the<br>\r\n  context  menu select <em>Open with -&gt; Adobe Dreamweaver. <\/em>The  file is opened and you can start editing it.<br>\r\n  Please,  check this link for general instructions on how to work with Adobe Dreamweaver  and .html files<br>\r\n  <a href=\"\/help\/general-tutorials\/work-with-html\/\">Working with HTML<\/a><\/p>\r\n<p><em><strong>b) Photoshop files<\/strong><\/em><br>\r\n  Photoshop  files are located in &ldquo;sources\/psd&rdquo; folder and required for editing some text  titles in the template,<br>\r\n  that  were created using non-standard fonts. Example below will show you how to  determine if such fonts are<br>\r\nused  in your template. Please, look at the 2 example screenshots below<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2011\/07\/full-site-guide-1.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/07\/full-site-guide-1-300x281.jpg\" alt=\"\" title=\"full-site-guide-1\" width=\"300\" height=\"281\" class=\"alignnone size-medium wp-image-9680\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/full-site-guide-1-300x281.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/full-site-guide-1-150x141.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/full-site-guide-1.jpg 710w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<a href=\"\/help\/wp-content\/uploads\/2011\/07\/full-site-guide-2.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/07\/full-site-guide-2-300x281.jpg\" alt=\"\" title=\"full-site-guide-2\" width=\"300\" height=\"281\" class=\"alignnone size-medium wp-image-9681\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/full-site-guide-2-300x281.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/full-site-guide-2.jpg 710w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n<p>The  first screenshot shows a complete web template layout, while the second is what  you see when you open &ldquo;site\/index.html&rdquo; file with your web browser. All those &ldquo;missing&rdquo;  elements on the second screenshot (top menu titles, banner titles, etc.) should  be edited\/updated via .psd files.<\/p>\r\n<p>Please,  check the video tutorial by this link on how to work and save content from .psd  file into your web page <a href=\"\/help\/how-save-for-web.html\">How to save for web<\/a><\/p>\r\n<p>Also,  please pay attention to this video tutorial concerning saving slice that are  overlapped by other slices, and big slices such as backgrounds <a href=\"\/help\/photoshop-how-to-use-bring-to-front-feature.html\">Photoshop. How to use bring to front feature<\/a><\/p>\r\n<p>If  the HTML layout of your template looks complete and doesn&rsquo;t have any missing  titles, then your template is using Cufon technology  which allows embedding non-standard fonts using JavaScript, so all the text can  be<br>\r\n  edited  directly in .html files.<\/p>\r\n<p>By  default template fonts support only Latin characters, embedding special  characters (Latin with acute,<br>\r\n  Greeks,  Cyrilic, etc.) requires recompiling javascript font provided with the template.  Please, check the following tutorial on how to do that<br>\r\n  <a href=\"\/help\/how-use-cufon-feature.html\">How to use cufon feature<\/a><\/p>\r\n\r\n\r\n<p>&nbsp;<\/p>\r\n<h3>5. Editing  Flash version of the template<\/h3>\r\n<p><strong>Software Required: <\/strong>You  can download trial (30 days free) versions by the links below<\/p>\r\n<p><strong><em>Adobe  Dreamweaver (or Microsoft Expression Web)<\/em><\/strong><br>\r\n  <a href=\"http:\/\/www.adobe.com\/products\/dreamweaver\/\">http:\/\/www.adobe.com\/products\/dreamweaver\/<\/a><br>\r\n  <a href=\"http:\/\/www.microsoft.com\/expression\/products\/Web_Overview.aspx\">http:\/\/www.microsoft.com\/expression\/products\/Web_Overview.aspx<\/a><\/p>\r\n<p><strong><em>Adobe  Photoshop<\/em><\/strong><br>\r\n  <a href=\"http:\/\/www.adobe.com\/products\/photoshop\/photoshop\/\">http:\/\/www.adobe.com\/products\/photoshop\/photoshop\/<\/a><\/p>\r\n<p>\r\n  <strong><em>Adobe  Flash Professional<\/em><\/strong><br>\r\n  <a href=\"http:\/\/www.adobe.com\/products\/flash\/\">http:\/\/www.adobe.com\/products\/flash\/<\/a><\/p>\r\n<p><em><strong>a) Editing Flash layout<\/strong><\/em><br>\r\n  Editable  flash file (.fla) is located inside &ldquo;sources\/flash&rdquo; folder of the template  package. Open .fla file with<br>\r\n  Adobe  Flash software and start customizing it to your needs. If you don&rsquo;t have  experience with Flash, please<br>\r\n  check  the link below for general guidelines and video tutorials:<br>\r\n<a href=\"\/help\/general-tutorials\/work-with-flash\/\">Working with Flash<\/a><\/p>\r\n<p><em><strong>b) Photoshop files<\/strong><\/em><br>\r\n  Please,  refer to <strong>4.b <\/strong>paragraph  of the current document<\/p>\r\n  \r\n  \r\n<p>&nbsp;<\/p>\r\n<h3>6. Uploading  template<\/h3>\r\n<p>In  order to make your site &ldquo;live&rdquo;, you need to upload specific template files from  your local computer to your<br>\r\n  hosting  server.<br>\r\n  Depending  on the version of the template you selected (Flash or HTML) you should upload  content of the<br>\r\ncorresponding  folder:<\/p>\r\n<ul>\r\n  <li>If you customized HTML (static)  version of the template upload all the content of &ldquo;site&rdquo; folder<\/li>\r\n  <li>If you customized Flash (animated)  version of the template upload all the content of &ldquo;site_flash&rdquo; folder<\/li>\r\n<\/ul>\r\n<p>This  video tutorial will show you how you can upload files to your host using free  FTP management software<br>\r\n  <strong><em>FileZilla <\/em><\/strong>(you may use any other software you like, or upload  directly via Hosting Cpanel)<br>\r\n  <a href=\"\/help\/how-upload-files-server-2.html\">How to upload files to server<\/a><\/p>\r\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>1. Unzipping Template Package After unzipping the template package you will find 3 folders: &ldquo;screenshots&rdquo;, &ldquo;site&rdquo;, &ldquo;site_flash&rdquo; and another zip archive called &ldquo;sources_############.zip&rdquo; which you are to unzip. You may check the video tutorials on how to unzip the template package below: How to unzip a template (Windows OS) How to unzip a template (MAC [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[742],"tags":[486,1020,1022],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/9685"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=9685"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/9685\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=9685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=9685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=9685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}