 |
Разработка компонентов web-сайта
|
|
|
|
Разработка компонентов web-сайта
Компоненты главной страницы
Главная страница
Главной страницей сайта является страница index. Она представлена на рисунке 1. Index. php — традиционное название головного файла веб-сайта, написанного языком гипертекстовой разметки PHP.
Рисунок 1- Главная страница сайта
Этот файл ищется веб-сервером по умолчанию, если не указан другой файл в URL. Если ни один из этих файлов не существует на сервере, сервер может выдать либо листинг всех файлов указанного каталога, либо ошибку доступа 404 или 405 (рисунок 2).
Рисунок 2 – Ошибка доступа
Для дизайна сайта выбрана тема magicland. Она соответствует стилистике магазина, её цветовой гамме и тематической направленности продаваемых товаров.
Тема имеет серый фон, нежное синее обрамление главного поля шаблона. Наличие ярких цветов несёт в себе олицетворение лета, теплоты и вдохновения. В данной теме присутствуют художественные элементы: трава, листья. Шаблон имеет многофункциональное меню.
«Шапка» сайта
Вверху страницы находится серый прямоугольник с рисунком, который является " шапкой" данной страницы и сайта в целом, так как во всех остальных страницах она присутствует без изменений. «Шапка» страницы изображена на рисунке 3.
Рис. 3. «Шапка» web-сайта
С левого края шапки расположен заголовок сайта – название магазина – «Аалия» и пояснение назначения сайта – интернет-магазин. В самом верху расположено меню сайта. Меню представлено на рисунке 4.
Рисунок 4 – Меню сайта
«Тело» главной страницы
Главная страница является лицом сайта и должна кратко отображать максимальное количество информации. «Тело» страницы - это её основная часть, исключающая только верхнюю и нижнюю полосы, состоит из трёх колонок. «Тело» главной траницы представлено на рисунке 5.
|
|
|
Рисунок 5 – «Тело» главной страницы
В центральной колонке расположена краткая информация о компании, новые товары, спецпредложения, новости. Она представлена на рисунке 6.
Рисунок 6 – Центральная колонка
Справа находятся две колонки. Левая из них колонка содержит модули поиска товара, корзину и новинки. Это сделано для удобства просмотра пользователем недавних изменений на сайте. Постоянные покупатели всегда заинтересованы в быстром доступе к новому товару, для сокращения времени поиска был создан данный модуль.
Правая колонка содержит последние новости о компании. Реализовано это в виде скриптового кода, транслирующего и отображающего новостную ленту. Модули представлены на рисунках 7, 8, 9, 10.
Рисунок 7 – Модуль «Поиск товара»
Рисунок 8 – Модуль «Новинки»
Рисунок 9 – Модуль «Корзина»
Рисунок 10 – Модуль «Новости»
«Подвал» сайта
«Подвалом» называется нижняя полоса сайта, несущая менее важную информацию для рядового пользователя. Web-дизайнеры обычно располагают там ссылки на сайт своей студии, либо личную контактную информацию. Указывается город, к которому привязан данный сайт и год для отображения актуальности сайта.
«Подвал» сайта состоит из трёх элементов. Слева расположена надпись, отображающая год и информацию об магазине. Посередине расположены ссылки на ресурсы: информацию о препаратах, консультации врачей, а также дополнительное меню, навигация по сайту. Справа ссылка на управление сайтом, авторские права. В самом низу указана компания, которая разработала тему, и компания по оптимизации сайтов. Все элементы подвала изображены на рисунке 11.
Рисунок 11 - «Подвал» web-сайта.
|
|
|
Страница «Каталог»
Страница «Каталог» содержит все основные элементы сайта, такие как «шапка» и «подвал», а так же повторяет некоторые элементы главной страницы: поиск товара и корзина. В центре находятся картинки с подписями, указывающие категории товаров. Нажатием на картинку выбираем нужную категорию. Картинки содержат ссылки на соответствующие страницы. Эти страницы содержат описания товаров по категориям. На рисунке 12 представлена страница каталога.
Рисунок 12 – Страница «Каталог»
На страницу каталога можно попасть через главное меню сайта, которое находится вверху. Меню каталога состоит из категорий, на которые поделён весь товар на сайте и в магазине. Каждая категория является ссылкой на страницу с соответствующим видом товаров.
Подпункты меню являются ссылками на страницы. Они могут быть просмотренной (коричневого цвета) или активной (голубой цвет). Через некоторое время просмотренные ссылки снова становятся активными.
Рисунок 13 - Меню каталога
Страница «Об магазине»
Страница «Об магазине» состоит из «шапки» и «подвала», поиска товара и корзины. В центральной колонке расположен текст с информацией об магазине. Пример страницы на рисунке 19.
Рисунок 19 – Страница «Об магазине»
Страница «Доставка»
Страница «Доставка» также состоит из «шапки» и «подвала», поиска товара и корзины. В центральной колонке расположен текст об условиях доставки, месте доставки и способах доставки. Страница приведена на рисунке 20.
|
|
|
