Кафедра інформаційних технологій та систем

 

 

А. В. Фоменко

Практикум зі створення

Web сайтів

 

HTML, CSS, DHTML

 

Методичні вказівки до лабораторних робіт з курсу

«Практикум зі створення Web»

Для магістрантів

Спеціальності

«Діловодство та інформаційна діяльність»,

 «ШКІ (профільне навчання)»

для студентів 4, 5 курсів

Спеціальностей

«Інформатика» та «Фізика»

 

Луганськ

2008

УДК 371.315.7: 004.738.5 (076.1)

ББК 74.202.53 р3

Ф 76

Рецензенти:

 

Могильний Г. А. – кандидат технічних наук, доцент, завідувач кафедри інформаційних технологій та систем Луганського національного університету імені Тараса Шевченка.

Лахно В. А. – кандидат технічних наук, доцент Луганського національного   аграрного університету.

               Фоменко А. В.

Ф 76  Практикум зі створення Web сайтів. HTML, CSS, DHTML: методичні вказівки до лабораторних робіт з курсу «Практикум зі створення Web» для магістрантів спеціальності «Діловодство та інформаційна діяльність», «ШКІ (профільне навчання» для студентів 4, 5 курсів спеціальностей «Інформатика», «Фізика» / Андрій Вікторович Фоменко, Луганськ: Державний заклад «Луганський національний університет імені Тараса Шевченка», 2008. – 133 с.

 

 

Методичні вказівки містять 11 лабораторних робіт. Кожна лабораторна робота містить теоретичні відомості, приклади виконання завдань,  завдання, що необхідно виконати, та контрольні питання до кожної з розглядуваних тем.

Вказівки призначені для магістрантів спеціальності «Діловодство та інформаційна діяльність»; «ШКІ (профільне навчання)» для студентів 4, 5 курсів спеціальностей «Інформатика», «Фізика», які вивчають технології створення електронних інформаційних ресурсів. Також можуть бути використані викладачами курсу «Нові інформаційні технології» на інших спеціальностях, учителями інформатики для профільних класів.

УДК 371.315.7: 004.738.5 (076.1)

ББК 74.202.53 р3

 

Рекомендовано до друку навчально-методичною радою Луганського національного педагогічного університету імені Тараса Шевченка

(протокол № 7  від 5 березня 2008 року)

 

 

© Фоменко А. В., 2008

© Державний заклад «Луганський національний університет імені Тараса Шевченка», 2008

Зміст

ВСТУП.. 4

Модуль 1. Основи HTML. 5

Лабораторна робота №1 HTML - основні поняття, структура документа 5

Лабораторна робота №2 Робота з графічними зображеннями на Web-сторінці. Списки 14

Лабораторна робота №3 Робота з редактором web-сторінок Dreamweaver. Посилання. Зв'язок з іншими документами. Використання об'єктів як посилання. 22

Лабораторна робота №4 Створення таблиць. Робота з атрибутами таблиці. 33

Лабораторна робота №5 Створення фреймів Настроювання атрибутів фреймів. Використання посилань, створення фреймового меню. 44

Лабораторна робота №6 Карти зображень. Робота зі звуком. 58

Модуль 2. Створення інтерактівності. CSS. DHTML. 70

Лабораторна робота №7 Робота з формами 70

Лабораторна робота №8 Аркуші стилів 80

Лабораторна робота №9 Зовнішні аркуші стилів. Стильові властивості 95

Лабораторна робота №10 Спадкування й каскадуванния. Візуальні ефекти 108

Лабораторна робота № 11. DHTML. 120

Вимоги до звіту та критерії оцінювання 130

Завдання для індивідуальної роботи. 131

ВСТУП

Розвиток і активне впровадження в усі сфери діяльності нових інформаційно-комунікаційних технологій істотно змінюють моделі освіти, праці, суспільного життя та відпочинку.

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

Ці дані методичні вказівки є основою для подальшого вивчення професійно орієнтованих дисциплін, таких, як «Практикум зі створення Web», «Нові інформаційні технології», «Web-програмування», «ШКІ (профільне навчання)».

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

Методичні вказівки містять основні відомості, необхідні для засвоєння мови HTML, DHTML та CSS стилів. Розглянуто такі теми: основні принципи побудови HTML-документів; поняття тегів; основні теги документів: <HTML>, <HEAD>, <TITLE>, <BODY>; атрибути тегів; форматування тексту; теги заголовків <H1> … <H6>; вибір шрифту; колір фону й шрифту; списки; розділові смуги; вставка графічних зображень; формати графічних зображень; вирівнювання тексту й графічного зображення; фонова графіка; гіперпосилання: текстові та графічні; таблиці; фрейми; карти зображень; форми. Студенти вивчать можливості аркушів властивостей, а також використання об’ектів DHTML.

Методичні вказівки складаються з 11 лабораторних робіт, що мають таку структуру:

· тема й мета;

· стислі теоретичні відомості;

· завдання до лабораторної роботи;

· питання для самоконтролю.

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

 

Модуль 1. Основи HTML.

Лабораторна робота №1
HTML - основні поняття, структура документа

Мета: опанувати принципи побудови логічної структури HTML-документа і основні принципи форматування тексту.