Графика

Прежде всего мы должны создать все графические элементы, которые будут использоваться в шаблоне.
Я предлагаю Вам использовать для создания шаблона
Photoshop или Fireworks: (образец текста включены.)

PSD source file: Загрузить

Слайсы

Теперь нам надо нарезать изображение на кусочки (мелкие кусочки), которые будут использоваться в типовой структуре.

Вот нужные нам кусочки:

 

Структура HTML

Преимущество нового MemHT  - возможность использовать чистый HTML.  Для построения структуры сайта ненужны знания PHP.

Основными фалами шаблонов являются:

home.html Этот файл содержит основы структуры сайта.
В нем мы должны показать  - заголовок, колонтитул, решить где размещать блоки, объявления, новости, блог, и так далее ...

news.html Этот файл содержит структуру новости

blog.html Этот файл содержит структуру блога

Самый простой способ для начинающих это использование таблицы (можно использовать CSS):

<table width="800" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td colspan="3">Header</td>
    </tr>
    <tr>
        <td>Navigator blocks</td>
        <td>Main content</td>
        <td>Extra blocks</td>
    </tr>
    <tr>
        <td colspan="3">Footer</td>
    </tr>
</table>

Это результат:

 

Стайлинг

На этом этапе вы можете изменить структуру шаблона , с помощью CSS (рекомендуется) или используя стандартные HTML-теги: размеры, цвета, фоны, картинки и т.д.

ЦМС MemHT автоматически включает два файла стилей CSS  (если они имеются):

• templates/templatename/style.css 

Стандартные +  Индивидуальные CSS стили (Используйте этот файл для объявления ваших CSS правил)

• templates/templatename/forum.css

По умолчанию форум использует этот CSS стиль (классы и имена не должны быть изменены)

Первые шаги:

 

 

Элементы шаблона

Здесь мы увидим примеры, которые показывают, как использовать самые важные элементы типовой структуры:

 

Блоки

Navigator (To be shown when {$fullscreen} is < 2):

{loop name="tpl_blocks_navigator"}
    {if condition="$value.usetitle > 0"}
        <div><b>{$value.title}</b></div>
    {/if}
    <div>{$value.content}</div>
{/loop}

Extra (To be shown when {$fullscreen} is < 1):

{if condition="$value.usetitle > 0"} <div><b>{$value.title}</b></div> {/if} <div>{$value.content}</div> {/loop}

 

{loop name="tpl_blocks_central"}
    {if condition="$value.usetitle > 0"}
        <div><b>{$value.title}</b></div>
    {/if}
    <div>{$value.content}</div>
{/loop}

Выделение блоков

MemHT поддерживает "прилипание" блоков с разным (highlighted) стилями.

Highlighted режимы показываються в {$value.flag} переменных: 

flag = 0; Стандартный стиль блоков (по умолчанию)

flag = 1; Подчеркнут

flag = 2; Highlighted mode style 2

Пример Highlighted блоков

{loop name="tpl_blocks_extra"}
    {if condition="$value.flag == 0"}
        {if condition="$value.usetitle > 0"}
            <div class="standard_title"><b>{$value.title}</b></div>
        {/if}
        <div class="standard_body">{$value.content}</div>
    {elseif condition="$value.flag == 1"}
        {if condition="$value.usetitle > 0"}
            <div class="highlighted_title"><b>{$value.title}</b></div>
        {/if}
        <div class="highlighted_body">{$value.content}</div>
    {elseif condition="$value.flag > 1"}
        {if condition="$value.usetitle > 0"}
            <div class="highlighted_title_2"><b>{$value.title}</b></div>
        {/if}
        <div class="highlighted_body_2">{$value.content}</div>
    {/if}
{/loop}

 

Сообщения

{loop name="tpl_messages"}
    <div><b>{$value.title}</b></div>
    <div>{$value.content}</div>
{/loop}

Новости

{loop name="tpl_news"}
    <div><a href='index.php?page=news&op=readNews&title={$value.title|urlencode}'><b>{$value.title}</b></a></div>
    <div class="info">{$value.date} ({$value.ncomments} comments)</div>
    <div>{$value.content}</div>
    {if condition="$value.more == 1"}
        <div><a href='index.php?page=news&op=readNews&title={$value.title|urlencode}'>Read more</a></div>
    {/if}
    {if condition="$value.tags != ''"}
        <div class="info">{$value.tags}</div>
    {/if}
{/loop}

Записи в блогах

{loop name="tpl_blog"}
    <div><a href='index.php?page=blog&title={$value.title|urlencode}'><b>{$value.title}</b></a></div>
    <div class="info">{$value.date} ({$value.ncomments} comments)</div>
    <div>{$value.content}</div>
    {if condition="$value.more == 1"}
        <div><a href='index.php?page=blog&title={$value.title|urlencode}'>Read more</a></div>
    {/if}
    {if condition="$value.tags != ''"}
        <div class="info">{$value.tags}</div>
    {/if}
{/loop}

 

Страницы

{if condition="$tpl_page.title != ''"}
    {if condition="$tpl_page.url != ''"}
            <div><a href='{$tpl_page.url}' title='{$tpl_page.title}'><b>{$tpl_page.title}</b></a></div>
    {else}
            <div><b>{$tpl_page.title}</b></div>
    {/if}
{/if}
{if condition="$tpl_page.name == 'blog'"} {include="blog"} {/if}
{if condition="$tpl_page.name == 'news'"} {include="news"} {/if}
<div>{$tpl_page.content}</div>

 

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

Это окончательная структура home.html:

 

  Компиляция файлов

MemHT не использует файлы аблонов на прямую. После первого просмотра сайта с новым шаблоном будут созданы скомпилированные файлы.

Скомпилированные файлы имеют такие названия:

• home_123456789.php
• news_123456789.php
• blog_123456789.php

Которые затем необходимо переименовать:

• home_def.php
• news_def.php
• blog_def.php

 

Переменные шаблона

• {$site_name} [string]
• {$site_url} [string]
• {$showpath} [string]
• {$tpl_template} [string]
• {$fullscreen} [int 0/1/2]
• {$copyright} [string]
• {$copytext} [string]
• {$footmsg} [string]

 

• {$tpl_blocks_navigator} [array]
  • .title [string]
  • .usetitle [int 0/1]
  • .content [string]

 

• {$tpl_blocks_central} [array]
  • .title [string]
  • .usetitle [int 0/1]
  • .content [string]

 

• {$tpl_blocks_extra} [array]
  • .title [string]
  • .usetitle [int 0/1]
  • .content [string]

 

• {$tpl_messages} [array]
  • .title [string]
  • .content [string]
  • .author [string]
  • .date [string]

 

• {$tpl_news} [array]
  • .id [int]
  • .title [string]
  • .content [string]
  • .more [int 0/1]
  • .author [string]
  • .date [string]
  • .day [int]
  • .month [string]
  • .year [int]
  • .hits [int]
  • .topicimg [string]
  • .ncomments [int]
  • .usecomments [int]
  • .rank [int]
  • .tags [string]
  • .argument [string]

 

• {$tpl_blog} [array]
  • .id [int]
  • .title [string]
  • .content [string]
  • .more [int 0/1]
  • .category [string]
  • .author [string]
  • .date [string]
  • .hits [int]
  • .usecomments [int 0/1]
  • .ncomments [int]
  • .rank [int]
  • .tags [string]

 

• {$tpl_page} [array]
  • .name [string]
  • .title [string]
  • .url [string]
  • .content [string]

 

Примечание

Использование PHP в  HTML файлах, все еще возможно. Просто используйте <? PHP и?> Внутри home.html, news.html и blog.html.