Познавательное чтиво

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

К счастью, Dreamweaver MX — это очень удобный редактор для "кодеров". В нем предусмотрено и автоматическое форматирование кода. К примеру, теги, вложенные в другие теги, автоматически отодвигаются от начала строки. Благодаря этому, мы можем легко проследить структуру кода и понять, что содержится в этом теге и для каких тегов он сам является содержимым.

Автоматическое форматирование кода действует только при создании новых документов в Dreamweaver MX или при дополнении уже существующих. То, что уже было набрано раньше, не подвергается форматированию, если мы только сами об этом не попросим. Попросить об этом можно с помощью команды меню Commands | Apply Source Formatting — для всего документа,

и Commands | Apply Source Formatting for Selecting — для выделенной части документа.

Команда форматирования просто идеальна, если надо разобраться в исходном коде страницы, теги которой следуют один за другим в одной и той же строке. Такое часто бывает в страницах как результат оптимизации перед размещением на сервере. Исходный код в таких случаях выглядит как один сплошной монолит, в котором трудно выделить отдельные теги. Применив форматирование, мы получаем ясный и четкий код, в котором отлично просматриваются отдельные теги и их иерархия (рис. 4.13).

Совет

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

Изменить параметры форматирования по своему вкусу можно в настройках

Dreamweaver. Используйте команду меню Edit | Preferences или комбинацию

клавиш <Ctrl>+<U>. В списке слева выберите строку Code Format и измените настройки, которые появятся при этом справа (рис. 4.14).

□ Indent — если флажок установлен, то для каждого тега будут использоваться отступы от начала строки. Для тега, вложенного в другой тег, отступ увеличивается.

□ Use — раскрывающийся список из двух пунктов — Spaces и Tabs. Он позволяет выбрать, как будут формироваться отступы — с помощью пробелов или знаков табуляции. Чтобы установить пробелы, выберите Spaces, а для знаков табуляции — Tabs.

□ Indent Size — величина отступа, указанная в пробелах или знаках табуляции (зависит от того, что выбрано в списке Use).

□ Tab Size — ширина знака табуляции, который появляется при нажатии клавиши <Таb>. Эта величина измеряется в количестве символов, которое могло бы поместиться вместо одного знака табуляции.

□ Automatic Wrapping — если флажок установлен, Dreamweaver осуществляет автоматический перевод строки всякий раз, когда ее длина в символах превысит значение, заданное в поле After Column. В отличие от перевода строки, который можно включить при настройке встроенного редактора, в данном случае строка действительно заканчивается. Но это происходит только тогда, когда перенос строки никак не может повлиять на отображение страницы в браузере. Поэтому строки исходного кода могут часто превышать значение, заданное с помощью поля After Column.

□ Line Break Type — раскрывающийся список позволяет выбрать тип окончания строки, принятый в разных операционных системах.

□ Default Tag Case — тут можно выбрать, какими буквами будут отображаться теги по умолчанию — прописными (<lowercase>) или заглавными (<UPPERCASE>).

□ Default Attribute Case — то же самое для атрибутов тегов.

□ Override Case Of — две опции в этой группе, Tags и Attributes, позволяют включить "силовой метод" для установки регистра тегов и атрибутов соответственно. Если вы установите два флажка, то преобразование регистра произойдет сразу же, для всех открытых в Dreamweaver документов. И при открытии новых документов все теги и атрибуты будут сразу преобразовываться к тому регистру, который вы задали в опциях Default Tag Case и Default Attribute Case.

□ No Break After TD — установка флажка запрещает программе автоматически ставить перевод строки после тега <td>, что происходит, например, при вставке таблицы внутрь этого тега.

□ Centering — выравнивание по центру в HTML можно задавать разными способами: с помощью тега <center> или тега <div>. Выберите здесь, какой способ вам по душе. В любом случае, оба тега соответствуют стандарту HTML 4, хотя <center> и поддерживается большим количеством браузеров.

Более радикальным средством, чем форматирование, является чистка кода. С ее помощью мы можем даже лечить явно ошибочный код, созданный кем-то или, чем черт не шутит, даже нами.