Файл: Разработка сайта дошкольного учреждения – гимназия Петра Великого.pdf

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

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

Условно можно выделить три основных способа организации структуры сайта:

линейная структура. Web-страницы идут одна за другой, и пользователь должен просматривать их как слайд-шоу;
древовидная структура. Пользователь при заходе на главную страницу оказывается перед выбором, куда идти дальше. После перехода в нужный раздел, он подбирает необходимый подраздел и т.п.;
решетчатая структура. В ней все страницы размещаются в различных ветках. У пользователя есть возможность перемещаться по ним не только вертикально, но и горизонтально;
логическая структура сайта-визитки ДОУ «Гимназия Петра Великого», представленная в соответствии с рисунком 2.1.

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

Страница: О нас

Страница: Фотографии

Страница: Контакты

Страница выбранного раздела

Страница: Родителям

Рисунок 2.1 Логическая структура сайта-визитки

Основными пунктами меню являются:

«Главная страница»;
«О нас»;
«Фотографии»;
«Родителям»;
«Контакты».

Описание разделов и страниц главного меню сайта-визитки ДОУ «Гимназия Петра Великого»:

«Главная страница»: на данной странице находится общая информация об учреждении. Так как сайт разрабатывается не только для знающих пользователей, но и просто для создания представления об этом дошкольном образовательном учреждении, то есть краткое описание создания данного учреждения, на каком основании оно работает и кто является учредителем, чтобы дать возможность посетителю оценить все плюсы и минусы;
«О нас»: на этой странице показаны краткие видеоролики и небольшая информация о садике.
«Фотографии»: данный раздел будет особо интересен посетителям сайта-визитки, так как здесь представлены фотографии учреждения, воспитанников, педагогов;
«Родителям»: эта страница предназначена для размещения информации Родителям: список документов для возмещения части родительской оплаты;
«Контакты»: данная страница предоставляет информацию для связи с учреждением, а так же предоставляет схему проезда.

2.4 Классы пользователей

При проектировании сайта, можно выделить следующие классы пользователей:

посетитель;
администратор.

Прецеденты класса «Посетитель»:

просмотр информационных данных – прецедент используется классом «Посетитель» для просмотра статей;
просмотр фотографий – прецедент используется для просмотра фотографий ДОУ «Гимназия Петра Великого»;
обратная связь – прецедент используется для возможности отправки посетителем администратору письма на электронный адрес, посредством формы обратной связи.

Прецеденты класса «Администратор»:

добавление, удаление и редактирование информации – прецедент используется классом «Администратор» для добавления новых текстовых данных, удаление данных, редактирование необходимой информации;
добавление и удаление – прецедент используется для добавления фотографий и удаления картинок.

2.5 Реализация web-сайта и тестирование

На главной странице сайта-визитки, представленной в соответствии с рисунком 2.2, пользователь видит общую информацию о дошкольном образовательном учреждении «Гимназия Петра Великого».

Рисунок 2.2 Главная страница сайта-визитки ДОУ «Гимназия Петра Великого»

Страницы сайта-визитки ДОУ «Гимназия Петра Великого» имеют удобный, интуитивно понятный интерфейс. В правой части каждой страницы сайта находится главное меню с кнопками навигации по наиболее важным страницам.

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

Рисунок 2.3 Верхняя часть сайта

Для удобного перемещения по разделам сайта создано меню сайта, представленное в соответствии с рисунком 2.4. С его помощью пользователь может перейти в разделы:

«Главная страница»;
«О нас»;
«Фотографии»;
«Родителям»;
«Контакты».

Рисунок 2.4. Меню сайта

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

В центральной части на каждой странице располагается контент – содержимое страницы. Для каждой страницы содержимое контента меняется, но дизайн остается прежним.

Рисунок 2.6 Страница «Фотографии»

Для всего раздела «Фотографии» применен аналогичный стиль наполнения страниц.

На странице «Родителям» отображается информация о том, что понадобиться детям для посещения садика, что представлено в соответствии с рисунком 2.7.

Рисунок 2.7 Страница «Родителям»

Для того чтобы узнать как проехать в офис компании достаточно перейти на страницу «Контакты», что представлено в соответствии с рисунком 2.8. В данном разделе представлена схема проезда, а также размещена такая информация:

Юридический адрес
График работы
График приема

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

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

Mozilla Firefox;
Opera версия;
Google Chrome;
Internet Explorer;

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

