Разработка Web-сайта как компонента информационной системы организации

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

CSS2 (Cascading Style Sheets, Level 2) – самая последняя  рекомендация по каскадным таблицам  стилей, предоставляет механизмы  для улучшенной интерпретации  страниц неграфическими и не  визуальными устройствами. Усовершенствования  включают:

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

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

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

– средства управления для звукового вывода доставленной по Web информации;

– улучшенные средства навигации, такие как цифровые маркеры, которые можно добавлять в документ в целях ориентации.

1.3.1 Описание входной  и выходной информации по направлениям  проекта

 

Основная входная текстовая информация была представлена в электронном виде.

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

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

Для страницы «Нормативно-правовая база» были выполнены с помощью сканера и графического редактора соответствующие изображения.

Для страницы «Контакты» создано изображение схемы проезда с помощью графического редактора.

Были исследованы партнеры организации и созданы соответствующие ссылки на них.

Выходная информация представлена в электронном виде. Для редактирования страниц используется программа Блокнот, для просмотра – любой браузер.

Полученный Web-сайт будет размещен в сети Интернет.

2 Практическая часть

 

2.1 Организация и ведение информационной базы

 

В данном дипломном проекте была создан информационный сайт строительной фирмы ООО «КРЕПсил».

При создании сайта  весь материал тщательно подбирался и редактировался.

К особенностям оформления сайта можно отнести следующее:

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

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

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

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

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

Данный сайт будет содержать 6 страниц, в которых содержаться основные сведения об организации. На первой странице находится информация о новостях организации (рисунок 2).

 

 

Рисунок 2 – Вид страницы «Главная»

 

На  второй странице находится информация об истории организации. Ее вид представлен на рисунке 3.

 

Рисунок 3 – Страница «История организации»

 

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

 

 

Рисунок 4 – Страница «Нормативно-правовая база»

 

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

 

 

Рисунок 5 – Фрагмент страницы «Прайс-лист»

 

На пятой странице описаны адреса и телефоны партнеров. На шестой  -- телефоны руководящего состава ООО «КРЕПсил» и схема проезда к организации (рисунок 6). 

 

Рисунок 6 – Страница «Контакты»

 

 

2.2 Описание программно-технических  средств

 

Чтобы создать HTML-страницу требуется начать с  открытия редактора Блокнот из стандартных программ Microsoft Windows. Затем сохранить файл с именем index и расширением .html, поместив в него первые элементы структуры. Уже на этом этапе страницу можно просматривать браузером.

Все HTML-страницы заключаются в пару дескрипторов: <HTML> </HTML>. Начало заголовка отмечается скобкой <HEAD>, а конец - скобкой </HEAD>. Тело страницы начинается скобкой <BODY>, заканчивается - </BODY>.

Для размещения информационной части на Web-странице использовалась табличная структура. Она помогла удобно организовать данные (изображения и текст) на экране.

Таблица начинается с метки <TABLE> и заканчивается меткой </TABLE>. Метка <TABLE> может включать несколько атрибутов: ALIGN, WIDTH, CELLPADDING и т. д.

Фрагмент табличной структуры сайта представлен на рисунке 7. именно с помощью таблицы создавались все страницы. Они имеют одинаковую структуру.

 

 

Рисунок 7 – Табличная структура страницы

С помощью таблицы задавалась «шапка» страниц и меню навигации. Здесь же задается фон в виде заливки ячеек таблицы.

Основные стили сайта были заданы с помощью таблиц каскадных стилей в файле style.css. его вид представлен на рисунке 8.

 

 

Рисунок 8 – Таблица каскадных стилей.

Заголовок Global Styles определяет стиль элементов во всем документе. В документе прописаны основные стили текста, названия страниц, вид «шапки» страниц, цвет ссылки, внешние и внутренние поля документа и др.

Для задания стилей используются стандартные теги, например:

• margin-left – ширина отступа от левого края объекта;
• сolor – цвет;
• line-height – размер межстрочного интервала;
• font – изменение параметров текста и др.

 

Вставка изображений на страницы осуществлялась с помощью тега <img>.

<img src="images/0.gif>

Для того, чтобы при наведении мыши изображение меняло свой цвет, применялись события onmouseover и onMouseOut.

