www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Верстка с помощью слоев > Резиновый дизайн. Двухколонный макет

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

контентовая версия  

«Резиновым дизайном» будем называть структуру web-страницы, которая автоматически приспосабливается под определенную ширину окна браузера пользователя. Такой макет имеет несколько преимуществ:

Среди недочетов можно отметить придирчивость разных браузеров к «резиновому» макету и большая вероятность появления Errors. В связи с чем повышается сложность верстки web-страниц.

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

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

Рис. 1а Рис. 1б Рис. 1в
а. две колонки б. три колонки в. четыре колонки

Рис. 1. Варианты размещения колонок

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

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

Термин «плавающий элемент» не очень удачен, тем не менее, порой встречается в литературе. Надо понимать, что никто никуда не плавает, так называют элемент, обтекаемый с разных сторон контентом или другими объектами web-страницы. Параметр float добавляемый к слою определяет, по какой стороне будет выравниваться слой, при этом остальные элементы будут обтекать его с других сторон.

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

Табл. 1. Левая колонка заданной ширины
Для левого слоя шириной 20%
Слой 1

float: left
width: 20%
Слой 2

margin-left: 21%
Для левого слоя шириной 200px
Слой 1

float: left
width: 200px
Слой 2

margin-left: 210px

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

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

В примере 1 приводится код web-страницы, на которой содержится: заголовок, две колонки и контактная информация. Ширина первой колонки с именем menu фиксирована и установлена как 100 пикселов, оставшееся пространство занято колонкой с именем content.

Пример 1. Код для разработки двух колонок

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Две колонки</title>
<style type="text/CSS (ЦСС)">
BODY {
font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт на странице */
}
#top { /* Верхняя часть с заголовком страницы */
 background: #e3e8cc; /* Цвет фона */
 border: solid 1px black; /* Параметры рамки */
 padding: 15px 0 15px 10px; /* Поля вокруг контента */
 margin-bottom: 15px; /* Расстояние между заголовком и колонками */
 font-size: 24px; /* Размер шрифта */
 font-weight: bold; /* Жирное начертание */
 color: black; /* Цвет символов */
}
#menu { /* Навигация по сайту */
 width: 100px; /* Ширина меню */
 background: #e3e8cc; /* Цвет фона */
 border: solid 1px black; /* Параметры рамки */
 float: left; /* Состыковка с другим слоем по горизонтали */
 padding: 3px; /* Поля вокруг контента */
}
#menu A { /* Ссылки в меню */
 font-size: 90%; /* Размер контента */
}
#content { /* Основное содержание страницы */
 background: #e3e8cc; /* Цвет фона */
 border: solid 1px black; /* Параметры рамки */
 margin-left: 115px; /* Отступ слева */
 margin-bottom: 15px /* Отступ снизу */
}
#bottom { /* Нижняя часть */
 background: #e3e8cc; /* Цвет фона */
 border: solid 1px black; /* Параметры рамки */
 font-size: 90%; /* Размер шрифта */
 padding: 3px; /* Поля вокруг контента */
}
H1 { /* Заголовок страницы */
 text-align: center; /* Выравнивание по центру */
 font-size: 210%; /* Размер шрифта */
 font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */
 font-weight: normal; /* Нормальное начертание */
 color: black; /* Цвет контента */
 padding: 0; /* Убираем значение полей */
 margin: 0; /* Обнуляем значения отступов */
}
#content P {
 font-size: 90%; /* Размер шрифта */
 text-align: justify; /* Выравнивание по ширине */
 padding: 10px; /* Поля вокруг контента */
 margin: 0 /* Обнуляем отступы */
}
</style>
</head>
<body>
<div id="top">Заголовок с нашего сайта</div>
<div id="menu">
<a href="link1.ШТМЛ">Ссылка 1</a><br>
<a href="link2.ШТМЛ">Ссылка 2</a><br>
<a href="link3.ШТМЛ">Ссылка 3</a><br>
<a href="link4.ШТМЛ">Ссылка 4</a><br>
</div>
<div id="content">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla
facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>
<div id="bottom">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
</body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2

Рис. 2. Результат разработки двухколонного макета

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

Табл. 2. Правая колонка заданной ширины
Для правого слоя шириной 20%
Слой 1

float: right
width: 20%
Слой 2

margin-right: 21%
Для правого слоя шириной 200px
Слой 1

float: right
width: 200px
Слой 2

margin-right: 210px

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

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

Валидный CSS
#menu { /* Навигация по сайту */
 width: 100px; /* Ширина меню */
 background: #e3e8cc; /* Цвет фона */
 border: solid 1px black; /* Параметры рамки вокруг */
 float: right; /* Состыковка с другим слоем по горизонтали */
 padding: 3px; /* Поля вокруг контента */
}
#content { /* Основное содержание страницы */
 background: #e3e8cc; /* Цвет фона */
 border: solid 1px black; /* Параметры рамки */
 margin-right: 115px; /* Отступ справа */
 margin-bottom: 15px /* Отступ снизу */
}

Заметьте, что положение слоев в коде ШТМЛ не меняется, вначале идет слой с именем menu, а потом уже content. Причем это правило действует всегда, независимо от того, как будут отображаться на web-странице колонки — меню слева от контента или наоборот, справа. В любом случае модифицируется только код CSS (ЦСС).

Применение позиционирования

При формировании двухколонного макета левая или правая колонка устанавливается в заданное место через абсолютное позиционирование, а соседняя колонка освобождает для нее место за счет применения отступов. Для лучшего понимания просмотрим пример, когда левая колонка имеет заданную ширину 200 пикселов, а ее положение определяется от левого верхнего угла окна браузера. Стиль для таких колонок приведен в примере 3.

Пример 3. Абсолютное позиционирование колонки

Валидный CSS
#leftcol { /* Левая колонка */
 position: absolute; /* Абсолютное позиционирование */
 width: 200px; /* Ширина слоя */
 left: 0; /* Положение от левого края окна */
 top: 20px; /* Положение от верхнего края окна */
 background: #fc0; /* Цвет фона левой колонки */
}

#rightcol { /* Правая колонка */
 margin-left: 210px; /* Отступ слева */
 background: #ccc; /* Цвет фона правой колонки */
}

Значение absolute свойства position позволяет задавать положение слоя относительно края окна браузера независимо от наличия и местоположения других слоев. Сами координаты устанавливаются с помощью параметров left, top, right и bottom, которые соответственно определяют расстояние от левого, верхнего, правого и нижнего края окна. Чтобы левая и правая колонка не накладывались друг на друга, следует добавляем отступ слева (margin-left) для слоя rightcol, как показано в данном примере. Значение этого отступа включает расстояние от левого края (параметр left) и ширину левой колонки (width) плюс дистанция между колонками.

Замечание

В любом браузере уже заложены отступы между краем окна и отображаемым в окне контентом. Поскольку значения отступов в разных браузерах могут различаться, то это влияет на вид и положение колонок макета. В подобных случаях лучше принудительно установить отступы с помощью атрибута margin, добавляя его к селектору BODY (см. пример 4).

Окончательный код для разработки двух колонок с помощью позиционирования приведен в примере 4.

Пример 4. Двухколонный макет

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Две колонки</title>
<style type="text/CSS (ЦСС)">
BODY {
 padding: 0; /* Отступы для браузера Опера */
 margin: 0; /* Обнуляем значения отступов на web-странице */
}
#leftcol {
 position: absolute; /* Абсолютное позиционирование */
 width: 200px; /* Ширина слоя */
 left: 0; /* Положение от левого края окна */
 background: #800000; /* Цвет фона левой колонки */
 padding: 5px; /* Поля вокруг контента */
}
#leftcol A {
 color: white; /* Цвет ссылок */
}
#rightcol {
 position: relative; /* Относительное позиционирование */
 margin-left: 200px; /* Отступ слева */
 background: #e0e0e0; /* Цвет фона правой колонки */
 padding: 10px; /* Поля вокруг контента */
}
H1 {
 margin: 0; /* Убираем отступы */
}
</style>
</head>
<body>
<div id="leftcol">
 <a href="link1.ШТМЛ">Ссылка 1</a><br>
 <a href="link2.ШТМЛ">Ссылка 2</a><br>
 <a href="link3.ШТМЛ">Ссылка 3</a><br>
 <a href="link4.ШТМЛ">Ссылка 4</a><br>
</div>
<div id="rightcol">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>
</body>
</html>

При использовании позиционирования примите во внимание следующие моменты.

Статья опубликована: 15.05.2009 Последнее обновление: 14.04.2009
Поиск по сайту
Верстка с помощью слоев
Разделы
Теги по теме

A
Тег A является одним из важных элементов ШТМЛ и предназначен для разработки ссылок. В зависимости от присутствия параметров name или href тег A устанавливает ссылку или якорь.

BODY
Элемент BODY предназначен для хранения содержания web-страницы (контента), отображаемого в окне браузера.

DIV
Элемент DIV является блочным элементом и предназначен для выделения фрагмента объекта с целью изменения вида содержимого.

H1...H6
ШТМЛ предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег H1 представляет собой наиболее важный заголовок первого уровня, а тег H6 служит для обозначения заголовка шестого уровня и является наименее значительным.

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

CSS (ЦСС) по теме

background
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

border
Параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

bottom
Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).

color
Определяет цвет контента элемента.

float
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.

left
Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента. Отсчет координат зависит от значения параметра position.

margin-left
Устанавливает величину отступа от левого края элемента.

margin-right
Задает величину отступа от правого края элемента.

padding
Устанавливает значение полей вокруг содержимого элемента. Полем имеется ввиду расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

position
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на web-странице.

right
Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента.

top
Для позиционированного элемента определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента.

width
Устанавливает ширину блочных или заменяемых элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект