Разработка сайтов, создание сайтов
главная / HTML / 16 золотых правил верстки

16 золотых правил верстки

Верстка всегда была делом не слишком сложным – видимо с этим связанно то, что среди верстальщиков очень много новичков. Прибавим к отсутствию опыта использование дебильных программ типа Dreamwaver`a – стоит ли удивляться что зачастую результат получается плачевным? Как правило страницы сверстанные такими мастерами получаются не кроссбраузерными, местами корявыми и их трудно в дальнейшем править из-за. В общем надо учиться, учиться и еще раз учиться! В нижеследующем материале, я изложил некоторые принципы, которыми следует руководствоваться при верстке.

1) Документ должен корректно отображаться в IE 7+, FF 3+, Opera 9+, Safari 4+, Chrome 4+. Если вы занимаетесь версткой – то просто обязаны иметь на своей машине комплект популярных браузеров.
2) Цвет фона для body должен быть в любом случае описан, даже если в качестве цвета фона используется дефолтный #FFFFFF.

3) Если в верстке применяются CSS хаки, то в комментариях дожно быть помечено, с какой целью и для какого браузера применен хак.

4) Названия классов и айди должны соответствовать по смыслу их функциональному назначению. Не рекомендуется применять кириллицу или транслит.

5) Код разметки должен быть структурно разбит на блоки, границы блоков необходимо пометить комментариями. Это сильно облегчит дальнейшую модификацию или портирование на cms.

6) Если есть возможность использовать для элементов дизайна изображения более низкого качества — используйте ее. Во многих случаях для картинок составляющих элементы дизайна вполне хватает 8-битного качества.

7) Использование javascript по возможности стоит свести к минимуму. Если объем используемого javascript достаточно велик— обязательно выносите его в отдельный файл.

8) Для резиновой верстки задавайте минимальную и максимальную ширину элементов.

9) Макет, по возможности, должен отображаться без горизонтальной прокрутки в разрешении 800 на 600.

10) Для кнопок, заголовков и прочих элементов, которые должны помещаться в одну строку (когда размещение его в две строки разрущает форматирование) задавайте свойство white-space:nowrap.

11) Список стилей должен быть структурно разбит на блоки, границы блоков необходимо пометить комментариями. Создавая файл CSS руководствуйтесь принципом сверху-вниз, т.е. переходя от элементов верха документа к элементам находящимся внизу.

12) Все подключаемые файлы должны быть в той же кодировке, что и основной документ. Предпочтительно использовать кодировку UTF-8

13) Если вы используете обработку события нажатия на ссылку — следите чтобы обработчики возвращали false или заворачивайте вызов обработчика в void – иначе страница будет прокручиваться вверх до начала документа

14) Размещение полей в теги <form> должно соответствовать их функциональному назначению

15) Блоки которые будут иметь динамическое содержание должны корректно растягиваться, не разрушая верстки. В некоторых случаях целесообразна задать минимальную высоту.

16) Верстка должна быть валидной, если только использование невалидного кода не является оправданным техническим решением.



Источник: slammweb.net
КОНТАКТЫ
г. Екатеринбург
info@vismech.ru


текущее:
Особенности HTML 5
6 принципов вёрстки
Как восстановить пароль админа на DLE?

НОВОСТИ
2011 г., «VisMech.ru»