Структура веб-сайтів, різновиди веб-сайтів. Етапи створення веб-сайтів. Поняття про засоби автоматизованої розробки веб-сайтів.
1. Структура веб-сайтів.
Розрізняють зовнішню та внутрішню структуру веб-сайту.
Основними елементами цієї структури є:
-Шапка сайту, яка містить логотип і назву сайту. Шапка сайту може вирішувати декілька завдань. По-перше, це візитна картка інтернет-ресурсу. По-друге, шапка сайту дуже часто використовується для розміщення в ній основного меню.
-Меню– це засіб для переходу до основних розділів сайту. Наприклад, таких, як каталог файлів, форум, зворотній зв’язок та ін.
-Контент(англ.content– зміст) – змістове наповнення веб-сторінки, доступне користувачу: тексти, зображення, відео, звукові дані та інше.
-Підвал сайту або футер, є менш функціональною частиною. В ньому містяться контактні дані та повідомлення про авторські права.
Окрім цього, на сайті можуть бути присутні посилання на інші сайти, різноманітні інформери (наприклад, погода в Бобринці, святковий календар) та інші елементи.
Внутрішня структура сайту, як правило, представлена картою сайту – діаграмою, що візуально відображає ієрархію сторінок сайта, схему зв’язків і переходів між ними.
Веб-сайт — це сукупність веб-сторінок, які об'єднані між собою за змістом та навігаційно. Всі сайти, до яких доступ вільний, утворюють Всесвітню павутину — найбільше сховище інформації.
Веб-сайтів є дуже багато, і класифікувати їх можна по-різному та за різними критеріями.
Візуальна класифікація веб-сайтів.
За цією класифікацією сайти поділяються на текстові, графічні та імітаційні.
Текстові сайти містять переважно текстову інформацію та відносно мало зображень. Вони порівняно невеликі за розміром і мають простий дизайн. Дуже часто сайти інших типів крім стандартної мають ще й текстову версію — для тих відвідувачів, які з різних причин не хочуть завантажувати повні варіанти веб-сторінок.
Графічні сайти окрім певних текстових матеріалів містять багато графіки: спливаючі меню, піктограми, анімаційні зображення тощо.
Імітаційні сайти запозичують ідею оформлення з реального світу. Так, наприклад, сайт про автомобілі може містити програму, що відображає всі деталі автомобіля на екрані та дає огляд позиції водія у процесі руху.
Такі сайти найчастіше отримують нагороди Webby Awards за свій нетрадиційний, інноваційний дизайн. Наприклад, сайт LeoBurnett.ca став переможцем 2005 року в категорії «Кращий візуальний дизайн».
Отже, класифікація сайтів непроста і неоднозначна. Передусім можна по-різному визначати критерії, за якими класифікують сайти. Окрім того, іноді складно визначити, до якої категорії належить той чи інший сайт. Проте така класифікація допомагає зорієнтуватися у величезній кількості ресурсів Інтернету.
Основи веб-дизайну. Огляд сервісів Веб 2.0. Веб-спільноти. Вікі технології.
1. Основи веб-дизайну.
Веб-дизайн — це дизайн, об'єктами якого є сторінки веб-сайтів. Для вдалої реалізації завдань веб-дизайну потрібно дотримуватися принципів композиції, колористики та ергономіки.
Виділяють такі базові елементи веб-дизайну:
- лінії - підкреслюють важливий зміст, підсилюють читабельність сайта. Використовуються як межі деякого елемента, розділові лінії між елементами веб-сторінки, контури навколо елементів.
- форми - використовуються для структурування даних, їх групування, привернення уваги до оформлення. Є три основні типи форм: геометричні (прямокутники, кола, трикутники тощо), природні (листя, каміння, краплі та ін.), абстрактні (символи, іконки тощо).
- текстура - використовується як фон і створює ілюзію поверхні з трави, деревини, каміння тощо. Текстури з ефектами природних матеріалів надають емоційне забарвлення стилю сайта.
- колір - використовується як фон, для розставлення акцентів, розділяє передній і задній плани та ін.
- напрям - додає настрій, створює ілюзію сталості чи руху.
ПРАКТИЧНЕ ЗАВДАННЯ
Hyper Text Markup Language (HTML) є стандартною мовою, призначеною для створення гіпертекстових документів в середовищі WEB. HTML- документи можуть бути видимими різними типами WEB-браузеров. Коли документ створений з використанням HTML, WEB-браузер може інтерпретувати HTML для виділення різних елементів документа і первинної їх обробки. Використання HTML дозволяє форматувати документи для їх уявлення з використанням шрифтів, ліній і інших графічних елементів на будь-якій системі, що їх переглядає. Основна перевага HTML полягає в тому, що ваш документ може бути проглянутий на WEB - браузерах різних типів і на різних платформах.
Всі теги HTML починаються з "<" (лівої кутової дужки) і закінчуються символом ">" (правої кутової дужки). Як правило, існує стартовий тег і завершуючий тег. Для прикладу приведемо теги заголовка, що визначають текст, що знаходиться усередині стартового і завершуючого тега і заголовок документа:
<TITLE> Заголовок документа </TITLE>
Завершуючий тег виглядає також, як стартовий, і відрізняється від нього прямим слешем перед текстом усередині кутових дужок. У даному прикладі тег <TITLE> говорить WEB-браузеру про використання формату заголовка, а тег </TITLE> - про завершення тексту заголовка.
Структура документа HTML
Коли WEB-броузер отримує документ, він визначає, як документ повинен бути інтерпретований. Найперший тег, який зустрічається в документі, повинен бути тегом <HTML>. Даний тег повідомляє WEB-броузеру, що ваш документ написаний з використанням HTML. Мінімальний HTML-документ виглядатиме так:
<HTML> ...тіло документа... </HTML>
Заголовна частина документа <HEAD>
Тег заголовної частини документа повинен бути використаний відразу після тега <HTML> і більш ніде в тілі документа. Даний тег вдає із себе загальний опис документа. Уникайте розміщувати який-небудь текст усередині тега <HEAD>. Стартовий тег <HEAD> поміщається безпосередньо перед тегом <TITLE> і іншими тегами, що описують документ, а завершуючий тег </HEAD> розміщується відразу після закінчення опису документа. Наприклад:
<HTML>
<HEAD>
<TITLE> Список співробітників </TITLE>
</HEAD>
Тіло документа <BODY>
Тіло документа повинне знаходитися між тегами <BODY> і </BODY>. Це та частина документа, яка відображається як текстова і графічна (смислова) інформація вашого документа.
Тег абзацу <P>
У відмінності від більшості текстових процесорів, в HTML-документе зазвичай ігноруються символи повернення каретки. Фізичний розрив абзацу може знаходитися в будь-якому місці початкового тексту документа (для зручності його читаності). Проте броузер розділяє абзаци тільки за наявності тега <P>. Якщо ви не розділите абзаци тегом <P>, ваш документ виглядатиме як один великий абзац.
Додаткові параметри тега <P>:
<P ALIGN=left|center|right>
дозволяють вирівнювати абзац по лівому краю, центру і правому краю відповідно.
Деякі теги форматування тексту
HTML дозволяє використовувати різні стилі шрифтів для виділення текстовій інформації у ваших документах. Ось короткий список стилів, підтримуваних більшістю броузеров:
· bold (жирний)
· italic (похилий)
· mono spaced (type writer - з використанням фіксованих шрифтів)
· underline (підкреслений)
· strike (закреслений)
Ви можете комбінувати різні види стилів, наприклад жирний і похилий.
Таблиця – Теги стилю тексту
Стиль | Елемент або тег | Результат |
Bold | <B> Цей текст жирний </B> | Цей текст жирний |
Italic | <I> Цей текст похилий </I> | Цей текст похилий |
Mono spaced | <TT> Цей текст з непроп. шрифтом </TT> | Цей текст з непроп. шрифтом |
Underline | <U> Цей текст підкреслений </U> | Цей текст підкреслений |
STRIKE | <S> Цей текст закреслений </S> | Цей текст закреслений |
Комбінування стилів дозволяє вам відображати в одному рядку декілька елементів різними стилями, наприклад:
<b>Життя</b> - <i>це <b>пісня!</b></i>
Життя - це пісня!
Додаткові стилі:
· big (великий)
· small (маленький)
· sub (підрядковий переклад)
· sup (надстрочник)
Таблиця – Теги додаткових стилів тексту
Стиль | Елемент або тег | Результат |
Big | Цей текст <BIG> великий </BIG> | Цей текст великий |
Small | Цей текст <SMALL> маленький </SMALL> | Цей текст маленький |
Sub | Цей текст <SUB> підрядковий переклад </SUB> | Цей текст підрядковий переклад |
Sup | Цей текст <SUP> надстрочник </SUP> | Цей текст надстрочник |
ППриклад використання цих тегів:
C<SUB><SMALL>2</SMALL></SUB>H<SUB><SMALL>5</SMALL></SUB>OH
C2H5OH
Тег <FONT> дозволяє довільно визначати розмір шрифту, колір шрифту і вид (family) шрифту. Змінити розмір шрифту можна завданням атрибуту SIZE таким чином
<FONT SIZE="n"> або <FONT SIZE="+n">, <FONT SIZE="-n">
Шрифт може мати розмір від 1 до 7. Ви можете прямо вказати розмір шрифту цифрою, або вказати зсув щодо базового значення (за умовчанням - 3) в позитивну або негативну сторону. Базове значення можна змінити за допомогою тега:
<BASEFONT SIZE="n">
Колір шрифту ви можете змінити за допомогою тега
<FONT COLOR="color"> або <FONT COLOR="#??????">
Кольори можна задавати назвами або завданням кількості червоного, зеленого і синього. У другому випадку перед значенням кольору ставиться #, а потім по два байти кожного кольору (RGB), виражені в шістнадцятковій системі. Основні кольори представлені в таблиці кольорів.
Вид шрифту можна визначати за допомогою тега <FONT FACE="family">, де "family" - назва шрифту. Якщо ви не указуєте назву шрифту або якщо вказаний вами шрифт не встановлений в системі - браузер відобразить текст шрифтом встановленим за умовчанням. Найбільш стандартними шрифтами є: ARIAL, TIMES, COURIER.
Приклад використання тега:
<FONT FACE="COURIER" SIZE="+1" COLOR="green">Трохи зеленого тексту</FONT>
Трохи зеленого тексту
Завдання:
1. Створити документ HTML. Для цього спочатку створити директорію, у якій ви будете його зберігати. Потім в цій директорії створити простий текстовий файл з розширенням .html. Наприклад, index.html. Це можна зробити за допомогою будь-якого текстового редактора, що дозволяє створювати і редагувати текстові файли. Таким редактором, що поставляється разом з Windows, є текстовий редактор NotePad (Блокнот) або NotePad++. Можна використовувати будь-який інший редактор текстів або спеціалізований редактор.
Зверніть увагу, що багато текстових редакторів зберігають файли застосовуючи для них за умовчанням розширення .txt. Щоб уникнути цього потрібно в діалоговому вікні збереження файлу вказати повне ім'я файлу разом з розширенням .html, а у випадному списку Тип файлу вибрати Всі файли *.txt. Результат вашої роботи можна подивитися за допомогою веб-сервера-броузера Internet Explorer. Для цього можна просто двічі кликнути лівою кнопкою миші по іконі файлу. Файли з розширенням .html за умовчанням відкриваються за допомогою цієї програми.
2. В створений документ HTML внести наступний код:
<html>
<head>
<title>Назва сторінки</title>
</head>
<body>
<div align="center">
<b>Добрий день! Це моя перша сторінка! </b>
<br>
Ласкаво прошу! :) </div>
<p align="justify">
Я зовсім нещодавно почав знайомство зі створенням інтернет-сторінок, тому для початку я роблю просту сторінку! Ось вона яка!:)
</p>
<FONT FACE="COURIER" SIZE="+2" COLOR="red">Заходьте до мене на сторінку!</FONT>
</body>
</html>
3. Збережіть зміни в текстовому файлі. Виконайте команду Файл - Зберігти-> назва.html.
4. Відкрийте створений файл в програмі інтернет-браузера.
Опрацювання текстових даних
Практична робота №1
Практична робота №2
Виконану практичну роботу надсилати на
електронну пошту admin@sch36vmr.ukr.education
Обов'зково вказуйте клас, прізвище,
ім'я.
Обов'зково вказуйте клас, прізвище, ім'я.
