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

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

Першим елементом web-сторінки, який нам належить розглянути, є її заголовок.Він може бути виконаний як в текстовому, так і в графічному варіанті, проте і в тому і в іншому випадку він повинен розташовуватися у верхній частині документа.Іноді з заголовком поєднують меню вибору кодування кирилиці і кнопки для переходу з російськомовної на англомовну версію сай — та, якщо даний web-ресурс представлений на двох мовах.Безпосередньо підзаголовком документа, як правило, розташовується простір, відведений для розміщення рекламного банера.Включення банера саме у верхню частину web-сторінки в більшості випадків є обов’язковою умовою реєстрації сайту в службах банерного обміну — системах, що рекламують створений вами ресурс в обмін на показ на сторінках вашого сайту реклами інших учасників баннерообменной мережі.Стандартний розмір банерів, публікованих під заголовком документа, складає зазвичай 468 × 60 пікселів.Якщо ви використовуєте статичний принцип компонування сторінки, ширина заголовка вашого документа буде становити приблизно 640 пікселів: це значення обумовлене, насамперед, необхідністю забезпечити коректне відображення документа на моніторах з екранним дозволом 640 × 480 точок і уникнути появи горизонтально смуги прокрутки, що утрудняє його перегляд.Очевидно, що ширина банера в цьому випадку буде значно менше ширини заголовка, завдяки чому в тій частині сторінки, де ви плануєте відвести місце під рекламу, утворюється незайняте простір, який можна заповнити логотипом компанії-власника даного сайту або посиланням на сервер, який здійснює web — хостинг.Зрозуміло, логотип необхідний далеко не завжди: як правило, він включається до складу web-сторінки лише у випадку, якщо сайт має комерційну спрямованість.

Основну частину документа займає так зване текстове поле — ділянка, де і розміщується смислове наповнення сторінки: змістовний інформаційний текст та ілюстрації.Перераховані елементи ще називають кон-тент (від англ, content — зміст).Розташування текстового поля залежить в першу чергу від того, яким чином web-дизайнер розмістить інші елементи документа.

Наступною обов’язковою складовою частиною web-сторінки є елементи навігації — гіперпосилання, котрі пов’язують даний документ з іншими розділами сайту.Елементи навігації можуть бути виконані у вигляді текстових рядків, графічних об’єктів, тобто кнопок, або активних компонентів, на — приклад Java-аплетів.Останні являють собою ті ж кнопки, які, на відміну від своїх традиційних сестер, уміють реагувати на рухи миші, виконуючи при наведенні на них курсора будь нескладні дії (включення підсвічування, створення ефекту натискання, зміна форми і т. д.).Як я вже згадував у розділі Основні постулати web-дизайну, розташовувати елементи навігації слід таким чином, щоб вони завжди були на виду, під рукою, то є так, щоб користувачеві не доводилося відмотувати сторінку назад, якщо текстове поле займає по висоті декілька фізичних екранів, після чого довго шукати посилання на інші розділи.Найбільш усталеним підходом є розміщення елементів навігації у лівої межі сторінки.

У нижній частині документа прийнято публікувати інформацію про розробників сайту та адресу електронної пошти, за яким відвідувачі ресурсу можуть направити власникам сторіночки свої відгуки, пропозиції та побажання.Якщо web-сторінка є стартовим документом, у нижній її частині також розміщують лічильник відвідувань — невеликий сценарій, що викликає встановлений на сервері CGI-скрипт, який фіксує кожне відкриття документа в броузері користувачів, змінюючи значення індикатора лічильника.Завдяки цьому web-майстер без праці визначить кількість відвідувачів, відвідав його сторіночку протягом будь-якого часу.Зазначу, що лічильник відвідувань встановлюється тільки на першій сторінці, що викликається при зверненні до сайту, в інших документах ресурсу він відсутній.Не рекомендується також розміщувати на одній сторінці кілька різних лічильників.

Отже, ми розібрали всі основні компоненти web-сторінки і їх можливе розташування відносно один одного.

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

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

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

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

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

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