Тема оформления — различия между версиями

Материал из Школьный портал: справочника
Перейти к: навигация, поиск
(→‎HTML-шаблоны)
(→‎Видеоуроки)
 
(не показано 5 промежуточных версии этого же участника)
Строка 38: Строка 38:
 
Перед удалением вашей темы, если она включена, включите другую.
 
Перед удалением вашей темы, если она включена, включите другую.
  
−
== Видеоурок ==
+
== Видеоуроки ==
  
−
https://youtu.be/0zLF5C2-koA -- редактирование существующей темы оформления, дописывание правил CSS для изменения вида новостей по умолчанию
+
http://wiki.spcms.ru/%D0%92%D0%B8%D0%B4%D0%B5%D0%BE%D1%83%D1%80%D0%BE%D0%BA%D0%B8#.D0.98.D0.B7.D0.BC.D0.B5.D0.BD.D0.B5.D0.BD.D0.B8.D0.B5_.D0.B2.D0.BD.D0.B5.D1.88.D0.BD.D0.B5.D0.B3.D0.BE_.D0.B2.D0.B8.D0.B4.D0.B0_.D1.81.D0.B0.D0.B9.D1.82.D0.B0
  
 
== Из чего сделаны темы ==
 
== Из чего сделаны темы ==
Строка 145: Строка 145:
  
 
Мощные:
 
Мощные:
 +
