1.2 Разработка структуры проекта и алгоритмов создания
Сайт-учебник создавался в программе Adobe Dreamweaver CS4.
Dreamweaver позволяет создавать большое количество типов страниц. HTML — это тип страницы, который часто используется для создания базовых веб-страниц. Сначала выбираем 2 колонки фиксированной ширины, боковое поле слева, верхний и нижний колонтитул в столбце Макет. Таким образом, получаем шаблон сайта.
Далее надо приготовить весь теоретический материал, видеоуроки и картинки, которые будем вставлять в сайт – учебник.
Начинаем заполнять этот шаблон. В верхнем колонтитуле будет находится «шапка сайта», в которой описано название сайта. В боковом поле слева находится кнопка «Главная», а также «Оглавление», они предназначены для удобного и быстрого перехода на нужные разделы. В боковом поле справа будет находится текст, картинки, видеоуроки на данную тему. А на нижнем колонтитуле находятся инициалы создателя.
Структура электронного учебника представлена на рисунке 1.1
Рисунок 1.1 - Структура электронного учебника
В ходе проделанной работы был выполнен следующий алгоритм:
-
Установка программ
-
Разработка дизайна проекта
-
Сбор информации из разных учебников и источников
-
Обработка информации
-
Создание гиперссылок.
В
начале были установлены следующие
программы: ABBYY
Fine
Reader
10 (рисунок 1.2), ADOBE
Dreamweaver
CS4
(рисунок 1.3) и Adobe
Photoshop
CS5
(рисунок 1.4).
Рисунок 1.2 - Установка программы ABBYY Fine Reader 10
Рисунок 1.3 - Установка программы Adobe Dreamweaver CS4
Рисунок 1.4 - Установка программы Adobe Photoshop CS5
Был отсканирован учебник Adobe Illustrator CS4.Официальный учебный курс (рисунок 1.5).
Рисунок 1.5 – Учебник Adobe Illustrator CS4.Официальный учебный курс
Затем вся обработанная информация вставлялась в электронный учебник и создавались гиперссылки (рисунок 1.6).
Рисунок 1.6 – Создание гиперссылок
1.3 Описание программной реализации
-
Обработка текста
В электронном учебнике по Adobe Illustrator CS4 собран полный курс обучения по начальным главам. Были сделаны скриншоты данного учебника и взято много дополнительной информации из разных источников. Для преобразования скринов в текст была использована программа ABBYY FineReader 10 Professional. Открываем изображение в данной программе (рисунок 1.7) и начинаем преобразовывать (рисунок 1.8). Далее весь текст приводился к общему стилю и размеру.
Рисунок 1.7 – Вставка изображения в программу FineReader
Рисунок 1.8 - Преобразование скриншота в текст
1.4 Создание электронного учебника
В сайте используется шаблонный макет (рисунок 1.9), который был дополнен цветовой гаммой. В шапку сайта было вписано название сайта. На главной странице расположен фирменный знак Adobe Illustrator (рисунок 1.10).
Рисунок 1.9 – Использование шаблонного макета
Рисунок 1.10 – Главная страница сайта
Adobe Dreamweaver CS4 – это мощный редактор по созданию сайтов. Очень многие профессиональные разработчики создают свои ресурсы именно в Adobe Dreamweaver. Однако, это не означает, что программа очень сложная и не подходит начинающим веб-дизайнерам. Как раз наоборот, делать свои первые сайты лучше именно в Adobe Dreamweaver. Лучше изначально привыкать пользоваться качественными продуктами.
Adobe Dreamweaver – это:
-поддержка трех режимов (визуальный редактор, код и смешанный режим);
-полная справочная информация о создании сайта;
-быстрый просмотр страниц в реальном браузере;
-множество готовых шаблонов сайтов;
-готовые шаблоны каскадных таблиц и стилей css;
-полная интеграция с другими продуктами Adobe ;
-русский интерфейс программы.