Автор работы: Пользователь скрыл имя, 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
Откройте ваш первый HTML-файл в редакторе Блокнот.
В самом начале странички, после <HEAD> пишем:
<HEAD>
......
<TITLE>придуманный вами заголовок</TITLE>
< META NAME="KEYWORDS"
CONTENT="Сюда (вместо этих слов) через запятую пишем ключевые слова (не более 20-30 слов). Лучше на русском и английском" >
< META NAME="DESCRIPTION"
CONTENT="Сюда (вместо этих
слов) пишем описание своей
.......
</HEAD>
При использовании для создания документов в редакторе MS Word первые два пункта могут быть созданы автоматически, если при открытом HTML-документе выполнить команду Файл/Свойства/Дополнительно... и заполнить поля Название и Ключевые слова.
Скопируйте введенную информацию в буфер обмена. Сохраните изменения в файле. Проведите аналогичные вставки, используя буфер обмена, в другие HTML-документы и сохраните их изменения.
Введенные вами слова не будут видны в окне браузера, их будут видеть только поисковые машины. Для примера можете просмотреть эту страничку в виде HTML.
Тестирование страниц сайта. Взаимные ссылки на другие файлы ваших страниц должны быть независимы от местоположения их в файловой структуре компьютера. Поэтому для их проверке перед загрузкой на сервер нужно скопировать вашу папку с документами на другой диск, открыть в окне браузера (в Internet Explorer и Nescape Navigator) первый документ и убедиться в возможности навигации и целостности других файлов, содержащихся на странице. В противном случае необходимо найти недостающие файлы и скорректировать на них ссылки. Если все работает правильно, то перейдем к следующему шагу - размещению созданных документов в сети Internet.
Порядок выполнения. Создайте две или более HTML-страницы путем преобразования документов Word в формат HTML, или воспользуйтесь созданными ранее, или сделайте новые. Придерживайтесь рекомендациям к содержанию страниц и требованиям к именам файлов.
Страницы должны содержать:
Гиперссылки на страницы ваших коллег, гиперссылки на интересные с вашей точки зрения страницы и ресурсы в Internet.
В случае необходимости отредактируйте страницы. При этом используйте Word в режиме редактирования HTML-документов.
Вставьте дополнительные тэги. Для этого выполните команду Вид/Источник HTML и приведите в соответствие теги в заголовке вашей страницы изложенному выше. Сохраните документ в исходном формате.
PHP – это язык программирования, который был создан для того, чтобы автоматизировать задачи веб-мастера, тем самым облегчить его работу и увеличить производительность. Хостинг с поддержкой php позволяет генерировать динамические HTML-страницы, автоматически запрашивать базу данных и многое другое. Хорошая связь PHP-скриптов с кроссплатформенным HTML дает возможность создания страниц для сайтов, которые поддерживаются подавляющим большинством существующих браузеров. Вот поэтому-то хостинг с PHP является одним из самых популярных видов хостинг услуг.
Огромные функциональные
возможности скриптового PHP-языка, удобство
и простота его синтаксиса, довольно
быстро выполнение необходимых процедур
и свободное распространение
данного интерпретатора – обеспечили
PHP такой успех в мире хостинга.
Кстати, с помощью языка
PHP-интерпретатор состоит
из ядра, внутри которого и
реализованы все основные
1.2.3 Форматирование текста
Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В таблице 2 перечислены основные теги, которые применяются для изменения оформления текста.
Таблица 2. Теги для форматирования текста
Теги для форматирования текста | ||
Код HTML |
Описание |
Пример |
<b>Текст</b> |
Жирное начертание текста |
Текст |
<i>Текст</i> |
Курсивное начертание текста |
Текст |
<sup>Текст</sup> |
Верхний индекс |
e=mc2 |
|
<sub>Текст</sub> |
Нижний индекс |
H2O |
<pre>Текст</pre> |
Текст пишется как есть, включая все пробелы |
Текст |
<em>Текст</em> |
Курсивный текст |
Текст |
<strong>Текст</strong> |
Жирное начертание текста |
Текст |
Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов <b> и <i> (пример 1). Их порядок в данном случае не важен.
Пример 1. Жирный курсивный текст
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Текст</title>
</head>
<body>
<p>Он словно вырезан из <b>камня</b>, стоек и неподвижен в отличие от его противников.
<i>Дух и жизненная сила</i> в нём достигла <b><i>совершенства</i></b>.
Но вот беда — никто не смеет принять его вызов.</p>
</body>
</html>
Результат данного примера показан на рисунке 1.
Рисунок 3 - Вид курсивного жирного начертания текста
Использование тегов <sup> и <sub> сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).
Пример 2. Создание нижнего индекса
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Текст</title>
</head>
<body>
<p><b>Формула изумруда:</b>
<i>Be<sub>3</sub>Al<sub>2</
</body>
</html>
Результат данного примера показан на рис. 2.
Рисунок 4 - Нижний индекс в тексте
Теги <strong> и <em> выполняют те же функции, что теги <b> и <i>, но написание последних короче, привычней и удобней.
Следует отметить, что теги <b> и <strong>, также как <i> и <em> являются не совсем эквивалентными и заменяемыми. Первый тег <b> — является тегом физической разметки и устанавливает жирный текст, а тег <strong> — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <b> и <strong>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
1.2.4 Работа со стилями
Существует еще один прием позиционирования элементов и достижения внешних эффектов, которые могут украсить страницу и привлечь к ней внимание читателей. Этот прием основан на определении пользовательских стилей и задании таблицы стилей. Таблица стилей — это просто некоторая структура описания свойств элемента. Не ищите здесь какой-нибудь прямоугольной сетки. Если таблица стилей задана, то различные документы могут просто ссылаться на эту таблицу и не содержать большое количество атрибутов в тегах форматирования типа <Н1>, <FACE> и т. п. Каскадные таблицы стилей (CSS, Cascading Style Sheets) содержат описание формата части или всего текста, координаты расположения элементов и другие параметры. Задание стиля обеспечивается с помощью как тега <STYLE>, так и атрибута STYLE. Используя стили, можно позиционировать элементы страницы (например, тексты и графику), указав координаты их положения. И это, пожалуй, самое важное, что дают стили. Кроме того, таблицы стилей часто применяются при создании динамических страниц. Далее способ изложения несколько изменится по сравнению с тем, который мы применяли ранее. Теперь мы будем больше рассказывать об идеях, иллюстрируя их примерами, и меньше уделять внимание строгости и полноте определений. При этом все примеры программ будут, как и прежде, работоспособными. Даже если вы не в полной мере разберетесь в теории вопроса, то все равно сможете использовать приведенные примеры в своих разработках. Для этого следует просто скопировать тексты или отдельные их фрагменты в ваш собственный HTML-документ и адаптировать к своей конкретной задаче путем коррекции отдельных параметров.
Теги <STYLE> и </STYLE> используются внутри тегов заголовка файла <HEAD> и </HEAD>, а атрибут STYLE — в теге заголовка раздела (<Н1>, <Н2>,..., <H6>), а также в теге <BODY>, в теге выделения фрагмента <DIV> и многих других.
Применение тега <STYLE>:
<HEAD>
<STYLE>
тег {свойство 1:значение 1; свойство2: значение;
...;
свойство N: зачение N}
</STYLE>
</HEAD>
Здесь в фигурных скобках
через точку с запятой
В следующем примере определяются стили
заголовков первого и второго уровней
путем использования тега <STYLE>.
<HTML>
<HEAD>
<STYLE>
HI {Font-size:48pt;Color:RED}
Н2 {Font-size:20pt;Color:BLUE}
</STYLE>
</HEAD>
<BODY>
<Н1>Это стиль H1. Цвет - красный</Н1>
<Н2>Это стиль Н2. Цвет - синий</Н2>
Это - обычный стиль по умолчанию
</BODY>
</HTML>
Мы изменили стили Н1 и Н2, принятые по умолчанию: назначили размеры (48 и 30 пунктов) и цвета (красный и синий) для всех текстов, которые окажутся внутри этих тегов. Существуют и другие свойства. Например, свойство FONT-FAMILY: HELVETICA задает гарнитуру шрифта HELVETICA.
Обратите внимание на то, что внутри тега <STYLE> указываются определения стилей тегов, которые записываются без угловых скобок.
Рисунок 5 - Стили заголовков первого и второго уровней заданы атрибутами тега <STYLE>
Можно определить стиль для
тега BODY. Тогда весь текст, находящийся
между тегами <BODY> и </BODY>, будет автоматически
отформатирован в соответствии с перечисленными
свойствами.
Если мы хотим задать один и тот же стиль
сразу для нескольких тегов, то перед определением
стиля (всего того, что заключено в фигурные
скобки) можно указать перечень тегов
(без угловых скобок), разделенных запятыми.
В следующем примере задается одинаковый
стиль для заголовков первого и второго
уровней.
<HTML>
<HEAD>
<STYLE>
HI, H2 (Font-size:48pt;Color:RED}
</STYLE>
</HEAD>
<BODY>
<Н1>Это стиль HI. Цвет - красный</Н1>
<Н2>Это стиль Н2, такой же, как и HI. Цвет
- красный</Н2>
Это - обычный стиль по умолчанию
</BODY>
</HTML>
Мы можем создать таблицу
стилей, закрепив за ней имя. Это
имя задается как обычное имя,
но с точкой в качестве первого
символа. Тогда в тегах мы можем
обращаться к этой таблице по ее
имени, используя атрибут СLASS=имя стиля,
где имя стиля употребляется уже без точки.
Например, можно задать стиль так:
<STYLE>
mystyle (color:black;font-family:
</STYLE>
А стиль заголовка второго уровня можно задать где-нибудь в тексте программы так:
<Н2 CLASS=mystyle>
Рассмотрим пример, создающий эффект, который без задания стиля был бы достижим только с помощью графики. Мы накладываем тексты друг на друга. Эта возможность далее будет использована для создания эффекта объемного текста (так называемого ЗD-эффекта). Кроме того, возможность наложения (частичного перекрытия) фрагментов страницы часто используется в дизайне реальных страниц. Вданном примере применяется тег <DIV> для выделения фрагмента HTML-документа. Обратите внимание, как внутри определения стиля тега BODY определяются другие стили с именами тень, основа, слой 1 и слой 2. Это и есть то, что понимается под каскадной таблицей стилей.
<HTML>
<HEAD>
<TITLE>Пример CSS</TITLE>
<STILE> BODY {color: black; font-size:16px; font-family: Arial}
.тень {color: #DBDBDB; text-align:right; weight: medium; margin-top:
ЗОрх;
font-size:27Opx;1ine-height: 270px;
font-family: Times)
.основа (color: red; weight: 900; margin-top: —230px; font-size:220px;
line-height: 250px; font-family: Times)
. слой1(color: black; margin-top: ~130px; weight: medium; ont-size:65px;
line-height: 65px; font-family: Arial}
.слой2 {color: green; margin-top: ЗОрх; weight: medium; font-size:
35px;
line-height: 45px; font-family: Arial}
</STYLE>
</HEAD>
<BODY>
Пример каскадного стиля <CENTER>
<TABLE WIDTH=500 CELLPADING=0 CELLSPACING=0 BORDER=0> <TR>
<TD ALIGN=CENTER VALIGN=TOP>
<DIV CLASS=Tень>Мы/DIV>
<DIV CLASS=ocHOBa>Мы/DIV>
<DIV CLASS=слой1>сделали это без всякой
графики</DIV>
<DIV CLASS=слой2>используя только стили
текста</DIV>
</TD> </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Информация о работе Электронный учебник по языкам программирования С++