ОФИЦИАЛЬНОЕ ПРЕДСТАВИТЕЛЬСТВО ИСПОЛНИТЕЛЬНЫХ ОРГАНОВ ГОСУДАРСТВЕННОЙ ВЛАСТИ САНКТ-ПЕТЕРБУРГА В ИНФОРМАЦИОННО-ТЕЛЕКОММУНИКАЦИОННОЙ СЕТИ ОБЩЕГО

advertisement
ОФИЦИАЛЬНОЕ ПРЕДСТАВИТЕЛЬСТВО ИСПОЛНИТЕЛЬНЫХ
ОРГАНОВ ГОСУДАРСТВЕННОЙ ВЛАСТИ САНКТ-ПЕТЕРБУРГА В
ИНФОРМАЦИОННО-ТЕЛЕКОММУНИКАЦИОННОЙ СЕТИ ОБЩЕГО
ПОЛЬЗОВАНИЯ «ИНТЕРНЕТ»
ИНСТРУКЦИЯ ПО ИСПОЛЬЗОВАНИЮ ВИЗУАЛЬНОГО РЕДАКТОРА
На ____ листах
Действует с _________________
Санкт-Петербург 2011
2
СОДЕРЖАНИЕ
1
Краткое описание редактора ........................................................................................... 4
2
Работа с текстом ............................................................................................................... 5
2.1
Размещение текстовой информации ....................................................................... 5
2.1.1 Использование кнопок общего редактирования текста .................................. 5
2.1.2 Вставка текста из MS Word ................................................................................ 5
3
2.2
Изменение стиля шрифта ......................................................................................... 6
2.3
Структурирование текста ......................................................................................... 7
2.4
Изменение стиля оформления ................................................................................. 8
Работа с изображениями .................................................................................................. 9
3.1
Добавление изображения ......................................................................................... 9
3.2
Изменение свойств изображения .......................................................................... 11
3.2.1 Изменение размеров изображения .................................................................. 12
4
3.3
Назначение ссылки на изображение ..................................................................... 12
3.4
Настройка дополнительных параметров изображения ....................................... 15
Работа с таблицами ........................................................................................................ 17
4.1
Вставка таблицы ..................................................................................................... 17
4.2
Создание таблицы в редакторе .............................................................................. 18
4.3
Изменение свойств таблицы .................................................................................. 19
4.4
Настройка дополнительных параметров таблицы ............................................... 20
4.5
Редактирование таблицы........................................................................................ 21
4.5.1 Редактирование строк таблицы ....................................................................... 21
4.5.2 Редактирование столбцов таблицы ................................................................. 22
4.5.3 Редактирование ячейки таблицы ..................................................................... 23
4.5.4 Настройка дополнительных параметров ячеек .............................................. 24
5
Работа со ссылками ........................................................................................................ 27
3
5.1
Вставка ссылки ........................................................................................................ 27
5.2
Изменение информации о ссылке ......................................................................... 27
5.3
Указание места открытия ссылки ......................................................................... 28
5.4
Загрузка документа с использованием инструмента ссылка .............................. 29
5.5
Настройка дополнительных параметров ссылок ................................................. 30
5.6
Удаление ссылки ..................................................................................................... 31
5.7
Установка якоря ...................................................................................................... 32
6
Дополнительные возможности ..................................................................................... 33
7
Ограничения при работе с редактором ........................................................................ 35
4
1
Краткое описание редактора
Визуальный редактор HTML-страниц CKeditor обладает большим количеством
разнообразных функций. Он оформлен в стиле MS Word, что делает обращение с ним более
привычным. Интерфейс редактора представлен на рис. 1.
Рисунок 1 – Интерфейс редактора
5
2
2.1
Работа с текстом
Размещение текстовой информации
2.1.1 Использование кнопок общего редактирования текста
Для размещения текстовой информации используются кнопки общего редактирования
текста. Назначение кнопок общего редактирования текста (рис. 2) аналогично кнопкам
редактора MS Word.
Рисунок 2 – Кнопки общего редактирования текста
К кнопкам общего редактирования текста относятся следующие:
1)
Кнопка "Вырезать"
. Вырезает выделенный текст, сохраняя его в буфер
обмена, т.е. в дальнейшем текст может быть вставлен.
2)
Кнопка "Копировать "
. Копирует выделенный текст в буфер обмена, т. е. в
дальнейшем текст может быть вставлен.
3)
Кнопка "Вставить"
. Вставляет на место курсора текст в том виде, в котором
он находится в буфере обмена, т.е. с сохранением исходного форматирования.
4)
Кнопка "Вставить только текст"
. Вставляет из буфера только текстовую
информацию, исходное форматирование сбрасывается. Изображения игнорируются, ссылки
заменяются простым текстом.
5)
Кнопка "Вставить из Word"
. Используется для корректной вставки текста
из MS Word.
2.1.2 Вставка текста из MS Word
Для вставки текста из редактора MS Word требуется:
1)
Выделить переносимый участок текста (или весь документ) в редакторе
MS Word и скопировать его в буфер обмена (сочетанием клавиш Ctrl + C; либо щелчком
правой кнопкой мышки вызвать контекстное меню, в котором выбрать «Копировать»).
6
2)
Поставить курсор в то место в поле текстового редактора, куда планируется
вставить текст из буфера обмена.
3)
Вызвать окно вставки текста из Word (щелчком по кнопке
на панели
инструментов). Откроется окно, в которое надо вставить в текст при помощи сочетания
клавиш Ctrl+V. После нажатия кнопки «ОК» текст будет добавлен в окно текстового
редактора.
Внимание: При использовании браузера Internet Explorer для вставки текста требуется
только установить курсор в нужном месте в окне редактора и нажать комбинацию клавиш
Ctrl+V, а при использовании других браузеров появится окно для вставки текста,
приведённое на рис. 3.
В открывшемся окне необходимо поместить курсор в поле ввода и нажать
комбинацию клавиш Ctrl+V, а затем – кнопку «ОК».
Рисунок 3 – Окно для вставки текста
2.2
Изменение стиля шрифта
Изменение стиля шрифта производится с использованием кнопок стилей шрифта,
представленных на рис. 4.
Рисунок 4 – Кнопки стилей шрифта
7
К кнопкам стилей шрифта относятся следующие:
1)
Кнопка "Жирный"
. Предназначена для жирного начертания текста.
2)
Кнопка "Курсив"
. Предназначена для курсивного начертания текста.
3)
Кнопка "Подчеркнутый"
. Предназначена для подчеркивания текста.
4)
Кнопка «Зачёркнутый»
. Предназначена для зачёркивания текста.
5)
Кнопка "Подстрочный индекс"
. Преобразует текст в нижний индекс.
6)
Кнопка "Надстрочный индекс"
. Преобразует текст в верхний индекс.
2.3
Структурирование текста
Кнопки структурирования текста представлены на рис. 5.
Рисунок 5 – Кнопки структурирования текста
К кнопкам структурирования текста относятся следующие:
1)
Кнопка
"Вставить / Удалить
нумерованный
список"
.
Создает
.
Создает
нумерованный список из выделенного текста.
2)
Кнопка
"Вставить / Удалить
маркированный
список"
маркированный список из выделенного текста.
3)
Кнопка "Уменьшить отступ"
. Уменьшает отступ текстового фрагмента.
4)
Кнопка "Увеличить отступ"
. Увеличивает отступ текстового фрагмента.
5)
Кнопка «Цитата»
. Предназначена для добавления цитаты.
8
2.4
Изменение стиля оформления
Редактор предусматривает возможность выбора заранее установленного стиля
оформления для выбранного фрагмента текста (рис. 6).
Рисунок 6 – Выбор стиля оформления
9
3
3.1
Работа с изображениями
Добавление изображения
Для добавления на страницу изображения необходимо загрузить его на сервер. Для
этого необходимо нажать на кнопку «Изображение» (рис. 7).
Рисунок 7 – Кнопка «Изображение»
Откроется диалоговое окно свойств (рис. 8), которое позволяет задать параметры,
определяющие исходное изображение, его размер,
свойства экрана, либо другие
дополнительные свойства. Диалоговое окно «Свойства изображения» включает в себя четыре
вкладки:
1)
Данные об изображении.
2)
Ссылка.
3)
Загрузить.
4)
Дополнительно.
Рисунок 8 – Диалоговое окно свойств. Вкладка «Данные об изображении»
10
После этого следует нажать вкладку «Загрузить», появляется дополнительное окно,
представленное на рис. 9: Далее нажмите на кнопку «Обзор», выберите необходимое
изображение на компьютере и нажмите на кнопку с надписью «Открыть». Далее нажмите на
кнопку «Загрузить на сервер».
Рисунок 9 – Добавление изображения
Изображение добавляется на сайт в оригинальном размере. После загрузки можно
установить размер, в котором изображение будет показываться на сайте. Для
этого
необходимо в закладке «Данные об изображении» установить нужную ширину и высоту.
(рис. 10).
11
Рисунок 10 – Изменение размеров изображения
3.2
Изменение свойств изображения
Изменить свойства изображения можно во вкладке «Данные об изображении», где
можно установить следующие параметры:
1)
«Ссылка» или «URL» - веб-адрес изображения. Изображение может быть
размещено на внешнем сервере, для этого требуется отобразить полный путь, например:
http://docs.cksource.com/images/2/25/CKEditor_images_advanced.jpg.
2)
«Альтернативный текст» - короткое текстовое описание изображения, которое
появляется в виде всплывающей подсказки при наведении на него курсора мыши.
Рекомендуется предоставлять изображения со значимым альтернативным текстом для того,
чтобы сделать их доступными для пользователей с ограниченными возможностями.
3)
«Ширина» - ширина изображения в точках (далее – пикселях). По умолчанию
это размер исходного изображения.
4)
«Высота» - высота изображения в пикселях. По умолчанию это размер
исходного изображения.
5)
«Граница» - размер видимой границы вокруг изображения в пикселях. Граница
устанавливается только в случае необходимости отделить изображение от фона страницы.
6)
«Горизонтальный отступ» - расстояние между левым и правым краями
изображения и другими элементами страницы, которые окружают изображения, в пикселях.
12
7)
«Вертикальный отступ» - расстояние между нижним и верхним краями
изображения и другими элементами страницы, которые окружают изображение, в пикселях.
8)
«Выравнивание» - выравнивание изображения в документе. Доступные опции:
по правому и левому краю.
3.2.1 Изменение размеров изображения
Если изображение слишком большое, можно изменить его размеры, введя новые
значения в полях «Ширина» и «Высота». По умолчанию пропорции изображения
сохраняются (кнопка «Сохранять пропорции»). Это означает, что при изменении одного из
параметров размера (ширина или высота), другой будет корректироваться автоматически.
Если вы хотите свободно изменять размеры, нажмите кнопку «Сохранять пропорции»,
чтобы её разблокировать. Теперь изменения и модификации одного параметра не будут
автоматически изменять другой. Для блокировки пропорций изображения нажмите кнопку
повторно.
Вы можете легко вернуться к исходному размеру изображения нажатием кнопки
«Вернуть обычные размеры». Это вернёт первоначальные параметры размера; значения
оригинальной ширины и высоты появятся в соответствующих текстовых полях.
3.3
Назначение ссылки на изображение
Вкладка «Ссылка» (рис. 11) позволяет назначить ссылку на изображение, вставленное
в документ, то есть сделать изображение гиперссылкой. Ссылка может указывать на объект
любого типа из числа доступных в Интернете (веб-страница, документы, видео и пр.).
Для использования данной функции сначала нужно загрузить изображение на сервер,
после настройки параметров отображения следует переключиться на вкладку «Ссылка» и
настроить цель с помощью доступных опций.
13
Рисунок 11 – Диалоговое окно свойств. Вкладка «Ссылка»
Ниже приводится краткий обзор элементов вкладки «Ссылка»:
1)
«Ссылка» - URL (адрес) изображения, который откроется при нажатии на
исходное изображение. Это может быть простой адрес веб-сайта, изображения или другого
файла, который находится на том же сервере.
2)
«Цель» - окно, в котором назначенная ссылка откроется после нажатия на
изображение. Вы можете выбрать между «Не указано», «Новое окно ( _blank )», «Главное
окно ( _top )», «Текущее окно ( _self )», или «Родительское окно ( _parent )».
Для добавления на страницу изображения, при нажатии на которое будет открываться
это же изображение, но в размере оригинала, нужно выполнить следующие действия:
1) Нажать на кнопку «Изображение» и перейти на вкладку «Загрузить».
2) Нажать на кнопку «Выбрать файл» для выбора изображения на компьютере.
3) Нажать на кнопку «Загрузить на сервер», откроется вкладка «Данные об
изображении».
4) Изменить размеры изображения (ширину и высоту) на требуемые и скопировать из
поля «Ссылка» ссылку на оригинал изображения (рис. 12).
14
5) Переключиться на вкладку «Ссылка» и вставить в поле «Ссылка» содержимое из
буфера обмена (рис. 13).
6) Нажать на кнопку «ОК».
Рисунок 12 – Вставка изображения со ссылкой. Копирование ссылки
Рисунок 13 – Вставка изображения со ссылкой. Вставка ссылки
15
3.4
Настройка дополнительных параметров изображения
Вкладка «Дополнительно» предназначена для продвинутых пользователей со знанием
HTML, а также CSS. Позволяет настроить дополнительные параметры изображения, такие
как присвоить ему идентификатор класса, более подробное описание, подсказка или свойства
CSS стиль.
Рисунок 14 – Диалоговое окно свойств. Вкладка «Дополнительно»
Ниже представлен обзор элементов вкладки «Дополнительно»:
1)
«Идентификатор» - уникальный идентификатор для элемента изображения в
документе (id атрибута).
2)
«Направление текста» - направление текста: слева направо (LTR) или справа
налево (RTL) (dir атрибута).
3)
«Код языка» - язык элемента изображения, указанного в соответствии с RFC
1766 (lang атрибута).
4)
«Длинное описание ссылки» - веб-адрес HTML-страницы, содержащей более
подробное описание образа (longdesc атрибут).
16
5)
«Класс CSS»- класс элемента изображения (class атрибута. Необходимо
отметить, что изображению может быть назначено более одного класса. Если это так,
отдельные имена классов указываются через пробелами.
6)
«Заголовок» - текст подсказки, который отображается, когда курсор мыши
находится над изображением (title атрибута).
7)
«Стиль» - CSS стиль (style атрибута). Необходимо отметить, что каждое
значение должно заканчиваться точкой с запятой и индивидуальные свойства должны быть
разделены пробелами.
17
4
4.1
Работа с таблицами
Вставка таблицы
Вставить таблицу можно тремя способами:
1)
При помощи выпадающего меню «Таблицы». Выпадающее меню содержит два
значения:

«Контакты» - добавляется шаблонная таблица для контактов.

«По умолчанию» - добавляется шаблонная таблица (рис. 14).
Рисунок 15 – Выпадающее меню «Таблицы». Вставка шаблонной таблицы
2)
При помощи кнопки "Вставить из Word" c форматированием в MS Word1
(рекомендуется). Для этого следует:

Выделить всю таблицу (в редакторе MS Word) и нажать клавишу свойств
таблицы (вкладка «Свойства таблицы» в контекстном меню, вызываемом щелчком правой
кнопки мыши).

Во вкладке столбец указать ширину столбцов в «%» и необходимых значениях,
достаточных для ширины текущего столбца. Убедиться, что ширина всех столбцов указана в
«%». Нажать «ОК».
Следует обратить внимание, что большинство таблиц из редактора MS Word сформированы с жестко
заданным значением ширины колонок и ячеек в сантиметрах или пикселях и при переносе таблицы все эти
значения будут также перенесены в текстовый редактор на сайте. Если ширина такой таблицы превышает
ширину части страницы, предназначенной для размещения этой таблицы, это может привести к некорректному
отображению страницы. Чтобы избежать этого, желательно формировать таблицу с шириной колонок,
указанной в «%».
1
18

Выделить таблицу и скопировать её в буфер обмена.

