Головна › Освіта › Які основні елементи веб-сторінки. Основні елементи веб-сторінок. Структура мови HTML: теги

Які основні елементи веб-сторінки. Основні елементи веб-сторінок. Структура мови HTML: теги

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

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

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

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

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

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

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

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

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

Web-сайти відрізняються один від одного:

Розмірами (від кількох сторінок до Web-серверів із гігабайтами інформації).

Дизайном (загальним колірним рішенням, форматом шрифту, використовуваними ілюстраціями тощо).

Структурою (системою посилань, зв'язком сторінок усередині сайту, а також зв'язком з іншими сайтами).

Разом з тим будь-яка веб-сторінка будується зі стандартних елементів, які можна розділити на дві групи:

Пасивні (ілюстративні) елементи

анімація

Активні елементи

поля введення
перемикачі

Фрейми (англ.frame- рама, каркас) - це технологія, яка дозволяє розділяти веб-сторінку на кілька частин (вікон) та дає можливість змінювати зміст кожної частини незалежно від інших частин. Так, зміст сайту часто міститься в один незмінний кадр, а вміст - в інший.

Тема 9. Електронне спілкування. Адреси електронної пошти

Електронна пошта (E-mail від англ. Electronic mail) є основним видом мережевих послуг. Обмін повідомленнями реалізується через систему поштових серверів.

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

Адреса електронної пошти складається з двох частин, розділених знаком @ (цей знак прийнято називати “собака”):

ім'я поштової скринькикористувача (вибране ним, у нашому прикладі - irina).

доменне ім'я поштового сервера(У нашому прикладі - mail. ru) .

Наприклад, irina@ mail. ru

Електронні адреси записуються без пробілів за допомогою букв латинського алфавіту, цифр або символів (дозволені до використання).

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

За даними цього запису, сервер ідентифікує користувача.

Безпека в Інтернеті Планування захисту

Об'єктом атаки може стати як інформація, що передається по мережі, так і комп'ютер, підключений до Інтернету.

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

Лінії захисту:

Блокування можливих атак:

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

Використовуйте автентифікацію та шифрування.

Зменшення джерел ризику:

Використовуйте лише ті Інтернет-служби, які Вам дійсно необхідні.

Використовуйте безробіття програмне забезпечення і постійно оновлюйте його.

Правильно налаштуйте програмне забезпечення (що менше дозволено, тим вища безпека).

Не розповсюджуйте інформацію про себе в мережі.

Обмежте доступ до ресурсів комп'ютера.

Підготовка до відновлення після атаки:

Створіть та регулярно оновлюйте резервні копіїробочих даних.

Завжди майте під рукою дистрибутиви програм.

Аутентифікація (відrpечеськогоauthentikos- Справжність) – підтвердження справжності.

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

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

На кожній веб-сторінці існує 5 елементів, у яких слід розміщувати ключові слова:

Заголовок сторінки (тег title)
Ключові слова сторінки (Meta-тег keywords)
Опис сторінки (Meta-тег description)
Альтернативний текст для картинок (Alt-тег)
Вміст веб-сторінки (тег body)

З усіх вищезгаданих елементів веб-сторінки найважливішим є вміст сторінки (пункт 5). Докладніше про це далі.

А поки що розберемо цей список по порядку.

Елемент №1. Заголовок сторінки (тег title)

Спочатку розглянемо заголовок сторінки (тег title). Цей елемент найперший і найважливіший з усіх інших елементів у блоці head будь-якої веб-сторінки.

Заголовок веб-сторінки Ви можете спостерігати у верхньому рядку Інтернет браузера. Щоб переконатися в цьому, запустіть будь-який браузер, наприклад, Internet Explorer, Opera або Mozilla Firefox, зайдіть на будь-який сайт і порівняйте вміст тега title з найвищим рядком у цих браузерах. Пошукові машини використовують цей тег у своїх цілях – для збирання інформації про сайт та визначення його тематики, а також використовують у результатах пошукової видачі (SERP) як назву веб-сторінки.

Запам'ятайте!Заголовок веб-сторінки – це її короткий опис.

