Фіксований дизайн. Основи

Термін "фіксований дизайн" використовується для позначення макету сторінки, який створюється на основі шарів заданої ширини. Вибір ширини залежить від орієнтації на певне розширення моніторів користувачів. Наприклад, для розширення 1024х768 пікселів розмір таблиці слід брати не більше 1000 пікселів. Для всіх користувачів сайт, побудований на такому макеті, буде відображатися коректно, але при великих розширеннях виявляється занадто багато пустого місця. Оскільки найпопулярнішим серед користувачів Інтернету є розширення 1024x768, розробники сайтів орієнтуються саме на нього і використовують загальну ширину шарів 900–1000 пікселів.

При фіксованому дизайні блок з матеріалом розташовується зазвичай у лівому краю або по центру екрана. Останній варіант бажаніший, оскільки широкі поля навколо не так помітні при великих розширеннях монітора.

Нумеровані обозначення, що використовуються на зображенні: 1 – заголовок сайту; 2 – лівий шар, який зазвичай містить елементи навігації; 3 – правий шар, що містить інформаційне наповнення сторінки; 4 – "підвал", нижча частина веб-сторінки, де зазвичай розміщують контактну інформацію та різні кнопки.

Для створення макету, показаного на зображенні, слід обдумати деякі попередні моменти – яка буде загальна ширина всіх елементів; де буде розташований макет – по центру сторінки або у лівому краю; які кольори та шрифти будуть використані і т.д. Кроки, які потрібно зробити перед написанням коду, описані далі.

Ширина шарів

Спочатку слід визначити загальну ширину ілюстративних елементів веб-сторінки. Як вже згадувалося вище, це значення визначає сам дизайнер на основі попереднього збору даних про майбутніх користувачів сайту. Більшість дизайнерів встановлюють ширину, виходячи з власного зручності. Отже, у прикладі 1, використовуючи цей же принцип, ширина всіх шарів обрана 750 пікселів.

Таким чином, вся ширина відома, тепер потрібно розділити її на дві частини. Шар, позначений цифрою 2, відводиться під меню, його ширина повинна бути мінімальною, але достатньою для комфортного читання тексту. Зробимо її круглим числом, наприклад, 200 пікселів. Усе інше буде займати контент.

Висота шарів

Висота шару змінюється динамічно в залежності від його вмісту. Якщо бажаєте встановити висоту шару самостійно, можна скористатися властивістю height і вказати висоту в пікселях, відсотках або інших одиницях CSS. Враховуйте, що при такому підході вирівнювання вмісту шару відбувається завжди по його верхньому краю, тому не варто задавати занадто велику висоту (приклад 1).

Приклад 1. Встановлення висоти шару

<style type="text/css">
 #top {
  text-align: left; /* Вирівнювання по лівому краю */
  width: 750px; /* Ширина шару */
  background: #800000; /* Колір фону */
  height: 50px; /* Висота шару */
 } 
</style>

Так само висоту шару можна змінювати і відступами, змінюючи значення padding-top і padding-bottom (приклад 2). Проте цей спосіб менш універсальний.

Приклад 2. Встановлення висоти шару за допомогою відступів

<style type="text/css">
 #top {
  padding-top: 15px; /* Відступ зверху */
  padding-bottom: 15px; /* Відступ знизу */
 }
</style>

У цьому випадку висота шару складається з верхнього та нижнього відступів та висоти вмісту, який буде розміщуватися по центру вертикалі.

Якщо висота вмісту шару перевищує його висоту, встановлену за допомогою властивості height, то браузер залишає розміри шару незмінними, а вміст накладає поверх нього.

Вирівнювання по центру

Якщо є необхідність залишити макет вирівняним по лівому краю вікна, нічого робити не потрібно, цей ефект відбудеться сам собою. А от щоб макет опинився по центру вікна браузера, допоможе ще один додатковий шар, який буде служити каркасом і включати в себе всі інші шари. Назвемо його container і пропишемо для нього такий стиль (приклад 3).

Приклад 3. Вирівняння по центру

<style type="text/css">
 #container {
  width: 750px; /* Ширина шару */
  margin-right: auto; /* Відступ справа */
  margin-left: auto; /* Відступ зліва */
 }
</style>

Властивості margin-right і margin-left із значенням auto задають вирівнювання шару по центру веб-сторінки. У цьому ж селекторі вказуємо і загальну ширину всіх шарів.

Вирівнювання макета веб-сторінки по правому краю, як правило, ніколи не робиться – використовується вирівнювання або по центру, або по лівому краю.

Відступи на веб-сторінці

Горизонтальні та вертикальні відступи від краю браузера до вмісту веб-сторінки вбудовані в браузер за замовчуванням. Тим не менш, можна змінити значення цих властивостей, збільшуючи чи зменшуючи відступи на власний розсуд. Наприклад, можна встановити відступ від верхнього краю вікна до заголовка сторінки, або зовсім його видалити.

Відступи задаються властивостями CSS margin і padding для селектора BODY. Наявність двох властивостей замість однієї, знову ж таки, вимагають інтереси різних браузерів, margin – Internet Explorer, а padding – Opera і Firefox. Поєднання різних властивостей гарантує, що веб-сторінка відображатиметься однаково в різних браузерах.

Керувати окремими відступами від різних країв екрана можна за допомогою властивостей margin-top, margin-bottom, margin-right і margin-left, які відповідно змінюють відстань від верхнього, нижнього, правого і лівого країв вікна браузера. Перед їх використанням, слід задати нульове значення властивості margin (приклад 4).

Приклад 4. Зміна верхнього відступу від краю браузера

<style type="text/css">
 BODY {
  margin: 0; /* Прибираємо відступи */
  margin-top: 10px /* Встановлюємо відступ зверху */
 } 
</style>

Кольори

CSS має кілька опцій для визначення кольору тексту та фону шару. Властивість color вказує колір тексту в шарі, а background – колір фону (приклад 5).

Приклад 5. Зміна кольору

<style type="text/css">
 #menu {
  color: white; /* Колір тексту */
  background: #008080 /* Колір фону */
 }
</style>

Колір фону для шару menu в прикладі вказаний темно-зеленим, а тексту – білим.