Dreamweaver MX 2004 Bible phần 4 ppt

326 Part II ✦ Web Design and Layout Fundamentals how can you use that particular string in the Replace With field? For example, the following list of names: ✦ John Jacob Jingleheimer Schmidt ✦ James T. Kirk ✦ Cara Fishman can be rearranged so that the last name is first, separated by a comma, like this: ✦ Schmidt, John Jacob Jingleheimer ✦ Kirk, James T. ✦ Fishman, Cara Dreamweaver enables replacement of regular expressions through grouping expressions. Grouping is perhaps the single most powerful concept in regular expressions. With it, any matched text pattern is easily manipulated. To group a text pattern, enclose it in parentheses in the Find text field. Regular expressions can manage up to nine grouped patterns. In the Replace text field, each grouped pattern is designated by a dollar sign ($) in front of a number (1–9) that indicates the position of the group. For example, enter $3 in the Replace With box to represent the third grouped pattern in the Find box. Remember that the dollar sign is also used after a character or pattern to indicate the last character in a line in a Find expression. Table 8-7 shows how regular expressions use grouping. Table 8-7: Regular Expressions Grouping Character Matches Example (p) Any pattern p (\b\w*)\.(\w*\b) matches two patterns, the first before (entered in the a period and the second, after, such as in a filename with Find In box) an extension. The backslash before the period escapes it so that it is not interpreted as a regular expression. $1, $2 . . . $9 The nth pattern If the Search field contains the pattern (\b\w*)\.(\w*\b), (entered in the noted with and the Replace With field contains the pattern $1’s Replace With box) parentheses extension is “.$2”, Chapter09.txt would be replaced with Chapter09’s extension is “.txt”. Controlling Whitespace Whitespace refers to any portion of the page that doesn’t contain text, images, or other objects. It includes the space between words and the space above and below paragraphs. This section introduces ways to adjust paragraph margins and the spacing between paragraphs. Caution 543504 ch08.qxd 12/10/03 10:28 PM Page 326 327 Chapter 8 ✦ Working with Text Indenting text In Dreamweaver, you cannot indent text as you do with a word processor. Tabs normally have no effect in HTML. One method to indent a paragraph’s first line uses nonbreaking spaces, which can be inserted with the keyboard shortcut Ctrl+Shift+Spacebar (Command+Shift+ Spacebar). Nonbreaking spaces are an essential part of any Web designer’s palette because they provide single-character spacing— often necessary to nudge an image or other object into alignment. You’ve already seen the code for a nonbreaking space — &nbsp; — that Dreamweaver inserts between the <p> </p> tag pair to make the line visible. You can optionally configure Dreamweaver to insert nonbreaking spaces in situations where it would normally ignore the spaces that you type. For example, whenever you type more than one space in a row or when you enter a space at the beginning of a paragraph, HTML, and therefore Dreamweaver, ignores the space. However, if you choose Edit ➪Preferences (Dreamweaver➪ Preferences) and select the Allow Multiple Consecutive Spaces option in the General category, Dreamweaver inserts nonbreaking spaces automatically as you type. If you find yourself inserting nonbreaking spaces frequently, enabling this option speeds up your work. Use care when enabling this feature, however. If you are used to having extra spaces ignored, you may inadvertently add undesired spaces within your text. If you normally create paper documentation, you may be used to adding two spaces between sentences. For online documentation, use only a single space after a period. Adding two spaces not only goes against the norm, it’s more work and can increase your file size by inserting all those extra nonbreaking spaces! Dreamweaver offers other methods for inserting a nonbreaking space. You can enter its char- acter code — &nbsp; — directly into the HTML code or you can use the Nonbreaking Space button in the Characters menu in the Text category of the Insert bar. You can also style your text as preformatted; this technique is discussed later in this chapter. Cascading Style Sheets offer another method for indenting the first line of a paragraph. You can set an existing HTML tag, such as <p>, to any indent amount using the Text Indent option found on the Block panel of the Style Sheet dialog box. You can find a full discussion of text indent and other style sheet controls in Chapter 7. Working with preformatted text Browsers ignore formatting niceties considered irrelevant to page content: tabs, extra line feeds, indents, and added whitespace. You can force browsers to read all the text, including whitespace, exactly as you have entered it by applying the preformatted tag pair <pre> </pre>. This tag pair directs the browser to keep any additional whitespace encountered within the text. By default, the <pre> </pre> tag pair also renders its content with a monospacefont such as Courier. For these reasons, the <pre> </pre> tag pair was used to lay out text in columns in the early days of HTML before tables were widely available. You can apply the preformatted tag through the Property inspector, the Insert bar, or the menus. Regardless of the technique for inserting preformatted text, it is easiest to work in Code and Design views — applying changes in Code view and seeing the result in Design view. Select the text, or position the cursor where you want the preformatted text to begin; then use one of these methods to insert the <pre> </pre> tags: Tip Tip 543504 ch08.qxd 12/10/03 10:28 PM Page 327 328 Part II ✦ Web Design and Layout Fundamentals ✦ In the Property inspector, open the Format list box and choose Preformatted. ✦ On the Insert bar, choose the Text category and then click the Preformatted Text button. ✦ Choose Text➪ Paragraph Format ➪ Preformatted Text. ✦ Choose Insert ➪ HTML ➪ Text Objects ➪ Preformatted Text. The <pre> tag is a block element format, like the paragraph or the headings tags, rather than a style. This designation as a block element format has two important implications. First, you can’t apply the <pre> </pre> tag pair to part of a line; when you use this tag pair, the entire paragraph is altered. Second, you can apply styles to preformatted text— this enables you to increase the size or alter the font, but at the same time maintain the whitespace fea- ture made possible with the <pre> tag. All text in Figure 8-10 uses the <pre> tag; the column on the left is the standard output with a monospace font; the column on the right uses a dif- ferent font in a larger size. Figure 8-10: Preformatted text gives you full control over the line breaks, tabs, and other whitespace in your Web page. The <br> tag Just like headings, the paragraph tag falls into the class of HTML objects called block ele- ments. As such, any text marked with the <p> </p> tag pair is always rendered with an extra line above and below the text. To have a series of blank lines appear one after the other, use the break tag <br>. 543504 ch08.qxd 12/10/03 10:28 PM Page 328 329 Chapter 8 ✦ Working with Text In XHTML documents, the break tag is coded as <br />. Dreamweaver inserts the correct tag based on the document type. Break tags are used within block elements, such as headings and paragraphs, to provide a line break where the <br> is inserted. Dreamweaver provides two ways to insert a <br> tag: Choose the Line Break button from the Characters menu in the Text category of the Insert bar, or use the keyboard shortcut Shift+Enter (Shift+Return). Figure 8-11 demonstrates the effect of the <br> tag. The menu items in Column A on the left are the result of using the <br> tag within a paragraph. In Column B on the right, paragraph tags alone are used. The <h1> heading is also split at the top with a break tag to avoid the insertion of an unwanted line. Figure 8-11: Break tags, denoted by shield symbols, wrap your lines without the additional line spacing created by <p> tags. You can enable Dreamweaver to mark <br> tags with a symbol: a gold shield with the letters BR and the standard Enter/Return symbol. To make the break symbol visible, you must first choose Edit ➪ Preferences (Dreamweaver ➪ Preferences) and select the Line Breaks checkbox in the Invisible Elements category. Then show invisible elements by choosing View ➪ Visual Aids ➪ Invisible Elements. Line Break Symbol Note 543504 ch08.qxd 12/10/03 10:28 PM Page 329 330 Part II ✦ Web Design and Layout Fundamentals Working with Microsoft Office Documents The ubiquitous nature of Microsoft Office has intricately tied Word and Excel to the Web. Quite often, content stored in documents from these programs must be integrated into a Web page. Putting a meeting agenda drafted in Word or a production schedule laid out in Excel on the Web are just some of the tasks faced — and dreaded — by office personnel every day. Dreamweaver provides a number of features to ease the transition from offline Office docu- ments to online content. Copying and pasting Office content The transparent transformation of material copied from Word and Excel has been greatly improved in Dreamweaver MX 2004. Previously, the only way to get formatted content from Word was to use Microsoft’s export to HTML feature and then import the exported page into Dreamweaver to clean up the poorly generated HTML. (Excel wasn’t even an option.) As dis- cussed in the following section, this process is still available to you, but now Dreamweaver has a better way when dealing with portions of a document — and it’s as simple as copy and paste. Dreamweaver automatically converts material copied from Word and Excel into clean HTML. The procedure is truly transparent: Simply copy your content in either Word or Excel using the standard copy or cut commands, switch to Dreamweaver, and paste by choosing Edit ➪ Paste or the standard keyboard shortcut Ctrl+V (Command+V). New Feature Overcoming Line-Spacing Difficulties Line spacing is a major issue and a common problem for Web designers. A design often calls for lines to be tightly spaced, but also to be of various sizes. If you use the break tag to separate your lines, you get the tight spacing required, but you won’t be able to make each line a differ- ent heading size. As far as HTML and your browser are concerned, the text is still one block ele- ment, no matter how many line breaks are inserted. If, on the other hand, you make each line a separate paragraph or heading, the line spacing is unattractively open. You can use one of several workarounds for this problem. First, if you’re using line breaks, you can alter the size of each line by selecting it and choosing a different font size, either from the Property inspector or the Text ➪ Size menu. A second option renders all the text as a graphics object and inserts it as an image. This gives you total control over the font’s appearance and line spacing, at the cost of added download time. For a third possible solution, look at the section on preformatted text in this chapter. Because you can apply styles to a preformatted text block (which can include line breaks and extra white- space), you can alter the size, color, and font of each line, if necessary. Ultimately, the best solution is to use Cascading Style Sheets (CSS). The majority of browsers now in use support line spacing through CSS; however, if 3.0 browser compatibility is a site requirement, use one of the other methods outlined here. 543504 ch08.qxd 12/10/03 10:28 PM Page 330 331 Chapter 8 ✦ Working with Text Because Dreamweaver is actually converting material from one format to another, you may experience a short delay after pasting. If a great deal of conversion is needed — the more heavily the original content is formatted, the more conversion is required— Dreamweaver displays an alert to let you know that the operation might take some time and giving you the option to cancel. Dreamweaver tends to add an additional space when pasting text that is bolded or other- wise formatted. For example, when copying a phrase like the bold manner, Dreamweaver pastes the <strong>bold </strong> manner; notice the extra space before the clos- ing </strong> tag. Currently, the only solution is to use Find and Replace to remove the unwanted spaces. Dragging and dropping Word and Excel files Not all Office documents are appropriate for converting to HTML. In some situations, it’s best to leave the document in the original format and link to it from the Web page. Intranets — where access to Word or Excel is practically guaranteed and lengthy documents are the norm — are prime candidates for this type of design decision. Dreamweaver offers an easy way make Office files Web accessible and gives you the option to use it as you see fit. You’ve seen how a copy and paste operation from Word and/or Excel is relatively seamless. That’s fine for material on the clipboard, but what about entire documents? Dreamweaver permits such Microsoft Office documents to be dragged and dropped right onto the page. What happens next for Windows users depends on the settings in Preferences. In the Office Copy/Paste category, you have three options: insert the content, create a link, or ask each time (the default). On the Macintosh, a link is always created. If the default option remains selected, when an Office document is dragged onto the Web page (whether from the Files panel or the desktop), the Insert Microsoft Word or Office Document dialog box appears, as shown in Figure 8-12. If you opt to insert the file, Dreamweaver auto- matically converts the document. When you choose to create a link, a text link to the file is inserted. Figure 8-12: Drag and drop Office files wherever you’d like the converted document or link to appear. Importing Word HTML Microsoft Word has offered an option to save its documents as HTML since the release of Word 97. Unfortunately, Microsoft’s version of HTML output is, at best, highly idiosyncratic. Although you could always open a Word HTML file in Dreamweaver, if you ever had to modify New Feature Caution 543504 ch08.qxd 12/10/03 10:28 PM Page 331 332 Part II ✦ Web Design and Layout Fundamentals the page — which you almost always do — it took so long to find your way through the convo- luted code that you were almost better off building the page from scratch. Fortunately, that’s no longer the case with Dreamweaver. Another reason to import an HTML file exported from Word, rather than just directly opening and editing it in Dreamweaver, is file size. Results vary, but importing a Word HTML docu- ment can reduce its size by half, or even more. The capability to import Word HTML is a key workflow enhancement for Dreamweaver. Dreamweaver can successfully import and automatically clean up files from Microsoft Word 97, Word 98, Word 2000, or Word 2002. The cleanup takes place automatically upon import, but you can also fine-tune the modifications that Dreamweaver makes to the file. Moreover, you can even apply the current Code Format profile from Preferences so that the HTML is styled to look like native Dreamweaver code. Naturally, before you can import a Word HTML file, you must create one. To export a docu- ment in HTML format in Word 97/98, you choose File ➪ Save as HTML; in Word 2000/2002, the command has changed to File ➪ Save as Web Page. Although the wording change may seem to be a move toward less jargon, it’s significant what Word actually exports. Starting with Word 2000 (and all the Office 2000 products), Microsoft heartily embraced the XML standard and uses a combination of standard HTML and custom XML code throughout its exported Web pages. For example, here’s the opening tag from a Word 2000 document, saved as a Web page: <html xmlns:o=”urn:schemas-microsoft-com:office:office” xmlns:w=”urn:schemas-microsoft-com:office:word” xmlns:dt=”uuid:C2F41010-65B3-11d1-A29F-00AA00C14882” xmlns=”http://www.w3.org/TR/REC-html40”> Dreamweaver alters the preceding code to <html> If you accept the defaults, importing a Word HTML file is a two-step affair: 1. Choose File ➪ Open. When the Select File dialog box opens, navigate and select the file that you exported from Word. 2. Choose Commands ➪ Clean Up Word HTML. Dreamweaver detects whether the HTML file was exported from Word 97/98 or 2000/2002 and changes the interface options accordingly. Documents exported from Word 2003 display the 2000/2002 interface. If Dreamweaver can’t determine what version of Word generated the file, an alert appears. Although Dreamweaver still tries to clean up the code, it may not function correctly. The same alert appears if you inadvertently select a standard non-HTML Word document. 3. Select options as desired and click OK to confirm the import operation. Dreamweaver cleans up the code according to the options you’ve selected; for large documents, you may have to wait a noticeable amount of time for this operation to complete. If the Show Log On Completion option is selected, Dreamweaver informs you of the modifica- tions made. Caution Tip 543504 ch08.qxd 12/10/03 10:28 PM Page 332 333 Chapter 8 ✦ Working with Text For most purposes, accepting the defaults is the best way to quickly bring in your Word HTML files. However, because Web designers have a wide range of code requirements, Dreamweaver provides a full set of options for tailoring the Word-to-Dreamweaver transfor- mation to your liking. Two different sets of options exist: one for documents saved from Word 97/98 and one for those saved from Word 2000/2002. The different sets of options can be seen on the Detailed tab of the Import Word HTML dialog box; the Basic tab is the same for both file types. Table 8-8 details the Basic tab options, the Word 97/98 options, and the Word 2000/2002 options. Table 8-8: Import Word HTML Options Option Description Basic Remove all Word specific markup Deletes all Word-specific tags, including Word XML, conditional tags, empty paragraphs, and margins in <style> tags Clean up CSS Deletes Word-specific CSS code, including inline CSS styles where styles are nested, Microsoft Office (mso) designated styles, non-CSS style declarations, CSS style attributes from tables, and orphaned (unused) style definitions Clean up <font> tags Deletes <font> tags that set the default body text to an absolute font size Fix invalidly nested tags Deletes tags surrounding paragraph and block-level tags Set background color Adds a background color to the page. Word normally doesn’t supply one. The default added color is white (#ffffff). Colors can be entered as hexadecimal triplets with a leading hash mark or as valid color names, such as red. Dreamweaver sets the background color by adding the bgcolor attribute to the <body> tag. If you do not have to support older browsers, you may, instead, wish to assign a background color using Cascading Style Sheets, described in Chapter 7. Apply source formatting Formats the imported code according to the guidelines of the current Code Format profile set in Preferences Show log on completion Displays a dialog box that lists all alterations when the process is complete Detailed Options for Word 97/98 Remove Word specific markup Enables the general clean-up of Word-inserted tags Word meta and link tags from <head> Specifically enables Dreamweaver to remove Word-specific <meta> and <link> tags from the <head> section of a document Clean up <font> tags Enables the general clean-up of <font> tags Continued 543504 ch08.qxd 12/10/03 10:28 PM Page 333 334 Part II ✦ Web Design and Layout Fundamentals Table 8-8 (continued) Option Description Detailed Options for Word 97/98 Convert size [7-1] to Specifies which tag, if any, is substituted for a <font size=n> tag. Options are * <h1> through <h6> * <font size=1> through <font size=7> * Default size * Don’t change Detailed Options for Word 2000/2002 Remove Word specific markup Enables the general clean-up of Word-inserted tags XML from <html> tag Deletes the Word-generated XML from the <html> tag Word meta and link tags from <head> Specifically enables Dreamweaver to remove Word-specific <meta> and <link> tags from the <head> section of a document Word XML markup Enables the general clean-up of Word-inserted XML tags <![if ]><![endif]> conditional tags Removes all conditional statements and their contents Remove empty paragraphs and Deletes <p> tags without a closing </p>, empty <p></p> margins from styles pairs, and styles tags including margin attributes — for example, style=’margin-top:0in’ Clean up CSS Enables the general clean-up of Word-inserted CSS tags Remove inline CSS styles when Deletes redundant information in nested styles possible Remove any style attribute that Eliminates Microsoft Office (mso) specific attributes starts with “mso” Remove any non-CSS style declaration Deletes nonstandard style declarations Remove all CSS styles from table Eliminates style information from <table>, <tr>, and rows and cells <td> tags Remove all unused style definitions Deletes any declared styles that are not referenced in the page You don’t have to remember to run the Import Word HTML command to take advantage of Dreamweaver’s clean-up features. If you’ve already opened a document saved as Word HTML, choose Commands ➪ Clean Up Word HTML to gain access to the exact same dialog box for the existing page. 543504 ch08.qxd 12/10/03 10:28 PM Page 334 [...]... date format from the drop-down list The example formats are as follows: March 7, 19 74 7./03/7 .4 07.-Mar-19 74 07.03.19 74 7.-mar-7 .4 07.03. 74 03./07/19 74 7.-03-197 .4 3./7/ 74 7 March, 197 .4 19 74. -03-07 74. -03-07 7./3/7 .4 Tip If you are creating Web pages for the global market, consider using the format designated by the 19 74- 03-07 example This year-month-day format is an ISO (International Organization for... top Then, click the Add to Custom Color button until all the color swatch text fields are empty 345 346 Part II ✦ Web Design and Layout Fundamentals Dreamweaver s Color Pickers Dreamweaver includes a color picker for selecting colors for all manner of HTML elements: text, table cells, and page background Dreamweaver s color picker — in keeping with the Macromedia common user interface — offers a number... of your text, choose Text ➪ Size Change and pick a value from +1 to +4 To decrease the size of your text, choose Text ➪ Size Change and pick a value from –1 to –3 Note that the full range of relative sizes (+1 to +7 and –1 to –7) is not available through the Size Change menu because Dreamweaver assumes the base font value is 3 343 344 Part II ✦ Web Design and Layout Fundamentals Adding font color Unless... because you can resize all the fonts in an entire Web page with one command Absolute sizes, however, are more straightforward to use and can be coded in Dreamweaver without any additional HTML programming Once again, it’s the designer’s choice 341 342 Part II ✦ Web Design and Layout Fundamentals Figure 8-16: This chart shows the relationships between the various font sizes in an HTML browser as compared... pickers 4 When you’ve found the desired color, click OK Assigning a specific font Along with size and color, you can also specify the typeface in which you want particular text to be rendered Because of HTML’s unique way of handling fonts, Dreamweaver uses a special Chapter 8 ✦ Working with Text method for choosing font names for a range of selected text Before you learn how to change a typeface in Dreamweaver, ... in Dreamweaver, Internet Explorer 6.0, and Netscape 7.1 Although the various renderings are mostly the same, notice the difference between how the Keyboard style is rendered in Dreamweaver (far left) and in either browser The various styles may be rendered differently in other browsers and other browser versions Figure 8-13: In this comparison chart, the various renderings of style tags are from Dreamweaver, ... inspector open 353 3 54 Part II ✦ Web Design and Layout Fundamentals Comment symbol Comment in HTML code Comment Comment Property inspector Figure 8-22: Comments are extremely useful for inserting into the code information not visible on the rendered Web page By default, Dreamweaver inserts a Comment symbol in the Document window You can hide the Comment symbol by choosing Edit ➪ Preferences (Dreamweaver ➪... and below Use the line break tag, , to make lines appear directly above or below one another ✦ Dreamweaver offers a full complement of text-editing tools — everything from Cut and Paste to Find and Replace Dreamweaver s separate Design and Code views make short work of switching between text and code ✦ Dreamweaver s Find and Replace feature goes a long way toward automating your work on the current... viewer Before the 4. 0 versions, the various browsers supported PNG only through plug-ins After PNG was endorsed as a new Web graphics format by the W3C, both 4. 0 versions of Netscape and Microsoft browsers added native, inline support of the new format for Windows On Macs, PNG format is supported in Internet Explorer 5.2, Safari 1.0 and above, as well as Netscape 6 and above; Netscape 4. x browsers still... Luckily, Dreamweaver puts most of the tools you need for this task right at your fingertips Many of the text-formatting options are available through the Text Property inspector or the Tag inspector, whether you’re styling your text in CSS or HTML tags On the Web today, designers have largely moved to using Cascading Style Sheets and away from hard-coding text with and other tags Both 4. 0+ . available through the Size Change menu because Dreamweaver assumes the base font value is 3. Caution Note 543 5 04 ch08.qxd 12/10/03 10:28 PM Page 343 344 Part II ✦ Web Design and Layout Fundamentals Adding. to use and can be coded in Dreamweaver without any additional HTML programming. Once again, it’s the designer’s choice. 543 5 04 ch08.qxd 12/10/03 10:28 PM Page 341 342 Part II ✦ Web Design and. greatly improved in Dreamweaver MX 20 04. Previously, the only way to get formatted content from Word was to use Microsoft’s export to HTML feature and then import the exported page into Dreamweaver to