Чистка кода
Оружие любит ласку — чистку и смазку. Поскольку HTML-код — вещь нематериальная, в смазке он не нуждается. Зато ему так часто нужна чистка! Если вы пришли в ужас от количества ошибок, если что-то не ладится при просмотре в браузере и если вы хотите добиться более высокого качества, используйте несколько гигиенических процедур — и удача всегда будет на вашей стороне.
В Dreamweaver есть пара команд, которые запускают процесс проверки и исправления кода. Для большинства случаев вам достаточно использовать команду меню Commands | Clean Up HTML.
Если при создании страницы (см. главу 3) вы установили флажок Make Document XHTML Compliant, то команда проверки и исправления кода приобретет вид Commands | Clean Up XHTML.
При выполнении этой команды Dreamweaver выводит сначала окно с настройками для исправлений (рис. 4.15). Настройки делятся на две части, первой из которых идет группа под названием Remove, управляющая удалением "неправильных" тегов:
□ Empty Container Tags (<b></b>, <h1></h1>, …) — установите флажок для удаления пустых тегов, то есть таких, которые ничего не содержат. Пример: <b></b>, <strong></strong>. Как правило, пустые теги образуются в результате каких-либо ошибок и с точки зрения классического стандарта HTML не имеют смысла. Однако теги <div></div>, которые используются для создания слоев, не считаются пустыми и вследствие этого не удаляются.
□ Redundant Nested Tags — установка флажка приводит к сокращению избыточных тегов. К примеру, тег <b></b> задает полужирное начертание для всего текста, расположенного в нем. Поэтому любое дополнительное использование этого же тега к этому же тексту является избыточным и подлежит сокращению. Код <b>Этот текст <b>выделен </b>полужирным</b> по своему смыслу абсолютно идентичен коду <b>Этот текст выделен полужирным</b>.
□ Non-Dreamweaver HTML Comments — установите флажок, если вам надо удалить все комментарии, кроме тех, которые автоматически делает Dreamweaver.
□ Dreamweaver Special Markup — при установке флажка, наоборот, включается удаление комментариев, сделанных Dreamweaver.
□ Specific Tag(s) — установите флажок и введите в текстовое поле рядом с ним все теги, которые вы хотите удалить из кода.
|
Рис. 4.15. Чистка HTML-кода с помощью команды Clean Up HTML / XHTML |
Остальные параметры этого диалога не столь кровожадны и отвечают за функции, не требующие удаления. Отметьте первый из них, Combine Nested <font> Tags When Possible, если хотите объединить вложенные друг в друга теги <font>. Некоторые визуальные HTML-редакторы, не будем тыкать в них пальцем, часто развлекаются тем, что задают одному и тому же фрагменту текста разные параметры с помощью отдельных тегов. К примеру, полужирное начертание, размер и цвет могут задаваться так:
<font weight ="400"><font size="7"><font соlоr="#FF0000">Пример текста</font></font></font>;
В этом примере для задания каждого атрибута одного и того же текста используется отдельный тег — просто ужас! Ведь все атрибуты можно разместить в одном теге, что и делает Dreamweaver при установке флажка Combine Nested <font> Tags When Possible:
<font weight ="400" size="7" со1ог="#FF0000">Пример текста</font>; Последний флажок, Show Log on Completion, если его установить, говорит программе, что после окончания чистки кода необходимо вывести отчет о проделанной работе. Обязательно установите этот флажок, чтобы контролировать процесс исправления.
Это, так сказать, была обычная чистка для рядовых HTML-файлов. А вот если у вас на руках оказался HTML-файл, подготовленный кем-то с помощью редактора Microsoft Word (ладно, ладно, можете не оправдываться!), то это совершенно особый и торжественный случай. И для него надо использовать команду меню Commands | Clean Up Word HTML. Поскольку этот текстовый редактор от Microsoft весьма и весьма распространен, а Web-страницы, "сделанные" с его помощью встречаются очень часто, я счел нужным подробно рассказать о настройках этой команды. Диалоговое окно, которое открывается при ее запуске, выглядит куда как внушительнее своего младшего брата и оснащено в несколько раз большим количеством настроек (рис. 4.16).
|
Рис. 4.16. Чистка HTML-кода с помощью команды Clean Up Word HTML |
На вкладке Basic, которая открыта в этом диалоговом окне по умолчанию,
расположены основные и упрощенные настройки чистки.
□ Clean Up Word HTML from — в этом раскрывающемся списке надо выбрать версию Word, с помощью которого была создана Web-страница, подвергающаяся процедуре очищения. Обычно Dreamweaver сам определяет необходимую версию, так что вряд ли вам нужно заботиться об установке этого параметра.
□ Remove all Word specific markup — установка флажка включает удаление всех тегов, которые имеют смысл только для самого Word. Более подробно это можно настроить на вкладке Detailed.
□ Clean Up CSS — очистка кода от всех лишних стилей CSS, за исключением тех, которые используются для форматирования текста. Более подробно это можно настроить на вкладке Detailed.
□ Clean up <font> tags — удаляет все теги <font>.
□ Fix invalidly nested tags — удаляет только те теги <font>, которые расположены вне тегов параграфа (<P></P>) и заголовка (<H1></H1> и другие).
□ Set background color — устанавливает цвет фона страницы в значение, указанное в текстовом поле.
□ Apply source formatting — применяет к исправленному коду форматирование по умолчанию (см. разд. "Форматирование исходного кода" данной главы).
□ Show log on competition — установите флажок, чтобы по завершении работы Dreamweaver вывел краткий отчет о сделанных исправлениях.
Два первых параметра можно более подробно настроить, если выбрать вкладку Detailed и перейти к более детальным настройкам (рис. 4.17). Но вообще-то говоря, вам вполне будет достаточно и базовых настроек на вкладке Basic. Либо вы чистите страницу полностью, либо оставляете как есть — полумеры тут не имеют особого смысла.
|
Рис. 4.17. Детальная настройка для очистки HTML-кода, подготовленного в Word |
Чистка кода полезна не только тогда, когда вы заведомо уверены в наличии ошибок. В некотором роде это такая же гигиеническая процедура, как, к примеру, чистка зубов каждое утро. Особенно рекомендуется применять чистку к страницам, сгенерированным в Microsoft Word. Хотя такие страницы и выглядят корректно в браузере Microsoft Internet Explorer, их очень большой недостаток — это крайне большой размер файла.
К примеру, я использовал первый абзац из этого раздела, чтобы получить экспериментальную Web-страницу с помощью Word ХР. Изначальный объем сгенерированной странички составил 5 Кбайт. Вроде немного, да? Но после того, как я запустил команду Clean Up Word HTML в Dreamweaver, объем страницы уменьшился до 1 Кбайта, то есть в пять раз! Только чувство меры удержало меня от того, чтобы привести здесь исходный код для обеих страничек. Впрочем, вы с легкостью можете повторить мой опыт, если у вас установлен Microsoft Word ХР и Dreamweaver MX.
Конечно, такая разница характерна для страниц с небольшим объемом текста. Чем больше объем полезной информации на странице, тем меньше разница между сырым кодом, полученным из Word, и кодом, очищенным в Dreamweaver. Но даже когда я сохранил как Web-страницу из Word целиком весь раздел, посвященный чистке кода, размер файла получился 27 Кбайт. А после чистки в Dreamweaver этот же файл уменьшился до 13 Кбайт. Разница весьма и весьма существенная, так что мотайте на ус!