lab@vcpm.ru

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

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

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

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

Для того, чтобы сделать визитную карточку, вам придется работать с визуальным редактором нашего сайта. Визуальный редактор - специальное средство оформления страниц сайта с использованием технологии 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 и нажать кнопку копировать (или выполнить команду CTRL+C).
2. Далее - вставить из документа Word с помощью команды CTRL+V, поставив курсор в нужном месте в окне редактора.

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

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

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

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

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

 

 

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