Я предполагаю использование типичного макета столбцов в нашем проекте по практике. Прежде чем представить этот проект живым и цветным, я бы хотел показать вам, как вы сами можете реализовать макеты со столбцами. Здесь основное внимание будет уделено двух- и трехстолбчатым макетам, поскольку они все еще являются основой для большинства веб-сайтов.
Пожалуй, классикой в веб-дизайне является двухстолбчатый макет. В левой области окна обычно показывается навигация, в то время как в правом столбце отображается основное содержимое. В связи с блогами данное поведение, кстати, изменилось немного. Фактически, во многих блогах справа отображается навигация или реклама, в то время как слева показывается основное содержимое.
Такие применения можно реализовать в CSS сравнительно легко. Фактически, двухстолбчатые макеты являются самой простой формой макета.
Ниже я покажу вам пример двухстолбчатого макета, который обходится без использования абсолютных процентных значений.
Вот полный пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
position: absolute;
left: 0;
margin: 0;
width: 20%;
background-color:#66CCCC;
}
#main {
margin: 0;
margin-left: 20%;
width: 80%;
background-color:#6666CC;
}
</style>
</head>
<body>
<div id="header">Макет с абсолютным позиционированием</div>
<div id="nav">Навигация</div>
<div id="main">Это область контента</div>
<div id="footer">Здесь находятся авторские права.</div>
</body>
</html>И так это выглядит в браузере:
Кстати, вы можете легко переместить левую колонку вправо. Вот что нужно изменить:
• Для #nav замените left: 0 на right: 0.
• Для #main просто замените margin-left на margin-right.
После сохранения изменений вы увидите ожидаемый результат.
Проблема, которую имеет показанный макет на основе абсолютного позиционирования, заключается в том, что если содержимое левой колонки становится объемнее, оно выходит за пределы подвала.
Это происходит потому, что для абсолютно позиционированных элементов фактически не оставляется "зарезервированного места". Можно избежать этой проблемы, добавляя соответствующие содержимое в основную область, которое длиннее, чем в левой колонке.
Следует использовать эту форму макета только в том случае, если уверены, что основная область действительно выше, чем левая (или правая) колонка.
Двухстолбцовый макет с плавающими элементами
Проблема, возникшая в предыдущем примере с перекрывающимся подвалом, может быть решена с помощью свойства float. Измененный синтаксис выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 80%;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Макет с абсолютным позиционированием</div>
<div id="nav">Область навигации</div>
<div id="main">Это область контента</div>
<div id="footer">Здесь находятся авторские права.</div>
</body>
</html>Обе колонки были обеспечены свойством float. Теперь колонки отображаются друг рядом с другом.
Левой колонке присвоена ширина 20 процентов. Имейте в виду, что элемент, позиционированный с помощью float, всегда требует указания ширины.
Рабочая область контента получает ширину 80 процентов. Эта область также позиционируется с помощью float: left. Таким образом, эта область отображается рядом с левой колонкой.
Чтобы подвал всегда находился в нижней области окна - то есть под колонками, используется следующий синтаксис:
#footer {
clear: both;
}
Я уже указывал на возможность создания собственного класса для этого варианта.
Трехстолбцовый макет с плавающими элементами
Также трехколоночный макет является популярным веб-дизайном. Типичное разделение выглядит примерно так:
• Левая колонка содержит навигацию.
• В центральной колонке находится основное содержимое.
• Справа отображаются дополнительные сведения или реклама.
Ниже вы найдете пример создания гибкого трехстолбчатого макета. Синтаксис - вы узнаете - подобен синтаксису уже показанного двухстолбчатого макета. Однако теперь у нас есть дополнительная область right с div, которая в конечном итоге представляет правую оконную колонку.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#main, #right {
margin: 0;
border: 0;
padding:0;
}
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 60%;
}
#right {
float: right;
width: 20%;
background-color:#6699FF;
}
#footer {
clear: both;
} </style>
</head>
<body>
<div id="header">Layout mit absoluter Positionierung</div>
<div id="nav">Der Bereich für die Navigation</div>
<div id="main">Das ist der Inhaltsbereich</div>
<div id="right">Das ist die rechte Spalte</div>
<div id="footer">Hier stehen die Copyright-Informationen.</div>
</body>
</html>
Новой области присвоена ширина 20 процентов. Следовательно, распределение выглядит следующим образом:
• Левая и правая колонны занимают по 20 процентов доступной площади.
• Центральная колонна имеет ширину 60 процентов.
С помощью показанного синтаксиса область right действительно отображается справа.
Однако синтаксис в этом случае гибок. Вы также можете настроить область main следующим образом:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Здесь float установлен на right. В результате область right переносится влево.
В этом уроке вы увидели, насколько легко определять основные макеты на основе float. Это знание теперь становится основой для создания веб-сайта. В следующих учебных пособиях пошагово будет создаваться сайт, начиная с основной структуры.
