Учебник Информатика 11 класс Заборовский Пупцев

На сайте Учебники-тетради-читать.ком ученик найдет электронные учебники ФГОС и рабочие тетради в формате pdf (пдф). Данные книги можно бесплатно скачать для ознакомления, а также читать онлайн с компьютера или планшета (смартфона, телефона).
Учебник Информатика 11 класс Заборовский Пупцев - 2014-2015-2016-2017 год:


Читать онлайн (cкачать в формате PDF) - Щелкни!
<Вернуться> | <Пояснение: Как скачать?>

Текст из книги:
Г. А. Заборовский А. Е. Пупцев Учебное пособие для 11 класса общеобразовательных учреждений с русским языком обучения Допущено Министерством образования Республики Беларусь Минск «Народная асвета» 2010 Образовательный портал www.adu.by/ Национальный институт образования УДК 004(075.3=161.1) ББК 32.81я721 З-41 Авторы: Г А. Заборовский (главы 1, 2), А. Е. Пупцев (главы 1, 3, 4) Рецензенты: кафедра информатики и компьютерного моделирования Гродненского государственного университета имени Янки Купалы (канд. пед. наук, доцент Н. П. Макарова); старший преподаватель кафедры естественнонаучных дисциплин и информационных технологий Минского областного института развития образования А. А. Буславский Заборовский, Г. А. З-41 Информатика : учеб. пособие для 11-го кл. общеобразоват. учреждений с рус. яз. обучения / Г. А. Заборовский, А. Е. Пупцев. — Минск : Нар. асвета, 2010. — 150 с. : ил. ISBN 978-985-03-1370-6. УДК 004(075.3=161.1) ББК 32.81я721 ISBN 978-985-03-1370-6 © Заборовский Г А., Пупцев А. Е., 2010 © Оформление. УП «Народная асвета», 2010 Образовательный портал www.adu.by/ Национальный институт образования От авторов Уважаемые школьники! В одиннадцатом классе Вы продолжите углублять свои знания в области информационных технологий, основ алгоритмизации и программирования. В первой главе пособия Вы познакомитесь с инструментами и методами веб-конструирования, изучите основы языка разметки гипертекстовых документов HTML, познакомитесь с особенностями подготовки графики для сети Интернет, научитесь создавать веб-сайты. Во второй главе будет продолжено изучение основ алгоритмизации и программирования. Полученные ранее знания и умения Вы научитесь применять для решения практических задач из различных предметных областей. Третья глава посвящена обработке информации в системах управ -ления базами данных. Четвертая, заключительная, глава завершает знакомство с информационными системами и технологиями. Вопросы, отмеченные знаком ^^, предназначены для закрепления изученного материала. Дополнительный материал для любознательных отмечен знаком ^^. После параграфов предлагаются упражнения, которые позволят Вам закрепить свои знания и практические умения работы на компьютере. Желаем успехов в изучении информатики и информационных технологий. Хорошие знания помогут Вам выбрать профессию и приносить пользу Родине. Образовательный портал www.adu.by/ Национальный институт образования ГЛ/А 1 ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ § 1. Представление о веб-конструировании 1.1. Инструменты и методы разработки веб-сайтов Большинство информационных ресурсов сети Интернет представлено в виде веб-страниц, которые объединяются в веб-сайты. Благодаря развитию телекоммуникационных технологий размещенная на веб-страницах информация доступна множеству людей. В отличие от информации на бумажных носителях, например книг, она может оперативно изменяться и практически мгновенно доставляться в любое место по запросу пользователя. Для создания веб-страниц используется язык разметки гипертекстовых документов HTML (HyperText Markup Language). В качестве инструментов веб-конструирования могут использоваться офисные программы, например входящие в состав Microsoft Office (Word, PowerPoint), которые не являются специальными средствами разработки веб-страниц. Лучших результатов можно достичь, используя специальные программы — веб-редакторы, например Microsoft FrontPage. Выделяют две основные группы методов и соответствующих инструментов разработки веб-сайтов: визуальные и ручные (программные). Визуальные методы позволяют производить все работы по созданию вебстраниц с высокой степенью автоматизации и не требуют знания языка разметки HTML. Они уменьшают трудоемкость и сроки разработки сайта. Суть визуальных методов отражена в принципе WYSIWYG (от англ. What you see is what you get — Что видишь, то и получаешь). Разработано немало специальных инструментов — редакторов визуального конструирования. Наиболее известными являются Microsoft FrontPage, Adobe (Macromedia) Dreamweaver, NamoWebEditor и др. С помощью таких редакторов веб-страницы создаются (рисуются) в интерактивном режиме, при этом автоматически генерируется соответствующий HTML-код, который представляет собой набор команд языка разметки HTML. Отметим, что упомянутые редакторы позволяют выполнять все работы по созданию сайта без непосредственного подключения к сети Интернет, или, как говорят, в режиме оффлайн (offline). Затем созданный веб-сайт публикуется в сети Интернет, т. е. размещается на вебсервере. Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 5 В последнее время для конструирования и сопровождения веб-сайтов используются системы управления их содержимым (контентом) — CMS {Content Management System), которые предоставляются специальными платными или бесплатными службами. Системы CMS представляют собой своего рода конструкторы. Они позволяют создавать сайт в режиме непосредственного подключения к сети, или онлайн (online), и сопровождать его в дальнейшем. При создании структуры сайта и разработке навигации по нему в системе CMS также не требуется знаний языка HTML. Из бесплатных систем CMS наиболее популярны Joomla! (https://joomla.ru/) и Drupal (https://www.drupal.ru). Конечно, трудно создать хороший сайт, не зная основ языка разметки HTML. Для работы с HTML-кодом могут использоваться специальные инструменты разработки, позволяющие набирать команды HTML вручную, например редакторы HotDog, Adobe HomeSite и др. Эти инструменты облегчают ввод и редактирование кода. Однако, вводить основные команды (теги) языка HTML можно даже в простейшем текстовом редакторе Блокнот, а просматривать результаты работы можно с помощью браузера. Важную роль в выборе инструментов и методов веб- конструирования играет статичность или динамичность создаваемых страниц, а также наличие интерактивных элементов. Статические страницы отображаются браузером пользователя в том виде, в каком были созданы и размещены на веб-сервере. Динамические страницы генерируются по запросу пользователя — информация на них загружается серверными программами из баз данных. Такие базы данных обычно содержат информацию, которая требует постоянного обновления. Например, интернет-магазин пополняется сведениями о новых товарах и изменяющихся ценах. Интерактивные (т. е. управляемые пользователем) элементы веб-страниц используются для ввода пароля, выбора товара, оценки его качества, ввода ответа при тестировании или голосовании, для формирования запроса на поиск информации в удаленной базе данных и т. п. Кроме языка разметки гипертекстовых документов HTML, при создании веб-сайтов используют и специальные языки веб-программирования. Широкое применение получил язык сценариев Java Script. Написанные на нем конструкции, или скрипты, вставляются непосредственно на веб-страницы и интерпретируются браузером. Они используются для создания отдельных, как правило, интерактивных элементов веб-страниц, например динамических меню, часов, календарей, форм запросов, счетчиков посещений страниц, систем голосования и т. п. Для серверного программирования наиболее Образовательный портал www.adu.by/ Национальный институт образования Глава 1 часто используют языки PHP (от англ. Hypertext Preprocessor — препроцессор гипертекста), PERL (от англ. Practical Extraction and Report Language — практический язык для извлечения данных и составления отчетов). 1. В чем разница между визуальными и ручными методами веб-конструирования? 2. Какие инструменты могут использоваться при создании веб-сайтов? 3. Какие страницы называют статическими? Динамическими? 1.2. Проектирование сайта Выделяют следующие основные этапы разработки веб-сайтов: определение тематики сайта, его целей и задач; проектирование структуры сайта, определение разделов и связей между страницами; разработка дизайна сайта, т. е. стиля оформления страниц; подготовка материалов (текстов и графики) для размещения на веб-страницах; конструирование страниц сайта (создание HTML-кода); размещение в сети (публикация) и тестирование сайта. Рассмотрим на примере, как спроектировать веб-сайт кинотеатра. Определим основную цель сайта: привлечение зрителей, и задачи: информирование о репертуаре кинотеатра, реклама фильмов. Разработку проекта начнем с построения информационной модели сайта. Пусть для простоты наш первый сайт будет состоять из четырех веб-страниц. Структуру этого сайта для наглядности изобразим в виде двухуровневой схемы (рис. 1.1). Рис. 1.1 Образовательный портал www.adu.by/ Национальный институт образования 6 Основы веб-конструирования Название фильма Фрагмент фильма (фотография) Жанр Режиссер Актеры Студия, год Краткое содержание Рис. 1.2 На первом (верхнем) уровне схемы изобразим первую (главную) веб-страницу. На ней будут размещены: общая информация о кинотеатре (например, фотография, адрес) и гиперссылки. На втором уровне схемы изобразим веб-страницы, посвященные фильмам определенных жанров, например «Драмы», «Комедии», «Детективы». Они имеют схожую структуру и будут отличаться лишь содержанием (рис. 1.2). Структура сайта в дальнейшем может быть усложнена добавлением страниц последующих уровней, например страниц, посвященных актерам, режиссерам, сценаристам, композиторам и т. п. Теперь спроектируем дизайн сайта. Основными структурными элементами оформления веб-страниц являются текстовые блоки (основной текст, заголовки, списки, текстовые гиперссылки) и графические объекты: изображения (рисунки, фотографии, анимации), «обои» (фоновые рисунки), изображения-гиперссылки, разделительные линии. Для размещения элементов в заданных местах страниц будем использовать таблицы. Сочетание свойств элементов веб-страницы определяет стиль ее оформления. Стиль текста задается совокупностью параметров формата: шрифт, размер, начертание; отступы, выравнивание, межсимвольный и междустрочный интервалы и др. Стиль графических элементов задается совокупностью параметров формы: размер, цвет, фактура материала, а также разнообразных эффектов: тень, блеск, прозрачность и т. п. Для стилистически грамотного оформления документов удобно использовать готовые шаблоны — темы. Напомним, что темой называют специально разработанный набор элементов оформления и цветовых схем документа. С помощью темы можно задать стиль оформления как отдельной страницы, так и всего сайта. Темы позволяют задавать стили основного текста, заголовков, гиперссылок, списков; цвет фона; «обои»; цвет и толщину границ таблицы и т. п. Темы предлагаются во всех офисных программах, однако наибольшую пользу приносит их использование при создании презентаций и веб-сайтов. Все страницы одного уровня будем оформлять в едином стиле. Образовательный портал www.adu.by/ Национальный институт образования 7 8 Глава 1 Непосредственное конструирование страниц сайта начнем с подготовки всех его элементов (текстов, рисунков). Затем эти элементы и (или) ссылки на них будем вставлять в готовые шаблоны. Файлы всех страниц веб-сайта будем сохранять в одной папке, например KINO. Это упростит размещение сайта на веб-сервере. В случае большого количества страниц или изображений их следует сохранять во вложенных папках, например KIN0\F0T0\. Файлу главной веб-страницы обычно дают имя index или main с расширением .htm. Только после размещения файлов в папках можно создавать гиперссылки, с помощью которых выполняется навигация по сайту — переходы со страницы на страницу. В нашем примере удобно сначала разработать страницы нижнего уровня, а затем оформить главную страницу и создать гиперссылки для вызова страниц нижнего уровня. Затем следует проверить работу ссылок в режиме оффлайн. Лишь после тщательной проверки и исправления ошибок созданный вебсайт можно опубликовать, т. е. разместить на веб-сервере. 1. Какие этапы можно выделить при разработке веб-сайта? 2. Что понимают под стилем оформления веб-страницы? Упражнение Разработайте проект веб-сайта по одной из тем: Моя семья. Моя школа. Мои друзья. Мои любимые занятия. Моя Родина — Беларусь. Природа родного края. Интересные профессии. § 2. Использование офисных приложений для создания веб-страниц 2.1. Создание веб-страниц в редакторе MS Word Любой документ MS Office можно сохранить в виде веб-страницы. Для этого достаточно выполнить команду Файл ^ Сохранить как веб-страницу. Однако далеко не всякий подготовленный для печати на бумаге документ будет хорошо выглядеть в браузере. Наилучшего результата можно достичь, если с самого начала готовить документ для размещения в сети Интернет. Использование текстового редактора MS Word является одним из самых простых способов разработки веб-страниц. Рассмотрим на примере, как это делается. Начнем со страниц нижнего уровня, а затем оформим главную страницу и создадим гиперссылки. Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования I Рис. 1.3 Пример 1. Создать веб-страницу фильма «Анастасия Слуцкая» (рис. 1.3). Прежде всего с помощью команды Файл ^ Создать выберем пункт Вебстраница (этот пункт можно выбрать и в области задач Создание документа). Затем, выполнив команду Формат ^ Тема, выберем для оформления страницы тему Перетекание (рис. 1.4). Для размещения на странице фотографии и текстов используем таблицу из двух строк и двух столбцов. Объединим ячейки нижней строки. Вставим подготовленные заранее тексты и изображение из файлов. Оформим их в соответствии с рисунком 1.3. Созданный документ сохраним как веб-страницу в папке KINO под именем drama.htm. Выберем тип сохраняемого файла Веб-страница (*.htm; *.html). При этом все используемые в документе изображения будут помещены в отдельную папку с именем веб-страницы и расширением .files (в нашем примере — drama.files). Образовательный портал www.adu.by/ Национальный институт образования 9 t 10 Глава 1 Рис. 1.4 Аналогичным способом создаются страницы других фильмов и жанров, например «Комедии» и «Детективы». Поскольку они имеют сходную структуру и отличаются лишь содержанием, то новые страницы можно получать редактированием уже созданных, заменяя изображения и тексты и сохраняя их под новыми именами. Создадим веб-страницу фильма «В августе 44-го_» (рис. 1.5) на основе уже созданной нами страницы «Анастасия Слуцкая». Сохраним ее под именем avgust44.htm. Пр имер 2. Создать главную страницу сайта кинотеатра «Беларусь» (рис. 1.6), содержащую гиперссылки на страницы фильмов. Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 11 I Рис. 1.5 Рис. 1.6 Образовательный портал www.adu.by/ Национальный институт образования t 12 Глава 1 Для главной страницы сайта используем тему Перетекание. Важный этап разработки веб-страницы кинотеатра — создание гиперссылок, открывающих страницы фильмов. Для размещения гиперссылок создадим таблицу. Для создания текстовых гиперссылок выполним следующие действия: • Выделим текст гиперссылки, например слово «Драмы». на панели • С помощью команды Вставка ^ Гиперссылка или кнопки инструментов выберем пункт Связать с файлом, веб-страницей, выделим имя файла drama.htm и подтвердим выбор нажатием кнопки ОК. Гиперссылки в виде изображений создаются аналогично. Завершив создание главной страницы, не забудем сохранить ее под именем main.htm в той же папке, в которой ранее сохраняли страницы фильмов. По окончании работы просмотрим созданные страницы в браузере. Проверим работу ссылок, переходя по ним на страницы фильмов и возвращаясь на главную страницу с помощью кнопки Назад браузера. Повысить привлекательность веб-страницы можно, разместив на ней динамические и интерактивные элементы (анимации, аудио- и видеофрагменты, формы опросов). При этом следует помнить, что анимации часто отвлекают пользователей от восприятия текстовой информации, а большие размеры аудиовидеофайлов существенно замедляют загрузку страниц. Пр имер 3. Разместить на главной странице сайта кинотеатра «Беларусь» бегущую строку. С помощью команды Вид ^ Панели инструментов активизируем панель Веб-компоненты (рис. 1.7). Нажмем на этой панели кнопку £3. Веб-компоненты Рис. 1.7 б©| е Ф d =1 ш В открывшемся окне Бегущая строка (рис. 1.8) наберем требуемый текст, например «Предлагает!». Сделаем нужные установки: выберем направление движения Справа налево и нажмем кнопку ОК. Сохраним измененную страницу. Редактор MS Word позволяет подключать к веб-странице видео- и звуковые файлы. Для этого необходимо нажатием значка Звук или Фильм на панели Веб-компоненты открыть соответствующее диалоговое окно, нажать кнопку Обзор, найти требуемый видео- или звуковой файл, установить парамет- Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 13 Рис. 1.8 Бегущая строка Леижение; |наскео5ь Цвет фона; Авто -Скорость----------- т I Направление: |Справа напе&о т| т I Число повторов: | Бесконечно > Цедите текст бегущей строки: Предлагает'! 3 d образец Предлагает! ок Отмена ры проигрывания, например количество повторов, и подтвердить выбор нажатием кнопки ОК. 1. Как можно сохранить документ MS Word в виде веб-страницы? 2. С помощью каких действий можно создать гиперссылку? Упражнение Создайте фрагмент сайта по одной из тем: Моя Родина — Беларусь. Моя школа. Мои друзья. Мои любимые занятия. Моя семья (пример главной страницы представлен на рисунке). В качестве гиперссылок используйте картинки из коллекции клипов. Образовательный портал www.adu.by/ Национальный институт образования 14 Глава 1 2.2. Сохранение презентаций PowerPoint в виде веб-страниц Презентация PowerPoint, как правило, содержит несколько слайдов, каждый из которых может быть сохранен как отдельная веб-страница. Всю презентацию можно сохранить как сайт, структура которого будет соответствовать структуре презентации. Пр имер 1. Создать фрагмент сайта на основе презентации «Функциональные блоки компьютера». Откроем в редакторе PowerPoint презентацию «Функциональные блоки компьютера» (файл comp.ppt). Просмотрим ее структуру. Она состоит из 5 слайдов, которые содержат тексты и изображения (рис. 1.9). Для сохранения презентации в виде веб-cтраницы в меню Файл выберем пункт Сохранить как веб-страницу. В появившемся окне Сохранение документа выберем тип сохраняемого файла Веб-страница (*.htm, *.html), введем имя Рис. 1.9 Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 15 Рис. 1.10 файла или оставим прежнее (в нашем примере — comp.htm) и нажмем кнопку Сохранить (рис. 1.10). При использовании предлагаемых по умолчанию настроек все слайды презентации сохранятся в папке comp.files в виде отдельных страниц, которые можно будет пролистывать в правой части окна браузера с помощью гиперссылок. Эти гиперссылки располагаются в левой части сохраненной страницы comp.htm (по умолчанию белого цвета на черном фоне). Изменим эти настройки. С этой целью нажатием кнопки Опубликовать вызовем окно Публикация веб-страницы (рис. 1.11) и настроим параметры веб-документа. В этом окне можно выбрать публикуемые объекты (Полная презентация или Слайды), поддержку браузеров, а также изменить заголовок веб-страницы. По умолчанию как объект для публикации предлагается Полная презентация. В этом случае в виде веб-страниц будут сохранены все слайды. Цветовые схемы, эффекты анимации и другие параметры настраиваются в окне Параметры веб-документа (рис. 1.12), которое вызывается кнопкой Вебпараметры. На вкладке Общие выберем цветовую схему Цвета презентации (выделение). В этом случае фон веб-страниц будет соответствовать фону слайдов презентации. Установленный по умолчанию флажок Добавить панель смены слайдов следует снимать лишь в том случае, когда на слайдах предварительно установлены гиперссылки, указывающие переходы между слайдами. Образовательный портал www.adu.by/ Национальный институт образования 16 Глава 1 Публикация веб-страницы Объект для публикации — @ Полная презентация ©Слайды ' ' Произвольный показ: а по Вывести заметки докладчика Поддержка обозревателя--------- Веб-параметры— @ Microsoft Internet Explorer 4,о+ (высокое качество) © Microsoft Internet Explorer 3.0, Netscape Navigator 3,0 или более поздняя версия ©Все перечисленные обозреватели (будут созданы большие файлы) Имя файла: О Открыть опубликованнуш веб-страницу в обозревателе Олу^иковать Отмена ФУНКЦИОНАЛЬНЫЕ БЛОКИ КОМПЬЮТЕРА Изменить... C:\wweb\worfc2\7klass\03\31b.htm £бзор,,. Рис. 1.11 Рис. 1.12 Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 17 У Рис. 1.13 Сохраним документ. Просмотрим сохраненные веб-страницы. Вид одной из них показан на рисунке 1.13. В заключение отметим, что сохранение документов MS Office в виде вебстраниц является самым простым способом создания веб-сайтов и широко применяется в сфере образования для размещения в сети разнообразных материалов учебного назначения: сочинений, рефератов, докладов и презентаций. В профессиональном веб-конструировании эти инструменты и методы практически не используются из-за неоптимальности HTML-кода получаемых страниц, что затрудняет их редактирование и приводит к очень большим размерам файлов и медленной загрузке страниц. 1. С помощью каких действий можно сохранить презентацию PowerPoint в виде веб-документа? 2. Какие параметры веб-страниц можно настраивать? Упражнение Создайте фрагмент сайта на основе готовой презентации: а) «Электрический ток»; б) «Пространственные фигуры»; Образовательный портал www.adu.by/ Национальный институт образования L 18 Глава 1 {^Mknwft Anntfdlm" [Bla.wt] E'^l Прлвы уил ectfpKa Dop^at Сервис Qkho fnpapu Ada^PPF ЖИВОТНЫЕ Р0ДН0Ш1ЕАЯ 4i С»йд 1 - Windows [n(ornot £vp)orer ЫЖиаИТ ^ j'^^"Dc\!Wo^lcVAsv«tв^Иttфop«alиwll_гO10^91a'.«Cll'' -1+t | X}[ flj GoojJ'f P - [ ^ЧПомск-'^Ф” ** i . Воити" '’i^i Q " . i Ш|Г1 Схрвннца в) «Животные родного края»; г) «Оптические приборы». § 3. Основы языка разметки HTML 3.1. Создание HTML-документа в редакторе Блокнот Веб-страница представляет собой текстовый документ, в котором расставлены команды языка HTML. Они интерпретируются браузером. Например, эти команды могут указывать, как должно отображаться содержание страницы на экране. HTML-документ можно создавать в простейших текстовых редакторах, например в редакторе Блокнот, а затем сохранять в файле с расширением .htm или .html. Разметка HTML-документа состоит в расстановке тегов — заключенных в угловые скобки команд языка HTML. Их можно набирать прописными или строчными латинскими буквами. Краткое описание основных тегов приведено в Приложении 1. Большинство тегов парные. Открывающим тегом описывается команда и начинается ее действие. Закрывающим тегом, который повторяет открывающий, но предваряется косой чертой / (слешем), это действие прекращается. Например, тег задает жирное начертание. Размеченный текст «Второе <Ь>слово выделено жирным шрифтом» браузером будет отображаться так: Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 19 I Второе слово выделено жирным шрифтом. Рассмотрим структуру простейшего HTML-документа. Заголовок окна Содержание документа HTML-документ начинается отрывающим тегом , а заканчивается — закрывающим . Внутри, как в контейнере, расположены два блока. В блоке _ (голова) размещается неотображаемая на странице служебная информация. Например, текст, заключенный между тегами _, отображается не на странице, а в заголовке окна браузера. Вся отображаемая браузером информация: тексты, рисунки, видеофрагменты, анимации — размещается в блоке _ (тело). В HTML-документе можно также размещать неотображаемые браузером комментарии в угловых скобках с восклицательным знаком < ! Комментарии>. Пример 1. В редакторе Блокнот создать HTML-документ, содержащий текст: Авторская страница Это мой первый проект Фамилия Имя Отчество Сохранить созданный документ под именем primer1.htm. Просмотреть его в браузере. Откроем редактор Блокнот. Наберем или скопируем готовый шаблон HTML-документа из файла шаблон.htm. Наполним его требуемым содержанием, т. е. введем заданный текст, как показано на рисунке 1.14. J primerl.htm - Блокнот тжж Файл Правка Формат Вид Справка npoeKT l ____________________ Авторская страница Это мой первый проект Фамилия имя Отчество Рис. 1.14 Образовательный портал www.adu.by/ Национальный институт образования I 20 Глава 1 Рис. 1.15 Сохраним документ в формате HTML. Поскольку созданные в редакторе Блокнот документы по умолчанию сохраняются с расширением .txt, воспользуемся меню Файл ^ Сохранить как, в появившемся диалоговом окне выберем вариант Все файлы, введем имя и расширение: primer1.htm. Откроем созданный документ в браузере (рис. 1.15). Обратим внимание, что текст отображается в одну строку, хотя набран в три строки с отступами. Переходы на новые строки, а также все пробелы более одного браузером игнорируются. Итак, вид веб-страницы в браузере задается тегами HTML, но также зависит от типа браузера. В приведенных примерах используется браузер MS Explorer. Для отображения текста в виде отдельных абзацев используют тег

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


. За оформление текста отвечают теги форматирования (см. Приложение 1). Для отображения заголовков используются теги

_

. Заголовок уровня 1 — самый крупный, а уровня 6 — самый мелкий. Начертание символов задается следующими тегами: — полужирное, — курсивное, — подчеркнутое. Пример 2. Оформить созданную в примере 1 странипу в соот-рис. 1.16 ветствии с рисунком 1.16. Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 21 @ Проект 1 щница Э ьютер I За ’ 0 ' а ’ Страница ▼ 0 Новое окно Вырезать Копировать П Вставить ы Сохранить как... т Отправить араницу по электронной почте... Отправить ссылку по электронной почте... Править в Microsoft Office Word ^ Масштаб Размер шрифта Стиль Кодировка Переход клавишами Сеойава Clrl+N Ctrl+X Ctrl+C Ctrl+V F7 I Просмотр HTML-кода Рис. 1.17 Отредактируем HTML-документ в редакторе Блокнот. Его можно открыть непосредственно из браузера с помощью команды Страница (или Вид) ^ Просмотр HTML-кода (рис. 1.17). Расставим теги: <Ь2>Авторская страница<Ьг> <Ь>Это мой первый проект <Ьг> <1>Фамилия Имя Отчество Сохраним документ в файле с именем avtor.htm. Для просмотра обновленной или клавишу F5. страницы нажмем кнопку Обновить Открывающие теги языка HTML могут содержать атрибуты, которыми задаются параметры разметки документа. Каждый атрибут имеет название (имя) и определенное значение, которое записывается в кавычках после знака «равно». Тег может иметь несколько атрибутов, которые перечисляют через пробелы, например: <тег атрибут1="значение" атрибут2="значение"...>. Порядок следования атрибутов в теге неважен. Если значение атрибута содержит только буквы английского алфавита, цифры или дефис и не содержит пробелов, кавычки можно опустить. Образовательный портал www.adu.by/ Национальный институт образования 22 Глава 1 Вид всей веб-страницы задается атрибутами тега , в то время как отдельные ее элементы, например заголовки, разделы, абзацы, таблицы, рисунки, могут иметь свое особенное оформление. Цвет фона страницы задается атрибутом bgcolor, а цвет текста — атрибутом text. Значением этих атрибутов является цвет, который задается своим названием на английском языке, например red (красный), или его шестнадцатеричным кодом, например #FF0 00 0 (Приложение 2). По умолчанию цвет страницы белый, а цвет текста — черный. Синий цвет страницы можно задать так: или так: . Заметим, что цвета, отображаемые разными браузерами, а также выводимые на печать, могут несколько отличаться от приведенных в Приложении 2. Для выравнивания текста всей страницы, отдельного абзаца, раздела или заголовка используется атрибут align, который может принимать следующие значения: center — выравнивание по центру, left — по левому краю, right — по правому краю. Выравнивание текста по ширине использовать не рекомендуется, поскольку при уменьшении окна браузера между словами могут образовываться большие промежутки. Для задания шрифта, цвета и размера символов текста используется тег . Шрифт задается атрибутом face, значением которого является название шрифта, например Arial. Цвет символов задается атрибутом color. Если шрифт не задан, то по умолчанию используется шрифт Times черного цвета. Размер символов задается атрибутом size и может выражаться в условных единицах, которые могут принимать значения от 1 до 6. По умолчанию принято значение размера 3. Размер символов может выражаться и в относительных единицах: числах по отношению к базовому размеру, например size="+n" или size = "-n". Так, для базового размера 3 атрибут задает размер 5, а атрибут — размер 1. Пример 3. Создать веб-страницу в соответствии с рисунком 1.18. Откроем в редакторе Блокнот файл primer3.txt с текстом объявления и введем HTML-код: Объявление Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 23 J Объявление - Windows Internet Explorer т- 0] D:\Work\primer3.htm "ЫЖ *t X й| Google P - ^ Избранное 1 @ Объявление 1 ■' 0 * [3 ’ Страница ▼ Внимание! Л НЕДЕЛЯ ИНФОРМАТИКИ щ КОНКУРСЫ, ТУРНИРЫ, ВИКТОРИНЫ Оргкомитет ■W |Ч* Компьютер 1 Защищенный рехим: выкл. ' «^125% - Рис. 1.18 BHMMaHMe!

НЕДЕЛЯ
ИНФОРМАТИКИ

КОНКУРСЫ, ТУРНИРЫ, ВИКТОРИНЫ

0ppKOMMTeT

Заметим, что допускается комбинирование и вложенность тегов. Так, для отображения слова «Внимание!» шрифтом Arial и курсивным начертанием в тег вложен тег . Сохраним документ в файле с именем Primer3.htm. Просмотрим его в браузере. Фрагмент текста может отображаться в виде бегущей строки с помощью тега . Направление движения указывается атрибутом direction. Например, движение слова «Внимание!» слева направо задается так: BHMMaHMe! 1. Каким тегом задается абзац? Переход на новую строку? 2. Какими тегами задается полужирное и курсивное начертание символов? 3. Как задать фон и цвет текста всей веб-страницы? 4. Какими тегами и атрибутами задается шрифт, размер и цвет символов? Образовательный портал www.adu.by/ Национальный институт образования 24 Глава 1 Упражнение Откройте предложенный учителем текстовый документ в редакторе Блокнот. Оформите и сохраните его в виде веб-страницы, изображенной на одном из рисунков. Для задания цвета фона воспользуйтесь Приложением 2. ^ Избранное т Заголовки Kt - Заголовок 1 Заголовок 2 Заго.ювок 3 Заголовок 4 V ^ Избранное | Э Упражнение 1 ' Internet Internet — это 1'лобальная компьютерная сеть, точнее, сообщество различных сетей. Нанбонее известные службы Intemen WWW — веемирная паутина, E-mail —электронная почта. ^ Избранное ^ Шрис|>ты - Шрифт Arial Шрифт Times Шрифт Courier Избранное ^ Упражнение HTML HTML (Нурепех! Marbip Language} - язык разметки гиперлгекстовых документов, позволяющий упртвлять их отображением в браузере. Ссылки могут указывать на фаюлы, содержащие нс только текст или графику, но также звук и видео. 3.2. Изображения на веб-страницах Важную роль в оформлении веб-страниц играют графические объекты: фотографии, рисунки, фоновые изображения («обои»), разделительные линии. Они делают страницы более привлекательными, а во многих случаях являются и основными источниками информации. Предназначенные для веб-страниц изображения можно создавать и редактировать в различных графических редакторах. Они могут быть получены с помощью цифрового фотоаппарата, сканера или взяты из сети Интернет. Наиболее предпочтительны графические форматы GIF, JPG и PNG, файлы которых имеют небольшие размеры, что позволяет ускорить процесс загрузки. В формате JPG сохраняют полутоновые изображения, например фотографии. Формат GIF поддерживает анимацию и прозрачный цвет. Важно подчеркнуть, что все изображения, которые мы видим на веб-странице, хранятся в отдельных файлах, а в HTML-коде имеются лишь ссылки на них. Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 25 i Для отображения рисунков предназначен непарный тег . Его неотъемлемым атрибутом является имя графического файла . Веб-страницы и файлы с изображениями могут храниться в разных папках, тогда в атрибуте src тега необходимо указывать путь. Указание путей обязательно для ссылок на все объекты, например на другие страницы, аудио- и видеофрагменты. Тег может содержать и другие атрибуты, которые определяют способ отображения рисунка. Высоту и ширину отображаемого на экране рисунка в пикселях можно задать значениями атрибутов height и width соответственно, а толщину рамки вокруг изображения — значением атрибута border. По умолчанию рамки нет, т. е. border="0". Указание размеров позволяет увеличить или уменьшить видимое на экране изображение (при этом исходный рисунок и файл, в котором он хранится, остаются неизменными). Если размеры не заданы, то по мере загрузки рисунка может изменяться расположение текста и других объектов на экране. Чтобы этого не происходило, полезно всегда указывать эти атрибуты, даже если изображение не масштабируется. Значения атрибута align задают выравнивание текста относительно рисунка (top — по верхнему краю; middle — по середине; bottom — по нижнему краю) или способ обтекания рисунка текстом (left — рисунок слева от текста; right — рисунок справа от текста). С помощью атрибута alt можно задать текст сообщения, которое будет выводиться вместо рисунка, если он не найден или если отключен его показ в браузере. Кроме того, этот текст появляется в виде подсказки при подведении курсора мыши к рисунку. В качестве фона страницы можно использовать изображение из файла. Фоновый рисунок («обои») задается с помощью атрибута background в теге . Чтобы повторяющийся фоновый рисунок заполнял страницу без стыков, его верхняя и нижняя, левая и правая стороны не должны отличаться. Задать фоновый рисунок и одновременно закрасить его некоторым цветом нельзя. Пр имер 1. Разместить на веб-странице изображения из файлов в соответствии с рисунком 1.19. В редакторе Блокнот откроем файл graf.txt с шаблоном страницы. В теге укажем рисунок фона kletka1.gif. Расставим теги форматирования текста. Вставим теги для отображения рисунка волка с прозрачным фоном из файла volk.gif (без атрибутов); анимации из файла tv.gif (граница толщиной 2 пикселя); двух фотографий аиста из файла aist.jpg разных размеров. Образовательный портал www.adu.by/ Национальный институт образования L 26 Глава 1 Рис. 1.19 HTML-код веб-страницы может иметь следующий вид: <ЬеаТ><Ц1Ц1е>Графика

Изображения на веб-странице

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

аисты Сохраним HTML-документ в файле с именем graf.htm. Просмотрим его в браузере. При наведении курсора на область рисунка tv.gif появляется подсказка «Анимация». Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 27 Чтобы отображать текст на экране в том же виде, что и в редакторе Блокнот, используют тег

. Это позволяет упростить форматирование, например не вставлять теги 
в конце каждой строки. Пр имер 2. Создать веб-страницу «Мой родны кут» (рис. 1.20). Рис. 1.20 В редакторе Блокнот откроем файл kut.txt с текстом отрывка из поэмы Якуба Коласа «Новая зямля». Добавим теги начала и завершения веб-страницы. Расставим теги форматирования. Заключим текст стихотворения в теги
_
. Ниже текста вставим фотографию музея Якуба Коласа из файла muzkolas.jpg. В качестве фона используем изображение листьев из файла bg02.jpg. HTML-код этой веб-страницы может иметь следующий вид: <ЬеаЬ><Ь1Ь1е>Мой родны KyT

Мой родны KyT

HKy6 Колас. З паэмы "Новая зямля" Образовательный портал www.adu.by/ Национальный институт образования с 28 Глава 1 <рг0>Мой родны кут, як ты мне мiлы, Забыць цябе не маю сiлы! Не раз, утомлены дарогай, Жыццём вясны мае убогай, К табе я у думках залятаю, I там душою спачываю. Сохраним HTML-документ в файле с именем kut.htm. От удачного выбора цвета фона или фонового рисунка, шрифта и цвета текста, а также других элементов оформления страницы зависит восприятие ее содержания. В Интернете свободно распространяется громадное количество «обоев» и готовых шаблонов веб-страниц разного назначения (например, на сайте «Азбука дизайнера»). Создание собственных веб-страниц на их основе сводится в основном к вводу текста и ссылок на нужные изображения. Весьма популярны, например, шаблоны поздравительных открыток и рекламных страниц. Такой шаблон несложно разработать самостоятельно. Пример 3. Создать веб-страницу — шаблон поздравительной открытки (рис. 1.21). Рис. 1.21 Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 29 HTML-код веб-страницы может иметь следующий вид: <ЬеаТ><Ц1Ц1е>Открытка

Поздравляю
с днем рождения!

На основе этого шаблона можно создавать различные открытки, изменяя текст поздравления, «обои» и рисунок. 1. Какой тег отображает рисунок на веб-странице? 2. Как задаются размеры изображения? 3. Какой тег задает фоновый рисунок на веб-странице? Упражнения 1. Разместите на одной странице несколько изображений: а) разного размера (например, 150X120, 100X80); б) в рамках разной толщины (например, 0, 1, 3, 8). Образовательный портал www.adu.by/ Национальный институт образования 30 Глава 1 2. Откройте предложенный учителем текстовый документ в редакторе Блокнот. Оформите и сохраните его в виде веб-страницы, изображенной на одном из рисунков. 3.3. Создание гиперссылок Переходы со страницы на страницу веб-сайта выполняются с помощью гиперссылок. За организацию ссылок на языке HTML отвечает тег с обязательным атрибутом href, значением которого является адрес (URL) ресурса. Например, HTML-код текстовой гиперссылки на страницу «Графика», которая сохранена в файле graf.htm в той же папке, что и исходная страница, имеет вид: Образовательнь^|р1 поцитал wH/\w.adLi.by, Основы веб-конструирования 31 i Графика, т. е. адресом ресурса является имя файла. Обычно близкие по тематике страницы сайта сохраняют в соответствующих папках. Пусть, например, на диске D: в папке kino хранят главную страницу main.htm, во вложенной папке dramy — страницу фильма drama2.htm, а в папке multy — страницы karlson.htm и ну погоди.htm (рис. 1.22). В этом случае при создании гиперссылок необходимо указывать пути к файлам. Возможны два варианта: drama2.htm karlson.htm ну погоди.htm Рис. 1.22 записать полный путь от корня диска к искомой странице; указать относительный адрес (путь от исходной страницы к искомой). Например, ссылка со страницы main.htm на страницу karlson.htm будет такой: <а href="multy/karlson.Ькш">Карлсон. Ссылка со страницы drama2.htm (папка dramy) на страницу karlson.htm (папка multy) будет иметь вид: <а href="../multy/karlson.htm">Карлсон. Символы .. / (две точки и слеш) обозначают возврат в папку kino из вложенной папки dramy. При переносе папки kino со всеми вложениями в другое место, в том числе на другой диск или компьютер, относительные адреса не изменяются! Гиперссылкой может служить не только текст, но и рисунок. Для создания такой гиперссылки между парой тегов <а href >. . . нужно вставить тег, указывающий на файл изображения, например: <а href="graf.htm">. Возможно совместное использование текста и графики в одной ссылке, например: <а href="graf.htm">Графика. По умолчанию вызванная гиперссылкой страница открывается в том же окне, что и исходная, замещая ее. Назад можно вернуться с помощью соответствующей кнопки на панели инструментов браузера. Для просмотра вызванной страницы в новом окне необходимо указать атрибут target="_blank", например: <а href="graf.htm" target="_blank">Графика. Образовательный портал www.adu.by/ Национальный институт образования 32 Глава 1 Гиперссылка может указывать не только на веб-страницу, но и на любой размещенный в сети по известному адресу информационный ресурс: рисунок, текст, презентацию, аудиовидеофрагмент. Конечно, на компьютере пользователя должно быть установлено соответствующее программное обеспечение для его отображения. Пусть, например, реферат по астрономии luna.doc размещен в папке astro на сайте www.referaty.by. Гиперссылка для его просмотра или скачивания может быть задана тегами: <а href="www.referaty.by/astro/luna.Ьоо">Луна. Еще раз подчеркнем, что расставлять гиперссылки следует только после создания ресурсов, на которые они указывают, и размещения их файлов в заданных папках. Пр имер 1. Создать главную страницу веб-сайта «.Мои работы» (рис. 1.23). Разместить на ней гиперссылки на страницы «Графика», «Об авторе» (открываются в том же окне), а также на рисунок (открывается в новом окне). Пусть фрагмент сайта будет Рис. 1.23 размещен в папке PRO. Скопируем в эту папку созданные ранее файлы веб-страниц «Графика» graf.htm и «Об авторе» avtor.htm вместе со всеми используемыми рисунками. Оформим главную страницу в соответствии с рисунком 1.23. Расставим гиперссылки. HTML-код этой веб-страницы может иметь следующий вид: Главная

MOM РАБОТЫ

Ссылки на страницы
Графика
G6 aBTope
Ссылкa на pMcyHOK Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 33 Сохраним HTML-документ в файле с именем index.htm. Проверим работу гиперссылок. Страницы «Графика» и «Об авторе» открываются в текущем окне после щелчка мышью по тексту ссылки или картинке с символическим изображением лупы (файл icon.gif). Рисунок (файл aist.jpg) открывается в новом окне после щелчка мышью по его уменьшенному изображению (из того же файла aist.jpg). Заметим, что для ускорения загрузки страницы с большим количеством графических ссылок следует использовать миниатюрные изображения из отдельных файлов. В рассмотренном примере все файлы хранятся в одной папке. В случае большого количества страниц или изображений их следует размещать во вложенных папках и указывать пути к ним. Гиперссылки могут указывать не только на отдельные документы, но и на заданные места в документе. Ссылки внутри длинных страниц повышают удобство их просмотра. Они создаются в два этапа: 1) сначала в месте, куда нужно перейти по ссылке, устанавливается закладка, например: <а паше="Закладка1">_; 2) затем создается ссылка на эту закладку: <а ЬгеТ="#Закладка1"> текст гиперссылки . Для ссылки на адрес электронной почты его нужно указать в качестве URL, например <а href="mailto:sova@les.Ьу">письмо сове. Как уже отмечалось, в блоке могут размещаться теги, которые содержат служебную информацию для браузера и поисковых систем. Они называются мета-тегами. Большинство мета-тегов являются необязательными. Однако некоторые из них весьма полезны. Так, браузер будет отображать текст страницы на национальном языке при указании таблицы кодировки в мета-теге charset. Например, для кириллицы мета-тег будет таким: Для хранения информации об авторе используют мета-тег . Образовательный портал www.adu.by/ Национальный институт образования 34 Глава 1 По словам, перечисленным через запятую или пробел в мета-теге "keywords" (ключевые слова), поисковые системы индексируют вебстраницы, т. е. помещают информацию о них в свою базу данных, чтобы потом оперативно выдавать по запросам пользователей. Длина строки ключевых слов не должна превышать 800 символов. Слова в ней не должны повторяться, например: . 1. С помощью какого тега создается гиперссылка? 2. Как в качестве гиперссылки использовать изображение? Упражнение Создайте фрагмент веб-сайта из 3 — 4 веб-страниц по одной из тем: Дом, в котором я живу. Мой класс. Моя школа. Любимые стихи (песни, книги, фильмы). Любимые поэты (писатели, художники, артисты). Любимые занятия (пример главной страницы представлен на рисунке). Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 35 ] § 4. Подготовка изображений для Интернета При создании веб-сайта приходится заботиться о том, чтобы его страницы загружались как можно быстрее. Это особенно актуально, если на страницах сайта необходимо разместить много изображений. Поэтому так важен грамотный выбор формата их хранения. Как Вы знаете, нарисованные в графическом редакторе Paint картинки по умолчанию сохраняются в формате BMP (Bit Map Picture — битовая карта изображения). В этом формате изображения хранятся в файлах в неупакованном виде. Информационный объем изображения в байтах равен произведению его ширины W (width) и высоты H (height) в пикселях и глубины цвета С в битах на 1 пиксель (W-H-С). Так, файл с небольшой картинкой размером 1QQX1QQ пикселей при глубине цвета 24 бит/пиксель будет иметь размер около 29 Кбайт. Объем файла с изображением 800X600 пикселей будет иметь размер около 1,4 Мбайт, а время его загрузки при скорости модема 56 кбит/с составит более 200 с, что совершенно неприемлемо. В большинстве графических форматов изображения хранятся в файлах в упакованном виде. Существуют различные способы уменьшения размера файла изображения с минимальными потерями качества. Этот процесс называют оптимизацией. При большом разнообразии графических форматов для размещения на сайтах в основном используются изображения форматов GIF, JPG и PNG. Выбор формата хранения изображения во многом зависит от свойств самого изображения. Так, формат GIF используют для изображений с четкими линиями, однородными заливками, текстом, например чертежей, карт. Такие изображения называют штриховыми. Этот формат поддерживает палитру оттенков, состоящую не более чем из 256 цветов, и позволяет задавать прозрачный фон. Оптимизация заключается в уменьшении количества выбранных цветов. Важным достоинством формата GIF является возможность анимации. Поэтому этот формат широко используется для размещения на веб-страницах простых графических элементов: символов, формул, логотипов, рекламных роликов. Формат JPG позволяет передавать богатую палитру цветов и лучше всего подходит для изображений с плавным переходом тонов без четких линий и контуров, например портретов, пейзажей. Такие изображения называют полутоновыми. Оптимизация заключается в замене областей с небольшим градиентом цвета на однотонные. Степень сжатия характеризуют показателем качества от 0 до 100. Часто по умолчанию его принимают равным 65, что соответствует сжатию исходного неупакованного изображения в 6—10 раз. Сохранение изображений в формате JPG предусмотрено практически во всех современных цифровых фотоаппаратах. Образовательный портал www.adu.by/ Национальный институт образования 36 Глава 1 При подготовке изображений для Интернета выработаны определенные рекомендации. Размеры сохраняемых в файлах изображений должны соответствовать размерам изображений, отображаемых на веб-страницах, несмотря на то, что их ширину и высоту можно задавать в теге . Например, для мониторов 17' с разрешением 1280X768 пикселей ширина изображения на странице чаще всего не превышает 600 — 800 пикселей, а высота — 400 — 600. Если изображение обтекается текстом, то его размер должен находиться в пределах 200—400 пикселей. Процесс оптимизации изображения сводится к двум основным операциям: • приведение изображения к требуемому размеру; • сжатие изображения с сохранением оптимального качества. Пример 1. Фотография размером 2560X1920 пикселей сохранена в файле объемом 2,4 Мбайт. Ее ширину и высоту уменьшили в 4 раза. Определить объем файла и размеры изображения. Размер изображения станет равным 640X480 пикселей, при этом объем файла уменьшится в 4 • 4 = 16 раз и составит 0,15 Мбайт. В 16 раз уменьшится и время загрузки этого изображения! Заметим, что изменять размеры изображений и сохранять их в форматах GIF или JPG можно практически в любом растровом графическом редакторе, в том числе в Paint. Для сжатия изображений требуется более сложный редактор. Рассмотрим оптимизацию изображений в свободно распространяемом графическом редакторе Paint.Net (https://paintnet.ru). Пример 2. Фотография размером 1200X1200 пикселей сохранена в файле roza1200.jpg объемом 745 Кбайт. Оптимизировать изображение так, чтобы на веб-странице его размер составил 300X300 пикселей. Откроем в редакторе Paint.Net изображение из файла roza1200.jpg (рис. 1.24). Прежде всего, уменьшим размер изображения. Для этого из меню Изображение вызовем окно Изменение размера и установим значение Ширина: 300 пикселей (рис. 1.25). При включенном флажке Сохранять пропорции в такой же пропорции изменится и высота. Сохраним уменьшенное изображение в формате JPG. Для этого с помощью меню Файл вызовем диалоговое окно Сохранить как, выберем тип файла JPEG и введем новое имя файла, например roza300.jpg. После нажатия кнопки Сохранить появится диалоговое окно настройки качества изображения Параметры сохранения. По умолчанию показатель Качество нашего изображения равен 100. Размер файла составляет примерно 83 Кбайт. Продолжим оптимизацию путем сжатия изображения с сохранением приемлемого качества. С помощью движка будем уменьшать показатель Качество до появления видимых на глаз искажений на оптимизированном изображении. Так, при по- Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 37 1 Рис. 1.24 Рис. 1.25 Образовательный портал www.adu.by/ Национальный институт образования i 38 Глава 1 казателе 50 видимых изменений еще нет, а размер файла при этом составляет около 19 Кбайт (рис. 1.26). Остановимся на этом значении, нажав кнопку ОК- В итоге качество изображения ухудшилось незначительно, а размер файла с оптимизированным изображением стал почти в 40 раз меньше исходного. Гораздо большие возможности оптимизации изображений предоставляет графический редактор Adobe Photoshop. Рис. 1.26 Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 39 Пр имер 3. Оптимизировать изображение из файла roza1200.jpg так, чтобы на веб-странице его размер составил 300X300 пикселей. Откроем в редакторе Adobe Photoshop изображение из файла roza1200.jpg. Для изменения размера изображения из меню Изображение (Image) вызовем окно Размер изображения (Image Size) и установим значение Ширина (Width) 300 пикселей (рис. 1.27). При включенном флажке Сохранить пропорции в такой же пропорции изменится и высота. Из меню Файл (File) вызовем окно Сохранить для веб и устройств (Save for Web) и с помощью вкладки 4 варианта получим четыре изображения: исходное (слева вверху) и оптимизированные с качеством 65 % (справа вверху), 30 % и 10 % (внизу) (рис. 1.28). Рис. 1.28 Образовательный портал www.adu.by/ Национальный институт образования 40 Глава 1 Рис. 1.29 Будем уменьшать показатель Качество до появления видимых изменений на оптимизированном изображении. Это можно сделать грубо, выбрав в поле Установки (Setting) один из показателей качества (Максимальное, Высокое, Среднее, Низкое), и точно, установив подходящее числовое значение. Остановимся, например, на значении 30 и нажмем кнопку Сохранить (Save). Объем оптимизированного файла не превышает 10 Кбайт, т. е. уменьшился почти в 75 раз. Не забудем ввести новое имя файла, например roza300-30.jpg. Аналогичным способом оптимизируют изображения в формате GIF. В этом случае уменьшают количество цветов от 256 до значения, при котором появляют- Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 41 i ся видимые искажения. На рисунке 1.29 показаны четыре изображения: исходное (слева вверху) и оптимизированные с количеством цветов 128 (справа вверху), 32 (слева внизу, потери качества невелики) и 4 (справа внизу, качество неприемлемо). 1. Почему необходимо уменьшать объемы файлов с изображениями для вебстраниц? 2. В каких форматах рекомендуется хранить изображения для веб-страниц? 3. В чем заключается оптимизация изображений для Интернета? Упражнения 1. Оптимизируйте изображения, сохраненные в предложенных учителем файлах. 2. С помощью клавиши Print Screen поместите в буфер обмена изображение на экране, например Рабочий стол. Откройте редактор Paint, с помощью комбинации клавиш Ctrl + V вставьте изображение из буфера и сохраните под именем ris.bmp. Сохраните это же изображение в форматах JPG и GIF. Сравните объемы файлов. § 5. Веб-конструирование в редакторе FrontPage 5.1. □сновные элементы интерфейса Вы уже научились создавать веб-страницы в программах MS Office, а также с использованием языка разметки HTML в простейшем текстовом редакторе Блокнот. Рассмотрим теперь возможности специального веб-редактора Microsoft FrontPage, который предназначен для разработки веб-сайтов и относится к программным средствам визуального веб-конструирования. При работе с веб-редактором Front Page можно обойтись без знания языка разметки гипертекстовых документов HTML. Веб-страница просто конструируется на экране и сохраняется в формате HTML. Выполняемые при этом действия по оформлению веб-документа напоминают работу в текстовом редакторе MS Word. Интерфейс редактора FrontPage достаточно прост, чтобы пользователь смог быстро освоить основные приемы работы. После запуска FrontPage открывается окно, основные элементы которого представлены на рисунке 1.30. Меню и панели инструментов Стандартная, Форматирование, Рисование по своим возможностям и приемам использования напоминают аналогичные панели текстового редактора MS Word. Образовательный портал www.adu.by/ Национальный институт образования L 42 Глава 1 Строка заголовка " Строка ' ' Панель ' С > ^ меню _ ^ Стандартная ^icT^ Е Панель Форматирование Файл Правка Вид Bcfl^ica Формат Сервис Хаблиф Данные Рамки Окно ОпЬавка -" н /1^ д. аш чя и i ■ Заголовок 2 т Times New Roman i^L_________________ -г 5 (18 пт) ^j ~ж[ Л'_Ч I g Щ vidl.hbn ^|]|

| ПРИРОДА РОДНОГО КРАЯ ж Для получения справки нажмите клавишу F1 0:39 при 56 к^т/с 730 к 248 по умолчан и i Рис. 1.30 Вид Рабочей области зависит от выбранного режима работы. В режиме Конструктор веб-страница строится из текстовых блоков и графических объектов. При этом автоматически генерируется ее HTML-код, который можно просматривать и редактировать в режиме Код. Режим С разделением (рис. 1.31) является комбинацией этих двух режимов. Режим Просмотр позволяет просматривать созданные страницы. С помощью меню Вид можно выбрать и другие полезные режимы работы. Режим Страница предназначен для создания и редактирования веб-страниц. В режиме Папки просматривается структура папок сайта, выполняются файловые операции. Режим Переходы отображает структуру связей между страницами и позволяет ее изменять. Режим Гиперссылки наглядно отображает систему ссылок, обеспечивает их проверку и редактирование. Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 43 Рис. 1.31 5.2. Работа в редакторе FrontPage Рассмотрим основные приемы работы в редакторе FrontPage на примере разработки веб-страницы «Озера Беларуси». Она будет содержать текст и фотографии, которые следует подготовить заранее. Начнем с создания и оформления текстового документа. Пример 1. Создать веб-страницу «Озера Беларуси» (рис. 1.32). Запустим редактор FrontPage. Откроется пустая страница с установленными по умолчанию параметрами. Перед началом работы полезно проверить настройки редактора, и, прежде всего, кодировку. Для этого с помощью команды Файл ^ Свойства откроем окно Свойства страницы и на вкладке Язык установим кириллица (рис. 1.33). Будем работать в режиме Конструктор. Однако при необходимости можем просматривать и редактировать автоматически генерируемый HTML-код в режимах Код или С разделением. Образовательный портал www.adu.by/ Национальный институт образования I 44 Глава 1 Т| |] |<р>| ОЗЕРА БЕЛАРУСИ Нарочь — озеро в Мядельском районе Минской области. Самое большое озеро в Беларуси, Входит в Нарочанскую [ругшу озер (Мясзро, Баторино, Бледное), Площадь — 79,6 кв. км. Наибольшая глубина — 24,08 м, В Нарочи обитает 22 вида рь(б (в том числе угорь), из них наиболее крупная — щука, 11а озере и в округе имеются гнездовья лебедя-ши пун а, малой крачки, скопы, малой поганки. • Дривяты —озеро на западе Витебской области. Наиболее крупное озеро среди Браславских озер и пятое в Беларуси, Площа;Ть — 36,1 кв, км. Наибольшая глубина— 12 м. В озере также обитает более 20 видов рыб, наиболее распространены у['орь, судак, лещ, сазан. Рядом с 6epeix>M гнездится лебедь-шипун, Оконодотор] в с разделен иен И код Дпрототр j <_____________________ Рис. 1.32 Рис. 1.33 LL Начнем с размещения и оформления текста, который был предварительно сохранен в файле озера.1х1. Откроем его в редакторе Блокнот, скопируем нужные фрагменты и с помощью буфера обмена вставим на создаваемую страницу. Текст будет оформлен принятым по умолчанию стилем: шрифт Times, размер 3 (12 пт), выравнивание по левому краю (рис. 1.34). Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 45 I J HOB_CTp_1.htm\^ Т] |] |<р>| ОЗЕРА БЕЛАРУСИ Нарочь — озеро в Мядельском районе Минской области. Самое большое озеро в Беларуси, Входит 11 Нарочанскую ipyrniy озер (Мяпро, Баторино, Бледное). Пдоща;Дь — 79,6 кв, км. Наибольшая глубина — 24,08 м, В Нарочи обитает 22 вида рыб (в том числе yi'opb), из них наиболее крупная — щука. На озере и в округе имеются гнездовья лебедя-шипуна, мазой крачки, скопы, малой поганки. Дривяты — озеро на западе Витебской области. Наиболее крупное озеро среди Браславсизх озери пятое bJ Рис. 1.34 0 Рис. 1.35 Образовательный портал www.adu.by/ Национальный институт образования 46 Глава 1 Рис. 1.36 Важно помнить, что отображение веб-страницы на экране зависит от разрешения монитора и настройки браузера. Поэтому размер шрифта принято задавать в условных единицах от 1 до 7. Если размер шрифта не указан, то по умолчанию он принимается равным 3, что при установке в браузере значения Размер шрифта ^ средний соответствует 12 пунктам. Для форматирования текста используем панель инструментов Форматирование, а также окна Шрифт (рис. 1.35) и Абзац (рис. 1.36) из меню Формат. Установим параметры заголовка: шрифт Arial, размер 5 (18 пт), цвет бирюзовый, выравнивание по центру. Параметры основного текста оставим без изменений, лишь выделим первые строки каждого абзаца (шрифт Arial, цвет бирюзовый). Названия озер выделим полужирным шрифтом. Повышению удобочитаемости текста и привлекательности страниц способ -ствует использование списков, а также разбиение больших страниц на отдельные блоки с помощью горизонтальных разделительных линий. Маркированные и нумерованные списки создаются с помощью панели инст- Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 47 рументов Форматирование, а также диалогового окна Список, которое открывается из меню Формат. Для оформления вебстраницы «Озера Беларуси» используем графические маркеры. С помощью команды Вставка ^ Горизонтальная линия поместим на страницу горизонтальные разделительные линии. В окне Свойства горизонтальной линии зададим параметры линии в соответствии с рисунком 1.37. Теперь страница будет выглядеть так, как на рисунке 1.32. Сохраним документ, заменив предлагаемое по умолчанию имя нов_стр_1.Мт на более подходящее озера.Мш. Займемся теперь размещением на созданной странице изображений. Подчеркнем, что все изображения, которые мы видим на веб-страницах, хранятся в отдельных файлах, а на самой странице имеются лишь ссылки на соответствующие файлы. Пр имер 2. Разместить на веб-странице «Озера Беларуси» изображения в соответствии с рисунком 1.38. Рис. 1.37 ОИвнсфртор|вс разделмиеи ^Прос№тр J * Рис. 1.38 Образовательный портал www.adu.by/ Национальный институт образования I 48 Глава 1 Установим курсор в то место текста, к которому будет привязан рисунок, например перед началом первой строки. С помощью команды Вставка ^ Рисунок на панели инструментов (рис. 1.39) вызовем окно Рисунок и или кнопки ш выберем требуемый файл с изображением, например narach.jpg. Рис. 1.39 Как и в документах MS Word, изображения могут располагаться по отношению к тексту различными способами. По умолчанию рисунок отображается в выбранном месте строки без обтекания текстом (рис. 1.40, а). При этом можно выбрать способ выравнивания. На рисунке 1.40, а текст и изображение выровнены по левому краю. Рисунок 1.40, б иллюстрирует обтекание изображения слева. (На это указывает непечатаемый символ стрелка влево а в точке привязки. При необходимости эту точку можно перетаскивать с помощью мыши.) Параметры изображения настраиваются в диалоговом окне Свойства рисунка (рис. 1.41). Вызовем это окно двойным щелчком мыши по выбранному рисунку или с помощью контекстного меню. Зададим Обтекание: справа, Выравнивание: по правому краю, Толщина границы: 0 и другие параметры в соответствии с рисунком 1.41. Здесь же можно установить размер изображения, но проще подобрать размер рисунка, выделив его и перетащив мышью появившиеся маркеры, как в любом редакторе. Аналогичным способом вставим второй рисунок из файла braslav.jpg. В редакторе FrontPage предусмотрена возможность простейшей обработки изображений (коррекция яркости и контрастности, повороты, обрезка и т. д.). С помощью меню Вид вызовем панель инструментов Рисунки. Увеличим яр- Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 49 I Рис. 1.41 кость и уменьшим контрастность изображений, нажав соответственно кноп- Страница примет требуемый вид (см. рис. 1.38). Сохраним ее под именем 03epa2.htm и просмотрим в браузере. Для привлечения внимания к информации можно создать бегущую строку. Пр имер 3. На веб-странице «Озера Беларуси» добавить бегущею строку «Приглашаем в лодочный поход». Установим курсор под нижней горизонтальной линией. Выполним последовательность действий: Вставка ^ Веб-компонент ^ Бегущая строка. В окне Свойства бегущей строки введем текст «Приглашаем в лодочный поход». Зададим ее параметры в соответствии с рисунком 1.42. Шрифт, размер и начертание текста устанавливается с помощью меню Шрифт, которое вызывается кнопкой Стиль. Образовательный портал www.adu.by/ Национальный институт образования В результате в нижней части страницы появится светло-голубая полоса, по которой справа налево будет перемещаться текст 1. Каково назначение редактора FrontPage? 2. Какие возможности форматирования текста имеет FrontPage? 3. Как задается размер шрифта на веб-страницах? Упражнение Создайте одну из веб-страниц: Реки Беларуси, Заповедники, Парки. Используйте фотографии и тексты из указанных учителем файлов. Оформите страницу в соответствии с образцом на рисунке 1.38. 5.3. Использование таблиц Размещать текст в несколько колонок, а также располагать рисунки и текст в требуемых местах веб-страниц удобно с помощью таблиц. Для вставки таблицы проще всего использовать стандартную панель инструментов, однако наиболее полно возможности работы с таблицами представлены в меню Таблица. Например, в диалоговых окнах Вставка таблицы и Свойства Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 51 1 таблицы можно указать не только количество строк и столбцов таблицы, но и способ выравнивания, цвет фона ячеек, цвет и толщину границ, интервал между ячейками и другие параметры. Заметим, что изменить параметры можно и после создания таблицы. В этом случае удобно пользоваться панелью Таблицы (рис. 1.43), которая вызывается с помощью команды Вид ^ Панели инструментов. Рис. 1.43 Таблицы [Показать параметры макета Рассмотрим на примере, как используются таблицы для размещения объектов на веб-страницах. Пример 1. Создать веб-страницу «Города Беларуси», на которой изображена карта Беларуси с гербами городов и указаны даты их основания (рис. 1.44). Откроем редактор MS FrontPage. С помощью кнопки □ на панели инструментов или меню Таблица вставим таблицу из четырех строк и трех столбцов. Рис. 1.44 Образовательный портал www.adu.by/ Национальный институт образования 52 Глава 1 В средней ячейке первой строки наберем заголовок «Города Беларуси». Оставшиеся ячейки второго столбца объединим. Для этого выделим объединяемые ячейки и выполним команду Таблица ^ Объединить ячейки. В полученную ячейку вставим изображение карты Беларуси из файла belarus2.jpg. В ячейки 1 и 3 первой строки вставим изображения герба и флага Беларуси. В остальные ячейки введем названия городов и даты их основания. Отформатируем надписи и установим размеры ячеек в соответствии с рисунком 1.44. Проще всего изменять ширину столбцов, перетаскивая их границы с помощью мыши. Сделаем невидимыми границы ячеек. Выделим таблицу и вызовем диалоговое окно Свойства таблицы (рис. 1.45). В поле Положение установим Выравнивание: по центру, и в поле Границы — Размер: 0. Такие границы в редакторе Рис. 1.45 Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 53 1 FrontPage отмечаются пунктирными линиями, а при просмотре веб-страницы в браузере не видны. Теперь страница будет выглядеть так, как на рисунке 1.44. Сохраним ее под именем goroda.htm и просмотрим в браузере. Для построения таблицы в языке HTML используются теги — таблица; — строка таблицы;
— ячейка таблицы. В этих тегах можно использовать атрибуты width — ширина таблицы или ячейки, bgcolor — цвет фона таблицы или ячеек, border — толщина рамки и bordercolor — цвет рамки и другие (см. Приложение 1). Ширина таблицы может быть задана в пикселях или в процентах по отно-шениию к ширине страницы, например width=450 или width=40%. По умолчанию при отображении таблицы создается эффект выпуклости границы. Если задать атрибуты border=1 и bordercolor=green, то эффект выпуклости исчезнет и таблица будет ограничена двойной рамкой зеленого цвета. Атрибут cellspacing=0 задает одинарную рамку. Пример 2. В окне кода редактора FrontPage создать таблицу из четырех столбцов и одной строки шириной 600 пикселей с рамкой зеленого цвета толщиной 1 пиксель. Разместить в ячейках изображения (рис. 1.46). Рис. 1.46 Образовательный портал www.adu.by/ Национальный институт образования 54 Глава 1 Откроем редактор MS FrontPage. Перейдем в режим С разделением. В верхнем окне наберем HTML-код. В нижнем окне будет отображен результат (см. рис. 1.46). Сохраним документ под именем tabl2.htm. Просмотрим веб-страницу в браузере. 1. Для чего используются таблицы на веб-страницах? 2. Как вставить таблицу в редакторе FrontPage? Упражнения 1. Создайте веб-страницу «Разложение белого света в спектр». Для этого используйте таблицу из четырех столбцов и семи строк. В объединенные ячейки левого и правого столбцов вставьте изображения призмы и радуги из файлов prizma.jpg и raduga.jpg. В ячейки второго столбца поместите названия цветов и залейте их соответствующим фоном. В ячейках третьего столбца расположите мнемоническое правило следования цветов спектра. 2. Создайте веб-страницу по одной из тем: Природа родного края. Растения. Животные. Птицы. Рыбы. Дары леса. Грибы. Ягоды. Наш сад. Овощи. Фрукты. Цветы. Тексты и изображения из файлов разместите в таблице из 4 — 6 ячеек. В качестве образца оформления используйте веб-страницы из примеров 1 и 2. 5.4. Разработка веб-сайта Рассмотрим особенности разработки веб-сайта в редакторе FrontPage на примере сайта «Песняры беларускай зямлi». Этап проектирования сайта не отличается от описанного ранее. Создадим сайт из четырех страниц (главной и трех персональных: «Якуб Колас», «Янка Купала» и «Максiм Багдановiч»). Все страницы сайта будем сохранять в файлах с соответствующими именами в одной папке, например pismen. Структуру сайта изобразим в виде двухуровневой схемы (рис. 1.47). Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 55 Песняры беларускай зямлi Партрэт Партрэт Партрэт Купала Рис. 1.47 Колас А Багдановiч Янка Купала Якуб Колас Максiм Багдановiч Партрэт В1яграф1я Партрэт Б1яграф1я Партрэт Б1яграф1я спасылк! ^ . спасылк! ^ . спасылк! На главной странице разместим заголовок «Песняры беларускай зямлi» и гиперссылки, позволяющие открывать страницы второго уровня. В качестве гиперссылок будем использовать не только текст (например, фамилии), но и изображения (например, небольшие портреты). Каждая персональная страница будет содержать текстовую (биографические сведения) и графическую информацию (портреты, фотографии памятных мест). Внизу расположим гиперссылку, обеспечивающую возврат на главную страницу сайта, и две ссылки для перехода с одной персональной страницы на другую. Заранее подготовим все изображения. Поместим их во вложенную папку pismen/Ris/. Непосредственное конструирование начнем с персональных страниц, которые оформим в едином стиле. Напомним, что для облегчения подбора элементов оформления можно использовать готовый шаблон оформления. В редакторе FrontPage предлагается несколько шаблонов — Тем. Тему можно применять к отдельным страницам, а также ко всему сайту. В последнем случае при создании каждой новой страницы тема устанавливается автоматически. Образовательный портал www.adu.by/ Национальный институт образования 1 56 Глава 1 Рис. 1.48 Пример 1. Создать веб-страницу «Янка Купала» (рис. 1.48). Запустим редактор FrontPage. Откроется пустая страница с установленными по умолчанию параметрами. Проверим кодировку (Windows-1251 — Кириллица). Цвет фона или фоновый рисунок всей страницы задаются в диалоговом окне Свойства страницы на вкладке Форматирование, которая вызывается с помощью меню Формат ^ Фон. Мы создадим свой шаблон оформления страниц на основе изображения рамки. Используем его в качестве фона таблицы. Вставим таблицу из одной ячейки. В диалоговом окне Свойства таблицы зададим ее ширину (720 пикселей) и высоту (560 пикселей) в соответствии с размерами рамки, установим флажок Использовать фоновый рисунок и укажем имя файла ramka.gif. В эту таблицу вставим еще три таблицы шириной 80 %: из одной Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 57 Рис. 1.49 ячейки — для размещения заголовка, из двух — для рисунка и биографии, и из трех — для текстовых гиперссылок. Оформим страницу в соответствии с рисунком 1.48: скопируем заранее подготовленный текст из файла biograf.txt, вставим рисунок из файла kupala.jpg. Заметим, что можно использовать и одну таблицу с объединенными ячейками, но в ней труднее размещать объекты в требуемых местах. Сохраним страницу под именем Kupala.htm в папке pismen. Аналогично оформим персональные страницы «Якуб Колас» (файл Kolas. htm) и «Максiм Багдановiч» (файл Bagdanovich.htm). Главную страницу (файл index.htm) оформим в соответствии с рисунком 1.49. Напомним, что сайт представляет собой совокупность веб-страниц, связанных гиперссылками. Для создания гиперссылки требуется выделить текст или ри- Образовательный портал www.adu.by/ Национальный институт образования 58 Глава 1 сунок и задать адрес перехода (адрес веб-страницы, имя файла или документа) по данной ссылке. В качестве гиперссылок могут выступать слова, группы слов, изображения. Текстовые ссылки обычно выделяются цветом и подчеркиванием, а графические — рамкой. Благодаря этому они отличаются от обычного текста и других элементов страницы. По умолчанию ссылки на непросмотренные страницы отображаются синим цветом, а на просмотренные — фиолетовым. Пр имер 2. Создать текстовые и графические гиперссылки между страницами веб-сайта «Песняры беларускай зямлi». Для создания гиперссылки выделим портрет Янки Купалы и подпись. С помощью кнопки Добавление гиперссылки на стандартной панели инструментов или команды Вставка ^ Гиперссылка вызовем диалоговое окно, в котором укажем адрес перехода Kupala.htm (рис. 1.50). Аналогичным образом создадим все ссылки в соответствии со схемой навигации по сайту (см. рис. 1.47). Вызванная щелчком мыши по ссылке страница по умолчанию открывается в текущем окне браузера. Можно задать ее открытие в новом окне браузера. Для этого в диалоговом окне Добавление гиперссылки щелкают по кнопке Выбор рамки и в открывшемся окне Конечная рамка выбирают вариант Новое окно. Рис. 1.50 Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 59 I Заметим, что в редакторе FrontPage создание гиперссылок выполняется в режиме работы Конструктор, а проверить работу гиперссылок можно в режиме Просмотр. Ссылки могут обеспечивать переход к веб-страницам или иным документам, например рисункам, презентациям, видеофрагментам, расположенным как на данном сайте (внутренние ссылки), так и на других сайтах (внешние ссылки). Переходы внутри документа выполняют внутристраничны.е гиперссылки. Они облегчают навигацию по странице, например быстрый переход из конца страницы в начало. Перед созданием внутристраничных ссылок нужно сначала расставить закладки. Для этого курсор мыши устанавливают в том месте страницы, куда предполагается переход по ссылке. Затем с помощью команды Вставка ^ Закладка вызывают диалоговое окно Закладка, в котором вводят имя закладки, например начало (рис. 1.51). Далее в окне Добавление ссылки выбирают вариант Связать с местом в документе и указывают требуемую закладку (рис. 1.52). Добавление гиперссылки Связать с; Тека: «Выделенный фрагмент документа» Подсказка... файлом, вебстраницей Выберите место в документе; 1] новым документом В- Закладки начало Выбор рамки... Стиль... Рис. 1.52 Образовательный портал www.adu.by/ Национальный институт образования L 60 Глава 1 В качестве гиперссылок на веб-страницах нередко используют кнопки, которые при наведении на них курсора могут изменять свои цвет и форму. В редакторе FrontPage предусмотрена возможность размещения таких кнопок. Для этого в меню Вставка ^ Веб-компонент выбирают компонент Интерактивная кнопка. Затем в появившемся диалоговом окне Меняющиеся кнопки выбирают кнопку нужной формы и задают ее параметры и эффекты. 1. Какие элементы могут выступать в качестве гиперссылок? 2. На какие объекты может указывать гиперссылка? Упражнение 1. Создайте фрагмент веб-сайта «Галерея ученых» (писателей, спортсменов, музыкантов и т. п.), оформив его по приведенным образцам. Гиперссылки на главной странице представьте в виде миниатюр c подписями внизу. , CFSKasLOSTNSiaT НИКОЛАЙ КОПЕРНИК (1473—1543) Николай Коперник первым предложил гелиоцентрическую модель Солнечной системы, согласно которой в центре находится Солнце, а Земля и другие планеты движутся вокруг по замкнутым орбитам, а не держатся на невидимых кристаллических сферах. Запрещал публикацию своих работ до смерти. [ j К списку ученых [^ ] Назад Вперед [^] Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 61 5.5. Публикация сайта Публикацией сайта называют его размещение на сервере или локальном компьютере с возможностью вызова из сети (глобальной или локальной). Процесс публикации сайта заключается в переносе файлов сайта на сервер. Адрес перенесенного сайта может быть, например, таким: www.poets.webserver.by. Для публикации сайта, подготовленного в редакторе FrontPage, необходимо с помощью команды Файл ^ Опубликовать узел вызвать диалоговое окно Свойства удаленного веб-узла. Для размещения созданного сайта на сервере в строке Расположение удаленного веб-узла следует указать адрес ftp-узла, который для всех пользователей является одинаковым, и нажать кнопку ОК. В появившемся окне Требуются имя и пароль вводят имя и пароль, которые понадобятся в дальнейшем для обновления, добавления или удаления размещенных на сайте материалов. Нажатие кнопки ОК открывает окно, на левой панели которого (Локальный веб-узел) (рис. 1.53) отображаются файлы и папки, содержащие страницы и ри- J Q ввб-узел Представление Содержимое папки и Свойаеа удаленного веб-узла... Оптимизиров Локальный веб-узел C:\Users\pismen Удаленный веб-узел (3 i Имя Состояние Изменен Имя Состояние Изменен Jl ris Jl ds ■» ^ index.htm Не сопос... 27.05.201t ^ index.htm Не сопос... 25.05.201t ^ Kolas.htm Не измен... 27.05.201t И- ^ Kolas.htm Не измен... 27.05.201t ^ Kupala.htm Не измен... 27.05.201t ^ Kupala.htm Не измен... 27.05.201t ^ ^ Bogd3novich.htm Не сопос... 27.05.201t 4 ^ Bogdanovich.htm Не сопос... 23.05.201t < L ш -1 ^ 4 1 tij ...1 Состояние---------------------------------- Состояние последней публикации: нет данных Завершено: Посмотреть удаленный веб-Узел Открыть удаленный веб-узел в Frontpage Опубликовать все измененные страницы — @ Локальный на удаленном * О Удаленный нелокальном ©Синхронизация |^^^^оватьве6-узе^ [ Стоп Рис. 1.53 Образовательный портал www.adu.by/ Национальный институт образования u 62 Глава 1 сунки созданного фрагмента веб-сайта. На правой панели этого окна (Удаленный веб-узел) отображаются файлы и папки, уже размещенные на web-сервере, например страницы сайта «Песняры беларускай зямлi» (см. рис. 1.53). Если публикация выполняется впервые, правая панель пуста. Выберем требуемый режим, например Все файлы локального веб-узла копировать на сервер, и нажмем кнопку Опубликовать веб-узел. Как только копирование всех файлов завершится, пользователь сможет просмотреть размещенный в сети сайт. Для этого в строке браузера вводится адрес, например www.poets.webserver.by. 1. Что понимают под публикацией сайта? 2. Какие действия надо выполнить для публикации сайта, подготовленного в редакторе Frontpage? § 6. Создание фрагментов сайтов по различным предметным областям Изучив этапы разработки веб-сайтов и основные приемы работы в редакторе Front Page, мы можем создавать сайты, посвященные различным предметным областям. Пр имер. Создать фрагмент веб-cайта «Замки Беларуси» (рис. 1.54, 1.55). Рис. 1.54 Образовательный портал www.adu.by/ Национальный институт образования Основы веб-конструирования 63 I Рис. 1.55 Создадим фрагмент сайта из пяти страниц: главной страницы с маленькими картинками и четырех страниц, посвященных замкам. Все страницы будем сохранять в файлах с соответствующими именами в одной папке, например zamki. Заранее подготовленные изображения поместим во вложенную папку zamki /ris/. Оформим страницы в одном стиле в соответствии с рисунком 1.55. Вставим таблицу с одной ячейкой. Установим ширину 640 и высоту 480 пикселей. В качестве фона таблицы используем изображение свитка из файла svitok.gif. Вставим еще одну таблицу из одного столбца и четырех строк. В первой строке разместим заголовок. Во вторую строку вставим рисунок, например из файла nesvizh.jpg, в третью — поместим текст из файла zamki.txt. В четвертой строке разместим разделительную линию, тексты ссылок и изображения стрелок из файлов или Коллекции клипов. Главную страницу оформим в соответствии с рисунком 1.54. В таблице из двух столбцов и двух строк разместим используемые в качестве гиперссылок картинки с подписями. Создадим гиперссылки для переходов со страницы на страницу. Просмотрим страницы в браузере. Проверим работу гиперссылок. Образовательный портал www.adu.by/ Национальный институт образования 64 Глава 1 Упражнение Создайте фрагмент сайта (не менее 3 — 4 страниц, содержащих текст и изображения) по одной из тем учебных предметов. Беларуская л1таратура. Жыццё Ефрас1нн1 Полацкай. Жыццё i творчасць К1рылы Тураускага. Францыск Скарына — першадрукар i асветн1к. М1кола Гу -соуск!. Песня пра зубра. Адам М1цкев1ч. Франц1шак Багушэв1ч. Кандрат Крапiва. Васiль Быкау. Беларуская паэзiя ХХ стагоддзя. Русская литература. А. С. Пушкин. М. Ю. Лермонтов. Н. В. Гоголь. Н. А. Некрасов. А. Н. Островский. И. С. Тургенев. Ф. М. Достоевский. Л. Н. Толстой. А. П. Чехов. М. Горький. Серебряный век русской культуры. Русская поэзия ХХ века. Всемирная история. Первая мировая война. Октябрьская революция. Образование СССР Начало Великой Отечественной войны. Блокада Ленинграда. Сталинградская битва. Курская дуга. Партизанское движение. Операция «Багратион». Капитуляция Германии. Основание ООН. Распад СССР Образование СНГ. Гiсторыя Беларусi. Грунвальдская бiтва. Першая сусветная вайна на бела-руск!х землях. Гады грамадзянскай вайны. Вялiкая Айчынная вайна. Партызанскi рух. Вызваленне Беларусi. Помнiкi гiсторыi. Стварэнне Рэспублiкi Беларусь. География. Великие географические открытия. Страны и континенты (Природные условия. Погода и климат. Население. Промышленность. Сельское хозяйство). Геоэкологические проблемы. Изменение климата. Загрязнение окружающей среды. Охрана природы. Биология. История открытия клетки. Строение клетки. Обмен веществ. Фотосинтез. Экосистема. Происхождение жизни. Биологическая эволюция. Происхождение и эволюция человека. Биосфера — живая оболочка планеты. Человек и окружающая среда. Влияние различных факторов среды на человека. Математика. Графики функций. Тригонометрические функции. Показательная и логарифмическая функции. Правильные многоугольники. Пространственные фигуры. Многогранники и их изображения. Тела вращения. Физика. Электромагнитная индукция. Гармонические колебания. Маятники. Волны. Звук. Электромагнитные колебания. Производство и передача электрической энергии. Электромагнитные волны. Шкала электромагнитных волн. Интерференция. Дифракция. Законы преломления. Оптические приборы. Химия. Периодическая система химических элементов Д. И. Менделеева. Атомы и молекулы. Неорганические соединения. Кислород. Сера. Азот. Фосфор. Углерод. Кремний. Металлы. Химическое строение органических соединений. Углеводороды. Переработка нефти. Синтетические моющие средства. Углеводы. Азотсодержащие органические соединения. Аминокислоты. Синтетические высокомолекулярные соединения. Применение полимеров. Белки. Образовательный портал www.adu.by/ Национальный институт образования АВ ИИАВ 1А 2 ОСНОВЫ АЛГОРИТМИЗАЦИИ И ПРОГРАММИРОВАНИЯ В этой главе рассмотрены примеры решения задач из различных предметных областей. Решение любой задачи с помощью компьютера содержит несколько этапов: анализ исходных данных и возможных результатов, построение математической модели изучаемого объекта, выбор метода решения, составление алгоритма решения, написание и отладка программы, тестирование программы. Особый интерес представляет решение задач с использованием графических возможностей языка программирования. Графические элементы улучшают наглядность и выразительность представляемой информации в любой предметной области. § 7. Выполнение практических заданий из различных предметных областей 7.1. Построение геометрических фигур Мы уже умеем работать с растровой и векторной графикой в графических редакторах, а также программировать рисование простых изображений. Применим наши умения для построения геометрических фигур. Начнем с чертежа простой детали. Чертеж является основным документом любого производства. По чертежам изготавливают детали, собирают машины, строят дома, шьют одежду. На уроках черчения Вы учились выполнять чертежи на бумаге. Современное же производство немыслимо без компьютерных систем автоматического проектирования (например, AutoCAD, Kompas). Напомним, что в среде программирования PascalABC изображения можно формировать из простых геометрических фигур (графических примитивов), например точек, отрезков, прямоугольников, окружностей, эллипсов. Рисование осуществляется в графическом окне. Начало системы координат находится в левом верхнем углу окна, ось абсцисс направлена вправо, а ось ординат — вниз. Библиотека стандартных графических процедур хранится в модуле GraphABC (Приложение 3). При работе с изображениями в среде PascalABC удобно все данные вводить и выводить в графическом окне. Совмещать работу с текстом и графикой в одном окне можно, подключив модули crt и GraphABC одновременно. Образовательный портал www.adu.by/ Национальный институт образования 66 Глава 2 Пр имер 1. Составить программу, которая выполняет чертеж детали (рис. 2.1) и вычисляет ее площадь. Масштаб: 1 клетка — 20 пикселей. Радиус отверстия r в сантиметрах вводится с клавиатуры, AB = BC = 8 см. Определим исходные данные. Радиус отверстия будем вводить в переменную г, размер AB и площадь фигуры будем хранить в переменных a и S. Все переменные будут иметь тип real. Чертеж данной детали можно выполнить рисованием пяти графических примитивов: отрезков AB, BC, CD, окружности с центром O и дуги AED. Определим экранные координаты точек. Пусть точка O имеет координаты (160, 120) (см. рис. 2.1). Тогда с учетом масштаба координаты остальных точек следующие: A(80, 120), B(80, 280), C(240, 280), D(240, 120). Радиус дуги AED равен 80. Радиус окружности на экране вычислим умножением введенного значения r на масштаб. Дробную часть отбросим, чтобы обеспечить целочисленность координат для процедур рисования: trunc(r*20) . Площадь детали складывается из площади квадрата ABCD со стороной а и площади полукруга AED диаметром а за вычетом площади круга радиусом r. Программа может выглядеть так: program Figural; uses crt, GraphABC; var r, a, S: real; begin SetWindowSize(320,320) ; write('Введите r (от 1 до 3) read(r); SetPenWidth(3) ; line(80,120, 80,280); line(80,280 , 240,280) ; line(240,280, 240,120); circle(160,120 , trunc(r*20)) ; arc(160,120, 80, 0,180); a:=8; S : =a*a + Pi*a*a/8-Pi*r*r; write('S = ', S:2:2); end. {Подключение модулей} {Размеры окна} ; {Ввод радиуса} {Толщина пера} {Рисование отрезков} {Рисование окружности} {Рисование дуги} {Вычисление площади} {Форматный вывод} Результат работы программы для r = 2,4 представлен на рисунке 2.2. Конечно, рисовать подобные фигуры можно в любом из изученных Вами графических редакторов и даже с помощью инструментов приложений MS Office. Программирование необходимо в тех случаях, когда требуется изменять свойст- Образовательный портал www.adu.by/ Национальный институт образования Основы алгоритмизации и программирования 67 I Рис. 2.1 Рис. 2.2 ва объектов или производить вычисления. Так, в нашем примере с клавиатуры вводятся значения радиуса отверстия и вычисляется площадь детали. Нетрудно, например, вычислить еще и массу детали, задав толщину и плотность материала. На уроках математики Вы научились изображать пространственные фигуры: призму, пирамиду, цилиндр, конус, шар. Рассмотрим построение пространственных фигур в среде PascalABC. Пр имер 2. Составить программу, которая рисует цилиндр (рис. 2.3) и вычисляет его объем. Масштаб: 1 клетка — 20 пикселей. Радиус цилиндра — 4 см. Высота цилиндра в сантиметрах вводится с клавиатуры. Определим исходные данные. Высоту цилиндра будем вводить в переменную h, радиус и объем будем хранить в переменных r и V. Переменные h и r будут иметь тип integer, а V — тип real. При построении пространственных фигур окружности, не лежащие в плоскости чертежа, изображаются эллипсами. Таким образом, построение цилиндра сводится к рисованию четырех графических примитивов: двух отрезков AB, CD и двух эллипсов с центрами 01 и 02. Заметим, что в задачах с построением фигур следует сначала вычислять требуемые величины, используя заданные и введенные значения, и лишь затем производить переход к экранным координатам с учетом масштаба. Образовательный портал www.adu.by/ Национальный институт образования 1 68 Глава 2 Вычислим объем цилиндра, как произведение площади основания (круга) и высоты V = %r^h. Определим экранные координаты точек. Пусть точка Oj имеет координаты X = 160, у = 120. Произведем пересчет радиуса и высоты с учетом масштабов: r = 20r и h = 20h. Поскольку масштабы учтены, координаты точек выражаются простыми формулами: 02 (x, у + h), A(x — r, у), B (x — r, у + h), C (x + r, у + h), D (x + r, у ). Наконец, нарисуем отрезки и эллипсы. Процедура Ellipse рисует эллипс, который задается описанным около него прямоугольником с координатами противоположных вершин, например: E (х — r, у — 40) и F(х + r, у + 40). Программа может выглядеть так: program Figura2; GraphABC; h, r: integer; uses crt, var x, y begin SetWindowSize(320,320) ; write('Введите высоту readln(h); r:=4; V:=Pi*r*r*h; V: real; :1-8) ') {Размеры окна} { Ввод высоты} {Вычисление} Образовательный портал www.adu.by/ Национальный институт образования Основы алгоритмизации и программирования 69 write('Объем V = ' , V:2:1) ; SetPenWidth(3); SetBrushStyle(bsClear); x:=160; y:=10 0; r:=20*r; h:=20*h; Ellipse(x-r,y-40, x+r,y+40); Ellipse(x-r,y+h-40, x+r,y+h+40) line(x-r,y, x-r,y+h); line(x+r,y, x+r,y+h); end. {Вывод} {Толщина пера} {Cтиль пера} {Экранные координаты} {Учет масштаба} {Рисование эллипсов} {Рисование отрезков} Результат работы программы для h = 7 представлен на рисунке 2.4. 1. Какие графические примитивы можно использовать при построении изображений? 2. Какие модули необходимо подключать, чтобы работать с текстом и графикой в одном окне? Упражнения 1. Составьте программу, которая выполняет чертеж одной из деталей и вычисляет ее площадь. Масштаб: 1 клетка — 20 пикселей. -J- / ч Л: i— Образовательный портал www.adu.by/ Национальный институт образования в 1 70 Глава 2 2. Составьте программу, которая рисует одну из пространственных фигур: а) куб (длина ребра вводится с клавиатуры); б) конус (значения радиуса и высоты вводятся с клавиатуры). 3. Составьте программу, которая рисует: а) выкройку платья (размер a вводится с клавиатуры); б) деталь в виде кольца внешним радиусом 150 и внутренним радиусом 50, в котором вырезаны отверстия радиусом 30. Их центры находятся на расстоянии 100 от центра кольца (число отверстий n вводится с клавиатуры). а б 7.2. Использование растровых изображений Графические возможности языка программирования расширяет использование растровых изображений. Особенно интересно использование фотографий реальных объектов и явлений живой и неживой природы (машин, механизмов, людей, животных, растений), которые практически невозможно создать с помощью стандартных графических примитивов. Процедуры и функции для работы с растровыми изображениями содержатся в модуле GraphABC. Функция LoadPicture(fname) загружает рисунок из файла с именем fname в оперативную память. Загружать можно рисунки в форматах BMP, JPG, GIF, PNG. Каждому загруженному рисунку, хранящемуся во время работы программы в оперативной памяти, присваивается целочисленный описатель (дескриптор) nm:=LoadPicture(fname) . Он передается в качестве первого параметра во все остальные процедуры и функции работы с рисунками. Образовательный портал www.adu.by/ Национальный институт образования Основы алгоритмизации и программирования 71 J Процедура DrawPicture(nm,x,y) выводит рисунок с описателем nm в позицию (x,y) графического окна, а процедура DrawPicture(nm,x,y,w,h) еще и масштабирует изображение, устанавливая его ширину w и высоту h. Если w<0, то рисунок зеркально отражается относительно вертикальной прямой, проходящей через X, если же h<0, то рисунок зеркально отражается относительно горизонтальной прямой, проходящей через y. Пр имер 1. Составить программу, иллюстрирующую принцип действия проекционного аппарата. В проекционном аппарате предмет (слайд, или рисунок на прозрачной пленке) помещают между фокусом и двойным фокусом линзы. На экране получается увеличенное обратное изображение. Для получения на экране прямого изображения слайд переворачивают. Алгоритм программы заключается в загрузке из файла растрового изображения и выводе его на экран после необходимых преобразований (увеличение и переворот). Единственная переменная pic будет иметь тип integer. Прежде всего зададим размеры экрана 640x520 и черный цвет фона. Нарисуем «линзу»: Ellipse(106,220,122,300) . Загрузим изображение из файла (например, robotA.jpg) и поместим его описатель в переменную pic:=LoadPicture( ' robotA.jpg') . С помощью процедуры DrawPicture(pic, 60,310,-50,-10 0) выведем перевернутое изображение размером 50 x 100 пикселей в позицию с координатами верхнего левого угла (60, 310), поставив перед значениями 50 и 100 знаки «минус». Еще раз выведем это изображение, но уже в позицию с координатами (380, 10), изменив его ширину до 250 пикселей, а высоту — до 500 пикселей, т. е. увеличив его в 5 раз: DrawPicture(pic,380,10,250,500). Осталось провести вспомогательные линии, иллюстрирующие построение изображения, и откорректировать положение «линзы». Программа может выглядеть так: program Proector; uses GraphABC; var pic: integer; begin SetWindowSize(640,520); ClearWindow(clBlack); SetBrushColor(clSkyBlue); Ellipse (106,220,122,300) ; pic:=LoadPicture('robotA.jpg') {Размеры окна} {Черный фон} {Линза} {Загрузка из файла} Образовательный портал www.adu.by/ Национальный институт образования изображения 72 Глава 2 DrawPicture(pic, 60,310,-5 0,-10 0); {Вывод изображения, переворот } DrawPicture(pic,380,10,250,500) ; {Увеличение} SetPenColor(clYellow); {Вспомогательные линии} line(60,310, 380,10); line(60,210, 380,510); SetPenColor(clWhite); line(10,310, 630,10); line(10,210, 630,510); end. Результат работы программы представлен на рисунке 2.5. Растровые изображения выводятся в прямоугольные области, которые при создании графических композиций могут перекрывать друг друга. Процедура SetPictureTransparent(nm,b) устанавливает режим прозрачности изображения с описателем nm. По умолчанию режим прозрачности отключен (b=False) . Рис. 2.5 Образовательный портал www.adu.by/ Национальный институт образования Основы алгоритмизации и программирования 73 J Если b=True, то при рисовании фон не отображается. Фоновым считается цвет левого нижнего пикселя рисунка. Растровые изображения можно использовать в качестве образцов для закрашивания фигур кистью. Процедура SetBrushPicture(fname) закрашивает фигуры фоновым рисунком, используя образец, хранящийся в файле fname. В последнее время широкое распространение получили программы, предназначенные для автоматической генерации разнообразных типовых документов, например поздравительных открыток, рекламных плакатов, финансовых документов (накладных, счетов), презентаций. Алгоритмы их работы основаны на использовании шаблонов, которые можно дополнять некоторым содержанием и элементами оформления. Пр имер 2. Составить программу, которая рисует поздравительные открытки. C клавиатуры выбирается тема, и вводится текст поздравления. Будем оформлять все открытки по шаблону: слева — залитый растровым изображением прямоугольник, справа — рисунок сказочного персонажа, сверху — текст поздравления. Номер темы будет вводиться с клавиатуры (переменная tema). Для каждой темы с помощью алгоритмической конструкции выбора case^of зададим имена файлов (переменные fzal, fris), в которых будут храниться подходящие изображения. Например, для темы 1 (зима) используем снежинки (fzal: = ' snow.gif ') как фоновый рисунок и Буратино (fris: = 'buratino.gif') , для темы 2 (весна) — солнышко (fzal: = ' sun.gif ') и Попугая (fris: ='popugai.gif') , для темы 3 (лето) — ромашки (fzal: ='daisy.gif') и Карлсона (fris: =' karlson.gif'), для темы 4 (осень) — листочки (fzal: =' list.gif') и Лису (fris: = 'lisa.gif'). Затем будет вводиться текст поздравления (переменная s), например «С Но- вым годом! Переменные tema и ris будут иметь тип integer, а переменные fzal, fris, s — тип string. Программа может выглядеть так: program Otkrytka; uses crt, GraphABC; var tema, ris: integer; fzal, fris, s: string; begin SetWindowSize(600,400); write('Введите номер темы: 1—зима, 2—весна 4—осень') ; read(tema) ; Образовательный портал www.adu.by/ Национальный институт образования 3—лето, 74 Глава 2 write( 'Введите поздравление ') ; read (s ) ; case tema of { Выбор имен файлов } 1: begin fzal:= snow.gif ' ; fris: ='buratino.gif ' ; end; 2: begin fzal:= sun.gif ' ; f ris: = 'popugai.gif ' ; end; 3: begin fzal:= 'daisy.gif' ; fris: = 'karlson.gif ' ; end; 4: begin fzal:= 'list.gif'; fris: = 'lisa.gif ' ; end; end; ClearWindow; SetPenColor(clLtGray) ; SetBrushPicture(fzal) ; Rectangle(0,0,120,400); ris:=LoadPicture(fris); DrawPicture (ris,380,70, SetBrushStyle(bsClear); SetFontColor(clRed); SetFontSize(34); SetFontStyle(fsBold) ; TextOut(60,40,s); end. 200,320) {Цвет пера} {Установка заливки} {Рисование прямоугольника} {Загрузка изображения из файла} {Вывод изображения} {Прозрачный фон кисти} {Цвет шрифта} {Размер шрифта} {Начертание} { Вывод текста} Результаты работы программы представлены на рисунке 2.6. Во многих задачах требуется исследовать протекание процессов и явлений во времени. Для наглядной демонстрации решения таких задач используют методы анимации. Напомним, что анимацией называют имитацию движения и Рис. 2.6 Образовательный портал www.adu.by/ Национальный институт образования Основы алгоритмизации и программирования 75 J изменения формы и других видимых свойств объектов с течением времени. В 9-м классе мы научились создавать анимации в специальном графическом редакторе. В среде PascalABC изображения можно «оживить» путем их многократного рисования и стирания. Избежать моргания экрана позволяет использование процедуры перерисовки Redraw. Пример 3. Составить программу, которая имитирует движение автомобиля. Пусть автомобиль перемещается на фоне здания и деревьев слева направо на расстояние 400 пикселей. Загрузим изображения фона и автомобиля из файлов gorod.gif и avto.jpg, поместив их описатели в переменные fon и avto. Установим прозрачность фона для изображения автомобиля: SetPictureTransparent (avto,true). Зададим начальные координаты (x,y), ширину w и высоту h изображения автомобиля. Все переменные будут иметь тип integer. Процедуры рисования и стирания будем повторять в цикле с предусловием While до тех пор, пока автомобиль не переместится на 400 пикселей. На каждом шагу цикла координату x левого верхнего угла изображения будем увеличивать на 10. Ширину изображения будем уменьшать на 2 пикселя, а высоту — на 1 пиксель для его уменьшения при удалении. Заметим, что плавность и длительность полученной демонстрации зависит от выбора величины шага (увеличения координаты х), количества кадров (повторений цикла), времени показа кадра (задержки), а также быстродействия компьютера. Программа может выглядеть так: x, y, w, h: integer; program Avto3; uses GraphABC; var fon, avto, begin SetWindowSize(600,300); fon:= LoadPicture('gorod.gif') ; avto:= LoadPicture('avto.jpg'); SetPictureTransparent(avto,true) x:=0; y:=170; w:=240; h:=100; While x<400 do begin ClearWindow; DrawPicture(fon,0,0); DrawPicture(avto,x,y,w,h); {Вывод изображений} Образовательный портал www.adu.by/ Национальный институт образования {Загрузка изображений} {Прозрачный фон} 76 Глава 2 Рис. 2.7 x:=x+10; w:=w-2; sleep (20) ; Redraw; end; h:=h-1; {Задержка на 20 мс} {Перерисовка} end. Первый и последний кадры «анимации» (начальное и конечное положения автомобиля) представлены на рисунке 2.7. Программа в среде PascalABC может манипулировать несколькими изображениями, загружая их сразу или поочередно. При создании нескольких графических объектов в одном окне и импортировании различных изображений можно независимо управлять их свойствами. Интересные фотореалистичные модели получаются при совместном использовании растровой и векторной графики. Пр имер 4. Составить программу «Секундомер»: на фоне фотографии циферблата секундомера поместить движущиеся стрелки, которые останавливаются при нажатии любой клавиши. Загрузим изображение циферблата из файла Timer.jpg, поместив описатель в переменную fon. Зададим координаты центра вращения стрелок (x0,y0) и начальные значения секунд sec:=0 и минут min:=0. На каждом шагу цикла с постусловием repeat^until будем увеличивать значение секунд на 1 до тех пор, пока время не превысит 60 мин, или не будет нажата любая клавиша (keyPressed) . Значения минут будем вычислять целочисленным делением секунд на 60 (min:=sec div 60). Секундную стрелку будем рисовать линией длиной 120 и толщиной 3 пикселя, а минутную — 100 и 7 пикселей. Радианная мера угла поворота секундной стрелки равна Pi*sec/30, а минутной — Pi*min/30. Координаты концов стрелок Образовательный портал www.adu.by/ Национальный институт образования Основы алгоритмизации и программирования 77 (x,y) будем вычислять по формулам тригонометрии и округлять до целых. Например, для секундной стрелки используем формулы: x:=x0+Round(120*sin(Pi*sec/30)); y:=y0-Round(120*cos(Pi*sec/30)). Программа может выглядеть так: program Timer; uses crt, GraphABC; var fon, x0, y0, x, y ,sec, min: integer; begin SetWindowSi ze(360,480) ; HideCursor; x0:=173; y0:=300; sec:=0; min:=0; fon:=LoadPicture('timer.jpg'); repeat ClearWindow; DrawPicture(fon,0,0,360,480); sec:=sec+1; min:=sec div 60; x:=x0+Round(120*sin(Pi*sec/30)) y:=y0-Round(120*cos(Pi*sec/30)) SetPenWidth(3); Line(x0,y0,x,y) x:=x0+Round(100*sin(Pi*min/30)) y:=y0-Round(100*cos(Pi*min/30)) SetPenWidth(7); Line(x0,y0,x,y) sleep(1000); Redraw; until (min>=60) or keyPressed; end. Результат работы программы представлен на рисунке 2.8. {Размеры окна} {Скрытие курсора} {Загрузка изображения} {Рисование циферблата} {Расчет секунд и минут} {Секундная стрелка} {Координаты конца} {Рисование} {Минутная стрелка} { Координаты конца} {Рисование} Изображения каких форматов можно загружать в среде PascalABC? С помощью какой процедуры выводятся растровые изображения? Как можно имитировать движение изображений в среде PascalABC? Как избежать моргания экрана при имитации движения изображений? Рис. 2.8 Образовательный портал www.adu.by/ Национальный институт образования 1 2 3 4 78 Глава 2 Упражнения 1. Составьте программу, которая загружает из файлов и выводит на экран: а) портреты ученых (например, Эйнштейна, Резерфорда, Бора), писателей (например, Купалы, Коласа, Быкова), художников, композиторов; б) изображения животных, растений, памятников архитектуры. 2. Составьте программу, которая: а) рисует рекламные плакаты (турфирмы, концерта, спортивного праздника); б) генерирует меню школьной столовой. 3. Составьте программу, которая имитирует падение брошенного с башни яблока. Образовательный портал www.adu.by/ Национальный институт образования Основы алгоритмизации и программирования 79 J 7.3. Построение графиков и диаграмм Исследование законов природы и общества немыслимо без построения разнообразных графиков и диаграмм. На уроках математики Вы исследуете функциональные зависимости и строите графики. Замечательными возможностями обработки и представления данных в виде разнообразных графиков и диаграмм обладают электронные таблицы MS Excel, которые Вы изучали в 10-м классе. Познакомимся с построением графиков и диаграмм в среде PascalABC. Пр имер 1. Составить программу, которая строит график зависимости y(x) = 0,4x + 2sin3x на промежутке [ — 15; 15]. Определим исходные данные. Прежде всего зададим размеры окна и построим оси координат. Пусть начало отсчета имеет экранные координаты x0 = 32 0, y0=200. Для построения графика необходимо выбрать масштаб. Зададим множитель k=2 0 (единице на графике соответствуют 20 пикселей на экране). Выполнять вычисления и построения будем в цикле While, пока х<=15. Сначала запишем функцию y:=0.4*x+2*sin(3*x). Затем перейдем к экранным координатам: x1:=trunc(x0+x*k) ; y1:=trunc(y0-y*k). Дробную часть отбросим, чтобы обеспечить целочисленность. На каждом шагу цикла будем рисовать окружности небольшого радиуса (например, 2) с координатами центра (x1,y1) , которые сольются в линию. Для этого приращение аргумента выберем маленьким, например x:=x+0.0 2. Начальное значение x = —15 зададим перед циклом While. Переменные x0, y0, x1, y1, k будут иметь тип integer, а переменные x, y — тип real. Программа может выглядеть так: y1, k: integer; x, y: real; program Grafik; uses GraphABC; var x0, y0, x1, begin SetWindowSize(640,400); x0:=320; y0:=200; k:=20 line(20,y0, 620,y0); line(x0,20, x0,380); s e tPe nCo l or ( cl Re d) ; x:=-15; While x<=15 do Образовательный портал www.adu.by/ Национальный институт образования {Ось {Ось абсцисс} ординат} {Цвет пера} {Начальное значение аргумента} 1 80 Глава 2 begin y:=0.4*x+2*sin(3*x) x1:=trunc(x0+x*k); y1:=trunc(y0-y*k); circle(x1,y1,2); x:=x+0.02; end; {Функция} {Экранные координаты} end. Результат работы программы показан на рисунке 2.9. При необходимости на осях координат несложно нарисовать деления. Например, с помощью цикла for с параметром i, который изменяется от 0 до 30, на оси абсцисс можно отметить 31 деление через 20 пикселей. На оси ординат с помощью цикла for с параметром i, который изменяется от 0 до 20, можно отметить 21 деление. Фрагмент программы может выглядеть так: line(20+k*i,195, 20+k*i,205); {Деления по оси абсцисс} line(315,20+k*i,325,20+k*i); { Деления по оси ординат} Образовательный портал www.adu.by/ Национальный институт образования for i: =0 to 30 do for i: =0 to 20 do Основы алгоритмизации и программирования 81 J Эффективным средством наглядного представления данных являются диаграммы. Они облегчают сравнение данных, помогают выявлению закономерностей их изменения. Вместо кропотливого сравнения чисел достаточно бросить взгляд на диаграмму, чтобы увидеть, снижается или растет температура, урожайность, цена или объем продаж. В 10-м классе Вы познакомились с построением диаграмм в электронных таблицах. Рассмотрим теперь пример программирования круговых диаграмм. Круговые диаграммы применяют в случаях, когда необходимо показать долю каждой составляющей в общем объеме данных, например структуру посевов, распределение оценок по классам и предметам, цену каждого товара в общей стоимости, состав сплава или смеси и т. п. Напомним, что данные, которые предполагается использовать многократно, удобно хранить в массивах. Пример 2. В массивах хранятся данные о площадях посевов зерновых культур. Составить программу, которая вычисляет, какой процент в общей площади посевов зерновых составляет площадь посевов каждой культуры, выводит данные и строит круговую диаграмму. Данные о площадях посевов зерновых культур будем хранить в массиве целочисленных констант A, а их названия — в массиве строковых констант B: Const A: array[1. .5] of integer = (47, 63, 22, 27, 12) ; B: array[1..5] of string = ('Рожь ','Пшеница', 'Овес ' , 'Ячмень', 'Гречиха');. Круговая диаграмма будет состоять из 5 секторов. Градусная мера каждого сектора будет определяться значением соответствующего элемента массива. Прежде всего в цикле for вычислим суммарную площадь всех посевов S (ей соответствует угол 360°). Площади г-й культуры будет соответствовать угол A[i]*360/S. Для построения каждого сектора нужно знать значения двух углов: начально -го u0 и конечного u. Первый сектор будем строить от начального угла u0:=0. В цикле for будем вычислять значение конечного угла u:=u0 + round(A[i]*3 60/S) . Следующий сектор будем строить уже от этого угла, поэтому его начальный угол будет равен конечному углу предыдущего сектора u0:=u. Цвет сектора будем задавать случайным образом. Переменные u, u0, S, i, а также элементы массива A будут иметь тип integer, элементы массива B — тип string. Образовательный портал www.adu.by/ Национальный институт образования i 82 Глава 2 Программа может выглядеть так: program Diagram2; uses crt, GraphAbc; const A: array[1..5] of integer = (47, B: array[1..5] of string = ('Рожь 'Ячмень', 'Гречиха'); var u, u0, S, i: integer; begin SetWindowSize(400,400); S:=0 for i:=1 to 5 do S:=S+A[i]; 63, 22, 27, 12) .'Пшеница', 'Овес u0:=0; {Вычисление суммарной площади посевов} to 5 do for i : =1 begin Writeln(B[i],' ',A[i],' га ',round(100*A[i]/S), SetBrushColor(rgb(random(255), random(255),random(255))); u:=u0+round(A[i]*360/S) '); Pie(220,240,140,u0,u) u0:=u; {Вычисление конечного угла сектора} {Рисование сектора} {Новое значение начального угла следующего сектора} end; еnd. Результат работы программы приведен на рисунке 2.10. В некоторых задачах может требоваться определенный цвет каждого сектора. Его удобно определять в массиве целочисленных констант, напри-мер так: col: array[1..5] of integer = =(clYellow,clLime,clOlive, clBrown,ClRed); и задавать в цикле так: CRT - программа завершена Рожь Пшеница 63 га 37 % Овес Ячмень Гречиха 47 га 27 % 22 га 13 % 27 га 16 % 12 га 7 % Ф SetBrushColor(col[i]);. Образовательный портал www.adu.by/ Национальный институт образования Рис. 2.10 Основы алгоритмизации и программирования 83 I В случаях, когда необходимо указывать не только численное значение, но и направление исследуемых величин, используются лепестковые диаграммы. Такие диаграммы Вы использовали в географии при построении розы ветров. Пр имер 3. Составить программу, которая строит розу ветров (рис. 2.11). Данные метеорологических наблюдений за месяц хранятся в массиве. Данные наблюдений о количестве дней с преобладающими ветрами определенного направления будем хранить в массиве констант N типа integer. Диаграмму будем строить на фоне изображения контурной карты Беларуси. Загрузим рисунок из файла karta.gif, поместив его описатель в переменную р. Линии на карте соответствуют восьми основным направлениям ветров (В, СВ, С, СЗ, З, ЮЗ, Ю, ЮВ), а радиусы окружностей — количеству дней с преобладанием этих ветров. Пусть центр диаграммы имеет координаты x0,y0. С помощью цикла for с параметром к, который изменяется от 1 до 8 в соответствии с количеством на- правлений ветра, будем вычислять координаты точек, соответствующих количеству дней с ветрами каждого направления: x:=x0+trunc(2 0*N[k]*cos(u)) ; y:=y0-trunc(20*N[k]*sin(u)) ; где направление ветра определяется углом u (отсчитывается от восточного). Соединим эти точки линиями: lineTo(x,y) . Программа может выглядеть так: 4, 7, real; program roza_vetrov; uses crt, GraphABC; const N: array[1..8] of integer = (2, 1 var x0, y0, x, y, k, p: integer; u: begin SetWindowSize(420,420) ; HideCursor; p:=LoadPicture('karta.gif'); DrawPicture(p,10,10); {Вывод SetPenColor(clRed) ; SetPenWidth(5) ; Образовательный портал www.adu.by/ Национальный институт образования 4, 2, 4, 3); изображения карты} 84 Глава 2 x0:=210; y0:=210; {Начало системы координат} u:=0; moveTo(x0+20*N[1],у0); for k:=1 to 8 do begin x:=x0+trunc(20*N[k]*cos(u)); y:=y0-trunc(20*N[k]*sin(u)); lineTo(x,y); u:=u+pi/4; end; lineTo(x0+20*N[1],y0); end. Результат работы программы приведен на рисунке 2.11. Упражнения 1. Составьте программу, которая строит график зависимости: а) y(x) = 0,5x • cos 2x на промежутке [ — 12; 12]; б) y(x) = 8 sinx • sin 2x на промежутке [ — 15; 15]. а Г GraphABC - программа завершена hl\f\^ 1 1 1 \ J \ А Л Л 1 X*/ \ ! \ i 1 ^ 1 II \ / \у II If ^ у Основы алгоритмизации и программирования 85 J 2. Составьте программу, которая строит круговую диаграмму, иллюстрирующую: а) распределение результатов тестирования по трем предметам (данные вводятся с клавиатуры); б) химический состав земной коры (данные вводятся с клавиатуры: кислород — 47,2 %, кремний — 27,6 %, алюминий — 8,3 %, железо — 5,1 %, кальций — 3,6 %, другие элементы — 8,2 %). § 8. Выполнение практических заданий по темам учебных предметов 8.1. Астрономия Пр имер 1. Составить программу, демонстрирующую фазы Луны (изображения Луны загружаются из файлов). Демонстрация фаз Луны заключается в смене на экране 28 изображений Луны, соответствующ^их каждому дню лунного месяца. Эти изображения будут поочередно загружаться из файлов и демонстрироваться с задержкой в 500 мс. Используем цикл for с параметром i, который изменяется от 1 до 28 в соответствии с номером дня. Имя файла imf будет иметь тип string. Сформируем его путем слияния слова ' luna', преобразованного в строку номера дня IntToStr(i) , и расширения имени файла с изображением в формате .gif (перед «gif» не забудем поставить точку): imf: = 'luna'+IntToStr(i) + ' .gif'. Программа может выглядеть так: program Luna; uses GraphABC; var p, i: integer; begin SetWindowSize(300,300); for i: =1 to 2 8 do begin imf:='luna'+IntToStr(i)+'.gif'; {Формирование имени файла} imf: string; {Размеры окна} p:=LoadPicture(imf); DrawPicture(p,0,0) sleep(500); end; {Загрузка изображения из файла} {Вывод изображения} end. Образовательный портал www.adu.by/ Национальный институт образования I 86 Глава 2 Кадры Рис. 2.12 Протестируем программу. На рисунке 2.12 показаны кадры 4, 8, 14, 20 и 24 (фазы Луны в соответствующие дни лунного месяца). При моделировании и демонстрации различных процессов и явлений их параметры могут задаваться путем ввода с клавиатуры. Пр имер 2. Составить программу, которая демонстрирует увеличение изображения Луны в телескопе. Коэффициент увеличения вводится с клавиатуры. Загрузим изображения звездного неба и Луны из файлов sky.gif и luna2.gif, поместив их описатели в переменные nebo и luna. Установим прозрачность фона для изображения Луны: SetPictureTransparent (luna, true) . Зададим начальные координаты (x:=200; y:=200 ;), ширину и высоту изображения (w:=100; h:=100). Коэффициент увеличения будем вводить с клавиатуры и помещать в переменную k. Переменные nebo, luna, x, y, w, h будут иметь тип integer, переменная k — тип real. Процедуры рисования и стирания будем повторять в цикле с предусловием While. Пусть на каждом шагу цикла ширина и высота изображения увеличиваются на 10 пикселей, пока не будет достигнуто требуемое увеличение k, т. е. пока ширина изображения не станет равной k*100. Чтобы положение центра изображения Луны при этом оставалось неизменным, координаты левого верхнего угла изображения на каждом шагу будем уменьшать на 5. Программа может выглядеть так: program Teleskop; uses crt, GraphABC; var nebo, luna, x, y, w, h: integer; k: real; begin SetWindowSize(500,500); nebo:=LoadPicture('sky.gif'); DrawPicture(nebo,0,20,500,500); Образовательный портал www.adu.by/ Национальный институт образования Основы алгоритмизации и программирования 87 J luna:=LoadPicture('luna2.gif'); SetPictureTransparent(luna,true)i x:=2 0 0 ; y:=2 0 0; w:=100 ; h:=100; DrawPicture(luna,x,y,w,h); write('Введите увеличение (<=5), read(k); while w=ur0, т. е. пока не будет достигнут безопасный уровень радиации. Программа может выглядеть так: program Ecolog; var ur0, ur: real; begin write('Начальный readln(ur); p:=5; ur0:=10; t:=0; while ur>=ur0 do begin ur:=ur-ur*p/100 ; t:=t+1; end; Write('Через ' , t, ' дней . ') p, t: integer; уровень '); {Начальные значения} end. Результат работы программы может выглядеть так: Пр имер 2. Составить программу, которая имитирует наблюдение клетки под микроскопом. Для увеличения используются клавиши управления курсором. Загрузим изображение клетки из файла kletka.jpg, поместив его описатель в переменную img. Зададим начальные координаты x,y левого верхнего угла изображения, его ширину w и высоту h. Процедуры рисования будем повторять в цикле с постусловием Repeat. C помощью функции ReadKey символ нажатой клавиши будет считываться и помещаться в переменную c типа char. При нажатии клавиши управления курсором «стрелка вверх» (c=#72) ширина и высота изображения увеличатся на 2*d=10 пикселей (d=5), а при нажатии клавиши «стрелка вниз» Образовательный портал www.adu.by/ Национальный институт образования I 96 Глава 2 (c=#80) — уменьшатся (d=-5). Чтобы положение центра изображения при этом оставалось неизменным, будем изменять соответствующим образом координаты его левого верхнего угла. При нажатии клавиши Esc (c=#2 7) работа программы завершится. Переменные img, x, y, w, h, d будут иметь тип integer, переменная с — тип char. Программа может выглядеть так: program Microscop; uses crt, GraphABC; var img, x, y, w, h, d: integer; c: char; begin SetWindowSize(400,260); img:=LoadPicture('kletka.jpg '); x : =0 ; y: =0 ; w:=4 0 0; h:=2 60; repeat ClearWindow(clSkyBlue); DrawPicture(img,x,y,w,h) d:=0; c:=ReadKey; if c=#72 then d:=5; {Начальные координаты} {Размеры изображения} {Вывод изображения} {Стрелка вверх — увеличение} {Стрелка вниз — уменьшение} if c=#80 then d:=-5; w:=w+2*d; h:=h+2*d; x:=x-d; y:=y-d; until c=#27; end. Результаты работы программы представлены на рисунке 2.18. Рис. 2.18 Образовательный портал www.adu.by/ Национальный институт образования Основы алгоритмизации и программирования 97 I Пример 3. Первоначально участок леса содержит 80 тыс. куб. м древесины. Ежегодный естественный прирост составляет P %, а вырубка — D тыс. куб. м. Составить программу, которая вычисляет ежегодные объемы древесины для T лет и результаты выводит в таблицу (рис. 2.19). Значения P (от 2 до 8 %), D (от 3 до 8 тыс. куб. м) и T (от 2 до 20 лет) вводятся с клавиатуры. Значения объема древесины будем хранить в переменной V, а прирост, объем вырубки и количество лет будем вводить с клавиатуры в переменные P, D и T. Переменные P, D, V будут иметь тип real, а количество лет T и счетчик цикла i — тип integer. За счет естественного прироста объем древесины каждый год увеличивается на V*P/10 0 по сравнению с предыдущим, а вследствие вырубки уменьшается на D, т. е. определяется выражением V:=V*(1+P/100)-D;. ^ CRT - программа завершена Прирост {от 2 до 8 %) 3 Вырубка (от 5 до 15 тыс. куб. м) 11 время (от 2 до 20 Год Объем, тыс 0 80.0 1 71.4 2 62.5 3 53.4 4 44.0 5 34.3 6 24.4 7 14.1 8 3.5 Рис. 2.19 Вычисления и вывод результатов в строки таблицы будем повторять в цикле while до тех пор, пока не будет достигнуто заданное количество лет (i<=T) и лес не будет вырублен (V>=0) . Программа может выглядеть так: program Les; uses crt, GraphABC; var P, D, V: real; begin write('Прирост r e a dl n( P) ; write('Вырубка readln(D); write('Время v : =8 0; i:=0; writeln('----- writeln( T, (от 2 до 8 (от 5 до 15 от 2 до 20 л integer; ) '); тыс . {Bвод данных} куб. м) ' ); ') ; readln(T); {Начальные значения} '); Год Объем, тыс. куб. м'); {Заголовок таблицы} Образовательный портал www.adu.by/ Национальный институт образования 98 Глава 2 while (i<=T) and (V>=0) do begin writeln(i:3, V:12:1); {Вывод результатов} V:=V*(1+P/100)-D; i:=i+1; end; end. Результат работы программы представлен на рисунке 2.19. Заметим, что повторение цикла прекращено раньше введенного времени (15 лет), поскольку уже к 9-му году лес будет вырублен. Упражнение Составьте программу, которая вычисляет: а) через сколько дней уровень загрязнения воды отходами уменьшится в N раз, если каждый день он уменьшается на P % (значения N и P вводятся с клавиатуры); б) через сколько дней количество атомов радиоактивного изотопа Иод-131 уменьшится в 100 раз, если период полураспада (время уменьшения количества атомов вдвое) составляет 8,14 дня; в) через сколько дней выздоровеет больной, т. е. через сколько дней концентрация болезнетворных бактерий в крови уменьшится с 50 до 12 единиц. В результате применения лекарства концентрация бактерий ежедневно уменьшается на 20 % по сравнению с предыдущим днем. 8.4. Физика Построение изображения в линзе. На уроках физики изображения в линзах строятся с помощью линейки и карандаша. При этом для каждого нового положения предмета приходится повторять все вычисления и построения. С помощью компьютерной программы можно легко строить изображения, изменяя расстояние d от линзы до предмета, а также его высоту h (рис. 2.20). Пр имер 1. Составить программу, демонстрирующую построение изображения в собирающей линзе. Загрузим из файла Linza.jpg изображение собирающей линзы на фоне координатной сетки p:=LoadPicture('Linza.jpg') . С помощью процедуры DrawPicture(p,0,0) выведем это изображение в позицию с координатами левого верхнего угла сетки (0,0) . Размеры изображения будут соответствовать размерам графического окна 800x480, одно деление сетки будет равно 40 пикселям. Пусть центр линзы O Образовательный портал www.adu.by/ Национальный институт образования Основы алгоритмизации и программирования 99 1 Рис. 2.20 имеет координаты x0 = 320, y0=240, фокусное расстояние равно F = 120. На оптической оси линзы отмечены фокусы и двойные фокусы. Будем помещать предмет высотой h (например, отрезок красного цвета толщиной 7 и высотой 70 пикселей) на расстоянии d от линзы: line(x0-d,y0, x0-d, y0-h) . Высоту предмета будем изменять в программе, а расстояние d будем вводить с клавиатуры. Границы изменения d и h подберем так, чтобы изображение не выходило за пределы экрана, например для h = 70 расстояние d > 160. На основании формулы тонкой линзы вычислим расстояние от линзы до изображения s:=F*d/(d-F) и высоту изображения hi:=h*s/d. Округлим полученные значения до целых и выведем на экран. Построим изображение — отрезок line (x0 + s , у0 , x0 + s,y0+hi). Наконец проведем вспомогательные линии, которые проходят через фокусы или оптический центр линзы и иллюстрируют построение изображения. Программа может выглядеть так: program Linza; uses crt, GraphABC; var p, x0, y0, F, h, d, s, hi: integer; Образовательный портал www.adu.by/ Национальный институт образования 100 Глава 2 begin SetWindowSize(800,480); p:=LoadPicture('linza.jpg '); DrawPicture(p,0,0) ; {Линза} x0:=320; y0:=240; F:=120; h:=70; {Высота предмета} write('Расстояние от линзы до предмета (>160) d = '); readln(d); SetPenColor(clRed); SetPenWidth(7); line(x0-d,y0, x0-d,y0-h); s:=round(F*d/(d-F)); hi:=round(h*s/d); writeln('s = ',s, ' hi = line(x0 + s,y0 , x0 + s,y0+hi) {Рисование предмета} {Расчеты и округление} ',hi); {Вывод значений s и hi} ; {Рисование изображения} SetPenColor(clYellow) ; SetPenWidth (2) ; line(x0-d,y0-h, x0+s,y0+hi); {Рисование хода лучей} line(x0-d,y0-h, x0,y0-h); line(x0,y0-h, x0+s,y0+hi); line(x0-d,y0-h, x0,y0+hi); line(x0,y0+hi, x0+s,y0+hi); end. Результат работы программы приведен на рисунке 2.20. Наиболее интересный и удобный для пользователя вариант программы можно получить, если заменить ввод параметров предмета с клавиатуры на их изменение клавишами управления курсором. С этой целью процедуры рисования и расчеты поместим в цикл с постусловием Repeat. C помощью функции ReadKey будем считывать символ нажатой клавиши и помещать в переменную c типа char. При нажатии клавиши «стрелка вверх» (c=#7 2) высота изображения увеличится, а при нажатии клавиши «стрелка вниз» (c=#80) — уменьшится. Нажатие клавиши «стрелка влево» (c=#7 5) приведет к отдалению предмета от линзы, нажатие клавиши «стрелка вправо» (c=#77) — к его приближению. При нажатии клавиши Esc (c=#2 7) работа программы завершится. Модифицированный фрагмент программы может выглядеть так: h:=70; d:=200; {Параметры предмета} Repeat DrawPicture(p,0,0); {Вывод изображения линзы} SetPenColor(clRed); SetPenWidth(7); Образовательный портал www.adu.by/ Национальный институт образования Основы алгоритмизации и программирования 101 J {Расчеты, рисование предмета, изображения и хода лучей} c:= =ReadKey; if c=#77 then d: =d+5; {Приближение предмета } if c=#75 then d: =d-5; {Отдаление предмета} if c=#72 then h: =h+2; {Увеличение высоты предмета} if c=#8 0 then h: =h-2; {Уменьшение высоты предмета} Until c=#27; Вместо вывода значений s, hi с помощью процедуры writeln удобнее отображать параметры предмета (d,h) и изображения (s,hi) в заголовке окна. Для этого преобразуем их к строчному типу и с помощью операций слияния поместим в переменную str типа string: str:='d='+IntToStr(d)+'h='+IntToStr(h)+'s=' +IntToStr(s)+'hi='+IntToStr(hi); SetWindowCaption(str); Построение интерференционной картины. В курсе физики Вы познакомились с явлением интерференции. Напомним, что интерференцией называют явление сложения когерентных волн, приводящее к образованию в пространстве устойчивой картины чередующихся максимумов и минимумов. Зависимость смещения s колеблющейся точки, находящейся на расстоянии r от источника колебаний, от времени t описывается уравнением волны: s{t,r) = A sin (wt — kr), где k = 2%/X , X — длина волны. Пр имер 2. Создать программу, демонстрирующую явление интерференции. При построении любой модели приходится принимать некоторые допущения и упрощения. Так, в нашей модели используются точечные источники волн. Амплитуда колебаний в пределах области наблюдения считается неизменной. Для простоты будем рассматривать источники колебаний одинаковой амплитуды и частоты с нулевой начальной фазой в момент времени t = 0, которые находятся в точках с координатами (Xj, ^j) и (x2, y2). Запишем уравнения волн в точке, которая отстоит от источников колебаний на расстояния rj и r2 : sj(rj) = A sin (—2nrJ/X) и s2(r2) = A sin (—2nr2/X) . Образовательный портал www.adu.by/ Национальный институт образования 102 Глава 2 Осталось связать амплитуду результирующего колебания с яркостью пикселей на экране монитора. Можно использовать серый цвет (яркость изменяется от черного до белого) или цвет одной из трех составляющих в цветовой модели RGB. Если минимальному значению смещения поставить в соответствие черный цвет (уровень = 0), максимальному — белый (уровень = 255), среднему — серый (уровень «120), то промежуточные значения будут отображаться разными оттенками серого. Мы используем красный цвет, приняв значение 120 за его среднюю яркость. Отметим, что на быстроту прорисовки существенно влияют размер графического окна и шаг изменения координат. Зададим размеры окна 260x300 пикселей (300 строк по 260 пикселей). Чтобы произвести расчеты и рисование всех пикселей, используем вложенный цикл. Во внутреннем цикле с параметром х, значения которого изменяются от 0 до 260, будут выполняться действия для каждой точки строки. Во внешнем цикле с параметром у, значения которого изменяются от 0 до 300, будут выполняться действия для всех строк. Блок-схема этого алгоритма приведена на рисунке 2.21. Рис. 2.21 Рис. 2.22 Программа может выглядеть так: program interfer; uses graphABC; var x, y, x1, y1, x2, y2, s, A, L: integer; r1, r2: real; begin SetWindowSize(260,300); SetBrushColor(clRed); {Красный цвет} x1:=60; y1:=40; x2:=160; y2:=40; {Координаты источников} Образовательный портал www.adu.by/ Национальный институт образования Основы алгоритмизации и программирования 103 I {Амплитуда и длина волны} A:=60; L:=20; for y:=0 to 300 do for x:=0 to 260 do begin {Вычисление расстояний до источников} r1:=sqrt((x-x1)*(x-x1)+(y-y1)*(y-y1)); r2:=sqrt((x-x2)*(x-x2)+(y-y2)*(y-y2)); s:=round(120+A*sin(-2*PI*r1/L)+A*sin(-2*PI*r2/L)); SetPixel(x,y,rgb(s,0,0)); {Рисование красной точки яркостью s} end; circle(x1,y1,6); {Источники волн} circle(x2,y2,6); end. Полученная интерференционная картина представлена на рисунке 2.22. Упражнение Составьте программу, которая: а) строит изображения предмета в плоском зеркале (расстояние от предмета до зеркала вводится с клавиатуры); б) демонстрирует отражение и преломление света на плоской поверхности (угол падения вводится с клавиатуры). Образовательный портал www.adu.by/ Национальный институт образования ГЛАВА 3 ОБРАБОТКА ИНФОРМАЦИИ В СИСТЕМЕ УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ § 9. Базы данных и системы управления базами данных В современном мире количество информации постоянно возрастает. Для упорядоченного хранения и обработки больших объемов информации создаются и используются базы данных. База данных — это совокупность взаимосвязанных и организованных определенным образом данных, отображающих состояние объектов и отношений между ними в какой-либо предметной области. Первыми компьютерными базами данных, которые создал человек, были табличные базы данных, где размещалась в основном числовая информация. Затем началось освоение человеком текстовых баз данных. С повышением быстродействия компьютеров и увеличением их внешней и оперативной памяти начали создаваться и использоваться графические и мультимедийные базы данных. Информация, хранимая в базах данных, должна быть структурирована, т. е. организована определенным образом (рис. 3.1), актуальна и доступна пользователю. " Неструктурированные ’ _ данные . "Табличная организация ' ^ данных ^ г Численность населения Беларуси (тыс. чел) 1401 1828 1072 г. Минск 1185 Гомельская Витебская 1231 1440 1377 1485 1680 Гродненская Области и г. Минск 1999 г. 2009 г. Брестская 1485 1401 Витебская 1377 1231 Гомельская 1545 1440 Гродненская 1185 1072 г. Минск 1680 1828 Рис. 3.1 Фактически база данных, наполненная информацией, является файлом. Среди существующих моделей организации информации в базах данных наибольшее распространение получила реляционная модель (от англ. relation — Образовательный портал www.adu.by/ Национальный институт образования Обработка информации в системе управления базами данных 105 отношение). В этой модели данные организованы в виде совокупности таблиц, между которыми установлены связи. Назначение таких связей и порядок их задания мы рассмотрим в § 11. Система управления базами данных (СУБД) — это совокупность программных и языковых средств, предназначенных для создания, хранения и обработки баз данных. В настоящее время специалистами разработано около сотни разных СУБД. Все они могут быть разделены по способу доступа к базам данных на две большие группы: настольные и серверные. Настольные СУБД ориентированы на обслуживание одного пользователя, работающего на определенном компьютере с базами данных в каждый реальный момент времени. К настольным СУБД относят Microsoft Access, Paradox, dBase, FoxPro. Недостатки настольных СУБД стали очевидными, когда возникла необходимость одновременной работы с ними большого числа пользователей. Поэтому следующим этапом развития СУБД стало создание серверных СУБД. Серверные СУБД используют принцип централизованного хранения и обработки данных, который основан на архитектуре клиент-сервер. СУБД, хранящая данные, и прикладная программа, интерпретирующая эти данные, являются разными приложениями, т. е. существуют приложение-сервер и приложение-клиент. К серверным СУБД относят Microsoft SQL Server, Informix, Sybase, DB2, Oracle и др. В этой главе мы рассмотрим популярную и широко используемую СУБД Access 2003. Программа Access после ее установки может загружаться с Рабочего стола двойным щелчком мыши по ярлыку Mtuosoft Office Access :ооэ или через систему меню: Пуск ^ Про- граммы ^ Microsoft Office ^ Microsoft Access. После запуска СУБД Access с помощью команды Файл ^ Открыть можно открыть базу данных. Опишем основные элементы интерфейса открывшегося окна (рис. 3.2). На панели Стандартная размещаются основные инструменты, используемые при работе с базой данных. Некоторые инструменты этой панели аналогичны инструментам панели Стандартная текстового редактора Word. Часть инструментов предназначена исключительно для работы с базой данных. Применение этих инструментов мы рассмотрим в дальнейшем. Образовательный портал www.adu.by/ Национальный институт образования 106 Глава 3 [3 Microsoft Access : $айл Вставка Cgpsitc Qkho f^npasKd Га -j .01 a i Л Hr-o-lSH Панель Стандартная _ dbl: база данных (формат Access 2С00) 1^С!)11фьпь ^J^HopyKTop Создать I а Форма! ;^[Ж]$] Обллстииг.Минсж .EpeoTCKftfl 1Э99Г. го(5г. I Окно Форма I зепнсы IН J < ■Гнз 7 Отчет! Области иг. Минск Брестс!сая Витебская Гомельская Гродненская г. Минск Стренице: [Н~^ 1 [" ГЛ в II а [ 1999 г. Окно Отчет ■ГЛи! 2009 л_д I Загрос! 11 В 1Г^ Области и г. Минск 2009 г. Брестская Витебская Гомельская Гродненск^ 1401 1231 1440 1072 г. Минск Минская Мотгееская Окно ЗапросТ^ Запись: [ И | Ч [Г I I' 1> I >1 |РЧС| на 7 Рис. 3.2 В окне База данных расположены ее объекты: Таблицы, Запросы, Формы, Отчеты и др. Все эти объекты, если они создавались, хранятся в общем файле базы данных на диске с расширением .mdb. Работа с каждым из объектов осуществляется в своем окне, как показано на рисунке 3.2. Рассмотрим назначение каждого объекта. Объект Таблицы является основным объектом базы данных. Он предназначен для хранения данных. На основе таблицы (рис. 3.3) создаются остальные объекты базы данных. Как правило, для решения сложных задач одной таблицы недостаточно. Поэтому в базе данных обычно присутствует сразу несколько таблиц, связанных между собой. Образовательный портал www.adu.by/ Национальный институт образования Обработка информации в системе управления базами данных 107 Запись 1 Запись 2 Запись 3 Запись 4 Запись 5 Запись 6 Запись 7 Рис. 3.3 Имена полей Области и г Минск 1999 г. 2009 Г. > Брестская] 1485 1401 Витебская 1377 1231 Гомельская 1545 1440 Г родненская 1185 1072 г. Минск 1680 1828 Минская 1559 1422 Могилевская 1214 1095 0 0 Запись реляционной базы данных представляет собой строку в таблице, в которой собрана информация об одном объекте базы данных. На рисунке 3.3 в таблице таких записей семь. Поле реляционной базы данных — это столбец таблицы, который содержит значения определенного свойства об объектах базы данных. В таблице на рисунке 3.3 три поля: Области и г. Минск, 1999 г., 2009 г. Для описания поля используются следующие характеристики: имя, тип, размер, формат данных поля. В разных полях таблицы могут храниться данные разных типов: текстовые, числовые, логические и др. Но в одном поле таблицы содержатся данные только одного типа. Каждая таблица имеет свою определенную структуру. Более полное описание типов полей приведено в § 10. Объект Запросы предоставляет возможность отбора данных из таблиц на основании определенных условий. На рисунке 3.2 представлен запрос с именем Запрос 1. Объект Формы отображает данные из таблиц или запросов. С помощью форм удобно вводить данные в таблицы. На рисунке 3.2 представлена форма с именем Форма 1. Объект Отчеты предназначен для создания документа, который отражает информацию, отобранную из базы данных. Отчет можно просмотреть на экране или распечатать на принтере. На рисунке 3.2 представлен отчет с именем Отчет 1. 1. Что называют базой данных? 2. Что называют записью и полем в таблице базы данных? 3. Какие системы называют системами управления базами данных? 4. Какие объекты присутствуют в окне База данных MS Access? Для чего предназначены эти объекты? Образовательный портал www.adu.by/ Национальный институт образования 108 Глава 3 § 10. Создание таблицы базы данных 10.1. Проектирование базы данных Изучение возможностей СУБД Access начнем с проектирования базы данных. Выделяют следующие этапы создания базы данных: • создание таблиц базы данных, включающее разработку структуры каждой таблицы и ввод в эти таблицы необходимой информации; • определение связей между несколькими таблицами. Пр имер. Спроектировать базу данных « Библиотека» (файл Library book.mdb), содержащую сведения о выдаче книг из библиотеки пользователя. Основной задачей при использовании базы данных «Библиотека» является отслеживание выдачи книг всем клиентам. Проведя анализ необходимой для хранения информации, попытаемся сначала расположить ее в одной таблице, поля которой разделим на три группы: «Сведения о клиентах библиотеки», «Сведения о книгах» и «Сведения о выдаче книг». Таблица базы данных в этом случае должна иметь следующую структуру: Имя поля Тип данных Фамилия Текстовый Имя Текстовый Адрес Текстовый Телефон Текстовый Электронная почта Текстовый Автор книги Текстовый Название книги Текстовый Год издания Числовой Стоимость книги Денежный Дата выдачи Дата/время Отметка о возврате Логический Сведения > о клиентах библиотеки Сведения о книгах Сведения о выдаче книг Работать с такой таблицей достаточно неудобно. Например, при выдаче нескольких книг одному клиенту будет необходимо многократно повторять инфор- Образовательный портал www.adu.by/ Национальный институт образования Обработка информации в системе управления базами данных 109 мацию о нем: фамилию, имя, адрес и т. д., что приведет к неоправданному увеличению размера таблицы и может повысить вероятность появления ошибок при вводе информации. Для повышения эффективности при работе с создаваемой базой разделим одну таблицу на три: «Клиенты», «Книги», «Выдача книг». Опишем структуру каждой таблицы. Таблица « Клиенты» Имя поля Тип данных Код клиента Счетчик Фамилия Текстовый Имя Текстовый Адрес Текстовый Телефон Текстовый Электронная почта Текстовый Таблица «Книги» Имя поля Тип данных Код книги Числовой Автор книги Текстовый Название книги Текстовый Год издания Числовой Стоимость книги Денежный Таблица «Выдача книг» Имя поля Тип данных Код выдачи Числовой Код клиента Числовой Код книги Числовой Дата выдачи Дата/время Отметка о возврате Логический Образовательный портал www.adu.by/ Национальный институт образования 110 Глава 3 В таблице «Клиенты» используется тип данных Счетчик. Он применяется для хранения целых числовых значений, которые Access увеличивает при переходе к каждой новой записи. Счетчик может использоваться в качестве уникального идентификатора записи таблицы, в которой нет другой величины такого типа. В нашем случае Код клиента будет уникальным идентификатором, который позволит легко отличить одного клиента от другого. СУБД Access допускает также использование типов данных, описанных в следующей таблице. Тип данных Описание Числовой Поле числового типа, которое содержит произвольные числовые значения. Текстовый Поле текстового типа, содержащее текстовые, числовые данные, не требующие вычислений. Длина поля не превосходит 255 символов. Поле MEMO Поле текстового типа, в котором размещаются данные большого объема. Длина поля не превосходит 65 535 символов. Дата/время Поле, содержащее дату и время в различных форматах. Денежный Поле, имеющее числовые денежные значения. Логический Поле, содержащее логические значения. Гиперссылка Поле-ссылка на некоторый документ или файл. Объект OLE Поле, содержащее документы различных типов (документы Word, таблицы Excel, точечные рисунки и др.). Перед созданием таблиц в СУБД Access необходимо создать новую базу данных. Это можно сделать с помощью последовательности команд: Файл ^ Создать ^ Новая база данных ^ в окне Файл новой базы данных указать имя файла базы, например Library book. СУБД Access позволяет создавать структуру таблицы тремя способами: в режиме Конструктора, с помощью Мастера или путем ввода данных (режим Таб -лицы) (рис. 3.4). В режиме Таблицы данные вводят в пустую таблицу. Рассмотрим подробнее работу режимов Мастер и Конструктор. Рис. 3.4 Объекты Таблицы ^ Создание таблицы в режиме конаруктора Создание таблицы с помощью мастера ^ Созданиетаблицы п/гемвводаданных Образовательный портал www.adu.by/ Национальный институт образования Обработка информации в системе управления базами данных 111 10.2. Создание структуры таблицы В режиме Мастера удобно создавать структуру таблицы, в которой используются стандартные имена полей и типы данных в этих полях. Мастер вначале предлагает выбрать образец таблицы, а затем отобрать поля для этой таблицы. Пример 1. Создать в режиме Мастера структуру таблицы «Клиенты». Выберем объект Таблицы в окне База данных и дважды щелкнем мышью по строке Создание таблицы с помощью мастера. Выберем образец таблицы Клиенты. Образцы полей перенесем с помощью кнопки [ > I из окна Образцы полей в окно Поля новой таблицы, как показано на рисунке 3.5. Имя перенесенного поля может быть изменено с помощью кнопки Переименовать поле. Для перехода к следующему шагу щелкнем мышью по кнопке Далее Далее > Зададим имя таблицы, например Клиенты, и установим флажок Пользователь определяет ключ самостоятельно. Нажмем кнопку Далее. Выберем поле с уникальными для каждой записи данными, для нашего примера — это поле Код Рис. 3.5 Образовательный портал www.adu.by/ Национальный институт образования 112 Глава 3 Рис. 3.6 клиента. Нажмем кнопку Готово. В результате откроется окно таблицы «Клиенты», готовой для заполнения информацией (рис. 3.6). Щелкнув мышью по кнопке Конструктор ^Конструктор (см. рис. 3.2), просмотрим структуру созданной с помощью Мастера таблицы «Клиенты» (рис. 3.7). Ключевое поле Рис. 3.7 Клиенты: таблица □ ' т Имя поля 1 Тип данных 1 * Код клиента [Счетчик ш Фамилия [Текстовый i Имя Т ексгозый Адрес Текстовый Телефон 1 Текстовый Электронная почта Т екстовый Желательно, чтобы каждая таблица имела ключ — одно или несколько полей, содержимое которых уникально для каждой записи. Для таблицы «Клиенты» таким является поле Код клиента. Тип данных этого поля — Счетчик. В нашей таблице каждый клиент будет иметь уникальный номер и никакие две записи не будут одинаковыми. Мастер определяет тип данных полей самостоятельно в зависимости от названия без предварительного определения этих типов пользователем. В дальнейшем в режиме Конструктора тип поля может быть изменен. Режим Конструктора предоставляет пользователю возможность самостоятельно описывать и изменять структуру таблицы. Пример 2. Создать в режиме Конструктора структуру таблицы «Книги». Двойным щелчком мыши по строке Создание таблицы в режиме конструктора (см. рис. 3.4) откроем окно Таблица 1, в котором необходимо описать поля. Образовательный портал www.adu.by/ Национальный институт образования Обработка информации в системе управления базами данных 113 Рис. 3.8 __Таблица 1: таблица Имя поля 1 Тип данных 1 |Ксл Числовой Автор книги Текстовый Название книги Текстовый Год издания 1 Числовой — Стоимость книги Денежный ' I ’ Свойства поля Подстановка Общие Размер поля Формат поля Число десятичных знаков Маска ввода Подпись Значение по умолчанию Условие на значение Сообщение об ошибке Обязательное поле Индексированное поле Смарт-теги Длинное целое Авто Нет Да(Совпздения не Таблица «Книги» будет содержать пять полей. Введем для каждого из них имя и тип данных. В нижней части окна определим свойства поля, как показано на рисунке 3.8. При вводе типов данных и свойств полей будем применять раскрывающиеся списки (см. рис. 3.8). В таблице «Книги» ключевым является поле Код книги. Чтобы это поле стало ключевым, достаточно в режиме Конструктора поместить курсор в выбранное на панели Базы данных или выпол- поле и нажать кнопку Ключевое поле нить команду Правка ^ Ключевое поле. Если необходимо определить сразу несколько ключевых полей, то следует выделить нужные строки и нажать кнопку Ключевое поле. Повторные аналогичные действия отменяют признак ключевого поля. Завершив описание таблицы, сохраним ее с помощью последовательности команд: Файл ^ Сохранить как ^ указать имя таблицы, например Книги ^ ОК. Образовательный портал www.adu.by/ Национальный институт образования 114 Глава 3 ■ Клиенты: таблица ш 1 Код клиента! Фамилия Имя 1 Адрес 1 Телефон Электронная почта - > ^ 1 Сидоров Василий ул. Плеханова, д. 20 2954321 [email protected] 2 Симончик Валентина ул. Васнецова, д.З, кв.89 2961736 [email protected] L. + 3 Титов Алексей ул. Жипуновича, д.6 2474331 [email protected] + 4 Смирнов Александр ул. Ванеева, д.6, ка. 5 2912345 [email protected] -• б Иванов Павел ул. Кошевоге, д.13, кв.5 2916754 [email protected] - Запись: 114 [^ || 1 | ^ | >1ш 5 Рис. 3.9 Созданные нами таблицы «Клиенты» и «Книги» добавляются в окно База данных. Таблица «Выдача книг» также может быть создана в режиме Конструктора. Создав структуру таблицы, пользователь может в режиме Таблицы приступить к ее заполнению. Для этого в окне Базы данных надо дважды щелкнуть мышью по названию таблицы, например «Клиенты». Ввод данных в таблицу и их редактирование осуществляются непосредственно в ячейках таблицы (рис. 3.9). Действия по вводу и редактированию аналогичны соответствующим действиям в MS Excel. Для удаления целой записи в таблице необходимо в режиме Таблица установить курсор в любое поле удаляемой записи и щелкнуть мышью по кнопке Уда. Для удаления сразу нескольких записей необходимо вначале лить запись их выделить. При удалении целой записи в таблице «Клиенты» поле Код клиента теряет уникальный номер клиента для этой записи в таблице. Добавление записей в таблицу осуществляется в режиме Таблица. При этом новая запись размещается в конце таблицы. После завершения ввода данных в таблицу или их редактирования таблица сохраняется с помощью команды Файл ^ Сохранить. 1. Что необходимо для проектирования базы данных? 2. Какие режимы используются для создания структуры таблицы? 3. Что понимается под ключевым полем в таблице? Для чего применяется ключевое поле? 4. Какие типы данных допускается использовать в СУБД Access? 5. Для чего используется тип данных Счетчик? Образовательный портал www.adu.by/ Национальный институт образования Обработка информации в системе управления базами данных 115 Упражнения 1. Создайте базу данных «Города Могилевской области» (файл MogilevCity.mdb), содержащую таблицу «Города_Могилевской_области». - Городз_Могипеесшй_облааи: таблица Го-11 «Е)» Города области Население (тыс. чел.) Основные реки Основание города ► ||М|ШкЫ1 219 Березина 1387 Быхов 16,1 Днепр 1430 Горки 34 Проня 1544 Климовичи 14,5 Калиница 1581 Кричев 26,8 Сож 1136 Могилев 372 Днепр 1267 Мстиславль 11,5 Вихра 1135 Осиловичи 33,6 Свислочь 1872 Слав город 8,2 Сож 1136 Чаусы 10,4 Проня 1581 Шилов 17,8 Днепр 1535 * Запись: [ И 1рГ] Р ' из 11 2. Создайте базу данных «Библиотека» (файл Library book.mdb), содержащую три таблицы: «Клиенты» (см. рис. 3.9), «Книги», «Выдача Книг». Образцы оформления таблиц «Книги» и «Выдача книг» приведены на следующих рисунках: Книги: таблица Код книги 1 Автор книги 1 Название книги Год издания | Стоимость книги 1 4 17 В. Быков Собр. сочинений.!. 3 2001 15 000,00р. 1 4 31 Я. Мавр Полесские робинэоны 1998 10 000,00р. || 4 67 Ж. Верн Плавучий остров 1990* 18 000,00р. 1 4 105 Л. Толстой 1 Война и мир 2004] 7 000,00р. 4 203 А. Кристи Собр.сочинений.Т 10 2008 6 000,00р. 465 Н. Кун (Легенды и мифы 2002 9 000,00р. Выдача книг: таблица Код выдачи 1 Код клиента “Г Код книги 1 Дата выдачи | Отметка о возврате 1 4 203 19.02.2009 а 2 5 17 20.02.2009 3 3 31 21 02.2009 ъ 4 2 67 24,02.2009 ъ 5 5 465 13.03.2009 □ 6 1 203 15.03.2009 □ 7 1 105^ 24 04.2009 Образовательный портал www.adu.by/ Национальный институт образования 116 Глава 3 3. Создайте базу данных «Экзамены» (файл Mark.mdb), содержащую четыре таблицы: «Учителя», «Ученики», «Предметы», «Экзамен». Образцы оформления таблиц представлены на следующих рисунках: Учитез1я: таблица КодУчитвля Фамилия Имя Отчество Адрес 4 1 Абрикосов Андрей Андреевич г. Пинск, ул. Сидоренко, д. 5, кв. 10 ► 4 2 Лэмусовэ Вера Васильевна д. Сноба, Пинский р-н, д. 16 4 3 Петров Игорь Викторович г. Пинск, ул. Мира, д. 34, кв. 1 ж (Счетчик) Запись: | Й | ■< ]Г 21 ► [ н (В 3 Ученики;таблица 1 "O'II-В ЫМ КодУченика Фамилия 1 Имя Отчество Класс Адрес У * 1 Акулич Светлана Игоревна 11 А г. Пинск, ул. Красивая, д. 20 + 2 Ананич Андрей Иванович 11 А г. Пинск, ул. Народная, д. 16, кв. 2 + 3 Бирюров Павел Сидорович 11 Б г. Пинск, ул. Плеханова, д. 5. кв. 32 + 4; Брюсова Анна Ивановна 11 Б г. Пинск, ул. Васнецова, д. 20, кв.65 ■* 5 Булгакова |Кирэ Яновна 11 А г. Пинск, ул. Васнецова, д. 3, кв. 16 Ж (Счетчик)' Запись: [ | < ] 1 | )[^^| из 5 '^^"^Предметьитаблица ::31|| КодУч1/гтеля | Код Предмета | Наименование >. У Заг 1 1 Белорусская литература 1 2 Белорусский язык 2 3 География 3 4 Биология 1ИО.; 114 1, 4 11 1 1 ► 1 ^1 из 4 - Образовательный портал www.adu.by/ Национальный институт образования Обработка информации в системе управления базами данных 117 § 11. Связывание таблиц базы данных Установление связей в MS Access дает возможность автоматически соединять данные из разных таблиц. Так обеспечивается целостность базы данных. Процесс установления связей между таблицами называют построением Схемы данных. Для установления связей между двумя таблицами необходимо определить в каждой из них поля для связывания. Эти поля могут иметь одинаковые или разные имена, но должны содержать данные одного типа! Рассмотрим связь между таблицами «Сотрудники» (рис. 3.10) и «Ведомость заработной платы» (рис. 3.11) в базе данных Salary.mdb. Структура каждой из этих таблиц представлена на рисунке 3.12. ^ Сотрудники:таблица 1 Табельный номер Фамилия Имя Отчество 1 Адрес у 4 1 Алтухов Павел Семенович ул. Некрасова, 23 4 2 Артемкина Алла Леонидовна ул. Плеханова, д.З, кв 5 4 3 Белоус Александр Апександаович пр. Партизанский, д.43. кв. 1 4 4 Бутик Елена Евгеньевна ул. Бельского, д.34, кв. 67 4 5 Веревка Петр Олегович ул. Пешеходная, д.23 4 6 Кровель Ирина Васильевна |ул. Народная, д.13, кв. 65 4 7 Кишмяк Сергей Владимирович ул. Плеханова, д. 46, кв. 78 4 8 Рогова Зея Петровна пос. Озерный, д. 6 Запись: [ И J i ij 11 HI И 1^*1 «3 а Рис. 3.10 Ведомость заработной платы : таблица Код выдачи 1 Табельный номер Дата выдачи Размер Налог ► 4 И 1 04.09.2009 780 000,00р. 93 600.00р. 4 2 2 04.09.2009 820 000.00р. 98 400,00р. 4 3, 3 05.09.2009 910 000,00р. 109 000,00р. 4 4I 4 04.09.2009 560 000,00р. 67 200,00р. 4 5| 5 06.09.2009 435 000,00р. 52 200,00р. 4 6 6 04.09.2009 740 000.00р. 88 800,00р. 4 7 7 06.09.2009 680 000,00р. 81 600,00р. 4 81 8 05.09.2009 420 000,00р. 50 400,00р. Ж 0 0 0,00р. 0,00р. Запись: | И || 4 ] | 1 [ ► II ►! из 8 Рис. 3.11 Образовательный портал www.adu.by/ Национальный институт образования 118 Глава 3 Сотрудники Ведомость за работ... Табельный номер Код выдачи Фамилия Табельный номер Имя Лата выдачи Отчество Размер Адрес Налог Рис. 3.12 В таблице «Сотрудники» ключевым является поле Табельный номер. Данное поле имеет тип Счетчик и содержит уникальные значения для каждой записи этой таблицы. Назовем это поле первичным ключом. Если в таблице «Ведомость заработной платы» каждый сотрудник может быть записан только один раз, то ключевым полем этой таблицы также может являться поле Табельный номер. В таблице «Ведомость заработной платы» ключевое поле Табельный номер будем называть внешним ключом. В этом случае связь, установленную между первичным и внешним ключами, называют связью один к одному. Этот тип связи представлен на рисунке 3.13. Рис. 3.13 Если в таблице «Ведомость заработной платы» один сотрудник может быть записан несколько раз, то поле Табельный номер уже не будет уникальным, так как может повторяться многократно. Тогда тип данных в этом поле может принимать числовые значения, а ключевым полем с уникальными значениями может быть определено поле Код выдачи. В этом случае связь, установленную между одноименными полями Табельный номер в обеих таблицах, называют связью один ко многим. Этот тип связи представлен на рисунке 3.14. Образовательный портал www.adu.by/ Национальный институт образования Обработка информации в системе управления базами данных 119 Рис. 3.14 Пример. Построить Схему данных для базы данных «Библиотека», как показано на рисунке 3.15. Откроем многотабличную базу данных «Библиотека», для которой будут устанавливаться связи между таблицами. Щелкнем мышью по значку Схема данных (см. рис. 3.2). В окне Добавление таблицы выделим первую таблицу, для которой устанавливается связь. В нашем примере — это таблица «Клиенты». Щелкнем мышью по кнопке Добавить. На экране будет отображена структура таблицы, которую мы добавили. Затем таким же образом добавим в Схему данных остальные связываемые таблицы («Выдача книг», «Книги») и щелкнем мышью по кнопке Закрыть. В окне таблицы «Клиенты» щелкнем мышью по полю, которое будет использоваться для установления связи, например Код клиента, и перетащим его на одноименное поле таблицы «Выдача книг». В окне Изменение связей убедимся, что связаны необходимые поля, и установим флажок Обеспечение целостности данных. В результате выполненных действий в окне Схема данных два связанных поля соединятся линией, как показано на рисунке 3.15. Рис. 3.15 Образовательный портал www.adu.by/ Национальный институт образования 120 Глава 3 Аналогичным образом свяжем таблицы «Выдача книг» и «Книги» по полю Код книги. Для сохранения созданных связей щелкнем мышью по кнопке Сохранить и закроем окно Схема данных. При закрытии окна Схема данных связи между таблицами сохраняются. Созданные связи в дальнейшем можно удалить в окне Схема данных, выделив щелчком мыши линию связи и нажав клавишу Delete (Удалить). Двойной щелчок мышью по линии связи приводит к открытию окна Изменение связей, в котором связи могут быть отредактированы. 1. Для чего необходимо связывать таблицы? 2. Какими свойствами должны обладать связываемые поля? 3. Какие типы связей между полями таблиц существуют? Упражнение Установите связи между таблицами баз данных, предложенных учителем: а) база данных «Библиотека» (файл Library book.mdb) c таблицами «Клиенты», «Выдача книг», «Книги»; Образовательный портал www.adu.by/ Национальный институт образования Обработка информации в системе управления базами данных 121 § 12. Создание и заполнение формы Вы уже знаете, что данные таблицы пользователь вводит непосредственно в ее ячейки. Если его не устраивает табличный способ размещения данных, он может подготовить форму. В форме пользователь располагает данные на экране компьютера в порядке, удобном ему для работы. В созданной форме можно вводить, редактировать и просматривать данные. Формы можно создавать на основе готовой таблицы или запроса. Рассмотрим, как создаются формы на основе таблиц. СУБД Access предлагает три способа создания форм: Создание формы в режиме мастера, Создание формы в режиме конструктора, Автоформа. При подготовке формы необходимо в окне Базы данных выполнить команду Формы ^ Создать или нажать кнопку J Создать В открывшемся окне Новая форма предлагаются два основных способа Конструктор и Мастер форм, а также Автоформы: в столбец, ленточная, табличная и др. (рис. 3.16). Быстрое создание форм обеспечивают Мастер форм и Автоформы. Рис. 3.16 Рассмотрим на примере работу с Мастером форм. Пример 1. Создать с помощью Мастера форм по данным таблицы «Горо-да_Могилевской_области» ленточную форму со стилем Солнцестояние, содержащую данные, показанные на рисунке 3.17. Образовательный портал www.adu.by/ Национальный институт образования 122 Глава 3 Рис. 3.17 Рис. 3.18 Образовательный портал www.adu.by/ Национальный институт образования Обработка информации в системе управления базами данных 123 Для создания формы с помощью Мастера форм дважды щелкнем мышью по строке Создание форм с помощью мастера в окне База данных. Мастер форм в несколько этапов откроет окно Создание форм, в котором мы зададим имя таблицы для формы и выберем доступные поля, как показано на рисунке 3.18, а затем определим внешний вид формы: выберем таблицу «Города_Могилевской_ области» и три поля Города области, Население (тыс. чел.), Основание города, внешний вид формы — Ленточный. В дальнейшем в открывшемся окне укажем стиль формы Солнцестояние, зададим имя формы и щелкнем мышью по кнопке Готово. В окне Создание форм можно открыть готовую форму для ввода данных. Заметим, что, создавая форму, из таблицы можно переносить не все поля. При заполнении формы данные автоматически размещаются в ячейках таблицы, на основании которой данная форма создавалась. Создание формы с помощью Конструктора является более сложным процессом, чем ее подготовка с помощью Мастера форм. Пример 2. На основании таблицы «Города_Могилевской_области» создать форму в режиме Конструктора. Для этого в окне База данных выберем пункт Формы. Затем нажмем кнопку Создать меню этого окна. В окне Новая форма выберем пункт меню Конструктор, а также источник данных — таблицу «Города_Могилевской_области», на основании которой строится форма. В результате выполненных действий откроется окно для конструирования формы и специальное окно со списком полей таблицы (рис. 3.19). ¥1гМЭ Рис. 3.19 Образовательный портал www.adu.by/ Национальный институт образования 124 Глава 3 Перенесем с помощью мыши из Списка полей в Область данных необходимые поля таблицы, например Города области, Население (тыс. чел.), Основание города. При переносе каждого поля в Область данных в нем располагаются Надпись (имя поля) и Текстовое поле (данные). Завершим конструирование формы ее сохранением. Формы, созданные с помощью Мастера форм, могут быть изменены в режиме Конструктора. 1. Почему пользователи для ввода данных предпочитают применять форму вместо таблицы? 2. Какие способы создания формы предлагает программа Access? Упражнение Откройте готовую базу данных, предложенную учителем. Создайте формы по готовым таблицам, используя Мастер форм или Конструктор: а) для базы данных «Тепловые электростанции Беларуси» (файл Ener.mdb), содержащей таблицу «Электростанции» со сведениями о крупных тепловых электростанциях нашей страны; Таблица «Электростанции» дшщастанции; таблица 1 а №1||Ё^ Электростанция Мощность (тыс. кВт}| Используемое топливо Удепьный расход топлива (г/кВт"ч) > Лукомльская ГРЭС 2500 мазут, природный газ 318 Березовская ГРЭС 950 мазут 360 Минская ТЭЦ-4 900 мазут, природный газ 235 Новополоцка^ТЭ Ц 505 мазут 220 Минская ТЭЦ-3 395 природный газ, мазут 245 Гомельская ТЭЦ-2 360 природный газ, мазут 236 Могилевская ТЭЦ-2 345 мазут 254 Светлогорская ТЭЦ 270 попутщяй газ 313 Форма «Электростанции» Образовательный портал www.adu.by/ Национальный институт образования Обработка информации в системе управления базами данных 125 б) для базы данных «Красная книга Беларуси» (файл mir.mdb), содержащей таблицу «Красная книга Беларуси» со сведениями о редких видах животного мира нашей страны. Таблица «Красная книга Беларуси» красная книга Беларуси таблица Код Класс Отрад Семейство Вид Изображение 1 Пшцы СоБообраэные Си пуховые Сипуха Bitmap Image J 2 Млекопитающие Парнокопытные Полорогие Европейский зубр Bitmap Image 3 Млекопигтающие Хищные Куньи Барсук Bitmap Image ! ” 4 Млекопитающие Хищные Кошачьи Рысь европейская Bitmap Image 5 Птицы Листообразные Аистовые Черный аист Bitmap Image Запись: ЕШ1 2ГП[й1[й^ю5 Форма «Млекопитающие и птицы» § 13. Поиск данных с помощью запросов Поиск информации в базах данных выполняется через запросы. С помощью запроса СУБД Access выбирает и отображает наборы записей из таблиц базы данных, которые отвечают заданным условиям. Запрос может формироваться на основе одной или нескольких связанных таблиц или запросов, построенных ранее. СУБД Access поддерживает создание запросов с помощью Мастера и Конструктора. Мастер обеспечивает возможность создания простых запросов. Рассмотрим, как создаются запросы на основе таблиц. Используем для этого таблицу базы данных «Аквариумные рыбки», представленную на рисунке 3.20. Образовательный портал www.adu.by/ Национальный институт образования 126 Глава 3 Рис. 3.20 Аквариумные рыбки : таблица Ji Название рыбки Место происхохщения Длина (см) ► Г а Грузия Южная Америка 5 Ппятипецилиус черный Мексика 4 Зеленый меченосец Мексика 11 Тетра-фон-рио Южная Америка 2 Бархатный гирардинус Южная Америка 5 Макролод Китай 9 Гурами жемчужный Индия 10 Лялиус Индия 5 Неон Южная Америка 4 Запись: [ И | i \ \ Г [~П !►*! кз 9 Пример 1. Создать с помощью Конструктора простой запрос, по которому будут представлены сведения о названиях рыбок и местах их происхождения. Щелкнем мышью по кнопке Запросы в окне Базы данных. Дважды щелкнем мышью по строке Создание запроса в режиме конструктора или выполним команду Создать ^ Конструктор. В результате откроются два окна, как показано на рисунке 3.21. В окне Добавление таблицы выберем таблицу с именем «Аквариумные рыбки» и щелкнем по кнопке Добавить, а затем — по кнопке Закрыть. Рис. 3.21 Образовательный портал www.adu.by/ Национальный институт образования Обработка информации в системе управления базами данных 127 Рис. 3.22 В окне Запрос на выборку (рис. 3.22), двигаясь слева направо, в выпадающих списках строки Поле выберем поля для добавления в запрос: Название рыбки, Место происхождения. Установка флажка в каждом отобранном столбце строки Вывод на экран позволит вывести нужные столбцы. После завершения конструирования запроса сохраним его. Результатом выполнения запроса будет новая временная таблица (рис. 3.23). Рис. 3.23 5^'запрос1: запрос на выборку Название рыбки Место происхонздения ► Гамбузия Южная Америка Плятипецилиус черный Мексика I-. Зеленый меченосец Мексика Тетра-фон-рио Южная Америка Бархатный гирардинус Южная Америка Макропод Китай Гурами жемчужный Индия Ляпиус Индия Неон Южная Америка Запись: | К [ i ; | Г | ► ][ >1 [|>-3fej из 9 Образовательный портал www.adu.by/ Национальный институт образования 128 Глава 3 Пр имер 2. Создать запрос, по которому будут представлены сведения о рыбках, длина которых меньше 5 см. Откроем в режиме Конструктора новое окно для запроса. В строке Условие отбора опишем запрос, как показано на рисунке 3.24. Результатом выполнения запроса будет новая временная таблица (рис. 3.25). Наиболее сложным является подготовка запросов сразу по нескольким связанным таблицам. Процесс создания таких запросов напоминает формирование запроса по одной таблице. Однако на этапе отбора таблиц с источниками данных следует указать сразу несколько таблиц, данные из которых будут использоваться в запросе. 1. Для чего используются запросы? 2. Как строится простой запрос с помощью Конструктора? 3. Какие возможности предоставляет пользователю Конструктор для создания запроса на выборку с условиями? Рис. 3.25 Образовательный портал www.adu.by/ Национальный институт образования Обработка информации в системе управления базами данных 129 Упражнения 1. Откройте таблицу базы данных «Аквариумные рыбки» и создайте запросы, представленные в примерах 1 и 2 этого параграфа. 2. Откройте таблицу базы данных «Тепловые электростанции Беларуси» и создайте по ней: а) простой запрос, содержащий записи полей Электростанция, Мощность (тыс. кВт), Используемое топливо; б) запрос, имеющий записи с полями Электростанция и Мощность (тыс. кВт) < «400 тыс. кВт»; в) запрос с записями Электростанция и Используемое топливо = «мазут»; г) запрос с записями Электростанция и Используемое топливо = «мазут» или Используемое топливо = «попутный газ». 3. Откройте базу данных «Библиотека» и создайте с помощью Конструктора запрос, показанный на рисунке. Просмотрите таблицу, построенную по данному запросу. Поле: И^tя таблицы: Сортировка; Вывод на экран: Условие отбора: или: Фамилия Имя Название книги Дата выдачи »■ Отметка 0 возврате Клиенты Клиенты Книги Выдача книг Выдача книг VJ V 7! Z1 [ 1 " [щ] ► ▼ § 14. Сортировка записей в таблице Для эффективного поиска информации в больших таблицах базы данных, в которых могут храниться сотни и тысячи записей, у пользователя часто возникает необходимость разместить записи в определенной последовательности, т. е. отсортировать их. Под сортировкой записей в таблице базы данных понимают процесс их упорядочения в определенной последовательности по значению одного из полей. В зависимости от типа данных, определенных для сортировки, все записи в таблице базы данных могут сортироваться: • по величине числа, если тип данных числовой; • по алфавиту, если тип данных текстовый (символьный); • по дате и времени, если данные в поле содержат значения даты и времени. Образовательный портал www.adu.by/ Национальный институт образования 130 Глава 3 Для сортировки записей по данным конкретного поля необходимо установить курсор в любой строке соответствующего столбца и щелкнуть мышью по одной из кнопок на панели Стандартная: А| Я + — сортировка по возрастанию; — сортировка по убыванию. Продемонстрируем процесс сортировки записей в таблице «Вулканы», фрагмент которой представлен на рисунке 3.26. Пример. В таблице «Вулканы» расположить записи поля Название в алфавитном порядке. Установим курсор мыши в любой строке поля Название. Щелкнем мышью по кнопке Сортировка по возрастанию или выполним последовательность команд: Записи ^ Сортировка ^ Сортировка по возрастанию. Результат сортировки для представленного фрагмента показан на рисунке 3.27. Вулканы; таблица [ Название Континент Местонахожден ие Высота над уровнем моря Активность ► Этна Европа Сицилия 3340 Везувий Европа Апеннины 1277 □ Гекла Европа Исландия 1491 т Меру Африка Танзания 4567 т Керинчи Азия Хонсю 3805 т Кракатау Азия Камчатка 813 □ Семеру Азия Мицданао 3676 т Рис. 3.26 Вулканы; таблица [ <=> II'0<Ц|£3> Название Континент Местонахожден ие Высота над уровнем моря Активность > ШЯЕЯИ1 Европа Апеннины 1277 □ Гекла Европа Исландия 1491 ш Керинчи Азия Хонсю 3805 т Кракатау Азия Камчатка 813 п Меру Африка Танзания 4567 0 Семеру Азия Мицданао 3676 т Этна 1Европа Сицилия 3340 т Рис. 3.27 Образовательный портал www.adu.by/ Национальный институт образования Обработка информации в системе управления базами данных 131 1. Для чего используется сортировка данных? 2. Какой процесс называют сортировкой записей таблицы базы данных? 3. Что необходимо сделать для выполнения сортировки записей в таблице базы данных? Упражнения 1. Откройте таблицу «Клиенты» базы данных «Библиотека», предложенную учителем, выполните сортировку записей этой таблицы, разместив фамилии клиентов в алфавитном порядке. 2. Откройте базу данных «Города Могилевской области» (MogilevCity.mdb), содержащую одноименную таблицу, выполните сортировку записей этой таблицы: а) записи поля Города области расположите в алфавитном порядке; б) записи поля Население (тыс. чел.) упорядочьте по возрастанию. 3. Создайте базу данных «Реки Беларуси», фрагмент таблицы которой представлен на рисунке. Реки:таблица IrepT^ii .(S), у Название | Площадь бассейна (кв. км) | Длина (км)| Густота речной сети (км/кв. км) ж Ловать 21900 536 0,45 Днепр 504000 2201 0,39 Вил ИЯ 25100: 498 0,44 Западный Буг 39400: 772 0,42 Сож 42140 648 0,38 Припять 121000: 761 0,42 Березина 2450? 613 0,35 Неман 98200 937 0,47 > Западная Двина |57900 1020 0,45 Выполните сортировку записей этой таблицы: а) записи поля Длина (км) упорядочьте по возрастанию; б) записи поля Густота речной сети (км/кв. км) расположите в порядке убывания. § 15. Создание отчетов Отчеты являются удобным и гибким способом просмотра и распечатки итоговых сведений из базы данных. Под отчетом понимается документ, содержание которого формируется по определенному запросу на основе информации, размещенной в базе данных. В отчетах данные представляются в удобном виде. Они могут быть отсортированы, особым образом сгруппированы, а также могут содержать итоговые значения и т. д. Образовательный портал www.adu.by/ Национальный институт образования 132 Глава 3 СУБД Access предлагает пользователю несколько способов создания отчета: Автоотчет, Мастер отчетов и Конструктор. Отчеты являются самостоятельными объектами базы данных. После просмотра полученного отчета он может быть сохранен или распечатан. Рассмотрим на примере многотабличной базы данных «Библиотека», как с помощью Мастера создаются отчеты. Пр имер. Создать отчет, содержащий сведения из трех таблиц базы данных «Библиотека» (см. § 10). Из таблицы «Клиенты» выбрать фамилию и имя клиента, из таблицы «Книги» — автора и название книги, а из таблицы «Выдача книг» — отметку о возврате. Откроем базу данных «Библиотека» и дважды щелкнем мышью по строке Создание отчета с помощью мастера в окне База данных. В окне Создание отчетов, поочередно активизируя названия таблиц базы данных в списке Таблицы и запросы, перенесем нужные поля из окна Доступные поля в окно Выбранные поля, как показано на рисунке 3.28. Рис. 3.28 Образовательный портал www.adu.by/ Национальный институт образования Обработка информации в системе управления базами данных 133 [2J Выдача книг E3EF1BI Выдача книг Фалш.1 ия Имя Автор книги Название книги Ofmtett О возбр Смирноа Алеисачдр А. Кристи Собр.сочинений.Т 10 Иванов Павел В. Быков Собр. сочинений.Т. 3 0 Титов Алексей Я. Мавр Полесские робинзоны 0 Симончик Валентина Ж. Верн Плавучий остров 0 Иванов Павел Н.Кун Легенды и мифы □ Сидоров Василий А. Кристи Собр. сочинений. Т. 10 □ Сидоров Стракица: . И Г ^ 1Г Василий " iTWTri * Л. Толстой Война и мир Ж 1 □ Рис. 3.29 Последовательно нажимая кнопку Далее в окне Создание отчетов, укажем макет размещения данных, например по левому краю, и стиль оформления данных, например Официальная. В последнем окне нажмем кнопку Готово. В результате мы получим отчет, фрагмент которого представлен на рисунке 3.29. Созданный отчет может занимать несколько страниц. Его можно расположить в книжной или альбомной ориентации и вывести на печать, как документ текстового редактора Word, с помощью команды Файл ^ Печать. Подготовка отчета с помощью Конструктора осуществляется несколько иначе. Вначале пользователь может создать и сохранить отчет с помощью Мастера. Затем в окне Конструктора можно изменить расположение элементов в отчете, удалить некоторые элементы, изменить или отредактировать надписи и т. д. 1. Для чего используются отчеты в базах данных? 2. Что называют отчетом в базе данных? Упражнения 1. Создайте отчет на основе трех таблиц базы данных «Библиотека», как в примере этого параграфа. При подготовке отчета расположите фамилии клиентов в алфавитном порядке. Образовательный портал www.adu.by/ Национальный институт образования 134 Глава 3 2. Откройте таблицу базы данных «Города Могилевской области», предложенную учителем, и создайте отчет с помощью Мастера. Вид фрагмента отчета показан на рисунке. Образовательный портал www.adu.by/ Национальный институт образования ИНФОРМАЦИОННЫЕ СИСТЕМЫ И ТЕХНОЛОГИИ § 16. Информационные системы Человек соприкасается с различными по своему назначению системами в быту, на производстве, в образовании, медицине и других сферах деятельности. Слово «система» означает целое, состоящее из частей. Системы существуют в живой и неживой природе. Примером сложной системы в неживой природе является Солнечная система, элементы которой — Солнце, планеты и их спутники, множество комет и астероидов. Примером биологической системы являются растительные клетки. Системы состоят из различных элементов: планет, рек, растений, животных, людей, технических устройств, деталей механизмов, информационных ресурсов, математических уравнений. Мы часто встречаем такие слова и словосочетания, как биосистема, экологическая система, государственная система, система обучения, система социального обеспечения, система здравоохранения и т. д. В курсе информатики мы уже знакомились с разными системами: операционными, файловыми, системами управления базами данных. Добавление к понятию «система» слова «информационная» указывает на ее основное функциональное назначение — работа с информацией. Информационная система (ИС) — целостная система взаимосвязанных средств и методов сохранения, обработки, поиска и распространения информации, обслуживаемая и используемая человеком. Существуют различные классификации информационных систем: по функциональному назначению, по области применения, по уровню автоматизации. По области применения, например, выделяют такие ИС: библиотечные, правовые, экономические, банковские, маркетинговые, медицинские, метеорологические и многие другие. Среди ИС существует большой класс информационно-поисковых (справочных) систем (ИПС), которые предназначены для поиска информации. Поиск и отбор информации в ИПС осуществляется пользователем по заданным критериям или условиям — запросам. Запросы пользователя в ИПС строятся обычно на естественном для человека языке, например русском, белорусском, английском. Многие ИПС в настоящее время доступны в сети Интернет. Они оперативно предоставляют пользователю доступ к огромному числу электронных информа- Образовательный портал www.adu.by/ Национальный институт образования I 136 Глава 4 ционных ресурсов. Обзор информационных ресурсов и информационных систем Беларуси размещен на сайте https://infores.mpt.gov.by. С некоторыми из них Вы уже знакомились при изучении информатики. Вообще, проблемам разработки и эффективного использования национальных информационных ресурсов в нашей стране уделяется большое внимание на государственном уровне. На создание национальной автоматизированной информационной системы, основной задачей которой является формирование единого национального информационного ресурса, нацелена государственная программа «Электронная Беларусь». Для упрощения взаимодействия граждан с автоматизированными информационными системами государственных органов внедряется программный комплекс «Одно окно». Национальный правовой интернет-портал Республики Беларусь https://pravo.by обеспечивает доступ к Эталонному банку данных правовой информации. Он представляет собой автоматизированную полнотекстовую информационно-поисковую систему по законодательству Республики Беларусь, позволяющую быстро найти необходимую информацию (рис. 4.1). Рис. 4.1 Образовательный портал www.adu.by/ Национальный институт образования Информационные системы и технологии 137 Общее количество документов, доступных на этом сайте, превышает 120 тысяч. Тексты правовых актов представлены в их действующей редакции, т. е. с учетом всех внесенных в них изменений и дополнений, вступивших в силу. Важное экономическое значение имеют геоинформационные системы (ГИС), которые обеспечивают сбор, хранение, отображение и распространение географических данных. Например, цифровые карты демонстрируют размещение объектов на местности для выявления отношений между ними, для исследования изменений, произошедших на изучаемой территории за определенный период времени. Основные области применения ГИС: экология и природопользование, землеустройство, региональное планирование, демография и исследование трудовых ресурсов. Для решения задач в области землеустройства и земельного кадастра предназначена Земельно-информационная система Республики Беларусь (https://landgis.by). Одной из наиболее популярных геоинформационных систем является система City Info, которая предоставляет электронную карту Минска или других областных городов и обеспечивает поиск необходимого объекта (рис. 4.2). После ввода в окне Адрес названия улицы и номера дома можно увидеть на карте в увели- Рис. 4.2 Образовательный портал www.adu.by/ Национальный институт образования 1 138 Глава 4 ченном масштабе место расположения найденного системой здания. С помощью вкладки Транспорт можно узнать необходимый вид общественного транспорта и номер маршрута для перемещения из одного пункта города в другой. Для этого нужно щелкнуть левой кнопкой мыши по двум пунктам на карте города. Все большее распространение получают системы спутниковой навигации (например, GPRS), которые на основе заложенных в них цифровых карт позволяют определять местоположение объектов и могут эффективно использоваться, например, для управления дорожным движением. Решению актуальных экологических проблем помогают биоинформационные системы, например Красная книга Республики Беларусь (https://redbook. minpriroda.by) (рис. 4.3). Красная книга Республики Беларусь содержит сведения о редких и находящихся под угрозой исчезновения на территории Беларуси видов животных и дикорастущих растений. Ее ресурсы являются общедоступными. КРАСНАЯ КНИГА РЕСПУБЛИКИ БЕЛАРУСЬ РАСТЕНИЯ ЖИВОТНЫЕ км Global ШШ Environmen 1И13 V-^Faciiitv Беларусь Рис. 4.3 Образовательный портал www.adu.by/ Национальный институт образования Информационные системы и технологии 139 J Пользователь имеет возможность выполнить поиск необходимых сведений о животных или растениях по каталогу и по алфавиту. Информатика совместно с кибернетикой, электроникой, биологией занимается разработкой интеллектуальных информационных систем, создаваемых на базе компьютера, для имитации решения человеком сложных интеллектуальных задач. Интеллектуальные информационные системы наделены способностью видеть, слышать, говорить, думать и даже чувствовать. В рамках исследований в области создания таких систем разрабатываются естественные интерфейсы компьютера, создаются роботы и робототехнические комплексы. Примером известной системы искусственного интеллекта является система, имитирующая зрительное восприятие. Система состоит из компьютерных программ и устройств распознавания образов. Она работает в двух режимах: обучения и распознавания. В режиме обучения человек или робот, играющие роль учителя, предъявляют системе различные объекты или предметы и сообщают о них все необходимые сведения. Затем в режиме распознавания человек показывает системе новые объекты, и она должна их правильно распознать или классифицировать. Экспертные системы (ЭС) — это направление исследований по созданию искусственного интеллекта. Существуют экспертные системы, передающие опыт более подготовленных пользователей менее подготовленным; интеллектуальные обучающие, информационно-логические и робототехнические системы; консультирующие и тренажерные системы; системы поддержки принятия решений. Основные области применения ЭС: медицина, электроника, вычислительная техника, геология, математика, космос, сельское хозяйство, управление, финансы, юриспруденция и др. В медицине создано несколько сотен экспертных систем, которые используются для установления связи между нарушениями деятельности организма человека и их возможными причинами. С помощью расширенной базы знаний при получении всех возможных сведений о состоянии здоровья человека такие системы могут ставить диагноз на уровне врача-консультанта. 1. Какую систему называют информационной системой? 2. Приведите примеры информационных систем. Образовательный портал www.adu.by/ Национальный институт образования 140 Глава 4 § 17. Информационные технологии Определение информационных технологий тесно связано с понятием «технология». Термин «технология» происходит от греческого слова techne — наука об умении, мастерстве, искусстве — и имеет множество значений. В узком смысле под технологией понимают процесс, определяемый совокупностью операций, приемов, с помощью которых функционируют конкретные орудия производства: механизмы, станки, различная аппаратура. В более широком смысле с помощью технологий описываются многие производственные, экономические, социальные, культурные и другие процессы, происходящие в обществе. Понятие «информационные технологии» впервые было применено в конце 50-х годов ХХ в. в Англии и США, однако его активное использование началось в 80-е годы ХХ в., когда под влиянием новых технологий в обществе начали широко использовать термин «информация». В широком смысле под информационными технологиями (ИТ) понимается комплекс взаимосвязанных научных, технологических, инженерных дисциплин, изучающих методы эффективной организации труда людей, занятых обработкой и хранением информации во всех сферах человеческой деятельности: производственной, управленческой, финансовой, научной, социальной, культурной. В Законе Республики Беларусь от 10 ноября 2008 г. «Об информации, информатизации и защите информации» дано следующее определение информационной технологии: ИТ — совокупность процессов, методов осуществления поиска, получения, передачи, сбора, обработки, накопления, хранения, распространения и (или) предоставления информации, а также пользования информацией и защиты информации. В связи с активным внедрением вычислительной техники и персональных компьютеров в узком смысле под ИТ обычно подразумевают компьютерные информационные технологии (КИТ). Под компьютерной информационной технологией понимается процесс, позволяющий человеку осуществлять обработку, поиск, сбор, хранение и передачу информации с помощью компьютера. Если в основу классификации КИТ положить процесс обработки информации, представленной в разной форме, то можно выделить ИТ обработки текстовой и графической информации, ИТ по работе с базами данных, электронными таблицами и др. Образовательный портал www.adu.by/ Национальный институт образования Информационные системы и технологии 141 Следует понимать, что одна информационная технология может включать в себя другие. Например, мультимедийная технология включает в себя технологии обработки текстовой и графической информации, технологию создания анимаций, веб-технологию. Информационную технологию, описывающую процесс обработки текстовой информации, можно представить в виде иерархической структуры, выделив этапы, действия и элементарные операции этого процесса (рис. 4.4). Различие между информационными системами и информационными технологиями является очень важным. Следует четко понимать, что в основе информационной технологии лежит, прежде всего, процесс, выполнение которого построено на способах деятельности и операциях, а в основе информационной системы лежат используемые программные и технические средства. Например, когда мы говорим о технологии обработки текстовой информации, мы можем не привязывать ее к конкретной компьютерной программе или системе, так как процесс редактирования текста является общим для любых компьютерных программ, в которых обрабатывается текстовая информация. Технология обработки текстовой информации ЭТА П Ы Ввод Редактирование Форматирование Вывод документа текста текста документа ... на печать Форматирование абзацев Задание параметров страницы Z ЭЛЕМЕНТАРНЫЕ ОПЕРАЦИИ Рис. 4.4 Выбор размера бумаги Задание ориентации Определение отступов на странице Образовательный портал www.adu.by/ Национальный институт образования 142 Глава 4 Настоящее время характеризуется активным внедрением информационных систем и технологий в образование. Практически все изученные Вами компьютерные технологии активно применяются в образовании. Например, на основе мультимедийных технологий создаются учебные компьютерные презентации. Использование аудио и видео облегчает изучение иностранных языков. Технология обработки данных в электронных таблицах помогает не только выполнять сложные расчеты, но и создавать учебные компьютерные модели из разных предметных областей и изучать эти виртуальные модели в курсах физики, химии, биологии и т. д. Регулирование использования ИС и ИТ в образовании, перспективы и направления их развития находят свое отражение в программах «Комплексной информатизации системы образования Республики Беларусь», которые разрабатываются каждые 4 — 5 лет. Широкое применение в белорусских школах получили электронные средства обучения (ЭСО) по различным учебным предметам. По своему назначению ЭСО можно разделить на обучающие и тестовые программы, учебные информационно-поисковые системы, моделирующие и демонстрирующие программные средства, учебные игровые и досуговые программы и т. д. Перечень рекомендуемых ЭСО для образовательных учреждений содержится на сайте Главного информационно-аналитического центра Беларуси (адрес в сети Интернет — https://www.giac.unibel.by). Ежегодно в нашей стране проводится Республиканский конкурс «Компьютер. Образование. Интернет» по разработке ЭСО для общеобразовательных, профессиональных и специальных учебных заведений, в котором могут принимать участие учащиеся и педагоги. Еще одним направлением использования ИС и ИТ является применение их в управленческой деятельности в системе образования. Разработанные и применяемые в Беларуси автоматизированные системы управления учреждениями образования содержат базы данных с различной информацией об учителях, учащихся, родителях и др. С помощью веб-технологий в учреждениях образования создаются веб-сайты. Сайт школы обычно содержит историю и новости школы, сведения об учителях и учащихся, о достижениях коллектива, а также учебно-методические материалы. В Беларуси разработан и используется банк данных одаренной и талантливой молодежи страны, который включает информацию о лауреатах и стипендиатах специального фонда Президента Республики Беларусь по социальной поддержке одаренных учащихся и студентов, о победителях, призерах и обладателях дипломов международных и республиканских олимпиад и конкурсов и т. д. С целью оказания помощи учащимся в выборе профессии и учебного заведения для продолжения образования разработаны и используются системы инфор- Образовательный портал www.adu.by/ Национальный институт образования Информационные системы и технологии 143 aUturfenLbv - Qx»(nчt^Ap«wc аля nornnMtii}ix‘ Е: АБИТУРИЕНТ.ВУ ___^ шуажишййЕ-ойт ; Поиск по сайтУ'.. GI «-4 <7*. К фСрК.^уч.*.1*£<К ^ Кем быть? ^ Где учиться? Еше КС офметлФ г мСвр9пг«юфесо«? f^Konereeff твоену и**я«во каталог 04l4W1bHKTe{li по KOTOptM ТЬ( нокшь nojnroTTbnooroTowyo Hsuia^ спмне. ВАШЕМУ ВНИМАНИЮ Главхая Новасш Каталог вузов Каталог спецкальмостей Мониторинг Инфориацкя прмеиных комиссий вузов 2010г. У*е »юавьг я»1 Кочен» 6егт> е булгкея I Ионе »М1Ь« raenovQ обучпъся зта'т професм1^&t«uien кот шюге есть осе оуэь^ crpactri' НАШИ новости шшат аш1:Ут1ж рг Как поступить? V^eowCponowiewiocTbii evJi пене меи»| KafcnocTT*^’ На нашей се№в есть поршне ncHiena 00 все оуэы стр»«. Архив новосгйй £ Полезно знать 06.04ЛО Началось профессиональнопсихологическое собеседование С 05.04.2C10 б буббх, перечень (соторых утвержден МннисгерстБси обрэзоваиия^ гтроводигся профессионально‘пснхологичесное собеседобэние для граждан, предполагающих участвовать в конкурсе по специальностям высшего образования «Государственное управленне», «Государственное управление и право», «Государственное управление и экономика»,, «Международные отношения», «Международное праео», «Правоведение», Рис. 4.5 мационно-педагогической поддержки старшеклассников, например Абитуриент.Ьу (www.abiturient.by). Эта система осуществляет мониторинг вступительной кампании в вузы Республики. Полный перечень специальностей каждого вуза, по которым производится набор абитуриентов на все формы обучения, приведен на вкладке Где учиться? (рис. 4.5) в разделе «План приема» соответствующего вуза. Узнать результаты репетиционного и централизованного тестирования можно на сайте Республиканского института контроля знаний www.rikz.unibel.by. Здесь же размещены сведения о методических пособиях, которые помогут абитуриентам подготовиться к тестированию. В заключение отметим, что интенсивность использования информационных систем и технологий во всех сферах человеческой деятельности с каждым годом неуклонно возрастает. 1. Какую технологию называют компьютерной информационной технологией? 2. Приведите примеры компьютерных информационных технологий. 3. Какие информационные технологии и системы используются в Вашем учебном заведении? Образовательный портал www.adu.by/ Национальный институт образования I ПРИЛОЖЕНИЕ 1 Структура HTML-документа Начало и конец HTML-документа Головная часть: служебная информация Заголовок окна, в котором отображается документ Тело HTML-документа Фон и цвет страниц^! Фоновая картинка: imf — имя файла или URL Цвет фона: цвет — название или код цвета Цвет текста: цвет — название или код цвета Структура страницы

Абзац

Раздел (может содержать несколько аб- зацев)

Горизонтальное выравнивание абзаца

или раздела: по левому краю | по правому краю | по центру страницы
Переход на новую строку
Горизонтальная разделительная линия
Толщина линии в пикселях
Длина линии в пикселях или процентах от ширины окна
Горизонтальное выравнивание линии Форматирование текста Полужирное начертание Курсивное начертание Подчеркнутое начертание Верхний индекс Нижний индекс

_

Заголовки (6 уровней: 1 — 6) Задание шрифта: шрифт — название Размер шрифта. Абсолютный: 1 2 3 4 5 6 7 Относительный: -2 -1 0 +1 +2 +3 +4 Цвет шрифта: цвет — название или код цвета
	Авторское форматирование. Текст в браузере
	отображается так, как записан в HTML-коде
Образовательный портал www.adu.by/ Национальный институт образования
Приложение 1
145
Изображения на странице
	Ссылка на рисунок: imf — имя файла или
	URL
	пикселях
	Толщина рамки вокруг изображения в
	пикселях
	сительно соседних объектов (текста): по верх-
	нему краю | по нижнему краю | по центру
	слева от текста | справа от текста
txt	Размещение подсказки: txt — текст
	сообщения
Гиперссылки
	Ссылка на страницу, которая открывается в
	том же окне: imf — имя файла или URL
	Ссылка на страницу, которая открывается в
	другом окне: imf — имя файла или URL
	Создание закладки с именем nm
	Ссылка на закладку с именем nm в том же
	документе
	Ссылка на закладку с именем nm в другом
	документе: imf — имя файла или URL
	Цвет непосещенной ссылки: цвет —
	название или код
	Цвет активной ссылки: цвет — название
	или код
	Цвет посещенной ссылки: цвет —
	название или код
Образовательный портал www.adu.by/ Национальный институт образования
146
Приложение 1
Списки
    Маркированный список
  • Элемент списка
      Тип маркера: окружность | круг | квадрат
        Нумерованный список
          Способ нумерации: арабские цифры | строчные латинские буквы | прописные латинские буквы
            Начало нумерации с номера n Таблиц^! Таблица
            Ширина таблицы в пикселях или процентах от ширины окна
            относительно соседних объектов (окна): по левому краю | по правому краю | по центру
            Толщина границ в пикселях
            Расстояние между ячейками в пикселях
            Расстояние между содержимым ячейки и ее границей в пикселях Строка таблицы
            Ячейка таблицы Ширина ячейки в пикселях или в процентах по левой границе | по правой границе | по центру ячейки по верхней границе | по нижней границе | по центру Цвет ячейки Объединение n столбцов Объединение n строк Образовательный портал www.adu.by/ Национальный институт образования ПРИЛОЖЕНИЕ 2 Названия и шестнадцатеричные коды цветов Название Код Цвет aqua #00FFFF black #00000^ blue #0000FF blueviolet #8A2BE2 brown #A52A2A chocolate #D2691E coral #FF7F50 crimson #DC143C cyan #00FFFF darkblue #00008^ darkcyan #008B8B darkgray #A9A9A9 darkgreen #006400 darkmagenta #8B008b darkorange #FF8C00 darkred #8B0 0 0^ gold #FFD700 gray #808080 green #008000 indigo #4B0082 ivory #FFFFF0 khaki #F0E68C lavender #E6E6FA lightblue #ADD8E6 lightcyan #E0FFFF lightgreen #90EE90 lightgrey #D3D3D3 lightpink #FFB6C1 Название Код Цвет lime #00FF00 magenta #FF00FF maroon #80000^ mediumblue #0000CD navy #00008^ olive #808000 orange #FFA500 orchid #DA70D6 palegreen #98FB98 peru #CD853F pink #FFC0CB plum #DDA0DD purple #800080 red #FF0000 rosybrown #BC8F8F salmon #FA8072 seagreen #2E8B57 sienna #A0522D silver #C0C0C0 skyblue #87CEEB tan #D2B48C teal #008080 tomato #FF6347 violet #EE82EE wheat #F5DEB3 white #FFFFFF yellow #FFFF00 yellowgreen #9ACD32 Образовательный портал www.adu.by/ Национальный институт образования I ПРИЛОЖЕНИЕ 3 Графические примитивы модуля GraphABC SetPixel(x,y,color: Закрашивает один пиксель с координатами (x,y) цветом integer); color MoveTo(x,y: Передвигает невидимое перо к точке с координатами integer); (x,y) ; работает в паре с функцией LineTo(x,y) LineTo(x,y: Рисует отрезок от текущего положения пера до точки (x,y) ; integer); координаты пера при этом становятся равными (x,y) Line(x1,y1,x2,y2: Рисует отрезок с началом в точке (x1,y1) и концом в integer); точке (x2,y2) Circle(x,y,r: Рисует окружность с центром в точке (x,y) и радиу- integer); сом r Ellipse(x1,y1,x2,y2: Рисует эллипс, заданный описанным около него прямо- integer); угольником с координатами противоположных вершин (x1,y1) и (x2,y2) Rectangle(x1,y1, Рисует прямоугольник, заданный координатами противо- x2,y2 : integer); положных вершин (x1,y1) и (x2,y2) Arc(x,y,r,a1,a2: Рисует дугу окружности с центром в точке (x,y) и радиусом integer); r, заключенную между двумя лучами, образующими углы a1 и a2 с осью OX (a1 и a2 — вещественные, задаются в градусах и отсчитываются против часовой стрелки) Pie(x,y,r,a1,a2: Рисует сектор круга, ограниченный дугой (параметры integer); процедуры имеют тот же смысл, что в процедуре Arc) FloodFill(x,y,color: integer); Заливает область цветом color, начиная с точки (x,y) TextOut(x,y: Выводит строку s в позицию (x,y) (точка (x,y) задает integer; верхний левый угол прямоугольника, который будет s: string) ; содержать текст из строки s) Действия с графическим окном SetWindowSize(w,h: Устанавливает ширину и высоту графического integer); окна SetWindowCaption(s: string); Устанавливает заголовок графического окна SaveWindow(fname: string); Сохраняет содержимое графического окна в файл с именем fname LoadWindow(fname: string); Выводит в графическое окно рисунок из файла с именем fname ClearWindow; Очищает графическое окно белым цветом ClearWindow(c: ColorType); Очищает графическое окно цветом c Redraw; Осуществляет перерисовку окна Образовательный портал www.adu.by/ Национальный институт образования Приложение 3 149 Константы стандартных цветов clBlack черный clPurple фиолетовый clWhite белый clMaroon темно-красный clRed красный clGreen зеленый clBrown коричневый clBlue синий clSkyBlue голубой clYellow желтый clGray серый clSilver серебряный Действия с пером и кистью SetPenColor(color: integer); Устанавливает цвет пера, задаваемый параметром color SetPenWidth(w: integer); Устанавливает ширину пера, равную w пикселям SetPenStyle(ps: Устанавливает стиль пера, задаваемый параметром integer); ps. Стили пера задаются именованными константами: psSolid, psClear, psDash, psDot, psDashDot, psDashDotDot SetBrushColor(color: integer); Устанавливает цвет кисти, задаваемый параметром color SetBrushPicture(fname: Устанавливает в качестве образца для закраски кистью string); изображение, хранящееся в файле fname SetBrushStyle(bs: Устанавливает стиль кисти, задаваемый параметром integer); bs. Стили кисти задаются именованными константами: bsSolid, bsHorizontal, bsBDiagonal, bsCross, bsClear, bsDiagCross, bsVertical, bsFDiagonal Действия с рисунками LoadPicture(fname: Загружает рисунок из файла с именем fname string): integer; в оперативную память и возвращает описатель рисунка в целую переменную n (n:=LoadPicture(fname)) DrawPicture(n,x,y: Выводит рисунок с описателем n в позицию (x,y) integer); графического окна DrawPicture(n,x,y,w,h: Выводит рисунок с описателем n в позицию (x,y) integer); графического окна, масштабируя его размеры к ширине w и высоте h SavePicture(n: integer; Сохраняет рисунок с описателем n в файл с именем fname: string); fname (форматы BMP, JPG или GIF) SetPictureSize(n,w,h: Устанавливает размер рисунка с описателем n, равным integer); w X h пикселей SetPictureTransparent Устанавливает (b=True) или отключает (b=False) (n: integer; b: режим прозрачности при рисовании изображения с boolean); описателем n Образовательный портал www.adu.by/ Национальный институт образования 1 СОДЕРЖАНИЕ От авторов................................................................ 3 Глава 1. Основы веб-конструирования § 1. Представление о веб-конструировании.................................... 4 1.1. Инструменты и методы разработки веб-сайтов ....................... — 1.2. Проектирование сайта................................................. 6 § 2. Использование офисных приложений для создания веб-страниц................. 8 2.1. Создание веб-страниц в редакторе MS Word ......................... — 2.2. Сохранение презентаций PowerPoint в виде веб-страниц.............. 14 § 3. Основы языка разметки HTML ............................................ 18 3.1. Создание HTML-документа в редакторе Блокнот ......................... — 3.2. Изображения на веб-страницах ....................................... 24 3.3. Создание гиперссылок................................................ 30 § 4. Подготовка изображений для Интернета .................................... 35 § 5. Веб-конструирование в редакторе FrontPage................................ 41 5.1. Основные элементы интерфейса......................................... — 5.2. Работа в редакторе FrontPage ....................................... 43 5.3. Использование таблиц ............................................... 50 5.4. Разработка веб-сайта ............................................... 54 5.5. Публикация сайта ................................................... 61 § 6. Создание фрагментов сайтов по различным предметным областям ........... 62 Глава 2. Основы алгоритмизации и программирования § 7. Выполнение практических заданий из различных предметных областей ...... 65 7.1. Построение геометрических фигур ..................................... — 7.2. Использование растровых изображений ................................ 70 7.3. Построение графиков и диаграмм ..................................... 79 § 8. Выполнение практических заданий по темам учебных предметов ............ 85 8.1. Астрономия .......................................................... — 8.2. География .......................................................... 90 8.3. Биология и экология ................................................ 94 8.4. Физика ............................................................. 98 Глава 3. Обработка информации в системе управления базами данных § 9. Базы данных и системы управления базами данных ........................ 104 § 10. Создание таблицы базы данных.......................................... 108 10.1. Проектирование базы данных ........................................ — 10.2. Создание структуры таблицы ...................................... 111 § 11. Связывание таблиц базы данных......................................... 117 § 12. Создание и заполнение формы .......................................... 121 § 13. Поиск данных с помощью запросов ...................................... 125 § 14. Сортировка записей в таблице ......................................... 129 § 15. Создание отчетов ...................................................... 131 Глава 4. Информационные системы и технологии § 16. Информационные системы................................................. 135 § 17. Информационные технологии ............................................. 140 Приложения .................................................................. 144 Образовательный портал www.adu.by/ Национальный институт образования Учебное издание Заборовский Георгий Александрович Пупцев Александр Евгеньевич ИНФОРМАТИКА Учебное пособие для 11 класса общеобразовательных учреждений с русским языком обучения Зав. редакцией В. Г. Бехтина. Редактор Н. М. Логанова. Художественный редактор Л. А. Дашкевич. Технический редактор М. И. Чепловодская. Компьютерная верстка Г. А. Дудко. Корректоры З. Н. Гришели, Т. Н. Ведерникова, Д. Р. Лосик, В. С. Бабеня, А. В. Алешко. Подписано в печать 05.07.2010. Формат ZOXQO'/jg. Бумага офсетная. Гарнитура литературная. Офсетная печать. Усл. печ. л. 11,12. Уч.-изд. л. 9,1. Тираж 113 800 экз. Заказ Издательское республиканское унитарное предприятие «Народная асвета» Министерства информации Республики Беларусь. ЛИ № 02330/0494083 от 03.02.2009. Пр. Победителей, 11, 220004, Минск. Республиканское унитарное предприятие «Минская фабрика цветной печати» ЛП № 02330/0494156 от 03.04.2009. Ул. Корженевского, 20, 220024, Минск. Образовательный портал www.adu.by/ Национальный институт образования (Название и номер школы) Учебный год Имя и фамилия ученика Состояние учебного пособия при получении Оценка ученику за пользование учебным пособием 20 / 20 / 20 / 20 / 20 / Образовательный портал www.adu.by/ Национальный институт образования