Web Publishing Secrets
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, www.macromedia.com ) 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.
Get Specific 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 u tags to b tags, or to remove every instance of a particular tag--think blink.
Out with the Old
The World Wide Web Consortium ( www.w3c.org ), which determines HTML standards, may soon phase out some common HTML tags, such as the font 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 www.codehelp.co.uk/html/deprecated.html.)
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 font 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 font tag formatting. In addition to supporting the font 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 Webmonkey.)
Easy Replacements If you've used HTML tags to structure your pages logically--for example, applying heading tags ( h1 to h6 ) to headlines--you're in good shape. Just create a style with the desired properties for the heading tag, choose font from the tag menu, click on the plus sign (+), select Inside Tag from the drop-down tag-modifier menu, and choose the appropriate tag.
Messy Replacements Things get trickier if you've used several permutations of the font tag to format your text. Say a page contains four paragraphs identified by the p (paragraph) tag. Three of the paragraphs contain the body text and are formatted in dark blue using the font 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 p tag, like this: < p class="announcement">.
The difficulty comes in identifying and applying a class to just 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 alt 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 alt 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 img tag to search for images. But you don't want to find every image, so you should set several tag modifiers to limit your search. Choosing Without Attribute and selecting alt from the menu will bring up only images that don't have an alt attribute.
The final part of this search is a little tricky. Although you know you're looking for the "banner.gif" graphic, the src attribute--the part of the img tag that includes the file name--will vary from page to page. Depending on a page's location relative to the graphic, the src might be "banner.gif," "images/banner.gif," or even "../../../images/banner.gif." You need a way to find every src attribute that ends in "banner.gif."
The solution is to use a regular expression --a set of special characters that let you find patterns within text (see " Transform HTML with Regular Expressions," Create, November 1998).
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 . and * means "match any character zero or more times." By themselves, these two characters match everything , but with the name of the file added to the end-- .*banner.gif --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 alt f 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 ( www.sawmac.com ) 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.