Sample Dreamweaver Template from Templates2go

This is an sample of one of our Dreamweaver Template designs.

The templates are designed to work with Dreamweaver 4 or MX and Fireworks 4 or MX. Each web site design template comes complete with 5 or more interactive pages with working active links and all the original graphics plus a Dreamweaver .dwt template file based on the design for easy editing and customization.

We also include all the original source graphics in Fireworks png file format so you can easily edit and customize the logos, titles, menu bars and backgounds, titles and page layouts used in the designs.

Most of the designs feature java script rollovers in the menus. You can see how the rollovers work by clicking on the menu options on the left to view the other five pages in this template design.

Full step-by-step instructions for editing each template design are also included (scroll down this page to see an example of one of the actual instruction sheets below).

Still have questions? E-mail me at linda@templates2go.com and I'll be happy to answer them for you.

Template Editing Instructions

This template has a menu with rollovers that is created in Fireworks and that uses the Swap Image Behavior in Dreamweaver. It includes a Fireworks comp.png file you can use to edit the existing on and off state rollover buttons and all the other text and graphics used in the design layout. Here's how to modify this design using Dreamweaver and Fireworks:

1. Copy the folder containing all the elements of the template from the Templates2go CD dwtemp folder.
   
   
2. Launch Dreamweaver and define a site for the template. In the site window, you will see all the .htm pages, plus three sub-folders containing the images used in the .htm pages, the Fireworks .png file, and the templates folder that contains the Dreamweaver template file (main.dwt) for this design.
   
   Note: If a small lock icon appears by the files, this means that they are read-only files since they were copied from the CD which is read-only. To unlock them, just select the files and right-click on them and select Turn Off Read Only from the pop-up menu.
   
   
3. Open the index.htm file for the template to see how the page is constructed. Before you start adding text or making other changes to the design, you'll need to modify the graphics in Fireworks.
   
   
4. First, open the comp.png file in Fireworks. Then make sure the Tools menu is open. If it's not, select Tools from the Window menu in Fireworks to open it.
   
   
5. You will notice that the comp.png file is divided into different shaded areas -- these are slices and they display as a green overlay around each slice area. In order to edit the comp.png file components you'll need to turn off the slices.
   
   
6. You do this by clicking on the clear Hide/Show slices icon on the bottom left of the Tools bar under the View section. To turn the slices back on, just click on the colored icon to the right of the clear one.
   
   
7. Now, open the Frames and the Layers windows by selecting these options from the Window menu. Frame 1 contains the "off" state for the menu rollovers and Frame 2 contains the "on" state for the menu. The Layers window is where the different slices are named.
   
   
8. If you look under the Web Layer at the top of the Layers window you'll see that all of the slices have been named so that when the slices are exported the image files will have those names.
   
   
9. Now, making sure you are in Frame 1 go ahead and edit the menu text and the other text and graphics used in the layout as needed. To edit the text just double-click on it and make your changes in the Text Editor box.
   
   
10. Once that's done, you'll need to select Frame 2 and make the same changes in that frame too.
    
    
11. Now you are ready to export the changes. Make sure you switch back to Frame 1 and that the slices are turned on.
    
    
12. Click on the first slice at the upper left hand corner to select it. Then right click the slice and select the first option in the pop-up menu -- Export Selected Slice.
    
    
13. The Export window will appear. In the Save in: window make sure you have the images folder for the template selected. It's important that you save the files in the correct folder so that your changes will show up properly in the web pages.
    
    
14. Leave the file name as it appears in the box and click the Save button and overwrite the existing file to update the graphic with your new changes. Repeat this procedure for all the slices in the comp.png file that you changed making sure to save them in the correct images folder and that you overwrite the existing images.
    
    
15. Now open Frame 2 and export out each of the button slices as you did before. Since these are the "on" states of the menu text, when you export the files, just select the existing file -- for ex. button1on.gif and click on Save and overwrite the existing image. Repeat the export process for each of the "on" state buttons in Frame 2.
    
    
16. Close and Save the comp.png file when you are done.
    
    
17. If you did not change any of the names of the graphics files from the originals and you exported the file to the correct images folder, the index.htm file will display your updated graphics in Dreamweaver.
    
    
18. If you did change the names, you'll need to delete the placeholders for the missing images and replace them with the ones you changed.
    
    
19. If you changed the names of some of the menu images, you'll need to set the rollover behavior again for the new images.
    
    
20. To do this select Behaviors from the Window menu in Dreamweaver.
    
    
    
    
21. Now click on the image you want to add the rollover behavior to and click on the plus (+) button at the top left of the Behaviors window and select Swap Image from the options.
    
    
    
    
22. From the Swap Image dialog box, click the Browse button to select the correct "on" image for this button, for ex. button1on.gif. Be sure to type in the new page link for your new button in the Properties box.
    
    
    
    
23. Now, you can edit and add text to the web pages in Dreamweaver as needed. Be sure to edit the other pages in the design to reflect the changes you made in the index.htm file.