Файл: Разработка сайта спортивной секции «РандориКлуб».pdf

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

4. Для создания интернет-магазина воспользуемся следующим программным обеспечением:

Для верстки веб-страниц воспользуемся редактором Adobe Dreamweaver;
В качестве локального веб-сервера используем Denwer;
Для проверки корректности сверстанных веб-страниц будем пользоваться любым браузером, установленным в операционной системе.
Цветовое решение палитры цветов взято с https://colorscheme.ru/html-colors.html

4.1 Программная реализация структуры сайта Рандори Клуб

1. Для верстки готовых HTML-страниц использовалась программа Adobe Dreamweaver Portable.

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

После инсталляции локального веб-сервера Denwer на рабочем столе появятся три иконки (Start, Stop, Restart) которые обеспечивают Старт, Перезапуск и Останов локального веб-сервера. Основной папкой разрабатываемых сайтов является каталог z:\denwer\www, где собственно и располагаются папки с новыми проектами.

Для этого в каталоге z:\denwer\www создадим папку new_gift1 с разбиением на следующие подкаталоги:

Css – содержит все файлы каскадных таблицей стилей для всего сайта;
Fonts – набор шрифтов используемых на сайте;
Images – набор картинок, которые размещены на сайте;
Js – библиотеки javascript, которые используются для управления элементами веб-страниц, где это необходимо.

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

В папке new_gift1 создадим два файла веб-страниц:

Index.html – файл предназначен для созданий главной страницы. У любого сайта существует главная страница с названием Index и соответствующим расширением в зависимости от скриптового языка используемого при создании веб-сайта;
Index-4.html – файл предназначен для отображения страницы «Контакты» и формы обратной связи с представителем спортивной секции Рандори Клуб.

Страницы «Сервисы», «Галерея» и «Блог» будут сверстаны при расширении функционала.

Как уже отмечалось для просмотра результатов верстки сайта будем пользоваться браузером и локальным веб-сервером Denwer.

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

4.2 Рассмотрим, как реализованы страницы «Главная» и «Контакты».

Реализация Главной страницы, представлена на рисунке 10.8

Исходный код страницы представлен в Приложении 1.

На этой странице описывается следующее:

Логотип (который должен отображаться на всех страницах Рандори Клуба);

Рисунок 10.1 Логотип спортивной школы «Рандори Клуб»

Заголовок – правее логотипа спортивной школы Рандори Клуб располагается заголовок «Набор в школу дзюдо и самбо» - в данном заголовке должна быть вложена гиперссылка на страницу с расписанием тренировок.

Рисунок 10.2 Информационный заголовок «Рандори Клуб»

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

Рисунок 10.3 Движущаяся пиктограмма борцов в оглавлении сайта

Меню навигации по веб-страницам сайта (меню будет реализовано единообразно для всех страниц спортивной секции Рандори Клуб);

Под меню располагаются вложенные разделы следующих уровней.

Рисунок 10.4 Главное меню сайта спортивной школы «Рандори Клуб»

Все кнопки имеют вложенные разделы, например кнопка «О клубе» имеет вложенные разделы: История клуба, Тренерский состав, Расписание тренировок, Стоимость тренировок, Календарь мероприятий. В данный момент функционал кнопок не реализован – представлен макет выполненный в фотошопе. Основное действие по данным кнопкам вывод информации о деятельности спортивной секции;

Рисунок 10.5 Главное меню сайта со вкладками (списком ссылок второго уровня).

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

Рисунок 10.6 Фотография спортивной секции Рандори Клуба

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

«Школа дзюдо и самбо «Рандори», под руководством: мастера спорта, победителя первенства России по Самбо, Станислава Головачева и заслуженного мастера спорта, чемпиона мира, победителя кубка мира, чемпиона Европы, пятикратного чемпиона России по борьбе самбо – Руслана Сазонова, приглашает в школу дзюдо и самбо детей и взрослых на тренировки.»

Последним разделом на данной странице располагаются кнопки информационной поддержки клуба:

Рисунок 10.7 Кнопки интеграции сайта в страницы Живого Журнала

4.3 Макет основного сайта спортивной секции Рандори Клуб

Рисунок 10.8 главной страницы сайта «Рандори Клуб»

4.4 Макет головной части сайта в соцсети Живого Журнала

Рисунок 10.9 Главная страница «Рандори Клуб» в соцсети Ж.Ж.

Главная страница в живом журнале закреплена в виде шапки сайта методом встроенного действия «Сделать прикрепленной записью» Все кнопки обоих ресурсов взаимно интегрировано пересекаются, база живого журнала позволяет бесплатно оставлять комментарии и модерировать сообщения и создаваемые пользователями страницы, а также систематезированно выкладывать материалы – подвязывая данные текстовые и видеоматериалы на новые кнопки сайта. Видеоматериалы для быстроты открытия страниц и снижения нагрузки на сайт Рандори Клуба будут размещены на базе видеохостинга https://www.youtube.com/.

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

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

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

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

4.5 Страница «Контакты» - изображена на рисунке 11.1

Исходный код страницы приведен в Приложении 2.

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

2. На странице «Контакты» мы разместим карту с отмеченной точкой местонахождения Рандори Клуба, чтобы заинтересовавшиеся пользователи интернета при необходимости могли сориентироваться и подъехать к месту тренировок, чтобы осмотреть зал, переговорить с тренером и записаться в группу спортивной секции Рандори Клуба..