Приспичило меня написать тему о верстке макета дизайна на языке HTML для новичков.

Известно, что создание сайта — задача далеко не тривиальная. Если условно разбить процесс разработки на несколько этапов, то вторым будет вёрстка psd-макета (первый — создание самого psd-макета, т.е. разработка дизайна сайта).

По сути, вёрстка макета дизайна — это написание такого HTML-кода, который позволял бы просматривать веб-страницу в окне браузера в том виде, в котором он представлен в psd-макете. И чем сложнее дизайн, представленный в макете, тем сложнее будет его сверстать.

Виды верстки макета дизайна

Всего разделяют 3 вида вёрстки макетов:

• блочная;
• табличная;
• смешанная;

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

Блочная вёрстка обладает рядом преимуществ перед табличной. Во-первых, она полностью соответствует современным веб-стандартам. Во-вторых, требует значительно меньшего количество кода, чем табличная вёрстка. В-третьих, как следствие из второго вытекает, что при меньшем количестве кода такая вёрстка меньше весит, а значит и быстрее загружается браузером. Однако, при всех своих достоинствах, не обошлось и без минусов — блочная вёрстка по разному отображается в различных браузерах (из-за особенностей самих браузеров). Может дойти вплоть до того, что элементы страницы начнут «разъезжаться» и вёрстка «поплывёт».

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

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

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

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