Техника Web-дизайна для студента

Интерфейс программы Macromedia Dreamweaver MX 2004

При первом запуске программы Macromedia Dreamweaver MX 2004 появляется стартовая страница, позволяющая выбрать объ­ект создания или редактирования, с которым будет осуществ­ляться работа (рис. 2.1).

Стартовая страница содержит следующие разделы:

О Open a Recent Item (Открыть недавно созданный документ) включает в себя список последних (не более 10) документов, с которыми велась работа. В случае отсутствия документа в списке, он может быть открыт с помощью диалогового окна

Open (Открыть), которое появится после щелчка по соответ­ствующему значку в нижней части раздела.

□ Create New (Создать новый документ) содержит список доку­ментов, которые можно создать. Выбор пункта HTML позво­лит приступить к созданию HTML-документа. Нажав кнопку More (Больше) в нижней части раздела, можно открыть диа­логовое окно New DocUmEnt (Новый документ) с расширен­ным списком документов.

О Create from Samples (Создание по образцам). Выбор любой кнопки этого раздела приведет к открытию диалогового окна New DocUmEnt (Новый документ), в котором будет выделен соответствующий вид документа. Более подробно с содержи­мым окна New DocUmEnt (Новый документ) мы будем знако­миться по мере необходимости.

□ Extend (Расширение возможностей) — выход в Интернет на сайт фирмы Macromedia.

Установив в нижней левой части окна флажок Don’t Show Again (Больше не показывать), можно избавиться от открытия старто­вой страницы при повторных запусках программы. В этом слу­чае открытие окна New DocUmEnt (Новый документ) можно осуществлять командой меню File | New (Файл | Создать). Дос­туп к 10 недавно созданным документам будет возможен по ко­манде меню File | Open Recent (Файл | Открыть недавно создан­ный документ), а открытие любого документа — File | Open (Файл | Открыть). В случае если вы решите вернуться к исполь­зованию стартовой страницы, то командой меню Edit | Prefer­ences (Правка | Настройки) необходимо открыть диалоговое ок­но Preferences (Настройки) и в категории General (Общая) установить флажок Show start page (Показ стартовой страницы).

В ближайшее время нам предстоит работа только с HTML - документами, поэтому в разделе Create New (Создать новый до­кумент) стартовой страницы следует выбрать вид документа — HTML. После выбора данного пункта загрузится заготовка для создания новой HTML-страницы. Прежде чем приступить к ра­боте, познакомимся с элементами интерфейса программы.

Окно программы Macromedia Dreamweaver MX 2004 включает следующие элементы (рис. 2.2):

1. Строка заголовка — содержит название программы, заголовок создаваемого документа, записываемый в метке <title>, и имя файла документа. Для вновь создаваемого документа в качестве имени файла будет записано [Untitled Document (Untitled-1)]. После изменения содержимого метки <TITLE> и сохранения документа в строке заголовка произойдут соот­ветствующие изменения.

2. Строка меню — содержит команды, необходимые для работы программы и настройки внешнего вида окна.

3. Панель инструментов Insert (Вставка) предназначена для бы­строго создания различных элементов. Если панель отсутст­вует, то ее можно отобразить с помощью команды меню Win­dow | Insert (Окно | Вставка) или комбинацией клавиш <Ctrl>+<F2>, или меню View | Toolbars | Insert (Вид | Инст­рументы | Вставка). В левой части данной панели располага­ется кнопка, раскрывающая меню со списком групп инстру­ментов, входящих в ее состав. На кнопке отображается на­звание текущей группы инструментов. Последняя команда раскрывающегося меню Show as Tabs (Показать в виде вкла­док) позволяет изменить внешний вид панели (рис. 2.3).

W Insert Common i Layout | Forms | Text | HTML | Application | Flash elements | Favorites *=v |

3 * j - -

Рис. 2.3. Представление панели инструментов Insert в виде вкладок

Щелчок по маркеру в виде треугольной стрелки (слева от слова "Insert") раскрывает или сворачивает содержимое пане­ли, а стрелка разворачивается на 90°. Панель содержит мно­жество вкладок, на каждой из которых располагаются кнопки соответствующих инструментов. Такой вид панель Insert (Вставка) имела в предыдущих версиях программы Dream­weaver. Кому-то он может показаться более удобным. Чтобы вернуться к первоначальному виду панели, следует щелкнуть правой кнопкой мыши по слову "Insert" и выбрать команду Show as Menu (Показать в виде меню). Непосредственное знакомство с группами инструментов панели Insert (вставка) будет продолжено в дальнейшем.

4. Окно документа с ярлыком имени файла web-страницы, над которым ведется работа. Если в программе открыто несколько документов, то на экране будут отображаться несколько ярлы­ков. Щелчок по ярлыку позволяет перейти к нужному файлу. При работе с новым документом на ярлыке в качестве имени файла будет написано Untitled-1 (номер соответствует поряд­ковому номеру документа, создаваемого в текущий сеанс рабо­ты). После сохранения документа на ярлыке появится имя файла.

5. Панель инструментов Document (Документ) содержит кнопки управления созданием текущего документа, в частности кнопки выбора режима работы с документом. Установить или убрать панель можно с помощью команды меню View | Tool­bars | Document (Вид | Инструменты | Документ). Кнопка Code (Код) на панели инструментов Document (Документ) по-

