Верстка сайта - шпаргалка для начинающих

Верстка сайта представляет собой описание программным кодом визуальной части веб-сайта. Независимо от того, какой браузер использует пользователь, сайт должен выглядеть и работать корректно при любом разрешении монитора.

Процесс верстки — один из самых важных этапов создания интернет-ресурса, поскольку от работы верстальщика зависит:

  • Скорость загрузки веб-сайта;
  • Соответствие стандартам HTML;
  • Адекватность отображения в браузере;
  • Соответствие требованиям поисковых систем;
  • Адаптивность под различные экраны пользователя.

Что такое валидная верстка?

Понятие верстки тесно переплетается с понятием валидности. Валидная верстка веб-сайта — написание HTML и CSS кода, который соответствует стандартам W3C и успешно проходит тест на валидаторе.

Во-первых, данное понятие имеет огромное значение для SEO оптимизации сайта, поскольку грамотно построенный код положительно влияет на поведение поисковых роботов, а во-вторых валидный код — гарантия того, что верстальщик не допустил логических и синтаксических ошибок при программировании.

Страница даже с незначительными ошибками в коде не пройдёт через валидатор. Следует помнить, что лучший валидатор — браузер, поскольку восприятие сайта браузером — это восприятие сайта посетителем.

Базовые правила верстки сайта

Каковы основные правила качественной и грамотной верстки?

  1. Вёрстка обязательно должна быть кроссбраузерной для Firefox, Opera, Safari, Google Chrome и Internet Explorer, который в последнее время теряет актуальность. Сайт должен быть протестирован на разных разрешениях монитора, начиная от 1024 на 768;
  2. Вёрстка абсолютно всех страниц сайта должна пройти валидацию. Использование различных CMS, модулей и готовых скриптов, вставка на интернет-ресурс содержимого разных форматов зачастую затрудняют достижение валидности;
  3. Внешний вид свёрстанной страницы должен по максимуму соответствовать дизайну: размеры шрифтов, расстояния между строками, отступы должны соответствовать параметрам psd макета. Достичь пиксельной точности зачастую затруднительно, поэтому допускается отклонение отдельных элементов в пределах 3-6 пикселей;
  4. CSS стили должны быть вынесены в отдельный документ. В HTML коде допустимо только присутствие идентификаторов и классов;
  5. Логотип веб-сайта должен являться ссылкой на главную страницу;
  6. HTML страницы должны содержать комментарии к основным элементам, таким, как меню, заголовок, шапка, контент, футер и т.п.
  7. Имена идентификаторов и классов должны соответствовать назначению и быть понятными интуитивно (menu, footer, header и т.д.);
  8. В таблицах стилей настоятельно рекомендуется использовать одинаковые единицы измерения для всех величин;
  9. Надписи на кнопках должны быть написаны на одном языке и либо прописными буквами, либо начинаться с заглавной;
  10. Кнопки должны иметь стандартное оформление и быть либо графическими элементами, либо быть настроенными с помощью таблиц стилей;
  11. HTML и CSS код должен быть минимизирован. Следует избегать лишних классов и идентификаторов и использовать свойства наследования;
  12. Заголовки должны быть написаны исключительно с помощью специальных тегов h1, h2 и т.д;
  13. Атрибуты всех тегов должны быть заключены в кавычки.

Основные подходы к верстке сайта

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

  • Фиксированная верстка. При изменении размера окна браузера блоки не поменяют свою ширину, а на мониторах с низким разрешением экрана появится полоса прокрутки;
  • Резиновая верстка. В зависимости от размера окна браузера, блоки изменят свою ширину;
  • Адаптивная верстка. Воплощается в жизнь благодаря различным скриптам и заточена под определённые разрешения (320, 768, 1024 и т.д.). Изменение размера происходит рывками после того, как определённый уровень достигнут;
  • Отзывчивая верстка. Представляет собой слияние адаптивной и резиновой верстки. Является самой сложной с технической точки зрения, но в то же время самой эффективной;
  • Версия сайта для мобильных устройств. Фактически является созданием другого сайта с другим дизайном, версткой и URL адресом.

Кроме подходов, существуют ещё и различные типы вёрстки.

Табличная верстка

Суть такой вёрстки заключается в применении сетки таблиц с невидимой границей, в которых удобно размещать разнообразные элементы.

Совсем недавно до появления блоков и слоёв это был самый популярный тип вёрстки, имеющий множество преимуществ:

  • Лёгкость в создании колонок, что положительно влияет на поведение при изменении размера окна браузера и позволяет создавать многоколоночные макеты сайта;
  • Склейка изображений. Зачастую рисунки делят на несколько отдельных фрагментов для уменьшения объёма файлов, создания эффекта анимации и т.д. Каждый рисунок помещается в отдельную ячейку таблицы, параметры которой задаются таким образом, чтобы стыков между ячейками видно не было;
  • Поскольку высоту и ширину таблицы можно задавать в процентах, табличная верстка широко применяется при создании резинового макета;
  • В отличие от некоторых CSS параметров, таблицы в разных браузерах отображаются практически идентично, что упрощает создание страниц;
  • Из-за одновременного выравнивания содержимого ячеек таблицы и по вертикали, и по горизонтали, возможности по размещению различных элементов дизайна относительно друг друга и на странице в целом расширяются.

Однако имеет место быть и небольшая ложка дёгтя:

  • Для того чтобы содержимое таблицы корректно отображалось браузером, она не будет показываться до тех пор, пока не будет загружена полностью. Если таблица массивная, загрузка сайта займёт довольно много времени;
  • Слишком громоздкий код из-за иерархической структуры тегов, что повышает сложность внесения изменений в отдельные параметры;
  • Плохая индексация поисковыми роботами. Контент сайта с табличной вёрсткой находится относительно далеко друг от друга, что затрудняет попадание сайта в топ поисковой выдачи.
Контент с табличной вёрсткой

Блочная верстка сайта

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

Блочная верстка сайта имеет следующие преимущества:

  • Блочная верстка образует гораздо меньший объём кода, в отличие от верстки таблицами, что не только увеличивает скорость загрузки страницы, но и уменьшает нагрузку на сервер;
  • Удобство изменения дизайна путём правки файла стилей;
  • Преимущества в сфере SEO. Вместо кода в первую очередь распознаётся контент и семантически правильно размечается.
  • Повышенная читабельность кода, что способствует соответствию стандартам валидности;
  • Задачи по нестандартному оформлению и расположению элементов веб-сайта могут быть с лёгкостью реализованы;
  • Возможность создать адаптивный дизайн, который будет корректно отображаться как на стационарных, так и на мобильных устройствах.

Несмотря на громадный ряд преимуществ, блочная CSS верстка имеет также и недостатки:

  • Повышенная сложность освоения. Табличную верстку освоить может и новичок, однако таблицы стилей предлагают настолько много различных возможностей, что понадобится немало времени для их изучения;
  • Кроссбраузерность. Решение данной проблемы требует больших усилий, чем в случае с табличной версткой.
блочная CSS верстка

Верстка слоями: преимущества, недостатки, сфера применения

Слои – это такие элементы HTML кода, которые внедряются в страницу сайта наложением друг на друга с пиксельной точностью. Изменение параметров слоёв происходят с помощью JavaScript и VBScript, что позволяет использовать различные эффекты.

Достоинствами вёрстки слоями являются:

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

К недостаткам вёрстки слоями можно отнести:

  • Необходимость наличия довольно глубоких познаний языков и технологий веб-программирования (VBScript, CSS, JavaScript);
  • Отображение сайта в различных браузерах может также быть различным;
  • С технической точки зрения верстка слоями похожа на позиционирование, однако во избежание проблем с браузерами, тег следует заменять на <div>.

Вёрстка слоями предоставляет дизайнерам возможность ничем не ограничивать свою фантазию, однако имеет некоторые технические сложности.

Страницы со слоями не имеют единого стандарта отображения браузерами, поэтому одна и та же страница в браузерах Opera и Google Chrome может выглядеть по-разному.

Страницы со слоями

Таким образом, единые общепринятые правила верстки не существуют, и в каждом конкретном случае следует действовать по ситуации.

Однако, табличный метод верстки, несмотря на указанные недостатки, практикуется повсеместно и зарекомендовал себя как максимально надёжный.

13 марта 2014 в 13:00
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок