You've already seen how you can position the cursor on the page and directly enter text. In this sense, Dreamweaver acts like a word processing program rather than a page layout program. On a blank page, the cursor starts at the top-left corner of the page. Words automatically wrap to the next line when the text exceeds the right margin. Press Enter (Return) to end the current paragraph and start the next one.

In previous versions of Dreamweaver, when you create a paragraph formatted as a heading and then press Enter (Return), the new paragraph is also formatted as a heading. Now you can control this behavior. If you select Edit

Text can be moved from one place to another—or from one Web document to another—using the standard cut-and-paste techniques. No surprises here: Before cutting or copying anything, you must select it. Select by clicking the mouse at the beginning of the text you want to cut or copy, drag the highlight to the end of your selection, and then release the mouse button.

Here are some other selection methods:

Dreamweaver provides quick access to the most common editing commands, such as Cut, Copy, and Paste, through the Standard toolbar. To enable the toolbar, choose View

When you want to move a block of text, first select it and then use Edit

To copy text, the procedure is much the same. Select the text using one of the preceding methods and then use Edit

The other, quicker method for moving or copying text is the drag-and-drop technique. After you've selected your text, release the mouse button and move the cursor over the highlighted area. The cursor changes from an I-beam to an arrow. To move the text, click the selected area with the arrow cursor and drag your mouse to a new location. The arrow cursor now has a box attached to it, indicating that it is carrying something. As you move your cursor, a bar (the insertion point) moves with you, indicating where the text will be positioned. Release the mouse button to drop the text.

You can duplicate text in the same manner by holding down the Ctrl (Option) key as you drag and drop your selected text. When copying this way, the box attached to the cursor is marked with a plus sign (on Macintosh computers, the box is the same size as the text selection, and no plus sign appears).

To completely remove text, select it and then choose Edit

The Paste command can also insert text from another program into Dreamweaver. If you cut or copy text from a file in any other program—whether it is a word processor, spreadsheet, or database program—Dreamweaver inserts it at the cursor position. The results of an ordinary Paste operation may be undesirable, however. To more closely control the text inserted into Dreamweaver, use Paste Special.

Paste Special allows you to choose exactly how you'd like the copied text inserted into your document. Choose from a range of options that give you the flexibility to add straight text, structured text, structured text with simple formatting, or fully formatted text. The options can be preset in the Copy/Paste category of the Preferences and adjusted on a case-by-case basis.

After you've copied text in another application, choose Edit

Two other options are available for modifying your paste output. The Retain Line Breaks option maintains line breaks in pasted text; if you choose Text Only, this option is disabled. The Clean Up Word Paragraph Spacing option works with the Text With Structure and Text With Structure Plus Basic Formatting choices to remove additional space between paragraphs.

If you use the standard Paste command, Dreamweaver can insert only plain, unformatted text—any bold, italic, or other styling in the original document is not retained in Dreamweaver. Paragraph breaks, however, are retained and reproduced in two different ways. A single paragraph return becomes a line break (a <br> tag) in Dreamweaver, whereas text separated by two returns is formatted into two HTML paragraphs, using the <p>...</p> tag pair.

Note

If you need to import a great deal of text and want to retain as much formatting as possible, you can use another text application, such as Microsoft Word, to save your text as an HTML file. Then open that file in Dreamweaver with the Import

As mentioned earlier in this chapter, Dreamweaver includes a couple of twists to the standard Cut, Copy, and Paste operations. Dreamweaver's Design and Code views enable you to copy and paste both text and code.

Put simply, to copy only text from Dreamweaver to another application, use the Edit

Within Dreamweaver itself, content copied from Design view and pasted in Code view using Edit

The Undo command has to be one of the greatest inventions of the 20th century. Make a mistake? Undo! Want to experiment with two different options? Undo! Change your mind again? Redo! The Undo command reverses your last action, whether you changed a link, added a graphic, or deleted the entire page. The Redo command enables you to reverse your Undo actions.

To use the Undo command, choose Edit

Dreamweaver's implementation of the Undo command enables you to back up as many steps as set in Maximum Number of History Steps, found in the General category of Preferences. The History steps can even undo actions that took place before a document was saved. Note that the History panel has additional features besides multiple applications of the Undo command.

The complement to the Undo command is the Redo command. To reverse an Undo command, choose Edit

A variation of the Redo command is the Repeat command. When your last action was the Undo command, the Edit menu shows the Redo command. But if the last action you performed was not Undo, the Edit menu shows the Repeat command, which allows you to repeat your last action. You can use the same button on the Standard toolbar to Repeat and Redo. In addition, the Repeat command has the same keyboard shortcut as Redo: Ctrl+Y (Command+Y). The Repeat command is useful, for example, when you need to create several links to the same location. To do this, create the first link, and then select the next text you want to link and use the Repeat command to add the next link.

The most basic method of using Find and Replace takes place in the Document window. Whenever you need to search for any text that can be seen by the public on your Web page—whether it's to correct spelling or change a name—Dreamweaver makes it fast and simple.

The Find and Replace dialog box, unlike most of Dreamweaver's dialog boxes, is actually a nonmodal window. This technical term just means that you can easily move back and forth between your Document window and the Find and Replace dialog box without having to close the dialog box first, as you do with the other Dreamweaver dialog boxes.

Whether you are working with a long, involved document or you just want to look in a particular area, you'll welcome Dreamweaver's new capability to search a selection. Just highlight the text you want to search and, in the Find and Replace dialog box, choose Selected Text from the Find In drop-down list. You can search just selected code, too.

To find some text on your Web page, follow these steps:

The text you enter in the Find and Replace dialog box is kept in memory until it's replaced by your next use of the Find feature. After you have executed the Find command once, you can continue to search for your text without redisplaying the Find and Replace dialog box, by selecting Edit

Instead of locating one instance of your text at a time, you can also look for all occurrences of your text at once. To do this, open and set up the Find and Replace dialog as previously described, but choose Find All instead of Find Next. When you choose Find All, Dreamweaver closes the Find and Replace dialog box and opens the Search panel. The Search panel displays each found occurrence on a separate line, as shown in Figure 8-6. A message at the bottom of the Search panel also tells you how many occurrences of your selection, if any, were found. If you want to search for a different term, click the Find and Replace button (the small green triangle) in the Search panel to reopen the Find and Replace dialog box.

Figure 8-6. The Search panel displays results of a Find All command.

If you perform two Find All operations in a row, the Search panel automatically clears the results of the first search and replaces them with the results of the new search. To manually clear the Search panel, right-click (Control+click) and choose Clear Results.

When you replace text in the Document window, it is replaced regardless of its formatting. For example, suppose you have the following paragraph:

Upon discovering that synchrone should actually be asymptote, you could use the Find and Replace feature to replace all the plain, italic, and bold versions of the synchrone text simultaneously.

Follow these steps to use Dreamweaver's Replace feature in the Document window:

Tip

To rerun individual Find and Replace operations, highlight the appropriate step in the History panel (choose Window

The power curve ramps up significantly when you start to explore Dreamweaver's Find and Replace capabilities for HTML code. Should your client decide that he wants the company's name to appear in blue, bold, 18-point type throughout the 300-page site, you can accommodate him with a few keystrokes—instead of hours of mind-numbing grunt work.

You can perform three different types of searches that use the HTML in your Web page:

The big, red boat was a <em>big</em> waste of money.

As powerful as all the other Find and Replace features are, they are boosted to a higher level of flexibility with the addition of regular expressions. I've referred to regular expressions as being similar to wildcards in other programs, but their capabilities are actually far more extensive.

Regular expressions are best described as a text pattern matching system. If you can identify any pattern in your text, you can manipulate it with regular expressions. What kind of pattern? Imagine you have a spreadsheet-like table with lots of numbers, showing both dollars and cents, mixed with explanatory text. With regular expressions, you can match the pattern formed by the dollar sign and the decimal point and reformat the entire table, turning all the figures deep blue with a new font—all in one Find and Replace operation.

You can apply regular expressions to any of the types of Find and Replace operations previously discussed by just clicking the Use Regular Expressions checkbox. Note that when you select Use Regular Expressions, the Ignore Whitespace Differences option is deselected. This is because the two options are mutually exclusive.

The most basic regular expression is the text itself. If you enable the feature and then enter th in the Search text field, Dreamweaver locates every example of th in the text and/or source. Although this capability by itself has little use beyond what you can also achieve with standard Find and Replace operations, it's important to remember this functionality as you begin to build your patterns.

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— —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

Dreamweaver offers other methods for inserting a nonbreaking space. You can enter its character code— —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.

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:

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 feature made possible with the <pre> tag. All text in Figure 8-9 uses the <pre> tag; the column on the left is the standard output with a monospace font; the column on the right uses a different font in a larger size.

Just like headings, the paragraph tag falls into the class of HTML objects called block elements. 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>.

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-10 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.

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

Figure 8-9. Preformatted text gives you full control over the line breaks, tabs, and other whitespace in your Web page.

Figure 8-10. Break tags, denoted by shield symbols, wrap your lines without the additional line spacing created by <p> tags.

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 different heading size. As far as HTML and your browser are concerned, the text is still one block element, 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

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 whitespace), 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.

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

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 gives you the option to cancel.

