Курс лекцій та лабораторний практикум Частина 1 Основи Web-дизайну з курсу Сучасні Internet-технології, НУДПСУ

ДЕРЖАВНА ПОДАТКОВА АДМІНІСТРАЦІЯ УКРАЇНИ

Національна академія державної податкової служби України

Київський фінансово-економічний коледж Ну ДПС України

Сучасні Internet-технології.

Курс лекцій та лабораторний практикум.

Частина I.  Основи Web-дизайну.

Навчальний посібник

Ірпінь – 2007

«Сучасні Internet технології. Курс лекцій та лабораторний практикум. Частина I.  Основи Web – дизайну ». – Ірпінь: Академія ДПС України, 2007. – 232 с.

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

Для студентів вищих навчальних закладів,  що  вивчають     дисципліни "Сучасні  Інтернет – технології ", “ WEB – дизайн”, або для самоосвіти.

Навчальний посібник «Сучасні Internet технології. Курс лекцій та лабораторний практикум. Частина I.  Основи Web-дизайну» складений на основі навчальної програми з курсу „Інформатика і комп’ютерна техніка” для підготовки молодшого спеціаліста.

 ЗМІСТ

ВСТУП

Тема 1. ПЕРЕДУМОВИ СТВОРЕННЯ HTML - ДОКУМЕНТІВ

1.1. Інтернет  та WWW

1.2. URL-адреса

1.3. Коротка характеристика мови HTML

1.4. Контрольні запитання

Тема 2. ПРАВИЛА ПОБУДОВИ HTML - ДОКУМЕНТІВ

2.1. Визначення загальних параметрів

2.2. Форматування тексту

2.3. Використання тегів заголовків

2.4. Форматування HTML-документа

2.5. Використання коментарів та спеціальних символів

2.7. Контрольні запитання

Тема 3. РИСУНКИ, ГІПЕРПОСИЛАННЯ, СПИСКИ

3.1. Рисунки

3.2. Звук

3.3. Гіперпосилання

3.4. Списки

3.5. Контрольні запитання

Тема 4. ВИКОРИСТАННЯ ТАБЛИЦЬ, ФОРМ ТА ФРЕЙМІВ

4.1. Таблиці

4.2. Форми

4.3. Фрейми

4.4. Контрольні запитання

Тема 5. ВИКОРИСТАННЯ ДИНАМІЧНОГО HTML

5.1. Визначення динамічного HTML

5.2. Визначення каскадних таблиць стилів

5.3. Особливості запису каскадних таблиць стилів

5.4. Ієрархія стилів

5.5. Властивості форматування елементів

5.6. Контрольні запитання

Тема 6. ОСНОВИ МОВИ ПРОГРАМУВАННЯ JAVASCRIPT

6.1. Загальний огляд мови JavaScript

6.2. Синтаксис. Визначення та ініціалізація змінних

6.3. Вирази та оператори

6.4. Оператори вибору

6.5. Оператори циклу

6.6. Контрольні запитання

Тема 7. РОЗШИРЕНІ МОЖЛИВОСТІ JAVASCRIPT

7.1. Використання функцій

7.2. Об’єктна модель JavaScript

7.3. Обробка подій

7.4. Стандартні об’єкти і функції JavaScript

7.5 Використання об’єктів window, document, location

7.6. Контрольні запитання

Тема 8. ЗАБЕЗПЕЧЕННЯ ЕФЕКТИВНОСТІ WEB – САЙТІВ

8.1. Загальні положення

8.2. Web - орієнтовані методи забезпечення ефективності сайта

8.3. Оптимізація структури та змісту сайта

8.4. Адаптація сайта до клієнтського програмного забезпечення

8.5. Контрольні запитання

ЛАБОРАТОРНИЙ ПРАКТИКУМ

Лабораторна робота №1 Використання ресурсів мережі Інтернет за допомогою браузера Microsoft Internet Explorer

Лабораторна робота №2 Створення текстової HTML-сторінки

Лабораторна робота №3 Використання рисунків, відео та звуку на HTML-сторінці

Лабораторна робота № 4 Створення гіперпосилань

Лабораторна робота №5 Створення списків

Лабораторна робота №6 Створення таблиць

Лабораторна робота №7 Створення фреймів

Лабораторна робота №8 Форматування елементів Web-сторінки за допомогою каскадних таблиць стилів

Лабораторна робота №5 Створення інтерактивних Web-документів

Лабораторна робота №9 Публікація Web-сайта у мережі WWW

Лабораторна робота №10 Забезпечення високої ефективності використання сайтів за допомогою пошукових систем

ЛІТЕРАТУРА

ГЛОСАРІЙ

ВСТУП

Ефективне управління виробництвом, формування оптимальних рішень у різноманітних сферах економіки та бізнесу, сталий розвиток підприємства у значною мірою залежать від рівня впровадження та використання інформаційних систем (ІС) і технологій. На сучасному етапі розробка та впровадження досконалих ІС неможлива без їх адаптації до використання у глобальній мережі Internet, а також однієї з її основних частин мережі WWW.  Характерною рисою адаптації є наявність у ІС Web-сайта, доступного користувачам завдяки мережі WWW.  Широке розповсюдження Web-сайтів призвело до появи нового напряму у галузі програмування – Web-дизайну.

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

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

