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

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

Введение

программный администратор пользователь интерфейс

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

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

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

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

Введение в проблему

Целью данного дипломного проекта является разработка учебно-методического электронного комплекса (УМК) по дисциплине «Информатика».

Электронная учебно-методическая литература позволяет осуществлять:

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

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

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

4) провождение занятий в форме самостоятельной работы за компьютерами, оставляя за преподавателем роль руководителя и консультанта;

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

6) индивидуальную работу со студентами, особенно в части, касающейся домашних заданий и контрольных мероприятий;

7) предоставление широчайших возможностей для самопроверки на всех этапах работы;

8) рассмотрение большего количества примеров и задач, освобождение от громоздких вычислений и преобразований;

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

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

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

ь УМК должен быть разработан в соответствии с образовательным стандартом;

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

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

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

ь УМК должен быть небольшого размера по занимаемому дисковому пространству во избежание проблем с его копированием на съемные носители: диски, USB-накопители и скоростью загрузки через Интернет;

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



1. Основная часть

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

программный администратор пользователь интерфейс

1.1 Выбор программного обеспечения

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

ь Редактор кода (Среда разработки HTML-документов);

ь Графические редакторы для создания графических элементов электронных книг;

ь Браузеры для отладки внешнего вида страниц;

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

Обзор редакторов кода HTML

В качестве редактора HTML были рассмотрены Poet, PSPad, EditPad Lite и Notepad++.

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

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

Основные характеристики Poet:

ь Простой, но детально продуманный интерфейс.

ь Высокая скорость работы и отклика на больших файлах.

ь Проверка русской и английской орфографии.

ь Усовершенствованная система «недавних файлов».

ь Поддержка различных кодировок.

ь Интеграция с Проводником.

ь Поддержка регулярных выражений в PHP-нотации.

ь Замена с поддержкой подстановок.

ь Подсветка синтаксиса современных языков разметки и программирования.

ь Статистика и конструктор регулярных выражений.

PSPad - компактный инструмент с простым управлением и мощными возможностями редактора кода, необходимый для работы одновременно с разными языками программирования (включая PHP, Perl, HTML и Java) и работы с текстовыми данными.

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

Основные возможности PSPad:

ь Поддержкамакросов: запись, сохранение и загрузка.

ь Шаблоны (HTML-теги, скрипты, шаблоны кода).

ь Шаблоны для HTML, PHP, Pascal, JScript, VBScript, MySQL, MS-DOS, Perl.

ь Определяемые пользователем стили подсветки для экзотических синтаксисов.

ь Автокоррекция.

ь Интеллектуальный встроенный HTML-предпросмотр используя IE и Mozilla.

ь Полноценный HEX редактор.

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

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

ь Цветная подсветка синтаксиса для печати и предпросмотр перед печатанием.

ь ИнтегрированнаяTiDy-библиотека для форматирования и проверки HTML-кода, конверсии в CSS, XML, XHTML.

ь Встроенная свободная версия CSS-редактора TopStyle Lite.

ь Экспорт кода с подсветкой в форматах RTF, HTML, TeX в. файл или буфер обмена.

ь Вертикальное выделение, закладки, метки, нумерация строк.

ь Переформатирование и сжатие HTML-кода, изменения регистра слов, тегов и букв.

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

ь Таблица ASCII-символов с приведением соответствия HTML-мнемоник.

ь Навигатор кода для Pascal, INI, HTML, XML, PHP.

ь Проверка правописания.

ь Встроенный веб-браузер с поддержкой Apache.

ь Подсветка парных скобок.

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

Основные возможности EditPad Lite:

ь Может быть установлен на USB диске или другом переносном устройстве.

ь Функция Поиска и Замены работающая во всех открытых файлах.

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

ь Редактирование и конвертация файлов ASCII, ANSI и Unicode.

ь Доступно создание текстовых файлов не только на европейских, но и на восточных языках.

ь Редактирование структурированных текстовых файлов, сохранение части текста на диске и вставка файла в текущее содержание.

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

ь Опция «поверх окон».

ь Предупреждение при закрытии несохраненного файла.

ь Поддержка кодовых страниц ISO-8859, а также большинство DOS, KOI8 и EBCDIC.

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

ь Определение собственных типов файлов.

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

Среди продвинутых опций Notepad++ - опция подсветки текста и возможность сворачивания блоков, согласно синтаксису языка программирования. Пользователь может самостоятельно определить синтаксис языка программирования. Есть возможность настроить режим подсветки. Доступно выделение цветом директив и операторов языка программирования.

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