Existing Word or Excel files can be imported directly into Dreamweaver in a single operation. Dreamweaver automatically converts the content from the Office format to HTML. To begin an import operation, choose File

The content is pasted according to the option chosen at import time. The available options are selected from a list at the bottom of the Import Word Document (see Figure 8-11) and Import Excel Document dialog boxes and echo those found in the Copy/Paste category of Preferences.

Figure 8-11. Select from the Formatting drop-down list.

Excel documents are converted to tables with content formatted according to the options.

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 to 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 two basic options: insert the content (formatted according to the standard options) or create a link to the document. On the Macintosh, a link is always created.

When an Office document is dragged onto the Web page (whether from the Files panel or the desktop), the Insert Document dialog box appears, as shown in Figure 8-12. If you opt to insert the file, Dreamweaver automatically converts the document according to the options selected. 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.

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 the page—which you almost always do—it took so long to find your way through the convoluted code that you were almost better off building the page from scratch. Fortunately, that's no longer the case with Dreamweaver.

The capability to open and clean up Word HTML documents is a key workflow enhancement for Dreamweaver. Dreamweaver can successfully open and clean up files from Microsoft Word 97, Word 98, Word 2000, Word 2002, or Word 2003. 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 document in HTML format in Word 97/98, you choose File

<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, bringing a Word HTML file into Dreamweaver is pretty easy:

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 transformation 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 or newer. The different sets of options can be seen on the Detailed tab of the Clean Up Word HTML dialog box; the Basic tab is the same for both file types. Table 8-7 details the Basic tab options, the Word 97/98 options, and the Word 2000 or newer options.

HTML contains two types of style tags that are philosophically different from each other: logical tags and physical tags. The physical tags describe what text looks like; these include tags for bold, italic, and underlined text. HTML's logical styles denote what the text represents (such as code, a citation, or something typed from the keyboard) rather than what the text will actually look like. The eventual displayed appearance of logical styles is up to the viewer's browser.

Logical styles can be described as structural. They are useful when you are working with documents from different sources—reports from different research laboratories around the country, for instance—and you want a certain conformity of style. If you are trying to achieve a particular look using logical styles, you should consider using the Cascading Style Sheets feature instead of, or in addition to, logical styles. You can apply logical style tags and then use Cascading Style Sheets to define how that style will look when viewed in a browser.

Whereas logical styles are utilitarian, physical styles such as boldface and italic are decorative or presentational. With the advent of Cascading Style Sheets, use of the physical style tags is no longer the preferred method of styling text. However, physical tags are still supported and are still very widely used. Even with Cascading Style Sheets, both physical and logical styles have their uses in material published on today's Web. In Dreamweaver, logical and physical style tags can be accessed by choosing Text

Figure 8-13 compares how styles are rendered in Dreamweaver, Internet Explorer 7.0, and Mozilla Firefox. Although the various renderings are mostly the same, notice the subtle difference between how the Keyboard style is rendered in Dreamweaver (far left) and in either browser. The various styles may be rendered quite a bit differently in other browsers and other browser versions.

Figure 8-13. In this comparison chart, the various renderings of style tags are from Dreamweaver, Mozilla Firefox, and Internet Explorer 7.0 (from left to right, respectively).

Two of the physical style tags—bold and italic—are controlled by a Preferences setting. Although you can use the <b> and <i> tags to style text, it is considered better practice to use the equivalent logical tags, <strong> and <em>. Dreamweaver enables you to specify which tags to use via the Use <strong> And <em> In Place Of <b> And <i> option in the General category of Preferences. If this option is checked (the default), <strong> and <em> tags are used to code bold or italic text, respectively; if the option is clear, <b> and <i> tags are used.

To actually apply bold or italic formatting using either the logical or physical tags, select the text and then click the Bold or Italic button on the Text Property inspector, or use the keyboard shortcuts (Ctrl+B [Command+B] and Ctrl+I [Command+I], respectively). Buttons for bold, italic, strong, and emphasis are also available in the Text category of the Insert bar. If the General Preference setting (discussed previously) is set, then the Bold button on the Insert bar does the same thing as the Strong button, and the Italic button inserts the same code as the Emphasis button.

Warning

One physical style, the underline tag, <u>, is available only through the Text

Both physical and logical style tags are described in Table 8-8.

Currently, Dreamweaver does not support one useful style tag: the <address> tag. Rendered as italic text by browsers, the <address>...</address> tag pair often marks the signature and e-mail address of a Web page's creator.

If you're applying the <address> tag to multiple lines, use <br> tags to form line breaks. The following example shows the proper use of the <address> tags:

<address><p>The President<br>
 1600 Pennsylvania Avenue NW<br>
 Washington, DC 20500</p></address>

This code is shown on a Web browser as follows:

Tip

To remove a standard style, highlight the styled text, choose Text

Two other tags worth noting designate abbreviations, <abbr>...</abbr>, and acronyms, <acronym>...</acronym>. The abbreviation or acronym is enclosed within the tag pair. Both tags include a title attribute, which is used to specify the full text of the abbreviation or acronym. The following code shows examples of both tags:

<abbr title="Incorporated">Inc.</abbr>
<acronym title="Object-oriented Programming">OOP</acronym>

The <abbr> and <acronym> tags are relatively new and are not yet widely used. These tags are not intended to actually change the visual style of the text in a browser, but instead they enable programs that process the document to clearly identify acronyms and abbreviations. For example, in the future, words marked as abbreviations could allow non-visual browsers to read the expanded word, rather than sounding out the abbreviation. If designated as an abbreviation, the letters PA could be read as Pennsylvania rather than as the word pa. In the future, this tag could also be used to provide alternate text for search engines, spell checkers, and translation programs.

In Dreamweaver, you can insert acronyms or abbreviations by clicking the Acronym or Abbreviation button on the Text category of the Insert bar. You can also choose the appropriate command from the Insert

Whether you're using CSS or <font> tags to format your text, you can alter its size in a variety of ways. Both methods allow you to specify text size in either an absolute or a relative measurement. You can also size any amount of text, from a single character to an entire page, with both techniques.

Sizing with CSS

The best-practice route for setting font size with CSS is to apply an existing style—declared either in an internal or external style sheet—to a tag or selection of text. However, you can also select a value from the Size field of the Property inspector as shown in Figure 8-14. If no style has been previously attached to the selection, Dreamweaver automatically creates an internal style named styleN where N is an incremented number. For example, the first style created in this fashion is named style1 and the second style2, and so on. After the automatically generated style is created, you can apply it to other selections.

Figure 8-14. If the text size you want is not listed, change it in the Size field.

In CSS, the aptly named font-size property controls the size of the text. When declared in a selector, font-size is used like this

In CSS, the aptly named font-size property controls the size of the text. When declared in a selector, font-size is used like this

h1 { font-size: 36px; }

or like this

#mainsidebar { font-size: 1.2em; }

or this

.legal { font-size: xx-small; }

As you can see, the font-size value may be a precise value (36px), a percentage (1.2em), or an absolute-size keyword (xx-small). In addition to pixels—abbreviated as px—CSS supports other measurement systems: points (pt), inches (in), centimeters (cm), millimeters (mm), and picas (pc).

Tip

Many designers advocate using pixel measurements as a way to achieve a consistent look and feel across browsers.

CSS provides three different relative-based measurement systems for sizing text: em, ex, and percentage (%). All three assume that a specific font size has been declared for the parent or containing tag; if no specific font size is defined, the default setting of the parent's font size is used for comparison. A font-size of 1em is equivalent to whatever the containing tag's font-size is; for example, if the containing <div> tag has a font-size of 20px, a selector with a font-size set to 1.2em is rendered as 24px—because 20 times 1.2 is equal to 24. Percentage measurements work exactly the same way as em measurements; 1.2% is the same as 1.2em.

The ex measurement, however, is quite different. Short for x-height, the ex measurement system is based on the height of a lowercase x in the current font. Character heights vary quite substantially from one font to another: At 72 pixels, an x in Times is about 32px high whereas in Arial, it's almost 40px. Because of the widely varying differences, the ex measurement system is rarely used.

