Елементи Web-Сторінки

Будь-яка web-сторінка містить певний набір стандартних елементів, які є обов’язковими компонентами кожного ресурсу Інтернету. Безумовно, асортимент і кількість подібних об’єктів можуть змінюватись в залежності від тематичної спрямованості сайту, обсягу опублікованих на ньому матеріалів, а також від цілей і завдань, які ставить перед собою творець даного ресурсу. Компонування елементів, проектування їхнього взаємного розташування і становить одну з головних завдань web-майстра.
Першим елементом web-сторінки, який нам належить розглянути, є її заголовок. Він може бути виконаний як в текстовому, так і графічному варіанті, однак і в тому і в іншому випадку він повинен розташовуватися у верхній частині документа. Іноді з заголовком поєднують меню вибору кодування кирилиці і кнопки для переходу з російськомовною на англомовну версію сайту, якщо цей веб-ресурс представлений на двох мовах. Безпосередньо підзаголовком документа, як правило, розташовується простір, відведений для розміщення рекламного банера. Включення банера саме в верхню частина web-сторінки в більшості випадків є обов’язковою умовою реєстрації сайту в службах банерного обміну — системах, що рекламують створений вами ресурс в обмін на показ на сторінках вашого сайту реклами інших учасників баннерообменной мережі. Стандартний розмір банерів, публікуються під заголовком документа, становить зазвичай 468×60 пікселів. Якщо ви використовуєте статичний принцип компонування сторінки, ширина заголовка вашого документу буде становити приблизно 640 пікселів: це значення обумовлено, насамперед, необхідністю забезпечити коректне відображення документа на моніторах з екранною роздільною здатністю 640×480 точок і уникнути появи горизонтально смуги прокручування, що утрудняє його перегляд. Очевидно, що ширина баннера в цьому випадку буде значно менше ширини заголовка, завдяки чому в тій частині сторінки, де ви плануєте відвести місце під рекламу, утворюється незайняте простір, яке можна заповнити логотипом компанії-власника сайту або посиланням на сервер, який здійснює web-хостинг. Зрозуміло, логотип необхідний далеко не завжди: як правило, він включається до складу web-сторінки лише у випадку, якщо сайт має комерційну спрямованість.
Основну частину документа займає так зване текстове поле — ділянка, де й розміщується змістове наповнення сторінки: змістовний інформаційний текст та ілюстрації. Перераховані елементи ще називають кон-тент (від англ, content — зміст). Розташування текстового поля залежить в першу чергу від того, яким чином web-дизайнер розмістить інші елементи документа.
Наступною обов’язковою складовою частиною web-сторінки є елементи навігації — гіперпосилання, що пов’язують даний документ з іншими розділами сайту. Елементи навігації можуть бути виконані у вигляді текстових рядків, графічних об’єктів, тобто кнопок або активних компонентів, на – приклад Java-аплетів. Останні являють собою ті ж кнопки, які, на відміну від своїх традиційних сестер, вміють реагувати на рухи миші, виконуючи при наведенні на них курсору якісь нескладні дії (включення підсвічування, створення ефекту натискання, зміна форми і т. д.). Як я вже згадував у розділі “постулати” web-дизайну,розташовувати елементи навігації слід таким чином, щоб вони завжди були на виду, під рукою, тобто так, щоб користувачеві не доводилося відмотувати сторінку назад, якщо текстове поле займає по висоті кілька фізичних екранів, після чого довго шукати посилання на інші розділи. Найбільш поширеним підходом є розміщення елементів навігації у лівого краю сторінки.
В нижній частині документа прийнято публікувати інформацію про розробників сайту та адресу електронної пошти, за яким відвідувачі ресурсу можуть направити власникам сторінки свої відгуки, пропозиції та побажання. Якщо web-сторінка є стартовим документом, у нижній її частині також розміщують лічильник відвідувань — невеликий сценарій, викликає встановлений на сервері CGI-скрипт, який фіксує кожне відкриття документа в броузері користувачів, змінюючи значення індикатора лічильника. Завдяки цьому web-майстер без праці визначить кількість відвідувачів, навестивших його сторінку протягом якогось часу. Зазначу, що лічильник відвідувань встановлюється тільки на першій сторінці, що викликається при зверненні до сайту, в інших документах ресурсу він відсутній. Не рекомендується також розміщувати на одній сторінці кілька різних лічильників.
Отже, ми розібрали всі основні компоненти web-сторінки та їх можливе розташування відносно один одного.
На практиці часто зустрічаються web-сайти, в дизайні яких елементи навігації позиціоновані по правій межі екрану. У цьому випадку текстове поле зміщується ліворуч, інші компоненти документа розташовуються, виходячи з принципу максимальної естетичності їх поєднання.
Як видно з малюнка, логотип в цьому випадку поміщений на один рівень з заголовком документа, а рекламний банер позиціонується щодо центру сторінки. При такому підході рекомендується витримувати графічне оформлення заголовка, логотипу і поля для розміщення реклами в єдиному колірному і художньому стилі — тоді несиметричність положення цих об’єктів буде не настільки очевидна і не стане різати око прихильникам суворої, табличній естетики дизайну.
Елементи навігації можна розмістити не тільки поблизу правої і лівої меж сторінки, але і у верхній частині документа. Такий варіант компонування найбільш підходить, на мій погляд, при створенні домашніх сторінок: в цьому разі всі об’єкти сторінки гармонійно вписуються в задану ширину невидимої таблиці, при цьому підготовка самої таблиці значно спрощується. Єдиним недоліком такого підходу є необхідність продублювати елементи навігації в нижній частині документа, оскільки при вертикальної прокрутки сторінок вони зникають за верхньою межею екрану, і, щоб дістатися до них, користувачеві доведеться відмотувати екран тому, що, погодьтеся, дуже незручно.
Безумовно, все, що було сказано в даному розділі, є не панацеєю, а керівництвом до дії. Я намагаюся викласти лише загальні принципи, які застосовуються при компонуванні структури сайту, остаточне рішення завжди залишається за web-майстром. У кінцевому рахунку, який би дизайн ви не заклали в основу свого майбутнього проекту, результат ваших праць все одно буде правильним: в Інтернеті немає ні цензури, ні яких-небудь регламентів, за – ганяють творця сайту в ті чи інші жорсткі рамки. Прикладом дизайнерського рішення, не потрапляють ні в одну з зазначених вище категорій, може служити так звана змішана компонування
Як видно з малюнка, в даному прикладі частина керуючих елементів вбудована безпосередньо в заголовок сторінки — мова йде про кнопки перемикання між російської та англійської версій сайту, а також про кнопки навігації: це може бути посилання на вашу адресу електронної пошти творців ресурсу, продубльована в нижній частині документа, і посилання на один з тематичних розділів, наприклад, сторінку новин. Основний блок елементів навігації позиціонується щодо лівої межі документа, однак меню вибору кодування кирилиці розташоване безпосередньо під рекламним банером у верхній частині сторінки. Текстове поле розділене на дві несиметричні колонки, причому в правій розміщені короткі анонси складових ресурс тематичних рубрик, включаючи посилання на розділи.
Очевидно, що варіантів змішаної компонування web-сторінки може бути безліч: конкретні рішення залежать від кількості складових ресурс розділів, обсягу підготовленого для розміщення на сайті тексту і, нарешті, від фантазії самого дизайнера. Важливо лише, щоб зовнішній вигляд сайту не викликав нарікань у відвідувачів. Зрештою, ви як розробник, ви і ніхто інший, має право проявити всі свої здібності і таланти та скомпонувати сторінку за власним смаком. Творці деяких домашніх сторінок, не страждаючи сумнівами, розміщують лічильник відвідувань у верхньому правому куті документа, назва сайту пишуть дрібним убористим шрифтом і публікують його під рекламним банером, а елементи навігації чомусь несподівано виявляються прямо в середині текстового блоку, між розповіддю про себе і фотографіями улюбленої собаки автора проекту. На смак і колір, як говориться, товаришів немає. Але особисто мені ця хвороба здається невиліковною.