Фіксований дизайн. Макет з трьома колонками
Паралельно з використанням макета з двома колонками, застосовується також верстка в три колонки. У цьому випадку одна з колонок зазвичай містить навігацію - посилання на розділи сайту, друга - контент, інформаційне наповнення сторінки, а третя відводиться під невеликі тексти, форми, новини, рекламу. Загалом, багато чого можна розмістити в додатковій колонці, простір не буде порожнім. Також існує змішаний підхід, коли на головній сторінці сайту використовується три колонки, а на внутрішніх сторінках макет верстається у дві колонки. Це обумовлено обсягом та структурою інформації, головне, щоб користувачам було зручно знаходити та читати потрібні матеріали.
При створенні трьох колонок застосовуються ті самі принципи, що й при верстці двоколонкового макета. Використані прийоми можна умовно розділити на дві частини за властивостями CSS, за допомогою яких здійснюється побудова модульної сітки. У першому випадку це властивість float, яка дозволяє розміщувати шари поруч один з одним по горизонталі. Другий підхід - скористатися набором стильових властивостей, пов'язаних із позиціонуванням шарів. Розмірковувати про те, який метод краще, неправомірно, видимий результат все одно буде один, але кожен підхід має свої особливості.
Використання float
Властивість float дозволяє обтікати елемент. Значення left вирівнює шар за лівим краєм, а всі наступні елементи - текст, зображення або інші шари, розміщуються по його правій стороні. Значення right діє навпаки, вирівнюючи шар за правим краєм і змушуючи приєднуватися до нього інші шари зліва.
Властивість приєднання елементів між собою по горизонталі саме і потрібна, адже шари за замовчуванням розміщуються по вертикалі один під одним.
На малюнку 1 показаний макет, створений з використанням float і восьми шарами. Шість шарів чітко видно на малюнку як кольорові прямокутники з обрамленням, а ще два необхідно, щоб відокремити шари з заголовками від вмісту.
Код для створення макета, аналогічного малюнку 1, наведений нижче.
Приклад 1. Створення трьох колонок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Макет з трьома колонками</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#title1, #title2, #title3, #col1, #col2, #col3 { /* 1 */
font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */
font-weight: bold; /* Жирний начерк тексту заголовка */
font-size: 80%; /* Розмір шрифту */
color: white; /* Колір тексту заголовка */
width: 200px; /* Ширина колонок */
padding: 5px; /* Поля навколо тексту */
border: 1px solid black; /* Огорожа навколо шару */
margin-left: 5px; /* Відступ зліва */
margin-top: 2px; /* Відступ зверху */
float: left; /* Зчеплення колонок по горизонталі */
}
#col1, #col2, #col3 { /* 2 */
font-family: "Times New Roman", Times, serif; /* Шрифт з засічками */
font-size: 100%; /* Розмір шрифту */
font-weight: normal; /* Звичайний начерк */
color: black; /* Колір тексту */
}
/* Колір фону кожного шару */
#title1 { background: #B38541; }
#title2 { background: #008159; }
#title3 { background: #006077; }
#col1 { background: #EBE0C5; }
#col2 { background: #BBE1C4; }
#col3 { background: #ADD0D9; }
.tr { /* 3 */
clear: both; /* Скасовує дію float */
}
</style>
</head>
<body>
<div class="tr">
<div id="title1">Чебурашка</div>
<div id="title2">Гена</div>
<div id="title3">Шапокляк</div>
</div>
<div class="tr">
<div id="col1">Отряд м'якотілих, родина вухатих.<br>Це безпечна пухнаста тварина, яка тепер знаходиться на межі зникнення через недопустимі дії людей, які полюють на чебурашок через їхню цінну шерсть та смачне поживне м'ясо.</div>
<div id="col2">Отряд довгорилів, родина зелених.<br>Хижак. Ловить на полювальників, які полюють на чебурашок. Помилково відноситься деякими авторами до ряду земноводних. Не має нічого спільного з крокодилами.</div>
<div id="col3">Отряд бабок, родина смородиновредних.<br>Дуже небезпечне створіння через особливості розвитку у підлітковому періоді. Є симбіонтами з твариною crysa larisa.</div>
</div>
</body>
</html>Оскільки сам код представляє собою лише набір тегів DIV та тексту, що не викликає інтересу, розберемо докладно стиль, який і визначає зовнішній вигляд нашої сторінки.
Селектор title призначений для опису стилю заголовків, а col - встановлює вид колонки. Цифрами в імені селекторів позначимо номер колонки, щоб розділити стиль кожної з них, оскільки колір фону вони мають різний. Так, ідентифікатор title1 визначає параметри заголовка першої колонки, а col3 - зовнішній вигляд третьої колонки.
Перелік селекторів через кому (стиль, відзначений одиницею) називається групуванням і призначений для зручності та скорочення запису, щоб не повторювати одні й ті ж елементи кілька разів. Перші чотири властивості описують стиль тексту заголовка - шрифт, його розмір та колір. Ширина колонок за допомогою властивості width встановлюється фіксованою і рівною 200 пікселям. Відстань між колонками визначається властивістю margin-left, а між заголовком та його вмістом - значенням margin-top. Змінюючи ці величини, можна зменшувати або навпаки, збільшувати відстань між шарами. Властивість float слід вказувати обов'язково, без неї жодних колонок ми не отримаємо.
Наступний запис, відзначений двійкою, визначає вид тексту для всіх трьох колонок і не представляє важливості для створення макета. Та без класу tr (стиль, відмічений трійкою) не обійтись. Використана в ньому властивість clear скасовує дію float і змушує шари розміщуватись один під одним. Тим самим створюється заголовок і блок тексту під ним.
Колонки з роздільною лінією
Використовуючи прийоми розміщення шарів, можна створити три колонки, розділені між собою вертикальною лінією. Така лінія чітко відділяє один блок тексту від іншого і направляє погляд читача, не дозволяючи йому стрибати з однієї колонки на іншу. На малюнку 2 показаний приклад використання тексту з вертикальними лініями.
Для створення подібного макета знадобиться три шари, що утворюють колонки. Селектори col1 і col2 створюють лінію справа від блоку, застосувавши їх до першого і другого шару, отримаємо потрібну риску. Для третьої колонки лінійка справа не потрібна, тому додається ще один селектор col3.
Приклад 2. Створення колонок з роздільною лінією
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Лінія у колонках</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#col1, #col2, #col3 {
width: 200px; /* Ширина колонок */
padding: 0 7px; /* Поля по вертикалі і горизонталі */
float: left; /* Зчеплення колонок по горизонталі */
}
#col1, #col2 {
border-right: 1px solid #000; /* Параметри лінії справа від тексту */
}
</style>
</head>
<body>
<div id="col1">І мишка розповіла наступне. За давні-давні часи, людям, щоб дістати яскраві красиві яблука з високих дерев, потрібна була особлива вправність та вміння. Не кожен міг швидко влізти на яблуню (а ці дерева були тоді високі-дуже високі) і зуміти поласувати смачними плодами.</div>
<div id="col2">І ось одного разу прийшов добрий чарівник на ім'я Нортон, подивився він на страждання людей, покивав головою і зробив спеціальну відбивку, за допомогою я