10 клас

Самостійна робота 1

Самостійна робота 2

Самостійна робота 3

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

1. Структура веб-сайтів. 

Розрізняють зовнішню та внутрішню структуру веб-сайту. 

 Основними елементами цієї структури є:

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

-Меню– це засіб для переходу до основних розділів сайту. Наприклад, таких, як каталог файлів, форум, зворотній зв’язок та ін.

-Контент(англ.content– зміст) – змістове наповнення веб-сторінки, доступне користувачу: тексти, зображення, відео, звукові дані та інше.

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

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

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


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

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

Візуальна класифікація веб-сайтів.

 

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

Текстові сайти містять переважно текстову інформацію та від­носно мало зображень. Вони порівняно невеликі за роз­міром і мають простий дизайн. Дуже часто сайти інших типів крім стандартної мають ще й текстову версію — для тих відвідува­чів, які з різних причин не хочуть завантажувати повні варіанти веб-сторінок.

Графічні сайти окрім певних текстових матеріалів містять бага­то графіки: спливаючі меню, піктограми, анімаційні зображення тощо.

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

Такі сайти найчастіше отримують нагороди Webby Awards за свій нетрадиційний, інноваційний дизайн. Наприклад, сайт LeoBurnett.ca став переможцем 2005 року в категорії «Кращий візуальний дизайн».

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

Основи веб-дизайну. Огляд сервісів Веб 2.0. Веб-спільноти. Вікі технології.

1. Основи веб-дизайну.

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

 

Виділяють такі базові елементи веб-дизайну:

 

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

 

- форми - використовуються для структурування даних, їх групування, привернення уваги до оформлення. Є три основні типи форм: геометричні (прямокутники, кола, трикутники тощо), природні (листя, каміння, краплі та ін.), абстрактні (символи, іконки тощо).

 

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

 

- колір - використовується як фон, для розставлення акцентів, розділяє передній і задній плани та ін.

 

- напрям - додає настрій, створює ілюзію сталості чи руху.

ПРАКТИЧНЕ ЗАВДАННЯ

Створення web-сторінок

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.      Відкрийте створений файл в програмі інтернет-браузера. 

Приклад (шаблон)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Ліцей 36</title>

<style type="text/css">

.header {height:60px; background-color:#717dc9; padding:20px; text-align:center}

.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}

.center_col {background-color:#ffffff; padding:15px; vertical-align:top}

.right_col {width:120px; background-color:#dddddd; padding:15px; vertical-align:top}

.footer {padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px}

</style>

</head>

<body bgcolor="silver">

<table cellpadding="0" cellspacing="0" width="900" align="center">

<tr>

<td colspan="3" class="header">Текс</td>

</tr>

<tr>

<td class="left_col">Меню</td>

<td class="center_col">

<br>Ширина ячейки в даному випадку залежить від заданої велечини монітора або разміру вікна браузера.</td>

<td class="right_col">Посилання</td>

</tr>

<tr>

<td colspan="3" class="footer">&copy; Всі права захищені</td>

</tr>

</table>

</html>

 




Використовуйте програму  notepad++ для створення WEB сторінок (потрібно включити підсвітку синтаксису)




I Семестр

Розділ 1. Інформаційні технології в суспільстві


Урок 1. Інформація, повідомлення, дані, інформаційні процеси

Урок 2. Інформаційні системи як важливі складники й ознаки сучасного суспільства

Урок 3. Людина в інформаційному суспільстві

Урок 4. Загрози при роботі в Інтернеті і їх уникнення.

Урок 5. Навчання в Інтернеті. Професії майбутнього.

Урок 6. Комп’ютерно-орієнтовані засоби.

Урок 7(8). Поняття про штучний інтелект, інтернет речей, Smart-технології та технології колективного інтелекту.


Розділ 2. Моделі і моделювання. Аналіз та візуалізація даних


Урок 9. Комп'ютерне моделювання об'єктів і процесів. Комп'ютерний експеримент.

Урок 10. Основи статистичного аналізу даних. Ряди даних. Обчислення основних статистичних характеристик вибірки.

Урок 11. Візуалізація рядів і трендів даних

Урок 12. Інфографіка. Практична робота №3

Урок 13. Програмні засоби для складних обчислень, аналізу даних та фінансових розрахунків.

Урок 14. Розв’язування оптимізаційних задач

Майстер-клас "Створення ППЗ". Практична частина


 

Підписатися на: Дописи (Atom)