4. Adding Text to Your Pages
In This Chapter
Cutting, Copying, and Pasting Text
Indenting and Aligning Text with HTML
Finding Text with a Simple Search
Performing Advanced Text Searches
Finding and Replacing in Source Code
Finding and Replacing with a Specific Tag
Using Regular Expressions for Searching
The main message of most websites is conveyed by the site’s text, and a major part of your job in working with any site will be adding, modifying, and styling that text. Dreamweaver gives you the tools you need to effectively put text on your pages and get your message across.
When you add text, you need to deal with two different aspects of the text: its structure and its presentation. Structural elements are things like paragraphs, headings, lists, and the like; presentation is how the text looks, including things like the font, font size, text color, and so on. Most sites these days separate the structure and the presentation. Structure is about organizing the content on the page, and presentation involves making the content look good.
In this chapter, we’ll concentrate on getting text onto your page and applying structure using headings and lists. We’ll also cover using basic HTML text styles to change the look of your text. Dreamweaver CC introduces integration with Adobe Edge Fonts, making web fonts easy to use, so we’ll show you how to add beautiful type to your pages.
Adding Text
Most of the text on a webpage is formatted in blocks, which are enclosed by beginning and ending HTML tags. For example, the HTML for a line of text with paragraph tags wrapped around it looks like this:
<p>This text is wrapped in beginning
and ending paragraph tags.</p>
For a browser to understand that this is a paragraph, you (or in this case, Dreamweaver) have to make it one by adding the surrounding <p> tags.
Of course, in Dreamweaver’s Design view or Live view, you won’t see the HTML tags. All of the text contained between the opening <p> tag and the closing </p> tag is considered by a web browser to be within the same paragraph, no matter how much text is between the tags. The <p>...</p> combination is an example of a container tag. Virtually all of the structural formatting that you can apply with Dreamweaver is done with container tags.
Double-click a word to select it.
Move your cursor to the left of a line of text until the cursor changes from an I-beam to an arrow pointing at the text. Then click once to highlight a single line, or drag up or down to select multiple lines.
Triple-click anywhere in a paragraph to select the entire paragraph.
For finer control over selecting individual letters, hold down the Shift key and press the left or right arrow key to extend the selection one letter at a time.
Ctrl-Shift (Cmd-Shift) plus the left or right arrow key extends the selection one word at a time. Ctrl (Cmd) plus the left or right arrow key moves the cursor one word to the left or right but doesn’t select any text.
Press Ctrl-A (Cmd-A) to Select All (the entire contents of the current document).
When you add text to a page with Dreamweaver, the program automatically wraps the text with paragraph tags when you press the Enter (Return) key on your keyboard. You can see this if you switch to Code view by clicking the Code button at the top of the Dreamweaver editing window 
.
Dreamweaver adds paragraph tags around text when you press the Enter (Return) key.
Dreamweaver also has special commands that help you import entire Microsoft Word or Excel documents as webpages. (See “Using Paste Special,” later in this chapter. Also, refer to Chapter 19, “Working with Other Applications.”)
To insert text
1. In Dreamweaver’s Design view, click in the page where you want to add text.
2. Type the text you want.
Cutting, Copying, and Pasting Text
Just as with a word processor, you can cut, copy, and paste text on a page in Dreamweaver, which shares the same menu commands with virtually all standard Windows and Mac word processors and text editors. When pasting text in Design view from one part of a Dreamweaver page to another or between Dreamweaver pages, text formatting is automatically maintained.
Dreamweaver also allows you to paste text and maintain some or all of the text’s formatting. This is especially useful when moving text from applications such as Microsoft Word or Excel to a webpage. See “Using Paste Special,” later in this chapter.
To cut or copy text
1. Select the text you want to cut or copy.
2. To cut the text to the clipboard, choose Edit > Cut or press Ctrl-X (Cmd-X).
or
To copy the text to the clipboard, choose Edit > Copy or press Ctrl-C (Cmd-C).
The text is placed on the clipboard.
Tip
When you have text selected, most of the time you can right-click to cut or copy the text using a context menu. You can also right-click to paste text from the context menu.
To paste plain text
1. Click to place the insertion point on the page where you want the text to appear.
2. Choose Edit > Paste, or press Ctrl-V (Cmd-V).
Tip
If you copy some HTML source code from another program, such as the Source view of a web browser, and paste it into a Dreamweaver page in Design view, the HTML appears on the page with tags and all. That’s because although what you’ve pasted in is HTML markup, Dreamweaver is trying to be smarter than you—it assumes that markup is what you want to display. If that’s not what you want, but rather you want the result of the markup to display in your page, just switch to Code view in Dreamweaver before you paste. The HTML code will paste into the page, and when you switch back to Design view, it will display the proper formatting.
Tip
Dreamweaver offers Undo and Redo commands in the Edit menu, which can often be very useful for fixing mistakes or repeating operations. You can also press Ctrl-Z (Cmd-Z) for Undo and Ctrl-Y (Cmd-Y) for Redo.
Dragging and Dropping Text
If all you want to do is move some text from one place on a page to another, it’s often faster to drag and drop the text.
To drag and drop text
1. Select the text you want to move .
Begin dragging and dropping text by selecting it.
2. Move the cursor over the selected text.
The cursor changes from an I-beam to an arrow.
3. Click and hold your mouse button over the selected text, and drag it to its new location, releasing the mouse button when the cursor is where you want the text 
.
When you release the mouse button, the text moves to where you dragged it.
The text moves to its new home.
Tip
To duplicate the text, hold down the Ctrl (Option) key while dragging and dropping. A copy of the text appears when you release the mouse button.
Using Paste Special
Dreamweaver’s Paste Special command in the Edit menu gives you a variety of options that control the way formatted content is pasted into Dreamweaver’s Design view.
You will probably use the Paste Special command most often when pasting in text from Microsoft Word or Excel to maintain the formatting that the text had in those programs . Text pasted in from Excel can appear in Dreamweaver as a formatted table, which saves you a lot of time and effort.
Paste Special will do a great job of maintaining the formatting from this Microsoft Word document.
The Paste Special options include:
Text only pastes just the text; paragraph marks and all formatting are stripped from the text .
This is the “Text only” version of the text from 
, with paragraph marks and formatting stripped out.
Text with structure pastes the text and maintains the structure (notably paragraphs, tabs, and lists) but eliminates other text formatting 
.
With the “Text with structure” option, the text and paragraph marks are there, but there’s no character formatting.
Text with structure plus basic formatting keeps the text and text structure and retains bold and italic formatting 
.
The “Text with structure plus basic formatting” option maintains bold and italic formatting.
Text with structure plus full formatting preserves the text, structure, and styles from the original document 
.
The final option, “Text with structure plus full formatting,” maintains all the formatting from the Word document.
The text will usually be in an application other than Dreamweaver.
2. Cut or copy the text.
3. Switch to Dreamweaver, and click to set the insertion point where you want the text to appear.
4. Choose Edit > Paste Special, or press Ctrl-Shift-V (Cmd-Shift-V).
The Paste Special dialog appears 
.
Choose the option you want from the Paste Special dialog.
5. In the dialog, click the radio button next to the paste option you want.
6. Click OK.
The text pastes in according to the option you selected.
Tip
If you use the “Text with structure plus basic formatting” or “Text with structure plus full formatting” choices, you can also paste graphics into Dreamweaver along with the formatted text.
Tip
You can copy and paste graphics from most applications into Dreamweaver, but if you want to paste a graphic along with formatted text, you must use Paste Special.
Tip
When pasting from Word and maintaining full styles, Dreamweaver reads the Word styles and creates CSS styles with the same names and attributes. It places the CSS styles in the same document. If you want to use these styles elsewhere on your site, you should move these internal styles to an external style sheet. See “Dragging and Dropping Styles” in Chapter 9 to learn how to do that.
Applying Headings
After paragraphs, headings are the most important structural element on most webpages. Headings point your site’s visitors to essential information on the page, and they separate sections of the page. Think of headings as being similar to headlines in a newspaper.
Text you enter into Dreamweaver begins with no heading; Dreamweaver refers to this text as None in the Property inspector. As soon as you press Enter (Return), Dreamweaver wraps the text in paragraph tags, and the text becomes paragraph text.
HTML has six sizes of headings, plus paragraph text . These headings don’t have a fixed point size, unlike headings in, say, Microsoft Word or Adobe InDesign. Instead, they are sized relative to one another and to the size of the paragraph text, and the size that the user sees depends on the settings in the user’s web browser. By default, headings are usually displayed in boldface.
Examples of the six heading sizes, plus paragraph, which is usually used for body text.
You can change the look of headings (their size, font, color, and so forth) using CSS, which we’ll cover in Chapter 7.
Tip
You can have only one size of HTML heading in a particular element. You can work around this limitation with CSS styles.
Tip
Headings are also important because they help search engines find and index content on your pages. Google in particular uses headings in this fashion, so it’s a good idea to use headings when they are appropriate to your content.
Note that you don’t have to select text; a heading is a block style, so it affects the entire paragraph the cursor is in.
2. Choose Format > Paragraph Format > Heading x, where x is the heading size you want .
Choose the heading size you want from the Paragraph Format submenu.
or
Press Ctrl-1 for Heading 1, Ctrl-2 for Heading 2, and so on. On the Mac, press Cmd-1 for Heading 1, Cmd-2 for Heading 2, and so on.
or
Choose a heading from the Format pop-up menu in the HTML mode of the Property inspector .
Another way to choose the heading size is to use the Format menu in the HTML mode of the Property inspector.
or
Choose one of the heading options from the Heading pop-up menu in the Structure category of the Insert panel .
The Structure category of the Insert panel gives you a pop-up menu with the six heading sizes.
The text changes to the heading you selected.
2. Choose Format > Paragraph Format > Paragraph.
or
Choose Paragraph from the Format pop-up menu in the HTML mode of the Property inspector.
or
Press Ctrl-Shift-P (Cmd-Shift-P).
Dreamweaver changes the text into a paragraph.
To remove heading formatting
1. Click in the line you want to change.
2. Choose Format > Paragraph Format > None.
or
Press Ctrl-0 (Cmd-0). (Those are zeros, not the letter “O.”)
The Format menu of the Property inspector changes to None, indicating that the text has no heading or paragraph style assigned to it.
Applying Character Formats
Character formatting is styling that you can apply to words and individual characters rather than to blocks such as paragraphs. This formatting includes changing the font, font size, and font color.
Beginning several versions ago and continuing through the current version of Dreamweaver, the program dispensed with the old method of applying these sorts of character formatting (which was to use the HTML <font> tag) in favor of using CSS styles. This change happened mostly behind the scenes in Code view, so if you have been using Dreamweaver for quite some time, you may not have even noticed the change. Beginning with Dreamweaver CS4, the program enforces the use of CSS for text styling by requiring you to participate in defining CSS rules for changing fonts, font sizes, and font colors.
The reason for the change to CSS is important. Pages styled with CSS are much more flexible than pages that use HTML <font> tags, and they can be maintained more easily. For example, when a site is redesigned, every page that uses <font> tags must be individually changed to match the new design. If you have hundreds or thousands of pages in your site, that’s a lot of work. Sites that use CSS to style text only need to change the style sheet document, and the changes automatically ripple through the whole site. You’ll learn more about using CSS to style text (especially for setting font properties) in Chapter 7. Some other formatting operations are still performed using HTML markup, and those are the ones we’ll explore in this chapter.
Applying HTML Text Styles
The most common text formatting is to make text bold or italicized, and of course Dreamweaver can do that with either HTML markup or a CSS rule. But it can also apply several other text styles, some of which are for specialized uses, as shown in and Table 4.1.
Dreamweaver offers a number of useful (and not so useful) HTML text styles.
Many of these text styles are meant for displaying programming or script code, so they won’t be used at all on many sites. Others, such as Underline and Strikethrough, are deprecated as of the HTML 4.01 standard, which means that they are obsolete and may not work in future browsers. Instead, you should use a CSS property. See “CSS Categories” in Chapter 7.
To apply an HTML text style
1. Select the text you want to change.
2. Choose Format > Style, and then choose the style you want from the submenu.
The text’s appearance changes.
Tip
Actually, by default Dreamweaver does not use the traditional <b> and <i> HTML tags for bold and italic, respectively. Instead it uses <strong> and <em> (for emphasis). The latter tags are preferred as part of best practices, because they are better handled by the screen readers used by visually impaired users. If you want to switch Dreamweaver back to using <b> and <i>, choose Edit > Preferences (Dreamweaver > Preferences) and, in the General category of the Preferences dialog, deselect “Use <strong> and <em> in place of <b> and <i>.”
Using Preformatted Text
Browsers usually ignore invisible formatting that doesn’t affect page content, such as tabs, extra spaces, extra line feeds, and the like. If you need to display text exactly as entered, however, you can use the Preformatted paragraph format, which wraps the text in the <pre>...</pre> tags and makes browsers display all of the text characters.
Originally, preformatted text was meant to display tabular data in rows and columns, as in the output of a spreadsheet. To make the information line up, browsers display preformatted text in a monospaced font such as Courier .
Preformatted text lines up neatly, as in this table.
To apply preformatting
1. Select the text you want to change.
2. From the Format pop-up menu of the HTML mode of the Property inspector, choose Preformatted .
Apply the style using the Property inspector by choosing Preformatted from the Format menu.
or
Choose Format > Paragraph Format > Preformatted Text.
The text changes appearance.
Tip
If you want to display tabular data, it often makes more sense to use a table rather than preformatted text. You get much more control over the table style and spacing of the items in the table, and you can add CSS to style the table’s contents if needed. See Chapter 10 for information about using tables.
Adding Line Breaks
Just as in a word processor, you press Enter (Return) in Dreamweaver to create a new paragraph. This is fine when you want to actually create a new paragraph, but not so great when you just want to move the cursor down a line, as you might want to do when entering an address. That’s because web browsers (and Dreamweaver) insert a blank line above and below a paragraph, so if you make each line of the address its own paragraph, it looks goofy .
Paragraphs have whitespace before and after them, which isn’t really appropriate for things like addresses.
What you want to do is add a line break, which moves the cursor down one line without creating a new paragraph. In the code, Dreamweaver adds the HTML <br /> tag to the end of the line.
To insert a line break
At the end of the line you want to break, press Shift-Enter (Shift-Return).
or
At the end of the line you want to break, in the Common category of the Insert panel, select Line Break from the Character pop-up menu.
The text changes .
After you replace the paragraph tags with line breaks, the address looks better.
Tip
Line breaks are invisible characters in both Dreamweaver and web browsers, but you can make them visible in Dreamweaver if you want. Choose Edit > Preferences (Dreamweaver > Preferences), and then click the Invisible Elements category. Select the check box next to “Line breaks,” and then click OK. Dreamweaver then displays line breaks in Design view .
With the appropriate preference enabled, you can see the invisible line break characters.
Indenting and Aligning Text with HTML
You won’t indent or align text in Dreamweaver as you would with a word processor. The most common kind of indenting, indenting the first line in a paragraph, is usually done with a tab in a word processor, but tabs have no effect in HTML. Instead, you can use the text-indent CSS style property. Similarly, there are CSS properties for text alignment. See Chapter 7 for more about using CSS.
You can add whitespace to text—and simulate a tab—with non-breaking spaces. See “Inserting Special Characters,” later in this chapter.
When you are indenting paragraphs to set them apart from preceding and following paragraphs, Dreamweaver uses the HTML <blockquote> tag. This indents both the left and right margins of the block-quoted paragraph. You aren’t limited to paragraphs; you can block quote any block element, such as headings.
Dreamweaver can align text with the left margin, right margin, or center of the page. You can also justify text, which adds space as needed between words so that both the left and right margins are aligned.
The method shown here adds alignment attributes to the HTML markup. You can also use Cascading Style Sheets to align text, which is covered in Chapters 7 and 8.
To block quote text
1. Click in the paragraph or other block element you want to indent.
2. Click the Indent button on the HTML mode of the Property inspector .
Use the Indent button to apply a block quote to your text.
or
Choose Format > Indent, or press Ctrl-Alt-] (Cmd-Opt-]).
The text changes .
The block quote nicely sets off the sonnet from the commentary text.
Tip
To add more indenting, click the Indent button on the Property inspector again. This nests the <blockquote> tags.
Tip
The CSS margin property is a much more flexible way to indent block elements, as described in Chapter 8.
To remove block quoting
1. Click in the paragraph or other block element you no longer want to indent.
2. Click the Outdent button on the Property inspector.
or
Choose Format > Outdent, or press Ctrl-Alt-[ (Cmd-Opt-[).
The text changes.
To align text
1. Click inside the paragraph you want to align.
2. Choose Format > Align, and then choose Left, Center, Right, or Justify from the submenu .
Choose a text alignment from the Format menu.
or
Use one of the keyboard shortcuts listed in Table 4.2.
Tip
Longtime Dreamweaver users may be thrown a bit by the removal of the alignment buttons from the HTML mode of the Property inspector. Those buttons have been moved to the CSS mode of the Property inspector. If you use the alignment buttons, Dreamweaver will add a style="text-align:" property to the HTML element. It will also open and show you the new CSS rule in the CSS Designer panel.
Working with Lists
Lists are an easy way to organize content on your webpage. Dreamweaver supports three types of lists:
Numbered lists or Ordered lists, for lists with items that need to be in a particular order . List items are numbered and indented from the left margin. If you add or remove items from the numbered list, it automatically renumbers.
Numbered lists automatically renumber if you insert a new item between two existing items.
Bulleted lists or Unordered lists, for lists of items in no particular order .
Bulleted lists are single-spaced and indented.
Definition lists, where each item has an indented subitem .
Definition lists have the definitions indented under the definition terms. The definition terms don’t have to be all uppercase—they just happen to be in this figure.
To create a list
1. Type the items for your list into the window. After typing each item, press Enter (Return).
2. Select the items in the list.
3. Choose Format > List, and then choose Unordered List, Ordered List, or Definition List from the submenu.
or
Click either the Unordered List or Ordered List button in the HTML mode of the Property inspector.
or
Click one of two buttons in the Structure category of the Insert panel: ul for Unordered List, or ol for Ordered List.
The text changes to the kind of list you chose.
Tip
At the end of your list, you can turn off the list function either by pressing Enter (Return) twice or by clicking the appropriate list button in the Property inspector again.
Tip
There is another button in the Structure category of the Insert panel that you can use to apply list tags to text. The li button marks text as a list item; the text must be within a bulleted or numbered list.
Tip
Though you can still create a definition list in Dreamweaver, Dreamweaver CC removed the two definition list item tags from the Insert panel. You can still add them in Code view. Use dt to tag text as a definition term, and dd to mark text as a definition description.
Tip
Because the Text category of the Insert panel was originally designed to help you work in Code view, some of the list buttons will cause the Dreamweaver window to change to Split view, so you can see the Code and Design panes at the same time. If you want to avoid code altogether, use the Property inspector or the menu bar to format your lists.
Setting list properties
You can change numbered list and bulleted list properties in Dreamweaver. Choose between five types of numbering, as shown in Table 4.3. For bulleted lists, you can choose either a round bullet (the default) or a square bullet. There are no properties to set for a definition list.
To set list properties
1. Click in the list you want to change to place the insertion point.
2. Choose Format > List > Properties.
The List Properties dialog appears .
In the List Properties dialog, you can change the way lists are numbered and bulleted.
3. Do one or more of the following:
In the List type pop-up menu, select Bulleted List, Numbered List, or Directory List (“definition list” is called “Directory List” in this dialog for some reason).
In the Style pop-up menu, select one of the Bulleted List or Numbered List styles.
Use the Start count text box to set the value for the first item in the numbered list.
4. Click OK.
Tip
You may notice that there is a fourth choice in the List type pop-up menu: Menu List. That choice creates an unusual type of list that is based on the <menu> tag. That tag was deprecated (that is, it was recommended that it not be used) when HTML 4.01 was standardized in 1999. We suggest that you avoid the use of the Menu List option. It’s one of those little things that should have long since been removed from Dreamweaver, in our view.
Nesting lists
You can indent lists within lists to create nested lists. Because nested lists do not have to be of the same type, you can create, for example, a numbered list with an indented bulleted list, and you can have multiple levels of nested lists within one overall list .
You can nest numbered lists inside bulleted lists.
To create a nested list
1. Click the end of a line within an existing list to place the insertion point.
2. Press Enter (Return).
Dreamweaver creates another line of the list.
3. Press Tab.
Dreamweaver creates a new indented sublist of the same type as the parent list. For example, if the parent list is a numbered list, the new sublist will also be a numbered list.
4. (Optional) If you want the sublist to be a different type of list than the parent list, click the Numbered List or Bulleted List button in the HTML mode of the Property inspector.
5. Type the list item.
6. Press Enter (Return).
Dreamweaver creates a new sublist item.
7. To return to the original list, use the up or down arrow keys to move the insertion point into one of the items in the original list, or click to place the insertion point where you want it.
Tip
You can also click the Outdent button in the HTML mode of the Property inspector to merge the sublist back into the main list.
Tip
Use the List Properties dialog to format sublists as well as lists.
Tip
If you try to create a sublist within a list that is in a table by pressing Tab, Dreamweaver jumps to the next cell rather than indenting and creating a nested list. One workaround is to create the nested list outside of the table, cut it, and then paste it in the table cell where you want it to go.
Inserting Special Characters
You can add special characters, such as the Euro, copyright, or trademark symbol, to your page in Dreamweaver without having to remember their bizarre HTML equivalents or odd keyboard combinations. In Dreamweaver, relief is just a menu choice away.
To insert a special character
1. Click in the page to place the insertion point where you want the special character to appear.
2. In the Common category of the Insert panel, choose the character you want from the Character pop-up menu .
Insert unusual characters from the Character pop-up menu in the Common category of the Insert panel.
or
Choose Insert > Character, and then choose the special character you want from the submenu.
or
If the character you want doesn’t appear in the menu, choose Other Characters from the pop-up menu in the Insert panel or choose Other from the Insert > Character submenu. The Insert Other Character dialog appears .
The Insert Other Character dialog provides the rest of the special characters Dreamweaver can insert.
3. Click the character you want to use, and then click OK to close the dialog.
Dreamweaver inserts the special character on your page.
Working with Font Styles
Font stacks determine which fonts a browser displays on your webpage. A browser uses the first font in the stack that is installed on the user’s system. If none of the fonts in the stack are installed, the browser displays the text as specified by the user’s browser preferences.
In Dreamweaver, all font control is provided via CSS, and you access it through the CSS tab of the Property inspector . There, you’ll find controls for the font family, the font style, the font weight, the font size, and the font color. These controls have changed somewhat in Dreamweaver CC. The two main changes are in the font family pop-up menu and the addition of the font weight pop-up menu. The Font pop-up menu now includes an entirely new set of font stacks (which previous versions of Dreamweaver called font groups) that Adobe says is more up to date in including standard fonts installed in Windows, OS X, and Linux. Font weight is specified in a range of 100 through 900 and specifies the heaviness of the font; Adobe has created a table of common font names and their numeric weight equivalents, which is reproduced in Table 4.4.
You’ll find Dreamweaver’s font styling controls in the CSS tab of the Property inspector. We’ve labeled this figure with each of the CSS properties and their controls.
2. In the CSS tab of the Property inspector, choose the font stack you want from the Font pop-up menu .
Apply a font stack using the Font pop-up menu.
The text will change to take on the appearance of the first font in the font stack that is installed on your system.
3. Make changes as needed to the font style, weight, size, and color values. Note that the font size unit values pop-up menu becomes active only if you first change the default value for font size.
Tip
Dreamweaver defines font stacks using the font-family CSS property and applies the font styling using in-line CSS styles, which you can later move to an external style sheet. You’ll learn more about CSS starting in Chapter 7, and more about moving internal CSS styles to external CSS styles in Chapter 9.
Tip
It’s often easier to define one or more styles once, name them, and then simply apply those styles to text. Again, because this uses CSS, you’ll learn how to do that in Chapter 7.
Using Web Fonts
One of the big constrictions on the freedom of web designers has always been the limited range of fonts they could use on pages. Because there are so many browsers running on so many different platforms, designers were more or less forced to use a very restricted set of fonts (often known as web-safe fonts) that were most likely to appear on Windows, Mac, Linux, and mobile devices. Microsoft’s set of web-safe fonts, including Arial, Verdana, Times New Roman, and Trebuchet, gained widespread use. They’re fine, but they’re boring.
Once again, CSS3 comes to the rescue. The @font-family rule allows you to use non-web-safe fonts by defining the location of a font resource, which can be either local to your machine or external. Different companies, including Adobe, Google, and others, have created online font repositories that contain a wide selection of attractive fonts that you can use in your webpages. If you do a web search for “web fonts,” you’ll find a wide selection of fonts, both free and available as a subscription service.
Using Adobe Edge web fonts
One of the big new features in Dreamweaver CC is its integration with Adobe Edge Fonts, which is a large library (more than 500) of free-to-use web fonts. Adobe Edge Fonts is a combination of Adobe’s own fonts, drawn from its much larger Typekit font service (www.typekit.com), and Google Fonts (www.google.com/fonts). When you use Adobe Edge web fonts in your pages, the fonts are delivered with the help of JavaScript to the user’s browser or to Dreamweaver’s Live view, from Adobe’s content delivery network (CDN). A CDN keeps copies of content, in this case font files, cached in servers across the globe. When a user needs a font, it gets served from a nearby server, speeding up the page load.
Dreamweaver CC uses the new Manage Fonts dialog to add fonts from the Adobe Edge Fonts collection to the Font menu in the CSS tab of the Property inspector. You can then apply those fonts to your own pages.
To show you how easy it is to use web fonts, we’ve created a simple example based on Alice’s Adventures in Wonderland. It shows part of a famous conversation between Alice and the White Queen, with different fonts used for each character’s dialogue .
In this example, we styled Alice’s and the White Queen’s dialogue differently by using web fonts.
or
At the bottom of the Font pop-up menu in the CSS tab of the Property inspector, choose Manage Fonts.
The Manage Fonts dialog appears, set to the Adobe Edge Web Fonts tab .
You’ll begin adding Adobe Edge web fonts in the Manage Fonts dialog.
2. To add fonts to your font list, scroll through the font samples until you find fonts that you like, or use the search field or the filter buttons to narrow down your choices. To choose a font, click it, which will cause a check mark to appear in the font’s sample. To see just the fonts that you’ve chosen, click the “Show fonts added to font list” button .
Once you’ve picked the font you want, see them all by clicking the “Show fonts added to font list” button.
3. Click Done.
The web fonts are added to the bottom of the Font menu .
After you choose the fonts in the Manage Fonts dialog, they are added to the Font pop-up menu in the Property inspector.
4. In Design view, select the text to which you want to apply a font.
5. From the Font menu in the CSS tab of the Property inspector, choose the web font you want. Repeat as necessary for any other text on the page, possibly with different web fonts.
The text won’t appear to have changed, because Dreamweaver uses JavaScript to load web fonts.
6. Click the Live View button in the Document toolbar to preview in Dreamweaver how the web fonts will look .
You can preview how the web fonts will look without leaving Dreamweaver by switching to Live view.
Using local web fonts
It’s possible to have web font files that you have locally, and that you wish to include in the Font menu and then upload to your website to be served along with the rest of your site. Dreamweaver CC can handle web fonts in the EOT, WOFF, TTF, and SVG formats. Once again, you’ll use the Manage Fonts dialog to make the fonts available for use in Dreamweaver.
To use local web fonts
1. Choose Modify > Manage Fonts.
The Manage Fonts dialog appears, set to the Adobe Edge Web Fonts tab 
.
2. Click the Local Web Fonts tab.
3. Click the Browse button next to the font format that you want to add.
4. In the resulting Open dialog, navigate to the location of the font file, select it, and click Open.
5. Back in the Manage Fonts dialog, select the check box next to “I have properly licensed the above font(s) for website use,” then click the Add button.
The font appears in the box below .
If you have web fonts on your local machine, you can make them usable in Dreamweaver with the Manage Fonts dialog.
6. (Optional) Repeat steps 3–5 to add additional fonts.
7. Click Done.
The local web fonts are added to the Font pop-up menu in the Property inspector. Apply them as you would a font stack or an Adobe Edge web font.
Specifying custom font stacks
If you want your own custom font stack, you can do that with the Manage Fonts dialog. You can choose from fonts you have installed on your machine, and also any local web fonts you’ve previously installed.
To create a custom font stack
1. Choose Modify > Manage Fonts.
The Manage Fonts dialog appears, set to the Adobe Edge Web Fonts tab .
2. Click the Custom Font Stacks tab.
The Custom Font Stacks pane appears 
and displays three categories of information:
Use the Manage Fonts dialog to create, modify, or remove font stacks.
Font list: Displays current font stacks.
Chosen fonts: Displays fonts in the chosen stack.
Available fonts: Displays all the fonts available on your system. The font selected is displayed in the text field below.
3. Do any of the following:
To add or remove fonts from a font stack, select the font and click the arrow buttons between the Chosen fonts and Available fonts lists.
To add or remove a font stack, select it and click the plus (+) or minus (–) button at the top left of the dialog.
To add the name of a font that is not installed on your system, type the font name in the text field below the Available fonts list and click the left-facing arrow button to add it to the group.
To move a font group up or down in the list, select it from the Font list box and then click the arrow buttons at the top right of the dialog.
4. Click Done to accept your changes.
Adding Automatic Dates
Dreamweaver can insert the current date and time in a variety of formats into your webpage. You can choose whether or not to add the day of the week.
To insert the current date
1. Click in your page to place the insertion point where you want the date to appear.
2. Choose Insert > Date.
The Insert Date dialog appears .
Dreamweaver lets you insert dates into your pages in a variety of formats.
3. Do one or more of the following:
If you want the name of the day to appear, use the Day format pop-up menu to set the appearance of the day of the week.
Make a selection from the Date format list.
If you want the time to appear, choose the 12-hour or 24-hour format from the Time format list.
Select “Update automatically on save” if you want that to happen. This is very useful if you want visitors to your site to know when the page was last updated.
4. Click OK.
Dreamweaver inserts the date (and any additional items you chose) into your page.
Finding and Replacing
Dreamweaver’s Find and Replace feature can save you a lot of time, because you can automatically find and change text on a single page, in pages within a folder, on pages you select, or throughout your site. You can choose to change text in Design view, or you can search and change just in Code view.
Imagine that you have a company’s site with dozens of pages devoted to singing the praises of its premier product, the amazing WonderWidget. Then one day you get a call from your client letting you know that because of a trademark dispute, the company has to rename the product WonderThing. Rather than opening each page and making one or more changes on each of them, just put Dreamweaver’s Find and Replace feature to work, and you’ll be done in just a few minutes.
The Find and Replace window
The Find and Replace window, which you open by choosing Edit > Find and Replace or by pressing Ctrl-F (Cmd-F), will be the tool you use for changing text . Let’s look at some of this window’s parts.
The Find and Replace dialog provides a lot of power for making quick changes on a single page or throughout your site.
The Find in pop-up menu allows you to tell Dreamweaver the scope of the search. You can choose to find text in the Current Document (the default); in Selected Text; in Open Documents; in a Folder you select; in Selected Files in Site; or in the Entire Current Local Site.
The Search pop-up menu lets you choose what kind of search you want to do. You can choose Text; Text (Advanced), which gives you additional search options; Source Code, which allows you to search in the HTML; or Specific Tag, which searches the contents of HTML tags that you select. The latter two options are covered later in this chapter.
The Find field is where you enter the text you want to find.
The Replace field is where you enter the text you want to use to replace the found word.
The Save Query button allows you to save searches for later use. This is great for instances where you create complex queries, so you don’t have to do all the work to set up the search again.
The Load Query button allows you to retrieve a saved search.
The Search options let you constrain your searches. “Match case” returns results with the same uppercase and lowercase letters as the text you entered in the Find field. “Match whole word” finds the text only if it matches one or more complete words. “Ignore whitespace” tells Dreamweaver not to pay attention to additional spaces and non-breaking spaces. It’s on by default, and it’s usually best to leave it on. Finally, “Use regular expression” (covered later in this chapter) lets you use wildcard characters to construct extremely complex searches.
Finding Text with a Simple Search
Simple searches in Dreamweaver work pretty much the same way that they do in a word processor. Just enter the text you want to find and the text that you want to replace it with, and away you go. Of course, you don’t have to replace text; if you want you can just use the Find and Replace dialog to find text in one or more files.
To find text
1. Choose Edit > Find and Replace, or press Ctrl-F (Cmd-F).
The Find and Replace dialog appears (see in the previous section).
2. From the Find in pop-up menu, choose one of the options for the scope of your search.
3. From the Search pop-up menu, choose Text.
4. In the Find field, type the word or phrase that you’re looking for.
5. Click the Find Next button.
Dreamweaver finds and highlights the found text. If the scope of the search included more than one page, Dreamweaver opens the first file the text was found within and highlights the text. If the text isn’t found, you’ll get a message to that effect at the bottom of the Find and Replace dialog.
or
Click the Find All button.
Dreamweaver does the search, closes the Find and Replace dialog, and opens the Search tab of the Results panel .
The Search tab of the Results panel shows you the filename and matched text when you click the Find All button.
6. If you clicked Find All in step 5, double-click one of the search results in the Results panel to open it and highlight the found text.
Tip
If you select some text before you bring up the Find and Replace dialog, the text automatically appears in the Find field, as long as you selected fewer than 255 characters.
Tip
You can do a quick find on the current page by selecting some text and then choosing Edit > Find Selection or pressing Shift-F3 (Cmd-Shift-G). Dreamweaver highlights the next occurrence of the text you selected.
Tip
You can click the green triangle button in the Results panel to reopen the Find and Replace dialog with the same search terms.
Tip
If you have a search that’s running for a very long time, you can cancel it by clicking the octagonal red Cancel button in the Results panel (this button is dimmed in ).
Tip
You can clear the search results in the Results panel by right-clicking in the panel and choosing Clear Results.
To find the next result
Choose Edit > Find Next, or press F3 (Cmd-G).
Dreamweaver finds and highlights the next result of the search without reopening the Find and Replace dialog.
To find and replace text
1. Choose Edit > Find and Replace, or press Ctrl-F (Cmd-F).
The Find and Replace dialog appears.
2. From the Find in pop-up menu, choose one of the options for the scope of your search.
3. From the Search pop-up menu, choose Text.
4. In the Find field, type the word or phrase that you’re looking for.
5. In the Replace field, type the replacement word or phrase.
6. Click the Find Next button.
When Dreamweaver finds the text, it is highlighted.
Dreamweaver replaces the found text with the contents of the Replace field.
or
Click Replace All.
Dreamweaver warns you that you cannot undo changes made in unopened files. Of course, you can undo changes in any open documents by choosing Edit > Undo. If you still want to make the changes, click Yes.
Dreamweaver searches through the entire scope of the search, replacing all occurrences of the found text. When it is done, you’ll see a message telling you how many changes it made.
Use a Replace operation to expand abbreviations and save time while you’re creating pages. For example, let’s say that you’re creating a website about JavaScript. Rather than typing JavaScript again and again while writing the site, just type “JS”; then before you upload the site, do a Find and Replace, changing every occurrence of “JS” to “JavaScript.” You can do the same thing with company names, people’s names, or almost any text that you repeat a lot.
Tip
Dreamweaver does not update the Search tab of the Results panel when you perform Replace operations.
Tip
If you get a bunch of search results but only want to make replacements in some of those results, you can do that—and save a bunch of time in the process. Rather than opening each page separately and applying the replacement, do it all in one swoop by using the Results panel and the Find and Replace dialog together. First, click the green triangle in the Results panel, which reopens the Find and Replace dialog. In the Results panel, Ctrl-click (Cmd-click) the results where you want to make replacements. Those lines will highlight. Then switch back to the Find and Replace dialog, and click Replace (not Replace All). The files that are modified are marked by a green dot next to their names in the Results panel.
Performing Advanced Text Searches
An advanced text search allows you to do a more precise search by looking for text within (or outside of) particular HTML tags. You can further fine-tune the search by specifying particular attributes of the HTML tags.
Perhaps the most common example of why you would want to use such a search lies in the title of your webpages. Whenever you create a new page in Dreamweaver, the page automatically gets the title “Untitled Document.” If you forget to enter titles, you could end up with a bunch of pages on your site with the same “Untitled Document” name (it’s easy to do; while writing this section, I found and fixed a page on my personal site that had been titled “Untitled Document” for four years!). A basic search and replace won’t help, because “Untitled Document” is within the <title> tag of the pages, and a basic search only searches the body of a document. An advanced text search, which combines text and HTML searches, is the solution.
The Find and Replace dialog appears.
2. From the Find in pop-up menu, choose one of the options for the scope of your search.
3. From the Search pop-up menu, choose Text (Advanced).
The dialog changes and adds the option to search tags .
The Text (Advanced) option allows you to search for text within HTML tags.
4. In the Find field, type the word or phrase that you’re looking for.
5. Choose either Inside Tag or Not Inside Tag from the pop-up menu next to the + and – buttons.
Inside Tag refers to text that is enclosed within a container tag, such as <p>...</p>.
6. Choose an HTML tag from the Tag pop-up menu.
7. (Optional) If you want to narrow the search further by limiting the search to a particular attribute of the tag you chose in step 6, click the + button. If you do not, skip to step 12.
The attribute line is added to the dialog .
You can narrow your search further by adding one or more attributes to the tag search.
An example of an attribute would be the class attribute of the <table> tag.
8. (Optional) From the first pop-up menu in the attribute line, choose With Attribute or Without Attribute.
9. (Optional) Choose the attribute you want from the next pop-up menu.
Dreamweaver only shows the attributes for the tag you chose in step 6.
10. (Optional) Set a comparison in the next pop-up menu, choosing from = (equal), < (less than), > (greater than), or != (not equal). These only work if the attribute’s value is a numeric amount, such as the size attribute of the <input> tag—for example, <input size="4">.
11. (Optional) In the next field (which is also a pop-up menu), type the value of the attribute. This can be a number or text.
or
Choose [any value] from the pop-up menu. This is useful when you want all tags with a particular attribute, but you don’t care what the value of the attribute is.
12. If you want to replace the found text, type the replacement word or phrase in the Replace field.
13. Depending on what you want to do, click Find Next, Find All, Replace, or Replace All.
Finding and Replacing in Source Code
Dreamweaver’s ability to find and replace within the HTML source code is extremely powerful. You can look for text within particular tags, and you can even look within particular tags for specific attributes. You can also find text relative to other tags. For example, you can change specified text within a <table> tag and leave everything else alone. If you like, you can even use Find and Replace to replace, delete, or change tags and attributes.
Searching and replacing inside source code is much like regular text searches except you’ll be working in Code view. When you perform the search, Dreamweaver automatically changes to Code view, so you don’t have to do it manually before you start the search.
To find and replace in source code
1. Choose Edit > Find and Replace, or press Ctrl-F (Cmd-F).
The Find and Replace dialog appears.
2. From the Find in pop-up menu, choose one of the options for the scope of your search.
3. From the Search pop-up menu, choose Source Code .
Choose Source Code to search the HTML in Code view.
4. In the Find field, type the word or phrase that you’re looking for.
5. In the Replace field, type the replacement word or phrase.
6. Depending on what you want to do, click Find Next, Find All, Replace, or Replace All.
Tip
If you choose Current Document from the Find in pop-up menu, searches will not search related files, such as attached CSS or JavaScript files. To include those in your search scope, choose Open Documents in the Find in pop-up menu.
Finding and Replacing with a Specific Tag
A specific tag search lets you find and modify HTML tags. This has many uses; for example, you may still need to convert old sites that used <font> tags to CSS. You can use a specific tag search to strip out all those old tags, replacing them with CSS classes. Or you can change the now-passé <b> and <i> tags to their more modern equivalents, <strong> and <em>.
The key to the specific tag search is the Action menu, which specifies what replacement action Dreamweaver will carry out on the tags found in the search. See Table 4.5 for a list of the actions available.
To find and replace within a specific tag
1. Choose Edit > Find and Replace, or press Ctrl-F (Cmd-F).
The Find and Replace dialog appears.
2. From the Find in pop-up menu, choose one of the options for the scope of your search.
3. From the Search pop-up menu, choose Specific Tag.
The Find and Replace dialog changes to show the tag functions .
When you are searching within a specific tag, you can add attributes for that tag, and you can also specify actions that you want to perform on the found tag.
4. Choose the tag that you want from the tag pop-up menu that appears next to the Search pop-up menu.
You can either scroll the pop-up menu to find a tag, or you can type the first letter of the tag in the box. Dreamweaver automatically scrolls the list. Depending on the tag you choose, Dreamweaver will change the available actions in the Action pop-up menu, so don’t be surprised if the contents of that menu look a bit different from those listed in Table 4.5.
5. (Optional) If you want to narrow the search to a particular attribute of the tag that you selected, click the + button and then choose values for that attribute, as discussed previously in this chapter.
If you want to narrow the search further, you can do so by clicking the + button and adding attributes.
6. Choose from the Action pop-up menu, and depending on the action you chose, set any required values.
7. Depending on what you want to do, click Find Next, Find All, Replace, or Replace All.
Using Regular Expressions for Searching
A regular expression is a pattern, written using special symbols, that describes one or more text strings. You use regular expressions to match patterns of text, so that Dreamweaver can easily recognize and manipulate that text. Like an arithmetic expression, you create a regular expression by using operators—in this case, operators that work on text rather than numbers.
The operators in a regular expression (see Table 4.6, on page 129) are like the wildcard symbols that you may have seen in find and replace features in other programs, such as word processors, except that regular expressions are much more powerful. They can also be complex and difficult to learn and understand, so if Dreamweaver’s other find and replace methods are sufficient for you, you may not need to bother with regular expressions.
Learning regular expressions is beyond the scope of this book, but we’ll show you how to use one in an example. Let’s say that you want to find all of the HTML comments throughout your site. You can use this simple regular expression (we know it looks weird, but don’t lose heart; all will be explained):
<!--[wW]*?-->
Let’s break down that expression. You read a regular expression from left to right. This one begins by matching the beginning characters of the HTML comment, <!--. The square brackets indicate a range of characters; for example, [a-z] would match any character in the range from a to z. In this case, the range includes two regular expression operators: w means “any single letter, number, or the underscore,” and W means “any character other than a letter, number, or underscore.” Taken together as a range, [wW] means “any character.”
The * means “the preceding character (in this case, everything found by the contents of the square brackets) zero or more times,” and the ? means “the preceding character zero or one time.” Taken together, they match a comment of any length. The regular expression ends by matching the closing characters of an HTML comment, -->.
The Find and Replace dialog appears.
2. From the Find in pop-up menu, choose one of the options for the scope of your search.
3. From the Search pop-up menu, choose any of the options.
In this case, since we’re looking for HTML comments, you should choose Source Code.
4. Enter the regular expression in the Find field .
You can add regular expressions to both the Find and Replace fields.
5. Select the check box next to “Use regular expression.”
When you choose “Use regular expression,” it disables the “Ignore whitespace” search option, because they are mutually exclusive.
6. (Optional) Enter text or a regular expression in the Replace field.
7. Depending on what you want to do, click Find Next, Find All, Replace, or Replace All.
Tip
There’s a lot to say about regular expressions, certainly enough to fill an entire book or 12. If you’re interested in learning more, check out Mastering Regular Expressions by Jeffrey Friedl (O’Reilly Media, 2006). For a lighter read, try Teach Yourself Regular Expressions in 10 Minutes by Ben Forta (Sams, 2004). There are also many websites that provide regular expression tutorials, which you can find with a web search.
Checking Spelling
No word processor comes without a spelling checker these days, and Dreamweaver is no different (even though it’s not a word processor). You can check the spelling on the currently open page and add words to Dreamweaver’s spelling checker in a personal dictionary.
To spell-check your page
1. Choose Commands > Check Spelling, or press Shift-F7 (same on Windows and Mac).
If Dreamweaver finds a word it believes is spelled incorrectly, the Check Spelling dialog opens . Otherwise, you’ll get a dialog that says “Spelling check completed.”
Click Add to Personal in the Check Spelling dialog to add an unknown word to the user’s personal Dreamweaver dictionary.
2. Click the Add to Personal button if the word Dreamweaver found is correct and you want to add it to your personal dictionary so that Dreamweaver doesn’t flag it as an error again.
or
Click Ignore to tell the spelling checker to ignore this instance of the word, or click Ignore All to ignore the word throughout the document.
or
Select a replacement from the Suggestions list, or type the replacement in the Change to text box. Then click the Change button, or click Change All to replace the word throughout the document.
3. When the spelling check is finished, click Close.