Преподаватель который помогает студентам и школьникам в учёбе.

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

Содержание:

ВВЕДЕНИЕ

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

Понять необходимую маштабируемость, предварительно определить удобную и гарантированно рабочую структуру сайта,его эргономичность.

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

Возможные цели создания сайта:

- Облегчение получения пользователями актуальной информации о компании;

- Необходимость увеличения клиентских звонков в компанию;

- Удобная информационная поддержка клиентов в особенностях работы компании;

- Возможности дополнительного обучения пройденного учебного материала через видеоносители размещенные на сайте;

- Реклама компании;

- Упрощение процесса обратной связи;

Возможные задачи создания сайта:

- Увеличение лояльности клиентов;

- Увеличение продаж за счет новых клиентов;

- Сокращение расходов на службы технической и/или информационной поддержки;

- Увеличение объема продаж;

- Совершенствование и модернизация продукта и/или услуг;

Веб сайт – бесплатный круглосуточный канал предоставления актуальной информации посетителям сайта, клиентам, партнерам и сотрудникам компании в неограниченном объеме и формате.

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

- Сокращение расходов на другие виды рекламоносителей;

- Неограниченные возможности демонстрации продукта;

- Бесплатная и высоко-информативная обратная связь;

- Возможность уточнения интересов потенциальных и постоянных клиентов;

- Увеличение дохода компании за счет интернет-продаж;

- Платформа для обучения и тестирования сотрудников;

- Средство обмена конфиденциальной информацией между удаленными офисами;

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

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

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

Важно также сразу объяснить заказчику чего не стоит ждать от сайта:

- Убыточное предприятие не становится, вдруг, прибыльным.

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

- На следующий день вы не получите (быстро и дешево) очереди из потенциальных клиентов или партнеров.

- Всякая маркетинговая и рекламная политика требует финансовых затрат. А пользователям необходимо; во-первых, узнать о вашей компании в off-line (вне сети Internet); во-вторых, узнать о том, что у вашей компании есть веб сайт и узнать его адрес в Internet; в-третьих, зайдя на ваш сайт, ожидания пользователя должны быть оправданы; в-четвертых, вашей компании необходимо активно продвигать веб сайт в сети Internet по ключевым запросам в поисковых машинах, на профильных сайтах и т. д..

- Одно только создание сайта не сделает вас лидером рынка.

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

- Факт создания сайта не добавит компании лояльности со стороны пользователей (клиентов, партнеров).

- Ситуация такова, что наличие веб сайта само по себе не добавляет преимуществ компании, поскольку сайт может состоять из одной страницы с названием, телефоном компании и «весёлой картинкой». Такой сайт попадает под определение “Сайт-визитка”. Создание такого сайта может уложиться в бюджет, менее $100, не трудно догадаться, что эффективность такого веб-сайта будет сомнительна.

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

Конкретные цели и задачи заказчика описанные в этой курсовой будут представлены ниже - в рубрике "Цели и задачи поставленные заказчиком".

1. ОСНОВНАЯ ЧАСТЬ

1.1 Цели и задачи поставленные заказчиком

Создать головной сайт со стандартными возможностями для предоставления основной информации о РандориКлубе.
Создать пространство для общения сотрудников секции, спортсменов, занимающихся в секции и просто пользователей интернета (потенциальных клиентов спортивной секции). Данное пространство для общения должно быть бесплатно в обслуживании, иметь возможность премодерации и вообще модерирования (ограниченная реклама сторонних ресурсов в качестве оплаты пользования допускается). Пространство для общения будет по согласию сторон реализовано на базе соцсетей https://www.livejournal.com/ и https://vk.com/. Для РандориКлуба будут созданы конкретные страницы с возможностью общения и передачи информации.
Для передачи видеоинформации в целях сохранения быстроты работы сайта должен быть использован внешний бесплатный видеохостинг. По согласию сторон будет реализовано на базе платформы https://www.youtube.com
Данные страницы в соцсетях и страницы видеохостинга должны быть интегрированы в пространство сайта перекрестными ссылками и информационными составляющими.
Требование заказчика – из любой страницы РандориКлуба в соцсетях должна быть прямая возможность удобного перехода в любую точку пространства основного сайта и размещенных на сайте и в страницах РандориКлуба в соцсетях материалов. По согласию сторон будет реализовано методом создания сообщества РандориКлуба в соцсети https://www.livejournal.com/ и помещения в этом сообществе закрепленной верхней страницы (публикуемые пользователями и администратором материалы всегда будут ниже этой закрепленной страницы). В помещенной вверху странице будут логотип РандориКлуба и кнопки меню главного сайта, а также информационные кнопки указатели рубрик головного сайта и материалов Живого журнала. Перекрестные ссылки всех этих кнопок позволят удобно путешествовать по общему информационному пространству РандориКлуба. У РандориКлуба постоянно увеличивающаяся информационная составляющая: видеоматериалы, текстовая информация, литературная библиотека, общение и пересылка файлов – все должно быть структурировано по принципу сайта. Любой материал клуба ставится модератором в структурированном виде - удобном для дальнейшего использования виде. В любое время даже через годы должен быть удобный доступ к необходимому видео или тексту и т.д. Будет реализовано посредством систематизации вложенных страниц с материалами – объединением их в рубрики на отдельных страницах с кнопками ссылками. Объединением рубрик в кнопке с общим заголовком верхнего уровня и т.д. по принципу Википедии.
Построить структуру общего информационного пространства РандориКлуба таким образом чтобы пользование этим пространством активно продвигало головной сайт на верхние страницы большинства поисковых систем. Мета-теги будут настроены с учетом требований поисковых систем, что обеспечить продвижение сайта по ключевым словам в руcскоязычных поисковых системах Yandex, Aport!, Rambler, Google. Будет использована ЯндексМетрика и пр. Также любое передвижение по всему информационному пространству РандориКлуба будет идти по методу «Звезды», то есть через общее меню кнопок главной страницы. Частое попадание пользователей на главную страницу РандориКлуба в Живом Журнале и главную страницу основного сайта РандориКлуба будет обеспечивать постоянное нахождение данных страниц в верхней части рейтингов поисковых систем.
Все кнопки - на сайте, в живом журнале, вконтакте и т.д. должны иметь единообразный вид – должны быть похожи на кнопки головного сайта (это должны быть кнопки красного цвета с бордовым кантом и белой надписью названия кнопки), ссылка на конкретный ресурс везде должна иметь одинаковую по форме цвету и названию кнопку), Рисунок каждой кнопки должен быть хорошо и качественно виден, но одновременно должен быть ужат до минимума чтобы страницы открывались быстро даже при медленном интернете.

1.2 Описание разделов (страниц) сайта

Анализ исходных данных

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

Главная страница - основная страница сайта, обеспечивает доступ ко всем основным разделам сайта – разделам 1-го уровня). Внизу главной страницы по требованию заказчика будет установлена прокрутка ссылок на анонсы основных разделов Каталога.

Главная страница РандориКлуба содержит следующие основные элементы:

- Заголовок спортивной секции со встроенной гиперссылкой - «Набор в школу Дзюдо и Самбо»

- Логотип

Рисунок 10.1 Логотип спортивной секции

- Слоган клуба: «Дорога к спортивным победам – путь труда и равновесия!» (запасной слоган «Верь и старайся – усердие путь к успеху!»)

- Копирайт: © «Randoriclub»

- Краткая информация о клубе: Адрес: г. Москва. м. Дмитровская, м.Тимирязевская, улица Гончарова, 15а

телефоны: +7 (925) 449 – 07 – 85

2) Рандори Клуб в Живом Журнале - (кнопка на Основную страницу РандориКлуба в Живом журнале. Эта страница в ЖЖ является активным продолжением сайта – интегрированная перекрестными ссылками кнопками в Живой журнал часть сайта - она нужна для общения сотрудников, спортсменов, их родителей, тренерского штаба и зрителей).

На основе программных средств Живого журнала построена модель сайта, со страницами объединенными перекрестными ссылками-кнопками, имеющую свою отдельную главную страницу главным разделом-шапкой страницы и с вложенными разделами 1-го, 2-го, 3-го, и 4го уровня.

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

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

О клубе (кнопка открывающая вкладки):

- История Клуба

- Тренерский состав

- Расписание тренировок

- Стоимость тренировок

- Календарь мероприятий

Данный раздел содержит текстовую, видео и аудио информацию о клубе. Формирование и оформление текста осуществляется владельцем сайта и может иметь произвольную форму. Чтобы не перегружать страницы видеоматериалами использован метод интеграции в сайт видеоматериалов со своей страницы в ютубе. Видео встраивается в виде кода в редакторе страницы, код для встраивания видео берется с нужного видеоматериала на своей странице хостинга www.youtube.com . Для этого будет пройдена регистрация на хостинге и будут размещены на хостинге все необходимые видеоматериалы. Для дополнительной рекламы сайта на каждом выложенном в ютубе видео имеется телефон клуба, ФИО тренера, Адрес, и ссылка на сайт клуба.

2.Будни Самбо и Дзюдо

https://www.youtube.com/channel/UCZFc8MGh-fP36vRBKUymF0g?view_as=subscriber

(ссылка на сайт клуба)

4) Новости (копка новостей)

2.1 На главной странице РандориКлуба предполагается публиковать анонсы последних новостей спортивной секции.

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

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

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

Атрибуты новости:

- Заголовок , Дата (ссылка в списке ссылок новостной страницы)

- Заголовок , Дата;

- Полный текст новости.

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

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

[1-5] [6-10] [11-15] [16-20]

Дзюдо

Данный раздел содержит информацию о виде спорта Информация будет выводиться в виде списка-таблицы и иметь следующую структуру:

Дзюдо (кнопка открывающая вкладки):

- История Дзюдо

- Правила Дзюдо

- Дзюдо в России

- Кодекс Дзюдоиста

- Система рангов и поясов

- Техника Дзюдо

- Терминология

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

Дополнительно в верхней части страницы отображается меню кнопок главной страницы сайта

Самбо

Самбо (кнопка открывающая вкладки):

- История Самбо

- Правила Самбо

- Разряды Самбо

Галерея

Данный раздел содержит клубную информацию фото и видеоматериалов, а также текстовую информацию о ежедневной работе клуба. Для удобство материалы разделены на вкладки фото и видео.

Галерея (кнопка открывающая вкладки):

- Фото

- Видео

Контакты

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

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

Авторизация

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

Новости

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

Атрибуты новости:

- Заголовок , Дата (ссылка в списке ссылок новостной страницы)

- Заголовок , Дата;

- Полный текст новости.

[1-5] [6-10] [11-15] [16-20]

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

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

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

2.2 Внутренние страницы (общие требования)

Все внутренние страницы сайта по требованиям заказчика должны содержать следующие элементы:

- телефон Рандори Клуба

- логотип

- действующие кнопки основного меню сайта

2.3 Информация для размещения на ознакомительной странице:

РандориКлуб - датой основания клуба можно считать январь 2009 года, когда начала работу секция в зале по адресу Доброслободская улица, дом 5А. С самого начал клуб позиционировался для развития дзюдо среди взрослых занимающихся для чего занятия проводились в удобное для большинства работающих людей время – вечернее время в субботу и воскресенье, а также акцент в тренировках был сделан на укрепление физической формы.

Изначально школа активно сотрудничал с клубом дзюдо Дмитрия Носова, но в силу смены направленности клуба в сторону смешанных единоборств, было принято решение о создании отдельной школы дзюдо и самбо под руководством Руслана Сазонова и Станислава Головачева, результатом чего в январе 2011 года стало создание клуба дзюдо и самбо «РАНДОРИ». С начала своего существования школа базировалась в зале по адресу Малый Гавриков переулок, 29. С мая 2014 года тренировки стали проводится в новом зале по адресу улица Гончарова 15а, который был создан в том числе и усилиями спортсменов клуба. На сегодняшний день в клубе сформировалась взрослая группа, в которой насчитывается 35 – 40 регулярно занимающихся спортсменов, тренировки в которой ведет Станислав Головачев. Руководитель клуба Руслан Сазонов в текущий момент активно занят развитием детского дзюдо – создал и руководит детской секцией в городе Мытищи.

Школа поддерживает дружеские отношения с другими любительскими клубами дзюдо г. Москвы – клуб дзюдо на «Тульской», клуб дзюдо «Бронная слобода», клуб дзюдо «Печатники». В рамках данного сотрудничества проводятся совместные семинары, соревнования, аттестации.

3. Руководитель Клуба: Головачев Станислав Викторович

Мастер спорта по Дзюдо и Самбо

2003г.-стал бронзовым призером Первенства России по дзюдо среди юношей.
2006г.-стал бронзовым призером Первенства России по самбо среди юношей.
2008-стал бронзовым призером Первенства России по самбо среди юниоров и выполнил норматив Мастера спорта.
2010-стал победителем Первенства России среди молодежи по самбо.
с 2005г-по сегодняшний день является спортсменом -инструктором ГОУ ЦО Самбо-70.
2010г.-закончил Московский Педагогический Государственный Университет по специальности учитель физкультуры и тренер преподаватель.

3.1 Разработка приложения

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

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

3.2 Проектирование структуры веб-сайта

При создании сайта Рандори Клуб следует учитывать следующие факторы:

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

Задачи, решаемые сайтом при полном развертывании его функционала должен обеспечивать следующие функции:

Полная автоматизация процесса получения информации и регистрации на сайте с возможностью полноценного общения всех пользователей – начиная от сотрудников спортивной секции и заканчивая вновь пришедшими – потенциальными спортсменами;
Минимизация телефонных/почтовых контактов удобной подачи информации на сайте, за счет возможности передачи информации онлайн и посредством чатов;
Информирование пользователей Рандори Клуба о планируемых событиях, изменении расписания тренировок, новых приемах борьбы с видео для дополнительного анализа и обучения;
Возможность сделать предварительный запрос на вступление в клуб;
Информирование о дополнительных услугах и акциях;
Формирование прайс-листов по ценам на занятия в спортивной секции, чтобы пользователь в спокойной обстановке смог ознакомиться с ценами и смог принять решение о начале занятий и режиме тренировок;

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

- Главная страница – это фасад сайта на ней должны располагаться все основные кнопки. Эти кнопки должны обеспечивать доступ ко всем основным разделам сайта – разделам 1-го 2-го уровня.

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

Рандори Клуб в Живом Журнале – на данной странице должны располагаться продублированные все кнопки главного сайта со всей продублированной на страницах Живого журнала основной информацией взятой с главного сайта. Все страницы живого журнала оборудуются меню кнопок для активного удобного перемещения по пространству живого журнала Рандори Клуба. Задача использовать пространство живого журнала Рандори Клуба как активную часть общего (большого на два ресурса – головного сайта и сайта созданного на базе html – редактора живого журнала ) сайта; Вторая задача чтобы все страницы создаваемые в живом журнале продвигали в рейтингах головную страницу Рандори Клуба в живом журнале посредством перекрестных ссылок на основное меню кнопок этой головной страницы. Использоваться должна структура «Звезды», где тело звезды центральная страница живого журнала Рандори Клуба, а лучи это страницы разделов 1-го, 2-го, 3-го, 4-го, 5-го и других уровней. Также эти разделы могут перекресно по необходимости соединяться друг с другом посредством ссылок-кнопок. Все кнопки должны быть выполнены в одном стиле, для этого должен быть создан шаблон образа кнопки на которую помещаются разные названия разделов и далее производится линькование (установки на кнопку адресной ссылки для перехода на другую страницу сайта).
Галерея – на этой странице должны располагаться фотографии достижений «Рандори Клуба»;
Авторизация – данная страница предназначена для технического обеспечения работы головного сайта модераторами имеющими доступ к логину и паролю сайта;
Контакты – страница должна содержать контактные данные о спортивной секции «Рандори Клуб» (адрес расположения офиса, спортивного зала, адрес юридический (если таковые имеются), режим работы, телефоны и факсы). В последующем на данной странице предполагается добавить интерактивную Google-карту, чтобы пользователи могли в случае необходимости составить маршрут как посетить офис, спортивный зал и т.д. Также на этой странице должна быть возможность связаться с представителем фирмы и задать свой вопрос. Решить это можно посредством комментария к записи на странице.

Все веб-страницы должны будут содержать стандартные элементы управления:

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

3.3 Определение характеристик языков программирования в использовании для спортивной секции Рандори Клуб

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

Перечислим скриптовые языки программирования и дадим краткие их характеристики, используемые для создания сайтов:

- HTML – является стандартизированным языком разметки для Интернета. Большинство веб-страниц содержат описание разметки именно на языке HTML. При получении браузером документа с форматированием в HTML он интерпретирует его и в результате интерпретации на экран монитора или мобильного устройства выводится форматированный текст.

- Javascript - это один из самых популярных и мощных скриптовых языков программирования, который используется для разработки веб-сайтов. Является достаточно полезным, так как этот язык может помочь при создании управлении сайтом. Может выполнять довольно много функций, такие как - управление браузером, редактирование содержимого в документе, сценарии на стороне клиента и общения с пользователями, а также асинхронный обмен данными. Как правило, JavaScript используется для включения анимации, загрузки новых изображений, скриптов или объектов на веб-страницах и создания восприимчивого пользовательского интерфейса.

- Java - является мощным, надежным и безопасным языком программирования и обеспечивается платформой для вычислений с открытым исходным кодом, который может работать как отдельная программа или апплет, встроенный в веб-сайт. Может функционировать на различных программных платформах, включая Linux, Mac OS X и Windows.

- Php - специально предназначен для программирования на стороне веб-сервера. Его библиотека специализирована для задач, которые вы будете делать снова и снова в ходе программирования сайта. PHP также может встраиваться в HTML код, что дает ему огромное преимущество, таким образом позволяя вам смешивать верстку с программированием. PHP доступен для большинства операционных систем, включая Unix и Windows, а также является отличным языком программирования на стороне сервера для профессионального программирования. Язык является одним из наиболее широко используемых языков для веб-разработки. PHP - это встраиваемый в HTML скриптовый язык, который может быть использован, для того чтобы своевременно сформировать динамические страницы. С помощью этого языка можно достаточно быстро и легко расширить веб-приложение. PHP код может быть непосредственно размещен в HTML коде, без использования внешнего подключаемого файла.

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

- SQL - расшифровывается как «язык структурированных запросов». SQL является необходимой частью веб-разработки. Если при создании сайтова веб-разработчик использует базы данных такие как Microsoft SQL Server, Oracle, MySQL, и т.д., то он должен знать об этом языке и уметь его использовать.

- jQuery – является Javascript-библиотекой которая фокусируется на взаимодействии JavaScript и HTML. Помогает легко получить доступ к любому элементу DOM (объектная модель документа), обращаться к атрибутам и содержимому элементов DOM, а также манипулировать ими. Также библиотека предоставляет удобный API для работы с Ajax.

- Ajax – является технологией обращения к серверу без перезагрузки страницы. За счет этого уменьшается время отклика и веб-приложение больше напоминает десктоп. В первую очередь Ajax полезен для форм и кнопок, связанных с элементарными действиями: добавление товаров или услуг в корзину, подписаться на рассылку новостей и т.д.

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

На начальном этапе при проектировании веб пространства Рандори Клуба было принято решение использовать следующие скриптовые языки программирования - HTML, CSS, JavaScript, jQuery. При дальнейшем расширении решаемых задач и увеличения мобильности сайта «Рандори Клуб» будут дополнительно использованы языки программирования – Php, Ajax и базы данных.

3.4 Характеристика программного обеспечения используемого при создании сайта Рандори Клуба

Программное обеспечение, которое будет использовано для разработки сайта Рандори Клуба можно разбить на три категории:

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

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

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

Рассмотрим, какое программное обеспечение существует в каждом разделе, которые приведены выше и дадим им краткие характеристики.

К интегрированным средам разработки для веб, как и собственно и к графическим редакторам верстки макетов сайтов предъявляются следующие требования:

- Удобство использования – насколько редактор прост для новичков, насколько интуитивно понятен, когда открываем редактор впервые.

- Мощность – критерий всех новшеств, возможность редактирования кода, автодополнение т.е. подстановка по готовому шаблону, подсветка кода и т.д.

- Расширяемость – поддерживает ли плагины, дополнительные библиотеки.

- Эстетика – на сколько, редактор приятен на вид, на сколько аккуратно код или создаваемый в ней макет сайта выглядит в ней.

- Скорость – быстрота загрузки самой среды разработки и, на сколько, быстро загружаются большие файлы;

- Кросс-платформенность – доступен ли редактор для различных операционных систем.

3.5 Ряд интегрированных сред разработки предназначенных для создания веб-сайтов:

- Eclipse чаще всего используется для разработки Java приложений. Данный софт поддерживает плагины, которые обеспечивают возможность поддержки дополнительных языков программирования, таких как C/C++, Ruby, PHP и ряда других.

- Aptana Studio среда разработки, предназначенная для работы с тяжелыми AJAX приложений. Также как и Eclipse среда поддерживает большинство популярных веб языков: PHP, JavaScript, HTML, CSS, Ruby, Python и другие с помощью плагинов. Также есть Git интеграция, возможность тестировать приложение на локальном сервере. Подобно Eclipse, Aptana бесплатный и открытый ресурс.

- Dreamweaver данная среда разработки является частью приложений Adobe Suite предназначенных для веб дизайнеров. Dreamweaver поддерживает только наиболее популярные языки веб программирования – PHP, ASP.NET, JavaScript, HTML, CSS. Является удобной средой разработки для новичков, с поддержкой WISIWYG редактирования, возможностью предпросмотра дизайна сайта в самой среде разработки, предоставляет возможность тестирования готового веб-сайта на удаленном сервере и разработка приложений с помощью jQuery mobile и Phonegap. Dreamweaver доступен для операционных систем OSX и Windows.

