Closing Empty Tags That Have Attributes
Earlier in the lesson, you easily closed the empty tags that lack attributes; for example, you had Dreamweaver find <br> and replace it with <br />. But closing empty tags that have attributes is a different story. That is, closing off <img src="images/image.gif" width="200" height="150"> poses the same challenge that the <font> tag did: the differing attributes and their values make the tags harder to search for.
As with the <font> tag, Dreamweaver can write the regular expressions needed to successfully find all of the <img> tags. You have it do so by choosing Specific Tag and by picking img from the HTML Tag List drop-down menu. Unfortunately, there is no "Close Empty Tag in XHTML Style" action in the Find and Replace dialog, which means that the finding is going to be easier than the replacing. Still, there is a workaround, which, if somewhat ugly, gets the job done.
Once you've closed the <img> tags, you'll also need to close the other empty tags that have attributes. In this task, you'll also close the <area> tags used on each page in the image map. If the site had forms (it doesn't, yet), you'd also use this method to close <input> tags, which are also empty and loaded with attributes.
With index.htm open, open the Find and Replace dialog, and verify that Entire Current Local Site is selected. Verify that Specific Tag is selected in the Search For drop-down menu, and choose img from the HTML Tag List drop-down menu. If necessary, click the Remove Search Criterion button, so that no additional search criteria are specified.
This part of the routine is probably getting familiar.
In the Action drop-down menu, choose Add After.
The strategy here is to find every <img> tag, regardless of its attributes and their values, and add a special string of text after it. As soon as you choose Add After, a text area appears, which enables you to type in that extra string.
Type QWERTY in the text area.
When you run this Find and Replace operation, Dreamweaver will append QWERTY directly after the <img> tag's closing angle bracket (>). This closing > is the problem that you are trying to fix, since it should be "/> " rather than just ">", But you can't go through and find all ">" and replace it with "/>", because that search would change all angled brackets, including those in tags such as the <p> tag that are used correctly. You need to be able to identify all of the angled brackets that close <img> tags only.
By appending the unique QWERTY text string after the angled bracket, you have in effect marked every closing > of every <img> tag in the site. Then you can run a second Find and Replace operation that replaces ">QWERTY" with "/>", which is the correct closing syntax. Take the time to be a little creative with Find and Replace, and you can solve all sorts of large problems.
NOTE
QWERTY is not a keyword or special term. It was just a unique string that I know doesn't appear anywhere else in the site. You could, for example, use your name (as long as it isn't Newland) and achieve the same effect.
Click Replace All, and, as usual, Yes in the warning dialog that appears.
If you take a moment to look at the document in design view, you'll see QWERTY appear after all of the images in the document. It's not pretty, but you know it worked.
Reopen Find and Replace, and in the Search For drop-down menu, choose Source Code. Type >QWERTY in the top text area (don't forget the angle bracket), and then type /> in the lower text area (don't forget the space).
Now that you've told Dreamweaver to look for the angled brackets that close <img> tags only, you can tell Dreamweaver to replace that bracket with the proper XHTML closing syntax.
Click Replace All, and click Yes when the warning dialog appears.
Click a handful of images in design view, and look at the corresponding code in code view. You should see perfectly normal <img> elements in XHTML style. No one has to know about the whole QWERTY thing.
Repeat the entire task, including the QWERTY process, to properly close all of the <area> tags in the document.
If you want to verify that this change worked, you'll need to open any page other than index.htm. The <area> tags are used as a part of the image map on the navigation bar. The code for the image map is at the very bottom of the document, just above the closing </body> tag.
Save index.htm.
