Структура сайту. Види сторінок сайту. Поняття про веб-дизайн. Вимоги до сайтів

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

Користувач формує запит, ввівши адресу ресурсу в рядок адреси браузера або клацнувши посилання на веб-сторінці. Браузер пересилає запит на сервер, де відбувається пошук заданого об’єкту. 

Розглядаючи сайти, котрі існують у мережі Інтернет, можна зауважити, що вони поділяються на дві великі групи: статичні та динамічні. 

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

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

Під час планування структури сайту необхідно продумати кілька основних складових: структуру каталогів, структуру навігації, необхідність заставки сайту (мал. 20.1). Важливо визначитися з необхідною кількістю сторінок і встановити зв’язки між ними.

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

За ієрархічної, або деревоподібної, структури (мал. 20.3) створюється одна головна сторінка, яка не має попередніх, решта сторінок має лише одну попередню сторінку.

За довільної структури кожна сторінка може містити посилання на довільну кількість сторінок сайту. Така структура найкраще підходить для сайтів, що містять різні за тематикою матеріали: каталогів, зібрань статей з різних тем або добірок посилань. Прикладом такої структури є сайт Бібліотека української літератури (www.ukrlib.com.ua).

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

Передусім це мова розмітки гіпертексту HTML та каскадні аркуші стилів CSS. Вони забезпечують змістове наповнення веб-сторінок та визначають їхній зовнішній вигляд. Далі йде мова створення сценаріїв JavaScript – завдяки якій сторінки набувають інтерактивності. Як альтернатива, можна розробляти мультимедійні сайти на основі технологій Flash чи Silverlight, проте вони втрачають популярність із розвитком нового стандарту HTML5. Для того, щоб створити динамічний сайт потрібна база даних – для веб-ресурсів це зазвичай MySQL або аналогічна технологія, а для взаємодії з цією базою використовується серверна мова програмування така як php або Java. Сам сервер – це теж не стільки комп’ютер з апаратної точки зору, скільки певним чином налаштована програма, котра дає змогу надавати послуги із розміщення та доступу до вмісту: це може бути наприклад Apache, Microsoft IIS.  

Завдання. Створити сайт за  на Google site https://sites.google.com/  , за інформаційною структурою завдання 1.

1. Зайт повинен містити 4 сторінки (головну з текстом).

2. 3 сторінки другого рівня.

• перша сторінка із зображенням, яке має бути підписано;

• друга сторінка з відео;

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

5. Для звітування і оцінювання надіслати посилання на створений ресурс на платформі Google 

Приклади:

https://sites.google.com/view/koreyski-trendu/%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%B0%D1%8F-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0

https://sites.google.com/view/shtabovalena/%D0%BD%D0%B5%D0%B4%D0%BE%D0%BB%D1%96%D0%BA%D0%B8