Резиновий дизайн. Двоколоночний макет
«Резиновим дизайном» називається структура веб-сторінки, яка автоматично адаптується під певну ширину вікна браузера користувача. Такий макет має декілька переваг:
- використовується усе доступне простір браузера;
- у користувачів з «малими» моніторами не виникає горизонтальних смуг прокрутки;
- користувачі з «великими» моніторами можуть бути задоволені тим, як ефективно використовується вся площа екрана, тобто гроші на монітор були витрачені не марно;
- веб-сторінки зручно друкувати на папері будь-якого формату.
Серед недоліків можна відзначити вибагливість різних браузерів до «резинового» макету та велику ймовірність помилок. Це ускладнює верстку веб-сторінок.
При верстці веб-сторінок найпопулярнішим є двоколоночний макет, при цьому одна колонка містить набір посилань для навігації по сайту, а друга, ширша—контент. Втім, хоча така схема і є традиційною, це не означає, що обов'язково її потрібно дотримуватися. Використання всієї ширини вікна дозволяє ефективніше задіяти площу веб-сторінки. Так що можна додати три, а навіть чотири колонки. Це залежить виключно від обсягу інформації, що є. Врахуйте також зворотний ефект—чим більше матеріалу, тим більше розсіюється увага відвідувача, і йому складніше орієнтуватися на сайті.
Для створення двоколоночного макету застосовуються два способи. Перший підхід використовує властивість float, що дозволяє злити один шар з іншим по горизонталі, а другий базується на встановленні положення шарів через позиціонування. Незважаючи на деякі недоліки, обидва підходи мають право на існування в арсеналі верстальника і їх потрібно знати для кращого розуміння принципів роботи з шарами.
Використання плаваючих елементів
Термін «плаваючий елемент» не дуже щасливий, проте час від часу зустрічається в літературі. Слід розуміти, що ніхто нікуди не пливе, так називають елемент, що оточується з різних сторін текстом чи іншими об'єктами веб-сторінки. Властивість float визначає, по якій стороні буде вирівнюватися шар, при цьому решта елементів обходитимуть його з інших сторін.
Розглянемо варіант, коли ліва колонка має певний розмір, а ширина правої колонки встановлюється автоматично, виходячи з ширини вікна браузера. При цьому ширина лівої колонки може бути вказана в пікселях або відсотках. У табл. 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 наведено код веб-сторінки, на якій є: заголовок, дві колонки та контактна інформація. Ширина першої колонки з ім'ям menu фіксована і встановлена як 100 пікселів, залишений простір зайнято колонкою з ім'ям content.
Приклад 1. Код для створення двох колонок
<!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=utf-8">
<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.html">Посилання 1</a><br>
<a href="link2.html">Посилання 2</a><br>
<a href="link3.html">Посилання 3</a><br>
<a href="link4.html">Посилання 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 показані стильові властивості, які потрібні для цього випадку.
| Для правого шару шириною 20% | |
|---|---|
| Шар 1 float: right width: 20% | Шар 2
margin-right: 21% |