Я працюю над нашим проектом на практиці, виходячи з типової макету колонок. Прежде чем я продемонструю проект живим та в кольорі, я хочу конкретно показати вам, як ви можете реалізувати такі макети колонок. Основний акцент буде зроблено на двох та трьохколоночних макетах, оскільки вони все ще є основою більшості веб-сайтів.
Провідника та вміст добре відомий як класика веб-дизайну. Зазвичай в лівій області вікна представлене меню навігації, тоді як у правому стовпці ви бачите сам контент. У контексті блогів ця поведінка трохи змінилася. Фактично, у багатьох блогах праворуч відображається навігація або реклама, тоді як ліворуч представлений сам вміст.
Такі застосування можна реалізувати досить просто з допомогою 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
Проблему з перекриванням нижньої області, яку бачили в попередньому прикладі, можна вирішити за допомогою властивості 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;
}
Я вже зазначив можливість визначення власного класу для цього варіанту.
Триколоночний макет із float
Тріколоночний макет також є популярним варіантом у веб-дизайні. Типовий розподіл виглядає наступним чином:
• У лівому стовпці міститься навігація.
• У центральному стовпці розташований фактичний вміст.
• Справа показуються додаткові відомості або реклама.
Нижче ви знайдете приклад гнучкого трьохколонкового макету. Синтаксис цього випадку, як ви зараз побачите, досить схожий на двоколоночний. Проте тепер є додатковий div-блок з іменем right, яке в решті решт відображає правий віконний стовбець.
<!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 відсотків.
Запропонованим синтаксисом визначається показ правого розділу справді справа.
Синтаксис у цьому випадку є гнучким. Ви можете змінити область main таким чином:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Тут значення float встановлено на right. Це призводить до переміщення області right вліво.
В цьому підручнику ви побачили, наскільки легко визначити основні макети за допомогою float. Ці знання тепер становлять основу для побудови веб-сайту. У наступних підручниках веб-сайт буде розвиватися крок за кроком, починаючи з основ.
