Автор работы: Пользователь скрыл имя, 13 Сентября 2013 в 07:54, дипломная работа
Для подготовки структуры гипертекстовых документов используется язык HTML (Hyper Text Markup Language – язык разметки гипертекстовых документов), предоставляющий широкие возможности по форматированию и структурной разметке документов, организации связей между различными документами, средства включения графической и мультимедийной информации. HTML-документы просматриваются с помощью специальной программы – браузера.
ВВЕДЕНИЕ. СТРУКТУРА WEB ДОКУМЕНТА. ИССЛЕДОВАНИЕ ЭЛЕМЕНТОВ ИНТЕРФЕЙСА 55
1 ОБЩАЯ ЧАСТЬ 7
1.1 Электронное учебное пособие. Дизайн ЭУИ 7
1.2.1 Основные требования к содержанию электронных учебных пособий 11
1.2.2 HTML тэги. Принципы создания страниц в формате html, php 13
1.2.3 Форматирование текста 24
1.2.4 Работа со стилями 26
1.2.5 Добавление мультимедийных фрагментов в ЭУИ 31
1.2.6 Разработка навигации ЭУИ. Гиперссылки 35
1.3 Интерактивность ЭУИ 39
1.4 Создание автоматизированной системы контроля 42
1.5 Создание и внедрение ЭУИ 43
2 СПЕЦИАЛЬНЫЙ ВОПРОС 45
2.1 Постановка задачи 45
2.2 Разработка дизайн макета ЭУИ 45
2.3 Описание программы 53
2.4 Возможности и особенности использования ЭУИ в системе образования 55
2.5 Инструкция пользователю по работе с программой 60
3 ЭКОНОМИЧЕСКАЯ ЧАСТЬ 62
3.1 Рассчитать величину затрат на создание и разработку ЭУИ 62
4 ОХРАНА ТРУДА 77
4.1Опасные и вредные производственные факторы и меры защиты от них 77
5 ТЕХНИКА БЕЗОПАСНОСТИ 86
5.1 Правила пожарной безопасности при обслуживании вычислительной техники 86
ЗАКЛЮЧЕНИЕ 89
СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУРЫ 90
Рисунок 6 - Пример каскадного стиля
В приведенном примере использованы тег <DIV> и атрибут CLASS. тег <DIV> применяется для задания части страницы (фрагмента документа). Он ничего не форматирует, а лишь помечает фрагмент текста, который рассматривается как единый объект. Атрибут CLASS позволяет сослаться на таблицу стилей и тем самым задать стиль представления текста, расположенного между тегами <DIV CLASS . . . > и </DlV>. Обратите внимание на то, как в таблице стилей определяется стиль: набору свойств в фигурных скобках присваивается имя, перед которым ставится точка. В дальнейшем идут ссылки на эти имена с помощью атрибута CLASS для применения ранее определенного стиля. Идея проста: сначала определяется что-то, а затем используется это определение путем ссылки на него.
В этом примере тексты определяются как бы в слоях, которые накладываются друг на друга. Так, сначала выводится слой тень, затем на него накладывается слой основа, а потом — слой 1 и слой 2. Порядок, в котором слои накладываются друг на друга, задается порядком следования фрагментов текста, помеченных тегом <DIV>. Собственно перекрытие слоев обеспечивается применением отрицательных значений свойства margin-top (отступ сверху).
В рассмотренном выше примере были использованы следующие свойства:
margin-top — отступ сверху;
color —цвет;
font-size — размер шрифта;
font-family — семейство шрифтов;
weight — степень «жирности» шрифта;
line-height — высота строки.
Используя отрицательные значения свойства margin-top, можно наложить один текст на другой.
Кроме рассмотренных выше способов задания стилей, можно применять атрибут STYLE, вставляемый в теги заголовков, абзаца <Р>, тела <BODY>, <DIV> и <IMG>. В этом случае стиль задается в следующем формате:
STILE ="описание свойств стиля"
Описание свойств стиля заключается в кавычки и содержит свойства и их значения, перечисленные через точку с запятой, как это делалось при использовании тега <STYLE>.
Атрибут STYLE обычно применяется в тех случаях, когда необходимо задать стиль элемента по месту его появления в программе. Вот пример использования атрибута STYLE для форматирования заголовка второго уровня.
<Н2 STYLE="font-size:48; font-family:Аriаl">Некоторый текст</Н2>
1.2.5 Добавление мультимедийных фрагментов в ЭУИ
графических изображений на web-страницы можно добавлять различные средства мультимедиа. При правильном применении они могут положительно повлиять на содержание страницы. Но не стоит забывать о том, что мультимедийные файлы могут иметь большие размеры и для их загрузки потребуется слишком много времени. Не побоюсь повториться сказав о том, что загрузка страницы имеет не последнее значение и поэтому нужно использовать мультимедийное оформление только тогда, когда это действительно необходимо.
Содержание:
Для добавления фонового звука на web-страницу применяется элемент bgsound (Background Sound), адрес аудиофайла прописывается при помощи, уже знакомого, атрибута src. Аудиофайл имеет ограниченное время звучания, поэтому количество повторений задается атрибутом loop. При указании значения loop="-1", аудиофайл будет повторяться бесконечно. В примере HTML-кода задано пятикратное повторение воспроизведения:
< bgsound src="audio/file.wav" loop="5" >
Громкость воспроизведения регулируется атрибутом volume, значения задаются в пределах от -10 000 до 0. Максимальной громкости соответствует нулевое значение.
Стерео баланс задается атрибутом balance, в пределах от -10 000 до 10 000. Нуль определяет несмещенный баланс (balance="0"). Код будет выглядеть вот так:
< bgsound src="audio/file.wav" loop="5" balance="0" volume="-1000" >
Элемент OBJECT, добавляем видео
Для того, чтобы добавить на web-страницу Flash-ролик, видео или приложение написанное на языке Jawa применяется элемент object.
Код для вставки видеофайла:
< object data="абсолютный или относительный адрес (URL) файла.avi" type="video/avi" >
Так используется элемент object для вставки flash-ролика:
< object classid="clsid:d27cdb6e-ae6d-
codebase="http://active.
< param name="movie"
value="абсолютный или относительный
адрес (URL) файла.swf" />
< param name="play"
value="true" />
< param name="loop"
value="true" />
< param name="quality"
value="hight" />
< /object >
Элемент param задает значения начальных параметров, которые передаются Flash-плееру или какому-либо другому приложению. Элементы param располагаются между открывающим и закрывающим тегами элемента object, и не имеют закрывающего тега.
Для элемента object предусмотрен ряд атрибутов:
classid - содержит URL описания типа встраиваемого объекта или заменяет атрибут DATA;
codebase - содержит URL приложения, необходимого для просмотра встраимого объекта;
codetype - содержит MIME-тип объекта (определяет что это за объект: видеоролик, flash-ролик, аплет...);
data - задает URL встраимого объекта.
standby - содержит текст, который отображается браузером во время загрузки файла объекта;
width, height, border - высота, шитина и толщина рамки вокруг объекта;
align - выравнивание на странице (left, right, center,).
Далее переходим к заключительному разделу, в котором рассмотрим как строятся таблицы в HTML.
Важным элементом при формировании таблицы стилей является добавление названий стилей. Названия стилей могут быть добавлены непосредственно в файл .styles.php. Данный файл размещается в папке шаблона сайта и имеет следующий формат.
<?
$arStyles = Array(
"information-block-head" => "Заголовок инфоблока",
"content-block-head" => "Заголовок с отступом",
"information-block-body" => "Текст элементов
инфоблока",
"tablehead" => "Таблица - шапка",
"tablebody" => "Таблица - тело",
);
return $arStyles;
?>
Также названия стилей могут
добавляться в форме
Рисунок 7 - форм настроек.
Если в форме настроек модуля Управление структурой на закладке Визуальный редактор выбрать опцию Разрешить в визуальном HTML редакторе выводить стили без названий,
Рисунок 8 - Визуальный редактор
то в списке будут представлены все доступные для страницы стили, в том числе те, для которых не заданы названия:
Рисунок 9 - создания стиля: information-block
Для обозначений стиля с неустановленным названием будет использоваться имя, заданное при создании стиля: information-block, content-block и т.д.
Также в таблице стилей могут быть созданы стили, применяемые к определенным html-элементам страницы (например, границам таблицы, ячейкам, рисункам и др.). При выделении данных элементов в списке будут выводиться доступные для них стили.
1.2.6 Разработка навигации ЭУИ. Гиперссылки
Навигационная панель неизбежный элемент любого ЭУИ. В этом посте я хочу поделиться с вами некоторыми простыми методами и идеями, которые, надеюсь, помогут вам создать более совершенную HTML навигацию по сайту.
Давайте начнем с иллюстрации типичной HTML структуры. Перед вами схема типичной навигационной панели, в которой присутствует несколько ссылок.
Рисунок 10 - Схема типичной навигационной панели.
HTML код предельно прост: блок div и неупорядоченный список внутри. Как вы, возможно, знаете, спецификация HTML5 ввела новый элемент (nav), который идентифицирует навигационную панель. Тег nav заменяет общий тег div ,но, как вы можете видеть ниже, общая структура навигационной панели не меняется.
HTML
<div id="nav">
<ul>
<li><a href="/index">Home</a></li>
<li><a href="/link1">Link 1</a></li>
<li><a href="/link2">Link 2</a></li>
<ul>
</div>
HTML 5
<nav>
<ul>
<li><a href="/index">Home</a></li>
<li><a href="/link1">Link 1</a></li>
<li><a href="/link2">Link 2</a></li>
<ul>
</nav>
Организовать навигационную панель при помощи неупорядоченного списка (ul) всегда хорошая практика, особенно если вам требуется организовать более сложное взаимодействие между основными ссылками и подменю.
Рисунок 11 - Перед вами пример HTML разметки навигационной панели с подменю.
HTML
<div id="nav"> <!-- nav контейнер -->>
<ul>
<li> <a href="/link1">Ссылка 1</a> <!-главный элемент -->
<ul> <!-- пункт подменю -->
<li> <a href="/s-link1">Sub Ссылка 1</a></li>
<li> <a href="/s-link2">Sub Ссылка 2</a></li>
</ul> <!-закрыть подменю -->
</li>
<ul>
</div>
Предложения по CSS
Сейчас давайте обратим внимание на три момента, которые сделают ваш CSS код лучше. Высота тега li должна быть равна высоте неупорядоченного списка (ul).
Рисунок 12 - Для идеального вертикального выравнивания текста установите значение свойства line-height равным высоте тега ul.
Рисунок 13 - Чтобы область ссылки была кликабельна полностью, установите для ссылки (a) display:block.
Гиперссылка (англ. hyperlink) — часть гипертекстового документа, ссылающаяся на другой элемент (команда, текст, заголовок, примечание, изображение) в самом документе, на другой объект (файл, каталог, приложение), расположенный на локальном диске или в компьютерной сети, либо на элементы этого объекта.
Гиперссылка может быть добавлена к любому элементу гипертекстового документа и обычно выделяется графически. В HTML-документах текстовые ссылки по умолчанию выделяются синим цветом, при наведении на них курсором мыши в окне браузера изменяются, например, меняют цвет или выделяются подчеркиванием. При навигации в браузере с помощью клавиатуры текстовые и графические ссылки выделяются прямоугольной пунктирной рамочкой. Посещенная ранее ссылка обычно выделяется цветом, отличным от цвета непосещённой ссылки.
«Битой» ссылкой называют такую гиперссылку, которая ссылается на отсутствующий по каким-либо причинам объект, например, если документ или файл удален или перемещен администратором ресурса, на котором он был расположен, или если сам ресурс недоступен. Обычно в таком случае на странице появляется сообщение с кодом ошибки, но это происходит не всегда. Обычно битые ссылки выделяются красным цветом.
Гиперссылка — фрагмент HTML-документа и его базовый элемент:
Гиперссылка на другую HTML-страницу.Для определения ссылки в HTML используется тег <a>, структура которого имеет вид <a href="filename">Текст ссылки</a>, где filename — имя файла или адрес в Интернете, на который необходимо сослаться, а Текст ссылки — текст гипертекстовой ссылки, который будет непосредственно показан в HTML-документе. Так же можно использовать аргумент TARGET, который показывает в каком окне будет открыта ссылка (значения - _blank (новом), _self (текущем)). target="имя окна">.
Например, гипертекстовая ссылка:
<a href="my_work.html">Мои работы</a> — ссылается на документ my_work.html, образуя гипертекстовую ссылку в виде слова «Мои работы»;
<a href="/photo/my_photo.html">
<a href="http://www.site.com"> — ссылается на ресурс, расположенный на удаленном сервере.
<a href="new.html" target="_blank">Открыть в новом окне</a>
1.3 Интерактивность ЭУИ
Интерактивность (от англ. interaction — «взаимодействие») — понятие, которое раскрывает характер и степень взаимодействия между объектами. Используется в областях: теория информации, информатика и программирование, системы телекоммуникаций, социология,
промышленный дизайн и других. Для самостоятельной работы учащихся.
облегчает понимание изучаемого материала за счет иных, нежели в печатной учебной литературе, способов подачи материала: индуктивный подход, воздействие на слуховую и эмоциональную память и т.п.;
Информация о работе Электронный учебник по языкам программирования С++