2 Разработка информационно-справочного ресурса

Разработка информационного портала является сложной задачей, требующая поэтапной разработки в соответствия с целями и задачами. Она включает в себя следующие этапы: проектирование, создание дизайн макета и реализация.

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

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

Для создаваемого ресурса была выбрана следующая структура

Шапка
Навигация	Основной текст
Дополнительная навигация
Низ сайта

Рисунок 1 - Структура информационно-справочного ресурса

Рисунок 2 - Структура навигации

3. РЕАЛИЗАЦИЯ ИНФОРМАЦИОННО-СПРАВОЧНОГО РЕСУРСА

3.1 Использования языка разметки HTML при создании информационно-справочного ресурса

Язык HTML (Hyper Text Markup Language – язык разметки гипертекста) используется для создания разметки гипертекста, которая дает браузеру необходимые инструкции об отображении элементов страницы.

Код разметки в HTML состоит из так называемых «тэгов». Тэги предоставляют информацию браузерам о форматировании и разметке страницы.

Структура всех страниц разрабатываемого ресурса создана с помощью таблицы, описываемой тэгами <table>, <tr> и <td>.

Ниже представлен фрагмент HTML-кода с использованием этих тэгов.

<table width=100%>

<tr>

<td colspan='2' class='topic'>

Текст в шапке сайта

</td>

</tr>

<tr>

<td>

Главное меню сайта

</td>

<td rowspan='2' width=75>

<div class='monitor'>

<div class='monitor_content_caption'>

Заголовок основного текста

</div>

<divclass='monitor_content'>

Основное содержание

</div>

</div>

</tr>

<tr>

<tdwidth=20% >

Ссылки на страницы студентов

</td>

</tr>

<tr>

Текст в подвале сайта

</tr>

</table>

Результат данного кода представлен на рисунке 3.

Рисунок 3 – Макет сайта (структура сайта, описанная таблицей)

2. Применение каскадных таблиц стилей css при оформлении информационно-справочного ресурса

Cascading Style Sheet (каскадные таблицы стилей) используются для описания внешнего вида веб-страницы, написанного языком разметки, таким как HTML, XMLили XHTML.

CSS стили хранятся в отдельном документе, что дает возможность применять один и тот же стиль к множеству веб-страниц.

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

a, a:visited{

text-decoration: none;

color: black;

}

.list_of_links{

margin-top: 20px;

margin-bottom: 15px;

padding: 0px 0px 2px 0px;

-webkit-box-shadow: inset 0 0 3px white, 0 0px 2px rgba(0,0,0,0.5);

background: white;

-webkit-border-radius: 4px 4px 0 0;

}

.link{

position: relative;

padding: 4px;

margin: 7px;

background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#e5e5e5));

display: block;

-webkit-transition: background 0.4s ease;

-webkit-box-shadow: inset 0 0 3px white, 0 0px 2px rgba(0,0,0,0.5);

}

.link_list_caption{

width: 100%;

text-align: center;

vertical-align: middle;

font-weight: bold;

padding: 7px 0 5px 0;

display: block;

margin-bottom: 7px;

background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#e5e5e5));

-webkit-border-radius: 4px 4px 0 0;

}

.link:hover{

background: -webkit-gradient(linear, left top, left bottom, from(#adadad), to(#999999));

cursor: pointer;

color: white;

}

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

Рисунок 4 - Главное меню сайта

Для кнопок управления слайдером были применены следующие стили:

.but

{

text-align: center;

font-weight: bold;

color: white;

padding: 5px 10px 5px 10px;

position: absolute;

z-index: 1;

top: 50%;

background: rgba(60,60,60,0.3);

display: inline-block;

-webkit-border-radius: 20px;

-webkit-transition: background .5s ease, left .6s ease;

-webkit-user-select: none;

}

.but:hover

{

background: rgba(60,60,60,0.6);

cursor: pointer;

}

.leftbut

{

left: 10px;

visibility: hidden;

}

.rightbut

{ left: 285px; }

В результате получены кнопки, изменяющие свою прозрачность при наведении указатели мыши, представленные на рисунке 5.

Рисунок 5 - Кнопки управления слайдером изображений

Для расписания занятий были созданы вложенные тэги timetable, learnday,dayname и daytimetable, для которых был прописан следующий CSS-код

.timetable{

display: block;

}

.dayname

{

color: black;

position: relative;

margin-bottom: 7px;

padding: 5px;

width: 140px;

display: block;

text-align: center;

font-weight: bold;

background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#e5e5e5));

border: 1px solid #DDD;

cursor: hand;

text-indent: 0px;

}

.dayname:hover

{

color: white;

background: -webkit-gradient(linear, left top, left bottom, from(#adadad), to(#999999));

}

.dayname:hover+.daytimetable

{

left: 180px;

opacity: 1;

}

.daytimetable

{

text-align: center;

text-indent: 0;

position: absolute;

z-index: 5;

top: 0px;

left: 240px;

width: 300px;

opacity: 0;

-webkit-transition: left .6s ease, opacity .3s ease;

display: block;

}

.everyweek

{

border: 1px solid #DDD;

background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#e5e5e5));

padding: 5px 0;

margin-bottom: 7px;

}

.oddweek

{

margin-bottom: 0;

border-bottom: dashed 1px black;

}

Данный код задает относительное позиционирование и полную прозрачность для блоков с расписанием на все дни недели, а при наведении курсора на блок с классом «dayname» устанавливает полную непрозрачность и изменяет его положение. Для плавного изменения атрибутов тэга использован селектор-webkit-transition, задающий изменение позиции элемента в течение 300 миллисекунд. Класс .oddweek устанавливает верхнюю пунктирную границу для ячеек, описывающих занятия по нечетным неделям.

Рисунок 6 - Расписание занятий

3.3 Применение JavaScript для создания динамически изменяемого содержимого сайта

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

Язык JavaScript является системно-независимым, и совместим между всеми типами компьютеров, работающими в Интернет. Программы на языке JavaScript являются расширением состава команд HTML.

На данном справочном ресурсе JavaScript использовался для создания слайдера фотографий студента.

function scroll(dir) {

elem = document.getElementById("scrollbox");

buttons = document.getElementsByClassName("but");

x = elem.scrollLeft;

if (dir == 1) {

if ((x - oldX)<interval) {

if (!transvis)

setParam(buttons, "hidden", "hidden", elem, opacityButton, true);

if ((x + speed - oldX) > interval)

elem.scrollLeft = x + (interval-(x-oldX));

else

elem.scrollLeft = x + speed;

window.setTimeout("scroll(1)", 12);

}

else {

if ((x + interval) >= (elem.scrollWidth))

setParam(buttons, "visible", "hidden", elem, 1, false);

else

setParam(buttons, "visible", "visible", elem, 1, false);

oldX = x;

}

}

else {

if (oldX != 0) {

if ((oldX - x)<interval) {

if (!transvis)

setParam(buttons, "hidden", "hidden", elem, opacityButton, true);

if ((x - speed) < (oldX - interval))

elem.scrollLeft = x - (interval-(oldX-x));

else

elem.scrollLeft = x - speed;

window.setTimeout("scroll(0)", 12);

}

else {

if ((x - interval) < 0)

setParam(buttons, "hidden", "visible", elem, 1, false);

else

setParam(buttons, "visible", "visible", elem, 1, false);

oldX = x;

}

}}}

Функция Scroll осуществляет перемещение изображений внутри контейнера slider.