Лучшая система размещения статей
 Добавить в избранное |  Сделать стартовой 
Поиск По Сайту
Навигация
     Главная
     Форум
     Новости
     Обзор новостей
     Гостевая
     Статьи
     Файлы
     Магазин
     Пользователи
     Контакты
     О Проекте
     Карта Сайта
Вход
Логин:

Пароль:


Запомнить меня
Вам нужно Авторизоваться.
Забыли Пароль?
Регистрация
Атестат
Подписка на новости: Подписаться

Создание Свой Темы: Пользовательская Сторона

Добавлено: 2005-08-01 15:13:08

1. Директории
2. Шаблоны и маркеры
2.1. Описание Функций Шаблона
2.2. Функции Вывода Блоков
3. Верстаем
4. Шаблон Блоков
5. Страница Авторизации

1. Директории

Все темы хранятся в директории ./thema/ корневого каталога портала.

Для начала работы над созданием темы, необходимо создать директорию, в которой будут храниться шаблоны. Например, MySkin. У нас получится, что путь к директории: ./thema/MySkin/.

По необходимости в ней можно создавать каталоги image (для хранения GIF, JPG файлов темы), style (для файла сценария оформления).

2. Шаблоны и маркеры

2.1. Описание Функций Шаблона

Все шаблоны имеют расширение .php. Для дальнейшей работы Вам понадобится знание PHP на уровне COPY-PASTE.

templates_index.php - шаблон всех страниц портала. Этот шаблон должен содержать следующие маркеры (функции):
<?meta_tegs();?> - Данная функция отвечает за вывод заголовка страниц (управляется модулем "Управление TITLE"); кодировку в соответствии с языком, используемом пользователем (управляется модулем «Параметры и Мета-Теги», переменная: "CHARSET Кодировка портала") и основных мета тегов (управляется модулем "Мета-Теги").
<?echo$copyright;?> - Обязательная функция, без неё Ваш шаблон работать не будет, она вставляет Копирайт разработчиков. Рекомендуется вставлять в нижнюю часть шаблона.
<?echo$portal_opis;?> - Выводит описание портала, указанного Администраторов в модуле "Опции".
<?body_text();?> - Эта функция отвечает за вывод Тела всех страниц генерируемых порталом.

2.2. Функции Вывода Блоков

Немного подробнее я расскажу о функциях вывода блоков, т.к. они имеют некоторые особенности. За вывод блоков отвечает функция <?connect_my_blocks("Х");?>, где Х имеет несколько допустимых значений. Манипуляции с данной функцией и позволяют администратору управлять позициями блоков, а разработчику шаблона более удобно расположить те или иные элементы, это не только блоки, но и баннеры, различные формы и т.п.

Х может принимать значения: m - Меню Блок, рекомендуется использовать только для блока "Навигация"; s - Средний Блок; l (маленькая буква L) - Левый Блок; r - Правый Блок; 1, 2, 3 - Блоки.

Таким образом, для вывода Меню, т.е. блока "Навигация", необходимо в файле templates_index.php в необходимом месте прописать функцию <?connect_my_blocks("m");?>.

Основная часть блоков расположена в позициях l и r, поэтому Ваш шаблон не обойдет без функций <?connect_my_blocks("l");?> и <?connect_my_blocks("r");?>. По умолчанию позиция s не используется, поэтому Вам решать, что и как в ней разместить.

Все позиция имею функции, отвечающие за обрамление блоков (wctableup(); wctablecenter(); wctabledown() - о них подробнее пункт 4 данной статьи), кроме позиций 1, 2 и 3. Эти позиции предусмотрены для вывода элементов (баннеры и т.п.) без заголовков блоков и без обрамления.

В версии 0.0.1, нашей системы, такие файлы, как templates_news.php (Модуль Новостей), templates_comment.php (Модуль Комментариев), templates_catalog.php (Модуль Статей) являлись обязательными, они отвечают за вывод конкретных частей отдельных модулей. Но в версии 0.0.2 они являются не обязательными, имеются встроенные и используемые по умолчанию шаблоны этих элементов. Вы можете их создать, если Вас не страивает вывод информации в некоторых модулях.

3. Верстаем

Теперь Вам, как минимум, понадобится знание HTML. Вам необходимо создать сам дизайн портала, в этом я Вам не советчик, как видите свой портал, так и тему рисуйте. Но учтите, что пути ко всем элементам (*.gif, *.swf, *.css) должны исходить от расположения Вашей темы.

Так, например, если фаил со сценарием оформления index.css находится в папке ./style/, Вашей темы, то путь к нему: ./thema/MySkin/style/.

Я не хочу, что бы у кого-либо все встало из-за не правильных путей к элементам.

Ну, что, дизайн готов?

Теперь Вам необходимо в страницу вашего шаблона вставить соответствующие маркеры в нужных местах и сохранить как templates_index.php

Расскажу Вам о Стилях, используемых в Системе WebCodePortalSystem: О таких элементах как A, BODY, TABLE и HR, я вам рассказывать не буду, но...

... все заголовки первого уровня используются с тегом H2, а заголовки второго уровня (они меньше чем первого) H3. Для вывода названия блока используется <div class="menu">*</div>.

4. Шаблон Блоков

Теперь я Вам расскажу, как выделить все блоки, кроме блоков с позицией 1, 2 и 3, графическими рамками или ... чем хотите, в общем... Но для этого Вам понадобится знание PHP на уровне, я этот уровень бы назвал так: "Как Правильно Работать С PRINT или ECHO". Если Вы не обладаете необходимыми навыками, то просто игнорируйте этот пункт статьи, и ничего с Вашей темой не случится...

И так. За обрамление блоков отвечают функции wctableup(); wctablecenter(); wctabledown(). По умолчанию они выводят тег <br>, но если Вы создадите в директории с Вашей темой фаил templates_dasvasas_table.php, то, уж извеняйте, Вам придется, и значения к функциям писать...

По умолчанию, эти функции имеют вид:

<? function wctableup(){print " ";} ?>
<?
function wctablecenter(){print "<br>";}?>
<?
function wctabledown(){print "<br>";}?>


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

Теперь рассмотрим пример создания обрамления. Возьмем следующий HTML код:


<table border="1" bordercolor="black" bgcolor="silver">
<
tr>
<
td>
Заголовок Блока
</td>
</
tr>
<
tr>
<
td>
Тело Блока
</td>
</
tr>
</
table>


Он выводит таблицу серого цвета с черными рамками. В месте, где у меня в примере стоит "Заголовок Блока" будет расположен (логически раскинем мозгом) - Заголовок Блока, а там где "Тело Блока" - Тело Блока. Теперь из этого сделаем обрамление:

<?
function wctableup(){
// Все что находится, начиная с <table... и до ПЕРВОГО тега <td> нам нужно прописать в этой функции
print '<table border="1" bordercolor="black" bgcolor="silver"><tr><td>';
}
function
wctablecenter(){
// От ПЕРВОГО тега </td> и до ВТОРОГО <td> - сюда
print '</td></tr><tr><td>';
}
function
wctabledown(){
// Все что осталось - сюда
print '</td></tr></table>';
}
?>


Сами заголовки и тела блоков система вставит сама...
Так, обрамления блоков готово.

5. Страница Авторизации

Так передохнем... Страница авторизации не содержит сложных HTML элементов, но использует CSS. Я думаю, что при черном шаблоне белая страница авторизации немного "ударит" по глазам пользователя, поэтому Вам дана возможность изменить цветовую гамму используемую на этой страницы, необходимы, как минимум знания CSS, хотя бы начальные.

По умолчанию используется стиль:
body {background:#FFFFFF;}
.table1 {background:#88a0d8;}
.table2 {background:#FFFFFF;}
.text {font-size: 16px;font-family:Tahoma,Verdana;color:#ff0000;font-weight: bolder;}


Рассмотрим подробнее, какие элементы используются, но учтите, это не учебник по CSS:
body - если вы знакомы с CSS, то Вы знаете что это, если нет, то читайте пособия по Стилевым Таблицам.
.table1 - этот класс отвечает за таблицу, находящуюся на заднем плане, т.е. если она будет черного цвета, а .table2 белого, то Вы четко увидите РАМКУ вокруг текста ЧЕРНОГО цвета.
.table2 - ну а этот класс отвечает за цвет таблицы, на которой находится сам текст.
.text - оформление текста, сообщающего Вам, что Вы или авторизовались, или НЕ авторизовались, или Вы покинули систему как пользователь.

Да, чуть не забыл, все Ваши CSS изменения нужно сохранить в файле auth_style.css и положить в директорию с Вашим шаблонов...

Все, шаблон готов, осталось только прописать его как шаблон Вашего портала.


Понравилась статья? Поделись с друзьями!
Facebook Опубликовать в LiveJournal Tweet This


Оглавление   |  ?? ????

Оглавление        Вернуться к Статье

Скачай CMS сейчас!
Текущая версия системы управления сайтом WebCodePortalSystem:
v.7.1.00
Скачать CMS v.7.1.00
Обновление с версии 6.2.01

Сайт разработчика:
Новые бета версии

На Сайте
Гостей: 12
Пользователей: 0


10 новых статей
Наши Партнеры


Copyright WebCode-Command © 2003-2012
Работает под управлением WebCodePortalSystem v. 6.2.01
Rambler's Top100