ArtReal logo
На грани иронии
 

<! doctype content //public >
<! xref location=/Theme/Недизайнерские заметки/Фортаун Web-Builder`а >

 
08.12.2mill

Вадим Артамонов

Шаблоны


    Итак, дизайн-макет готов, пора, наконец переходить к HTML-коду и шаблонам.
    Что такое шаблон? Шаблон - это полностью собранная страница, в которой оставлены редактируемые поля, индивидуально специфичные для каждой отдельной страницы. Поля могут быть такие: дата обновления, линки "туда-сюда-обратно", ну и наконец, основной блок контента.
    Вот как это, к примеру, выглядит в DreamWeaver:

<table width="20%" border="0">
  <tr bgcolor="#B8C8E0">
    <td><!-- #BeginEditable "ADate" -->
      <div align="center"><font color="#FF0000">{ADate}</font></div>
      <!-- #EndEditable --></td>
  </tr>
</table>
    А место для контента - вот так:
<br>
<!-- #BeginEditable "Main%20Text" -->{Main Text}<!-- #EndEditable -->
<p>&nbsp;</p>
    То, что в фигурных скобках - это и есть текущее значение редактируемого поля, которое нужно заменять на что-то свое.

    А зачем нужны шаблоны? Дело в том, что шаблоны интегрируют в себя весь ваш концептуальный и стилевой дизайн, и позволяют добиться одинакового дизайна страниц. Количество шаблонов определяется количеством разных дизайн-макетов. Иначе говоря, для каждого из разделов мы можете написать собственный шаблон, а для первой страницы - свой.
    Мало того, шаблоны позволяют реализовать потрясающую операцию. При изменении шаблона все страницы, пользующиеся этим шаблоном, будут перегенерированы. Вы можете даже полностью изменить дизайн, всего-навсего изменив шаблон. Это не только удобство, но и унификация и экономия времени.

    Как создается шаблон? Надо, для начала, отметить, что любой HTML-код, полученный на предыдущих этапах следует выбросить. Шаблон создается с нуля, с чистой страницы. Можно, конечно пользоваться визуальной разработкой (как в DreamWeaver), но я рекомендую писать код для шаблона ручками. Во-первых, лишнего там не будет, во-вторых, не нужно долго объяснять визуальному редактору что именно вы хотите, а в-третьих, не так уж часто вы будете редактировать шаблоны.
    Еще момент. Не поленитесь вставлять комментарии, поясняющие назначение отдельных элементов шаблона. Для посетителя пара лишних килобайт погоды не испортит, зато потом вы не будете выламывать собственную голову, пытаясь понять назначение какого-либо куска кода.

    Как пользоваться шаблоном? Очень просто. На основе шаблона создается новый html-файл, в котором в редактируемое поле вставляется нужное содержимое в html-коде или в виде plain text.  Как это делается, я уже писал.

    Созданные шаблоны скармливаются сайт-менеджеру (в DW, Аdobe GoLive, etc от встроен), так как заниматься управлением сайта вручную - не самая хорошая идея. Сайт-менеждер - это программа/модуль, позволяющая свести кучу html-файлов в сайт и работать с сайтом как с единым целым. Кроме того, при использовании сайт менеджера имеется возможность массовой перегенерации всех html при изменении шаблона, проверка целостности, выявлении битых ссылок, синхронизация с удаленным сервером и куча всего прочего.
    После того, как сайт-менеджер настроен, можно заняться вставкой контента в новые страницы.

    Теперь о некоторых моментах при создании шаблонов. Необходимо учитывать зависимость шаблонов от применяемой технологии и методов сборки сайта. Наиболее распространенные вот какие:

  • статическая сборка. Сборка осуществляется на локальном компьютере с применением, ну например, DreamWeaver.
  • статическая генерация. Шаблоны хранятся отдельно, контент отдельно (чаще всего в базе данных). Правила сборки описываются в XML или любым другим способом (например, в MacroHTML сборка осуществляется макросами). Нужная страница генерируется на локальном компьютере и выкладывается в виде статических страниц на сайт.
  • динамическая генерация с использованием PHP, CGI, ASP и прочих способов. Контент при этом хранится в базе данных (другой вопрос - как она организована), а шаблон - в файлах php, asp и т.д. Весьма интересная технология построения страниц на лету организована в Macromedia Generator.
    Еще один момент. Если вы используете SSI, то тоже не надо забывать о его специфике.

На печать  

<! xref location=/Theme/Недизайнерские заметки/Фортаун Web-Builder`а >
<! doctype links //site-relative >