Dreamweaver MX 2004 phần 3 doc

4306c05.qxd 3/22/04 11:31 PM Page 115 filling the news hole ■ 115 Filling the News Hole In the magazine business, the space between the ads and design elements on a printed page is sometimes referred to as the “news hole”—the place where you provide real content, in the form of words. The next chapter talks about managing the words on web pages. This page intentionally left blank 4306c06.qxd 3/22/04 11:33 PM Page 117 CHAPTER 6 Inserting and Formatting Text Content In the beginning, there was the word, but now we’ve got pulsating 3D graphics, animated screechfests, and shiny, beveled, squirmy navigation. But guess what, most— nearly all—of the information on the Web is in the form of plain old text. Yes, it helps if the design of the page is clean and the copy is well groomed. We’ll get to that. But in the excitement of interactive networked multimedia, don’t overlook the most powerful medium of them all: the written word. In this chapter, you’ll learn about the following topics: ■ Getting words onto pages ■ Importing copy from Word and Excel documents ■ Editing and proofreading copy ■ Designing with text (format and style), design, and style ■ Cleaning up HTML directly ■ Creating complex layouts by combining tables and layers 4306c06.qxd 3/22/04 11:33 PM Page 118 118 ■ chapter 6: Inserting and Formatting Text Content Getting Copy onto the Page Before you start inserting text willy-nilly, it helps to gather all your content assets together. As discussed in Chapter 2, “Web Pages Deconstructed,” you must try to gather together all of your text content (also known as copy) in advance of building your site. At the very least, put together a strict submission, edit, and review schedule with some padding so that you don’t hold up a launch because the copy isn’t ready. Chances are, you will have to manage copy coming from multiple sources. When this is the case, it can help if you establish what format you’d prefer to receive the copy in (such as Word documents, plain text, HTML files, and so on). Generally, it’s preferable to keep the source copy as plain as possible (although fairly standard ways of indicating emphasis, such as Italics and boldface, can usually survive the importing process) so you minimize the amount of inappropriate formatting or badly formed HTML tags you have to strip away when you go to clean up the copy. There are three main ways to get text content onto web pages in Dreamweaver: • Copy the text from the source document and paste it into the page in Dreamweaver. • Import the text from Microsoft Word. • Type the text directly. They’re all pretty easy. In fact, if you’re at all used to working with word processing programs, then you should find that most of the text-handling you’ll have to do feels very familiar. Inserting Text with Copy and Paste Copy and paste is not the most powerful method for getting text onto a page, but it’s extremely convenient, especially when the source text is not yet formatted (because Dreamweaver will only paste the plain text). The method should be utterly familiar to you already: 1. Select the text you want to copy in the source document. 2. Choose Edit ➔ Copy (or Ctrl-C/Command-C). 3. Switch to Dreamweaver by your preferred method of switching programs. 4. Position the insertion point where you want the pasted text to appear in the web page. 5. Choose Edit ➔ Paste Text. Figure 6.1 shows some pasted plain text. 4306c06.qxd 3/22/04 11:33 PM Page 119 getting copy onto the page ■ 119 Copy and Paste from Word Dreamweaver MX 2004 allows you to copy and paste directly from a Word document without saving it as HTML in Word. To preserve Word formatting, use Edit ➔ Paste For- matted. If you don’t want to preserve Word formatting, use Edit ➔ Paste Text. Would anyone ever need to keep Word’s flavor of HTML in a document? Sure! For example, intranet users who have standardized on Microsoft Office and use Internet Explorer, Word, PowerPoint, and so on, seamlessly together might be perfectly comfortable with Word’s non- compliant coding. It’s also useful if you want to, for example, display a page sample from a Word document on a web page, and preserve Word styles and formatting. Remember—the only way to preserve Word formatting is to use the new Paste Formatted command. You can also drag a Word document into a Dreamweaver page in Design view. The Insert Microsoft Word Or Excel Document dialog box appears (see Figure 6.2). Choose either Insert The Contents (if you want to paste the document to the current page) or Figure 6.1 Whether the source of the copied text is a Word document, a web page, or an e-mail message, it gets pasted in with- out any formatting. 4306c06.qxd 3/22/04 11:33 PM Page 120 120 ■ chapter 6: Inserting and Formatting Text Content Create A Link (to link to the Word file). Any Word formatting will not be preserved in the pasted document. If you drag a Word HTML file into a Dreamweaver page, it will auto- matically create a link to the HTML file. Microsoft has added Information Rights Management (IRM) to Word 2003 to allow document creators to restrict access to documents. An Internet Explorer (IE) feature is also available that allows visitors to view protected Word 2003 documents in IE if they have the appropriate permission. For more information, see www.microsoft.com/office/editions/prodinfo/ technologies/irm.mspx#XSLTsection128121120120. Importing Text and Tables You can open a variety of document types in Dreamweaver, even if the files were originally created in another application. You can open HTML files as well as text files such as style sheets, JavaScript, XML, or plain text. Dreamweaver also includes special commands for use with Microsoft Word and Excel documents. In addition to text documents and HTML files, Dreamweaver can also import tabular data, literally meaning information in tabular form (a table of rows and columns). That mainly means spreadsheet and database tables, which must be exported from their source applications using a standard text-with-delimiters format. But first, let’s talk about Word documents. Importing a Word Document The Windows version of Dreamweaver MX 2004 enables you to import Word documents directly without first saving them as HTML documents in Word. First, open a new file from the Start page (or File ➔ New), and then select File ➔ Import ➔ Word Document. The Word document will be pasted into your Dreamweaver file as plain text. The Mac version of Dreamweaver MX 2004 does not include the Import Word Document or the Import Excel Document commands. Figure 6.2 The Insert Microsoft To open a Word file without importing it, the Word file should be saved in Word as an Word Or Excel Docu- HTML file. (If you open a DOC file in Dreamweaver, the file displays with added garbage ment dialog box characters that you have to manually remove.) Word has a normal Save As command with which you can specify HTML format—the option is listed as Web Page (*.htm, *.html) in the Save As dialog box—and it also has a dedicated Save As Web Page format on the File menu. Simi- larly, you can open a Word HTML file in Dreamweaver the same way you open any document (use File ➔ Open, or Ctrl-O/Command-O). 4306c06.qxd 3/22/04 11:33 PM Page 121 getting copy onto the page ■ 121 Clean Up Word HTML Word HTML is messy and includes many tags that do not comply with standards. Open the Clean Up Word HTML dialog box (Command ➔ Clean Up Word HTML) to remove extra HTML code generated by Word (see Figure 6.3). Importing from Word in HTML format and then cleaning up the HTML might render the file illegible to Word, so make sure you have saved a copy of the original document before you clean up the HTML version. If you’re using Word 2003, however, you can still open the file in Word after a cleanup of the HTML in Dreamweaver. The options on this dialog box are on two tabs (Basic and Detailed); you might as well look at them all at least once. After the first time you clean up some Word HTML, the dia- log box uses your previous selections as the default. Be sure to select the version of Word the imported document was created in with the Clean Up HTML From drop-down list (the command is available for Word 97 or later Word documents). The basic choices clean up the majority of Word’s most egregious HTML output: Remove all Word-specific markup This option is self-explanatory. If it’s only in there to help Word display the document and it’s not real HTML, chuck it. Clean up CSS Takes out any redundant, unused, or nonstandard style declarations (more about Cascading Style Sheets [CSS] in Chapter 9). Clean up <font> tags Fixes Word’s habit of wrapping <font> tags around other tags. Fix invalidly nested tags Corrects tag entanglements that can render a design incorrectly in a strict browser. Set background color Reminds you that Word HTML documents will get a default gray background unless you set the background to White (#FFFFFF) or some other color. Apply source formatting Permits Dreamweaver to apply your specified Code Format preferences (Edit ➔ Prefer- ences ➔ Code Format). Show log on completion Gives you a detailed “receipt” of all the changes made, which are especially useful in case anything goes wrong with the cleanup. The choices on the Detailed tab differ depending on the version of Word from which you are importing. If the document was created in Word 97 (for Windows) or Figure 6.3 We generally use all of the available options unless we have a specific rea- son to preserve some Word-style HTML. 4306c06.qxd 3/22/04 11:33 PM Page 122 122 ■ chapter 6: Inserting and Formatting Text Content Word 98 (for the Mac), then the Detailed tab offers more choices about Word-specific markup and cleaning up <font> tags: • If you checked Remove All Word Specific Markup on the Basic tab, then the Remove Word Specific Markup check box and the Word Meta And Link Tags From <head> check box will both be checked on this tab. (If not, not.) The only variation besides having them both checked or both not is having the first checked and the second (relating to the <head> portion of the web page) not. • If you checked Clean Up <font> Tags on the Basic tab, then the same option will be checked on the Detailed tab, along with a set of mapping suggestions for Word’s use of font sizes 1 through 7. (Dreamweaver suggests turning size 7 into a first-level header, size 6 into a second-level header, and so on, but you can assign any size to any stan- dard HTML formatting tag. (More about HTML tags later in this chapter.) If the document was created in Word 2000/2002, then the Detailed tab offers different choices for Word-specific markup and some detailed choices about cleaning up CSS: • If you checked Remove All Word Specific Markup on the Basic tab, then Remove Word Specific Markup will appear checked here with five suboptions—XML From <html> Tag: Word Meta And Link Tags From <head>, As With Word 97/98; Word XML Markup; Word-Style Conditional Tags (of no use outside of Word); and Remove Empty Paragraphs And Margins From Styles. Unless you specifically know what you’re doing with one of these choices, leave them all checked! • If you checked Clean Up CSS on the Basic tab, then the same option will be checked here with five suboptions—Remove Inline CSS Styles When Possible; Remove Any Style Attribute That Starts With “mso”; Remove Any Non-CSS Style Declaration; Remove All CSS Styles From Table Rows And Cells, And Remove All Unused Style Definitions. Again, unless you’re a CSS maven, leave these checked. Dreamweaver does not yet include a Word 2003 option for Clean Up Word HTML. When you’re ready to clean up the imported page, click OK. Dreamweaver may take a while to crunch through the file if it’s complicated. When finished, Dreamweaver displays the changes. You can undo or redo a Clean Up Word HTML command, as needed. Using Excel Documents in Dreamweaver Dreamweaver MX 2004 allows you to copy and paste directly from an Excel document. To best preserve Excel formatting, use Edit ➔ Paste Formatted. If you don’t want to preserve Excel formatting, use Edit ➔ Paste Text to paste unformatted plain text. For an intermediate 4306c06.qxd 3/22/04 11:33 PM Page 123 getting copy onto the page ■ 123 choice, choose Edit ➔ Paste; this creates an HTML table, but the formatting is not as close to the original as in the Paste Formatted command. See Figure 6.4 for a comparison between the Paste and Paste Formatted options for Excel. You can also drag an Excel document into a Dreamweaver page in Design view. The Insert Microsoft Word or Excel Document dialog box appears (see Figure 6.2). Choose either Insert The Contents (if you want to paste the document to the current page) or Create A Link (to link to the Excel file). The inserted contents display the same as in the Edit ➔ Paste option discussed in the previous paragraph. Dreamweaver MX 2004 enables you to import Excel documents directly, in .xls format, and converts this to HTML out- put. Select File ➔ Import ➔ Excel Document. The HTML representation of the Excel docu- ment is the same as that for the Edit ➔ Paste option. Importing Tabular Data If you need to import a portion of a non-Excel spreadsheet or a database table, you must first export or save the source data as a tab-delimited text file. Delimiter is a computer- science word meaning something that indicates the limit of a field entry—the database equivalent of punctuation. A tab-delimited file separates each field in a record (or cell in a row) from the other fields (cells) using the tab character (or ASCII character 9, for obscu- rantists). Dreamweaver will actually support any delimiter character you want, but tab is often the only choice that Dreamweaver supports correctly. You can also use this option for Excel files if you export them from Excel as tab-delimited text files. Figure 6.5 shows the Excel file from Figure 6.4 after import to Dreamweaver as a tab- delimited text file. In most spreadsheet and database programs, you do this by selecting File ➔ Save As, and then choosing an option along the lines of “Text (Tab Delimited File).” Pick a filename, save it, and as always, note where you are saving the file. [...]... that appears, first decide the scope of your search Dreamweaver MX 2004 has added additional options to the Find In drop-down menu Your choices are: Current Document searches the currently active document Open Documents searches all currently open documents Entire Current Local Site searches all files in the current site, including library items and text documents Selected Files in Site searches files... chapter See Chapter 35 , “Using Dreamweaver to Make Your Site Acces­ sible” for more information on using accessi­ bility features in Dreamweaver Figure 7.2 A web page with three frames that actually contains four separate documents—one for each frame and one for the frameset page Framing Your Layout For many designers, the first step is to draw your frameset on paper before you start to use Dreamweaver That... with style sheets, which by now you should know will be discussed in Chapter 9! ■ 135 136 ■ chapter 6: Inserting and Formatting Text Content There’s an old HTML tag called that is used to indicate, well, an address, and is usually rendered as Italic Dreamweaver doesn’t directly support it, but it knows about it (Dreamweaver also displays it as Italic if you insert it) The only way to apply this... and so on), but they are most stable and effective across platforms as a text-formatting solution Be sure to check out Chapter 9 to learn about all the new CSS features in Dreamweaver MX 2004, and to learn how to work with CSS in Dreamweaver CSS represents one direction of the future in web design Graphical Text If you want total control over the appearance of text (as you sometimes might when you are... number ranging from 1 to 7 (with 3 being the default), or you can choose a size change, either ranging from –7 to –1 or from +1 to +7 How the exact size or size change is rendered depends on the browser and varies from one platform to the next The Size drop-down menu includes all of these options Choose one to apply it to the selected text FULL UNICODE SUPPORT Dreamweaver MX 2004 offers full Unicode support,... or heading tag, or by wrapping a (divider) tag containing the correct align= attribute around the selection ■ 131 132 ■ chapter 6: Inserting and Formatting Text Content • Structural tags that have been unofficially associated with certain text effects For example, there’s the way Dreamweaver uses the tag to produce indenta­ tion effects—this does not comply with the spirit of HTML... thingies on the tips of the letters.”) The Property inspector offers a few lists of commonly available fonts: • Arial, Helvetica, sans-serif • Times New Roman, Times, serif • Courier New, Courier, mono ■ 133 134 ■ chapter 6: Inserting and Formatting Text Content • Georgia, Times New Roman, Times, serif • Verdana, Arial, Helvetica, sans-serif • Geneva, Arial, Helvetica, sans-serif To choose one, click the... drop a selection As with other word-processing tasks, it doesn’t make sense to do too much text editing in Dreamweaver, but for spot corrections here and there it’s a breeze Spell Checking To check the spelling of a document (or a selection), select Text ➔ Check Spelling (or press Shift-F7) If Dreamweaver finds any questionable spellings, it will bring up the Check Spelling dialog box (if not, it will... Text Content Figure 6.4 Dreamweaver s new Paste Formatted option preserves the Excel format The Paste option creates an HTML table, but most of the original formatting is not preserved Back in Dreamweaver, select File ➔ Import ➔ Import Tabular Data (or choose the Tabu­ lar Data button on the Layout Insert bar to bring up this dialog box.) Click the Browse button and find the text document you just saved... the sublist and click the text indent button Dreamweaver will indent the sublist and—for bullets—change the graphical element to indicate another layer down (such as using hollow bullets instead of solid ones for these items) Alignment Dreamweaver handles alignment in a way that’s smart and compliant with HTML stan­ dards If the selection is a paragraph, Dreamweaver adds the alignment information to . plain text. 430 6c06.qxd 3/ 22/04 11 :33 PM Page 119 getting copy onto the page ■ 119 Copy and Paste from Word Dreamweaver MX 2004 allows you to copy and paste directly from a Word document without. Word Document. The Word document will be pasted into your Dreamweaver file as plain text. The Mac version of Dreamweaver MX 2004 does not include the Import Word Document or the Import Excel Document. include the following: Strikethrough Not universally supported. 430 6c06.qxd 3/ 22/04 11 :33 PM Page 133 formatting text ■ 133 Teletype Traditionally used for monospaced characters. Emphasis