Welcome to Template Help Center by rzd36390

VIEWS: 112 PAGES: 47

									                        www.a1template.net & www.host.com.hr


   Welcome to Template Help Center
   About Web Design Templates
   Purchasing Our Products
   Software Requirements
   What's inside?
   Managing Your Web Design Template Quick Guide
   Working with template using HTML editor
   Customization of your template in Adobe Photoshop
   Working with Flash
   Additional Questions


Welcome to Template Help Center!
It’s intended to help you when you are seeking guidance in the important decisions
regarding the design or development of your website. It includes answers to simple but
important questions like “How to Select a Template Design” as well as some very
technical material. For instance, we have tutorials on a number of subjects connected
with website design and development.

We hope it serves you well. It is a project that is growing every day, to serve you even
better. If you have suggestions regarding other topics that would be of interest or utility
to you, please let us know.




                                           1/47
                         www.a1template.net & www.host.com.hr



About Web Design Templates
Welcome to the section that explains the subject of Website Templates. We are proud of
the our collection, which combines the greatest variety of website templates with high
quality in design. We adhere to high standards to insure your pride of ownership.

What do you want to know more about?

         What Is A Web Design Template?
         Templates Usage Advantages




What Is A Web Design Template?
A Web Template is a ready-made website design created to use it as a basis for fast and
high-quality website development. Just add your text and pictures to our template – and
you get a functional and individual site ready for upload!

A website template can be used to build your personal webpage or huge corporate site,
online shop or offline presentation or even as a design for the software you develop! And
everything you create is going to be easy, fast and professional!

Our templates can suit the needs of the beginners without making them spend months
and months studying HTML and design software. They are also perfect for web designers
looking for new ideas and constrained by tight schedules. These products will suit the
needs of active businessmen who want to develop a web project with minimal cost and
time investments or for a hosting company offering customers supplementary web design
services.




Templates Usage Advantages
Why do people use web templates? Because this type of web design has extremely
attractive and indispensable advantages!

  Faster! Using a web template increases the speed of the website creation process by
5-10 times. While it may take a week for a professional web designer to create a website
for you, our excellent products, detailed tutorials and superb 24/7 support permit you to
perform that work in 1-2 days! Don’t waste time looking for original concepts, matching
appropriate color schemes, choosing optimal layout – our templates have all those
ingredients. The Net’s largest template collection will respond to any demand.

  Higher quality! While saving precious hours, you don’t have to sacrifice quality – our
designers approach the process keeping in mind both esthetic and professional points of
view – they’re functional to the maximum, easy-to-edit and at the same time really
original and can be regarded as true art with characteristics inhering to the designer’s
style!

Such templates are of great value for you if you’re a newbie in HTML and web design
because you can get on-the-fly support for any question and avoid a bunch of beginner’s



                                          2/47
                         www.a1template.net & www.host.com.hr

problems. Even if you’re an experienced web designer you’ll find it easier to handle
successive templates due to standardization and commonality of the principles used to
design templates.

 Cheaper! Who said that a professional website should cost $3000-5000?

$30 – and you get a qualitative design as an excellent basis for your website!
$70 – and you receive a full-site with required quantity of subpages and fetching flash
insets.
$200 – and professional tuners will adapt the template to fit your personal needs.
Finally, by paying $300-600 you have the opportunity to buy the template at the
exclusive price and guarantee the uniqueness of your website!

  Easier! Our company pays special attention to creating easy-to-use products. Each
template is automatically and manually checked before coming onto the market to
guarantee its handleability. Round-the-clock support and extensive educational material
makes it extremely easy to edit your template. Do you have any question that wasn’t
answered in this section? Support chat, support phone lines, e-mail and dedicated ticket
system are at your service – you can get it resolved A.S.A.P.

  Rarer! The initial positioning of our company was defined as ‘Providing customers with
rare and qualitative website templates’. The great success achieved by our company,
including the sizeable market share gained inclusive of web design in its various
categories did not change that. However – we still follow that credo. Our company really
delivers the rarest and the most original designs in the mass web design domain. This is
provided by pay-per-click system, the site is based on, the possibility to purchase
products exclusively, informing customer about the number of downloads (purchases) of
specific product, tracing and severe suppression of any illegal reselling and distribution of
the templates. Thus creating your site with a help of our template you can no fear that
the other day you’ll find dozens of clone-sites to a hair's breadth similar with yours!

Our company by right occupies the leading position in the website templates market. We
are really the first! And it’s not merely about the sales volume! Choosing our company
you doesn’t just get a web design – our professional team is at your disposal and we are
always ready to help you. We CAN do that, we LOVE that; we really appreciate the notion
of ‘satisfied customer’!




Which type of the template is the best for
me and what's the difference?
Our company offers its customers a variety of products. They can be easily viewed by
choosing an appropriate category within the ‘Search by category’ drop-down list.

  Web Template is a website design coded and sliced in HTML and with its source files
in PSD format (Adobe Photoshop). The majority of such templates consist of two pages:
an index page (main page) and a subpage (product page). Changing ‘yourcompanyname’
text and the content text and inserting your own images gives you a professional-looking
website for a really affordable price!

  CSS Template is a website design created using Cascading Style Sheets (CSS)
technology. Cascading stylesheets provide web developers an easy way to format and
style web pages. CSS will be used even more because it's the compromise for browser
and way out of the browser wars. Style Sheets is the easiest way to provide a default


                                            3/47
                         www.a1template.net & www.host.com.hr

font styling for HTML. So you can modify the whole text, graphic and link styles on all
pages editing just a single CSS file.

  Logo Template is an integral part of the company’s image and key to marketing
success, so its quality is of highest importance for any business. Professionalism, extra
cheap price and customization ease make our logos really attractive and one of a kind.

  Flash Animated Template – is a web template containing elements of Flash
animation. The Flash part of the template is an animated header that is an attractive
multimedia combination of live action with a neat sound accompaniment. Latest research
in Internet usability proves that Flash elements enhance brand recognition up to 70% so
don’t stay unFLASHed!

  Flash intro header is an effective flash presentation created to give customers an
idea about your site and activities. This is in fact an informative movie that will certainly
impress the visitor and make your site more vivid and professional-looking! All flash
headers come with source FLA files and are fully editable.

  Flash Site is completely based on Flash, and opens up completely new possibilities in
web design. Everyone who has ever seen elegant, modern and unusual Flash Sites will
understand that it’s something more than just an addition to HTML-based sites. A Flash
site will impart solidity to your company and individuality to your personal webpage.

  PHP-Nuke Theme is actually a skin for your PHP-Nuke. PHP-Nuke is a ready-made
news automated system specially elaborated to be used in Intranets and Internet. Its
usage doesn’t require any technical skills and theme integration takes a couple of
minutes!
Please note: PHP-Nuke theme WILL NOT work if you don’t have PHP-Nuke installed and
configured on your web site. Please see www.phpnuke.org.

  Fireworks Templates are designed to be edited in Macromedia FireworksTM .
Macromedia Fireworks is a graphic editor highly integrated with other Macromedia
products. Any user of the Macromedia software will feel comfortable handling these
products!

  3 Color Template gives you the possibility to choose the colour scheme of your future
site. All source files (html, psd and fla) are present in 3 different colour schemes. Just
choose the one you like most of all and go ahead!

  Full Site is the extended version of the standard Web Template. This type of template
includes the full set of subpages you may need with appropriate layouts and pictures.
Don’t spend time multiplying pages in your FrontPage – you have everything you need
here!

  Full package is in fact more than just a web design – it’s a comprehensive corporate
identity package. A collection of subpages, search results page, additional pop-up designs
and banners will put you in good stead with your site. This package even contains a
sample of styled business cards to add sound to your company spirit, so don’t miss a
chance to get emphasized!




                                            4/47
                          www.a1template.net & www.host.com.hr



Purchasing Our Products
So, you’ve chosen the template that suits your needs. Which rights do you obtain after
purchase? What is necessary to pay for the template? How do you handle possible
problems with payment? How do you get your template? Learn that and more in this
chapter of our Tutorial.

What do you want to know more about?

         Payment Interface and Terms of Purchase
         Methods of Payment
         Solving Download Problems




Payment Interface and Terms of Purchase
On the preview page you can see the ‘buy’ button and two buttons displaying the price
of the product.
The red button means regular (nonexclusive) price. This means that other people can
continue to buy the template you have chosen after your purchase.

The blue button is for an exclusive purchase. Paying the exclusive price guarantees that
you are the last person to buy this template. After an exclusive purchase occurs the
template is permanently removed from our site and will never be available to other
customers again. Only you and those who bought the template before you will own it.

After you have paid the template for ANY price you receive the template itself with all
source files according to the ‘Sources available’ section, some supplementary materials
(clipart, free fonts, free subscriptions and so on) and the right to build any website using
the template in any way you like.

  Limited Usage Granted
