Шаг I. Обзор основных элементов управления

Это - главное окно "Dreamweaver'a". При первом запуске может появиться еще немереная куча всяких панелек инструментов, но для обычного форматирования без выпендрежа (то есть для начинающих) нужны только эти две плавающие панельки и закрепленная панель, которая видна в правом нижнем углу окна (в полоске статуса). Слева в полоске статуса отображаются основные тэги той строки, в которой в данный момент находится курсор. При открытии "Dreamweaver" автоматически создает новый документ. Если вы открываете готовый файл, то окно нового документа исчезает. При открытии нескольких файлов одновременно все они доступны как через меню "Window", так и через панель задач (каждый в отдельности), этот способ представления открытых документов также реализован в новой версии Office).

Задание основных свойств страницы

В меню "Modify" выбираем пункт "Page Properties". Появляется следующее диалоговое окошко:

Encoding придется задавать для каждой страницы, если сразу не заменить его на кириллицу в свойствах Dreamweaver'a (Edit / Preferences / Encoding).

В окошке "Title" прописываем название документа (которое будет отображаться в верхней панели браузера). При условии задания верной кодировки русский язык поддерживается абсолютно корректно. В окошке "Background Image" задается фоновый рисунок, если надо.

При наведении курсора на квадратики рядом с пунктами "Background", "Text", "Links", "Visited Links", "Active Links" вид курсора меняется на пипетку, похожую на фотошоповскую. Если нажать этой пипеткой на квадратик, получим следующее диалоговое окно:

Внизу отображается образец цвета, над которым расположен в данный момент курсор, и его шестнадцатеричный код. Три кнопочки справа: пипетка - выбор цвета из данной палитры, ластик - выбор цвета, отображаемого браузером по умолчанию -"Default" (если сделан данный выбор, то в код страницы не будет добавлено никаких тэгов относительно цвета данного элемента. "Front Page" в таких случаях любит прописать цвет, который она считает цветом по умолчанию, или вписать "умное" замечание color="default"), нажатие кнопочки с палитрой вызывает основную палитру Windows и другие "небезопасные" цвета.

После того, как цвета всех основных элементов тега выбраны, их шестнадцатеричные значения будут отображены в соответствующих ячейках (и естественно, добавлены в код страницы). Таблица цветов "Dreamweaver'a" несколько отличается от общепринятой таблицы безопасных цветов, но тем не менее, все они корректно отображаются как Эксплорером, так и Навигатором.

Далее можно задать значения краев страницы. Если вы решили воспользоваться этой возможностью, то обязательно укажите одинаковые значения в ячейках "Top Margin" и "MarginHeight", а также в ячейках "Left Margin" и "MarginWidth" (например, 0 и 0; 7 и 7), чтобы страница отображалась корректно в различных браузерах - все они понимают "края" по своему (Top Margin и Left Margin прописываются для Эксплорера, а MarginHeight и MarginWidth - для Навигатора).

После заполнения всех этих полей можно нажать кнопку "Apply", посмотреть, что получилось, и если не понравится - сразу переделать. Можно также нажать кнопку "ОК" и вернуться к основному окну, а переделать потом, если потом не понравится :).

Лирическое отступление ╧ 1: первое из главных достоинств "Dreamweaver'a"

Одно из основных достоинств "Dreamweaver'a" состоит в том, что в текущем сеансе работы функция "Undo" применима даже к изменениям, сделанным до сохранения файла. То есть, если вы сделали что-то, сохранили файл, а потом решили отменить это действие - это возможно (во "Front Page" возможность отмены действия после сохранения исчезает).

Лирическое отступление ╧ 2: почему я не люблю KOI-8r

Потому что если мне надо быстро поправить код страницы при локальном просмотре в браузере, я просто нажимаю на правую кнопку мыши и выбираю "Просмотр в виде HTML". Открывается блокнот, я исправляю ошибки и сохраняю файл. Если попробовать проделать это со страничкой в KOI-8r, то блокнот вместо русского текста отобразит абракадабру. Конечно, мне известны легенды о юзерах, которые читают эту абракадабру и на лету переводят в нормальную кодировку, и могут даже исправлять ошибки, но я, увы, к таким не принадлежу.