Другие возможности Notepad++:

ь Авто-завершение набираемого слова.

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

ь Поддержка регулярных выражений Поиска / Замены.

ь Полная поддержка перетягивания фрагментов текста.

ь Динамическое изменение окон просмотра.

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

ь Увеличение и уменьшение (масштабирование).

ь Поддержка большого количества языков.

ь Листинг программ можно печатать в цвете - так, как вы видите на экране в окне редактирования.

ь Заметки о документе.

ь Выделение скобок при редактировании текста.

ь Запись макроса и его выполнение.

Выбор редактора кода HTML

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

Обзор графических редакторов

Во время написания дипломной работы проводился обзор трёх редакторов Paint.NET, Photoscape и редактора Adobe Photoshop.

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

Среди многих мощных и полезных характеристик Paint.NET следует отметить возможность работы со слоями (в частности с прозрачными), работу со сканером и камерой, масштабирование, удаление эффекта красных глаз, полная история изменений и много чего другого. Поддерживаемые форматы: BMP, JPEG, PNG, TIF, GIF и собственный формат PDN.

Особенности Paint.NET:

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

ь Слои. Как правило, только дорогие платные программы для работы с изображениями умеют работать со слоями. Paint.NET предоставляет эту возможность бесплатно.

ь Мощные инструменты. Paint.NET имеет мощные, но простые инструменты для работы с векторной графикой, выделения (волшебная палочка), клонирования изображений, а также простой текстовый редактор, инструменты для масштабирования (от 1% до 3200%) и замены цвета.

ь Неограниченная история. Для исправления возможных ошибок допущенных в процессе редактирования фотографий или рисунков в программе Paint.NET предусмотрена функция истории. Каждое ваше действие может быть удалено и потом возобновлено опять. Длинная истории ограничивается только доступным дисковым пространством.

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

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

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

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

Основные возможности Photoscape:

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

ь пакетное редактирование. Возможность редактирования большого количества файлов;

ь устраняет эффект красных глаз;

ь создание одного изображения из нескольких фотографий;

ь анимированные изображения. Создание одного анимированного изображения из нескольких в формате GIF;

ь печать. Возможность печати фотографий, визитных карточек и т.п.;

ь делитель. Разделение фотографий на несколько

частей;

ь захват экрана. Создание и сохранение скриншотов;

ь захват цвета. Увеличение изображение и взятие цветового образца;

ь конвертор изображений RAW в JPG;

ь режим слайдшоу;

Adobe Photoshop - считается наилучшим многофункциональным графическим редактором, и каждая новая версия радует безграничными возможностями, уймой настроек, эффектов, фильтров и огромным инструментарием. Программа лидирует в сфере средств редактирования растровых изображений, и является самым узнаваемым и популярным продуктом. Если вы решили скачать бесплатно этот фоторедактор то наверняка вы знаете для чего он. Зачастую само приложение просто называется Photoshop. Его безумную популярность подчёркивает уже тот факт, что практически всем конкурентам Adobe Photoshop, как, например, Macromedia Fireworks, Corel Photo-Paint, GIMP, WinImages, пришлось добавить в своих продуктах поддержку родного формата - psd. Освоение Adobe Photoshop по истине не легкая задача, но благо что доступность уроков совсем бесплатна. В них входят в большей степени видео уроки так как это быстрее и менее запутанней чем читать очень большой текст и в то же время выполнять действия в программе. В начале освоения Photoshop бесплатных уроков будет достаточно чтоб начать пользоваться на среднем уровне, но если подходить серьезно то свои навыки можно применить за умеренную плату, что даст возможность приобрести платные уроки и стать профессионалом.

Выбор графического редактора

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

Photoshop способен эффективно взаимодействовать с остальными приложениями компании Adobe для обработки мультимедийных данных. К примеру, с AdobePremiere, Illustrator либо Encore DVD. Программный продукт Adobe заслуженно считается эталоном качества среди всех существующих фоторедакторов пиксельной графики.

1.2 Руководство администратора

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

1) Редактирование главной страницы

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

<imgsrc= «pictures/bat.jpg» align= «right»>

Если нужно изменить текст на главной странице, вставьте текст в строчку:

<b><i><h4>Новый текст<h4></i></b>

Когда текст будет добавлен, останется только сохранить все изменения.

2) Добавление новой лекции

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

<li><details><summary>Введение</summary>

<ol>

Далее прописываем разделы лекции:

<li><Ahref= «1.1.html» style=«color:#000000; text-decoration:none>

