Web Team

Web Team

Text

This page explains how:
  • format headings and text
  • apply styles/classes to text (includes ident text)
  • add a pull-out quote

Note: Styles are called classes in Dreamweaver CS4.

University web pages use 'Cascading Style Sheets’ (CSS). You may be familiar with the concept of a style sheet from Word. Styles/classes are used to define a set of formatting characteristics that are applied to text, tables, and lists to change their appearance in your document.

CSS used on web pages works the same way. They are good for keeping a consistent look and feel to web pages, and provide the ability to make site-wide changes to formatting quickly and easily.


To format text and headlines use the 'format' drop-down menu. To apply a 'class' ('style' in older versions of Dreamweaver), use the 'class'/'style' drop-down menu. Both are in the Properties panel (bottom of Dreamweaver).

Apply formatting to headings and text

Always use the formatting and styles from the in-built CSS by the Web Team. Do not create your own styles.

To format text and headings in the properties box (bottom of Dreamweaver) use the drop-down menu beside 'format'.

  • Highlight the text you want to make a heading (or place cursor anywhere within the text)
  • In the 'Properties' box, select the appropriate heading tag, eg 'Heading 2' (or paragraph for text), from the 'Format' drop-down list

Setting heading styles in DreamweaverShortcut keys to format text and headings

  • Select a heading style by highlighting the text, hold down the 'CTRL' key, and select a number 1 - 4 depending where on the page the heading is. (See Text in the Web Style Guide on where to use each)
  • Set the 'paragraph' style on selected text with 'SHIFT+CTRL+p'

Text and headings in tables

  • Text and headings within tables should have no formatting from the 'Format' drop-down menu (change to 'none' if text is set to 'paragraph'). Table styles automatically apply formatting
  • Use the drop-down menu to remove heading or paragraph formatting on selected text by setting 'Format' to 'None'

Applying styles/classes in CS4 to text (including indent text)

  1. Style Appearance
    red Red text
    indent Indented text
    toplink

    Top
    Highlight the text you want to apply the style to.
  2. Select the style you want from the Style/Class menu in the Properties panel.

Note: Indent text using the in-built style, not the arrows in the properties panel.indent text in properties panel


 

Text page in the Web Style Guide explains how to use text styles.

The pull-out quote

I think that I shall never see a billboard as lovely as a tree.

The pull-out quote can be used to make a page more interesting by calling attention to some of the text.

I think that I shall never see a billboard lovely as a tree.
Perhaps, unless the billboards fall, I'll never see a tree at all.
Ogden Nash

HTML for the pull-out quote

<div class="quote">I think that I shall never see a billboard as lovely as a tree.</div>