Существует достаточно большое количество программ для создания html-страниц, например FrontPage. Работа в них напоминает верстку документа в текстовом редакторе, вы печатаете текст вставляете рисунки и таблицы, с помощью различных инструментов изменяете их свойства. При этом вам совсем не обязательно знать язык HTML, программы генерируют его за вас. Эта легкость - обманчива.

Вместе с тем, работать только с HTML-кодом не всегда удобно, особенно когда времени на выполнение работы мало. И здесь нам на помощь приходит программа Dream weaver, созданная компанием Macromedia. Она позволяет быстро создавать страницы в визуальной среде не теряя контроль за HTML-кодом. На момент написания статьи доступна версия программы Macromedia DreamWeaver MX 2004, хотя для наших целей подойдут и более ранние версии.

3.1. Настройка программы

Если вы запустите программу, то ее интерфейс может испугать обилием окон и кнопок (рисунок 16). На самом деле не все так страшно.

Интерфейс программы Dreamweaver
Рис. 16. Интерфейс программы Dreamweaver.

1. Холст, на котором вы печатаете текст, вставляете рисунки - конструируете страницу.
2. Поле, на котором автоматически генерируется HTML-код. Вы можете работать в нем, и в таком случае вы будете видеть, как формируется страница в нижнем окне. Стрелка показывает набор из трех кнопок с помощью которых вы можете переключиться в один из режимов:

  • Code - отображается только HTML-код
  • Design - отображается только макет страницы
  • Split - включены оба окна, эта кнопка активизирована на рисунке.

Обратите внимание, выделение фрагмента текста на холсте одновременно выделяет фрагмент кода, отвечающего за данное место на странице.
3. Панель свойств, на ней вы видите большое количество переключателей с помощью которой вы можете изменять свойства выделенного объекта. Панель можно сворачивать, с помощью кнопки, показанной стрелкой.
4. Набор панелей. В данный момент активна панель, в которой видны все файлы проекта, о ней мы поговорим чуть позже. С помощью кнопки выделенной на рисунке можно скрывать все наборы, освобождая место на экране для вашей страницы.
5. Панель конструктора, в ней расположен набор кнопок для быстрой вставки различных объектов. На рисунке изображена группа кнопок для вставки объектов формы.

При первом запуске программы, я советую вначале настроить кодировку вашей страницы. Она изменяется с помощью команды меню Modify - Page Properties (Изменения - Свойства страницы). В левой части открывшегося окна выберите раздел Title/Encoding (Заголовок/Кодировка) и в правой части окна найдите поле со списком Encoding (Кодировка). Необходимо выбрать кодировку Кириллица (Windows). Теперь вы сможете открывать и редактировать страницы с русским текстом.

Для того, чтобы не настраивать кириллическую кодировку каждой страницы, имеет смысл сделать ее кодировкой «по умолчанию». Для этого выберете команду меню Edit - Preferences (Редактирование - Настройка). В левой части окна выберите раздел New Document (Новый документ) и в правой части окна для поля Default encoding (кодировка «по умолчанию») выберите всю ту же кодировку Кириллица (Windows).

3.2. Создание web-сайта

После настройки программы необходимо создать или выбрать созданный ранее web-сайт. Под этим термином в Dreamweaver понимается каталог, в котором находятся файлы нашего проекта. Задав сайт, вы переложите на плечи программы все сложности по отслеживанию относительных, ошибочных ссылок.

Для создания нового сайта выберите команду меню Site - Manage Sites (Сайт - Управление сайтами).

Окно менеджера сайтов
Рис. 17. Окно менеджера сайтов.

Создавая новый сайт (кнопке New), вы должны будете ответить на несколько вопросов:

  • название сайта (может быть произвольным, то что отражается в показанном окне);
  • собираетесь ли вы использовать серверные технологии и если да, то для какого языка. С такими технологиями мы познакомимся значительно позже, поэтому пока мы выбираем No, I do not want to use a server technology;
  • задать каталог на диске вашего компьютера, где вы планируете располагать файлы проекта;
  • каким способом вы собираетесь переносить файлы вашего проекта на удаленный сервер. При желании вы можете настроить здесь FTP-клиент (урок №8). В простейшем случае выбираем None.

После этого ваш сайт создан и он доступен вам в панели Files (поле 4 на рисунке 16). На рисунке в проекте уже много каталогов файлов, а если сайт только создан, то выбрав его в панели, вы можете создавать новые файлы с помощью контекстного меню (рисунок 18).

Работа с файлами сайта
Рис. 18. Работа с файлами сайта.

Так выбрав команду New File (Новый файл), Dreamweaver создаст пустой html-файл, но в этом «пустом» файле уже будет остов вашей будущей страницы с разделами <HEAD> и <BODY>. Вы можете сразу сделать в этом окне столько пустых страниц, сколько планируете создать в своем проекте. Страницы можно переименовывать, помещать в каталоги и т.д.

3.3. Основные действия в программе

После того как страница создана, вы можете начать конструировать ее. Простейшие действия в программе достаточно интуитивны:

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

Окно «Свойства текста»
Рис. 19. Окно «Свойства текста».

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

вставка рисунка
Добить рисунок можно многими способами:

  • с помощью команды меню Insert - Image (Вставка - Рисунок);
  • перетащив файл изображения из окна с файлами вашего сайта;
  • скопировав в окне Windows, а после вставив файл изображения (при этом Dreamweaver предложит сохранить файл изображения внутри вашего сайта)

Для выбранного изображения вы можете изменить его свойства (рисунок 20).

Окно «Свойства изображения»
Рис. 20. Окно «Свойства изображения».

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

Окно «Свойства таблицы»
Рис. 21. Окно «Свойства таблицы».

вставка объекта формы
Для вставки формы вам вначале необходимо выполнить команду Insert - Form
После в образованной форме вы можете добавлять объекты формы, либо с помощью команд Insert - Form Object - ...
Либо с помощью кнопок, расположенных в панели конструктора. Каждый элемент формы вы можете изменять с помощью панели свойств (рисунок 22).

Окно «Свойства объекта формы», в данном случае, текстового поля
Рис. 22. Окно «Свойства объекта формы», в данном случае, текстового поля.

Практическая работа по теме «Macromedia Dreamweaver»:

Создайте мини-сайт о себе и своих увлечениях. Ваш сайт должен иметь следующие обязательные разделы:

  1. про меня (ваша фотография, краткая информация, контактная информация);
  2. мои увлечения (список ваших увлечений, оформленный в виде таблицы);
  3. любимые ссылки

Обязательные параметры:

  • Все страницы должны иметь латинские названия
  • Правильные относительные ссылки между страницами
  • Единый стиль оформления страниц
  • Правильно прописанные метатеги для каждой страницы.

Вопросы для самоконтроля:

  1. В чем достоинства и недостатки визуальных редакторов?
  2. Что значит термин «сайт» в программе Macromedia Dreamweaver?
  3. Какую кодировку имеют страницы в «рунете»?
  4. Какие режимы отображения страниц используются в программе?
  5. Для каких целей используется панель «Properties»?