Основы работы в 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>, которые тоже загружаются с атрибутами. Формы будут добавлены на сайт в последующих уроках.

  1. В документе index.htm откройте диалоговое окно Find and Replace (Найти и заменить) и убедитесь, что выбран пункт Entire Current Local Site (Поиск на текущем сайте). Убедитесь, что в раскрывающемся списке Search (Поиск) выбран пункт Specific Tag (Специальный тег), а в списке тегов HTML – пункт img. В случае необходимости щелкните на кнопке Remove Search Criterion (Удалить критерий поиска) для того, чтобы не было никаких дополнительных критериев поиска.

    Эта часть процедуры должна уже стать привычной.

  2. В раскрывающемся списке Action (Действие) укажите вариант Add After (Добавить после).


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

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

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

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

    Примечание. QWERTY не является ключевым словом или специальным термином. Это просто уникальный набор букв, который точно не встречается ни в одном месте сайта. В этих же целях, с таким же успехом, может использоваться любое имя (если только это не Newland).


    увеличить изображение

  4. Нажмите кнопку Replace All (Заменить все), а затем, как обычно, – Yes (Да) в появившемся диалоговом окне с предупреждением.


    увеличить изображение

    Если вы взглянете на документ в режиме Design (Дизайн), то убедитесь, что рядом с каждым изображением на странице появилась надпись QWERTY. Это свидетельствует о том, что операция поиска и замены проведена успешно.

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



    Dreamweaver получил указание отыскать все угловые скобки, которые закрывают только теги <img>. Теперь нужно дать программе задание заменить эти скобки согласно правилам закрытия пустых тегов в XHTML.


    увеличить изображение

  6. Нажмите кнопку Replace All (Заменить все). Когда появится диалоговое окно с предупреждением, нажмите Yes (Да).

    Щелкните на наборе изображений в режиме Design (Дизайн) и внимательно просмотрите соответствующий код в режиме Code (Код). Все элементы <img> теперь записаны по правилам XHTML. От надписи QWERTY не осталось никаких следов.


    увеличить изображение

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


    увеличить изображение

    Для того, чтобы убедиться, что изменение сработало, следует открыть любую страницу, кроме index.htm. Теги <area> применяются как часть карты ссылок на панели навигации. Код карты ссылок находится в нижней части документа, прямо над закрывающим тегом </body>.


    увеличить изображение

  8. Сохраните index.htm.



Содержание  Назад  Вперед