Главная › Как создать сайт › 

Адаптация HTML шаблона

Вы можете адаптировать любой html шаблон для использования в WebProject. Для этого необходимо загрузить его в программу и отредактировать код шаблона для правильной генерации сайта.

Адаптация HTML шаблона

Создайте проект и замените файлы шаблона

Откройте программу и создайте новый проект с любым шаблоном, например, шаблон RedPlanet. Затем откройте редактор шаблона через меню Сайт/Шаблон и нажмите в нем кнопку Обзор вверху слева - будет открыта папка с файлами шаблона. Выделите все файлы и папки в шаблоне и удалите их. Для адаптации выберем шаблон MegaCorporate с сайта www.coolwebtemplates.net. Загрузите шаблон с сайта. Внутри расположена папка html, скриншот и лицензия. Распакуйте содержимое папки html в пустую папку шаблона.

Код заголовка и логотипа

Переименуйте файл index.html в template.html, это можно сделать прямо в папке с файлами, либо в редакторе шаблона в списке файлов через контекстное меню. Теперь отредактируйте код шаблона.

Найдите строчку с заголовком:

<title>CoolWebTemplates.net</title>

и замените ее на код подстановки заголовка страницы:

<title>{page.title}</title>

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

{meta}  

Замените код логотипа сайта:

<h1><a href="index.html">corporate<span> NTT</span></a><small> Simple web template</small></h1>

на код со ссылкой на адрес сайта, его названием и слоганом (который вы впишете позже в свойства сайта):

<h1><a href="{site.url}">{site.name}</a> <small>{site.slogan}</small></h1>

Код меню

Исходный код меню шаблона имеет следующий вид:

<div class="menu_nav">
  <ul>
    <li class="active"><a href="index.html"><span>Home</span></a></li>
    <li><a href="support.html"><span>Support</span></a></li>
    <li><a href="about.html"><span>About Us</span></a></li>
    <li><a href="blog.html"><span>Blog</span></a></li>
    <li><a href="contact.html"><span>Contact Us</span></a></li>
  </ul>        
  <div class="clr"></div>
</div>

Меню выполнено в виде ненумерованного списка вложенного в div. Вы должны заменить его на код с перечислением пунктов меню сайта. Перечисление пунктов меню выполняется итератором <!--{menu}-->:

<div class="menu_nav">
  <ul>
    <!--{menu}-->
    <li{?isActive} class="active"{/?}><a href="{url}"><span>{name}</span></a></li>
    <!--{/}-->  
  </ul>        
  <div class="clr"></div>
</div>

Код между началом итератора <!--{menu}--> и концом <!--{/}--> будет выполнен для каждого пункта меню сайта. Выполняется проверка на активность страницы, т.е. является ли страница текущей, для такой страницы пункт меню будет класса active. Так же подставляется адрес пункта меню и название.

Смотрите так-же: