Верстка сайта

Верстка сайта

Проектирование — рабочий стол

Здравствуйте, уважаемые читатели!

Создание интернет-ресурса состоит из множества последовательных этапов, одним из которых является верстка сайта. Данный процесс представляет собой написание кода, определяющего расположение визуальных элементов сайта при отображении его в интернет-браузере. Иными словами - это своеобразная адаптация дизайна (картинки) сайта для его правильной работы в качестве веб-ресурса, обеспечивающей ваш заработок.

От правильности верстки зависит множество параметров: скорость загрузки, корректность отображения и взаимного расположения основных элементов, удобство использования сайта посетителем и т. д.. При этом, верстка должна учитывать особенности отображения сайта в различных браузерах, а также на различных стационарных и мобильных устройствах (ПК, планшеты, смартфоны и т. д.).

Основные инструменты верстки

Для построения кода страницы используются понятные браузерам языки HTML (текстовая информация) и CSS (каскадные таблицы). Помимо этого, применяются различные графические программы (растровые и векторные редакторы), с помощью которых производится разделение графического макета сайта на отдельные элементы.

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

Иногда для упрощения верстки используются программы автоматического преобразования макета в HTML-код. Они получили название «WYSIWYG» (аббревиатура от англоязычного выражения — что видишь, то и получишь). Впрочем, применение данных средств на практике не всегда оправдывает ожидания веб-мастера и чаще всего требует доработки. Для применения данных программ традиционно используются макеты, созданные в растровых графических редакторах (например, «Adobe Photoshop»).

Методы и этапы вёрстки

Процесс верстки сайта можно фактически разделить на два основных этапа:

  1. Логическая разметка — подразумевает написание HTML-кода, включающего все элементы макета сайта.
  2. Презентационная разметка — оформление HTML-кода и структурирование элементов сайта таким образом, чтобы можно было сразу понимать назначение и место расположения последних при отображении.

Разметка сайта

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

  1. Табличная верстка
  2. Верстка слоями
  3. Блочная верстка

Первый метод (табличная верстка) изначально использовался повсеместно. Заключается он в разделении полотна страницы на отдельные участки с помощью набора таблиц (тег <table> ). Каждая таблица при этом может иметь рамки и находиться внутри общей модульной сетки. Внутри таблицы можно задавать фон, располагать текстовые и визуальные элементы, а также выполнять различные действия (например, выравнивание). Данный способ для создания сайтов сегодня применяется редко, однако, он является достаточно простым и быстрым.


Верстка слоями позволяет располагать элементы сайта относительно друг друга особенно точно. Также при использовании различных скриптов, можно легко менять параметры каждого слоя. Слои могут быть наложены один поверх другого или на другие элементы сайта. Позиционирование слоев в данном способе верстки задает CSS-свойство «z-index» , при этом, чем он больше, тем выше располагается слой относительно остальных элементов и слоев.

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


Наиболее популярной и перспективной сегодня является блочная верстка сайта, которая активно использует два основных инструмента тег <div> и таблицы стилей CSS. Данный метод довольно сложен, однако, раскрывает большие возможности для верстки, позволяя создавать как простые блоги, так и серьезные социальные порталы.

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

Тег <div> определяет различные блоки HTML-кода, разделяя последний довольно гармонично и четко, выделяя все элементы из общей структуры. При блочной верстке код получается более логически понятным, а главное — компактным и аккуратным. В данном методе блоками являются не только элементы дизайна сайта, но и компоненты семантической разметки (заголовки, параграфы, списки), а также различные графические изображения.

Стоит также сказать, что при блочной верстке индексирование сайта поисковыми роботами происходит более активно, нежели при табличной верстке.

Довольно большое значение при верстке, а также для последующего отображения сайта, имеет и тип макета веб-ресурса. Он может быть фиксированным с точно заданными размерами и отведенным местом для интернет-рекламы и «резиновым», изменяющим свои размеры, в зависимости от габаритов браузера.

Правильность верстки сайта определяет такой показатель, как валидность HTML-верстки. Она подразумевает уровень соответствия верстки установленным стандартам организации «W3C» (Консорциум Всемирной паутины). Для того чтобы проверить валидность сайта, можно воспользоваться специальным сервисом W3C или другими аналогичными программами.

Дискуссия по теме