Вёрстка сайта

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

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

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

Само понятие верстки переплетается с понятием валидности. Что такое валидность? Валидная верстка это такое написание HTML и CSS кода, которое соответствует общепринятым стандартам W3C и проходит тест на валидаторе. В чём важность этой валидности?

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

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

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

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

1. Внешний вид итоговой страницы должен соответствовать принятому дизайну: шрифты, цвета, размеры всех элементов – всё это должно быть максимально приближенным к визуальному результату дизайна;
2. Все страницы должны пройти валидацию.
3. Все стили выносим в отдельный документ. В коде страницы допустимо только присутствие идентификаторов и классов;
4. Вёрстка должна быть кроссбраузерной для основных браузеров текущей версии и версий на 2-3 года в прошлое. Важно и корректное отображение на устройствах с различным разрешением экрана.
5. Логотип делается ссылкой на главную страницу;
6. В стилях обязательно использовать одинаковые единицы измерения для всех величин;
7. Надписи на кнопках должны быть на одном языке и идентично написанными (либо прописными буквами, либо начинаться с заглавной)
8. В коде пишем комментарии к таким элементам, как заголовок, шапка, меню, контент, футер и т.п.
9. Заголовки обязательно прописать с помощью специальных тегов, таких как h1, h2 и т.п.
10. Кнопки должны иметь стандартное оформление и быть либо графическими элементами, либо быть настроенными с помощью таблиц стилей;

На что стоит обращать внимание в работе. Рассмотрим несколько примеров.

К примеру, у нас есть два блока, стоящих рядом. Как можно поступить в этом случае:

• Фиксированная верстка по ширине. Меняем размер окна браузера - блоки не меняют свою ширину, при этом на мониторах с низким разрешением экрана появится нижняя полоса прокрутки.
• Резиновая верстка. Меняем окно браузера – меняется ширина элементов, чтобы они влезли в ширину экрана.
• Адаптивная верстка. Изменяет не только размеры, но и расположение элементов, в зависимости от разрешения экрана, стандартные размеры ширины 320, 768, 1024 пикселей. Изменение размера происходит ступенчато при смене ширины экрана в пикселях.
• Отзывчивая верстка. Самая сложная и эффективная – слияние резиновой и адаптивной верстки.
• Отдельная верстка сайта для мобильных устройств. Отдельная верстка для сайта, который размещается на отдельном адресе в web.

Есть и различные подходы к верстке.

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

Несложный вариант, при котором все элементы сайта помещаются в таблицу с невидимыми границами. До появления блочной и послойной вёрстки это был самый популярный вид вёрстки, у него много плюсов:

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

Но есть и минусы:

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

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

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

Преимущества блочной вёрстки:

• Меньше объём кода
• Удобство изменения путём правки стилей;
• SEO: сначала распознаётся контент.
• Широкие возможности нестандартного оформления.
• Возможность создавать адаптивный дизайн

Но есть и минусы:

• Сложность освоения
• Решать проблему кроссбраузерности требуют больших усилий, чем в случае с табличной версткой.

Вёрстка слоями

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

Плюсы такой верстки:

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

Недостатки:

• Нужны глубокие познания языков и технологий веб-программирования
• Отображение сайта в различных браузерах может отличаться.

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

Вывод: каких-то чётких правила верстки не существует, действуют по ситуации.