Урок 3

ЗНАКОМСТВО С ИНТЕРФЕЙСОМ

Для начала имейте в виду, что Dreamweaver имеет 2 вида основных окон. На рисунке слева - окно сайта, ниже справа - окно документа. В окне сайта вы увидите список всех файлов вашего проекта. Здесь вы можете переключаться между проектами, создавать новые директории и файлы. Это окно служит также для публикации вашего сайта на удаленном сервере и управления сайтом на сервере.

Окно документа служит для редактирования странички. Именно здесь сосредоточена вся мощь Dreamweaver по созданию страниц. Используя это окно, вы можете создавать страничку визуально, а можете редактировать непосредственно html-код. Можно также использовать режим, когда одна половина окна отображает реальное изображение страницы, а другая - ее html-код. Очень удобное средство для изучения основ html.

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

С окном управления сайтом мы разберемся чуть позже, а сейчас обратим внимание на интерфейс окна документов. Вызывается это окно двойным щелчком на любом файле в окне проектов. Если вы запустили Dreamveaver первый раз, то вы попадете именно в это окно. Давайте взглянем на панель управления, расположенную в верху окна. Поле Title (подчеркнуто синим цветом) служит для ввода заголовка страницы. Эта строка будет показана в заголовке броузера при показе странички пользователю. Сюда вы вводите заголовок вашей страницы. Например, заголовок этой странички - "Internet Zone - компьютерный журнал".

Следующие две кнопки, подчеркнyтые фиолетовым, служат для управления просмотром и публикацией странички. Первая из них предоставляет меню для помещения документа на сервер или загрузки его с сервера. Пункты этого меню гласят следующее:

• Turn off Read Only - если документ помечен как "только для чтения" - переключает в режим редактирования.
• Get - загрузить этот файл с сервера. Если у вас файл расположен на сервере и на локальной машине, и их содержимое различается, то при выполнении этой команды файл с сервера будет загружен на вашу машину и ЗАМЕНИТ его. Ваш файл будет потерян. Эта функция полезна, если над проектом работает несколько человек и вам нужно загрузить файл с сервере, который был исправлен вашим коллегой.
• Check out - Эта опция предназначена для коллективной работы над проектом и будет рассмотрена позже.
• Put - загрузить файл на сервер. Файл, который расположен у вас на машине будет скопирован на сервер и заменит там предыдущий файл с этим именем. Эта функция я вляется основной для публикации на сервере измененных вами страничек.
• Check in - Эта опция предназначена для коллективной работы над проектом и будет рассмотрена позже.
• Undo Check out - Эта опция предназначена для коллективной работы над проектом и будет рассмотрена позже.
• Design Notes - позволяет создать примечание к файлу. Эта функция будет рассмотрена в разделе управления проектами.
• Locate in site - ищет текущую страничку в дереве файлов сайта. Полезна, если вы заблудились в собственном проекте :).

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

Из группы кнопок, подчеркнутых зеленой линией, нам пока что интересна будет последняя кнопка, которая управляет просмотром документа в окне. Для того, что бы разобраться с ее действием, пощелкайте по пунктам меню, которое она предоставляет.

Строка состояния также несет на себе значительное число полезных приспособлений.

Назначение этих кнопок коротко описано в списке, а по мере изучения техники работы над сайтом мы с вами разберем их подробно. Имейте в виду, что на рисунке показан полный набор кнопок, которы у вас появится только в том случае, если вы выполнили предварительную настройку Dreamweaver.

1. Показывает размер текущей рабочей области документа. Позволяет просмотреть документ с различным разрешением.
2. Показывает размер документа и скорость его закрузки при заданной скорости соединения. Скорость соединения задается в [Edit]-[Prefences...].
3. Вызов окна сайта.
4. Вызов инструмента Assets - менеджера объектов.
5. Вызов инструмента HTML Styles.
6. Вызов инструмента CSS Styles.
7. Вызов инструмента Behavior - поведение объектов.
8. Вызов истории выполненных вами действий.
9. Вызывает Инспектор кода.
10. Вызывает инструмент Frames.
11. Вызывает инструмент Layers.
12. Вызывает панель объектов, которые можно встроить в страницу.
13. Вызывает панель свойств объектов.
14. Вызывает инструмент Timeline.
15. Вызывает инструмент Reference -справка по HTML, CSS, JavaScript.

Урок 3