Разработка информационного ресурса «Вуз — территория здорового образа жизни»

КурсоваяПомощь в написанииУзнать стоимостьмоей работы

Разработка информационного ресурса «Вуз — территория здорового образа жизни» (реферат, курсовая, диплом, контрольная)

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ ДАЛЬНЕВОСТОЧНЫЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ Институт физики и информационных технологий Кафедра электроники Факультет информационных технологий Разработка информационного ресурса

«Вуз — территория здорового образа жизни»

Курсовая работа Студента группы 146

Гордеева А.Е.

Научный руководитель Должиков С. В., к. ф-м.н., доцент ДВГУ Владивосток 2010 г.

1. Постановка задачи

2. Выполнение

2.1 Выбор цветовой схемы

2.2 Дизайн

Пункт 2.2.1 HTML

Пункт 2.2.2 Язык разметки CSS

Пункт 2.2.3 Java-scripts

Заключение

Приложения

В данной работе описывается построение сайта на заказ Дальневосточного государственного университета и подробно описываются его особенности.

1. Постановка задачи

Необходимо в краткие сроки разработать сайт, в строгом, деловом стиле, непосредственное содержание для которого (т.н. контент, материал) будет дано позже. Задача разбивается на подзадачи:

· разработка цветовой схемы для сайта

· разработка дизайна (с расположением меню)

· придание материалу стилистики сайта, помещение на сайт

· при наличии времени — ввод дополнительных элементов дизайна

Технического задания, как такового, не было. После завершения каждого этапа работы, проект демонстрировался ответственному лицу и, в случае аттестации, проект переходил к следующему этапу.

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

2. Выполнение

2.1 Выбор цветовой схемы

Цветовая схема деловых сайтов обычно состоит из двух неярких цветов (и их оттенков для динамичных элементов). Предельный вариант такой схемы — черное с белым, но от этой схемы было решено отказаться в пользу более приятных глазу цветов. Успокаивающим глаз считается голубой цвет и его оттенки. Контрастным цветом для голубого цвета является желтый цвет. Однако, черный цвет является наиболее удобным для чтения. Таким образом была определена следующая цветовая схема: синий фон сайта, голубой фон текстовых блоков, черный цвет для текста и желтый цвет для элементов типа ссылок, цель которых — привлечь внимания посетителя сайта.

Кроме того, в меню сверху для придания динамичности, цвет текста был заменен на белый.

2.2 Дизайн

Поскольку стилистика сайта была определена как деловая, для расположения элементов сайта была выбрана классическая схема с горизонтальным меню сверху, вертикальным слева и контент материалом, занимающим большую часть экрана под горизонтальным меню (рисунок 1):

Рисунок 1 — Схема расположения элементов сайта

Такое расположение элементов меню дает пользователю интуитивно-понятный интерфейс передвижения по сайту.

Дизайн сайта составлялся с помощью кода HTML с применением средств языка каскадных таблиц CSS. Для написания не использовались никакие WYSIWYG WYSIWYG — What You See Is What You Get (англ.), графический редактор. В данном случае имеются ввиду графические редакторы HTML кода вроде Adobe Dreamweaver, MS FrontPage и т. п. Такие редакторы обычно вставляют лишние теги в код страниц, что загрязняет структуру кода, увеличивает объем кода и препятствует понимаю.-редакторы, правка кода осуществлялась в обычном «Блокноте» (Notepad), поставляемом вместе с Windows, что гарантировало чистоту и понятность кода.

Как видно из схемы, сайт имеет табличный вид. Реализация была обеспечена средствами HTML методом комбинированных таблиц. Метод комбинированных таблиц подразумевает использование вложенных друг в друга разнообразных таблиц с абсолютными и относительными размерами. Как правило, стили таких таблиц подробно описываются в CSS, оперируя видимостью, толщиной, цветом и типом границ отдельно по каждой стороне (верхней — top, нижней — bottom, правой — right, левой — left).

В верхнее меню были вынесены ссылки на основные страницы сайта, названия которых совпадали с ключевыми словами семантики задачи: «Спорт» и «Здоровье». Кроме того, вверх была вынесена ссылка «Об университете» и «Контакты».

Боковое меню содержит прочие ссылки на более конкретизированные страницы: «документы», «новости» и др. Кроме того, в меню добавлен раздел «Ссылки», в котором присутствуют основные ссылки на внешние сайты, связанные тематикой «ДВГУ, спорт, здоровье», а также указан телефон молодежного центра ДВГУ.

Пункт 2.2.1 HTML

В сайте использовались следующие стандартные теги:

Теги форматирования документа:

1. Тег

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

