Шаг II. Форматирование текста

Теперь можно набить какой-нибудь абзац и применить к нему форматирование стандартными средствами Dreamweaver'a.

Эта менюшка определяет формат абзаца (заголовок 1, заголовок 2, параграф и т.д.).

Окмибн бвфбрб

Эта менюшка определяет вид шрифта.

Чяд (геиесгнчк) ымяонб

Обратите внимание, используется определение группы шрифтов, а не какого-то одного наименования (в соответствии со спецификацией HTML 3.0) - если первый из указанных шрифтов отсутствует на компьютере конечного юзера, браузер автоматически подставит второй, а если нет и второго - то похожий (вместо Arial - любой sans-serif, например), при этом общий дизайн страницы не утратится. Если же указывать конкретный шрифт, то при его отсутствии браузер применит шрифт, используемый по умолчанию (например, вместо Arial - Times New Roman), и шрифт с засечками испортит тщательно продуманный дизайн.

Эта менюшка определяет размер шрифта.

Мбфием ымяонб

Размер шрифта определяется в относительных единицах - при данном способе форматирования размер шрифта в окне браузера конечного юзера будет зависеть от настроек этого самого юзера (выбираемые в меню браузера "Вид" размеры шрифта - крупный, средний и т.д.). Избежать этой зависимости и принудить пользователя видеть шрифт того размера, который задуман вами для полного соответствия с вашим дизайном, можно только используя CSS (таблицы стилей). Но это отдельная песня, которую я вам обязательно спою позже.

Дальше идет кнопочка выбора цвета шрифта (функционирует так же, как вышеописанные кнопки выбора цвета элементов), кнопки bold и italic, кнопки выравнивания. Автоматическое выравнивание по ширине, к сожалению, не поддерживается, но если в исходнике для текущего абзаца прописать align="justify", то Dreamweaver легко с вами согласится и будет придавать всем последующим абзацам (после каждого нажатия Enter) аналогичное выравнивание.

Quick Tag EditorВ нижней строке этой панели доступны также кнопки выбора ссылки (выделите текст, который будет являться гиперссылкой, и нажмите на папочку рядом с полем "Link" для обзора; или просто введите адрес в это поле), выбора окна, в котором будет открываться ссылка (target, при отсутствии ссылки кнопка недоступна), маркированного и нумерованного списков, вертикального и горизонтального отступов.

Кнопочка со знаком вопроса - вызов контекстной справки (в отдельном окне браузера, на английском языке).

Чгнбчуб убмняйуяКнопочка с изображением карандашика вызывает Quick Tag Editor (если вам, допустим, понадобилось обозначить данный абзац как цитату - нажимаете эту кнопочку и из выпавшего списка выбираете blockquote, и т.п.) Вообще-то эта панель является панелью свойств любого объекта, и при использовании таблицы на ней появляются дополнительные кнопки свойств таблицы, при выделении рисунка - дополнительные кнопки свойств рисунка, но об этом - см. далее.

Вставка изображения и редактирование его свойств

Для вставки картинки следует воспользоваться кнопочкой с изображением картинки на панели "Objects".

