Практические задания по теме «Web-дизайн и программирование»

Язык гипретекстовой разметки HTML 4.0

Практическая работа № 1 – «Разметка страницы тегами HTML»

• Задание № 1.1 – «Разметка и эскиз первой HTML-страницы»

Практическая работа № 2 – «Создание простого web-сайта»

• Задание № 2.1 – «Создание первого web-сайта с тремя html-страницами» (+ пример: стр. 1, стр. 2, стр. 3)

Практическая работа № 3 – «Разметка web-страниц с использованием таблиц»

• Задание № 3.1 – «Размещение таблиц на html-странице. Форматирование текста в таблице»
• Задание № 3.2 – «Размещение таблиц на html-странице. Форматирование ячеек таблицы»
• Задание № 3.3 – «Размещение таблиц на html-странице. Объединение ячеек таблицы»
• Задание № 3.4 – «Создание web-страницы с использованием таблиц» (+ пример 3.4)

Практическая работа № 4 – «Дополнительные элементы языка HTML для форматирования web-страниц»

• Задание № 4.1 – «Горизонтальные линии (тег <HR>)»
• Задание № 4.2 – «Escape-поcледовательности»
• Задание № 4.3 – «Физические и логические стили»

Практическая работа № 5 – «Форматирование web-страниц с использованием фреймов»

• Задание № 5.1 – «Создание простых фреймовых структур»
• Задание № 5.2 – «Создание сложных фреймовых структур»
• Задание № 5.3 – «Форматирование элементов фреймовых структур»
• Задание № 5.4 – «Создание сайта содержащего фреймовую структуру» (+ пример 5.4: стр. 1, стр. 2, стр. 3, стр. 4, стр. 5)

Практическая работа № 6 – «Отправка данных на web-сайт с использованием форм»

• Задание № 6.1 – «Создание формы с использованием тега <BR> »
• Задание № 6.2 – «Создание формы с использованием тега <HR> »
• Задание № 6.3 – «Создание формы с использованием тега <PRE> »
• Задание № 6.4 – «Создание формы с использованием таблиц»
• Задание № 6.5 – «Создание формы с использованием тега <P> »
• Задание № 6.6 – «Создание формы с использованием cписка определений»
• Задание № 6.7 – «Создание формы с использованием нумерованного списка»
• Задание № 6.8 – «Создание формы с использованием с размещением флажков/переключателей по горизонтали»
• Задание № 6.9 – «Создание формы с использованием с размещением флажков/переключателей в списке»
• Задание № 6.10 – «Создание формы с использованием сетки переключателей»
• Задание № 6.11 – «Создание html-документа с несколькими формами»

Практическая работа № 7 – «Размещение на web-странице мультимедийных объектов»

• Задание № 7.1 – «Встаивание в web-странницу модулей, содержащих flash-графику» (+ пример 7.1)
• Задание № 7.2 – «Встаивание в web-странницу модулей, содержащих avi-изображение» (+ пример 7.2)
• Задание № 7.3 – «Создание web-страниц с элементами ActiveX» (+ пример 7.3)
• Задание № 7.4 – «Создание сайта с внедрением мультимедийных модулей» (+ пример 7.4 и страница page1.php)

Практическая работа № 8 – «Форматирование web-страниц с использованием таблиц стилей. Создание каскадных листов стилей (css)»

• Задание № 8.1 – «Форматирование HTML-страницы с помощью листа стилей – тег <style>...</style> (+ пример 8.1)
• Задание № 8.2 – «Cоздание внешнего листа стилей для форматирования HTML-страниц (+ пример 8.2)
• Задание № 8.3 – «Создание web-сайта с использованием листов стилей» (+ пример 8.3: стр. 1, стр. 2, стр. 3, стр. 4, стр. 5)
• Задание № 8.4 – «Применение визуальных фильтров для Internet Explorer» (+ пример 8.4)
• Задание № 8.5 – «Форматирование страниц с использованием CSS»

Динамический HTML (DHTML)

Практическая работа № 9 – «Объектная модель DHTML. События»

• Задание № 9.1 – События onMouseOver, onMouseOut. Объекты self и status (+ пример 9.1)
• Задание № 9.2 – Событие onDblClick (двойной щелчок). Метод alert (+ пример 9.2)
• Задание № 9.3 – Событие onHelp (+ пример 9.3)
• Задание № 9.4 – Событие onMouseMove (+ пример 9.4)
• Задание № 9.5 – События onClick, onMouseOut, onMouseOver и onMouseUp (+ пример 9.5)
• Задание № 9.6 – Использование форм и JavaScript (+ пример 9.6)
• Задание № 9.7 – Событие onChange (+ пример 9.7)

Практическая работа № 10 – «Объектная модель DHTML. Методы»

• Задание № 10.1 – Методы click и alert. Свойство returnValue ( + пример 10.1)
• Задание № 10.2 – Метод insertAdjacentHTML ( + пример 10.2)
• Задание № 10.3 – Метод insertAdjacentText ( + пример 10.3)

Практическая работа № 11 – «Объектная модель DHTML. Свойства»

• Задание № 11.1 – Свойство className ( + пример 11.1)
• Задание № 11.2 – Свойство id. Метод innerHTML ( + пример 11.2)
• Задание № 11.3 – Свойство style ( + пример 11.3)
• Задание № 11.4 – Свойство title ( + пример 11.4)

Практическая работа № 12 – «Объектная модель DHTML. Визуальные фильтроы в DHTML для Internet Explorer»

• Задание № 12.1 – Фильтр переходов RevealTrans. Методы Apply, Play, Stop ( + пример 12.1)

Практическая работа № 13 – «Объектная модель DHTML. Примеры программ на JavaScript. Управление окнами»

• Задание № 13.1 – Объект Window. Метод open. Событие onClick ( + пример 13.1)
• Задание № 13.2 – Объект Window. Методы open, clоse. Событие onClick ( + пример 13.2)
• Задание № 13.3 – Объект navigator. Метод appName ( + пример 13.3)
• Задание № 13.4 – Методы alert, confirm, promt ( + пример 13.4)
• Задание № 13.5 – Метод scroll ( + пример 13.5)

Практическая работа № 14 – «Объектная модель DHTML. Примеры программ на JavaScript. Создание слайд-шоу»

• Задание № 14.1 – Коллекция тегов image. Атрибут src ( + пример 14.1)
• Задание № 14.2 – Событие onChange. Массив Array. Свойство selectedIndex ( + пример 14.2)

Практическая работа № 15 – «Объектная модель DHTML. Примеры программ на JavaScript. Работа с датой и временем»

Практическая работа № 16 – «Объектная модель DHTML. Примеры программ на JavaScript. Абсолютное и относительное позиционирование элементов»

Практическая работа № 17 – «Объектная модель DHTML. Примеры программ на JavaScript. Создание раскрывающихся меню с иерархической структурой»