Зволяет выбрать режим работы с HTML-кодом, предусматри­вающий ручную расстановку меток в тексте документа. Рабо­та в этом режиме практически не отличается от работы в Блокноте. Новый документ содержит первоначальный набор меток, определяющих структуру документа. Все метки нам уже известны (см. главу /), за исключением двух. Обе они не являются обязательными и поэтому не были включены в структуру HTML-документа. Однако программа Dreamweaver всегда включает их в новый документ, поэтому, если мы не собираемся постоянно удалять эти метки из текста, необхо­димо уточнить их назначение. Метка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transi­tional/ /EN" "Http://www. w3.org/TR/html4/loose. dtd">

Помогает браузеру определить версию языка HTML, которая использовалась при написании документа. W3C — сокращен­ное название организации World Wide Web Consortium, разра­ботавшей стандарт HTML. DTD (Document Type Definition) означает определение типа документа. В нашем случае доку­мент создается с использованием языка HTML версии 4.01, Http://Www.W3.Org/TR/Html4 /loose. dtd - адрес web-сайта Кон­сорциума (Consortium) W3C.

Метка

Cmeta http-equiv="Content-Type" content="text/html; charset=windows-1251">

Предназначена для указания кодировки текста на русском языке. Если после charset= указана кодировка не "windows - 1251", то, чтобы избежать проблем при работе с текстами на русском языке, необходимо изменить настройку программы Dreamweaver в категории New Document (Новый документ). Для этого можно воспользоваться командой меню Edit | Pref­erences (Правка I Настройки). В открывшемся диалоговом окне Preferences (Настройки) выбрать категорию New Docu­ment (Новый документ). В раскрывающемся списке Default encoding (Кодировка по умолчанию) необходимо выбрать Ки­риллица (Windows) и нажать кнопку ОК. Изменения вступят в силу после повторного открытия документа.

С помощью кнопки Design (Конструирование) выбирается визуальный режим работы над документом. В этом режиме

Работа по созданию web-страницы практически не отличается от создания текстового документа в обычном текстовом ре­дакторе (например MS Word). Пользователю не нужно забо­титься о расстановке меток, причем он их может просто не знать. Программа Dreamweaver будет сама расставлять в нуж­ных местах необходимые метки. Периодически переключаясь в режим Code (код), можно контролировать этот процесс.

В ряде случаев, в частности на начальных этапах обучения, целесообразно иметь перед глазами сразу два окна, в одном из которых можно будет наблюдать текст документа с рас­ставленными метками, а в другом осуществлять работу в ви­зуальном режиме. Такой режим включается кнопкой Split (Многооконный). В этом случае рабочее поле делится на две части. В нижней части можно набирать документ в визуаль­ном режиме, а в верхней — наблюдать процесс автоматиче­ской расстановки меток.

6. Панель инструментов Standard (Стандартная) содержит кноп­ки для выполнения стандартных операций в среде Windows. Кнопки данной панели дублируют соответствующие команды меню File (Файл): New — создать новый документ, Open — открыть документ, Save — сохранить, Save All — сохранить как, а также команды меню Edit (Правка): Cut — вырезать, Сору — копировать, Paste — вставить, Undo — отмена по­следнего выполненного действия, Redo — возврат отмененно­го действия. Установить или убрать панель можно с исполь­зованием команды меню View | Toolbars | Standard (Вид | Инструменты | Стандартная).

Панели Document (Документ) и Standard (Стандартная) мож­но перемещать. Для этого указатель мыши нужно установить в любое место между кнопками; нажать левую клавишу мы­ши и, удерживая ее, перетащить панель. Иногда эти панели располагают на одной горизонтальной линии, что позволяет увеличить размер рабочей области.

7. Рабочая область окна документа предназначена непосредст­венно для работы с документом. Внешний вид рабочей облас­ти зависит от выбранного режима работы. Как уже отмеча­лось, выбор режима осуществляется кнопками на панели Document (Документ).

8. Строка состояния Status bar. В левой части строки состояния находится селектор меток. В зависимости от положения кур­сора в тексте документа селектор отображает все метки, меж­ду которыми располагается курсор. Щелчок по имени метки в селекторе позволяет выделить весь фрагмент документа, ко­торый находится внутри выбранной метки. В правой части строки состояния расположены два информационных поля. В первом показан размер рабочей области окна документа в визуальном режиме в пикселях. Во втором поле находится дробное выражение, в числителе которого указан объем фай­ла страницы с учетом подключенных к ней файлов (напри­мер рисунков), а в знаменателе — время загрузки страницы по каналу связи со скоростью передачи данных 28,8 Кбит/сек.

9. Панель свойств Properties. Вид панели изменяется в зависимо­сти от того, в каком месте документа находится курсор или ка­кой объект выделен. Данная панель позволяет просматривать и изменять свойства объектов. Если панель отсутствует на экра­не, то ее можно отобразить с помощью меню Window | Proper­ties (Окно | Свойства). Панель свойств можно перемещать. Для этого необходимо указатель мыши навести на корешок панели (две вертикальные линии), при этом он должен принять вид четырехнаправленной стрелки; нажать левую кнопку мыши и, удерживая ее, переместить панель в нужное место экрана. Со­держимое панели может бать свернуто щелчком по треуголь­ной стрелке слева от слова Properties.

10. Кнопка с треугольной стрелкой, щелчок по которой позволя­ет быстро установить/с вернуть панель Properties (Свойства).

11. Кнопка с треугольной стрелкой, щелчок по которой позволя­ет установить/свернуть инструментальные панели, содержа­щие большой набор инструментов, знакомство с которыми будет осуществляться по мере необходимости. На рис. 2.2 данные кнопки находятся в режиме свернутого состояния.