Для создания сравнительно простых иллюстраций (схемы, чертежи, блок-схемы и т.п.)
2.4. Разработка ЭОП
2.4.1. Структура учебника.
Исходя из анализа изученного нами материала, была разработана следующая структура учебника:
Технологические карты.
Лабораторные работы.
Список литературы для самостоятельной подготовки. (рис. 2.4).
Рис.2.4. Структура электронного учебника.
Технологические карты
Модуль технологические карты состоит из 4-х карт-заданий. (рис.2.5).
Состоит из блоков:
Карта операций
Цель
Требования безопасности
Задания
Операции
Фотографии и схемы
Рис.2.5. Модуль технологические карты
Реализация данного модуля в программе через браузер (рис.2.6).
Рис.2.6. Реализация модуля «технологические карты»
Лабораторные работы
Модуль лабораторные работы состоит из 13 лабораторных работ, каждая из которых состоит из блоков: Цель и Ход работы (рис.2.7).
Рис.2.7. Модуль Лабораторные работы
Реализация данного модуля в браузере (рис.2.8)
Рис.2.8. Реализация модуля «лабораторные работы в браузере»
Стенд
Модуль стенд состоит из блоков
Введение
Описание модулей
Контроллер периферийного устройства
Общее описание модуля
Составные элементы модуля
Характеристики модуля
Контроллер USB
Общее описание модуля
Составные элементы модуля
Характеристики модуля
Модуль «преобразователь уровней»
Общее описание модуля
Составные элементы модуля
Характеристики модуля
Модуль логического анализатора
Общее описание модуля
Составные элементы модуля
Характеристики модуля
Работа со стендом
Создание проекта AVR Studio
Программирование модуля «Контроллер ПУ»
Программирование модуля «Контроллер USB»
Установка программного обеспечения (рис.2.9)
Рис.2.9. Стенд
Реализация в браузере рис.2.10.
Рис.2.10. Реализация в браузере
Теория
Темы
1. Порты ввода/вывода микроконтроллера ATmega16
1.1. Общая информация
1.2. Настройка вывода на вход/выход
1.3. Управление состоянием вывода
1.4. Чтение текущего состояния вывода
2. Дисплей WH1604A
2.1. Общая информация
2.2. Физический уровень
2.3. Логический уровень
2.4. Конечная точка
2.5. Передача информации
2.6. Дескрипторы
3. Интерфейс Centronics
3.1. Общая информация
3.2. Назначение контактов
3.3. Процедура обмена
3.4. Пример реализации интерфейса Centronics для микроконтроллера
ATmega16 на Си
4. Интерфейс PS/2
4.1. Общая информация
4.2. Входы, разрешение и масштабирование
4.3. Процесс принятия и передачи данных
4.4. Алгоритм передачи данных от устройства к хосту
4.5. Алгоритм передачи данных от хоста к устройству
4.6. Запрет передачи данных
4.7. Режимы работы интерфейса
4.8. Набор команд
4.9. Пример реализации интерфейса PS/2 для микроконтроллера
ATmega на Си
5. Интерфейс RS-232
5.1. Общая информация
5.2. Контакты разъема
5.3. Скорость передачи данных
5.4. Контроль четности
5.5. Типы четности
5.6. Обнаружение ошибок
5.7. Передача данных
5.8. Управление потоком
6. Интерфейс UART
6.1. Передача данных через UART
6.2. Организация обмена данных при аппаратном режиме синхронизации
6.3. Организация обмена данных при программном режиме синхронизации
6.4. Пример работы UART для микроконтроллера ATmega16 на Си
7. Интерфейс SPI
7.1. Общая информация
7.2. Обмен информацией по SPI
7.3. Протокол обмена по SPI
7.4. Режимы работы SPI
7.5. Аппаратный приемопередатчик
7.6. Пример обмена информацией по интерфейсу SPI для микроконтроллера ATmega16 на Си
8. Интерфейс I2C
8.1. Общая информация
8.2. Процедура обмена по I2C
8.3. Адресация в шине I2C
8.4. AVR TWI
8.5. Пример реализации интерфейса I2C на микроконтроллере AT-mega16 на Си 52
9. Интерфейс 1-wire
9.1. Общая информация
9.2. Инициализация: сигнал сброса и присутствия
9.3. Запись данных на 1-Wire шине
9.4. Чтение данных на 1-Wire шине
9.5. Температурный датчик DS18B20
9.6. Внутренняя память DS18B20
9.7. Контактная память DS1990
9.8. ROM команды
9.9. Функциональные команды DS18B20
9.10. Пример реализации интерфейса 1-wire для микроконтроллера ATmega на Си
10. Интерфейс USB
10.1. Общая информация
10.2. Физический уровень
10.3. Логический уровень
10.4. Конечная точка
10.5. Передача информации
10.6. Дескрипторы
11. Классы USB
11.1. Класс USB-HID
11.2. Класс USB-MSD
11.3. Класс USB-CDC
11.4. Класс USB Audio
Каждая лекция в свою очередь делится на пункты и подпункты. Основной особенностью данной ЭОП является, прежде всего, его содержание. В основу было положено очень большое количество практического материала, листингов программ и готовых скриптов. Любой из них может быть скопирован и легко вставлен в редактор кода, после чего пользователь получает готовую, решенную задачу. Еще одной особенностью данного учебника является специально разработанная система навигации, которая позволяет любому пользователю легко перемещаться по материалу курса. В этом случае ЭОП может выступать в качестве справочного пособия. К сожалению, большой объем обработанного материала и сжатые сроки написания дипломного проекта не позволили реализовать возможность запуска скрипта непосредственно из учебника, но следует отметить, что кроме всего вышеизложенного, учебник сопровождается набором готовых проверенных и отлаженных скриптов, которые являются не просто повторением материала учебника, а его углублением и расширением (Рис.2.11).
Рис.2.11 Фрагмент теоретического модуля
Рис. 2.11. Программная реализация.
При работе над контентом ЭОП, было обработано порядка 10-ти печатных изданий и 15-ти электронных изданий по теме, что послужило основой в подборе наиболее актуального и интересного материала при разработке веб страниц.
ЭОП содержит большое количество практических примеров, о чем говорилось ранее, и, кроме того, большое количество задач, заданий, рассчитанных на заинтересованного студента, для самостоятельной работы.
2.5. Дизайн и разработка макета
Для разработки макета была использована таблично фреймовая структура (рис 2.12). Исходя из описанного выше, была определена световая палитра: оглавление на белом фоне, основной текст в большом окне на сером фоне. Дизайн строгий, в соответствии с функциональной направленностью и основной аудиторией пользователей. На страницах практически отсутствуют эффекты анимации (исключение логотип и панель навигации). Стиль оформления строгий, деловой. Элементы графики сведены к минимуму, для того, чтобы не отвлекать внимание пользователей от изучения материала и не загромождать программу. Весь дизайн выдержан в двух цветах: белом и голубом, для того, чтобы при работе глаза не уставали белый цвет, заменен на менее агрессивный серый 10%.
Рис 2.12. Интерфейс электронного учебника.
Панель навигации реализована в 5-ти различных видах, что обеспечивает возможность быстрого и легкого перехода к любому элементу учебника.
В учебнике существует окно «контент», которое через обычную систему гиперссылок, позволяет перейти к любой части электронного учебника (рис.9). Система гиперссылок организована в виде простейшего вертикального меню. Кроме того, на странице располагается горизонтальное меню, которое отвечает за переключение видов навигации по контенту, а также содержит переходы на начальную страницу и сведения о самом учебнике и его разработчике.
Рис.2.13. Окно гиперпереходов контент.
Вертикальная навигация (рис.2.14) для удобства сделана в стиле проводника, что по нашему мнению, более удобно, чем схема с выпадающими окнами и динамическими многоуровневыми меню. При большом объеме материала работа с такими меню затрудняет, а не упрощает перемещение по контенту.
Еще одним (третьим видом навигации) является страница, на которой расположена карта сайта. С одной стороны эта страница позволяет в удобной графической форме определить место перехода, но в данном случае предполагаемого эффекта, достигнуто не было из-за большого объема материала. Карта сайта получилась достаточно большой и громоздкой, хотя с другой стороны, она достаточно наглядна и позволяет пользователю оценить объем учебника и при достаточных навыках работы, поможет оперативно перейти в искомое место, например, при использовании материала в качестве справочника.
Рис. 2.4. Фрагмент вертикальной навигации.
Горизонтальная навигация представлена двумя панелями – внешней, о которой мы уже говорили выше (для переключения навигаций) и внутренней, отвечающей за последовательный линейный переход по материалу. Она реализована в двух видах: один показывает путь в учебнике с возможностью перехода на предыдущий материал (рис. 2.15); второй состоит из кнопок «вперед» и «назад», которые определяют последовательные переходы в выбранных направлениях.
Рисунок 2.5. Горизонтальная навигация и «хлебные крошки»
2.6. Установка и использование.
«ЭОП. Лабораторный практикум. Интерфейсы периферийных устройств» создана на языке программирования JavaScript. Особенностью данного языка является его кроссплатформеннось. Т.е. данный учебник может быть использован в любой операционной системе, которая поддерживает работу браузера и использует сетевые технологии. Учебник может быть расположен как на отдельной локальной машине, так и на сервере, как в локальной сети, так и в сети Интернет. Аппаратные требования минимальны, так как в качестве базового языка программирования использовалось самая первая, универсальная версия языка. Установка учебника в любом месте осуществляется простым копированием. Дополнительных настроек не требуется. Интерфейс является динамическим, т.е. программа определяет разрешение экрана и в соответствии с этим определяет размеры картинок, шрифтов, панелей и т.д. Единственное условие бесперебойной работы – это разрешить браузеру выполнять скрипты. Программа была протестирована на различных программных и аппаратных платформах и различных браузерах - недостатков замечено не было.
Есть недостаток в разработке, который касается низкого уровня интеллектуальности ЭОП. К элементам интеллектуальности можно было бы отнести таймеры, которые бы определяли время работы со страницей, систему подсказок, советов, анализа результатов теста с указанием пробелов в знаниях. К сожалению, блок интеллектуальности получился минимальным из-за большого объема переработанного и специально отструктурированного материала.
После установки учебника на компьютер можно запустить любой файл и с помощью системы навигации перейти к нужному пункту. Для того чтобы начать работу сначала необходимо запустить файл index.html.
При разработке ЭОП использовались только клиентские языки программирования и разметки, потому в учебнике полностью отсутствует механизм защиты информации и механизм передачи данных на сервер, что не являлось темой нашего исследования.
ЭОП рассчитана, в основном, на самостоятельную работу студентов. При этом преподавателю отводится роль консультанта или тьютора. Учебник может быть использован и при проведении лабораторных работ и практикумов, так как содержит большую часть практических заданий, как с готовыми решениями, так и без них.
Заключение к второму разделу
Была смоделирована, отструктурирована и создана электронный обучающая программа. В качестве базового языка программирования был выбран язык JavaScript. Тематика ЭОП была определена в соответствие с темой дипломной работы. Материал ЭОП был специально отобран и рассчитан на курсантов или студентов технических направлений, работающих по направлению информатика и компьютерная техника.
Учебник имеет удобную структуру, пятиуровневую панель навигации.
ЗАКЛЮЧЕНИЕ
Цель исследования достигнута –была разработана средствами языка JavaScript электронная обучающая программа для лабораторного практикума «Интерфейсы периферийных устройств».
В процессе исследования нами был решен целый ряд задач.
Исходя из многообразия подходов и толкований понятия «электронная обучающая программа», на основании мнения большинства ученых нами был определен понятийный аппарат, что же такое ЭОП как вид издания.
Проанализирована литература и Интернет-источники по вопросам, структурирования, разработки и требований предъявляемых к электронным средствам обучения. Особое внимание при этом было уделено вопросам, связанным с разработкой контента и педагогического сценария учебного средства. Выявлены недостатки у существующих электронных педагогических средств и пути их преодоления.
Определена структура ЭОП, связи между блоками материала, реализация быстрого перехода и возможности доступа к отдельным компонентам.
Определена и поставлена дидактическая цель, в соответствие с которой материал ЭОП подбирался и компоновался как лекционно-практический курс, направленный, в основном, на самостоятельную работу студентов. Нами была поставлена цель - создать ЭОП, которая реализовывала бы задачи учебного курса, и эта цель нами была успешно достигнута.
Был взвешенно и грамотно подобран инструментарий разработчика: выбраны языки и средства гипертекстовой разметки, язык программирования JavaScript, редакторы кода и дизайна страницы.
Анализ требований, предъявляемых к ЭОП, позволил четко определить структуру учебника, роль и виды панелей навигации, тестовой системы, уровни интерактивности.
ЭОП содержит набор лабораторных работ с полным методическим сопровождением по их использованию, как на занятиях, так и при самостоятельной работе студентов.
Описан процесс установки и использования программы, определено ее место в учебном процессе.
Учитывая универсальность, кроссплатформенность, простоту в использовании, низкие технологические и системные требования разработанной программы, применение ее имеет место практически во всех ВУЗах информационно-технического направления.
Несмотря на успехи, следует отметить и некоторые недостатки. В частности, разработка ЭОП является сложной и трудоемкой работой, которая должна проводиться совместно автором, экспертом в соответствующей предметной области знаний, и техническим специалистом, экспертом в области информационных образовательных технологий, а не одним человеком. Это работа для группы разработчиков с точно распределенными обязанностями. Поэтому нам не удалось реализовать все, что было задумано в начале, и избежать ряда ошибок, характерных для разработчиков-одиночек.
Тем не менее, программа соответствует большинству принципов построения ЭОП таких как: принципу квантования, принципу полноты, частично принципу наглядности, принципу ветвления, принципу регулирования, принцип адаптивности, принцип собираемости.
Все задачи исследования выполнены, разработанный нами учебный продукт может успешно использоваться в учебной деятельности и будет полезен как студентам для самостоятельной работы, так и преподавателям для организации аудиторной работы
СПИСОК ЛИТЕРАТУРЫ
Агеев В.Н. Электронная книга: Новое средство соц. коммуникации. М.: 1997.Бельмонт В. А. Язык HTML: решение проблем. – М.: Высшая школа, 2001. – 476с.
Агапова О.И., Кривошеев А.О., Ушаков А.С. О трёх поколениях компьютерных технологий обучения//Информатика и образование. 1994. №2. С. 34-40
Арзамасцев А.А., Китаевская Т.Ю., Иванов М.А., Зенкова Н.А., Хворов А.П. Компьютерная технология оптимального проектирования учебного процесса // Информатика и образование. 2001. № 4. С. 79-82.
Божко А. Dreamweaver4. Базовый курс. – Москва: издательство “ДЕСС КОМ”, 2001. – 448 с.
Бондаренко А.Н. Компьютерные технологии в учебном процессе. Ч.2. Автоматизация вычислений, моделирование и проектирование. Новосибирск: СГУПС, 1998, С.56
Бондаренко А.Н. Информационные технологии в учебном процессе: контролирующие и генерирующие программы, типовые расчеты. "Информационные технологии поддержки преподавательской деятельности и управления учебным процессом", сб. докл. Всероссийской школы-семинара "Информационные технологии в управлении качеством образования и развития образовательного пространства" (ч.4), Москва ( 2001, С.28-31.
Бондаренко А.Н. Компьютерные технологии в учебном процессе. Ч.1. Контролирующие и генерирующие программы. Новосибирск: СГУПС, 1998, С.35.
ВайкАллен. JavaScript. Энциклопедия пользователя: Пер.с англ./Аллен Вайк.- К.: ООО "ТИД" ДС", 2001.- 480с.
Вильямсон X. Универсальный Dynamic HTML. Библиотека программиста. - СПб.: Питер,2001. - 304 с.: ил.
Глазов Б.И., Ловцов Д.А., Михайлов С.Н., Сухов А.В. Компьютеризированный учебник//Информатика и образование 1994. № 6. С. 86-94.
Гудман Д., JavaScript.Библия пользователя, 4-е издание.: Пер. с англ. - М.: Издательский дом «Вильямс», 2003. -960с.
Гречихин А.А., Древс Ю.Г. Вузовская учебная книга: Типология, стандартизация, компьютеризация. М.: Логос, 2000.
Динамический HTML. Самоучитель, Тихонов, Бином, 2000
Демушкин А.С., Кириллов А.И., Сливина Н.А. и др. Компьютерные обучающие программы/ Информатика и образование. 1995, №3, с. 15-22.
Дронов В. А. Самоучитель Macromedia Dreamweaver 8. - СПб.: БХВ- Петербург, 2006. -320 с : ил.
Дунаев В. Самоучитель JavaScript, 2-е изд. - СПб.: Питер, 2005. - 395 с.: ил.
Захарова И.Г. Реализация принципов развивающегося обучения в дистанционном образовании. "Информационные технологии и телекоммуникации в обеспечении творческой профессиональной подготовки студентов и учащихся", сб. докл. Всероссийской школы-семинара "Информационные технологии в управлении качеством образования и развития образовательного пространства" (ч.3), Москва ( 2001, С.31-34.
Каларщук В.И. Обучающие программы. М.: СОЛОН-Р, 2001.
Козлов О.А., Солодова Е.А., Холодов Е.Н. Некоторые аспекты создания и применения компьютеризированного учебника//Информатика и образование. 1995. № 3. С. 97-99.
Компьютерные технологии в высшем образовании/Ред. кол.: А.Н. Тихонов, В.А. Садовничий и др. - М.: Изд-во Моск. Ун-та.- 370 с.
Куприянов М., Околелов О. Дидактический инструментарий новых образовательных технологий // Высшее образование в России. 2001.№ 1. С. 124-126.
Машбиц Е.И. Психолого-педагогические проблемы компьютеризации обучения. М.,1988. 254 с.
Мильчин А.Э. Издательский словарь–справочник. М.: Юристъ, 1998.
Мэрдок, Келли, Л. JavaScript: наглядный курс создания динамических Web-страниц. : Пер. с англ. : Уч. пос. - М. : Издательский дом "Вильяме", 2001. - 288 с. : ил. - Парал. тит. англ.
Муссиано Ч., Кеннеди Б. HTML, XHTML и DHTML. Базовый курс, , Символ, 2002.-300 с.
Полат Е.С. Дистанционное обучение. М.:Владос 1998. 190 с.
Педагогика: педагогические теории, системы, технологии: Учеб. пособие для студ. ср. пед.учеб. заведений/ С.А. Смирнов, И.Б. Котова, Е.Н. Шиянов и др.; Под ред. С.А. Смирнова. 2-е изд. -М.: Изд. Центр "Академия", 1999. -544 с.
Проблемы информатизации образования // Открытое образование. 2000. № 1. С. 10-11.
Российские электронные издания: Каталог.—Вып. 4: Новые поступления в гос. Депозитарий / Авторы–составители: Вигурский К.В., Глушкова О.Л., Негадова В.И. (под общ. ред. Антопольского А.Б.) — М.: НТЦ “Информрегистр”, 2000.
Середа Ю.А. Образовательные технологии компании "Кирилл и Мефодий" как основа совершенствования качества подготовки студентов и школьников, "Информационные технологии и телекоммуникации в обеспечении творческой профессиональной подготовки студентов и учащихся", сб. докл. Всероссийской школы-семинара "Информационные технологии в управлении качеством образования и развития образовательного пространства" (ч.3), Москва ( 2001, С.34-36.
Смирнов С.Д. Педагогика и психология высшего образования: от деятельности к личности. М., 2001.
Современные образовательные технологии. Сборник статей./ Под ред. В.Н. Васильева, Ю.Л. Колесникова. - СПб, СПбГИТМО(ТУ), 2001.
Субботин М.М. Новая информационная технология: Создание и обработка гипертекстов. М., 1992
Учебные и справочные электронные издания: опыт и проблемы. Материалы научно-практической конф. СПб, 17-19 января 2001 г., СПб, 2001, 162 с.
Чертополох А.А. Инновационные технологии обучения: проблема электронного учебника//Инновации в образовании, 2001. № 2. С. 89-99.
Чуфаров Е.В. Основные способы и средства, использующиеся для создания компьютерных обучающих программ//Информационные технологии в образовании-3. СПб.: ГИТМО (ТУ) 2000. С. 25-27.
Якубайтис Э.А., Тихонов М.Б. Энциклопедическая система дистанционного обучения // Дистанционное образование. 2000. № 6. С. 35-38.
ПРИЛОЖЕНИЯ
Приложение 1. Файл index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Лабораторный практикум. Интерфейсы периферийных устройств </title>
<script language="JavaScript" type="text/JavaScript" src="Res/code/shared.js"></script>
<script language="JavaScript" type="text/JavaScript" src="Res/code/boxController.js"></script>
<script language="JavaScript" type="text/JavaScript" src="Res/code/boxSettings.js"></script>
<script language="JavaScript" type="text/JavaScript" src="Res/tree/tree.js"></script>
<script language="JavaScript" type="text/JavaScript" src="Res/tree/tree_items.js"></script>
<script language="JavaScript" type="text/JavaScript" src="Res/tree/tree_tpl.js"></script>
<link href="Res/styles/shared.css" rel="stylesheet" type="text/css">
<link href="Res/styles/DynamicOutline.css" rel="stylesheet" type="text/css">
</head>
<body id="page" onload="init()">
<!-- BEGIN PAGE HEADER -->
<table id="pageHeader">
<tr>
<td class="left" rowspan="3">
<a class="noHover" href="index.html" target="_parent">
<img src="Res/images/logo.gif" alt=""></a>
</td>
<td class="right">
<!-- BEGIN TOOLS UTILITIES-->
<div class="utilities">
<span class="command">
<a href="index.html" target="_parent">
<span class="label">Главная страница</span>
</a>
</span>
<span class="utilities_toc">
|
<span class="command">
<a href="contents.htm" target="_parent">
<span class="label">Структура контента</span>
</a>
</span>
</span>
<!-- BEGIN HEADER UTILITIES OVERVIEW SNIPPET -->
|
<span class="command">
<a href="map.htm" target="_parent">
<span class="label">Карта сайта</span>
</a>
</span>
<!-- END HEADER UTILITIES OVERVIEW SNIPPET -->
<!-- BEGIN HEADER UTILITIES LEGEND SNIPPET -->
|
<span class="command">
<a href="javascript:openPopup('legend.htm','Legend','scrollbars=yes,resizable=yes,left=20,top=20,width=240,height=450')">
<span class="label">Легенда</span>
</a>
</span>
<!-- END HEADER UTILITIES LEGEND SNIPPET -->
</div>
<!-- END TOOLS UTILITIES-->
</td>
</tr>
<tr>
<td class="right">
<div class="mapName">Лабораторный практикум. Интерфейсы периферийных устройств </div>
</td>
</tr>
<tr>
<td class="right">
<div class="contactInformation">ПВВ ВВ МВД РФ <a href="mailto:info@company.com">info@company.com</a></div>
</td>
</tr>
</table>
<!-- END PAGE HEADER -->
<!-- BEGIN PAGE BODY-->
<!-- BEGIN SIDE NAVIGATION WRAPPER-->
<table>
<tr>
<td class="outlineColumn">
<!-- Ensure minimum width of outline-->
<img class="emptyImage" src="Res/images/empty.gif"
width="190" height="1" alt="">
<!-- DYNAMIC OUTLINE - START -->
<div class="dynamicOutline">
<div class="tree" style="padding: 5px;">
<script language="JavaScript" type="text/JavaScript">new tree (TREE_ITEMS, TREE_TPL);</script>
</div>
</div>
<!-- DYNAMIC OUTLINE - END -->
</td>
<td class="bodyColumn">
<!-- END SIDE NAVIGATION WRAPPER-->
<table id="pageBody">
<col class="main">
<col class="right">
<!-- BEGIN BREADCRUMBS-->
<tr id="breadcrumbsAndPageNavigation">
<td class="breadcrumbs" valign="top">
<!-- BEGIN NAVIGATION BREADCRUMBS HERE-->
<span class="breadcrumb">
Главная страница
</span>
<!-- END NAVIGATION BREADCRUMBS HERE-->
</td>
<td class="pageNavigation" valign="top">
<!-- START PAGE NAVIGATION NEXT IN SEQUENCE IMAGES -->
<span class="commands">
<span class="command">
<img src="Res/images/previous_button.gif" alt=""> <a href="index.html">
<span class="label">Предыдущая</span></a>
</span>
<span class="command">
<a href="Untitled.html">
<span class="label">Следующая</span></a> <img src="Res/images/next_button.gif" alt="">
</span>
</span>
<!-- END PAGE NAVIGATION NEXT IN SEQUENCE IMAGES -->
</td>
<td class="right" valign="top">
</td>
</tr>
<!-- END BREADCRUMBS-->
<tr class="topic">
<td class="main" valign="top" colspan="2">
<div class="body">
<div class="topicDivider">
</div>
</div>
</td>
<td class="right" valign="top">
<!--right body column empty-->
</td>
</tr>
<!--BEGIN PAGE BODY ITEM-->
<tr class="topic">
<td class="main" valign="top" colspan="2">
<table>
<tr class="topicHeader">
<td class="topicImageColumn">
</td>
<td class="topicLineColumn">
<a name="Topic1"></a>
<span class=outlineNumberFirst></span><span class=topicLineFirst>Лабораторный практикум. Интерфейсы периферийных устройств </span>
<span class="topicIcons">
</span>
</td>
</tr>
</table>
<!--START PAGE BOX PARTIAL MAP-->
<div class="partialMapArea">
<table id="partialMapTable">
<tr>
<td>
<div class="SubTopicItems">
</div>
</td>
<td>
<div class="partialMap">
<img src="PartialMaps/index.gif"
usemap="#CSIM"
alt="">
</div>
</td>
</tr>
</table>
</div>
<map name="CSIM">
<area shape="rect" coords="136, 81, 284, 122" href="Untitled.html#Topic2" alt="Технологические карты">
<area shape="rect" coords="136, 136, 280, 178" href="Untitled(3).html#Topic3" alt="Лабораторные работы">
<area shape="rect" coords="136, 192, 208, 234" href="Untitled(4).html#Topic4" alt="Стенд">
</map>
<!--END PAGE BOX PARTIAL MAP-->
<div class="topicTextNotes"></div>
</td>
<td class="right" valign="top">
<!--right body column empty-->
</td>
</tr>
<!--END PAGE BODY ITEM-->
<!-- BEGIN TOP BUTTON -->
<tr class="topic">
<td class="main" valign="top" colspan="2">
<div class="body">
<div class="topCommand">
<span class="commands">
<span class="command">
<img src="Res/images/top_button.gif" alt="">
<a href="javascript:scroll(0,0)">
<span class="label">Вверх</span>
</a>
</span>
</span>
</div>
</div>
</td>
<td class="right" valign="top">
<!--right body column empty-->
</td>
</tr>
<!-- END TOP BUTTON -->
</table>
<!-- BEGIN SIDE NAVIGATION WRAPPER-->
</td>
</tr>
</table>
<!-- END SIDE NAVIGATION WRAPPER-->
<!-- END PAGE BODY-->
<!---BEGIN FOOTER-->
<table id="pageFooter">
<tr>
<!-- reserved for image <td class="left" rowspan="2"></td>-->
<td class="center" rowspan="2">
<div class="footerText">Лабораторный практикум</div>
</td>
<td class="right">
<div class="hyperlink">
<span>
<a href="http://www./" target="_blank">Интерфейсы периферийных устройств</a>
</span>
</div>
</td>
</tr>
<tr>
<td class="right">
<div class="lastUpdated">
<span>Last updated:15.05.2015</span>
<span>10.05.2015</span>
</div>
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
<!---END FOOTER-->
</body>
</html>
Приложение 2. DinamicOutline.css
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Лабораторный практикум. Интерфейсы периферийных устройств </title>
<script language="JavaScript" type="text/JavaScript" src="Res/code/shared.js"></script>
<script language="JavaScript" type="text/JavaScript" src="Res/code/boxController.js"></script>
<script language="JavaScript" type="text/JavaScript" src="Res/code/boxSettings.js"></script>
<script language="JavaScript" type="text/JavaScript" src="Res/tree/tree.js"></script>
<script language="JavaScript" type="text/JavaScript" src="Res/tree/tree_items.js"></script>
<script language="JavaScript" type="text/JavaScript" src="Res/tree/tree_tpl.js"></script>
<link href="Res/styles/shared.css" rel="stylesheet" type="text/css">
<link href="Res/styles/DynamicOutline.css" rel="stylesheet" type="text/css">
</head>
<body id="page" onload="init()">
<!-- BEGIN PAGE HEADER -->
<table id="pageHeader">
<tr>
<td class="left" rowspan="3">
<a class="noHover" href="index.html" target="_parent">
<img src="Res/images/logo.gif" alt=""></a>
</td>
<td class="right">
<!-- BEGIN TOOLS UTILITIES-->
<div class="utilities">
<span class="command">
<a href="index.html" target="_parent">
<span class="label">Главная страница</span>
</a>
</span>
<span class="utilities_toc">
|
<span class="command">
<a href="contents.htm" target="_parent">
<span class="label">Структура контента</span>
</a>
</span>
</span>
<!-- BEGIN HEADER UTILITIES OVERVIEW SNIPPET -->
|
<span class="command">
<a href="map.htm" target="_parent">
<span class="label">Карта сайта</span>
</a>
</span>
<!-- END HEADER UTILITIES OVERVIEW SNIPPET -->
<!-- BEGIN HEADER UTILITIES LEGEND SNIPPET -->
|
<span class="command">
<a href="javascript:openPopup('legend.htm','Legend','scrollbars=yes,resizable=yes,left=20,top=20,width=240,height=450')">
<span class="label">Легенда</span>
</a>
</span>
<!-- END HEADER UTILITIES LEGEND SNIPPET -->
</div>
<!-- END TOOLS UTILITIES-->
</td>
</tr>
<tr>
<td class="right">
<div class="mapName">Лабораторный практикум. Интерфейсы периферийных устройств </div>
</td>
</tr>
<tr>
<td class="right">
<div class="contactInformation">ПВВ ВВ МВД РФ <a href="mailto:info@company.com">info@company.com</a></div>
</td>
</tr>
</table>
<!-- END PAGE HEADER -->
<!-- BEGIN PAGE BODY-->
<!-- BEGIN SIDE NAVIGATION WRAPPER-->
<table>
<tr>
<td class="outlineColumn">
<!-- Ensure minimum width of outline-->
<img class="emptyImage" src="Res/images/empty.gif"
width="190" height="1" alt="">
<!-- DYNAMIC OUTLINE - START -->
<div class="dynamicOutline">
<div class="tree" style="padding: 5px;">
<script language="JavaScript" type="text/JavaScript">new tree (TREE_ITEMS, TREE_TPL);</script>
</div>
</div>
<!-- DYNAMIC OUTLINE - END -->
</td>
<td class="bodyColumn">
<!-- END SIDE NAVIGATION WRAPPER-->
<table id="pageBody">
<col class="main">
<col class="right">
<!-- BEGIN BREADCRUMBS-->
<tr id="breadcrumbsAndPageNavigation">
<td class="breadcrumbs" valign="top">
<!-- BEGIN NAVIGATION BREADCRUMBS HERE-->
<span class="breadcrumb">
Главная страница
</span>
<!-- END NAVIGATION BREADCRUMBS HERE-->
</td>
<td class="pageNavigation" valign="top">
<!-- START PAGE NAVIGATION NEXT IN SEQUENCE IMAGES -->
<span class="commands">
<span class="command">
<img src="Res/images/previous_button.gif" alt=""> <a href="index.html">
<span class="label">Предыдущая</span></a>
</span>
<span class="command">
<a href="Untitled.html">
<span class="label">Следующая</span></a> <img src="Res/images/next_button.gif" alt="">
</span>
</span>
<!-- END PAGE NAVIGATION NEXT IN SEQUENCE IMAGES -->
</td>
<td class="right" valign="top">
</td>
</tr>
<!-- END BREADCRUMBS-->
<tr class="topic">
<td class="main" valign="top" colspan="2">
<div class="body">
<div class="topicDivider">
</div>
</div>
</td>
<td class="right" valign="top">
<!--right body column empty-->
</td>
</tr>
<!--BEGIN PAGE BODY ITEM-->
<tr class="topic">
<td class="main" valign="top" colspan="2">
<table>
<tr class="topicHeader">
<td class="topicImageColumn">
</td>
<td class="topicLineColumn">
<a name="Topic1"></a>
<span class=outlineNumberFirst></span><span class=topicLineFirst>Лабораторный практикум. Интерфейсы периферийных устройств </span>
<span class="topicIcons">
</span>
</td>
</tr>
</table>
<!--START PAGE BOX PARTIAL MAP-->
<div class="partialMapArea">
<table id="partialMapTable">
<tr>
<td>
<div class="SubTopicItems">
</div>
</td>
<td>
<div class="partialMap">
<img src="PartialMaps/index.gif"
usemap="#CSIM"
alt="">
</div>
</td>
</tr>
</table>
</div>
<map name="CSIM">
<area shape="rect" coords="136, 81, 284, 122" href="Untitled.html#Topic2" alt="Технологические карты">
<area shape="rect" coords="136, 136, 280, 178" href="Untitled(3).html#Topic3" alt="Лабораторные работы">
<area shape="rect" coords="136, 192, 208, 234" href="Untitled(4).html#Topic4" alt="Стенд">
</map>
<!--END PAGE BOX PARTIAL MAP-->
<div class="topicTextNotes"></div>
</td>
<td class="right" valign="top">
<!--right body column empty-->
</td>
</tr>
<!--END PAGE BODY ITEM-->
<!-- BEGIN TOP BUTTON -->
<tr class="topic">
<td class="main" valign="top" colspan="2">
<div class="body">
<div class="topCommand">
<span class="commands">
<span class="command">
<img src="Res/images/top_button.gif" alt="">
<a href="javascript:scroll(0,0)">
<span class="label">Вверх</span>
</a>
</span>
</span>
</div>
</div>
</td>
<td class="right" valign="top">
<!--right body column empty-->
</td>
</tr>
<!-- END TOP BUTTON -->
</table>
<!-- BEGIN SIDE NAVIGATION WRAPPER-->
</td>
</tr>
</table>
<!-- END SIDE NAVIGATION WRAPPER-->
<!-- END PAGE BODY-->
<!---BEGIN FOOTER-->
<table id="pageFooter">
<tr>
<!-- reserved for image <td class="left" rowspan="2"></td>-->
<td class="center" rowspan="2">
<div class="footerText">Лабораторный практикум</div>
</td>
<td class="right">
<div class="hyperlink">
<span>
<a href="http://www./" target="_blank">Интерфейсы периферийных устройств</a>
</span>
</div>
</td>
</tr>
<tr>
<td class="right">
<div class="lastUpdated">
<span>Last updated:15.05.2015</span>
<span>10.05.2015</span>
</div>
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
<!---END FOOTER-->
</body>
</html>