После нажатия этой кнопки вы автоматически обозреваете свою рабочую директорию на предмет пригодных для употребления картинок. Если картинка находится за пределами рабочей директории, вы ее спокойно находите и вставляете. Большой плюс: "Preview" работает во всех директориях, а не только в директории сайта (в отличие от Front Page). После того, как вы выбрали картинку и нажали "Select", возможны два варианта развития событий.

  1. Выбранная картинка находится в рабочей директории сайта (или в одной из ее поддиректорий). В этом случае она спокойно вставится, и все.
  2. Выбранная картинка находится за пределами рабочей директории сайта. В этом случае Dreamweaver предложит сразу скопировать ее в рабочую директорию и предложит выбрать, куда именно и под каким именем. Надо соглашаться, иначе путь к изображению будет прописан неправильно (в виде file://../image.gif).

Когда изображение вставлено, автоматически прописываются в код страницы путь к нему, его ширина и высота. Поле "alt", в отличие от Front Page, автоматически не прописывается, что позволяет избежать случайного попадания на страницы идиотских комментариев типа: "image.jpg, 33800 bytes". Если вам не требуется комментарий к рисунку, Dreamweaver просто вообще не вписывает параметр alt в код страницы (но лучше все же заполнить это поле - большинство современных поисковых машин учитывает комментарии к рисункам при поиске).

Настройка свойств изображения

После вставки изображение автоматически оказывается выделенным, при этом меняется панель свойств объекта (не вылезает дополнительная, а просто меняется существующая!). Чтобы в дальнейшем изменить какие-то свойства, достаточно выделить нужное изображение и обратиться к этой панели.

Медбунямкчбйяе гчксгнч яфквмбпейяц

В верхнем углу панели отображается миниатюрная копия изображения, чтобы вы были уверены, что работаете именно с тем изображением, с которым собирались. Справа от этой копии окошечко, в которое можно вписать значение параметра "name" (название рисунка, используется поисковыми системами и браузером при кэшировании страниц).

Еще правее - ширина и высота рисунка (изменять не рекомендуется, т.к. браузеры отвратительно масштабируют графику. Лучше отмасштабировать картинку в каком-нибудь графическом редакторе, и на сайт ее выкладывать с текущими размерами). Удалять эти параметры тоже нежелательно - это уменьшит, конечно, размер кода, но в то же время увеличит время загрузки страницы, т.к. браузер не сможет корректно отформатировать текст, пока не загрузит графику.

Далее идут параметры src (путь к рисунку) и link (следует заполнять, если рисунок является гиперссылкой). Dreamweaver не вставляет автоматически рамку вокруг рисунка, являющегося ссылкой, за что ему огромное спасибо! Если вы хотите, чтобы рисунок был обведен рамкой определенной толщины, независимо от того, является он ссылкой или нет, следует установить соответствующее значение параметра border (поле border в правой нижней части панели).

В правом верхнем углу панели доступны параметры align (выравнивание рисунка относительно текста) и alt (альтернативный текст).

Примечание: CSS и DHTML, весьма корректно реализованные в 3-ей версии Dreamweaver'а, позволяют применять к рисунку дополнительные эффекты (анимированное появление на странице, полное скрытие и появление по нажатию кнопки "Показать" и т.д.) и фильтры, реализуемые браузером (размытие, прожектора и др.), которые также могут накладываться в виде анимации, но это тоже отдельная песня. Кстати, во Front Page 2000 тоже якобы реализованы эффекты DHTML, но на поверку оказывается, что вместо классического DHTML для достижения этих эффектов Front Page использует уродливые огромные Java Scripts.

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

Далее идут параметры hspace и vspace - вертикальный и горизонтальный отступ от текста. Далее target - задание окна, в котором будет открываться гиперссылка (для рисунка, не являющегося гиперссылкой, недоступно), далее параметр Low Src (копия рисунка с низким разрешением), поле border и кнопки настройки выравнивания абзаца (если рисунок находится не в тэге-контейнере <p> </p>, а непосредственно в теле страницы, нажатие этих кнопок создает для рисунка тэг-контейнер <div> </div> с соответствующим выравниванием).

Правый нижний угол занимают кнопки "Refresh" (применить измененные параметры) и Edit (вызывает Fireworks - графический редактор, иногда поставляющийся вместе с Dreamweaver'ом, но если рисунок не в формате png, то в Fireworks окажется довольно сложно его редактировать).

Чгнбчуб нбвхярщИспользование таблиц

Чтобы вставить таблицу, нужно нажать на кнопочку с изображением таблицы на панели "Objects".

Чгнбчхцеи нбвхярзПосле этого появится диалоговое окно, в котором можно задать основные свойства таблицы: количество столбцов и строк, ширину таблицы (в пикселах или процентах), толщину рамки таблицы, параметры cellspacing (расстояние между ячейками) и cellpadding (отступ от границы ячейки до ее содержимого).

После того, как таблица вставлена, можно менять свойства как таблицы в целом, так и отдельных ее ячеек с помощью все той же панели свойств объекта.

Если выделена таблица целиком, доступны следующие свойства:

Table Name (название таблицы). Заполнение этого поля создает тэг <caption>, в котором прописывается заголовок таблицы.

Медбунямзеи гчксгнчб нбвхярщ

Количество строк и столбцов (Rows и Cols).

Ширина (W) и высота (H) таблицы в процентах или в пикселах (не рекомендуется задавать высоту таблицы в процентах, т.к. в свернутом окне браузера сами понимаете, что может получиться).

Cell Pad и Cell Space - все те же cellspacing и cellpadding.

Align - выравнивание таблицы относительно окна браузера (по умолчанию - слева).

Border - толщина рамки.

Четыре маленьких кнопочки в левом нижнем углу (по порядку, слева направо и сверху вниз): очистить значения высоты строк; очистить значения ширины столбцов; конвертировать значение ширины таблицы в пикселы; конвертировать значение ширины таблицы в проценты.

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

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