GFStudio.su
 

НАВИГАЦИЯ

 

РЕКЛАМА

 

ПАРТНЕРЫ

 
 

Создание шаблона

Процесс создания шаблона рассмотрим на примере.

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

Дизайн нового шаблона мы тоже создавать не будем, воспользуемся для примера уже готовым дизайном Light2Blue, скачанным с сайта с бесплатными шаблонами. Наша задача - из простого HTML шаблона сделать шаблон для SapoScript.

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

Итак, в папке tmpl создаем новую папку в нашем случае она будет называться mytamlp.

Перемещаем в эту папку файлы contacts.php, counters.php, index.php и stats.php из уже имеющегося шаблона free.

Файл style.css и имеющиеся картинки из папки Light2Blue перемещаем в папку с нашим будущим шаблоном (mytamlp).

Файлы header.php и footer.php создадим самостоятельно.

Для этого создаем два обычных текстовых документа и сохраняем их с соответствующими названиями и расширением php.

Далее в файл header.php копируем первую половину исходного файла index.html(папка Light2Blue), а в файл footer.php - вторую.

Разделителем нам послужит сам текст страницы, начинающийся с "WELCOME TO YOURSITE.COM…" Содержание страницы естественно никуда копировать не нужно, вместо него скрипт будет подставлять содержание из базы данных.

В файлах header.php и footer.php необходимо заменить ссылки на таблицу стилей и изображения, например:

 <img src="1.gif" height=20 width=1 />

Меняем на

<img src="/tmpl/<?=$script_template?>/1.gif" width=1 height=20>

Или просто на

<img src="/tmpl/mytampl/1.gif" width=1 height=20>

Второй вариант ускоряет работу скрипта, но если вы решите переименовать шаблон, вам придется снова менять и ссылки.

Далее добавляем необходимые PHP вставки в код файлов header.php и footer.php.

Обратите внимание на то, что каждый блок, вставляемый скриптом, не имеет никакого обрамления. Т.е. вставка <?php include("inc/categories.php"); ?> просто выведет список категорий:

<ul>
<li>Категория 1</li>
<li>Категория 2</li>
<li>Категория 3</li>
. . .
</ul>

Однако вы можете захотеть сделать для этого блока какое-либо дополнительное оформление (добавить рамку, выравнивание и т.д.) Это можно сделать прямо в шаблоне, например:

<div style="border-style:solid; border-width:1px"><?php include("inc/categories.php"); ?></div>

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

Для решения этой проблемы в админке SapoScript имеется специальный раздел "Редактор шаблона".

Здесь у вас есть возможность ввести HTML код, который будет отображаться вокруг заголовка блока и вокруг его текста. Например, чтобы сделать рамку вокруг каждого блока необходимо ввести в формы вот такой код:

Обратите внимание, что если необходимо использовать кавычки, придется их экранировать или пользоваться одинарной кавычкой. Если вы все же ввели двойную кавычку, сайт может просто перестать работать и единственным способом вернуть его к жизни будет ручное редактирование файла inc/config_template.php.

Закончив все необходимые манипуляции с файлами header.php и footer.php, перемещаем их в папку mytampl. Вот собственно и все – шаблон готов.

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

 



 

НАШЛИ ОШИБКУ?

Система Orphus
 

XHTML и CSS

Введение
Теги
Элементы
Атрибуты и комментарии
Форматирование текста
- Физические Элементы
- Элементы логического форматирования
Параграфы
Заголовки
Стили
- Выравнивание
- Шрифты
- Управление цветом
- К чему применять стили
Списки
Ссылки
Картинки
Карты ссылок
Таблицы
- Ширина и высота таблицы
- Объединение ячеек таблицы
Формы
- Текстовые поля
- Переключатели
- Флажки
- Списки
- Области для ввода текста
- Кнопки
Структура документа
Кодировка символов
Символьные подстановки
Фреймы
- Айфрейм
CSS
Таблицы стилей на уровне документа
Внешние таблицы стилей
Селекторы
- Селектор элемента
- Контекстные селекторы
- Стилевые классы
- ID классы
- Псевдоклассы
Приоритеты и наследование стилей
Стилевые свойства
- Фон и цвет
- Текст
- Свойства контейнеров
- - Рамка
- - Отступы (padding)
- - Поля (margin)
- - Свойство visibility
- - Свойство overflow
- - Свойство position
- Классификационные свойства
Отличия XHTML от HTML

 

РЕКЛАМА

Как заработать на сайте
 

СЧЕТЧИКИ

Valid XHTML 1.0 Transitional