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

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

Содержание

Введение

1. Общая часть

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

1.2 Используемые термины и определения

1.3 Описание языковых средств реализации проекта

1.4 Описание программных средств реализации проекта

2. Специальная часть

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

2.2 Эскизный проект

2.3 Технический проект

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

Заключение

Список используемых источников

Приложение А - Листинг html-, css- и js-кода



Введение

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

WWW - служба сети Интернет, которая позволяет легко получать доступ к информации насерверах, расположенных по всему миру. Web-браузеры позволяют пользователям просматривать Web-страницы для получения доступа к информации. Документы вWWW структурированы с помощью HTML и могут включать в себя многочисленные приложения (или взаимодействовать с ними). Всемирную паутину образуют сотни миллионов веб-серверов. Большинство ресурсов Всемирной паутины основано на технологии гипертекста. Гипертекстовые документы, размещаемые во Всемирной паутине, называются веб-страницами. Несколько веб-страниц, объединённых общей темой, дизайном, а также связанных между собой ссылками и обычно находящихся на одном и том же веб-сервере, называются веб-сайтом. Для загрузки и просмотра веб-страниц используются специальные программы -- браузеры.

Каждый может сделать свой вклад и разместить свой Web-cайт в сети.

Для этого необходимо решить следующие задачи:

1) изучить программный инструментарий, применяемый для разработки и создания web-сайтов;

2) выяснить цели и задачи проекта;

3) Анализ целевой аудитории и конкурентов, построение структуры проекта и создание прототипа;

4) Создание макетов;

5) Верстка и сборка сайта;

6) Привязка необходимых сервисов и систем;

7) Техническая и контент-поддержка;

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

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

web сайт



1. Общая часть

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

Требуется разработать информационный сайт по теме «Психбольница».

При создании сайта учитываются следующие требования:

1) количество страниц - не менее 5

2) в обязательный набор страниц входят:

- стартовая Страница,

- страница Услуги,

- страница О больнице,

- страница Тест,

- страница Вопросы,

- страница Контакты

- страница Войти

- страница Регистрация,

3) обязательными элементами сайта являются:

- меню,

- логотип, разработанный студентом,

- форма регистрации,

- форма теста.

4) на страницах должны использоваться следующие элементы:

-списки, ссылки, изображения, элементы форм (кнопки, текстовые поля для ввода и т.д.).

5) оформление и позиционирование элементов проводится с использованием каскадных таблиц стилей (css).



1.2 Используемые термины и определения

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

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

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

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

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

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

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



1.3 Описание программных средств реализации проекта

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

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

Если HTML необходим для структурирования содержания страницы, то CSS необходим для того, чтобы форматировать это структурированное содержание.

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

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

1.4 Описание средств разработки

При разработке проекта применены следующие программные средства:

1. Sublime Text - многофункциональный текстовый редактор с широким набором удобных инструментов для выделения, маркировки и обработки текстовых фрагментов кода. Интерфейс этого редактора очень лаконичен. Поддерживает огромное количество языков и предлагает на выбор около 20 цветовых схем. Кто работает с кодом знает, как важна в текстовом редакторе подсветка. Так вот в приложении есть возможность найти и подсветить ближайшие парные скобки просто поставив курсор внутрь какой-нибудь сложной функции - на самом деле очень удобно и практично. Что же касается работы непосредственно с текстом, то и тут утилита имеет много преимуществ: поддержка снипетов, автозавершение ввода функций, работа с макросами, удобный поиск, проверка орфографии, мультивыделение, закладки нужных мест, функция автосохранения и другое.

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

Базовые возможности

- Подсветка синтаксиса;

- Авто дополнение и автоматическое закрытие скобок и тэгов;

- Закладки;

- Регулярные выражения для поиска и замены;

- Поддержка множество плагинов по лицензии MIT;

- Поддержка и конвертирование более 50 видов кодировок;

- Блоковое выделение текста, одновременное выделение нескольких разных мест (с Ctrl);

- Мультистрочное редактирование (с использованием Alt);



2. Специальная часть

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

Предмет разработки

Предметом разработки является web - сайт психиатрической больницы «Больница имени Святого Люка»

Назначение сайта:

- Предоставление информации об истории психбольницы

- Предоставления информации об услугах психбольницы

- Предоставления информации о контактах психбольницы и ее местонахождении

Цель создания сайта:

Предоставление информации о больнице и возможность пользования ее услугами.

Требования к графическому дизайну

Требования к дизайну сайта

Должен быть использован розовый задний фон.

Основная цветовая гамма - оттенки зелёного и красного.

Использовать шрифт «Roboto», «Lora», «Verdana».

Все разделы сайта доступны с первой страницы.

2.1.2 Структура сайта

Сайт имеет следующую структуру:

1. Главная

1.1 Логотип психбольницы

1.2 Главное меню

1.3 Зазывающие слоганы

2. Услуги

1.1 Логотип психбольницы

1.2 Главное меню

1.3 Консультации

1.4 Психотерапия

1.5 Диагностика

1.6 Физиотерапия

1.7 Лечение болезней

3. О больнице

1.1 Логотип психбольницы

1.2 Главное меню

1.3 История

1.4 Внешний вид

1.5 Персонал психбольницы

4. Тест

1.1 Логотип психбольницы

1.2 Главное меню

1.3 Вопросы теста

1.4 Варианты ответов

5. Вопросы

1.1 Логотип психбольницы

1.2 Главное меню

1.3 Вопросы, задаваемые клиентами

1.4 Ответы

6. Контакты

1.1 Логотип психбольницы

1.2 Главное меню

1.3 Адрес

1.4 Телефон

1.5 Факс

1.6 Местоположение на карте

7. Войти

1.1 Логотип психбольницы

1.2 Главное меню

1.3 Форма входа

8. Регистрация

1.1 Логотип психбольницы

1.2 Главное меню

1.3 Форма регистрации

2.1.3 Функциональные требования

В верхней части каждой страницы должны быть:

- Логотип

- Список всех страниц

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

Требования к главной странице

Главная страница сайта должна содержать:

1) Шапка - логотип, разработанный студентом.

2) Главное меню - главная, услуги, о больнице, тест, вопросы, контакты, войти, регистрация.

3) Зазывающие слоганы

Рисунок 1 - Макет главной страницы



Требования к странице «Услуги»

Страница сайта «Услуги» должна содержать:

1) Логотип психбольницы

2) Шапка сайта

3) Список услуг, размещённый в таблицах

Требования к странице «О больнице»

Страница сайта «Услуги» должна содержать:

Логотип психбольницы

Шапка сайта

Историю

Описание внешнего вида

Персонал

Требования к странице «Тест»

Страница сайта «Тест» должна содержать:

Логотип психбольницы

Шапка сайта

Вопросы теста

Варианты ответов

1. Кем Вы являетесь?

2. _Студент _Школьник _Работяга _Совмещённое

3. Как много голосов в вашей голове?

4. _1 - 4 _5 - 8 _8 и более

5. Вы принимаете галлюциногенные препараты?

6. _Да _Нет _Иногда

7. Вы видите маленьких синих человечков?

8. _Да _Нет _Иногда

9. Вы верите в гороскопы?

10. _Да _Нет _Иногда

11. Сколько часов в день Вы спите?

12. _20 и более _7 - 10 _7 и менее

13. Бывают ли у вас приступы неконтролируемого смеха?

14. _Да _Нет _Иногда

15. Повышаете ли Вы голос без причины?

16. _Да _Нет _Иногда

17. Бьетесь ли Вы головой о стены, стол и т.п.?

18. _Да _Нет _Иногда

19. Страдаете ли Вы потерями памяти?

20. _Да _Нет _Иногда

21. Ходите ли Вы кругами?

22. _Да _Нет _Иногда

23.

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

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

Рисунок 2 - Схема теста

Требования к странице «Вопросы»

Страница сайта «Вопросы» должна содержать:

1) Логотип библиотеки

2) Шапка сайта

3) Вопросы

4) Ответы

Требования к странице «Контакты»

Страница сайта «Контакты» должна содержать:

1) Логотип библиотеки

2) Шапка сайта

3) Адрес

4) Телефоны

5) Факс

6) Местоположение на карте

Требования к странице «Войти»

Страница сайта «Войти» должна содержать:

1) Логотип библиотеки

2) Шапка сайта

3) Форма входа

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

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

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

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

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

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

Рисунок 3 - Схема формы входа

Требования к странице «Регистрация»

Страница сайта «Регистрация» должна содержать:

4) Логотип библиотеки

5) Шапка сайта

6) Форма входа

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

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

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

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

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

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

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

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

Рисунок 4 - Схема формы регистрации

2.1.4 Требования к системе управления сайтом

Общие требования к административной части

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

Требования к управлению сайта

Функция редактирования контента страниц для пользователя не предусматривается.

Требования к разделению доступа

Разделение доступа не предусматривается. Доступ к данным для редактирования и удаления осуществляется только администратором сайта. Клиенты, которые заходят на сайт не могут этого сделать.

Требования к хранению данных

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

Требования к языкам программирования

Для реализации статических страниц и шаблонов должны использоваться языки HTML5 и CSS3.

Для реализации интерактивных элементов клиентской части должны использоваться CSS.

Требования к организации гиперссылок

Все ссылки на сайте должны быть абсолютными.

Требования к иллюстрациям

Все рисунки и фото объемом более 1 kb (кроме элементов дизайна страницы) должны быть выполнены с замещающим текстом. Все рисунки должны быть в формате png или jpg (jpeg)

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

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

Операционная система - Windows XP/7/8/8.1/10;

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

Сайт должен быть доступен для полнофункционального просмотра с помощью следующих браузеров: Opera; Google Chrome; Microsoft Edge.

Сайт должен быть работоспособен (информация, расположенная на нем, должна быть доступна).

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

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

OС	Windows 7/8/8.1/10
Оперативная память	512 Mb RAM
Видеокарта	512 MB или лучше

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

Сайт должен выполняться на русском языке.

Требования к эргономике и технической эстетике

Сайт должен быть оптимизирован для просмотра при разрешении 1280*76, 1920*1080. Элементы управления должны быть сгруппированы однотипно -горизонтально либо вертикально - на всех страницах.

Требования к персоналу

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

2.2 Эскизный проект

Модуль «Графический интерфейс»

Входные данные: выбор ссылки для перехода

Выходные данные: вывод на экран выбранной по ссылке страницы

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

Навигация предусматривает переход по следующим страницам:

- Главная;

- Услуги;

- О больнице;

- Тест;

- Вопросы;

- Контакты;

- Войти;

- Регистрация;

2.3 Технический проект

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

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



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

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

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

При входе на сайт запускается главная страница. Рисунок 5, 6.

На ней размещен слоганы, приглашающие потенциальных клиентов.

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

При переходе на страницу «Услуги», можно просмотреть список предоставляемых услуг, размещённый в таблице. На рисунке 6-7 можно увидеть данную страницу



Рисунок 6 - Страница «Услуги»

Рисунок 7 - Страница «Услуги»

При переходе на страницу «О больнице» пользователь сможет ознакомиться с историей психбольницы, описанием её внешнего вида и персоналом. Данную страницу можно увидеть на рисунках 8-11

Рисунок 8 - Страница «О больнице»

Рисунок 9 - Страница «О больнице»

Рисунок 10 - Страница «О больнице»

Рисунок 11 - Страница «О больнице»

При переходе на страницу «Тест» сайт переходит на страницу с тестом, который пользователь может пройти. Рисунок 12

Рисунок 12 - Страница «Тест»

При нажатии на вкладку «Вопросы» запустится страница с вопросами, которые задаются клиентами, и ответами на них. Рисунок 13

Рисунок 13 - Страница «Вопросы»



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

Рисунок 14 - Страница «Контакты»

При выборе вкладки «Войти» пользователь может авторизоваться. Рисунок 15

Рисунок 15 - Страница «Войти»

При выборе вкладки «Регистрация» пользователь может создать новый аккаунт. Рисунок 16



Рисунок 16 - Страница «Регистрация»



Заключение

В данной курсовой работе был разработан интернет-сайт психиатрической больницы «Больница имени Святого Люка» для ознакомления с историей больницы и её услугами.

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

В процессе создания сайта были успешно решены задачи, поставленные в начале работы. Были изучены понятия Web-технологий и Web-дизайна.

Оценивая проделанную работу, можно сделать следующие выводы:

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

- Реализована форма регистрации и оформления заказа.

- Реализована навигация с помощью главного меню.

- Реализована форма теста.

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



Список используемых источников

1) Джон Дакетт - HTML и CSS. Разработка и дизайн веб-сайтов (2013)

2) Htmlbook.ru http://htmlbook.ru Дата обращения 11.11.2018

3) Scrum https://www.sibirix.ru Дата обращения: 25.11.2018

4) Softportal http://www.softportal.com Дата обращения 19.11.2018

5) HTML5BOOK https://html5book.ru Дата обращения 13.12.2018

6) Codepen https://codepen.io/ Дата обращения 30.11.2018

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

...