Технологія сайтобудування в інформаційній сфері (стр. 2 )

Тема 1. Вступ. Розвиток програмування НТML,

JavaScript, PHP і MySQL та програмного середовища

Комп'ютерна програма як товар. Види програм за призначенням. Об'єктно-орієнтована розробка програм. Проблеми складності програмного забезпечення, керування процесом розробки. Гнучкість програмного забезпечення. Проблеми опису дії окремих систем. Роль декомпозиції. Розвиток програмування НТML, JavaScript, PHP i MySQL та програмного середовища. Історія, тенденції розвитку.

Тема 2. Методи програмування в НТML

Розробка та програмування сайту в НТML. Методи програмування в НТML. Структурний підхід. Теорія розмітки. Мови узагальненої розмітки. Переваги НТML, ХМL. Включення ХМL у корпоративне середовище. Логічне форматування тексту. Гіперпосилання. Вставка графічного зображення. Створення таблиць, списків, абзаців, заголовків.

Тема 3. Фрейми. Фільтри

Особливості розробки фрейму. Види програмування фреймів. Стилі форматування фреймів. Структура фреймів. Візуалізація інфор-маційного процесу на основі сенсорного зображення. Створення багатовіконних документів та сенсорних зображень. Короткі теоретичні положення. Вертикальні та горизонтальні фрейми. Форматування фреймів. Вбудовані фрейми. Стилі форматування фільтрів. Структура фільтрів.

Тема 4. Каскадні таблиці стилів. Форми

Види стилів. Класи та ідентифікатори. стилів. Використання стилів у шрифтах. Структура власних стилів у сайті. Створення користувацьких класів. Конструктори та деструктори об'єктів. Створення елементів керування (створення складових елементів керування, розробка елементів нестандартної форми, малювання на стандартних елементах керування). Розробка форм. Види форм. Програмування власних форм.

Тема 5. Введення в JavaScript.

Розробка сайта та його реєстрація

Призначення мови JavaScript. Історія створення JavaScript. Основи мови JavaScript. Типи даних в JavaScript. Оператори, константи, цикли. Масиви. Оператори управління. Оператори циклу. Оператори розгалуження (умовні оператори). Розробка сайта та його реєстрація.

ПЛАНИ ЛЕКЦІЙ ТА ПРАКТИЧНИХ ЗАНЯТЬ

Тема 1. Вступ. Розвиток програмування НТML,

JavaScript, PHP i MySQL та програмного середовища

1. Комп'ютерна програма як товар.

2. Види програм за призначенням. Об'єктно-орієнтована розробка програм. Проблеми складності програмного забезпечення.

Література: 1, 7, 9, 10, 13, 14, 17

Практична робота №1

Ознайомлення зі структурою Інтернету, методами передавання інформації в Інтернеті.

Питання для самоперевірки

1. Розкрити поняття “програма”, “програмування”, “програміст” у сучасному контексті.

2. Пояснити призначення протоколів TCP/IP.

3. Що називається ІР-адресою?

4. Що називається Web-сторінкою?

5. Що називається Web-сайтом?

6. За якими правилами записується URL документа?

7. Яке основне призначення мови HTML?

8. Що називають дескриптором (тегом)?

9. Що таке атрибут (параметр) дескриптора?

10. Яку загальну структуру мають HTML-документи?

Завдання для самостійної роботи

Проаналізувати текстовий та ілюстрований матеріал, що був представлений у слайд-шоу на лекції. Підготувати презентацію: “Розвиток програмування та програмного середовища. Історія, тенденції, сьогодення.”

Тема 2. Методи програмування в НТML

1. Теорія розмітки НТML. Гіперпосилання.

2. Створення таблиць, списків, абзаців, заголовків,

3. Розробка та програмування сайту в НТML.

4. Методи програмування в НТML.

Література: 1, 7, 10, 14

Практична робота №2

Мова розмітки гіпертексту – НТML. Поняття тегу.

Практична робота №3

Створення та форматування списків та таблиць методами мови HTML.

Практична робота №4

Представлення інформаційної системи за допомогою гіпертекстової технології.

Розробка електронного підручника за допомогою внутрішніх гіперпосилань.

Питання для самоперевірки

1. Який синтаксис HTML-коду, що створює заголовки різного рівня?

2. Як вирівняти текст абзацу?

3. Як помістити на сторінку попередньо відформатований текст?

4. Назвіть основні дескриптори стилів.

5. Яке призначення контейнера <FONT>? Назвіть його параметри.

6. Як помістити на сторінку спеціальний символ форматування?

