Типы верстки макетов веб-страниц и разница между ними
Разработка сайта начинается с вопроса: как будет выглядеть сайт на мониторах разного расширения, и соответственно – какие существуют типы верстки сайта и какую выбрать. Ответ на первый вопрос можно предоставить сразу. Типы верстки сайта можно разделить таким образом:
В чем сложность данного вопроса? Мы поможем Вам детально разобраться какие виды верстки сайтов применять, и в каких случаях.
Рассмотрим основные типы верстки сайта
|
Статическая верстка, ширина 800px |
Статическая верстка, ширина 1024px |
Статическая верстка, ширина 1280px |
 |
 |
 |
|
Резиновая верстка |
Адаптивная верстка, ширина 1280px |
Адаптивная верстка, по ширине |
 |
 |
 |
Дело в том, что у кого-то монитор с расширением 800*600, у других - 1024*768, у третьих - 1280*1024, у четвертых - еще больше. К примеру, мы сделали статический сайт с шириной 780px. Он будет отлично смотреться на мониторе с расширением 800*600; на мониторе 1280*1024 он будет занимать только половину ширины экрана и если информации много, то придется постоянно пользоваться вертикальной прокруткой. Второй пример - сайт с шириной 1024px. С расширением экрана 800*600 появиться и вертикальная, и горизонтальная прокрутка; у кого большое расширение монитора - сайт опять же займет только часть экрана.
Какой выход из положения? Какой вариант лучше подойдет для Вас?
И так, рассмотрим основные типы верстки сайта.
Начнем со статической верстки!
Статическая верстка полезна для сайтов, расчитаных на пользователей, которые будет посещать Ваш сайт преимущественно с ПК т.к. разрешение всех мониторов преимущественно равно и статическая ширина экрана в 1024px будет одинаково хорошо выглядеть на стационарных ПК.
Разницы Вы практически не увидите, если будете заходить на сайт с помощью ПК , разрешение мониторов которых 1920px или 1024px, то есть вид остается статическим не важно с какого устройства или монитора Вы заходите.
Посмотрим примеры статической верстки шириной 1280 px. Примеры верстки сайта мы также будем приводить в этой статье.
Адаптивная верстка
Это дизайн под определенные разрешения экрана. Требует дополнительных затрат времени на проектирование и программирование. Какие бывают виды адаптивной верстки? По сути, их существует ровно столько, сколько и видов расширений, ведь необходимо сделать один вариант верстки под каждый тип расширения, в том числе и мобильные устройства.
Адаптивный дизайн отличается от статического расположения элементов на странице, суть заключается в следующем: расположить все имеющиеся блоки в пределах видимости., Соответственно, адаптируя весь контент страницы под Ваш экран (не важно телефон, планшет или ноутбук). Используются определенное количество расширений для самых популярных гаджетов (320×480, 480×800, 540×960, 640×960, 720×1280, 768×1280 и т.д.). Все элементы страницы будут аккуратно располагаться на Вашем девайсе. Например, на телефоне при расширении 320*480 все блоки (весь контент) расположиться в пределах видимости Вашего экрана.
Адаптивная верстка сайта, примеры:
Резиновая верстка
Резиновая верстка - это верстка под любое разрешение экрана, которая также требует дополнительных затрат времени на проектирование и программирование.
Хороша в тех случаях, когда Вы не уверены с каких устройств будут заходить к Вам на сайт - нестандартные размеры мониторов, дисплеев. Проще даже сказать, что Ваш сайт будет отлично выглядеть абсолютно при любых размерах (от и до) экрана. Принцип заключается в указании ширины страницы в процентах. Соответственно при изменении ширины страницы, контент будет как резина “тянуться” на видимую ширину экрана.
Резиновая верстка сайта, примеры:
Мы надеемся, эта статья поможет Вам обзавестись качественным и эффективным сайтом, который будет служить многие, многие годы! Примеры верстки страниц в большем количестве можно найти на нашем сайте.
