Электронный дидактический материал по теме "Каскадные таблицы стилей (CSS)"

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

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

Электронный дидактический материал по теме «Каскадные таблицы стилей (CSS)»

Дипломный проект

По дисциплине «Технология разработки программных продуктов»



Введение

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

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

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

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

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

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

Преимущества ЭДМ:

1) возможность компактного хранения большого объема информации;

2) система быстро настраивается на конкретного ученика;

3) легко актуализируется (дополняется и расширяется);

4) широкие возможности поиска;

5) возможность выполнения интерактивных упражнений и тестов;

6) наглядность: широкие возможности построения визуальных моделей, представления графической и аудио информации;

7) хорошая структурированность (гипертекстовая организация информации).

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

В качестве предмета исследования рассматривается содержание и реализация электронного пособия.

Целью данной работы является разработка электронного пособия для формирования знаний, умений и навыков по теме «Каскадные таблицы стилей».

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

Изучить особенности электронных учебных пособий;

Ознакомиться с требованиями, предъявляемыми к ним;

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

Выбрать программы и языки создания пособия;

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

Определить принцип управления учебником;

Определить внешний вид учебного пособия;

Реализовать гипертекст в электронной форме средствами языка HTML.



1.Теоретические основы разработки электронных образовательных ресурсов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

- принцип полноты: каждый модуль должен иметь следующие компоненты:

теоретическое ядро,

контрольные вопросы по теории,

примеры,

задачи и упражнения для самостоятельного решения,

контрольные вопросы по всему модулю с ответами,

контрольная работа,

контекстная справка.

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

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

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

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

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

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

2.1 Структура электронного учебника

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

слой, обязательный для изучения;

слой для более подготовленных пользователей;

слой для более глубокого изучения определенных разделов;

вспомогательные слои;

специальный слой «Основные понятия и определения»,

дополнительный слой рекомендаций по применению полученных знаний.

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

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

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

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

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

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

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

Правила расположения материала в учебнике.

1. Соблюдение принципов «от известного к неизвестному», «от простого к сложному», «от легкого к трудному», «от конкретного к абстрактному», «от общего рассмотрения к детальному анализу» и т. п.

2. Последующее основывается на предыдущем, а предыдущее подкрепляется последующим.

3. Чувственное предшествует умственному.

4. Материал в большей степени порождает вопросы, чем простое заучивание.

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

6. Примеры предпосылаются правилам, а правила сопровождаются примерами.

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

8. Сказанное подтверждается ссылками на авторитеты или же логическими доказательствами.

2.2 Достоинства и недостатки электронных учебных пособий

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

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

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

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

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

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

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

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

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

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

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

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



3. Постановка задачи

Разработать электронное учебное пособие, на тему «Каскадные Таблицы Стилей (CSS)», соответствующее рабочей программы одноименной дисциплины «Технология разработки программных продуктов» 230105 «Программирование в компьютерных системах» .

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

Проект должен содержать не менее 10 веб-страниц. На каждой странице пособия должна присутствовать навигационная панель (глобальная навигация). С каждой страницы ЭДМ должен быть обеспечен переход (установлена гиперссылка) на головную (начальную) страницу ЭДМ.

При разработке использовать язык гипертекстовой разметки HTML, иерархические стилевые спецификации, JavaScript.

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

материал должен быть разбит на модули, небольшие по объему, замкнутые по содержанию;

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

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

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

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

3.1 Среда разработки

При создании электронного учебного пособия по дисциплине «Элементы математической логики» использовались следующие инструменты:

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

Google Chrome - свободно распространяемый браузер, входящий в набор программMozilla Application Suite, разработкой и распространением которого занимается Mozilla Corporation. Третий по популярности браузер в мире и второй среди . Браузер имеет особенный успех в некоторых странах, в частности, в Германии и Польше это самый популярный браузер. В России Firefox занимает второе место по популярности среди десктопных браузеров. В браузере присутствуют интерфейс со многими вкладками, проверка орфографии, поиск по мере набора, «живые закладки», менеджер закачек, поле для обращения к поисковым системам. Новые функции можно добавлять при помощи расширений.

При создании электронного учебного пособия по дисциплине «Информационные технологии в издательском деле» использовались следующие инструменты:

Adobe Dreamweaver CS5 - профессиональный редактор HTML для проектирования, написания кода и поддержки сайтов, web-страниц и приложений сети.

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

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

Adobe Dreamweaver также обеспечивает полнофункциональную среду написания кода, которая включает инструментальные средства редактирования кода (например, раскраска кода или проверка закрытия тегов) и справочную информацию по HTML, CSS, JavaScript, язык разметки ColdFusion (CFML), Microsoft Active Server Pages (ASP) и страницы JavaServer (JSP).

Технология HTML. Для подготовки гипертекстовых документов используется язык HTML (Hyper Text Markup Language - язык разметки гипертекстовых документов), предоставляющий широкие возможности по форматированию и структурной разметке документов, организации связей между различными документами, средства включения графической и мультимедийной информации. HTML-документы просматриваются с помощью специальной программы - браузера. Наибольшее распространение в настоящее время получили браузеры Navigator компании Netscape (NN) и Internet Explorer компании Microsoft (MSIE). Реализации NN доступны практически для всех современных программных и аппаратных платформ, реализации MSIE доступны для всех Windows платформ, Macintosh и некоторых коммерческих Unix-систем.

HTML является упрощенной версией стандартного общего языка разметки - SGML (Standart Generalised Markup Language), который был утвержден ISO в качестве стандарта еще в 80-х годах. Этот язык предназначен для создания других языков разметки, он определяет допустимый набор тэгов, их атрибуты и внутреннюю структуру документа. Контроль за правильностью использования дескрипторов осуществляется при помощи специального набора правил, называемых DTD - описаниями (более подробно о DTD мы поговорим чуть позже), которые используются программой клиента при разборе документа. Для каждого класса документов определяется свой набор правил, описывающих грамматику соответствующего языка разметки.

HTML-документ состоит из текста, представляющего собой содержание документа, и тегов, определяющих его структуру и внешний вид при отображении браузером. Простейший html-документ выглядит следующим образом:

<html>

<head>

<title>Название</title>

</head>

<body>

<p>Тело документа

</body>

</html>

Как видно из примера, тег представляет собой ключевое слово, заключенное в угловые скобки. Различают одинарные теги, как, например, <p>, и парные, как <body> </body>, в последнем случае действие тега распространяется только на текст между его открывающей и закрывающей скобкой. Теги также могут иметь параметры - например, при описании страницы можно задать цвет фона, цвет шрифта и т.д.: <body bgcolor= «white» text= «black»>.

Текст всего документа заключается в теги <html>, сам документ разбивается на две части - заголовок и тело. Заголовок описывается тегами <head>, в которые могут быть включены название документа (с помощью тегов <title>) и другие параметры, использующиеся браузером при отображении документа. Тело документа заключено в теги <body> и содержит собственно информацию, которую видит пользователь. При отсутствии тегов форматирования весь текст выводится в окно браузера сплошным потоком, переводы строк, пробелы и табуляции рассматриваются как пробельные символы, несколько пробельных символов, идущих подряд, заменяются на один. Для форматирования используются следующие основные теги:

<p> - начало нового абзаца, может иметь параметр, определяющий выравнивание:

<p align=right>;

<br> - перевод строки в пределах текущего абзаца;

<u></u> - выделение текста подчеркиванием

Ссылка на другой документ устанавливается с помощью тега <a href= «URL»>…</a>, где URL - полный или относительный адрес документа. При этом текст, заключенный в тег <a>, обычно выделяется подчеркиванием и цветом, и после щелчка мышью по этой ссылке браузер открывает документ, адрес которого указан в параметре href. Графические изображения вставляются в документ с помощью тега <img src= «URL»>.

Технология JAVA. Язык программирования Java, разработанный около восьми лет назад компанией Sun Microsystems и напоминающий по структуре и синтаксису хорошо знакомый многим программистам С, существует сегодня в Интернете в двух вариантах: JavaScript и собственно Java. Первый вариант языка является всего лишь надстройкой стандарта HTML и значительно расширяет возможности документа, созданного в этом формате. Модуль, написанный на JavaScript, интегрируется в файл HTML как подпрограмма и вызывается на исполнение из соответствующей строки HTML-кода стандартной командой. Встроенный в браузер интерпретатор языка воспринимает и скрипт, и сам код гипертекста как единый документ, обрабатывая те и другие данные одновременно. Модуль Java в отличие от JavaScript не интегрируется в использующую его страницу, а существует как самостоятельное приложение с расширением *.class или, выражаясь научным языком, апплет. При использовании этого варианта языка апплет также вызывается из html-файла соответствующей командой, но загружается, инициализируется и запускается на исполнение в виде отдельной программы, в фоновом режиме.

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

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



4. Этапы проектирования и разработки

1. Планирование и проектирование

Определение целей и задач будущего учебника.

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

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

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

Согласование и утверждение поставленного задания.

2. Создание Электронного дидактическогоматериала

Разработка структуры и дизайна.

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

Наполнение контентом.

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

Реализация навигации.

Тестирование.

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

4.1 Описание продукта

Электронное учебное пособие разработано в соответствии с рабочей программой дисциплины и «Каскадные таблицы стилей (CSS)», соответствующей Государственным требованиям к минимуму содержания и уровню подготовки выпускника специальности 230115 «Программирование в компьютерных системах» среднего профессионального образования.

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

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

о значении и области применения каскадных таблиц стилей;

Общие сведения

Электронный дидактический материал по дисциплине «Каскадные таблицы стилей (CSS)».

Электронный дидактический материал представляет собой документы формата HTML, связанные друг с другом гипертекстовыми переходами и имеет следующую структуру, представленную на рис. 1.

Физическая структура предоставлена на рис. 2



Структура электронного дидактического материала

Рисунок 1 - Логическая схема структуры электронного дидактического материала

электронный учебник тестирование

Обучающий блок

Обучающий блок состоит из лекционного практикума по следующим темам:

Лекция №1. Общая информация.

Лекция №2. Синтаксис CSS и примеры использования.

Лекция №3. Параметры CSS для фона.

Лекция №4. Параметры текста в CSS.

Лекция №5. Шрифты в CSS.

Лекция №6. Границы в CSS.

Лекция №7. Отступы в CSS.

Лекция №8. Поля в CSS.

Лекция №9. Списки в CSS.

Лекция №10. Размеры элементов в CSS.

Лекция №11. Параметры форматирования в CSS.

Лекция №12. Позиционирование в CSS.

Лекция №13. Псевдо-классы в CSS.

Лекция №14. Псевдо-элементы в CSS.

Лекция №15. Типы носителей в CSS2.

Лекция №16. Мы познакомились с CSS, что дальше?

Блок лабораторных работ

Блок состоит из девяти лабораторных работ, по следующим темам:

Лабораторная работа №1. Применение CSS.

Лабораторная работа №2. Внешняя стилевая спецификация.

Лабораторная работа №3. Внедренные стилевые таблицы.

Лабораторная работа №4. Внутренние стили.

Лабораторная работа №5. Работа со специальными элементами.

Лабораторная работа №6. Изучение свойств таблиц.

Лабораторная работа №7. Контрольные вопросы.

Структура программы

lab.html - список лабораторных работ;

ЭДМ «Каскадные таблицы стилей (CSS)» реализовано во фреймовой структуре:

верхний фрейм - название ЭДМ;

левый фрейм - оглавление;

основной фрейм - рабочая область.

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

Рисунок 3 - Блочная композиция ЭДМа

4.2 Тестирование и отладка

электронный учебник тестирование

Тестирование электронного учебного пособия - это проверка ЭУП различными способами на правильную работу

Тестирование разработанного электронного учебного пособия проходило на каждой фазе разработки проекта и состояло из следующих этапов:

просмотра ЭДМ на мониторах, имеющих различную разрешающую способность;

проверки времени, затрачиваемого на загрузку всех страниц ЭДМ;

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

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

проверки корректности гиперссылок и устранение ошибок в них;

проверки графических материалов: рисунков, фотографий и пр.

проверки замещающих надписей графических материалов ЭДМ;

проверки для каждой страницы её описания, содержания, свойств и мета-тэгов;

проверки орфографии и пунктуации текстов;

проверки соответствия наполнения страниц исходному контенту, полученному от преподавателя.

При тестировании электронного учебного пособия на кроссбраузерность ошибок не обнаружено.

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

Переходы адекватно действуют в различных браузерах, графические объекты также представляются корректно.

При тестировании сайта на кроссбраузерность ошибок не обнаружено. Результаты тестирования приведены в таблице 1.

Таблица 1 - Результаты тестирования сайта на кроссбраузерность.

Разрешение монитора Браузер	800Ч600	1024Ч768	1280Ч1024	1440Ч900
Mozilla Firefox 3.5	+	+	+	+
Opera 10.53	+	+	+	+
Internet Explorer 8	+	+	+	+
Internet Explorer 7	+	+	+	+
Internet Explorer 6	+	+	+	+
Safari 5.0	+	+	+	+

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

4.3 Руководство пользователя

Общие сведения о программе

Электронный дидактический материал создан в помощь студентам и преподавателям учебного заведения для изучения лекций по дисциплине «Элементы математической логики».

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

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

Требования к программному и аппаратному обеспечению.

Программа должна эксплуатироваться на IBM-совместимом персональном компьютере класса Pentium или аналогичного под управление операционной системы Windows ХР, обязательно наличие web-браузера (Internet Explorer, Mozilla Firefox, Opera).

Установка

Для того чтобы установить ЭДМ достаточно скопировать папку ЭДМ Основы математической логики

Вызов загрузки

Вызов загрузки программы осуществляется с помощью файла index.html.

Перечень файлов необходимых для функционирования:

index.html - файл загрузки;

upframe.html - заголовок ЭУП;

menu.html - оглавление учебного пособия;

папка js - содержит Java-скрипты;

папка img -содержит картинки;

папка Lectures - содержащая лекции;

папка Practice -содержащая лабораторные работы;

папка CSS - содержит стили для оформления учебника.

Переход между документами осуществляется через главное меню по переходу через гиперссылки



Заключение

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

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

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

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

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

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



Список использованной литературы

HTML, CSS, веб-дизайн и верстка [Электронный ресурс] http://htmlbook.ru/

Храмцов П.Б. Введение в HTML и CSS// Интернет-университет информационных технологи й - ИНТУИТ.ру. - - 2008.

Дронов В.А.. HTML 5,CSS 3 и Web 2.0 / В.А.Дронов // Самоучитель, 2009. - №1. - С. 350.

Ломов А.Ю. HTML,CSS,СКРИПТЫ: практика создания сайтов. - М.: Изд. МГПУ, 2014. - 318 с

Глушаков С.В. Программирование Web-страниц. - М.: ООО «Издательство АСТ», 2009. - 345 с.

Глушаков, С.В. Программирование Web-страниц / С.В. Глушаков, И.А. Жакин, Т.С. Хачиров. - Харьков: Изд-во Фолио, 2008. - 169 с.

Ши, Д. . Философия CSS-дизайна// М.Е. Хольцшлаг, Д. Ши. М.:НТ Пресс, 2009. --312 с.

Дронов, В. WEB-дизайн / В. Дронов. - СПб.: БХВ - Санкт-Петербург, 2008. - 341 с.

Титтел, Э. HTML, XHTML и CSS для чайников., 7-е издание / Э. Титтел, Дж. Ноубл. М: «Диалектика». 2011. - 400 с.

Мальчук Е.В. Самоучитель HTML и CSS: Вильямс. - Москва: 2012. - 364с.



Приложение А

Результат работы программы

Рисунок 1 -- Главная страница ЭДМ «Каскадные таблицы стилей»

Рисунок 2 -- Пример лекции



Приложение Б

Листинг

Файл «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=windows-1251">

<title>Электронный дидактический материал на тему &laquo;CSS &raquo;</title>

<frameset rows="61,*" cols="*" border="1" bordercolor="#DFEAF8">

<frame src="html/upframe.html" name="upframe" scrolling="no" noresize>

<frameset rows="*" cols="358,*" bordercolor="#DFEAF8">

<frame src="html/menu.html" name="menu" scrolling="yes">

<frame src="html/logo.html" name="text" scrolling="auto">

</frameset>

</frameset>

<noframes></noframes>

</head>

<body bgcolor="#DFEAF8">

</body>

</html>



Листинг Лабораторная работа. «Лаба 1.html»:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">

<head>

</style>

</head>

<body>

<p><strong>Цель: </strong>изучить основные команды, используемые при создании CSS<br />

<strong>Задание:</strong></p>

<ul>

<li>выполнить 16 упражнений, приведенные в тексте лабораторной работы;</li>

<li>отчитаться перед преподавателем о проделанной работе</li>

</ul>

</blockquote>

<p>Для того, чтобы приступить к реализации CSS, нам потребуется еще две web-страницы.<br />

<br />

<strong>Задание 1</strong></p>

<ul>

<ul>

<li>Для проектов <strong>H-173-1P</strong> и <strong>R-189-1P </strong>в файловой системе сайта создайте соответствующие папки согласно физической структуре сайта.</li>

<li>Оформите две web-страницы: о проекте <strong>H-173-1P</strong> и о проекте <strong>R-189-1P</strong>. Все материалы находятся в папке <strong>projects</strong><strong>. </strong>При создании страниц не используйте никакого форматирования (т.е. у всех тегов /или почти у всех/ не должно быть никаких атрибутов). Все значения тегов должны быть по умолчанию. Примерный результат на рис. 1.</li>

<li>Сохраните файлы под именами <strong>projekt</strong><strong>_</strong><strong>h</strong><strong>-173-1</strong><strong>p</strong><strong>.</strong><strong>html</strong> и <strong>projekt</strong><strong>_</strong><strong>r</strong><strong>-189-1</strong><strong>p</strong><strong>.</strong><strong>html</strong> соответственно в нужных папках в структуре сайта.</li>

<li>В файле <strong>proekt</strong><strong>_</strong><strong>townhouse</strong><strong>.</strong><strong>html</strong> сделайте в соответствующих местах ссылки на вновь созданные web-страницы.</li>

</ul>

</ul>

<h2 align="center"><strong>1.Применение </strong><strong>CSS</strong></h2>

<p>На предыдущих занятиях Вы оформили и связали гиперссылками несколько Web-страниц. При оформлении каждой страницы Вам неоднократно пришлось описывать параметры отдельных абзацев, заголовков, шрифтов, подбирать фон страниц и фрагментов таблицы. Существует возможность автоматизации процесса описания параметров оформления. <br />

В Web существует очень полезная технология - иерархические стилевые спецификации - CSS. Использование CSS позволяет разработчикам отделить описание особенностей оформления Web-страниц от определения структуры документа.<br />