43663

Разработка web-сайта для организации, занимающейся продажей автомобилей

Курсовая

Информатика, кибернетика и программирование

1 Язык разметки гипертекста HTML 4 1. Сайт разрабатывался с помощью языка разметки гипертекста HTML и каскадных таблиц стилей CSS.1 Язык разметки гипертекста HTML HyperText Mrkup Lnguge HTML является стандартным языком предназначенным для создания гипертекстовых документов в среде WEB. HTMLдокументы могут просматриваться различными типами WEBбраузеров.

Русский

2013-11-04

1.07 MB

6 чел.

Министерство образования Республики Беларусь

Учреждение Образования

«Белорусский Государственный Университет

Информатики и Радиоэлектроники»

Кафедра: сетей и устройств телекоммуникаций

Факультет: телекоммуникаций

ПОЯСНИТЕЛЬНАЯ ЗАПИСКА

к курсовой работе

по дисциплине:  

Компьютерные технологии и системы автоматизированного проектирования цифровых устройств

НА ТЕМУ:

«Разработка web-сайта для организации, занимающейся продажей автомобилей»

Выполнил:        Проверил:

ст.группы 863101

К.А. Мукавозчик        О.Г. Смолякова

2010

СОДЕРЖАНИЕ

ВВЕДЕНИЕ           3

1 ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ                 4

1.1 Язык разметки гипертекста HTML                                                 4

1.2 Каскадные таблицы стилей CSS                                                             5

2 СТРУКТУРА САЙТА                                                                                          7

   2.1 Структурная схема сайта                                                                              7                        

   2.2 Скриншоты страниц сайта                                                                            8

  ЗАКЛЮЧЕНИЕ                 13

  ЛИТЕРАТУРА                  14

  ПРИЛОЖЕНИЕ А                                                                                              15           

  


ВВЕДЕНИЕ

Задачей данного курсового проекта являлась разработка web-сайта для организации, занимающейся продажей автомобилей. Сайт разрабатывался с помощью языка разметки гипертекста HTML и каскадных таблиц стилей CSS. Для создания сайта мной был выбран блочный тип верстки.

1 ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ

1.1 Язык разметки гипертекста HTML

HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-браузеров. Когда документ создан с использованием HTML, WEB-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

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

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

HTML-тэги могут быть условно разделены на две категории:

  1.  тэги, определяющие, как будет отображаться WEB-браузером тело документа в целом;
  2.  тэги, описывающие общие свойства документа, такие как заголовок или автор документа.

Основное преимущество HTML заключается в том, что ваш документ может быть просмотрен на WEB-браузерах различных типов и на различных платформах.

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Например, тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:

<TITLE> Заголовок документа </TITLE>

Завершающий тэг выглядит также, как стартовый, и отличается от него прямым слэшем перед текстом внутри угловых скобок. В данном примере тэг <TITLE> говорит WEB-браузеру об использовании формата заголовка, а тэг </TITLE> - о завершении текста заголовка.

Некоторые тэги, такие, как <P> (тэг, определяющий абзац), не требуют завершающего тэга, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость.

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

<title> Заголовок документа </title>

Дополнительные пробелы, символы табуляции и возврата каретки, добавленные в исходный текст HTML-документа для его лучшей читаемости, будут проигнорированы WEB-браузером при интерпретации документа. HTML-документ может включать вышеописанные элементы, только если они помещены внутрь тэгов <PRE> и </PRE>.

1.2 Каскадные таблицы стилей CSS

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

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

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

Более того,  можно сохранить описание стиля не в тексте странички, а в отдельном файле - это позволит использовать описание стиля на любом количестве Web-страниц. И еще одно, связанное с этим, преимущество - возможность изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле.

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

Информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысла в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, поместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега <LINK>, располагающегося внутри тега <BODY> ваших страниц:

<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">

Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить браузеру, что на этой страничке будет использоваться CSS. Третий параметр - HREF= - указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу - в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются - или полный URL  в случае, если файл стилей находится на другом сервере.

Второй вариант, при котором описание стилей располагается в коде Web-странички, внутри тега <BODY>, в теге <STYLE type="text/css">... </STYLE>. В этом случае можно использовать эти стили для элементов, располагающихся в пределах странички. Параметр type="text/css" является обязательным и служит для указания браузеру использовать CSS.

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

2 СТРУКТУРА САЙТА

2.1 Структурная схема сайта 

      Главная

     Новости

      Запчасти

   Тест драйв

   Автомобили  

Авто по маркам

 Описание авто

2.2 Скриншоты страниц сайта

Рисунок 1. Главная страница

Листинг данной страницы представлен в приложении А.

Рисунок 2. Страница каталога автомобилей

Рисунок 3. Страница автомобилей марки Subaru

          

Рисунок 4. Страница с описанием характеристик и комплектации автомобиля Volkswagen 2011 GTI 

Листинг данной страницы представлен в приложении А.

Рисунок 5. Страница новостей автомира

ЗАКЛЮЧЕНИЕ

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

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

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


ЛИТЕРАТУРА

1. Алексеев В.Ф.   Создание собственной Web-страницы средствами HTML: А 47 Учеб. пособие – Мн.: БГУИР, 2008. – 58 с.: ил.

2. Мержевич В.В. HTML и CSS на примерах. – СПб.: БХВ-Петербург, 2005.- 448 с.: ил.

3.  Смолякова О.Г. «Учебные лекции для 3-го курса»

4.  сайты:  css.manual.ru и html.manual.ru


ПРИЛОЖЕНИЕ А

Листинг

Файл style.css

body, html {

margin:0px;

padding:0px;

text-align:center;

height:100%;

/*background-image: url('img/bg.jpg');*/

         background-color: gray;

}

a {

text-decoration:none;

color:black;

}

a:hover{

text-decoration:underline;

}

a:active{

text-decoration:none;

color:#000;

}

#main {

width:1000px;

         height:100%;

margin:0 auto;

text-align:left;

min-height:100%;

         background-image: url('img/main_bg.jpg');

}

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

#menu{

background-color:#000000;

text-align:center;

padding:2px;

font-family: Courier, monospace;

border: 1px solid #000;

}

.menu{

width: 100%;

overflow: hidden;

}

.menu ul{

margin: 0;

padding: 0;

padding-left: 0px;

font: bold 13px Verdana;

list-style-type: none;

}

.menu li{

display: inline;

margin: 0;

}

.menu li a{

float: left;

clear:right;

display: block;

text-decoration: none;

margin: 0;

padding: 7px 8px;

color: black;

background-image: url('img/menu.jpg');

}

.menu li a:hover, .menu li.selected a{

color: black;

text-decoration:underline;

}

.menu li b{

float: left;

display: block;

text-decoration: none;

margin: 0;

padding: 7px 8px;

color: #000080;

background-image: url('img/menu_active.jpg');

}

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

.left_list{

font-family: Candara;

font-size:14px;

width:200px;

         float:left;

         display: block;

clear:both;

margin-top:0px;

         margin-left: 0px;

text-align:center;

padding-bottom:0px;

padding-top:0px;

         border-right: 1px solid black; /*del*/

         background-image: url('img/left_r.jpg');

}

.left_list ul{

margin-left: 10px;

margin-top; 0px;

font: 14px Candara;

text-color:black;

list-style-type: square;

text-align:left;

}

.left_list li a:visited{

         color: black;

}

.left_text{

text-align: center;

padding: 10px;

color:black;

font-family: Candara;

font-size:14px;

}

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

.page{

font-family: Candara;

font-size:14px;

width:799px;

         height:100%;

         float:left;

clear:left;

         position: absolute;

         top: 190px;

margin-top:0px;

         margin-left: 201px;

         text-align: left;

padding-bottom:0px;

padding-top:0px;

}

.page_text{

         text-align:left;

         font-family: Candara;

         font-size:15px;

         color:black;

         padding: 10px;

}

Файл  index.html – Главная страница сайта

<html>

<head>

<title>АД | Главная </title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="main">

<div>

<img  src="img/head.jpg" align="middle">

</div>

<div class="menu">

<ul>

<li><a href="news.html" title="">Новости</a></li>

<li><a href="auto.html" title="">Автомобили</a></li>

<li><a href="zapch.html" title="">Запчасти</a></li>

<li><a href="test.html" title="">Тест драйв</a></li>

</ul>

</div>

<div class="left_list">

<b>Авто в гараже</b>

<ul>

<li><a href="no.html">Audi</a></li>

<li><a href="no.html">BMW</a></li>

<li><a href="no.html">Fiat</a></li>

<li><a href="no.html">Mazda</a></li>

<li><a href="no.html">Mercedes</a></li>

<li><a href="no.html">Mitsubishi</a></li>

<li><a href="no.html">Nissan</a></li>

<li><a href="no.html">Opel</a></li>

<li><a href="no.html">Peugeot</a></li>

<li><a href="no.html">Porsche</a></li>

<li><a href="no.html">Renault</a></li>

<li><a href="subaru.html">Subaru</a></li>

<li><a href="no.html">Toyota</a></li>

<li><a href="vw.html">Volkswagen</a></li>

<br>

</ul>

</div>

<div class="left_list"> <b>Спецпредложение</b><br><br>

<a href="golf.html" ><font color="black"><b>Volkswagen 2011 GTI</b><font></a>

<a href="golf.html"><img src="img/store/golf.jpg" align="middle"></a>

<div class="left_text"> 2010 г. |2л Бензин| 760 миль<br>  <font color="red">$ 33900</font></div>

</div>

<div class="left_list"> <b>Контакты</b>

<div class="left_text"><b>OAO "АД"</b><br>г.Минск, ул.Неизвестная 1<br>

<img src="img/ico_velcom.gif" align="center">   (029)777 77 77<br>

<img src="img/ico_mts.gif" align="center">   (029)444 44 44<br>

<br>

<img src="img/ico_icq.gif" align="center">  88888888<br>

<img src="img/ico_email.gif" align="center">  ад@mail.ru

</div>

<div class="page">

<div class="page_text">

<h3>Добро пожаловать на сайт на сайт АД'а!</h3>

<p>Если вы решили обрести нового железно друга, то вы обратились по адресу. Наша компания предлагает широкий выбор автомобилей лучший мировых марок по самым низким ценам. Также мы предлагаем оригинальные и лицензионные автозапчасти.</p>

<p>И помните: автомобиль это не роскошь, а средство передвижения!</p>

</div>

</div>

</div>

</body>

</html>

Файл golf.html

<html>

<head>

<title>АД | Главная </title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="main">

<div>

 

<a href="index.html" title="Главная страница"><img src="img/head.jpg" align="middle"></a>

</div>

<div class="menu">

<ul>

<li><a href="news.html" title="">Новости</a></li>

<li><a href="auto.html" title="">Автомобили</a></li>

<li><a href="zapch.html" title="">Запчасти</a></li>

<li><a href="test.html" title="">Тест драйв</a></li>

</ul>

</div>

<div class="left_list">

<b>Авто в гараже</b>

<ul>

<li><a href="no.html">Audi</a></li>

<li><a href="no.html">BMW</a></li>

<li><a href="no.html">Fiat</a></li>

<li><a href="no.html">Mazda</a></li>

<li><a href="no.html">Mercedes</a></li>

<li><a href="no.html">Mitsubishi</a></li>

<li><a href="no.html">Nissan</a></li>

<li><a href="no.html">Opel</a></li>

<li><a href="no.html">Peugeot</a></li>

<li><a href="no.html">Porsche</a></li>

<li><a href="no.html">Renault</a></li>

<li><a href="subaru.html">Subaru</a></li>

<li><a href="no.html">Toyota</a></li>

<li><a href="vw.html">Volkswagen</a></li>

<br>

</ul>

</div>

<div class="left_list"> <b>Спецпредложение</b><br><br>

<a href="golf.html" ><font color="black"><b>Volkswagen 2011 GTI</b><font></a>

<a href="golf.html"><img src="img/store/golf.jpg" align="middle"></a>

<div class="left_text"> 2010 г. |2л Бензин| 760 миль<br>  <font color="red">$ 33900</font></div>

</div>

<div class="left_list"> <b>Контакты</b>

<div class="left_text"><b>OAO "АД"</b><br>г.Минск, ул.Неизвестная 1<br>

<img src="img/ico_velcom.gif" align="center">   (029)777 77 77<br>

<img src="img/ico_mts.gif" align="center">   (029)444 44 44<br>

<br>

<img src="img/ico_icq.gif" align="center">  88888888<br>

<img src="img/ico_email.gif" align="center">  ад@mail.ru

</div>

<div class="page">

<div class="page_text">

<a href="vw.html" title="Subaru"><img src="img/car_logo/volkswagen.jpg" align="middle" hspace="5" vspace="5"></a>

<img src="img/store/golf_big.jpg" align="right"hspace="5">

<br><br>

<a href="golf.html"title="Golf"><font color="blue"><b>Volkswagen 2011 GTI</a></font></b><br><br>

Тип кузова: Хэтчбек<br>

Привод: Передний<br>

Двигатель: 2 л Бензин<br>

КПП: Механика<br>

Цвет: красный<br>

Пробег: 760 миль<br>

Дата выпуска: 2010 год<br>

Цена: $ 33900<br>

<p><b>Комплектация:</b></p>

<ul>

<li>CD-проигрыватель</li>

<li>антизаносная система</li>

<li>антипробуксовочная система</li>

<li>10 подушек безопасности</li>

<li>ABS (антиблокировочная система)</li>

<li>гидроусилитель руля</li>

<li>кондиционер</li>

<li>климат-контроль</li>

<a href="66.html" title="Golf"><img src="img/store/66.jpg"

align="right"hspace="5"></a><a href="55.html" title="Golf"><img src="img/store/55.jpg"

align="right"hspace="5"></a>

<li>круиз-контроль</li>

<li>литые диски</li>

<li>корректор фар</li>

<li>центральный замок</li>

<li>иммобилайзер</li>

<li>сигнализация</li>

<li>без пробега по РБ</li>

<li>EBD (система э/распределения тормозных усилий)</li>

</ul>

</div>

</div>

</div>

</body>

</html>


 

А также другие работы, которые могут Вас заинтересовать

31772. Сущность и принципы нормативного метода учета затрат 35.5 KB
  Сущность и принципы нормативного метода учета затрат. Варианты организации нормативного учета затрат Сущность нормативного метода учета затрат Нормативный метод учета затрат система производственного учета объединяющая оперативный аналитический и калькуляционный виды учета тесно связанная с планированием нормированием и организацией производства. предполагает установление норм потребления ресурсов и учетных цен этих ресурсоворганизацию учета по установленным нормам нормативам затрат; учет отклонений от норм с установлением их размера...
31773. Сущность системы «директ-костинг» 37.5 KB
  Постоянные расходы не включают в расчет себестоимости изделий а как расходы данного периода списывают с полученной прибыли в течение того периода в котором они были произведены. Маржинальным доходом называется сумма постоянных затрат и прибыли или сумма покрытия. В отчете о финансовых результатах видно изменение прибыли вследствие изменения переменных расходов цен реализации и структуры выпускаемой продукции. Хозяйственная деятельность представляет собой процесс инвестирования финансовых ресурсов с целью получения прибыли.
31774. Сущность‚ роль и функции экономического контроля в управлении экономикой 31.5 KB
  Функционально система управления любого уровня состоит из системы прогнозирования экономического анализа планирования организации оперативного регулирования учета и контроля. Одним из основных вопросов контроля является определение его сущности. Важным звеном единой системы финансовохозяйственного контроля является экономический контроль.
31775. Система «Стандарт-кост» 23.5 KB
  Отличие от нормативного учета – система управления производством в которой не стоит проблема учета а решается задача точного исполнения; более жестко отслеживатся технологический процесс недопускается никаких отклонений. Ситандарткост более гибкая система при всей ее жесткости.
31776. Системы управленческого учета, их класиификация 28 KB
  Функции управления: планирование Организация деятельности мотивация контроль Класиификация систем управленческого учета: Широта охвата информации систематический учет финансовый учет затрат на производство и регламентацию по составу затрат способам регистрации идентификации и группировки представления отчетности проблемный учет формируется информация об экономической технологической конструкторской и организационной подготовке производства: о ценах реализации ГП управление производственными запасами рационализации расходов...
31777. Сущность системы «директ-костинг» и оценка операционного левириджа 29 KB
  Основа –деление затрат ресурсов на постоянные и переменные части и исчисление сокращеной себестоимости. Систему запретили в 90 гг в РФ Виды системы: классический себестоимостьосновные прямые производственные затраты система переменных затрат в огранич себестоимость включаются все затраты имеющие перменный характер по отнош. К изменению объемов производства и продажи развитая себестоимость=переменные затратычасть постоянных затрат расчитанных на коэффициент использования производственной мощности Достоинства сисемы: выявление...
31778. Роль и значение Международных стандартов учета и финансовой отчетности (МСУ ФО) 40 KB
  Международные стандарты финансовой отчетности МСФО это документы определяющие общий подход к составлению финансовой отчетности и предлагающие варианты оценки и учета активов обязательств и операций по их изменению. В МСФО обобщена практика учета наиболее развитых национальных учетных систем. Каждый стандарт содержит следующие элементы: номер стандарта его название цели сферы применения порядок учета основные определения раскрытие информации дату вступления в силу.
31779. СРО аудиторов 38 KB
  Саморегулируемая организация СРО аудиторов это некоммерческая организация созданная на условиях членства в целях обеспечения условий осуществления аудиторской деятельности. Некоммерческая организация приобретает статус саморегулируемой организации СРО аудиторов с момента ее включения в государственный реестр саморегулируемых организаций аудиторов. Некоммерческая организация включается в государственный реестр саморегулируемых организаций СРО аудиторов при условии соответствия ее следующим требованиям: Объединение в составе...
31780. Объединение аудиторов 37.5 KB
  Саморегулируемая организация аудиторов должна быть создана в форме некоммерческой организации объединять в качестве своих членов не менее 700 физических лиц или не менее 500 коммерческих фирм а также состоять в государственном реестре саморегулируемых организаций аудиторов. Причем в течение этого года уже существующие профессиональные аудиторские объединения аккредитованные при Минфине России могли провести процедуры приведения своих учредительных документов в соответствии с новыми требованиями и подать заявление в Минфин России о...