Для того щоб уникнути «с'езжанія» елементів html-документа один щодо одного при зміні параметрів екрану, застосовується наступний прийом: всі компоненти web-сторінки полягають у відповідні комірки невидимою таблиці, при цьому кожному об'єкту призначається одне, строго певне положення. Даною таблиці можна призначити строго певну ширину в пікселах, наприклад, 640 точок, після чого жорстко позиціонувати її по центру екрана або «притиснути» до лівого його краю. Такий варіант компонування сайту можна назвати статичним. оскільки ширина таблиці не змінюється в залежності від екранного дозволу. Зрозуміло, при зміні параметрів екрану не відбувається ні найменшого зміщення елементів дизайну сторінки.
Простота алгоритму верстки документа. Оптимізувавши сторінку для відображення з екранним роздільною здатністю 640x480 пікселів, ви можете бути впевнені, що при зміні користувача екранних налаштувань елементи дизайну не «попливуть».
Даний варіант компонування сайту в більшості випадків (при дотриманні ряду додаткових умов) дозволяє домогтися ідентичності відображення html-документа в браузерах MicrosoftInternet Explorer і Netscape Navigator.
При відображенні документа на комп'ютері з високим екранним дозволом по краях екрану або з правого його боку залишається помітне порожнє поле.
Інший підхід - коли ширину невидимою таблиці, яка містить фрагменти web-сторінки, задають у відсотках від поточної ширини екрану. При збільшенні екранного дозволу таблиця «розтягується» по горизонталі, і всі розміщені в її осередках елементи, позиційований або по центру, або по краях стовпців, зміщуються відповідно до встановленого алгоритму. В силу того, що параметри таблиці змінюються в залежності від налаштувань екрану, такий принцип компонування html-документа можна назвати динамічним.
Документ розтягується по всій ширині екрану, не залишається невикористаних порожніх полів.
Складність верстки та налагодження сторінки, досить часто виявляється неадекватність відображення таких документів в браузерах Microsoft Internet Explorer і Netscape Navigator.
Системи навігації сайту
Навігація по вузлу - це той механізм, який дозволяє відвідувачеві знайти те, що ви хочете йому показати. Від зрозумілості системи навігації по вузлу, продуманості її елементів залежить, чи досягне відвідувач своєї мети або піде, так і не розібравшись в нетрях документів. Саме зручна навігація, а не красиві картинки, змушує відвідувачів повертатися на ваш вузол, так як вони знають, що з легкістю знайдуть необхідний матеріал.
Організація документа.
Існує кілька основних правил організації документа:
найактуальніша інформація повинна бути видна в першому екрані, а якщо її багато, то хоча б її початок або заголовок;
елементи навігації (меню) повинні бути очевидні і помітні, відвідувач міг прийти до вас в перший раз, і йому не знайомий ваш стиль;
бажано, щоб елементи навігації поміщалися в один екран, якщо звичайно у вас не мегаузел;
сторінка повинна ясно говорити, чому присвячений цей вузол;
Не робіть сторінку повністю графічною - що б ви там не думали, завжди знайдеться причина, щоб в майбутньому додати туди текст;
стежте за її "вагою" - на даний момент оптимальним є розмір в 30-40 (50) кілобайт; якщо вона все-таки дуже "важка" - мінімізуйте кількість графіки, розбийте таблицю (якщо в неї поміщена вся сторінка) на кілька таблиць.
Основну частину документа займає так зване текстове поле - ділянка, де і розміщується смислове наповнення сторінки: змістовний інформаційний текст і ілюстрації. Розташування текстового поля залежить в першу чергу від того, яким чином web-дизайнер розмістить інші елементи документа.
Наступною обов'язковою складовою частиною web-сторінки є елементи навігації - гіперпосилання, що зв'язують даний документ з іншими розділами сайту. Елементи навігації можуть бути виконані у вигляді текстових рядків, графічних об'єктів, тобто кнопок, або активних компонентів, на- приклад Java-аплетів. Розташовувати елементи навігації слід таким чином, щоб вони завжди були «на увазі», «під рукою», тобто так, щоб користувачеві не доводилося «відмотувати» сторінку назад, якщо текстове поле займає по висоті кілька фізичних екранів, після чого довго шукати посилання на інші розділи. Найбільш усталеним підходом є розміщення елементів навігації у лівої межі сторінки.
Приклад компонування сайту, що містить повний набір описаних вище складових, показаний нижче на рис.5. У ньому вибрано позиціонування елементів навігації по лівій межі документа.
Рис.8 - Приклад компонування web-сторінки з лівим позиціонуванням елементів навігації
На практиці часто зустрічаються web-сайти, в дизайні яких елементи навігації позиціоновані по правій межі екрану. В цьому випадку текстове поле зміщується ліворуч, інші компоненти документа розташовуються, виходячи з принципу максимальної естетичності їх поєднання. Приклад такого виконання сайту показаний на рис. 6.
Рис.9 - Приклад компонування web-сторінки з правим позиціонуванням елементів навігації
Елементи навігації можна розмістити і в верхній частині документа. Такий варіант компонування найбільш підходить при створенні домашніх сторінок, при цьому підготовка самої таблиці значно спрощується. Недоліком такого підходу є необхідність продублювати елементи навігації в нижній частині документа, оскільки при вертикальній прокрутці сторінки вони зникають за верхньою межею екрану, і, щоб дістатися до них, користувачеві доведеться «відмотувати» екран назад. Приклад оформлення сторінки з верхнім розташуванням елементів навігації показаний на рис.7.
Рис.10 -Теана компонування web-сторінки з верхнім позиціонуванням елементів навігації
Рис.11 - Приклад «змішаної» компонування web-сторінки