Электронный учебник по языкам программирования С++

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

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

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

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

Теперь надо изменить оставшуюся желтую область. Для этого надо выбрать  инструмент градиент и настроить его.

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

Потом делается надпись «электронный учебник» с помощью инструмента  текст.

Выбирается размер и шрифт  надписи.

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

Получилась готовая шапка.

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

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

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

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

Надо открыть файл с  помощью этого блокнота, и изменить в строчке «<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, т.е. изменить его расширение, тем самым подставив его под файл уже имеющегося «движка».

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

$site_name = "site_name";

$root = "/"; // Корневой каталог. В начале и в конце должны быть слеши. Примеры "/", "/forum/", "/about/forum/"

$content_dir = "content";

$last_count = 8;

$last_symbol_count = 200;

$category_type = 1; // Тип меню. 1 - один уровень, 2 - два уровня 

$url_menu = "menu "; // Название  страницы меню

$url_contact = "contact "; // Название  страницы контактов

$url_print = "print_cond"; // Версия для печати

На:

$site_name = "Учебник по  ИСРАПС";

$root = "/"; // Корневой каталог.  В начале и в конце должны  быть слеши. Примеры "/", "/forum/", "/about/forum/"

$content_dir = "content";

$last_count = 8;

$last_symbol_count = 200;

$category_type = 1; // Тип меню. 1 - один уровень, 2 - два уровня 

$url_print = "print"; // Версия  для печати

Строчки «$url_menu = "menu "; // Название страницы меню» и «$url_contact = "contact "; // Название страницы контактов» убираем вообще, так как они  нам не нужны.

Работа с файлом index.php завершена, нужно закрыть его.

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

Название диска, назначенного на сервер:\home\israps\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 с помощью AkelPad, и прописываем в строчке «<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?> между тегами <title> и </title>.

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

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

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

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

Надо проверить все  ли нормально, для этого открываем  любой браузер, и вводим в адресной строке «http://uchoba.israps/» и на экране появится учебник.

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

Открываем его программой Macromedia Dreamweawer, для удобства надо поставить  режим Split, при котором видно и  код и визуальный редактор.

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

<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="/lab/">Лабораторные работы</a></li>

<li class="page_item page-item-2"><a href="/lec">Лекции</a></li>

<li class="page_item page-item-2"><a href="/test">Тест</a></li>

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

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

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

<h1 class="title"><a href="http://localhost/wp/?p=10">фывфы</a></h1>

Январь 15, 2011

<p>ф</p>

<div class="postinfo">

<div class="alignleft">Автор 123</div>

<div class="alignright"><a href="http://localhost/wp/?p=10#comments">Комментарии (0</a>)</div>

</div>

</div>

<div class="post">

<h1 class="title"><a href="http://localhost/wp/?p=1">Привет, мир!</a></h1>

Январь 10, 2011

<p>Добро пожаловать  в WordPress. Это ваша первая запись. Отредактируйте или удалите её, затем пишите!</p>

<div class="postinfo">

<div class="alignleft">Автор 123</div>

<div class="alignright"><a href="http://localhost/wp/?p=1#comments">Комментарии (1</a>)</div>

</div>

На:

<p align="center"><img src="/pic/hi.gif"></p>

<p>Добро пожаловать  в учебник по дисциплине "Инструментальные  средства разработки аппаратно-программных  систем".</p>

Где «img src="/pic/hi.gif"» - вывод  приветственной картинки.

Далее нужно поставить  строчки:

<p align="center"><img src="/pic/hi.gif"></p>

<p>Добро пожаловать  в учебник по дисциплине "Инструментальные  средства разработки аппаратно-программных  систем".</p>

Между переменными <? if (!$params[1]) { ?> и <? } ?>, где переменная (!$params[1]) значит, что вывод текста будет только на главной странице учебника.

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

<? if ($params[1]) { ?><?=$content?>

<p><a href="<?=$root?><?=$url_print?>/<? if ($params[1]) echo ($params[1]."/"); ?><? if ($params[2]) echo ($params[2]); ?>">Версия для печати &raquo;</a></p><? } ?>

Где: <? if ($params[1]) { ?> - переменная, отвечающая за вывод внутренних страниц учебника.

<?=$content?> - вывод текста  из файлов, которые будут храниться  в папке pages.

><a href="<?=$root?><?=$url_print?>/<? if ($params[1]) echo ($params[1]."/"); ?><? if ($params[2]) echo ($params[2]); ?>">Версия для печати &raquo;</a> - Вывод версии для печати.

Теперь нужно создать  анимированный файл hi.gif, для этого  заходим в программу Adobe ImageReady, которая  предоставляется в комплекте  с Adobe Photoshop.

Нужно создать изображение, размером 500px в ширину и 100px в высоту, залить его градиентом, который уже использовали при создании шапки и остальных элементов учебника и добавить две записи - «Добро пожаловать» и «Инструментальные средства разработки аппаратно-программных систем», после чего разместить их на одном уровне.

После этого нужно сделать  слой с надписью «Добро пожаловать»  прозрачным с помощью инструмента Opacity, установив значение 0%, это позволит сделать анимацию появления записи.

Первый кадр готов, теперь нужно создать 2 кадр и установить значение Opacity для слоя с надписью «Инструментальные средства разработки аппаратно-программных систем» равным 90%.

Далее нужно создать 3 кадр, установить Opacity на 80% и т.д., пока значение Opacity не будет равным 0%, т.е. слой с  надписью «Инструментальные средства разработки аппаратно-программных  систем» не исчезнет.

После этого необходимо создать  еще 1 такой же кадр, чтобы смена  надписей не проходила слишком быстро.

После проделанного, нужно  поставить значение Opacity 10% для слоя с надписью «Добро пожаловать», после  чего она расплывчатая появится на изображении.

Далее нужно устанавливать  значение Opacity по наростающей, т.е. 20%, 30% и т.д., пока значение не дойдет 100%, продублировать кадр и снова пустить значение Opacity на убыль, т.е. 90%, 80% и т.д.

Когда Opacity дошло до 0% нужно  продублировать кадр и снова сделать Opacity от 10% до 100% для слоя с надписью «Инструментальные средства разработки аппаратно-программных систем».

После этого нужно сохранить  изображение.

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

После чего нужно выбрать  меню «File», и в нем «Save optimized as…».

В открывшемся меню сохранения нужно ввести в строке «Имя файла» название изображения hi.gif, в строке «Тип файла» - «Images only (*.gif)», и нажать кнопку «Сохранить».

Анимированное изображение  готово, теперь нужно скопировать  его в папку pic, которая находится  в папке uchoba на локальном сервере.

Смотрим, что получилось с учебником:

Теперь нужно поменять правое меню, для этого опять воспользуемся  программой Macromedia Dreamweawer.

Находим в коде строчки, которые  отвечают за вывод правого меню:

<h2>Страницы</h2>

<ul>

<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>

</ul>

</li>

<li class="categories"><h2>Категории</h2><ul>

<li class="cat-item cat-item-3"><a href="http://localhost/wp/?cat=3" title="Просмотреть все записи в рубрике «Кисель»">Кисель</a>

</li>

…

<ul>

<li><a href="http://localhost/wp/wp-login.php">Войти</a></li>

<li><a href="http://wordpresse.ru/">Wordpress</a></li>

</ul>

</li>

</ul>

И меняем их на код, который  будет отображать все темы по предмету:

<li>

<h2>Темы (I семестр)</h2>

<ul>

<li class="page_item page-item-8"><a href="/tema1/">Тема 1: Основные классы  задач в области конструирования  и производства аппаратно-программных  систем, решаемых с использованием  пакетов прикладных программ.</a></li><br>

…

<li class="page_item page-item-2"><a href="/tema5/">Тема 5: Принципы работы  пакетов прикладных программ  для разработки аппаратно-программных  систем. Информационное моделирование.  Работа с пакетами Erwin, Design/IDEF.</a></li><br>