You may use each individual product on a single website only, belonging to either you or
your client. You have to purchase the same template once more in order to make
another project with the same design

  Modifications
You are authorized to make any necessary modification(s) to our products to fit your
purposes.

  Unauthorized Use
You may not place any of our products, modified or unmodified, on a diskette, CD,
website or any other medium and offer them for redistribution or resale of any kind
without prior written consent from our company.

  Assignability
You may not sub-license, assign, or transfer this license to anyone else without prior
written consent from our company.

  Ownership
You may not claim intellectual or exclusive ownership to any of our products, modified or
unmodified. All products are property of independent content providers. Our products are


                                               5/47
                        www.a1template.net & www.host.com.hr

provided "as is" without warranty of any kind, either expressed or implied. In no event
shall our juridical person be liable for any damages including, but not limited to, direct,
indirect, special, incidental or consequential damages or other losses arising out of the
use of or inability to use our products.




Methods of Payment
Our company gives customers several payment opportunities. They are described on the
Buy Screen. Please note, that some payment options may be added or removed without
prior notice.




       Fig 1.1 Buy Screen

  Can I pay with Credit Card?
Yes. Please use 2Checkout or Moneybookers to pay with your credit card (see
merchant system site to see if it accepts your credit card for this payment)




                                           6/47
                        www.a1template.net & www.host.com.hr

  Can I pay with wire transfer?
Yes. Please use Moneybookers option (non US accounts supported).

  Can I pay with non-US currency?
Yes. 2Checkout and MoneyBookers allow multi-currency payments. Please see
merchant system’s website to find out if your currency is accepted.

 Can I pay with cheque or money order?
No. We don’t currently accept such methods of payment.

After you fill out the necessary information on the Buy Screen click the appropriate
payment system icon and you will be transferred to the screen where you need to enter
your billing details. When the payment is accepted you will be directed back to our site.
The merchant system will usually notify you by e-mail that the payment went through
ok. Please note that our company uses intermediary payment systems thus the charges
on your bank account will appear under the name of the appropriate payment system.




       Fig 1.2 Payment Systems

The next screen indicates the current status of your order at our company. After the
order has been processed by the merchant system it goes through an our antifraud check
that usually takes 10-15 minutes (your order will be manually reviewed by an antifraud
officer).



                                          7/47
                        www.a1template.net & www.host.com.hr

The antifraud check is necessary to stop credit card fraud that is a variety of an identity
theft crime. Most payment systems have their own antifraud checks but it’s never
instant. However, our company is dedicated to serving customers with immediate
download. That is why in protecting our customers from credit card fraud and illegal
distribution of the templates our company conducts its own antifraud verification.




       Fig 1.3 Order Status Screen

The antifraud check generally includes a confirmation phone call to make sure that
you’ve supplied us with reachable a phone number. Our company also reserves the right
to suspend any particular order for additional investigation for up to 2 business days.
Depending on the decision of our Antifraud Department your order will be processed or
cancelled.

You can contact our Antifraud department at any time via e-mail: billing@template-help.com
or by phone:+1 917 477 0238.




       Fig 1.3 Billing Chat

You’re also invited to contact us if you have any problems with processing your order at
the merchant system. We can't process any order unless we have the order ID from the
merchant system. If you haven't received transaction ID you haven’t been billed. The
debit you may see on your credit card statement is a temporary hold placed by merchant
the system. If the transaction is incomplete, it will be lifted shortly.

After the order is approved the status window in your browser will show Paid and
Delivered. Make sure that you have specified the correct and routable e-mail address.




                                           8/47
                         www.a1template.net & www.host.com.hr

Please address the support representative in chat if you have problems with mail
delivery.

The e-mail you have received contains links that will let you download the template itself
and supplementary bonus materials. Let’s take a look at the e-mail you expect to
receive:


From :
Template Delivery Servicebilling@template-help.com
To :         test@test.com
Subject : Links to your templates.

Dear Customer,
During 3 days you will be able to download your template(s) using these links:

http://www.template-
help.com/get.php?order_id=26QFaR32rmp18671jA5y&templ_id=3073&sign=
4B71C07F632125E69920476AF2152F6F

   This is the download link for main template file. This link will be automatically
deactivated in 3 days
for security measures. You can always contact us to get your link re-sent or reactivated
at no cost.
Please copy these links and paste them into your browser or download manager address
field.

Download 100+ fonts bonus using this link: !!!NOTE: Link will stay alive for 3 days only:
http://www.template-help.com/get.php?order_id=26QfaR42rmp18671jA5y&addon=1

  This is the download link for 100 royalty free fonts. This is a free bonus from our
company. In case you need to contact our Support Team please be sure you have noted
this important information:

Your e-mail address you've used for purchasing: test@test.com
Your template(s) item number: 3073
Your transaction ID: 26QfaR42rmp18671jA5y

  Please save this important information about your transaction for future references.

If you need to have an invoice for this purchase, please click on this link to receive it via
e-mail:
http://www.template-help.com/invoice.php?id=26QfaR42rmp18671jA5y

Here you can find the tutorial on how to add links to flash header menu (if it presents in
your template): http://www.template-help.com/tutorial/flash2/flash.htm

If you are looking for customisation service to make a website from template, you've
purchase please visit TemplateTuning.com - The most affordable web design service
based on templates:
http://www.template-help.com/tuning/tuning.php

If you have any questions please, contact us in our support chat or call to: 1 917 477
0358




                                             9/47
                        www.a1template.net & www.host.com.hr


Special bonus from Ultravertex partner!

You are entitled to download more than 8000 professional photos, 3500 clipart items and
900 fonts for FREE!

Please follow this link to get your FREE Ultravertex membership:
http://www.ultravertex.com/join_tm.php?order_id=26QfaR42rmp18671jA6y

Follow this link http://www.ivaluehost.net/tmorder.php to get 1 MONTH of FREE
HOSTING from
IvalueHost partner.
Or you can use http://www.herwebhost.com/tmorder.html to get 1 MONTH FREE
HOSTING from HerwebHost partner.

 Additional bonuses for FREE from our company

Thank you for purchasing our templates!
TEMPLATE-HELP.COM support team.

If you have any questions please, contact us in our support chat or call to: 1 917 477
0358
You can download the template by cutting and pasting the links provided to your browser
window. Any download browser can also be used. Template size may vary from 1 to 30
mb.




Solving Download Problems
  This link goes nowhere.
Make sure that you don’t have firewall restrictions prohibiting this download. Try to use
this link on another computer. If it still doesn’t work, please contact our support to get
another link.

  I get message ‘link is inactive’ when I try to follow this link.
Please contact our support to get this reactivated.

  I have downloaded the zip file and its not working (‘unexpected end of
archive’ or similar error)
Sometimes the download remains incomplete (due to connection error your download
may interrupt and a wrong file is saved to your computer). This means that you have this
partial file cached and every time you try to download it again your computer just pulls it
from cache. You need to purge all temporary folders on your PC (c:/windows/temp,
c:/temp, Internet Temporary files) and download again to solve this problem.

  After download I get .php file and can’t handle it with my MAC.
Some Mac users have problems with .php script, because MAC can’t resolve it. Please
contact our support and we’ll provide you the link for direct ZIP download.




                                          10/47
                         www.a1template.net & www.host.com.hr



Software Requirements
This sections contains a list of software required to create your own unique web product
using our web design templates. Also you can find here links to required software on web.

What do you want to know more about?

         Logo Template Software Requirements
         Regular Template Software Requirements
         Full Site Template Software Requirements
         Flash Animated Template Software Requirements
         Flash Intro Template Software Requirements
         Flash Site Software Requirements
         Full Package Template Software Requirements
         PHP-Nuke Theme Template Software Requirements
         Fireworks Template Software Requirements
         3 Color Template Software Requirements




Logo Template Software Requirements
To use this product you should have following software installed on your computer.

 Adobe Photoshop 5 or higher

There is a list of software recommended to use with this product.

 Adobe Photoshop 7




Regular Template Software Requirements
To use this product you should have following software installed on your computer.

 HTML editor such as Macromedia Dreamweaver, Microsoft FrontPage and so on
 Adobe Photoshop 5 or higher

There is a list of software recommended to use with this product.

 Macromedia Dreamweaver MX 6
 Adobe Photoshop 7




CSS Template Software Requirements
To use this product you should have following software installed on your computer.

 HTML editor such as Macromedia Dreamweaver, Microsoft FrontPage and so on
 Macromedia Flash MX 6 or higher (if flash animation included)
 Adobe Photoshop 5 or higher



                                            11/47
                        www.a1template.net & www.host.com.hr

There is a list of software recommended to use with this product.

 Macromedia Dreamweaver MX 6
 Macromedia Flash MX 6 (if flash animation included)
 Adobe Photoshop 7




Full Site Template Software Requirements
To use this product you should have following software installed on your computer.

 HTML editor such as Macromedia Dreamweaver, Microsoft FrontPage and so on
 Macromedia Flash MX 6 or higher (if flash animation included)
 Adobe Photoshop 5 or higher

There is a list of software recommended to use with this product.

 Macromedia Dreamweaver MX 6
 Macromedia Flash MX 6 (if flash animation included)
 Adobe Photoshop 7




Flash Animated Template Software
Requirements
To use this product you should have following software installed on your computer.

 HTML editor such as Macromedia Dreamweaver, Microsoft FrontPage and so on
 Macromedia Flash MX 6 or higher
 Adobe Photoshop 5 or higher

There is a list of software recommended to use with this product.

 Macromedia Dreamweaver MX 6
 Macromedia Flash MX 6
 Adobe Photoshop 7




Flash Intro Template Software
Requirements
To use this product you should have following software installed on your computer.

 Macromedia Flash MX 6 or higher

There is a list of software recommended to use with this product.

 Macromedia Flash MX 6


                                          12/47
                        www.a1template.net & www.host.com.hr



Flash Site Software Requirements
To use this product you should have following software installed on your computer.

 Macromedia Flash MX 6 or higher

There is a list of software recommended to use with this product.

 Macromedia Flash MX 6




Full Package Template Software
Requirements
To use this product you should have following software installed on your computer.

 HTML editor such as Macromedia Dreamweaver, Microsoft FrontPage and so on
 Macromedia Flash MX 6 or higher (if flash animation included)
 Adobe Photoshop 5 or higher

There is a list of software recommended to use with this product.

 Macromedia Dreamweaver MX 6
 Macromedia Flash MX 6 (if flash animation included)
 Adobe Photoshop 7




PHP-Nuke Theme Template Software
Requirements
To use this product you should have following software installed on your computer.

 Apache, MySQL, PHP and PHP-Nuke 6.5 - 6.9 installed on your web server
 Macromedia Flash MX 6 or higher (if flash animation included)
 Adobe Photoshop 5 or higher

There is a list of software recommended to use with this product.

 Macromedia Flash MX 6 (if flash animation included)
 Adobe Photoshop 7




                                          13/47
                           www.a1template.net & www.host.com.hr



Fireworks Template Software
Requirements
To use this product you should have following software installed on your computer.

  Macromedia Fireworks

There is a list of software recommended to use with this product.

  Macromedia Fireworks MX 6




3 Color Template Software Requirements
To use this product you should have following software installed on your computer.

  HTML editor such as Macromedia Dreamweaver, Microsoft FrontPage and so on
  Macromedia Flash MX 6 or higher (if flash animation included)
  Adobe Photoshop 5 or higher

There is a list of software recommended to use with this product.

  Macromedia Dreamweaver MX 6
  Macromedia Flash MX 6 (if flash animation included)
  Adobe Photoshop 7




Links to Required Software on Web
Follow these links to get tryout versions of products required to use with our products.

 WinZIP - archive utility for windows.
Download evaluation version at http://winzip.com/ddchomea.htm

 ZipIt - Macintosh program that zips and unzips archives.
Download shareware version at http://www.maczipit.com/download.html

 Stuffit - archive management program for MAC, Windows and Linux platforms
Download appropriate version at http://www.stuffit.com/compression/index.html

        Adobe Photoshop - powerful graphics editor.
Downlaod tryout version at http://www.adobe.com/products/tryadobe/main.jsp#product=39

 Macromedia Dreamweaver - powerful HTML editor
Download trial version at http://www.macromedia.com/cfusion/tdrc/index.cfm?product=dreamweaver

 Macromedia Flash - flash animation editor.
Download trial version at http://www.macromedia.com/cfusion/tdrc/index.cfm?product=flash

        Macromdia Fireworks - web design software form Macromedia.
Download trial version at http://www.macromedia.com/cfusion/tdrc/index.cfm?product=fireworks


                                               14/47
                           www.a1template.net & www.host.com.hr


 Macromedia HomeSite - HTML editor
Download trial version at http://www.macromedia.com/cfusion/tdrc/index.cfm?product=homesite

        Adobe Type Manager - font management tool.
Download free at http://www.adobe.com/products/atmlight/main.html

        CofeeCup - easy to use HTML editor
Download shareware at http://www.topshareware.com/CofeeCup-HTML-Editor-download-7567.htm




                                               15/47
                            www.a1template.net & www.host.com.hr



What's inside?
More interesting than opening presents under the Christmas tree! Better than Santa, our
company gives you more than you expected!

What do you want to know more about?

            Logo Template Structure
            Regular Template Structure
            Full Site Template Structure
            Flash Animated Template Structure
            Flash Intro Template Structure
            Flash Site Template Structure
            Full Package Template Structure
            PHP-Nuke Theme Template Structure
            Fireworks Template Structure
            3 Color Template Structure




Logo Template Structure
All right. You have received ZIP package and unpacked it. Let's look what we have inside.

  CLIPART_LIBRARY - contains free clipart PSD files – all elements arranged in
several files.
      BUTTONS - contains various buttons in PSD format
      LOGOS - contains various buttons in PSD format
      WINDOWS - contains various buttons in PSD format

Root folder contains PSD file with your Logo Template

If folders structure after unpacking differs from described above read unzipping package
instructions.




Regular Template Structure
All right. You have received ZIP package and unpacked it. Let's look what we have inside.

   CLIPART_LIBRARY - contains free clipart PSD files – all elements arranged in
several files.
       BUTTONS - contains various buttons in PSD format
       LOGOS - contains various buttons in PSD format
       WINDOWS - contains various buttons in PSD format
   FONTS - contains all fonts used in PSD files - True Type (TTF), Adobe fonts (PFB\PFM)
or both. This folder may contain subfolders, all fonts should be installed.
   HTML - contains HTML files
       IMAGES – contains all images used in HTML files. This folder must be uploaded to
site and situated in the same folder with HTML files.
   PSD – contains Adobe Photoshop PSD files




                                                16/47
                         www.a1template.net & www.host.com.hr

If folders structure after unpacking differs from described above read unzipping package
instructions.




CSS Template Structure
All right. You have received ZIP package and unpacked it. Let's look what we have inside.

  If Full Site is not flash animated it have following structure

   CLIPART_LIBRARY - contains free clipart PSD files – all elements arranged in
several files.
       BUTTONS - contains various buttons in PSD format
       LOGOS - contains various buttons in PSD format
       WINDOWS - contains various buttons in PSD format
   FONTS - contains all fonts used in PSD files - True Type (TTF), Adobe fonts (PFB\PFM)
or both. This folder may contain subfolders, all fonts should be installed.
   HTML - contains HTML files
       IMAGES – contains all images used in HTML files. This folder must be uploaded to
site and situated in the same folder with HTML files.
   PSD – contains Adobe Photoshop PSD files

  If Full Site is flash animated it have following structure

   WITH_FL - contains flash animated version and all source files
       CLIPART_LIBRARY - contains free clipart PSD files – all elements arranged in
several files.
            BUTTONS - contains various buttons in PSD format
            LOGOS - contains various buttons in PSD format
            WINDOWS - contains various buttons in PSD format
       FONTS - contains all fonts used in PSD files - True Type (TTF), Adobe fonts
(PFB\PFM) or both. This folder may contain subfolders, all fonts should be installed.
       FLASH - contains FLA source files
       HTML - contains HTML files
            FLASH – contains SWF flash movies used in HTML files. This folder must be
uploaded to site and situated in the same folder with HTML files.
            IMAGES – contains all images used in HTML files. This folder must be
uploaded to site and situated in the same folder with HTML files.
       PSD – contains Adobe Photoshop PSD files

  WITHOUT_FL - contains non animated version
      HTML - contains HTML files
          IMAGES – contains all images used in HTML files. This folder must be
uploaded to site and situated in the same folder with HTML files.


If folders structure after unpacking differs from described above read unzipping package
instructions.




                                            17/47
                         www.a1template.net & www.host.com.hr



Full Site Template Structure
All right. You have received ZIP package and unpacked it. Let's look what we have inside.

  If Full Site is not flash animated it have following structure

   CLIPART_LIBRARY - contains free clipart PSD files – all elements arranged in
several files.
       BUTTONS - contains various buttons in PSD format
       LOGOS - contains various buttons in PSD format
       WINDOWS - contains various buttons in PSD format
   FONTS - contains all fonts used in PSD files - True Type (TTF), Adobe fonts (PFB\PFM)
or both. This folder may contain subfolders, all fonts should be installed.
   HTML - contains HTML files
       IMAGES – contains all images used in HTML files. This folder must be uploaded to
site and situated in the same folder with HTML files.
   PSD – contains Adobe Photoshop PSD files

  If Full Site is flash animated it have following structure

   WITH_FL - contains flash animated version and all source files
       CLIPART_LIBRARY - contains free clipart PSD files – all elements arranged in
several files.
            BUTTONS - contains various buttons in PSD format
            LOGOS - contains various buttons in PSD format
            WINDOWS - contains various buttons in PSD format
       FONTS - contains all fonts used in PSD files - True Type (TTF), Adobe fonts
(PFB\PFM) or both. This folder may contain subfolders, all fonts should be installed.
       FLASH - contains FLA source files
       HTML - contains HTML files
            FLASH – contains SWF flash movies used in HTML files. This folder must be
uploaded to site and situated in the same folder with HTML files.
            IMAGES – contains all images used in HTML files. This folder must be
uploaded to site and situated in the same folder with HTML files.
       PSD – contains Adobe Photoshop PSD files

  WITHOUT_FL - contains non animated version
      HTML - contains HTML files
          IMAGES – contains all images used in HTML files. This folder must be
uploaded to site and situated in the same folder with HTML files.


If folders structure after unpacking differs from described above read unzipping package
instructions.




Flash Animated Template Structure
All right. You have received ZIP package and unpacked it. Let's look what we have inside.

  WITH_FL - contains flash animated version and all source files
       CLIPART_LIBRARY - contains free clipart PSD files – all elements arranged in
several files.


                                            18/47
                         www.a1template.net & www.host.com.hr

          BUTTONS - contains various buttons in PSD format
          LOGOS - contains various buttons in PSD format
          WINDOWS - contains various buttons in PSD format
      FONTS - contains all fonts used in PSD files - True Type (TTF), Adobe fonts
(PFB\PFM) or both. This folder may contain subfolders, all fonts should be installed.
      FLASH - contains FLA source files
      HTML - contains HTML files
          FLASH – contains SWF flash movies used in HTML files. This folder must be
uploaded to site and situated in the same folder with HTML files.
          IMAGES – contains all images used in HTML files. This folder must be
uploaded to site and situated in the same folder with HTML files.
      PSD – contains Adobe Photoshop PSD files

  WITHOUT_FL - contains non animated version
      HTML - contains HTML files
          IMAGES – contains all images used in HTML files. This folder must be
uploaded to site and situated in the same folder with HTML files.


If folders structure after unpacking differs from described above read unzipping package
instructions.




Flash Intro Template Structure
All right. You have received ZIP package and unpacked it. Let's look what we have inside.

   CLIPART_LIBRARY - contains free clipart PSD files – all elements arranged in
several files.
       BUTTONS - contains various buttons in PSD format
       LOGOS - contains various buttons in PSD format
       WINDOWS - contains various buttons in PSD format
   FONTS - contains all fonts used in PSD files - True Type (TTF), Adobe fonts (PFB\PFM)
or both. This folder may contain subfolders, all fonts should be installed.
   PSD – contains Adobe Photoshop PSD files
   FLASH – contains Macromedia Flash FLA source files

Root folder contains published SWF flash intro movie

If folders structure after unpacking differs from described above read unzipping package
instructions.




Full Package Template Structure
All right. You have received ZIP package and unpacked it. Let's look what we have inside.

  If Full Package is not flash animated it have following structure

  CLIPART_LIBRARY - contains free clipart PSD files – all elements arranged in
several files.
      BUTTONS - contains various buttons in PSD format
      LOGOS - contains various buttons in PSD format


                                           19/47
                         www.a1template.net & www.host.com.hr

       WINDOWS - contains various buttons in PSD format
   FONTS - contains all fonts used in PSD files - True Type (TTF), Adobe fonts (PFB\PFM)
or both. This folder may contain subfolders, all fonts should be installed.
   HTML - contains HTML files
       IMAGES – contains all images used in HTML files. This folder must be uploaded to
site and situated in the same folder with HTML files.
   PSD – contains Adobe Photoshop PSD files

 If Full Package is flash animated it have following structure

   WITH_FL - contains flash animated version and all source files
       CLIPART_LIBRARY - contains free clipart PSD files – all elements arranged in
several files.
            BUTTONS - contains various buttons in PSD format
            LOGOS - contains various buttons in PSD format
            WINDOWS - contains various buttons in PSD format
       FONTS - contains all fonts used in PSD files - True Type (TTF), Adobe fonts
(PFB\PFM) or both. This folder may contain subfolders, all fonts should be installed.
       FLASH - contains FLA source files
       HTML - contains HTML files
            FLASH – contains SWF flash movies used in HTML files. This folder must be
uploaded to site and situated in the same folder with HTML files.
            IMAGES – contains all images used in HTML files. This folder must be
uploaded to site and situated in the same folder with HTML files.
       PSD – contains Adobe Photoshop PSD files

  WITHOUT_FL - contains non animated version
      HTML - contains HTML files
          IMAGES – contains all images used in HTML files. This folder must be
uploaded to site and situated in the same folder with HTML files.


If folders structure after unpacking differs from described above read unzipping package
instructions.




PHP-Nuke Theme Template Structure
All right. You have received ZIP package and unpacked it. Let's look what we have inside.

 If PHP-Nuke Theme Template is not flash animated it have following structure

   XXXX (four digits number) – PHP-Nuke Theme folder, this folder should be uploaded
to the Themes folder of your PHP-Nuke website
   CLIPART_LIBRARY - contains free clipart PSD files – all elements arranged in
several files.
       BUTTONS - contains various buttons in PSD format
       LOGOS - contains various buttons in PSD format
       WINDOWS - contains various buttons in PSD format
   FONTS - contains all fonts used in PSD files - True Type (TTF), Adobe fonts (PFB\PFM)
or both. This folder may contain subfolders, all fonts should be installed.
   PSD – contains Adobe Photoshop PSD files

 If If PHP-Nuke Theme Template is flash animated it have following structure



                                           20/47
                        www.a1template.net & www.host.com.hr


   XXXX (four digits number) – PHP-Nuke Theme folder, this folder should be uploaded
to the Themes folder of your PHP-Nuke website
   CLIPART_LIBRARY - contains free clipart PSD files – all elements arranged in
several files.
       BUTTONS - contains various buttons in PSD format
       LOGOS - contains various buttons in PSD format
       WINDOWS - contains various buttons in PSD format
   FONTS - contains all fonts used in PSD files - True Type (TTF), Adobe fonts (PFB\PFM)
or both. This folder may contain subfolders, all fonts should be installed.
   FLASH – contains Macromedia Flash FLA files
   PSD – contains Adobe Photoshop PSD files




Fireworks Template Structure
All right. You have received ZIP package and unpacked it. Let's look what we have inside.

 If Fireworks Template is not flash animated it have following structure

   CLIPART_LIBRARY - contains free clipart PSD files – all elements arranged in
several files.
       BUTTONS - contains various buttons in PSD format
       LOGOS - contains various buttons in PSD format
       WINDOWS - contains various buttons in PSD format
   FONTS - contains all fonts used in PSD files - True Type (TTF), Adobe fonts (PFB\PFM)
or both. This folder may contain subfolders, all fonts should be installed.
   HTML - contains HTML files
       IMAGES – contains all images used in HTML files. This folder must be uploaded to
site and situated in the same folder with HTML files.
   PSD – contains Adobe Photoshop PSD files
   PNG – contains Macromedia Fireworks PNG source files

 If Fireworks Template is not flash animated it have following structure

   WITH_FL - contains flash animated version and all source files
       CLIPART_LIBRARY - contains free clipart PSD files – all elements arranged in
several files.
            BUTTONS - contains various buttons in PSD format
            LOGOS - contains various buttons in PSD format
            WINDOWS - contains various buttons in PSD format
       FONTS - contains all fonts used in PSD files - True Type (TTF), Adobe fonts
(PFB\PFM) or both. This folder may contain subfolders, all fonts should be installed.
       FLASH - contains FLA source files
       HTML - contains HTML files
            FLASH – contains SWF flash movies used in HTML files. This folder must be
uploaded to site and situated in the same folder with HTML files.
            IMAGES – contains all images used in HTML files. This folder must be
uploaded to site and situated in the same folder with HTML files.
       PNG – contains Macromedia Fireworks PNG source files

  WITHOUT_FL - contains non animated version
     HTML - contains HTML files



                                         21/47
                         www.a1template.net & www.host.com.hr

          IMAGES – contains all images used in HTML files. This folder must be
uploaded to site and situated in the same folder with HTML files.


If folders structure after unpacking differs from described above read unzipping package
instructions.




3 Color Template Structure
All right. You have received ZIP package and unpacked it. Let's look what we have inside.

  If 3 Color Template is not flash animated it have following structure

   CLIPART_LIBRARY - contains free clipart PSD files – all elements arranged in
several files.
       BUTTONS - contains various buttons in PSD format
       LOGOS - contains various buttons in PSD format
       WINDOWS - contains various buttons in PSD format
   FONTS - contains all fonts used in PSD files - True Type (TTF), Adobe fonts (PFB\PFM)
or both. This folder may contain subfolders, all fonts should be installed.
   HTML - contains HTML files
       IMAGES – contains all images used in HTML files. This folder must be uploaded to
site and situated in the same folder with HTML files.
   PSD – contains Adobe Photoshop PSD files

  If 3 Color Template is flash animated it have following structure

   WITH_FL - contains flash animated version and all source files
       CLIPART_LIBRARY - contains free clipart PSD files – all elements arranged in
several files.
            BUTTONS - contains various buttons in PSD format
            LOGOS - contains various buttons in PSD format
            WINDOWS - contains various buttons in PSD format
       FONTS - contains all fonts used in PSD files - True Type (TTF), Adobe fonts
(PFB\PFM) or both. This folder may contain subfolders, all fonts should be installed.
       FLASH - contains FLA source files
       HTML - contains HTML files
            FLASH – contains SWF flash movies used in HTML files. This folder must be
uploaded to site and situated in the same folder with HTML files.
            IMAGES – contains all images used in HTML files. This folder must be
uploaded to site and situated in the same folder with HTML files.
       PSD – contains Adobe Photoshop PSD files

  WITHOUT_FL - contains non animated version
      HTML - contains HTML files
          IMAGES – contains all images used in HTML files. This folder must be
uploaded to site and situated in the same folder with HTML files.


If folders structure after unpacking differs from described above read unzipping package
instructions.




                                           22/47
                             www.a1template.net & www.host.com.hr



Managing Your Web Design Template
Quick Guide
Simple, easy-to-use information to guide you through your website project.

What do you want to know more about?

  Unzipping Template Package
  Installing Fonts
  How to Customize Your Template
  Creating Subpages
  Uploading Files to Your Web Hosting
  Installing PHP-Nuke Theme




Unzipping Template Package
Our templates are delivered in ZIP files. A ZIP file is a single compressed file that
contains the complete set of program files. Compressed files are valuable in the
electronic world because they cut your download time drastically, and they make it
possible to download just one file rather than the full set of files (which can often be
dozens of individual files).

To decompress (unZIP) a ZIP file, you need a copy of an unZIPing utility. We recommend
WinZip. It is a shareware program, which needs to be registered (paid for) if you plan to
continue using it. It is also distributed in a ZIP format, but it is a "Self-extracting" variety
– simply download it to you temporary directory, and "RUN" it to extract the program
files.




        Fig 6.1 WinZIP Extract Window

When unzipping package using WinZip make sure that Use Folder Names (marked on
screenshot) checkbox is checked to keep web design template from folder messing.

Here you can find links to unZIPing software on web.




                                                23/47
                          www.a1template.net & www.host.com.hr



Installing Fonts
You should install fonts included in web design template package before proceeding work
with PSD and FLA source files.

If you’re Microsoft Windows user you should copy and paste all fonts from template
package to the Windows\Fonts folder or WinNT\Fonts if you are on NT based system.




        Fig 6.2 Font Folder

More reliable way is to use font manager software. For example Adobe Type Manager
Light, you can find download links to it at web design software section.




How to Customize Your Template
Our web design templates are easy to customize. All of them are provided to you with all
source files. Just add your creative ideas to our perfect design and you’ll get exclusive
high quality website in shortest terms.

Here is basic concept of template customization and redirections to appropriate chapters
of our help center.

  Main part of content and scripts can be added using HTML editors such as Macromedia
Dreamweaver or Microsoft FrontPage. Detailed instructions about that question can be
found at Working with template using HTML editor section.

  If you want to insert your companies logo or own images see Customization of your template
in Adobe Photoshop section.

  For customization of your web design templates animation part read Working with Flash
section of our template help center.




                                           24/47
                         www.a1template.net & www.host.com.hr



Creating Subpages
Our Full Site and Full Package products already include all necessary pages for your
website. But you can create more pages or create the unlimited amount of pages from
single page of your web design template.

It’s recommended to customize one page before duplicating your pages. So you’ll don’t
have to customize all that pages later.

Now let’s create some subpages. Go to HTML folder of your web design template using
file browser. For example you have two html files there: index.html and index_sub.html.
Copy index_sub.html file into the same folder and give new name for it. For example
name it products.html.

You can create any amount of pages using those instructions. After that go to Working with
template using HTML editor section to get information about adding content to the pages of
your web design template.




Uploading Files to Your Web Hosting
In this step you will be given instructions for uploading your pages to a web server. After
this you will be able to review your site online in browser. We leave it up to you what sort
of hosting company and domain name to choose because it depends on specifics of your
business. In following instructions it is supposed that you have a login/password
combination available from your hosting provider.

Open a browser and type ftp://domain_name in address line. Where domain_name
is domain name of your future website.

In Internet Explorer, choose File>Enter as... to display authentication dialog. Enter your
login and password and click OK. Now you are logged to FTP server of your web hosting.

Copy your web pages and folders to your site root directory as you would to any other
folder on your computer. All html files should be placed in root folder of your web
hosting. All images should be located in /images folder, SWF movie files in /Flash
folder. In another words you should keep folder structure that was given to you in HTML
folder of your web design template.

Now you can view your great website online.




Installing PHP-Nuke Theme
To install a PHP-Nuke theme you need to do the following steps.
First of all you should unpack template package using instructions from Unzipping
Template Package section.

There is will be a folder named XXXX (four digits number). This is the PHP-Nuke theme
folder. Copy this folder to /nuke/html/theme where nuke is the folder to which PHP-
Nuke is installed.




                                           25/47
                       www.a1template.net & www.host.com.hr

Next step is to select a theme from list of themes Your Account -> Themes.

If you want to use it as the default theme for your site, move to Administration-
>Preferences and set Default theme to the theme you bought. Notice that you must be
a member of the administrators to change default theme.




       Fig 6.3 Administration Panel




       Fig 6.4 Change Default Theme

If your PHP-Nuke theme contains animated flash header you can customize it using
instructions from Working with Flash section.




CSS Template Editing Tips
All of our CSS templates are 100% stretchable. So you can add as much text/image
content as you wish. Usually the main column has more content than the secondary one.
But if your secondary column is bigger than main it can cause some misalignment. This
column will be cropped to the height of the center block. This misalignment is caused by
absolute positioned <DIV> tag usage instead of <TABLE> tag layout. To solve this
problem you simply increase the height of the main column - add several <BR> line
break tags to the end of central column to make the columns equal.




                                         26/47
                           www.a1template.net & www.host.com.hr



Working with Template Using HTML Editor
The most important tool in your toolbox.

What do you want to know more about?

 Opening HTML File
 Changing Text in HTML Editor
 Changing Text Font and Color in HTML Editor
 Setting Links in HTML Editor
 Adding Images with HTML Editor




Opening HTML File
To open HTML file with HTML editor you should select File/Open from top menu and
browse to the location of your HTML file. Another and more simple way to open file is just
drag and drop it from file browser to your HTML editor window.




                             Fig 7.1 Open HTML File Screenshot

Other ways of file opening, such as copy and paste may cause HTML structure damage
and not recommended.




Changing Text in HTML Editor
Web design template is useless without content, so first of all you should add own text
there. Changing text in HTML file using HTML editor is so easy. When you will open HTML
file from your web design template for the first time you will see that all text blocks are
filled with dummy text. All you have to do is to substitute it with your own text.




                                               27/47
                        www.a1template.net & www.host.com.hr




                         Fig 7.2 Dreamweaver Design Mode




                            Fig 7.3 FrontPage Normal Tab


All professional HTML editors have design view, so you don’t have to worry about all that
HTML tags – you can edit your text and see how site will look after publishing at the
same time. To turn this view on you should select View/Design from the top menu for
Macromedia Dreamweaver or click Normal tab at the bottom for Microsoft FrontPage.
You can type your text directly in HTML editor or copy and paste it from your documents
or previous design web site.




Changing Text Font and Color in HTML
Editor
To increase impression of your future web site based on our web design templates
maybe you will need to change text color or font style. There are some ways of doing
that.

If you want to change part of text or some words do the following. Select text, witch
properties you want to modify.

If you are Microsoft FrontPage user you can see high amount of tools at the top toolbox.
There you can change text color, font and its size, make text bold or italic and so on.



                              Fig 7.4 FrontPage Toolbar

If you are working with Macromedia Dreamweaver, you can check and change text
properties at the properties panel. If you can’t see it for some reason, select
Window/Properties from top menu to call this properties panel.




                       Fig 7.5 Dreamweaver Properties Panel


                                         28/47
                         www.a1template.net & www.host.com.hr


It’s easy when you are to changing properties of small parts of text. But if you will decide
to change color of text on whole page, for example if you have changed color scheme of
your web design template and text must conform new web site color, you should use
CSS for it.

You can use CSS (Cascade Style Sheets) to change text attributes of whole page or
specified tag. Using of style sheet technologies is recommended by W3C standard for
future compatibility with new versions of different browsers. There are two ways of doing
that – you can use built-in style sheet editor or put style directly to HTML code.

