2 Технический проект

2.1 Выбор инструментальных средств разработки

Для создания Web-страниц программного продукта использовалась программа Adobe Dreamweaver CS3, интерфейс которой представлен в приложении А, потому что в ней есть такие возможности как:

• подсветка кода;

• автоподстановка кода;

• режим кода и режим дизайна;

• проверка кода;

• панель свойств и панель вставки изображений.

Для создания Web-приложения «ТС «ЭЛЕКТРО» использовался объектно-ориентированный скриптовый язык программирования JavaScript, так как:

• javascript не требуется компилировать, он подключается к HTML-странице и работает «как есть»;

• javascript - скриптовый язык, предназначенный для создания интерактивных веб-страниц;

2.2 Описание архитектуры разрабатываемого продукта

Открытие сайта осуществляется со страницы Index, которая является главной. Затем следует меню из пяти пунктов: «Главная», «Услуги», «Документы», «Контакты», «Обратная связь».

Web-приложение «ТС «ЭЛЕКТРО» позволяет просмотреть общую информацию о компании, о видах услуг, которые эта компания предоставляет и их стоимости, о сотрудниках и их руководстве.

Иерархическая структура web - сайта приведена на рис. 2.

Index.html

Dokumenti.

html

Kontakti.html

Uslugi.html

Obratnaya_svyaz.html

Рис. 2 Иерархическая структура web - сайта

Ниже представлено описание модулей web-приложения «ТС «ЭЛЕКТРО»:

Index.html – модуль, содержащий общую информацию о компании «ТС «ЭЛЕКТРО»;

Uslugi.html – модуль, содержащий информацию о видах услуг, которые предоставляет компания «ООО Группа компаний DM»;

Dokumenti.html – модуль, содержащий информацию о нормативно справочной информации предприятия;

Kontakti.html – модуль, содержащий информацию о сотрудниках компании и их руководстве, об электронном адресе фирмы, номере телефона;

Obratnaya_svyaz.html – модуль, содержащий форму обратной связи с пользователем;

Komp_tehnik.html – модуль, содержащий информацию о компьютерной технике, продаваемой предприятием;

Ofis_tehnik.html – модуль, содержащий информацию об офисной технике, продаваемой предприятием;

Rashod_material.html – модуль, содержащий информацию о расходных материалах, продаваемой предприятием;

Mebel.html - модуль, содержащий информацию о мебели, продаваемой предприятием;

Rem_uslugi.html - модуль, содержащий информацию об услугах по ремонту офисной технике;

Prochie.html - модуль, содержащий информацию о прочем оборудовании, продаваемом предприятием.

2.3 Разработка внутренней структуры

При разработке web-приложения были использованы объекты, представленные в таблице 5.

Таблица 5-Основные стили компонентов web – приложения

