Трехколоночный резиновый макет сайта

Приветствую Вас в очередном уроке, который будет посвящен сегодня языку CSS. И мы реализуем с Вами трехколоночный резиновый макет для сайта. В дальнейшем Вы просто можете копировать этот каркас и приступать к созданию сайта. Макет будет состоять из таких блоков как: шапка сайта, левый сайдбар, правый сайдбар, область контента и футер. Ничего сложного, обычный, довольно просто шаблон. Ну что же, пришло время его реализовать. Для начала напишем следующую структуру html кода:

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

Вот мы и завершили написание стилей, давайте немного их разберем.
За основу мы взяли блок, в котором размещаем все остальные блоки, и задали для него максимальную ширину, выравнивание по центру, а также ширину равную ста процентам (это не является обязательным, но и лишним не будет).
В блок, отвечающий за шапку сайта, поместили заголовок, а самому блоку установили цвет фона, и выравнивание текста по центру. После этого мы приступили к самой важной части, к нашим резиновым колонкам.
Для левого сайдбара установили цвет фона, фиксированную высоту, чтобы мы могли наглядно представить себе, как будет выглядеть сайт в дальнейшем. Установили ширину равную двадцати процентам, а также задали обтекание элементов слева.
С правым сайдбаром аналогичная ситуация, только мы отправляем данный элемент в правую часть экрана, задавая обтекание элементов справа. После такого способа контент автоматически становится по центру экрана между этими двумя сайдбарами.
Но для контента мы также задаем цвет фона, высоту, отступы с левого и правого края, которые равны 21 процент, и соответственно ширину в 58 процентов. У вас может возникнуть вопрос, почему именно 58 процентов. Исходя из ширины равной ста процентам, мы вычитаем отступы с левой и правой стороны, которые равны по 21 проценту, итого 100 — 21 — 21 = 58. Вот откуда данная цифра. Все, резиновые блоки готовы, осталось лишь реализовать футер.
Он реализуется по принципу шапки сайта, тоже создаем блок, с заголовком внутри, задаем фон, цвет текста, а также выравнивание текста по центру.

Посмотрев на результат, можно сказать, что все довольно просто, причем сайт будет сжиматься до предела, и растягиваться на максимальную ширину, заданную нами. Если хотите, Вы можете указать минимальную ширину, до которой будет сжиматься ваш сайт. Указывается данное свойство для блока с id container, т.к., он является родительским для остальных блоков. Вот мы с Вами и рассмотрели возможность создания трехколоночного резинового сайта, на этом я буду прощаться с Вами. Всего Вам доброго, успехов!

Резиновая верстка сайта.

Резиновый веб-дизайн. Что и куда будем растягивать?

Особенности, преимущества и недостатки

Один из самых популярных типов верстки сайта — резиновая верстка. Главной особенностью резиновой верстки является способность подстраиваться под различные разрешения экрана и размеры окна браузера.

Из всех типов html верстки сайтов можно условно выделить три основных — фиксированная, резиновая и адаптивная.

Особенности резиновой верстки

В отличие от фиксированной, резиновая верстка предусматривает изменения размера окна браузера и рассчитана на различные разрешения экрана. Дело в том, что при современном стремительном развитии технологий и постоянном появлении все более совершенной техники, возникает проблема с версткой сайтов. Обычная фиксированная верстка перестала отвечать всем необходимым требованиям и постепенно себя изжила. Сейчас использование старых методов — скорее исключение, чем правило и это вполне закономерно.

Представьте себе такой простой пример — пользователь ехал в вагоне метро, возвращаясь домой с работы и зашел на ваш сайт с мобильного телефона, разрешение экрана которого 320х480 пикселей, потом уже дома он зашел со стационарного компьютера и просматривал ваш сайт на мониторе, диагональю 24″ и разрешением 1920х1200 пикселей (и это еще далеко не предел). Вопрос в том, как используя фиксированную верстку, добиться одинаковых результатов на смартфоне и на большом мониторе (если отбросить в сторону автоматическое масштабирование). Т.е., иными словами, нужно, чтобы в телефоне не появилась горизонтальная прокрутка и в то же время на мониторе сайт не смотрелся как несчастная узкая полосочка посередине белого пустого экрана. Ответ — никак.

И тут нам на помощь приходит резиновая верстка, которая легко справляется с поставленной задачей. На большом мониторе не грех растянуть сайт на весь экран, либо ограничиться определенной шириной шаблона, например, 75% ширины экрана. Для этой задачи есть замечательные CSS свойства max-width и min-width, которые позволят держать ширину сайта в определенных рамках, что является наиболее правильным и эстетичным решением.

Преимущества и недостатки резиновой верстки

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

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

С другой стороны, если брать слишком большое изображение с запасом, то оно будет слишком «много весить» и пользователи, зашедшие на сайт с мобильных устройств при слабеньком интернете будут скачивать слишком много лишних байтов.

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

Пример — резина

Cтраница 1

Примеры резин с достаточно высоким сопротивлением многократному изгибу, содержащие дифенилгуа-нидин, приведены в табл. 4.15. При каждом значении модуля или степени поперечного сшивания у резин с ДФГ наблюдалось наибольшее сопротивление утомлению.  [1]

На примере резин для боковин шин показано, что методы ДСК и ДТГ при разложении образцов в среде азота дают наилучшие результаты при идентификации композиций НК, БСК, СКЭПТ и галобу-тилкаучука.

При разложении в среде кислорода кривые не столь информативны, но согласуются с кривыми, полученными в среде азота.  [2]

Рассмотрим эти эффекты на примере резин на основе кристаллизующихся каучуков, где они проявляются наиболее наглядно.  [4]

В работе К. А. Керимова ( 1965) на примере резины и поливинила было показано, что динамические кривые напряжение — деформация, близкие к прямым, лежат выше статических, причем в области напряжений, близких к нулю, остаточные деформации от динамических нагрузок могут втрое превышать статические.  [5]

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

Адаптивная вёрстка сайта, урок первый. Вёрстка главной страницы

 [7]

Большое принципиальное значение имеют результаты, полученные П. А. Ребиндером и В. В. Маргаритовым о влиянии природы поверхности зерен наполнителя на его упрочняющее действие. На примере резины они показали, что наполнители разделяются на три группы по молекулярной природе поверхностей.  [8]

К резинам предъявляются различные требования. Рассмотрим в качестве примера резины, используемые в буровом и нефтепромысловом оборудования.  [9]

Однако разный характер межмолекулярных сил взаимодействия полимера и растворителей может привести к совершенно различному набуханию полимера при близких значениях параметров растворимости для этих сред. Наиболее подробно этот вопрос изучен на примере резин.  [10]

Примеси и наполнители могут составлять значительную часть общего веса, а нередко вообще превышают вес самого каучука. Как многообразны и сложны могут быть примеси, добавляемые в каучук-сырец, видно на примере резины для автомобильных шин.  [11]

Для увеличения стойкости полимеров к химически активным средам поперечные связи должны быть стойкими к этим средам. Наиболее стойкими из используемых в настоящее время являются поперечные связи типа С-С, как это показано на примере резин из фторкаучука и хлоропренового каучука ( см. гл.  [12]

Важной характеристикой процесса износа резины, скользящей по металлической поверхности с большими скоростями, является критическая температура ее разрушения при трении. При скольжении резины по металлической поверхности в условиях высоких температур воздействия ( 200 — 400 С) возможны следующие основные виды ее разрушения: возникновение трещин на поверхности трения, образование на обоих контактирующих поверхностях пары трения слоев наволакивания резины и протекание процесса катастрофического износа. На примере резин на основе бу-тадиен-нитрильного и эти-лен-пропиленового каучуков разберем причины, вызывающие разрушение этих материалов.  [14]

Введение наполнителей увеличивает эффект размягчения резин. Вывод о том, что эффект размягчения больше в присутствии наполнителя, — кажущийся и связан только с тем, что сравнение резин производится при разных фактических деформациях каучуковой фазы, носит частный характер. Такое заключение базируется [29-31] на обширном материале, собранном при исследовании резин из НК. Однако более детальный анализ на примерах резин из других каучуков показывает другое.  [15]

Страницы:      1

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

Чтобы сотворить своё чудо в интернете, можно конечно воспользоваться готовыми и бесплатными движками для сайтов и программами (конструкторами сайтов) с помощью которых, не имея даже элементарных познаний в html и css, вы за считанное время сможете сделать сайт с нуля на профессиональной основе с точки зрения оптимизации и SEO.

А можно пойти и другим путём более правильным: изучить программный код html и стилевое оформление элементов на css. В этом направление вам под силу будет сделать сайт любой конструкции и придать ему неповторимый внешний вид.

Статьи / jQuery /

Как создать адаптивный (резиновый) дизайн сайта на jQuery?

Что такое адаптивый дизайн?

Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, который позволяет корректно, в зависимости от используемого пользователем устройства, отобразить содержимое как отдельной страницы, так и сайта в целом.

Зачем же нужен адаптивный дизайн? Начну со статистики. Данные TNS за март 2013 года вы можете видеть на слайде ниже.

Как Вы можете видеть, примерно треть аудитории заходит со смартфонов и планшетов. И это при условии того, что процент каждый месяц только растёт. Как Вы понимаете, лучше держать нос по ветру!)

Как реализовать на своём сайте адаптивную вёрстку?

Поскольку средствами одного CSS решить проблему явно недостаточно (менять надо не только стили, но и структуру и содержание блоков), то воспользуемся jQuery. Зачастую сайт состоит из нескольких блоков: главный и сайдбары. Если адаптировать сайт под мобильные устройства, то это не более 2-х блоков (слева и справа).

Ниже привёл пример кода адаптивной вёрстки. В нём самые азы — остальное можете добавить на усмотрение. И не забудьте подключить библиотеку jQuery! ( см. Как подключить библиотеку jQuery? )

Код JS (jQuery)

<script type="text/javascript">
  $(document).ready(function() {

    var w = $(window).width(); // Ширина окна
    var h = $(window).height(); // Высоту окна. Не используем. Для справки

    if (w <= 480) { // если ширина меньше или равна 480

      $("#left").html($("#left").html() + $("#right").html()); // копируем содержимое правой колонки в левую
      $("#right").remove(); // теперь удаляем правую колонку

      $("#left").css({"left":"10px", "right":"15px"}); // допустим теперь нужно изменить css у левой колонки
    }

  });
</script>
Если Вы имеете хотя бы базовые знания JS или jQuery, то код должен быть понятен. В нашем случае допускается, что есть сайт из главного блока (середина) и двух боковых: слева и справа (сайдбаров). Если скрипт вычисляет ширину окна и она меньше 480, то содержание правого блока записывается в нижнюю часть левого. В качестве дополнения указал строчку с изменением стилей левого блока (так как теперь правый удалён, отступы наверняка изменяются). Ну это Вы уже под себя подберёте!)

Как видите, всё достаточно просто! Само собой рекомендовано использовать блочную, а не табличную вёрстку, строгую разметку и тд. И изменить шаблон сайта не составит труда!

Спасибо за внимание! И не забывайте о тех, кто решил посмотреть Ваш сайт со смартфона!)

 

Предыдущая статья
Как поменять блоки и другие элементы местами с помощью jQuery?Следующая статья
Открыть или скрыть блок при выборе чекбокса jQuery

Похожие статьи

Комментарии к статье (vk.com)