TEC home

Web home

Page/site design
- basic principles
- good/bad examples

Basic html
- tutorial
- resources

Netscape Composer
- tutorial
- resources

Dreamweaver
- tutorial
- resources

Uploading and downloading
- setting up your mason account
- basic procedure

Web assignments
- general
- design and navigation

Contact us

Dreamweaver Tutorial - Entering and Formatting Text



Important points to consider

  • When a user installs a browser, the browser includes format settings for text.  These initial settings in the browser are called “default settings.”
  • The default settings for text include “Normal” for the body of a paragraph and “Heading” (sizes 1-6) for headings and sub-headings.
  • “Normal” and “Heading” text displays on the reader’s browser according to the default settings of the reader’s browser (unless the reader has modified the settings).  It will not necessarily appear the way it does on your screen.
  • You can include specific font, size, and color settings for your text if you want it to appear in a certain way (or as close as possible) on the reader’s browser.

Start from Scratch

  1. Open Dreamweaver.

  2. Select Show code, show code and design, or show design.
    (This example is based on the middle button which shows code and design in a split screen.)


  3. Click in the blank Design window at the bottom and type in text.
    (Whenever you type in text or adjust text the program creates the appropriate code in the top window.)


  4. Most of your adjustments to text will be made from the floating text panel.
    (If the text panel does not automatically appear select View from the options across the top, then select show panels.)


  5. NOTE: You can select text properties before you type text or after. To format text after you have entered it (as with this example), highlight the text, and then follow the steps.

To identify text as a heading

  1. Click on the arrow to the right of the paragraph style box. A menu of styles will appear.
  1. Move your pointer to the heading size you want (“1” is the largest and “6” is the smallest) and click on it.
    (headers bold and size text)
  2. To identify text as part of a new paragraph select "paragraph," or to identify text as part of the “body” of the page (without a paragraph break) select "none."

To select a font type

  1. Click on arrow to the right of the font style box. A drop-down list will display.

  2. Move the pointer to the character font you want to use and click on it.


To select the font size

  1. Click on arrow to the right of the font size box. A drop-down list will display.

  2. Move the pointer to the font size you want to use and click on it.

  3. NOTE: Use the scroll bar to move down through the various size selections. Plain numbers determine exact font sizes. Plus and minus selections determine font size relative to a viewer's browser default.

To select the font color

  1. Click on small arrow to the bottom right of the font color box. A drop-down box will display a variety of color options.

  2. Move the pointer to the font color you want to use and click on it.


Other Text options from text panel

  1. The text panel also allows you to select bold, italics, left justify, center, and right justify (in order across the top from the color box).



  2. Move the pointer to the operation you want to use and click on it.

  3. The text panel also allows you to create unnumbered and numbered bulleted lists.



  4. Move the pointer to the unordered (unnumbered) button or the numbered button just to the right and click on it.


Setting Default colors for text and links

  1. You can also set background, text, and link colors. Go to Modify across the top line of main options and select page properties. This dialog box appears:



  2. Select color boxes and choose a color.

  3. Page title, which shows up across the very top of your browser, and also be designated in page properties.


Dreamweaver Home | Text | Links | Images | Tables