Разработка веб-сайта

Автор работы: Пользователь скрыл имя, 31 Января 2013 в 10:10, курсовая работа

Описание

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

Содержание

ВВЕДЕНИЕ - 3 -
1.ОБЩАЯ ЧАСТЬ - 4 -
1.1. Цель разработки - 4 -
1.2. Средства разработки - 4 -
2.ОСНОВНАЯ ЧАСТЬ - 5 -
2.1. Постановка задачи - 5 -
2.2. Внешняя спецификация - 5 -
2.2.1. Описание задачи - 5 -
2.2.2. Описание входных/выходных данных - 5 -
2.2.3. Тесты - 5 -
2.2.4. Контроль целостности данных - 6 -
2.3. Проектирование - 6 -
2.3.1. Функциональная схема - 7 -
2.3.2. Структурная схема - 7 -
2.3.3. Схема пользовательского интерфейса - 8 -
2.3.4. Структура общего окна - 8 -
2.4. Методы - 9 -
2.5. Результаты работы программы - 9 -
3.ТЕХНОЛОГИЧЕСКАЯ ЧАСТЬ - 12 -
3.1. Отладка программы - 12 -
3.2. Характеристика программы - 12 -
ЗАКЛЮЧЕНИЕ - 13 -
СПИСОК ИСПОЛЬЗУЕМЫХ МАТЕРИАЛОВ - 14 -
ТЕКСТ ПРОГРАММЫ - 15 -
РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ - 24 -

Работа состоит из  1 файл

Kypca4 MATAH.doc

— 831.00 Кб (Скачать документ)

 

МПТ РГТЭУ.П429-КП.ММ 09 12

СОДЕРЖАНИЕ

 

ВВЕДЕНИЕ

 

Разрабатываемый сайт предназначен для получения пользователям методических указаний по курсу лекций по предмету “Математические Методы”.

Сайт обрабатывает информацию с сервера Google Docs

 

  1. ОБЩАЯ ЧАСТЬ

    1. Цель разработки

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

    1. Средства разработки

Технические средства:

Таблица 1 – Используемые технические средства

Название

Описание

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

Процессор

Intel Core2 Duo

Оперативная память

6ГБ

Видео память

2ГБ

Жесткий диск

700ГБ

Приборы

Монитор

DELL

Принтер

CANON




 

Программные средства:

Таблица 2 – Используемые инструментальные средства

Название

Описание

Microsoft Windows 7

Операционная система семейства Windows NT, следующая за Windows Vista.

Microsoft Word

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

NotePad++

Тектовый редактор с подсветкой кода

Google Docs

Сервер для  хранения документов


 

 

  1. ОСНОВНАЯ ЧАСТЬ

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

Создать сайт на котором можно будет просмотреть лекции по предмету “Математические методы”

    1. Внешняя спецификация

      1. Описание задачи

Сайт прост  в использовании

Файл .doc хранится на сервере Google Docs , сайт обрабатывает информацию и выводит на экран с помощью технологии HTML – iframe

      1. Схема пользовательского интерфейса

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


 


 

 

 

Рис. 3 – Общая схема пользовательского интерфейса

      1. Структура общего окна

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

 

 


 

 


Рис. 4 – Структура общего окна программы

 

Таблица 7. Описание структуры окна

Назначение

1

Название сайта

2

Навигация по сайту

3

Содержание  страницы


 

 

 

 

 

 

 

 

 

 

 

 

    1. Результаты работы программы

Иллюстрация работы сайта:

 

Проверка данного сайта показала, что она соответствует предъявленным требованиям.  
ТЕХНОЛОГИЧЕСКАЯ ЧАСТЬ

    1. Характеристика программы

Таблица 9 – Список модулей

Наименование  модуля

Назначение

Размер в строках

1

Index.html

Нелинейн. Программирование

34

2

Dinam.html

Динамич. Прогр.

34

3

Cel.html

Целочисленное программирование

34

4

Dvo.html , simplex

Двойственный симплекс метод

34

Всего:

144


 

 

ЗАКЛЮЧЕНИЕ

 

В результате работы над данным курсовым проектом было разработан сайт «Методические указания», которое позволяет пользователю ознакомится с методическими указаниями по предмету  “Математические методы”.

При разработке данного веб-сайта были получены дополнительные знания по разработке дизайна веб сайта, HTML, CSS.

 

 

СПИСОК ИСПОЛЬЗУЕМЫХ МАТЕРИАЛОВ

  1. Методический материал по выполнению курсового проектирования, составитель Варламова Л.А. 2009г.
  2. Сайт htmlbook.ru
  3. Единая система программной документации М.: Издательство стандартов, 1985-128 с.
  4. Лекции по предмету “Математические методы”, преподаватель Волкова Г.Ю.

 

ПРИЛОЖЕНИЕ 1.

ТЕКСТ ПРОГРАММЫ

 

ВВЕДЕНИЕ

 

Разрабатываемый сайт предназначен для получения пользователям методических указаний по курсу лекций по предмету “Математические Методы”.

Сайт обрабатывает информацию с сервера Google Docs

 

  1. Перечень страниц

Таблица 10 –  Список модулей

Наименование страницы

Назначение

Размер в  строках

1

Index.html

Нелинейн. Программирование

34

2

Dinam.html

Динамич. Прогр.

34

3

Cel.html

Целочисленное программирование

34

4

Dvo.html , simplex

Двойственный симплекс метод

34

Всего:

144


 

2. Листинг модулей

1) index.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<title></title>

<meta name="keywords" content="" />

<meta name="description" content="" />

<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />

</head>

 

<body>

 

<div id="wrapper">

 

<header id="header">

<div style="margin-left:210px;padding-top:10px;"><img src="images/logo.png"> </div>

</header><!-- #header--><div id="topheader">  <a href="index.html">Нелинейное  программирование </a>

<a href="dinam.html">Динамическое программирование </a>

<a href="dvo.html">Двойственный  метод</a>

<a href="graph.html">Графы  </a>

<a href="simplex.html">Симплекс метод </a> </div>

<div id="contentbg">

<div id="content">

<iframe src="https://docs.google.com/file/d/1ddOdtvnCoyaZjjgL6o77xq8NLBYfbZM4CL-M4PT02bbil2zy4vT0fQMU7QPZ/preview" width="99%" height="100%"></iframe>

 

<!-- #content-->

 

</div><!-- #wrapper -->

 

<!-- #footer -->

 

</body>

</html>

 

Dinam.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<title></title>

<meta name="keywords" content="" />

<meta name="description" content="" />

<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />

</head>

 

<body>

 

<div id="wrapper">

 

<header id="header">

<div style="margin-left:210px;padding-top:10px;"><img src="images/logo.png"> </div>

</header><!-- #header--><div id="topheader">  <a href="index.html">Нелинейное программирование </a>

<a href="dinam.html">Динамическое программирование </a>

<a href="dvo.html">Двойственный метод</a>

<a href="graph.html">Графы </a>

<a href="simplex.html">Симплекс метод  </a> </div>

<div id="contentbg">

<div id="content">

<iframe src="https://docs.google.com/file/d/1ddOdtvnCoyaZjjgL6o77xq8NLBYfbZM4CL-M4PT02bbil2zy4vT0fQMU7QPZ/preview" width="99%" height="100%"></iframe>

 

<!-- #content-->

 

</div><!-- #wrapper -->

 

<!-- #footer -->

 

</body>

</html>

 

Dvo.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<title></title>

<meta name="keywords" content="" />

<meta name="description" content="" />

<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />

</head>

 

<body>

 

<div id="wrapper">

 

<header id="header">

<div style="margin-left:210px;padding-top:10px;"><img src="images/logo.png"> </div>

</header><!-- #header--><div id="topheader">  <a href="index.html">Нелинейное  программирование </a>

<a href="dinam.html">Динамическое программирование </a>

<a href="dvo.html">Двойственный  метод</a>

<a href="graph.html">Графы </a>

<a href="simplex.html">Симплекс  метод </a> </div>

<div id="contentbg">

<div id="content">

<iframe src="https://docs.google.com/file/d/0B0Oi2NTs3ITxcUR1TXZFUHVHZms/preview" width="99%" height="100%"></iframe>

 

<!-- #content-->

 

</div><!-- #wrapper -->

 

<!-- #footer -->

 

</body>

</html>

 

Graph.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<title></title>

<meta name="keywords" content="" />

<meta name="description" content="" />

<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />

</head>

 

<body>

 

<div id="wrapper">

 

<header id="header">

<div style="margin-left:210px;padding-top:10px;"><img src="images/logo.png"> </div>

</header><!-- #header--><div id="topheader"> <a href="index.html">Нелинейное  программирование </a>

<a href="dinam.html">Динамическое программирование </a>

<a href="dvo.html">Двойственный  метод</a>

<a href="graph.html">Графы </a>

<a href="simplex.html">Симплекс  метод </a>  </div>

<div id="contentbg">

<div id="content">

<iframe src="https://docs.google.com/file/d/0B0Oi2NTs3ITxZllvTHVIWVBydEU/preview" width="99%" height="100%"></iframe>

 

<!-- #content-->

 

</div><!-- #wrapper -->

 

<!-- #footer -->

 

</body>

</html>

 

 

 

Simplex.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<title></title>

<meta name="keywords" content="" />

<meta name="description" content="" />

<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />

</head>

 

<body>

 

<div id="wrapper">

 

<header id="header">

<div style="margin-left:210px;padding-top:10px;"><img src="images/logo.png"> </div>

</header><!-- #header--><div id="topheader">  <a href="index.html">Нелинейное программирование </a>

<a href="dinam.html">Динамическое программирование </a>

<a href="dvo.html">Двойственный  метод</a>

<a href="graph.html">Графы </a>

<a href="simplex.html">Симплекс  метод </a> </div>

<div id="contentbg">

<div id="content">

<iframe src="https://docs.google.com/file/d/0B0Oi2NTs3ITxNHpvd2ZVcnNZWjQ/preview" width="99%" height="100%"></iframe>

 

<!-- #content-->

 

</div><!-- #wrapper -->

 

<!-- #footer -->

 

</body>

</html>

 

Style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

header, nav, section, article, aside, footer {

display: block;

}

body {

font: 12px/18px Arial, Tahoma, Verdana, sans-serif;

width: 100%;

height: 100%;

background-color: #62737d;

}

a {

color: white;

outline: none;

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

p {

margin: 0 0 18px

}

img {

border: none;

}

input {

vertical-align: middle;

}

#wrapper {

width: 840px;

margin: 0 auto;

min-height: 100%;

height: auto !important;

height: 100%;

}

 

 

/* Header

-----------------------------------------------------------------------------*/

#header {

height: 262px;

width: 840px;

background-image: url(images/header.png);

  background-repeat: no-repeat;

 

}

 

#topheader {

height:27px;

width:701px;

background-image: url(images/topheader.png);

  background-repeat: no-repeat;

  margin-left: 70px;

  margin-top: -30px;

  text-align:center;

}

 

#contentbg {

width:700px;

height: 100%;

background-image: url(images/content.png);

  background-repeat: repeat-y;

  margin-left: 70px;

Информация о работе Разработка веб-сайта