Разработка информационного ресурса "Вуз - территория здорового образа жизни"
Построение сайта на заказ Дальневосточного государственного университета, его дизайн. Выбор цветовой схемы для сайта. Язык разметки CSS. Придание материалу стилистики сайта. Стили и классы. Стандартные теги логического и физического форматирования текста.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | курсовая работа |
| Язык | русский |
| Дата добавления | 09.06.2011 |
| Размер файла | 2,4 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Размещено на http://www.allbest.ru/
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ
ДАЛЬНЕВОСТОЧНЫЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
Институт физики и информационных технологий
Кафедра электроники
Факультет информационных технологий
Разработка информационного ресурса
«Вуз - территория здорового образа жизни»
Курсовая работа
Студента группы 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. Тег <HEAD> и парный ему </HEAD> Тег <HEAD> определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.
2. Тег <BODY> определяет видимую часть документа. В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты).Тег имеет ряд необязательных атрибутов. Рекомендуется вместо нежелательных атрибутов использовать каскадные таблицы стилей. Начальный и конечный теги необязательны
Атрибуты:
· Bgcolor
· Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет, либо используя константы цвета, например для желтого цвета, используемой на данной странице <body bgcolor= "yellow">
· background
Указывает на url-адрес изображения - фона документа
· text
Нежелательный. Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет, либо используя константы цвета, например для зеленого цвета, используемой на данной странице <body text= "green">
· link
Нежелательный. Устанавливает цвет гиперссылок, используя значение цвета в виде
RRGGBB - пример: 00FF00 - зеленый цвет, либо используя константы цвета, например для красного цвета, используемой на данной странице <body link= "red">
· bgproperties=fixed
Фоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии PageDown, а фон - нет.
3. <img> - служит для внедрения графики в страницу.
Имеет атрибуты:
· src
Обязательный атрибут, указывающий URL рисунка
· align
Выравнивает изображение к одной из сторон документа (см. таблицу 1)
|
left |
Выравнивание по левому краю |
|
|
right |
Выравнивание по правому краю |
|
|
center |
Выравнивание по центру |
|
|
bottom |
Выравнивание по нижнему краю |
|
|
top |
Выравнивание по верхнему краю |
|
|
middle |
Выравнивание посередине |
Таблица 1 - Значения атрибута "align" тега "img"
· alt
Выводит текст к картинке. Полезно, если браузер не отображает графику на странице
· border
Устанавливает толщину рамки вокруг изображения в пикселях. По умолчанию рамка не используется. При использовании изображения в качестве гиперссылки рекомендуется установить BORDER=0, чтобы подавить цветовую окантовку, которая появится вокруг изображения
· height
Высота картинки в пикселях или процентах. Всегда желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером
· hspace
Определяет размер свободного места в пикселях слева и справа от изображения, улучшает внешний вид страницы, отделяя изображение от текста
· vspace
Определяет размер свободного места в пикселях сверху и снизу от изображения, улучшает внешний вид страницы, отделяя изображение от текста
· width
Ширина картинки в пикселях или процентах. Всегда желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером
4. <a> - служит для внедрения графики в страницу.
· name
Задает имя элемента. Имя используется, например, для создания ссылок между фреймами
· href
Задает URL ресурса, на который должен перейти пользователь, щелкнув по ссылке. Атрибут может указывать как на внешний документ, так и на элемент внутри данного документа.
Для создания гиперссылки вызова почтовой программы для написания письма используется <a href="mailto:your@email">.
· target
Строка, определяющая или получающая одно из следующих значений
|
name |
Имя ссылки или фрейма |
|
|
_blank |
Загружает ссылку в новое окно |
|
|
_parent |
Загружает ссылку в родительском окне |
|
|
_search |
Загружает ссылку в панель поиска браузера. Доступно в Internet Explorer 5 и выше |
|
|
_self |
По умолчанию. Загружает ссылку в это же окно, где был произведен клик по ссылке |
Таблица 2 - Значения атрибута "target" тега "a"
· title
Всплывающая подсказка
5. <TABLE> - тег создания таблицы. Все прочие элементы таблицы должны быть вложенными в него. Допускается также вложение таблиц одна в другую, т.е. содержимым ячейки может быть другая таблица. Закрывающий тег обязателен.
· align
Выравнивание таблицы относительно документа. Возможные значения: center, left, right
· background
Строка, определяющая рисунок для заднего фона
· bgcolor
Определяет задний фон таблицы
· border
Толщина рамки в пикселях. Если атрибут не указан, то таблица выводится без видимой рамки
· bordercolor
Цвет рамки
· cellspacing
Задает расстояние между ячейками таблицы
· cellpadding
Задает расстояние между содержимым ячейки и ее рамкой
· title
Всплывающая подсказка
· width
Ширина таблицы в процентах или пикселях
3.1 <TR> определяет строку в таблице
· align
Выравнивает текст в ячейке
o left - по левому краю
o rigth - по правому краю
o center - по центру
· valign
Выравнивает текст в ячейке по вертикали
o top - по верхнему краю
o middle - по центру
o bottom - по нижнему краю
3.2 <TD> определяет отдельную ячейку в таблице.
· height
Указывает высоту элемента в процентах или пикселях
· align
Выравнивает текст в ячейке
o left - по левому краю (по умолчанию)
o rigth - по правому краю
o center - по центру
· valign
Выравнивает текст в ячейке по вертикали
o top - по верхнему краю
o middle - по центру
o bottom - по нижнему краю
· colspan
Указывает кол-во столбцов которое объединено в одной ячейке (по умолчанию=1)
· rowspan
Указывает кол-во строк которое объединено в одной ячейке (по умолчанию=1)
· title
Всплывающая подсказка
3.3 Тег <CAPTION> определяет заголовок для таблицы TABLE. Элемент CAPTION может располагаться только непосредственно после начального тега TABLE. Элемент TABLE может включать только один элемент CAPTION. Закрывающий тег обязателен.
Теги логического и физического форматирования текста:
1. Тег <B> создает жирный текст. Закрывающий тег </B> обязателен.
2. Тег <I> создает наклонный текст. Закрывающий тег </I> обязателен.
3. Тег <U> указывает на то, что текст должен быть подчеркнут. Закрывающий тег </U> обязателен.
4. Тег <BR>(BReak line) вставляет перевод строки. Не требует закрывающего тега.
5. Тег <NOBR> (NO BReak line) запрещает перевод строки. Бывают случаи, когда возникает надобность в операции противоположного назначения - запретить перевод строки. Текст, заключенный между тэгами <NOBR> и </NOBR>, будет гарантированно располагаться в одной строке без переноса на другую. Закрывающий парный тег обязателен.
6. Тег <!-- ...-->
7. Элемент !-- определяет комментарий, невидимый при просмотре страницы. Между двумя тегами находится ваш текст. Часто бывает необходим при использовании новых тегов, не поддерживаемых в старых браузерах. В этом случае новые теги, обрамленных комментариями не будут отображаться в старых браузерах как непонятный текст. Кроме того, позволяет вносить заметки в код, облегчая его последующую модификацию.
8. Тег <CENTER> и обязательный парный ему </CENTER>
Тег <CENTER> предназначен для горизонтального выравнивания ВСЕХ элементов посередине окна браузера. CENTER это тег уровня блока, поэтому им можно центрировать, например, таблицы, тексты.
9. Тег <HR> добавляет в HTML документ горизонтальную линию. Перед и после линии помещается пустая строка. Закрывающий тег <HR> рекомендуется ставить, но обязательным он не является.
· size
Устанавливает высоту(толщину) линии
· width
Устанавливает ширину линии в пикселях или процентах
· noshade
Создает линию без тени
· color
Задает линии определенный цвет
10. Тег <UL>(Unordered List) служит для создания ненумерованного списка. Допускается вложение ненумерованного списка в списки другого вида. Требуется закрывающий тег.
· type
Определяет тип маркера (см. таблицу 3)
|
disc |
Закрашенный круг. По умолчанию |
||
|
circle |
Незакрашенный круг |
||
|
square |
Квадрат |
Таблица 3 - Значения атрибута "type" тега “UL”
· title
Всплывающая подсказка
5.1 Тег <LI>(List Item) служит для обозначения элемента (строки) списка. Используется в нумерованных (OL) и ненумерованных (UL) списках.
11. Тег <P> создает новый параграф. Два или более тега <P>, идущих подряд, заменяются одним. Закрывающий тег необязателен.
· align
· Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center.
|
left |
выравнивание по левому краю. По умолчанию |
|
|
right |
выравнивание по правому краю |
|
|
center |
выравнивание по центру |
|
|
justify |
выравнивание по ширине |
Таблица 4 - Значения атрибута "align" тега "P"
· title
Всплывающая подсказка
12. Теги <H1>, <H2>, <H3>, <H4>, <H5>, <H6>
13. Тег <Hx> служит для создания заголовка. Всего существует 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 его помощью можно создавать стилистические исключения среди элементов одного класса.
Связанные таблицы стилей используются для придания нескольким документам одного стиля и хранятся в отдельном файле. Это очень удобно , когда нужно выдержать сайт в одном стиле, не утруждая себя составлением таблиц для каждого документа.
На сайте использовалась связанная таблица стилей:
<link type="text/css" rel="StyleSheet" href="site.css" />
В ссылке указан относительный путь, он означает, что файл стилей лежит по адресу 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;} |
Размещено на http://www.allbest.ru/
Размещено на http://www.allbest.ru/
|
Link |
a:visited (посещенная ссылка) |
{color: #fed176; font-family: Arial New; text-decoration: none; font-weight:bold;} |
Размещено на http://www.allbest.ru/
Размещено на http://www.allbest.ru/
|
Link |
a:hover (ссылка при наведенном курсоре) |
{color: #090C76; font-family: Arial New; font-weight:bold; text-decoration: none;} |
Размещено на http://www.allbest.ru/
Размещено на http://www.allbest.ru/
|
Link |
a:active (активная ссылка) |
{color: #fed176; font-family: Arial New; font-weight:bold; text-decoration: none;} |
Размещено на http://www.allbest.ru/
Размещено на http://www.allbest.ru/
|
Link |
Таблица 6 - Псевдо-классы бесклассового элемента а: код и соответствующий цвет в системе RGB
Для стабильной работы псевдо-классов ссылок во всех известных браузерах использовался метод расположения LoVe-HAte или LVHA: Link, Visited, Hover, Active. Расположение описания стилей псевдо-классов в другом порядке приводит к различному виду сайта в разных браузерах.
Кроме того, с помощью псевдо-классов были анимированы маркеры списка в меню (см. рисунок 2)
цветовой сайт тег дизайн
Рисунок 2 - Боковое меню информационного ресурса. Реакция пункта меню "Центр по профилактике наркомании и деструктивных воздействий" на наведение курсором
Пункт 2.2.3 Java-scripts
На сайте использованы Java-Scripts, реализующие выбор случайной фотографии и реакцию кнопок меню на действия пользователя (смена фона). Поскольку данные скрипты используются на каждой из страниц, они вынесены в отдельный документ script.js, ссылка на который присутствует в заголовочной области каждого HTML-документа:
<script language="JavaScript" src="script.js"
type="text/javascript"></script>
При необходимости вызывать функцию в конкретном месте используется следующий код:
<script language="JavaScript">
Вызов функции
</script>
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 отключают в целях безопасности. Это случается крайне редко, но данный случай необходимо было предусмотреть. Если с меню никаких проблем не возникало, то с вызовом случайной картинки происходил сдвиг левой колонки, нарушая структуру сайта. Для того, чтобы подобного не происходило, после вызова функции был добавлен код:
<NOSCRIPT>
<img src="spics/ifit00.jpg" width = "200" height = "150">
Корпус института Физики и Информационных Технологий
</NOSCRIPT>
Как видно, если скрипты отключены, то на странице отображается конкретная статичная картинка, а вид сайта никак не изменяется.
Заключение
Работа была закончена в заданные сроки. В течение недели на сайте велись оптимизационные работы по одинаковому отображению информационного ресурса в разных браузерах (см. Приложения, рисунки 1-3) и изменению стиля некоторых элементов согласно новым пожеланиям заказчика. Сайт прошел аттестацию Керсена Андрея Леонидовича (помошник директора Юридического института ДВФУ по воспитательной работе со студентами) и Соппа Игоря Владимировича (проректор по учебно воспитательной работе ДВФУ). Опубликован в сети 11 марта 2010 года.
Приложения
Рисунок 1 - Вид главной страницы информационного ресурса в интернет-браузере "Опера" версии 10
Рисунок 2 - Вид главной страницы информационного ресурса в интернет-браузере "Internet Explorer 8”
Рисунок 3 - Вид главной страницы информационного ресурса в интернет-браузере "Google Chrome" версии 5
Размещено на Allbest.ru
Подобные документы
Понятие сайта как Интернет-ресурса. Специфические особенности сайтов учебных заведений. Видимость сайта в поисковых выдачах. Анализ сайта учебного заведения на примере сайта Тираспольского межрегионального университета. Составляющие (рубрики) сайта.
курсовая работа [403,8 K], добавлен 27.04.2013Выбор инструментальных и программных средств для создания сайта. Структура программного продукта. Создание сайта при помощи программы WordPress. Тестирование разработанной программы. Разработка структуры и дизайна сайта. Наполнение сайта контентом.
курсовая работа [1,0 M], добавлен 09.01.2014Современные Интернет-технологии, Web-дизайн и браузеры. Язык разметки гипертекстовых страниц HTML. Представление текста и графики на Web-страницах. Правила и этапы создания сайта. Влияние дисплеев на Web-дизайн. Сравнительный анализ HTML-редакторов.
дипломная работа [3,3 M], добавлен 21.06.2013Выбор сред разработки для реализации сайта. Основная концепция и содержание веб-сайта. Роль дизайна сайта в его создании и определение основных требований к его содержанию и внешнему виду. Особенности разработки удобного и красивого интерфейса сайта.
курсовая работа [686,4 K], добавлен 13.06.2022Организационно-производственная структура университета. Обоснование проектных решений по созданию сайта. Проектирование сайта и базы данных "Центр содействия трудоустройству выпускников". Методика эксплуатации сайта, добавление и изменение вакансий.
курсовая работа [1,9 M], добавлен 24.02.2013Разработка проекта веб-сайта для медицинского центра, предоставляющего платные услуги. Анализ целевой аудитории создаваемого сайта как информационного ресурса. Навигация сайта, описание профилей пользователей и алгоритмов их взаимодействия с системой.
курсовая работа [1,9 M], добавлен 13.12.2014Проектирование web-сайта. Пользовательские персонажи, детальная концепция сайта. Разработка скелетной схемы страниц, информационной архитектуры. Создание прототипа web-сайта. Выбор среды разработки. CMS системы и их анализ. Стадии проектирования сайта.
курсовая работа [346,7 K], добавлен 18.09.2016Язык разметки гипертекстовых страниц HTML. Обеспечение доступности Web-страницы, представление текста и графики. Основные правила и этапы создания сайта, выбор структуры страницы. Оценка экономической целесообразности использования HTML-редакторов.
дипломная работа [86,7 K], добавлен 25.03.2013Сбор и обработка информации, касающейся военной техники войск противовоздушной и противоракетной обороны. Информационное содержание, дизайн и общий объем сайта. Цвет в системе графического имиджа. Тестирование сайта и основные возможности хостинга.
курсовая работа [32,9 K], добавлен 30.05.2013Рассмотрение основных этапов создания сайта. Использование вайрфреймов как документации по проекту. Использование мокапа и структура навигации сайта. Правильный выбор цветов для проекта. Использование модульной сетки и разработка дизайна сайта.
презентация [2,8 M], добавлен 01.09.2019
