• САЙТ под ключ от простых визиток до крупных индивидуальных проектов
  • ДИЗАЙН сайтов баннеров логотипов фирменный стиль стильный
    креативный возбуждающий
  • ВЁРСТКА сайтов любой сложности адаптивная валидная

  • Программирование

    php / mysql
    jquery / javascript
    эффективный,
    безопасный
    и быстрый код
  • Система управления сайтом

    удобная, простая и быстрая
Искусство в WEB-технологиях

Дополнительные правила вёрстки

Данная статья является продолжением статьи "Правила грамотной и качественной вёрстки сайтов", и содержит в себе более тонкие, специфические правила, которые не относятся к числу основных.
Вот некоторые дополнительные правила, которые следует соблюдать верстальщику:


  1. Минимальный набор тэгов и ключевых слов, используемых при вёрстке:
    • DOCTYPE,
    • html,
    • head,
    • title — важен не только для поисковых систем и SEO. Его необходимо всегда прописывается со смыслом. Пользователи будут видеть этот тег в заголовке окна, при выборе окна на таскбаре и при навигации в браузере,
    • meta,
    • charset — кодировка всех текстовых файлов верстки должна совпадать и быть UTF-8,
    • description — прописывать необходимо, так, как содержание этого метатега попадает в результаты поиска под тегом title и на основании этой информации пользователь поисковой системы принимает решение о переходе именно на Вашу страницу,
    • keywords — прописываются по желанию, т.к. поисковые системы давно не воспринимают его. Но, если он заполнен, то должен использовать только те слова, которые присутствуют в теле страницы,
    • body
  2. Папка с изображениями для интерфейса сайта обычно имеет название i или img
  3. Папка с файлами таблиц стилей для сайта имеет название css(реже style)
  4. Папка с javascript/jquery-скриптами для сайта должна иметь название js
  5. Папка с flash-вставками для сайта должна иметь название flash
  6. Папка с графикой заказчика (каталог фотографий, схемы проезда, иллюстрации к статьям и новостям и т.д.) имеет название images
  7. Название папок и страниц сайта принято переводить на английский язык или писать транслитерацией. При этом URL страницы должен выглядеть кратко и аккуратно(для этого нужно сокращать название либо использовать аббревиатуры), тогда на любую страницу сайта можно будет сослаться в тематических журналах и без проблем продиктовать по телефону.
  8. Каждый раздел сайта первого уровня рекомендуется располагать в отдельной папке
  9. Для удобства восприятия информации, рекомендуется использовать подчёркивание только к гиперссылкам(возможно этот совет больше относится к дизайнерам).
  10. В отличии от основного текста страницы сайта — в меню ссылки могут быть не подчеркнутыми(снова касается дизайнеров).
  11. После открывающейся и перед закрывающейся скобкой не должно быть пробелов.
  12. Все ссылки на внутренние (собственные) страницы сайта должны открываться в той же вкладке(окне) браузера, кроме особых случаев, явно указанных в техническом задании. Если на сайте содержится ссылка на другой сайт, она должна открываться в новом окне.
  13. Желательно использование глобальных CSS-ресетов (CSS resets) - набор стилей распространяющийся на все основные HTML-теги. Цель ресетов в том, что бы сбросить стандартные для браузера CSS-стили всех основных тегов, которые для каждого браузера - свои.
  14. Для задания отступов между элементами используют css-атрибуты padding, margin, а не пустые td(как это делалось раньше), br или пробелы.
  15. В CSS все буквы должны быть строчными, за исключением заглавных букв в названиях шрифтов.
  16. В CSS сначала определяются стандартные элементы
    p, a, h1, h2
    а уже после - элементы классов, и вложенные элементы.
  17. При использовании CSS, атрибуты в теле html-документа типа font-size и bgcolor недопускаются.
  18. Несемантичную верстку таблицами допускается использовать только в случаях сильного упрощения таким образом верстки блоками. Каждое использование должно быть оправдано.
  19. Стили для Internet Explorer разных версий должны подключаться отдельно через conditional comments - условные комментарии вида:
    <!--[if IE 7]>

    <link href="css/ie7.css" type="text/css" rel="stylesheet">
    <![endif]-->
    .