Разработка веб-сайта
Курсовая работа, 31 Января 2013, автор: пользователь скрыл имя
Описание
Первичной целью является получение оценки, а так же получение знаний, разработать сайт, который предназначен для того чтобы студенты получили доступ и могли ознакомится с лекциями по предмету “Математические Методы”.
Содержание
ВВЕДЕНИЕ - 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 – Используемые технические средства
Название |
Описание |
Системный блок | |
Процессор |
Intel Core2 Duo |
Оперативная память |
6ГБ |
Видео память |
2ГБ |
Жесткий диск |
700ГБ |
Приборы | |
Монитор |
DELL |
Принтер |
CANON |
Программные средства:
Таблица 2 – Используемые инструментальные средства
Название |
Описание |
Microsoft Windows 7 |
Операционная система семейства Windows NT, следующая за Windows Vista. |
Microsoft Word |
Текстовый процессор,
предназначенный для создания, просмотра
и редактирования текстовых документов,
с локальным применением |
NotePad++ |
Тектовый редактор с подсветкой кода |
Google Docs |
Сервер для хранения документов |
ОСНОВНАЯ ЧАСТЬ
Постановка задачи
Создать сайт на котором можно будет просмотреть лекции по предмету “Математические методы”
Внешняя спецификация
Описание задачи
Сайт прост в использовании
Файл .doc хранится на сервере Google Docs , сайт обрабатывает информацию и выводит на экран с помощью технологии HTML – iframe
Схема пользовательского интерфейса
Общая схема пользовательского интерфейса отражает навигацию по сайту: все элементы пользовательского интерфейса, последовательность данных, окна, отображающиеся при работе с программой.
Рис. 3 – Общая схема пользовательского интерфейса
Структура общего окна
Схема структуры общего окна (см. рис. 4) представляет вид главного окна, расположение полей выбора в главном окне. Содержит таблицу, поясняющую данную структуру (см. таблицу 5).
Рис. 4 – Структура общего окна программы
Таблица 7. Описание структуры окна
№ |
Назначение |
1 |
Название сайта |
2 |
Навигация по сайту |
3 |
Содержание страницы |
- Результаты работы программы
Иллюстрация работы сайта:
Проверка данного сайта показала, что она соответствует
предъявленным требованиям.
ТЕХНОЛОГИЧЕСКАЯ ЧАСТЬ
Характеристика программы
Таблица 9 – Список модулей
№ |
Наименование модуля |
Назначение |
Размер в строках |
1 |
Index.html |
Нелинейн. Программирование |
34 |
2 |
Dinam.html |
Динамич. Прогр. |
34 |
3 |
Cel.html |
Целочисленное программирование |
34 |
4 |
Dvo.html , simplex |
Двойственный симплекс метод |
34 |
Всего: |
144 | ||
ЗАКЛЮЧЕНИЕ
В результате работы над данным курсовым проектом было разработан сайт «Методические указания», которое позволяет пользователю ознакомится с методическими указаниями по предмету “Математические методы”.
При разработке данного веб-сайта были получены дополнительные знания по разработке дизайна веб сайта, HTML, CSS.
СПИСОК ИСПОЛЬЗУЕМЫХ МАТЕРИАЛОВ
- Методический материал по выполнению курсового проектирования, составитель Варламова Л.А. 2009г.
- Сайт htmlbook.ru
- Единая система программной документации М.: Издательство стандартов, 1985-128 с.
- Лекции по предмету “Математические методы”, преподаватель Волкова Г.Ю.
ПРИЛОЖЕНИЕ 1.
ТЕКСТ ПРОГРАММЫ
ВВЕДЕНИЕ
Разрабатываемый сайт предназначен для получения пользователям методических указаний по курсу лекций по предмету “Математические Методы”.
Сайт обрабатывает информацию с сервера Google Docs
- Перечень страниц
Таблица 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/
<head>
<meta charset="utf-8" />
<!--[if IE]><script
src="http://html5shiv.
<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;
</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/
<!-- #content-->
</div><!-- #wrapper -->
<!-- #footer -->
</body>
</html>
Dinam.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/
<head>
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.
<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;
</header><!-- #header--><div id="topheader">
<a href="index.html">Нелинейное
<a href="dinam.html">Динамическое программирование </a>
<a href="dvo.html">Двойственный метод</a>
<a href="graph.html">Графы </a>
<a href="simplex.html">Симплекс
<div id="contentbg">
<div id="content">
<iframe src="https://docs.google.com/
<!-- #content-->
</div><!-- #wrapper -->
<!-- #footer -->
</body>
</html>
Dvo.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/
<head>
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googleco
<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;
</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/
<!-- #content-->
</div><!-- #wrapper -->
<!-- #footer -->
</body>
</html>
Graph.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/
<head>
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.
<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;
</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/
<!-- #content-->
</div><!-- #wrapper -->
<!-- #footer -->
</body>
</html>
Simplex.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/
<head>
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.
<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;
</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/
<!-- #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;