Автор работы: Пользователь скрыл имя, 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
Продолжение таблицы 1
<hr size="?"> |
Устанавливает высоту (толщину) линии |
<hr width="?"> |
Устанавливает ширину линии, можно указать ширину в пикселах или процентах. |
<hr noshade> |
Создает линию без тени. |
<hr color="?"> |
Задает линии определенный цвет. Значение RRGGBB. |
Таблицы | |
<table></table> |
Создает таблицу. |
<tr></tr> |
Определяет строку в таблице. |
<td></td> |
Определяет отдельную ячейку в таблице. |
<th></th> |
Определяет заголовок таблицы (нормальная ячейка с от центрованным жирным текстом) |
<caption></caption> |
Определяет подпись таблицы |
Атрибуты таблицы | |
<table border="#"> |
Задает толщину рамки таблицы. |
<table cellspacing="#"> |
Задает расстояние между ячейками таблицы. |
<table cellpadding="#"> |
Задает расстояние между содержимым ячейки и ее рамкой. |
<table width="#"> |
Устанавливает ширину таблицы в пикселах или процентах от ширины документа. |
<table height="#"> |
Устанавливает высоту таблицы в пикселах или процентах от высоты документа. |
<tr align="?"> или <td align="?"> |
Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right. |
<tr valign="?"> или <td valign="?"> |
Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom. |
<td colspan="#"> |
Указывает кол-во столбцов, которое объединено в одной ячейке. (по умолчанию=1) |
<td rowspan="#"> |
Указывает кол-во строк, которое объединено в одной ячейке. (по умолчанию=1) |
<td nowrap> |
Не позволяет программе просмотра делать перевод строки в ячейке таблицы. |
<td width="#"> |
Устанавливает ширину ячейки в пикселах или процентах от ширины таблицы (ячейки одного столбца не могут иметь разную ширину). |
<td height="#"> |
Устанавливает высоту ячейки в пикселах или процентах от высоты таблици (ячейки одной строки не могут иметь разную высоту). |
Продолжение таблицы 1
Фреймы | |
<frameset></frameset> |
тег <body> в документе, содержащем фреймы; |
<frameset rows="value,value"> |
Определяет строки в таблице фреймов, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы фреймов. |
<frameset cols="value,value"> |
Определяет столбцы в таблице фреймов, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы фреймов. |
<frame> |
Определяет единичный фрейм или область в таблице фреймов. |
<noframes></noframes> |
Определяет, что будет показано в окне браузера, если он не поддерживает фреймы. |
Атрибуты фреймов | |
<frame src="URL"> |
Определяет какой из HTML документов будет показан во фрейме. |
<frame name="name"> |
Указывает Имя фрейма или области, что позволяет перенаправлять информацию в этот фрейм или область из других фреймов. |
<frame marginwidth="#"> |
Определяет величину отступов по левому и правому краям внутрь фрейма; должно быть равно или больше 1. |
<frame marginheight="#"> |
Определяет величину отступов по верхнему и нижнему краям внутрь фрейма; должно быть равно или больше 1. |
<frame scrolling=VALUE> |
Указывает будет ли выводится линейка прокрутки во фрейме; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto. |
<frame noresize> |
Препятствует изменению размеров фрейма пользователем. |
фрейм и его атрибуты | |
<iframe></iframe> |
Создает контейнер, который
может содержать любые |
<iframe src="URL"> |
Определяет какой из HTML документов будет показан в фрейме. |
<iframe name="name"> |
Указывает имя фрейма, что позволяет перенаправлять информацию в этот фрейм . |
Продолжение таблицы 1
<iframe vspase="?"> |
Устанавливает поля сверху и снизу с наружи от фрейма |
<iframe hspase="?"> |
Устанавливает поля с боков с наружи от фрейма |
<iframe marginwidth="#"> |
Определяет величину отступов по левому и правому краям внутри фрейма; должно быть равно или больше 1. |
<iframe marginheight="#"> |
Определяет величину отступов по верхнему и нижнему краям внутри фрейма; должно быть равно или больше 1. |
<iframe scrolling=VALUE> |
Указывает будет ли выводится линейка прокрутки в ифрейме; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto. |
<iframe width="#"> |
Определяет ширину фрейма |
<iframe height="#"> |
Определяет высоту фрейма; |
<iframe title="?"> |
Текст всплывающей подсказки |
Формы | |
<form></form> |
Создает формы |
<select multiple name="NAME" size="?"></select> |
Создает меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки. |
<option> |
Указывает каждый отдельный элемент меню |
<select name="NAME"></select> |
Создает ниспадающее меню |
<option> |
Указывает каждый отдельный элемент меню |
<textarea name="NAME" cols=40 rows=8></textarea> |
Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту. |
<input type="checkbox" name="NAME"> |
Создает checkbox. |
<input type="radio" name="NAME" value="x"> |
Создает radio кнопку. |
<input type=text name="foo" size=20> |
Создает строку для ввода текста. Параметром Size указывается длина в символах. |
Создавать HTML-документы, являющиеся основой ваших страниц можно в любом текстовом процессоре (даже в Notepad ), но использование специальных редакторов существенно облегчает и убыстряет процесс. HTML-редакторы делятся на две группы: WYSIWYG (What You See Is What You Get - что видишь, то и получаешь) и специализированные текстовые редакторы, работающие напрямую с HTML-кодом. WYSIWYG-редакторы позволяют редактировать страничку, не вдаваясь в детали HTML-кода. При использовании такого редактора вы видите и изменяете страничку, не зная, что при этом вставляется в ее - HTML-код. К этому типу редакторов можно отнести известный вам Word (если сохранять файлы в формате HTML), Netscape Composer и FrontPage. Такой подход, кажется проще - в принципе можно делать странички вообще не зная язык, однако он таит в себе много опасностей.Многие редакторы, например, MS FrontPage, генерируют страницы, которые правильно выглядят только в одном из браузеров.
Самое главное - как бы хорош не был такой редактор, он не позволит вам сделать некоторые вещи, которые можно сделать, работая напрямую с HTML-кодом. Специальные текстовые редакторы требуют знания HTML, но существенно облегчают написание кода, при этом вы получаете полный контроль над процессом создания страницы. Чаще всего используют оба типа редакторов, начиная разработку в WYSIWYG, а потом завершают "отделку" в текстовом. Создание файлов ваших страниц.
Воспользуемся знаниями, полученными в предыдущих семестрах, для создания двух или более страниц, дополняющих ваш собственный WEB-узел, строительство которого начато на первом шаге.
Документы создаются в текстовом редакторе WORD. Две страницы содержат информацию о ваших отчетах по выполненным первой и второй лабораторным работам. Они должны быть преобразованы из формата документа Word в формат HTML-документа путем выполнения команды Файл/Сохранить в формате HTML.. Если у вас сохранились ранее созданные файлы HTML-страниц, то можно воспользоваться ими.
При преобразовании документов WORD в формат HTML все ваши файлы должны сохраняться в одной общей папке. При этом там же будет сохранена и вся графика вашей страницы. Все страницы должны иметь единое стилевое оформление (тип и цвет шрифта, единый фон и т.д.).
Для визуального структурирования документов (взаимного расположения текста и рисунков, текста в колонках) рекомендуется использовать таблицы с видимыми и невидимыми границами, линии.
Ваши страницы для облегчения навигации должны содержать взаимные гиперссылки одна на другую и на созданные на первом шаге страницы (например, возврат). На странице подготовьте место для гиперссылок на имеющиеся и будущие страницы в сети Internet ваших коллег и друзей. В момент создания страницы это могут быть просто ссылки на произвольный объект, даже на любой файл вашего компьютера. В процессе размещения страниц в сети (по мере готовности реальных документов) эти ссылки заменяются на реальные. Можете организовать ссылки на имеющиеся у вас файлы любимых музыкальных произведений, которые, естественно, должны быть размещены на сервере, или просто ссылки на любимые музыкальные произведения, найденные в процессе выполнения второй работы.
Для регистрации в поисковых машинах надо знать, что два слова, встречающиеся в разных местах страницы, имеют разный вес - он максимален для названия страницы (TITLE) и тегов заголовков H1-H3. Следовательно необходимо давать страницам осмысленные названия и выделять заголовки соответствующими тэгами.
Для просмотра документов в процессе их создания и редактирования необходимо их открыть в окне браузера, так как в окне WORD они могут выглядеть иначе. В редакторе вносятся изменения в документ, далее, производится его сохранение, а в окне браузера информация обновляется, после нажатия соответствующей кнопки или выполнения аналогичной команды.
Требования к именам файлов:
- Первый файл в вашей папке должен называться либо index.html либо index.htm (или соответственно default.html либо default.htm - в зависимости от выбора сервера, на котором будут расположены страницы). Если вы выполнили задания первого шага, то файл с таким именем у вас уже есть. На сервере Народ.Ру файл главной страницы имеет такое имя. При обращении к вашей страничке, именно этот файл первым видит посетитель, т.е. в URL-адресе можно не указывать имя этого файла.
Везде используйте только маленькие буквы, как в названиях файлов, так и в ссылках. Это же относится и к названиям папок, которые вы создадите. И последнее, никогда не используйте русские буквы (кириллицу) в названиях файлов. Только латинские буквы.
- Графика должна быть
в формате либо GIF (*.gif) либо JPEG (*.jpg).
И, пожалуйста, следите за тем,
соответствуют ли названия
Создайте список ключевых слов, характеризующих вашу страницу и описание сайта на русском и, желательно, английском языках. Именно на ключевые слова ориентируются поисковые машины при обработке запросов. Ваши ключевые слова должны быть уникальными, т.е. не общеупотребительными. Например, не следует писать слова "сайт", "интернет", "Россия" и тому подобное. И наоборот, например, слово "экскаватор" будет очень полезно. Для улучшения обработки ваших страниц поисковыми системами, следует воспользоваться тэгом <META>.
Составлять мета описания - это большое искусство. Они должны соответствовать содержанию сайта и, при этом, состоять из слов и групп слов, которые чаще всего используют посетители поисковых машин (желательно, в том же числе, падеже и времени). Ниже приводится наименее трудоемкий из грамотных алгоритм составления подготовки этой информации.
Проанализируйте рейтинги Чаще Всего Используемых Слов. (Rambler, Aport). Там вы найдете 100 самых популярных слов в поисковых запросах Рамблера и Апорта.
Информация о работе Электронный учебник по языкам программирования С++