У попередній частині ми займалися створенням вистави для Web-сторінок нашого Web-сайту. І тим самим зробили їх привабливішими.
Подібні убогі Web-творіння були характерні для середини 90-х років - зорі епохи WWW. Зараз же вони виглядають, щонайменше, архаїчно.
Так що наступний крок, який ми зробимо, - створення більш привабливих і зручних для користувача Web-сторінок. Інакше кажучи, ми займемося Web-дизайн. А саме контейнерним Web-дизайном.
На цей раз теоретична частина буде досить довгою. Ми дізнаємося, за якими принципами будується дизайн сучасних Web-сторінок, розглянемо найбільш часто застосовується схему такого дизайну, з'ясуємо, що таке розмітка і за допомогою чого вона створюється, і познайомимося з новою для нас схемою створення навігації по Web-сайту, більш зручною, ніж знайома нам ієрархічна (див. розділ 6).
Недоліки текстового Web-дизайну
Web-дизайн, на основі якого ми створювали Web-сторінки нашого першого Webсайта, часто називають текстовим. Його відмінність: всі фрагменти вмісту Web-Сторінки знаходяться в одному "потоці" тексту і оформляються як окремі його глави і параграфи, які супроводжуються заголовками. Це найстаріша різновид Web-дизайну; саме так виглядали перші Web-сторінки.
Глава 13. Контейнерний Web-дизайн
Гідність у текстового Web-дизайну одне - простота реалізації. Справді, Web-сторінка містить лише інформацію, яка і повинна на ній бути присутнім; будь-які спеціальні елементи, призначені для створення самого дизайну, на ній в цьому випадку відсутні.
Недоліків у нього помітно більше.
Використовувана в Web-сайтах, побудованих із застосуванням текстового Web-дизайн, ієрархічна система навігації незручна, т. К. Не дозволяє перейти на потрібну Web-сторінку одним клацанням миші.
Текстові Web-сторінки в даний час виглядають вкрай архаїчно.
Так що нам доведеться шукати альтернативу текстовому Web-дизайну, позбавлену зазначених недоліків.
Розмітка Web-сторінок
І така альтернатива є!
Замість одного "потоку" тексту на Web-сторінці створюється кілька. В результаті Web-сторінка розбивається на кілька окремих колонок, кожна з яких містить свій фрагмент її вмісту. Так, виділяються окремі колонки для смуги навігації, новин Web-сайту і, зрозуміло, основного вмісту Web-сторінок.
До речі, схема, представлена на рис. 13.1, зараз використовується на практиці найбільш часто.
Мал. 13.1. Схема Web-сторінки, створеної з використанням розмітки
В основному, незмінною залишається і сама структура колонок і широких блоків. Якщо в ній і відбуваються зміни, то не дуже значні. Наприклад, колонка з новинами Web-сайту, присутня на головній Web-сторінці, на інших Web-сторінках відсутня.
І колонки, і широкі блоки в даний час формуються за допомогою блокових контейнерів. (Раніше для цього також використовувалися таблиці.) Установки позиціонування і розмірів цих елементів задаються за допомогою стилів CSS. Як бачимо, для цього використовуються вже знайомі нам інтернет-технології.
Сукупність елементів Web-Сторінки, призначених для розбиття Web-Сторінки на колонки і широкі блоки, носить назву розмітки. Крім того, так само називається сам принцип розбивки вмісту Web-сторінки на фрагменти.
Переваги застосування розмітки при створенні Web-сторінок перераховані далі.
Оскільки кожен значущий фрагмент вмісту розташований окремо від інших, значно спрощується процес пошуку на Web-сторінці потрібної інформації.
Web-сторінки, створені з використанням розмітки, виглядають помітно краще і сучасніше, ніж прості, текстові.
Недоліки, на жаль, теж мають місце.
Глава 13. Контейнерний Web-дизайн
Кожна Web-сторінка, крім цього, повинна включати в свій склад елементи, що формують саму розмітку, що додатково збільшує її обсяг.
Оскільки Web-сторінки містять безліч однакових фрагментів (смуга навігації, заголовок Web-сайту та ін.), Зростають трудовитрати на правку вмісту цих фрагментів. Так, якщо нам буде потрібно змінити, скажімо, смугу навігації, доведеться зробити це на всіх Web-сторінках Web-сайту.
Але недоліки ці не такі істотні і зовсім блякнуть перед багатющими можливостями оформлення Web-сторінок, що надаються розміткою. Найчастіше такі Web-сторінки за різноманітністю оформлення не поступаються сторінок газет, а то і перевершують їх. А ви думаєте, чому друкована преса вмирає.
Розмітка за допомогою блокових контейнерів. Контейнерний Web-дизайн
Як вже говорилося, на даний момент розмітка Web-сторінок найчастіше створюється за допомогою блокових контейнерів, знайомих нам по главі 12. Тому є кілька причин.
За допомогою контейнерів ми можемо зробити дизайн практично будь-якої складності, що складається з декількох колонок і широких блоків, що мають різну ширину, виділених кольоровим фоном, відступами і рамками. Ці контейнери можуть містити що завгодно: текст, зображення, таблиці та інші контейнери з іншим вмістом.
HTML-код, який створює блоковий контейнер, надзвичайно компактний. Справді, щоб помістити на Web-сторінку контейнер, потрібно всього один парний тег -
Контейнери обробляються сучасними Web-оглядачами дуже швидко, прямо-таки блискавично.
На жаль, контейнери як засіб створення розмітки мають і недоліки.
В деяких випадках за допомогою контейнерів важко реалізувати потрібний дизайн і доводиться, крім них, застосовувати ще і таблиці.
По ряду причин (ми їх розглянемо пізніше) вміст Web-сторінок, побудованих на основі контейнерів, може мати тільки фіксовану ширину. Фактично такі Web-сторінки розробляються під певний дозвіл екрана.
Втім, ці недоліки можна назвати критичними. В іншому випадку контейнери як засіб для створення розмітки навряд чи завоювали б популярність.
Залишилося сказати, що спосіб створення розмітки за допомогою блокових контейнерів отримав назву контейнерного Web-дизайну.