Навчальний посібник складається з восьми теоретичних тем та лабораторного практикуму, що призначений для отримання практичних навичок створення клієнтського програмного забезпечення Web-сайта, його публікації у мережі Інтернет та забезпечення високої ефективності функціонування. Особливістю лабораторного практикуму є орієнтація на виконання лабораторних робіт з використанням тільки текстового редактора “Блокнот” та браузера, без застосування спеціальних HTML-редакторів. Це дозволяє акцентувати увагу студентів на розробку програмного забезпечення, а не розсіювати її на вивчення складного інтерфейсу  HTML-редактора, який змінюється з кожною новою версією. Як свідчить практика, знаючи HTML, CSS та JavaScript, можна освоїти інтерфейс HTML-редакторів без особливих труднощів. Оригінальною частиною практикуму є лабораторні роботи, що дозволяють реально опублікувати Web-сайт у мережі Інтернет та вплинути на його ієрархію у пошукових системах.

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

ЛІТЕРАТУРА

1. Антоненко В.М., Терейковський І.А., Терейковська Л.О. Основи Web-дизайну: Конспект лекцій. – К.: МГІ КСУ, 2005. – 116 с.

2. Антоненко В.М., Рогушина Ю.У. Сучасні інформаційні системи і технології. Навчальний посібник. – К.: КСУ МГІ, 2005. – 131 с.

3. Вандер Вер Э. JavaScript для чайников. – К.: Издательский дом «Вильямс», 2001. – 304 с.

4. Гарнаев А., Гарнаев С. Web программирование на Java и JavaScript. – СПб. БХВ-Петербург, 2002. – 1040 с.

5. Кастаньето Д. Профессиональное PHP-программирование. СПб.: Символ-Плюс, 2001. – 912 с.

6. Колбери Р. Освой самостоятельно CGI за 24 часа. – М.: Издательский дом “Вільямс”, 2001. – 368 c.

7. Костарев А. РНР у Web-дизайне. – СПб.: ВНV, 2002. – 592 с.

8. Матросов А., Сергеев А., Чаунин М. HTML 4.0. – СПб.: БХВ-Петербург, 1999. – 672 с.

9. Паттерсон Л. и др. Использование HTML 4.0. – К. –М. –СПб.: Издат. дом “Вильямс”, 1998. – 384c.

10. Терейковський І.А. Підвищення ефективності функціонування корпоративних Web-сайтів: К // Вісник КНУТД. – 2004 с. – № 4. – 41-46.

11. Холл М., Браун Л. Программирование для Web. К.: Издательский дом “Вільямс”, 2002. – 1264 с.

12. http://www.postroika.ru

13. http://www.siteforum.ru

ГЛОСАРІЙ

DOM (Document Object Model - DOM) – інтерфейс прикладного програмування браузера, що пов’язує між собою HTML, CSS та мови сценаріїв.

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

Web-орієнтовані ІС –це інформаційні системи, призначені та пристосовані для використання мережі WWW.

Web-сервер – сервер, який обслуговує запити користувачів (клієнтів) згідно з протоколом HTTP, забезпечує актуалізацію, збереження інформації WEB-сторінки, зв’язок з іншими серверами.

Web-сторінка (Web-сайт) – окремий інформаційний ресурс мережі WWW, що має власну адресу.

HTML-документ – файл текстової або нетекстової природи (звук, відео, зображення), створений за допомогою мови гіпертекстової розмітки  HTML (Hyper Text Mark-up Language).

TCP/IP – це множина комунікаційних протоколів, що визначають як комп’ютери різноманітних типів з різноманітними операційними системами можуть спілкуватись між собою.

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

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

Впровадження  стилів у тег HTML-документа – це технологія, що дозволяє змінювати форматування конкретних елементів HTML-сторінки.  

Гіперпосилання – методика зв’язування одного Web-ресурсу з іншим. Гіперпосилання складається із двох частин. Перша частина – це об’єкт, який користувач бачить у вікні браузера і вибір якого призводить до переходу на цільовий Web-ресурс. Друга частина – це адреса цільового Web-ресурсу.

Динамічний HTML (DHTML) – це термін, який використовується для позначення HTML-сторінок з динамічно змінюваним змістом. Реалізація DHTML складається із трьох компонентів: безпосередньо HTML, каскадних таблиць стилів (CSS) та мови сценаріїв (JavaScript або VBScript).

Інтернет (мережа Інтернет) – сукупність мереж та обчислювальних засобів, які використовують стек протоколів TCP/IP (Transport Control Protocol/Internet Protocol), спільний простір імен та адрес для забезпечення доступу користувачів до інформаційних ресурсів мережі.

Пов’язування стилів з HTML-документом – це технологія, що дозволяє використовувати одну таблицю стилів для форматування декількох HTML-сторінок.

Каскадна таблиця стилів (CSS) - це технологія визначення та поєднання стилів з HTML-сторінкою.

Клієнт мережі WWW– браузер, що використовується клієнтом мережі Інтернет для доступу до ресурсів мережі WWW.

Метод об’єкта JavaScript – це функція, що пов’язана з об’єктом.

Об’єкт JavaScript – це цілісна конструкція, що має властивості, які є змінними JavaScript, та методи їх обробки.

Провайдер – юридична або фізична особа, яка надає користувачам доступ до мережі Інтернет.

Сервер – об’єкт комп’ютерної системи (програмний або програмно-апаратний засіб), що надає послуги іншим об’єктам за їх запитами.

Списки – широко розповсюджена форма показу даних. Мовою HTML передбачено використання трьох стандартних видів списків: маркірованого, нумерованого та списку визначень.

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

Таблиця стилів - це шаблон, який керує форматуванням тегів HTML-сторінки.

Тег HTML – команда мови HTML.

Скрипт ( сценарій) – програма JavaScript.

Форма – засіб для передачі інформації від клієнта на Web-сервер. Як правило, результатом такої передачі є відображення у клієнта нового HTML-документа, сформованого Web-сервером на основі переданої інформації.

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

Функція  JavaScript – це іменована група команд, які вирішують певну задачу та можуть повернути деяке значення.

З повагою ІЦ “KURSOVIKS”!