Курсовая работа по дисциплине «web- технологии» - korshu.ru o_O
Главная
Поиск по ключевым словам:
страница 1
Похожие работы
Курсовая работа по дисциплине «web- технологии» - страница №1/1




Муниципальное образовательное учреждение

высшего профессионального образования

Южно-Уральский профессиональный институт

Кафедра информатики и вычислительной техники


КУРСОВАЯ РАБОТА

по дисциплине «WEB- технологии»

Тема: Создание сайта «Автосервис “AutoZona с помощью веб-технологий HTML ,CSS, Java Script»



Выполнил


Валеев Ринат Нилевич,

студент гр. ВМ-1-08, специальность 230101.65 Вычислительные машины, комплексы. Системы и сети

______________________

«___»_____________201_г.









Проверил

Кириллова Светлана Николаевна, ст. преподаватель ЮУПИ







ОЦЕНКА_______________

______________________

«___»_____________201_г.

Челябинск

2009

Оглавление



Введение 3

2.Технология создания сайта 9



2.1.Разработка структуры сайта 9

2.2.Определение структуры и формирование контента сайта 9

2.3.Разработка системы навигации 9

2.4.Особенности дизайна сайта 9

3.Средства разработки сайтов 11



3.1. HTML 11

3.2. CSS 13

3.3. Java 15

Заключение 17

Список литературы 18

Приложение №1 19

Приложение №2 23




Введение

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

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

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

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

Web-приложение – это приложение, клиентская часть которого – web-браузер – использует протокол TCIP/IP для связи с сервером приложений. Сервер приложений, как правило, использует отдельный сервер базы данных для хранения информации приложения.

Есть два основных способа которые используются для построения web-приложений:

1) Приложения на основе применения HTML (HTML-based applications), в этом случае браузер только показывает HTML-страницы. Такие приложения просто создавать и они выполняются со всеми браузерами, но их функциональность ограничена возможностями HTML.

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

Создание веб сайтов сегодня воспринимается многими, как модная тенденция, не имеющая под собой практической основы. Создать свой сайт стремятся практически все отечественные компании, но далеко не каждый руководитель отдает себе отчет, насколько важна разработка веб сайтов для развития бизнеса. Заметим, что на Западе создание веб сайтов является приоритетным направлением деятельности, как начинающих предпринимателей, так и давно существующих компаний. По сути, создание веб сайтов — это один из первых шагов, с которых начинается создание собственного дела в развитых странах. Неужели, иностранные коллеги наших бизнесменов настолько расточительны, чтобы выбрасывать деньги на модный дизайн сайтов впустую, ведь стоимость создания веб сайта может достигать существенных сумм? Однозначно — нет!

Веб-сайт (от англ. website: web — «паутина», «сеть» и site — «место», букв. «место в сети») или просто сайт — в компьютерной сети объединённая под одним адресом (доменным именем или IP-адресом) совокупность документов частного лица или организации. По умолчанию подразумевается, что сайт располагается в сети Интернет. Все веб-сайты Интернета в совокупности составляют Всемирную паутину. Для прямого доступа клиентов к веб-сайтам на серверах был специально разработан протокол HTTP. Веб-сайты иначе называют Интернет-представительством человека или организации. Когда говорят «своя страничка в Интернет», то подразумевается целый веб-сайт или личная страница в составе чужого сайта. Кроме веб-сайтов в сети Интернет так же доступны WAP-сайты для мобильных телефонов.

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

В большинстве случаев в Интернете одному веб-сайту соответствует одно доменное имя. Именно по доменным именам сайты идентифицируются в глобальной сети. Возможны иные варианты: один сайт на нескольких доменах или несколько сайтов под одним доменом. Обычно несколько доменов используют крупные сайты (веб-порталы) чтобы логически отделить разные виды предоставляемых услуг (mail.google.com, news.google.com, maps.google.com). Нередки и случаи выделения отдельных доменов для разных стран или языков. Например, google.ru и google.fr логически являются сайтом Google на разных языках, но технически это разные сайты. Объединение нескольких сайтов под одним доменом характерно для бесплатных хостингов. Иногда для идентификации сайтов в адресе после указания хоста стоит тильда и имя сайта: example.com/~my-site-name/, а чаще всего используется домен третьего уровня: my-site-name.example.com.

С ростом объема используемых данных и числа посетителей web-сайтов возрастают требования к надежности, производительности и масштабируемости web-приложений. Для удовлетворения этим требованиям логика, реализованная в web-приложении, а также сервисы обработки данных и реализации транзакций отделяются от интерфейса приложений и переносятся на сервер приложений в виде объектов. Серверы приложений и соответствующие объекты могут быть различного типа (наиболее распространенными из них сегодня являются серверы, поддерживающие спецификацию Java2 Enterprise Edition, и серверы, базирующиеся на технологиях COM и Microsoft .NET).

Целью данной курсовой работы является ознакомление с современными web-технологиями в процессе создания собственного web-сайта. Его назначение – предоставление информации об услугах автосервиса.


  1. Техническое задание

на разработку сайта «Автосервис “AutoZona” с помощью веб-технологий HTML ,CSS, Java Script»
Разработчик: Захаров А.Н., студент группы ВМ-1-05 ЮУПИ

____________________

(подпись)

Дата сдачи «___»________2009 г.





  1. Адрес сайта (название домена): www.AutoZona.ru

  2. Полное название сайта: «Система учета услуг автосервиса“AutoZona”»

  3. Назначение сайта (цель создания): предоставление информации об услугах автосервиса: занимается ремонтом и обслуживанием автомобилей. Автосервис представляет собой современное предприятие, которое выполняет практически весь спектр услуг, связанных с обслуживанием транспортных средств.

  4. Язык сайта: русский

  5. Объём текстовой информации: в достаточном объёме.

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

  7. Объём графической информации: 40 картинок в формате .jpg.

  8. Аудитория: владельцы легковых автомобилей, водители категории “B”.

  9. Структура (основные страницы) сайта:

  1. главная(домашняя)- Index.html;

  2. раздел диагностики-Диагностика.html;

  3. раздел мелкосрочного ремонта-мелкосрочный ремонт.html;

  4. раздел кузовного ремонта-Кузовной ремонт.html;

  5. страничка об авторе-Автор.html;

  6. схема проезда в автосервиса-Схема.html;

  7. фото галерея-Галерея.html.

  1. Навигация: гипертекстовые ссылки, переход на главную с каждой странице.

  2. Схема сайта:




  1. Общий объём сайта: не оговаривается.

  2. Оформление рисунков: формат рисунков . jpg, . gif и объёмом не более 150 КБ.

  3. Основной диапазон разрешения мониторов, на которых будет просматривается сайт: 800х600 пикселей, 1024х768 пикселей, 1280х1024 пикселей.

  4. Основные браузеры и их минимальные версии: MS Internet Explorer v. 8.0, Opera v. 9.0.

  5. Минимальная разрядность цветовой палитры: 16 бит.

  6. Общий фон сайта: фоновой рисунок черных тонов.

  7. Размер шрифтов текста: 14 пт.

  8. Регистрация сайта в каталогах: предполагается после апробации.

  9. Проведение рекламной компании по раскрутке сайта: определяется отдельным техническим заданием.

  10. Срок разработки сайта: с 15.09.2009 до 15.12.2009.

  11. Порядок передачи сайта: исполнитель передаёт заказчику на любом цифровом носителе в установленные сроки.


  1. Технология создания сайта

    1. Разработка структуры сайта


В верхней части web-страницы располагается «шапка», содержащая логотип сайта.

По левому краю web-страницы расположено главное меню, содержащие пункты «Диагностика», «Мелкосрочный ремонт», «Кузовной ремонт».

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

В самом низу находится «подвал» сайта («копирайт»). Он содержит ссылку на страницу автора сайта.


    1. Определение структуры и формирование контента сайта


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

У каждого материала в блоке имеется небольшая картинка, поясняющая его и дающая первое представление о контенте.


    1. Разработка системы навигации


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

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


    1. Особенности дизайна сайта


Весь дизайн сайта разработан в программах Microsoft Paint.Net и Adobe Photoshop CS4. Общий фон сайта имеет чёрный, что придаёт привлекательный и лаконичный вид.

Сайт имеет уникальный дизайн за счёт оригинального выделения всех блоков и их прозрачности.


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

3.1. HTML


Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991—1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже. Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег , несколько раз использованный для форматирования страницы, которую вы сейчас читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы. С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.

Текстовые документы, содержащие код на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Internet Explorer, Mozilla Firefox, Safari, Google Chrome и Opera.

HTML — это теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки
). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:

Текст между двумя тегами — открывающим и закрывающим.

Здесь элемент содержит атрибут href.

А вот пример пустого элемента:

Регистр, в котором набрано имя элемента и имена атрибутов, в HTML значения не имеет (в отличие от XHTML). Элементы могут быть вложенными. Например, следующий код:



Этот текст будет жирным,



а этот - ещё и курсивным

даст такой результат:



Этот текст будет жирным, а этот - ещё и курсивным

Кроме элементов, в HTML-документах есть и сущности (англ. entities) — «специальные символы». Сущности начинаются с символа амперсанда и имеют вид &имя; или &#NNNN;, где NNNN — код символа в Юникоде в десятеричной системе счисления.

Например, © — знак авторского права (©). Как правило, сущности используются для представления символов, отсутствующих в кодировке документа, или же для представления «специальных» символов: & — амперсанда (&), < — символа «меньше» (<) и > — символа «больше» (>), которые некорректно записывать «обычным» образом, из-за их особого значения в HTML.

3.2. CSS


CSS(Каскадные таблицы стилей) используется создателями веб-страниц для задания цветов, шрифтов, расположения и др. Термин «каскадные таблицы стилей» был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.

CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web». В 90-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML и стандарт CSS.

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

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

согласно следующим правилам:


  • стили, используемые по умолчанию браузером;

  • стили, хранящиеся во внешней таблице;

  • стили, хранящиеся во внутренней таблице стилей (внутри тега );

  • встроенный стиль (внутри элемента HTML).

