Что такое верстка сайта и её виды
Чтобы создать сайт, необходимо проделать колоссальную работу. Конечно если вы хотите хороший, функциональный ресурс. Один из важнейших процессов – верстка, в ходе которой макет страницы превращается в полноценный веб-документ. Как правило, с помощью графического редактора специалист создает макет лишь после чего производится верстка, где создается код страницы HTML и CSS. Именно благодаря этому, браузер и “узнает” сайт. Пользователь уже видит его с контентом, блоками, картинками и пр. В данной статье мы как раз и расскажем, что такое верстка и зачем она вашему сайту.
Что включает в себя верстка сайта
Мы уже писали, что задача верстки – написать код, трансформирующий макет в страничку, которую может считать браузер. Программиста, который занимается данным процессом называют back-end разработчиком. Он работает с HTML – единой системой стандартов отображения элементов веб-страницы.
Например:
- <h1> </h1>. Первый тег ставится перед началом заголовка, второй – закрывает его.
- <img> – тег для изображения.
- <p> </p>. Обозначает параграф.
- <body> </body> – тег открывает и закрывает содержимое страницы.
Мы не будем углубляться в теги верстки, но суть в том, что каждый из них описывает определенный элемент страницы. К слову если нужно выделить цвет слова или его жирность, то тоже используется специальный тег.
Также верстальщик:
- разрабатывает страницу сайта в соответствии с дизайн-макетом;
- собирает шрифты для корректного отображения;
- из дизайн-макета вырезает графику (картинки, значки и т.д.) и собирает в отдельную папку;
- подключает JS-библиотеку;
- верстает страницы в HTML и CSS.
Виды верстки сайтов
Существует несколько типов верстки. Рассмотрим подробнее каждый из видов.
Блочная верстка
Современный тип верстки, который позволяет создавать качественный и функциональный сайт. Суть метода в том, все элементы располагаются в блоках (контейнерах). Блоки не зависимы, но при это регулируются. Программист может задавать их размер, цвет и пр. Ресурс на блочной верстке лучше воспринимается браузерами, при этом сами блоки гарантируют адаптивный дизайн, то есть он читается с любого устройства (планшета, смартфона). Кроме того, поисковые системы лучше распознают блочную вёрстку, что положительно влияет на ранжирование сайта.
Блоки создаются при помощи тега <div>.
Табличная верстка
Один из первых типов верстки, где верстальщик использует тег <table> (задает параметр таблицы) и <tr> и <td> (новая строка и новый столбец соответственно). Внешне сайт на такой верстке смотрится красиво, его все элементы уравнены. Однако, ресурс будет долго подгружаться – это минус. Особенно если на нем есть много картинок, видео и пр.
Слоевой метод
Данный метод верстки подразумевает под собой простое накладывание слоев. В таком случае используется всего один тег – 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 грн.