Крім вищезгаданого вміст тега title використовується як назва веб-сторінки при додаванні її до Вибраного Інтернет браузера.

Елемент №2. Ключові слова сторінки (Meta-тег keywords)

Тепер поговоримо про Meta-теги keywords і description. Якийсь час тому Meta-тег keywords використовувався при додаванні сайту до індексу пошукових машин. Але ці часи минули. Тепер пошукові машини просто ігнорують цей тег, т.к. часті випадки його використання у «брудних» цілях. Деякі пошукові системи звертають увагу на цей тег для визначення тематики сайту.

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

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

Елемент №3. Опис сторінки (Meta-тег description)

Meta-тег description - ще один елемент сайту, в якому слід розміщувати ключові слова. Пошукові машини переглядають даний тег щодо наявності в ньому ключових слів, а також порівнюють його вміст із вмістом самого сайту (вмістом тега body). Дуже важливою обставиною є і те, що пошукові машини використовують вміст тега description як опис веб-сторінки в результатах пошукової видачі (SERP).

Цей тег повинен містити короткий опис веб-сторінки, але не більше 50 слів.

Елемент №4. Альтернативний текст для картинок (Alt-тег)

Alt-теги є текстове опис вмісту картинки, тобто. якщо з якихось причин картинка не вантажиться, а ця картинка має alt-текст, то замість картинки відображатиметься цей текст.

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

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

Елемент №5. Вміст веб-сторінки (тег body)

Отже, нарешті ми дісталися до самого основного елемента сайту – тега body, елемента, вміст якого найбільше цікавить Інтернет-користувачів. Основні пошукові машини більше не дадуть Вам 1 рядок у результатах пошукової видачі (SERP) тільки через кілька повторень ключового слова на сторінці Вашого веб-сайту. Там зможе виявитися лише найбільш релевантна конкретному пошуковому запитувеб сторінка.

Щоб цього досягти, Вам слід впровадити підібрані ключові слова у код веб-сторінок, дотримуючись частоти їх повторення. Дійте таким чином: для кожної конкретної сторінки виберіть 1-2 ключові слова та оптимізуйте відповідну сторінку під них.

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

Введіть підібрані ключові слова у перелічені вище 5 елементів кожної веб-сторінки, і ви покращите свої поточні позиції та результати.

Мова HTML

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

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

Мова HTML існує у кількох варіантах і продовжує розвиватися, але конструкції HTML швидше за все будуть використовуватись і надалі. Вивчаючи HTML і пізнаючи його глибше, створюючи документ на початку вивчення HTML і розширюючи його наскільки це можливо, ми маємо можливість створювати Web-сторінки, які можна переглянути багатьма браузерами Webяк зараз, так і в майбутньому. Це не виключає можливості використання інших методів, наприклад метод розширених можливостей, який надається Netscape Navigator, Internet Explorer або деякими іншими програмами.

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

HTML було ратифіковано World Wide Web Consortium. Він підтримується кількома широко поширеними браузерами, і, можливо, стане основою майже всього програмного забезпечення, що стосується Web.

Принципи створення Web-сторінки, основні елементи Web-сторінки

Для створення Web-сторінок використовується спеціальна мова HTML (HyperText Markup Language – мова гіпертекстової розмітки). Ця мова визначає набір спеціальних команд, які називаються тегами та використовуються для завдання форматування або призначення тих чи інших елементів Web-сторінки. Спеціальні теги використовуються для розміщення на Web-сторінках графічних зображень, аудіо- та відеокліпів та інших так званих впроваджених об'єктів.

Web-сторінки є звичайними текстові файли, створені у стандартному Блокноті або аналогічному найпростішому текстовому редакторі. І вони містять текст, той самий текст, який ви хочете помістити на сторінки, тільки розмічений особливим чином. Для того щоб різні програми Web-браузерів правильно відображали одну і ту ж Web-сторінку, мова HTML повинна бути стандартизована.

На практиці на стандарт HTML впливає наявність тегів, запропонованих і підтримуваних найбільш відомими браузерами, такими як Microsoft Internet Explorer і Google Chrom. Ці теги в Наразіможуть як входити, так і не входити до складу діючої специфікації HTML.

