Технические требования к верстке сайтов (HTML + CSS)

Главная → Просто о сложном → Для веб-программистов → Технические требования к верстке сайтов (HTML + CSS)

Главная → Просто о сложном → Технические требования к верстке сайтов (HTML + CSS)

Требования к верстке :

Сверстанный макет предоставляется в виде страницы index.html и прилагаемых файлов (css, изображения, js и др.) Структура следующая: в корне index.html, в этой же папке файл style.css (не нужно выдумывать другие названия и класть его в другую папку), в папке images изображения используемые в css (в основном фоновые), в папке upload – изображения используемые в контенте (например изображение в приложении 2 – image1.jpg), то есть эти изображения не будут использоваться на сайте, а лишь показывают как примеры, эту папку веб-программист может смело удалить после передачи ему верстки . Все файлы упаковать в ZIP архив c названием по шаблону: Верстка Название проекта версия 3.9.zip, например: Верстка _ арт_гамма_мебель_версия_2.3.zip
Структуру css файла, перед сдачей работы css код необходимо оптимизировать для более удобной работы в дальнейшем с ним следующим образом:
#селектор {стили в одну строку}#селектор2 a:hover {стили в одну строку…}#селектор3 {стили в одну строку…..}.селектор4 {стили в одну строку………}
Пример:
#header {height:210px;}#header img {margin:10px 0 20px 70px;float:left;}#header div {width:501px;height:99px;background:url(img/bannertop.png) no-repeat; float:right;margin-top:55px;}#header div img {margin:10px 0 0 60px;}#header div address {float:right;margin:12px;}#header div p {height:32px;width:194px;background:url(img/cont.png) no-repeat;text-align:center;font-family:"Myriad Pro Cond",mpc,"Trebuchet MS",Tahoma,sans-serif;font-size:18px;color:#fff;font-weight:bold;padding-top:8px;text-shadow:0 1px 1px #000;}#nav {background:url(img/navbg.png) center bottom no-repeat;width:980px;height:114px;clear:both;}#nav div {height:100px;width:980px;background:url(img/navterm.png) no-repeat;}#nav ul {padding:0 25px;position:relative;text-align:right;z-index:597;height:100px;}#nav ul li {float:left;height:100px;width:186px;background:url(img/navli.png) no-repeat;vertical-align:middle;position:relative;}#nav ul li a {font-family:"Myriad Pro Cond",mpc,"Trebuchet MS",Tahoma,sans-serif;font-size:22px;color:#fff;text-shadow:1px 1px 2px #000;padding-right:8px;text-decoration:none;position:relative;display:block;height:100px;}#nav ul li a img {float:left;left:10px;position:relative;font-size:14px;top:3px;}#nav ul li a span {display:block;position:relative;top:28%;float:right;max-width:122px;}#nav ul li a:hover {text-decoration:underline; text-shadow: 0px 0px 15px #F7F5CD, 0px 0px 5px #F7F5CD;}#nav ul li:hover > div {visibility:visible;}#nav ul li div {left:0;position:absolute;top:100%;visibility:hidden;z-index:598;width:186px;text-align:left;height:auto;background:transparent;}#nav ul li div span:first-child {background:url(img/ddmt.png) no-repeat;}#nav ul li div span {background:url(img/ddmb.png) no-repeat;width:186px;height:7px;display:block;}#nav ul li ol {background:url(img/ddmbg.png) repeat-y;width:186px;padding:10px 0 10px 12px;}#nav ul li ol li {float:none;background:transparent;width:auto;height:auto;background:url(img/tlbull.png) 0 8px no-repeat;padding-left:8px;}#nav ul li ol li ol {margin-left:12px;background:none;padding:0;width:auto;}#nav ul li ol li ol li {background:url(img/blbull.png) 0 8px no-repeat;padding-left:6px;}#nav ul li ol li a {float:none;font-size:20px;color:#04730e;text-shadow:none;height:auto;line-height:22px;}
Верстка должна быть кроссбраузерной: IE 8+, FF 3+, Opera 10+, GChrome 1+, Safari 3+, в идеале ie 6+ ( ну хотя бы что б не ехало и не ужасно было), хотя верстка под ie6 и ie7 оплачивается дополнительно, если клиенту потребовалось это, нас пока ни разу не было, а в дальнейшем уж тем более, отсюда и более низкая стоимость верстки .
Названия прилагаемых файлов должны быть в нижнем регистре, без спец символов (кроме _), без пробелов, без русских букв (только латиница, _ и цифры)
Сайт должен просматриваться при разрешении 1024x768 без горизонтальной прокрутки. Для удобства просмотра в разных разрешениях есть специальная кнопка в дополнении к мозилле web-developer
Обязательно вставить HTML код с картинками - приложение №2

