Тема оформления — различия между версиями
(→HTML-шаблоны) |
(→CSS =) |
||
| Строка 15: | Строка 15: | ||
* '''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> — номер образовательного учреждения. | * '''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''' — '''TODO: подробно о каждом шаблоне и допустмых переменных.''' Каждый шаблон представляет собой блок HTML-кода с переменными. Начало имени файла совпадает с именем компонента CMS. | * '''остальные *.html''' — '''TODO: подробно о каждом шаблоне и допустмых переменных.''' Каждый шаблон представляет собой блок HTML-кода с переменными. Начало имени файла совпадает с именем компонента CMS. | ||
| − | == CSS | + | == CSS == |
| − | '''style.css''' — обыкновенный файл с CSS-стилями. Всё то, что вы наверстали в HTML-шаблонах, оформляется в этом файле. | + | Файл '''style.css''' — обыкновенный файл с CSS-стилями. Всё то, что вы наверстали в HTML-шаблонах, оформляется в этом файле. |
Имя файла должно быть именно таких. В разработке функциональность, которая потребует от темы оформления именно такого имени файла со стилями. | Имя файла должно быть именно таких. В разработке функциональность, которая потребует от темы оформления именно такого имени файла со стилями. | ||
| Строка 22: | Строка 22: | ||
Изображения можно располагать произвольно либо рядом, как в теме '''xp''', либо в подпапке. В этом нет никакие правил, делайте как вам удобно. | Изображения можно располагать произвольно либо рядом, как в теме '''xp''', либо в подпапке. В этом нет никакие правил, делайте как вам удобно. | ||
| − | + | == Внешний вид меню == | |
| + | |||
| + | Файл '''menu-settings.js''' хранит настройки внешнего вида иерархического меню. Откройте его текстовым редактором. Он прокомментирован. Если ваше меню плоское (ссылки не собраны в папки), этот файл не используется. Его наличие не требуется даже в том случае, если меню у вас иерархическое; в этом случае меню будет выглядеть «ненастроенным», нейтральным, но работать '''будет'''. Сравните содержимое таких файлов в других предустановленных темах оформления. Отличия там буквально в цветах, шрифтах, размерах и т. п. | ||
Благодаря столь простой структуре становится возможным в короткие сроки и без особых усилий и знаний адаптировать существующий шаблон для Школьного портала. | Благодаря столь простой структуре становится возможным в короткие сроки и без особых усилий и знаний адаптировать существующий шаблон для Школьного портала. | ||
Версия 13:37, 24 февраля 2011
Тема оформления сайта — набор файлов, на основе которых CMS отображает страницы школьного или личного сайта.
Чтобы максимально наглядно представлять себе, как устроены темы оформления, рассматривайте тему sp-default, она содержит в себе больше всего комментариев, все опциональные файлы и из неё берутся шаблоны блоков для других тем, когда в самих темах они не определены.
Есть 3 типа файлов:
- HTML-шаблоны: *.html
- (опционально) CSS: style.css
- (опционально) Настройки иерархического меню: menu-settings.js
Теперь о каждом файле по-порядку.
HTML-шаблоны
- index.html — единственный жизненно необходимый для работоспособности темы глобальный шаблон для каждой страницы. Он должен содержать хотябы одну переменную из списка:
$top, $left, $center, $right. При выводе страницы сайта компоненты выводятся последовательно согласно порядку сортировки в одноимённые блоки. Именно их представляют вышеназванные переменные. Их можно разместить в макетной таблице или в DIV-ах с разными id для DIV-ной вёрстки. Переменная$HEADдолжна располагаться в теге<head>, она нужна для вывода служебных строк (например, вставка JavaScript-кода для иерархического меню, ключевые слова конкретной страницы и т. п.) Другие переменные:$sitedate— текущая дата,$ou_name— название образовательного учреждения,$ou_num— номер образовательного учреждения. - остальные *.html — TODO: подробно о каждом шаблоне и допустмых переменных. Каждый шаблон представляет собой блок HTML-кода с переменными. Начало имени файла совпадает с именем компонента CMS.
CSS
Файл style.css — обыкновенный файл с CSS-стилями. Всё то, что вы наверстали в HTML-шаблонах, оформляется в этом файле.
Имя файла должно быть именно таких. В разработке функциональность, которая потребует от темы оформления именно такого имени файла со стилями.
Изображения можно располагать произвольно либо рядом, как в теме xp, либо в подпапке. В этом нет никакие правил, делайте как вам удобно.
Внешний вид меню
Файл menu-settings.js хранит настройки внешнего вида иерархического меню. Откройте его текстовым редактором. Он прокомментирован. Если ваше меню плоское (ссылки не собраны в папки), этот файл не используется. Его наличие не требуется даже в том случае, если меню у вас иерархическое; в этом случае меню будет выглядеть «ненастроенным», нейтральным, но работать будет. Сравните содержимое таких файлов в других предустановленных темах оформления. Отличия там буквально в цветах, шрифтах, размерах и т. п.
Благодаря столь простой структуре становится возможным в короткие сроки и без особых усилий и знаний адаптировать существующий шаблон для Школьного портала.
