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

  • Вид работы:
    Дипломная (ВКР)
  • Предмет:
    Информационное обеспечение, программирование
  • Язык:
    Русский
    ,
    Формат файла:
    MS Word
    1,15 Мб
  • Опубликовано:
    2016-01-24
Вы можете узнать стоимость помощи в написании студенческой работы.
Помощь в написании работы, которую точно примут!

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













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

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

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


Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

примеры,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.1 Среда разработки

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

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

Google Chrome - свободно распространяемый <#"862473.files/image001.gif">

Структура программы.html - список лабораторных работ;

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

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

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

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

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

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

.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

+

+

+

+


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

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

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

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

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

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

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

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

Установка

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

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

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

Перечень файлов необходимых для функционирования:.html - файл загрузки;.html - заголовок ЭУП;.html - оглавление учебного пособия;

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

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

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

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

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



Заключение

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

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

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

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

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

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

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

HTML, CSS, веб-дизайн и верстка [Электронный ресурс] <#"862473.files/image003.gif">

Рисунок 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 />

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

<strong><em>CSS</em></strong><em> - это язык, который содержит набор свойств для определения внешнего вида документа</em>.<br />

Средства CSS можно разделить на категории:</p>

<ul>

<li>Средства управления позиционированием;</li>

<li>Средства для управления шрифтами;</li>

<li>Средства для управления фоновым цветом и изображением;</li>

<li>Средства выравнивания текста.</li>

</ul>

<p>&nbsp;</p>

<p align="left"><br />

<div align="center">Рис. 1. Web-страница без форматирования</div><br />

Стилевые спецификации не заменяют языка разметки, они являются самостоятельной технологией, которая применяется непосредственно к тегу HTML. Чтобы назначить элементу HTML стилевое описание, необходимо в стилевой спецификации указать сам элемент и записать после него в фигурных скобках всю информацию о его форматировании: <em>имя элемента {стилевые_спецификации}.</em><br />

Например, необходимо задать правило форматирования элемента &lt;H1&gt; так, чтобы использовался шрифт гарнитуры Arial, размером 14 пунктов. Стилевая спецификация выглядит следующим образом:

<br><p align="center"> <img src="img/screenshots/10.png"><br>

<br> Итак, стилевые спецификации являются просто <em>набором правил</em>, которые включают в себя <em>селектор </em>(имя HTML-элемента, атрибута <em>CLASS</em>или <em>ID</em>)<em>, </em>связанный со <em>стилевым свойством</em> (например, <em>font</em><em>-</em><em>family</em>), после которого следует двоеточие и <em>допустимое значение</em> (или значения) этого свойства. В стилевую спецификацию может быть включено несколько правил, разделенных точкой с запятой.<br />

<br />

<strong>Задание 2</strong><br />

<br />

Откройте файл справочника «Sprav_CSS.doc». Найдите разделы «Свойства шрифта» и раздел «Свойства текста». Ознакомьтесь со стилевыми свойствами шрифта и текста. Выясните, к каким HTML-элементам можно применить эти свойства.<br />

Существует <strong><em>три основных вида стилевых спецификаций (</em></strong><strong><em>CSS</em></strong><strong><em>):</em></strong> </p>

<ul>

<ul>

<ul>

<ul>

<li>Вы можете связать документ с <strong>внешней стилевой спецификацией.</strong> </li>

<li>Можно внедрить <strong>глобальную стилевую спецификацию,</strong> действующую в пределах одной Web-страницы, в заголовок гипертекстового документа. </li>

<li>И можно определить <strong>внутреннюю стилевую спецификацию</strong> для отдельного HTML-элемента.</li>

</ul>

</body>

</html>

Листинг Лекция «l1.htm»

<!-- saved from url=(0142)file:///C:/Users/1/Desktop/CSS/html/Lectures/%D0%9E%D0%B1%D1%89%D0%B0%D1%8F%20%D0%B8%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%86%D0%B8%D1%8F.htm -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="">Общая информация</title><script type="text/javascript" src="./l1_files/jquery.js"></script><style></style><script type="text/javascript" src="./l1_files/drupal.js"></script><script type="text/javascript" src="./l1_files/jquery.ui.core.js"></script>

<script type="text/javascript" src="./l1_files/jquery.ui.widget.js"></script>

<script type="text/javascript" src="./l1_files/jquery.ui.position.js"></script>

<script type="text/javascript" src="./l1_files/jquery.ui.mouse.js"></script>

<script type="text/javascript" src="./l1_files/jquery.ui.draggable.js"></script>

<script type="text/javascript" src="./l1_files/jquery.ui.resizable.js"></script>

<script type="text/javascript" src="./l1_files/jquery.ui.button.js"></script>

<script type="text/javascript" src="./l1_files/jquery.ui.dialog.js"></script>

<script type="text/javascript" src="./l1_files/universal-ajax-control.js"></script>

<script type="text/javascript" src="./l1_files/popup_list.js"></script>

<script type="text/javascript" src="./l1_files/spelling.js"></script>

<script type="text/javascript" src="./l1_files/jquery.hint.js"></script>

<script type="text/javascript">

<!--//--><![CDATA[//><!--.extend(Drupal.settings, { "basePath": "http:\/\/www.intuit.ru", "spelling": { "requestUri": "studies\/courses\/1101\/135\/print_lecture\/1982", "uri": "\/intuit\/admin\/content\/spelling\/save_form" } });

//--><!]]>

</script><link type="text/css" rel="stylesheet" media="all" href="./l1_files/admin_menu.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/intuit_common_interface.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/entity_showcase_list.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/node.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/defaults.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/system.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/system-menus.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/user.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/ctools.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/date.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/datepicker.1.7.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/jquery.timeentry.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/jquery.ui.core.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/jquery.ui.theme.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/jquery.ui.dialog.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/jquery.ui.button.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/spelling.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/int_studies.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/lecture.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/style.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/intuit.css">

<link type="text/css" rel="stylesheet" media="all" href="./l1_files/socialnetwork.css">

<link type="text/css" rel="stylesheet" media="print" href="./l1_files/print.css"></head><body><div>

<div>

</div>

<div>

<div>

</div>

<div>

Лекция&nbsp;1. <span>Общая информация</span>

</div>

</div></div><div>

<a xmlns:edi="http://www.intuit.ru/2010/edi" name="sect1"></a><h3 xmlns:edi="http://www.intuit.ru/2010/edi"><a name=l11>Технология CSS: общий взгляд</h3><p xmlns:edi="http://www.intuit.ru/2010/edi" id="id_1">Название "Каскадные таблицы стилей" происходит от английского Cascading <a name="keyword1"></a><span>аббревиатурой которого является <a name="keyword2"></a><span>Впервые стили появляются в <a name="keyword3"></a><span>для определения представления элементов <a name="keyword4"></a><span>и решения проблем представления документов. Стили обычно хранятся в таблицах стилей: могут быть определены как внутри <a name="keyword5"></a><span>документа, так и в специальном файле с расширением <a name="keyword6"></a><span>Используя отдельные файлы для хранения таблиц стилей, можно существенно сократить объем работы. Также можно определить несколько стилей, которые, подчиняясь существующим правилам, будут каскадно задавать один определенный стиль.</p><div xmlns:edi="http://www.intuit.ru/2010/edi"> несколько таблиц стилей:</p><div xmlns:edi="http://www.intuit.ru/2010/edi">

{: blue; font-style: italic;left: 20pt;

},ul,li

{style: circle;family: arial;

}:link {color:black}:visited {color:black}

{image: url("http://www.intuit.ru/departament/picture.gif")

}</pre></div><div xmlns:edi="http://www.intuit.ru/2010/edi">

{: 20pt;

},h2,h3,h4,h5,h6,p,ol,li

{family: arial, "sans serif";

},table,td,ol,ul

{style: oblique;

}

:link {COLOR: blue;}

:visited {COLOR: blue;}:active {COLOR: black;}:hover {COLOR: black;}.myln:link {COLOR: olive;}.myln:visited {COLOR: olive;}.myln:active {COLOR: teal;}.myln:hover {COLOR: teal;}</pre></div><div xmlns:edi="http://www.intuit.ru/2010/edi">

{style: italic;right: 20pt;

},h1,h6

{family: "comic sans ms", arial, "sans serif";

},th

{size: 20%

}{background-color: blue}{background-color:#FFF000},ol,ul

{:green;

}

:link {color:blue}

:visited {color:blue}

:active {color:green}

:hover {color:green}</pre></div><div xmlns:edi="http://www.intuit.ru/2010/edi">

:visited { color:red }

:active { color:yellow }

:hover { color:yellow }

{color: #FAD123;

},h2,h6

{left: 20pt;: blue;

},h4,h5

{left: 10pt;: green;

},h1,h3

{size: 150%;

},h1,h2,h3,h4,h5,h6,table

{family: arial;

}

{left: 30pt;

}</pre></div><div xmlns:edi="http://www.intuit.ru/2010/edi">

{size: 75%;

},h4,h5,h6,li

{family: arial, "sans serif";left: 20pt;

}

{color: #F2FF2F;

},ul {color: 12a45d;}

:link {color:brown}

:visited {color:brown}

:active {color:blue}

:hover {color:blue}</pre></div><div xmlns:edi="http://www.intuit.ru/2010/edi">При последовательном применении этих стилей к одному и тому же документу можно менять его <a name="keyword9"></a><span>представление</span>.</p><div xmlns:edi="http://www.intuit.ru/2010/edi">

<a xmlns:edi="http://www.intuit.ru/2010/edi" name="sect8"></a><h3 xmlns:edi="http://www.intuit.ru/2010/edi"><a name=l13>Предназначение стилей</h3><p xmlns:edi="http://www.intuit.ru/2010/edi" id="id_10">Язык <a name="keyword10"></a><span>был создан для описания содержимого документа. Его теги были предназначены для определения "заголовка", "параграфа", "таблицы" ( <span>и т.д.). Первоначально для представления документов не было предусмотрено каких-либо тегов форматирования, т.е. предполагалось, что о представлении документа позаботится <a name="keyword11"></a><span>браузер</span>.</p><div xmlns:edi="http://www.intuit.ru/2010/edi">Но это породило процесс создания своих тегов и атрибутов к исходной спецификации <a name="keyword12"></a><span>браузерами Netscape и <a name="keyword13"></a><span>такие, например, как <a name="keyword14"></a><span>тег</span> <span>и <a name="keyword15"></a><span>атрибут</span> <span>что затруднило создание <a name="keyword16"></a><span>сайтов, на которых содержимое документов <a name="keyword17"></a><span>было четко отделено от уровня представления документа.</p><div xmlns:edi="http://www.intuit.ru/2010/edi">В этой ситуации консорциум <a name="keyword18"></a><span>некоммерческая организация, ответственная за стандартизацию <a name="keyword20"></a><span>создала при разработке стандарта <a name="keyword21"></a><span>каскадные таблицы стилей.</p><div xmlns:edi="http://www.intuit.ru/2010/edi">Таким образом, необходимость разделения содержимого документа и его представления привела к созданию технологии <a name="keyword22"></a><span>Сегодня эту технологию поддерживают все основные браузеры (<a name="keyword23"></a><span>и др.).</p><div xmlns:edi="http://www.intuit.ru/2010/edi">Таблицы стилей могут существенно сократить объем работы</h3><p xmlns:edi="http://www.intuit.ru/2010/edi" id="id_20">Таблицы стилей определяют <a name="keyword24"></a><span>вывод</span> элементов <a name="keyword25"></a><span>как, например, <a name="keyword26"></a><span>тег</span> <span>и <a name="keyword27"></a><span>атрибут</span> <span>в <a name="keyword28"></a><span>Как уже говорилось, каскадные таблицы стилей обычно хранятся во внешних файлах с расширением .<a name="keyword29"></a><span>

<li xmlns:edi="http://www.intuit.ru/2010/edi">внутри единственного элемента HTML;</li>

<li xmlns:edi="http://www.intuit.ru/2010/edi">внутри элемента <span>страницы HTML;</li>

<li xmlns:edi="http://www.intuit.ru/2010/edi">во внешнем файле CSS.</li>

</ul><div>

<li xmlns:edi="http://www.intuit.ru/2010/edi">стили, используемые по умолчанию браузером;</li>

<li xmlns:edi="http://www.intuit.ru/2010/edi">стили, хранящиеся во внешней таблице;</li>

<li xmlns:edi="http://www.intuit.ru/2010/edi">стили, хранящиеся во внутренней таблице стилей (внутри тега <span>

<li xmlns:edi="http://www.intuit.ru/2010/edi">встроенный стиль (внутри элемента HTML).</li>

</ol><div>

</div></body></html>

Похожие работы на - Электронный дидактический материал по теме 'Каскадные таблицы стилей (CSS)'

 

Не нашли материал для своей работы?
Поможем написать уникальную работу
Без плагиата!