Статья от runetcms.ru, посвященная созданию графической темы для RUNCMS. Стиль автора сохранен.
Автор: XTRO (http://www.runetcms.ru), опубликованно: 22 апреля 2005 г.
Много уже готовых тем оформления существует в Интернете, но Вам
захотелось свою, неповторимую. С чего начать? Можно покопаться в скаченной и переделать под себя.
Ну а мы начнём, как обычно, с чистого листа.
Я надеюсь, что читающий, хотя бы немного представляет себе, что такое html, css, php. Данная
статья не претендует на учебник по созданию тем, просто помогает
разобраться начинающим в освоении и создании своих тем для RUNCMS.
Пишется - как видится.
Раз уж Вас интересует создание тем, значит у Вас уже установлен локальный сервер - тот же Денвер, который поможет нам в тестировании. Для начала определимся с терминологией и структурой. Допустим создаётся тема learn_rc.
Структура каталога темы learn_rc:
Тема - совокупность файлов, находящихся в одноименной папке в каталоге themes.
Внешний шаблон блока - файл, располагающийся в каталоге template, написанный
на пхп или хтмл, позволяющий изменять внешний вид любого блока на
сайте. Их может быть сколь душе угодно. Почему внешний? Да потому, что
он подключается извне. Мы можем оформить шаблоны блоков и в самом theme.php. Но об этом чуть позже.
CSS - (каскадные таблицы
стилей - Cascading Style Sheets). С помощью CSS мы имеет полный
контроль над стилем и расположением любого элемента веб страницы, что
намного функциональнее использования обычных HTML тегов.
Каталог images - для хранения картинок, использующихся при оформлении (кроме меню).
Каталог language - для хранения констант для разных языков. В данном случае у нас будут храниться константы для меню навигации и ссылки на соответствующие им файлы.
Каталог menu - содержит файлы оформления меню навигации (картинки и css файлы).
Каталог style - содержит файл style.css, упрощающий оформление элементов нашего сайта.
Файл date.js содержит в себе код вывода текущей даты.
Файл index.html содержит всего одну строчку кода:
<script>history.go(-1);</script>
Файл theme.php,
содержит в себе код, отвечающий за макет сайта, оформление верхней
части сайта (хидер), нижней части сайта (футер), левых и правых блоков,
внешнего вида статей, форума newbb_plus, и других составляющих макета.
Структура файла theme.php
Здесь при помощи функций определяются все составляющие внешнего вида макета страницы.
Рекомендую использовать заготовку пустого файла, чем редактировать любой существующий файл другой темы.
Список обязательных функций в файле theme.php:
function themeheader ($show_rblock=0)
function themefooter ($show_rblock=0, $footer='')
function themesidebox_left ($title='', $content)
function themesidebox_right ($title='', $content)
function themecenterbox_left ($title='', $content)
function themecenterbox_center ($title='', $content)
function themecenterbox_right ($title='', $content)
function themenews ()
function themecenterposts ($title='', $content)
function theme_waitbox ()
function theme_post ()
function OpenTable ()
function CloseTable ()
function themebox_template ($title='', $content, $show_template)
Что мы хотим создать?
Ну, поскольку мы учимся, то будем использовать не графические файлы, а CSS.
Внешний вид нашей цели с функциями из theme.php (так сказать - что-где).
Проблемы будем решать по мере их поступления.
Макет сделан чисто символически для более лёгкого понимания решения задачи. Кто в чём верстает? Когда-то я видел такое: "Сделано в блокноте". Хотел бы я посмотреть на этого... чудака. Я думаю многие используют Macromedia Dreamweaver. Я сам иногда его использую, правда мне более симпатичен PSPad, некоторые программы доступны и на нашем сайте в разделе Файлы.
Ну что ж. Дрим, так Дрим. Кстати с помощью Дрима можно верстать, используя SSI. Но об этом уже другая история.
Создадим разметку нашего будущего сайта.
Cовет 1. Использовать не одну, а несколько таблиц различной вложенности, чтобы ячейки не влияли друг на друга.
Совет 2. Необходимо иметь ввиду, что для монитора 800*600 размер видимой части контента будет 760*420. Это в том случае, если ширина контента будет фиксированной. Я предпочитаю так называемые резиновые ячейки таблицы, т.е.
<table width="100%">
и некоторые
<TD width="100%">
Совет 3. Старайтесь максимально стремиться к получению необходимого Вам результата.
Совет 4. Запомните правило: до центральной части содержимого, сама центральная часть, после центральной части. Скоро Вы поймёте почему. Я думаю, что создание таблиц у вас не составит труда и поэтому ,что б ускорить процесс, я создал таку вот структуру:
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
<tr>
<td colspan="3"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>лого</td>
<td width="100%" ><div align="center">резиновая ячейка</div></td>
<td><div align="right">баннер</div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>юзер</td>
<td><div align="center">дата</div></td>
<td><div align="right">поиск</div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">левая сторона </td>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#990033">
<tr>
<td>toogle</td>
</tr>
<tr>
<td>содержимое центра содержимое центра содержимое центра содержимое
центра содержимое центра содержимое центра содержимое центра содержимое
центра содержимое центра содержимое центра содержимое центра содержимое
центра содержимое центра содержимое центра содержимое центра содержимое
центра содержимое центра </td>
</tr>
</table>
</td>
<td valign="top">правая сторона</td>
</tr>
<tr>
<td colspan="3">
<div align="center">запас</div>
</td>
</tr>
<tr>
<td colspan="3">
<div align="center">футер</div>
</td>
</tr>
</table>
Замечание 1. Обратите внимание, что внутри "левая сторона" и "правая сторона" ничего не вложено. Это я сделал умышленно, что б показать, как
можно это сделать при помощи сответствующих функций в самом файле theme.php.
Замечание 2. Иногда полезно для таблиц (или ячеек) для контроля на этапе вёрстки макета задавать bordercolor, например bordercolor="#0000FF"