Dreamweaver Template Customization Guide

Step 8: 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.

• In Dreamweaver, open styles.css in Files panel (Fig: 8 a) .
• The following styles are common to most of the templates:
  • title - used for the titles
  • subtitle - used for the subtitles
  • text - used for the content
  • footer - used for the footer
  • links - used for text links
  • menutext - used for text in the menu

• :hover - It is a pseudo-class, which adds a special style to an element when you mouse over it.
• Choose the style you want to change and click on Edit. In CSS Style definition panel (Fig: 8 b) change the Font type, Size, Weight etc., and Save (or Ctrl+S) the changes.

• To change the hover effect of a style (which is not visible in the stylesheet in Dreamweaver 4 and below), click on the Edit Style Sheet button (yellow pen on paper icon) which is shown in Fig: 8 c , select the style sheet and then edit the hover effect.

• Once the Styles is saved, it will be automatically reflected in the site.

Using Styles to format text

1. Open the CSS Styles panel by clicking on Window>>CSS Styles (or Shift+F11). You will see a list of all the styles created for the site (Fig: 8 d).
   

2. To format text, all you need to do is select the text you want to format and choose the appropriate style from the Window>>Properties panel (or Ctrl+F3). E.g. Choose the text for the title of the page and select the title style which is shown in Fig: 8 e. You will now see that the text is formatted with the title style.
   

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