Компания
Webmedia

Тел.: (495) 235-6004, 235-6117
(495) 518-8203
http://www.webmedia.ru
e-mail: info@webmedia.ru

Верстка Шаблонов в Системе Создания Сайтов DSite

Верстка шаблонов

В системе управления сайтом DSite уровни редактирования разделены таким образом, чтобы сделать возможным независимое изменение:
        структуры Web сайта;
        дизайна Web сайта;
        содержания Web сайта.

Это позволяет дизайнеру менять дизайн независимо от содержания сайта, которое может наполняться, например, копирайтером. Структура, которая может меняться менеджером компании, будет автоматически “вписываться” в измененный дизайн. Таким образом происходит смена дизайна сайта компании без изменения наполнения, так называемая multi-skin технология.

Для того чтобы разделить дизайн, структуру и содержание, в DSite применяются специальные файлы в HTML формате, которые разрабатываются дизайнером и верстальщиком таким образом, чтобы последующее содержание (контент) сайта мог удобно располагаться в соответствующих зонах (блоках) дизайна, вне зависимости от того, на какой странице сайта находится посетитель.

В общем случае шаблон DSite представляет из себя HTML страницу, которую можно сверстать в любом из известных HTML редакторов, таких как Macromedia DreamWeaver, Microsoft FrontPage, Microsoft Word, Open Office и т.п., а также встроенным редактором DSite.

Для того чтобы страница стала полнофункциональным шаблоном к ней предъявляются дополнительные требования.

Требование 1

Все изображения шаблона имеют путь: /themes/<имя темы>/images, например:

<td><img src= "/themes/main/images/spacer.gif " width="25" height="1"></td>

<имя темы> в данном случае это одно из представлений дизайна. Так как Web-сайт, созданный в системе DSite может иметь несколько дизайнов, дизайнером может быть создано несколько шаблонов, каждый "из которых соотнесен с соответствующей “темой”. Основная тема называется обычно main.

Требование 2

Информация содержащаяся на сайте, выносится в блоки, в которых будет отображатся соответствующая данной странице сайта информация. Блоки нумеруются, и каждый блок вставляется в соответствующее место  в HTML следующей командой:

<? InsertContentBlock(x); ?>

,где x – номер блока от 0. (См. Инструкцию – Блоки).

Например, для того чтобы вставить самый первый блок, нужно написать команду:

<? InsertContentBlock(0); ?>

 

Требование 3

Меню первого уровня как правило также формируется в шаблоне, хотя и может быть вынесено в блок, поэтому в соответствующем месте в HTML коде вставляется следующая команда:

<? PrintButtons("<название функции для печати кнопок>"); ?>

Эта команда производит вывод всех “кнопок” сформированных в структуре системы DSite. (См. Инструкцию – Редактирование Секции)

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

Например, это может выглядеть таким образом:

<?
function PrintAButton($buttontext, $buttonurl, $active, $sectionid)
{
?>
<td><a class=menuitem href="<?=$buttonurl;?>"><?=$buttontext;?></a></td>
<?
}
PrintButtons
("PrintAButton");
?>

Все инструкции внутри функции PrintAButton записываются на языке PHP (см. Документацию по языку PHP). В качестве параметров, функция для печати кнопок, как показано в примере, должна принимать следующие четыре параметра:
$buttontext – текст кнопки, указываемый при редактировании соотв. секции;
$buttonurl – ссылка кнопки, сформированная автоматически, для перехода на соотв. секцию;
$active – является true если кнопка принадлежит выбранной посетителем секции (т.е. определяет активность секции);
$sectionid – вспомогательный параметр, определяет ID секции, которой принадлежит данная кнопка

 

Дополнительные рекомендации

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

<link rel="stylesheet" href="/themes/main/main.css" type="text/css">

Этот тэг вставляется до закрытия тэга <HEAD>.

Также в страницу шаблона рекомендуется вставлять тэг, указывающий на кодировку страницы, например:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

Также рекомендуется выносить заголовки страницы (title, meta, keywords, description) внутрь блока, например таким образом:

<html><head>
<!-- Head Block { -->
<? InsertContentBlock(0); ?>
<!--} Head Block -->
<meta http
-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="/themes/main/main.css" type="text/css">
</head>...

В заголовке блока рекомендуется указать заглавие (Title) страницы, а также вызвать команду GetMeta(), которая вставляет специальные Meta-тэги keywords и description , заданные для каждой конкретной секции, для оптимизации страниц сайта под различные поисковые системы.

<title><? echo GetSectionName(); ?> :: Webmedia </title><?=GetMeta();?>

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

Существует также возможность вставлять ключевые слова из соответствующих статей новостей и FAQ"а для секций новостей и FAQ. Это обсуждается в отдельной части “Примеры использования DSite”.

Ефимов Андрей efimov@mediapg.ru



Читайте также:
  • Шаблонные решения и готовые сайты
  • Как создать идеальный Интернет-Магазин
  • 7 причин разрабатывать сайты у нас
  • Эволюция сайтов
  • Верстка в ImageReady

    « 1  2