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

Що таке Web-сторінка?

"Перелічіть основні елементи Web-сторінки" - каже нам екзаменатор на уроці інформатики. Що ми зможемо сказати йому у відповідь? Насамперед оповідаємо про те, що являє собою веб-сторінка в принципі.

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

Місце та роль веб-сторінок у структурі сайтів

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

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

Принцип застосування гіпертексту

Отже, Web-сторінкою називається документ, складений мовою HTML, з допомогою якого здійснюється розмітка гіпертексту. Але що за явище? Що таке гіпертекст? Не заглиблюючись сильно в теорію, відзначимо, що це текст, який так чи інакше дозволяє отримати швидкий доступ до іншого за допомогою посилань. У звичайній книзі це неможливо – там «простий текст». Для отримання доступу до потрібної сторінки читач повинен зробити кілька перегортань, до цього ознайомившись зі змістом або виносками. У режимі «гіпертексту» основну частину роботи робить комп'ютер за рахунок відомостей, що відображаються в HTML-елементах сторінки.

Якщо викладач інформатики каже нам: "Перерахуйте основні елементи Web-сторінки", ми цілком коректним чином можемо почати розповідь про компоненти відповідного документа, які створюються за допомогою мови розмітки HTML. Тому спочатку розглянемо деякі теоретичні моменти, що стосуються HTML.

Структура мови HTML: теги

Як браузер зчитує потрібні дані про веб-сторінку з документа, складеного на мові HTML? Дуже просто.

Основні елементи даної мови- Це теги. Вони здебільшого парні - є відкриває, а є закриває. Перші позначаються лише за допомогою кутових дужок. Другі – аналогічно, але перед другою дужкою ставиться слеш – символ /. Браузер вміє їх розпізнавати, тому без проблем відображає вміст веб-сторінок відповідно до алгоритмів, створюваних розробником документа.

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

Атрибути

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

Вміст

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

Елементи веб-сторінок

"Так перерахуйте основні елементи Web-сторінки, нарешті!" – повторює викладач. "З задоволенням," - відповідаємо ми йому. Що ж входить у структуру типу документів, що розглядається? Умовимося, що розглядатимемо цей аспект у саме контексті HTML-елементів веб-сторінки. Тобто їх відображення у браузері – те, що користувач бачить на екрані – нас буде цікавити меншою мірою. Справа в тому, що відповідні HTML-алгоритми, на основі яких програма відображає контент однаково, можуть бути різними. І в цьому особливість мови HTML: потрібне зображення на Web-сторінці можна вивести різними способами. При цьому вони можуть бути як рівнозначними з точки зору трудомістких витрат творця веб-сторінки способами, так і припускати різний обсяг зусиль і часу на їх здійснення.

Елементи веб-сторінок: заголовок

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

Яка специфіка заголовка? Розташовується він у верхній частині веб-сторінки. У HTML-коді, який формує заголовок, зазвичай, передбачається «шифрування» лише тексту, але за потреби у відповідному елементі можна також розміщувати невеликі графічні вставки. І це, власне, все, що можна сказати про заголовок. Здавалося б, його роль структурі відповідного документа незначна. Але це не так. Заголовки веб-сторінок дуже значущі з точки зору індексації сайтів пошукових системах- Яндекс, Google. Цей елемент повинен бути повністю релевантним змісту веб-сторінки, а також тематичній специфіці сайту.

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

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

Основна частина веб-сторінки

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

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

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

Базові HTML-теги

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

Досить поширений тег P. Він, як і інші аналогічні елементи мови гіпертекстової розмітки, може бути відкриває і закриває. Цей тег дозволяє форматувати окремий абзац документа. Можна, наприклад, задавати певний тип шрифту або його колір. Однак це здійснюється за допомогою додаткового тегу – FONT. При цьому розміщуватися він буде всередині того, який позначає межі абзацу, що дозволить не розповсюджувати HTML-команду, що відображає тип кращого шрифту, на інші елементи веб-сторінки.

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

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

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

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

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

Специфіка інструментів веб-розробки

Крім сказаного ми можемо пояснити, що тегів і атрибутів, передбачених стандартами HTML - безліч. Крім HTML веб-розробниками можуть використовуватись додаткові засоби форматування гіпертекстових документів. Наприклад, за допомогою мови скриптів JavaScript можна створювати динамічні Web-сторінки - тобто ті, в яких контент постійно оновлюється (як за рахунок дій самого користувача, так і відповідно до алгоритмів, що заздалегідь прописані в скриптах).

Корисно буде додати, що веб-розробник може задіяти у своїй роботі повноцінні мови програмування, такі як, наприклад Perl, PHP, Java, Python, за допомогою яких можливості роботи з гіпертекстовими документами стають ще ширшими. Необхідність у цьому може бути пов'язана з тим, що галузі застосування веб-технологій сьогодні — найрізноманітніші. Завдання, які стоять перед сучасними розробниками, можуть бути складними. Наприклад, іноді потрібно здійснити переклад Web-сторінок, написаних російською мовою, англійською. У цьому випадку інструментарій розробника буде найрізноманітнішим.

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

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

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

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

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

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

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

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

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

