Веб студия » Блог » Что такое верстка сайта и её виды

Дата публицакии: 18 марта 2021

Что такое верстка сайта и её виды

8 хв

Структура:

Чтобы создать сайт, необходимо проделать колоссальную работу. Конечно если вы хотите хороший, функциональный ресурс. Один из важнейших процессов – верстка, в ходе которой макет страницы превращается в полноценный веб-документ. Как правило, с помощью графического редактора специалист создает макет лишь после чего производится верстка, где создается код страницы HTML и CSS. Именно благодаря этому, браузер и “узнает” сайт. Пользователь уже видит его с контентом, блоками, картинками и пр. В данной статье мы как раз и расскажем, что такое верстка и зачем она вашему сайту.

Что включает в себя верстка сайта

Мы уже писали, что задача верстки – написать код, трансформирующий макет в страничку, которую может считать браузер. Программиста, который занимается данным процессом называют back-end разработчиком. Он работает с HTML – единой системой стандартов отображения элементов веб-страницы.

Например:

. Первый тег ставится перед началом заголовка, второй – закрывает его.
– тег для изображения.
. Обозначает параграф.
– тег открывает и закрывает содержимое страницы.

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

Также верстальщик:

разрабатывает страницу сайта в соответствии с дизайн-макетом;
собирает шрифты для корректного отображения;
из дизайн-макета вырезает графику (картинки, значки и т.д.) и собирает в отдельную папку;
подключает JS-библиотеку;
верстает страницы в HTML и CSS.

Виды верстки сайтов

Существует несколько типов верстки. Рассмотрим подробнее каждый из видов.

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

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

Блоки создаются при помощи тега

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

Один из первых типов верстки, где верстальщик использует тег

(задает параметр таблицы) и и

(новая строка и новый столбец соответственно). Внешне сайт на такой верстке смотрится красиво, его все элементы уравнены. Однако, ресурс будет долго подгружаться – это минус. Особенно если на нем есть много картинок, видео и пр.

Слоевой метод

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

Семантическая вёрстка

Основная задача такой верстки – уменьшить количество тегов, при этом создать читабельный код. Благодаря этому страница будет быстрее грузиться и ранжироваться в поисковой системе. Используя такую верстку стоит помнить лишь про одно правило – использовать теги, которые будут более точно передавать тип контакта.

Можно разделить самые важные элементы сайта на такие группы:

текстовые теги;
медиа теги;
теги структуры документа;
корреляционные теги.

Валидная вёрстка

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

💡 Планируете внедрить это в своем бизнесе?

Обращайтесь к нам за услугами:

💼 Разработка сайта под ключ 🛠️ Техническая поддержка вашего сайта 🛒 Создание интернет-магазина 🤖 Индивидуальная веб-разработка

Какой программой верстается сайт?

Специалисты по верстке в своей работе могут использовать несколько типов программ:

Различные программы для работы с изображениями. Это может быть

Фотошоп, Gimp или Krita. Они необходимы для того, чтобы взять элементы из макета и работать с визуальным контентом.

Различные редакторы кода. Чаще всего используют:Notepad++, Adobe DreamViewer, CSS3 Generator, UltraEdit, SublimeText, C и другие.
Программы для тестирования. А именно: CrossBrowserTesting, Markup Validator, IETester, Validator.w3, Dr Watson, CSS Validator.

Какой должна быть верстка

Безусловно верстка – это не бездумный набор букв. Здесь есть свои правила и законы. Если вы будете писать сочинение из тегов, то ваш сайт будет работать, как минимум не корректно.

Критерии правильной верстки:

Она должна быть кроссбраузерной. То есть сайт должен нормально отображаться в разных браузерах (Хром, Опера и т.д.)
В коде не должно быть никаких ошибок. Все теги закрыты, код имеет четкую структуру.
Самым лучшим вариантом считается блочная верстка. Но важно, чтобы она была адаптивная под все устройства.
Содержимое НТМL и CSS должно быть прописано только строчными буквами.
Все заголовки, абзацы, цитаты правильно структурированы, их стили нужно продумать заранее.
Сохранен изначальный макет.

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

Какие сложности есть в верстке сайтов

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

Можно выделить несколько проблем с которым сталкивается back-end разработчик:

Не всегда то, что рисует дизайнер можно реализовать технически.
Нет единого стандарта. К сожалению каждый браузер по-разному отображает одни и те же элементы. Верстальщику необходимо потратить время на постоянную проверку одного и того же элемента на разных платформах.
Если макет содержит нестандартные шрифты, то это тоже может вызвать небольшие сложности.
Делая адаптивный сайт, стоит учесть особенность каждого устройства, так как не вся анимация будет отображаться корректно.

Проверка верстки

После завершения верстки необходимо протестировать ее. Базовая проверка включает в себя прогон сценария в нескольких браузерах и устройствах. А для того, чтобы быть уверенным в корректности проделанной работы проверьте:

Соответствует ли верстка заданному макету. Можете использовать инструмент Pixel Perfect.
Проверка кроссбраузерности. Это проделывается вручную.
Корректность работы на экранах с разным расширением. Если у вас будут проблемы с фоновым изображением, такая проверка позволит это определить.
Проверка адаптивности на разных устройствах. Для этого достаточно использовать getbootstrap.com.
Проверка JavaScript. Для этого достаточно просто открыть браузер и посмотреть код страницы, если будут ошибки, они будут выделены красным цветом.
Проверить валидацию кода и скорость загрузки страницы.
Проверить корректно ли отображаются шрифты на Windows, Linux и Mас.

Сколько стоит верстка сайта

Логично, что стоимость верстки зависит от сложности самой задачи. Также на цену влияет и то, к кому вы обратитесь: к фрилансеру или в агентство. В среднем цена часа работы верстальщика – от 100 до 600 грн (профессионал).

Примерные цены на верстку сайта:

Верстка лендинга — от 4000 грн;
Верстка интернет-магазина — 11 500 грн;
Верстка сайта по макету PSD — от 2000 грн;
Верстка интернет-магазина — от 4000 грн;
Верстка одной страницы сайта — от 400 грн;
Верстка одного блока на странице — от 200 грн.

5/5 - (1 голос)

Колесников Дмитрий

Технический директор, студии BRAINLAB

Автор статьи - технический директор и сооснователь Brainlab Studio Дмитрий Колесников. Он занимается веб-разработкой с 2011 года и за это время реализовал более 400 проектов в сфере e-commerce и B2B, сочетая глубокие технические знания со стратегическим планированием. Дмитрий активно поддерживает молодых разработчиков в начале их карьеры, а его статьи наполнены практическими советами и полезными инсайтами из реального опыта.