- Visual Studio среда разработки от Windows. Редактор поддерживает большое количество языков программирования которые интегрированы в среду разработки. Предоставляет мощные средства для автозавершения кода, подстрочная документация, встроенный отладчик, проверка ошибок, дизайнер форм, создание схем баз данных и многое другое. Определенные недостатки – достаточно высокая цена, даже для экспресс версии (около 500 долларов), слишком большие системные требования, как к аппаратному обеспечению, так и к объему места на жестком диске при условии выборочной установки.

- Notepad++ удобный редактор кода под Windows. Хотя название и напоминает расширенный блокнот, но достаточно хорошо подходит как для новичков, так и для профессионалов.

- TextWrangler это бесплатный и легкий редактор для OSX, по функционалу похож на Notepad++. Поддерживает все языки программирования. Предлагает мощный функционал поиска и замены, манипуляции с текстом, сравнение файлов, FTP поддержка и многое другое.

- CodeLobster обладает простым и мощным функционалом для веб программиста. Подходит для всех версий ОС Windows: 8, 7, Vista, XP, 2003, 2000, ME, Server. Гибкая настройка рабочей среды, всплывающие подсказки по функциям, отладка. Редактор ориентирован именно для веб разработчика. Достаточно легко расширяется для работы с различными фреймверками: CakePHP, CI, Drupal, JQuery, Yii, Smarty, Symfony, WP, Facebook. Облегченный вариант редактора доступен бесплатно.

3.6 Теперь рассмотрим, какие графические редакторы существуют для веб разработки:

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

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

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

- Paint.NET – редактор фотографий предоставляет возможности корректировки растровых и векторных изображений с высокой четкостью. Ключевыми особенностями данной программы является:

- поддержка форматов bmp, png, gif, tiff, jpeg;

- внешний вид должен быть понятен неопытному пользователю;

- обработка изображений с наложением слоев;

- инструменты для векторной графики (клонирование рисунков, «волшебная палочка», масштабирование, замена цвета);

- вспомогательные эффекты (контраст, яркость, насыщенность, оттенок и 3D-вращение);

- плагины расширяют возможности графического редактора и насыщают его спецэффектами.

- PixBuilder Studio является бесплатным графическим редактором для видоизменения фотографий и других изображений широкого спектра действия. Функционал редактора рассчитан на профессионалов, которые выполняют задачи высокой сложности. Бесплатная программа содержит полный набор инструментов для редактирования фотографий, которая характерна для дорогостоящих аналогов. Ключевыми характеристиками данной программы являются:

- цветокоррекция (налаживание яркости, уровней цвета, баланса и использование градиента);

- Поддержка функции наложения слоев;

- Сохранение длинной истории операций графического редактора;

- Комплектация различными фильтрами;

- Средства трансформации и генерации растровых изображений;

- Отдельная панель функций: штамп, кисть, клонирование, вращение картинки;

- Поддержка популярных форматов: png, jpеg, gif;

- Простота для восприятия интерфейс.

3.7 Локальный веб-сервер

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

Ниже перечислены дистрибутивы локальных веб-серверов и их характеристики:

- Denwer. Данный локальный веб-сервер является бесплатным и предназначен для работы с сайтами, веб-приложениями и Интернет страницами. Данный продукт содержит необходимые дистрибутивы для упрощенной работы с сайтами, например, он содержит локальный веб-сервер Apache с различной поддержкой, панель phpMyAdmin и MySQL для работы с базами данных и ряд других программ. Данный локальный веб-сервер может работать с флешки. Основным недостатком данного локального веб-сервера является его не обновляемость. Последняя версия PHP вошедшая в дистрибутив Некоторые из приведенных ниже локальных веб-серверов содержат версию PHP версии 7.

- XAMPP – является специальной сборкой сервера от друзей Apache. Необходимые дистрибутивы позволяют запустить на нем полноценный веб сервер. Как и предыдущая программа распространяется по бесплатной лицензии. Данный сервер выпускается для следующих операционных систем Windows, Solaris, Mac OS X и Linux. Сервер также доступен для скачивания в виде четырех реализации (PHP 5.6.35, PHP 7.0.29, PHP 7.1.16 и PHP 7.2.4), что обеспечивает лучшую совместимость со старыми версиями веб-сайтов. Сервер предоставляет следующие преимущества:

- популярен своим очень простым пользовательским интерфейсом, что делает его любимым для многих начинающих пользователей;

- постоянное появление новых версий, процесс обновления происходит очень просто и удобно для пользователя;

- присутствуют дополнительные модули.

- AppServ (сайт — www.appservnetwork.com) – хороший сервер от тайского производителя, концепцией которого является легкая установка и настройка всех дистрибутивов за 1 минуту. Последний релиз сборки датируется январем 2017 года версия содержит релизы (PHP 5.6.30, PHP 7.1.1)

- VertigoServ — еще один неплохой и простенький в установке локальный сервер. Сборка очень гибкая, имеет хорошую производительность и занимает мало места на диске. К сожалению, пока работает только на ОС Windows.

- Zend Server Community Edition — бесплатный сервер от компании Zend, также предназначен для работы с веб-приложениями. В составе содержатся все необходимые компоненты для быстрой установки локального сервера на своем компьютере.

- Open Server — еще один отечественный портативный локальный сервер, который обладает высоким функционалом по разработке и созданию сайтов и других веб-проектов. Дистрибутив выпускается в трех вариантах – ULTIMATE, PREMIUM и BASIC. Имеет мультиязычный интерфейс (в том числе и русский) и предназначен для работы в ОС Windows. Позволяет добавлять дополнительные модули. Поддерживается работа со съемного носителя. Обеспечивает возможность редактировать и отлаживать код сайтов за счет включенных в сборку портированных версий программ, например, Notepad++. Данный сервер достаточно хорош и составляет хорошую конкуренцию большинству локальных веб-серверов приведенных в данном обзоре.

- Wampserver — еще одна неплохая сборка с русским языком при установке (мультиязычность). Имеется простое и понятное меню, а удобная установка и настройка сборки не вызывает особых трудностей. Настройку можно осуществлять, не затрагивая файлы конфигураций, что очень полезно начинающим веб-мастерам. Сервер распространяется по бесплатной лицензии и выпускается только для операционной системы Windows. Портативной версии данного локального сервера пока существует.

- 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. На странице «Контакты» мы разместим карту с отмеченной точкой местонахождения Рандори Клуба, чтобы заинтересовавшиеся пользователи интернета при необходимости могли сориентироваться и подъехать к месту тренировок, чтобы осмотреть зал, переговорить с тренером и записаться в группу спортивной секции Рандори Клуба..

Рисунок 11.1 Страница «Контакты» спортивной секции

5.1 При работе сайта предполагаются следующие разделы:

- Главная

- РандориКлуб в Живом Журнале

- О клубе:

История Клуба

Тренерский состав

Расписание тренировок

Стоимость тренировок

Календарь мероприятий

- Новости

- Дзюдо:

История Дзюдо

Правила Дзюдо

Дзюдо в России

Кодекс Дзюдоиста

Система рангов и поясов

Техника Дзюдо

Терминология

- Самбо:

История Самбо

Правила Самбо

Разряды Самбо

- Галерея:

Фото

Видео

- Контакты

- Авторизация

- РандориКлуб в Youtube

- РандориКлуб в ВКонтакте

- РандориКлуб в Инстаграм

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

Выводы

В данном разделе разработаны технические требования и структура для создания сайта спортивной секции Рандори Клуб.

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

Непосредственно разработаны две страницы для сайта.

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

Заключение

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

Критерии, которые предъявляет потенциальный пользователь при выборе конкретной спортивной секции и сайта спортивной секции.

Рассмотрены преимущества и недостатки сайта для спортивной секции.

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

Изучено и проанализировано программное обеспечение, которое использовалось для создания сайта Рандори Клуба.

При создании сайта спортивной секции «Рандори Клуб» были даны характеристики основных этапов разработки сайта.

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

В качестве программного обеспечения используемого при создании и тестировании сайта спортивной секции использовался Adobe Dreamweaver и локальный Web-сервер Denwer.

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

Литература

HTML Academy - Профессиональный Node.js Год выхода: 2018 Категория: Программирование, javascript, Node.js Видео: AVC/H.264, 1920x1080, ~644-1510 Kbps Аудио: AAC, 2 ch, 255-256 Kbps
Дебольт HTML и CSS. Совместное использование / Дебольт, Вирджиния. - М.: НТ Пресс, 2016. - 512 c.
Дронов, Владимир HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / Владимир Дронов. - М.: БХВ-Петербург, 2016. - 416

4. Лазаро, Исси Коэн Полный справочник по HTML, CSS и JavaScript / Лазаро Исси Коэн, Джозеф Исси Коэн. - М.: ЭКОМ Паблишерз, 2016. - 943 c. .

5. Флэниган Д., Javascript. Подробное руководство: пер. с англ. – СПб.: Символ-Плюс, 2012, - 1080 с.
Закас Н., Javascript для профессиональных веб-разработчиков– СПб.: Питер, 2015 – 960 с
Макфарланд Д.Новая большая книга по CSS – СПб.: Питер, 2016 – 720с
Дебольт В. HTML и CSS. Совместное использование - М.: НТ Пресс, 2013. - 512 c.
Дунаев, В.В. HTML, скрипты и стили - М.: СПб: БХВ, 2012. - 832 c.
Карпов, Б. Dreamweaver 3: краткий курс - М.: СПб: Питер, 2013. - 320 c.

10. Ловери, Д.В. Dreamweaver 4. Библия пользователя - М.: Диалектика,

Приложения

Приложение 1. Главная страница сайта «Рандори Клуб»

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

Рисунок 11.2 Верхняя часть главной страницы сайта «Рандори Клуб»

Код верхней части главной страницы:

<div class="header-1" style="margin: 0px; padding: 0px; background: url("../images/header_edges.png") 0px 0px repeat-y rgb(242, 242, 240); color: rgb(50, 50, 50); font-family: Arial, Helvetica, sans-serif; font-size: 12px;"><div class="header-2" style="margin: 0px; padding: 0px 5px; background: url("../images/header_edges.png") 100% 0px repeat-y;"><div class="header-3" style="margin: 0px; padding: 5px 10px 10px; overflow: hidden; background: rgb(255, 255, 255);"><br class="Apple-interchange-newline" />

