Просмотр исходного текста страницы Тема оформления

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

Темы устроены очень просто: это набор html-файлов, на основе которых [[CMS]] отображает страницы сайта.

Чтобы наглядно представить себе, как устроены темы оформления, рассматривайте тему '''sp-default'''. Эта тема содержит в html-тексте комментарии и весь набор необходимых html-файлов. В других темах некоторые html-файлы могут отсутствовать. В этом случае портал использует шаблоны из темы sp-default.

Также можно посмотреть, как сделана тема sp-blog (предназначенная только для блогов). Там и кода поменьше, и сама она на вид простенькая.

== Из чего сделаны темы ==

Есть 4 типа файлов:

# HTML-шаблоны: *.html
# (опционально) Стили: style.css
# (опционально) Настройки иерархического меню: menu-settings.js
# (опционально) Картинки

Для изменения темы достаточно просто отредактировать файлы, из которых она состоят.

=== HTML-шаблоны ===

* '''index.html''' — единственный жизненно необходимый для работоспособности темы глобальный шаблон для каждой страницы. Он должен содержать хотябы одну переменную из списка: <code>$top, $left, $center, $right</code>. При выводе страницы сайта компоненты выводятся последовательно согласно порядку сортировки в одноимённые блоки. Именно их представляют вышеназванные переменные. Их можно разместить в макетной таблице или в DIV-ах с разными id для DIV-ной вёрстки. Переменная <code>$HEAD</code> должна располагаться в теге <code><head></code>, она нужна для вывода служебных строк (например, вставка JavaScript-кода для иерархического меню, ключевые слова конкретной страницы и т. п.) Другие переменные: <code>$sitedate</code> — текущая дата, <code>$ou_name</code> — название образовательного учреждения, <code>$ou_num</code> — номер образовательного учреждения.
* '''остальные файлы *.html''' Каждый шаблон представляет собой блок HTML-кода с переменными. Начало имени файла совпадает с именем компонента CMS. О назначении каждого блока и допустимых переменных в нём смотрите в архиве с шаблоном темы.

=== CSS ===
Файл '''style.css''' — обыкновенный файл с CSS-стилями. Всё то, что вы наверстали в HTML-шаблонах, оформляется в этом файле.

Имя файла должно быть строго таким. В разработке функциональность, которая потребует от тем оформления именно этого имени файла со стилями.

Изображения можно располагать произвольно либо рядом, как в теме '''xp''', либо в подпапке. В этом нет никаких правил, делайте как вам удобно.

=== Внешний вид меню ===

Файл '''menu-settings.js''' хранит настройки внешнего вида иерархического меню. Откройте его текстовым редактором. Он прокомментирован. Если ваше меню плоское (ссылки не собраны в папки), этот файл не используется. Его наличие не требуется даже в том случае, если меню у вас иерархическое; в этом случае меню будет выглядеть «ненастроенным», нейтральным, но работать '''будет'''. Сравните содержимое таких файлов в других предустановленных темах оформления. Отличия там буквально в цветах, шрифтах, размерах и т. п.

Благодаря столь простой структуре становится возможным в короткие сроки и без особых усилий и знаний адаптировать существующий шаблон для Школьного портала.

== Как создать свою тему ==

Есть два способа:

# Использовать [[#Шаблон темы|шаблон темы]]
# Скопировать одну из предложенных из комплекта портала и изменить её

Перед тем, как начать делать свою тему с нуля, попробуйте начать с изменения существующей. Большинство пользователей поступают именно так.

Для этого войдите в опртал, скачайте одну из предустановленных тем, которая ближе всего к задуманному. Делается это в списке тем, в который попадают через меню «'''Сайт → Темы оформления'''» Нажмите на дискетку напротив темы интересующей темы оформления. Распакуйте, переименуйте папку с темой, откройте нужные файлы в текстовом редакторе, картинки в графическом редакторе, и редактируйте, сохраняя переменные (они начинаются со знака доллара). затем запакуйте в архив (запаковывать надо саму папку) и установите (меню «'''Сайт → Темы оформления → Установить…'''», затем в списке тем нажмите на ссылку «'''Применить'''» напротив своей темы). После этого внений вид сайта изменится.

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

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

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

Домашнее задание: создать тему на основе нашей со своей собственной картинкой в «шапке».

=== Шаблон темы ===

Архив:

http://spcms.ru/theme-template.zip

предназначен для создания темы оформления с нуля. Вёрстка там либо отсутствет полностью, либо представлена в минимальном объёме. В каждом HTML-файле есть комментарии о назначении блока и каждой возможной переменной. Присутствует пример настройки иерархического меню и чуток CSS.

Экономьте время: не оформляйте те модули, которыми вы не собираетесь пользоваться. HTML-файлы блоков неиспользуемых модулей могут даже отсутствовать в вашей теме. Сравните, например, наборы файлов тем sp-default и sp-blog.

=== Чем редактировать файлы тем ===

Одного единственного рекомендуемого набора инструментов нет. Есть множество редакторов. И чтобы начать пользоваться чем-то с удобством, с удовольствием, лучше всего посмотреть разыне редакторы и выбрать самый подходящий лично вам.

Редакторы для HTML, CSS, JavaScript:

Лёгкие:
* [http://ru.wikipedia.org/wiki/Notepad%2B%2B Notepad++]
* [http://www.topstyle4.com/ TopStyle]
* Far Manager с плагинами Colorer и Web Editor
* [http://www.sublimetext.com/ Sublime Text] ([http://sublimetext.ru/features о нём же на русском])

Мощные:
* [http://www.jetbrains.com/webstorm/ WebStorm]
* [http://ru.wikipedia.org/wiki/Aptana Aptana]
* [http://ru.wikipedia.org/wiki/ActiveState_Komodo Komodo]
* [http://ru.wikipedia.org/wiki/Adobe_Dreamweaver Dreamweaver]

HTML-редакторов [http://ru.wikipedia.org/wiki/Редактор_HTML#.D0.98.D0.B7.D0.B2.D0.B5.D1.81.D1.82.D0.BD.D1.8B.D0.B5_HTML-.D0.A0.D0.B5.D0.B4.D0.B0.D0.BA.D1.82.D0.BE.D1.80.D1.8B много], мы приводим только те, что пробовали и понравилось.

Графические редакторы:
* [http://ru.wikipedia.org/wiki/Photoshop Photoshop]
* [http://ru.wikipedia.org/wiki/Paint.NET Paint.NET]
* [http://ru.wikipedia.org/wiki/Corel_Paint_Shop_Pro Paint Shop Pro]
* [http://ru.wikipedia.org/wiki/Gimp GIMP]

=== Как видеть результаты во время разработки ===

Есть два пути первоначального размещения темы на сервере. В любом случае сначала войдите в портал. Далее возможны два варианта:
# Через Веб-интерфейс. Запакуйте папку с темой в zip-архив, и выберите в меню Сайт → Темы оформления → Установить. Выберите полученный zip-архив и подтвердите закачку. Вы увидите, что новая тема появилась в списке.
# Через доступ к файловой системе. Любым удобным способом закачайте папку со своей темой на сервер по пути <code>/var/www/html/sp/cms/themes/</code>. Затем в веб-интерфейсе выберите в меню Сайт → Темы оформления. Новая тема оформления появилась в списке.

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

Дальше после включения темы и захода на школьный сайт в любимом браузере цикл доработки выглядит так: вы отредактировали файлы темы, нажали F5 (или что у вас там за кнопка обновление странички делает?) и увидели результат. И так повторяете, пока не достигните запланированной цели.

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

Если новостей и статей ещё нет, бывает же, что портал поставили только что, проходитесь по меню портала '''Сайт → Новости/Статьи''' и добавляете что-нибудь для теста. Если интересуют компоненты, вроде блока подписки на RSS или обратной связи, пожалуйста, всё это включается/выключается/сортируется в меню '''Сайт → Компоненты'''.

'''Примечание о редактировании HTML-файлов темы прямо на сервере (других файлов это не касается!)''': например вы используете FTP, SSH, SAMBA и т. п. Механизм кеширования блоков и HTML-файлов темы будет препятствовать немедленному отобажению новой HTML-вёрстки. Для того, чтобы иметь возможность отсматривать изменения на сайте немедленно, кеширование нужно выключить. Делается это так: в начало файла <code>/var/www/cgi-bin/sp/cms/cms.pl</code> допишите строчку <code>#!/usr/bin/perl -X</code>. Кеширование выключится. Внимание! По окончанию прямой работы с HTML-файлами темы верните всё как было, то есть добавленную строку в начале файла cms.pl следует удалить, потому что скорость работы [[CMS]] с кешем значительно выше. Разрабатывать тему можно на [http://ru.wikipedia.org/wiki/Виртуальная_машина виртуальной машине], это позволит не показывать раньше времени недоделанную работу на настоящем сайте.

=== Материалы, инструменты ===

Коллекции бесплатных шаблонов сайтов.
* http://www.oswd.org/
* http://www.oswt.co.uk/
* http://free-templates.ru/
* http://web-silver.ru/templates/
* [http://www.ex-designz.net/template/tempcat.asp?cat_id=13&sid=2 http://www.ex-designz.net/]
* [http://templates.arcsin.se/category/website-templates/ http://templates.arcsin.se/]
* [http://efimov.ws/main/develop/css-html/ogromnaya-kollekcziya-resursov-s-besplatnyimi-css-shablonami-i-zagotovkami.html 35 сайтов с бесплатными CSS шаблонами] (не проверены)
* [http://efimov.ws/main/develop/css-html/ogromnaya-kollekcziya-resursov-s-besplatnyimi-css-shablonami-i-zagotovkami.html Огромная коллекция ресурсов с бесплатными CSS шаблонами и заготовками] (не проверена)

Генераторы шаблонов:
* http://www.dotemplate.com/dt/freeTemplates.do

Подбор цветов:
* http://colorscheme.ru/
* http://www.colorotate.org/
* http://colorexplorer.com/
* http://kuler.adobe.com/
* http://www.colourlovers.com/
* Программа [http://www.tigercolor.com/ ColorImpact].
* http://www.colourlovers.com/palettes

Подбор шрифта онлайн: [http://www.fonttester.com/ FontTester], [http://www.typetester.org/ TypeTester].

Иконки: [http://www.iconfinder.com/ IconFinder], [http://findicons.com/ FindIcons], [http://www.iconspedia.com/ IconsPedia], [http://iconizer.net/ Iconizer], [http://www.iconlet.com/ Iconlet].

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

=== Тестирование и отладка ===

После того, как тема была сделана и работает в вашем любимом браузере, необходимо проверить её работоспособность в нескольких популярных браузерах.

В первую очередь сайт должен одинаково хороша показываться в браузерах:
* Firefox
* Opera
* Chrome
* Internet Explorer

Из-за автоматического обновления можно считать, что пользователи используют посдендюю версию браузеров.

С последним всё чуть сложнее. Дело в том, что многие пользователи Internet Explorer сегодня не обновляют его, работают с тем, что досталось им при установке Windows. Это означает, что без обновления в разных версиях Windows встречаются старые версии Internet Explorer, соответственно:
* Windows XP идёт с IE 6, доступно обновление до IE 8
* Windows Vista идёт с IE 7, доступно обновление до IE 9
* Windows 7 идёт с IE 8, доступно обновление до IE 9
* Windows 8, вероятно, разойдётся с IE 9

Весной 2012 года по нашим наблюдениям на компьютерах пользователей больше всего IE8, набирает обороты IE9, стремятся к нулю, но всё ещё есть IE6 и IE7. Выходит, что следует посмотреть в первую очередь на работу сайта в IE8.

Инструменты:
* [http://getfirebug.com/ FireBug] (Расширение для FireFox)
* [http://ru.opera.com/dragonfly/ Dragonfly] в Opera
* [http://validator.w3.org/ Сайт для проверки HTML-вёрстки на наличие ошибок]
* [http://jigsaw.w3.org/css-validator/ Сайт для проверки CSS на наличие ошибок]
* [http://jigsaw.w3.org/css-validator/ Проверка внешнего вида сайта множеством браузеров на множестве операционных систем]. Для этого ваш Школьный портал должен быть доступен из интернета

== Примеры тем, сделанные нашими пользователями ==

[[Файл:SP_CMS_Custom_School_Themes_2.jpg]]

Школа № 8 города Радужный тоже сделала свою тему оформления.
Примечательно то, что это первый кириллический домен среди наших пользователей: http://мбоусош8.рф/