Требования к CSS/HTML верстке

Студия «Вольтер». г. Киев, Крещатик 48 http://www.voltairestudio.com
Тел. +38 044 221 90 53 Email: [email protected]
Условия верстки HTML
http://www.voltairestudio.com
версия 1.5.0
Условия верстки и проверки макета
1.
2.
3.
4.
5.
Макеты всегда верстаются 1:1 «пиксель в пиксель», кроме случаев, согласованных
с Заказчиком.
Макет должен одинаково и правильно отображаться в следующих броузерах:
 Internet Explorer 7+
 FireFox (последняя версия)
 Opera 11+
 Chrome (последняя версия)
 Safari (последняя версия)
на платформе Windows.
Тип документа xHTML 1.0, используется CCS 2.1 c элементами CSS 3.
Корректность кода проверяется валидатором http://validator.w3.org/, соответствие
макету – http://browsershots.org только в броузерах указанных в п.2.
Кодировка файлов строго в UTF-8, файлы JS и CSS тоже в только в этой
кодировке.
Общие принципы верстки
1.
2.
3.
4.
5.
6.
7.
8.
9.
Ширина макета. Ширина макета фиксированная, 1024 px
Верстаем на class. Для задания стиля элемента использовать class, id мы
используем исключительно для подключения Javascript.
Чистый код. В тегах запрещается использование свойства style, если не указано
обратное.
Резина по вертикали. Все блоки – резиновые по вертикали. Мы подразумеваем,
что в блоке выводится информация из CMS и мы не можем предусмотреть
количество информации.
Заголовки в несколько строк. При верстке заголовков и названий учитываем что
они могут быть в две или три строки.
Заголовок H1. Заголовок страницы всегда оформляется тегом h1, это
единственный тег h1 на страницу, если это не указано отдельно.
Верстка текста. Каждый абзац текста находится в теге <p>,он всегда выровнен в
соответствии с макетом. Подзаголовки в тексте оформляются тегом <h3>, жирный
текст – <strong>.
Минимизируем количество классов. Элементы, которые находятся в
контейнерах с классом, должны, по возможности, не иметь своих классов. Пример
<div class=”sample>”
<p> texte</p>
<a href=”#”>ligne</a>
</div>
Текстовую информацию выводим текстом. Весь текст в макете верстается
текстом, а не вставляем картинки.
Служебное
стр. 1
Студия «Вольтер». г. Киев, Крещатик 48 http://www.voltairestudio.com
Тел. +38 044 221 90 53 Email: [email protected]
Верстка картинок. Картинки, элементы дизайна, всегда верстаются фоном.
Картинки – элементы контента всегда верстаются явно, при помощи тега <img>.
11. Наименование элементов. Названия class и id должны по смыслу соответствовать
применению, рекомендуем использовать header, footer, left, right, content, column и
их производные.
12. Комментирование кода. Необходимо разделять основные html блоки
комментариями с указание назначения блока.
10.
Javascript & Jquery
1. По умолчанию, мы не выполняем работ по программированию на Javascript/Google
API/ Yandex API.
2. JQuery. Мы используем последнюю версию библиотеки JQuery.
3. JQuery плагины. Мы используем плагины на свое усмотрение, если вы знаете
какие плагины вам необходимы, укажите ссылки на них тут:

Структура и названия файлов
1.
2.
3.
4.
5.
6.
HTML файлы имеют расширение htm, название файла соответствует названию
файла с макетом.
Все htm файлы находятся в корне папки
CSS находится в папке css, файл называется styles.css
Все картинки в папке images
JavaScript в папке js, файл называется aloha.js.
JQuery плагины находятся в папках с соответствующим названием
Служебное
стр. 2