How to Add and Format Text in Dreamweaver - dummies

How to Add and Format Text in Dreamweaver

By Janine Warner

Many people are pleasantly surprised by how easily they can create a basic web page with text and images in Dreamweaver. You can do basic text formatting by using Dreamweaver’s HTML formatting options, including the heading and paragraph tags. Start with these basic HTML tags to keep things simple at first.

How to add text to a web page in Dreamweaver

To add text to a page, you can simply click to insert your cursor at the top of a page and type. If you want to add text that you have somewhere else, such as in a file created in Microsoft Word, you can copy and paste the text into Dreamweaver instead of retyping it.

Dreamweaver offers many ways to maintain formatting when you copy and paste text from another program. This feature is especially important when you copy text from Microsoft Word because if you just paste text as is, you risk including a lot of extra code that is unique to Microsoft Word and can cause problems in your web page.

You can change the default for how Dreamweaver handles formatting when you choose Edit→Paste by altering the Preferences in the Copy/Paste category. You can also choose Edit→Paste Special to display these options any time you paste new content.

Following are your four main options for inserting text when you choose Edit→Paste Special as well as three ways to refine your choice:

  • Text Only: Dreamweaver strips any formatting and inserts plain text.

  • Text with Structure: Dreamweaver includes paragraphs, lists, tables, and other structural formatting options.

  • Text with Structure Plus Basic Formatting: Dreamweaver includes structural formatting as well as basic formatting, such as bold and italic.

  • Text with Structure Plus Full Formatting: In addition to the previous options, Dreamweaver includes formatting created by style sheets in programs such as Microsoft Word.

  • Retain Line Breaks: Line breaks are preserved, even if you don’t keep other formatting options. This option is not available if you choose Text Only.

  • Clean Up Word Paragraph Spacing: This option removes special formatting code unique to Microsoft Word and is unnecessary (and not recommended) for text on the web.

  • Convert Smart Quotes to Straight Quotes: Smart quotes — the common name for those fancy curly quotes that designers love to use in print documents — require a special character to be displayed properly on the web, and that special character does not work in all web browsers. To avoid this potential problem, select this box and convert all your smart quotes to straight ones.

How to format text with the heading tags in Dreamweaver

One of the best formatting options for headlines is the collection of heading tags. In HTML, using heading tags (<h1>, <h2>, and so forth) to format text that serves as a title or headline offers many advantages. Heading tags are designed to be displayed in relative sizes, with <h1> the largest, <h2> smaller, <h3> smaller still, and so on through <h6>.

So no matter what a web page’s default text size is (and text sizes can vary due to browser settings and computer platform), any text formatted with an <h1> tag is always larger than text formatted with <h2>.

Popular belief is that many search engines give priority to keywords in text formatted with an <h1> tag because the most important text on a page is generally included in the largest size headline. Similarly, search engine experts will tell you that you should use the <h1> tag only once per page.

To format text with a heading tag, follow these steps:

  1. Highlight the text you want to format.

  2. In the Property inspector, at the bottom of the workspace, make sure the HTML button on the left side of the inspector is selected.

  3. Use the Format drop-down list to select a heading option.

    When heading tags are applied, the text automatically changes to become big and bold in Design view.

    [Credit: Photo by Casey Stoll]
    Credit: Photo by Casey Stoll

In general, the Property inspector is the easiest way to apply basic formatting, but you can find these HTML formatting options also by choosing Format→Paragraph Format and then selecting a heading option from the submenu that appears.

How to add paragraphs and line breaks in Dreamweaver

When you create page designs for the web, you must work within many limitations that may seem confusing at first. Web design and print design are fundamentally different, and that can make even seemingly simple tasks more complicated than you might expect. How you create paragraph and line breaks is a good example.

If you’re working in Design view in Dreamweaver and press the Enter key (Windows) or the Return key (Mac), Dreamweaver inserts a paragraph tag, or <p>, in the code, which creates a line break followed by a blank line.

If you want a line break without the extra blank line, hold down the Shift key while you press Enter (or Return) to tell Dreamweaver to insert the <br /> tag into the code, creating a single line break.

Best practice is to avoid using multiple paragraph or break tags to create extra space in a web page (and not all browsers will maintain the blank space if you create it that way). If you want to add a lot of space between paragraphs or other elements on a page, your best option is to use CSS.

If you’re working in Code view and add space using the Enter or Return key, you add blank space within the code. Extra space in HTML code can be useful because extra space can make code easier to read, but in general, it doesn’t affect the way a page is displayed in Design view or in a web browser.