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

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

Верстальщик должен:

• понимать html5 и css3;
• использовать редактор кода;
• понимать отзывчивый веб-дизайн (rwd);
• использовать систему сетки;
• применять принципы типографики;
• тестировать свой код в различных браузерах.

Основными этапами верстки являются:

• wireframing, то есть создание каркаса для вашего сайта, который описывает его структуру;
• разработка внешнего вида и функциональности сайта;
• перевод макета сайта в html и css;
• тестирование сайта в различных браузерах;
• запуск сайта.

Существует множество инструментов для верстки сайтов, таких как dreamweaver, sublime text, atom, notepad++, brackets и др. Эти редакторы кода могут помочь сделать верстку быстрее и проще, предоставляя такие функции, как подсветка синтаксиса и автозаполнение. Кроме того, существует множество онлайн-ресурсов, которые могут помочь в изучении html5 и css3, например, codecademy, w3schools, lynda.com и др.

Когда дело доходит до тестирования верстки вашего сайта, важно провести тестирование в различных браузерах (chrome, firefox, safari, internet explorer) и устройствах (настольный компьютер, ноутбук).