If you are using Macromedia Dreamweaver MX 6 then you have to press Ctrl+Shift+E to
launch CSS editor or choose Text/CSS styles/Manage Styles… from the top menu if
you are using Macromedia Dreamweaver MX 2004. You will see list of styles used in this
web design template. Double click style that you want to edit. Then just change font
options in pop-up window.

If you are Microsoft FrontPage user then you should choose Format/Style… from the
top menu.
Double click style you want to change. Select font button at the bottom of appearing
dialog. Now you can modify all possible text properties.

If you have some HTML skills you can put style directly into code tag. For example if you
want to change link color to red you should put following code into reference tag:

               <a href=”url” style=”color:FF0000”>Reference text</a>.

If you want to change table cell text size to 11px you should add following code in td tag:

                    <td style=”font-size:11px”>Cell content</td>




Setting Links in HTML Editor
A hyper reference is the main advantage of HTML documents. So it’s very important to
know how to add links in your web design template. This procedure is very simple if
you’re using HTML editor.

If you’re using Macromedia Dreamweaver select text or image that you want to be linked
to some url. Then go to Properties panel (press CTRL+F3 if you can’t see it for any
reasons). In this panel you will see Link input box. Fill it with appropriate url.




                                 Fig 7.6 Link Input Box

For Microsoft FrontPage user link adding procedure is following. Right click on selected
text or image and select Hyperlink… from context menu. Fill Address input box with
appropriate url.




                               Fig 7.7 Address Input Box


                                           29/47
                        www.a1template.net & www.host.com.hr


If you have some skills in HTML coding you can put hyper link directly into HTML code.
You have to put opening reference tag before content you want to be linked and closing
tag after that:

                 <a href=”your_url_here”>Content goes here</a>




Adding Images Using HTML Editor
To make your web site based on our web design template unique you can substitute
included images with your own or add additional images there.

To substitute existent image with a new one you should do following. Copy your image
file to the images folder of your web design template.

If you are using Microsoft FrontPage double click image you want to change. In dialog
that will appear after that select General tab. There will be input box with image name
and Browse… button to the right of it. Click it to browse to your image file.




       Fig 7.8 FrontPage Picture Properties

For Macromedia Dreamweaver users that routine is quite easy. Just double click image
you want to change and browse to your new image file location.

If you want change image directly from html code your have to substitute value of src
image attribute:

       Before: <img src=”images/logo.jpg”>

       After: <img src=”images/new_logo.jpg”>

Note: If double clicking on image doesn’t works it means that this is not a content image
but background image. For instructions of how to change it read the Changing Image in
Photoshop section.

Adding images to your web design template. Copy your image file to the images folder of
your web design template.

If you are using Macromedia Dreamweaver for managing out web design template you
should choose Insert/Image… from top menu and browse to your image file.

If you are Microsoft FrontPage user choose Insert/Picture/From File… and browse to
the location of your image file.




                                         30/47
                          www.a1template.net & www.host.com.hr



Customization of your template in Adobe
Photoshop
Versatility, Simplicity. The intelligent program to keep your website up to date.

What do you want to know more about?

         Opening PSD File
         Changing Text in Adobe Photoshop
         Changing Images in Adobe Photoshop
         Changing Image Colors in Adobe Photoshop
         Update Changes to Your Template




Opening PSD File
PSD file is layered easy to modify image file. It contains all image sources for your web
design template. To manage files of that type you need Adobe Photoshop software
installed on your computer. You can do any kind of customization using Adobe Photoshop
because this powerful tool allows you to change text, image colors, add your own photos
to your web design template and save optimized image data for web.

First step to manage your PSD file is to open it with Adobe Photoshop. It’s quite easy. To
open PSD file you should select File/Open from top menu and browse to the location of
your PSD file. Another and more simple way to open file is just drag and drop it from file
browser to your Adobe Photoshop window. Also if PSD files on your computer associated
with Photoshop software you can just double click it in your file browser and this file will
be opened and ready to use.




       Fig 8.1 Open PSD File

Note: If you see alert message that says “Some layers contain fonts that are
missing” it means that you’ve not installed all fonts included in package. To get more
information about fonts installation read Font Installation section.




                                              31/47
                          www.a1template.net & www.host.com.hr



Changing Text in Adobe Photoshop
Most part of content text is represented in HTML as plain text to simplify its modification
and allow search engines to scan your information. It will increase your page rank and
number of your web site visitors. But to make people to stay on your web site or return
there later your pages have to contain not only useful content but perfect external view.
That’s why some portion of text represented as images in HTML document and editable in
PSD file using Adobe Photoshop software. Below will be described ways of editing such
text, to know how to edit HTML plain text read Changing HTML text section.

Actually you can add text using any graphical editor you want. As we are providing all
image blocks with hidden text. But this way of web design template modification is not
recommended because you are not being able to create same font style and effect.

When your PSD source file already opened in Adobe Photoshop, press “T” key to use type
tool. Click with type tool cursor the text you want to edit. If “The following fonts are
missing…” message will appear it means that you have not installed all fonts needed to
modify text. For instructions of how to install they read Font Installation section. If appearing
message says “Editing or rendering the text layer…” never mind it, everything will be
editable without any problems.

If your text field should contain several rows, you can start typing from the new line by
pressing “Shift + ENTER”.

You can quit editing mode by pressing “Ctrl + Enter”. If you want to discard all editing
changes press “ESC” key to quit editing and undone all changes.

If you want to change some of text attributes such as font family, style or color do the
following. Select text which properties you want to modify. Then go to the options panel
at the top of the screen. If you can’t see it for any reason, show that panel by selecting
Window/Options from top menu.




        Fig 8.2 Options Panel

At the options panel you can see four dropdown menus, text align icons and color bar.
First dropdown menu allows you to change font family, but we recommending you not to
change it. Our professional web designers already selected best looking font for this web
design template.

Second dropdown box contain font styles. Bold, Italic and Regular styles available there.

Next dropdown represents font size. Use bigger font sizes for your company name and
slogans and smaller fonts for buttons text and section headers.

Last dropdown changes text rendering style. Use this option to make your text look
softer and more professional.

To change text color click color bar at options or tools panel to call color picker window.

More advanced options can be specified in type panel. To launch it you should press “Ctrl
+ T” while editing.




                                             32/47
                            www.a1template.net & www.host.com.hr




        Fig 8.3 Type Panel

After you have done all text modifications you should update those changes to your web
design template. For detailed instructions of how to do it read Update changes to your template
section.




Changing Images in Adobe Photoshop
Important step in creating unique web site from our web design template is to insert your
company logo and image content there. If you are starting new web project and don’t
have company logo yet you can purchase exclusive logo in our company.

First of all open your PSD source file in Adobe Photoshop. You can get info about that in
Opening PSD file section.

Before inserting your own image in your web design template source you should remove
or hide original image. Hide image if you don’t sure about need of this image in the
future, if you don’t need it – just remove it. Anyway to do both of these operations you
should locate layer containing it. The easiest way to do that – is to control click it, just
click on this image holding “Ctrl” button. But if some transparent layers exist over this
image layer you’ll have some troubles with it. Top layer will be selected instead of your
image layer.




        Fig 8.4 Layers Panel

To check content of current selected layer do the following. Go to layers panel, choose
Window/Layers if you cant see it for any reasons. Find out highlighted layer in layer list
– this is the current selected layer. At the left of the layer name you can see “eye” icon.



                                            33/47
                         www.a1template.net & www.host.com.hr

Click it some times to hide/unhide layer and see which image element disappears in
whole picture. If this is image you want to remove – you are one the right way. If
selection is wrong use alternative way to select layer with image you want to remove.

Right click with mouse on image. List of layers containing images under cursor will
appear. Try to choose different layers from that list. Use procedure described above to
make sure that you have selected right layer.




       Fig 8.5 Right Click Image to See Layers List

All right now you have selected layer with image you want to remove. To hide it, click on
“eye” icon at the left of layers name. If you want to remove it click trash can icon at the
right bottom corner of layers list panel.

You can add your own image to PSD file in very simple way. Just drag and drop it from
file browser to your Adobe Photoshop window. Or you can use File/Open… form the top
menu. Your image will appear in separate window of Adobe Photoshop program. You can
do prior modifications there. For example you can crop it using crop tool (hotkey “C”) or
make some color adjustments to make image fit templates color scheme selecting
Image/Adjustments/Color Balance… from the top menu.

Next step – is to move your image to your web design template PSD window. To do it
select move tool     from tools panel or use “V” hotkey. Then drag and drop image using
that tool to your template window of Adobe Photoshop.

Now you can move that image to the right location using same tool. If image that you’ve
just inserted overlapped by other images or text you should move it upper in layers list.
Go to layers list panel and drag and drop this layer up until overlapping disappears.

After you have done all images modifications you should update those changes to your
web design template. For detailed instructions of how to do it read Update changes to your
template section.




Changing Image Colors in Adobe
Photoshop
During the customization of your web design template maybe you’ll need to change
colors of some image elements to fit your corporate colors. This section provides you
with instructions of how to do that.

