Резиновый двухколоночный макет

Стр 1 из 3Следующая ⇒

Макеты по ширине

2. Макеты по колонкам

3. Резиновый двухколоночный макет

4. Резиновый трёхколоночный макет

5. Использование позиционирования

6. Использование плавающих элементов

Макеты по ширине

Различают пять типов макетов, связанных с шириной:

· фиксированные;

· резиновые;

· эластичные;

· адаптивные;

· комбинированные.

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

Альтернативные названия: фикс (жарг.), fixed (англ.), фиксированный дизайн. Макет обычно располагается по центру окна браузера, а его ширина ограничивается заданными размерами в пикселах (рис. 6.1).

Рис. 6.1. Фиксированный макет в браузере

Преимущества

· Из-за того, что ширина всех колонок известна, проще указывать размеры изображений, видео и других элементов страницы.

· Браузеры, как правило, лояльнее относятся к таким макетам, поэтому на вёрстку и отладку уходит меньше времени.

Недостатки

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

Сайты

http: //bash.org.ru

http: //vkontakte.ru

http: //lenta.ru

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

Альтернативные названия: резина (жарг.), liquid (англ.), резиновый дизайн.

Ширина колонок задаётся в процентах или сочетаются проценты и пикселы таким образом, что макет занимает всю свободную ширину окна браузера. При изменении размеров окна или другом разрешении монитора макет подстраивается под них (рис. 6.2).

Рис. 6.2. Резиновый макет в браузере

Преимущества

· Используется вся эффективная область страницы.

· Веб-страницы удобно печатаются на бумаге любого формата.

· Веб-страницы хорошо смотрятся на разных устройствах от iPhone до ноутбука.

Недостатки

· На мониторах с высоким разрешением сайт плохо читается из-за чрезмерного удлинения строк текста. Здесь помогает ограничение ширины контента с помощью свойства max-width. Опять же некоторые владельцы больших мониторов уменьшают окно браузера до комфортных для них размеров.

· Резиновые макеты сложнее верстать и отлаживать в разных браузерах.

Сайты

http: //yandex.ru

http: //rutracker.org

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

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

Преимущества

· Макет целиком или отдельные его части легко масштабировать, подгоняя под комфортный для восприятия размер.

· Макет будет одинаково смотреться на разных операционных системах, имеющих различия в выборе размера и типа шрифта.

Недостатки

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

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

· В действительности сфера применения этого макета очень ограниченна.

Сайт

http: //www.csszengarden.com

http: //green-beast.com/portfolio/zen/css/zen.css- файл css

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

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

Преимущества

· Этот тип макета наиболее удобен для пользователя, поскольку не зависит от разрешения и ширины окна браузера, приспосабливаясь под них.

· Макет комфортно можно смотреть на любом устройстве.

Недостатки

· Это самый сложный тип из всех макетов, ведь, по сути, вместо одного требуется сделать несколько макетов со своей графикой и CSS, а также прописать механизм определения разрешения монитора или ширины окна браузера.

· За счёт универсальности макет сложно проверять на разные условия, которые возможны у пользователей.

Сайт http: //www.w3.org

Вид сайта показан на рис. 6.3. При уменьшении ширины окна до 500 пикселов и менее, дизайн сайта сменится (рис. 6.4).

Рис. 6.3. Сайт W3C при обычной ширине

Рис. 6.4. Сайт W3C при узкой ширине

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

Альтернативные названия: гибрид, hybrid (англ.) Этот макет предполагает использование разной ширины для отдельных частей страницы, например, шапку и подвал делают резиновыми, а контент фиксированным (рис 6.3).

Этот макет в действительности не является самостоятельным типом, поэтому наследует все плюсы и минусы фиксированного и резинового макета.

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

Сайты

http: //lionindesert.ru

http: //www.youtube.com

Рис. 6.5. Комбинированный макет

Макеты по колонкам

Колонки в веб-дизайн пришли из полиграфии, где они используются в качестве способа разбивки широкого текста на более узкие фрагменты, а также для разделения различной информации. На сайтах текст всегда идёт одной колонкой, потому что универсальных способов для создания многоколоночного текста пока не существует. Кроме того, сайт по своей структуре и виду отличается от страницы в журнале, которую можно охватить одним взглядом, это тоже накладывает свои ограничения на распространение многоколоночного текста. Возможно в недалёком будущем сайты, специально «заточенные» под iPad и другие планшеты, станут активно применять колонки по своему прямому назначению. Пока же колонки преимущественно применяются для смыслового деления материала. Например, одна колонка содержит контент, другая навигацию, а третья рекламный баннер и т.д.

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

Пример 6.7. Макет № 3

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN"

" http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

< html xmlns=" http: //www.w3.org/1999/xhtml" >

< head>

< meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" />

< title> Макет 3< /title>

< style type=" text/css" >

.header, .footer { background: #D5BAE4; }

.layout { overflow: hidden; }

.col1 { background: #C7E3E4; float: left; width: 100px; }

.col2 { background: #E0D2C7; float: left; width: 200px; }

.col3 { background: #ECD5DE;

margin-left: 300px; /* Отступ слева на ширину колонок 1 и 2 */

}

< /style>

< /head>

< body>

< div class=" header" > Шапка сайта< /div>

< div class=" layout" >

< div class=" col1" > Колонка 1< /div>

< div class=" col2" > Колонка 2< /div>

< div class=" col3" > Колонка 3< /div>

< /div>

< div class=" footer" > Подвал< /div>

< /body>

< /html>

Колонка 1

< /div>

< div class=" footer" > Подвал< /div>

< /body>

< /html>

Колонка

< /div>

В этом примере ширина слоя заданная как 200 пикселов меняться не будет, но поля и рамка будут добавлены.

Если используются слои, то колонки должны иметь высоту, которая определяется их содержимым; колонки одинаковой высоты строятся с помощью таблицы. Исключением может служить применение свойства height, которое устанавливает высоту слоёв.

Понятно, что объём текста в колонках может различаться, поэтому высоту через height обычно указывают с запасом. Ещё можно добавить свойство overflow со значением auto. Если текст превысит заданную высоту, появится полоса прокрутки.

Также существуют способы, построенные на визуальном обмане. Колонки кажутся одинаковыми за счёт использования границ в качестве колонок, добавления фоновой картинки или цвета фона. В действительности же их высота, как им и положена, определяется контентом.

Принцип использования фонового изображения для колонок основан на том, что мы видим повторяющуюся по вертикали картинку, сверху которой располагается текст и другие элементы. Поскольку нам надо сделать эффект колонок, фон добавляется не к колонкам по отдельности, а для их родителя. Здесь имеет значение, какой это фон, что он собой представляет и каковы его размеры. Предположим, что у нас двухколоночный фиксированный макет шириной 980 пикселов, левая колонка занимает ширину 200 пикселов. Создаём изображение размером 980х60 пикселов. Ширина соответствует ширине макета, а высоты обычно берётся 20–30 пикселов.

Многие разработчики делают рисунок высотой 1–2 пиксела, полагая, что объём файла будет минимальным, и загрузка произойдёт быстрее. Однако всё обстоит наоборот. Компьютер тратит в несколько раз больше времени для отображения одной страницы с узким фоном, что особенно заметно при прокрутке окна браузера. Так что при использовании фонового рисунка делайте изображение высотой не менее 20–30 пикселов — так отображение его на странице будет происходить быстрее.

Слишком скучно делать колонки однотонными, раз мы имеем дело с изображениями, поэтому добавим какие-нибудь ограничители по бокам колонок (рис. 6.10). Здесь самое главное, чтобы рисунок повторялся без стыков по вертикали.

Рис. 6.10. Фоновый рисунок

Результат данного примера показан на рис. 6.11. Хорошо заметно, что колонки имеют одинаковую высоту.

Рис. 6.11. Колонки одинаковой высоты, созданные фоновой картинкой

При использовании в рисунке каких-либо декоративных элементов, следует позаботиться, чтобы текст от них был отодвинут через padding и не «налипал».

Для трёх и более колонок в фиксированном макете процесс подготовки изображения сходный, а вот для резинового макета есть ряд особенностей из-за того, что ширина макета может лежать в широком диапазоне. Тогда фоновую картинку необходимо сделать заведомо широкой, например, 2000 пикселов. Фон не влияет на ширину веб-страницы и если не помещается в отведённые ему размеры, то обрезается. Этим качеством и воспользуемся. В качестве примера рассмотрим резиновый макет с фиксированной правой колонкой шириной 300 пикселов. Для него сделаем изображение шириной 2000х30 пикселов с тёмно-красным прямоугольником справа (рис. 6.12).

Рис. 6.12. Фон для резинового макета

Фиксированная колонка располагается справа, поэтому фон также надо установить в правый верхний угол, указав 100% 0 для свойства background (пример 6.12).

Пример 6.12. Фон для резинового макета—11.html

< html>

< head>

< meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" />

< title> Двухколоночный резиновый макет< /title>

< style type=" text/css" >

.layout {

background: url(images/bg-liquid.png) repeat-y 100% 0;

/* Фоновый рисунок */

overflow: hidden; /* Отменяем обтекание */ }

.sidebar { width: 280px; float: right; padding: 10px; color: #fff; }

.content { margin-right: 300px; padding: 10px; }

< /style>

< /head>

< body>

< div class=" layout" >

< div class=" sidebar" > Колонка 2< /div>

< div class=" content" > Колонка 1< /div>

< /div>

< /body>

< /html>

Напоследок перечислим плюсы и минусы использования фона в качестве искусственных колонок.

Плюсы

1. Метод простой и не требует изменения существующего кода.

2. В рисунок можно добавить разные декоративные элементы вроде градиентов, линий и др. Это позволит разнообразить дизайн колонок.

Минусы

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

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

3. Файл с фоновой картинкой может иметь большой объём и долго загружаться. Отметим, что для простого изображения, вроде приведённого на рис.6.12, это не так, при размерах 2000х30 пикселов файл занимает всего 275 байт.

При имитации колонок одинаковой высоты с помощью фоновой картинки она добавляется через свойство background к родительскому элементу колонок (слой layer). Похожим образом работает и цвет фона. Его достаточно установить для слоя layer, а самой высокой колонке задать свой собственный цвет. В примере 6.13 приведён трёхколоночный макет, в котором цвет фона боковых колонок устанавливается через слой layer, а центральной колонки через слой col2.

Пример 6.13. Использования фонового цвета для колонок

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN"

" http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

< html xmlns=" http: //www.w3.org/1999/xhtml" >

< head>

< meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" />

< title> Трёхколоночный резиновый макет< /title>

< style type=" text/css" >

.layout {

background: #b2d235; /* Цвет фона крайних колонок */

overflow: hidden; /* Отменяем обтекание */

}

.layout div{ float: left; }

.col1 { width: 40%; }

.col2 { background: #ffc60b; /* Цвет фона средней колонки */

width: 20%; height: 200px; }

.col3 { width: 40%; }

< /style>

< /head>

< body>

< div class=" layout" >

< div class=" col1" > Колонка 1< /div>

< div class=" col2" > Колонка 2< /div>

< div class=" col3" > Колонка 3< /div>

< /div>

< /body>

< /html>

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

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

Для «раскрашивания» колонок применяется всего два цвета, так что нельзя задать трём и более колонкам разный цвет и чтобы они при этом имели одинаковую высоту.

Достоинства у метода тоже имеются, но их можно выразить всего парой слов: это простота и изящность решения. Поэтому этот метод можно довольно часто встретить в вёрстке, в частности, он применяется на сайте W3C.

Макеты по ширине

2. Макеты по колонкам

3. Резиновый двухколоночный макет

4. Резиновый трёхколоночный макет

5. Использование позиционирования

6. Использование плавающих элементов

Макеты по ширине

Различают пять типов макетов, связанных с шириной:

· фиксированные;

· резиновые;

· эластичные;

· адаптивные;

· комбинированные.

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

Рис. 6.1. Фиксированный макет в браузере

Преимущества

Недостатки

Сайты

http: //bash.org.ru

http: //vkontakte.ru

http: //lenta.ru

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

Альтернативные названия: резина (жарг.), liquid (англ.), резиновый дизайн.

Рис. 6.2. Резиновый макет в браузере

Преимущества

· Используется вся эффективная область страницы.

· Веб-страницы удобно печатаются на бумаге любого формата.

· Веб-страницы хорошо смотрятся на разных устройствах от iPhone до ноутбука.

Недостатки

· Резиновые макеты сложнее верстать и отлаживать в разных браузерах.

Сайты

http: //yandex.ru

http: //rutracker.org

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

Преимущества

Недостатки

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

· В действительности сфера применения этого макета очень ограниченна.

Сайт

http: //www.csszengarden.com

http: //green-beast.com/portfolio/zen/css/zen.css- файл css

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

Преимущества

· Макет комфортно можно смотреть на любом устройстве.

Недостатки

· За счёт универсальности макет сложно проверять на разные условия, которые возможны у пользователей.

Сайт http: //www.w3.org

Вид сайта показан на рис. 6.3. При уменьшении ширины окна до 500 пикселов и менее, дизайн сайта сменится (рис. 6.4).

Рис. 6.3. Сайт W3C при обычной ширине

Рис. 6.4. Сайт W3C при узкой ширине

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

Сайты

http: //lionindesert.ru

http: //www.youtube.com

Рис. 6.5. Комбинированный макет

Макеты по колонкам

Резиновый двухколоночный макет

Двухколоночный резиновый макет позволяет эффективно использовать площадь браузера, и вместе с тем достаточно удобен для самого широкого круга задач. Кроме того, такой макет не требует сложной работы над собой и его можно использовать на многих сайтах, комбинируя ширину колонок в пикселах и процентах. Примером такого макета служит сайт Хабрахабр (рис. 5.6), ширина колонок у него задана в процентах.

http: //habrahabr.ru

Рис. 6.6. Резиновый двухколоночный макет

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

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

Табл. 6.1. Левая колонка заданной ширины
Для левого слоя шириной 20%
Левая колонка	Правая колонка
float: leftwidth: 20%	margin-left: 21%
Для левого слоя шириной 200px
float: leftwidth: 200px	margin-left: 210px

Для левой колонки требуется всего два свойства: float — заставляет вторую колонку располагаться рядом по горизонтали с первой и width, которое устанавливает ширину колонки. Вторая колонка будет занимать всё оставшееся место, поэтому для нее указывать width не нужно.

Правая колонка характеризуется лишь одним свойством — margin-left, оно смещает левый край колонки на ширину левого слоя, плюс задает отступ между колонками. Поэтому величина этого свойства в табл. 6.1 указана 21%, где 20% сама ширина колонки, а на один процент приходится расстояние между колонками. В случае задания ширины одной из колонок в пикселах, код останется прежним, но поменяются единицы измерения.

Из-за того, что мы имеем дело с резиновым макетом, который может занимать всю ширину окна браузера и уменьшаться до какого-то предела, имеет смысл сделать ограничения. Свойство min-width для слоя layout устанавливает минимальную ширину, если окно браузера будет меньше этого значения, появится горизонтальная полоса прокрутки. Свойство max-width, наоборот, задаёт максимальную ширину, которая не будет превышена.

Пример 6.1. Навигация слева—1.html

< head > < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" /> < title > Две колонки< / title > < style type=" text/css" > .header, .sidebar, .content, .footer { padding: 1 0px; /* Поля */ border: solid 1px #000; /* Параметры рамки */ background: #e3e8cc; /* Цвет фона */ }.header { /* Верхняя часть с заголовком */ background: #e3e8cc; /* Цвет фона */ font-size: 24px; /* Размер шрифта */ }.layout { margin: 15px 0; /* Отступы сверху и снизу */ overflow: hidden; /* Отменяем действие float */ min-width: 800px; /* Минимальная ширина */ max-width: 1200px; /* Максимальная ширина */ }.sidebar { /* Навигация по сайту */ margin: 5px 0; /* Отступы сверху и снизу */ width: 100 px; /* Ширина меню */ float: left; /* Состыковка с другим слоем по горизонтали */ }.sidebar ul { list-style: none; /* Убираем маркеры */ padding: 0; /* Убираем отступы */ }.content { /* Основное содержание страницы */ margin-left: 135px; /* Отступ слева */ } < / style > < / head > < body > < div class=" header" > Заголовок сайта< / div > < div class=" layout" > < div class=" sidebar" > < h2 > Меню< / h2 > < ul > < li > < a href=" link1.html" > 1< / a > < / li > < li > < a href=" link2.html" > 2< / a > < / li > < li > < a href=" link3.html" > 3< / a > < / li > < li > < a href=" link4.html" > 4< / a > < / li > < / ul > < / div > < div class=" content" > < h1 > Название страницы< / h1 > < p > Текст.< / p > < / div > < / div > < div class=" footer" > Подвал< / div > < / body > < / html >

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

Табл. 6.2. Правая колонка заданной ширины
Для правого слоя шириной 20%
Правая колонка	Левая колонка
float: rightwidth: 20%	margin-right: 21%
Для правого слоя шириной 200px
float: rightwidth: 200px	margin-right: 210px

Расположение слоев в коде остается прежним, но значение свойства float меняется на right, а отступ на margin-right. Более никаких изменений не предполагается, поэтому пример 6.11 останется прежним и в нем только следует заменить стиль слоев sidebar и content на тот, что показан в примере 6.12.

Пример 6.2. Стиль для добавления меню справа—2.html

.sidebar { width: 100px; float: right; }.content { margin-right: 135px; }.sidebar { width: 100px; float: right; }.content { margin-right: 135px; }

12 3 Следующая ⇒