Добавлен: 25.04.2023
Просмотров: 190
Скачиваний: 1
- главные материалы, предложения и категории услуг должны быть расположены на первом плане, чтобы заинтересовать посетителя;
В верхней части страницы помещается название сайта, отражающее его тему.
Изображение в окне браузера состоит из трех основных элементов:
- название сайта;
- главное информационное меню слева страницы;
Название сайта находится на каждой странице и не изменяется в зависимости от местонахождения на сайте.
Меню предназначается для навигации по сайту, в нем отображаются ссылки на все страницы сайта.
Основное содержание страницы меняется в зависимости от местонахождения пользователя.
Главная страница. Эта страница отображается при первом входе на сайт, ее оформление и содержание дает пользователю первое представление о сайте [6].
2. Практическая часть
2.1 Дизайн сайта
Самое главное для сайта - это разработать удобный, понятный и красивый интерфейс. Интерфейс-то, что видит пользователь в браузере: рамки, изображения, ссылки, надписи и т.д. В целях привлечения большего числа клиентов и лучшего визуального восприятия сайта, необходимо создать интерфейс максимально привлекательным и в то же время максимально простым, чтобы комфортно пользоваться сайтом могли даже неопытные пользователи. Также необходимо наполнить сайт информацией и соответствующим контентом, для того, чтобы сделать сайт наиболее информативным и привлекательным [8].
Начнём создание сайта с главной страницы. Главная страница - это страница, на которую попадает пользователь, как только входит на сайт (рисунок 1). На ней должна предоставляться информация о центре фитнеса и красоты, и об услугах, предоставляемых им. Также информация должна быть подана в надлежащем виде, чтобы убедить клиента воспользоваться услугами именно нашего центра.
Рисунок 1 - Главная страница сайта
Как видно, на главной странице сайта содержится самая главная информация о центре фитнеса и красоты и её услугах. Создавалась страница с помощью редактора Notepad ++.
Следующая страница сайта - это страница «Тренерский состав» (рисунок 2). На этой странице располагается информация о составе работников центра, и его должностей. Цель данной страницы - познакомить клиента с тренерским составом и их методах работы (приложение Б).
Рисунок 2 - Страница «Тренерский состав»
На странице «Персональный тренинг», находится информация об персональных тренингах, их программах и целях (рисунок 3), код данной страницы представлен в приложении В.
Рисунок 3 - Страница «Персональный тренинг»
Ниже находится ссылка на страницу «Аэробика» (рисунок 4). Здесь собрана вся информация об их классах и видах (приложение Г).
Рисунок 4 - Страница «Аэробика»
При переходе на ссылку «Другие направления», мы можем увидеть информацию не только о групповых занятиях, программах обучения танцев и поддержания тонуса тела, но и о тренере, проводящем занятие, его графике и телефонные данные (рисунок 5). Для просмотра кода, обратимся к приложению Д.
Рисунок 5 - Страница «Другие направления»
Затем, идет ссылка на страницу «Дополнительные услуги» (рисунок 6). Код страницы программы «Дополнительные услуги» в приложении Д.
Рисунок 6 - Страница «Дополнительные услуги»
Информационное меню, находящееся по центру, включает в себя «Фото», «Акции», «Новости» (рисунок 7). На страницу «Фото» находится фотогалерея центра красоты и здоровья (приложение Е).
Рисунок 7 - Страница «Фото»
На странице «Акции» - информация о различных акциях, бонусах и скидках (рисунок 8). Для просмотра кода страницы «Акции» воспользуемся приложением Ж.
Рисунок 8 - Страница «Акции»
На странице «Новости» пользователь может узнать последнюю информацию о различных мероприятиях, как пройденных, так и будущих (рисунок 9). Код страницы в приложение З.
Рисунок 9 - Страница «Новости»
Следующая страница - «Обратная связь». Её цель - возможность для клиентов фитнес-центра связаться с тренером или с администратором, оставить отзыв, предложение, пожелание или жалобу. Данная страница выполняет удаленный диалог между пользователем и администратором сайта центра красоты и здоровья.
Рисунок 10 - Окно отправки темы звонка
Чтобы оставить отзыв, пользователь должен заполнить поля «Ваше имя», «Телефон» и написать текст пожелания или отзыва (приложение И). После этого письмо будет отправлено на почту администрации сайта для дальнейшего рассмотрения (рисунок 10).
После того, как мы заполним поля и нажмем кнопку «Отправить», мы попадём на другую страницу, где можно будет увидеть текст нашего заказа и вернуться к просмотру других страниц (рисунок 11).
Рисунок 11 - Текст отзыва
Также страница «Обратная связь» состоит из двух файлов: первый - это, непосредственно, сам файл «otziv.html», состоящий из диалоговых окон и формы для отправки сообщения. А во втором файле «otziv.php» описан сам код для отправки сообщения и, при успешном выполнении, вывода второй страницы с текстом сообщения.
2.3 Технические и программные требования при разработке web-сайта
В процессе создания веб-сайта, в рамках курсовой работы использовались следующие технические средства.
Технические средства:
– процессор Intel® Pentium® CPUB950 (2,10 ГГц, 2 МБ L3 Cache);
– оперативная память 4Gb DDR3;
– видео карта 2Gb DDR3;
– жесткиq диск на 320Gb;
Программные средства:
– подлинная Windows® 7 Домашняя (64 Бит);
– Microsoft Office SharePointт 2007;
– наборwebразработчика (PHP 5.3.3, PHPMyAdmin, OpenServer);
– Adobe PhotoShop CS6;
Заключение
Результатом курсовой работы стал готовый к работе web - сайт в котором размещена информация о центре фитнеса и красоты. В ходе проведения работы были решены поставленные в курсовой работе задачи. Оценивая проделанную работу, можно сделать следующие выводы:
- сайт предоставляет пользователям наиболее нужную ему информацию, а именно возможность ознакомиться со списком услуг в сфере спорта, красоты и здоровья;
- дизайн сайта соответствует предполагаемым предпочтениям целевой группы, времени и целям нахождения потенциальных клиентов на сайте;
- реализована навигация с помощью меню по страницам сайта.
- реализованы отзывы и заявки;
- разработан логотип сайта.
Для реализации сайта были использованы следующие средства:
– Denwer;
– Notepad++;
– программное средство open server;
– язык разметки гипертекста html и css;
– язык программирования php;
– phpmyadmin;
– adobe photoshop CS6;
– JavaScript.
В дальнейшем разработанный нами web-сайт можно будет использовать в реальной жизни. Так же возможно расширение списка предоставляемых услуг, акций, новостей.
Данный ресурс стабилен в работе и не требует высоких знаний для работы с ним.
Список использованных источников
1. DENVER [Электронный ресурс] - Режим доступа: http://www.denwer.ru/ (дата обращения 16.05.2018).
2. htmlbook.ru [Электронный ресурс] - Режим доступа: http://htmlbook.ru/ (дата обращения 20.05.2017).
3. OpenServer [Электронный ресурс]. URL: http://open-server.ru/ (дата обращения 15.05.2018).
4. Wikipedia [Электронный ресурс] - Режим доступа: http://ru.wikipedia.org/wiki/ (дата обращения 10.05.2017).
5. Веллинг, Л. Разработка веб-приложений с помощьюPHP и MySQL [Текст] / Л. Веллинг, Л. Томсон. - Вильямс 2019 - 848 с.
6. Горнаков, С.Г. Осваиваем популярные системы управления сайтом [Текст] / С.Г. Горнаков. - М.: Наука, 2016. - 30 с.
7. Кузнецов М, Симдянов И. PHP 5/6 в подлиннике [Текст] / М.В. Кузнецов И.В. - БХВ-Петербург, 2019. - 1024 с.
8. Лоусон, Б. Изучаем HTML5 [Текст] / Б. Лоусон, Р. Шарп. - СПб.:Питер, 2016. - 272 с.
9. Маскиано, Ч. HTML и XHTML. Подробное руководство [Текст] / Ч. Маскиано, Б. Кеннеди. - Символ-Плюс 2017. - 752 с.
10. Прохоренок, Н.А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера[Текст] / Н.А. Прохоренок. - СПб.: БХВ-Петербург 2015. - 912 с.
11. Фримен, Э. Изучаем HTML, XHTML и CSS [Текст] / Э. Фримен. - СПб.: Питер, 2018. - 656 с.
12. Чиртик, А.В. Популярный самоучитель HTML [Текст] / А.В. Чиртик. - СПб.: Питер, 2017. - 56 с.
13. Янк, К. PHP и MySQL. От новичка к профессионалу [Книга] / К. Янк. - М.: Эскимо, 2018. - 384 с.
Приложения
Приложение А
Листинг файла jenya.html
<! doctype html public «- //w3c //dtd html 4.01 //en» «http://www.w3.org/tr/html4/strict.dtd»>
<html>
<head>
<meta http-equiv= «content-type» content= «text/html; charset=utf-8» />
<title>центр фитнеса и красоты</title>
<meta name= «keywords» content=»» />
<meta name= «description» content=»» />
<link rel= «stylesheet» href= «style.css» type= «text/css» />
</head>
<body alink= "#000000» link=@ «000000» vlink= "#000000»>
<body onload= «getname()»>
<!-<div class= «share»></div>->
<div class= «wrapper»>
<div class= «header»>
<strong><p><font style= «font-size: 40px;»> «foksport»</font></p></strong><br/><font style= «font-size: 30px;»> - современный фитнес зал для всех желающих заниматься спортом и здоровым образом жизни.</font><br><br>
</div><! - .header->
<div class= «middle»>
<div class= «container»>
<div class= «content»>
<table>
<tr>
<th><a href= «foto.html»>фото</a></th>
<th><a href= «activ.html»>акции</a></th>
<th><a href= «novosti.html»>новости</a></th>
</tr>
</table>
<font style= «font-size: 17px; "><p><br><strong>foksport</strong> - энергия, красота, жизнь. фитнес-клуб «foksport» существует в брянске с 2005 г. мы предлагаем большой выбор тренировок для женщин и мужчин различного возраста.</br></p>
<p><br>фитнес центр «foksport» в городе брянске предлагает своим клиентам отличные условия для проведения индивидуальных и групповых тренировок по различным фитнес - направлениям.</br></p>
<p><br>команда тренеров «foksport» - это активные и постоянно развивающиеся профессионалы, которые помогут вам в кратчайшие сроки добиться желаемого результата.</br></p>
<p><br>почему нас выбирают: 1.мы любим наших клиентов. 2.с нами выгодно. 3.с нами удобно. 4.мы профессионалы и постоянно развиваемся. 5.у нас большой выбор групповых программ и дополнительных услуг.<br></p>
<br><strong>выбирайте лучшее для себя и своего организма, ведь спорт - жизнь!</br></strong></font>
</div><! - .content->
</div><! - .container->
<div class= «left-sidebar»>
<font style= «font-size: 22px;»><br><br><br><p><a href= «trener.html»>тренерский состав</a></p><br><br><p><a href= «persontrening.html»>персональный тренинг</a></p><br><br><p><a href= «aero.html»>аэробика</a></p><br><br><p><a href= «drugnaprav.html»>другие направления</a></p><br><br><p><a href= «dopuslugi.html»>дополнительные услуги</a></p></font><br><br><br>
</div><! - .left-sidebar ->
<div class= «right-sidebar»>
<!-<p><img src= «images/ar.jpg» width= «165» height= «120»></p><p><img src= «images/as.jpg» width= «165» height= «117»></p><img src= «images/ad.jpg» width= «165» height= «115»>->
<center class='menus'><marquee style=width: 88px; height: 130px scrollamount='1'direction='up'width='170'height='360'onmouseout='this.scrollamount=1'onmouseover='this.scrollamount=0'><div class='menus' align='center'>
<a href='http://jenya/images/_1ywoqwv4ag.jpg'><img src='http://jenya/images/_1ywoqwv4ag.jpg' width='165' height='117'></a><br>
<a href='http://jenya/images/npz1lpx1bgu.jpg'><img src='http://jenya/images/npz1lpx1bgu.jpg' width='165' height='117'></a><br>
<a href='http://jenya/images/6g2hjmcxss8.jpg'><img src='http://jenya/images/6g2hjmcxss8.jpg' width='165' height='117'></a><br>
<a href='http://jenya/images/snim.jpg'><img src='http://jenya/images/snim.jpg' width='165' height='117'></a><br>
<a href='http://jenya/images/as.jpg'><img src='http://jenya/images/as.jpg' width='165' height='117'></a><br>
<a href='http://jenya/images/fadw.jpg'><img src='http://jenya/images/fadw.jpg' width='165' height='117'></a><br>
<a href='http://jenya/images/c0sxxxowovc.jpg'><img src='http://jenya/images/c0sxxxowovc.jpg' width='165' height='117'></a><br>
<a href='http://jenya/images/jlx6whpqx6i.jpg'><img src='http://jenya/images/jlx6whpqx6i.jpg' width='165' height='117'></a><br>
</marquee></center>
</div>
</div><! - .right-sidebar ->
</div><! - .middle->
</div><! - .wrapper ->
<div class= «footer»>
<strong>контактные данные:</strong>
<p>(499) 753-63-63</p>
<p>пн-пт с 10 до 22</p>
<p>сб с 12 до 18</p>
вс выходной
<a href= «tabl.php»>отзывы</a><!-<a href= «otziv.html»>обратный звонок</a>->
<script>
function fullwin() {
window.open («otziv.html», "», «scrollbars»)
}
// ->
</script>
<form>
<center>
<input type= «submit» onclick= «fullwin()» value= «обратная связь»>
</center>
</form>
<div style= «position:absolute; top:75px; right:20px»><div><span id= «syn1clock» style= «font-size:18px;»><noscript>включите javascript для отображения часов</noscript></span></br />
<a id= «syn1l» style= «display:block; overflow:hidden; width:10px;» href= «http://syn1.ru/"><img alt= «анализ сайта» src= «http://syn1.ru/img/under.gif» /></a></div>