Мы рассмотрим процесс создания новой темы для программы TurboSite на примере стандартной темы Atomohost. Сразу предупреждаю читателя, что для создания темы необходимо иметь хотя-бы какие-то навыки работы с HTML.
Первое, что нам необходимо сделать — это создать новую папку в директории themes, назвав ее именем нашей темы, в нашем случае — «Atomohost».
Далее, внутри этой новой папки, создаем еще одну папку с именем «tocopy». Обязательное содержимое этой папки — файл «blank.html», который и будет использоваться в качестве шаблона страниц. Все остальное содержимое папки «tocopy» копируется в директорию с готовым сайтом «как есть», поэтому все картинки, скрипты и css-стили, используемые в шаблоне, необходимо также скопировать сюда. В рассматриваемой нами теме Atomohost в папке «tocopy» находиться таблица стилей style.css и папка с изображениями «images».
HTML-шаблон
Теперь приступим к самому главному — редактированию HTML-шаблона. Открываем файл blank.html с помощью текстового редактора (кодировка файла — utf-8!). В качестве текстового редактора, обычный блокнот Windows не годится, необходимо что-то более продвинутое. Лично я пользуюсь Linux-овым редактором Gedit. Gedit для Windows можно скачать здесь: http://ftp.gnome.org/pub/gnome/binaries/win32/gedit/ (выбираем последнюю версию).
blank.html – это обычная html-страница, которую вы можете как написать самостоятельно, так и просто скопировать готовую, после чего добавив в него метки полей.
Метки полей — это выражения, заключенные в знаки «%» которые в процессе генерации сайта заменяются программой на тот или иной текст. Таким образом, там, где должен выводиться заголовок страницы, вы должны установить метку «%PageTitle%», там, где будет располагаться само содержимое страницы — метку %PageContent% и так далее.
Рассмотрим это на примере темы Atomohost. Блок содержимого страницы в ее шаблоне выглядит так:
<div id="post">
<h2>%PageTitle%</h2>
%PageContent%
</div>
Всего существует 9 стандартных полей:
SiteTitle— заголовок сайта;
WindowTitle— заголовок окна браузера;
Description— описание сайта;
Keywords— ключевые слова;
MainMenu — главное меню;
SidebarMenu — список страниц;
PageTitle — заголовок текущей страницы;
PageLink — ссылка на текущую страницу;
PageContent — содержимое текущей страницы;
На месте меток MainMenu и SidebarMenu будет выведены списки в следующем формате
<li>Страница 1</li>
<li>Страница 2</li>
и т.д. Поэтому вам необходимо окружить метки этих меню тэгами нумерованных или маркированных списков, как это сделано в рассматриваемой нами теме Atomohost:
<div id="menu">
<ul>
%MainMenu%
</ul>
</div>
Кроме того, автор темы может добавлять любое количество дополнительных полей, придумав им собственные имена, и использовать их по своему усмотрению. Однако не забывайте использовать символы %. Пробелы в именах полей недопустимы. Например, если вы хотите ввести поле с подзаголовком сайта, вы можете назвать его так: %Подзаголовок-сайта%.
Смотрите также раздел «Блоки» этой статьи.
Основные требования к содержимому файла blank.html:
- Файл должен быть в кодировке utf-8;
- В секции <head> необходимо наличие следующий срок:
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="%Keywords%" />
<meta name="description" content="%Description%" />
<title>%WindowTitle%</title> - В шаблоне обязательно должны быть использованы поля MainMenu, SidebarMenu, PageTitle, PageContent.
- Если дизайн шаблона предусматривает только одно меню, можно вывести элементы обоих списков подряд, то есть просто записать метки MainMenu и SidebarMenu вместе и без разделителей.
- В самой нижней секции страницы обязательно должна присутствовать ссылка на страницу программы: <a href=»http://brullworfel.ru/turbosite»>TurboSite</a>. Автор темы также может расположить свою ссылку.
Кроме папки tocopy в директории с темой также должен располагаться скриншот темы и конфигурационный файл theme.ini.
CSS
Во всех стандартных шаблонах TurboSite активно используется технология CSS.
CSS — каскадная таблица стилей, хранящаяся в отдельном файле (обычно, style.css), в котором описан внешний вид элементорв веб страницы. При помощи этой технологии, содержимое веб-страницы отделяется от описания его дизайна, которое выносить в отдельный файл. Если вы хотите создать действительно красивую и качественную тему, вам придется познакомиться с этой технологией. Начинающим я рекомендую вот этот учебник: http://ru.html.net/tutorials/css/.
Скриншот
Скриншот — изображение в корневой папке темы. Ширина изображения = 250 пикселей, максимальная высота не ограничена, подбирайте оптимальную.
Рекомендуемый формат изображения — jpg.
Конфигурационный файл theme.ini
Конфигурационный файл представляет собой обычный ini файл с именем «theme.ini». Редактировать этот файл можно с помощью любого текстового файла. Формат файла следующий:
[секция1]
параметр1 = значение
параметр2 = значение
[секция2]
параметр1 = значение
параметр2 = значение
В текущей версии программы секций всего 2: основная секция info и секция дополнительных полей keys. В секции info прописываются следующие основные параметры темы:
name — название темы;
screenshot — имя файла скриншота темы;
author — имя автора темы;
authorurl — ссылка на сайт автора;
license — лицензия, под которой распространяется тема;
about — описание темы;
В секции keys необходимо перечислить метки всех дополнительных полей в следующем формате:
key1 = метка_1
key2 = метка_2
key3 = метка_3
и так далее.
Обратите внимание на то, что в файле theme.ini метки полей указываются без символов %, в то время как в файле blank.html — с ними. То есть, метку поля «Описание-сайта» мы пропишем в theme.ini так:
key1 = Описание-сайта
а в blank.html будем использовать ее так:
%Описание-сайта%
Блоки
Блоки используются преимущественно в боковых панелях (сайдбарах) страниц для всевозможных баннеров, счетчиков и прочего. Пользователь программы может самостоятельно добавлять любое количество блоков на свои страницы и управлять их содержимым. Однако поддержка этой возможности в теме не обязательна, но крайне желательна. Чтобы ее включить, необходимо:
1. Добавить в секцию info файла theme.ini строку blocks= 1;
2. В файле шаблона blank.html в месте, куда будут добавляться блоки, добавить метку поля %blocks%;
3. Добавить в секцию info файла theme.ini описание блока:
block-begin — что вставить перед началом блока;
block-end — что вставить после блока;
block-title-begin — перед заголовком блока;
block-title-end — после заголовка блока;
block-content-begin — перед содержимым блока;
block-content-end — после содержимого блока.
Чтобы было немного более понятно, посмотрите, как это работает в теме Atomohost. Блоки там описаны следующим образом:
block-begin = <div class="boxed">
block-end = </div>
block-title-begin = <h2 class="title">
block-title-end = </h2>
block-content-begin = <div class="content">
block-content-end = </div>
А вот как выглядит один блок в уже сгенерированном сайте:
<div class="boxed">
<h2 class="title">Заголовок блока</h2>
<div class="content">Содержимое блока</div>
</div>
Значок (favicon)
Начиная с версии 1.6.1, шаблоны TurboSite могут содержать значок для сайта. Он должен быть размером 16 на 16 пикселей в формате *.png. Просто скопируйте его в корневую папку шаблона под именем favicon.png и у пользователя, использующего Ваш шаблон, будет возможность установить его в качестве значка своего сайта.
Создание пакета *.tstheme
Начиная с версии 1.6.1, TurboSite поддерживает автоматическую установку шаблонов из пакетов формата *.tstheme двойным кликом. Для того, чтобы создать такой пакет, упакуйте все содержимое папки с шаблоном в ZIP-архив любым архиватором (не саму папку с шаблоном, а именно ее содержимое), а затем переименуйте его следующим образом:
название_шаблона.tstheme
Обратите внимание, что Вы должны сменить расширение файла с *.zip на *.tstheme.
P.S.
Для того, чтобы разобраться с созданием тем для TurboSite получше, попробуйте поэксперементировать с изменением одной из стандартных тем программы. После того, как вы закончите разработку темы, тщательно протестируйте ее.
Присылайте свои темы мне по адресу [email protected], качественные темы будут публиковаться на этом сайте в разделе «Темы для TurboSite» и все пользователи программы получат возможность скачать ее и использовать. Вы же, в свою очередь, получите индексируемую прямую ссылку на свой сайт со всех страниц пользователей TurboSite, которые будут использовать Вашу тему, что не может не радовать веб-мастера, т.к. от количества прямых внешних ссылок на Ваш сайт зависит его рейтинг в поисковых системах.
Задать вопрос и пожаловаться на проблемы можно в комментариях к этой странице, статья по-ходу обсуждения будет дорабатываться.
В процессе импорта темы возникли трудности в редактировании файла default.css. Предлагаю дополнить руководство основами создания и редактирования этого файла.
Добавил в мануал раздел «CSS».
После генерирования моей темы в блоках вылазит другая кодировка((
Эмиль, теперь обсуждение проходит на форуме, создайте там тему пожалуйста с Вашей проблемой: http://brullworfel.ru/forum/forum.php?id=3
Да , вообще очень забавно, хорошо бы если еще видео-ролики были у вас по всевозможным разъяснениям , да и по любым импровизациям которые вы тут объясняете .
Просто думаю иногда посмотреть лучше чем прочитать , так быстрей процесс будет идти в гору. Всего вам доброго и вашей программе тоже . Мне лично понравилось как она действует, со временем думаю ее функциональные возможности увеличиться и тогда от нее отбоя не будет.
Это серьезная конкуренция всем кто создает свои собственные ролики по созданию сайтов. В добавок в основном все гениальное сейчас платно, а у вас бесплатно.. Успехов и удачи на выбранном пути Вам.!!!
К сожалению в роликами пока не получиться, т.к. сейчас напряги с интернетом, но я будущем я об этом обязательно поразмыслю =).
Спасибо Вам за добрые слова!
СКАЧАЛА ТЕМУ, А УСТАНОВИТЬ НЕ МОГУ( . ЧТО ДЕЛАТЬ?
А что именно не получается?
Убедитесь, что у Вас установлена последняя версия TurboSite, и дважды щелкните по скачанному файлу шаблона.
Добрый день!
Не добавляется ссылка на файл в приложение!
что уже только не делал!
сам файл сохраняется в папке где хранятся файлы
а на самом потом сайте его нет!
что посоветую сделать?
может html кодом можно файл добавить!
подскажите пожалуста!срочно надо
Странно. На вкладке «HTML-код» редактора страниц можно прописать ссылку так:
<a href="user-files/имя_файла.jpg">скачать</a>Вместо «имя_файла.jpg» — Ваше имя файла, вместо «скачать» — Ваш текст ссылки.
Огромное спасибо!!!
добрый день!
как сделать заполняемость сайта на 100%?
все шаблоны не дают 100% заполняемости,слева и справа остаются поля… и получается по середке находится мой сайт и текст ограничен и другие параметры
Это называется вовсе не «заполняемость», просто такое дизайнерское решение в шаблонах, когда колонки имеют фиксированную ширину. Насчет того, что «текст ограничен» — поясните пожалуйста подробнее, чем он ограничен?
ну понятно,что такое дизайнерское решение
просто как увеличить ширину эту?
текст получается идет по той фиксированной ширине,не заходя за пределы данной ширины
а хотелось бы,чтоб как то поменять и текст был не ограничен данной шириной
Такое изменение необходимо сделать в файле css выбранного шаблона. Если скажите какой шаблон используете конкретно — постараюсь помочь.
ну вот в шаблоне Fences и woodenly (особенно здесь очень сжимается текст,раз поле для текса маленькое)
К сожалению структура именно этих шаблонов не позволяет сделать колонку контента «резиновой», внеся изменения только лишь в CSS… Постараюсь в следующем заходе по добавлению шаблонов, добавить партию «резиновых».
>>Brullworfel 15 Мар 2012 20:54 (14 часов)
К сожалению структура именно этих шаблонов не позволяет сделать колонку контента «резиновой», внеся изменения только лишь в CSS… Постараюсь в следующем заходе по добавлению шаблонов, добавить партию «резиновых».>>
большое спасибо за ответы!
а «резиновые» шаблоны очень бы понадобились! просто при создании электронного пособия,очень сильно придираются ,что заполняемость не вся… очень бы нужен был хотя бы нейтральный шаблон резиновый…=(
Видимо Вас оценивают очень серьезные специалисты по веб-дизайну, раз так придираются к «заполняемости», называя ее при этом таким интересным термином =))
да уж)))
очень «серьезные»)
А есть способ проще?
К сожалению, нет.
Зд! Выдается ошибка 500 при отпраке обратной связи…
Спасибо за сообщение, исправлено! Неполадки при переезде на новый сервер.
Где посмотреть шаблон примера «Atomohost» ? Меня не устраивает ни один из приведенных шаблонов. Я хочу сделать свой работающий и очень нужный для людей (больных людей!) сайт лучше, расширить его и сделать удобнее навигацию. И убрать с этого хост сервера из-за его ошибок и наплевательского отношения к письмам. Поэтому мне нужно разобраться в Вашей школе создания шаблона.
Добрый день.
Взял за основу один из шаблонов. Подредактировал. Создал сайт в кодировке utf-8. Было все в порядке. Сайт работал. Установил IE 10. Открываю сайт с домена, вылазят кракозябры. IE 10 сбрасывает кодировку в Кирилица Windows (в других браузерах открывается нормально). Прописал уже в згенерированном сайте мета тег
«», проблема ушла. Пытаюсь включить этот тег в шаблон, программа не берет. Использую меню программы «вставить пользовательский код». Вставляет в сайт в конце раздела «head». Ине работае, опять кракозябры. А каждый раз прописывать в сгенерировнном сайте на каждой странице долго и неудобно. Как решить эту проблему в шаблоне. Спасибо.
Зайдите в папку шаблона (c:/Programm files/Turbosite/themes) и внесите изменения в файл blank.html с помощью блокнота или другого текстового редактора. С Internet Explorer 10 ни программа, ни шаблоны пока не тестировались. Если со всеми остальными браузерами все в порядке, то вывод может быть только один: Microsoft как всегда в своем репертуаре.
Спасибо. Я редактироал шаблона и прописывал дополнителтный мете тег (с ключем открывать как IE7, и другие мета теги)) . Генерирую сат . Открываю и просматриваю как HTML код. Этих мете тегов нет.
Отредактироал с помощью блокнот. получилоссь. Были проблемы с сохранением в gedit и настройками доступа для сохранения изменений в Windows 7. Открыл доступ и изменения сохранились. Спасибо.
Приветствую! Подскажите, будут обновления программы, в частности интересует редактор, добавление функционала, программа очень классная, но редактор скудноват.
здраствуите! как вставляются формулы, например я хотела создать электронные тесты. предмет математика. а как время поставить? можно так? и логин пароль?
Здравствуйте, как насчет обновления программы,будут ли внесены дополнительные функции или разработка прекращена?
Здравствуйте. Создала электронный учебник и не знаю как его завершить хотела отправить на конкурс там не принимают говорят он не завершен№ Как его завершить и почему то на других Пк не окрывается проект?