</div></div></div><div class="header-b1" style="margin: 0px; padding: 0px; background: url("../../images/variations/redblack/header_corners.png") 0px 0px no-repeat rgb(242, 242, 240); color: rgb(50, 50, 50); font-family: Arial, Helvetica, sans-serif; font-size: 12px;"><div class="header-b2" style="margin: 0px; padding: 0px 7px; background: url("../../images/variations/redblack/header_corners.png") 100% -60px no-repeat;"></div></div><div id="logo" style="margin: 0px; padding: 0px; position: absolute; top: 10px; left: 15px; color: rgb(50, 50, 50); font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: rgb(242, 242, 240);"><h4 style="margin: 15px 0px 10px; padding: 0px; font-weight: normal; font-size: 16px; line-height: 16px;"><a href="http://randoriclub.livejournal.com/4894.html" style="color: rgb(65, 124, 171); text-decoration-line: none;" title="Главная страница – Рандори, школа дзюдо и самбо"><img border="0" src='http://judolife.ru/images/stories/logo_redblack.png' style="border: 0px;" /></a><a href="http://judolife.ru/about/calendar.html" style="color: rgb(157, 27, 31); outline: none;"><img border="0" src='http://ic.pics.livejournal.com/timur_mass/11753301/289876/289876_original.png' style="border: 0px; cursor: pointer;" /></a><a href="http://randoriclub.livejournal.com/6566.html" style="color: rgb(65, 124, 171); text-decoration-line: none;"><img border="0" class="preview2__thumb preview2__thumb_fit_height" src='http://www.gif-paradies.de/gifs/sport/karate/karate_0013.gif' style="border: 0px; cursor: pointer; color: red; font-family: Arial, sans-serif; font-size: 14px; max-width: 89px; max-height: 91px;" /></a></h4></div>

- Фотографии Главной страницы с внедренными ссылками для перехода на другие страницы сайта:

Рисунок 11.3 Фотографии с главной страницы. Полностью всю главную страницу посмотреть можно на Рисунке 10.8

Код сверстанных Фотографий Главной страницы с внедренными ссылками:

- Текстовой блок с информацией:

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

<span style="background-color: rgb(255, 255, 255);">Школа дзюдо и самбо «Рандори», под руководством: мастера спорта, победителя первенства России по Самбо, Станислава Головачева и заслуженного мастера спорта, чемпиона мира, победителя кубка мира, чемпиона Европы, пятикратного чемпиона России по борьбе самбо – Руслана Сазонова, приглашает в школу дзюдо и самбо детей и взрослых на тренировки.</span>

- Меню кнопок сайта Рандори Клуб (см Рисунок 10.7 )

Приложение 2. Главная страница «Рандори Клуб» в Живом Журнале

Рисунок 11.4 Логотип, название Журнала, Юзерпик, стандартное меню пользователей ЖЖ

Код элементов шапки страницы Живого Журнала

<li class="item item-recent item-selected" style="margin: 0px; padding: 0px 0px 0px 1em; border: 0px; outline: 0px; vertical-align: baseline; display: inline; position: relative; line-height: 33px;"><a style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 0.9em; vertical-align: baseline; text-transform: uppercase; line-height: 33px; color: rgb(169, 34, 66);" target="_self">СВЕЖИЕ ЗАПИСИ</a></li>

<li class="item item-friends" style="margin: 0px; padding: 0px 0px 0px 1em; border: 0px; outline: 0px; vertical-align: baseline; display: inline; position: relative; line-height: 33px;"><a href="https://randoriclub.livejournal.com/friends" style="margin: 0px; padding: 0px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: rgb(178, 178, 178); border-left-color: initial; border-image: initial; outline: 0px; font-size: 0.9em; vertical-align: baseline; text-decoration-line: none; color: rgb(169, 34, 66); text-transform: uppercase; line-height: 33px;" target="_self">ДРУЗЬЯ</a></li>

<li class="item item-archive" style="margin: 0px; padding: 0px 0px 0px 1em; border: 0px; outline: 0px; vertical-align: baseline; display: inline; position: relative; line-height: 33px;"><a href="https://randoriclub.livejournal.com/calendar" style="margin: 0px; padding: 0px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: rgb(178, 178, 178); border-left-color: initial; border-image: initial; outline: 0px; font-size: 0.9em; vertical-align: baseline; text-decoration-line: none; color: rgb(169, 34, 66); text-transform: uppercase; line-height: 33px;" target="_self">АРХИВ</a></li>

<li class="item item-profile" style="margin: 0px; padding: 0px 0px 0px 1em; border: 0px; outline: 0px; vertical-align: baseline; display: inline; position: relative; line-height: 33px;"><a href="https://randoriclub.livejournal.com/profile" style="margin: 0px; padding: 0px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: rgb(178, 178, 178); border-left-color: initial; border-image: initial; outline: 0px; font-size: 0.9em; vertical-align: baseline; text-decoration-line: none; color: rgb(169, 34, 66); text-transform: uppercase; line-height: 33px;" target="_self">ЛИЧНАЯ ИНФОРМАЦИЯ</a></li>

<li class="item item-addfriend" style="margin: 0px; padding: 0px 0px 0px 1em; border: 0px; outline: 0px; vertical-align: baseline; display: inline; position: relative; line-height: 33px; top: 3px;"><a class="btn btn-add" href="https://randoriclub.livejournal.com/" style="margin: 0px; padding: 0px; border: none; outline: 0px; font-size: 1em; vertical-align: middle; text-decoration-line: none; color: rgb(255, 255, 255); line-height: 33px; position: relative; display: inline-block; overflow: hidden; height: 35px; background-image: url("/sup/i/x-1-2.png?v=7503"); background-position: 0px -306px; background-repeat: repeat-x; background-color: rgb(180, 62, 90);" target="_self"><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; cursor: pointer; position: relative; float: left; overflow: visible; background-repeat: no-repeat; height: 35px; background-image: url("/sup/i/x-1-2.png?v=7503"); background-position: 0px -234px; font-size: 12px !important;"><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; cursor: pointer; position: relative; float: left; overflow: visible; background-repeat: no-repeat; height: 35px; background-image: url("/sup/i/x-1-2.png?v=7503"); background-position: 100% -270px;"><span style="margin: 0px; padding: 0px 13px 0px 32px; border: 0px; outline: 0px; vertical-align: baseline; cursor: pointer; position: relative; float: left; overflow: visible; background-repeat: no-repeat; height: 35px; background-image: url("/sup/i/x-1-2.png?v=7503"); background-position: 100% -270px; line-height: 26px;">Добавить в друзья</span></span></span></a></li>