ОСНОВИ WEB-ДИЗАЙНУ

Основи Web-дизайну

Історія розвитку Інтернету. Поява інтернету у Білорусі. WEB – дизайн. Історія виникнення. Вимоги до дизайну сайту відповідно до стандартів W3C. Основні браузери. Структура сайту, дискрипти та теги.

Internet ( англ. Internet, Interconnected Networks – з'єднані мережі) – гігантська комп'ютерна мережа, що складається з безлічі з'єднаних один з одним менших за розміром мереж і покриває всю земну кулю.

Історія Інтернету почалася в середині минулого століття: 1957 рокуСША було створено Агентство Перспективних Розробок (ARPA), яке займалося військовими розробками.

В 1989 Тім Бернерс-Лі створив мову HTML.

У 1961 роціУправління перспективних досліджень та розробок Міністерства оборони США (DARPA - Defence Advanced Research Agensy) за завданням міністерства оборони США розпочало проект створення експериментальної мережі передачі пакетів. Ця мережа, названа ARPANET, призначалася спочатку вивчення методів забезпечення надійного зв'язку між комп'ютерами різних типів.

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

В 1973 року через Arpanet вперше «поспілкувалися» комп'ютери різних країн. Мережа стала міжнародною.

Розвиток мережі йшов швидкими темпами. В 1987 число хостів перевищило 10000. У 1988 до NSFNET підключилися Канада, Ісландія, Данія, Норвегія, Франція Фінляндія і Швеція. У 1989 року кількість хостів перевищила 100000. До мережі підключилися Велика Британія, Японія, Німеччина, Австрія, Ізраїль, Італія, Мексика, Нова Зеландія, Нідерланди. Росія підключилася до МЕРЕЖІ у 1990 році. Білорусь також на початку 90-х.

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

WEB – дизайн. Історія виникнення.

Веб-дизайн (від англ. web design)- це візуальне оформлення веб-сторінок. Він відіграє таку ж роль для сайту, як поліграфічний дизайн та верстка для паперового видання. Часто «веб-дизайном» називають веб-розробку: проектування інтерфейсу (графічний та текстовий зміст сайту), проектування структури, навігації та движка сайту (виділена частина програмного коду для реалізації конкретного прикладного завдання).

В даний час під терміном веб-дизайн розуміють саме проектування структури, ідейної цілісності Інтернет-ресурсу, забезпечення зручності користування Інтернет-ресурсом для користувачів. Важливою частиною проектування веб-сайтів є їх відповідність стандартам W3C (англ. World Wide Web Consortium, Консорціум Всесвітньої павутини - організація, що розробляє та впроваджує технологічні стандарти для Всесвітньої павутини), що забезпечує доступність вмісту сайтів для людей з обмеженими фізичними можливостями, а також користувачів портативних пристроїв.

Також з безпосередньо дизайном сайтів суміжні маркетинг в Інтернеті (Інтернет-маркетинг), тобто, просування та реклама створеного ресурсу, пошукова оптимізація

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

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

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

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

Вимоги до дизайну сайту відповідно до стандартів W3C

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

На сайті повинні бути забезпечені зручність та повнота навігаційних елементів.

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

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

Вітається наявність красивих графічних об'єктів, використання невеликих, але стильних графічних елементів (піктограм, візуалів) в оформленні сторінок сайту.

Вітається невелике включення елементів анімації.

Дизайн сайту має бути досить «легким» за обсягом графічних елементів та забезпечувати якомога більшу швидкість завантаження сторінок сайту.

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

Коректно відображати інформацію на комп'ютерах без встановлених флеш-плагінів з відключеною підтримкою скриптів, графіки, стильових шаблонів.

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

Веб-браузер або браузер.

В даний час кожен користувач вибирає для себе "свій" браузер. Найбільш популярними є Opera та Firefox. За ними йде Internet Explorer(IE).

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

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

Internet Explorer (версія 5.5 та вище):

Opera (версія 7.0 та вище);

Mozilla Firefox(Версія 1.0 і вище).

Основний колірний режим моніторів, на яких повинен коректно переглядатися сайт, - 15 розрядів кольорів та вище (число кольорів 65536 і вище).

Розробка структури web-проекту

Відповідно до загальної концепції проекту, поставленим цілям та завданням визначається структура web-проекту, а саме:

§ структура даних, визначення зв'язків між таблицями бази даних, структури передачі даних із зовнішніх джерел;

§ визначення рівня автоматизації обробки даних, розробка структури управління даними;

§ проводиться специфікація форм та порядок їх появи;

§ структура інтерфейсу користувача: пункти меню та елементи навігації, необхідні рівні вкладеності;

§ розробка ескізів дизайну проекту (кількість варіантів затверджується заздалегідь).

Розробка.

§ дизайн: художнє та технічне рішення. Створення оригінального стилю сайту: колірне рішення; виготовлення елементів оформлення, банерів, графічних елементів;

§ програмування: створення програмних елементів;

§ реалізація навігації в рамках затвердженої моделі проекту;

§ базове інформаційне наповнення;

Мова розмітки гіпертексту HTML

• (від англ. Hypertext Markup Language - «мова розмітки гіпертексту») - це стандартна мова розмітки документів у Всесвітній павутині. Усі веб-сторінки створюються за допомогою мови HTML (або XHTML). Мова HTML інтерпретується браузером та відображається у вигляді документа, зручному для людини.
• Разом з XML HTML зазвичай зараховують до «мов розмітки тексту». Насправді роль цих двох мов, як і самого формату під назвою «просто текст» («plain text»), виходить далеко за межі обробки текстової інформації.
• Вивчення будь-якого комп'ютерної мовипочинається зі знайомства з його основними будівельними блоками – операторами, виразами, змінними. З цієї точки зору мова HTML вкрай проста, щоб не сказати - примітивна: крім звичайного тексту, HTML-файл містить лише один тип керуючих конструкцій, так звані теги (tags).

Слова укладені в кутові дужки<” и “>”називаються HTML - дескрипторами або HTML – тегами.

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

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

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

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

Декілька основних пунктів меню можна продублювати в альтернативне меню.Якщо основне горизонтальне – то вертикальному, або навпаки.

За нормами юзабіліті ніколи і в жодному разі не можна робити посилання меню - посиланнями на файли, що завантажуються, наприклад, на прайс. Все, що не веде на стандартні сторінки сайту, має передуватися написом: «завантажити».

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

Відвідані розділи варто виділяти іншим кольором, щоб відвідувачу було видно де він був, а де ні.

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

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

Основні елементи дизайну веб-сайту.

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

Графіка- мистецтво зображення предметів контурними лініями та штрихами, без фарб (іноді - із застосуванням колірних плям) (Словник Ожегова).

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

Головним завданням Web-дизайну є створення комфортної атмосфери для засвоєння інформації на сторінках Інтернет-сайту.

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

Компонування Web-сторінок сайту;

Графіки.

Компонування сторінки сайту.

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

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

Колірне рішення сайту.

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

Для створення ефективного дизайну необхідно враховувати низку вимог, що накладаються на вибір колірного рішення:

Яскравість, тон та насиченість кольору повинні відповідати фірмовому стилю сайту;

Вибір кольору проводиться з урахуванням орієнтування на аудиторію цього ресурсу;

Кількість основних кольорів по можливості не повинна перевищувати трьох;

Кольори, що використовуються на сайті повинні взаємодіяти та гармонувати між собою;

Вживання кольору має відповідати елементарним правилам логіки;

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

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

Оптимізація графіки Web, підготовка зображень Web-сторінки. Принципи роботи з картинками.

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

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

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

Середній час завантаження сторінок не повинен перевищувати 30 секунд при швидкості з'єднання 28.8 Кбіт/сек. Дозволяється збільшення часу завантаження окремих сторінок до 35 секунд, але не більше ніж 30% від загальної кількості сторінок сайту. Головна сторінкаповинен мати час завантаження не більше 40 секунд

На WEB сторінці можна використовувати графічні файли форматів JPG, GIF та PNG. GIF -спеціальний мережевий формат: має малий розмір файлу, можливість плавного прояву та анімації, а також ефект прозорості, що дозволяє використовувати картинку як "шпалери" на сторінці або в таблицях. Але т.к. gif містить 256 кольорову палітру, він є неефективним для зберігання фотографій. JPG навпаки не має обмежень по глибині кольору, але також можливості анімації. Новий формат файлів, що підтримує і глибину і прозорість -PNG, має недолік у тому, що старі браузери його не бачать. Тому, якщо не брати до уваги користувачів застарілими програмами, Пінг цілком можна включати в свої сторінки. Щоб включити в сторінку малюнок, треба описати посилання на нього:

де SRC (від s ou rc e-джерело)= Image -файл у форматі gif, jpg або png, що містить малюнок.
Ви можете задавати взаємне розташування малюнка та тексту включенням атрибуту align = " ":

Можливі такі типи вирівнювання:
align = "middle" - щодо центру рядка
align = "left" -текст обтікає картинку праворуч
align = "right" - те ж ліворуч

При використанні вирівнювання left або right можна увімкнути в тег img додатковий параметрвідступу навколо зображення, щоб картинка не притискалася впритул до тексту. Параметр VSPACE="n" - створює відступ по вертикалі, а HSPACE="n" - по горизонталі на пиксел. Таким чином, правильно написаний тег картинки з текстом, що обтікає праворуч, буде виглядати так:

Text.

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

Подібна інформація.

Мова 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-сторінку, мова 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-сторінки, який ми маємо розглянути, є її заголовок. Логотип або назва сайту виконує для нього ту саму роль, що й вивіска на вході до якоїсь установи. Інша справа Інтернет: тут основний спосіб переміщення – це телепортація, і тому мені потрібно бачити цю вивіску на кожній сторінці.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Елементи web-сторінки

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

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

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

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

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

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

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

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

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

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

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

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

Не працює