Подписка
Email
Fb
RSS
Twitter
Email

Макеты сайтов

макет сайтаЗдравствуйте, дорогие читатели блога DenWeb.Ru! Я продолжаю свои уроки по верстке сайтов. В прошлый раз я рассказал о том, что такое верстка сайта. Прежде чем выбрать для практики какой-то макет, давайте сначала поговорим о том, какие макеты сайтов бывают и какие у каждого вида преимущества и недостатки.

Макет, как Вы, наверное, уже поняли, это организация материалов на странице, то есть это совокупность заголовков, контента, навигации…

Обычно макеты классифицируют по двум признакам — по ширине и по количеству колонок.

Классификация макетов сайта по ширине

Можно выделить следующие типы макетов:

  • Фиксированный;
  • Резиновый;
  • Эластичный;
  • Адаптивный;
  • Комбинированный;

Разберем каждый из них подробнее.

Фиксированный макет

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

Пример -vkontakte.ru.

Резиновый макет

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

Пример — yandex.ru

Эластичный макет

Данный макет отличается от двух предыдущих тем, что при изменении размера шрифта будет изменять и размер основных элементов (контейнера с контентом, меню…).

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

Данный макет пользователю удобно подстраивать под себя путем изменения размера шрифта, он объединяет преимущества как фиксированного, так и резинового макетов. Однако верстать данный макет очень сложно, так как em имеет относительные размеры и зависит от шрифта.

Адаптивный макет

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

Комбинированный макет

Так же его иногда называют гибридным. В данном случае какие-то элементы макета (например шапка и футер) делаются резиновыми, а какие-то фиксированными.

Пример — данный блог.

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

Продолжим в следующем уроке!

Вы можете оставить комментарий.

6 комментариев к записи “Макеты сайтов”

  1. Отлично узнал кое что нужное=) Да и хотел узнать с какой очередностью выходят статьи(уроки)???

  2. Ознакомьтесь с подробностями по эластичному маекету ...  

  3. Никита:

    Ден вы будите расказывать как создавать эти макеты? если да то по этой статье нельзя выбрать какой макет лучше!

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика