Home
Templates
Low Cost Solutions
Custom Services
Free Resources
Contact

 WEBSITE TEMPLATES       FLASH WEBSITES       WORDPRESS THEMES       BLOG   


Fireworks &
Dreamweaver Templates Fireworks
Logos Flash
Photo Galleries Flash
Video Galleries Illustrator
& Coreldraw Logos Website
Hosting Royalty-Free
Photographs
You are here : : Home > Low Cost Solutions > Fireworks & Dreamweaver Templates > Customization Guide   

Fireworks & Dreamweaver Templates

Related Links

Template Files

Each Dreamweaver template download includes:

  • The Fireworks source file
  • The Dreamweaver template
  • An external style sheet
  • Fonts used in the layout
  • All template images
  • Help File


Customization Guide

Simple guide to customizing Entheos templates

Follow these simple steps to customize Entheos templates.

Step 1: Defining the site in Dreamweaver

  • Define your site in Dreamweaver by clicking on Site/New Site.
  • Fill in your site details in the Site Definition panel. Enter your site name and use the folder icon to browse to the folder where your site files reside on your computer. Once you have defined your site, click on Done in the Site Definition panel.
  • You will now see the below given list of folders and files in your local site:

    1. Fonts folder - Contains the fonts used in the source file. Open the fonts folder and copy the fonts to your local fonts folder (e.g. WINNT/Fonts).
    2. Images folder - Contains the images used in the site. All updated images should be exported to this folder.
    3. Templates folder - Contains the Dreamweaver template (template.dwt). Create a copy of the template as a backup. All important changes will be made here.
    4. Styles.css - This is the external style sheet used in the template. The styles created will be used to format text throughout the site. Additions and modifications to existing styles can be made here.
    5. Index.htm - This is the homepage created using the template.
    6. Template.png - This is the Fireworks source file. All changes to graphics will be made here.
    7. Help_files.htm - Guide to customizing Entheos templates.
    8. License.htm - Please read the license before using the template.
    9. If your template uses drop-down menus, you will have 2 extra files.
      1. fw_menu.js - Contains the function for the drop-down menus
      2. menus.js - Contains the drop-down menu items. Changes to the drop-down menu will be done here.
Back to Top

Step 2: Customizing the Header with your Company Name

  • Open template.png (The .png can be opened only in Fireworks 4.0 and higher versions)
  • Double Click on 'Your Company Name' and change the company name in the text editor. You can also adjust the font type, size and color here.
  • Repeat the above step for the company slogan if it exists.
  • Once the Company Name and Slogan have been modified it is ready to be exported.
    • Open the Layers panel by clicking on Window/Layers.
    • In the Layers panel, open the Web layer by clicking on the eye icon next to the layer. You will now be able to see all the slices. Right click on the 'company name' slice (found on top) and click on export selected slice.
    • Export the slice to the images folder in the local site folder and overwrite the existing image.

Once the image is exported it will automatically be reflected in the site.

Please note: The size of the image should not be changed. Make sure the 'Company name' fits within the slice. You can adjust the text size if the name is too long.

Back to Top

Step 3: Customizing Links

Some of our templates have graphic links while others have text links.

For Customizing Graphics Links:

  • Open template.png
  • Double Click on the links to open the text editor (If the links are grouped right click on the links and click on Ungroup to edit the links)
  • In the Text Editor preview area, change and apply the text.
  • Repeat the above 2 steps for each of the links
  • Once all the links have been modified it is ready to be exported. If the layer panel is not visible in Fireworks, open the Layer panel by clicking on Window/Layers. In the layer panel, open the Web layer by clicking on the eye icon next to the layer (see Figure 1). You will now be able to see the slices for all the links (a green translucent layer will appear over the images). Right click on each of the slices and click on export selected slice. Export the slice to the images folder in the local site folder and overwrite the existing image.
  • Exporting the rollover images
  • If the layer panel is not visible in Fireworks, open the panel by clicking on Window/Frames. View the second Frame by clicking on Frame 2. Here you will see the buttons in the rollover state.
  • Change the names of the links by following the same steps given above.
  • Export the slices again, except this time as you are exporting the links add '_f2' to the name of the slice. All the rollovers have an '_f2' added to the name of the slice. E.g. The rollover image for button1.gif will be button1_f2.gif, button2 will be button2_f2.gif etc.
    Important: The slices have to be exported from Frame 2 and the names have to have an '_f2' added to it.

Once the images are exported they will automatically be reflected in the site.

Figure 2: Figure 2 represents the Frame panel.

Figure 3: Figure 3 represents a Slice. As you can see a slice is a green translucent layer.

For Customizing text links:

  1. If the template uses text links the links can be customized in the Dreamweaver Template itself. All you need to do is click on the link and modify it.
  2. Save the changes. When you save a template in Dreamweaver, a pop-up window will appear where you will be asked if you want to update pages. Click on Update. When all the pages are updated click on Close.

Deleting extra buttons or links

If you'd like to delete unwanted buttons or links, select the button or link in the Dreamweaver template and delete it.