7. Які формати графічних файлів використовують на Web-сторінках?

8. Як помістити на Web-сторінку графічне зображення?

9. Назвіть призначення атрибутів (параметрів) тега <А>.

10. Як створити зображення-гіперпосилання?

11. Для чого використовується альтернативний текст?

12. Мови узагальненої розмітки НТML.

13. Підтримка НТML у браузерах.

14. Розробка та програмування сайту в НТML.

15. Методи програмування в НТML.

Завдання для самостійної роботи

Проаналізувати текстовий та ілюстрований матеріал, що був представлений у слайд-шоу на лекції. Підготувати презентацію: “Методи програмування в НТML”.

Практичні завдання

1. Створити Web-сторінку, на якій відображено назву навчального закладу.

2. Скласти метаінформацію для створеної сторінки.

3. Змінити фон сторінки.

4. Змінити колір гіперпосилань.

5. Вказати для сторінки фонове зображення.

Тема 3. Фрейми. Фільтри

1. Стилі форматування фреймів.

2. Логічне форматування тексту за допомогою фільтрів.

3. Вставка графічного зображення у фрейми.

Література: 9. 10, 13, 14, 17

Практична робота №5

Візуалізація інформаційного процесу на основі сенсорного зображення.

Створення багатовіконних документів та сенсорних зображень.

Питання для самоперевірки

1. Як задати фреймову структуру?

2. Призначення дескриптора <FRAMESET> та його параметрів.

3. Назвіть атрибути дескриптора <FRAME>.

4. Коли доцільно використовувати фреймову структуру?

5. Як під час використання фреймової структури відобразити інформацію у браузерах, що не підтримують роботу з фреймами?

6. Як сховати рамку між фреймами?

7. Якими способами можна задати ширину та висоту фрейму?

8. Як змінити товщину рамки, що поділяє фрейми?

9. Для чого використовується атрибут TARGET?

10. Назвіть зарезервовані імена фреймів?

11. Для чого можуть використовуватися фрейми?

Завдання для самостійної роботи

1. Проаналізувати текстовий та ілюстрований матеріал, що був представлений у слайд-шоу на лекції. Підготувати презентації: “Форматування Web-сторінок” та “Створення фреймів”.

2. Створити документи, утворені трьома фреймами. У верхньому відобразити інформація про сайт. У лівому навігаційну панель за допомогою механізму гіперпосилань. Якщо вибирати певне посилання, то відповідна йому сторінка повинна завантажуватись у правий фрейм.

2. На одній із сторінок, які завантажуються у правий фрейм, створити плаваючий фрейм.

3. Створити таку фреймову структуру:

Практичні завдання

1. Помістити на Web-сторінку кілька заголовків різного рівня.

2. Відцентрувати заголовки.

3. Розташувати на сторінці вірш, врахувавши його параметри форматування.

4. Застосувати до тексту вірша різні теги стилів.

5. Записати прізвище та ім'я автора вірша, поставивши між ними нерозривний пропуск.

6. Проілюструвати використання параметрів тегу <FONT>.

7. Вставити на сторінку декілька зображень.

8. Для кожного зображення застосувати певний тип вирівнювання.

9. Змінити ширину та висоту зображень.

10. Встановити відступи від зображення до тексту.

11. Збільшити товщину рамки, що обмежує зображення.

12. Створити для зображень альтернативний текст.

13. Створити сторінку № 2 та помістити на ній зображення, яке буде відігравати роль гіперпосилання на сторінку № 1.

Тема 4. Каскадні таблиці стилів. Форми

1. Види стилів. Форми.

2. Класи та ідентифікатори стилів.

3. Позиціюнування елементів. Використання стилів в шрифтах.

4. Розробка власних стилів у сайті.

Література: 1, 7, 9, 13, 14

Практична робота №6

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

Розробка власних стилів у сайті. Створення впровадженої CSS, яка б містила значення таких властивостей:

– колір фону, колір символів;

– пріоритетність використання шрифтів;

– розмір та колір заголовків 1-го рівня;

– відображення курсивом заголовків 2-го рівня;

– вид маркерів у списках;

– відображення певним кольором гіперпосилань та зміну кольору гіперпосилання при наведенні на нього вказівника миші.

Питання для самоперевірки

1. Що називають таблицею стилів?

2. Чому таблиці стилів називають каскадними?

3. Як записуються правила CSS?

4. Назвати способи використання CSS у документі.

5. За яким пріоритетом використовуються CSS у документі?

6. Яке призначення селектора class?