Информатика и её роль в современном обществе </A></li>

<li><A href= «1.2.html» style=«color:#000000; text-decoration:none>

Понятиеинформации</A></li>

<li><A href= «1.3.html» style=«color:#000000; text-decoration:none>

Языкипрограммирования</A></li>

<li><A href= «1.4.html» style=«color:#000000; text-decoration:none>

Алгоритмы</A></li></details>

</ol>

</li>

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

<a href= "#»>Введение</a>

<ul>

<li><ahref= «1.1.html»>

Информатика и её роль в современном обществе</a></li>

<li><a href= «1.2.html»>Понятие информации</a></li>

<li><a href= «1.3.html»>Языки программирования</a></li>

<li><a href= «1.4.html»>Алгоритмы</a></li>

</ul>

Данное изменение необходимо сделать на каждой странице.

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

<embed src= «Лекции/1.1 введение.pdf» width= «1000» height= «1000» />

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

3) Редактирование списка литературы

Чтобы добавить новый учебник, в файл Литература.html, в конце списка учебников добавляем следующие строчки:

<tr>

<td width= «200»><imgsrc= «pictures/Названиекниги.jpg» width= «207» height= «206»></td>

<td><h3>Название книги</h3>

<h4>Ф.И.О. автора, дата издания, место издания, ссылка на учебник

</h4></td>

</tr>



4) Редактирование словарика

Добавление новых определений можно осуществлять по тому же принципу, что и в разделе «Литература».

5) Редактирование информации к зачёту

Чтобы добавить новый учебник, в файл Литература.html, в конце списка учебников нужно добавить следующие строки:

<tr>

<td colspan= «9» height= «100» background= «yellow.png»>

<b><i><h2 align= «center»>Вопросыкэкзамену</h2></i></b>

<h4>Вопрос к экзамену</h4>

</td>

</tr>

6) Редактирование раздела «Факты»

Добавление новых определений можно осуществлять таким же образом, что и в разделе «К экзамену».

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

При создании структуры УМК использовались языки HTML, JavaScript и CSS. Знание этих языков необходимо для разработки и редактирования УМК. Рассмотрим коротко каждый из них.

HTML - язык гипертекстовой разметки

Язык HTML предназначен в первую очередь для структурной разметки, т.е. для обозначения каждого элемента в соответствии с его местом и ролью в структуре документа. Например, тэг <p>…<?p> обозначает, что элемент является просто абзацем обычного текста, тэг <ul>…<?ul> - что элемент является перечнем, тэг <blockquote>…<?blockquote> - что элемент является цитатой и т.д.

В HTML есть также тэги, управляющие внешним видом отдельных элементов: например, тэг <i>…<?i> выделяет текст курсивом, тэг <font>…<?font> изменяет различные параметры шрифта, а тэг <br ?> вставляет перевод строки. Все такие тэги не относятся к структурной разметке, и применять их не рекомендуется. Все, что касается оформления веб-страницы, ее внешнего вида, можно и нужно делать с помощью CSS.

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

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

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

Полный справочник HTML можно найти на сайте http://html.manual.ru/

JavaScript - объектно-ориентированный скриптовый язык программирования

Javascript - это язык программирования, с помощью которого веб-страницам придается интерактивность. С его помощью создаются приложения, которые включаются в HTML-код (например, анкеты или формы регистрации, которые заполняются пользователем). Часто Javascript путают с языком программирования Java, однако общего между ними очень мало. К тому же, некоторые сравнивают Javascript с языками Python, Self, Ruby. Однако это особенный язык, который существует сам по себе. С помощью Javascript можно изменять страницу, изменять стили элементов, удалять или добавлять теги. С его помощью можно узнать о любых манипуляциях пользователя на странице (прокрутка страницы, нажатие любой клавиши, клики мышкой, увеличение или уменьшение рабочей области экрана…) Через него можно к любому элементу HTML-кода получить доступ и делать с этим элементом множество манипуляций. Можно загружать данные не перезагружая страницу, выводить сообщения, считывать или устанавливать cookie и выполнять множество других действий.

Вся уникальность данного языка программирования заключается в том, что он поддерживается практически всеми браузерами и полностью интегрируется с ними, а все что можно сделать с его помощью - делается очень просто. Ни одна другая технология не вмещает в себе все эти преимущества вместе. К примеру, есть такие, которые не кросс-браузеры (то есть поддерживаются не всеми браузерами). Это - VBScript, ActiveX, XUL. А есть такие, которые с браузером не интегрированы в нужной степени, это - Java, Flash, Silverlight. На сегодняшний день данная технология активно развивается, разрабатывается язык программирования Javascript 2.