If you want to change color do the separate image you should locate layer containing it.
The easiest way to do that – is to control click it, just click on this image holding “Ctrl”
button. But if some transparent layers exist over this image layer you’ll have some
troubles with it. Top layer will be selected instead of your image layer.


                                           34/47
                        www.a1template.net & www.host.com.hr


To check content of current selected layer do the following. Go to layers panel, choose
Window/Layers if you cant see it for any reasons. Find out highlighted layer in layer list
– this is the current selected layer. At the left of the layer name you can see “eye” icon.
Click it some times to hide/unhide layer and see which image element disappears in
whole picture. If this is image which colors you want to change – you are one the right
way. If selection is wrong use alternative way to select layer with appropriate image.

Right click with mouse on image. List of layers containing images under cursor will
appear. Try to choose different layers from that list. Use procedure described above to
make sure that you have selected right layer.

When layer containing needed image is selected do the following. Choose
Image/Adjustment/Color Balance… from the top menu or just click “Ctrl + B”
hotkey. Color balance window will appear. You’ll see three color sliders there. Move them
until you’ll be satisfied with image color. Now confirm color change by clicking Ok button
or reject these changes by selecting Cancel button.




       Fig 8.6 Color Balance Window

If you want to change color scheme of whole web design template do the following.
Select top layer from the layers list panel. Choose Layer/New Adjustment
Layer/Color Balance… from the top menu. Confirm creation of new color adjustment
layer by pressing Ok button in popup window. In color balance window you’ll see three
color sliders there. Move them until you’ll be satisfied with image color. Now confirm
color change by clicking Ok button or reject these changes by selecting Cancel button.




       Fig 8.7 New Adjustment Layer

After you have done all image colors modifications you should update those changes to
your web design template. For detailed instructions of how to do it read Update changes to
your template section.




                                          35/47
                         www.a1template.net & www.host.com.hr



Update Changes to Your Template
After you’ve done all appropriate changes to your web design template in Adobe
Photoshop you should update those changes to your HTML documents.

First of all you must know some basics about slices in Adobe Photoshop. Each slice in
PSD file represents image or background in HTML document. Slices in PSD file marked by
blue rectangles. If you can’t see slices for any reasons you should choose
View/Show/Slices… from the top menu. To manage slices you should use slice tool
from the tools panel (hotkey “K”). Actually there is two slice tools in this toolset: Slice
Tool     and Select Slice Tool     . Use “Shift+K” hotkey to switch between those tools.
All appropriate slices already placed in PSD file included in your web design template
package. So you’ll need only Select Slice Tool.

Before updating images using save for web you should make sure that slices you want to
save don’t overlapping with other slices. For example big background image slice can
contain smaller slice for button image. So before saving this slice you should bring it on
top. To do it you should select this slice using Select Slice Tool. Then go to the options
panel at the top of the screen. If you can’t see this panel for any reason you should show
it selecting Window/Options from the top menu. At the left of the panel you’ll see four
slice order buttons: Bring to Front, Bring Forward, Send Backward and Send to
Back. Click Bring to Front button to bring this slice to front. If you’ll need to update
small button image slice in future you should Send to Back this big slice to see that
smaller slice.




                               Fig 8.8 Slice Order Buttons

As you know some of text represented as plain text in HTML, so before saving images
containing such text you should hide it. To do it you should select layer containing that
text.

The easiest way to do that – is to control click it, just click on this image holding “Ctrl”
button. But if some transparent layers exist over this image layer you’ll have some
troubles with it. Top layer will be selected instead of your image layer.

To check content of current selected layer do the following. Go to layers panel, choose
Window/Layers if you cant see it for any reasons. Find out highlighted layer in layer list
– this is the current selected layer. At the left of the layer name you can see “eye” icon.
Click it some times to hide/unhide layer and see which text disappears in whole picture.
If this is text you want to hide – you are one the right way. If selection is wrong use
alternative way to select layer with appropriate image.

Right click with mouse on image. List of layers will appear. Try to choose different layers
from that list, note that text layers have same name that it’s content. Use procedure
described above to make sure that you have selected right layer.

If you’ve selected needed type layer hide it by clicking “eye” icon at the left of layer
name in layers list.
Now it’s time to update your images using Save For Web procedure.




                                           36/47
                         www.a1template.net & www.host.com.hr

Choose File/Save For Web… from the top menu or use “Ctrl+Alt+Shift+S” hotkey.
Save for web window will appear.

In this window you can change optimization options of images. Actually our designer
already set optimization options for best quality/size balance. But if you want your site to
load faster you can decrease image quality. Select slice using select slice tool. At the
right you’ll see panel with image options. You can change value of quality input box for
JPEG image or colors for GIF and PNG images.
Now select slice that you want to update by clicking on it with Select Slice Tool. If you
want to update several slices at once you should select them holding “Shift” button.




                                 Fig 8.9 Image Options


When you have selected all slices you want to update click Save button at the right top
corner of save for web window. Save Optimized As window will appear.

Browse to the HTML folder of your web design template. Change File Type option to
Images Only and Slices option to Selected Slices. Other options may damage original
HTML structure.




                           Fig 8.10 Save Optimized Window

If everything goes in right way you’ll see pop-up window asking for image replacement
confirmation. Confirm that request.




                                           37/47
                      www.a1template.net & www.host.com.hr




                          Fig 8.11 Replace Confirmation

If such window doesn’t appear make sure that you’re saving images to appropriate
folder. Also check slice name by double clicking on it. Name and image type must be
same as image in HTML have.
Now it’s time to check modifications you’ve made. Go to the HTML folder of your web
design template and launch HTML file to see changes.




                                      38/47
                            www.a1template.net & www.host.com.hr



Working with Flash
Amazing Animation that adds interest anyplace you use it.

What do you want to know more about?

  Opening Your FLA File
  Changing Text in Flash
  Assigning Links in Flash
  Changing Images in Flash
  Publishing Your Flash Movie




Opening Your FLA File
FLA file is a source Flash file that contains all animation and graphics. To manage this file
you should have Macromedia Flash MX 6 or higher installed on your computer.

To open FLA file in Macromedia Flash editor you should select File/Open from top menu
and browse to the location of your FLA file. Another and more simple way to open file is
just drag and drop it from file browser to your Macromedia Flash editor window. Also if
FLA files on your computer associated with Macromedia Flash software you can just
double click it in your file browser and this file will be opened and ready to use.




                                    Fig 9.1 Open FLA File

Note: If you see “Missing Font Warning” alert message it means that you’ve not
installed all fonts included in package. To get more information about fonts installation
read Font Installation section.




Changing Text in Flash
To fit flash header your company needs you have to change company name, company
slogan and buttons text.

It’s quite easy. So let’s do it step by step.

First of all you should open your FLA file from web design template package in
Macromedia Flash. Previous chapter contains quick guide about this question.

Now you should locate text that you want to change. There are two ways of how to do
that.



                                                39/47
                         www.a1template.net & www.host.com.hr

The first way is to access it from the timeline. After you’ve opened FLA file in Macromedia
Flash, move red timeline slider and watch the animation process. When you’ll see text
that needs to be modified, stop the timeline slider. Choose Selection Tool from tools
panel or call this tool by pressing “V” hotkey. Double click this text until you’ll get type
cursor in it. Then just type your own text instead of original once.




Fig 9.2 Edit Text

But some of flash headers have complicated structure to create powerful animation
effects. So it will be hard to access symbols containing text from the timeline. The easiest
and most reliable way to locate elements in flash is to use symbols library.

To open symbols library you can use “Ctrl + L” hotkey or choose Window/Library…
from the top menu.




Fig 9.3 Symbols Library

Browse the symbols library to find symbol containing text you want to modify. You can
see symbols preview in the preview window at the top of symbols library panel. Actually
all symbols the contain text have appropriate names such as “Company Name” or “About


                                           40/47
                        www.a1template.net & www.host.com.hr

Us”. If you are unable to see text for some reasons try to change movie background to
non white. Because white colored text on white background is invisible. To do those
choose Modify/Document… from the top menu and change background color in popup
window.

When you have found symbol containing text you want to change double click symbols
icon to show text symbol in main workspace window. Then just double click text with
Selection Tool or single click it with Text Tool (hotkey “T”) to edit text.

While editing text in Macromedia Flash you have wide choice of attributes able to modify.
All that options are accessible from the properties panel at the bottom of Macromedia
Flash workspace. If you can’t see this panel for any reason you can open it by pressing
“Ctrl + F3” hotkey.




Fig 9.4 Text Properties

To modify text color or font size just select text using Text Tool and go to Properties
Panel to change appropriate option. You can find font family and size dropdowns, color
select box and align icons there. Modify any of that options and change will update to
selected text.

When you have finished editing of the text block, press “Esc” key to quit editing mode.
Now you can repeat operations described above to edit other text blocks of your flash
header.