2. Тег

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

Атрибуты:

· Bgcolor

· Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB — пример: FF0000 — красный цвет, либо используя константы цвета, например для желтого цвета, используемой на данной странице

· background

Указывает на url-адрес изображения — фона документа

· text

Нежелательный. Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB — пример: 0 — черный цвет, либо используя константы цвета, например для зеленого цвета, используемой на данной странице

· link

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

RRGGBB — пример: 00FF00 — зеленый цвет, либо используя константы цвета, например для красного цвета, используемой на данной странице

· bgproperties=fixed

Фоновое изображение прокручиваться не будет. Т. е. текст будет двигаться при нажатии PageDown, а фон — нет.

3. — служит для внедрения графики в страницу.

Имеет атрибуты:

· src

Обязательный атрибут, указывающий URL рисунка

· align

Выравнивает изображение к одной из сторон документа (см. таблицу 1)


left	Выравнивание по левому краю
right	Выравнивание по правому краю
center	Выравнивание по центру
bottom	Выравнивание по нижнему краю
top	Выравнивание по верхнему краю
middle	Выравнивание посередине

Таблица 1 — Значения атрибута «align» тега «img»

· alt

Выводит текст к картинке. Полезно, если браузер не отображает графику на странице

· border

Устанавливает толщину рамки вокруг изображения в пикселях. По умолчанию рамка не используется. При использовании изображения в качестве гиперссылки рекомендуется установить BORDER=0, чтобы подавить цветовую окантовку, которая появится вокруг изображения

· height

Высота картинки в пикселях или процентах. Всегда желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером

· hspace

Определяет размер свободного места в пикселях слева и справа от изображения, улучшает внешний вид страницы, отделяя изображение от текста

· vspace

Определяет размер свободного места в пикселях сверху и снизу от изображения, улучшает внешний вид страницы, отделяя изображение от текста

· width

Ширина картинки в пикселях или процентах. Всегда желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером

4. — служит для внедрения графики в страницу.

· name

Задает имя элемента. Имя используется, например, для создания ссылок между фреймами

· href

Задает URL ресурса, на который должен перейти пользователь, щелкнув по ссылке. Атрибут может указывать как на внешний документ, так и на элемент внутри данного документа.

Для создания гиперссылки вызова почтовой программы для написания письма используется

· target

Строка, определяющая или получающая одно из следующих значений


name	Имя ссылки или фрейма
_blank	Загружает ссылку в новое окно
_parent	Загружает ссылку в родительском окне
_search	Загружает ссылку в панель поиска браузера. Доступно в Internet Explorer 5 и выше
_self	По умолчанию. Загружает ссылку в это же окно, где был произведен клик по ссылке

Таблица 2 — Значения атрибута «target» тега «a»

· title

Всплывающая подсказка

— тег создания таблицы. Все прочие элементы таблицы должны быть вложенными в него. Допускается также вложение таблиц одна в другую, т. е. содержимым ячейки может быть другая таблица. Закрывающий тег обязателен.

· align

Выравнивание таблицы относительно документа. Возможные значения: center, left, right

· background

Строка, определяющая рисунок для заднего фона

· bgcolor

Определяет задний фон таблицы

· border

Толщина рамки в пикселях. Если атрибут не указан, то таблица выводится без видимой рамки

· bordercolor

Цвет рамки

· cellspacing

Задает расстояние между ячейками таблицы

· cellpadding

Задает расстояние между содержимым ячейки и ее рамкой

· title

Всплывающая подсказка

· width

Ширина таблицы в процентах или пикселях

3.1

определяет строку в таблице

· align

Выравнивает текст в ячейке

o left — по левому краю

o rigth — по правому краю

o center — по центру

· valign

Выравнивает текст в ячейке по вертикали

o top — по верхнему краю

o middle — по центру

o bottom — по нижнему краю

3.2

определяет заголовок для таблицы TABLE. Элемент CAPTION может располагаться только непосредственно после начального тега TABLE. Элемент TABLE может включать только один элемент CAPTION. Закрывающий тег обязателен.

Теги логического и физического форматирования текста:

1. Тег создает жирный текст. Закрывающий тег обязателен.

2. Тег создает наклонный текст. Закрывающий тег обязателен.

3. Тег указывает на то, что текст должен быть подчеркнут. Закрывающий тег обязателен.

4. Тег

(BReak line) вставляет перевод строки. Не требует закрывающего тега.

5. Тег (NO BReak line) запрещает перевод строки. Бывают случаи, когда возникает надобность в операции противоположного назначения — запретить перевод строки. Текст, заключенный между тэгами и, будет гарантированно располагаться в одной строке без переноса на другую. Закрывающий парный тег обязателен.

