лекция. 1. Интерфейс Dreamweaver Рабочий экран

• Название: 1. Интерфейс Dreamweaver Рабочий экран
• Анкор: лекция
• Дата: 12.03.2022
• Размер: 1.08 Mb.
• Имя файла: IT.doc
• Тип: Программа; #392878

1. Интерфейс Dreamweaver

1.1. Рабочий экран

Как и любая программа Dreamweaver имеет главное окно (рис.1.1), снабженное заголовком, главным и системным меню, а также кнопками закрытия, минимизации и сворачивания. Главному окну можно придавать произвольный размер и положение на экране монитора.

О сновной пульт управления программой – это главное меню, находящееся непосредственно под строкой заголовка.




6

7

Рис. 1.1. Интерфейс Dreamweaver
1 – главное меню программы; 2 – панель Insert; 3 – панель Doсument;
4 – окно документа в режиме Split; 5 – панель свойств; 6 – разделительная полоса; 7 – сгруппированные инструментальные панели

1.3. Режимы работы

Создание гипертекстового документа практически не отличается от работы с обычным текстовым редактором.

Базовые операции ввода и форматирования текста, вставки объектов, техника навигации и выбора реализованы в стиле визуальных сред программирования. Dreamweaver автоматически создает исходный текст, в котором информационное наполнение документа и его оформление записываются в кодах языка разметки HTML. При этом остается возможность ручного кодирования, для чего в пакете предусмотрен инспектор кодов (Code Inspector).

Предусмотрена возможность задания режимов работы окна документов. Окно может находиться в одном из трех режимов:

• 
  Design (Режим планирования) это обычный режим визуального редактирования текстовой страницы;
  
• 
  Code (Режим разметки). В этом режиме отображается полный исходный код гипертекстовой страницы со всеми дескрипторами, метатегами, сценариями и комментариями. Это кодовый режим. На рис.1.2 показана пустая страница в режиме отображения кодов. Каждая новая страница получает автоматически базовую гипертекстовую разметку;
  
• 
  Split (Режим разметки и планирования). Это комбинированный режим, в котором страница расщепляется на две секции: в одной отображаются коды, а в другой планировка со всеми объектами и атрибутами форматирования (рис.1.3).
  

Рис.1.2. окно в режиме Code



Рис.1.3. Режим Split (Расщепленное окно)

1.4. Строка меню

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

Строка включает команды:

• 
  меню File (Файл) объединяет файловые команды, средства работы с шаблонами, команды экспорта, импорта и просмотра документа во внешних браузерах;
  
• 
  меню Edit (Правка) включает команды управляющие буфером обмена, средства поиска, выбора объектов, настройки программы, управления кодами гипертекстовой разметки;
  
• 
  меню View (Вид) объединяет средства визуализации вспомогательных элементов интерфейса и объектов гипертекстового документа;
  
• 
  меню Insert (Вставка) содержит команды импорта различных объектов: изображений, таблиц, сценариев, слоев, специальных символов, метадескрипторов и т.п.;
  
• 
  меню Modify (Изменить) объединяет средства и команды для изменения атрибутов объектов документа;
  
• 
  меню Text (Текст) включает ресурсы, связанные с созданием текстовых фрагментов и их форматированием;
  
• 
  меню Commands (Команды) объединяет командные средства автоматической обработки гипертекстовых документов: сценариев, утилит, верификаторов кодов и пр.;
  
• 
  меню Site (Сайт) включает средства работы с сайтами и связанными системами гипертекстовых документов;
  
• 
  меню Window (Окно) содержит команды визуализации палитр, панелей и диалоговых окон программы.
  

1.5. Панель инструментов

Панель инструментов объединяет кнопки вызова наиболее часто используемых команд и ресурсов редактора. На это панели расположены следующие элементы управления (рис. 1.4):



Параметры отображения



Управление файлами


Рис. 1.4. Панель инструментов

• 
  Title (Заголовок) – поле для ввода заголовка документа;
  
• 
  File Management (Управление файлами) – кнопка открывает меню, содержащее файловые команды сетевого обмена и контроля обращения;
  
• 
  Preview/Debug in Browser (Просмотр/Отладка в браузере) – кнопка открывает меню с командами просмотра документа в браузере;
  
• 
  Refresh Design View ( Обновить страницу) – команда переноса всех изменений в исходном документе в режим Design;
  
• 
  Reference (Справка) – кнопка вызова справки;
  
• 
  Code Navigation (Навигация по кодам) – кнопка открывает доступ к меню с командами, управляющими отладкой встроенных программ, написанных на языке Java Script;
  
• 
  View Options (Параметры отображения) – кнопка открывает меню с командами управления визуализацией вспомогательных элементов окна документа.
  

1.6. Селектор разметки

В левой части строки состояния (рис.1.1) расположен селектор разметки, представляющий собой индикатор, показывающий дескрипторы разметки HTML, окружающие текущую позицию курсора.

Программа постоянно отслеживает положение курсора и обновляет состояние селектора разметки.

Щелчок на имени дескриптора в строке состояния выбирает всю его область действия в окне документа. Выбранный дескриптор в селекторе разметки выделяется полужирным шрифтом.

1.7. Размер страницы

В средней части строки состояния (рис.1.1) расположено поле в котором выводятся текущие размеры окна документа в пикселах (рис. 1.5). Первое число дает значение ширины, а второе – высоты. Если щелкнуть мышкой на любой точке этого поля, то выводится диалоговое окно выбора размера окна.

Рис. 1.5. Панель задания размеров окна

1.8. Инспектор свойств

Палитра Property inspector (Инспектор свойств) – это основной инструмент программы по созданию гипертекстовых документов. Ее содержание изменяется в зависимости от выполняемой операции, положения курсора и типа выбранных объектов.

Для вывода палитры на экран выполнить команду Window/ Properties Окно/Свойства или воспользоваться комбинацией Ctrl+F3.

Рис.1.6. Инспектор свойств (панель свойств)

Инспектор свойств содержит следующие поля и кнопки (рис.1.6):

• 
  Format (Формат) выбор структуры и типа текста (1);
  
• 
  список Font (Шрифт) – выбор типа шрифта (2);
  
• 
  Size (Размер) – выбор размера шрифта (3);
  
• 
  Style (Стиль) – выбор стиля шрифта (4);
  
• 
  Align (Выравнивание) – выбор стиля выравнивания текста (5);
  
• 
  список Link (Ссылка) – хранит перечень всех ссылок текущего документа (6);
  
• 
  маркер-указатель. Создает гипертекстовые ссылки при его перетаскивании на требуемый источник: файл или символ привязки (7);
  
• 
  кнопка открытия диалогового окна Select File (Выбрать файл), (8);
  
• 
  кнопка вызова цветовой палитры для оформления текста (9);
  
• 
  кнопка вызова окна задания свойств страницы (10);
  
• 
  список Target (Назначение) предназначен для выбора способа визуализации документа, на который указывает гипертекстовая ссылка (11);
  
• 
  кнопка List Item (Раздел списка) служит для открытия диалогового окна List Properties (Свойства списка) для редактирования списков всех типов (12);
  
• 
  кнопки создания нумерованных и маркированных списков (13);
  
• 
  поле для отображения кода выбранного цвета текста (14);
  
• 
  кнопки выбора типа начертания шрифта (15);
  
• 
  кнопка вызова экспресс редактора кодов (16);
  
• 
  кнопки вызова интерактивной подсказки (17);
  

1.9. Панель Insert (Палитра объектов)

Панель Insert служит для вставки и создания внешних объектов. Все, что можно включить в состав страницы HTML, от растровых изображений до скриптов, можно вставить при помощи этой палитры.

В ывод палитры на экран осуществляется командой Window/Object (Окно/Объекты) или комбинацией клавиш Ctrl+F2. Повторное выполнение команды убирает палитру с экрана.


Рис.1.7.Палитра объектов
Палитра содержит следующие разделы (рис.1.7):

• 
  Common (Общие) – раздел объединяет самые ходовые объекты: таблицы, изображения, горизонтальные линейки, календарные даты и т.д.;
  
• 
  Forms (Формы) содержит формы и элементы их образующие: переключатели, списки, текстовые поля и пр.;
  
• 
  Data (Данные);
  
• 
  Spry (команды задания специальных свойств);
  
• 
  Text (текст). Команды задания параметров текста;
  
• 
  Layout (выбор разметки рабочей области).
  

1.10. Инспектор кода

Инспектор кода (Code Inspector) предназначен для просмотра и редактирования кодов разметки гипертекстовых документов.




Рис.1.8. Инспектор кода
Вызов инспектора кодов: Window/Code Inspector (Окно/ Инспектор кода) или клавишей F10. Кроме того, панель и палитра быстрого запуска имеют кнопки активизации этого средства.

На рис.1.8 показано окно Инспектора кодов с нажатой кнопкой View Options. Первые пять кнопок Инспектора кодов дублируют соответствующие кнопки панели инструментов. Шестая кнопка View Options открывает доступ к кнопкам управления кодами разметки:

• 
  Word Wrap (Перенос по словам) – режим переноса строк кода;
  
• 
  Line Numbers (Номера строк) – команда отображения порядковых номеров строк;
  
• 
  Highlight Invalid HTML (Пометка некорректных кодов) – команда активизирует режим пометки желтым цветом синтаксически некорректных конструкций кодов;
  
• 
  Syntax Coloring (Раскраска синтаксических конструкций). В этом режиме различные по смыслу части кодовой разметки выделяются разным цветом. Назначение цветов выполняется в основных настройках программы в разделе Code Colors (Цвета кода);
  
• 
  Auto Indent (Автоматический отступ). Команда активизирует режим автоматической установки отступов для дескрипторов разметки, вводимых в окне Инспектора кодов. Виды дескрипторов и правила расстановки отступов задаются в специальном файле инициализации SourceFormat.txt.
  

В правой части окна Инспектора кодов расположена треугольная кнопка вызова меню с командами обслуживания исходного текста документа:

• 
  Find and Replace (Найти и заменить) вызывает команду поиска и замены;
  
• 
  Find Next (Найти далее) запускает процедуру поиска с ранее введенным образцом для поиска и текущими параметрами поиска;
  
• 
  Reference (Справочное руководство);
  
• 
  Set Breakpoint (Вставить контрольную точку) устанавливает контрольную точку в позиции текстового курсора;
  
• 
  Remove All Breakpoint (Удалить все контрольные точки) удаляет все контрольные точки из исходного текста документа;
  
• 
  Cut (вырезать) вырезает выбранный кодовый фрагмент в буфер обмена;
  
• 
  Copy (Копировать) копирует выбранный кодовый фрагмент в буфер обмена;
  
• 
  Paste (Вставить) вставляет содержимое буфера обмена в место расположения курсора.