Размещено на http://www.allbest.ru/

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ

«НОВОСИБИРСКИЙ ГОСУДАРСТВЕННЫЙ ПЕДАГОГИЧЕСКИЙ УНИВЕРСИТЕТ»

ФАКУЛЬТЕТ ТЕХНОЛОГИИ И ПРЕДПРИНИМАТЕЛЬСТВА

КАФЕДРА ИНФОРМАЦИОННЫХ, СЕРВИСНЫХ И ОБЩЕТЕХНИЧЕСКИХ ДИСЦИПЛИН

Курсовая работа

по дисциплине: Веб-дизайн

Создание сайта «Тур Бюро»

Выполнил студент группы 43

Бутаков Дмитрий Валерьевич

Профиль: Информатика и вычислительная техника

Форма обучения: очная

Научный руководитель:

Доц. Классов. А.Б

Новосибирск 2017



ВВЕДЕНИЕ

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

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

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

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

Целью данной работы является создание сайта тур бюро.

Для достижения данной цели в работе решаются следующие задачи:

- изучение понятия Web-технологий;

- описание существующих Web-технологий;

- разработка сайта «Тур Бюро».

Практическая значимость работы.

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

Структура курсовой работы.

Данная курсовая работа состоит из Введения, двух разделов, Заключения и списка используемой литературы.



1. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ

В процессе разработки и создания Интернет-сайта необходимо определить следующие понятия:

1. Web-технология.

2. Виды Web-технологий.

Перейдем к подробному рассмотрению этих понятий:

1.1 Понятие Web-технологии

Под Web-технологиями определяют всю совокупность средств для организации WWW (World Wide Web). Поскольку в каждом сеансе взаимодействуют две стороны - сервер и клиент, Web-технологии разделяются на две группы - технологии стороны сервера (server-side) и технологии стороны клиента (client-side).

К технологиям со стороны клиента относятся все технологии создания Web-страниц (HTML, JavaScript, DHTML), а к технологиям со стороны сервера относятся технологии доступа к базам данных в сети Интернет (PHP).

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

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

В случае WWW клиентами выступают программы Web-обозревателей - Web-браузеры (программы для просмотра Web-страниц). Серверами же являются так называемые Web-серверы, обрабатывающие запросы Web-обозревателей и высылающие им нужные файлы.

Каждый ресурс в Web - документ HTML, изображение, видеоклип, программа и т.д. - имеет адрес, который может быть закодирован с помощью универсального идентификатора ресурсов (Universal Resource Identifier), или URI.

Люди, для того чтобы понимать друг друга, должны разговаривать на одном языке. Это же относится и к компьютерам. В их случае в качестве такого "языка общения" выступает протокол -- набор правил обмена данными. Web-сервер и Web-обозреватель используют для обмена данными протокол HTTP (HyperText Transfer Protocol -- протокол обмена гипертекстом). Этот высокоуровневый протокол работает "поверх" обычного низкоуровневого протокола TCP/IP (Transfer Control Protocol/Internet Protocol -- протокол управления обменом/протокол Интернета)

Протокол передачи гипертекста HTTP предназначен для передачи гипертекстовых документов от сервера к клиенту. Протокол HTTP относится к протоколам прикладного уровня.

При передаче сообщения между пользователями Internet протокол ТСР разбивает данные сообщения на отдельные фрагменты, называемые пакетами, снабжает каждый пакет служебной информацией для последующего восстановления исходных данных. Протокол IP оформляет для всех пакетов заголовок с адресом доставки и отправляет их. Пакеты путешествуют от одного специализированного компьютера, называемого маршрутизатором, к другому. В задачи маршрутизатора входит выбор оптимального, с точки зрения трафика, пути для пересылки пакета. (Между прочим, пакеты одного и того же сообщения могут прийти к адресату различными путями.).

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

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

Для соединения локальной сети организации с Internet используется сетевой шлюз. Шлюз представляет собой отдельный компьютер локальной сети, часто выполняющий функции маршрутизатора. В обязанности шлюза входит трансляция (иногда применяется термин свертка) протоколов локальной сети в сетевой протокол Internet, ТСР/IP.

Скорость передачи информации по Internet зависит от скорости модема (или скорости обмена по локальной сети) и пропускной способности канала с Internet. Пропускная способность канала определяется количеством данных, передаваемых по линии за единицу времени.

1.2 Виды Web-технологий

1.2.1 Технология HTML

Для подготовки гипертекстовых документов используется язык HTML (Hyper Text Markup Language - язык разметки гипертекстовых документов), предоставляющий широкие возможности по форматированию и структурной разметке документов, организации связей между различными документами, средства включения графической и мультимедийной информации. HTML-документы просматриваются с помощью специальной программы - браузера. Наибольшее распространение в настоящее время получили браузеры: Google Chrome, Яндекс браузер, Opera, Firefox и Internet Explorer.

Google Chrome - это самый быстрый обозреватель из всех существующих. Он установлен на большинстве компьютеров, как в нашей стране, так и за её пределами. И не только десктопные платформы используют его. Хром является «родным» софтом на Андроиде, который служит операционной системой для подавляющего количества мобильных гаджетов.

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

Opera - один из первых достойных браузеров для ПК, которым я пользовался. Еще в средине 2000-х он был прост и удобен. Сейчас же он отличается стабильной работой, хорошей скоростью открывания страниц. Но самым главным преимуществом считается наличие визуальных закладок, которые можно настраивать, как пожелаете. Увы, не все обозреватели могут этим похвастаться.

Как и в Yandex Browser, в Opera есть кнопка «Turbo», которая позволяет сжать трафик и ускорить запуск сайтов при нестабильном соединении с сетью Интернет.

Firefox - не самый быстрый, но очень функциональный обозреватель.

Замыкает пятерку лучших браузеров обозреватель компании Microsoft - Internet Explorer. До девятой версии он был неэффективным, но с выходом новых версий его работа улучшилась. Нет того функционала, что у вышеперечисленных приложений, но для поиска информации и просмотра видео этого вполне достаточно. Конечно же, его популярность обусловлена тем, что он является встроенным в Windows. Хотя в «десятке» ему на смену пришел Edge (пока молодой и зелёный).

HTML является упрощенной версией стандартного общего языка разметки - SGML (Standart Generalised Markup Language), который был утвержден ISO в качестве стандарта еще в 80-х годах. Этот язык предназначен для создания других языков разметки, он определяет допустимый набор тэгов, их атрибуты и внутреннюю структуру документа. Контроль за правильностью использования дескрипторов осуществляется при помощи специального набора правил, называемых DTD- описаниями, которые используются программой клиента при разборе документа. Для каждого класса документов определяется свой набор правил, описывающих грамматику соответствующего языка разметки.

HTML - документ состоит из текста, представляющего собой содержание документа, и тегов, определяющих его структуру и внешний вид при отображении браузером. Простейший html-документ выглядит следующим образом:

<html>

<head>

<title>Название</title>

</head>

<body>

<p>Тело документа

</body>

</html>

Как видно из примера, тег представляет собой ключевое слово, заключенное в угловые скобки. Различают одинарные теги, как, например, <p>, и парные, как <body> </body>, в последнем случае действие тега распространяется только на текст между его открывающей и закрывающей скобкой. Теги также могут иметь параметры - например, при описании страницы можно задать цвет фона, цвет шрифта и т.д.: <body bgcolor="white" text="black">.

Текст всего документа заключается в теги <html>, сам документ разбивается на две части - заголовок и тело. Заголовок описывается тегами <head>, в которые могут быть включены название документа (с помощью тегов <title>) и другие параметры, использующиеся браузером при отображении документа. Тело документа заключено в теги <body> и содержит собственно информацию, которую видит пользователь. При отсутствии тегов форматирования весь текст выводится в окно браузера сплошным потоком, переводы строк, пробелы и табуляции рассматриваются как пробельные символы, несколько пробельных символов, идущих подряд, заменяются на один. Для форматирования используются следующие основные теги:

<p> - начало нового абзаца, может иметь параметр, определяющий выравнивание:

<p align=right>;

<br> - перевод строки в пределах текущего абзаца;

<u></u> - выделение текста подчеркиванием

Ссылка на другой документ устанавливается с помощью тега <a href="URL">...</a>, где URL - полный или относительный адрес документа. При этом текст, заключенный в тег <a>, обычно выделяется подчеркиванием и цветом, и после щелчка мышью по этой ссылке браузер открывает документ, адрес которого указан в параметре href. Графические изображения вставляются в документ с помощью тега <img src="URL">.

1.2.2 Технология JAVA

Язык программирования Java, разработанный 23 мая 1995 компанией Sun Microsystems и напоминающий по структуре и синтаксису хорошо знакомый многим программистам С, существует сегодня в Интернете в двух вариантах: JavaScript и собственно Java. Первый вариант языка является всего лишь надстройкой стандарта HTML и значительно расширяет возможности документа, созданного в этом формате. Модуль, написанный на JavaScript, интегрируется в файл HTML как подпрограмма и вызывается на исполнение из соответствующей строки HTML-кода стандартной командой. Встроенный в браузер интерпретатор языка воспринимает и скрипт, и сам код гипертекста как единый документ, обрабатывая те и другие данные одновременно. Модуль Java в отличие от JavaScript не интегрируется в использующую его страницу, а существует как самостоятельное приложение с расширением *.class или, выражаясь научным языком, апплет. При использовании этого варианта языка апплет также вызывается из html-файла соответствующей командой, но загружается, инициализируется и запускается на исполнение в виде отдельной программы, в фоновом режиме.

С помощью технологии Java можно придать своей странице элементы интерактивности, формировать, компоновать и полностью контролировать формат всплывающих окон и встроенных фреймов, организовывать такие активные элементы, как «часы», «бегущие строки» и иную анимацию, создать чат. Большинство web-камер, передающих на сайт «живое» изображение, также работают на базе соответствующих приложений Java.

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

1.2.3 Технология CSS

CSS (Cascading Style Sheets -- каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Это технология оформления веб-страниц, элемент концепции DHTML. Таблицы (точнее -- списки) CSS служат для оформления преимущественно HTML- и XHTML-документов, но иногда используются и для других документов, структурированных с помощью XML.

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

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

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

Можно решить эту проблему с помощью стандартных средств HTML: описывать каждый абзац отдельным набором команд, но в этом случае итоговый документ будет иметь большой размер, да и само создание кода становится весьма трудоемкой работой. Можно пойти другим путем: подключить к странице внешний файл, выполненный в стандарте CSS -- Cascading Style Sheets (каскадные таблицы стилей), в котором с помощью специального макроязыка один раз жестко задать форматирование страницы. Другими словами, файл CSS выполняет роль некоего шаблона, применяемого для форматирования текста, таблиц и иных элементов в документе HTML. Есть возможность подключать один и тот же физический файл CSS к различным web-страницам сайта. CSS можно использовать практически на любом сервере без каких-либо ограничений. Крупные недостатки у данной технологии также практически отсутствуют.

1.2.4 Технология РНР

РНР (Hypertext Preprocessor -- «PHP: препроцессор гипертекста»; первоначально Personal Home Page Tools -- «Инструменты для создания персональных веб-страниц») -- скриптовый язык общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов.

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

Язык и его интерпретатор (Zend Engine) разрабатываются группой энтузиастов в рамках проекта с открытым кодом. Проект распространяется под собственной лицензией, несовместимой с GNU GPL.

Код, написанный на языке РНР, встраивается в документ HTML подобно подпрограмме: в тот участок документа, где необходимо разместить интерактивный элемент, просто вставляется сценарий РНР. Мнемоника данного языка базируется на синтаксисе PERL, Java и С, благодаря чему не вызывает каких-либо трудностей при изучении. Методики, которые позволяют серверам корректно распознавать файлы, содержащие скрипты РНР, различны и зависят в первую очередь от типа конкретного сервера.

Технология РНР позволяет организовать на web-странице счетчик посещений, подсчитывать статистику обращений к тем или иным разделам сайта, защитить доступ к какому-либо html-документу паролем и многое другое. Среди недостатков РНР следует отметить то, что данная технология поддерживается далеко не всеми серверами Интернета.

1.2.5 Технология DHTML

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

DHTML построен на объектной модели документа (Document Object Model, DOM), которая расширяет традиционный статический HTML-документ. DOM обеспечивает динамический доступ к содержимому документа, его структуре и стилям. В DOM каждый элемент Web-страницы является объектом, который можно изменять. DOM не определяет новых тэгов и атрибутов, а просто обеспечивает возможность программного управления всеми тэгами, атрибутами и каскадными листами стилей (CSS).

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

DHTML приложения, которые вполне автономны в браузере, без серверной поддержки, такой как база данных, иногда вынуждены обращаться к Single Page Applications, или SPA.

Конкурирующая техника включает в себя Adobe Flash и Silverlight.

По большому счету DHTML представляет собой «среднее арифметическое» между технологиями HTML и JavaScript. Этот стандарт использует простые сценарии, подготовленные с помощью интерпретируемого макроязыка, обрабатываемого браузером совместно с кодом HTML. Такие сценарии именуются «скриплетами». Для создания скриплетов используются стандартные расширения DHTML и любой макроязык, поддерживающий директивы интерфейса ActiveX.



2. ПРОЕКТНАЯ ЧАСТЬ

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

1.Выявить основные целевые группы сайта.

2.Определить подсистему интерфейса.

3.Разработать требования к структуре сайта.

4.Разработать требования к функциональным возможностям сайта.

5.Определить требования к режимам функционирования и надёжности.

6.Выявить требования к видам обеспечения.

2.1 Основные целевые группы

- любой пользователь мировой паутины;

- руководство, владельцы сайта;

- постоянные клиенты компании;

- сотрудники сайта.

2.2 Подсистема интерфейса

Разработанный сайт предоставляет пользователям рабочие места в данной информационной среде, которые строятся по классическим принципам построения интерфейсов:

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

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

- соответствие стандартам поставщика GUI-интерфейса;

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

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

4. Эстетичность и удобство. Эстетичность интерфейса влияет на зрительное восприятие системы. Удобство касается легкости, простоты, эффективности, надежности и продуктивности в использовании интерфейса. Безусловно, оба принципа касаются удовлетворенности пользователя. Именно в этом вопросе разработчик GUI-интерфейса нуждается в помощи дизайнера.

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

- корпоративная идентификация (фирменная символика магазина крепежа, сайта, возможно, визуальная идентификация разделов сайта), размещается на каждой странице на достаточно небольшой площади;

- служебная информация - счётчики, копирайты, обратная связь, размещается в нижнем правом углу каждой страницы;

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

- лента новостных сообщений - размещается на главной странице;

- область других ссылок - ссылки на другие внешние ресурсы, относящиеся к тематике сайта;

- рабочая область модулей - в неё различные модули реализуют свой интерфейс с пользователем и выводят информацию, размещается в центре каждой страницы сайта;

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

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

Интерфейс обеспечивает возможность настройки пользователем размера экранных шрифтов.

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

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

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

2.3 Требования к структуре сайта «Тур Бюро»

Структуру сайта «Тур Бюро» функционально можно разделить на:

· Главная страница

· О компании

· Наши услуги

· Контакты

2.4 Этапы создания статичного сайта

Для того, чтобы создать сайт, необходимо выполнить 2 этапа работы:

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

· Верстка сайта. Наполнить сайт контентом и заставить все это работать.

2.4.1 Создание шаблона сайта

Как правило, этот этап работы выполняется в достаточно мощном графическом редакторе, например, Adobe Photoshop или CorelDRAW. Photoshop несколько проще в освоении и использовании, а его возможности очень велики. Именно поэтому среди веб-дизайнеров Photoshop пользуется вполне заслуженной популярностью. Воспользуемся им и мы.

Создаем в Adobe Photoshop новый документ. Задаем имя - MySite.

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

Устанавливаем цвет фона F7F7C5 в шестнадцатеричном виде или выбираем с помощью палитры цветов.

Выбрав пункт меню «Просмотр» - «Направляющие» активируем отображение линеек и направляющих.

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

Используя инструмент «Текст», пишем текстовое название будущего сайта, слоган под ним, а также контактный телефон справа в верху макета.



Слева от логотипа, как и справа от контактного телефона, проводим направляющие, которые позволят обозначить рамки по ширине сайта.

Затем с помощью инструмента «Формы» выбираем прямоугольник с закруглёнными краями (радиус - 8 точек), и с его помощью обозначаем место под изображение в шапке сайта:

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

В помощью инструмента «Текст», и шрифта Georgia, входящего в стандартный набор MS Windows, создаем навигационное меню и заголовок главной страницы сайта.

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

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

Перемещая правую границу основного текстового блока, вставляем изображение в тексте страницы (справа от текста).

Используя инструмент «Формы» - «Прямая», проводим заключительную линию под текстом страницы.

Под линией с помощью инструмента «Текст» (шрифт Arial) размещаем копирайт в подвале страницы.

Нарезаем нужные нам фрагменты изображений для вёрстки сайта с помощью инструмента «Раскройка» (мы выделили основную картинку в шапке и картинку в тексте страницы).

В результате проделанной работы получаем эскиз сайта. Для сохранения результатов работы в виде изображений для вёрстки сайта переходим в меню «Файл» выбираем «Сохранить для Веб». Далее настраиваем качество изображений и сохраняем, в результате получаем множество графических фрагментов нашего шаблона. В папке, куда был сохранен сам шаблон, появилась папка images с изображениями. Отбираем нужные и переименовываем.

Макет создан, необходимые фрагменты получены, можно переходить к верстке. Конечно, пока мы воспользовались лишь самыми примитивными возможностями Adobe Photoshop.

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

электронный статичный сайт целевой

2.4.2 Верстка сайта

Создаем в текстовом редакторе файл index.html.

Первой строкой файла должна быть строка вида

<html>

<head> «Голова» документа</head>

<body> «Тело» документа<body>

</html>

Теги формируют пары - открывающий и закрывающий. Последний всегда заканчивается на</.

Пара <html>...</html> говорит о том, что внутри содержится HTML-код.

Внутри <html>...</html> располагаются теги, которые не отображаются в основном окне. Как правило, они начинаются словом meta, и называются мета-тегами, а вот тег <title>...</title> отображается в заголовке окна браузера и используется поисковыми системами.

Следом располагается пара <body>...</body> в них заключено содержимое страницы. Именно эта часть, тело страницы, отображается в окне браузера.

Существует несколько способов организации контента. Наиболее популярные из них - организация с помощью блоков (<div>...</div>) и в виде таблиц (<table>...</table>).

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

На примере полученного сайта, структура его элементов выглядит следующим образом:

2.5 Требования к функциональным возможностям сайта

Функционально работу сайта можно разбить на следующие модули:

· Модуль статей, который отвечает за отображение гипертекстовых страниц в рабочей области;

· Модуль «О компании»;

· Модуль «Наши услуги»;

· Модуль «Контакты»;

2.5.1 Модуль статей

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

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

Верстка сайта предусматривает корректное отображение в следующих браузерах:

· Firefox

· Chrome

· Opera

· Opera mini

· Yandex browser

· Internet Explorer

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

2.5.2 Модуль «О компании»

С помощью модуля «О нашей компании» можно узнать:

· Чем занимается компания и как она может помочь

· Чем данное тур бюро отличается от остальных

· Какое количество туристов приобретают путевки и в какие туры

· Информацию о сотрудниках компании



2.5.3 Модуль «Наши услуги»

· кто целевая аудитория

· какие специалисты оказывают услугу и какой у них опыт работы

· особенности процесса оказания услуги

· за счет чего достигается высокий результат

· наличие дипломов и сертификатов.

2.5.4 Модуль «Контакты»

Модуль «контакты» позволяет просмотреть список контактов компании.

2.5.2 Модуль вывода новостей

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

2.6 Требования к видам обеспечения

2.6.1 Требования к информационному обеспечению

Ядро и все модули сайта используют единую базу данных, расположенную на одном или нескольких серверах баз данных.

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

2.6.2 Требования к программно-техническому обеспечению

Система обеспечивает функционирование в режиме 24x7 (бесперебойно круглосуточно).

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

Система совместима со всеми современными стандартами сетевого администрирования и сервиса.

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

Всё программное обеспечение, используемое как самой разрабатываемой системой, так и в процессе её разработки необходимо лицензировать к моменту запуска системы в промышленную эксплуатацию.



ЗАКЛЮЧЕНИЕ

В данной курсовой работе был разработан сайт туристического бюро.

В процессе создания сайта были успешно решены задачи, поставленные в начале работы:

- изучено понятие Web-технологии;

- рассмотрены различные виды Web-технологий;

- спроектирован сайт «Тур Бюро».

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

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

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

В свете широкого использования IT-технологий, представленная курсовая работа является актуальной и отвечает предъявленным к ней требованиям. Сайт создан при помощи HTML-технологии с элементами Adobe Photoshop и имеет удобный и понятный интерфейс и в полной мере отражает деятельность сайта туристического бюро.

Сделать, таким образом, сайт человеку владеющего технологиями HTML, не составит труда, при этом сам сайт будет очень быстро грузится и не требовать много ресурсов. Для того что бы сделать сайт более функциональным и динамичным необходимо написание кода сайта вручную с помощью программирования. Этот способ самый трудный и требует большого опыта в программировании. Конечно, для Web-программиста этот способ не составляет труда, но для новичка он не подходит, поскольку требует глубоких знаний HTML, CSS, JavaScript DHTML и других языков веб-программирования.

БИБЛИОГРАФИЧЕСКИЙ СПИСОК

1. Леа Веру. Секреты CSS. Идеальные решения повседневных задач: «Питер», 2016. - 320 с.

2. Дмитрий Котеров, Игорь Симдянов. PHP 7. Наиболее полное издание: «БХВ-Петербург», 2016. - 736с.

3. Брайан Хоган, Крис Уоррен, Майк Уэбер, Крис Джонсон, Арон Годин. Книга веб-программиста: «Питер», 2013. - 320с.

4. Роберт Басыров. 1C-Битрикс. Постройте профессиональный сайт сами: «Питер», 2009. - 496с

5. Дэвид Скляр. Изучаем PHP 7: «Диалектика», 2017. - 441с.

6. А.П. Никольский. JavaScript на примерах: «Наука и техника», 2017. - 448с.

7. Раушан Салихов. Разработка сайта самостоятельно: «Самиздат», 2016. - 512с.

8. Берд Джейсон. Веб-дизайн. Руководство разработчика: «Питер», 2012. - 224с.

9. Фрэйн Бен. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.: «Питер», 2016. - 272с.

Размещено на Allbest.ur