Існують засоби редагування, розроблені спеціально для написання HTML. Вони дозволяють заощаджувати час, тому що містять клавіші швидкого доступудля виконання повторюваних операцій, наприклад завдання початкових установок документів, таблиць або просто застосування стилів до тексту. Редактори HTML відрізняються від авторського інструменту WYSIWYG тим, що вимагають знання правил складання HTML вручну, редактори лише спрощують і прискорюють цей процес. Поряд із тегами HTML, стандартизованими WWWC (стандартні теги), Web-браузери підтримують безліч нестандартних тегів. Ці теги були введені розробниками тієї чи іншої програми Web-браузера, щоб отримати перевагу перед конкурентами. Вони сподівалися, що ці фірмові розширення згодом увійдуть до стандарту HTML, але цим надіям так і не судилося збутися. Проте теги залишилися, і вони так само підтримуються.

Для створення Web-сторінок знадобиться будь-який браузер - Internet Explorer або Google Chrome Mozilla Firefox, а краще обидва, оскільки багато хто елементи HTMLпо-різному відображаються в різних програмах перегляду і бажано контролювати цю різницю.

Крім того, потрібен будь-який текстовий редактор, наприклад, для підготовки HTML - файлів, а браузер - для перегляду та контролю зробленого.

Для того, щоб створити Web-сторінку, насамперед створюють структуру сайту. Сайт - це сервер, що має унікальне ім'я та постійну адресу, фізично підключену до WWW, або віртуально розміщену на іншому, більшому сервері.

Після створення структури сайту запустити текстовий редактор Word, створити новий документі зберегти його як Web-сторінку, далі розпочати створення Web-сторінки. Воно робить нашу роботу простішою та якіснішою. У ньому ми визначаємо терміни створення Web-сайту, його налагодження, тематику, а також його заповнення.

Є кілька простих правил, що дозволяють інтерфейсу сайту бути зрозумілим для відвідувача [№10].

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

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

3. Відвідувач сайту повинен легко знаходити цікаву для нього інформацію і мати можливість отримати вичерпну інформацію (опис у вигляді тексту плюс кілька фотографій).

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

5. На Web-сайті обов'язково мають бути інформаційні розділи:

з даними про компанію (сфера діяльності, адреса, контактні телефони тощо);

Основні елементи Web-сторінок:

1. Заголовок / Логотип (Шапка)

3. Контент/Зміст (Текстове поле)

4. Елементи навігації

5. Інформація про розробників сайту

Будь-яка Web-сторінка містить певний набір стандартних елементівє обов'язковими компонентами кожного ресурсу Інтернету.

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

Основну частину документа займає так зване Текстове поле - ділянка, де і розміщується смислове наповнення сторінки: змістовний інформаційний текст та ілюстрації.

Перелічені елементи ще називають "Контент" (від англ, content - Зміст). Розташування текстового поля залежить в першу чергу від того, як Web-дизайнер розмістить інші елементи документа.

Рисунок 1. Приклад контенту сайту

Малюнок 2. Контактна інформація

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

Через війну послідовність процесів розробки Web-сайта зводиться до такому легкому алгоритму:

1. Постановка цілей та визначення основних завдань.

2. Створення переліку майбутніх тематичних розділів.

3. Розробка логічної та фізичної структури ресурсу.

4. Підготовка ескізу дизайну, компонування сайту, невидимої верстальної таблиці.

5. Підготовка текстових матеріалів.

6. Підготовка графічних матеріалів у векторній формі.

7. Експорт векторних малюнків у растровий формат.

8. Оптимізація всіх зображень.

9. Створення шаблонів веб-сторінок.

10. Складання Web-сторінок та налагодження коду.

11. Перевірка ідентичності відображення Web-сторінок з різною екранною роздільною здатністю і палітрою кольорів і різних браузерах.

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

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

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

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

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

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

Мал. 3.6. Приклад компонування web-сторінки з лівим позиціонуванням елементів навігації

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

Мал. 3.7. Приклад компонування web-сторінки з правим позиціонуванням елементів навігації

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

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

Мал. 3.8. Приклад компонування web-сторінки з верхнім позиціонуванням елементів навігації

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

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

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