Поставить курсор в текстовом поле редактора в то место, куда будет
вставляться таблица, нажать кнопку
(Вставить из Word), вставить таблицу в поле
открывшегося окна и нажать «ОК».
3)
При помощи кнопки "Вставить из Word" c форматированием в редакторе. Для
этого следует:

Скопировать в MS Word таблицу в буфер обмена.

В окне редактора поставить курсор в то место, куда будет вставляться таблица.

Нажать кнопку
(вставить из Word), в открывшееся окно вставить из буфера
обмена таблицу, нажать клавишу «ОК». Таблица появится в текстовом поле редактора.

Поставить курсор в ячейку, щелчком правой кнопки мыши вызвать контекстное
меню, в нем выбрать вкладки «Ячейка» - «Свойства ячейки».

В открывшемся окне проставить значение ширины в «%» (для изменения
ширины столбца достаточно ввести параметры для ячеек первой строки).
4.2
Создание таблицы в редакторе
Чтобы создать таблицу, нажмите кнопку «Таблица» (рис. 15) на панели инструментов.
Рисунок 16 – Кнопка «Таблица»
В открывшемся диалоговом окне (рис. 16) можно задать параметры, которые
определяют размер таблицы, её свойства.
19
Рисунок 17 – Диалоговое окно «Свойства таблицы». Вкладка «Свойства таблицы»
Диалоговое окно Свойства таблицы состоит из двух вкладок:
1)
«Свойства таблицы»;
2)
«Дополнительно».
4.3
Изменение свойств таблицы
Изменение свойств таблицы в редакторе производится с использованием вкладки
«Свойства таблицы». Данная вкладка позволяет установить размер таблицы и настроить её
вид.
Ниже представлен обзор элементов таблицы вкладки «Свойства таблицы»:
1)
«Строки» - количество строк в таблице (обязательно для заполнения).
2)
«Колонки» - количество столбцов в таблице (обязательно для заполнения).
3)
«Ширина» - ширина таблицы в пикселях или процентах.
4)
«Высота» - высота таблицы в пикселях.
5)
«Заголовки» - выпадающий список, в котором определены форматы ячеек
заголовков таблицы для применения к ним специального форматирования (отличного от
других ячеек): «Без заголовков», «Верхняя строка», «Левая колонка», «Сверху и слева».
6)
«Размер границ» - толщина границы таблицы в пикселях.
7)
«Выравнивание» - выравнивание таблицы на странице. Доступны следующие
варианты: По левому краю, по правому краю, по центру.
20
8)
«Внешний отступ ячеек» - пространство между отдельными ячейками в
пикселях по горизонтали.
9)
«Внутренний отступ ячеек» - расстояние между границей ячейки и ее
содержимым, в пикселях по вертикали.
10)
«Заголовок» - название таблицы, которое отображается при наведении мыши на
таблицу.
11)
«Итоги» - краткое изложение содержания таблицы, которое доступно для
вспомогательных устройств, таких как программа чтения с экрана.
4.4
Настройка дополнительных параметров таблицы
Вкладка «Дополнительно» предназначена для продвинутых пользователей со знанием
HTML, а также CSS и позволяет настроить дополнительные параметры, такие как присвоить
её идентификатор класса, языковое направление, или свойства CSS стиля.
Рисунок 18 – Диалоговое окно «Свойства таблицы». Вкладка «Дополнительно»
Ниже представлен обзор элементов вкладки:
1)
«Идентификатор» - уникальный идентификатор для элемента таблицы в
документе (id атрибута).
2)
«Направление языка» - направление текста в таблице: слева направо (LTR) или
справа налево (RTL) (dir атрибута).
21
3)
«Стиль» - CSS стили (style атрибута). Необходимо отметить, что каждое
значение должно заканчиваться точкой с запятой и индивидуальные свойства должны быть
разделены пробелами.
4)
«Классы CSS» - класс элемента таблицы (class атрибута). Обратите внимание,
что таблице может быть назначено более одного класса. Если это так, отдельные имена
классов должны находиться через пробел.
4.5
Редактирование таблицы
После вставки в документ таблица может быть изменена. Для редактирования таблицы
откройте контекстное меню таблицы (рис. 17), щелкнув на ней правой кнопкой мыши.
Рисунок 19 – Контекстное меню таблицы
Чтобы удалить всю таблицу и ее содержимое, используйте опцию «Удалить таблицу».
При выборе опции «Свойства таблицы» появится диалоговое окно «Свойства
таблицы», описанное выше. Оно позволяет изменять параметры конфигурации, которые
были установлены при создании таблицы, кроме количества строк и столбцов.
Кроме того меню позволяет изменять строки, столбцы или отдельные ячейки таблицы.
Этот метод позволяет вставлять новые строки, столбцы или ячейки в указанных местах, а
также производить слияние и разбиение ячеек.
4.5.1 Редактирование строк таблицы
Редактирование строк таблицы производится через пункт контекстного меню
«Строка» (рис. 18).
22
Рисунок 20 – Пункт меню «Строка»
Ниже представлен обзор действий со строками:
1)
«Вставить строку сверху» - вставляет новую строку перед той, которая
содержит курсор.
2)
«Вставить строку снизу» - вставляет новую строку после той, которая содержит
курсор.
3)
Удалить строки - удаляет строку, в которой находится курсор.
Внимание: редактор позволяет выбрать несколько ячеек таблицы с помощью мыши,
так что производимые операции могут быть применены к нескольким строкам таблицы
одновременно.
4.5.2 Редактирование столбцов таблицы
Редактирование столбцов производится через пункт контекстного меню «Колонка»
(рис. 19).
Рисунок 21 – Пункт меню «Колонка»
Ниже представлен обзор действий с колонками:
1)
«Вставить колонку слева» - вставляет новый столбец перед тем, который
содержит курсор.
23
2)
«Вставить колонку справа» - вставляет новый столбец после того, который
содержит курсор.
3)
«Удалить колонки» - удаляет столбец, который содержит курсор.
Внимание: редактор позволяет выбрать несколько ячеек таблицы с помощью мыши,
так что производимые операции могут быть применены к нескольким столбцам таблицы
одновременно.
4.5.3 Редактирование ячейки таблицы
Редактирование ячеек производится через пункт контекстного меню «Ячейка» (рис.
20).
Рисунок 22 – Пункт меню «Ячейка»
Ниже представлен обзор действий с ячейками:
1)
«Вставить ячейку слева» - вставляет новую ячейку до той, которая содержит
курсор.
2)
«Вставить ячейку справа» - вставляет новую ячейку после той, в которой
находится курсор.
3)
«Удалить ячейки» - удаляет ячейку, которая содержит курсор.
4)
«Объединить ячейки» - слияние нескольких ячеек в одном. Эта опция доступна
только если две или больше клеток будут выделены.
5)
«Объединить с правой» - слияние выбранной ячейки с ячейкой, расположенной
справа от нее. Эта опция доступна если выбрано не больше ячеек, чем одна.
6)
«Объединить с нижней» - слияние выбранной ячейки с ячейкой, расположенной
ниже. Эта опция доступна если выбрано не больше ячеек, чем одна.
24
7)
«Разделить ячейку по горизонтали» - разделяет выбранную ячейку на две части,
создав новую ячейку снизу от нее. Содержимое ячейки помещается в верхнюю ячейку. Эта
опция доступна если выбрано не больше одной ячейки.
8)
«Разделить ячейку по вертикали» - разделяет выбранную ячейку на две части,
создавая новую ячейку справа от нее. Содержимое ячейки помещается в левую ячейку. Эта
опция доступна если выбрано не больше одной ячейки.
9)
«Свойства ячейки» - открывает диалоговое окно «Свойства ячейки», которое
позволяет настроить размер ячейки, тип, цвет и выравнивание.
Внимание: редактор позволяет выбрать несколько ячеек таблицы с помощью мыши,
так что операции могут быть применены к нескольким столбцам таблицы одновременно.
4.5.4 Настройка дополнительных параметров ячеек
Чтобы установить дополнительные настройки для ячеек нужно выбрать пункт
контекстного меню «Свойства ячейки» (рис. 21).
Рисунок 23 – Диалоговое окно «Свойства ячейки»
Ниже представлен обзор элементов диалогового окна «Свойства ячейки»:
1)
«Ширина» - ширина ячейки в пикселях или процентах. Предоставление
значения ширины в процентах позволяет установить занимаемую долю строки, ячейки (или
колонки).
2)
«Высота» - высота ячейки в пикселях.
3)
«Тип ячейки» - либо обычная ячейка данных или ячейка заголовка со
специальным форматированием.
25
4)
«Перенос по словам» - этот параметр включает / выключает перенос слов
содержимого ячейки.
5)
«Объединяет строк» - этот параметр растягивает ячейку вниз на несколько
6)
«Объединяет колонок» - эта настройка тянется ячейку вправо на несколько
строк.
столбцов.
7)
«Горизонтальное выравнивание» - горизонтальное выравнивание содержимого
ячейки таблицы. Доступны следующие варианты: «По левому краю», «По центру», «По
правому краю».
8)
«Выравнивание по вертикали» - вертикальное выравнивание содержимого
ячейки таблицы. Доступны следующие варианты: «По верху», «По середине», «По низу»,
«По базовой линии».
9)
«Цвет фона» - цвет фона ячейки. Вы можете использовать любой из следующих
методов, чтобы установить цвет:

Введите значение RGB в текстовое поле, в rgb (nn , nn , nn) формате, где nn
является числовым значением по шкале от 0 до 255, представленной красным, зеленым и
синим цветовыми каналами.

Введите шестнадцатеричное значение RGB в текстовое поле, в # nnnnnn
формате, где n буквы обозначают три пары шестнадцатеричных значений цвета - красный,
зеленый и синий канал.

Используйте кнопку «Обзор», чтобы открыть диалоговое окно выбора цвета и
выбрать цвет с помощью мыши (рис. 22).
10)
«Цвет границ» - цвет границы ячейки. Вы можете использовать любой из
следующих методов, чтобы установить цвет:

Введите значение RGB в текстовое поле, в rgb (nn , nn , nn) формате, где nn
является числовым значением по шкале от 0 до 255, представленной красным, зеленым и
синим цветовыми каналами.

Введите шестнадцатеричное значение RGB в текстовое поле, в # nnnnnn
формате, где n буквы обозначают три пары шестнадцатеричных значений цвета - красный,
зеленый и синий канал.

Используйте кнопку «Обзор», чтобы открыть диалоговое окно выбора цвета и
выбрать цвет с помощью мыши.
26
Рисунок 24 – Окно выбора цвета
27
5
5.1
Работа со ссылками
Вставка ссылки
Ссылка - это инструмент, который позволяет добавлять интерактивные гиперссылки
или адреса электронной почты в ваши документы, а также настраивать их вид и свойства.
Чтобы вставить ссылку на имеющийся у вас документ, нажмите кнопку
«Вставить / Редактировать ссылку» на панели инструментов (рис. 23). Чтобы вставить
ссылку, которая будет присвоена фрагменту текста, необходимо сначала выбрать фрагмент.
Если текст не выбран, то URL ссылки появится в документе как есть.
Рисунок 25 – Кнопка «Вставить / Редактировать ссылку»
После нажатия кнопки отображается диалоговое окно, которое позволяет выбрать тип
соединения и параметры конфигурации, относящиеся к Вашему выбору. Оно содержит
следующие вкладки:
1)
«Информация о ссылке».
2)
«Цель».
3)
«Загрузка».
4)
«Дополнительно».
5.2
Изменение информации о ссылке
Изменение информации о ссылке производится на вкладке «Информации о ссылке»
(рис. 24)
28
Рисунок 264 – Диалоговое окно «Ссылка» Вкладка «Информация о ссылке»
Ниже представлен обзор элементов вкладки «Информация о ссылке»:
1)
«Тип ссылки» - категория ссылки, которая будет вставлена в документ. Вы
можете выбрать один из следующих вариантов:
 «Ссылка» - адрес веб-сайта любого ресурса, доступного в Интернете, или
