НАСТРОЙКА МОДУЛЕЙ
Общая информация
Общая настройка разделов и записей
Общая настройка ссылок
Настройка кнопок
Настройка фотоальбома
Настройка Форума
Общая информация
Настройка модулей заключается в настройке дизайна и выставлении необходимых параметрах (в некоторых случаях).
Настройка дизайна включает в себя:
Выставление параметров нужно лишь для сложных модулей, таких как Интернет-магазин, и в тех случаях, когда пользователю нужны нестандартные возможности модуля. Обычно в модуле содержится большинство возможностей для реализации огромного количества задач, но некоторые из них скрыты, для того. Чтобы визуально модуль не казался слишком сложным и нагроможденным.
Поменять параметры модуля можно, щелкнув по желтой иконке редактирования раздела (изначально нажмите F9, включив режим иконок), затем вкладка "Параметры"
Чем сложнее модуль и чем больше возможностей в него заключено, тем больше у него параметров и нюансов, которые нужно учесть при его настройке. Некоторые модули достаточно настроить только в плане дизайна (к примеру "Текст и рисунок", "Фотоальбом"), некоторые модули требуют выставления ряда параметров, связки с другими модулями, к примеру, Интернет-магазин - состоит из нескольких модулей, без связки с которыми он считается неполным.
Рис. Пример настройки модуля "Фотоальбом"
Вверх
Настройка дизайна включает в себя:
- Настройка текстовой информации, шрифтов
- Настройка дизайна полей, окон, кнопок
- Выставление необходимых отступов между объектами в модуле
- Подбор цветовой гаммы отдельных элементов модуля
Выставление параметров нужно лишь для сложных модулей, таких как Интернет-магазин, и в тех случаях, когда пользователю нужны нестандартные возможности модуля. Обычно в модуле содержится большинство возможностей для реализации огромного количества задач, но некоторые из них скрыты, для того. Чтобы визуально модуль не казался слишком сложным и нагроможденным.
Поменять параметры модуля можно, щелкнув по желтой иконке редактирования раздела (изначально нажмите F9, включив режим иконок), затем вкладка "Параметры"
Чем сложнее модуль и чем больше возможностей в него заключено, тем больше у него параметров и нюансов, которые нужно учесть при его настройке. Некоторые модули достаточно настроить только в плане дизайна (к примеру "Текст и рисунок", "Фотоальбом"), некоторые модули требуют выставления ряда параметров, связки с другими модулями, к примеру, Интернет-магазин - состоит из нескольких модулей, без связки с которыми он считается неполным.
Рис. Пример настройки модуля "Фотоальбом"
Общая настройка разделов и записей
Рассмотрим ряд настроек на примере модуля "Текст и Рисунок"
Упростить настройку текстовый модулей, где в основе лежит "Краткий текст" и "Подробный текст" можно, настроив один раз дизайн разделов и записей. Включите для этого дерево дизайна (F4). Настройте дизайн текстов с помощью вкладки внизу "Шрифт" у пунктов "Заголовок раздела", "Текст раздела", "Заголовок записи", "Краткий текст". В режиме просмотр - "Краткий текст" и "Подробный текст".
Рис. Настройка разделов и записей
Можно сразу же настроить, как будут отображаться фотографии, добавляемые в записи и разделы (пункт "Рисунок"). Перейдем на вкладку "Позиционирование", поставим параметр "left" напротив пункта "Выравнивание", добавим необходимы отступы сверху, справа (если требуется).
Рис. Настройка изображений в записи
Вверх
Упростить настройку текстовый модулей, где в основе лежит "Краткий текст" и "Подробный текст" можно, настроив один раз дизайн разделов и записей. Включите для этого дерево дизайна (F4). Настройте дизайн текстов с помощью вкладки внизу "Шрифт" у пунктов "Заголовок раздела", "Текст раздела", "Заголовок записи", "Краткий текст". В режиме просмотр - "Краткий текст" и "Подробный текст".
Рис. Настройка разделов и записей
Можно сразу же настроить, как будут отображаться фотографии, добавляемые в записи и разделы (пункт "Рисунок"). Перейдем на вкладку "Позиционирование", поставим параметр "left" напротив пункта "Выравнивание", добавим необходимы отступы сверху, справа (если требуется).
Рис. Настройка изображений в записи
Общая настройка ссылок
Если у Текстовых модулей есть подробный текст, автоматически появляется ссылка "Далее" или "Подробнее", которую можно настроить отдельно, выбрав нужный модуль, а можно настроить все ссылки разом. Реализуется это следующим образом:
В дереве дизайна (F4) в пункте "Тэги" найдите пункт "А (ссылки)(общие свойства)..)", и настройке дизайн текстовых ссылок у пунктов "Активная ссылка", "Посещенная ссылка" и "Пункт ссылки при наведении". На вкладке Шрифт достаточно установить "Размер" и "Начертание". Отступы у ссылок задаются у конкретного модуля, в его индивидуальных настройках.
Рис. Настройка ссылок проекта
Вверх
В дереве дизайна (F4) в пункте "Тэги" найдите пункт "А (ссылки)(общие свойства)..)", и настройке дизайн текстовых ссылок у пунктов "Активная ссылка", "Посещенная ссылка" и "Пункт ссылки при наведении". На вкладке Шрифт достаточно установить "Размер" и "Начертание". Отступы у ссылок задаются у конкретного модуля, в его индивидуальных настройках.
Рис. Настройка ссылок проекта
Настройка кнопок
Перейдя по ссылке "Далее" или "Подробнее", мы попадем на страницу подробного текста, где увидим кнопку "Вернуться назад". Настройки дизайна каждой кнопки в проекте у каждого модуля можно задать индивидуальные, но в большинстве случаев кнопка несет в себе единый стиль в дизайне, и не должна сильно отличаться. Поэтому, для начала, настроим все кнопки проекта одновременно.
Откроем дерево дизайна (F4), "Оформление разделов и записей"\"Общие (id) и (class) для сайтов SiteEdit\пункт Свойства кнопок". С помощью вкладки внизу "Шрифт" зададим необходимые параметры кнопкам: Цвет, Размер, Вес шрифта, Начертание. На вкладке "Фон" зададим либо фоновый цвет, либо изображение, которое будет под кнопкой, зададим значение у пункта "повторение". На вкладке "Позиционирование" зададим необходимые размеры (если нужно). На вкладке "Расположение текста" можно настроить, как будет располагаться текст и будут ли у него отступы относительно краев кнопки. На вкладке "Граница" можно убрать границы кнопки, если они не нужны, поставив параметр "none" у пункта "Стиль".
Рис. Общие настройки кнопок проекта
Те же самые действия можно произвести, настраивая отдельно кнопку в конкретном модуле.
Рис. Индивидуальные настройки кнопки модуля
Все необходимые элементы, которые можно поменять (к примеру: название ссылки "Далее" или кнопки "Вернуться назад") выведены на вкладке Параметры. Для того, чтобы туда попасть, нажмем (F9), включив режим иконок, далее нажмем на желтую иконку редактирования раздела. Чтобы поменять текст заголовка параметра, достаточно щелкнуть два раза мышкой по параметру и ввести нужный текст. После Жмем "Сохранить"
Рис. Параметры модуля "Текст и Рисунок"
Вверх
Откроем дерево дизайна (F4), "Оформление разделов и записей"\"Общие (id) и (class) для сайтов SiteEdit\пункт Свойства кнопок". С помощью вкладки внизу "Шрифт" зададим необходимые параметры кнопкам: Цвет, Размер, Вес шрифта, Начертание. На вкладке "Фон" зададим либо фоновый цвет, либо изображение, которое будет под кнопкой, зададим значение у пункта "повторение". На вкладке "Позиционирование" зададим необходимые размеры (если нужно). На вкладке "Расположение текста" можно настроить, как будет располагаться текст и будут ли у него отступы относительно краев кнопки. На вкладке "Граница" можно убрать границы кнопки, если они не нужны, поставив параметр "none" у пункта "Стиль".
Рис. Общие настройки кнопок проекта
Те же самые действия можно произвести, настраивая отдельно кнопку в конкретном модуле.
Рис. Индивидуальные настройки кнопки модуля
Все необходимые элементы, которые можно поменять (к примеру: название ссылки "Далее" или кнопки "Вернуться назад") выведены на вкладке Параметры. Для того, чтобы туда попасть, нажмем (F9), включив режим иконок, далее нажмем на желтую иконку редактирования раздела. Чтобы поменять текст заголовка параметра, достаточно щелкнуть два раза мышкой по параметру и ввести нужный текст. После Жмем "Сохранить"
Рис. Параметры модуля "Текст и Рисунок"
Настройка фотоальбома
Создадим новую страницу (F7), Назовем, к примеру, "Фотоальбом", имя файла страницы "foto" (можете написать свое) (Рис. Создание страницы "Фотоальбом"). Включим режим иконок редактирования (F9), нажмем на желтую иконку добавления раздела, на вкладке "Содержание" пишем в заголовке раздела "Фотоальбом", на вкладке "Тип модуля" выберем модуль "Фотоальбом" (Рис. Выбор модуля Фотоальбом).
Рис. Создание страницы "Фотоальбом"
Рис. Выбор модуля "Фотоальбом"
Далее, Чтобы добавить запись (одна запись - одна фотография + описание к ней), достаточно нажать на зеленую иконку с плюсом. Далее работаем в открывшемся текстовом редакторе. В заголовке сверху пишем название фотографии (к примеру: "На курорте"). Обратим внимание, что добавить новую запись можно, нажав правой кнопкой мыши в левой части редактора и выбрав в меню "Добавить запись". В нижней части располагается панель добавление изображения. Перед добавлением фото обратим внимание, что если стоит галочка у пункта "Изменить ширину до:", то фотография будет пропорциональна уменьшена до размеров, которые мы укажем в ячейках. Слева размер маленького изображения (превью), справа размер конечного изображения (фото в подробном описании записи). К примеру, укажем размеры: 100 и 400 (можете поставить свои, по желанию). Фотографию можно добавить, щелкнув на иконку "Загрузить изображение с диска" (на нижней панели).
Рис.Описание Текстового редактора
В открывшемся проводнике выбираем фото, Открываем (Рис. Добавление фотографии в запись). Жмем "Сохранить"
Рис. Добавление фотографии в запись
В программе существует функция быстрого добавления ряда фотографий.
Для этого жмем на иконку фотоальбома "редактировать раздел". В текстовом редакторе, в левой части редактора жмем правой кнопкой мыши, и в меню выбираем "Добавить изображения". В открывшемся проводнике выбираем изображения (выделяем несколько фотографий, используя кнопку Ctrl), жмем "Открыть".
Рис. Добавление сразу нескольких фотографий
Видим, как в редакторе формируются несколько записей (размеры фотографий будут такими, какие мы указали изначально в нижней панели редактора). При желании можем дать заголовки записям. Затем жмем кнопку "Сохранить" в редакторе.
Совет: Добавляя фотографии, постарайтесь подобрать такие, чтобы их пропорции совпадали, иначе визуально общая картинка фотоальбома будет смотреться не так красиво. К примеру, не желательно добавлять рядом горизонтальные и вертикальные изображения.
Для того чтобы настроить дизайн модуля, зайдем в дерево дизайна, в пункте "Модули" найдем "Фотоальбом". Самое главное, задать размеры у пункта "Объект" На вкладке "Позиционирование" (Общая ширина, Общая высота). Проверьте, есть ли параметр "left" у пункта "Выравнивание". Можно задать также отступы у записи (Сверху, справа).
На вкладке Фон установим фон записи (изначально стоит серый цвет, поменяем на белый).
Рис. Настройка фотоальбома
На вкладке "Граница" можно установить обрамление для записи (при желании)
Рис. Установка границы записи
Чтобы фотография не была слишком плотно прижата к границам, зададим Отступ у пункта "Изображение объекта" на вкладке "Позиционирование": Сверху - 4.
Настроим Текст. Выделим пункт "Текст ссылки", и на вкладке "Шрифт" установим необходимые значения - Размер, Цвет.
Рис. Внешний вид настроенного фотоальбома
Вид фотоальбома может быть весьма различен. Все зависит от вкуса дизайнера. В уроках даны лишь обязательные вещи, которые нужно учитывать. Можете экспериментировать на свое усмотрение.
Вверх
Рис. Создание страницы "Фотоальбом"
Рис. Выбор модуля "Фотоальбом"
Далее, Чтобы добавить запись (одна запись - одна фотография + описание к ней), достаточно нажать на зеленую иконку с плюсом. Далее работаем в открывшемся текстовом редакторе. В заголовке сверху пишем название фотографии (к примеру: "На курорте"). Обратим внимание, что добавить новую запись можно, нажав правой кнопкой мыши в левой части редактора и выбрав в меню "Добавить запись". В нижней части располагается панель добавление изображения. Перед добавлением фото обратим внимание, что если стоит галочка у пункта "Изменить ширину до:", то фотография будет пропорциональна уменьшена до размеров, которые мы укажем в ячейках. Слева размер маленького изображения (превью), справа размер конечного изображения (фото в подробном описании записи). К примеру, укажем размеры: 100 и 400 (можете поставить свои, по желанию). Фотографию можно добавить, щелкнув на иконку "Загрузить изображение с диска" (на нижней панели).
Рис.Описание Текстового редактора
В открывшемся проводнике выбираем фото, Открываем (Рис. Добавление фотографии в запись). Жмем "Сохранить"
Рис. Добавление фотографии в запись
В программе существует функция быстрого добавления ряда фотографий.
Для этого жмем на иконку фотоальбома "редактировать раздел". В текстовом редакторе, в левой части редактора жмем правой кнопкой мыши, и в меню выбираем "Добавить изображения". В открывшемся проводнике выбираем изображения (выделяем несколько фотографий, используя кнопку Ctrl), жмем "Открыть".
Рис. Добавление сразу нескольких фотографий
Видим, как в редакторе формируются несколько записей (размеры фотографий будут такими, какие мы указали изначально в нижней панели редактора). При желании можем дать заголовки записям. Затем жмем кнопку "Сохранить" в редакторе.
Совет: Добавляя фотографии, постарайтесь подобрать такие, чтобы их пропорции совпадали, иначе визуально общая картинка фотоальбома будет смотреться не так красиво. К примеру, не желательно добавлять рядом горизонтальные и вертикальные изображения.
Для того чтобы настроить дизайн модуля, зайдем в дерево дизайна, в пункте "Модули" найдем "Фотоальбом". Самое главное, задать размеры у пункта "Объект" На вкладке "Позиционирование" (Общая ширина, Общая высота). Проверьте, есть ли параметр "left" у пункта "Выравнивание". Можно задать также отступы у записи (Сверху, справа).
На вкладке Фон установим фон записи (изначально стоит серый цвет, поменяем на белый).
Рис. Настройка фотоальбома
На вкладке "Граница" можно установить обрамление для записи (при желании)
Рис. Установка границы записи
Чтобы фотография не была слишком плотно прижата к границам, зададим Отступ у пункта "Изображение объекта" на вкладке "Позиционирование": Сверху - 4.
Настроим Текст. Выделим пункт "Текст ссылки", и на вкладке "Шрифт" установим необходимые значения - Размер, Цвет.
Рис. Внешний вид настроенного фотоальбома
Вид фотоальбома может быть весьма различен. Все зависит от вкуса дизайнера. В уроках даны лишь обязательные вещи, которые нужно учитывать. Можете экспериментировать на свое усмотрение.
Настройка Форума
Модуль форум представляет из себя прототип. Полностью рабочую версию можно посмотреть, выгрузив проект в Интернет. В программе настраивается дизайн и связка. Модуль Форум состоит из двух частей - самого форума и модуля "Администрирование форума". Эти два модуля должны быть на разных страницах и должны иметь связку.
Попробуем сделать это. Вы можете экспериментировать на новом проекте, созданном в программе SiteEdit, либо в шаблоне, рассматриваемом в прошлых уроках.
Создадим новую страницу (F7). В открывшемся окне пишем в заголовке "Форум", Имя файла страниц "forum". Жмем "Сохранить".
Рис. Создание страницы "Форум"
Включаем режим иконок редактирования (F9), Жмем на желтую иконку, чтобы добавить раздел. В открывшемся окне на вкладке "Содержание" в заголовке напишем "Форум". На вкладке "Тип модуля" выбираем модуль "Форум". Жмем "Сохранить".
Рис. Добавление модуля "Форум"
Общий вид форума в программе SiteEdit
Модуль Форум считается довольно сложным в плане настройки дизайна, поскольку состоит из множества субстраниц. Если вы собираетесь переделать всю цветовую гамму, размер таблиц, колонок, дизайн тестов, вам придется настроить все субстраницы. Настроить модуль по дизайну можно, зайдя в дереве дизайна (F4) "Модули\Форум\стандартный форум" (Рис.Настройки модуля "Форум")
Рис. Настройки модуля "Форум"
Сначала заходим в пункт "Общие настройки". Выделяя каждый элемент (в правой части экрана он выделяется красной рамкой), настраиваем его с помощью нижней панели настроек. В пункте "Общие настройки" задаются параметры, актуальные для большинства страниц. Затем проверяем, как смотрятся отдельные субстраницы, и настраиваем их. Для того, чтобы визуально видеть, какую страницу мы настраиваем, нужно перейти в рабочей области экрана по ссылкам (к примеру: "Правила форума" или верхнее меню на главной странице форума). Если вы пока не совсем хорошо ориентируетесь в дереве дизайна, то можете воспользоваться функцией быстрого поиска элемента (Зажав Ctrl + Левая кнопка мыши, кликните на нужный вам блок, он откроется в дереве дизайна)
Рис. Пример настройки дизайна модуля "Форум"
Вторая функциональная часть форума - Это администраторская часть. Создадим еще одну страницу (F7), в открывшемся окне в заголовке пишем "Администрирование форума", имя файла страницы "adminforum".
Рис. Создание страницы "Администрирование форума"
На вкладке "Доступ" ставим параметр "Administrator" напротив пункта "Уровень доступа" - для того, чтобы на эту страницу мог заходить только администратор сайта. Жмем "Сохранить".
Рис. Назначение уровня доступа страницы
Включаем режим иконок редактирования (F9), Жмем на желтую иконку, чтобы добавить раздел. В открывшемся окне на вкладке "Содержание" в заголовке напишем "Администрирование форума". На вкладке "Тип модуля" выбираем модуль "Форум". Жмем "Сохранить".
Рис. Добавления модуля "Администрирование форума"
Рис.Внешний вид модуля "Администрирование форума" в программе
Дизайн Модуля "Администрирование форума" настраивается аналогично, как у модуля "Форум". Также есть общие настройки (используем сначала их), есть настройки каждой субстраницы.
Чтобы обеспечить привязку, зайдем на страницу "форум". Нажмем на желтую иконку редактирования раздела.
Рис. Редактирование раздела
Рис. Создание ссылки на страницу в проекте
Пропишем в тексте раздела:
Вход для администратора сайта
Затем выделим эту фразу и нажмем на иконку "Гиперссылка". В открывшемся окне "Прикрепить страницу или URL" выберем из списка страницу "Администрирование форума", нажмем "ОК". Затем жмем в первоначальном окне "Сохранить". Привязка сделана. Теперь администратор попадет на страницу через созданную ссылку.
Рис. Вход на страницу через ссылку
Теперь мы можем убрать страницу "Администрирование форума" из списка страниц (F11). Просто снимем красную и желтую иконки напротив страницы.
Рис. Скрытие в меню страницы "Администрирование форума"
ОБРАТИМ ВНИМАНИЕ!! Вся работа с форумом ведется в онлайн режиме, т.е. в Интернете. Разделы и Темы создаются вручную администратором сайта на странице "Администрирование форума". В Модуле есть все возможности для управления темами, сообщениями, пользователями.
СМОТРЕТЬ следующий урок
Вверх
Попробуем сделать это. Вы можете экспериментировать на новом проекте, созданном в программе SiteEdit, либо в шаблоне, рассматриваемом в прошлых уроках.
Создадим новую страницу (F7). В открывшемся окне пишем в заголовке "Форум", Имя файла страниц "forum". Жмем "Сохранить".
Рис. Создание страницы "Форум"
Включаем режим иконок редактирования (F9), Жмем на желтую иконку, чтобы добавить раздел. В открывшемся окне на вкладке "Содержание" в заголовке напишем "Форум". На вкладке "Тип модуля" выбираем модуль "Форум". Жмем "Сохранить".
Рис. Добавление модуля "Форум"
Общий вид форума в программе SiteEdit
Модуль Форум считается довольно сложным в плане настройки дизайна, поскольку состоит из множества субстраниц. Если вы собираетесь переделать всю цветовую гамму, размер таблиц, колонок, дизайн тестов, вам придется настроить все субстраницы. Настроить модуль по дизайну можно, зайдя в дереве дизайна (F4) "Модули\Форум\стандартный форум" (Рис.Настройки модуля "Форум")
Рис. Настройки модуля "Форум"
Сначала заходим в пункт "Общие настройки". Выделяя каждый элемент (в правой части экрана он выделяется красной рамкой), настраиваем его с помощью нижней панели настроек. В пункте "Общие настройки" задаются параметры, актуальные для большинства страниц. Затем проверяем, как смотрятся отдельные субстраницы, и настраиваем их. Для того, чтобы визуально видеть, какую страницу мы настраиваем, нужно перейти в рабочей области экрана по ссылкам (к примеру: "Правила форума" или верхнее меню на главной странице форума). Если вы пока не совсем хорошо ориентируетесь в дереве дизайна, то можете воспользоваться функцией быстрого поиска элемента (Зажав Ctrl + Левая кнопка мыши, кликните на нужный вам блок, он откроется в дереве дизайна)
Рис. Пример настройки дизайна модуля "Форум"
Вторая функциональная часть форума - Это администраторская часть. Создадим еще одну страницу (F7), в открывшемся окне в заголовке пишем "Администрирование форума", имя файла страницы "adminforum".
Рис. Создание страницы "Администрирование форума"
На вкладке "Доступ" ставим параметр "Administrator" напротив пункта "Уровень доступа" - для того, чтобы на эту страницу мог заходить только администратор сайта. Жмем "Сохранить".
Рис. Назначение уровня доступа страницы
Включаем режим иконок редактирования (F9), Жмем на желтую иконку, чтобы добавить раздел. В открывшемся окне на вкладке "Содержание" в заголовке напишем "Администрирование форума". На вкладке "Тип модуля" выбираем модуль "Форум". Жмем "Сохранить".
Рис. Добавления модуля "Администрирование форума"
Рис.Внешний вид модуля "Администрирование форума" в программе
Дизайн Модуля "Администрирование форума" настраивается аналогично, как у модуля "Форум". Также есть общие настройки (используем сначала их), есть настройки каждой субстраницы.
Чтобы обеспечить привязку, зайдем на страницу "форум". Нажмем на желтую иконку редактирования раздела.
Рис. Редактирование раздела
Рис. Создание ссылки на страницу в проекте
Пропишем в тексте раздела:
Вход для администратора сайта
Затем выделим эту фразу и нажмем на иконку "Гиперссылка". В открывшемся окне "Прикрепить страницу или URL" выберем из списка страницу "Администрирование форума", нажмем "ОК". Затем жмем в первоначальном окне "Сохранить". Привязка сделана. Теперь администратор попадет на страницу через созданную ссылку.
Рис. Вход на страницу через ссылку
Теперь мы можем убрать страницу "Администрирование форума" из списка страниц (F11). Просто снимем красную и желтую иконки напротив страницы.
Рис. Скрытие в меню страницы "Администрирование форума"
ОБРАТИМ ВНИМАНИЕ!! Вся работа с форумом ведется в онлайн режиме, т.е. в Интернете. Разделы и Темы создаются вручную администратором сайта на странице "Администрирование форума". В Модуле есть все возможности для управления темами, сообщениями, пользователями.
СМОТРЕТЬ следующий урок