запомнить Регистрация +

Чек-лист на шаблоны страниц сайта

Данный документ должен учитываться верстальщиком при работе над вёрсткой шаблонов страниц сайта. Приём работ происходит по этому чек-листу.

Все требования чек-листа обязательны за исключением пунктов, выделенных блеклым цветом, которые носят рекомендательный характер. Также, приоритетом перед этим документом обладают ТЗ на сайт и ТЗ на дизайн сайта, но лишь в том случае, если ТЗ составлены нашей студией или при её участии.

Условные обозначения

  • ТЗ — техническое задание
  • ШС — шаблон страниц
  • ОО — область отображения
  • ФБ — функциональный блок

  1. Общие требования к вёрстке

    1. Шаблоны страниц сайта должны полностью отвечать спецификации HTML5.

    2. При вёрстке шаблонов страниц сайта должен неукоснительно соблюдаться принцип разделения контента и оформления. В HTML-шаблонах страниц не допускается использование тэгов и атрибутов тэгов, предназначенных для оформления. В частности, не допускается использование тэгов basefont, font, style и атрибутов тэгов align, alink, background, bgcolor, border, cellpadding, cellspacing, clear, color, face, height (даже в картинках), hspace, link, marginheight, marginwidth, nowrap, style, text, valign, vlink, vspace, width (даже в картинках). Всё оформление должно быть реализовано подключением внешних CSS-файлов (см. раздел “CSS”). Рекомендуется применение прописанных в них стилей к элементам шаблона со следующим приоритетом: определение стилей для элементов DOM-структуры (например, #menu a:first-child {...}) > определение стилей для элементов с уникальным идентификатором (атрибут id, например, #menu {...}) > определение стилей для элементов с атрибутом class (например, table.border1 {...}).

    3. Настоятельно рекомендуется безтабличный стиль вёрстки. Использование таблиц в целях оформления допускается лишь в случае отсутствия альтернативы и должно быть аргументировано. В общем случае должны использоваться контейнеры div с уникальными идентификаторами id для каждого элемента шаблона и абсолютным/относительным позиционированием. То есть, код шаблона должен быть похож на этот:

      ...
<div id="content">
	...
	<div id="area_01">Основной <b>текст</b> на странице</div>
	...
</div>
<div id="header">
	...
	<div id="slogan">Слоган компании</div>
	...
</div>
...

    4. Все пути в шаблонах страниц должны быть абсолютными. Например, <img src="/images/header.png" alt="" />

    5. Шаблоны страниц должны корректно отображаться в браузерах: IE (7-ой версии и выше), Firefox, Chrome, Opera, Safari (последних на момент вёрстки версий). Это не обязательное требование для принятия шаблонов страниц к установке на движок, но возможные претензии заказчика по этому поводу будут направляться верстальщику.

    6. При использовании в шаблонах страниц элементов, либо поддерживаемых не всеми браузерами, либо отключаемых пользователями (JavaScript, Flash и т.п.), необходимо, чтобы при отключении этих элементов шаблоны смотрелись приемлемо. Это не обязательное требование для принятия шаблонов страниц к установке на движок, но возможные претензии заказчика по этому поводу будут направляться верстальщику.

    7. Шаблоны страниц должны нормально масштабироваться при изменении разрешения монитора (ширины окна браузера) в соответствии с ТЗ на дизайн сайта и указаниями дизайнера по этому поводу.

    8. При просмотре шаблонов страниц с разрешением монитора (шириной окна браузера) меньше указанного в ТЗ на дизайн сайта, шаблоны должны смотреться нормально с горизонтальной прокруткой или без неё.

    9. Нужно убедиться, что свёрстаны все требующиеся шаблоны страниц и функциональные блоки со всеми элементами (перечисленные в требованиях по дизайну).

  2. Структура файлов

    1. Готовые шаблоны страниц предоставляются для установки на движок сайта в заархивированной директории, названной по имени сайта, в которой находятся:

      1. Файлы шаблонов, названные: “pattern_00.htm” (основной шаблон внутренних страниц); “pattern_*.htm”, ... (если для сайта требуется более одного шаблона страниц; вместо * — какое-либо обозначение шаблона, например, “pattern_main.htm” для главной страницы).

      2. Директория с CSS-файлами, названная “css”, в которой находится (см. также раздел “CSS”):

        1. CSS-файлы со стилями, описывающими контент, названные: “basic_00.css”, “basic_01.css”, “basic_02.css” ... “basic_NN.css” (несколько файлов — если требуется несколько вариантов оформления контента).

        2. CSS-файлы со стилями, описывающими элементы компоновки (шапка, лого, подвал, блоки и пр.), названные: “decor_*_00.css”, “decor_*_01.css”, “decor_*_02.css” ... “decor_*_NN.css”. (Несколько файлов — если требуется несколько вариантов компоновки. При этом, если на сайте также несколько шаблонов страниц, то вместо * нужно подставить нужное обозначение шаблона. К примеру, для сайта приготовлено два шаблона, названных “pattern_00.htm” и “pattern_main.htm”, и для каждого из этих шаблонов есть по два варианта компоновки. Таким образом, получится четыре CSS-файла со стилями, описывающими элементы компоновки: “decor_00_00.css”, “decor_00_01.css”, “decor_main_00.css”, “decor_main_01.css”.)

        3. CSS-файлы со стилями, описывающими элементы компоновки для браузера IE. (Эти файлы необязательны. Они нужны, если есть необходимость также дописать отдельные стили специально для IE. Называться должны точно так же, как “basic_NN.css” и “decor_*_NN.css”, но в начале должно быть добавлено “x_”.)

      3. Директория с картинками, использующимися в шаблонах страниц, названная “images”.

      4. Директория со скриптами JavaScript, названная “scripts”. Если в шаблонах используется JavaScript для оформления страницы (что допускается, но в разумных пределах — если нет возможности реализовать задуманное без использования скриптов), то в этой директории должен находиться файл “decor.js” с описанием функций, использующихся в шаблонах (только описанием функций — все изначальные вызовы, например, по onload, должны быть прописаны в <head> шаблонов; например, так: window.addEventListener ? window.addEventListener("load", set_body_height, false) : window.attachEvent("onload", set_body_height);).

      5. Директория с Flash-роликами, если они используются в шаблонах, названная “flash”.

  3. CSS

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

    2. Стили, отвечающие за компоновку страниц и «геометрию» вполне определённых элементов, не относящихся к контенту, должны быть прописаны в файлах “decor_*_NN.css”. В частности, все стили для элементов с уникальными идентификаторами (id) должны быть прописаны в этих CSS-файлах за исключением стилей, относящихся к тем же элементам, но отвечающих за цвето-шрифтовое оформление этих элементов. Эти стили должны быть прописаны в файлах “basic_NN.css”.

    3. Стили, отвечающие за оформление контента (заголовков, таблиц, списков и пр.), а также стили, описывающие цвета, внешний вид текста и пути к картинкам — то есть, всё, что отвечает за внешний вид, не связанный с «геометрией», должны быть прописаны в файлах “basic_NN.css”.

    4. В файлах “basic_NN.css” помимо всего прочего должны быть определены перечисленные ниже классы. Они используются в движке для оформления определённых элементов.

      1. .color {color: ...; ...} — для важных элементов, выделенных цветом
      2. .imp {...} — для важных элементов, выделенных, например, цветом
      3. .un_color, .un_imp, .un_imp * {color: ... !important;} — для «не важных» элементов
      4. .border0 {border: none;} — для элементов без границ
      5. .border1 {border: ...;} — для элементов со стандартными границами
      6. .back0 {background: none;} — для элементов без фона
      7. .back1 {background: ...;} — для элементов со стандартным фоном
      8. .margin_bottom {margin-bottom: ...;} — для элементов со стандартным отступом снизу
      9. .news — для объектов функции «Новости» (отдельных новостей)
      10. .pseudo_button — для, как правило, строчно-блоковых элементов с текстом (например, для каждой ссылки в строке с навигацией по страницами «1 | 2 | 3»)
      11. .thumb {display: inline-block; ...} — для строчно-блоковых элементов (например, для объектов функции «Фотоальбом»)
      12. .floatleft — для блоков, обтекаемых другим контентом слева
      13. .floatright — для блоков, обтекаемый другим контентом справа
      14. .short — для элементов минимально возможной ширины
      15. .table_decor — для таблиц, использующихся для декорирования, и их элементов
      16. .table_wohead — для таблиц с заголовками в левой колонке, а не в верхней строке
      17. .table_form — для таблиц, использующихся в формах
      18. tr.r0 и tr.r1 — для строк таблиц с чередующимся фоном

    5. CSS-значения font-family должны представлять собой не отдельный шрифт, а список шрифтов, отсортированный по их универсальности в обратном порядке, и заканчиваться одним из значений serif, sans-serif, monospace. Например: font-family: "Bookman Old Style", "Times New Roman", Times, serif.

  4. Замечания по компоновке страниц сайта

    1. Специфика движка сайта предполагает следующую иерархию расположения информации (контента) на страницах сайта, что должно учитываться вёрстке шаблонов страниц:

      1. На сайте может быть (см. ТЗ на сайт) несколько шаблонов страниц (ШС) — отличающихся по внутреннему иерархическому строению. Например, в одном шаблоне должно быть три колонки с текстом, шапка должна быть большой и содержать контактную информацию, форму авторизации и т.д. А в другом шаблоне в шапке должен быть лишь логотип со слоганом, поиском и дополнительной навигацией, в то время как форма авторизации должна находиться в левой колонке, а правой колонки быть не должно вообще.

      2. Каждый ШС (тип страницы) содержит несколько областей отображения (ОО) контента. Как правило, основных ОО три (но теоретически может быть неограниченно много) — левая с навигацией и второстепенными информационными блоками, центральная с основным наполнением и правая с различными информационными врезками, например, комментариями по основному наполнению, лентой новостей и пр. Часто правую область(-ти) имеет смысл сделать в виде обтекаемого(-ых) основным текстом блока(-ов) вместо реализации полной колонкой. Каждая ОО должна заключаться в контейнер <div id="area_NN">...</div>, где NN — номер области отображения, начинающийся с 00 для главной области с основным контентом и далее — 01, 02 и т.д. Стили для элементов с id="area_NN" прописываются в файлах “decor_*_NN.css”.

      3. Каждая из ОО содержит несколько функциональных блоков (т.н. функций, ФБ), представляющих собой тот или иной вид контента — обычный текст, ленту новостей, фотоальбом, каталог товаров, анкету, опрос и пр. В одной и той же ОО может быть по единственному экземпляру той или иной функции. Например, в левой ОО могут быть представлены один блок с текстом, одна лента новостей и один фотоальбом. Каждый ФБ должен заключаться в контейнер <div class="block_00">...</div>. Если нужны несколько видов блоков, то необходимо прописать отдельные классы и для них, например, .block_01, .block_02 и т.д. Стили для элементов с class="block_NN" прописываются в файлах “decor_*_NN.css”.

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

      4. Каждый из ФБ содержит в себе несколько объектов своих функций. Например, блок с лентой новостей содержит несколько новостей с датой, названием-ссылкой и анонсом, блок с текстом может содержать несколько разных объектов текста (хоть это и не столь очевидно внешне), блок с фотоальбомом содержит в себе несколько фотографий с названиями, описанием и пр.

    2. Для страниц сайта с требовательным к ширине страницы контентом (таблица товаров и т.п.) следует предусмотреть отсутствие правой(-ых) ОО.

    3. Важно помнить, что бывают длинные слова или слишком широкие баннеры и таблицы, которые будут не укладываться в отведённое для них место.

  5. Требования к вёрстке элементов шаблонов

    1. В шаблонах страниц должны быть представлены все элементы, указанные в ТЗ и предусмотренные дизайном сайта — навигаторы, формы, текстовые области, тематические картинки, пиктограммы и пр. Кроме них также должны быть предусмотрены:

      • Путь по сайту (главная → продукция → люстры). Нужно учитывать, что он может быть довольно длинным.
      • «Подвал» с копирайтом, кнопкой техподдержки и кнопкой студии “Scrofa Tridens”.
      • Место для размещения счётчиков (1 или 2, если иное количество не оговорено в ТЗ).

    2. Важно помнить, что никто не помешает заказчику ввести в любую ОО и ФБ произвольное количество информации. Т.е., высота (а часто и ширина) любого ОО и ФБ непредсказуемы. При вёрстке шаблонов необходимо это учитывать.

    3. В основном навигационном меню используются исключительно текстовые ссылки. При необходимости дополнительно можно использовать тематические картинки к разделам с жёстко прописанными адресами этих страниц. Так же исключительно текстом должны быть представлены все заголовки всех уровней, заголовки ФБ и путь по сайту. Желательно так же — название сайта, слоган, контактная информация и т.д. В идеале — весь текст должен быть текстом, а не графикой.

    4. На каждой странице сайта должен присутствовать только один заголовок первого уровня (<h1>...</h1>).

    5. Путь по сайту заключается в контейнер <div id="bread">...</div>, который содержит в себе только ссылки на соответствующие разделы сайта, либо <span>...</span> с текстом открытой страницы. Например: <div id="bread"><a href="/">Главная страница</a><a href="#">О компании</a><span>История компании</span></div>. Всё оформление ссылок и разделителей должно быть определено в подключаемых CSS-файлах.

    6. Дополнительная навигация по сайту («Написать письмо», «Карта сайта» и т.п.) заключается в контейнер <div id="nav">...</div>.

    7. Вёрстка таких модулей, как «Фотоальбом», «Таблица товаров (всех видов)», «Корзина» и «Форма заказа товара» должна быть максимальна приближена к образцу. Его можно посмотреть в коде страниц Сайта. Там же можно посмотреть примеры CSS-файлов (“basic_NN.css”, “decor_*_NN.css”, “x_decor_*_NN.css”) и вёрстки других элементов шаблонов.

    8. Основной навигатор и карта сайта

      1. Основной навигатор и карта сайта должны быть свёрстаны с учётом следующих требований, продиктованных движком:

        1. Основной навигатор в зависимости от настроек конкретной страницы сайта может быть одного из четырёх видов, каждый из которых должен быть предусмотрен в шаблонах страниц:

          • Главный (главное меню сайта первого уровня) + второстепенный (все остальные уровни меню) открытый (всё дерево навигатора открыто)
          • Главный + второстепенный закрытый (открыты лишь все ветви дерева, относящиеся к активной загруженной странице)
          • Единый (все уровни меню объединены в одно дерево) открытый
          • Единый закрытый

        2. Главное меню сайта (первый уровень основного навигатора) заключается в контейнер <div id="menu_main">...</div>. Все остальные уровни основного навигатора заключаются в контейнер <div id="menu_basic">...</div>. В случае, если на данной конкретной странице должен быть единый навигатор, все уровни меню, включая первый, заключаются в контейнер <div id="menu_basic">...</div>.

        3. Каждый элемент (пункт меню) основного навигатора должен быть представлен в виде ссылки <a href="..." class="m*">...</a>, где * — число уровня вложенности элемента (например, <a href="..." class="m5">Элемент пятого уровня</a>). Если этот элемент навигатора является активным (пункт меню открытой страницы и все его родители), то он заключается в контейнер <span class="m*c">...</span>, где * — число уровня вложенности элемента. Кроме того, все дети какого-либо родительского пункта меню должны быть заключены в контейнер <span class"mb">...</span>.

          Таким образом, код основного навигатора должен быть похож на этот:

          <div id="menu_main">
	<span class="m1c">О компании</span>
	<a href="#" class="m1">Услуги</a>
	<a href="#" class="m1">Информация</a>
	...
</div>
...
<div id="menu_basic">
	<h2>О компании</h2>
	<p>
		<a href="#" class="m2">Новости</a>
		<a href="#" class="m2c">История компании</a>
		<span class="mb">
			<a href="#" class="m3">С основания до чего-то</a>
			<span class="m3c">Пункт открытой страницы</span>
			...
		</span>
		<a href="#" class="m2">Контакты</a>
		...
	</p>
</div>

        4. Вёрстка карты сайта осуществляется точно так же, как и вёрстка основного навигатора, но в отличие от основного навигатора:

          • Сама карта сайта заключается в контейнер <div id="sitemap">...</div>
          • Вместо классов навигатора .m* применяются классы .map*
          • Очевидно, классы активных элементов .map*c не нужны, поскольку их не будет.

        5. Все стили для элементов основного навигатора и карты сайта прописываются в файлах “decor_*_NN.css”.

        6. Также, в тех же CSS-файлах должны быть прописаны универсальные стили для всех возможных уровней навигатора и карты сайта, не представленных в дизайне сайта. Очевидно, это должно быть одно универсальное CSS-правило, учитывающее произвольный уровень вложенности навигатора и карты сайта. Например: “#menu_basic a, #sitemap a, #menu_basic span, #sitemap span {...}”.

      2. Пункт меню навигации может быть достаточно длинным (состоящим из многих и (или) длинных слов). Также, само меню навигации может содержать произвольное количество пунктов. Необходимо учитывать это при вёрстке шаблонов.