Старі різновиди Web-дизайну та їх критика
Раніше в Інтернеті панували три різновиди Web-дизайну: текстовий, фреймовий і табличний. Кожен спосіб мав свої переваги і недоліки. Але все в тій чи іншій мірі програють четвертої різновиди Web-дизайну - контейнерної.
Першим з'явився, мабуть, текстовий Web-дизайн. Виконані таким чином Web-сторінки представляли собою звичайні текстові документи: набір абзаців, заголовків, цитат, тексту фіксованого форматування і таблиць, що слідують один за одним. Класичний приклад подібного Web-дизайну - створені нами до цього моменту Web-сторінки. Відкрийте в Web-браузері, скажімо, Web-сторінку index.htm - і ви побачите текстовий Web-дизайн у всій своїй, скажімо так, красі.
Гідність текстового Web-дизайну всього одне - виняткова простота HTML-коду. Справді, код таких Web-сторінок містить один тільки текст і, можливо, зображення і таблиці. Ніяких специфічних елементів, що формують Web-дизайн як такий, там немає.
Недоліків же у текстового Web-дизайну багато. По-перше, створені на його основі Web-сторінки виглядають занадто невибагливо. По-друге, практично відсутні кошти довільного розміщення елементів на Web-сторінці - вони можуть тільки слідувати один за одним зверху вниз. По-третє. а ось про це слід поговорити докладніше.
Чим об'ємніше HTML-код Web-сторінки, тим більше файл, в якому вона зберігається. Що гучніше розмір файлу, тим довше він завантажується. Чим довше файл завантажується, тим більше доведеться відвідувачеві чекати, поки запитана Web- сторінка з'явиться на екрані.
Чи немає способу завантажити не всю Web-сторінку цілком, а тільки її частину - власне основний вміст? На жаль, текстовий Web-дизайн такого способу не пропонує.
Подібний Web-дизайн отримав назву фреймового. Він мав незаперечне достоїнство - різке збільшення швидкості завантаження Web-сторінок. І тому широко застосовувався багато років, а подекуди залишився і до сих пір.
Однак у фреймів є істотні недоліки. По-перше, фрейми так і не були стандартизовані комітетом W3C, тому кожен Web-оглядач обробляє їх по-своєму, не в цілому, звичайно, а в нюансах, які, тим не менш, можуть бути істотними. По-друге, фрейми - дуже негнучкий елемент Web- сторінки; їх структуру неможливо поміняти.
Переваги табличного Web-дизайну:
- Таблиці - стандартна частина мови HTML, а значить, можна домогтися того, щоб засновані на них Web-сторінки відображалися однаково в усіх Web- браузерах.
- Таблиці HTML можна робити скільки завгодно складними, об'єднуючи їх осередки і вкладаючи одні таблиці в інші. Це дозволяє робити дуже складні Web- сторінки, що вміщають різнорідні фрагменти вмісту, мають не- скільки колонок тексту і більше схожі на газети.
- Таблиці і їх окремі осередки можна легко форматувати за допомогою стилів CSS, задаючи для них рамки, відступи, фон, вирівнювання та інші параметри. Однак табличний Web-дизайн володіє і безліччю недоліків:
- Для формування складних таблиць застосовується надзвичайно громіздкий і заплутаний HTML-код.
- Більш ранні версії Web-оглядачів не дуже вдало реалізовували обробку таблиць: вони спочатку завантажували таблицю цілком, а вже потім виводили її на екран. З огляду на, що таблиці, за допомогою яких формувалися Web-сторінки, дуже великі, завантаження таких Web-сторінок забирала багато часу.
Сучасні Web-оглядачі можуть виводити таблицю на екран в процесі її завантаження. Це "вміє" навіть Internet Explorer, що славиться своїм, м'яко кажучи, консерватизмом. Так що остання проблема відпала.
Як бачимо, все три старих принципу Web-дизайну, разом з перевагами, мають і серйозні недоліки. Тому в даний час вони повільно, але вірно відступають під натиском амбітного новачка, ім'я якого.
Сутність контейнерного Web-дизайну
Для завдання різних параметрів блокових контейнерів передбачені спеціальні атрибути стилю CSS. До таких параметрів належать розміри (ширина і висота), місце розташування контейнерів і їх поведінку при переповненні. Також ми можемо поставити для контейнерів колір фону, створити відступи і рамки, щоб їх виділити (про параметри відступів і рамок йтиметься у розділі 11).
І що, контейнерний Web-дизайн так вже й хороший? Давайте розглянемо недоліки трьох старих принципів Web-дизайну та з'ясуємо, чи зможе він їх вирішити.
- "Монолітність" Web-сторінок - у текстового і табличного Web-дизайну. Сучасні Web-оглядачі дозволяють за допомогою спеціально створеного поведінки завантажити в контейнер Web-сторінку, збережену в окремому файлі, т. Е. Організувати довантажувати вміст. Ми займаємося цим в главі 18.
- "Нестандартність" фреймів - у фреймового Web-дизайну. Контейнери та відповідні теги офіційно стандартизовані комітетом W3C і обробляються всіма Web-оглядачами однаково.
- Громіздкість HTML-коду - у табличного Web-дизайну. HTML-код, що формує контейнери, виключно компактний. Як ми вже знаємо, блоковий контейнер формується всього одним парним тегом
- Повільне завантаження Web-сторінок - у табличного Web-дизайну. Всі Web-оглядачі відображають вміст контейнерів прямо в процесі завантаження, так що Web-сторінки візуально завантажуються дуже швидко.
І що, контейнерний Web-дизайн такий хороший? І він зовсім не має недоліків? На жаль, нічого досконалого в світі немає.
Контейнерний Web-дизайн програє табличному в можливості реалізації складного дизайну Web-сторінок. Таблиця дозволяє створити на Web-сторінці безліч колонок різної ширини, що містять різний вміст. Щоб зробити це за допомогою контейнерів, швидше за все, доведеться застосовувати вкладені одна в одну контейнери, складні стилі і, можливо, поведінка, яке вже після закінчення завантаження Web-сторінки в своєму розпорядженні контейнери в потрібних місцях. Це, мабуть, єдиний недолік контейнерного Web-дизайну.
Що ж, з контейнерним Web-дизайном все в основному ясно. Давайте попрактікуемся. Переробимо наші Web-сторінки із застосуванням контейнерного Web-дизайну - "легкого", простого, сучасного.