Уроки Dreamweaver


Проверка правильности ссылок и HTML-кода

Теперь-то, спросите вы, можно публиковать сайт? Нет, еще рано. Потерпите — осталось совсем чуть-чуть! Вот проверим корректность HTML-кода и гиперссылок — и опубликуем сайт в Сети.

При разработке Web-страниц в их HTML-коде постепенно накапливаются ошибки, для удаления которых в Dreamweaver существует функция "чистки" кода, рассмотренная нами в главе 3. Однако не все ошибки кода могут быть таким образом выявлены и исправлены. Скорее, функция "чистки" служит для оптимизации кода путем удаления и совмещения тегов, которые могут быть удалены и совмещены без ущерба для Web-страницы. Однако многие ошибки (в частности, типичные ошибки начинающего Web-дизайнера) Dreamweaver "вычистить" не может — чтобы их исправить, требуется вмешательство самого Web-дизайнера.

Но чтобы исправить код, нужно знать, что исправлять. И в этом Dreamweaver снова вам поможет.

Внимание!

Из-за ошибки Dreamweaver при проверке не может прочитать файлы, пути доступа к которым содержат русские буквы. Поэтому лучше всего помещать файлы ваших сайтов в папки, чьи имена состоят только из английских букв и цифр.

Итак, проверим правильность HTML-кода. Закройте все открытые окна документов, чтобы они вам не мешали. Выберите пункт Reports в меню Site панели Site. На экране появится диалоговое окно Reports, показанное на рис. 6.16.

Большую часть этого окна занимает иерархический список Select Reports, позволяющий выбрать данные, включаемые в отчет. Он состоит из двух "ветвей": Workflow и HTML Reports. Параметры, предлагаемые первой "ветвью", нужны для рабочей группы, так что мы сосредоточимся на второй "ветви", предлагающей нам задать параметры отчета по HTML. Это "дерево" содержит следующие пункты:

  • Combinable Nested Font Tags — включает поиск вложенных тегов <FONT>, которые могут быть безболезненно объединены;
  • Accessibility - - включает проверку на корректность задания различных элементов страницы (все ли таблицы имеют заголовок, задана ли правильная кодировка и т. п.);
  • Missing Alt Text -- включает поиск незаполненных атрибутов ALT тегов
  • Redundant Nested Tags — включает поиск ненужных вложенных тегов;
  • Removable Empty Tags -- включает поиск пустых тегов, которые могут быть безболезненно удалены;
  • Untitled Documents — включает поиск Web-страниц без названия (без тега <TITLE>).

Каждый из этих пунктов представляет собой флажок, который вы можете установить или сбросить.

Рис. 6.16. Диалоговое окно Reports

Раскрывающийся список Report On позволяет задать, по каким страницам сайта будет выводиться отчет. Здесь доступны четыре пункта:

  • Current Document — по странице, открытой в активном окне документа;
  • Entire Local Site — по всему сайту;
  • Selected Files in Site — по всем страницам, выделенным в списке файлов;
  • Folder — по всем страницам, содержащимся в какой-либо папке.

Если вы выбрали последний пункт, ниже раскрывающегося списка Report On появится поле ввода, где вы должны будете ввести путь к нужной папке. Вы также можете щелкнуть мышью по значку папки справа от этого поля ввода и выбрать нужную папку в появившемся на экране диалоговом окне.

Задав необходимые параметры, нажмите кнопку Run. Через некоторое время Dreamweaver выведет панель Site Reports, показанную на рис. 6.17.

В списке, находящемся в этой панели, перечислены все найденные ошибки в HTML-коде. Вы можете выбрать любую из них. Дважды щелкнув по нужному пункту списка, вы откроете файл, в котором найдена ошибка; при этом окно документа откроется в режиме показа HTML-кода, причем ошибочный фрагмент будет выделен. Чтобы получить сведения о найденной ошибке, нажмите кнопку More Info (с изображением восклицательного знака) — откроется окно справки Dreamweaver с нужными сведениями. А, нажав кнопку Save Report (с изображением дискеты), вы можете сохранить этот отчет в файле формата XML.

Рис. 6.17. Панель Site Reports

Исправьте найденные Dreamweaver ошибки, после чего закройте все окна документов, не забыв сохранить их содержимое. Не годится, чтобы наш сайт, даже и первый, содержал на своих страницах ошибки. Закройте панель Site Reports. Можете сделать это без сохранения.

Проверим теперь корректность гиперссылок.

Но что может случиться с гиперссылками? А случиться может, например, следующее. Предположим, вы поместили на свою Web-страницу гиперссылку, указывающую на другую страницу (неважно, принадлежит она тому же сайту или совсем другому). Теперь переименуйте или удалите файл той страницы, на которую указывает гиперссылка, Что получится, если посетитель вашего сайта щелкнет по такой гиперссылке? Web-сервер не сможет ее найти и отправит Web-обозревателю, запросившему несуществующую страницу, сообщение об ошибке. (Это так называемая "ошибка 404", печально известная ошибка, чей код равен 404. Да вы и сами, наверное, не раз с ней сталкивались.) А гиперссылка, указывающая на несуществующий файл, называется "оборванной" или "мертвой".

Конечно, Dreamweaver делает все, чтобы не допустить появления "оборванных" ссылок. Но, как говорится, и на старуху бывает проруха. Поэтому в него включены мощные средства выявления некорректных интернет-адресов, будь то адрес Web-страницы, изображения или файла архива.

Проверить корректность гиперссылок можно как на отдельной странице, так и во всем сайте. Чтобы проверить гиперссылки на отдельной странице сайта, сначала откройте ее. После этого выберите пункт Check Links подменю Check Page меню File главного окна или нажмите комбинацию клавиш <Shift>+<F8>. Если вы хотите проверить ссылки на всех страницах сайта, просто выберите пункт Entire Site подменю Check Links контекстного меню панели Site. Также вы можете использовать пункт Check Links Sitewide меню Site панели или комбинацию клавиш <Ctrl>+<F8>. В любом случае после этого на экране появится панель Link Checker, показанная на рис. 6.18.

Рис. 6.18. Панель Link Checker

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

  • Broken Links - "оборванные" гиперссылки;
  • External Links — "внешние" ссылки, т. е. ссылки, указывающие на другие сайты;
  • Orphaned Files — файлы-"сироты", т. е. файлы, на которые не указывает ни одна гиперссылка. В списке таких файлов должен быть только один пункт — default.htm (наша главная страница).

Как видите, каждый пункт списка содержит адрес страницы, на которой была найдена ссылка, и саму гиперссылку. Щелкнув по любой позиции этого списка, вы откроете соответствующую Web-страницу в окне документа, причем подсвечена будет как раз выбранная гиперссылка. Нажав кнопку Save Report (с изображением дискеты), вы сможете сохранить этот список в виде обычного текстового файла.

Также Dreamweaver предлагает мощное средство быстрой замены одной гиперссылки на другую по всему сайту. Это может быть полезно, если вы собираетесь изменить один адрес на другой, но не помните, на каких страницах он был указан. Для этого выберите пункт Change Links Sitewide в меню Site панели. На экране появится диалоговое окно Change Link Sitewide, показанное на рис. 6.19.

Рис. 6.19. Диалоговое окно Change Link Sitewide

В поле ввода Change All Links To введите адрес, который вы хотите заменить, в поле ввода Into Links To — адрес, на который вы меняете, и нажмите кнопку ОК. Dreamweaver выведет на экран уже знакомое вам окно Update Files, показанное на рис. 6.14; вам будет нужно только щелкнуть кнопку Update.