Первое что нужно сделать — создать новый макет дизайна в административном разделе. Зайдите в раздел «Разработка → Макеты дизайна» и добавьте новый макет. Система автоматически создаст необходимые файлы и подпапки нового макета в папке /netcat_template/template/.

Макет дизайна можно создать с нуля либо на основе уже существующего.

Если вы создаете дочерний макет, он будет располагаться в папке /netcat_template/НомерРодительскогоМакета/НомерМакета. Путь к этой папке в html-коде макета можно формировать либо вручную, либо можно использовать переменную $nc_parent_template_folder_path .

Содержимое макета (HTML) можно редактировать как через веб-интерфейс, так и напрямую в файле (например, через FTP-соединение). Если вы редактируете макет напрямую, вам понадобятся два файла: Settings.php и Template.html. Подробнее они описаны ниже.

Все вспомогательные файлы (картинки, файлы стилей, скриптов и пр.), используемые в макетах, рекомендуется разместить в отдельной папке, например resources/. Также можно в этой папке создать подпапки images или files и разместить файлы там.

В дальнейшем мы будем предполагать, что работа с макетом происходит в интерфейсе NetCat. Если вы предпочитаете работать напрямую, вам необходимо делать все то же, принимая во внимание формат файлов:

Settings.php должен начинаться конструкцией <? и заканчиваться ?>
Template.html имеет следующую структуру:
 содержимое верхней части страницы 
 содержимое нижней части страницы

Рабочая область макета делится на три основные части:

Шаблоны вывода навигации. В поле нужно размещать массивы, необходимые для построения навигации.
Верхняя часть страницы. В поле нужно поместить верхнюю часть шаблона.
Нижняя часть страницы. В поле нужно поместить нижнюю часть шаблона.

Теперь файл макета нужно разбить на логические составляющие:

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

Обратите внимание, что термины «верхняя» и «нижняя» не обязательно означают геометрическое понятие верха и низа. Также NetCat позволяет поддерживать сайты с несколькими контентными частями.

На рисунке:

Выделенное жёлтым цветом нужно разместить в поле Header.
Нижняя часть, выделенная красным, будет помещена в Footer.
Часть, которая не выделена — контентная область.

Сейчас код макета представляет собой обычный html-код

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Index</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="/general.css" />
</head>
<body>
<div id="main"><div class="content">
    <div id="header">
        <div id="logo">
            <a href="/"><img src="/images/logo.gif"/></a>
            <span class="name">Моя<span>Компания</span></span>
            <span>Слоган компании</span>
        </div>
        <div class="sep"></div>
        <div id="menu"><div class="left"><div class="right">
            <ul>
                <li class="menu-active">О нас</li>
                <li><a href="#">Новости</a></li>
                <li><a href="#">Контакты</a></li>
            </ul>
        </div></div></div>
    </div>
    <div id="left_content">
        <div class="submenu">
            <ul>
                <li><a href="#" class="menu-active">Категории</a>
                    <ul>
                        <li><a href="#">Первая</a></li>
                        <li><a href="#">Вторая</a></li>
                    </ul>
                </li>
                <li><a href="#">Аксессуары</a></li>
            </ul>
        </div>
    </div>
    <div id="content" class="is_left">
        <div class='breadcrumbs'><a href='#'>Главная</a> / Новости</div>
        <h1>Далеко-далеко за словесными горами.</h1>
        <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.</p>
        <p>Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики. Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить</p>
    </div>
    <div class="sep"></div>
</div></div>
    <div id="footer">
        <div class="left">&copy; 2012 ООО &laquo;РиК&raquo;.<br />Все права защищены.</div>
        <div class="right">&copy; 2012 Разработано <br />в компании &mdash; <a href="#">WebSite.pu</a></div>
        <div class="sep"></div>
    </div>
</body>
</html>

8.2 Внедрение структуры Далее →

Наверх