Maintaining a Web site involves daily chores, such as building new pages and removing old material. But comprehensive changes–say, swapping in a new company name on 10,000 pages–can mean many late nights of tedious work. In the first installment of our new column for Web designers, you’ll learn how Macromedia Dreamweaver’s Find And Replace feature can get you home on time.
Changing a Site
Imagine changing hundreds or even thousands of Web pages in seconds. You can do it with Dream-weaver’s Find And Replace command, which works much like the Find And Replace feature in programs such as Microsoft Word. Though in a word processor this feature affects only the current document, in Dreamweaver (800/457-1774,
) you can use it to search multiple files. Just go to the Edit menu, open the Find And Replace window (or press command-F), and then select Entire Local Site from the Find In list. Be careful–changes to unopened files are permanent. It’s a good idea to back up your site files before making widespread adjustments.
The ability to search an entire site and replace a word or phrase is very useful, but it’s only the beginning of what Dreamweaver’s Find And Replace feature can do. The command’s most powerful option is the ability to find a particular HTML tag and perform actions on the tag, its attributes, or its contents. For example, you can use one of these Specific Tag searches to convert underlined text to bold by changing all
tags, or to remove every instance of a particular tag–think
Out with the Old
The World Wide Web Consortium (
), which determines HTML standards, may soon phase out some common HTML tags, such as the
tags used for formatting text. Although browser companies often deviate from standards, browsers may someday stop supporting these tags, so you should have a plan for changing your site to keep up with the times. (For a list of these deprecated HTML tags and their suggested replacements, see
The most straightforward solution is to eliminate the tag altogether: open Dreamweaver’s Find And Replace window and choose Specific Tag from the Search For menu. Select Font from the Tag menu, and then choose Strip Tag from the Action menu. Click on the minus () button to eliminate the unnecessary tag-modifier menu that appears below the Search For menu; then click on the Replace All button to finish the job.
Simply deleting every
tag will leave your site a dull wash of default text. Fortunately, you can use Dreamweaver’s tag-based Find And Replace options to bring your site’s formatting into the future with Cascading Style Sheets.
In with the New
The World Wide Web Consortium intends Cascading Style Sheets (CSS) to eventually replace
tag formatting. In addition to supporting the
options–color, size, and typeface–CSS lets you add leading, margins, borders, and other advanced typographic properties. (For tutorials and an introduction to these style sheets, visit
If you’ve used HTML tags to structure your pages logically–for example, applying heading tags (
) to headlines–you’re in good shape. Just create a style with the desired properties for the heading tag, choose
from the tag menu, click on the plus sign (+), select Inside Tag from the drop-down tag-modifier menu, and choose the appropriate tag.
Things get trickier if you’ve used several permutations of the
tag to format your text. Say a page contains four paragraphs identified by the
(paragraph) tag. Three of the paragraphs contain the body text and are formatted in dark blue using the
tag. But the fourth paragraph contains a news announcement that’s red, in a different font and size. Ideally, you’d create separate styles for body text and news announcements and apply them to the appropriate paragraphs. For example, to apply a style called “announcement” to a paragraph, add the class attribute to the
tag, like this: <
The difficulty comes in identifying and applying a class to
theparagraphs containing news announcements. In Dreamweaver, the best way tohandle this is to use the unique combination of tags and attributesformatting your text as the search pattern in a Find And Replace operation.In the previous example, if you’d originally used the font tag to formatthe annoucement, the HTML would look like this:
<font size=”5″ face=”Arial,Helvetica, sans-serif” color=”#FF0000″>. Because it’s contained inside of ap (paragraph) tag, you can use a Specific Tag query to pinpoint yoursearch, and apply the appropriate style to every announcement paragraph inyour site. (After doing so, remember to eliminate the original fontformatting, so you’re left with pure CSS formatting.)
Regular Expression Overdrive
Adding textual descriptions in each image’s
attribute helps visitors who are surfing without graphics or who are visually impaired–but it’s easy to overlook this important step.
Enter Find And Replace. Let’s say you use a graphic named “banner.gif” on each of a site’s 2,000 pages, and you need to set that image’s
attribute quickly. Open the Find And Replace window. To search every file in your site, choose Select Entire Local Site from the Find In menu; from the Search For menu, choose the Specific Tag option.
Next, select the
tag to search for images. But you don’t want to find
image, so you should set several tag modifiers to limit your search. Choosing Without Attribute and selecting
from the menu will bring up only images that don’t have an
The final part of this search is a little tricky. Although you know you’re looking for the “banner.gif” graphic, the
attribute–the part of the
tag that includes the file name–will vary from page to page. Depending on a page’s location relative to the graphic, the
might be “banner.gif,” “images/banner.gif,” or even “../../../images/banner.gif.” You need a way to find every
attribute that ends in “banner.gif.”
The solution is to use a
–a set of special characters that let you find patterns within text (see ”
Transform HTML with Regular Expressions,”
In Dreamweaver’s Find And Replace window, select the Use Regular Expressions option. In our example, you’re searching for a particular pattern of zero or more characters followed by the text “banner.gif.” A period (
) stands for a single character such as a letter, number, or punctuation mark. An asterisk (
) means “find the preceding character zero or more times.” So combining
character zero or more times.” By themselves, these two characters match
, but with the name of the file added to the end–
–the search will yield every path that leads to the file.
All that’s left is to tell Dreamweaver what to do when it finds “banner.gif.” Choose Set Attribute from the Action menu; select
rom the Attribute menu. In the To field, type your text. Click on the Replace All button, and Dreamweaver will take care of the rest.
Dreamweaver’s Find And Replace command will eliminate hours of unfulfilling grunt work so you can spend your time on the fun, creative side of Web development.
DAVID SAWYER McFARLAND is the president of Sawyer McFarland Media (
) and the author of
Dreamweaver 4: The Missing Manual
(Pogue Press/O’Reilly, 2001).
Mighty Find and Replace
In Dreamweaver’s Find And Replace dialog box, you can specify a tag to search for (A) and an action to perform on that tag (B). To refine the search, add one or more conditions using the tag-modifier menu (C). Click on the floppy disk icon (D) to save search parameters; click on the folder icon (E) to recall saved queries.