Проектирование архитектуры сайта

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

Рисунок 2.1. Структурная схема сайта.

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

 

2.2. Функциональная схема сайта

На рисунке 2.2. изображена функциональная схема сайта. Каждая страница сайта имеет свою ссылку – URL, переходя по которой от клиента к серверу посылается запрос на отображение сайта. На сервере это требование обрабатывается и, если такая страница существует, сервер посылает в ответ данные: саму страницу с прикрепленной базой данных, каскадную таблицу стилей(CSS). При наличие в браузере предустановленного Java-плагина, браузер сможет корректно отображать Java-скрипты, размещенные на странице. В противном случае он потребует установки плагина.

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

Рисунок 2.3. Уточненная структурная схема разрабатываемого сайта

Создание прототипов

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

На рисунке 2.4 изображен макет главной страницы сайта. В шапке <Header> расположена контактная информация. Такое расположение сразу заметно посетителю, когда он заходит на сайт. Здесь сфокусирована основная контактная информация: логотип компании, контактная информация, ссылки на социальные сети.

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

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

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

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

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

Макеты дизайна главной страницы и типовых страниц разработаны в редакторе PhotoshopCC. Макет главной страницы показан на рисунке 2.5.

Рисунок 2.5. Прототип главной страницы

 

 

HTML разметка

На рисунке 2.6 показано, как прототип разделен на блоки, которые являются каркасом страницы.

Рисунок 2.6 Прототип дизайна в виде блоков

Блок body – тело страницы html. Он охватывает весь остальной контент.

Тег <div> относится к универсальным блочным контейнерам и применяется в тех случаях, где нужны блочные элементы без дополнительных свойств.(htmlbook.ru).

Блок <div class="all"> - выполняет функцию «внутренней обертки» для придания дополнительных свойств.

Блок <div class=”header”> - шапка сайта.

Блок <div class="menu"> - навигационное меню сайта.

Блок <div class="content"> - контент страницы.

Блок <div class="slider"> - часть блока контента – ротатор изображений(слайдер).

Блок <div class="call"> - блок «он-лайн» заказа.

Блок <div class="block_left"> - блок частичного вывода информации о компании со ссылкой на страницу «О компании».

Блок <div class="block_right"> - Блок частичного вывода отзывов со ссылкой на страницу «Отзывы».

Блок <div class=”footer”> - «подвал» сайта.