After you’ve made all appropriate changes you should publish your flash movie to SWF
file and update it to your web design template. You can find instructions about it in
Publishing your flash movie section.




Assigning Links in Flash
To add some interactivity to the flash animated part of your web design template you
should add some links to the flash objects. For example you’ll need to link flash buttons
with pages of your website or redirect your flash intro to homepage after it finished.

There are some kinds of links in Macromedia Flash: button symbol links, frame links and
text links.
First of all you should open source FLA file in Macromedia Flash editor, see instructions
about it in Opening your FLA file section.

To add links to the button symbols in your flash movie do the following. First of all you
should locate button symbol you want links be assigned to. There are two ways of how to
do that.
The first way is to access it from the timeline. After you’ve opened FLA file in Macromedia
Flash, move red timeline slider and watch the animation process. When you’ll see button
symbol that needs to be linked, stop the timeline slider.

Select it by single clicking it with Selection Tool . You can choose Selection Tool from
tools panel or call this tool by pressing “V” hotkey. Go to the Properties Panel to check


                                          41/47
                         www.a1template.net & www.host.com.hr

this symbols behavior. If you can’t see this panel for any reason you can open it by
pressing “Ctrl + F3” hotkey. At the top left corner of this panel symbols behavior
dropdown is located. It must be a “Button”. If it is “Movie Clip”, “Graphics” or some
other that differs from “Button” you can’t assign links to it in the right way. Don’t
change it to the “Button” because it will damage original rollover structure. Double click
this symbol to get inside of it, select its content and check symbols behavior again.




Fig 9.5 Symbol Behavior

If you are still unable to locate appropriate symbol, maybe some symbols are hidden or
locked. To unhide/unlock symbols do the following. Go to timeline panel, there is a layers
list at the left of it. There are three icons at the top of this list: eye, lock and rectangle.
Click eye and lock icons twice to unhide and unlock all layers in current symbol.

Some of flash headers have complicated structure to create powerful animation effects.
So it will be hard to access button symbols from the timeline. The easiest and most
reliable way to locate elements in flash is to use symbols library. To open symbols library
you can use “Ctrl + L” hotkey or choose Window/Library… from the top menu.

Browse the symbols library to find button symbol you want links be assigned to. You can
see symbols preview in the preview window at the top of symbols library panel. Actually
all button symbols have appropriate names such as “About Us button” or “Search
button”. Double click symbols icon to edit it in the main workspace window. Then do
operations described above to locate symbol with “Button” behavior.

After you’ve selected button symbol press “F9” to open Actions panel. If this button has
rollover effect, you will see following script code there:

on (rollOver) {
        gotoAndPlay(2);
}
on (rollOut) {
        gotoAndPlay(10);
}

Add there following getURL action script code:

               on (release) {
                      getURL("your_url_here");
               }




                                            42/47
                         www.a1template.net & www.host.com.hr




Fig 9.6 GetURL Action Script

You should type URL button will be linked to as getURL function argument. For example
if you want to link button to your contacts page type following:

on (release) {
       getURL("http://mywebsite.com/contacts.html");
}

Actually getURL function accepts three arguments: URL, window type and variables send
method. Window type argument specifies were new URL will be opened. If this argument
is blank link will be open in same window. If you wan to open it in a new window, use
“_blank” argument. Variables send method should be used if you are parsing some
variables through URL string. Available options are “GET” and “POST”. Next action script
example calls products page with “item” variable with “9” value in the same window
using GET method.

on (release) {
       getURL("http://mywebsite.com/products.php?item=9", "_self", "GET");
}

If you are using flash intro template, you will need to redirect visitor to your website
after intro finished playing. To do these follow next instructions.

Move red timeline slider to the end of flash intro movie. Select the last frame by single
clicking it with mouse. Press “F6” to create keyframe in this frame. Press “F9” to open
Actions panel. Type the following code there.

               getURL("your_url_here");

Replace your_url_here text with appropriate URL of your website.

If you want some portion of text to be linked to some location on web do the following.
Locate symbol containing text using instructions from Changing text section. Select text you
want to link with URL using Text Tool. Go to Properties Panel, press “Ctrl+F3” if you
can’t see it for some reasons. At the very bottom of that panel you’ll see URL input box.
It have chain icon at the left of it. Just fill that empty input box with appropriate URL.




                                           43/47
                        www.a1template.net & www.host.com.hr




Fig 9.7 URL Input Box

Now it’s time to publish your flash movie. Read Publishing Your Flash Movie section for
detailed instructions.




Changing Images in Flash
In process of your web design template customization maybe you’ll need to insert to
insert your company logo or images in flash animated header. Here you’ll find quick
guide of how to do that.

Open your source FLA file in Macromedia Flash editor using instructions from Opening your
FLA file section.

Now press “F11” to launch symbols library. To make search of needed image symbol
easier sort them by kind by pressing “kind” tab at the top of symbols list. You’ll see that
all bitmap symbols are grouped now at the top of whole symbols library.




       Fig 9.8 Bitmap Symbols in Library

Browse these symbols to find symbol your want to substitute. You can see symbols
preview at the top of symbols library. When you have found necessary bitmap symbol
double click icon at the left of it to see symbol properties window.




                                          44/47
                        www.a1template.net & www.host.com.hr




       Fig 9.9 Bitmap Properties

You’ll see image preview and options there. Check the image size. It looks like 193 x 214
pixels at 32 bits per pixel. To make your image fit original effects and animation the best
way, your image must be same size as exchange image.

You can resize or crop your image using Adobe Photoshop. Open your image in it using
File/Open… from the top menu. To resize or crop choose Image/Image Size… or
Image/Canvas Size… accordingly. Then save image using File/Save As…, for using in
flash chose one of the following image formats: JPEG, GIF or PNG.

Press Import button at the left and browse to location of your image file.

At the bitmap symbols properties window you can change image quality. Make it lower to
reduce published file size.

No you should publish your flash movie. Next chapter will provide you with detailed
instructions and tips about it.




Publishing Your Flash Movie
Finally, after you’ve made all appropriate change to the flash animated header of your
web design template, you should publish and update it.

Maybe you’ll want to modify publish settings to reduce download time or increase image
quality. To do that choose File/Publish Settings… from top menu. In Publish
Settings window choose Flash tab. Main options that have significant influence on
published SWF movie file size are Jpeg Quality, Audio Stream and Audio Event.




                                          45/47
                        www.a1template.net & www.host.com.hr




       Fig 9.10 Publish Settings

To change jpeg image compression ratio move Jpeg Quality slider or type it in the input
box at the right of it. Low quality (high compression) extremely reduces download time
by flash looses its professional look. Try to experiment with quality to get optimal
size/quality balance.

Another way to affect movie size is to change Audio Stream and Event options. Press Set
button at the right to change music quality options.

Actually you can publish your movie directly from Publish Settings window, see
Publish button at the bottom. Or you can publish it from every point of Macromedia
Flash by pressing “Shift+F12” hotkey.

Published SWF file will appear in the folder were corresponding FLA file located.

Note: If some fonts in your published SWF file differ from original it means that
 you have not installed all appropriate fonts. For instructions about it read Font
                                Installation section.

Replace old SWF file in HTML/Flash folder with a new one. Now it’s time to check
modifications you’ve made. Go to the HTML folder of your web design template and
launch HTML file to see changes.




                                           46/47
                         www.a1template.net & www.host.com.hr



Additional Questions
Here you'll find some additional articles about different questions.

What do you want to know more about?

 About CSS Templates




About CSS Templates
CSS Web Template is a website design created using Cascading Style Sheets (CSS)
technology. Cascading stylesheets provide web developers an easy way to format and
style web pages. CSS will be used even more because it's the compromise for browser
and way out of the browser wars.

CSS templates allow enhanced browser and platform compatibility (CSS supporting
browsers are used by 99,98% of existent web surfers). Your website will look perfect in
Windows, *nix and Mac browsers. The template is primarily tested on multiple platforms
to ensure better requirements compliance.

Style Sheets is the easiest way to provide a default font styling for HTML. So you can
modify the whole text and link colors on all pages editing just a single CSS file! CSS also
makes your coding much easier because you don't have to numerously repeat the
formatting tags. Such trimmer code equals faster download time and reduced bandwidth
usage.

CSS templates show 100% compatibility with Macromedia Dreamweaver and MS
Frontpage. Other web editors also handle this technology easier than usual HTML code.
Good news - now you don't need to fight with complicated HTML tables trying to modify
the layout of your site. Our CSS templates use <div> blocks instead of the tables. So you
can move content blocks simply dragging 'n' dropping them in your HTML editor.
Moreover, these tags are better understood by JavaScript and other web programming
languages.

CSS technology is a great step ahead in web development. Separated content and
presentation adds more flexibility to your website. You'll have no problems with future
modification of your website. All templates are based on w3c.org technologies and
standards that makes your website more user-friendly.




                                           47/47

								
To top