Содержание отчета по курсовому проекту

Курсовой проект по Информатике
Содержание
Основные положения ....................................................................................................................2
Структура HTML-документа ....................................................................................................3
Раздел заголовка ....................................................................................................................4
Тело документа ......................................................................................................................4
Теги форматирования текста ....................................................................................................4
Заголовки ................................................................................................................................5
Абзацы ....................................................................................................................................5
Списки ....................................................................................................................................5
Выделение фрагментов текста................................................................................................5
Таблицы ......................................................................................................................................6
Гиперссылки...............................................................................................................................7
Абсолютные и относительные ссылки ................................................................................7
Ссылки внутри одного документа .......................................................................................8
Тез базового пути ...................................................................................................................8
Web-графика ............................................................................................................................8
Форматы изображений и графические редакторы ................................................................8
Тег <IMG> ...............................................................................................................................9
Активные изображения или карты навигации ..................................................................10
Фреймы .....................................................................................................................................11
Интерактивные Web-страницы. Формы ................................................................................13
Поля ввода ............................................................................................................................14
Флажки..................................................................................................................................14
Переключатели .....................................................................................................................14
Кнопки ..................................................................................................................................15
Списки выбора ......................................................................................................................15
Многострочный текстовый блок ........................................................................................15
Каскадные таблицы стилей.....................................................................................................16
Синтаксис таблиц стилей ....................................................................................................16
Включение стилевых таблиц в HTML-документ .............................................................17
Порядок и этапы выполнения курсового проекта ....................................................................18
Порядок проектирования и реализации сайта ......................................................................18
Критерии оценки сайта. ..........................................................................................................18
Логическая структура сайта ...................................................................................................20
Динамическая и статическая компоновка сайта ...................................................................22
Системы навигации сайта .......................................................................................................23
Организация документа. .....................................................................................................23
Требования и критерии оценки курсового проекта .................................................................27
Содержание отчета по курсовому проекту ...............................................................................27
Рекомендуемая литература .........................................................................................................28
Курсовой проект по Информатике для АСУ
1
Цель курсового проекта: Получение навыков создания HTML-документа с
использованием специальных редакторов. ИЛИ получение навыков самостоятельного
проектирования и реализации Web-сайта (HTML-документа).
Основные положения
В настоящее время наиболее развитой частью Inernet является WWW (World Wide Web) –
система публикации ресурсов, представленных в виде гипертекстовых документов. Для
просмотра гипертекстовых документов (которые часто называются web-страницами)
используются специальные программы, называемые браузерами. Программа-браузер
выполняет интерпретацию команд языка разметки гипертекста (HTML) и отображает
содержимое Html–документа.
По структуре и организации web-страницы можно подразделить на статические и
динамические:
- статические страницы содержат некоторую жестко заданную информацию, для
изменения которой необходимо вносить изменения в гипертекстовый документ;
- динамические
страницы позволяют отображать данные, которые могут
изменяться без изменения самого Html-документа (например, информацию,
извлекаемую из базы данных). Для создания динамических Html-страниц
используют специальные серверные расширения, называемые сценариями1.
Web-страницы используют язык HTML (HyperText Markup Language – язык разметки
гипертекста.) Гипертекст (расширенный текст) включает дополнительные элементы:
иллюстрации, ссылки, вставные объекты. Под разметкой понимается использование
специальных кодов, легко отделимых от смыслового содержания документа и используемых
для реализации гипертекста. Применение кодов подчиняется правилам, определяемым
спецификацией языка HTML.
HTML-документ представляет собой обычный текстовый файл, содержащий текст
документа и специальные языковые конструкции — теги, используемые для разметки
документа и управления его отображением. Все теги заключаются в угловые скобки <...>. Теги
HTML бывают парными и непарными. Непарные теги оказывают воздействие на весь документ
или определяют разовый эффект в месте своего появления. При использовании парных тегов в
документ добавляются открывающий и закрывающий теги, которые воздействуют на часть
документа, заключенную между ними. Открывающий тег имеет следующий формат:
<имя тега [атрибуты]>
Закрывающий тег имеет следующий вид:
</имя тега>
Закрытие парных тегов выполняется так чтобы соблюдались правила вложения.
<BXI>Ha этот текст воздействуют два тега</IХ/В>
Эффект применения тега может видоизменяться путем добавления атрибутов В парных
тегах атрибуты добавляются только к открывающему тегу. Атрибуты представляют собой
дополнительные ключевые слова, отделяемые от имени тега, и от других атрибутов пробелами
и размещаемые до завершающего тег символа «>». Способ применения некоторых атрибутов
требует указания значения атрибута. Значение атрибута отделяется от ключевого слова
атрибута символом «=» (знак равенства) и заключается в кавычки.
<H1 ALIGN="LEFT">
Регистр букв в именах тегов и их атрибутов не различается, так что <H1 ALIGN="LEFT">
и <h1 align=left> равнозначны.
Определение HTML как языка разметки основывается на том, что при удалении из
документа всех тегов получается текстовый документ, совершенно эквивалентный по
содержанию исходному гипертекстовому документу. Таким образом, при отображении
документа HTML сами теги не отображаются, но влияют на способ отображения остальной
части документа.
1
Создание динамических страниц за рамками данного курсового проекта
Курсовой проект по Информатике для АСУ
2
Существует два основных способа создания документов HTML. Первый состоит в
разметке существующего или создаваемого документа вручную. При этом автор или редактор
добавляет в документ теги разметки. Эту работу можно выполнять в текстовом редакторе
(например, Блокнот) или редакторе НТМL, имеющем специальные элементы управления для
упрощения ввода тегов. В обоих этих случаях работа ведется средствами языка HTML, и
человек, выполняющий эту работу, должен знать и уметь применять этот язык.
Второй подход заключается в использовании визуальных редакторов (FrontPage Express,
Dreamweaver и др.), работающих в режиме WYSIWYG (What You See Is What You Get — Что
видишь то и получишь) и позволяющих создавать и редактировать web-страницы, не прибегая к
знаниям Html. К недостаткам визуальных редакторов можно причислить весьма «грязный»
Html-код генерируемых Web-страниц. Для выполнения той или иной операции он нередко
создает килобайты лишнего кода, когда достаточно всего несколько строк. Другой
«качественный» недостаток – большой «талант» некоторых редакторов изменять Html-код
открываемых исключительно для просмотра Web-страниц, например, добавлять в него
собственные теги или удалять «непонятные» элементы. К тому же WYSIWIYG-редакторы не
всегда успевают догонять стандарты Html.
Всех этих проблем, конечно, лишены редакторы на уровне тегов, но чтобы работать в них,
нужно совершенное знание Html.
Однако, WYSIWIYG-программы крайне полезны для начинающих. С их помощью можно
размечать страницы как угодно, а затем уже изучать получающийся Html-код. Кроме того, они
полезны для быстрого макетирования страниц. Программы эти поддерживают широкий набор
функций для конструирования и создания сложных элементов вроде вложенных таблиц с
множеством ячеек или больших синтаксических циклов – их вполне могут применять и
профессиональные Web-дизайнеры, если не для оформления всей страницы целиком, то хотя
бы для верстки отдельных ее компонентов.
Что касается редакторов Html-тегов, то их могут использовать уже очень хорошо
знакомые с гипертекстом пользователи. Современный сайт – это намного больше, чем абзацы и
заголовки. Это динамические меню, создаваемые не без помощи DHTML и JavaScript,
вложенные друг в друга таблицы, разнообразные эффекты на основе HTML и JavaScript, слои и
многое другое. Думается, что не всегда простые Html-редакторы способны реально заменить
WYSIWYG –средства. Иногда они замедляют процесс создания сайта даже опытным Webмастером.
В рамках одного раздела невозможно дать полное описание всех возможностей и
особенностей языка HTML (хотя он и не относится к числу очень сложных). Поэтому здесь
приводятся лишь основные сведения, достаточные для создания простых HTML-документов.
Структура HTML-документа
Любой документ в формате HTML начинается с открывающего тега <HTML> и заканчивается тегом </HTML>. Он состоит из двух частей:
- раздела заголовка (определяемого тегом HEAD);
- тела, которое включает собственно содержимое документа и определяется тегом
BODY.
В общем виде документ HTML имеет следующую структуру:
<HTML>
<HEAD>Раздел заголовка</НЕАD>
<BODY>Тело документа</BODY>
</HTML>
Курсовой проект по Информатике для АСУ
3
Раздел заголовка
Раздел заголовка содержит различного рода служебную информацию (например,
ключевые слова, используемые поисковыми машинами), не считающуюся содержимым
документа. Наиболее часто в заголовке применяются следующие теги:
<TITLE> – заголовок HTML-документа, который отображается в строке заголовка окна
браузера;
<BASE> – базовый адрес, используемый при обработке относительных URL-адресов (это
понятие будет рассмотрено ниже);
<LINK> – тег, используемый для связи с другими HTML-документами (в частности с
таблицами стилей);
<МЕТА> – дополнительная информация об HTML-документе (автор, HTML-редактор,
используемый для создания данного документа, ключевые слова, тип содержания документа и
кодировка, в которой он сделан, и т.п.).
Из всех приведенных выше тегов только TITLE используется в паре с закрывающим тегом
и является обязательным.
Тело документа
Тело документа содержится между тегами <BODY> и </BODY> и включает всю информацию, которая отображается в окне браузера. Атрибуты этого тега приведены в таблице 1.
Этот компонент схож по функциональности с компонентом UpDown, ассоциированным с
полем ввода.
Таблица 1. Атрибуты тега BODY
Атрибут
Назначение
Bgcolor
Устанавливает цвет фона документа.
Text
Устанавливает цвет отображаемых символов.
link, vlink,
Устанавливает цвет ссылок на другие документы, цвет уже посещенных и
alink
активных ссылок.
background
Задает фоновое изображение.
Цвет в этих параметрах может задаваться текстовым значением (green) или шестнадцатеричным
кодом, в котором последовательные байты задают значения красной, зеленой и синей составляющей
цвета (bgcolor=green дает тот же результат, что и bgcolor=#00FF00).
В некоторых случаях вместо тега BODY используется тег FRAMESET, который определяет
специальный тип документа – HTML-документ с фреймами (или кадрами), который будет описан
далее.
В теле документа используются специальные теги, обеспечивающие форматирование
текста документа и включающие в него изображения, таблицы и формы.
Теги форматирования текста
Приведем описание основных тегов, используемых для задания формата отображения
текста в окне браузера.
Курсовой проект по Информатике для АСУ
4
Заголовки
HTML-документ может содержать шесть уровней заголовков. Для задания заголовка
используются парные теги от <H1> до <H6>, указывающие отображать текст шрифтами
разного размера.
В открывающем теге можно указать дополнительный атрибут ALIGN, определяющий
способ выравнивания текста заголовка. Данному атрибуту можно задавать одно из трех
значений:
Left – выравнивание по левому краю; Right – выравнивание по правому краю; Center –
выравнивание по центру.
Абзацы
Текст, относящийся к одному абзацу, заключается между тегами <Р> и </Р>2. Каждый
абзац отделяется от предыдущего увеличенным межстрочным интервалом. Так же как и для
заголовков, для абзаца можно задавать способ выравнивания текста с помощью атрибута ALIGN.
Если требуется начать текст с новой строки в пределах одного абзаца, то используется
непарный тег <BR>. При использовании этого тега тип выравнивания не изменяется.
В качестве ограничителя для абзацев может также использоваться горизонтальная
линейка, задаваемая непарным тегом <HR>. Ее длина и ширина задаются атрибутами этого тега.
Списки
HTML-документ может содержать как маркированные, так и нумерованные списки, а
также списки определений.
Для создания маркированных списков используется парный тег <UL>, нумерованных - <OL>.
В обоих случаях каждый элемент списка помещается между тегами <LI> и </LI>3. Допускается
создание вложенных списков. С помощью атрибута Type можно задать тип маркера (disc, square,
circle) или тип нумерации (арабские либо римские цифры, латинские буквы) списков
соответствующего типа.
Список определений задается парным тегом <DL>. Он содержит элементы двух типов:
определяемые термины (парный тег <DT>) и определения (парный тег <DD>) Закрывающие тега
</DT> и </DD> можно опускать. Обычно определяемые термины и определения чередуют, хотя это
нигде не оговорено. Определения отображаются экране с отступом от левого края. Такой список
может быть сформирован следующим образом:
<DL>
<DТ>Термин 1
<DD>Определение первого термина
</DL>
Для более компактного расположения элементов списков любого типа существует атрибут
Compact.
Выделение фрагментов текста
Язык HTML позволяет выделять отдельные слова и даже символы документа. В
таблице 2 приведены основные теги, используемые при выделении.
Для управления параметрами шрифта используется тег <FONT>. Он должен обязательно
содержать один из трех атрибутов: COLOR, FACE, SIZE.
Способы задания цвета с помощью атрибута COLOR были описаны выше.
Использование атрибута FACE позволяет задать название шрифта используемого для
отображения текста. Однако следует помнить, что у посетителей вашей страницы может и не
оказаться этого шрифта.
Атрибут SIZE позволяет управлять высотой символов, которая может находиться в
пределах от 1 до 7 (в относительных единицах). Для этого атрибута можно определять
значение со знаком (плюс или минус), которое определяет увеличение или уменьшение
шрифта относительно текущего размера.
2
Закрывающий тег </P> рассматривается как необязательный. Подразумевается, что он стоит перед тегом,
который задает начало очередного абзаца документа.
3
Закрывающий текст </LI> можно опускать, так как его местонахождение легко восстановить.
Курсовой проект по Информатике для АСУ
5
Параметры шрифта, используемые по умолчанию (как базовые) задаются с помощью
непарного тега <BASEFONT>, который лучше располагать в начале документа. Он может
использовать те же атрибуты что и FONT.
Таблица 2. Парные теги выделения текста.
Тег
Назначение
B, STRONG
Полужирный шрифт
I, EM
Курсив
U
Подчеркнутый текст
S, STRIKE
Вычеркнутый текст
CITE
Отображение цитат (выводятся курсивом)
BLOCKQUOTE Отображение цитат (выделяются увеличенным отступом с двух сторон)
SUP и SUB
Верхний и нижний индексы, соответственно.
CODE, VAR,
Исходный текст, описание переменных и результат работы программы,
SAMP
соответственно.
KBD
Текст, вводимый с клавиатуры
TT
Имитация телетайпного текста, т.е. с постоянной шириной символов.
DIV
Создает новый раздел в документе. Чаще всего служит для задания
выравнивания текста из нескольких разделов (атрибут ALIGN).
PRE
Отображает текст с постоянной шириной символов, не пропуская пробелы,
символы табуляции и переносы строк, т.е. отображает предварительно
отформатированный текст.
BIG и SMAL
Увеличивают и уменьшают (соответственно) размер шрифта на единицу
относительно текущего (базового) размера. Аналогично <font size=+1>.
CENTER
Аналогично <div align=center>.
Таблицы
Таблицы удобны для представления больших объемов данных, а многие Web-дизайнеры
используют их также для точного размещения элементов Web-страниц. Таблица в языке HTML
задается при помощи парного тега <TABLE>. Таблица может содержать заголовок таблицы,
определяемый парным тегом <CAPTION>, и строки таблицы, задаваемые при помощи парных
тегов <TR>. Закрывающие теги <TR> можно опускать.
Каждая строка таблицы содержит ячейки таблицы, которые могут относиться к двум
разным типам. Ячейки в заголовках столбцов и строк задают парным тегом <TH>, а обычные
ячейки – парным тегом <TD>. Закрывающие теги <TН> и <TD> можно опускать. Отличие этих
тегов заключается только в том, что <TH> задает ячейку, текст внутри которой отображается
жирным шрифтом (т.е. эквивалентен <td><b>…</b>)
Каждая ячейка может содержать произвольный текст, а также любые теги HTML,
допустимые в «теле» документа. В частности, ячейка таблицы может содержать вложенную
таблицу или изображение.
При отображении таблицы на экране компьютера происходит ее автоматическое
форматирование с подбором размеров ячеек в соответствии с объемом размещаемой
информации и заданными атрибутами. Атрибуты элементов позволяют сколь угодно причудливо
оформить таблицу по своему вкусу. В таблице 3 приведена краткий перечень допустимых
атрибутов.
Таблица 3. Атрибуты элементов, используемых при создании таблицы.
Атрибут
Элемент
Назначение
ALIGN
Таблица,
Выравнивание таблицы по горизонтали (по умолчанию
строка,
выравнивается по левому краю)
ячейка,
Выравнивание данных по горизонтали
заголовок
Размещение заголовка над или под таблицей (top или bottom).
VALIGN
Строка,
Выравнивание по вертикали. Возможные значения: top – по
ячейка
верху, middle – по середине, bottom – по низу, baseline – по
базисной линии (по умолчанию выравнивается по середине)
Курсовой проект по Информатике для АСУ
6
Таблица,
Ширина задается в пикселях или в процентах от ширины
ячейка
документа (для таблицы) или от ширины таблицы (для ячейки)
HEIGHT
Ячейка
Высота
BORDER
Таблица
Ширина границы (рамки) таблицы в пикселях (по умолчанию 0).
CELLSPASING Таблица
Расстояние между ячейками.
CELPADDING Таблица
Расстояние между рамкой ячейки и ее содержимым.
BGCOLOR
Таблица,
Задает цвет фона.
строка,
ячейка
BACKGROUND Таблица,
Задает фоновое изображение для соответствующего элемента.
строка,
ячейка
ROWSPAN
Ячейка
Объединяет указанное количество ячеек в одну по вертикали.
COLSPAN
Ячейка
Объединяет указанное количество ячеек в одну по горизонтали.
Поскольку многие атрибуты могут определяться в различных элементах таблицы, при этом
их действие зависит от тега, в котором они определены. Основное правило: атрибут,
расположенный в элементе более низкого уровня, имеет приоритет над атрибутами,
определенными ранее.
В заключение приведем пример объединения ячеек:
<table border=2>
<Caption align=bottom>Таблица</Caption>
<tr><th colspan=2>1<th colspan=3>2
<tr><td>1<td>2<td>3<td>4<td>5
<tr><td colspan=2 rowspan=2>6<td colspan=2>7<td rowspan=2>8
<tr><td>9<td>10
<tr><td>11<td>12<td>13<td>14<td>15
<table>
Результат будет иметь следующий вид:
WIDTH
Гиперссылки
Абсолютные и относительные ссылки
Гиперссылки обеспечивают связь между различными HTML-документами. Гиперссылка представляет собой фрагмент HTML-документа (текст или изображение), щелчок на
котором приводит к загрузке другого документа.
Для создания гиперссылки используется пара тегов <А> и </А>. Заключенный между
ними фрагмент HTML-документа при просмотре будет отображаться как гиперссылка. Тег
<А> обязательно должен использоваться совместно с атрибутом HREF. С помощью него
задается ссылка на документ, к которому должен быть произведен переход при щелчке на
гиперссылке.
Таким образом, фрагмент HTML-документа, задающий гиперссылку, в общем виде
выглядит так:
<А HREF-URL_pecypca> фрагмент документа </А>
Здесь URL-адрес, задаваемый атрибутом HREF, может быть двух видов: абсолютным и
относительным:
- абсолютный URL-адрес начинается с указания протокола обращения к ресурсу и
адреса Web-узла.
Курсовой проект по Информатике для АСУ
7
- относительный URL-адрес указывает расположение ресурса относительно местоположения текущего HTML-документа. Например, строка
<А HREF=doc1.html>Переход к документу 1</А>
создает гиперссылку, указывающую на гипертекстовый документ, содержащийся в файле
docl.html, который размещен в том же каталоге, что и текущий документ.
Если абсолютный адрес документа, содержащего приведенную гиперссылку, выглядит,
например, как http://www.domen.ru/information/main.html, то абсолютным адресом, на который
эта гиперссылка ссылается, будет http://www.domen.ru/information/ doc1.html.
Относительная ссылка сохраняет свою работоспособность в случае изменения адреса
Web-узла как целого (например, в результате его переноса на другой сервер), поэтому при
потенциальной возможности такого события следует отказываться от полного задания адресов
в гиперссылках. Абсолютная запись адреса обычно используется, когда необходимо направить
посетителя на другой Web-узел, и рассматривается как внешняя ссылка.
Ссылки внутри одного документа
Тег <А> имеет еще одно назначение - кроме создания гиперссылок он позволяет
устанавливать маркеры (якоря, закладки) для организации переходов по гиперссылкам в
пределах одного документа HTML. Для задания якоря тег <А> используется совместно с
атрибутом NAME:
<А NАМЕ="ИмяМаркера"> текст </А>
В этом случае текст, заключенный между тегами <А> и </А>, при отображении никак не
выделяется, но к помеченному таким образом фрагменту HTML-документа можно перейти с
помощью гиперссылки следующего вида:
<А НRЕF="#ИмяМаркера"> текст </А>
Гиперссылки такого вида удобно использовать в документах большого объема. Например,
вы можете создать на каждой странице краткое оглавление. Это облегчает навигацию и
позволяет без прокрутки сразу перейти на нужную строку или заголовок.
Имя якоря может задаваться произвольной последовательностью (без пробелов) латинских
букв и цифр (кроме первого символа).
Тез базового пути
Как правило, указатели в ссылках на локальные документы используют относительную
адресацию. Это удобно, поскольку если перенести документ и связанные с ним файлы в другой
каталог, локальные ссылки не перестанут работать. Однако, существует возможность указать и
полный путь к местоположению файлов, используя непарный тег <BASE> для преобразования
относительного пути, указанного в ссылке в абсолютный. Например, зададим базовый путь:
<BASE HREF=http://www.domen.ru/information>
Если относительный адрес будет выглядеть следующим образом:
<A HREF=doc1.html>Переход к документу 1</А>
тогда сервер будет искать этот файл в текущем каталоге, содержащем документы. Если
doc1.html не будет найден, сервер соединит URL, указанный в этом адресе и базовый путь. В
результате этого полный URL будет выглядеть следующим образом:
http://www.domen.ru/information/doc1.html
В заключение отметим, что тег <BASE> помещается в самом начале HTML-документа.
Web-графика
Форматы изображений и графические редакторы
Графические иллюстрации в большинстве случаев являются неотъемлемой частью Webдокументов. Сегодня графические элементы Web-страниц используют два основных формата GIF и JPEG (новый формат PNG пока еще нельзя считать общепринятым). Все графические
браузеры, предназначенные для отображения Web-страниц на экране компьютера, способны
распознавать и отображать файлы этих форматов.
Файлы формата GIF (Graphic Interchange Format) имеют расширение .GIF. Изображения в
этом формате содержат 256 цветов, заданных индексной палитрой. Файл упакован и может
Курсовой проект по Информатике для АСУ
8
занимать значительно меньше места, чем неупакованный растровый рисунок (например, в формате
.BMP).
Спецификация формата GIF89a позволяет создавать файлы .GIF, обладающие специальными
возможностями.
- Один из цветов изображения может быть объявлен прозрачным. Это означает, что s
соответствующих местах сквозь него будет проглядывать фон Web-страницы, что делает
рисунок более естественным.
- Чересстрочные изображения при их приеме из Интернета прорисовываются
постепенно вначале грубо, а затем все более и более четко. Это скрадывает время,
необходимое на их загрузку из Интернета, особенно при приеме информации по
медленным линиям.
- GIF-анимация превращает обычный рисунок в небольшой видеоролик. В стандартном
файле с расширением .GIF хранится набор кадров, а также сценарий их отображения.
Файлы формата JPEG (Joint Photographic Expert Group – по названию группы исследователей,
предложившей этот формат) могут иметь расширение JPEG или JPG. Формат предназначен для
хранения фотографических изображений, использующих 24-разрядный цвет. При
конвертировании в формат JPEG происходит потеря части информации, приводящая к
некоторому ухудшению качества изображения, обычно незаметному на глаз.
При выборе формата изображения в первую очередь принимают во внимание объем
получающегося файла и во вторую – качество изображения. При загрузке Web-документа
львиную долю времени занимает именно загрузка иллюстраций, так что приветствуется любая
экономия. При выборе формата рекомендуется создать два файла: в формате GIF и в формате
JPEG с минимально приемлемым качеством, после чего выбрать вариант, имеющий меньший
объем.
Для подготовки изображений можно использовать любой графический редактор, например
стандартное приложение Paint (в Windows), которое позволяет сохранять файлы в этих форматах.
Однако Adobe Photoshop – стандарт де-факто среди программ обработки изображений: ее
использует большинство профессиональных дизайнеров, к тому же она существует для всех
распространенных платформ – Windows, Unix, Macintosh. Следует отметить, что Macromedia
Flash практически является стандартом для использования в Web векторных изображений,
обладает собственной средой разработки и позволяет создавать отличную векторную анимацию.
Ulead GIF Animator – программа, которая позволит вам создавать GIF-анимацию, обладает
мощными средствами анимации и в принципе может заменять на начальном этапе всю работу с
анимацией.
В современном Internet существуют большое число сайтов, использующих
Flashтехнологию. Flash-страницы выглядят очень красочно, но прилично «весят», а
следовательно долго загружаются. Использование Flash-анимации целесообразно в
презентационных домашних страницах, а также для создания навигационных панелей.
Тег <IMG>
Рисунки хранятся на Web-узлах в отдельных файлах, но отображаются как элементы Webстраниц. Для вставки рисунка непарный тег <IMG>, который должен содержать обязательный
атрибут SRC=, задающий адрес URL файла с изображением в относительной или абсолютной
форме.
<IMG SRС="picture1 .gif">
В таблице 4 приведены другие атрибуты этого тега.
Таблица 4. Атрибуты тега IMG.
Атрибут
Назначение
ALT
Задает альтернативный текст, отображаемый вместо картинки, если она по какимлибо причинам не может выводиться. Этот же текст выскакивает в всплывающей
подсказке.
LOWSCR Источник изображения низкого качества или размера, для быстрой
предварительной загрузки.
ALIGN
Задает выравнивание относительно текущей строки:
Курсовой проект по Информатике для АСУ
9
WIDTH и
HEIGHT
BORDER
- top выравнивает верхний край изображения по верхнему краю строки;
- middle выравнивает центр изображения по базовой лини строки;
- bottom установка по умолчанию, выравнивает нижний край изображения по
базовой линии строки;
- left выравнивает изображение по левому полю
- right выравнивает изображение по правому полю.
Задают горизонтальный и вертикальный размер картинки, чтобы еще до начала
загрузки изображения браузер выделил ему требуемое место, что ускоряет
отображение загружаемой страницы.
Задает толщину рамки, которой будет обрисовываться изображение. Если
изображение не является ссылкой, то оно по умолчанию не окружается рамкой.
Если же это изображение ссылка, то толщина рамки будет равна 2.
Используется для указания ширины пространства сверху и снизу (справа и слева)
от изображения. По умолчанию равно 0.
Используются для создания карты ссылок, описание которых будет дано ниже.
VSPACE
HSPACE
USEMAP
ISMAP
При отображении рисунка браузер по умолчанию использует его реальные размеры. Если
рисунок необходимо отмасштабировать, применяют атрибуты WIDTH и HEGHT, задающие ширину и
высоту рисунка (в пикселях), либо в процентах от ширины экрана. При указании высоты и
ширины изображения (а также в процентах), не соответствующих его реальным размерам, оно
сжимается (расширяется) до заданных размеров.
<IMG SRC="picture2.jpg" WIDTH="100" HEIGHT="40">
Еще один способ применения изображений на Web-страницах состоит в использовании их
в качестве фонового рисунка. При отображении документа, содержащего фоновый рисунок, на
компьютере рабочая область окна заполняется этим рисунком последовательно (как паркетом),
считая от верхнего левого угла документа или окна. Фоновый рисунок задается с помощью
атрибута BACKGROUND в теге <BODY>. Значением этого атрибута должен быть
абсолютный или относительный адрес URL для файла с изображением.
<BODY BACKGROUND="waves.gif" TEXT="YELLOW">
Активные изображения или карты навигации
С помощью элемента IMG можно создавать «изображения-карты». Изображение-карта
(image map) представляет собой графическое изображение, в котором определены «горячие
точки», используемые в качестве гиперссылок. Изображения-карты позволяют по-новому
компоновать интерактивные web-страницы. Например, можно создать изображение,
представляющее собой блок из кнопок, каждая из которых предназначена для перехода по
ссылке. Еще одним примером использования является их применение для создания карты
сайта4.
Для того чтобы создать карту в языке HTML используется парный тег <MAP>. Он задает
разбиение изображения на “горячие” области, т.е. области при нажатии на которые можно
загрузить другой html-файл.
Атрибут у этого тега один - NAME, который должен быть обязательно. Для задания
“горячих” областей используется непарный тег AREA, атрибуты которого представлены в
таблице 5.
Таблица 5. Атрибуты тега MAP.
Атрибут
Назначение
HREF
Задает адрес страницы, которая будет загружаться этой областью.
SHAPE
Задает форму “горячей” области. Может принимать значения:
- circle окружность;
- rect прямоугольник;
- poly многоугольник произвольной формы.
Карта сайта дает перечень разделов и подразделов сайта без указания связи между ними.
4
Курсовой проект по Информатике для АСУ
10
Задает координаты области. Все координаты отсчитываются от верхнего левого
угла изображения. Они могут задаваться либо в пикселях, либо в процентах от
размеров изображения. Кроме того, способы задания различны для разных форм
области.
NOHREF Позволяет запретить область, т.е. указать область, на которую нельзя нажимать.
ALT
Аналогично одноименному атрибуту у <img>, сообщает браузеру текст, который
будет выводиться при наведении мыши на “горячую” область.
Следование областей может быть произвольным, но если какие-то части областей
пересекаются, то на область пересечения будет реагировать та область, которая идет в списке
первой.
Для того, чтобы назначить изображению карту необходимо использовать атрибут
USEMAP и в нем указать значение NAME тега <MAP>. При указании имени важно учитывать
регистр.
Следует помнить, что активные области обычно привязываются к реальным размерам
изображения, а, следовательно, и использовать его надо в браузере в натуральную величину
(т.е. не изменять его размер в % от экрана или в пикселях)5. Иначе же области сместятся.
Пользоваться же изображением большого размера тоже не всегда удобно. Выход из этого
положения можно предложить следующий: уменьшить размер изображения (с сохранением
пропорций) например в Photoshop так, чтобы оно вписывалось целиком в рабочей области
браузера и использовать его для создания навигационной карты.
Большинство современных Html-редакторов (в частности Dreamweaver) позволяют
создавать карты изображений достаточно просто, без необходимости написания HTML-кода
вручную и вычисления координат областей.
Правда, изложенный способ создания активных изображений имеет существенный
недостаток: при отключенном режиме отображения изображений использование такой карты
лишено смысла (“горячих” областей просто не видно).
Обойти эту проблему можно, используя другой способ, заключающийся в физическом
разделении одного изображения на совокупность изображений меньшего размера,
соответствующих требуемым прямоугольным областям. Полученные изображения вставляются
в таблицу, и альтернативный текст каждого из них будет отображаться в соответствующей
ячейке таблицы, явно указывая на наличие области, в случае отсутствия отображения самого
изображения. В пользу второго способа говорит и то, что разрезанные картинки гораздо
быстрее загружаются. А посетитель, только зайдя на страницу, и не загрузив полное
изображение, сможет по видимым частям определить, надо ли дожидаться загрузки всей
страницы.
COORDS
Фреймы
Язык HTML позволяет в рамках одной Web-страницы отобразить несколько документов.
Для этого страница должна быть разбита на несколько областей - фреймов. Разбиение страницы
описывается документом HTML особого рода, структура которого отличается от обычной. Тело
документа заменяется описанием фреймов, задаваемым парным тегом <FRAMESET>. Элемент
BODY в таком документе должен отсутствовать, а при наличии - игнорируется браузером.
Открывающий тег <FRAMESET> должен содержать обязательный атрибут COLS или
ROWS, определяющий способ разбиения окна. В первом случае окно разбивается
вертикальными линиями, во втором – горизонтальными. Если заданы оба атрибута, создается
сетка фреймов. Значение любого из этих атрибутов – это перечисленные через запятую размеры
отдельных фреймов.
<FRAMESET COLS=100, 20%,*>
Значения могут быть заданы тремя способами: непосредственный размер в пикселях, размер
в процентах от размера окна и произвольный. Именно так и показано в примере выше: окно
По крайней мере, если изображение вставлено в % от ширины экрана, то и координаты «горячих» областей
должны задаваться в %.
5
Курсовой проект по Информатике для АСУ
11
делится на три вертикальные части, первая из которых составляет 100 пикселей в ширину, вторая
20% от размера окна, а последней выделяется все оставшееся пространство.
Между тегами <FRAMESET> и </FRAMESET> должно располагаться ровно столько
элементов, сколько областей создано с помощью атрибутов COLS и ROWS. При этом могут
использоваться дополнительные элементы FRAMESET, описывающие дальнейшее разбиение
на подобласти еще меньшего размера, или непарные теги <FRAME>, определяющие способ
использования области.
Тег <FRAME> должен содержать обязательный атрибут SRC, с помощью которого
указывается, какой документ первоначально загружается в соответствующую область. Значение
этого атрибута – абсолютный или относительный адрес URL нужного документа.
Среди остальных атрибутов выделяется атрибут NAME, позволяющий задать «имя»
созданной области в виде последовательности латинских букв и цифр, использованной как
значение этого атрибута. Это имя должно быть уникальным.
<FRAME SRC="text.htm" NAME="left">
Это имя можно использовать, чтобы загружать новые документы в ранее созданную
область. В документе, содержащем ссылку на файл, который должен изображаться в заданной
области фрейма, используется имя именно этой необходимой области в атрибуте
TARGET=”имя области кадра” тега <A HREF > </A> (для приведенного выше примера: TARGET=left).
Отсутствие имени в теге <A HREF> </A> заставит браузер отобразить документ в
текущей области окна.
Для того чтобы обеспечить большую гибкость при работе с фреймами существует
несколько зарезервированных имен. Так например, при ссылке с документов из кадровой
структуры на новую кадровую структуру необходимо указать TARGET=”_top” (или
TARGET=”_parent”), чтобы браузер открыл новое окно просмотра. Иначе кадровая структура
откроется в текущей области кадра, т.е. там где мы щелкнули мышкой. Этот недостаток
позволит “вписать” друг в друга огромное количество кадровых структур, только кому и зачем
это надо?
Использовать имя TARGET=”_top” можно чтобы изобразить любой простой документ вне
кадровой структуры. Браузер откроет новое (целое) окно просмотра в этом же окне навигации,
сохраняя возможность возвращаться к предыдущей кадровой структуре.
Использование имени TARGET=”_blank” укажет браузеру открыть новое пустое окно для
навигации (т.е. откроет новый браузер для дальней шей работы с документом, вернутся назад,
используя “стрелки” браузера нельзя, т.к. возвращаться некуда).
Следует помнить, что фреймы сильно сокращают и без того ограниченную область окна.
Не стоит их применять только ради собственного интереса и удовольствия.
Однако фреймы очень помогают при создании хорошей навигации, т.к. не приходится
много раз один и тот же код с кнопками и другими элементами. Например, предположим, что
начальная страница Web-узла состоит из двух фреймов: слева располагается навигационная
панель, а справа — текущая страница. Если правой области присвоено имя, используемое во
всех ссылках, имеющихся в левой области, то щелчок на любой ссылке навигационной панели
приведет к обновлению информации в соседней области, оставляя навигационную панель без
изменений.
В таблице 6 представлены некоторые (из необязательных) атрибуты тегов <FRAME>,
<FRAMESET>.
До сих пор существуют браузеры, которые не поддерживают фреймы, но к ним, как правило,
относятся текстовые или совсем старые. Специально для таких существует парный тег
<NOFRAMES>, внутри которого размещается содержимое страницы, не использующей фреймы.
Вложенные кадры не очень способствуют навигации. Но позволяют создать внутри одной
объемлющей кадровой структуры две независимые подструктуры: можно поместить в верхней
части экрана два столбца, а в нижней три. Для каждой структуры необходимо наличие парных
тегов <FRAMESET>< /FRAMESET > (при их численном несоответствии кадры не будут
отображаться вообще, хотя можете поэкспериментировать).
Курсовой проект по Информатике для АСУ
12
Атрибут
FRAMEBORDER
BORDERCOLOR
BORDER
Тег
FRAMESET,
FRAME
FRAMESET,
FRAME
Таблица 6. Атрибуты тегов, используемых при создании фреймов.
Назначение
Устанавливает признак наличия окантовки (границы) фрейма
(значения: Yes, No).
Задает цвет окантовки фрейма.
Задает ширину окантовки фрейма в пикселях
Задают горизонтальный и вертикальный размер границы
фрейма в пикселях.
Значение yes – скроллинг присутствует всегда; auto – появляется
только тогда, когда он нужен; no – всегда отсутствует.
NORESIZE
Запрещает изменение размера фрейма. По умолчанию размер
каждой области можно изменять с помощью мыши.
Нумерация
кадров
идет
слева
направо,
а
не
сверху
вниз.
Создавать вложенные кадры надо также как и вложенные таблицы. Задав кадровую структуру и
описав ее (тег <FRAME>), в необходимом кадре вставляем новую кадровую структуру и
описываем ее, затем закрываем ее. Нельзя задать все кадровые структуры, а потом их все
описывать (даже если в верном порядке). Например, чтобы задать кадровую структуру
подобного типа
MARGINWIDTH,
MARGINHEIGHT
SCROLLING
Необходимо описать ее следующим образом:
<HTML>
<HEAD><TITLE>Кадровые структуры</TITLE></HEAD>
<FRAMESET ROWS="25%,*">
<FRAMESET COLS="25%,*">
<FRAME SRC="1.htm">
<FRAME SRC="2.htm">
</FRAMESET>
<FRAMESET COLS="5%,30%,*">
<FRAME SRC="3.htm">
<FRAME SRC="4.htm">
<FRAME SRC="5.htm">
</FRAMESET>
</FRAMESET>
<NOFRAME> Кадры отображать не могу!!!!!</NOFRAME>
</HTML>
Интерактивные Web-страницы. Формы
Формы предназначены для организации интерактивного режима работы пользователя,
обеспечивая взаимодействие между пользователем, работающим на клиентской машине, и webприложениями, выполняющимися на стороне сервера.
Для создания формы используется пара тегов <FORM> и </FORM>. Между ними располагаются
строки, описывающие различные элементы управления: кнопки, поля ввода, флажки и т. п.
Совместно с тегом <FORM> практически всегда используются атрибуты ACTION и METHOD:
- атрибут ACTION предназначен для указания URL-адреса программы (сценария),
которая будет выполнять обработку данных, введенных пользователем;
- атрибут METHOD определяет метод, с помощью которого данные, введенные
пользователем, будут передаваться на сервер. Данный атрибут может принимать одно
из двух значений: GET или POST.
Основные элементы управления создаются с помощью тега <INPUT>, который используется без закрывающего тега. Тип управляющего элемента задается с помощью атрибута
TYPE данного тега. Кроме атрибута TYPE тег <INPUT> содержит ряд других атрибутов, определяющих
параметры элемента управления.
Курсовой проект по Информатике для АСУ
13
Поля ввода
Для создания полей ввода атрибуту TYPE следует присвоить значение "TEXT" (кавычки
обязательны). Параметры поля ввода задаются следующими атрибутами тera <INPUT>:
- NAME – идентификатор элемента управления;
- VALUE – начальное значение, отображаемое в поле ввода сразу после загрузки
документа;
- SIZE – максимальное количество отображаемых символов;
- MAXLENGTH – максимальное количество символов, которые могут быть введены с
помощью данного поля ввода.
Например, приведенный ниже фрагмент кода создает форму, содержащую текстовое поле
txt1 длиной 20 символов:
<FORM METHOD="POST"
ACTION="http://domen.ru/scripts/test.cgi">
Имя: <INPUT TYPE="TEXT" SIZE=20 NAME="txt1">
</FORM>
Имеется еще одна разновидность полей ввода – поля, предназначенные для ввода пароля.
Для создания такого поля ввода атрибуту TYPE следует задать значение "PASSWORD". Все
символы, вводимые в этом поле ввода, будут отображаться на экране в виде звездочек (*). В
остальном этот элемент управления ничем не отличается от обычного поля ввода.
Флажки
Для создания флажка атрибуту TYPE тега <INPUT> задается значение "CHECKBOX".
Параметры флажка определяются следующими атрибутами:
- NAME – идентификатор элемента управления;
- VALUE – атрибут, определяющий значение, которое передается на сервер в случае,
если флажок установлен;
- CHECKED – атрибут, указывающий, что после загрузки документа флажок должен
быть установлен. Данному атрибуту не задается никакого значения.
Например, следующий код создает флажок, передающий на сервер значение "YES" и по
умолчанию являющийся установленным:
<FORM METHOD="POST"
ACTION-"http://domen.ru/scripts/test.cgi">
<INPUT TYPE="CHECKBOX" NAME="chk1" VALUE="YES" CHECKED>
Запомнить
</FORM>
Переключатели
Переключатель представляет собой группу элементов управления, подобных флажкам.
Однако в отличие от последних в установленном состоянии может находиться только один из
элементов управления, входящих в группу. Для создания переключателей атрибуту TYPE
задается значение "RADIO" . Параметры переключателей определяются следующими атрибутами:
- NAME – идентификатор переключателя. Он должен быть одинаковым для всех
элементов управления, входящих в одну группу;
- VALUE – значение, передаваемое серверу при установленном значении элемента
управления;
- CHECKED – атрибут, указывающий, какой из элементов управления должен быть
установлен в группе при загрузке документа.
Следующий фрагмент HTML-кода содержит описание переключателя с тремя
положениями:
<FORM METHOD="POST"
ACTION="http://domen.ru/scripts/test.cgi">
<INPUT TYPE="RADIO" NAME="rb1" VALUE="1" CHECKED>
сегодня <BR>
<INPUT TYPE="RADIO" NAME="rb1" VALUE-"2">
за последнюю неделю <BR>
<INPUT TYPE="RADIO" NAME="rb1" VALUE="3">
за последний месяц <BR>
</FORM>
Курсовой проект по Информатике для АСУ
14
Кнопки
Различают два вида кнопок:
- кнопка SUBMIT производит передачу введенных пользователем данных на сервер;
- кнопка RESET сбрасывает все элементы управления в исходные состояния.
Для создания кнопок атрибуту TYPE задается значение либо "SUBMIT", либо "RESET" –
в зависимости от того, какую кнопку требуется создать. Надпись на кнопке задается с помощью
атрибута VALUE.
Приведенный ниже фрагмент кода создает пару кнопок, одна из которых имеет тип
SUBMIT, а вторая – RESET:
<FORM METHOD="POST" ACTION="http://domen.ru/scripts/test.cgi">
<INPUT TYPE="SUBMIT" VALUE="OK" CHECKED>
<INPUT TYPE="RESFT" VALUE="CANCEL">
</FORM>
Списки выбора
Парный тег <SELECT> позволяет создавать обычные и раскрывающиеся списки.
Отдельные пункты задаются при помощи парного тега <OPTION>, который допустим только
внутри данного элемента (закрывающийся тег можно </OPTION> опускать). Параметры
элементов списка описываются следующими атрибутами:
- NAME – идентификатор элемента списка;
- MULTIPLE – наличие этого атрибута, позволяет пользователю одновременно выбрать
несколько элементов списка;
- SELECTED – атрибут, использующийся для пометки элементов списка, которые будут
выбраны.
Например, следующий код создает выпадающий список из трех элементов, а пункт
«Второй элемент» выбран по умолчанию:
<FORM METHOD="POST"
ACTION-"http://domen.ru/scripts/test.cgi">
<SELECT NAME="sel1">
<OPTION>Первый элемент
<OPTION SELECTED>Второй элемент
<OPTION>Третий элемент
</SELECT>
</FORM>
Многострочный текстовый блок
Парный тег <TEXTAREA> определяет прямоугольное окно, для ввода текстовой
информации. Если определено значение по умолчанию, оно выводится при открытии формы, в
противном случае поле появится незаполненным. Параметры текстовой области определяются
следующими атрибутами:
- NAME – идентификатор текстового блока;
- ROWS, COLUMNS
– атрибуты, имеющие
целочисленные аргументы, определяющие число
строк в текстовом блоке и количество символов в
строке;
Этот пример иллюстрирует применение тега <TEXTAREA>:
<FORM METHOD="POST"
ACTION-"http://domen.ru/scripts/test.cgi">
<TEXTAREA NAME="ta1" ROWS=5 COLUMNS=40>Я
поступил в этот ВУЗ потому что…
</TEXTAREA>
</FORM>
В заключение приведем пример формы, содержащей
все основные элементы управления:
<HTML>
<HEAD><TITLE> Пример HTML-документа
</TITLE></HEAD>
<BODY>
Курсовой проект по Информатике для АСУ
15
Рис.1. Пример HTML-формы
<H2 ALIGN=CENTER> Пример создания форм </H2>
<FORM METHOD="POST" ACTION="http://domen.ru/scripts/test.cgi ">
Имя: <INPUT TYPE="TEXT" SIZE=20 NAME="txt1"> <BR><BR>
<INPUT TYPE="CHECKBOX" NAME="chk1" VALUE="YES" CHECKED>Запомнить<BR><BR>
<INPUT TYPE="RADIO" NAME="rb1" VALUE="1" CHECKED> сегодня <BR>
<INPUT TYPE="RADIO" NAME="rb1" VALUE="2"> за последнюю неделю <BR>
<INPUT TYPE="RADIO" NAME="rb1" VALUE="3"> за последний месяц <BR><BR>
<SELECT NAME="sel1">
<OPTION>Первый элемент
<OPTION SELECTED>Второй элемент
<OPTION>Третий элемент
</SELECT><BR><BR>
<P>Введите в это поле свои комментарии:<BR>
<TEXTAREA NAME="ta1" ROWS=5 COLUMNS=40>Я поступил в этот ВУЗ потому что…
</TEXTAREA><BR><BR>
<INPUT TYPE="SUBMIT" VALUE="OK" CHECKED>
<INPUT TYPE="RESET" VALUE="CANCEL">
</FORM>
</BODY>
</HTML>
Вид приведенного HTML-документа в окне браузера Internet Explorer показан на рис. 1.
По щелчку на кнопке отправки данные из формы передаются в виде пар текущих значений
атрибутов NAME и VALUE, соединенных знаком равенства. Информация о флажке передается
только в том случае, если он установлен. Если атрибуты NAME и VALUE определены для
использованной кнопки отправки, соответствующие данные также передаются (это позволяет
включать в форму несколько кнопок отправки). Данные, поступающие в таком виде, удобны
как для ручной, так и для автоматической обработки.
Каскадные таблицы стилей
Стиль – это правило, которое определяет внешний вид того или иного элемента в
документе. Используя технологию CSS, вы можете задавать стиль для тегов, т.е. в стилевых
таблицах вы определяете, как будет выглядеть web-страница на экране браузера.
Преимущества стилевых таблиц:
1. Таблицы стилей позволяют отделить логическую структуру страниц от
визуального представления (оформления).
2. Созданная таблица стилей может применяться ко всем страницам сайта, благодаря
чему соблюдается единство его оформления.
3. Если сайт оформлен с помощью единственной стилевой таблицы, случае внесения
изменений в оформление тегов в стилевой таблице эти изменения вступят в силу на
всех страницах сайта. Тем самым CSS позволяют гибко управлять внешним
представлением страниц на экране.
Синтаксис таблиц стилей
Все объявления стилей называются правилами, каждое из которых состоит из двух частей
(рис.2): селектора (Н1), определяющего тег в НТML-документе (заголовок, параграф и т.д.) и
определения (color:red), устанавливающего стиль, применяемый к данному селектору (тегу).
свойство значение
H1
селектор
{color:red}
определение стиля
Рис.2.Синтаксис CSS.
Определение, в свою очередь, состоит из двух частей: свойства (color) и значения (red).
Они записываются в фигурных скобках и отделяются друг от друга двоеточием. Для
уменьшения размеров таблиц стилей селекторы группируются через запятую, а определения –
через точку с запятой. Например:
H1, H2 {color:red; font-family:Arial}
В данном примере задается одинаковое оформление для заголовков первого и второго
уровня: красный цвет и шрифт Arial.
Курсовой проект по Информатике для АСУ
16
Подключение
внешней
стилевой
таблицы
<LINK>
помещается в
заголовочную
часть HTMLдокумента
<HEAD>
<LINK
HREF=”css/site.css”
REL=”stylesheet”
TYPE=”text/css”>
Использование
внутренней
стилевой
таблицы
<STYLE>
помещается в
заголовочную
часть HTMLдокумента
<HEAD>
<style
type=”text/css”>
H1 {color : blue}
</style>
Указание
стиля
непосредственно
внутри тега
<H1 style=”color:red;
font-family:Arial ”>
…</H1>
Приоритетность стилей
Кроме того, стилевые таблицы поддерживают свойство наследования, благодаря которому
вы не должны определять стили для всех тегов, которые используете при создании HTMLстраниц, достаточно определить стиль по умолчанию для всего документа в теге BODY.
Однако важно помнить, что на практике наследование не всегда корректно поддерживается
браузерами.
Для большей гибкости при оформлении страниц можно создать свои собственные классы
и задать для них стили6.
Включение стилевых таблиц в HTML-документ
Существует три способа добавления CSS в HTML-документ, описанных в таблице 7.
Очевидно, что использование внешней таблицы стилей – наиболее предпочтительный
вариант, поскольку вы можете подключить эту таблицу ко всем документам сайта и таким
образом получите достаточно гибкий механизм управления его внешним видом. При внесении
изменений в один файл (в нашем примере site.css) они вступят в силу сразу на всех страницах,
использующих внешнюю стилевую таблицу, описанную в этом файле (site.css). Создать
внешнюю стилевую таблицу можно с помощью простейшего текстового редактора, допустим
Notepad, сохранив файл с расширением .css.
Таблица 7. Включение CSS в HTML–документ.
Приоритетность стилей при перекрывании установок
Способ
Тег и распоПример
Использование нескольких стилей
ложение
в одном документе
<HTML>
<HEAD>
<TITLE>Каскадные таблицы
стилей</TITLE>
<LINK HREF=”css/site.css”
REL=”stylesheet”
TYPE=”text/css”>
<STYLE TYPE=”text/css”>
H1 {color : blue}
</STYLE >
</HEAD>
<BODY>
<H1 style=”color:red;”>А текст
будет красным</H1>
</BODY>
</HTML>
Стилевая таблица в <STYLE>…</STYLE >(второй способ) действует только внутри
одного документа.
Третий способ теряет все достоинства таблиц стилей, так как записывается внутри тега и
соответственно применяется только к нему.
Как показано в таблице, в случае, если к одному документу применяются сразу несколько
стилевых таблиц (все три способа), то более позднее правило побеждает. Т.е. самым высоким
приоритетом обладает стиль, указанный внутри тега, за ним следует тег <STYLE> и самый
низкий приоритет – у <LINK>.
6
Более подробную информацию см. в [6]
Курсовой проект по Информатике для АСУ
17
Порядок и этапы выполнения курсового проекта
Порядок проектирования и реализации сайта
Примерные этапы выполнения курсового проекта представлены в таблице 8.
Таблица 8. План работ по проектированию и реализации сайта.
№ Наименование работ
Результат
1. Получение задания на Анализ требований к проекту сайта (см.
Согласование
проектирование
табл.9)
выработанной идеи
(темы сайта)
проекта сайта с
заказчиком
(преподавателем)
2. Подбор информации
Обзор литературы и др. источников
Информация для
по теме и ее
публикации
структуризация
3. Построение
Все разделы сайта, его функциональность, Логическая структура
логической структуры структура разделов, описание каждой
сайта
функции сайта
4. Определение
Разработка структуры расположения всех Физическая структура
требований к
файлов сайта (каталогов, подкаталогов,
физической
файлов), требования к наименованию
реализации проекта
файлов и каталогов, обоснование
использования абсолютных и/или
относительных ссылок.
5. Разработка дизайна
Разработка общей концепции дизайна
Эскизы дизайна
сайта
сайта (фон, шрифт, коллекция
главной и внутренних
изображений для кнопок)
страниц сайта. Файлы
стилевых таблиц.
6. Информационное
Верстка html-страниц
html-страницы
наполнение
7. Тестирование
Проверка функциональности и
Устранение
наполнения сайта. Тестирование сайта в
выявленных
различных браузерах и при различном
недостатков (не
разрешении экрана и т.д.
работающих ссылок и
т.д.).
8. Рабочая
Составление подробной документации по Описание логической,
документация
сайту с целью возможной последующей
физической структур
поддержки и расширением проекта.
и дизайна сайта.
План возможного
развития сайта.
Критерии оценки сайта.
Как известно, на вкус и цвет товарища нет. Это же правило можно применить и к дизайну
Вашего сайта. Однако и здесь существуют определенные требования
Прежде всего, Вы должны понимать, что экран монитора сильно отличается от листа бумаги по
нескольким параметрам.
Во-первых – разрешение экрана. У разных людей (на различных компьютерах) оно может
варьироваться. Ваш сайт должен почти одинаково смотреться на мониторах с разрешением
Курсовой проект по Информатике для АСУ
18
640х480, 800х600, 1024х7687. В современном Интернете принято молчаливое соглашение о
том, что — профессиональный сайт должен корректно отображаться при экранном
разрешении 640x480 точек с цветовой палитрой в 256 цветов. Разумеется, после подготовки
первоначального шаблона будущей web-страницы его необходимо протестировать на
соответствие изложенным выше требованиям. Для этого, загрузив страницу в броузер,
измените экранное разрешение, цветовую палитру в настройках Windows.
Во-вторых, программы-браузеры. Несмотря на то, что существует несколько стандартов
языка HTML, разные браузеры один и тот же сайт показывают по-разному. В настоящее время
имеется только три браузера, заслуживающих упоминания – это Microsoft Internet Explorer,
Netscape Navigator и Opera, поскольку они самые популярные - их используют более 75%
пользователей. Для проверки внешнего вида ваших страничек вам придется использовать
именно их. Нормально выполненная web-страница должна одинаково выглядеть в любом из
этих браузеров.
В-третьих, помните о скорости загрузки файлов. Если ваша страница перегружена
картинками и прочими украшениями, то ее смотреть – сплошное мучение: уж очень долго она
загружается. А так как подавляющее большинство пользователей используют для выхода в
Интернет dial-up соединение, подключаясь к провайдерскому пулу при помощи модема.
Разумеется, в этом случае скорость передачи данных (как правило, удручающе низкая) играет
для них решающую роль, вряд ли кому-то доставит удовольствие дожидаться загрузки одного
html-документа десятки минут Рекомендации – размер отдельной странички вместе с графикой
не должен превышать 100 Кб.
В- четвертых, старайтесь выдержать весь проект в одном дизайнерском стиле, оформляйте
различные его разделы таким образом, чтобы общее художественное решение было схожим
для всего сайта. Одним из достаточно важных факторов, на которые следует обращать
внимание при создании web-страниц, является психологическое восприятие вашего ресурса
посетителем. Поскольку пользователи должны воспринимать сайт как единое целое .
В-пятых, не используйте на одной web-странице более трех различных шрифтов, включая
шрифты, применяемые при создании графических элементов.
В-шестых, используйте только корректные цветовые схемы и не применяйте при оформлении
документов более трех различных цветов. Это не позволяет пользователю отвлекаться от
основного элемента web-сайта — его информационного наполнения и для того чтобы результат
ваших трудов не вызывал отрицательных эмоций. Чем меньше будут уставать глаза посетителя,
чем меньше его будет раздражать оформление страниц, тем больше времени пользователь
будет рассматривать ваш сайт.
Далее приведен перечень цветовых сочетаний рисованного объекта или текста с фоном в
порядке ухудшения зрительного восприятия:
 синее на белом;
 черное на желтом;
 зеленое на белом;
 черное на белом;
 зеленое на красном;
 красное на желтом;
 красное на белом;
 оранжевое на черном;
 черное на пурпурном;
 оранжевое на белом;
 красное на зеленом.
7
Разрешении экрана 800*600 на сегодняшний момент самое популярное - более 60% пользователей Internet.
Курсовой проект по Информатике для АСУ
19
Корректность сочетания друг с другом всех остальных цветов и оттенков проверяется с
помощью одного простого правила: переведите ваше изображение в формат «grayscale» (256
оттенков серого) и посмотрите, читается ли в таком виде ваш текст, контрастно ли выглядят
нарисованные элементы. Если нет —принятое вами цветовое решение лучше пересмотреть.
В седьмых, Созданная вами web-страница должна обязательно включать навигационные
элементы, охватывающие все разделы вашего сайта, причем эти элементы должны всегда
быть на виду. Сайт с правильным дизайном и удобной навигацией оценивается очень просто:
по правилу “двух кликов” (двух переходов), т.е. из любого уголка сайта можно перейти в любое
другое место не более чем за два перехода.
Россия и в Интернет проявила свою национальную самобытность. У нас существует, как
минимум 5 кодировок русского языка. Наиболее распространенной сейчас становится
Microsoft-овская кодировка Win-1251. Если Вы делаете свой сайт для всех, то Вам следует
проявлять уважение и к “меньшинствам”, которые пользуются кодировками KOI-8 и Мас, тем
более что обычно это продвинутые люди, имеющие авторитет в Сети.
Логическая структура сайта
Одним из главных слагаемых успеха узла является правильная организация его
структуры. От нее зависит не только удобство навигации, но и легкость его пополнения,
добавления разделов. Структура сайта отражает внутренние информационные связи его
страниц и должна определяться еще на первых этапах создания проекта до начала разработки
дизайна.
Логическая структура сайта — это система организации ссылок между страницами сайта.
Условно можно выделить три основных способа организации структуры сайта:
Линейная структура (последовательная). Веб-страницы идут одна за другой, и
пользователь должен просматривать их как
слайд-шоу. Линейные (последовательные)
структуры можно использовать в тех случаях,
когда материал выстраивается в логическую
цепочку. Так, описание отдельных учебников
Computer Basics, Business Writing, Web
Technologies, Database Design, подготовленных
и изданных в Трейнинговом Центре, может
быть
распределено
по
отдельным
последовательным страницам, и пользователь
от одной страницы может переходить к
следующей
или
предыдущей.
Рисунок 1 Линейная структура
Последовательная структура, показанная на
сайта
рисунке, является круговой – каждая страница имеет следующую
и предыдущую. Так, от
страницы Computer Basics возможны переходы к страницам Business Writing и Database Design,
от страницы Business Writing к Computer Basics и Web Technologies и т.д
Древовидная структура (иерархическая). Пользователь при заходе на главную страницу
оказывается перед выбором, куда идти
дальше.
После перехода в нужный раздел, он
подбирает необходимый подраздел и т. п.
Иерархические
структуры
можно
использовать
в
тех
случаях,
когда
содержимое каждой страницы (кроме)
Курсовой проект по Информатике для АСУ
20
первой, входит на правах подраздела в страницу более высокого уровня.
Так, общие сведения о Трейнинговом Центре могут быть представлены на главной странице
GeneralInfo (общая информация), а описание предлагаемых курсов, подготовленных книг и
тестовых вопросов может быть распределено по страницам Textbooks, Courses, Tests (учебники,
курсы, тесты), являющимся подразделами содержания страницы GeneralInfo. В иерархической
структуре стрелки определяют возможные переходы между страницами– возможны переходы
от страницы GeneralInfo к страницам
Textbooks, Courses, Tests, а также обратные
Рисунок 2 Древовидная структура
переходы.
сайта
Решетчатая структура (комбинированная). В ней все страницы размещаются в различных
ветках. У пользователя есть возможность перемещаться по ним не только вертикально (вверхвниз) но и горизонтально (то есть между ветками на разных уровнях).
Рисунок 3 Решетчатая структура.
Как правило, ссылки на все разделы сайта с краткими анонсами их содержимого
приводится на первой, так называемой стартовой странице, которой присваивается имя
index.htm (.html). Если тематические рубрики содержат собственные подразделы, каждая из них
также имеет свою стартовую страницу, называющуюся index.html.
Физическая структура подразумевает алгоритм размещения физических файлов по
поддиректориям папки, в которой опубликован ваш сайт.
Для того чтобы все гиперссылки на вашей домашней страничке или web-сайте работали
корректно, все документы открывались правильно и броузер не выдавал ошибок при
обращении к каким-либо разделам ресурса, при создании его физической структуры следует
соблюдать несколько простых правил:
1. Назначайте имена директорий, имена и расширения документов HTML и графических
файлов с использованием символов только латинского алфавита и только в строчном регистре.
Старайтесь, чтобы имена созданных вами файлов и директорий не превышали по длине восьми
символов.
2. При присвоении имен файлов документам HTML старайтесь следить за тем, чтобы эти
имена были «смысловыми»: впоследствии вы легко можете забыть содержимое и назначение
какой-либо web-страницы, если имена файлов будут выглядеть, например, как l.htm, 2.htm,
3.htm и т. д.
Для упорядочения хранения всех файлов, как правило, используют систему каталогов,
организуя ее таким образом, чтобы все файлы с иллюстративным материалом для каждого
раздела (Html-страницы) располагались в отдельном каталоге. Такой подход очень удобен для
крупных сайтов и позволяет не только ориентироваться в физической структуре сайта но и
быстрее его обновлять.
Курсовой проект по Информатике для АСУ
21
Для небольших сайтов рекомендуется хранить иллюстративные и оформительские
материалы в отдельном каталоге от html–файлов.
До тех пор пока количество составляющих ваш сайт файлов относительно мало, это может
показаться излишним, когда же оно перевалит за первые два десятка, в обилии html-документов
и графических элементов будет легко запутаться. Пример оформления такого средства
документирования показан ниже
Таблица 1 Пример оформления средства документирования проекта
Директория
Имя файла
Описание
/mysite
index.html
Стартовая страница сайта
/mysite/family index.html
wife.htm
son.htm
/mysite/photos Pd.jpg
Дата модификации
Стартовая страница раздела «моя 01.01.2008
семья»
Рассказ о моей жене
Рассказ о моем сынишке
Моя фотография на пляже в Сочи
03.01.2008
05.01.2008
06.01.2008
Очевидно, что логическая и физическая структуры могут не совпадать, поскольку в общем
случае физическая структура ресурса разрабатывается, исходя из удобства размещения файлов.
Из всего сказанного становится очевидным, что физическая структура сайта скрыта от
посетителей вашего ресурса: они могут наблюдать только логическую структуру, причем
именно так, как она представлена при помощи элементов навигации. Отсюда следует вполне
логический вывод: строение системы навигации должно если не полностью повторять, то хотя
бы максимально соответствовать разработанной вами логической структуре сайта.
Рисунок 4Сравнение логической и физической структуры сайта
Динамическая и статическая компоновка сайта
Современные видеокарты поддерживают несколько произвольно устанавливаемых
видеорежимов, характеризующихся экранным разрешением и количеством цветов,
используемых при отображении информации на экране компьютера. При открытии в одном и
том же броузере какой-либо web-страницы она может отображаться не одинаковым образом в
зависимости от используемого посетителем сайта экранного разрешения.
Для того чтобы избежать «съезжания» элементов html-документа друг относительно друга при
изменении параметров экрана, применяется следующий прием: все компоненты web-страницы
заключаются в соответствующие ячейки невидимой таблицы, при этом каждому объекту
Курсовой проект по Информатике для АСУ
22
назначается одно, строго определенное положение. Данной таблице можно назначить строго
определенную ширину в пикселах, например, 640 точек, после чего жестко позиционировать ее
по центру экрана или «прижать» к левому его краю. Такой вариант компоновки сайта можно
назвать статическим, поскольку ширина таблицы не меняется в зависимости от экранного
разрешения. Разумеется, при изменении параметров экрана не происходит ни малейшего
смещения элементов дизайна страницы.
Достоинства.
1. Простота алгоритма верстки документа. Оптимизировав страницу для отображения с
экранным разрешением 640x480 точек, вы можете быть уверены, что при изменении
пользовательских экранных настроек элементы дизайна не «поплывут».
2. Данный вариант компоновки сайта в большинстве случаев (при соблюдении ряда
дополнительных условий) позволяет добиться идентичности отображения html-документа в
броузерах MicrosoftInternet Explorer и Netscape Navigator.
Недостатки.
1. При отображении документа на компьютере с высоким экранным разрешением по краям
экрана или с правой его стороны остается заметное пустое поле.
Другой подход — когда ширину невидимой таблицы, содержащей фрагменты web-страницы,
задают в процентах от текущей ширины экрана. При увеличении экранного разрешения
таблица «растягивается» по горизонтали, и все размещенные в ее ячейках элементы,
позиционированные либо по центру, либо по краям столбцов, смещаются согласно
установленному алгоритму. В силу того, что параметры таблицы изменяются в зависимости от
настроек экрана, такой принцип компоновки html-документа можно назвать динамическим.
Достоинства.
1 Документ растягивается по всей ширине экрана, не остается неиспользованных пустых
полей.
Недостатки.
1. Сложность верстки и отладки страницы, весьма часто проявляется неадекватность
отображения таких документов в броузерах Microsoft Internet Explorer и Netscape Navigator.
Системы навигации сайта
Навигация по узлу - это тот механизм, который позволяет посетителю найти то, что вы
хотите ему показать. От понятности системы навигации по узлу, продуманности ее элементов
зависит, достигнет ли посетитель своей цели или уйдет, так и не разобравшись в дебрях
документов. Именно удобная навигация, а не красивые картинки, заставляет посетителей
возвращаться на ваш узел, так как они знают, что с легкостью найдут необходимый материал.
Организация документа.
Существует несколько основных правил организации документа:
- самая актуальная информация должна быть видна в первом экране, а если ее много, то
хотя бы ее начало или заголовок;
- элементы навигации (меню) должны быть очевидны и заметны, посетитель мог прийти к
вам в первый раз, и ему не знаком ваш стиль;
- желательно, чтобы элементы навигации помещались в один экран, если конечно у вас не
мегаузел;
- страница должна ясно говорить, чему посвящен этот узел;
- не делайте страницу полностью графической - что бы вы там ни думали, всегда найдется
причина, чтобы в будущем добавить туда текст;
- следите за ее "весом" - на данный момент оптимальным является размер в 30-40 (50)
килобайт; если она все-таки очень "тяжелая" - минимизируйте количество графики, разбейте
таблицу (если в нее заключена вся страница) на несколько таблиц.
Любая web-страница содержит определенный набор стандартных элементов, являющихся
обязательными компонентами каждого ресурса Интернета. Эти элементы еще называют
«контент» (от англ, content — содержание).
Курсовой проект по Информатике для АСУ
23
Основным элементом web-страницы, является ее заголовок. Он может быть выполнен как
в текстовом, так и в графическом варианте, и всегда он должен располагаться в верхней части
документа. Непосредственно под заголовком документа, как правило, располагается
пространство, отведенное для размещения рекламного баннера. Стандартный размер баннеров,
публикуемых под заголовком документа, составляет обычно 468x60 точек. Если вы используете
статический принцип компоновки страницы, ширина заголовка вашего документа будет
составлять приблизительно 640 пикселей. Очевидно, что ширина баннера в этом случае будет
значительно меньше ширины заголовка, благодаря чему в той части страницы, где вы
планируете отвести место под рекламу, образуется незанятое пространство, которое можно
заполнить логотипом владельца данного сайта.
Основную часть документа занимает так называемое текстовое поле — участок, где и
размещается смысловое наполнение страницы: содержательный информационный текст и
иллюстрации. Расположение текстового поля зависит в первую очередь от того, каким образом
web-дизайнер разместит остальные элементы документа.
Следующей обязательной составляющей частью web-страницы являются элементы
навигации — гиперссылки, связывающие данный документ с другими разделами сайта.
Элементы навигации могут быть выполнены в виде текстовых строк, графических объектов, то
есть кнопок, либо активных компонентов, на- пример Java-апплетов. Располагать элементы
навигации следует таким образом, чтобы они всегда были «на виду», «под рукой», то есть так,
чтобы пользователю не приходилось «отматывать» страницу назад, если текстовое поле
занимает по высоте несколько физических экранов, после чего подолгу искать ссылки на
другие разделы. Наиболее устоявшимся подходом является размещение элементов навигации у
левой границы страницы.
В нижней части документа (называемой подвалом) принято публиковать информацию о
разработчиках сайта и адрес электронной почты, по которому посетители ресурса могут
направить владельцам странички свои отклики, предложения и пожелания.
Пример компоновки сайта, содержащего полный набор описанных выше составляющих,
показан ниже на рис.5. В нем выбрано позиционирование элементов навигации по левой
границе документа.
Рисунок 5 Пример компоновки web-страницы с левым позиционированием
элементов навигации
Курсовой проект по Информатике для АСУ
24
На практике часто встречаются web-сайты, в дизайне которых элементы навигации
позиционированы по правой границе экрана. В этом случае текстовое поле смещается налево,
остальные компоненты документа располагаются, исходя из принципа максимальной
эстетичности их сочетания. Пример такого исполнения сайта показан на рис. 6.
Рисунок 6 Пример компоновки web-страницы с правым позиционированием
элементов навигации
Логотип в этом случае помещен на один уровень с заголовком документа, а рекламный
баннер позиционирован относительно центра страницы. При таком подходе рекомендуется
выдерживать графическое оформление заголовка, логотипа и поля для размещения рекламы в
едином цветовом и художественном стиле — тогда несимметричность положения данных
объектов будет не столь очевидна и не станет «резать глаза» .
Элементы навигации можно разместить и в верхней части документа. Такой вариант
компоновки наиболее подходит при создании домашних страничек, при этом подготовка самой
таблицы значительно упрощается. Недостатком подобного подхода является необходимость
продублировать элементы навигации в нижней части документа, поскольку при вертикальной
прокрутке страницы они исчезают за верхней границей экрана, и, чтобы добраться до них,
пользователю придется «отматывать» экран назад. Пример оформления страницы с верхним
расположением элементов навигации показан на рис.7.
Курсовой проект по Информатике для АСУ
25
Рисунок 7 Пример компоновки web-страницы с верхним позиционированием
элементов навигации
Безусловно, все, что было сказано в данном разделе, не является панацеей. Здесь
излогаются лишь общие принципы, которые применяются при компоновке структуры сайта,
окончательное же решение всегда остается завами. Примером дизайнерского решения, не
попадающим ни в одну из указанных выше категорий, может служить так называемая
смешанная компоновка, примерная схема которой приведена на рис. 8.
Рисунок 8 Пример «смешанной» компоновки web-страницы
В данном примере часть управляющих элементов встроена непосредственно в заголовок
страницы — речь идет о кнопках переключения между русской и английской версиями сайта, а
также о кнопках навигации: это может быть ссылка на адрес электронной почты создателей
ресурса, продублированная в нижней части документа, и ссылка на один из тематических
Курсовой проект по Информатике для АСУ
26
разделов, например, страницу новостей. Основной блок элементов навигации позиционирован
относительно левой границы документа, однако меню выбора кодировки кириллицы
расположено непосредственно под рекламным баннером в верхней части страницы. Текстовое
поле разделено на две несимметричные колонки, причем в правой размещены краткие анонсы
составляющих ресурс тематических рубрик, включая ссылки на эти разделы.
Очевидно, что вариантов «смешанной компоновки» web-страницы может быть великое
множество, конкретные решения зависят от количества составляющих ресурс разделов, объема
подготовленного для размещения на сайте текста и, наконец, от фантазии самого автора. Важно
лишь, чтобы внешний вид сайта не вызывал нареканий у посетителей. Вы как разработчик
вправе проявить все свои способности и таланты и скомпоновать страницу по собственному
вкусу. Вы, конечно, можете название сайта написать мелким убористым шрифтом и
разместить его под рекламным баннером, а элементы навигации опубликовать прямо в
середине текстового блока.
Но учтите, что аттестовать ваш результат я буду в
соответствии с теми положениями и требованиями, которые были приведены выше.
Требования и критерии оценки курсового проекта
Перечень требований к курсовому проекту представлен в таблице 9.
Таблица 9. Требования и оценка курсового проекта.
Требования
Оценка
1. Нелинейная структура Web-страницы (т.е. перекрестные ссылки между
несколькими файлами).
2. Корректная навигация (например, возможность возврата на главную страницу с
любой страницы, переход, якорные (анкорные) ссылки). Система навигации
понятна неподготовленному посетителю.
3. Использование динамической компоновки страницы.
4. Тема курсового проекта раскрыта полностью и объем занимает 15-20 страниц
формата А4 .
5. Эстетический вид (использование корректных цветовых схем, единый
3
дизайнерский стиль, корректное отображение при изменении экранных
настроек, шрифты, удобный контент).
6. Все картинки на сайте должны быть оптимизированы и иметь размер не более
4
15-20 кб.
7. Для картинок – альтернативный текст
8. Защита курсового проекта (с помощью какого ПО, знание использованных
5
тегов).
9. Документ выполнен только с использованием таблиц. (Документы выполненные
только с использованием фреймов к защите не принимаются.)
10. Использование кадров (первая страница выполнена с использованием фреймов,
остальные – таблиц).
11. На первой странице сайта наличие адреса электронной почты для связи с
автором.
12. Создание глоссария (переход в него и возврат)
13. Сведения об авторе (в виде резюме).
14. Использование активных изображений (изображение-карта), например, для
использования кнопок или карты сайта.
15. Перекодировщик кириллицы (java –скрипт или готовая программа)
16. Использование эффектов анимации (если не своих, то знать, как они созданы)
17. Использование каскадных таблиц стилей (CSS)
Содержание отчета по курсовому проекту
Отчет по курсовому проекту сдается на проверку преподавателю, после которой он может
быть возвращен на доработку или принят, в результате чего студент допускается (или не
допускается) к защите курсового проекта. По результатам защиты и реализации курсового
Курсовой проект по Информатике для АСУ
27
проекта выставляется оценка. Отчет сдается в электронном виде вместе с носителем и в виде
документа.
В состав отчета должны входить следующие разделы:
1. Задание.
2. Логическая структура страницы и ее обоснование.
3. Физическая структура страницы (перечень необходимых файлов и их назначение,
условия нахождения (хранения) файлов).
4. Шаблон дизайна (структура и расположение информации на странице, выбор
цветовой схемы, шрифтов, навигации)
5. Исходный текст шаблона (HTML-код главной (домашней) страницы сайта, при
использовании в ней фреймов привести текст всех страниц, отображающихся при
первоначальном открытии сайта)
6. Обязательно наличие листингов фрагментов HTML-кода, содержащих:
изображение-карту, кадровую структуру (фрейм), ссылки (содержание) на главные
разделы сайта.
7. Исходный текст файла стилевых таблиц.
8. Для HTML-документов, посвященных тестированию обязательно наличие:
- перечня всех тестовых вопросов и вариантов ответа на них (с указанием
верного);
- листинга скрипта или cgi-сценария, осуществляющего обработку результатов
теста.
9. Порядок разработки сайта. Обязательно наличие сведений об использованном ПО в
процессе выполнения курсового проекта. Указать преимущества и недостатки
использованного ПО, выявленные во время реализации проекта сайта.
10. Список литературы (обязательна ссылка на источники сведений, использованных
при создании страницы: книги, журналы, Internet адреса).
11. Приложение. Исходный текст, содержащий раскрытую тему курсового проекта, в
реферативной форме.
Все страницы отчета должны быть пронумерованы, в его начале должно быть приведено
содержание. В зависимости от реализации сайта в состав отчет могут быть добавлены исходные
тексты других страниц сайта (по указанию преподавателя).
Рекомендуемая литература
Информатика: Базовый курс / С.В.Симонович и др. – СПб.: Питер, 2001.- 640 с.: ил.
Хеслоп Б., Бадник Л. HTML с самого начала./ Перев. С англ. – СПб: Питер, 1997.-416с.: ил.
Морис Б. HTML в действии./ Перев. с англ. – СПб: Питер, 1997.-256с.: ил.
Кент, Питер. Использование Netscape 3.: Перев. с англ. – К.: Диалектика, 1997.-304с.: ил. Парал. тит. анг.
5. Информационные системы / Петров В.Н. – СПб.: Питер, 2002. – 688 с.: ил.
6. Мержанова М. Оформляем веб-страницу с помощью стилевых таблиц. Мир ПК.№5. (май)
2004.-79-85.
7. Аванесов В.С. Форма тестовых заданий.-М., 1991, 33с.
8. Федорчук А. Как создаются Web-сайты. - Издательство "Питер", 2000
9. Холмогоров В. Основы Web-мастерства. Учебный курс. - СПб: Питер, 2001. - 352 с.
10. Хольцшлаг, Молли, Э. Использование HTML 4, 6-е издание. Специальное издание.: Пер.
с англ.: Уч. пос. - М.: Издательский дом«Вильямс», 2001. - 1008 с.: ил. - Парал. тит. англ.
11. http://psbatishev.narod.ru/glos/ глоссарий компьютерных терминов
12. http://www.computerra.ru/offline/1999/327/2750/. Сделай сам, Автор: МАРК ШЕВЧЕНКО,
Опубликовано в журнале "Компьютерра" №49 от 07 декабря 1999 года
1.
2.
3.
4.
Курсовой проект по Информатике для АСУ
28