Верстка сайта представляет собой описание программным кодом визуальной части веб-сайта. Независимо от того, какой браузер использует пользователь, сайт должен выглядеть и работать корректно при любом разрешении монитора.
Процесс верстки
- один из самых важных этапов создания интернет-ресурса, поскольку от работы верстальщика зависит:
Понятие верстки тесно переплетается с понятием валидности. Валидная верстка веб-сайта
- написание HTML и CSS кода, который соответствует стандартам W3C
и успешно проходит тест на валидаторе.
Во-первых, данное понятие имеет огромное значение для SEO оптимизации сайта, поскольку грамотно построенный код положительно влияет на поведение поисковых роботов, а во-вторых валидный код - гарантия того, что верстальщик не допустил логических и синтаксических ошибок при программировании.
Страница даже с незначительными ошибками в коде не пройдёт через валидатор. Следует помнить, что лучший валидатор
- браузер, поскольку восприятие сайта браузером - это восприятие сайта посетителем.
Базовые правила верстки сайта
Каковы основные правила качественной и грамотной верстки?
Вёрстка обязательно должна быть кроссбраузерной для Firefox
, Opera
, Safari
, Google Chrome
и Internet Explorer
, который в последнее время теряет актуальность. Сайт должен быть протестирован на разных разрешениях монитора, начиная от 1024 на 768;
Вёрстка абсолютно всех страниц сайта должна пройти валидацию. Использование различных CMS, модулей и готовых скриптов, вставка на интернет-ресурс содержимого разных форматов зачастую затрудняют достижение валидности;
Внешний вид свёрстанной страницы должен по максимуму соответствовать дизайну: размеры шрифтов, расстояния между строками, отступы должны соответствовать параметрам psd
макета. Достичь пиксельной точности зачастую затруднительно, поэтому допускается отклонение отдельных элементов в пределах 3-6 пикселей;
CSS стили должны быть вынесены в отдельный документ. В HTML коде допустимо только присутствие идентификаторов и классов;
Логотип веб-сайта должен являться ссылкой на главную страницу;
HTML страницы должны содержать комментарии к основным элементам, таким, как меню, заголовок, шапка, контент, футер и т.п.
Имена идентификаторов и классов должны соответствовать назначению и быть понятными интуитивно (menu
, footer
, header
и т.д.);
В таблицах стилей настоятельно рекомендуется использовать одинаковые единицы измерения для всех величин;
Надписи на кнопках должны быть написаны на одном языке и либо прописными буквами, либо начинаться с заглавной;
Кнопки должны иметь стандартное оформление и быть либо графическими элементами, либо быть настроенными с помощью таблиц стилей;
HTML и CSS код должен быть минимизирован. Следует избегать лишних классов и идентификаторов и использовать свойства наследования;
Заголовки должны быть написаны исключительно с помощью специальных тегов h1, h2 и т.д;
Атрибуты всех тегов должны быть заключены в кавычки.
Основные подходы к верстке сайта
Предположим, что существуют два блока, стоящих рядом. Существует несколько основных подходов к вёрстке сайта:
Фиксированная верстка
. При изменении размера окна браузера блоки не поменяют свою ширину, а на мониторах с низким разрешением экрана появится полоса прокрутки;
Резиновая верстка
. В зависимости от размера окна браузера, блоки изменят свою ширину;
Адаптивная верстка
. Воплощается в жизнь благодаря различным скриптам и заточена под определённые разрешения (320, 768, 1024 и т.д.). Изменение размера происходит рывками после того, как определённый уровень достигнут;
Отзывчивая верстка
. Представляет собой слияние адаптивной и резиновой верстки. Является самой сложной с технической точки зрения, но в то же время самой эффективной;
Версия сайта для мобильных устройств
. Фактически является созданием другого сайта с другим дизайном, версткой и URL адресом.
Кроме подходов, существуют ещё и различные типы вёрстки.
Табличная верстка
Суть такой вёрстки заключается в применении сетки таблиц с невидимой границей, в которых удобно размещать разнообразные элементы.
Совсем недавно до появления блоков и слоёв это был самый популярный тип вёрстки, имеющий множество преимуществ:
Лёгкость в создании колонок, что положительно влияет на поведение при изменении размера окна браузера и позволяет создавать многоколоночные макеты сайта;
Склейка изображений. Зачастую рисунки делят на несколько отдельных фрагментов для уменьшения объёма файлов, создания эффекта анимации и т.д. Каждый рисунок помещается в отдельную ячейку таблицы, параметры которой задаются таким образом, чтобы стыков между ячейками видно не было;
Поскольку высоту и ширину таблицы можно задавать в процентах, табличная верстка широко применяется при создании резинового макета;
В отличие от некоторых CSS параметров, таблицы в разных браузерах отображаются практически идентично, что упрощает создание страниц;
Из-за одновременного выравнивания содержимого ячеек таблицы и по вертикали, и по горизонтали, возможности по размещению различных элементов дизайна относительно друг друга и на странице в целом расширяются.
Однако имеет место быть и небольшая ложка дёгтя:
Для того чтобы содержимое таблицы корректно отображалось браузером, она не будет показываться до тех пор, пока не будет загружена полностью. Если таблица массивная, загрузка сайта займёт довольно много времени;
Слишком громоздкий код из-за иерархической структуры тегов, что повышает сложность внесения изменений в отдельные параметры;
Плохая индексация поисковыми роботами. Контент сайта с табличной вёрсткой находится относительно далеко друг от друга, что затрудняет попадание сайта в топ поисковой выдачи.
Блочная верстка сайта
Слои, которые создаются с помощью тега div, представляют собой крайне удобные структурные элементы, оформление которых задаётся с помощью таблиц стилей CSS.
Блочная верстка сайта имеет следующие преимущества:
Блочная верстка образует гораздо меньший объём кода, в отличие от верстки таблицами, что не только увеличивает скорость загрузки страницы, но и уменьшает нагрузку на сервер;
Удобство изменения дизайна путём правки файла стилей;
Преимущества в сфере SEO. Вместо кода в первую очередь распознаётся контент и семантически правильно размечается.
Повышенная читабельность кода, что способствует соответствию стандартам валидности;
Задачи по нестандартному оформлению и расположению элементов веб-сайта могут быть с лёгкостью реализованы;
Возможность создать адаптивный дизайн, который будет корректно отображаться как на стационарных, так и на мобильных устройствах.
Несмотря на громадный ряд преимуществ, блочная CSS верстка имеет также и недостатки:
Повышенная сложность освоения
. Табличную верстку освоить может и новичок, однако таблицы стилей предлагают настолько много различных возможностей, что понадобится немало времени для их изучения;
Кроссбраузерность
. Решение данной проблемы требует больших усилий, чем в случае с табличной версткой.
Верстка слоями: преимущества, недостатки, сфера применения
Слои
– это такие элементы HTML кода, которые внедряются в страницу сайта наложением друг на друга с пиксельной точностью. Изменение параметров слоёв происходят с помощью JavaScript
и VBScript
, что позволяет использовать различные эффекты.
Достоинствами вёрстки слоями являются:
Высокая скорость обработки страниц браузерами;
С помощью позиционирования различных слоёв относительно друг друга можно создавать живые и интересные анимационные эффекты;
Свойства слоёв настраиваются с помощью CSS;
Благодаря поддержке системы декартовых координат, местоположение слоёв на странице сайта можно указать с предельно возможной точностью.
К недостаткам вёрстки слоями можно отнести:
Необходимость наличия довольно глубоких познаний языков и технологий веб-программирования (VBScript
, CSS
, JavaScript
);
Отображение сайта в различных браузерах может также быть различным;
С технической точки зрения верстка слоями похожа на позиционирование, однако во избежание проблем с браузерами, тег следует заменять на
.
Вёрстка слоями предоставляет дизайнерам возможность ничем не ограничивать свою фантазию, однако имеет некоторые технические сложности.
Плохо
Вёрстка страницы
представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги — прямоугольные блоки-контейнеры для содержимого — не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое — текст или медиа-файлы.
Как создать структуру страницы с помощью блоков (блочная вёрстка)
1. Как разбить макет страницы на секции
Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье .
Рис. 1. Основные секции страницы