В этом разделе будут собраны типовые макеты сайтов.
Сайт может иметь табличную верстку или блочную верстку. Эта страница — пример блочной верстки (таблицы не используются).

Сайт может иметь фиксированную верстку, резиновую верстку или смешанную верстку.




на правах рекламы:

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


  1. Влочная верстка

    Страница, на которой Вы находитесь — пример блочной вестки. Страница состоит из двух колонок. Для реализации колонок не используются таблицы.
  2. Адаптивная верстка

    Рассмотрим вариант адаптивной верстки.
    Страница состоит из двух колонок. Интерес представляет вторая колонка, она имеет адаптивную верстку. Блоки плавают и несмотря на размер страницы, блоки всегда занимают всю ширину колонки. Я бы назвала эти блоки "justify-блоками". Для тех, кто не знает этого слова, justify - css-свойство текста, которое обеспечивает выравнивание текста сразу по левоой и по правой границам блока.
    подробнее
  3. Фиксированная верстка

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

    Рассмотрим вариант резиновой верстки
    Страница состоит колонок. Не имеет значения сколько колонок одна, две, три. Не имеет значения сформированы колонки таблицей или блоками div.
    Обязательным признаком резиновой верстки является наличие горизонтальных размеров колонок, заданных в процентах (чаще всего). При изменении размера страницы, ширина колонок изменяется, неизменным остается соотношение горизонтальных размеров.
  5. Смешанная верстка

    Рассмотрим вариант смешанной верстки
    Страница состоит колонок. Не имеет значения сколько колонок одна, две, три. Не имеет значения сформированы колонки таблицей или блоками div.
    Обязательным признаком смешанной верстки является наличие одной фиксированной колонки и одной резиновой колонки. При изменении размера страницы, ширина резиновой колонки изменяется, неизменной остается ширина фиксированной колонки.