Dreamweaver Template Customization Guide

Step 3: Custom Header

Customizing the Header with your Site Name and Slogan

• In Fireworks, open template.png (The .png can be opened only in Fireworks 4.0 and higher versions).
• Double Click the Your Site/Company Name and edit it with your company name (Fig: 3 a).



• You can also adjust the Font type, Size and Color in Window>>Properties panel (or Ctrl+F3) found below the stage.


• Repeat the above step for the slogan if it exists.
  
• Once the Site/Company Name and Slogan have been modified it is ready to be exported.
• In the Layers panel, open the web layer (Fig: 3 c).

  

  1. Right click the slice found over the company name and click the Export Selected Slice (Fig: 3 d). Export the slice in to the images in the local root folder and overwrite the existing image.
     
     
  2. Once the image is exported it will automatically be reflected in the site.

Please note: The size of the image should not be changed (unless you know how to do it without affecting the layout). Make sure that the Site/Company name fits within the slice. You can adjust the text size if the name is too long.

In case you are sure that the changes in dimensions cannot be avoided please do the following:

• Extend the size of the Company Name or Site Name slice to fit your changes and export the image to the images.
• Select the Slice which you choose to expand, then select the scale tool as shown by an arrow in Fig:3 e.
• Then drag the portion circled below (a double headed arrow appears), extend it to your desired length as shown in Fig: 3 f.
• Then Export the changed Slice to the image in the local root folder and overwrite the existing image.





• In Dreamweaver, open template.dwt (it will be present inside the template folder) as shown in Fig: 3 g and click the image (which will be distorted due to the changes).
  
• In the Properties panel you will find that the width dimension is in bold and there will be a interconnecting refresh icon inbetween the two dimensions as highlighted in Fig: 3 h. Just click on it and it will resize you image.

• Finally Save (or Ctrl+S) and update your template and your changes will take effect.

SmartWebby.com Template Customization Guide Steps

• Step 1: Site Definition - Setting up your website in Dreamweaver
• Step 2: Custom Colors - Changing your website Colors
• Step 3: Custom Header - Customizing the Header with your Site Name and Slogan
• Step 4: Custom Links - Modifying your website Links
• Step 5: Custom Footer - Changing the website's Footer Text
• Step 6: Custom Graphics - Replacing Photos used in the Template's Design
• Step 7: Custom Content - Inserting Content into Existing Pages and Adding New Pages
• Step 8: Customizing text - Changing fonts using CSS Styles
• Custom Flyouts - Modifying your website's Drop-down Menus
• Customizing the news scroller
• Customizing the swap images