ссылка на документ или изображение.
 «Ссылка на якорь в тексте» - внутренние ссылки, указывающие читателю
назначенный пункт в документе.
 «Email» - адрес электронной почты.
2)
«Протокол» - протокол связи, используется в веб-адресе. Вы можете выбрать
один из следующих вариантов: http:// , https:// , ftp:// , news:// , или <other> .
3)
«Ссылка» - веб-адрес ресурса, на который указывает ссылка.
5.3
Указание места открытия ссылки
Вкладка «цель» (рис. 25) доступна только для типа ссылки «Ссылка». Она указывает
место, где ссылка откроется после нажатия на нее. По умолчанию цель не установлена и
ссылка откроется в том же окне браузера.
29
Рисунок 27 – Диалоговое окно «Ссылка» Вкладка «Цель»
Эта вкладка содержит только один элемент: выпадающий список целей, что позволяет
вам выбрать место, где ссылка откроется. Список содержит следующие опции:
1)
<по умолчанию> - по умолчанию - открывает ссылку в том же окне браузера,
или вкладку в качестве документа.
2)
<фрейм> - открывает ссылку в кадре, указанном в поле «Объект Название
текста Frame». Текст отображается только после выбора <frame> как цель.
3)
«всплывающее окно» - ссылка откроется во всплывающем окне.
4)
Новое окно – ссылка откроется в новом окне.
5)
Главное окно – ссылка откроется в новом активном окне.
6)
Текущее окно – ссылка откроется в активном окне.
7)
Родительское окно – ссылка откроется в родительском окне.
5.4
Загрузка документа с использованием инструмента ссылка
С помощью инструмента «Ссылка» можно установить ссылку на файл (документ,
изображение). Для этого необходимо:
1. Выделить фрагмент текста, на который должна быть установлена ссылка.
2. Нажать кнопку ссылка на панели инструментов.
3. Во вкладке «Загрузка» (рис. 26),
компьютера.
4. Нажать кнопку «послать на сервер»
используя кнопку «Обзор», выбрать файл с
30
5. После загрузки будет осуществлен переход на вкладку «информация о ссылке» где
нужно нажать «ОК»
Рисунок 28 – Диалоговое окно «Ссылка». Вкладка «Загрузка»
5.5
Настройка дополнительных параметров ссылок
Вкладка «Дополнительно» (рис. 27) предназначена для продвинутых пользователей со
знанием HTML и CSS.
Рисунок 29 – Диалоговое окно «Ссылка». Вкладка «Загрузка»
Ниже представлен обзор элементов вкладки «Дополнительно»:
1)
«Идентификатор» - уникальный идентификатор для ссылки в документе.
31
2)
«Направление текста» - направление текста в таблице: слева направо (LTR) или
справа налево (RTL).
3)
«Клавиша доступа» - активация ссылки с помощью комбинации клавиш.
4)
«Имя» - имя закладки на определенном месте веб-страницы, предназначенной
для создания перехода к ней по ссылке.
5)
«Код языка» - язык элемента изображения, указанного в соответствии с RFC
6)
«Последовательность
1766.
перехода»
-
ввод
цифр,
определяющих
последовательность совершаемых переходов.
7)
«Заголовок» - текст подсказки, который отображается, когда курсор мыши
находится над ссылкой.
8)
«Тип содержимого» - MIME-тип документа, на который указывает ссылка.
9)
«Классы CSS» - класс элемента таблицы. Обратите внимание, что таблице
может быть назначено более одного класса. Если это так, отдельные имена классов должны
находиться через пробел.
10)
«Кодировка ресурса» - кодировка текста, на который ведет ссылка.
11)
«Отношение» - отношение между ссылаемым и текущим документами.
12)
«Стиль» - CSS стили. Необходимо отметить, что каждое значение должно
заканчиваться точкой с запятой и индивидуальные свойства должны быть разделены
пробелами.
5.6
Удаление ссылки
Удаление ссылки возможно при помощи кнопки на панели инструментов «Убрать
ссылку» (рис. 28). Данная кнопка станет активной при выделении текста ссылки, которую
необходимо удалить.
Рисунок 30 – Удаление ссылки
32
5.7
Установка якоря
Якорь – это специальная метка на странице текста, которая позволяет сделать
гиперссылку на определенное место в тексте и обозначается значком
. Кнопка
«Вставить / редактировать якорь» (рис. 29) – открывает окно вставки и якоря в то место, где
установлен курсор.
Рисунок 31 – Удаление ссылки Кнопка «Вставить/редактировать якорь»
При нажатии кнопки открывается диалоговое окно, в которое требуется ввести
название якоря (численное или буквенное) (рис. 30).
Рисунок 32 – Диалоговое окно «Свойства якоря»
33
Дополнительные возможности
6
В качестве дополнительных возможностей рассматриваются сервисы редактора,
приведенные на рис. 31.
Рисунок 33 – Сервисы редактора
К сервисным относятся следующие кнопки:
1)
Кнопка "Отменить"
. Отменяет последнее действие пользователя.
2)
Кнопка "Повторить"
. Возвращает последнее отмененное действие.
3)
Кнопка "Найти"
. Вызывает диалоговое окно поиска, приведённое на рис.
32.
Рисунок 34 – Диалоговое окно поиска
Для поиска необходимо ввести искомые слова в поле ввода и нажать кнопку "Найти".
После этого найденный текст будет выделен и фокус перейдет на него в окне ввода
основного текста документа.
 Пункт "Учитывать регистр". При поиске будет учитываться регистр текста.
 Пункт "Совпадение целых слов". Поиск будет производиться по ключевому
слову / фразе дословно.
34
4)
Кнопка "Заменить"
. Используется для замены найденного текста другим. В
текстовом поле "Найти:" вводится текст, который необходимо заменить, а в поле "Заменить
на: - тот текст, на который будет заменен найденный. Кнопка "Заменить" производит замену
найденного текста в порядке очередности. При использовании кнопки "Заменить все"
производится замена всего найденного текста сразу.
5)
Кнопки служебных действий:
 Кнопка "Выделить все"
. Выделяет весь текст HTML-страницы (обычно
используется перед копированием, удалением, применением стиля или
форматирования ко всей странице).
 Кнопка "Убрать форматирование"
. Сбрасывает настройки форматирования
выделенного текста.
 Кнопка «Развернуть»
. Разворачивает окно редактора в полноэкранный
режим. Для возврата необходимо еще раз нажать на данную кнопку.
 Кнопка «Отображать блоки»
. Отображает блоки, названия которых
приведены в разделе в нижней части редактора, несущие информацию об
элементах HTML.
6)
Кнопки вставки дополнительных символов:
 Кнопка «Вставить горизонтальную линию»
. Вставляет горизонтальную
линию по всей ширине окна редактора ниже строки, на которой установлен
курсор.
 Кнопка «Вставить специальный символ»
и знаки.
. Вставляет специальные символы
35
7
Ограничения при работе с редактором
Рекомендуется загружать файлы с именами, состоящими из цифр, букв латинского
алфавита нижнего регистра: [a-z] [0-9]
Пример правильного имени: my_big_file123.doc
Не рекомендуется использовать (в именах файлов) буквы кириллицы, пробелы,
вопросительные, восклицательные знаки, кавычки, специальные символы.
Неправильный пример имени: “Мой_Большой файл[email protected]#$%^^&*”.doc
Рекомендуется загружать файлы не превышающие 2 Мб.
Скачать