6. Тег

7. Элемент !— определяет комментарий, невидимый при просмотре страницы. Между двумя тегами находится ваш текст. Часто бывает необходим при использовании новых тегов, не поддерживаемых в старых браузерах. В этом случае новые теги, обрамленных комментариями не будут отображаться в старых браузерах как непонятный текст. Кроме того, позволяет вносить заметки в код, облегчая его последующую модификацию.

8. Тег

и обязательный парный ему

Тег

предназначен для горизонтального выравнивания ВСЕХ элементов посередине окна браузера. CENTER это тег уровня блока, поэтому им можно центрировать, например, таблицы, тексты.

9. Тег

добавляет в HTML документ горизонтальную линию. Перед и после линии помещается пустая строка. Закрывающий тег

· size

Устанавливает высоту (толщину) линии

· width

Устанавливает ширину линии в пикселях или процентах

· noshade

Создает линию без тени

· color

Задает линии определенный цвет

10. Тег

(Unordered List) служит для создания ненумерованного списка. Допускается вложение ненумерованного списка в списки другого вида. Требуется закрывающий тег.

· type

Определяет тип маркера (см. таблицу 3)


disc	Закрашенный круг. По умолчанию
circle	Незакрашенный круг
square	Квадрат

Таблица 3 — Значения атрибута «type» тега «UL»

· title

Всплывающая подсказка

5.1 Тег

(List Item) служит для обозначения элемента (строки) списка. Используется в нумерованных (OL) и ненумерованных (UL) списках.

11. Тег

создает новый параграф. Два или более тега

идущих подряд, заменяются одним. Закрывающий тег необязателен.

· align

· Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center.


left	выравнивание по левому краю. По умолчанию
right	выравнивание по правому краю
center	выравнивание по центру
justify	выравнивание по ширине

Таблица 4 — Значения атрибута «align» тега «P»

· title

Всплывающая подсказка

12. Теги

13. Тег служит для создания заголовка. Всего существует 6 видов заголовков — от H1 до H6. Тегу H1 соответствует самый большой заголовок, тегу H6 — самый маленький. Закрывающий тег требуется

14. Атрибуты:

· Align

· Выравнивает заголовок в соответствии с возможными значениями (см. таблицу 5).


center	По центру
lleft	По левому краю
right	По правому краю

Таблица 5 — Значения атрибута «align» тега «Hx»

· title

Всплывающая подсказка

Пункт 2.2.2 Язык разметки CSS

Cascading Style Sheets (Таблицы Каскадных Стилей) — это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб-страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов.

Язык CSS является языком высокого уровня и использует стандартную терминологию, принятую в электронной полиграфии.

Одним из фундаментальных свойств CSS является каскадирование.

1. Селекторы (Selectors):

Синтаксис: селектор {свойства}

Любой элемент HTML — это возможный CSS селектор. Свойства селектора определяют стиль элемента, для которого он определен.

2. Классовые селекторы (Class Selectors): селектор. класс {свойства}

CLASS — атрибут элемента в HTML, определяющий его класс. В CSS можно описать собственные стили для различных классов одних и тех же элементов.

Классы могут так же быть описаны без явного привязывания их к определенным элементам.

Синтаксис: .класс {свойства}

3. ID селекторы (ID Selectors):

Синтаксис: #id {свойства}

ID — индивидуально именованный стиль. C его помощью можно создавать стилистические исключения среди элементов одного класса.

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

На сайте использовалась связанная таблица стилей:

В ссылке указан относительный путь, он означает, что файл стилей лежит по адресу http://www.dvgu.ru/info/sport/er/ site.css.

Кроме применения языка для непосредственного задания цвета шрифтам и границам таблиц, css применялся для придания объектам динамичности, т. е. реакции на действия пользователя.

Динамичность обеспечивалась средствами псевдо-классов.

Для этого элементу «а» (бесклассовому) были назначены псевдо-классы «link, active, hover, visited» (обычная ссылка, активная ссылка, ссылка при наведенном курсоре и посещенная ссылка соответственно).

В соответствии с выбранной цветовой схемой ссылками были даны желтый и синий цвета (см. таблицу 6)


