Каждый макет дизайна, используемый на сайте, предварительно должен быть создан в виде файла-макета в формате HTML. Изображения, присутствующие в оформлении страницы, желательно размещать в одной папке или системе папок, которая будет затем скопирована на сервер.
В макете внутренних страниц желательно учесть детали, приведенные ниже:
1. Способ выделения активных разделов. Например, текущий раздел первого уровня должен выделяться цветом фона и текста, а текущий раздел второго уровня – отсутствием ссылки на нем. Макет должен содержать все возможные блоки навигации (1-2-3… уровня, «хлебные крошки» и пр.) и в каждом блоке должны присутствовать как активные, так и неактивные элементы.
2. Внешний вид заголовка страницы (тег < title>). Заголовок страницыможет иметь вид, например, «Название компании», «Название текущего раздела», «Компания / Раздел 1 / Раздел 11» и пр.
3. Если какой-либо элемент оформления или навигации присутствует не на всех страницах, необходимо создать макет таким образом, чтобы при отсутствии данного элемента страница не исказилась, либо, если это невозможно, создать и использовать разные макеты для данных ситуаций.
4. Таблицу стилей можно иметь как в теле макета, так и во внешнем файле. Использование двойных кавычек в коде макета желательно минимизировать, заменяя их на апострофы или вообще избегая их. Если же кавычки необходимы, то потребуется их экранирование – перед каждой кавычкой необходимо поставить обратный слэш \. В разделе «Инструменты» имеется функционал экранирования спецсимволов. Он автоматически заменяет все спецсимволы во введенном коде на безопасную комбинацию. Это связано с тем, что кавычки “ являются спецсимволом PHP. Например, ими мы выделяем функцию: “.s_browse_level(0, $browse_sub[0]).”. Для упрощения работы мы рекомендуем Вам использовать одинарные кавычки ‘ (они равноправны двойным практически во всех стандартах, включая HTML, XHTML), или же отказаться от них вовсе.
Кроме того:
- необходимо четко разграничить все три части страницы: хедер, содержательную часть и футер;
- если для навигации используются графические изображения (названия разделов или иконки), следует нарисовать картинки для всех разделов;
- если для оформления разных разделов используются разные стили или коллажи, они также должны быть созданы.
Создадим простейший HTML-макет и поэтапно опишем процесс конвертации его в макет NetCat. Пусть необходимо, чтобы страницы сайта выводились в таком макете:
Приведем HTML-текст такого макета:
Очевидно, что эта страница раздела «Прямые рога» подраздела «Рога» каталога товаров. Выделим блоки, которые необходимо формировать динамически. Это:
• Заголовок страницы (тег title)
• Коллаж справа вверху (для каждого раздела он должен быть уникальным)
• Меню первого уровня («О компании», «Новости» и пр.)
• Меню второго уровня («Копыта», «Рога» и пр.)
• Меню третьего уровня («Ветвистые», «Прямые» и пр.) – причем, меню выводится под родительским меню, и только для активного раздела
• Блок последних новостей
• Количество новинок
• Заголовок страницы
Для удобства мы выделили бы еще три динамических блока:
• Блок стилей CSS
• Вспомогательное меню «Поиск», «Карта сайта» и пр.
• Текущий год в блоке копирайтов
Выделим динамические блоки жирным шрифтом и снабдим комментариями:
Ниже приведем последовательность действий, необходимых для конвертации этого файла в формат макета NetCat.