Стилевое дополнение к стандартным возможностям

Если вы хотите, чтобы при "наезде" мышки на ссылку она меняла цвет, то в любом месте раздела <head> (где-нибудь между тэгами <head> и </head>) нужно прописать следующий фрагмент:

<style> A:hover {color: #FF6666} </style>

Значение color, естественно, можно задать любое.

Чтобы открыть "первоисточник" HTML, нужно нажать на кнопку < > в нижней встроенной панельке:

Лирическое отступление ╧ 3: почему я ОЧЕНЬ не люблю Навигатор

Вышеприведенное стилевое определение Навигатор интерпретирует некорректно, и в общем у него весьма своеобразное представление о таблицах стилей - он неверно интерпретирует такие параметры, как margin, padding, border, background-color, что уродует страницы, созданные с применением CSS, очень сильно (при этом стоит учитывать, что CSS level 1, к которым относятся вышеприведенные определения, были включены в официальную спецификацию HTML 2.0 (сейчас используется HTML 4.0), и за все это время Netscape так и не удосужилась исправить эти ошибки).

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

Кроме того, Навигатор нещадно перевирает многие цвета, особенно оттенки синего.

Задание текущей директории и редактирование свойств сайта в целом

Чтобы иметь возможность создавать короткие гиперссылки и работать с вложенными папками сайта, нужно задать директорию, в которой располагается сайт в целом, и определить остальные свойства сайта. В Dreamweaver'e также имеется собственный встроенный FTP-клиент (правда, говорят, что в предыдущих версиях он плохонький), который в 3-ей версии ни в чем не уступает Cute FTP, а в чем-то даже его превосходит. Например, можно попросить загрузить на сервер страницу вместе со всеми связанными изображениями, а Dreamweaver сам определит, какие картинки использованы на странице, и подгрузит их в нужные директории автоматически. Причем это именно FTP-клиент, который не позволяет себе ни в чем превышать полномочия, а не какой-нибудь там Front-Page Publishing, который так и норовит опубликовать все пароли пользователя. Я не пользуюсь встроенным FTP Dreamweaver'a только из-за того, что мне лень разбираться в огромном количестве тонких настроек (все ведь на английском!). Чтобы пользоваться встроенным FTP-клиентом, также необходимо задать параметры сайта. Параметры сайта и определение рабочей директории ("root folder") так же нужны для того, чтобы Dreamweaver корректно прописывал пути к вставляемым изображениям. Так что без этой настройки никак не обойтись.

Итак, в меню "Site" выбираем пункт "New site":

и в результате получаем следующее диалоговое окно:

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

Заполняем все требуемые пункты в разделе "Local Info" (в "Link Management Options" можно ничего не прописывать, если вы предпочитаете использовать короткие ссылки вида: <a href="../folder/file.htm">). Главное - указать "Local Root Folder", остальные параметры особого значения не имеют.

Заполнение раздела "Web server info" требуется в том случае, если вы собираетесь пользоваться встроенным FTP-клиентом. Настройки похожи на настройки Cute FTP.

Раздел "Site Map Layout" является настройкой карты сайта. В него надо вникать, если вы собираетесь использовать автоматическую навигацию. Если нет - оставьте все, как есть.

Все остальные настройки тоже лучше оставить по умолчанию.

Когда вы все заполните и нажмете кнопку "ОК", вас спросят, создать ли кэш для ускорения работы. Для основных сайтов кэш лучше создать. Если же вы делаете что-либо одноразовое, типа обоев в виде страницы, то от создания кэша можно отказаться.

Для перемещения между сайтами (сайтами, а не страницами одного сайта!) в процессе работы используется пункт "Define sites" меню "Site".