Вот пример расположения банера на верхней части сайта с помощью стилей:

.banner_img2{

float: left;

width: 280px;

height: 76px;

position: relative;

top: 20px;

left: 60px;

}

Синтаксис CSS состоит из трех частей: селектора, свойства и значения:



селектор {свойство: значение}

Комментарий CSS начинается символом "/*" и заканчивается "*/".



3.3. Java


JavaScript - это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Основная идея JavaScript состоит в возможности изменения значений атрибутов HTML-контейнеров и свойств среды отображения в процессе просмотра HTML-страницы пользователем. При этом перезагрузки страницы не происходит.

В 1992 году компания Nombas (впоследствии приобретённая Openwave (англ.)) начала разработку встраиваемого скриптового языка Cmm (Си-минус-минус), который, по замыслу разработчиков, должен был стать достаточно мощным, чтобы заменить макросы, сохраняя при этом схожесть с Си, чтобы разработчикам не составляло труда изучить его. Главным отличием от Си была работа с памятью. В новом языке всё управление памятью осуществлялось автоматически: не было необходимости создавать буферы, объявлять переменные, осуществлять преобразование типов. В остальном языки сильно походили друг на друга: в частности, Cmm поддерживал стандартные функции и операторы Си. Cmm был переименован в ScriptEase, поскольку исходное название звучало слишком негативно, а упоминание в нём Си «отпугивало» людей.

На основе этого языка был создан проприетарный продукт CEnvi. В конце ноября 1995 года Nombas разработала версию CEnvi, внедряемую в веб-страницы. Страницы, которые можно было изменять с помощью скриптового языка, получили название Espresso Pages — они демонстрировали использование скриптового языка для создания игры, проверки пользовательского ввода в формы и создания анимации. Espresso Pages позиционировались как демоверсия, призванная помочь представить, что случится, если в браузер будет внедрён язык Cmm. Работали они только в 16-битовом Netscape Navigator под управлением Windows.

В Web-технологии стандартной программой является программа загрузки страницы. JavaScript позволяет поменять стандартную программу на программу пользователя. Для того чтобы отличить стандартный переход по протоколу HTTP от перехода, программируемого на JavaScript, разработчики языка ввели новую схему URL - JavaScript:


...

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

Если рассматривать программирование на JavaScript в исторической перспективе, то первыми объектами, для которых были разработаны методы и свойства, стали поля форм. В JavaScript строка является любым фрагментом текста.

Свойства: action, method, target, elements[], encoding.

Методы: reset(), submit().

События: onReset, onSubmit.

Основная функция cookie — поддержка сеанса работы между клиентом (браузером) и сервером. Сookie — это небольшой фрагмент текста, который передается от сервера браузеру и потом может быть возвращен обратно. Программа на JavaScript способна прочитать выставленное значение cookie и даже изменить его. Для этой цели используют свойство объекта DOCUMENT — cookie.




Заключение

Разработанный сайт будет служить: владельцам легковых автомобилей, водителям категории “B.

Основная цель создания сайта – предоставление информации об услугах автосервиса – достигнута.

В дальнейшем работа над сайтом может быть продолжена.

Также в ходе работы над сайтом были изучены веб-технологии HTML, CSS и JavaScript, получены навыки разработки структуры, системы навигации и дизайна web-сайтов.

Список литературы




1. Крис Джамса, Конрад Кинг, Энди Андерсон: «Эффективный самоучитель по креативному Web-дизайну. HTML, XHTML, CSS, JavaScript, PHP, ASP, ActiveX. Текст, графика, звук и анимация» - М.: «ДиаСофтЮП», 2005.

2. Дэвид Флэнаган: «JavaScript. Подробное руководство» - СПб: «Символ-Плюс», 2008.

3. Влад Мержевич: «HTML и CSS на примерах» - СПб: «БХВ-Петербург», 2005.

4. Артемий Ломов: «HTML, CSS, скрипты: практика создания сайтов» - СПб: «БХВ-Петербург», 2007.

5. Кристофер Шмитт: «CSS. Рецепты программирования» - СПб: «БХВ-Петербург», 2007.
Интернет ресурсы:

1. http://htmlbook.ru/

2. http://cssbook.ru

3. http://zvirec.com/

4. http://htmlsam.ru

5. http://JavaScriptbook.ru



Приложение №1

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


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

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

Рисунок 2- Страница «мелкосрочного ремонта» сайта

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

Рисунок 3- Страница «диагностика» сайта

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

Рисунок 3- Страница «схема проезда» сайта



Приложение №2

Руководство для пользователя

Сайт имеет удобную и понятную систему навигации, по которой можно легко передвигаться по сайту. Информацию о мелкосрочном ремонте можно найти, открыв в главном меню «Мелкосрочный ремонт». Открыв эту ссылку можно посмотреть наименование услуг, и определится с ценой нужной Вам услуги.

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

Для получении информации о нахождении автосервиса, можно перейти по ссылки «Схема проезда в автосервис».

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

Уникальный раздел «Фотогалерея» можно найти на главной странице сайта. Нажав на ссылку , вы попадаете на страницу со всеми фотографиями автосервиса.

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