Back to Top

Step 4: Customizing the footer with your company details

  • Open template.dwt (under the Templates folder)
  • Edit the footer info with your company details
  • Save the changes. When you save a template in Dreamweaver, a pop-up window will appear where you will be asked if you want to update pages. Click on Update. When all the pages are updated click on Close.
Back to Top

Step 5: Customizing the drop-down menus

  • Open menus.js
    The menu function will look like this:

    function fwLoadMenus() {
    if (window.fw_menu_0) return;
    window.fw_menu_0 = new Menu("root",100,18,"Verdana, Arial, Helvetica, sans-serif",11,"#ffffff","#ffffff","#22438e","#f8bf29");
    fw_menu_0.addMenuItem("Services 1","location='#'");
    fw_menu_0.addMenuItem("Services 2","location='#'");
    fw_menu_0.addMenuItem("Services 3","location='#'");
    fw_menu_0.hideOnMouseOut=true;
    window.fw_menu_1 = new Menu("root",100,18,"Verdana, Arial, Helvetica, sans-serif",11,"#ffffff","#ffffff","#22438e","#f8bf29");
    fw_menu_1.addMenuItem("Product 1","location='#'");
    fw_menu_1.addMenuItem("Product 2","location='#'");
    fw_menu_1.addMenuItem("Product 3","location='#'");
    fw_menu_1.hideOnMouseOut=true;

    fw_menu_1.writeMenus();
    } // fwLoadMenus()

  • To edit a menu item select the item and modify it. E.g 'Services 1' can be changed to 'Web Design'. Add the link to the menu item by adding "location='/your web page path'".

    E.g. fw_menu_0.addMenuItem("Web Design","location='/web_design.htm'");

    Please note: If you have files in folders you will have to give absolute paths in the location (not relative paths)

  • To add a menu item copy-paste the previous menu item and replace the name with the new menu item. E.g If you want an extra service 'Services 4', you would have to copy 'Services 3' in the next line and change 'Service 3' to 'Service 4'. If you want 5 Services, the code will look like this:

    fw_menu_0.addMenuItem("Services 1","location='#'");
    fw_menu_0.addMenuItem("Services 2","location='#'");
    fw_menu_0.addMenuItem("Services 3","location='#'");
    fw_menu_0.addMenuItem("Services 4","location='#'");
    fw_menu_0.addMenuItem("Services 5","location='#'");

  • If you want to delete a menu item select the line for that item and delete it. E.g. If you only wanted 2 menu items the code would be:

    fw_menu_0.addMenuItem("Services 1","location='#'");
    fw_menu_0.addMenuItem("Services 2","location='#'");

Back to Top

Step 6: Adding new pages

  • Open Dreamweaver
  • Click on File/New from Template
  • Select template and click on the Select button
  • Once the template has been applied to the new page click on File/Save to save the new page.
  • Add content in the editable region called content.
Back to Top

Customizing the swap images

  • Open template.png
  • If your template uses swaps you'll find that the png template is divided into different frames. Each frame will have a different swap representing each of the sections.
  • To view all the swaps in the fireworks template open the Frames panel by clicking on Windows/Frames. Click on each of the frames to view different instances of the swaps.
  • Unlock all the layers so that you can select the pictures you want to change.
  • Right click on the object you want to change (circle with the image) and click on Ungroup. Once the picture is ungrouped you can easily replace the pictures with your own pictures. All you need to do is import the picture by clicking on File/Import and browse to select your picture. Left click to view the imported picture. Resize the picture and position it above the circle then cut the picture(Cntrl+X), select the circle and click on Edit/Paste Inside. This will paste the picture within the circle thus giving the picture a circular look.
  • Repeat the above step for each of the swaps by selecting individual frames.
  • Preview the fireworks template by clicking on the preview tab found on top. All the changes should be seen here.

  • Once all the graphics are modified, the next step is to export all the swaps. Select Frame 1 and right click on the swap slice and export the slice to the images folder. Now select the next frame (i.e Frame 2) and export the same slice except and add a '_f2' to the name of the slice. Repeat this step for all the swaps. Please Note - The names of the swaps will be as follows:

    • swap.jpg - for the swap in the first frame
    • swap_f2.jpg - for the swap in the second frame
    • swap_f3.jpg - for the swap in the third frame
    • swap_f4.jpg - for the swap in the fourth frame and so on

  • Once the pictures are exported preview the Dreamweaver template in IE to test if all the swaps are working fine.
Back to Top

Customizing text - Changing fonts using CSS Styles

We've used external style sheets to manage the text used in the site. Changing font properties has never been easier. Follow these steps to customize the text used in the template.

  • Open styles.css in Dreamweaver
  • The following styles are common to all the templates
    • title - used for the titles
    • subtitle - used for the subtitles
    • text - used for the content
    • footer - used for the footer
  • Choose the style you want to change and click on Edit. In the Style Definition Pop-Up Window change the font type, size, weight etc. and save the changes.
  • Once the style is saved it will automatically be reflected in the site.