Мы предлагаем Вашей школе воспользоваться уникальной возможностью и создать собственный сайт. При этом пользователи Вашей школы, входя под своими логином и паролем на портале «КЛАСНА ОЦІНКА», будут попадать на сайт школы. Или входить на сайт, непосредственно набрав адрес школы в браузере.
2) Выберите шаблон дизайна (прокрутите скроллинг справа, чтобы увидеть больше шаблонов). На этом этапе определяется расположение основных элементов дизайна: меню, заголовка, логотипа и т.п. Если Вы позже захотите поменять шаблон, все изменения, внесенные на следующих шагах конструктора останутся.
3) Выбрать основной цвет дизайна. Цвет можно вписать в поле в шестнадцатеричном формате в схеме RGB или воспользоваться панелью выбора цвета. Панель выбора цвета открывается нажатием на кнопку. Основной цвет дизайна – задает цветовую гамму всех элементов сайта, то есть при выборе цвета здесь, - автоматически меняется цвет остальных элементов на близкие к основному, дабы сохранить цветовую целостность дизайна.
Внимание! Если перейдете на следующий шаг, а потом решите поменять основной цвет, то остальные цвета не поменяются.
4) Выбрать, каким будет ваш дизайн: «резиновым» или фиксированной ширины.
- «Резиновый» дизайн предполагает растягивание дизайна до указанной максимальной величины при загрузке страниц сайта, то есть такой дизайн пытается максимально заполнить окно браузера.
- Фиксированный же дизайн занимает только отведенное ему место, он не удобен для сайтов с большим количеством информации, размещенной на странице.
5) Зависимо от выбранной в предыдущем пункте схемы нужно указать:
- Для «резинового» дизайна – минимальную и максимальную ширину;
- Для фиксированной ширины указать стандартную ширину сайта, по умолчанию она составляет 960 пикселей. Если Вы все же выбрали эту схему, то лучше всего не изменять это значение, а если и изменять, то не очень сильно.
Нажмите Далее.
То в результате на сайте это будет выглядеть вот так:
Вы можете выбрать рисунок фонового изображения (оно не обязательно):
Выбрать фоновое изображение можно из стандартных:
Чтобы посмотреть картинку в большем размере, нужно нажать на маленькое изображение.
Для того, чтобы выбрать один из шаблонов, нужно нажать на ссылку Выбрать. Изображение фона может быть прозрачным, например:
Также фон может быть загружен пользователем. Для загрузки собственного изображения на фон необходимо нажать ссылку Загрузить свое. Загрузка фонового изображения происходит так же, как и загрузка картинки на страницу – через файловый менеджер FCKeditor.
Например, при загрузке картинки:
Получилось следующее:
Изменить стили отображения фона можно изменить в поле редактирования справа:
Внимание! Из-за большого размера загружаемых изображений страница может долго грузиться. Поэтому рекомендуем предварительно обрабатывать изображения в графических редакторах, разрешение изображения – не более 96 точек на дюйм.
2) Установить стили для всех элементов страницы такие, как тип шрифта размер, отступы и т.п. Подробно о стилях в разделе CSS Учебник
Шрифт – с помощью этого поля можно установить шрифт для всего текста на сайте: подписи меню, новости, для контента, размещаемого на страницах сайта – этот шрифт становиться шрифтом по умолчанию.
Размер шрифта – изменение этого поля не влияет на размеры шрифта в боковом и главном меню. Увлекаться размером шрифта не стоит – например, при установке размера 28 рх получится следующее:
3) Задать параметры основного блока страницы:
Так как это главный контейнер страницы, то лучше его без особой надобности не трогать. Например, установив такие свойства:
Можно получить:
4) Дальше можно настроить стили для ссылок (для всех и для захваченных ссылок отдельно), стили заголовков с 1-го по 4-ый уровни, списки и т.п.:
5) Задать параметры выравнивания текста, отступов, и т.п. для центральной части страницы. Также можно изменить цвет фона или поставить изображение:
В результате таких установок получится:
1) Задать свойства размещения блоков верхней части, содержащих логотип, значки языковых версий сайта. Разделы Стили языковых ссылок и Блок, содержащий текущий язык – позволяют настроить отображение языковых ссылок, например, при следующих установках.
2)Задать свойства отображения верхней картинки.
- В заголовок сайта можно загрузить фоновое изображение, как из стандартных, так и свое собственное:
С установками, показанными на предыдущем рисунке, получится:
- Можно задать расстояние между блоками в заголовке сайта (блок название организации и блок изображение), а также относительное расположение изображения в шапке (сдвиги относительно границ сайта) и размер этого изображения*:
* – изображение в шапку сайта загружается на следующем шаге конструктора. Задав размер на этом шаге, Вы зададите допустимую область для отображения. Когда Вы загрузите изображение, оно уменьшится до размеров, установленных в поле Изображение в шапке сайта.
3) Задайте свойства главного (горизонтального) меню.
- Конструктор позволяет изменить цвет фона или установить фоновое изображение и изменить стиль, цвет и размер шрифта подписей пунктов меню.
Например, при таких настройках:
На сайте это будет выглядеть так:
- Задайте свойства пунктов меню. В разделе Пункты меню задаются цвет или фон захваченного мышкой пункта меню для основного меню и цвет фона. Эти свойства распространяются и на выпадающие меню. Активные пункты меню – определяют цвет, которым выделяется захваченный пункт выпадающего меню.
Например, такие настройки:
на сайте покажут такой результат:
4) Задайте свойства бокового меню. Раздел Боковое меню позволяет задать свойства для бокового меню и правой части, в которой размещаются новости.
Конструктор позволяет выбрать цвет, фон бокового меню и правой части сайта, например:
Кроме того, можно изменить маркеры бокового меню (значки стоящие перед текстовым пунктом меню) и настроить шрифт пунктов меню, например:
В результате настроек, приведенных на двух предыдущих рисунках, сайт будет выглядеть так:
5) Задайте свойства нижней части страницы меню.
Вы можете настроить цвет или фон и шрифт нижней полосы (футера), на которой выводятся авторские права, год создания и т.п.
Например, с установками, которые видно на рисунке выше, футер на сайте будет выглядеть следующим образом:
Нажмите Далее. Дизайн создан.
1.Выбрать пункт меню Сайты → Дизайны
На странице отображаются дизайны, созданные Вами ранее или скопированные у пользователей других организаций. Эти дизайны Вы можете просмотреть (кнопка ), отредактировать (кнопка 
) или удалить (кнопка 
).
) или удалить (кнопка ).2. Нажмите + Создать дизайн
Внимание!
Переходы между шагами Конструктора осуществляются либо с помощью кнопки Далее внизу страницы, либо с помощью стрелок-меню. Все изменения сразу же сохраняются при переходе на следующий шаг любым из способов. Для того, чтобы сохранить изменения или посмотреть результат, можно использовать кнопку Сохранить и посмотреть на сайте, которая появляется ниже стрелок-меню на втором шаге Конструктора дизайна.
Вы можете взять за основу дизайны, созданные другими организациями, и внести необходимые изменения в них.
Вы можете взять за основу дизайны, созданные другими организациями, и внести необходимые изменения в них.
3. На Шаг 1. Общая схема:
1) Введите название дизайна:2) Выберите шаблон дизайна (прокрутите скроллинг справа, чтобы увидеть больше шаблонов). На этом этапе определяется расположение основных элементов дизайна: меню, заголовка, логотипа и т.п. Если Вы позже захотите поменять шаблон, все изменения, внесенные на следующих шагах конструктора останутся.
3) Выбрать основной цвет дизайна. Цвет можно вписать в поле в шестнадцатеричном формате в схеме RGB или воспользоваться панелью выбора цвета. Панель выбора цвета открывается нажатием на кнопку. Основной цвет дизайна – задает цветовую гамму всех элементов сайта, то есть при выборе цвета здесь, - автоматически меняется цвет остальных элементов на близкие к основному, дабы сохранить цветовую целостность дизайна.
Внимание! Если перейдете на следующий шаг, а потом решите поменять основной цвет, то остальные цвета не поменяются.
4) Выбрать, каким будет ваш дизайн: «резиновым» или фиксированной ширины.
- «Резиновый» дизайн предполагает растягивание дизайна до указанной максимальной величины при загрузке страниц сайта, то есть такой дизайн пытается максимально заполнить окно браузера.
- Фиксированный же дизайн занимает только отведенное ему место, он не удобен для сайтов с большим количеством информации, размещенной на странице.
5) Зависимо от выбранной в предыдущем пункте схемы нужно указать:
- Для «резинового» дизайна – минимальную и максимальную ширину;
- Для фиксированной ширины указать стандартную ширину сайта, по умолчанию она составляет 960 пикселей. Если Вы все же выбрали эту схему, то лучше всего не изменять это значение, а если и изменять, то не очень сильно.
Нажмите Далее.
4. На Шаг 2. Основные стили:
1) Задайте параметры видимой части документа: Выберите цвет фона – цвет, которым будет закрашена страница, не занятая элементами сайта. Например, если выбрать зеленый цвет фона:То в результате на сайте это будет выглядеть вот так:
Вы можете выбрать рисунок фонового изображения (оно не обязательно):
Выбрать фоновое изображение можно из стандартных:
Чтобы посмотреть картинку в большем размере, нужно нажать на маленькое изображение.
Для того, чтобы выбрать один из шаблонов, нужно нажать на ссылку Выбрать. Изображение фона может быть прозрачным, например:
Также фон может быть загружен пользователем. Для загрузки собственного изображения на фон необходимо нажать ссылку Загрузить свое. Загрузка фонового изображения происходит так же, как и загрузка картинки на страницу – через файловый менеджер FCKeditor.
Например, при загрузке картинки:
Получилось следующее:
Изменить стили отображения фона можно изменить в поле редактирования справа:
Внимание! Из-за большого размера загружаемых изображений страница может долго грузиться. Поэтому рекомендуем предварительно обрабатывать изображения в графических редакторах, разрешение изображения – не более 96 точек на дюйм.
2) Установить стили для всех элементов страницы такие, как тип шрифта размер, отступы и т.п. Подробно о стилях в разделе CSS Учебник
Шрифт – с помощью этого поля можно установить шрифт для всего текста на сайте: подписи меню, новости, для контента, размещаемого на страницах сайта – этот шрифт становиться шрифтом по умолчанию.
Размер шрифта – изменение этого поля не влияет на размеры шрифта в боковом и главном меню. Увлекаться размером шрифта не стоит – например, при установке размера 28 рх получится следующее:
3) Задать параметры основного блока страницы:
Так как это главный контейнер страницы, то лучше его без особой надобности не трогать. Например, установив такие свойства:
Можно получить:
4) Дальше можно настроить стили для ссылок (для всех и для захваченных ссылок отдельно), стили заголовков с 1-го по 4-ый уровни, списки и т.п.:
5) Задать параметры выравнивания текста, отступов, и т.п. для центральной части страницы. Также можно изменить цвет фона или поставить изображение:
В результате таких установок получится:
5. На Шаг 3: Стили блоков:
На этом шаге можно задать свойства для основных частей сайта, а также добавить свои собственные стили CSS.1) Задать свойства размещения блоков верхней части, содержащих логотип, значки языковых версий сайта. Разделы Стили языковых ссылок и Блок, содержащий текущий язык – позволяют настроить отображение языковых ссылок, например, при следующих установках.
2)Задать свойства отображения верхней картинки.
- В заголовок сайта можно загрузить фоновое изображение, как из стандартных, так и свое собственное:
С установками, показанными на предыдущем рисунке, получится:
- Можно задать расстояние между блоками в заголовке сайта (блок название организации и блок изображение), а также относительное расположение изображения в шапке (сдвиги относительно границ сайта) и размер этого изображения*:
* – изображение в шапку сайта загружается на следующем шаге конструктора. Задав размер на этом шаге, Вы зададите допустимую область для отображения. Когда Вы загрузите изображение, оно уменьшится до размеров, установленных в поле Изображение в шапке сайта.
3) Задайте свойства главного (горизонтального) меню.
- Конструктор позволяет изменить цвет фона или установить фоновое изображение и изменить стиль, цвет и размер шрифта подписей пунктов меню.
Например, при таких настройках:
На сайте это будет выглядеть так:
- Задайте свойства пунктов меню. В разделе Пункты меню задаются цвет или фон захваченного мышкой пункта меню для основного меню и цвет фона. Эти свойства распространяются и на выпадающие меню. Активные пункты меню – определяют цвет, которым выделяется захваченный пункт выпадающего меню.
Например, такие настройки:
4) Задайте свойства бокового меню. Раздел Боковое меню позволяет задать свойства для бокового меню и правой части, в которой размещаются новости.
Конструктор позволяет выбрать цвет, фон бокового меню и правой части сайта, например:
Кроме того, можно изменить маркеры бокового меню (значки стоящие перед текстовым пунктом меню) и настроить шрифт пунктов меню, например:
В результате настроек, приведенных на двух предыдущих рисунках, сайт будет выглядеть так:
5) Задайте свойства нижней части страницы меню.
Вы можете настроить цвет или фон и шрифт нижней полосы (футера), на которой выводятся авторские права, год создания и т.п.
Например, с установками, которые видно на рисунке выше, футер на сайте будет выглядеть следующим образом:
6. На Шаг 4: Части дизайна:
На этом шаге можно загрузить логотип и изображение, которое будет выводиться в шапке сайта. Руководствуйтесь следующими правилами:
1) При Загрузке логотипа используйте изображение маленького размера, т.к. изменить его размер с помощью свойств нельзя.
2) Изображение для шапки сайта желательно также «подогнать» под необходимый размер, чтобы оно нормально отображалось. Его размеры можно поменять с помощью свойств на 3-ем шаге конструктора в разделе Верхняя картинка, пункт Изображение в шапке сайта.
3) Текст, внесенный в поле Верхнее описание, выводится под названием сайта. Например, если сделать все как на рисунке:
То получится:1) При Загрузке логотипа используйте изображение маленького размера, т.к. изменить его размер с помощью свойств нельзя.
2) Изображение для шапки сайта желательно также «подогнать» под необходимый размер, чтобы оно нормально отображалось. Его размеры можно поменять с помощью свойств на 3-ем шаге конструктора в разделе Верхняя картинка, пункт Изображение в шапке сайта.
3) Текст, внесенный в поле Верхнее описание, выводится под названием сайта. Например, если сделать все как на рисунке:
7. На Шаг 5: Права:
На этом шаге можно ограничить доступ к созданному Вами дизайну. Дизайн может быть доступен только Вашей организации или всем организациям Образовательного портала «Классная Оценка»:Нажмите Далее. Дизайн создан.
Комментариев нет:
Отправить комментарий