<img src='images/sertifikat-12.jpg' border="0" onmouseover ="this.src='images/sertifikat-1.jpg';" onMouseOut="this.src='images/sertifikat-12.jpg ' ;" />

 

2.2.1 Программно-технические  средства, необходимые для выполнения проекта

 

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

Системный блок:

• процессор Intel Core 2 Duo CPU c тактовой частотой 3.00 ГГц;
• оперативная память 2 Гбайт;
• жесткий диск объемом 320 Гбайт;

Монитор  Asus с разрешением экрана 1440*900;

Клавиатура Aquarius KB-4323

Мышь Genius

Программы:

• пакет прикладных программ Microsoft Office 2007
• графические редакторы Paint.NET, AdobePhotoshop
• текстовый редактор Блокнот
• браузеры  Internet Explorer, Mozzilla FireFox и Opera.
• Программа  просмотра PDF-документов SumatraPDF

 

2.2.2 Программно-технические  средства при эксплуатации программного  продукта

 

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

• операционная система – Windows XP
• браузер Internet Explorer, Mozzilla FireFox или Opera

Техническое оснащение можно использовать с теми же характеристиками, что и при разработке проекта.

 

 

2.3 Описание программного  продукта

 

Наименование программного продукта Информационный сайт строительной фирмы ООО «КРЕПсил»

Минимальные системные требования при эксплуатации: системный блок Pentium 3 800МГц/ 512Мб ОЗУ, сетевой адаптер 100 Мбит/с, объем свободного дискового пространства 5 Мб, разрешение экрана1024x768, платформа Windows 9x/2000/XP/2003.

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

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

 

 

2.3.1 Тестирование программного продукта

 

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

1. Единство дизайна. При оформлении сайта соблюдены все цветовые решения. Цвет и расположение фона, кнопок, текста выполнены с учетом эргономических требований.
2. Навигация. Для облегчения работы пользователя с сайтом создана удобная навигация, позволяющая переход с одной страницы на любую другую.
3. Функциональность. Добавление, редактирование и удаление информации осуществляется с помощью редактора Блокнот.
4. Работоспособность. Данный сайт содержит изображения сравнительно небольших размеров, поэтому его загрузка осуществляется быстро. При тестировании сайта в браузерах Mozilla FireFox, Internet Explorer, Opera сайт работает правильно, вся информация отображается корректно.

 

 

2.4 Возможность использования  в сетевом варианте 

 

ООО «КРЕПсил» заказало данный сайт для его дальнейшего использования в рекламных целях в сети Интернет. Доступ к сайту будут иметь все желающие. Наибольшая аудитория пользователей будет соответственно в Тамбове.

 

 

 

 

2.5 Защита и сохранность  данных

 

Целью дипломного проекта стала разработка информационного сайта организации. После его корректировки системным администратором ООО «КРЕПсил» будет выполнено размещение сайта в сети Интернет, где его безопасность будет обеспечивать владелец хоста, на котором он будет расположен.

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

 

 

3 Экономическая часть

 

3.1 Расчет стоимости программного продукта

 

В  себестоимость  программного  продукта  входят   следующие  элементы :

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

Данные для расчетов, которые нам уже известны:

Т = 150 (час) – общее число рабочих часов.

З1 = 4600 (руб) –  месячная зарплата программиста

Кт = 2,24 – тарифный коэффициент

Чр = 20 – число рабочих дней в месяц

tр = 8 – количество рабочих часов в день

 

Основная заработная плата

Нахождение основной заработной платы происходит по формуле 3.1:

ЗПосн = З1*Кт*Т/Чр*tр,         (3.1) 

Произведем расчеты:

ЗПосн = 4600*2,24*150/20*8 = 9660 (руб).

 

Дополнительная заработная плата

Дополнительная заработная плата берется в размере 20%=0,2 от основной:

ЗПдоп =9660 * 20% = 1932 (руб).

Общая заработная  плата

Общая заработная плата рассчитывается путем суммирования основной и дополнительной заработанных плат.

ЗПобщая = ЗПосн + ЗПдоп = 9660 +  1932 =11592 (руб).

 

Расчет начислений на заработную плату (единого  социального налога)

Единый социальный налог (ЕСН) составляет 26%, который включает в себя :

• отчисления на социальное страхование в размере 3,2%,
• отчисления на медицинское страхование – 2,8%,
• отчисления в пенсионный фонд – 20%.