• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Working with Text > Typing, Copying/Pasting, and Importing Text into...

Typing, Copying/Pasting, and Importing Text into Dreamweaver

Before text can be formatted and styled, it needs to find its way into a document in the first place. There are several ways this usually happens:

  • Text is typed directly into the document in Design view in Dreamweaver.

  • Text is copied and pasted from an outside source into the document.

  • Text is imported from a program such as Microsoft Word.

Typing Text Directly into a Dreamweaver Document

Text can be typed into any HTML document in the Dreamweaver Document window in Design view in much the same way as with a word processor. However, Dreamweaver enables you to format text only in ways that HTML allows; for instance, HTML does not allow tabs, and so none are available in Dreamweaver.

One difference between Dreamweaver and a typical word processor often confuses those just starting out, and that is the difference between a paragraph break and a line break. The following sections explain this.

Ending a Paragraph and Beginning a New Paragraph

In Dreamweaver, pressing Enter ends the current paragraph and begins a new paragraph; in the source code, both paragraphs are formatted with <p></p> tags. In the Dreamweaver Document window, the break between paragraphs displays as a double space; most browsers display paragraphs like this as well.

Ending a Line of Text and Beginning a New Line of Text

Pressing Shift+Enter ends the current line and begins a new line; in the source code, a <br> tag is entered. In the Dreamweaver Document window as well as in the browsers, the text just begins at the far left on a new line.


You can spell-check your text inside Dreamweaver. To access the spell checker, pull down Text > Check Spelling from the main menu, or use the keyboard shortcut Shift+F7.

Your typed-in text naturally will need some formatting; this can be done either with CSS (see Chapter 13) or with the <font> tag, explained later in this chapter.

Copying/Pasting Text from Another Program

If you want to paste text into Dreamweaver after copying it to the Clipboard from another program, you have two choices, which you can see by pulling down the Dreamweaver Edit menu. One is called Paste; the other is called Paste HTML. Although the reasoning for the names of these two options is slightly obscure, the difference between them is clear.

Paste inserts your Clipboard contents into your document, retaining the line breaks and, in some cases, the formatting (such as bold letters).

However, retaining line breaks from the original document is usually not a good idea. Ideally, text should “flow” inside its container on an HTML page, with line breaks being determined on-the-fly by the browser; having predetermined line breaks, or hard returns, will usually cause some undesired results.

However, the Paste option might be appropriate for situations in which you want the speed and convenience of dropping formatted text onto a Dreamweaver HTML document.

With Paste HTML, all line breaks are removed, leaving you with one long string of unbroken, unformatted text, retaining only the single-space breaks between words (see Figure 4.4).

Figure 4.4. Using the Paste HTML option removes all line breaks from a document copied from a browser or word processor window.

The main advantage of using the Paste HTML option is that, with all formatting removed, you can format your text exactly the way you choose. If the document is not a large or complex one, this is probably the best option.

The real use for Paste HTML, though, is for use with actual HTML code. So, for example, if you copy the contents of a web page, then paste into the Dreamweaver Design window, you will get text with line breaks and some simple formatting. If you view the source of that same web page, copy from the browser, then paste HTML within Code view, you get the entire page with all formatting.

Exercise 4.1 Copying/Pasting Text from Microsoft Word

This exercise requires Microsoft Word. Here you’ll copy text from a Word document and paste it into a Dreamweaver document, using first the Paste feature, then the Paste HTML feature. This will clarify the difference between the two features.

Before you start, copy the chapter_04 folder on the CD to your hard drive. Define a site called Chapter 4, with this folder as the local root folder.

Within your local chapter_04 folder, find and open the file nc_facts.doc in Microsoft Word.

Choose Site > Site Files View > New File to open a new Dreamweaver document. Name the document nc_facts.html.

In the open Word document, choose Edit > Select All, and then Edit > Copy.

Back in your new blank Dreamweaver document, place the cursor on the page and choose Edit > Paste. The text will be pasted into your HTML document. As you can see, most of the formatting from the Word document has been lost, but some paragraphs and line breaks have been retained. What was a bulleted list in Word is now a kind of jury-rigged list in Dreamweaver using a special character for a bullet. Switch into Code view to take a look at the source code; you can see that a somewhat random mix of <p> and <br> tags have been used to format the text. This illustrates why it is usually preferable to use the other Dreamweaver option, Paste HTML, and do the formatting yourself, as you’ll see in just a moment.