There are seven font-size keywords, which correspond to the HTML size attribute values 1–7. The two are similar in that both rely on the browser for final size interpretation, and the sizes for both are relative to each other, as shown in Figure 8-15.

CSS specifications include two additional keywords: larger and smaller. These relative-based keywords are obviously intended to be used in relation to the current font size. For example, in a <div> where the font-size value is 10px, any text whose font-size value is larger would be rendered at about 12px, whereas a smaller value would display text at 8px.

In Dreamweaver, the font-size property is set in the Type category of the CSS Rule Definition dialog box or in the Relevant CSS category of the Tag inspector.

Applying <font> sizes

When you work with <font> tags, the six HTML heading types enable you to assign relative sizes to a line or to an entire paragraph. In addition, HTML gives you a finer degree of control through the size attribute of the font tag. In contrast to publishing or CSS environments, both traditional and desktop, font size is not specified in HTML with points. Rather, the <font> tag enables you to choose one of seven different explicit sizes that the browser can render (absolute sizing), or you can select one relative to the page's basic font. Figure 8-16 shows the default absolute and relative sizes, compared to a more page-designer–friendly point chart (accomplished with Dreamweaver's Cascading Style Sheets features).

Figure 8-15. The font-size property keywords parallel the <font> tag's size attribute values.

Figure 8-16. This chart shows the relationships between the various font sizes in an HTML browser as compared to real-world point sizes.

Which way should you go—absolute or relative? Some designers think that relative sizing gives them more options. As you can see by the chart in Figure 8-16, browsers are limited to displaying seven different sizes no matter what—unless you're using Cascading Style Sheets. Relative sizing does give you additional flexibility 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.

You can assign an absolute font size through either the Property inspector or the menus. In both cases, you choose a value, 1 (smallest) through 7 (largest), to which you want to resize your text; you might note that this order is the reverse of the heading sizes, which range from H1 to H6, largest to smallest.

To use the Property inspector to pick an absolute font size, follow these steps:

To pick an absolute font size from the menu, follow these steps:

To what exactly are relative font sizes relative? The default font size, of course. The advantage of relative font sizes is that you can alter a Web page's default font size with one command, the <basefont> tag. The tag takes the following form

<basefont size=" value ">

where value is a number from 1 to 7. The <basefont> tag is usually placed immediately following the opening <body> tag. Dreamweaver does not support previewing the results of altering the <basefont> tag, and the tag has to be entered by hand or through the external editor.

You can distinguish a relative font size from an absolute font size by the plus or minus sign that precedes the value. The relative sizes are plus or minus the current <basefont> size. Thus, a <font size= "+1"> is normally rendered with a size 4 font because the default <basefont> is 3. If you include the following line in your Web page:

<basefont size="5">

text marked with a <font size="+1"> is displayed with a size 6 font. Because browsers display only seven different size fonts with a <basefont size="5"> setting—unless you're using Cascading Style Sheets—any relative size over <font size="+2"> won't display differently when previewed in a browser.

Relative font sizes can also be selected from either the Property inspector or the menus. To use the Property inspector to pick a relative font size, follow these steps:

To pick a relative font size from the menus, follow these steps:

Unless you assign a color to text on your Web page, the browser uses its own default, typically black. To change the font color for the entire page, choose Modify

You can also apply color to individual headings, words, or paragraphs that you have selected in Dreamweaver. As with text size, when working with CSS the best way to set a color for a selected tag or text range is to apply an existing style that includes the desired color. Font color is defined through the Type category of the CSS Rule Definition dialog or the color attribute of the Tag inspector's Relevant CSS category.

Whether working in CSS or <font> tags, text color is expressed in either a hexadecimal color number or a color name. The hexadecimal color number is based on the color's red-green-blue value and is written like this:

#FFFFFF

The preceding represents the color white. You can also use standard color names instead of the hexadecimal color numbers. A sample color code line follows:

I'm <font color="green">GREEN</font> with envy.

In CSS, the same color attribute is used, but written somewhat differently:

.envy {color:green;}

Again, you have several ways to add color to your text in Dreamweaver. Click the color box in the Property inspector to display the color picker, displaying a limited palette of colors. Clicking the System Color Picker button in the color picker enables you to choose from a full-spectrum Color dialog box.

