Skip to Navigation | Skip to Content

Web Template Guide: Formatting Web Content

Add/edit content on your Web page

You can add content to your Web page in two ways:

  1. Type directly in Dreamweaver in the "Primary Content or "Sidebar Content" areas of the page.
  2. Copy and paste content from Microsoft Word, e-mail, a pdf, the Web or any other place on your computer. Note that if you copy and paste text from another program, you may import faulty formatting that will need to be fixed in Dreamweaver.

Format your text

Whether you are typing new content, copying and pasting your content from elsewhere or editing existing content, use the following styles to format your content.

  • Paragraph (CTRL + shift + p): black and evenly spaced – used for normal body content. Bold and italics can be applied to this style.
  • Heading 1 (CTRL + 1): large, bold and black with a line underneath – use only once on a page, at the very top in the “Heading Content” area.
  • Heading 2 (CTRL + 2): large and red – use once at the top of the “Primary Content” area, or at the top of both columns in a two column layout.
  • Heading 3 (CTRL + 3): medium and red – use for headings in a sidebar and for sub-headings in the primary content area.
  • Heading 4 (CTRL + 4): medium and black – use for sub-headings in the primary content area.
  • Heading 5 (CTRL +5): small and red – use for sub-headings in the primary content area.
  • Heading 6 (CTRL + 6): smallest, and red – use for sub-headings in the primary content area.

See examples of these text formatting options »

Add these formats to your text by placing your cursor in a line of text and choosing an option from the "Format" box in Properties. Or place your cursor in a line of text and use the keyboard shortcuts indicated in parentheses below.

Do not use the style "none" for your text.

Note: If you apply a format tag to your text and create a line break after your text, all text that follows will take on the same format. Example.

Text and line spacing issues

Text on your Web pages should be formatted so that there are whole line spaces between headings and body text, and between each paragraph of body text. This increases the readability (and scannability) of your text on the Web, and creates consistency in text formatting across Calvin College's Web site.

To ensure that there whole line spaces between headings and body text and between paragraphs on your page, press ENTER after you finish each paragraph.

Do not press SHIFT+ENTER to create a line break between headings and body text, or between paragraphs of body text.

It can be helpful when formatting text, to turn on "invisible elements" in Dreamweaver. This will allow you to see where there are line breaks on your page so that you can delete them.

Learn how to turn on invisible elements in Dreamweaver.

Other formatting options

Bullets and lists

For lists of information on your page, consider using the bulleted list or numbered list option in your Properties palette.

Tables

Tables can be used sparingly to separate and organize tabular data (such as schedules).

Tables should not be used, as they were in the past, to modify your page layout. Use our layout options to modify your page structure.

 In Dreamweaver, go to Insert>>Table. Consider styling your table. Example.

Small text

The “bodycopysmall” style can be chosen from the list under “Styles” in your Properties palette to create special small text. This is typically reserved for photo captions or dates under headings. Example.

Special characters

Insert special characters, like m dashes, n dashes, bullets, and right double angle quotes by going to Insert>>HTML>>Special Characters>>Other and making a selection from the options available.

Links

Adding links to your content can be a way to connect your Web visitors with resources related to your content.

Add a link to your page by highlighting the words you’d like to appear as blue and underlined. Go to the “Link:” box in your Properties palette and either enter the URL you’d like to link to, or use the target to point to a page in your site you want to link to. You may also browse to the page you want to link to by clicking on the folder icon next to the link box.

Anchor tags

To link to a specific portion of a lengthy page, add an anchor tag by going to Insert>>Named Anchor and giving the anchor an easy-to-remember name.

Link to your anchor by adding a link to the page the anchor is on; directly after the end of the link, type #anchorname, where "anchorname" is the name you gave the anchor earlier.

Apply formatting standards

For style consistency across your site and Calvin’s Web site, you should stick to the pre-formatted styles for your content.

Font size

The font sizes and colors have been chosen specifically for the Web to enhance readability as your visitors navigate your site. For the sake of consistency and readability, the font size and color of text should not be changed. Example of wrong color use.

Font type

The font family "Arial, Helvetica, sans serif” has been chosen as the default font because of its wide use and acceptance on the Web. Example of wrong font use.

Text placement

Text should, as a rule, be justified to the left of the page. Exceptions might be for things like poetry or Bible verses. Example of incorrect text alignment.

Turn on invisible elements

Before you add text to your Web page, turn on your ability to see line breaks in Dreamweaver.

Whenever you copy and paste your content from a program like Microsoft Word, you will likely import formatting that does not render well on your Dreamweaver page. Most often, this faulty formatting is in the form of line breaks (<br/> tags in your HTML code, or what is known as a “soft return”—shift+enter—in many word processing programs).

To see line breaks and remove them from your text, follow these steps:

  • Go to Edit>>Preferences
  • Highlight “Invisible Elements” in the list on the left side of the dialogue box that opens.
  • Check “Line Breaks” on the list in the center of the box and click “OK”. You will now see an icon wherever a line break occurs.
  • Remove all unecessary line breaks that appear in your text.

Invisible elements text box

 

Secondary

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ut nibh.

Quick Links

Format your text with headings, sub-headings and paragraph styles.

Add bullets to your text

Insert a table

Insert an anchor tag

Add a link to your text

Insert special characters

Use a specific font

Use different font sizes

Web writing tips

Want prospective students to read what you have to say on your Web pages? Follow these writing tips.

Text formatting

See examples of correct and incorrect text formatting.