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

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

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

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

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

Типы макета

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



Category Рубрики: Информаторий | Tag Метки: | Comments Комментариев нет »

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