Working Smart: Bringing in Text from Other Programs

[ LiB ]

If the text you need in your page already exists in another program, or if you just prefer typing in another program, you need to get that text into Dreamweaver efficiently . Fortunately, there are several mechanisms for doing this.

The Ins and Outs of Copying and Pasting

You can easily bring text into Dreamweaver by copying and pasting from other programs. But life will be much easier if you're smart about doing this. After you've copied your text to the Clipboard from another program, you have your choice of three commands for bringing it into Dreamweaver: Edit > Paste, Edit > Paste Text, and Edit > Paste HTML. There are also two matching commands for copying: Edit > Copy and Edit > Copy HTML. What's the difference?

Working with Word? The rules are different. See the section "Importing Text from Microsoft Word," later in this chapter, for information on this.

The Paste Command

If you're in Design view, Edit > Paste or Edit > Paste Text turns whatever text is on the Clipboard into text in your Dreamweaver document. All formatting is lost. Paragraph breaks are converted to br tags. No other HTML tags are added. Dreamweaver converts any special characters that it recognizesthings such as apostrophes , quotes, dashes, copyright symbols, and so forthfrom the system-specific coding that word processors employ to generic HTML entities. (HTML entities are discussed in depth later in this chapter.)

If you're in Code view, Edit > Paste strips all formatting from the text on the Clipboard and puts that text wherever the insertion point is in your document, with no conversion of special characters. So, for instance, if the text on your Clipboard contains this:

 <b>Howdy there, fellas.</b> 

using Edit > Paste from Design view will actually paste the following into your code at the insertion point:

 <b>Howdy there, fellas.</b> 

The angle brackets will show up in the browser, and the text won't be bold. Using Edit > Paste from Code view with the same Clipboard contents, that code will be put unaltered into your HTML source code, and in a browser it will display like this:

  Howdy there, fellas  . 

The Paste HTML Command

How does the Paste HTML command fit in? If you're in Design view and choose Edit > Paste HTML, it has the same effect as if you had switched to Code view and chosen Edit > Paste. In other words, it pastes your text unaltered into the source code of your document. All formatting, including line and paragraph breaks, is stripped out, and no special characters are converted.

If you're in Code view, the Paste HTML command is not available.

Copying vs. Copying HTML

The same principles work in reverse for when you need to get text or HTML code out of Dreamweaver. If you're in Design view and choose Edit > Copy, you'll put the visible text that you have selected on the Clipboard. If you're in Design view and choose Edit > Copy HTML, or if you're in Code view and choose Edit > Copy, you'll put the actual HTML source code for your selection, including page text, on the Clipboard.

Getting Text (and More) from Word and Excel

For all you Microsoft Office users out there, your web development life just got a lot easier. New to Dreamweaver MX 2004, you can easily and quickly bring even complex content into Dreamweaver from Word and Excel documents while preserving most of their formatting and creating decent HTML code.

Copying and Pasting

Copy anything in a Word or Excel documenttext, tables, picturesand paste it into Dreamweaver Design view using Edit > Paste or Edit > Paste Text. That's all there is to it! The pasted content comes in nicely formatted and structured.

Text Formatting

Copied and pasted paragraphs from Word come in as proper paragraphs, not text separated by line breaks. Word's Normal text style is turned into a CSS class called MsoNormal , which is tucked into an internal style sheet for the Dreamweaver document. Paragraphs that have been assigned Word's heading styles (Heading 1, Heading 2, and so on) come in as HTML heading tags ( h1 , h2 , and so on), with additional inline styles to convey formatting. Text like this, brought in from Word:

Chapter 1

It was a dark and stormy night .

gets turned into the following style declaration in your document's head:

 <style type="text/css"> <!-- p.MsoNormal { margin:0in; margin-bottom:.0001pt; font-size:12.0pt; font-family:"Times New Roman"; } --> </style> 

and the following code in the document body (where your insertion point was when you pasted):

 <h1><span style="font-family:Arial;font-size:16.0pt;">Chapter  1</span></h1> <p class="MsoNormal">It was a dark and stormy night.</p> 

Tables