В качестве примера использования JavaScript и HTML рассмотрим часть кода теста написанного для УМК:

Полный справочник HTML можно найти на сайте http://javascript.ru/manual

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

<script src= «jquery.js» type= «text/javascript» charset= «utf-8»></script>

<script src= «scrollTo.js» type= «text/javascript» charset= «utf-8»></script>

<script type= «text/javascript» charset= «utf-8»>

$(function () { // run this code on page load (AKA DOM load)

/* set variables locally for increased performance */

varscroll_timer;

var displayed = false;

var $message = $('#message');

var $window = $(window);

var top = $(document.body).children(0).position().top;

/* react to scroll event on window */

$window.scroll (function () {

window.clearTimeout (scroll_timer);

scroll_timer = window.setTimeout (function () { // use a timer for performance

if ($window.scrollTop() <= top) // hide if at the top of the page

{

displayed = false;

$message.fadeOut(500);

}

else if (displayed == false) // show if scrolling down

{

displayed = true;

$message.stop (true, true).fadeIn(500).click (function () {$message.fadeOut(500);});

}

}, 100);

});

$('#top-link').click (function(e) {

e.preventDefault();

$.scrollTo (0,300);

});

});

</script>

<div id= «message»><a href= "#top» id= «top-link»>Вверх!</a></div>

</body>

CSS - каскадные таблицы стилей

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

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

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

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

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

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

Файл CSS, содержащий таблицу стилей, привязывается к документу HTML с помощью элемента link.

Элемент link может быть дочерним только по отношению к элементу head.

Его атрибуты:

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

ь Атрибут type - тип данных связываемого ресурса, значение для CSS - text/css.

ь Следующий атрибут href - указывает на URL-адрес подключаемого файла. Адрес может быть как относительный (т.е. файл расположен в папке сайта), так и абсолютный.

ь Атрибут media - обозначает тип устройства визуального представления.

ь В целом общий вид элемента link будет следующим:



<link rel=» stylesheet» type=» text/css» href=» srtyle.css» media=» all» />

При этом способе таблица стилей располагается в самом документе HTML и заключена в элементе style.

Элемент style может быть дочерним только по отношению к элементу head.

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

В элементе style обязательно должен присутствовать атрибут type - тип содержимого, для таблиц стилей используется значение text/css как и в элементе link.

Необязательный атрибут media - тип устройства.

Внешний вид вложенной таблицы стилей:

<style type= «text/css» media= «all»>

html {

background:#fff;

font-size:1.2em;

}

h1, h2, h3 {

color:#515151;

margin-top:.4em;

}

</style>

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

Пример встраиваемой таблицы стилей:

<img src='http://wm-azbook.ru' style= «width:250px; height:150px;» />

Полный справочник CSS можно найти на сайте http://css.manual.ru.

1.3 Описание проекта

В процессе создания УМК можно выделить несколько основных этапов:

ь определение требования и порядок разработки электронного УМК по дисциплине «Информатика»;

ь формирование списка основных тематических разделов УМК и их наименование;

ь разработка эскизов дизайна УМК, утверждение лучшего дизайна;

ь сбор и получение данных и материалов УМК;

ь создание разделов УМК;

ь заполнение УМК методическими и лекционными материалами;

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

Логическая структура УМК

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

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

Логическая структура УМК по дисциплине «Информатика» представлена на рис.

Структура УМК по дисциплине «Информатика»

Основные структурные элементы УМК:

УМК состоит из ряда основных структурных элементов, которые перечислены ниже:

ь система навигации по разделам и внутри них;

ь раздел «Главная»;

ь раздел «Лекции»;

ь раздел «Практика»;

ь раздел «Литература»;

ь раздел «Словарик»;

ь раздел «К экзамену»;

ь раздел «Факты».

Главная страница

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

Главная страница УМК по дисциплине «Информатика»

Пользовательский интерфейс УМК

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

Раздел «Лекции»

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

Вкладка «Лекции»

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



Пример открытия главы

Раздел «Практика»

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



Раздел «Практика»

Раздел «Литература»

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

Раздел «Литература»



Раздел «Словарик»

В этом разделе размещен список терминов в алфавитном порядке, с определениями, а также ссылки на лекции, где они упоминаются. Организация раздела идентична разделу «Литература».

Раздел «Словарик»

Раздел «К экзамену»

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



Раздел «К экзамену»

Раздел «Факты»

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

Раздел «Факты»

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

...