Warning

If you want to apply the same color that you've already used elsewhere in your site to your text, you can display the Color category on the Assets panel (choose Window

If you approach your coloring task via the menus, the Text

To access the full-spectrum color picker in Windows, follow these steps:

To access the full-spectrum color picker in Macintosh systems (see Figure 8-17), follow these steps:

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 method for choosing font names for a range of selected text. Before you learn how to change a typeface in Dreamweaver, you should more fully examine how fonts in HTML work.

<font face="Arial, Helvetica, sans-serif">Swiss Maid Foundry</font>

Editing the font list

With the Edit Font List dialog box, Dreamweaver gives you a point-and-click interface for building your font lists. After the Edit Font List dialog box is open, you can delete an existing font series, add a new one, or change the order of the list so your favorite ones are on top. Figure 8-18 shows the sections of the Edit Font List dialog box: the current Font List, the Available Fonts on your system, and the Chosen Fonts. The Chosen Fonts are the individual fonts that you've selected to be incorporated into a font series.

Figure 8-18. Dreamweaver's Edit Font List dialog box gives you considerable control over the fonts that you can add to your Web page.

Follow these steps to construct a new font series and add it to the font list:

1. To open the Edit Font List dialog box, either expand the Font drop-down list in the Property inspector and select Edit Font List, or choose Text

   

2. If the Chosen Fonts box is not empty, clear the Chosen Fonts box by clicking the Add (+) button at the top of the dialog box. You can also scroll down to the bottom of the current Font List and select (Add fonts in list below).

3. Select a font from the Available Fonts list. The font categories, such as sans serif and cursive, appear at the end of the available fonts list.

4. Click the << button to transfer the selected font to the Chosen Fonts list.

5. To remove a font you no longer want or have chosen in error, highlight it in the Chosen Fonts list and click the >> button.

6. Repeat steps 3 through 5 until the Chosen Fonts list contains the alternative fonts you want.

7. If you want to add another, separate font series, repeat steps 2 through 6.

8. Click OK when you are finished adding fonts.

To change the order in which font series are listed in the Font List, follow these steps:

1. In the Edit Font List dialog box, select the font series that you want to move.

2. If you want to move the series higher up the list, click the up arrow button at the top right of the Font List. If you want to move the series lower down the list, click the down arrow button.

To remove a font series from the current Font List, highlight it and click the Remove (–) button at the top left of the list.

Remember that the fonts must be on your system to make them a part of your font list. To add a font unavailable on your computer, type the name of the font into the text field below the Available Fonts list and press Enter (Return).

You can easily align text in Dreamweaver, just as you can in a traditional word processing program. HTML supports the alignment of text to the left or right margin, or in the center of the browser window. Another option, called Justify, causes text to be flush against both left and right margins, creating a block-like appearance. The Justify value is supported in browsers 4.0 and later on Windows platforms.

Like a word processing program, Dreamweaver aligns text one paragraph at a time. You can't left-align one word, center the next, and then right-align the third word in the same paragraph.

To align text, use one of several methods: a CSS style, a menu command, the Property inspector, or a keyboard shortcut. When declaring an alignment in CSS, select a value from the Text Align list found in the Block category of the CSS Rule Definition dialog box.

To use the menus, choose Text

Figure 8-19. The Text Property inspector includes buttons to left align, center, right align, and justify your text.

The alignment keyboard shortcuts are as follows:

HTML offers a tag that enables you to indent whole paragraphs, such as inset quotations or name-and-address blocks. Not too surprising, the tag used is called the <blockquote> tag. Dreamweaver gives you instant access to the <blockquote> tag through the Indent and Outdent buttons located on the Text Property inspector, as shown in Figure 8-20.

Figure 8-20. Indent and adjust the indentation of paragraphs and blocks of text by using the Indent and the Outdent buttons.

To indent one or more paragraphs, select them and click the Indent button in the Property inspector. Paragraphs can be indented multiple times; each time you click the Indent button, another <blockquote>...</blockquote> tag pair is added. Note that you can't control how much space a single <blockquote> indents a paragraph—that characteristic is determined by the browser.

You also have the option of indenting your paragraphs through the menus by choosing Text

If you find that you have over-indented, use the Outdent button, also located on the Property inspector. The Outdent button has no effect if your text is already at the left edge. Alternatively, you can choose Text