Псевдо-класс	Код	Цвет
	a:link (ссылка)	{color:#fed176; font-family: Arial New; font-weight:bold; text-decoration: none;}


Link
	a:visited (посещенная ссылка)	{color: #fed176; font-family: Arial New; text-decoration: none; font-weight:bold;}


Link
	a:hover (ссылка при наведенном курсоре)	{color: #090C76; font-family: Arial New; font-weight:bold; text-decoration: none;}


Link
	a:active (активная ссылка)	{color: #fed176; font-family: Arial New; font-weight:bold; text-decoration: none;}


Link

Таблица 6 — Псевдо-классы бесклассового элемента а: код и соответствующий цвет в системе RGB

Для стабильной работы псевдо-классов ссылок во всех известных браузерах использовался метод расположения LoVe-HAte или LVHA: Link, Visited, Hover, Active. Расположение описания стилей псевдо-классов в другом порядке приводит к различному виду сайта в разных браузерах.

Кроме того, с помощью псевдо-классов были анимированы маркеры списка в меню (см. рисунок 2)

цветовой сайт тег дизайн Рисунок 2 — Боковое меню информационного ресурса. Реакция пункта меню «Центр по профилактике наркомании и деструктивных воздействий» на наведение курсором

Пункт 2.2.3 Java-scripts

На сайте использованы Java-Scripts, реализующие выбор случайной фотографии и реакцию кнопок меню на действия пользователя (смена фона). Поскольку данные скрипты используются на каждой из страниц, они вынесены в отдельный документ script. js, ссылка на который присутствует в заголовочной области каждого HTML-документа:

type="text/javascript" >

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

Вызов функции

1. Выбор случайной фотографии реализован с помощью выбора картинки из массива имеющихся с помощью функции: takepic ().

Вызов этой функции задает массивы Image[] и Desc[] (от description — описание) и заполняет их значениями: Image[] относительными ссылками на фотографии, Desc[] - описанием фотографий. Затем генерируется случайный номер

var a=Math.round (Math.random ()*(Image.length-1))

Максимальный номер определяется исходя из длины массива Image[]. Далее с помощью document. write () соответствующие значения переменных вставляются в короткий текст, оформленный по правилам HTML и после этого помещаются на страницу в месте вызова функции tacepic () (см. Рисунок 3).

Рисунок 3 - Случайная картинка. Результат выполнения takepic ().

2. Реакция кнопок меню на действия пользователя описана в функции chbg (t, f).

Функция имеет два параметра: t и f: t сообщает функции, из какого документа эта функция была вызвана (текущий документ, значение this), а f сообщает, находится ли курсор над кнопкой (f==1) или нет (f имеет другое значение).

Если f имеет значение «1», то функция присваивает вызвавшему ее объекту документа фон-картинку «tblback2.gif», в противном случае «tblback.gif».

Верхнее меню меняет цвет кнопки при наведении на нее курсора, а ссылка подсвечивается (см. рисунок 4)

Рисунок 4 — Вид верхнего меню сайта

Иногда Java-scripts отключают в целях безопасности. Это случается крайне редко, но данный случай необходимо было предусмотреть. Если с меню никаких проблем не возникало, то с вызовом случайной картинки происходил сдвиг левой колонки, нарушая структуру сайта. Для того, чтобы подобного не происходило, после вызова функции был добавлен код:

Как видно, если скрипты отключены, то на странице отображается конкретная статичная картинка, а вид сайта никак не изменяется.

Заключение

Работа была закончена в заданные сроки. В течение недели на сайте велись оптимизационные работы по одинаковому отображению информационного ресурса в разных браузерах (см. Приложения, рисунки 1−3) и изменению стиля некоторых элементов согласно новым пожеланиям заказчика. Сайт прошел аттестацию Керсена Андрея Леонидовича (помошник директора Юридического института ДВФУ по воспитательной работе со студентами) и Соппа Игоря Владимировича (проректор по учебно воспитательной работе ДВФУ). Опубликован в сети 11 марта 2010 года.

Приложения

Рисунок 1 — Вид главной страницы информационного ресурса в интернет-браузере «Опера» версии 10

Рисунок 2 — Вид главной страницы информационного ресурса в интернет-браузере «Internet Explorer 8»

Рисунок 3 — Вид главной страницы информационного ресурса в интернет-браузере «Google Chrome» версии 5

определяет отдельную ячейку в таблице.

· height

Указывает высоту элемента в процентах или пикселях

· align

Выравнивает текст в ячейке

o left — по левому краю (по умолчанию)

o rigth — по правому краю

o center — по центру

· valign

Выравнивает текст в ячейке по вертикали

o top — по верхнему краю

o middle — по центру

o bottom — по нижнему краю

· colspan

Указывает кол-во столбцов которое объединено в одной ячейке (по умолчанию=1)

· rowspan

Указывает кол-во строк которое объединено в одной ячейке (по умолчанию=1)

· title

Всплывающая подсказка

3.3 Тег

Показать весь текст

Заполнить форму текущей работой