Общие принципы верстки макета сайта

Любая верстка – это грамотное расположение различных элементов на выделенном под них пространстве – и общие принципы будет одинаковы независимо от того, верстаете ли вы фасадные вывески или разрабатываете сайт. Но между версткой печатного листа и интернет-страницы есть принципиальная разница: печатный лист имеет фиксированный размер, а размер страницы сайта динамичен. Он зависит от нескольких параметров: размера монитора пользователя, браузера и проч.

Учитывая обилие факторов, создать страницу, которая будет отображаться у всех пользователей одинаково – нереально. Поэтому задача верстки сводится к тому, чтобы создать документ, отображаемый у разных пользователей с незначительными различиями. Для решения этой задачи применяется несколько методов.

Методы верстки

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

Типы макета

Фиксированный макет. Заранее понятно, как будет выглядеть сайт, можно предусмотреть все нюансы расположения элементов и строк, но сайт сделан под один конкретный вариант разрешения монитора, может появиться горизонтальная полоса прокрутки.
Резиновый. Будет одинаково отображаться в любом разрешении, заполняя все пространство браузера, но на стадии разработки абсолютно непонятно, как отреагирует вся система на какое-либо изменение.
Адаптивный. Будет удобно и правильно отображаться на любом мониторе, но крайне трудоемок в разработке макетов под каждое разрешение.
От этого и зависит правильность отображения страницы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *