Информационные технологии в деятельности суда. Часть 1: Программные средства разработки Web-страниц и презентаций

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

Москва
2016

Учебное пособие

Под редакцией д-ра тех. наук, профессора
Д.А. Ловцова

ИнформАцИонные техноЛогИИ 
в ДеятеЛьностИ сУДА
 
ЧАсть I

ПрогрАммные среДствА рАзрАботкИ 
Web-стрАнИц И ПрезентАцИй

р. с. борисов,  
в. т. королёв, 
А. м. Черных,

А в т о р ы :

Борисов Р. С., канд. тех. наук, доцент кафедры информационного права, 
информатики и математики РГУП;
Королёв В. Т., канд. тех. наук, профессор кафедры информационного 
права, информатики и математики РГУП;
Черных А. М., канд. тех. наук, доцент кафедры информационного права, 
информатики и математики РГУП.

Р е ц е н з е н т ы:

Дементьев В. А., д-р тех. наук, профессор Института точной механики 
и вычислительной техники им. С. А. Лебедева РАН;
Мишин А. В., канд. тех. наук, доцент, зав. кафедрой правовой информатики, информационного права и естественнонаучных дисциплин РГУП.

Борисов Р.С., Королёв В.Т., Черных А.М. 
 Информационные технологии в деятельности суда. Часть 1: Программные средства 
разработки Web-страниц и презентаций: Учебное пособие / Под ред. Д. А. Ловцова. 
М.: РГУП, 2016.

ISBN 978-5-93916-530-3

В учебном пособии рассмотрены теоретические вопросы и определены практические основы работы по созданию и редактированию информационных ресурсов в сетях 
передачи данных с помощью стандартизированного языка разметки документов HTML 
и формального языка описания внешнего вида документов CSS. В учебном пособии 
на простых и доступных примерах приводится последовательность работы по созданию 
и редактированию html-страниц, приведены образцы выполнения контрольных заданий, а так же задания для самостоятельной работы.
Приведены практические рекомендации по созданию презентационной поддержке 
публичных выступлений и докладов средствами MS PowerPoint.
Пособие предназначено для студентов, обучающихся по специальности 40.02.03 — 
Право и судебное администрирование, а также обучающихся по направлениям подготовки: «Юриспруденция», «Менеджмент», «Экономика» при изучении информационных дисциплин. Может быть полезным для студентов магистрантов, аспирантов и преподавателей предметов в области «Юриспруденции», «Менеджмент», «Экономика».

 
© Борисов Р. С., Королёв В. Т., Черных А. М., 2016
 
©  Российский государственный университет правосудия, 2016

И 74 

УДК  687.518
ББК  32
И  74

ISBN 978-5-93916-530-3

Содержание

 

Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Раздел 1. Основы создания Web-страниц
1.1. Основные понятия в области создания Web-страниц. . . . . . . . . . . . . . . . 5
1.2. Структура HTML-документа. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3. Форматирование шрифта HTML-документа. . . . . . . . . . . . . . . . . . . . . . 12
1.4. Создание простых списков . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
1.5. Вложенные списки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
1.6. Ссылки на файлы и сайты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
1.7. Вставка объектов и работа с цветовым оформлением HTML- 
документа. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
1.8. Создание таблиц, вставка звука и видео.. . . . . . . . . . . . . . . . . . . . . . . . . . 31
1.9. Контрольная работа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
1.10. Введение в CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
1.11. Работа со шрифтами . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Раздел 2. Разработка презентаций
2.1. PowerPoint. Общая характеристика . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
2.2. Режимы просмотра презентации . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
2.3. Настройка интерфейса PowerPoint. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
2.4. Общее оформление слайдов презентации . . . . . . . . . . . . . . . . . . . . . . . . 63
2.5. Разработка структуры презентации . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
2.6. Разработка образца слайдов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
2.7. Разработка слайдов презентации . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
2.8. Управление показом презентации . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

Приложение 1. Алгоритмы решения вычислительных задач. . . . . . . . . . . . . . . . . 144

Приложение 2. Элементы статистического анализа числовой информации. . . . 148

Литература . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

ВВедение

 

ГлВведение
Развитие технологий переработки информации и систем управления 
документооборотом позволяет следить за качеством перерабатываемой 
информации. Совершенствование технологии управления документами и электронными текстовыми файлами привело к появлению 
систем управления контентом (content management system, CMS). Особенностью подобных систем является то, что они состоят из отдельных 
элементов и обобщают в цифровом «документе» данные различного 
формата, текст, графику, видео, аудио и мультимедиа. В качестве синонима content management нередко используют термин Web content 
management. В государственных и частных организациях, обрабатывающих большие информационные массивы, используются системы 
управления информационными ресурсами предприятия (enterprise 
content management, ECM). К наиболее распространенным технологиям 
управления корпоративной информацией можно отнести программные 
продукты по обработке информации в сети Интернет и программы 
по представлению информации для коллективного использования. 
Функционально системы управления контентом позволяют предоставлять авторам и пользователям удобные и привычные средства создания 
контента. Хранить контент в едином репозитории, отслеживать версии 
документов, контролировать доступ пользователей, интеграцию с другими информационными системами и управление потоком документов. Публиковать — автоматически размещать контент по требованию 
пользователя. Представлять дополнительные функции, позволяющие 
улучшить форму представления данных.

раздел 1.
основы создания Web-страниц

 
1.1. основные понятия в области 
создания Web-страниц

Чтобы опубликовать документ в глобальной сети Интернет достаточно поместить его на сервер, постоянно подключенный к Интернет 
и способный общаться с другими серверами с помощью протокола передачи гипертекстов (HyperText Transfer Protocol, или http://). Совокупность таких серверов получила название «всемирной паутины» (World 
Wide Web, или WWW).
Разработку документов, однако, можно проводить и на компьютере, 
не имеющем выхода в Интернет.
Что такое HTML? Термин HTML (HyperText Markup Language) означает «язык маркировки гипертекстов». Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц 
Тим Бернерс-Ли.
Для создания HTML документа нам потребуется:
• любой браузер, т. е., программа, пригодная для просмотра HTMLфайлов, например, Internet Explorer;
• любой редактор текстовых файлов, например Блокнот.
Мы будем использовать текстовый редактор для подготовки HTMLфайлов, а браузер как инструмент контроля за сделанным.
Один и тот же *.html-файл может быть одновременно открыт и в Блокноте, и в Internet Explorer. Сохранив изменения в Блокноте, просто нажмите кнопку «Обновить» в Internet Explorer, чтобы увидеть эти изменения реализованными в HTML-документе.
После того, как вы приобретете первичные навыки создания страниц, вы сможете подобрать себе редактор HTML-документов: Adobe 
Dreamweaver, Microsoft FrontPage, AkelPad, Macromedia HomeSite, Bluefish, 
Notepad++, Microsoft Office SharePoint Designer, либо любой иной.

Раздел 1. 
Основы создания Web-страниц

1.2. Структура HTML-документа

HTML-документ это просто текстовый файл с расширением *.html 
или *.htm (Unix-системы могут содержать файлы с расширением *.htmll).

Задание

Создадим простой HTML-документ, для этого:
1. Запустите Блокнот и введите в новый документ текст, представленный ниже между пунктирными линиями
ПРИМЕЧАНИЕ. Отступы в тексте сделаны для удобства чтения, 
при разработке документа их делать необязательно.
———————————————————————————————————————————————
<html> 
     <head> 
          <title> 
               Пример 1. Андрей Петров, 3  группа 
<!-- Естественно, Вы должны вставить сюда свои собственные данные -->
          </title>
     </head> 
     <body> 
          <H1> 
               Привет! 
          </H1> 
          <P> 
               Это простейший пример HTML-документа. 
          </P> 
          <P> 
               Этот *.html-файл может быть 
               одновременно открыт и в Блокноте, и в Internet Explorer. 
               Сохранив изменения в Блокноте, просто нажмите
               кнопку «Обновить» в Internet Explorer или F5,
               чтобы увидеть эти изменения реализованными 
               в HTML-документе. 
          </P> 
     </body> 
</html>
———————————————————————————————————————————————

1.2. Структура HTML-документа 
 

2. Сохраните этот файл с именем «Пример1.html» в папке со своим 
именем. Для этого выберите команду «Сохранить как…». В открывшемся 
окне папок выберите папку со своим именем. Если такой папки еще нет, 
создайте ее. В поле имени файла введите Пример1.html, а в поле тип файла выберите «все файлы».
3. Нажмите «Ок».
Теперь посмотрим что получилось.
4. Не закрывая «Блокнот», откройте папку со своим именем и дважды 
щелкните по файлу Пример1.html.
Если в результате вы видите окно, подобное представленному на рис. 
1.1, значит, вы все сделали правильно.

Рис. 1.1.
ПРИМЕЧАНИЕ. Если текст в окне браузера отличается от приведенного на рис. 1.1, значит, вы допустили какую-то ошибку. Проверьте введенный текст еще раз.
Как видно из примера, вся информация о форматировании документа 
сосредоточена в его фрагментах, заключенных между знаками «<» и «>». 

Раздел 1. 
Основы создания Web-страниц

Такой фрагмент (например, <html>) называется меткой (по-английски — 
tag, читается «тэг»).
Большинство HTML-меток парные, т. е. на каждую открывающую 
метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, 
но с добавлением «/».
Метки можно вводить как заглавными (большими), так и строчными (маленькими) буквами. Например, метки <body>, <BODY> и <Body> 
будут восприняты браузером одинаково.
Многие метки, помимо имени, могут содержать атрибуты — элементы, 
дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно познакомимся с атрибутами позже.

Метки <HTML>… </HTML>

Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.

<HEAD>… </HEAD>

Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <title> ниже), в этот 
раздел может включаться множество служебной информации, о которой 
мы обязательно поговорим чуть позже.

<TITLE>… </TITLE>

Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Internet Explorer, например, показывает 
название текущего документа в названии вкладки и печатает его в левом 
верхнем углу каждой страницы при выводе на принтер. Рекомендуется 
название не длиннее 64 символов.

<BODY>… </BODY>

Эта пара меток указывает на начало и конец тела HTML-документа, 
которое (тело), собственно, и определяет содержание документа.

<H1>… </H1> — <H6>… </H6>

Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня самый крупный, шестого уровня, соответственно, — самый мелкий.

1.2. Структура HTML-документа 
 

<P>… </P>

Такая пара меток описывает абзац. Все, что заключено между <P> 
и </P>, воспринимается как один абзац.
Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN 
(читается «элайн», от англ. «выравнивать»), например:
<H1 ALIGN=CENTER> Выравнивание заголовка по центру </H1>
или <P ALIGN=RIGHT> Образец абзаца с выравниванием по правому краю</P>

Задание

Дополним наш пример новыми элементами.
1. Откройте в Блокноте файл Пример1. (Браузер закрывать не надо). 
Для этого щелкните правой кнопкой мыши на значке файла «Пример1.
html», выберите пункт «Открыть с помощью…» и далее выберите «Блокнот», щелкнув по нему левой кнопкой мыши.
ПРИМЕЧАНИЕ. В том случае, если среди списка программ, открывающегося в пункте «Открыть с помощью…» нет «Блокнота», то можно 
поступить следующим образом. Запустите «Блокнот» (например Пуск → 
Все программы → Стандартные → Блокнот) и перетащите мышью значок 
файла «Пример1.html» в открытое окно «Блокнота».
2. Добавим перед закрывающей меткой </body> такой текст:
———————————————————————————————————————————————
<H1 ALIGN=CENTER> Еще раз привет! </H1> 
<H2> Это чуть более сложный пример HTML-документа </H2> 
<P> Теперь мы знаем, что абзац можно выравнивать не только влево, 
</P> 
<P ALIGN=CENTER> но и по центру </P> 
<P ALIGN=RIGHT> или по правому краю.</P> 
———————————————————————————————————————————————
3. Выполните команду «Сохранить» из меню «Файл» в «Блокноте», 
перейдите в окно браузера и нажмите в нем кнопку обновить (или F5).
Посмотрите на получившийся результат.
ПРИМЕЧАНИЕ. Если в окне браузера у вас видны теги, значит вы допустили какую-то ошибку. Проверьте введенный текст еще раз.
Теперь Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца.
Попробуем улучшить наш документ. Начнем с малого — с абзаца.

Раздел 1. 
Основы создания Web-страниц

Непарные метки

Рассмотрим метки, которые не имеют пары, а некоторые (так называемые &-последовательности) к тому же должны вводиться только прописными (маленькими) буквами.

<BR>

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

Задание

1. Добавьте к нашему документу перед меткой </body> следующий текст: 
———————————————————————————————————————————————
<H1 ALIGN=CENTER > Пушкин</H1> 
<H2 ALIGN=CENTER > Стих</H2> 
<H3 ALIGN=CENTER > отрывок</H3> 
<P ALIGN=CENTER > У Лукоморья дуб зеленый, <BR>
Златая цепь на дубе том, <BR>
И днем, и ночью кот ученый <BR>
Все ходит по цепи кругом. </P>
———————————————————————————————————————————————
2. Обновите окно браузера, оцените результат.

<HR>

Метка <HR> описывает горизонтальную линию
Метка может дополнительно включать атрибуты SIZE (определяет 
толщину линии в пикселах) и/или WIDTH (определяет размах линии 
в процентах от ширины экрана).
Список атрибутов этой метки представлен в таблице:

Атрибут
Назначение

ALIGN
Выравнивает по краю или центру; имеет значения LEFT, 
CENTER, RIGHT

WIDTH
Устанавливает длину линии в пикселах или процентах от ширины окна браузера; в последнем случае добавляется символ %

SIZE
Устанавливает ширину линии в пикселах

NOSHADE
Отменяет рельефность линии

1.2. Структура HTML-документа 
 

COLOR
Указывает цвет линии; используется наименование цвета 
или шестнадцатеричный код

3. Добавим теперь к нашему документу перед меткой </body> небольшую коллекцию горизонтальных линий:
———————————————————————————————————————————————
<H1 ALIGN=CENTER> Коллекция горизонтальных линий </H1> 
<HR SIZE=2 WIDTH=100%><BR> 
<HR SIZE=4 WIDTH=50%><BR> 
<HR SIZE=8 WIDTH=25%><BR> 
<HR SIZE=16 WIDTH=12%><BR> 
———————————————————————————————————————————————
4. Получившийся результат покажите преподавателю.
Внешний вид окна браузера, при правильном выполнении задания 
представлен на рис. 1.2.

Рис. 1.2.