Элементы стиля	Атрибуты	Назначение
body	{background-image: url(1123.jpg);}	Фоновое изображение
#fon	{background-image: url(Untitled-77.jpg); height: 235px; width: 1066px; margin: 0 auto;}	Редактирование изображения
.стиль2	{font-family: Tahoma; font-size: large; color: #FF7DEC; font-weight: bold;}	Форматирование текста заголовка страницы
.header_main	{font-family: Tahoma; font-size: 14px; color: #605F89; line-height: 23px;}	Форматирование текста подзаголовка страницы
.header_main .стиль1	{font-family: Tahoma; color: #FFFFFF; font-size: medium;}	Форматирование текста
.menu .menu_lnk	{font-family: Tahoma; font-size: 14px; color: #FF5EE7; font-weight: bolder; text-decoration: none;}	Форматирование текста ссылок меню
.menu .menu_lnk:hover	{font-family: Tahoma; font-size: 14px; color: #33CCFF; text-decoration: none;}	Форматирование текста ссылок меню
#col #col-in .header_main .стиль4	{font-family: Tahoma; color: #FF89ED; font-size: 15px;}	Форматирование текста меню
.text_main .стиль2	{font-family: Tahoma; color: #FF6CE9; font-size: large;}	Форматирование текста
#font	{background: #FFFFFF url(images/img02.gif) repeat-x; background-repeat: repeat-x; width: 819px; margin: 0 auto;}	Атрибуты изображения
.text	{font-family: Tahoma; font-size: 13px; color: #605F89; line-height: 23px;}	Форматирование текста
.text_main .text	{font-family: Tahoma; font-size: 14px; line-height: 24px;}	Форматирование текста
.menu .menu2_link lnk	{font-family: Tahoma; font-size: 13px; color: #FFFFFF; font-weight: bold; text-decoration: none; vertical-align: top;}	Форматирование текста ссылок верхнего меню
.menu .menu2_link:hover	{font-family: Tahoma; font-size: 14px; color: #33CCFF; text-decoration: underline;}	Форматирование текста ссылок нижнего меню
.list_of_link__green .	{font-family: Tahoma; font-size: 11px; line-height: 17px; list-style-image: url(list_im_5.gif); color: #49948A;}	Форматирование текста списка
.list_of_link__main li	{font-family: Tahoma; font-size: 13px; color: #605F89; line-height: 21px;}	Форматирование текста
.text_main .list_of_link__pink	{font-family: Tahoma; font-size: 14px; color: #605F89; list-style-image: url(arrow.gif); line-height: 24px;}	Форматирование текста списка
.text_main .list_of_link__buterflay	{font-family: Tahoma; font-size: 14px; color: #605F89; list-style-image: url(77.gif);}	Форматирование текста списка
#col #col-in #category a	{font-size: medium; font-family: Verdana, Arial, Helvetica, sans-serif; color: #605F89; line-height: 24px;}	Форматирование текста ссылок бокового меню
.text_tab	{font-family: Tahoma; font-size: 14px; font-weight: normal; color: #605F89; line-height: 20px;}	Форматирование текста
.стиль7	{color: #FF6CE9; font-weight: bold; font-size: medium; }	Форматирование текста
.header_main .text_tab	{font-family: Tahoma; font-size: 14px; line-height: 23px; }	Форматирование текста таблицы

Скрипт процедуры увеличения изображения:

<SCRIPT type=text/javascript

src="jquery.js" ></SCRIPT>

<SCRIPT language=JavaScript>

function update_sos() {$(".sos").click(function () {

$.post("/scripts/sos.html","id="+$(this).attr("href").slice(21));

$(this).after('<img src="/files/ok.png" width="16" height="16" alt="SOS" style="float:right;">'); $(this).remove(); return false; });}

$(document).ready(function() { $("ul.thumb li").hover(function() {$(this).css({'z-index' : '40'});

$(this).find('img').addClass("hover").stop()

.animate({marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width:

'300px', height: '199px', padding: '20px' }, 700); } , function() {

$(this).find('img').removeClass("hover").stop()

.animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0',width: '215px', height: '147px', padding: '3px' }, 700); $(this).css({'z-index' : '25'}); });

$("#list").show().mouseover(function () {$("#list1,#list2,#list3").show();});

$("#list").mouseout(function () {$("#list1,#list3").hide(); });

$("#list1,#list2,#list3").click(function () {

var img=$(this).find("img").attr("src");

var title=$(this).attr("title");

link=parseInt(img.slice(11),10);

$(this).attr("title",$("#list2").attr("title")).find("img").attr("src",$("#list2 img").

attr("src"));

var next=$("#NextLink"); var prev=$("#PrevLink"); if (links[link*2]=='') next.css("display","none"); else next.css("display","block");

if (links[link*2-1]=='') prev.css("display","none"); else prev.css("display","block");

next.attr("href",links[link*2]); prev.attr("href",links[link*2-1]);

$("#list2").attr("title",title).find("img").attr("src",img);

$.cookie("link", link, {expires: 20, path: '/', domain: 'goodfon.ru'});

return false; }); update();

$("#reRND").click(function() { $.post("/scripts/rnd_r.html",'',reRND); return false; });

if (width > 0 && height > 0) {

$("#img").attr("href","/download.html?id=10655&rash="+width+"x"+height); } });

</SCRIPT>

Скрипт отображения календаря

<script type="text/javascript">

if (!fcp)

var fcp = new Object();

if (!fcp.msg)

fcp.msg = new Object();

if (!fcp)

var fcp = new Object();

if (!fcp.msg)

fcp.msg = new Object();

fcp.week_days = ["Пн", "Вт", "Ср", "Чт", "Пн", "Сб", "Вс"];

fcp.months = ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь",

"Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"];

fcp.msg.prev_year = "предыдущий год";

fcp.msg.prev_month = "предыдущий месяц";

fcp.msg.next_month = "следующий месяц";

fcp.msg.next_year = "следующий год";

fcp.Calendar = function(element, show_clock) {

if (!element.childNodes)

throw "HTML element expected";

this.element = element;

this.selection = new Date();

this.show_clock = show_clock;

this.selected_cell = undefined;

this.generate_month();

this.render_calendar();

fcp.Calendar.prototype.set_date_time = function (date_time) {

if (date_time.constructor == Date) {

this.selection = date_time;

this.generate_month();

this.render_calendar();

} else {

throw "Date object expected (in fcp.Calendar.set_date_time)";

fcp.Calendar.prototype.next_month = function () {

var month = this.selection.getMonth();

if (month == 11) {

this.selection.setMonth(0);

this.selection.setYear(this.selection.getFullYear() + 1);

} else {