Запустим сайт в браузере Google Chrome. Страница сайта, отображается корректно, как и было задумано разработчиком.

Запустим сайт в браузере Internet Explorer. Страница сайта, отображается корректно, как и было задумано разработчиком.

Запустим сайт в браузере Mozilla Firefox. Страница сайта, отображается корректно, как и было задумано разработчиком.

Запустим сайт в браузере Opera. Страница сайта отображается корректно, как и было задумано разработчиком.

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

ЗАКЛЮЧЕНИЕ

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

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

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

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

исследована деятельность ДОУ «Гимназия Петра Великого»;
проведен анализ и характеристика· работы учреждения;
выполнен обзор существующих web-сайтов направленных на реализацию изделий из металла;
сформированы требования к ·разрабатываемому сайту-визитке;
определены функциональные ·требования к сайту-визитке;
разработан интерфейс и элементы web-дизайна;
проведена апробация выполненной работы.

По результатам ·проведенного ·анализа можно ·сделать вывод, что в ДОУ «Гимназия Петра Великого» отсутствует средство детального информирования населения об учреждении.

С созданием сайта-визитки, пользователи получили возможность больше узнавать о «Гимназии Петра Великого», учреждение теперь может оперативно информировать посетителей сайта-визитки о новостях, затрачивая намного меньше средств, чем при использовании обычных каналов коммуникации.

Выполнено планирование сайта-визитки ДОУ «Гимназия Петра Великого».

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

На ·первом этапе· исследования были сформулированы цель, задачи и требования к сайту-визитке ДОУ «Гимназия Петра Великого».

Целью данной курсовой работы являлась разработка сайта-визитки ДОУ «Гимназия Петра Великого» для ·повышения информированности населения об учреждении и его деятельности.

Для достижения поставленной цели в курсовой работе, необходимо было понимать требования, которые были поставлены перед задачей создания сайта-визитки ДОУ «Гимназия Петра Великого». Требования, обычно предъявляемые к разрабатываемому программному продукту, были разделены на три основные группы:

социальные требования;
экономические требования;
технические требования.

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

язык гипертекстовой разметки HTML;
каскадные таблицы стилей CSS;
Визуальный HTML-редактор Adobe Dreamweaver CC 2017

Процесс проектирования сайта-визитки ДОУ «Гимназия Петра Великого» состоял из нескольких этапов, первым из которых было проектирование содержимого.

Процесс проектирования структуры сайта-визитки ДОУ «Гимназия Петра Великого» включал в себя 2 основных этапа:

определение общих требований к структуре сайта
проектирование логичекой структуры сайта-визитки ДОУ «Гимназия Петра Великого»

На следующем этапе разработки сайта-визитки ДОУ «Гимназия Петра Великого» было проведено планирование режимов доступа.

Этап создания сайта-визитки ДОУ «Гимназия Петра Великого» был реализован с использованием разработанных в курсовой работе требований к контенту и структуре.

Спроектированный сайт-визитка удовлетворяет всем требованиям, поставленным на этапе постановки задачи.

СПИСОК ЛИТЕРАТУРЫ

Учебные и справочные издания
Дженнифер Нидерст Роббинс «HTML5, CSS3 и JavaScript. Исчерпывающее руководство». 4-ое издание (2014)
Дэвид Макфарланд «Большая книга CSS3» (2014)
Брайан Хоган «HTML5 и CSS3. Веб-разработка по стандартам нового поколения» (2016)
Терри Фельке-Моррис «Большая книга веб-дизайна» (2017)
Дронов, Владимир HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / Владимир Дронов. - М.: БХВ-Петербург, (2016).
Интернет-ресурсы:
Материалы по html и css – [Электронный ресурс]. – Режим доступа: http://htmlbook.ru
Материалы по html и css – [Электронный ресурс]. – Режим доступа: https://www.w3schools.com/css/
Материалы по html и css – [Электронный ресурс]. – Режим доступа: https://webref.ru/css
Материалы по html и css – [Электронный ресурс]. – Режим доступа: https://html5book.ru/html-html5/

ПРИЛОЖЕНИЕ

ПРИЛОЖЕНИЕ 1

Код шапки

ПРИЛОЖЕНИЕ 2

Шапка сайта

ПРИЛОЖЕНИЕ 3

Главное меню сайта

ПРИЛОЖЕНИЕ 4

Контент сайта

Задание

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

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

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