Н.К. Федотов ВКР

Ход создания дизайна и интерфейса электронного учебника

Необходимо открыть программу Artisteer(рис.3.9.), используя меню пуск или через ярлык на рабочем столе.

Рисунок 3.9. – Artisteer

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

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

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

электронного мультимедийного учебника. Интерфейс программы

Artisteer интуитивно понятен и с ним никаких проблем не возникает.

Делаем первые наброски, подбираем цветовую гамму нашего будущего

31

дизайна:

Далее надо сохранить полученный дизайн, с помощью файл – экспорт –

тема WordPress.

Использование программы Artisteer закончено, закрываем ее(см.

Приложение 2).

У нас есть тема для CMS WordPress, устанавливаем виртуальный сервер

Denwer.

Для установки виртуального сервера Denwer(рис.3.10.) необходимо запустить инстолятор, после чего выбрать каталог, в который установится комплекс и

имя виртуального диска.

Рисунок 3.10. – Denwer

После установки виртуального сервера надо установить CMS WordPress,

для этого надо скинуть все файлы движка и установить CMS.

После установки надо скинуть все файлы темы, которые мы получили от программы Artisteer в …/корневая папка движка/wp-content/themes, далее заходим в администраторскую панель WordPress и меняем тему на созданную нами.

Теперь необходимо рипнуть тему. Для этого используется браузер

32

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

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

Adobe Photoshop CS.

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

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

С помощью инструмента размывание надо сделать так, чтобы эти 2

картинки как бы сливались между собой. Потом делается надпись «Уроки Фотошоп» с помощью инструмента текст. Выбирается размер и шрифт надписи. Получилась готовая шапка.

Сохраняем файл с помощью файл – сохранить как, устанавливаем расширение jpg и вводим имя файла top.jpg, файл сохраняется.

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

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

Нужно изменить кодировку файла index.html из рипа. Для этого надо воспользоваться простым блокнотом.

Надо открыть файл с помощью блокнота AkelPad, и изменить в строчке

33

«<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">»

надпись «charset=UTF-8» на «charset=windows-1251», после чего надо сохранить в кодировке windows-1251, для этого надо выбрать кодировки,

после чего сохранить в windows-1251.

После чего надо переименовать файл index.html в template.php, т.е.

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

«движка».

Перед тем как приступить к редактированию файла template.php и index.css лучше всего будет поставить весь сайт на локальный сервер, для этого нужно открыть диск, на который при установке denwer был назначен локальный сервер, зайти в папку home, и создать там папку под названием photoshop, а в ней папку uchoba. Полный путь в таком случае будет такой:

Название диска, назначенного на сервер:\home\photoshop\uchoba

И скорпировать туда сначала файлы php движка (папка content, папка pages, папка pic, index.css, template.php, print.php, index.php и.htaccess), а потом скопировать уже имеющиеся у нас файлы template.php и index.css, скопировать нужно с заменой.

А все картинки, имеющиеся в рипе – скопировать в папку pic.

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

Теперь необходимо приступить к редактированию файлов template.php

и index.css. Для этого открываем сначало файл template.php с помощью блокнота, и прописываем в строчке «<link rel="stylesheet" type="text/css" href="style.css" media="all">» путь к таблице стилей index.css. Для этого необходимо поменять «href="style.css"» на «href="/index.css"».

После чего меняем строчку «<title>Уроки Фотошоп</title>» на

«<title><?=$title?></title>», так как в файле index.php уже прописано, что переменная «$site_name = " Уроки Фотошоп ";», а переменная «$title = $site_name;», поэтому надо просто подставить переменную <?=$title?> между

34

тегами <title> и </title>.

Теперь нужно указать путь к изображениям. Для этого воспользуемся функцией AkelPad, которая называется «заменить». Чтобы ей воспользоватся надо зайти в найти, там заменить.

В строчку «Что:» пишем «src="», а в строчку «Чем:» нужно написать

«src="/pic/».

После чего надо нажать на «Заменить все», после чего выскачит сообщение, что заменено N-ое, количество объектов.

Таким же образом надо заменить пути к рисункам, которые находятся в файле index.css, только в строке «Что:» нужно указать «url('», а в строке «Чем:»

- «url('/pic/».

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

и вводим в адресной строке «http://uchoba.israps/» и на экране появится учебник.

Надо приступить к редактированию файла template.php.

Открываем его программой Adobe Dreamweaver(рис.3.11.), для удобства надо поставить режим Split, при котором видно и код и визуальный редактор.

Рисунок 3.11. – Adobe Dreamweaver

35

Для начала надо отредактировать верхнее меню, для этого нужно найти строчки:

<li><a href="http://localhost/wp/">?????</a></li>

<li class="page_item page-item-8"><a href="http://localhost/wp/?page_id=8" title="Звездный Гороскоп">Звездный Гороскоп</a></li>

<li class="page_item page-item-2"><a href="http://localhost/wp/?page_id=2" title="Обо мне">Обо мне</a></li>

И заменить их на:

<li><a href="/">Главная</a></li>

<li class="page_item page-item-8"><a href="/lecc/">Видео Уроки

1</a></li>

<li class="page_item page-item-2"><a href="/lec">Видео Урок 2</a></li> <li class="page_item page-item-2"><a href="/lec2">Видео Урок 3</a></li>

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

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

«Видео уроки 1», «Видео уроки 2» и «Видео уроки 3».

Создание дизайна и интерфейса закончено (см. Приложение 3).

36

4.4.6. Наполнение электронного учебника информацией

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

Нужно зайти в папку pages и создать там новый текстовый документ,

назвав его lecc.htm.

После чего необходимо открыть этот документ с помощью Adobe Dreamweawer, после чего взять уже подготовленный текст из любого текстового редактора, к примеру Microsoft Word и вставить в нижнее поле, где находится визуальный редактор, после чего нужно выделять слова «Видео урок N» и с помощью строки link добавлять туда ссылки вида «/lecN/» где N –

номер видео уроков по счету. Получится следующее:

Нужно сохранить документ и посмотреть результат:

Точно так же нужно добавить страницу «Видео урок 2» (lec.htm).

Далее нужно приступить к добавлению самих уроков.

Для этого нужно создать файл в папке pages с именем lec1.htm, а так же папку lec1 в директории pic, куда будут скидываться все изображения,

находящиеся на странице.

5.Требования к электронному учебнику

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

Разрабатываемый учебник должен обладать следующими функциями: -Работать под управлением ОС Windows XP,7,8.

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

6.Результаты тестирования

Тестирование производилось под управлением операционной системы

Microsoft Windows XP и Windows 8 в двух самых распространённых

37

браузерах: - Internet Explorer и Opera, а так же на мобильном устройстве ZTE

V790.

Ошибок в ходе тестирований выявлено не было.

38

Заключение

В ходе выполнения работы:

•Разработан электронный учебник по графическому редактору

Adobe PhotoShop

Поставленная задача выполнена полностью.

39

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

1.Современные электронные учебные издания. Автор: В.Н. Агеев. Год издания: 2003.

2.Этапы создания электронного учебника. Автор: Е.В. Аленичева. Год издания: 2001.

3.Принципы создания электронных учебников. Авторы: А.Ю. Деревнина,

М.Б. Кошелев, В.А. Семикин. Год издания: 2001.

4.Структура электронного учебника. Автор: В.Л. Иванов. Год издания: 2002.

5.WordPress для профессионалов. Разработка и дизайн сайтов. Авторы:

Уильямс Б., Дэмстра Д., Стэрн Х. Год издания: 2014.

6.Разработка компьютерных учебников и обучающих систем. Авторы:

А.И. Башмаков, И.А. Башмаков. Годи издаия: 2003.

7.Электронные мультимедийные учебники и энциклопедии Автор: С.А.

Христочевский. Год издания: 2000.

8.Положение о выпускной квалификационной работе (дипломной работе) Авторы: Р.А. Сахипова, Е.Н. Дрепа. Год издания: 2005.

9.Создание Web-страниц с помощью языка электронная модель

школьного учебника HTML. Автор: Е.В. Давыдова. Год издания: 2000. 10.Электронный учебник как средство дистанционного обучения. Автор:

С.В. Тевелева. Год издания: 2000.

40