* [https://www.jetbrains.com/ru-ru/idea/ IntelliJ IDEA]
 +
* [http://ru.wikipedia.org/wiki/ActiveState_Komodo Komodo IDE]
 
* [http://brackets.io Brackets]
 
* [http://brackets.io Brackets]
 
* [https://www.microsoft.com/en-us/download/details.aspx?id=36179 Microsoft Expression Web 4 (Free Version)]
 
* [https://www.microsoft.com/en-us/download/details.aspx?id=36179 Microsoft Expression Web 4 (Free Version)]
 
* [http://www.jetbrains.com/webstorm/ WebStorm]
 
* [http://www.jetbrains.com/webstorm/ WebStorm]
 
* [http://ru.wikipedia.org/wiki/Aptana Aptana]
 
* [http://ru.wikipedia.org/wiki/Aptana Aptana]
−
* [http://ru.wikipedia.org/wiki/ActiveState_Komodo Komodo]
 
 
* [http://ru.wikipedia.org/wiki/Adobe_Dreamweaver Dreamweaver]
 
* [http://ru.wikipedia.org/wiki/Adobe_Dreamweaver Dreamweaver]
  

Текущая версия на 13:54, 26 февраля 2021

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

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

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

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

Краткое руководство по редактированию темы

Войдите в портал.

В меню "Сайт" выберите пункт "Темы оформления".

Скачайте интересующую тему, кликнув ссылку "Скачать" напротив её имени. Тема будет отдана в zip-архиве.

Распакуйте архив и переименуйте полученную папку. Переименование папки необходимо, так как название папки = название темы.

Измените файлы темы с помощью HTML/CSS или графических редакторов в зависимости от задачи и запакуйте папку в zip-архив.

На той же странице со списком тем оформления в портале кликните ссылку "Установить новую тему…".

Появится страница с предложением загрузить zip-архив с темой.

Загрузите созданный только что zip-архив.

Например, вы скачали тему "sp-silver".

Её новогоднюю вариацию вы назвали "sp-silver-newyear2016". То есть папка с темой у вас называется также "sp-silver-newyear2016" и архив с этой папкой соответственно — "sp-silver-newyear2016.zip".

После загрузки такого архива на сервер кроме исходной темы "sp-silver" вы увидите новую (вашу) "sp-silver-newyear2016".

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

Собственные темы можно (точно также как и встроенные) скачать для редактирования.

В отличие от встроенных, загруженные вами темы можно удалить с сервера. Перед удалением вашей темы, если она включена, включите другую.

Видеоуроки

http://wiki.spcms.ru/%D0%92%D0%B8%D0%B4%D0%B5%D0%BE%D1%83%D1%80%D0%BE%D0%BA%D0%B8#.D0.98.D0.B7.D0.BC.D0.B5.D0.BD.D0.B5.D0.BD.D0.B8.D0.B5_.D0.B2.D0.BD.D0.B5.D1.88.D0.BD.D0.B5.D0.B3.D0.BE_.D0.B2.D0.B8.D0.B4.D0.B0_.D1.81.D0.B0.D0.B9.D1.82.D0.B0

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

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

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

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

HTML-шаблоны

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

Описание шаблонов модулей:

  • administration.html - Администрация ОУ (блок)
  • administration_item.html - Администрация ОУ (элемент)
  • bdayinfblock.html - Дни рождения (блок)
  • bdayinfitem.html - Дни рождения (элемент)
  • bellsinf.html - Звонки
  • bloginf.html - Свежие записи из блогов (блок)
  • bloginf_item.html - Свежие записи из блогов (элемент)
  • content.html - Страница
  • contentitem.html - Раздел (блок)
  • contentitem2.html - Раздел (элемент)
  • feedbackform.html - Обратная связь
  • graduates.html - Выпускники (блок)
  • graduates_all.html - Выпускники (статистика)
  • graduates_all_item.html - Выпускники (элемент статистики)
  • graduates_item.html - Выпускники (элемент списка)
  • lastcontentblock.html - Последние публикации (блок)
  • lastcontentitem.html - Последние публикации (элемент)
  • loginform.html - Форма входа
  • loginform_autorized.html - Блок авторизованного пользователя
  • mainmenu.html - Главное меню (элемент)
  • mainmenublock.html - Главное меню (блок)
  • namesfull.html - Имена - полная версия (блок)
  • namesfull_item.html - Имена - полная версия (элемент)
  • namesinf.html - Имена - информер
  • news.html - Новость
  • newsinf.html - Новости - информер (блок)
  • newsinf_item.html - Новости - информер (элемент)
  • news_comment.html - Комментарий (блок)
  • news_comment_delete.html- Комментарий (удаление, если есть право)
  • news_comment_form.html - Комментарий (форма комментирования)
  • guestbook.html - Гостевая книга (блок)
  • guestbook-item.html - Гостевая книга (сообщение)
  • pmenu.html - Питание - меню
  • rssblock.html - RSS (блок)
  • searchform.html - Форма поиска
  • contest-form.html - Анкета конкурса

CSS

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

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

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

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

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

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

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

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

  1. Использовать шаблон темы
  2. Скопировать одну из предложенных из комплекта портала и изменить её

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

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

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

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

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

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

Шаблон темы

Архив:

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

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

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

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

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

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

Мощные:

Лёгкие:

HTML-редакторов много, мы приводим только те, что пробовали и понравилось.

Графические редакторы:

Регулярно обновляемый справочник по HTML/CSS на русском языке: http://htmlbook.ru/

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

Есть два пути первоначального размещения темы на сервере. В любом случае сначала войдите в портал. Далее возможны два варианта:

  1. Через Веб-интерфейс. Запакуйте папку с темой в zip-архив, и выберите в меню Сайт → Темы оформления → Установить. Выберите полученный zip-архив и подтвердите закачку. Вы увидите, что новая тема появилась в списке.
  2. Через доступ к файловой системе. Любым удобным способом закачайте папку со своей темой на сервер по пути /var/www/html/sp/cms/themes/. Затем в веб-интерфейсе выберите в меню Сайт → Темы оформления. Новая тема оформления появилась в списке.

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

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

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

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

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

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

Коллекции бесплатных шаблонов сайтов.

Генераторы шаблонов:

Подбор цветов:

Подбор шрифта онлайн: FontTester, TypeTester.

Иконки: IconFinder, FindIcons, IconsPedia, Iconizer, 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 года по нашим наблюдениям на компьютерах пользователей IE больше всего распространена версия 8, набирает обороты 9. Стремятся к нулю, но всё ещё есть 6 и 7. Выходит, что следует посмотреть в первую очередь на работу сайта в IE 8.

Инструменты:

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

SP CMS Custom School Themes 2.jpg

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

Источник — «http://wiki.spcms.ru/wiki/index.php?title=Тема_оформления&oldid=1223»