7.2.5. Закрытие пустых тегов с атрибутами

Закрытие тегов, не содержащих атрибуты, не представляет особой сложности. Но, например, при закрытии <img src="images/image.gif" width="200" height="150"> возникает проблема, подобная проблеме по замене тега <font>, так как различные атрибуты и их значения усложняют поиск.

После закрытия тегов <img> нужно будет закрыть все остальные пустые теги с атрибутами. В этом задании также будут закрыты теги <area>, расположенные в карте ссылок на каждой странице. Если бы сайт содержал формы, таким же способом пришлось бы закрыть пустые теги <input>, которые тоже загружаются с атрибутами. Формы будут добавлены на сайт в последующих уроках.

75. В  index.htm откройте Find and Replace и убедитесь, что выбран Entire Current Local Site, что в списке Search выбран Specific Tag, а в списке тегов HTML — пункт img. В случае необходимости щелкните на кнопке Remove Search Criterion для того, чтобы не было никаких дополнительных критериев поиска.

76. В списке Action укажите Add After. Суть способа состоит в том, чтобы найти каждый тег <img>, вне зависимости от его атрибутов и их значений, и добавить после него особый текст. При выборе пункта Add After появится текстовая область, позволяющая ввести эту дополнительную строку.

77. Введите в текстовую область надпись QWERTY.

При запуске операции поиска и замены Dreamweaver добавит надпись QWERTY сразу после угловой скобки >, закрывающей тег <img>. Эта скобка и является проблемой, которую требуется устранить, поскольку она должна иметь вид /> вместо >. Но если просто запустить поиск всех > и заменить их на />, такой поиск изменит все угловые скобки, включая скобки тегов, которые написаны правильно, например, <p>. Так что необходимо указать только те угловые скобки, которые закрывают теги <img>.

При добавлении уникальной надписи QWERTY, следующей после угловой скобки, закрывающие скобки > каждого тега <img> оказываются помеченными. После этого достаточно запустить вторую операцию поиска для замены кода >QWERTY на />, что соответствует правильному написанию закрывающей угловой скобки для пустого тега.

78. Нажмите Replace All, а затем Yes. Если вы взглянете на документ в режиме Design, то убедитесь, что рядом с каждым изображением на странице появилась надпись QWERTY. Это свидетельствует о том, что операция поиска и замены проведена успешно.

79. Снова откройте Find and Replace и в списке Search For выберите Source Code. В верхней текстовой области введите >QWERTY (не забудьте об угловой скобке), а в нижнем текстовом поле введите  пробел/> (не забудьте пробел).

80. Нажмите кнопку Replace All. Когда появится окно с предупреждением, нажмите Yes. Щелкните на наборе изображений в режиме Design внимательно просмотрите соответствующий код в режиме Code. Все элементы <img> теперь записаны по правилам XHTML. От надписи QWERTY не осталось никаких следов.

81. Повторите операцию с надписью QWERTY, чтобы должным образом закрыть все теги <area> — см. 75-80.

82. Сохраните всё  File, Save All