Содержание выпуска

Руководство по Macromedia Dreamweaver для начинающих. Настройки редактора.

• "Внутренние" настройки записи кода
• Настройка автоматического исправления ошибок и записи специальных символов
• Настройка синтаксиса CSS

Полезные советы

Свои вопросы, предложения и пожелания по содержанию рассылки присылайте по адресу: mila_b@chat.ru. Я обязательно всем отвечу, а самые интересные вопросы будут опубликованы в рассылке.

Руководство по Macromedia Dreamweaver для начинающих

Настройки редактора (продолжение, начало см. во втором выпуске)

Code Format - специфические настройки режима "Code View" и внешнего текстового редактора *

Так же, как и в предыдущих разделах, настройки описаны по порядку - сверху вниз.

1. Использовать отступы. Для отступов использовать: табуляцию или пробелы. Если этот флажок установлен, то Dreamweaver будет автоматически вставлять отступы в код в тех местах, где они облегчают его прочтение. После установки этого флажка вы можете выбрать, в каком виде будет храниться информация об этих отступах во "внутренностях" HTML-файла (HTML-файлы являются по формату текстовыми, а в текстовых файлах разрешена табуляция). Удобнее использовать табуляцию, т.к. в этом случае, если вы захотите удалить отступ, вам не придется много раз нажимать на "Backspace" - достаточно будет одного нажатия. Если же снять этот флажок, то все строки кода будут прижаты к левому полю, и разобраться в коде таблиц, frameset'ов и вложенных слоев вам будет довольно сложно. Здесь уж как кому нравится. Пробелы и табуляция, с помощью которых создаются отступы, незначительно увеличивают размер файла. Если вы страдаете по этому поводу паранойей и старательно вычищаете "лишние" кавычки из готовой страницы после окончания работы, то вам стоит снять этот флажок. Во всех остальных случаях его желательно оставить.
2. Строки и столбцы таблиц, фреймы и наборы фреймов. Эти два флажка доступны лишь в том случае, если установлен первый. Возможно, вы сочтете, что автоматически создаваемые отступы в коде вам необходимы при создании таблиц, но абсолютно излишни в наборах фреймов. Действительно, если у вас используется всего один frameset из двух-трех фреймов, отступы вам не понадобятся - в таком файле и без них все ясно, как божий день. Обратите внимание: на окончательном внешнем виде созданной страницы ни одна из настроек этого раздела не отражается! Все они изменяют только внутреннее строение текстового файла!
3. Размеры отступа и табуляции (Indent Size и Tab Size). Эти поля также доступны лишь при установке первого флажка. Они определяют размер создаваемых автоматически отступов и создаваемых вами табуляций в символах.
4. Автоматический перевод строки. Если этот флажок установлен, Dreamweaver будет автоматически добавлять "жесткий" перенос (только в коде, речь опять же идет о "начинке" текстового формата!), если длина строки превышает установленное значение. Значение по умолчанию - 76 - режет код на слишком короткие строки. Если вы используете сложные функции JavaScript или часто пользуетесь методом document.write, лучше увеличить это значение. Хотя разработчики Dreamweaver'a уверяют, что строка не будет разорвана в том случае, когда это может повредить работоспособности кода, рисковать все равно не стоит.
5. Символ разрыва строки. Доступны следующие значения: СR LF (Windows), CR (Macintosh), LF (Unix). Речь идет все о том же "жестком" переносе строк. Грубо говоря, разработчики просто заботятся о том, чтобы вам было удобно открыть свой HTML-файл в любом обычном текстовом редакторе. К примеру, если вы работаете на Macintosh'e, а тип разрыва строки установлен для Unix, разрывы строк в тексте кода не сохранятся, и код откроется в виде одной (очень длинной!) строки. Некоторые текстовые редакторы (например, Bred) не умеют распознавать строки гигантской длины и просто обрезают лишнее. Как вы понимаете, это может повредить код, так что отнеситесь к данной опции с должным вниманием.
   Другой пример - вам вдруг понадобилось подправить что-то в коде непосредственно в online-режиме (многие хостинги предоставляют online-редакторы кода). Если вы установили тип разрыва для Windows, а сервер работает под управлением Unix, код также может быть поврежден. При типе разрыва, не соответствущем типу сервера, код может быть поврежден также и при FTP-передаче на сервер в ASCII-режиме (по утверждению разработчиков Dreamweaver'a). Хотя по личному опыту скажу, что с помощью CuteFTP код с типом разрыва CR LF передается в ASCII-режиме на сервер под управлением Linux абсолютно корректно.
6. Регистр записи тэгов. Некоторые вебмастера предпочитают для облегчения анализа кода записывать тэги в верхнем регистре. Dreamweaver предоставляет такую возможность.
7. Регистр записи атрибутов. Атрибуты тоже могут быть записаны в верхнем регистре, но значения атрибутов всегда записываются Dreamweaver'ом в нижнем регистре и в кавычках. Параноикам приходится чистить код от кавычек вручную.
8. Автоматически изменять регистр (и тип записи!) для тэгов (первый флажок) и для атрибутов (второй флажок). Первый флажок вы можете поставить, если, к примеру, вас раздражают большие (или наоборот - маленькие) буквы в чужом коде, который вам приходится анализировать. Второй флажок по аналогичным причинам могут установить все, кроме вышеупомянутых "кавычечных параноиков". После установки этого флажка при каждом открытии файла в Dreamweaver'e запись атрибутов будет приводится к указанному в настройке регистру (и виду!). А это значит, что код, старательно очищенный вами от кавычек где-нибудь в "Блокноте", вернется в свой первозданный вид. Имеются сведения о сошедших с ума в результате действий этого флажка вебмастерах, ненавидящих кавычки (шутка).
9. Способ центрирования некоторого участка страницы. Иногда вам может потребоваться выровнять по центру участок страницы, находящийся в тэге, не поддерживающем горизонтальное выравнивание (например, рисунок), или вообще вне тэга уровня блока (например, скрипт). В старых версиях HTML для этого использовался тэг-контейнер <center>. В спецификации HTML 4.0 этот тэг отнесен к устаревшим и не рекомендуется для использования, однако он пока распознается практически всеми версиями браузеров. Dreamweaver предоставляет выбор: продолжать использовать тэг <center>, или перейти на рекомендованную консорциумом W3C конструкцию <div align="center">. Тут уже дело вкуса. Однако опять же для приверженцев максимального уменьшения размера кода стоит заметить, что, безусловно, использование <center> им подходит больше.

Code Rewriting (исправление ошибок и настройка записи специальных символов)

Установив нужные флажки в этом окне настройки, вы позволите Dreamweaver'у автоматически исправлять некоторые часто встречающиеся ошибки в коде. Тем, кто плохо знаком с HTML, следует обязательно установить все флажки.

1. Исправлять неправильно вложенные или незакрытые тэги. Иногда при написании кода вручную допускаются нарушения взаимной вложенности тэгов. Если по неопытности вы напишете конструкцию типа <b><i>особо важный текст</b></i>, то браузер не сможет верно интерпретировать такую запись. Установка этого флажка позволяет Dreamweaver'у автоматически исправлять подобные ошибки. Также, если этот флажок установлен, Dreamweaver автоматически добавит закрывающий тэг в тех местах, где он необходим, а вы забыли его добавить. Наиболее распространенная ошибка такого типа - вставка внешнего файла скрипта без закрывающего тэга (правильно: <script src="my.js"></script>; неправильно: <script src="my.js">).
2. Удалять лишние закрывающие тэги. Установка этого флажка позволит вам не запутаться, к примеру, при создании сложных вложенных таблиц или вложенных нумерованных и маркированных списков. Встретив закрывающий тэг, который не имеет парного открывающего, Dreamweaver удалит его.
3. Выдавать предупреждение при удалении или исправлении тэгов. Этот флажок должен быть обязательно установлен у начинающих, которые хотят как следует разобраться в HTML и научиться писать код руками. Ведь если Dreamweaver будет "молча" исправлять ваши ошибки, вы никогда о них не узнаете и будете продолжать ошибаться.
4. Никогда не исправлять код в файлах с перечисленными расширениями. По умолчанию флажок установлен, и перечислены расширения .asp, .cfm, .cfml, .ihtml, .js, .jsp, .php, .php3. Вам, возможно, потребуется дополнить этот список. Упаси вас бог снять этот флажок и забыть об этом! В результате однажды может наступить день, когда недельная работа вашего напарника-программиста будет безвозвратно угроблена одним нажатием клавиш "Ctrl+S". Дело в том, что файлы с такими расширениями обычно содержат программный код, не поддающийся стандартной логике HTML. Поэтому любые автоматические исправления могут погубить страницу.
5. Кодирование специальных символов в URL-адресах. Если в URL встречаются неразрешенные символы, Dreamweaver перекодирует их в специальные. Например, пробел кодируется как %20.
   Перекодирование некоторых символов в значениях атрибутов с использованием амперсанда. Если в значениях атрибутов встретятся символы <,>,&,", Dreamweaver заменит их на &lt;,&gt;,&amp;,&quot;, соответственно.

CSS Styles - настройка синтаксиса каскадных таблиц стилей

Некоторые свойства CSS могут быть объединены в группы и описаны с помощью так называемой "сокращенной записи". Например, "вдавленная" граница толщиной в два пиксела красного цвета вокруг заголовка <h1> с помощью сокращенной записи описывается так:

h1 { border: inset 2px #FF0000 ; }

А полная запись выглядит так:

h1 {

    border-style: inset;

    border-width: 2px;

    border-color: #FF0000;

   }

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

font - свойства шрифта (размер, начертание, жирность и т.п.);
background - свойства фона (цвет, рисунок, повторяемость рисунка, фиксированный фон и т.п.);
margin и padding - сокращенная запись для отличающихся друг от друга левого, правого, верхнего и нижнего полей (краев) или отступов;
border & border-width - вышеупомянутые свойства границ;
list-style - тип и специальный рисунок для маркеров списков.

Так же есть возможность определить, в каких случаях применять сокращенную запись к таблицам стилей, созданным в других редакторах: если сокращенная запись уже была использована (Use Shortland, If Original Used Shortland), или при описании всех отмеченных флажками свойств, даже если изначально они были описаны с помощью полной записи (According To Settings Above).

(продолжение - в следующем выпуске)

* В третьей версии режим "Code View" отсутствует, а вместо внешнего текстового редактора используется встроенный.

Полезные советы

• При задании с помощью CSS верхнего и нижнего полей (margin-top и margin-bottom) блоковых элементов (абзацев, заголовков и т.п.) разные браузеры интерпретируют их неодинаково. Internet Explorer как бы "накладывает" смежные поля друг на друга, и в результате расстояние между элементами оказывается равным значению большего поля (например, если для тэга <p> заданы margin-top: 20px; margin-bottom: 10px; то расстояние между двумя абзацами будет равно 20 пикселов). А Netscape Navigator суммирует значения смежных полей, и в приведенном примере расстояние между абзацами будет равно 30 пикселов. Чтобы избежать различий при отображении страниц в разных браузерах, проще всего задавать одно из этих значений равным нулю. Проще всего задавать margin-bottom: 0px; а после последнего абзаца вставлять или пустой абзац (не очень красиво выглядит), или прозрачный gif-распорку нужной высоты. Не нужно делать такие gif-ы разных размеров на все случаи жизни: однопиксельный "спэйсер" прекрасно масштабируется браузером - он же прозрачный :).
• Многие наверняка сталкивались с тем, что при вставке формы ячейка таблицы сильно расползается в высоту, и сверху появляется нежелательный отступ. Чтобы избежать этого, поменяйте вложенность тэгов: <form><td>содержимое ячейки</td></form>, если вся форма умещается в одной ячейке; или <form><td>содержимое ячейки 1</td><td>содержимое ячейки 2</td><td>содержимое ячейки 3</td></form>, если вся форма помещается в одной строке; или же <form><tr><td>содержимое ячейки 1</td></tr><tr><td>содержимое ячейки 2 </td></tr></form>, если форма занимает несколько строк. Заметьте: все тэги при такой записи вложены правильно, и нежелательный отступ исчез!

Бандурина Людмила, 21.01.2001. Архив рассылки находится здесь.