Информационные технологии. Лабораторный практикум (70

ПРАКТИЧЕСКАЯ РАБОТА № 8

1) гомотетичную фигуру относительно: а) вершины шестиугольника; б) точки, лежащей вне его; в) точки, лежащей внутри него;

2) симметричную фигуру относительно: а) стороны шестиугольника;

б) прямой, не пересекающей сторон шестиугольника; 3) поворот на заданный угол относительно:

а) вершины шестиугольника; б) точки, лежащей вне его;

4) параллельный перенос на заданный вектор: а) полярный; б) декартов.

Комментарий:

На страницах с лабораторными работами для учащихся

должны быть:

а) название работы; б) формулы или другие вычисления;

в) указания для учащихся, какие действия им необходимо совершить для установления того или иного геометрического факта.

Контрольныевопросы

1.В чем состоит преимущество использования среды «Живая математика» перед традиционным преподаванием темы «Геометрическое место точек»?

2.Приведите свой пример использования параметрического цвета и слежения за объектами при объяснении нового материала на уроке геометрии.

3.Перечислите известные вам способы построения правильных многоугольников. Привлечения каких геометрических знаний требует каждый из них?

Практическая работа № 8 Работа с программным средством учебного

назначения «Живая математика». Построение графиков функций

Цель: обучить работе на координатной плоскости в среде «Живая математика».

Результат: созданные лабораторные работы для учащихся, предполагающие построение графиков функций различ-

21

ПРАКТИЧЕСКАЯ РАБОТА № 8

ной сложности и установление свойств функций по графикам.

Необходимые сведения из курса математики можно по-

смотреть на сайте: www.mathematics.ru.

Задание 1. Координатная плоскость. Начало работы.

1. Задайте систему координат на плоскости командой

Графики – Задать систему координат.

2. Отметьте две любые точки А и В. Для точки А определите абсциссу (с помощью команды Измерения

– Абсцисса (x)), для В – ординату.

3. Отметьте точку С (по возможности на пересечении горизонтальной и вертикальной линий сетки). Определите ее координаты с помощью команды Измерения – Координаты. Убедитесь, что не всегда удается поставить точку так, чтобы ее координаты были целочисленными.

4. Команда Графики – Привязывать точки к сетке

используется для более точного построения точек с целочисленными координатами. Постройте много-

угольник ABCDE, если А(–7;3), В(–1;4), С(3;–1),

D(–5;– 4), E(–2;0). Определите его площадь.

5. Постройте на координатной плоскости любую окружность. Определите ее уравнение с помощью команды Измерения – Уравнение.

6. Создайте лабораторную работу для учащихся, с помощью которой можно установить зависимость между углом наклона прямой и знаком коэффициента перед переменной x.

7. Начертите любой отрезок. Выполните команду Измерения – Наклон. Выясните, что показывает найденная величина.

Задание 2. Запись результатов наблюдений в таблицу.

1. Постройте окружность с центром в начале координат. Отметьте какую-либо точку на окружности. Вычислите ее абсциссу и ординату. Составьте таблицу, внеся в первую колонку абсциссу точки, во вторую – ординату, в третью – формулу x2+y2. Перемещая точку по окружности, зафиксируйте 6–7 ее положений. Убедитесь, что значения в первой и второй колонках меняются, в третьей – постоянны.

2. Составьте любую лабораторную работу для учащихся на координатной плоскости, требующую фиксации данных в таблице.

22

ПРАКТИЧЕСКАЯ РАБОТА № 8

Задание 3. Построение графиков функций в декартовых и полярных координатах.

1. Задайте функцию y=|x+2·|x+4·|x+3|||–1. Постройте ее график в прямоугольной системе координат.

2. Постройте в полярной системе координат (Графики – Форма сетки) кривую, называемую полярной розой. Она может быть определена простым уравнением в полярных координатах: f(θ)=a·cos(kθ+φ0) для произвольной постоянной φ0 (включая 0). Значения параметров возьмите произвольными. Измените единичный вектор так, чтобы полярная роза занимала весь экран.

Для прекращения анимации используйте команду

Вид – Остановить анимацию.

4. Архимедову спираль можно определить с помощью простого полярного уравнения f(θ)=a+bθ. Постройте архимедову спираль. Выясните с помощью анимации параметра и напишите на чертеже, какие изменения происходят с архимедовой спиралью при изменении параметров.

5. Создайте лабораторную работу для учащихся по изучению расположения и вида графиков функций:

а) y=ax2+bx+c;

б) y=a·sin(kx+b) либо y=a·cos(kx+b); в) y=a·tg(kx+b) либо y=a·ctg(kx+b).

Задание 5. Копирование рисунков «Живой матема-

тики» в MS Word.

Создайте следующий текст самостоятельной работы в MS Word. Функция задана графиком, изображенным на рис. 3.

23

ПРАКТИЧЕСКАЯ РАБОТА № 9

Рис. 3. График функции

Укажите для этой функции: а) область определения; б) область значений;

в) промежутки возрастания и убывания; г) наибольшее и наименьшее значения для промежутка,

являющегося областью определения этой функции.

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

Контрольныевопросы

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

2.Как можно использовать на уроке возможности построения графиков функций в среде «Живая математика»? Приведите 3–4 примера.

Практическая работа № 9 Работа с текстом, списками, рисунками, цветом,

гиперссылками, таблицами в HTML-документе

Цель:обучитьосновнымпринципамразработкииреализации веб-страниц на основе языка гипертекстовой разметки HTML.

Результат: созданные веб-страницы на языке HTML.

Задание:

1. Создайте веб-страницу в любом текстовом редакторе, сохранив файл в формате html с именем index.

24

ПРАКТИЧЕСКАЯ РАБОТА № 9

2.В элементе <title> укажите название страницы: «Работа с текстом в HTML-документе».

3.Отформатируйте следующий текст согласно указаниям в скобках (рис. 4).

4.Просмотрите созданную страницу в браузере.

5.Добавьте на страницу нумерованный и маркированный списки согласно приведенному ниже тексту

(рис. 5).

6.Просмотрите обновленную страницу в браузере.

7.Сделайте цвет фона страницы зеленым.

Информационныетехнологии в наукеи образовании (заголовок Н1)

Технологии

(заголовокН2)

Информационные

(выравнивание слева, полужирный шрифт)

Компьютерные

(выравнивание справа, полужирный шрифт, курсив)

Учебный материал

(выравнивание по центру, полужирный шрифт,курсив)

О дисциплине

(выравнивание по центру, цвет синий)

Дисциплинавходит в базовую часть общенаучного цикла, изучается параллельно с такимидисциплинами общенаучного цикла как: «Современные проблемыматематики», «Дополнительные вопросы математики»,

«Обработка математических текстов/Системы компьютерной математики».

(выравнивание слева, размер шрифта 10)

Рис. 4. Примерный текст

25

ПРАКТИЧЕСКАЯ РАБОТА № 9

Персональный компьютер (выравнивание по центру, размер шрифта 12, цвет желтый)

1.Системныйблок

2.Устройстваввода

3.Устройствавывода

(выравнивание слева, размер шрифта8)

Устройства вывода (выравнивание по центру, размер шрифта 10,цвет коричневый)

Рис. 5. Примерные списки

8.Вставьте горизонтальную линию красного цвета шириной 10 между текстами рис. 4 и 5.

9.Вставьте горизонтальную линию в конце страницы шириной 5, длиной 50% от ширины экрана и выровняйте ее по центру.

10.Просмотрите обновленную страницу в браузере.

11.Разместите на странице изображение персонального компьютера справа от списка устройств компьютера

(рис. 6).

12.Сделайте подпись «Персональный компьютер» к добавленному изображению на рис. 6.

Персональный компьютер (выравнивание по центру, размер шрифта 12, цвет желтый)

1.Системныйблок

2.Устройстваввода

3.Устройствавывода

(выравнивание слева, размер шрифта8)

Устройства вывода (выравнивание по центру, размер шрифта 10,цвет коричневый)

А. принтер В. монитор

С. наушники/колонки D. плоттер

Рис. 6. Добавление рисунка на страницу

26

ПРАКТИЧЕСКАЯ РАБОТА № 9

13.Создайте рамку шириной 2 вокруг изображения на рис. 6.

14.Просмотрите обновленную страницу в браузере.

15.Создайте новую веб-страницу, сохранив ее в формате html с именем file1.

16.Сделайте фон страницы фиолетовым.

17.Добавьте любой рисунок на страницу file1, связанный с темой компьютера. Рисунок выровняйте по центру и задайте его размеры: ширина 100, высота 100.

18.Под рисунком добавьте текст «Назад», выровняв его по центру.

19.На странице index создайте гиперссылку на страницу file1 через изображение «Персонального компьютера».

20.На странице file1 создайте гиперссылку на страницу index через текст «Назад».

21.Просмотрите обновленные страницы в браузере.

22.Создайте третью страницу file2, сделайте ее фон черным.

23.Разместите на ней изображения принтера, монитора, наушников, колонок и плоттера в произвольном порядке.

24.По аналогии создайте гиперссылки между страницами index и file2. Со страницы index гиперссылка должна работать с текста «Устройства вывода», а со страницы file2 – с текста «Назад».

25.Просмотрите обновленные страницы в браузере и убедитесь, что все гиперссылки работают.

26.Добавьте в файл index.html таблицу, состоящую из 6 строк и 3 столбцов.

27.Приведите добавленную таблицу к следующему виду

(рис. 7).

27

ПРАКТИЧЕСКАЯ РАБОТА № 9

Монитор Монитор (от лат. monitor

– напоминающий, предупреждающий, надзиратель, надсмотрщик), дисплей – это устройство для вывода информации

Наушники Наушники – устройство для вывода звуковой информации

Колонки Колонки – устройство для вывода звуковой информации

Плоттер Плоттер (графопостроитель) – устройство для автоматического вычерчивания с большой точностью рисунков, схем, сложных чертежей, карт и другой графической информации на бумаге размером до A0 или кальке. Бывают перье-

вые и струйные

Рис. 7. Внешний вид таблицы

28

ПРАКТИЧЕСКАЯ РАБОТА № 10

28. Просмотрите обновленную страницу в браузере.

Контрольныевопросы

1.Какова структура веб-страницы в HTML-коде?

2.Перечислите основные теги HTML-языка для работы с текстом, списками, рисунками, таблицами, гиперссылками, а также их основные свойства.

3.В каком формате необходимо сохранять веб-страницы написанные на HTML, для их просмотра в браузере?

Практическая работа № 10 Язык HTML. Создание каскадных таблиц стилей CSS

Цель: обучить созданию каскадных таблиц стилей. Результат:созданныйнабороднотипныхHTML-документов

образовательного назначения, оформленный в едином стиле. http://html.manual.ru/ – справочник по HTML. http://css.manual.ru/ – справочник по CSS.

Применить каскадную таблицу стилей (CSS) к HTMLдокументу можно одним из трех способов (либо комбинировать их):

а) применить inline-стиль, то есть назначить стиль конкретному HTML-элементу непосредственно в документе с помощью HTML-атрибута style;

б) встроить стили непосредственно в HTML-документ (в виде блока CSS-текста) с помощью элемента style;

в) применить внешние стили (в виде отдельного текстового CSS-файла) с помощью элемента link.

Все CSS-правила состоят из селектора и блока объявлений

(заключенного в фигурные скобки). Внутри блока объявлений могут находиться одно или несколько объявлений, разделенных точкой с запятой. Объявление – это строка, составленная из CSS-свойства и его значения.

селектор свойство:значение;

14243 144424443

HTML−тег, ID объявление

или класс

Задание 1. Создание HTML-документа.

1. Загрузите папку с материалами для данной работы с сайта www.tidm.ru. Сохраните ее в своей папке.

29

ПРАКТИЧЕСКАЯ РАБОТА № 10

2. Создайте документ tetrahedron.html на основе существующей заготовки (Тетраэдр.txt).

Задание 2. Использование стилей, подставляемых в строку (inline styles).

Иногда нужно назначить стиль отдельному элементу на странице. Типичный случай – элемент встречается единожды в документе или на сайте, но требует особого оформления. Воспользуемся атрибутом style:

<p style=”color: red”>Эта и только эта фраза написана красным!</p>

Атрибут style есть почти у всех HTML-элементов, кроме тех, которые располагаются вне элемента body. Внутри атрибута style можно написать несколько CSS-объявлений, разделенных точкой с запятой; фигурные скобки не используются.

Замечание: лучше избегать использования описанного способа. Inline-стили смешивают содержимое документа и его дизайн, в то время как идеологически более правильно отделять содержимое документа от информации о его оформлении.

1. Оформите файл tetrahedron.html (как образец см. Тетраэдр.pdf) с помощью атрибутов style.

2. Сохраните результат работы под именем tetrahedron-1. html.

Задание 3. Использование таблиц стилей документа

(document style sheets).

Таблицы стилей документа называются так потому, что располагаются непосредственно в HTML-документе и применяются только к нему. Иногда их называют embedded style sheet (встроенный стиль).

CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента style:

<style type=”text/css”>

...

</style>

Сам тег <style> может находиться в любой части докумен та, но обычно его размещают внутри элемента <head>.

1. Оформите полученный файл tetrahedron-1.html с помощью таблиц стилей документа.

2. Сохраните результат работы под именем tetrahedron-2. html.

30