Tables pasted from Word and spreadsheets pasted from Excel come into Dreamweaver translated into HTML tables that preserve the formatting of the original through the use of CSS classes, like this:

 <table class="MacTableGrid"> <tr> <td width="118" valign="top">  <p class="MacNormal">State</p></td> <td width="118" valign="top">  <p class="MacNormal">Capital</p></td> </tr> 

Figure 4.2 a shows a portion of an Excel spreadsheet as it appears when pasted into Dreamweaver.

Figure 4.2. An Excel document before and after pasting into Dreamweaver.

Importing Word and Excel Documents (Windows Only)

The copy-and-paste method works well for bringing in chunks of content. But if you're working in Windows, you can more efficiently turn an entire Word or Excel document into HTML with Dreamweaver's import commands. Do it this way:

1. Create or open a Dreamweaver document to import into.
   
   
2. Switch to Design view (the commands don't work from within Code view).
   
   
3. Choose File > Import > Word Document or File > Import > Excel Document. Browse to choose the file to import, and click OK to close the dialog box.
   
   

There's your nicely formatted HTML content!

Remember, though, that Word documents can sometimes be long (tens or hundreds of pages), and web pages shouldn't be that long. To bring a long Word document into Dreamweaver, break it up into a sequence of documents and import each separately, or select parts of the document at a time and use the copy-and-paste method to put each segment into a separate HTML document. In Dreamweaver, you'll need to add links to the HTML pages you create if you want them function as a unit.

Working with Word HTML

Microsoft Word can also create its own HTML using its Save as Web Page or Save as HTML command. Unfortunately, Word doesn't generate the nicest HTML (see Figure 4.3 for a sample). The code it puts in your document is a mix of HTML and XML code, with an abundance of font tags or CSS styles and countless meta tags. It bloats the file, slows download and browser parsing, and makes further editing really painful. Yuck!

Figure 4.3. HTML code generated by Microsoft Word, as viewed in Dreamweaver Code and Design view.

If you have the choice, you'll get better results if you let Dreamweaver do the HTML generating, using the copy-and-paste or import methods discussed earlier in this section. But you might not have control over this part of the development process. How do you make the best of your Word-generated HTML? By carefully setting your options in Microsoft Word before exporting and by using Dreamweaver features to tidy things up afterward.

Getting Ready in Word

You can do several things in Microsoft Word to get the cleanest, most web-friendly code possible from it.

First, make sure the code-creation options are set efficiently. Depending on your version of Word, you might find these options in different places. But the settings you should look for and set are as follows :

• Set your target browsers to more than just Internet Explorer. A fairly safe choice is Internet Explorer 4.0 or Netscape Navigator 4.0. Disable all features not supported by these browsers.

• Use CSS for font formatting. (This avoids having numerous font tags throughout the document.)

• Don't allow PNG as a graphics format.

• Set the encoding to Unicode or Western European (ISO). This is especially important because, by default, Word chooses to encode pages according to the platform you're on. Your special characters end up in a Windows-specific or Mac-specific format that could cause problems for browsers.

• If your document includes graphics, make sure the default resolution is something reasonable, such as 72 or 96.

In Word XP, choose Tools > Options. In the dialog box that appears, bring the General tab to the front and click the Web Options button. In Word X for Mac, choose Word > Preferences > General. In the dialog box that appears, bring the General tab to the front and click the Web Options button.

Next, depending on your version of Word, choose File > Save as Web Page, or File > Save as HTML, or File > Save, and use the Save dialog box to choose one of the web formats. However you get here, you'll have two basic choices: to save the complete contents of the file as a web page or to save a filtered or display-only version of the file. What's the difference? If you save the complete contents, Word includes all sorts of code so that at some time in the future you will be able to reimport the HTML document into Word. That puts a lot of extra junk in there. Unless you really want this ability, choose the filtered or display-only option.

Cleaning Up in Dreamweaver

In Dreamweaver, open the Word-generated HTML as you would any other HTML document. Then choose Commands > Clean Up Word HTML. You are presented with the Clean Up Word HTML dialog box (see Figure 4.4). Table 4.3 lists the clean-up options you have for tidying things up.

Figure 4.4. The Clean Up Word HTML dialog box.

Table 4.3. 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 spots where 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 28, "Customizing and Extending 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 specify exactly what changes are included in 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.

Even after you've cleaned up, you may find unwanted tags or attributes in your code. In particular, an internal style sheet might exist, containing one or more classes called Section1 , Section2 , and so on. These classes are applied to div tags surrounding the body contents. And throughout the entire page, you might find numerous elements that have been assigned the Normal class, even though that class is not defined internally or in a linked style sheet. A little fancy finding and replacing can get rid of these items. Do it like this:

1. Open the Find and Replace dialog box (Edit > Find and Replace).
   
   
2. Set the search scope to Document.
   
   
3. To remove the div tags, set the search type to Specific Tag. In the Search For area, enter div as the tag to remove, and press the button to remove any other search criteria. From the Action drop-down menu, choose Strip Tag. This removes the div tags without deleting any of their contents. Figure 4.5 shows what the Find and Replace dialog box should look like with these settings in place. Click Replace All to complete the search.
   
   

   Figure 4.5. The Find and Replace dialog box, ready to strip all div tags from the current document.

   

   
   

4. To remove the Normal class assignments, set the search type to Source Code. In the Search For field, enter class="Normal" . Leave the Replace With field empty. Figure 4.6 shows the dialog box with these settings in place. Click Replace All to complete the search.
   
   

   Figure 4.6. The Find and Replace dialog box, ready to strip all instances of the Normal class from the current document.

   

   
   

5. When you're done, close the Find and Replace dialog box.
   
   

To remove the internal style sheet, you can perform another Specific Tag search, or you can open the CSS Styles panel (Window > CSS Styles), select all internal styles, and click the trash can icon at the bottom of the panel.

For more information about finding and replacing, see the section "Advanced Find and Replace" in Chapter 27, "Writing Code in Dreamweaver."

Tabular Data

Tabular data is text that's already in a tabledata from a spreadsheet, for example, or a table in your word-processing program or from a database. To display that data on a web page, you need it in an HTML table. Although many of these programs can export HTML for you, it's generally not very clean HTML. If your table exists in Microsoft Word or Excel, of course, you can just copy and paste it into Dreamweaver, as described earlier in this chapter. If your table exists in any other program, your best bet for getting it easily and cleanly into Dreamweaver is using the Import Tabular Data command. Here's how it works:

1. In the originating program (a spreadsheet, for example), save or export in a delimited format. This means that the program creates a text file in which some characterusually a comma or tabseparates the contents of each cell , and a return indicates the end of a row.
   
   
2. In Dreamweaver, open a document and place the insertion point where you want the tabular data to appear. Choose the Tabular Data object from the Layout Insert bar, or choose File > Import > Tabular Data, or Insert > Table Objects > Import Tabular Data. A dialog box appears (see Figure 4.7) in which you select the text file to import, specify what the delimiting character is, and assign any table-formatting characteristics you like. (You can always change these later using the Property Inspector, so it's not crucial to get them exactly as you want them here.) When you click OK, Dreamweaver creates a new table containing the text from the file, split into cells and rows based on the delimiter . Figure 4.8 shows this happening.
   
   

   Figure 4.7. The Import Tabular Data dialog box.

   

   
   

   Figure 4.8. Importing data from a spreadsheet into Dreamweaver.

   

   
   

After Dreamweaver builds the table containing your imported data, it behaves like any other table, as if you had constructed and populated it here in Dreamweaver. There's no dynamic link to the text file you imported, so nothing bad will happen if you delete or move that file.

One word of warning, however: The Import Tabular Data command doesn't recognize merged cells. If your original spreadsheet or table contained any of these, the table that Dreamweaver creates will be incorrectly structured (see Figure 4.9). To fix this problem, you'll have to manually add rowspan or colspan values to the problem cells. To fix the table shown in Figure 4.9, for instance, select the cell in the top row and use the Tag Inspector, Quick Tag Editor, or Code view to assign a colspan of 3 .

Figure 4.9. A spreadsheet document with merged cells creates an incorrectly structured table in Dreamweaver.

[ LiB ]