Недоліки табличної верстки

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

Самий істотний недолік таблиць — дуже повільне завантаження і відображення. Справа в тім, що практично всі браузери (зокрема і Internet Explorer) просто не в змозі вивести таблицю на екран, не завантаживши її цілком. А якщо таблиця велика, то...

ЗВЕРНІТЬ УВАГУ

Розроблювачі Web-браузерів Opera і Mozilla затверджують, що їхні браузери можуть виводити таблиці на екран по мірі завантаження.

Причини, що можуть викликати уповільнення в завантаженні таблиць:

1. Великі-великі, дуже великі таблиці! І звідси рада — не робіть великих таблиць, якщо без них не обійтися, то розбивайте їх на декілька маленьких. Маленькі таблиці завантажуються швидше, і відвідувач вашого сайту буде бачити, що хоч щось відбувається і зможе прочитати хоч який-небудь текст.

2. Відображення таблиці може дуже сповільнитися, якщо для неї або її осередків задані відносні величини ширини і висоти. При цьому браузеру спочатку прийдеться обчислити ширину і висоту вікна, у якому відображається Web-сторінка (або ширину і висоту осередку зовнішньої таблиці). А зробити він це зможе тільки тоді, коли закінчиться обробка всієї сторінки, тобто не завжди дуже швидко. Бажано використовувати абсолютні значення розмірів таблиць і осередків (по можливості, а не завжди!).

3. Обробка і вивід Web-сторінки може сильно сповільнитися, якщо в ній використовуються багаторазово вкладені таблиці. Особливо справа ускладнюється, якщо вкладені таблиці мають відносну величину. Рад — ретельна розробка структури таблиць.

4. Іноді браузер не коректно відображає таблицю, якщо в осередку нічого немає (особливо цим страждає Netscape Navigator). Це відчутно помітно, якщо ви використовували стилі для завдання границь осередків або намагалися створити вертикальну (горизонтальну) смужку. Для рішення даної проблеми досить помістити в порожній осередок символ нерозривного пробілу або пустишку — "однопіксельний GIF".

Це всі були мінуси, ну а плюси зрозумілі. Ви позиціонуєте всі об'єкти на своїй сторінці так, як хочете, і відвідувачі бачать на своїх екранах те ж саме, що і ви на своїх.

Хоча останнім часом замість таблиць використовують шари, які можна накладати один на одного, домагаючись цікавих ефектів... Але, на жаль, Front Page 2000 з ними не працює, а от 2003 працює і дуже навіть добре.

Принципи побудови системи навігація

Інтернет – це навігаційна система. Основна дія користувача при перегляді Web-сторінок полягає в щигликах мишкою по гіперпосиланнях для переміщення з їхньою допомогою від сторінки до сторінки.

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

1. Де я знаходжуся?

2. Де я вже побував?

3. Куди я можу піти?

 

Де я знаходжуся?

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

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

1. Щодо структури сайту

2. Відносно усього Інтернет

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

ПРИКЛАД

Новости > Новости Лукоморья > Конкурсы > Конкурс на кращу колискову пісню

або

Новости

Уроки

Советы

Загадки

Остеркласс

Тесты

Разное

Також дуже важливо мати зрозумілий заголовок сторінки, що представляє її основний зміст.

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

Щоб користувачі довідалися, на якому сайті вони знаходяться, їм треба про це сказати. Таким чином, правило номер один – поміщати логотип (або інший ідентифікатор сайту) на кожній сторінці. Логотип повинний мати постійне місце розташування (бажано в лівому верхньому куті) і повинний бути організований як посилання на першу сторінку сайту.

Де я був?

Знати, які посилання ведуть до вже переглянутих сторінок, корисно по двох причинах:

1. Це допомагає користувачам зрозуміти структура сайту.

2. Дозволяє не ходити нескінченно на ті самі сторінки.

Саме тому рекомендується встановлювати колір переглянутих гіперпосилань блідіше кольору самого гіперпосилання, як би говорячи: – «Ти тут уже був!»

Куди я можу піти?

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

Види навігації

У залежності від типу сайту розрізняють кілька видів навігації:

• Лінійна навігація.

• Ієрархічна навігація.

• «Хлібні крихти».

• Контекстно-залежна навигация.

• Карта сайту.

Розглянемо кожну з них більш докладно.

Лінійною навігацією називається навігація, при якій відбувається послідовний перехід від сторінки до сторінки. Такий тип характерний для перегляду серії фотографій, перегляду сторінок однієї великої статті, перехід від одного розділу книги до іншого...

ПРИКЛАД

Стандартна схема лінійної навігації виглядає так:

Попередня сторінка | Наступна сторінка

Сторінка: 1 2 3 4 5 6 7 8 9

1 2 3 4 51 ...1 39

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

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

• Термін «Наступна сторінка» («Далі», «Уперед», ...) дає лише представлення про те, що відбувається перехід на іншу сторінку, але, як правило, не говорить про її зміст.

• Якщо показано список з номерами сторінок, то представити, за який з них ховаються потрібні матеріали неможливо.

• Список з великої кількості сторінок займає багато місця і незручний для перегляду.

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

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

Схема ієрархічної навігації приведена на рис. 2.3.

Рисунок 2.3 – Схема ієрархічної навігації

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

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

На приведеному вище малюнку показані 3 розділи Новини, Уроки, Ради. Кожний з цих розділів містить різну кількість сторінок, а розділ Уроки містить ще і підрозділ.

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

"Хлібні крихти" – навігаційний прийом, у якому показується весь ієрархічний шлях від першої сторінки вниз через усі рівні до поточної сторінки одержав назву «хлібних крихт». Чому? Напевно автори цього трохи незвичайної назви мали на увазі відомий по казках класичний спосіб повідомлення своїм родичам про шляху, по якому вас несуть у темний ліс: викидання камінчиків, хлібних крихт і т.п.

Особисто мені по душі більше порівняння з матрьошкою— для того, щоб добратися до самої маленької, необхідно по-черзі, одну за іншою, витягти всіх матрьошок.

Рисунок 2.4 – Схема навігації "Хлібні крихти"

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

Главная страница > Уроки > Остеркласс > Уроки домоводства > Як самому зробити вентилятор

Кожен напис, крім останньої, служить посиланням на той розділ або сторінку, де йде опис предмета. Наприклад, якщо ми піднімемося на рівень вище – «Уроки домоведення», то ми можемо вибрати не тільки цей урок, а й будь-який інший. Якщо ми дійдемо до рівня «Остеркласс» то в ньому ми крім «Уроків домоведення» можемо вибрати інший, що нас зацікавив. І т.д. Остання фраза в ряді крихт показує, що ви знаходитеся на цій поточній сторінці, тому посилання в даному випадку не потрібне.

Переваги використання «крихт»:

• Схема наочна й очевидна, відразу зрозуміло, де ми знаходимося в структурі сайту.

• Завжди їсти можливість повернутися на попередній рівень або на головну сторінку.

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

• Кілька рад щодо оформлення «крихт»:

• Як роздільники краще використовувати символ більше (>), слеш (/) або зворотний слеш (\). Символ вертикальна риса (|) у даному випадку не годить, він погано показує вкладеність пунктів.

• Починати бажано завжди з головної сторінки, щоб показати початок сайту.

• Блок з «крихтами» бажано розміщати у верхній частині сторінки. Якщо сторінка довга, то даний блок можна продублювати внизу.

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

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

Дивися також:

    • История острова Буяна

    • Тайны сна

    • Кот Баюн и его сподвижники снотворного

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

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

Тому рішення – бути карті сайту на вашому сайті або не бути залишається за вами. Хоча грамотно оформлена карта сайту ще нікому не заважала...