voipkro-ito@mail.ru

Мастер-класс по работе с визуальным редактором

Как попасть на свою страницу с визиткой?

1. Конечно, Вы должны быть авторизованы, иначе Вы не получите доступ к странице.
2. Используйте браузер, отличный от Internet Explorer.
3. Нажмите на ссылку со своей фамилии в таблице Участники.
4. В открывшемся окне появится слева серая вертикальая серая полоса, на которой надо найти карандашик и нажать его, Ваша страничка станет доступна для редактирования.

Начинаем создание страницы

Для того, чтобы сделать визитную карточку, вам придется работать с визуальным редактором нашего сайта. Визуальный редактор - специальное средство оформления страниц сайта с использованием технологии WYSIWYG (от английского What You See Is What You Get - "что видишь, то и получишь").

Итак,  Вы вышли на страницу, на которой будет ваша визитка. Вы увидите такое окно:

 

Далее найдите на странице элемент управления, аналогичный тому, что Вы видите на картинке ниже. Выберите кнопку "карандаш" и далее команду "редактировать". Откроется визуальный редактор, который внешне немного похож на стандартные текстовые редакторы, например на Microsoft Word.

Основные  команды визуального редактора  

Также доступны следующие команды (значки аналогичны любому редактору, например текстовому):

1. Вырезать
2. Вставить из Word
3. Отменить последнее действия
4. Повторить (вернуть) действие
5.  Развернуть
6. Вставить/ удалить список
7. Форматирование символов (жирный, курсив, подчеркнутый, зачеркнутый, верхний индекс, нижний индекс)
8. Верхний (нижний) символ
9. Убрать форматирование
10. Вставка гиперссылок
11.  Шрифт
12. Вставка изображения ( рисунка)
13. Вставка флеш-файлов
14.  Изменение размера шрифта
15. Вставка видео
16. Вставка таблицы
17. Цвет шрифта
18. Цвет фона
19. Вставка символа
20. Вставить развыв на странице

Продумываем идею визитки и размещение объектов

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

Работа с таблицами

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

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

 Вкладки элемента управления Свойства страницы
 
Вкладка 1 позволяет сформировать вид таблицы Вкладка 2. позволяет определить таблицы в пикселях. Можно определить так же выравнивание и цвет фона, Вкладка 3 позволяет определить высоту и ширину отдельной ячейки, и что очень важно, выравнивание содержимого
 

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

 

Вставка текста из Word

 

 Проще всего непосредственно вписывать текст в ячейки, ну если информация у Вас уже есть в заранее заготовленном файле Word, то для того, чтобы добавить ее в ячейку необходимо:
1. Выделить текст, который Вы собирайтесь добавить, в документе Word и нажать кнопку копировать.
2. Выбрать
3.Далее - вставить из документа Word
4. Действуйте по инструкции в открывшемся окне.

Вставка изображения

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

Шаг 1. После выбора кнопки Вставка рисунка, появится окно, с помощью которого нужно для начала загрузить рисунок на сервер. Шаг 2  Нажимаем кнопку Выбор на сервере. В появившемся диалоговом окне в папке Фестиваль выберите папку вашей команды (Например, Команда70) Шаг 3   Только в папке вашей команды в меню доступна кнопка Подгрузить новый файл. Нажмите ее.
Шаг 4.  В появившемся диалоговом окне вы можете подгрузить файл перетащив его из файлового менеджера в область, окрашенную красным цветом или вы можете воспользоваться стандартным диалогом выбора файла нажав кнопку Добавить файл(ы). Вы можете подгрузить сразу несколько файлов. В итоге вы должны нажать кнопку Начать подгрузку (Или Отменить подгрузку). Шаг 5. Прежде чем нажать кнопку Да, выберите файл, щелкнув по нему мышкой (окрасится в темносерый цвет).

Шаг 6. Нажмите кнопку ОК.

*(Если вы не видите этой кнопки, то увеличьте область редактирования, потянув за правый нижний угол диалогового окна.)

 

 

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

 Вставка флеш

C помощью кнопки (13) в проект можно вставить флеш-файл. Флэш файлыэто  файлы, которые используются в том числе и для создания интерактивной презентации. Такие файлы обычно имеют небольшой размер и могут запускаются во время загрузки web-страницы.

Итак, нажмем на кнопку с буквой f. Откроется окно

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

Перейдем на вкладку основное. Эта вкладка предоставляет возможность выбрать файлы, которые ранее были загружены на сервер. Нам ничего выбирать сейчас не нужно, т.к. мы только что загрузили файл и ссылку на него на этой вкладке мы и видим.

Здесь можно поменять размеры файла и его положение на странице сайта.

В предпросмотре - внешний вид сайта, в нашем случае это интерактивная книга.

Вот что получилось, интерактивная книга готова и Вы можете даже полистать ее странички)