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

Редактор электронных учебников и курсов
“HtmlEditor”
Содержание
Содержание .......................................................................................................................................2
Интерфейс программы .....................................................................................................................3
Заголовок окна программы ..............................................................................................................3
Главное командное меню .................................................................................................................4
Панели инструментов .......................................................................................................................4
Создание нового документа .............................................................................................................5
Открытие документа .........................................................................................................................5
Сохранение документа. ....................................................................................................................5
Работа с текстом ................................................................................................................................6
Набор текста ..................................................................................................................................6
Выравнивание текста ....................................................................................................................6
Изменение шрифта .......................................................................................................................6
Изменение цвета текста и области вокруг текста ......................................................................7
Списки ................................................................................................................................................7
Добавление объектов в документ ....................................................................................................8
Рисунок ..........................................................................................................................................8
Таблица ..........................................................................................................................................9
Ссылка ............................................................................................................................................9
Флажки .........................................................................................................................................10
Переключатели ............................................................................................................................10
Поле ввода ...................................................................................................................................11
Поле ввода пароля.......................................................................................................................11
Кнопка сброса .............................................................................................................................11
Кнопка подтверждения...............................................................................................................12
Текстовое поле ............................................................................................................................12
Поле выбора файла .....................................................................................................................12
Цвет фона .....................................................................................................................................13
Поиск по документу .......................................................................................................................13
Вывод Html-кода .............................................................................................................................13
Интерфейс программы
После загрузки программы на экране появится интерфейс (рис. 1),
содержащий заголовок окна программы, главное меню, панели инструментов и
рабочее окно для отображения документов.
Рис. 1
Заголовок окна программы
Верхняя полоса темно-синего цвета отображает название и пиктограмму
программы HtmlEditor, а также содержит три кнопки для управления размерами
и местоположением окна.
Если щелкнуть на пиктограмме программы, то появится системное меню
(рис.2), которое содержит команды позволяющие восстановить, переместить
окно, изменить его размеры, закрыть.
Рис. 2
В правой части строки заголовка содержатся три кнопки. Первая кнопка
сворачивает окно программы. Вторая кнопка может быть двух видов:
увеличивает окно до размеров всего экрана или
окна, которые были до увеличения. Третья кнопка
-
- восстанавливает размеры
закрывает окно.
Главное командное меню
Главное командное меню расположено под полосой заголовка и содержит
следующие группы команд:
1. Файл – содержит набор команд, необходимых для открытия, сохранения
и закрытия документа.
2. Правка – содержит команду Найти… для поиска слов в документе.
3. О программе – содержит информацию о редакторе HtmlEditor.
Панели инструментов
В редакторе HtmlEditor есть две панели инструментов.
Первая панель расположена под строкой главного командного меню и
содержит следующие инструменты:
- создание, открытие, сохранение и печать документа
- копирование, вставка и вырезание элементов документа
- выравнивание текста
- изменение шрифта
- создание списков
- изменение цвета текста, области
- изменение размера и типа шрифта
Вторая панель инструментов находится слева от рабочего окна и содержит
инструменты, с помощью которых можно вставлять в документ различные
объекты, осуществлять поиск по документу и загружать окно с Html-кодом.
Создание нового документа
После запуска программы HtmlEditor всегда открывается окно нового
документа.
Открытие документа
Открыть существующий документ можно двумя способами.
1. В меню Файл выбрать команду Открыть.
2. На панели инструментов нажать кнопку Открыть
После этого на экране раскроется диалоговое окно, представленное на
рисунке 3.
Рис. 3
В этом окне следует выбрать нужную папку, выделить файл и нажать на
кнопку Открыть.
Сохранение документа.
Сохранить документ можно также двумя способами.
1. В меню Файл выбрать команду Сохранить как… .
2. На панели инструментов нажать кнопку Сохранить как…
.
На экране раскроется диалоговое окно, представленное на рисунке 4.
Рис. 4
Для сохранения документа следует выбрать папку, в которой он должен
быть сохранен, ввести имя файла в поле Имя файла, при необходимости выбрать
тип файла в поле Тип файла и щелкнуть по кнопке Сохранить.
Работа с текстом
Набор текста
Для набора текста в программе HtmlEditor установите курсор в нужном
месте экрана, выберете шрифт и размер шрифта на панели инструментов и
введите необходимый текст.
Выравнивание текста
Выравнивание текста осуществляется с помощью трех кнопок панели
инструментов:
- выравнивание по левому краю, - выравнивание по центру,
- выравнивание по правому краю.
Изменение шрифта
Для изменения шрифта, выделите текст и выберите одну или несколько из
следующих кнопок панели инструментов:
- отображение выделенного текста жирным шрифтом
- отображение выделенного текста курсивом
- подчеркивание выделенного текста
- изменение размера шрифта
- изменение шрифта
Изменение цвета текста и области вокруг текста
Для того, чтобы поменять цвет текста выделите текст и на панели
инструментов выберите инструмент
(Цвет шрифта).
Для того, чтобы поменять цвет области вокруг текста выделите текст и на
панели инструментов выберите инструмент
(Цвет выделенной области).
Появится меню Цвет (рис. 5), в котором выберите цвет и, после этого,
нажмите на кнопку ОК.
Рис. 5
Списки
Для создания списка в HtmlEditor выберите
инструментов на панели инструментов:
- создание нумерованного списка
один из следующих
- создание маркированного списка
- отступ от края страницы
Для добавления нового пункта списка, установите курсор в необходимом
месте списка и нажмите клавишу Enter.
Добавление объектов в документ
В программе HtmlEditor можно вставить следующие типы объектов:
Рисунок
Для вставки рисунка выбериет инструмент
(Вставить рисунок) на
панели инструментов. После этого на экране появится диалоговое окно Picture
(Рисунок) (рис. 6).
Рис. 6
В поле Picture Source (Источник рисунка) введите название файла,
содержащего рисунок.
В поле Alternate Text (Текст для замены) введите текст, который будет
появляться при наведении курсора мышки на картинку.
В группе полей Layout (Раскладка) укажите тип выравнивания (Alignment) и
толщину границы (Boder Thickness) в пикселях.
В группе полей Spacing (Интервал по) укажите отступ картинки от края по
горизонтали (Horizontal) и вертикали (Vertical).
Нажмите кнопку ОК, чтобы подтвердить вставку рисунка. Или кнопку
Cancel (Отмена), чтобы отменить вставку рисунка.
Для того чтобы изменить размеры рисунка, щелкните по нему мышкой.
Вокруг рисунка появятся восемь маркеров выделения (рис. 7). Для изменения
размера рисунка с сохранением пропорции, щелкните на одном из четырех
маркеров выделения, размещенных на углах рамки и, не отпуская левую кнопку
мыши, переместите маркер. Когда рисунок достигнет нужной величины,
отпустите кнопку мыши.
Рис. 7
Для увеличения или уменьшения размера рисунка в вертикальном или
горизонтальном направлении щелкните на одном из четырех маркеров
выделения, размещенных в середине рамки, и переместите маркер при нажатой
левой кнопке мыши.
Чтобы удалить рисунок, щелкните по нему мышкой и нажмите клавишу
Delete.
Таблица
Для вставки таблицы выберите инструмент
(Таблица) на панели
инструментов. После этого появится диалоговое окно Таблица (рис. 8), в
котором укажите число строк и столбцов таблицы, после чего нажмите кнопку
Создать.
Рис. 8
Для изменения размеров таблицы или ее удаления, необходимо произвести
те же действия, что и для изменения размеров и удаления рисунка.
Ссылка
Для того, чтобы добавить ссылку, выберите инструмент
(Ссылка) на
панели инструментов. Появится диалоговое окно Hyperlink (Ссылка) (Рис. 9).
Рис. 9
В этом окне выберите Тип (Type) ссылки и ее адрес (URL).
Флажки
Для вставки флажка в документ установите курсор в том месте документа,
где вы хотите расположить флажок и выберете инструмент
панели инструментов (Рис. 10).
(CheckBox) на
Рис 10
Для изменения размеров флажка или его удаления, необходимо произвести
те же действия, что и для изменения размеров и удаления рисунка.
Переключатели
Для вставки переключателя в документ установите курсор в том месте
документа, где вы хотите расположить переключатель и выберите инструмент
(Radio) на панели инструментов (Рис. 11).
Рис. 11
Для изменения размеров переключателя или его удаления, необходимо
произвести те же действия, что и для изменения размеров и удаления рисунка.
Поле ввода
Для вставки поля ввода в документ установите курсор в том месте
документа, где вы хотите расположить поле ввода и выберите инструмент
(Поле ввода) на панели инструментов (Рис. 12).
Рис. 12
Для изменения размеров поля или его удаления, необходимо произвести те
же действия, что и для изменения размеров и удаления рисунка.
Поле ввода пароля
Для вставки поля ввода пароля в документ установите курсор в том месте
документа, где вы хотите расположить поле ввода и выберите инструмент
(Поле ввода пароля) на панели инструментов (Рис. 13).
Рис. 13
Для изменения размеров поля или его удаления, необходимо произвести те
же действия, что и для изменения размеров и удаления рисунка.
Кнопка сброса
Для вставки кнопки сброса в документ установите курсор в том месте
документа, где вы хотите расположить кнопку сброса и выберите инструмент
(Кнопка сброса) на панели инструментов (Рис. 14).
Рис. 14
При необходимости, кнопку можно переименовать. Для этого дважды
щелкните мышкой по кнопке, удалите надпись и введите нужное название.
Для изменения размеров кнопки или ее удаления, необходимо произвести те
же действия, что и для изменения размеров и удаления рисунка.
Кнопка подтверждения
Для вставки кнопки подтверждения в документ установите курсор в том
месте документа, где вы хотите расположить кнопку и выберите инструмент
(Кнопка подтверждения) на панели инструментов (Рис. 15).
Рис. 15
При необходимости, кнопку можно переименовать. Для этого дважды
щелкните мышкой по кнопке, удалите надпись и введите нужное название.
Для изменения размеров кнопки или ее удаления, необходимо произвести те
же действия, что и для изменения размеров и удаления рисунка.
Текстовое поле
Для вставки текстового поля в документ установите курсор в том месте
документа, где вы хотите расположить поле и выберите инструмент
(Текстовое поле) на панели инструментов (Рис. 16).
Рис. 16
Для изменения размеров поля или его удаления, необходимо произвести те
же действия, что и для изменения размеров и удаления рисунка.
Поле выбора файла
Для вставки поля выбора файла в документ установите курсор в том месте
документа, где вы хотите расположить поле и выберите инструмент
(Выбор файла) на панели инструментов (Рис. 17).
Рис. 17
Для изменения размеров поля или его удаления, необходимо произвести те
же действия, что и для изменения размеров и удаления рисунка.
Цвет фона
Для того, чтобы поменять цвет фона документа выберите инструмент
(Цвет фона). Появится диалоговое окно (рис. 18), в котором выберете
необходимый цвет.
Рис. 18
Поиск по документу
Для поиска в документе нужного слова, выберите инструмент
по документу). Появится диалоговое окно (рис. 19).
(Поиск
Рис. 19
В поле Find what (Найти) введите слова, которые вы хотите найти в
документа.
При необходимости установите флажок Match whole word only (Слово
целиком) и/или флажок Match case (с учетом регистра).
В группе Direction укажите направление поиска по документу: Up (Вверх)
или Down (Вниз).
Вывод Html-кода
Для того чтобы посмотреть Html-код созданного Вами документа, нажмите
кнопку
(Показать Html-код) на панели инструментов. Откроется окно
<Html> (рис. 20). При необходимости в код можно внести изменения, которые
сразу же отображаются в документе.
Рис. 20