Основы работы в Dreamweaver
Закрытие пустых тегов с атрибутами
Закрытие тегов, не содержащих атрибуты, не представляет особой сложности. Так, Dreamweaver просто выполняет, в частности, поиск тега <br> и заменяет его на <br /> и т. д. Но закрытие пустых тегов с атрибутами – это совсем другая история. Так, например, при закрытии <img src="images/image.gif" width="200" height="150"> возникает проблема, подобная проблеме по замене тега <font>, так как различные атрибуты и их значения усложняют поиск.
Как и в случае с тегом <font>, Dreamweaver может создать регулярное выражение, необходимое для того, чтобы провести успешный поиск всех тегов<img>. Для этого выбирается опция Specific Tag (Специальный тег), а в списке тегов HTML следует воспользоваться вариантом img. К сожалению, в диалоговом окне Find and Replace (Найти и заменить) нет действия "Close Empty Tag in XHTML Style" ("Закрыть пустой тег в XHTML-стиле"). Таким образом, поиск будет гораздо проще, чем замена. Тем не менее, существует обходной путь, который является не особо элегантным, но приводит к желаемым результатам.
После закрытия тегов <img> нужно будет закрыть все остальные пустые теги с атрибутами. В этом задании также будут закрыты теги <area>, расположенные в карте ссылок на каждой странице. Если бы сайт содержал формы, таким же способом пришлось бы закрыть пустые теги <input>, которые тоже загружаются с атрибутами. Формы будут добавлены на сайт в последующих уроках.
- В документе index.htm откройте диалоговое окно Find and Replace (Найти и заменить) и убедитесь, что выбран пункт Entire Current Local Site (Поиск на текущем сайте). Убедитесь, что в раскрывающемся списке Search (Поиск) выбран пункт Specific Tag (Специальный тег), а в списке тегов HTML – пункт img. В случае необходимости щелкните на кнопке Remove Search Criterion (Удалить критерий поиска) для того, чтобы не было никаких дополнительных критериев поиска.
Эта часть процедуры должна уже стать привычной.
- В раскрывающемся списке Action (Действие) укажите вариант Add After (Добавить после).
Суть способа состоит в том, чтобы найти каждый тег <img>, вне зависимости от его атрибутов и их значений, и добавить после него особый текст. При выборе пункта Add After появится текстовая область, позволяющая ввести эту дополнительную строку. - Введите в текстовую область надпись "QWERTY".
При запуске операции поиска и замены Dreamweaver добавит надпись QWERTY сразу после угловой скобки (>), закрывающей тег <img>. Эта скобка и является проблемой, которую требуется устранить, поскольку она должна иметь вид "/>" вместо ">". Но если просто запустить поиск всех ">" и заменить их на "/>", такой поиск изменит все угловые скобки, включая скобки тегов, которые написаны правильно, например, <p>. Так что необходимо указать только те угловые скобки, которые закрывают теги <img>.
При добавлении уникальной надписи "QWERTY", следующей после угловой скобки, закрывающие скобки ">" каждого тега <img> оказываются помеченными. После этого достаточно запустить вторую операцию поиска для замены кода ">QWERTY" на "/>", что соответствует правильному написанию закрывающей угловой скобки для пустого тега. Творческий подход к использованию функции поиска и замены позволяет решать проблемы любой сложности.
Примечание. QWERTY не является ключевым словом или специальным термином. Это просто уникальный набор букв, который точно не встречается ни в одном месте сайта. В этих же целях, с таким же успехом, может использоваться любое имя (если только это не Newland).
увеличить изображение - Нажмите кнопку Replace All (Заменить все), а затем, как обычно, – Yes (Да) в появившемся диалоговом окне с предупреждением.
увеличить изображение
Если вы взглянете на документ в режиме Design (Дизайн), то убедитесь, что рядом с каждым изображением на странице появилась надпись QWERTY. Это свидетельствует о том, что операция поиска и замены проведена успешно. - Снова откройте диалоговое окно Find and Replace и в раскрывающемся списке Search For (Поиск) выберите опцию Source Code (Исходный код). В верхней текстовой области введите ">QWERTY" (не забудьте об угловой скобке), а в нижнем текстовом поле введите "/>" (не забудьте пробел).
Dreamweaver получил указание отыскать все угловые скобки, которые закрывают только теги <img>. Теперь нужно дать программе задание заменить эти скобки согласно правилам закрытия пустых тегов в XHTML.
увеличить изображение - Нажмите кнопку Replace All (Заменить все). Когда появится диалоговое окно с предупреждением, нажмите Yes (Да).
Щелкните на наборе изображений в режиме Design (Дизайн) и внимательно просмотрите соответствующий код в режиме Code (Код). Все элементы <img> теперь записаны по правилам XHTML. От надписи QWERTY не осталось никаких следов.
увеличить изображение - Повторите операцию с надписью QWERTY, чтобы должным образом закрыть все теги <area>.
увеличить изображение
Для того, чтобы убедиться, что изменение сработало, следует открыть любую страницу, кроме index.htm. Теги <area> применяются как часть карты ссылок на панели навигации. Код карты ссылок находится в нижней части документа, прямо над закрывающим тегом </body>.
увеличить изображение - Сохраните index.htm.
