7.2.6. Поиск изображений, не содержащих атрибут alt

Остается одна проблема, которая хоть и не относится к XHTML, тем не менее связана с кодом: у многих изображений отсутствует атрибут alt. Как известно, атрибут alt тега <img> содержит пояснения к изображению, которое необходимо, в частности, пользователям с нарушением зрительных функций и пользующимся в браузере экранным диктором, который воспроизводит с помощью синтезатора речи комментарии к картинкам.

83. Откройте документ about.htm.

84. В режиме Design щелкните на изображении Эйфелевой башни, чтобы выделить левую половину заголовка Enisey Tours. После этого в режиме Code будет выделен соответствующий HTML-код. Щелкните правой кнопкой мыши на выделенном участке кода и выберите в контекстном меню пункт Copy.

85. Нажмите Ctrl+F, чтобы вызвать Find and Replace, а затем удалите из области Find любой текст, оставшийся от предыдущих операций поиска, и вставьте скопированный HTML-код изображения.  В списке Find inEntire Current Local Site, а в списке SearchSource Code.

86. Вставьте тот же HTML-код в области Replace. Где-то внутри тега добавьте следующий текст: alt="Enisey Tours Banner, Left"

87. Нажмите кнопку Replace All. В окне с предупреждением нажмите Yes. Тег alt для левой части заголовка был обновлен по всему сайту.

88. Повторите предыдущие шаги для правой части заголовка (три фотографии). Тег alt должен выглядеть следующим образом: alt="Enisey Tours Banner, Right". После этого нажмите кнопку Replace All. Теперь обе части баннера содержат атрибут alt.

88. Повторите предыдущие шаги, чтобы добавить атрибут alt к панели с кнопками, расположенной под заголовком Enisey Tours. Атрибут alt должен выглядеть следующим образом: alt="Navigation Bar". Файл index.htm не содержит навигационной панели, поэтому для того чтобы изменить ее, следует открыть другую страницу.

89. Повторите предыдущие шаги, чтобы добавить атрибут alt к изображению в виде мраморного прямоугольника, расположенного под тремя фотографиями. Атрибут alt должен выглядеть следующим образом: alt="Copyright 2011 Enisey Tours". Это все изменения для заголовка и навигационной панели.

Cледующий шаг заключается в определении оставшихся изображений, не содержащих атрибута alt. Все они расположены на разных страницах, поэтому автоматизировать процесс замены при помощи функции поиска и замены нельзя. Однако можно автоматизировать процесс поиска изображений, которые не содержат атрибут alt, и, тем самым, все равно упростить работу.

90. Откройте Find and Replace и в списке Search выберите Specific Tag, а в списке тегов HTMLimg. Появится строка для дополнительного критерия поиска с выбранным по умолчанию вариантом With Attribute. Измените его на Without Attribute и в списке выберите пункт alt. Строку Action с соответствующими списками настраивать не требуется.

Никакой замены не происходит, а инструменты Dreamweaver используются для того, чтобы найти теги, удовлетворяющие определенному критерию.

91. Нажмите кнопку Find Next. Курсор автоматически переместится к изображению с тегом alt.

92. Добавьте атрибуты alt к каждому изображению, найденному на странице, за исключением страниц tours.htm и profiles.htm. При написании альтернативного текста не нужно предъявлять к нему высоких требований, достаточно, чтобы он качественно описывал назначение и отдельные элементы изображения. Страницы tours.htm и profiles.htm будут преобразованы в динамичные, и позже атрибуты alt еще будут изменены.

93. Сохраните и закройте все открытые файлы.