Разработка электронного учебного пособия

Размещено на http://www.allbest.ru/

1.Анализ средств разработки электронных пособий

1.1 Язык разметки HTML

электронный пособие векторный графика

Гипертекст - это способ нелинейной подачи текстового материала, при котором в тексте имеются каким-либо образом выделенные слова, имеющие привязку к определенным текстовым фрагментам. Таким образом, пользователь не просто листает по порядку страницы текста, он может отклониться от линейного описания по какой-либо ссылке, где сам управляет процессом выдачи информации. В гипермедиа системе в качестве фрагментов могут использоваться изображения, а информация может содержать текст, графику, видеофрагменты, звук.

Использование гипертекстовой технологии удовлетворяет таким предъявляемым к учебникам требованиям, как структурированность, удобство в обращении. При необходимости такой учебник можно «выложить» на любом сервере и его можно легко корректировать. Но, как правило, им свойственны неудачный дизайн, компоновка, структура .

В настоящее время существует множество различных гипертекстовых форматов (HTML, DHTML, PHP ).

Гипертекст очень широко используется в электронных публикациях, компьютерных приложениях и позволяет разнообразить подачу информации.

Идея гипертекста, как и всякая здравая идея, проста и состоит в том, чтобы дать человеку средства воспринимать информацию в определяемой им последовательности. Ассоциативное мышление свойственно человеку. Обычно известно, как трудно бывает изложить на бумаге сложившиеся в голове мысли, как много при этом теряется. Здесь проявляются издержки фонетической письменности, которая определяет линейную организацию информации.

Существует большое число определений гипертекста и систем, поддерживающих работу с гипертекстом.

Гипертекст имитирует способность человеческого интеллекта осуществлять хранение больших объемов информации и поиск в них посредством ассоциаций в процессах коммуникации и мышления.

Гипертекст нужен для организации взаимосвязей между различными объектами (документами, фрагментами документов или программами). Таким образом, первое, что необходимо, это организация чувствительных областей, активизация которых, например, щелчок мыши, нажатие клавиши клавиатуры или слово, произнесенное в микрофон, приведет к переходу от одного объекта к другому. Чувствительные области могут быть встроены в объекты (это называется внутренним гипертекстом) или быть организованными в отдельные объекты (это называется внешним гипертекстом) .

Например, когда пользователь запускает браузер для просмотра документов во Всемирной паутине, он работает с гипертекстом, так как его элементы (гиперссылки) встроены в Web-страницы. При щелчке мышью на рабочем столе Windows по значку программы или документа, используется внешний гипертекст, так как программы и документы, на которые ссылаются значки, «ничего не знают» о том, что являются элементами гипертекста. Переход может осуществляться как на начало документа, так и на произвольное место в нем. Из примеров видно, что гипертекст легко и естественно используется в современных компьютерных технологиях.

Второе, что необходимо для работы с гипертекстом -- это гипертекстовые связи между объектами. Эти связи могут быть однонаправленными , двунаправленными и множественными .

Гипертекстовые переходы между объектами могут быть безусловными, а могут осуществляться только при выполнении некоторых условий, например, на рисунке представлена так называемая нагруженная связь, отражающая отношение между объектами, в данном случае «включать в себя». Из приведенных выше определений видно, что гипертекст в основном рассчитан на представление информации для людей, в то же время использование нагруженных связей позволяет использовать гипертекст для представления информации для обработки с помощью компьютеров. Виды связей представлены на рисунке 1

Рисунок 1 - Виды гипертекста

Объекты и связи образуют сеть. Переходы пользователя или компьютера при просмотре информации называется гипертекстовой навигацией.

В основу структуры HTML-документа входят управляющие символы, которые здесь называются тегами, определяющие особенности отображения информации, выводимой на экран монитора. Значительная часть таких тегов используется парами: вначале открывающий тег, затем объект управления, а в конце - закрывающий тег. Такая конструкция называется контейнером, так как объект форматирования размещается внутри нее. Некоторые теги принципиально не нуждаются в паре. Примером может служить тег принудительного перевода строки. Тег может включать в себя некоторые параметры (атрибуты), которые размещаются непосредственно после имени тега. Если параметров несколько, то в качестве разделителей используются пробелы. Ссылки являются важнейшей составляющей HTML-документа, так как именно они и делают этот документ гипертекстовым, реализуя важнейшее преимущество электронного документа по сравнению с печатным, состоящее в широчайших возможностях перемещения по документу и вне его. Ссылка состоит из указателя и адресной части. Указатель представляет собой малый фрагмент документа (одно или два слова или изображение), который каким-либо образом выделен (например, цветом или подчеркиванием). Если подвести указатель мыши к ссылке и щелкнуть кнопкой мыши, то браузер загрузит новый документ или перейдет к той части данного документа, адрес которой указан во второй части.

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

1.2 Краткая характеристика технологии Macromedia Flash

Технология Flash основана на использовании векторной графики в формате Shockwave Flash (SWF). Хотя это далеко не первый векторный формат, создателям SWF удалось найти наиболее удачное сочетание между изобразительными возможностями графики, инструментальными средствами для работы с ней, и механизмом включения результата в Web-страницы. Дополнительным преимуществом SWF является его переносимость, то есть этот формат может использоваться на любой аппаратно-программной платформе (в частности, на компьютерах Macintosh, работающих под управлением операционной системы MacOS, и на компьютерах IBM с ОС Windows). И еще одна особенность SWF: созданные на его основе изображения не только могут быть анимированы, но также дополнены интерактивными элементами и звуковым сопровождением. Переносимость и возможность создания интерактивных мультимедийных приложений обусловили быстрый рост популярности формата SWF среди Web-дизайнеров. Поэтому почти одновременно с появлением самого формата фирмой Macromedia были созданы встраиваемые компоненты (Plug-In) для двух основных броузеров Сети: Internet Explorer и Netscape Communicator. А это, в свою очередь, способствовало еще более широкому распространению SWF на просторах Всемирной Паутины.

В результате разработчики этих броузеров объявили о намерении включить поддержку SWF непосредственно в ядро своих продуктов. Поддержали подобный подход и другие ведущие производители программного обеспечения (в частности, фирма Adobe).

Macromedia Flash пользуется наибольшей популярностью у разработчиков Web-публикаций, поскольку именно этот продукт позволяет создавать законченные Web-страницы, которые способны обеспечить популярность любому сайту. Видимо, благодаря этому формат SWF все чаще стали называть просто Flash.

Итак, составляющими Flash-технологии являются:

- векторная графика;

- поддержка нескольких видов анимации;

- возможность создания интерактивных элементов интерфейса;

- поддержка взаимодействия с импортируемыми графическими форматами (в том числе растровыми);

- возможность включения синхронного звукового сопровождения;

- обеспечение экспорта Flash-фильмов в формат HTML, а также в любой из графических форматов, используемых в Интернете;

- платформная независимость;

- возможность просмотра Flash-фильмов как в автономном режиме, так и посредством Web-броузера;

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

В настоящее время лидирующее положение в оформлении Web-страниц занимает растровая графика. Растровыми форматами являются GIF (Graphics Interchange Format, графический формат для обмена данными), JPEG (Join Photographic Experts Group - Объединенная группа экспертов по изображениям) и PNG (Portable Network Graphics -- переносимый графический формат). При использовании растровой графики изображение описывается как совокупность точек (пикселей -- pixel). Поскольку эти точки никак не связаны друг с другом, то для каждой из них требуется указать цвет и координаты.

В простейшем случае, когда используется двухцветное изображение (например, черно-белое) для описания цвета каждого пикселя достаточно одного двоичного разряда: 0 -- черный, 1 -- белый. Для 256-цветного рисунка таких разрядов требуется уже 8 на каждый пиксель. Наиболее сложные, фотореалистичные цветные изображения требуют до 24 разрядов на пиксель. Вследствие этого размер файлов с растровыми изображениями очень быстро возрастает при увеличении глубины цвета изображения.

Еще один недостаток растровых изображений состоит в том, что качество изображения (его четкость, прорисовка деталей) существенно зависит от размера пикселя, который, в свою очередь, определяется разрешающей способностью монитора. Поэтому рисунок, который на одном мониторе выглядит весьма привлекательно, на другом мониторе может оказаться «смазанным». И это еще не все. Изменить размер растрового изображения -- тоже дело очень непростое. Ведь увеличение такого изображения означает увеличение числа пикселей.

Специалистами в области компьютерной графики разработаны весьма сложные алгоритмы «размножения» пикселей растровых изображений (или удаления, если рисунок требуется уменьшить), но и они далеко не всегда справляются с этой трудной задачей. Совсем другое дело -- векторная графика. Векторная графика -- это способ представления изображения с помощью совокупности кривых, положение которых на рисунке описывается посредством математических формул. Например, для описания любой окружности требуется всего три-четыре числа: радиус, координаты центра и толщина линии. Благодаря этому векторная графика имеет по сравнению с растровой целый ряд преимуществ:

- математические формулы, описывающие векторное изображение, занимают намного меньше места в памяти компьютера, чем описание пикселей растрового изображения;

- возможность практически неограниченного масштабирования изображения (или отдельных его фрагментов) без потери его качества;

- совершенно «безболезненный» перенос векторного изображения с одной платформы на другую.

Разумеется, у векторных изображений также имеются определенные недостатки. Например, очень сложно представить компактно в векторном формате фотореалистичное изображение. В связи с этим уместно вспомнить, что самые удачные решения -- компромиссные. Именно такое решение использовали и авторы Flash: при разработке Web-страниц с помощью этого инструмента можно импортировать и использовать не только векторные, но и растровые изображения.

Анимация во Flash основана на изменении свойств объектов, используемых в «мультике». Например, объекты могут исчезать или появляться, изменять свое положение, форму, размер, цвет, степень прозрачности Во Flash предусмотрено три различных механизма анимирования объектов:

- покадровая («классическая») анимация, когда автор сам создает или импортирует из других приложений каждый кадр будущего «мультика» и устанавливает последовательность их просмотра;

- автоматическое анимирование (так называемая tweened-анимация), при использовании которой автор создает только первый и последний кадры мультипликации, a Flash автоматически генерирует все промежуточные кадры; различают два вида tweened-анимации: анимация, основанная на перемещении объекта (motion animation), и анимация, основанная на трансформации (изменении формы) объекта (shape animation);

- анимация на основе сценариев; сценарий представляет собой описание поведения объекта на собственном языке Flash, который называется ActionScript; синтаксис этого языка напоминает синтаксис других языков сценариев, используемых в Web-публикациях (например, JavaScript и VBScript).

Каждый из этих механизмов имеет как достоинства, так и недостатки. В частности, tweened-анимация обладает двумя несомненными достоинствами:

- во-первых, автор избавлен от необходимости создавать каждый кадр в отдельности;

- во-вторых, для воспроизведения такого «мультика» Flash достаточно хранить только первый и последний кадры, что обеспечивает значительное уменьшение объема такого фильма.

Вместе с тем, tweened-анимация пригодна для создания лишь наиболее простых сюжетов, в которых свойства объектов изменяются равномерно. С помощью сценариев на ActionScript можно описать достаточно сложное поведение объектов. Однако для этого нужно изучить язык ActionScript. Другими словами, прежде чем приступить к созданию собственного «мультика», следует определиться с выбором механизма его реализации. Чтобы познакомиться с теми возможностями, которые предоставляет Flash для создания анимированных Web-страниц, нужно посетить сайт компании Macromedia, на котором имеется специальная рубрика, которая называется «Сайт дня» (Site of the Day). В ней содержатся ссылки на сайты, которые, по мнению сотрудников компании Macromedia, наиболее полно и эффективно используют преимущества Flash-технологии.

Несмотря на разнообразие возможных способов просмотра Flash-фильмов, все-таки основным направлением применения этой технологии на сегодняшний день является создание красочных и динамичных Web-страниц. Существует два способа сделать Flash-фильм пригодным для отображения браузером:

- сохранить его в формате SWF и затем перетащить мышью значок файла из окна папки, в которой сохранен файл, в окно браузера;

- экспортировать Flash-фильм в формат HTML и затем открыть в браузере обычным образом.

Механизм внедрения Flash-фильма в HTML-код аналогичен использованию элементов ActiveX или подключению компонентов Plug-in. Для браузера Internet Explorer такое внедрение выполняется с помощью тэга <OBJECT>, а для Netscape - посредством тэга <EMBED>. Чтобы фильм был доступен обоим браузерам, Flash при конвертировании Flash-фильма в HTML-страницу генерирует оба указанных тэга. При этом автор фильма может либо воспользоваться атрибутами тэгов, установленными по умолчанию, либо указать собственные значения. Варианты использования Flash-фильма в качестве элемента Web-страницы весьма разнообразны, вот только некоторые из них:

- «обычная» анимация, предназначенная для повышения эстетической привлекательности страницы;

- анимированная кнопка, «реагирующая» на действия пользователя (перемещение указателя мыши, нажатие клавиши); такая кнопка может использоваться либо в качестве гиперссылки, либо активизировать какое-либо действие (например, загрузку внешнего файла, открытие нового окна браузера);

- форма, предназначенная для приема некоторых данных от посетителя Web-страницы;

- рекламный баннер.

При необходимости можно использовать Flash и для создания «обычных», статичных HTML-страниц, на которых будет представлен только традиционный тип интерактивных элементов - гипертекстовые ссылки. Такой вариант возможен благодаря тому, что Flash поддерживает работу с текстом и с отдельными изображениями. Более того, в нем имеются средства, позволяющие создавать на основе изображений сенсорные карты обоих типов: работающие на стороне клиента и обрабатываемые сервером.

2. Достоинства и недостатки электронных пособий

Недостатки электронных учебников:

a) необходимость специального дополнительного оборудования для работы с ними, прежде всего - компьютера с соответствующим программным обеспечением и качественным монитором, а иногда дополнительно также дисковода для компакт-дисков и/или сетевой карты или модема для работы в локальной или глобальной сети;

в) непривычность, нетрадиционность электронной формы представления информации и повышенной утомляемости при работе с монитором.

Достоинств электронных учебников гораздо больше. К ним можно отнести:

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

- Возможность использования дополнительных (по сравнению с печатным изданием) средств воздействия на обучаемого (мультимедийное издание), что позволяет быстрее осваивать и лучше запоминать учебный материал. Особенно важным представляется включение в текст пособия анимационных моделей. Положительного эффекта можно достигнуть и с помощью звукового сопровождения, соответствующего лекторскому тексту.

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

- Развитый поисковый механизм не только в пределах электронного учебника, но и вне его. В частности, по гипертекстовым ссылкам можно перемещаться по тексту издания, просматривать рисунки, обращаться к другим изданиям, ссылки на которые имеются в нем, даже написать электронное письмо автору пособия с просьбой объяснить те или иные положения учебника. При использовании сетевых обучающих структур возможно обсудить положения учебника с другими студентами (в электронном читальном зале), оставаясь на своем рабочем месте.

- Возможность встроенного автоматизированного контроля уровня знаний студента, и на этой основе автоматический выбор соответствующего уровню знаний слоя учебника, как указано далее.

- Возможность адаптации изучаемого материала к уровню знаний студента, следствием чего является улучшение восприятия и запоминания информации. Адаптация основана на использовании слоистой структуры издания, причем в соответствии с результатами тестирования студенту предоставляется слой, соответствующий уровню его знаний.

- Главное преимущество электронного учебника - это возможность интерактивного взаимодействия между студентом и элементами учебника. Уровни ее проявления изменяются от низкого и умеренного при перемещении по ссылкам до высокого при тестировании и личном участии студента в моделировании процессов. Если тестирование подобно собеседованию с преподавателем, то участие в моделировании процессов можно сопоставить с приобретением практических навыков в процессе производственной практики в реальных или приближенных к ним условиях производства.

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

3.Стуктура электронных пособий

Простейшим электронным учебником может являться конспект лекций преподавателя, набранный им самим и размещенный на студенческом сервере или на другом общедоступном электронном узле. Однако, такой учебник, по существу, ничем не отличается от размноженного печатным методом конспекта, и в нем никак не использованы специфические возможности электронного издания. Можно выделить главные и дополнительные возможности. К главным особенностям электронного издания можно причислить:

- возможность построения простого и удобного механизма навигации в пределах электронного учебника;

- развитый поисковый механизм в пределах электронного учебника, в частности, при использования гипертекстового формата издания;

- возможность встроенного автоматизированного контроля уровня знаний студента;

- возможность специального варианта структурирования материала;

- возможность адаптации изучаемого материала учебника к уровню знаний обучаемого, следствием чего является резкий рост уровня мотивации обучаемого;

- возможность адаптации и оптимизации пользовательского интерфейса под индивидуальные запросы обучаемого.

К дополнительным особенностям электронного учебника по сравнению с печатным следует отнести:

- возможность включения специальных фрагментов, моделирующих течение многих физических и технологических процессов;

- возможность включения в учебник аудио-файлов, в частности, для сближения процесса работы с учебником и прослушивания лекций этого же преподавателя;

- возможность включения в состав учебника фрагментов видеофильмов для иллюстрации определенных положений учебника;

- включение в состав пособия интерактивных фрагментов для обеспечения оперативного диалога с обучаемым;

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

Электронное пособие для достижения максимального эффекта должно быть составлено несколько иначе по сравнению с традиционным печатным пособием: главы должны быть более короткие, что соответствует меньшему размеру компьютерных экранных страниц по сравнению с книжными. Затем каждый раздел, соответствующий рубрикациям нижнего уровня, должен быть разбит на дискретные фрагменты, каждый из которых содержит необходимый и достаточный материал по конкретному узкому вопросу.

Таким образом, студент просматривает не непрерывно излагаемый материал, а отдельные экранные фрагменты, дискретно следующие друг за другом. Изучив данный экран, студент нажимает кнопку «Следующий», размещенную обычно ниже текста, и получает следующий фрагмент материала. Если он видит, что не все понял или запомнил из предыдущего экрана, то нажимает расположенную рядом с первой кнопку «Предыдущий» и возвращается на один шаг назад. Дискретная последовательность экранов находится внутри (и в пределах) наименьшей структурной единицы, позволяющей прямую адресацию, когда внутри параграфа или подпараграфа содержится один или несколько фрагментов, последовательно связанных друг с другом гипертекстовыми связями.

Такая организация учебного материала обеспечивает дифференцированный подход к обучаемым в зависимости от уровня их подготовленности, результатом чего является более высокий уровень мотивации обучения, что приводит к лучшему и ускоренному усвоению материала. Важнейшими частными структурными системами учебника являются тексты, внетекстовые компоненты и компоненты управления представлением учебного материала. Традиционно текст является «основным скелетом» учебника, раскрывает его содержание, обеспечивая последовательное и максимально полное изложение и аргументацию учебного материала; текст - носитель основной информации, определяющей сущность и объем содержания образования. Текстовый компонент подразделяется на основной, дополнительный и пояснительный тексты.

Внетекстовые компоненты призваны служить тексту, организовывать его усвоение, облегчать его понимание, способствовать мотивации обучения. Восприятие внетекстовых форм информации в издании рассматривается как аппарат организации усвоения - это вопросы и задания (в вербальной форме), ответы к ним, а также систематизирующие и обобщающие таблицы.

4.Разработка электронного учебного пособия

4.1 Структурная схема электронного учебного пособия

Электронное учебное пособие состоит из пяти главных частей, в которые входят: теоретическая часть, методические указания к лабораторным работам и практическим занятиям, тесты и глоссарий. Взаимодействие этих частей приведено на рисунке 2.

Рисунок 2 - Структурная схема электронного учебного пособия

4.2 Теоретическая часть электронного пособия

При традиционной технологии обучения лекции вполне обоснованно считаются наиболее важным и ответственным видом учебных занятий. Лекция отличается большим объемом теоретического материала, впервые предъявляемого студентам. Лектор имеет возможность проявить свою научную эрудицию, представить свою авторскую позицию по тем или иным вопросам, изложить учебный материал в наиболее обобщенной форме, адаптированной к уровню знаний и профессиональной ориентации слушателей данного учебного потока. В связи с развитием науки резко возрастают объемы учебной информации, которые должны быть донесены до слушателя за время лекции. Использование фрагментов электронного учебника на лекции при наличии специально оснащенной лекционной аудитории (желательно с большим экраном) позволяет сократить затраты времени лектора, связанные с представлением на доске различных графических материалов, иллюстраций, с организацией демонстраций и лекционных экспериментов.

По своему характеру лекция относится к монологическим методам обучения. Это приводит к пассивности студентов на лекции. Даже самому опытному лектору, излагающему теоретический материал на высоком научном и методическом уровне, задающему вопросы аудитории, умеющему управлять ее вниманием, трудно обеспечить активность обучаемых на протяжении полутора часов лекционного занятия. Вкрапление отдельных фрагментов электронного учебника при чтении лекции, проектирование на экран красочных, наглядных, а иногда и движущихся изображений активизирует внимание студентов, повышает мотивацию обучения.

В моей работе для просмотра теоретического материала используется удобное меню, в котором весь теоретический материал разбивается на заголовки. Пример приведен на рисунке 4.



Рисунок 4- Меню

Каждый заголовок подразделяется на подзаголовки. Это было достигнуто при помощи использования таблицы на языке разметки HTML, фреймов, языка стилей CSS, а также при помощи скриптового языка JavaScript.

Пример приведен на рисунке 5.

Рисунок 5- Подзаголовки в меню

Таблицы достаточно широко применяются в электронной документации, причем для Web-страниц они используются не только в традиционном смысле, как метод упорядоченного представления данных, но и для форматирования самих этих страниц.

<table cellpadding="0" cellspacing="0">

<tr>

<td rowspan=2 colspan=2 nowrap width=35><img src="images/l1.gif"></td>

<td><img src="images/l2.gif"></td>

<td background="images/up.gif" width=15%></td>

<td><img src="images/l3.gif"></td>

<td rowspan=2 colspan=2><img src="images/l4.gif"></td>

</tr>

<tr>

<td colspan=3 height=12></td>

</tr>

<tr>

<td><img src="images/l12.gif"></td>

<td colspan=5 width=12></td>

<td align=right><img src="images/l5.gif"></td>

</tr>

<tr>

<td background="images/left.gif" height=400></td> <td colspan=5>

Каждая строка таблицы размещается после тега <TR> (Table Row). Каждая ячейка таблицы в пределах строки оформляется тегом <ТН> (Table Header) - для заголовочной части таблицы или <TD> (Table Data) - для ячеек, в которых размещаются данные. В заголовочной части по умолчанию применяется полужирный шрифт и выравнивание по центру. Для отображения данных по умолчанию используется нормальное (светлое) начертание и выравнивание влево. Можно отметить, что для всех тегов, перечисленных в этом абзаце, закрывающий тег не обязателен, т. е. он может быть опущен.

Количество строк в таблице определяется количеством строчных тегов <TR>, а число столбцов - максимальным количество тегов <ТН> или <TD> в одной из строк. Строкой считается все то, что следует после очередного тега <TR> и до следующего такого тега. Для ячейки таблицы, не содержащей данных, надо использовать пустой контейнер <TD> и </TD> Если пустые ячейки расположены в конце строки, то их описание может быть опущено - браузер самостоятельно оставит необходимое число ячеек пустыми.

При создании таблицы, возникает потребность в объединении нескольких ячеек по горизонтали (в строке) или по вертикали в единое целое. Для этого используются параметры ROWSPAN и COLSPAN, первый из которых объединяет несколько строк, а второй - столбцов в одну ячейку.

Основным средством встраивания изображений в тексте служит тег <IMG>, обязательным параметром которого является SRC, значение которого - адрес (URL) файла изображения. Параметр выравнивания изображения на полосе ALIGN может принимать восемь различных значений, определяющие различные способы его размещения на странице. Два параметра позволяют установить размер изображения, еще два - расстояние от границы изображения до текста, отдельный параметр позволяет создать вокруг изображения рамку, а еще один - задать альтернативный текст, который будет выведен вместо изображения при отказе пользователя от его загрузки. Рассмотрим последовательно эти параметры.

Выравнивание изображения осуществляется двумя принципиально различными способами:

- по левому или правому краю наборной полосы (аналог оборочной иллюстрации в печатном тексте);

- изображение встраивается как элемент одной из строк текста (печатного аналога такого способа выравнивания нет, более того, в печатном издании такое расположение рисунка совершенно недопустимо).

Для выравнивания изображения по левому или правому краю окна браузера параметру ALIGN присваиваются значения LEFT или RIGHT соответственно, а текст обтекает рисунок с противоположной стороны. Для задания размеров изображения используются параметры WIDTH (ширина) и HEIGHT (высота), причем значения каждого параметра могут задаваться как в абсолютных единицах - пикселях, так и в относительных - процентах от соответствующего размера окна браузера. Реальные размеры изображения могут не совпадать со значениями параметров WIDTH и HEIGHT. В этом случае браузер автоматически масштабирует изображение по отдельным координатам.

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

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

body

{

scrollbar-arrow-color : #0080C0;

scrollbar-face-color : #EDF2FC;

scrollbar-highlight-color : #C2D5F5;

scrollbar-base-color : #EDF2FC;

scrollbar-shadow-color : #0080C0;

background-color: #EDF2FC;

text-align:'left';

font-size:10pt;

font-family:Verdana,Arial;

margin: 10px 10px 10px 10px;

width: 100%;

line-height:17px;

}

ВОDY содержит ряд параметров. Параметры данного тега обеспечивают оформление всего тела документа. Перечислим их:

- LINK - определяет исходный цвет ссылки;

- BACKGROUND - задает URL изображения, определяющего фон тела документа;

- MARGIN - задает границу нижнего и верхнего полей в пикселах;

-BGCOLOR - задает цветовой оттенок фона документа;

-FONT-FAMILY- определяет стиль текста;

- LINK - задает цвет еще не просмотренной ссылки;

-SCROLLBAR - определяет наличие полос прокрутки в документе, отображаемом в окне браузера и их цвет;

-TEXT-ALLIGN определяет сдвиг текста;

-VLINK - цвет уже просмотренной ссылки.

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

function dd(divel,pic,typ)

{

var temp=divel.style.display;

if(temp=='inline')

{

С помощью кода этого блока при наведении мыши всплывает сообщение "Показать!", если нажать левой клавишей мыши, то появится список.

divel.style.display="none";

if(typ==0) pic.src="images/plus.gif";

if(typ==2) pic.src="images/plus1.gif";

if(typ==1) pic.src="images/plus2.gif";

if(typ==3) pic.src="images/open.gif";

pic.alt="Показать!";

}

С помощью кода этого блока при наведении мыши всплывает сообщение "Скрыть!", если нажать левой клавишей мыши, список свернется.

if(temp=='none')

{

divel.style.display="inline";

if(typ==0) pic.src="images/minus.gif";

if(typ==1) pic.src="images/minus2.gif";

if(typ==2) pic.src="images/minus1.gif";

pic.alt="Скрыть!";

}



Для удобства работы с электронным изданием окно просмотра браузера может быть принудительно разбито на несколько прямоугольных областей, непосредственно примыкающих друг к другу. В каждую такую область можно загружать отдельные HTML-документы, просматривая каждый из них независимо от других. Впервые возможность работы с фреймовыми структурами была реализована в браузере фирмы Netscape версии 2.0. MS Internet Explorer поддерживает фреймы, начиная с версии 3.0.

Фреймовая структура целесообразна для применения в следующих случаях:

- для представления информации в нескольких смежных областях окна просмотра браузера, каждая из которых просматривается независимо, чтобы иметь возможность сопоставить эту информацию;

- для того чтобы в определенной области экрана размещалась информация, которая должна постоянно находиться в поле зрения пользователя;

- для того чтобы иметь возможность управлять загрузкой документов в одну из областей, работая в другой области экрана.

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

<html>

<head>

<title>Index</title>

<meta http-equiv="Содержимое-Тип" content="text/html; charset=1251">

</head>

<frameset rows="6%,*" border="1" framespacing="1" cols="*" >

<frame src="Header.htm" name="topFrame" scrolling="NO" noresize bordercolor="#000000" >

<frameset cols="25%,*" frameborder="NO" border="0" framespacing="1">

<frame src="Frame1.htm" name="leftFrame" scrolling="yes" noresize bordercolor="#000000">

<frame src="FrameFon.htm" name="mainFrame">

</frameset>

</frameset>

<noframes></noframes>

</html>

Принципиальное отличие HTML-кода, задающего фреймовую структуру, состоит в том, что вместо тега <BODY> в нем используется тег-контейнер <FRANESET>, параметры которого и определяют разбиение площади окна браузера на отдельные участки или области. Для этого у тега <FRAMESET> используется два параметра: ROWS и COLS. Параметр ROWS делит окно браузера на горизонтальные полосы, a COLS - на вертикальные. Размеры этих полос могут устанавливаться в абсолютных единицах - пикселях и в относительных - процентах или пропорциональных единицах. Первые два способа задания уже рассматривались ранее и не требуют дополнительных комментариев, третий же способ использует количество звездочек (*), каждая из которых представляет одну часть целого, величина этой части в данном случае определяется как высота окна браузера, деленная на суммарное количество звездочек под знаком параметра ROW.

Внутри контейнера <FRAMESET> и </FRAMESET> могут использоваться лишь вложенные такие же контейнеры или теги <FRAME>, которые определяют каждый одиночный фрейм. В теле документа может быть несколько расположенных последовательно тегов-контейнеров <FRAMESET>, в каждом из которых могут быть и вложенные аналогичные контейнеры.

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

4.3 Интерфейс главной страницы электронного пособия

На главной странице находится меню для перехода к материалу в виде кнопок (рисунок 6). Пользователь выбирает то, что ему необходимо, и, нажав на нужную кнопку, переходит в соответствующий раздел.

Рисунок 6 - Главная страница электронного пособия

Интерфейс кнопок состоит из HTML-форм. HTML-формы - это особый вид гипертекстового документа, предназначенный для организации интерактивного взаимодействия в электронных изданиях.

<FORM ACTION="index.htm">

<INPUT TYPE=submit VALUE="Содержание ">

</FORM>

<FORM ACTION="Lab.htm">

<INPUT TYPE=submit VALUE="Анимация ">

</FORM>

<FORM ACTION="58.html" target="win1">

<INPUT TYPE=submit VALUE="Тесты "> </FORM>

В языке HTML для задания форм используются теги <FORM> и </FORM>. Этот контейнер размещается внутри тела HTML-документа, причем таких контейнеров может быть несколько, но вложений их один в другой не допускается. Тег <FORM> может содержать несколько параметров, а именно ACTION, METHOD, ENCTYPE. Некоторые браузеры поддерживают и другие параметры, помимо перечисленных трех стандартных. Первый из параметров задает адрес (URL) CGI-программы, которая будет обрабатывать данные этой формы. Это единственный обязательный параметр тега <FORM>.

Второй параметр (METHOD) определяет способ пересылки данных, содержащихся в форме, от браузера к Web-серверу. Он принимает два возможных значения: GET и POST. Значение METHOD=«POST» используется в случае необходимости пересылки на сервер определенного файла, который присоединяется к содержимому формы.

Параметр ENCTYPE определяет медиа-тип, используемый для кодирования и пересылки содержимого формы. Обычно его называют MIME-типом, где MIME-это аббревиатура, которая расшифровывается как Multipurpose Internet Mail Extension (многоцелевое расширение для Интернет-почты). Именно кодирование в соответствии со стандартом MIME позволяет безошибочно пересылать файлы, присоединяемые к HTML-форме.

Для создания отдельных полей внутри контейнера <FORM> и </FORM> используются теги <INPUT>, <SELECT> и <TEXTAREA>. Первый из этих тегов употребляется чаще других и обеспечивает многочисленные возможности ввода информации. Так, с его помощью можно осуществить ввод текста различного назначения, создать группу элементов-переключателей, одиночные кнопки для выполнения некоторых стандартных операций (например, сброс введенных данных), поля для установки флажков, поле для ввода имени файла, присоединяемого к форме.

Основная надпись на главной странице создается при помощи параметров расположения текста (в пикселях), цвета текста и его стиля.

<DIV style="position:absolute; top:80px; left:300px; width:700px">

<div class=Section1>

<p class=MsoNormal align=center style='text-align:center'><span

style='font-size:48.0pt;font-family:"Monotype Corsiva";color:#8A388A'>Электронное

учебное пособие<o:p></o:p></span></p>

</DIV>

4.4 Интерфейс тестовой системы В электронном учебном пособии сделаны ссылки на систему самоконтроля (рисунок 7)

Рисунок 7 - Главная страница самоконтроля

Система самоконтроля позволяет пройти три теста по темам пятого семестра (рисунок 8) и по темам шестого семестра (рисунок 9).

Рисунок 8 - Тест за пятый семестр

Рисунок 9 - Тест за шестой семестр

В заключении предоставляется итоговое тестирование по всем семестрам (рисунок 10). Вопросы расположены последовательно. На вопрос пользователю предлагаются варианты ответов.



Рисунок 10 - Итоговое тестирование

Каждая тестовая система состоит из десяти вопросов. На каждый вопрос предлагается четыре варианта ответа, среди которых только один правильный. Один вопрос оценивается в 2,5 балла. Варианты вопросов созданы при помощи нумерованных списков и скриптового языка JavaScript.

Списки создаются с помощью тега-контейнера <UL> (Unordered List - неупорядоченный список). В теге могут использоваться два параметра: COMPACT, который изначально предназначался для вывода элементов списка в компактной форме (уменьшенным кеглем и расстоянием между строками) и TYPE, который используется для принудительного задания вида маркера. Параметр COMPACT не имеет значений. Современными браузерами он игнорируется. Параметр TYPE может принимать одно из трех значений: disc, circle и square.

Каждому элементу списка предшествует тег <LI> (List Item - элемент списка), который необязательно должен быть контейнером. В качестве параметра этого тега также используется TYPE, который может принимать те же самые три значения.

<input type=radio value="a" name="button" onClick="Engine(1,this.value)">живучесть<br>

<input type=radio value="b" name="button" onClick="Engine(1,this.value)">выживание<br>

<input type=radio value="c" name="button" onClick="Engine(1,this.value)">существование<br>

<input type=radio value="d" name="button" onClick="Engine(1, this.value)">нет правильного ответа<p>

Открывающий и закрывающий теги обеспечивают пропуски строк до и после списка, выделяя его, таким образом, в документе. В составе тега могут использоваться три параметра: COMPACT, TYPE и START. Смысл первого параметра тот же самый, что и в теге <UL>. Параметр TYPE по-прежнему определяет тип маркера, причем TYPE=1 определяет маркеры в виде арабских цифр. TYPE=A задает маркеры в виде прописных букв латинского алфавита. TYPE=a - в виде строчных латинских букв, наконец, TYPE=I и TYPE=i определяют маркеры в виде римских цифр, больших и малых соответственно.

Параметр TYPE, заданный в форме определенного числа, определяет начало отсчета для первого элемента списка.

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

Сначала создаю массив с правильными ответами.

<SCRIPT LANGUAGE="javascript">

var ans = new Array;

var done = new Array;

var score = 0;

ans[1] = "a";

ans[2] = "a";

ans[3] = "a";

ans[4] = "c";

ans[5] = "c";

ans[6] = "c";

ans[7] = "c";

ans[8] = "b";

ans[9] = "a";

ans[10] = "b";

Затем проверяю правильность ответа и смотрю, чтобы вопрос не повторялся.

function Engine(question, answer) {

if (answer != ans[question]) {

if (!done[question]) {

done[question] = -1;

alert("Неверно!");

}

else {

alert("Вы уже отвечали на этот вопрос!");

}

}

else {

if (!done[question]) {

done[question] = -1;

score++;

alert("Верно!");

}

else {

alert("Вы уже отвечали на этот вопрос!");

}

}

}

В случае неправильного ответа пользователь получит сообщение "Неверно!" (рисунок 11)

Рисунок 11 - Отрицательный ответ

В случае неправильного ответа пользователь получит сообщение "Верно!" ( рисунок 12)

Рисунок 12 - Положительный ответ

Если дважды ответить на один и тот же вопрос, то система выдаст запрет (рисунок 13).



Рисунок 13 - Запрет ответа

Функция alert() позволяет создавать выпадающие окна. При ее вызове в скобках нужно задать строку правильных ответов и количество баллов.

function Next () {

if (score > 10) {

alert("Cheater!");

}

if (score >= 0 && score <= 10)

{

alert("Ваш результат: " + score + " правильных ответов.");

alert("Вы набрали " + (score*2.5) + " баллов.");

//self.location="index.html"

}

По завершению тестирования пользователь узнает количество верных ответов (рисунок 14) и сумму баллов (рисунок 15)

Рисунок 14 - Количество правильных ответов



Рисунок 15 - Количество баллов

4.5 Создание анимации в среде Macromedia Flash

Анимация, используемая в этом электронном пособии, позволяет наглядным образом продемонстрировать ход выполнения третьей лабораторной работы ( рисунок 16).

Рисунок 16 - Анимация

Контекст выполнения сценария определяет доступность и относительные адреса объектов и других программных величин (переменных), используемых в сценарии. Необходимо учитывать, что контекст появляется в том случае, если в сценарии используется несколько объектов или переменных с одинаковыми именами. Например, если создать переменную framePS для хранения скорости воспроизведения основного фильма, а затем -- переменную с таким же именем (чего не бывает) для конкретного клипа, то рано или поздно сценарий сработает не так, как предполагалось. В связи с эти необходимо учитывать следующую особенность ActionScript. Область видимости переменной в нем определяется временной диаграммой, активной в настоящий момент. Например, если в десятом кадре основного фильма имеется клип, с которым связан сценарий, то все переменные, имеющиеся в этом сценарии, будут влиять на поведение временной диаграммы этого клипа, а не основного. С каждой временной диаграммой связан специальный параметр -- уровень диаграммы (он обозначается с помощью ключевого слова _level), который определяет ее положение относительно других временных диаграмм, загруженных в Flash-плеер. По умолчанию временная диаграмма основного фильма имеет нулевой уровень. Каждой вызываемой из нее временной диаграмме присваивается уровень, на единицу больший (рисунок 17).

Рисунок 17 - Иерархия временных диаграмм

Таким образом, область действия переменных в Flash-фильме распространяется сверху вниз: имя переменной, созданной в сценарии временной диаграммы основного фильма, «видно» в сценарии следующего уровня, если в нем нет своей переменной с таким же именем. Кроме того, внутри программного блока сценария, ограниченного фигурными скобками, могут объявляться локальные переменные, которые «видны» только в пределах этого блока. Для управления областью видимости переменных в ActionScript используется понятие «путь назначения» -- target path. Путь назначения позволяет указать принадлежность объекта или переменной конкретной временной диаграмме, загруженной в Flash-плеер. Чтобы правильно записать путь назначения, необходимо учитывать объектную модель ActionScript и взаимное положение временных диаграмм. Например, для того чтобы указать, что требуется перейти к 10-му кадру основного фильма и воспроизвести его, можно записать такую конструкцию:

Jevel0.gotoAndPlay(l 0)

Возможны два варианта указания пути назначения: абсолютный и относительный. Абсолютный путь вычисляется, как правило, на основе уровня временной диаграммы (как в приведенном выше примере). Если указать в качестве отправной точки уровень диаграммы, Flash-плеер правильно отыщет адресата, даже после перемещения фрагмента сценария, из которого выполнено обращение. Относительный путь вычисляется с учетом положения той диаграммы, из которой выполняется обращение. Такой вариант более компактный, но менее надежный. Например, чтобы обратиться к кадру диаграммы, расположенной двумя уровнями выше текущей, можно записать такую..конструкцию: _parent._parent.muClip Однако после перемещения клипа, например, на более высокий уровень, относительная ссылка станет некорректной.

Заключение

В ходе выполнение выпускной работы было разработано электронное учебное пособие по дисциплине «Разработка и эксплуатация автоматизированных информационных систем». Данное учебное пособие поможет лучше освоить обучающимся эту дисциплину.

Разработанное электронное учебное пособие включает в себя теоретический материал, методические указания к лабораторным работам и практическим занятиям, пример выполнения курсового проекта, тесты и глоссарий.

Электронное учебное пособие имеет открытую структуру, что позволяет редактировать и добавлять учебные материалы по темам, придерживаясь единого стиля.

Разработанное электронное учебное пособие может быть внедрено в учебный процесс при подготовке техников по специальности «Автоматизированные системы обработки информации и управления».

Список литературы

1.Чебен, О.О. Компьютерные телекоммуникации [Текст] / О.О.Чебен. - Киселевск, 2004. - 126 с.

2.Ширыкалов, С.В. Обзор средств создания обучающих программ и формирование требований к учебнику [Текст] / С.В. Ширыкалов. - Москва, 2002. - 218 с.

3.Иванов, В.Л. Структура электронного учебника [Текст] / В.Л Иванов. - Санкт-Петербург, 2001. - 141 с.

4.Соколова, Н.Ю. Как активизировать познавательную деятельность учащихся [Текст] / Н.Ю Соколова. - Саратов, 2001. - 86 с.

5.Гурский,..Д.С. Программирование.. во. .Flash..MX. для. .профессионалов [Текст] / ..Д.С Гурский. - Москва, 2004. - 398 с.

6.Дронов, В. Macromedia Flash MX [Текст] / В. Дронов. - Санкт-Петербург: БХВ-Петербург, 2001. - 648 с.

7.WEB-дизайн [Электронный ресурс] / Электрон. дан. [2007]. - Режим доступа: http:// www.firststeps.ru/html/tutor/html1.html, свободный. - Загл. с экрана. - Яз. рус.

8.WEB-дизайн для начинающих [Электронный ресурс] / Электрон. дан. [2004]. - Режим доступа: http://www.masterweb.ru/html/syt/html21.html, свободный. - Загл. с экрана. - Яз. рус.

9.Каскадные таблицы стилей дизайн [Электронный ресурс] / Электрон. дан. [2006]. - Режим доступа: http://www.cssrush.ru/html/cssr/html5.html, свободный. - Загл. с экрана. - Яз. рус.

10.Создание скриптов на JavaScript[Электронный ресурс] / Электрон. дан. [2004]. - Режим доступа: http://www.Java.ru/html/Scrip/Scrip1.html, свободный. - Загл. с экрана. - Яз. рус.

Размещено на Allbest.ru