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

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

Структура сайта представляет собой такое расположение разделов, которое позволяет посетителям быстро переходить от одной страницы к другой, соблюдая правила 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 основных этапа:

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

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

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

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

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

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

ПРИЛОЖЕНИЕ

ПРИЛОЖЕНИЕ 1

Код шапки

ПРИЛОЖЕНИЕ 2

Шапка сайта

ПРИЛОЖЕНИЕ 3

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

ПРИЛОЖЕНИЕ 4

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

Задание

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

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

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

• функциональное назначение приложения;
• тип приложения;
• порядок разработки приложения;
• структура приложения.

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

В разработанных проектах студенты в праве указывать знак охраны авторского права.