Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Московский Государственный Университет Леса

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Диплом(Инженер) / Технологическая часть

.docx

Скачиваний:

Добавлен:

17.04.2015

Размер:

147.29 Кб

Скачать

☆

2. Технологическая часть

2.1 Описание процедуры создания интерактивной веб-страницы.

Любой веб-сайт в настоящее время состоит из некоторого количества веб-страниц, связанных между собой с помощью ссылок, а так же различного рода вспомогательного материала: картинки, видео и прочее.

Таким образом, основной составляющим каждого веб-сайта, является веб-страница.

Веб-страница представляет собой обычный текстовый документ формата .html, размеченный с помощью тегов и имеющий четко заданную структуру:

<html>

<head>

…

</head>

<body>

…

</body>

</html>

Тег – это некоторая команда, заключенная в пару скобок < >, сообщающая браузеру как именно следует отобразить содержимое тега.

Теги бывают открывающие и закрывающие (отличающиеся наличием «/»перед именем команды). Между открывающим и закрывающим тегом находиться содержимое.

Для правильной работы веб-страницы необходимо включить в нее как минимум три основных тега:

Тег <html> ставится в начале веб-страницы и с добавление косой черты – в ее конце. Он сообщает браузеру, что информация записана с помощью языка HTML. Все содержимое страницы, включая остальные теги, находится между открывающим и закрывающим тегом <html>
Открывающий и закрывающий теги <head> содержат заглавие страницы. Они также могут сообщать и другую полезную информацию (например, ключевые слова, которые используются браузерами и поисковыми машинами). В заголовок также иногда включают сведения, используемые браузером для отображения веб-страницы и для придания ей интерактивности. Например, в заглавие документа можно поместить каскадные таблицы стилей. Кроме того, именно заголовок документа обычно содержит элементы программирования на JavaScript и ссылки на файлы JavaScript.
Открывающий и закрывающий теги <body> содержат тело веб-страницы со всей информацией, которая отображается в окне браузера: названия, текст, картинки и т.д.

Чтобы придать страницам визуальную утонченность необходимо использовать CSS. CSS (каскадная таблица стилей) – это язык форматирования, который позволит сделать текст внешне привлекательным, создать сложные шаблоны страниц и придать сайту индивидуальность.

Стиль, определяющий внешний вид конкретного элемента, может быть только один. Стиль – это правило, которое объясняет, как браузеру отобразить что-либо. Стиль состоит из двух элементов: форматируемого браузером элемента веб-страницы (селектора) и точной инструкции форматирования (компонента описания).

Для работы с тегами и их стилями применяются идентификаторы и классы. Идентификаторы – это, своего рода, уникальное имя тега, присваемое ему через id=”имя”. В таблице стилей для задания параметров такого идентификатора, используется # перед именем идентификатора. Особенность идентификатора в том, что не может быть другоко тега с таким же идентификатором. Класс – предназначен для задания стиля группе тегов. Класс присваивается тегу через параметр class=”имя”. В таблице стилей, класс определяется точкой перед именем класса.

И наконец, использование JavaScript позволяет сделать веб-страницу интерактивной.

JavaScript – это язык программирования, позволяющий достичь наивысшей производительности HTML-страниц, наполняя их анимацией, интерактивными элементами и динамическими визуальными эффектами. Основной плюс JavaScript – это его незамедлительная реакция на действия пользователя.

Наполнение сайта визуальными эффектами достигается за счет программирования событий документа (наведение указателя мыши, клик мышкой, загрузка страницы, движение мыши по экрану, нажатие клавиши и др.). Для того, чтобы запрограммировать событие необходимо указать браузеру запускать необходимую функцию, когда происходит событие. В данной работе используется традиционная модель техники программирования событий. Она идентифицирует элемент страницы, которому необходимо присвоить событие, а затем присваивает ему обработчик событий.

Также в работе используются анонимные функции. Аннонимная функция – это функция которая не имеет имени. Общий вид анонимной функции:

Function () {

//код

};

Т.к. у анонимной функции нет своего имени, ее нельзя вызвать, зато ее можно передавать в качестве параметра другой функции.

Таким образом, процедура создания интерактивной веб-страницы сводиться к следующим действиям:

Создание базового шаблона веб-страницы с использованием HTML.
Создание каскадной таблицы стилей (CSS).
Наполнение страницы содержимым.
Наполнение страницы JavaScript кодом, для придания ей интерактивности.

Руководство оператора

Назначение программы

Веб-страница — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера.

Веб-страницы обычно создаются на языках разметки HTML или XHTML и могут содержать гиперссылки для быстрого перехода на другие страницы.

Информация на веб-странице может быть представлена в различных формах:

- текст

- статические и анимированные графические изображения

- аудио

- видео

Информационно значимое содержимое веб-страницы обычно называется контентом.

Несколько веб-страниц, объединенных общей темой и дизайном, а также связанных между собой ссылками, и обычно находящихся на одном веб-сервере, образуют веб-сайт.

Условия выполнения программы

Для просмотра веб-страницы подойдет любой браузер: IE, FireFox, Opera, Chrome. Для внесения изменений подойдет любой текстовый редактор.

Выполнение программы

При открытии файла index.html на экран будет выведена главная веб-страница(рис. 9), которая содержит следующие элементы:

Навигационное меню, прикрепленное всегда к вверху веб-страницы

(рис. 10). Меню является интерактивным – изначально оно непрозрачно, при прокрутки страницы, оно становится полупрозрачным и появляется при подведении указателя мыши к верхнему краю веб-страницы.

Меню включает следующие функцинальные клавиши:

Концерты – содержит информацию о будущих концертах и выступлениях.
Форум – осуществляет переход на форум.
Звукозапись – содержит информацию о расписании работы звукозаписывающей студии.
Фото – фотоальбом.
Контакты – содержит контактную информацию (рис.11)
Вконтакте – осуществляет переход на страницу группы Вконтакте.
FAQ – список наиболее часто задаваеммых вопросов и ответов на них (рис.4) Ответы изначально скрыты, и появляются при нажатии на крестик, соответствующего вопроса.

Пять окон с новостями (рис. 12) – окна являются интерактивными. Изначально они являются полупрозрачными, но при наведении мыши становятся непрозрачными.
Также страница содержит: часы, дату, инфометр погоды и метрику.

Сообщения оператору

Сообщения оператору отсутствуют.