Скачать приложение №2
Прописать css стили контентной части макета для элементов: ul, ol, li, img, a, a:hover, p, h1-h6,table, td. Пример: #content p {font-size:10px;text-align:justify;} #content h1 {font-size:20px;border-bottom:1px solid grey;} и т д. Например: у списков должны быть маркеры в этой части, таблицам лучше сделать border-collapse:collapse, у картинок margin около 20px – чтобы текст не прилипал, ссылки выделялись, но не слишком, при наведении меняли стиль (подчеркивание, цвет или другое). В общем когда вставите код из приложения 2 – увидите косяки.
Все меню выполнить в стиле
```
	
		О нас
		Услуги
		Обучение
		Партнеры
		Контакты
	

	
```
то есть списком а не таблицами или дивами, как некоторые делают ;)), внутри li вставлять span, да и вообще внутри инлайновых элементов недопустимо использовать блочные.
Контентная часть должна быть растягиваемой вниз ( то есть можно вставить хоть десять html кодов из п.6)
Тег заголовка H1 в верстке должен быть только один, в частности в названии страницы.
Использовать стандартные названия идентификаторов тегов для создания каркаса: header – для шапки сайта, footer – для подвала сайта, wrapper – для общего контейнера, main – для контейнера между шапкой и подвалом, leftside, rightside, content – для блоков внутри main, logo – для логотипа, topmenu, mainmenu, leftmenu, rightmenu, bottommenu - для навигации.
В футере сайта Вставить ссылку «Создание и продвижение сайтов: Unibix», атрибут target со значением «_blank», url ссылки http://www.kaliningrad.unibix.ru Пример:
```
	

		Создание и продвижение сайтов в Калининграде - Unibix
	

	
```
В футере сайта вставить 2 изображения счетчика подходящего цвета и размера. Варианты цветов и размеров можно посмотреть здесь: http://www.liveinternet.ru/code, оптимальный Размер: 88x31.
В идеале футер должен прилипать к низу, даже если текста на странице нет или мало, как более простое решение – установить минимальную высоту центральному блоку примерно в 300-500 px, в зависимости от высоты шапки и футера.
Для скруглений использовать css border-radius (картинки в прошлом) — поможет css3pie.com, если верстаем под ie6-8
После верстки настоятельно рекомендуется проверить результат на сайте http://browsershots.org/ выбрать следующие браузеры для Windows: Chrome 11.0, Firefox 3.6, Firefox 4.0, MSIE 6.0, MSIE 7.0, MSIE 8.0, MSIE 9.0, Opera 11.1, Для Линукса: Chrome 11.0, Firefox 4.0, Opera 11.10, Для мака: Safari 5.0.
При верстке придерживаться следующих правил: минимальное использование кода HTML, стараться по-максимуму использовать CSS (тем более что верстаем под современные браузеры), ни в коем случае не используем устаревшие теги типа , и прочих, активно используем контекстные селекторы (http://htmlbook.ru/samcss/kontekstnye-selektory), то есть не нужно всем элементам задавать один и тот же класс, при верстке под современные браузеры в малоответсвенных местах можно использовать псевдоклассы :nth-child , :nth-last-child, first-child, last-shild, стили display: table-xxx и прочее.
Кодировка windows-1251, если не указана иная. с 2013 будем использовать только utf-8
Правильно используем форматы изображений PNG, GIF и JPG. В частности — PNG – используется в случаях когда требуется — прозрачность или полупрозрачность, в других случаях использовать JPG – он весит значительно меньше, хотя в некоторых случаях можно изображение разделить на части и одни части в одном формате, а другие в другом, Формат GIF – используется для изображений с малым количеством цветов (до 256). При сохранении в фотошопе используйте «Файл — сохранить для веб», в Гимпе также имеется такой плагин, но его потребуется скачивать и подключать дополнительно. При правильном подходе общий размер верстки можно уменьшить более чем в 20 раз.
По клику на логотип — переход на главную (/), хотя можно поставить пустую ссылку.
В атрибуте href указывать значение #, но при вертске нескольких типовых страниц желательно указать ссылку на другую типовую страницу. Ссылки при наведении должны изменять стиль (либо цвет, либо подчеркивание, либо еще что-то, либо все сразу). Также желательно поставить стиль для посещенных ссылок ( псевдокласс :visited). Цвет ссылок должен отличать их и говорить о том что это ссылка, в общем любой человек зашедший на сайт должен понять что перед ним ссылка а не что-то другое.
При вставке слишком широкой картинки или блока в контент верстка не должна ехать, разъезжаться или как-то изменяться, картинка должна либо выступать поверх, либо скрываться используя overflow:hidden
Когда верстка будет окончательно утверждена заказчиком название архива должно содержать "final". Например verstka_medcentr_v2.3_final.zip
Размер верстки только в исключительных случаях может превышать 1 мб (без архивации), например для крупного портала, где много типовых страниц, в ином случае макет выполнен некачественно и фотографии не оптимизированы.
Абсолютное и относительное позиционирование использовать только в тех случаях где без него не обойтись, иначе программист проклянет вас! Также нужно предусмотореть различные варианты контента. Например если в анонсах новостей будет текст разной длины, один короткий в одну строку, другой в 10 строк, в третьем картинка вертикальная, вытянутая, в третьем горизонтальная широкая. и так далее.
Нужно предусмотореть различные варианты контента. Например если в анонсах новостей будет текст разной длины, один короткий в одну строку, другой в 10 строк, в третьем картинка вертикальная, вытянутая, в третьем горизонтальная широкая. и так далее.
Отрицательные отступы использовать только там, где без них не обойтись. Часто отрицательные отступы генерируют программы для автоматической верстки , которые категорически использовать нельзя, поскольку чтобы учеть все текущие требования придется верстку выполнить заново, но уже ручками. В общем такие программы время не сокращают.
Если макет главной отличается от внутренних то css стили вреравно нужно написать в одном файле. а вот html можно разделить. Опять же #content нужно использовать и там и там, что бы не прописывать стили дважды.
Если в макете есть баннеры, а точнее места под них, то необходимо предусмотреть что на это место может встать другой баннер, других размеров, а то и вообще текст, или картинка. а если баннера нет, то место должно убираться а не пустовать, за редким исключением.
Сброс стилей CSS или CSS.Reset - стили необходимо сбрасывать. Чуть позже здесь появится приложение 3, для универсального сброса стилей, ну а пока можно ограничиться этим:
*{ font-size: 12px; margin: 0; padding: 0;}h1, h2, h3, h4, h5, h6 { font-weight: normal; padding: 0;}table, th, td { padding: 0; text-align: left; vertical-align: top; border-collapse: collapse;}ol, ul, li { padding: 0; list-style: none;}img, fieldset { border: 0;}fieldset { padding: 0;}b { font-weight: normal;}i { font-style: normal;}:focus { outline: 0;}body { background: #fff;}html, body { height: 100%; width:100%; border: none; padding: 0; background-color:white; font-family:Verdana;}
Если между открывающим и закрывающим тегом много строк (более 7) то сразу после закрывающего поставить комментарий вида
Ссылки всегда должны менять стиль при наведении, неважно где она находится (в меню или в футере), если на макете показано как она меняется то делаем так же, если нет, то мы накажем дизайнера и дважды менеджера, а вам либо добавить подчеркивание или убрать его при наведении, в зависимости какой стиль в обычном состоянии.
Всегда указывайте цвет фона для body с помощью background-image
Если закомментировать (убрать) отдельные блоки шаблона, то верстка не должна "ехать", либо остается пустое пространство, либо сместятся блоки и станут на его место (по обустоятельствам). Например в левом блоке есть: анонс новостей, отзывы, фос. если убрать анонс новостей, то остальные блоки должны подтянуться наверх, заняв место анонса.
Приветствуется использование спрайтов (благо сейчас много софта, позволяющего автоматически объединить изображения) и уменьшить (оптимизировать) их общий размер
Все что можно сделать без Javascript, делать без него. С отключенным JS шаблон сайта не должен терять основной функциональности и навигации (выпадающее меню, например).
Javascript всегда выносить в отдельный файл, тег script использовать в редких случаях
Для резиновых макетов обязательно должна быть задана минимальная и максимальная ширина.
В папке с изображениями не должно быть картинок, не использующихся в верстке . Если что-то исключили из верстки или переделали — не забывайте удалять уже ненужные картинки. То же относится к неиспользуемым стилям в CSS.
Для всех элементов, которые могут содержать текст различной длины, который должен быть вписан в одну строку (например, для кнопок или заголовков, если в дизайне не предусмотрено, что они могут занимать больше одной строки), обязательно задавайте CSS свойство white-space:nowrap.
CSS файл должен быть разбит с помощью строк с комментариями на блоки по функциональному назначению, например так:

/* ___________ 1. reset css_______________ *//* ___________ 2. skeleton (каркас)_________________ *//* ___________ 3. content_________________ *//* ___________ 4. footer _________________ *//* ___________ 5. sidebar ________________ *//* ___________ 6. news ________________ *//* ___________ 7. catalog ________________ */
Альтернативная структура файлов и папок (ее тоже можно использовать):
index.html
news.html - альтернативный шаблон
css/ - папка со стилями
js - папка с скриптами
uploads - папка с загрузками (картинки контента)
images - папка с изображениями применяемыми в css
flash - папка с swf файлами
Не забывайте прописывать cursor:pointer для кнопок, сделанных не с помощью input[type=submit]. Если вы не знаете, будет на эту кнопку повешен обработчик событий с помощью JS или это будет ссылкой, лучше в любом случае использовать тег input[type=submit] в иных случаях использовать тег

Если вы делаете обработку событий при нажатии на ссылки, следите за тем, чтобы обработчики событий возвращали false, или же используйте href='javascript:void(0)' вместо популярного href='#', чтобы страница не скроллилась вверх.
Если не оговорено обратное для частных случаев, все блоки, высоту которых ничего в дизайне не мешает сделать динамической, должны иметь именно динамическую (т. е. зависимую от содержания) высоту, а иногда, чтобы ничего не могло потенциально поломать дизайн, нужно задавать и минимальную высоту. Если хотите сделать блок фиксированной высоты — сначала спросите у заказчика.
В макетах, где высота страницы зависит от контента (а таких, как правило, большинство), предусматривайте, чтобы футер был прибит к низу браузера при отсутствии/малом количестве контента, если не оговорено обратное. Также не забывать проверять верстку при большом количестве контента.
Если макет не проходит 100%-ную html-валидацию, постарайтесь по крайней мере делать так, чтобы использование невалидного кода было оправданно. Не стоит факапить валидность верстки только потому, что «мне так нравится» или «так получается короче»
При отключенных картинках, плагинах (flash, silverlight) шаблон не должен терять своей информативности и возможностей навигации. (Если меню сделано на флеше и от этого нельзя отказаться - не забыть дублировать его текстом внутри тегов вставки флеша, Картинки со смысловой нагрузкой имеют не пустой атрибут alt="..." )
В макете должен присутствовать контейнер для обозначения контентной части сайта, желательно article#content Отформатированный текст в нем должен корректно отображаться. В основном это относится к таблицам, спискам, параграфам, картинкам с обтеканием, всем видам заголовков, ссылок (см. п 6)
Любые спец символы вписывать html-сущностью
У макета должен быть favicon.ico, как минимум из лого будущего сайта.
Желательно Расписать файл print.css, для печатающих устройств, в котором выставляется приемлемый шрифт контента, размер в pt, отключены (с помощью display:none) ненужные элементы при печати сайта (menu, sidebar, footer, ...), выставлен белый цвет фона и черный/темный цвет текста. И прочее по обстоятельствам.
Желательно Расписать файл mobile.css, для мобильных устройств, в котором убираются все красивости, выпаюащее делают обычным, ширину сайта резиновую. И прочее по обстоятельствам.
Использование «inline» стилей не допустимо
Имена html тегов и их атрибутов указываем в нижнем регистре
Тег img может использоваться только в том случае, если изображение несет смысловую нагрузку
Дело не столько в том, что пользователь должен копировать только нужные ему изображения, а в том, что тег img, использованный для вставки сепаратора/фона/украшательства не имеет смысла и лишний раз путает разработчика. Гораздо удобнее пользоваться параметром background.
Если вы делаете обработку событий при нажатии на ссылки, следите за тем, чтобы обработчики событий возвращали false, или же используйте href='javascript:void(0)' вместо популярного href='#', чтобы страница не скроллилась вверх.