CMS SiteEdit (стр. 3 из 13)
1.4.2 Панель инструментов
Каждый элемент панели инструментов сопровождается всплывающей подсказкой и повторяет пункты меню.
1.4.3 Редактор содержания
Редактирование любого элемента сайта происходит в окнах редактирования. Чтобы вызвать окно редактирования выбранного элемента, необходимо нажать левой кнопкой мышки на "иконку" быстрого редактирования рядом с этим элементом.
Редактор позволяет работать в текстовом режиме и режиме HTML-кода.
Содержит панель, на которой имеются элементы редактирования текста (слева на право в режиме редактора):
Можно редактировать в режиме редактора или исходного кода
Можно вырезать, копировать и вставлять отдельные объекты
Делать текст или изображении в виде гиперссылки, удалять эту ссылку, связывать ссылку с почтовым адресом.
Вставить рисунок, код автоматической даты (дата будет изменяться каждый день), горизонтальную линию;
Изменить имеющуюся таблицу, вставить новую.
Кисточка удаляет HTML форматирование.
Можно создавать нумерованный список и маркированный (в виде точек)
Увеличить, уменьшить отступ текста влево или право.
Изменить шрифт текста и размер текста.
Сделать текст жирным, наклонным, подчеркнутым.
Изменить цвет шрифта и выделить иным цветом часть текста или отдельное слово.
Выравнивание по левому краю/по центру/по правому краю/по ширине.
Доступна проверка орфографии и удаление стиля форматирования.
Можно включить или выключить фильтр (для HTML редактора).
1.4.4 Редактор страниц сайта
Редактор Страницы содержит вкладки меню, панель инструментов и поля для ввода информации.
Вкладка "Заглавие сайта" - заполняется информацией, которая будет находиться в заглавии сайта.
Вкладка "Стиль" - выбирается индивидуальный стиль для страницы.
Вкладка "Настройки" - позволяет настроить Главное и Универсальное меню.
Вкладка "Доступ" - устанавливает ограничение доступа к страницы для разных групп пользователей.
С левой стороны редактора имеется два древовидных списка:
Верхний - служит для выбора другой страницы, редактирования вводного и завершающего текста на странице, а также для работы с разделами и записями текущей страницы.
Нижний - "Глобальные разделы" - служит для работы с глобальными (общими для всего сайта) разделами и записями.
1.4.5 Редактор раздела
Вкладка "Содержание" - содержит "Заголовок", под которым раздел будет отображаться на странице и текст раздела.Вкладка "Рисунки" - добавляет рисунок к раздел.Вкладка "Тип модуля" - открывает список модулей, которые могут быть размещены на странице.Вкладка "Параметры" - можно установить определенные параметры, в зависимости от типа раздела.
Вкладка "CSS" - можно настроить индивидуально оформление текущего раздела.Вкладка "Доступ" - устанавливает ограничение доступа к страницы для разных групп пользователей для раздела и записей.
1.4.6 Редактор записей
Запись (объект) - это форматированный блок состоящий из заголовка, рисунка привью и текстового или HTML блока, большой картинки и подробного описания для страницы «подробный просмотр» и является неотъемлемой частью раздела.
В одном разделе может содержаться неограниченное число записей типа: списки новостей, фотографий, ссылок и т.д. Для создания новых записей можно воспользоваться кнопкой быстрого добавления для раздела текущей страницы, или для глобального раздела или традиционно с помощью выпадающего «Popup» меню (вызывается правой кнопкой мыши в левом списке с разделами) в окне редактора страницы.
Вкладка "Запись" - содержит "Заголовок", краткий текст записи, и дополнительные поля ввода.
Вкладка "Подробно" - содержит редактор для ввода подробного текста.
Вкладка "Рисунок" - добавляет рисунок к записи.
Для создания уникального дизайна сайта или изменения существующего, в программе CMS SiteEdit используется "Редактор CSS". Вызывается горячей клавишей "F4", или кнопкой на панели инструментов
Для профессионалов реализован режим ручного редактирования кода CSS. Редактор вызывается клавишей "F3".
Редактор CSS - состоит из 2-ух частей:
1) Дерево элементов сайта - список форм и слоев сайта, расположенный в иерархическом порядке, предназначен для выделения необходимого элемента сайта.
ПРИМЕЧАНИЕ: при выборе какого-либо элемента сайта, CSS редактор SiteEdit автоматически выделяет выбранный объект красной рамкой (на рисунке - это заголовок раздела).
2) Панель свойств CSS - набор форм и полей для присвоения элементам сайта свойств CSS, разделенных на 7 категорий:
1) свойства шрифта
2) свойства фона элементов сайта
3) границы элементов сайта
4) позиционирование элементов сайта
5) расположение текста
6) другие настройки элементов сайта
7) полосы прокрутки
Выбрав для редактирования в левом древовидном списке соответствующий слой, Вы сможете самостоятельно настроить его дизайн в панели свойств CSS (придать шрифт, расположить в нужном месте сайта, залить цветом, установить размер, установить фоновый рисунок и мн. др.).
Так последовательно (но совсем не обязательно!) выделяя и настраивая элементы сайта, можно достаточно легко создать собственный уникальный дизайн сайта.
Чтобы придать элементу сайта какое-либо свойство, достаточно всего лишь ввести соответствующее значение в предназначенное для этого поле или выбрать необходимое из списка.
С помощью визуального редактора CSS возможно воплотить практически любую идею web дизайна. Благодаря этому инструменту процесс редактирования становится достаточно простым и не требует знаний языка CSS, с помощью которого настраивается стиль отображения каждого элемента сайта.
1.4.8 Редактор дизайна
Рис. 1. Редактор дизайна.
2. Создание сайта студенческой группы ИТ-21 УдГУ
2.1.Общая характеристика сайта
Сайт создается для студентов группы ИТ-21, а так же для всех тех, кто интересуется этой группой. Создаваемый сайт предназначен для просмотра информации о группе, о ее составе, для просмотра данных о каждом студенте из группы, так же для просмотра фотографий. Структура сайта представлена на рис.2.
Рис. 2. Структура сайта
2.2.Установка шаблона и смена ориентации меню
Для установки шаблона необходимо зайти в меню «Оформление» и выбрать пункт «Выбрать дизайн». Для данного сайта выбран шаблон показанный на рис. 3.
Рис. 3. Шаблон для сайта группы ИТ-21.
Для смены ориентации «Универсального меню», необходимо воспользоваться меню «Редактировать» пунктом «Свойства меню». Для данного сайта была выбрана ориентация, показанная на рис. 4.
Рис. 4. Схема ориентации меню.
2.3.Создание первой страницы сайта
Создание первой страницы происходит через меню «Редактировать» пункта «Список страниц», в окне «Универсальное меню» выбираем «Уровень 1». Создаем материал с заголовком «Home», и размещаем его на основной странице сайта. В окне «Главное меню» выбираем «Добавить в «Главное меню»». В пункте «Содержание» заполняем данную страницу с помощью языка разметок html. Страница «Home» представлена на рис.5.
Рис. 5. Главная страница.
Исходный код главной страницы приведен в Приложении 1.
2.4.Создание фотоальбома
Создаем материал для второй страницы. Создание осуществим с помощью меню «Редактировать» выбрав пункт «Список страниц», в окне «Универсальное меню» выбираем «Уровень 1». Создаем материал с заголовком «О группе». Добавляем новый раздел, выбираем тип модуля «Фотоальбом». Добавляем в него объекты (фотографии) и заполняем данные о каждом студенте группы с помощью языка разметок html. Данная страница сайта изображена на рис.6.
Рис. 6. Старица «О группе».
Исходный код второй страницы приведен в Приложении 2.
Создание страницы «Фотографии» происходит по тому же принципу, что и страница «О группе». Различие лишь в типе модуля, здесь тип модуля «Фотографии_jquery(фотографии открываются слайдами). Страница сайта «Фотографии» представлена на рис.7.
Рис. 7. Страница «Фотографии».