At the bottom of the Dreamweaver Document window, in the Quick Tag Selector, click the <body> tag and press Delete on your keyboard. This will delete all the content you just added.

The copied text from the Word document is still in your Clipboard. Now choose Edit > Paste HTML. Your text will be pasted in again, but this time without the sketchy formatting.

Save your Dreamweaver document; you’ll return to it in Exercise 4.2.

Importing Text from Microsoft Word

You can copy and paste text from a Microsoft Word document as described in the preceding section. However, you might come across a Microsoft Word document that has elaborate formatting (such as charts and lists), which could mean hours of HTML coding for you. Instead of pasting the text and laboriously formatting it yourself, you can utilize some special features in both Word and Dreamweaver to save yourself time and produce a serviceable HTML document. First, use the Save as Web Page command in Microsoft Word (called Save as HTML in some versions of Word) and open the resulting HTML file in Dreamweaver.


You can open Word HTML inside Dreamweaver with the File > Open menu option.

Freshly imported into Dreamweaver, the code of a Word HTML document is full of extraneous markup. Take a close look at the code that appears at the top of Figure 4.5.

Figure 4.5. Microsoft Word HTML shown in Design and Code view.

The problem with using the Save as Web Page command in Microsoft Word is that Microsoft Word HTML is actually a mix of HTML and XML code. It also includes an abundance of CSS styles and countless <meta> tags, which significantly worsen the situation. The code in the upper window of Figure 4.4 is a far cry from the plain HTML you would write if coding by hand.

A Microsoft Word HTML file like the one in Figure 4.4 will usually look presentable in most web browsers, especially Microsoft Internet Explorer. As you’ve seen, however, the automatic conversion to HTML results in bloated and unwieldy code that is far from ideal simply due to its sheer size; it is also almost impossible to edit. If you have no need to edit the page in Dreamweaver or any other HTML editor, using the document as Microsoft Word produces it is an option.

If you want to be able to edit the Microsoft Word HTML file, however, you should use the Dreamweaver Clean Up Word HTML command first to remove extraneous code. Your cleaned-up document will be much closer to standard HTML, and it will be both easier and safer to make changes to it.

To use the Clean Up Word HTML command, open your Word HTML file inside Dreamweaver, and select Commands > Clean Up Word HTML.

Figure 4.6 shows the resulting window. The checked boxes inside this box indicate the Dreamweaver defaults.

Figure 4.6. The Clean Up Word HTML dialog box.

Inside this box you’ll find two tabs, Basic and Detailed. Click OK to simply accept the defaults and convert the HTML, or choose from among the Basic or Detailed options. For more information about the options under the Basic tab, take a look at Table 4.2.

Table 4.2. Clean Up Word HTML, Basic Options
Option Description
Remove All Word Specific Markup Removes all XML from HTML tags and other formatting specific to Microsoft Word.
Clean Up CSS Removes tags that refer to CSS, including inline CSS styles (as long as the parent style shares the same style properties). It also removes style attributes beginning with mso, and non-CSS-style descriptions. This is beneficial because Microsoft Word HTML relies heavily on CSS styles for formatting, most of them being document-level styles that increase page-loading time in the web browser.
Clean Up <font> Tags Removes the <font> HTML tags and converts the default body text to size 2.
Fix Invalidly Nested Tags Removes invalid <font> tags. Invalid <font> tags are those found in spotswhere the <font> tag shouldn’t be, according to the W3C. Specifically, these are the <font> tags outside the paragraph and heading (block-level) tags.
Set Background Color To use a hexadecimal value to set the background color of your document, enter it into the Text field box. Without a set background color, the document will have a gray background. By default, the background color is white, or #FFFFFF.
Apply Source Formatting Applies the source formatting options that you specified in your sourceformat.txt file. This file is located in your Configuration folder. (See Chapter 34, “Customizing Dreamweaver,” for more about setting your preferences.)
Show Log on Completion Check this box to see a log listing what changes have been made.

You can use the options in the Detailed tab to make even more changes to the conversion.

After you make your selections, click OK. Dreamweaver processes the file and a cleaned-up version of the page appears in the Document window.


If you find that your HTML code contains unwanted tags even after you clean up, try looking at your HTML Format preferences (from the main menu, choose Edit > Preferences and then choose Code Format) to make sure you have them set the way you want. Alternatively, you can run an advanced Find/Replace query to get rid of even more tags, or run the general Clean Up HTML command. See Chapter 33, “Writing Code in Dreamweaver,” for a full discussion of code rewriting, code formatting, and using Find/Replace for code cleanup.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint