Обобщающий тест по теме "Компьютерное моделирование"
Электронное приложение к учебнику
Ссылка на скачивание учебника (в формате .pdf)
Тест по теме "Основы веб-конструирования" - подготовка к контрольной работе
Понятие о каскадных таблицах стилей CSS (видеоролик на youtube.com)
Тема урока: «Мультимедиа на веб-страницах»
Парный тег <audio> позволяет добавить на страницу аудиофайл, парный тег <video> позволяет добавить на страницу видеофайл. Теги для вставки аудио и видеофайлов должны содержать обязательный атрибут src, который указывает путь к файлу.
Есть браузеры, которые не поддерживают некоторые аудио и видеофайлы. В таблице приведены примеры поддерживаемых браузерами кодеков:
Кодек |
Internet Explorer |
Chrome |
Opera |
Firefox |
wav |
‒ |
+ |
+ |
+ |
mp3 |
+ |
+ |
‒ |
‒ |
mp4 |
‒ |
+ |
‒ |
‒ |
Вставка звука: <audio src="имя файла"> </audio>
Атрибуты:
autoplay:
Указывает, что воспроизведение аудиофайла должно начинаться автоматически, как только файл будет полностью загружен.
Атрибут autoplay можно задавать без значения:
<audio src="sound.mp3" autoplay> </audio>
controls:
Отображает элементы управления воспроизведением, включающим в себя: запуск, паузу, полосу прокрутки и громкость звука. По умолчанию, при отсутствии атрибута, панель управления аудиофайлом отображена не будет.
Атрибут controls можно задавать без значения:
<p>Нажмите кнопку воспроизведения </p>
<audio src="sound.mp3" controls> </audio>
loop:
Указывает, что воспроизведение будет начинаться сначала, каждый раз, после завершения (повтор воспроизведения). Атрибут loop можно задавать без значения:
<audio src="sound.mp3" loop> </audio>
Вставка видео: <video src="имя файла"> </video>
Атрибуты:
autoplay:
Указывает, что воспроизведение видеофайла должно начинаться автоматически, как только файл будет полностью загружен:
<video src="film.mp4" autoplay></video>
controls:
Отображает элементы управления воспроизведением, включающие в себя: запуск, паузу, полосу прокрутки, громкость звука, включение полноэкранного режима, титры/субтитры (при наличии) и звуковую дорожку (при наличии).
<video src="film.mp4" controls></video>
height:
Устанавливает высоту видеоплеера в пикселях (пример: height="200").
width:
Устанавливает ширину видеоплеера в пикселях (пример: width="200").
loop:
Указывает, что воспроизведение будет начинаться сначала, каждый раз, после завершения (повтор воспроизведения).
poster:
Указывает URL-адрес изображения (картинки), которое будет отображаться пока видеофайл загружается или пока пользователь не нажмет кнопку воспроизведения. Если атрибут не установлен, то браузер отображает первый кадр видеоролика.
<video src="film.mp4" controls poster=”filmposter.jpg”></video>
На веб-страницу можно добавить бегущую строку с помощью парного тега <marquee>:
<marquee> Текст </marquee>
Атрибуты:
behavior |
Задает тип движения строки: alternate: Контент перемещается между правым и левым краем элемента; scroll: Контент перемещается в направлении, заданным атрибутом direction, затем скрывается за пределами области, после чего начинает движение с начала; slide: Контент перемещается в направлении, заданным атрибутом direction, доходит до края области и останавливается |
bgcolor |
Цвет фона |
direction |
Указывает направление движения содержимого контейнера (right, left, up, down) |
height |
Высота области прокрутки |
loop |
Задает, сколько раз будет прокручиваться содержимое |
scrollamount |
Скорость движения контента |
width |
Ширина области прокрутки |
onmouseout="this.start()" onmouseover="this.stop()" |
Остановка движения при наведении мышью |
Например:
<marquee behavior="alternate" bgcolor="#ffb6c1" scrollamount="100"
onmouseout="this.start()" onmouseover="this.stop()" direction="right">
Текст </marquee>
Изображения, списки, гиперссылки на веб-страницах
Изображения:
<img src=”имя файла”>
Атрибуты: src – обязательный атрибут
width – ширина
height – высота
border – рамка
title – текстовая информация об изображении
Гиперссылки:
<a href=”имя файла, URL-адрес ресурса”> текст, изображение </a>
Атрибуты: href – обязательный атрибут
target – как открывается ссылка (_blank – в новой вкладке)
Списки:
Нумерованный:
<ol>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
Атрибуты: type="1" ("A", "a", "I", "i")
start=”начало списка”
Маркированный:
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
Атрибут: type="disc" ("circle", "square")
Тема урока: «Использование таблиц на веб-страницах»
Таблицы используются для оформления таблично заданной информации, а также служат инструментом для табличной верстки. Использование таблиц с невидимой границей – известный способ верстки, применяемый на множестве сайтов. Такая таблица фактически представляет собой модульную сетку, в которой удобно размещать отдельные элементы веб-страницы.
Таблица состоит из строк, строки состоят из ячеек.
Тег |
Назначение |
<table> … </table> |
Создание таблицы |
<tr> … </tr> |
Создание строки таблицы |
<td> … </td> |
Создание ячеек таблицы |
Атрибуты тегов <table>, <tr>, <td>
Атрибут |
Назначение |
align |
Определяет выравнивание по горизонтали: таблицы | информации в строке | информации в ячейке
|
valign |
Определяет выравнивание по вертикали: информации в строке | информации в ячейке
|
bgcolor |
Цвет фона для таблицы | строки | ячейки |
background |
Имя графического файла с фоновым изображением для таблицы | строки | ячейки |
border |
Толщина рамки таблицы (по умолчанию толщина – 0, т.е. рамки нет) |
bordercolor |
Цвет рамки таблицы | ячейки |
width |
Ширина таблицы | ячейки в пикселях или процентах |
height |
Высота таблицы | ячейки в пикселях или процентах |
Пример (чтобы увидеть как страница будет выглядеть в браузере, скопируйте текст кода, вставьте в Блокнот, сохраните его в файле с расширением .html и откройте этот файл в браузере):
<table border="1">
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
<td>Ячейка 9</td>
</tr>
</table>
В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали. Используются атрибуты для тега <td>.
Атрибут |
Назначение |
colspan=n |
Объединение ячеек по горизонтали, n – количество ячеек для объединения. |
rowspan=n |
Объединение ячеек по вертикали, n – количество ячеек для объединения. |
Пример (чтобы увидеть как страница будет выглядеть в браузере, скопируйте текст кода, вставьте в Блокнот, сохраните его в файле с расширением .html и откройте этот файл в браузере):
<table border="1">
<tr>
<td colspan=2>Ячейка 1 </td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
<td>Ячейка 9</td>
</tr>
</table>
Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:
<td colspan="3" rowspan="2">Текст ячейки</td>
Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке <tr>. Например, если в таблице 3 колонки с ячейками <td>, и мы объединяем первую и вторую ячейку, то всего внутри тега <tr>, определяющего данную строку будет 2 элемента <td>, первый из них будет содержать атрибут colspan="2".
Задание на использование таблиц на веб-странице размещено на google-диске:
https://drive.google.com/open?id=1W6URgdd80zgrYlEFevYGy9FEYianA2TQ
Некоторые теги языка HTML
Моделирование в экономических задачах
Установка надстройки Поиск решения в табличном процессоре Excel:
1. На вкладке Файл в левом вертикальном меню выбрать пункт Параметры. Открывается диалоговое окно Параметры.
2. В левом вертикальном меню этого диалогового окна выбирают пункт Надстройки. Открывается вкладка Надстройки.
3. На вкладке Надстройки в ее последнем разделе Управление: размещено поле, в котором должна находиться надпись Надстройки Excel.
4. Правее надписи в текстовом поле щелкают по кнопке Перейти… . Появляется еще одно диалоговое окно Надстройки.
5. В окне Надстройки отмечают пункт Поиск решения и щелкают по кнопке ОK. Надстройка Поиск решения устанавливается.
Задача оптимального планирования производства
Задача 1. Кондитерский цех выпускает два вида тортов: «Лакомка» и «Медовый». На изготовление торта «Лакомка» затрачивается в среднем 0,3 ч, а на изготовление торта «Медовый» — 0,4 ч. Рабочий день длится 8 ч. Для хранения готовой продукции в цехе имеется холодильник на 25 тортов. Торт «Лакомка» продается по цене 12 руб., а торт «Медовый» — по цене 15 руб. Каким должен быть дневной план производства тортов, чтобы объем производства в денежном выражении был максимальным?
Построение математической модели.
x и y — плановые показатели;
x - количество тортов «Лакомка», планируемых для изготовления за день,
y - количество тортов «Медовый», планируемых для изготовления за день.
U(x, y) - объем дневного производства тортов в денежном выражении.
Решением данной задачи является пара чисел х и у, удовлетворяющих ограничениям:
U(x, y) = 12х + 15у → максимально возможное значение;
x + y ≤ 25,
0,3x + 0,4y ≤ 8
x, y — целые,
x ≥ 0, y ≥ 0.
Построение компьютерной модели (в Excel).
1. Внесите в таблицу исходные данные, как на рисунке:
2. В ячейки расчетной таблицы внесите формулы:
А12: =В11 + С11
А13: =В4*$B$11+C4*$C$11
A14: =B5*$B$11+C5*$C$11
3. На вкладке Данные в группе Анализ выберите команду Поиск решения.
В окне Параметры поиска решения установите настройки в соответствии с рисунком. Нажимайте кнопку Добавить… для добавления нужных по условию задачи ограничений.
4. Щелчок по кнопке Найти решение позволяет получить ответ.
Задача 2. На листе электронной таблицы с компьютерной моделью, построенной к задаче 1, постройте таблицу со следующими столбцами:
Задав число мест хранения 20, найдите решение задачи и запишите в первую строку таблицы значения найденных плановых показателей и объема производства в денежном выражении. Аналогично заполните остальные строки таблицы для числа мест хранения от 21 до 30. Как связано число мест хранения в холодильнике с объемом производства в денежном выражении? Имеет ли смысл иметь в холодильнике более 26 мест хранения?
Задача оптимального планирования времени производства
Задача 1. Кондитерский цех выпускает два вида тортов: «Лакомка» и «Медовый». На изготовление торта «Лакомка» затрачивается в среднем 0,3 ч, а на изготовление торта «Медовый» — 0,4 ч. Для хранения готовой продукции в цехе имеется холодильник на 25 тортов. Торт «Лакомка» продается по цене 12 руб., а торт «Медовый» — по цене 15 руб. Каким должен быть план производства, чтобы заказ стоимостью не менее 150 руб. был выполнен за минимальное время?
Для решения задачи можно использовать компьютерную модель, построенную для решения задачи оптимального планирования производства. При этом надо учесть, что изменилась целевая функция и некоторые ограничения.
Целевая функция — время производства (время выполнения заказа): T(x, y) =0,3x + 0,4y → min
Останутся ограничения:
x + y ≤ 25,
x, y — целые,
x ≥ 0, y ≥ 0.
Добавится ограничение на объем производства (заказа) в денежном выражении: U(x, y) = 12x + 15y ≥ 150.
В ячейку В8 следует добавить текст: "объем заказа (в рублях)";
в ячейку А8 - число 150.
Задачи для самостоятельного решения:
Задача 2. Цех мебельной фабрики выпускает детские мебельные наборы «Буслик» и «Гном». Для каждого набора «Буслик» требуется 0,2 ч машинного времени и 3,5 кв.м мебельного щита, а для каждого набора «Гном» требуется 0,5 ч машинного времени и 4 кв.м мебельного щита. В неделю можно использовать не более 150 ч машинного времени и не более 1600 кв.м мебельных щитов. Набор «Буслик» продается по цене 130 руб., а набор «Гном» — по цене 200 руб. Сколько наборов каждого вида следует выпускать в неделю для достижения максимального объема производства в денежном выражении? Ответ: 210; 216.
Задача 3. Цех мебельной фабрики выпускает детские мебельные наборы «Буслик» и «Гном». Для каждого набора «Буслик» требуется 0,2 ч машинного времени и 3,5 кв.м мебельного щита, а для каждого набора «Гном» требуется 0,5 ч машинного времени и 4 кв.м мебельного щита. В неделю можно использовать не более 1600 кв.м мебельных щитов. Набор «Буслик» продается по цене 130 руб., а набор «Гном» — по цене 200 руб. Сколько наборов каждого вида следует выпускать в неделю, чтобы объем производства в денежном выражении был не ниже 60 000 руб., а использование машинного времени было минимальным? Ответ: 442; 13.