</ul><h1 style="margin: 0px; padding: 0px; outline: 0px; font-size: 0.9em; vertical-align: baseline; line-height: 1em; font-weight: 400; height: 40px; text-transform: uppercase; color: rgb(0, 0, 0); font-family: Helvetica, Arial, sans-serif; background-color: rgb(255, 255, 255); border: 0px !important;"><span class="ljuser i-ljuser i-ljuser-type-C " data-ljuser="randoriclub" lj:user="randoriclub" style="outline: 0px; font-size: 9px; vertical-align: baseline; font-weight: 700; margin: 0px !important; padding: 0px !important; border: 0px !important; white-space: nowrap !important; width: auto !important; height: auto !important; position: static !important; display: inline !important; background: 0px 0px !important;"><a class="i-ljuser-profile" href="https://randoriclub.livejournal.com/profile" style="outline: 0px; vertical-align: baseline; text-decoration-line: none; color: rgb(59, 113, 194); margin: 0px !important; padding: 0px !important; border: 0px !important; width: auto !important; height: auto !important;" target="_self"><img class="i-ljuser-userhead ContextualPopup ContextualPopup ContextualPopup" src="https://l-stat.livejournal.net/img/community.gif?v=556?v=256.1" style="outline: 0px; cursor: pointer; image-rendering: pixelated; margin: 0px 1px 0px 0px !important; padding: 0px !important; border: 0px !important; vertical-align: text-bottom !important; width: 16px !important; height: 16px !important;" /></a><a class="i-ljuser-username" href="https://randoriclub.livejournal.com/" style="margin: 0px; padding: 0px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: rgb(178, 178, 178); border-left-color: initial; border-image: initial; outline: 0px; vertical-align: baseline; text-decoration-line: none; color: rgb(59, 113, 194);" target="_self"><b style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; cursor: pointer;">RANDORICLUB</b></a></span></h1><h2 style="margin: 0px 0px 0.5em; padding: 0px; border: 0px; outline: 0px; font-size: 3em; vertical-align: baseline; line-height: 1.1; font-weight: 400; clear: right; color: rgb(59, 113, 194); font-family: Helvetica, Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 30px; vertical-align: baseline;">Рандори Клуб</span></h2>

- Шапка Сайта в виде прикрепленной записи в Живом Журнале с меню кнопок связанных с головным сайтом.

Сайт построенный на базе Живого Журнала полностью дублирует всю информацию головного сайта и является отдельным и полностью работоспособным подразделением способным адекватно восполнить потерю головного сайта в случае неприятности с сервером или наймодателями домена http://judolife.ru/

Рисунок 11.5 Шапка Сайта в виде прикрепленной записи в Живом Журнале с меню кнопок связанных с головным сайтом.

Код Шапки Сайта в виде прикрепленной записи в Живом Журнале с меню кнопок связанных с головным сайтом

<a href="http://randoriclub.livejournal.com/414.html" rel="nofollow" style="margin: 0px; padding: 0px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: rgb(178, 178, 178); border-left-color: initial; border-image: initial; outline: 0px; font-size: 9.8px; vertical-align: baseline; text-decoration-line: none; color: rgb(197, 107, 128); font-family: Helvetica, Arial, sans-serif; background-color: rgb(255, 255, 255); line-height: 13.72px;" target="_blank"><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 9.8px; vertical-align: baseline; cursor: pointer; color: rgb(14, 135, 240);"><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 9.8px; vertical-align: baseline; cursor: pointer; line-height: 19.6px;">Рандори Клуб, Москва, ул. Гончарова д.15А , </span></span><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 9.8px; vertical-align: baseline; cursor: pointer; color: rgb(14, 135, 240);"><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 9.8px; vertical-align: baseline; cursor: pointer; line-height: 19.6px;">Тренер: Станислав Викторович Головачев: </span><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 9.8px; vertical-align: baseline; cursor: pointer; line-height: 18px; font-family: Arial, Helvetica, sans-serif;">+7 (925) 449 – 07 – 85</span></span></a>

Страница «КОНТАКТЫ» в Живом Журнале

Рисунок 11.6 - Страница «КОНТАКТЫ» в Живом Журнале

Код Страницы «КОНТАКТЫ» в Живом Журнале:

<b style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 1.8em; vertical-align: baseline; color: rgb(22, 125, 250);"><a href="http://judolife.ru/" rel="nofollow" style="margin: 0px; padding: 0px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: rgb(178, 178, 178); border-left-color: initial; border-image: initial; outline: 0px; font-size: 21.6px; vertical-align: baseline; text-decoration-line: none; color: rgb(197, 107, 128);" target="_blank">Клуб Самбо и Дзюдо "Рандори" Станислава Головачева</a></b><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 14px; vertical-align: baseline; color: rgb(34, 34, 34); font-family: Arial, sans-serif; line-height: 1.4;"> </span>

<p style="margin: 10px 0px 15px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline;"><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 1.4em; vertical-align: baseline;">Адрес: м. Дмитровская, м.Тимирязевская, улица Гончарова, 15а</span></p><p style="margin: 10px 0px 15px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline;"><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 1.4em; vertical-align: baseline;">телефоны: +7 (925) 449 – 07 – 85;  +7 (903) 623 – 19 – 11</span></p></div><a name="cutid1" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(0, 0, 0); font-family: Helvetica, Arial, sans-serif; background-color: rgb(255, 255, 255);" target="_self"></a>