Веб-Программирование

Лабораторная №1

Задание: Разработать простой сайт, используя технологии HTML5 и CSS3.

Возможные варианты: Сайт компании, сайт общественной организации, сайт магазина, исторический сайт, сайт музея, развлекательный сайт, музыкальный сайт, сайт хранилище, научный сайт и т.д. Можно использовать свою предметную область.

Требования:

1. Сайт должен состоять из 5-8 страниц (разделов);

2. Блочная структура страницы (блок заголовок, блок меню, блок рабочей области, блок копирайт, другие блоки);

3. Единый дизайн страниц (расположение блоков, цветовая гамма, шрифт и др.);

4. Для структуры страницы использовать HTML5;

5. Для дизайна использовать единую таблицу стилей (внешний файл CSS3);

6. На сайте обязательное использование следующих тегов (контейнеров): html-документ, заголовок документа, мета-информация о документе, заголовки, абзацы текста, списки, таблицы, ссылки, картинки, логическое и физическое форматирование текста, html5 теги (header, footer, nav, article, section, aside, audio, video).

7. Обязательное использование трех видов селекторов CSS: html-контейнер, класс и идентификатор объекта.

Используемые инструментальные средства:

- под Windows - Notepad++, SciTE, TopStyle, Atom, NetBeans IDE

- под Linux - Quanta или vim или др. (можно NetBeans IDE).

По итогам выполнения лабораторной работы представить отчет и программный код.

Лабораторная №2

Задание: К разработанному сайту (проекту) в лаб №1 добавить возможности интерактивности (динамики на стороне клиента), используя язык программирования JavaScript.

Варианты динамики: Интерактивное меню, интерактивная таблица, слайд шоу, генерация документа, гостевая книга, проверка полей формы на корректность вводимых данных, проигрывание музыки и видео, интерактивные подсказки, формы, фотогалерея и т.д.

Требования (не обязательно все пункты, можно несколько на выбор, кроме пункта 6):

1. Интерактивное меню или таблица;

2. Создание одной или нескольких форм;

3. Проверка на корректность введенных в форме данных;

4. Обработка данных формы и генерация новой страницы;

5. Галерея объектов (картинок) и получение свойств объекта в новом окне;

6. Обязательное использование трех видов внедрения JavaScript в страницу HTML: гипертекстовая ссылка (схема URL), обработчик события (handler), вставка (контейнер SCRIPT).

По итогам лабораторной работы представить отчет и программный код.

Используемые инструментальные средства:

- под Windows - Notepad++, SciTE,NetBeans IDE

под Linux - Quanta или vim или др (NetBeans IDE) для отладки Firefox с плагином Firebug