Робота з контейнерами

Дизайн веб-сайту, в сучасних умовах веб-розробки, є одним з найбільш важливих критеріїв оцінки сайту в цілому. Згадайте скільки разів ви йшли з тематичного сайту побачивши непоказного оформлення і «кривий» навігації.

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

Поняття контейнерного дизайну

Якщо підійти методологічно до питання про дизайн веб-сторінок, то можна виділити наступні групи (школи) дизайну:

текстовий;
фреймовий;
табличний;
контейнерний.

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

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

З урахуванням того, що до зовнішнього вигляду сучасної веб-сторінки висуваються певні вимоги (всі ми звикли до панелі навігації зліва, основним меню сайту в «шапці» і т.п.), обійтися тільки текстової версткою вкрай складно. Фактично даного підходу в чистому вигляді ніхто не користується, навіть незважаючи на те, що час завантаження сторінок при цьому мінімально і верстка проста.

Крім того, загальні елементи для всіх веб-сторінок сайту не завантажуються, а прописуються для кожної сторінки. Тобто кожен раз при відкритті чергової сторінки завантажуються всі її елементи, навіть в разі, якщо змінюється фактично, в порівнянні з попередньою сторінкою, тільки змістовна її частина.

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

Інакше кажучи, фрейм відображає вміст іншої веб-сторінки, адреса якої прописувалася в параметрах фрейму. Таким чином, веб-сторінка складалася з набору фреймів, при цьому завантажує тільки необхідний вміст. Структуру фреймів, правда, при цьому поміняти не можна.

Як і текстовий дизайн, фреймовий в даний час практично не застосовується.

Ідея табличної верстки сайтів лежить на поверхні. На веб-сторінці розміщується html-таблиця, в клітинках якої і міститься контент. Відповідно, візуально веб-сторінку можна розділити на необхідну кількість блоків («шапка» сайту, панель навігації і т.д.).

Табличний дизайн є досить популярним і поширеним, особливо в середовищі початківців розробників. Основною перевагою підходу є його зрозумілість і можливість уникнути проблем сумісності. З урахуванням того, що до кожної клітинки таблиці можна застосувати власний CSS стиль, можна говорити про те, що підхід до кінця себе ще не вичерпав.

Контейнерний підхід при верстці і дизайні сайтів полягає в використання елементів-контейнерів для розміщення контенту. Контейнери (парний тег <div></div>) є блоковими елементами, до кожного контейнера може бути застосований індивідуальний стиль.

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

Контейнери

Відзначимо, що <div> не є єдиним елементом-контейнером. Але оскільки, в контексті даної лекції, ми говоримо саме про контейнерний дизайн, то і розглядати будемо тільки його базовий елемент - тег <div>.

Парний тег <div> використовується для груповання елементів веб-сторінки, як правило з метою управління зовнішнім виглядом вмісту, за допомогою CSS стилів.

Робота зі стилями контейнерів

Для контейнерів застосовується той же набір атрибутів стилів, що і для інших елементів веб-сторінки. Розглянемо ключові, з точки зору дизайну, атрибути стилю при роботі з <div> контейнерами.

Управління розмірами контейнерів

<Div>- контейнер являє собою прямокутну область. Значення висоти і ширини даної області визначаються такими стандартними атрибутами стилів, як:

висота
- min-height - задає мінімальну висоту елемента;
- height - задає висоту елемента;
- max-height - задає максимально можливу висоту елемента;
ширина
- min-width - задає мінімальну ширину елемента;
- width - задає ширину елемента
- max-width - задає максимально можливу ширину елемента.

Кожен із зазначених атрибутів стилю може приймати в якості значень будь-які одиниці довжини, підтримувані в CSS, наприклад:

width: 200px (в пікселях);
width: 2in (в дюймах);
width: 20% (в залежності від значення аналогічного атрибута батьківського елемента).

Також допустимо використання наступних значень атрибутів управління розмірами:

auto - розмір встановлюється в залежності від розмірів контенту;
inherit - значення успадковується від батька.

Управління розміщенням контейнерів

Як і будь-який блоковий елемент, контент тега <div> почнеться з нового рядка. Вміст кількох тегів <div> буде розташовано вертикально, один під одним. Припустимо, що ми хочемо отримати веб-сторінку такого вигляду:

Додамо наступний html - код для розміщення п'яти контейеров:

<Div id = "content"> content </ div>

<Div id = "right"> right </ div>

<Div id = "bottom"> bottom </ div>

У таблицю стилів додамо відповідні стилі для кожного контейнера:

#top {height: 20px; width: 412px; border: 3px double black}

#left {height: 200px; width: 50px; border: 3px double black; }

#content {height: 200px; width: 300px; border: 3px double black; }

#right {height: 200px; width: 50px; border: 3px double black; float: left}

#bottom {height: 20px; width: 412px; border: 3px double black; }

Для наочності, для кожного контейнера вказані параметри відтворення його кордонів. В результаті отримаємо наступне:

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

Для управління розміщенням елементів використовується атрибут стилю float, Який приймає такі значення:

left - елемент вирівнюється по лівому краю батька, інші елементи "обтікають" вказаний по правій стороні;
right - елемент вирівнюється по правому краю батька, інші елементи "обтікають" вказаний по лівій стороні;
none - обтікання елемента не вказано;
inherit - значення успадковується від батьківського елемента.

Для того щоб елементи розташувалися по горизонталі один за іншим, необхідно задати одне і те ж значення float для наступних один за одним елементів.

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

Атрибут clear може набувати таких значень:

left - елемент буде розташований нижче всіх елементів, значення атрибута float у яких одно left;
right - елемент буде розташований нижче всіх елементів, значення атрибута float у яких одно right;
both - елемент буде розташований нижче всіх елементів, значення атрибута float у яких одно left або right;
none - скасування властивостей атрибута clear;
inherit -значення успадковується від батьківського елемента.

Змінимо стилі контейнерів з попереднього прикладу наступним чином:

#top {height: 20px; width: 412px; border: 3px double black}

#left {height: 200px; width: 50px; border: 3px double black; float: left}

#content {height: 200px; width: 300px; border: 3px double black; float: left}

#right {height: 200px; width: 50px; border: 3px double black; float: left}

#bottom {height: 20px; width: 412px; border: 3px double black; clear: left}

Цього достатньо для того, щоб отримати бажаний результат:

<!DOCTYPE html>

<html>

<head>

#top {height: 20px; width: 412px; border: 3px double black}

#left {height: 200px; width: 50px; border: 3px double black; float: left}

#content {height: 200px; width: 300px; border: 3px double black; float: left}

#right {height: 200px; width: 50px; border: 3px double black; float: left}

#bottom {height: 20px; width: 412px; border: 3px double black; clear: left}

</style>

</head>

<body>

<Div id = "content"> content </div>

<Div id = "right"> right </div>

<Div id = "bottom"> bottom </div>

</body>

</html>

Переповнення контейнерів

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

Для управління відображенням вмісту контейнера в таких випадках використовується атрибут стилю overflow, який приймає такі значення:

visible - відображається весь контент навіть за межами контейнера;
hidden - відображається тільки область всередині контейнера, решта контенту ховається;
scroll - додавання смуг прокрутки контейнеру, смуги будуть відображатися навіть якщо в них немає необхідності;
auto - смуги прокрутки з'являться тільки в разі потреби.

Існує можливість управління відображенням змісту контейнера окремо по горизонталі і вертикалі, відповідно за допомогою атрибутів overflow-x і overflow-y, значення яких аналогічні значенням overflow.

Практична частина

Вправа 1

Виконайте завдання за зразком:

Інструкція та матеріали для роботи за посиланням: Google-диск

Page updated

Google Sites

Report abuse