Футбольный клуб 'Арсенал'
Курсовая работа
"Футбольный клуб
"Арсенал"
Содержание
Введение
Постановка задачи
1.1 Разработка архитектуры
1.2 Разработка навигации по сайту
2. Реализация поставленной задачи
2.1 Разработка интерфейса
3. Некоторые предложения и дополнения для решения вопроса
Заключение
Список используемой литературы
Приложение
Введение
Сайт - совокупность электронных документов
<#"786842.files/image001.gif">
Рисунок 1 - Внешний вид главной страницы
Вся информация в главном окне представлена в пределах блока div:
<div id="header">
<div>
<h1 id="logo">
</div>
</div>
<div id="navigation">
<div>
<div>
<ul>
<li><a
href="Главная.html">Главная</a></li>
<li><a
href="Видео.html">Видео</a></li>
<li><a
href="История.html">История клуба</a></li>
<li><a
href="Состав.html">Состав</a></li>
<li><a
href="Новости.html">Новости</a></li>
<li><a
href="таблица.html">Турнирная таблица</a></li>
</ul>
<div>
</div>
</div>
<div id="heading">
<div>
<div id="heading-cnt">
<div id="side-nav">
<ul>
<li><div>
<li><div>
<li><div>
<li><div>
</ul>
</div>
На остальных страницах главное меню представлено в таких же
блоках.
Данные информационные блоки могут содержать большое
количество текстовой и графической информации. На каждой странице фон содержит
темно серые тона (Рисунок 2).
Рисунок 2 - Фон
Как мы видим сам фон имеет средний размер. Он задаётся этим
кодом:
{size: 12px;family: Arial, sans-serif;: #fff;:
#171717;: 100%;align: left;
}
Этот код приведен из таблицы CSS.
Главная страница сильно не отличается от всех остальных, так
же на ней имеются элемент JavaScript.
Изображено главное меню сайта. (Рисунок 3).
Рисунок 3 - Главное меню сайта
В данном курсовом проекте использовалась реализация
технологии JavaScript-сценариев.
<slider> - скрипт, который отвечает за
функционирование слайдера на всех страницах сайта. Его задачей является смена
изображения. (Рисунок 4).
Рисунок 4 - слайдер
На странице "Состав" расположен список игроков
Арсенала 2013г., а так же их статистика. (Рисунок 5).
Рисунок 5 - Состав
На страницах "Архивы" расположены таблицы
предыдущих сезонов английской премьер лиги. (Рисунок 6).
Рисунок 6 - Архивы
3. Некоторые
предложения и дополнения для решения вопроса
Для создания полноценных многофункциональных сайтов
необходимо обладать теоретическими и практическими знаниями в HTML, CSS, JavaScript, PHP, MySQL. В настоящее время для
создания сайта существуют специальные приложения: FrontPage, Adobe Dreamviewer и прочие. Они позволяют
создавать основу сайта, а также заполнять его какой-либо информацией. К
сожалению, многие созданные и ныне функционирующие сайты громоздки и не
оптимизированы.
Есть различные способы оптимизации работоспособности и
скорости работы сайта:
) используйте сжатие "с потерями";
2) используйте сжатие "без потерь" (. gif,. png) для логотипов, частей
дизайна сайта или изображений с малым количеством цветов;
) используйте изображения в настоящем размере, не
используйте HTML для изменения их размера;
) уменьшайте качество всех изображений, внешний вид
которых это позволяет.
2. Используйте хороший "хостинг":
) отдельный "хостинг" для изображений;
2) размещать большие файлы на отдельном сервере;
) размещать базы данных на отдельном сервере.
3. Улучшайте Ваш код:
) убедитесь в том, что Ваш HTML код чист на сколько это
возможно;
2) используйте CSS для стилизации страниц, а не HTML. Также используйте теги div, а не таблицы;
) не делайте лишних обращений к базе данных.
Статический код столь же важен:
) обязательно храните Ваш CSS и JavaScript в отдельных файлах, а не
прямо на страничках;
2) разбейте Ваши CSS на несколько файлов и
загружайте только те, которые Вам необходимы для конкретной страницы;
) разбейте Ваши JavaScript файлы точно так же. Не
загружайте js-файлы, код в которых не собираетесь использовать.
Убедитесь в том, что Ваш код проходит W3C-валидацию. Это очень
помогает ускорить работу сайта и с SEO.
. Минимизируйте всё. Это небольшое улучшение в некоторых
ситуациях может очень помочь. Чтобы "минимизировать" файл, нужно
удалить все пробелы и сгруппировать всё в одну строку. Вы можете уменьшить HTML, CSS, JavaScript, PHP.
. Избавьтесь от медленных вещей на сайте:
1) Flash - замените его частично Ajax, если возможно;
2) Внешний JavaScript: "выждете" с других сайтов -
это замечательно, но если они медленные, избавьтесь от них;
) изображения в высоком разрешении;
) "онлайн" видео.
6. Оптимизируйте базу данных.
Если возможно, поместите базу данных на отдельном сервере.
Также:
) оптимизируйте модель данных;
2) используйте индексы;
) оптимизируйте запросы;
) не сохраняйте в базе данных вещи, которые не
меняются. Сделайте их статическими;
7. Настройте правильно Ваш сервер.
Данными способами можно придать сайту более оптимизированный
вид.
Заключение
Данный сайт ориентирован на предоставление пользователю
справочной информации, что и налагает на содержание некоторые ограничения. Для
поддержания популярности сайта необходимо:
· Содержание должно соответствовать тематике
сайта.
· Сайт должен быть удобен в использовании.
· Сайт должен предоставлять свежую и
достоверную информацию.
· Положительным качеством будет и
оригинальность преподнесения информации.
В процессе выполнения я лучше ознакомился с возможностями
языков HTML, JavaScript, и таблиц стилей CSS. Также могу сделать вывод, что информация на
сайте была представлена живо и интересно.
Для полноценного функционирования сайта в браузере должна
быть разрешена работа JavaScript. Работоспособность сайта была проверена в
браузере Google Chrome. В качестве редактора при создании сайта использовал программу
Microsoft Visual Studio 10.
Список
используемой литературы
1. Мержевич
В. "Самоучитель HTML и XHTML", 2011г.
2. Фримен
Эрик, Фримен Элизабет "Изучаем HTML, XHTML и CSS", (2012).
. Флэнаган
Д. "JavaScript. Подробное руководство", 2009 г.
. Мархвида
И.В. "Создание Web-страниц.html. CSS. JavaScript" 2008 г
5. <http://htmlbook.ru/html5>
6. <http://ramech.net/docs/css3>
7. <http://javascript.ru/manual>
Приложение
Главная страница - Главная.html
<! DOCTYPE html PUBLIC "- // W3C // DTD
XHTML 1.0 Transitional // EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type"
content="text/html; charset=utf-8" />
<title>Фан сайт Лондонского
Арсенала</title>
<link rel="stylesheet"
href="css/style. css" type="text/css" media="all"
/>
<script src="https: // ajax.
googleapis.com/ajax/libs/jquery/1.6.1/jquery. min. js"></script>
<script src="js/slides.
js"></script>
<script>
/*the curent slide
*/currentSlide (current) {
$ (". current_slide"). text (current +
" of " + $ ("#slides"). slides ("status",
"total"));
}
$ (function () {
/*SlidesJS
*/
$ ("#slides"). slides ({: function
(current) {(current);
},: function () {(1);
}
});
/*/stop button
*/
$ (". controls"). click (function (e)
{. preventDefault ();
// Example status method usageslidesStatus = $
("#slides"). slides ("status", "state");(!
slidesStatus || slidesStatus === "stopped") {
$ ("#slides"). slides
("play");
// Change text
$ (this). text ("Stop");
} else {
// Example stop method usage
$ ("#slides"). slides
("stop");
// Change text
$ (this). text ("Play");
}
});
});
</script>
</head>
<body>
<div id="header">
<div>
<h1 id="logo">
</div>
</div>
<div id="navigation">
<div>
<div>
<ul>
<li><a
href="Главная.html">Главная</a></li>
<li><a
href="Видео.html">Видео</a></li>
<li><a href="История.html">История
клуба</a></li>
<li><a
href="Состав.html">Состав</a></li>
<li><a
href="Новости.html">Новости</a></li>
<li><a
href="таблица.html">Турнирная таблица</a></li>
</ul>
<div>
</div>
</div>
<div id="heading">
<div>
<div id="heading-cnt">
<div id="side-nav">
<ul>
<li><div>
<li><div>
<li><div>
<li><div>
</ul>
</div>
<div id="heading-box">
<div id="heading-box-cnt">
<div>
<div id="container">
<! - start SlidesJS slideshow - ->
<div id="slides">
<img src=" css\images\image_10742.
jpg" width="713" height="321" alt="Slide
1">
<img src="
css\images\957027-15720218-640-360. jpg" width="713"
height="321" alt="Slide 2">
<img src=" css\images\262152-2480x1384.
jpg" width="713" height="321" alt="Slide
3">
<img src=" css\images\3b9ce5f74043.
jpg" width="713" height="321" alt="Slide
4">
<img src=" css\images\1367763732_03.
jpg" width="713" height="321" alt="Slide
5">
<img src=" css\images\images. jpg"
width="713" height="321" alt="Slide 6">
<img src=" css\images\the_gunners.
jpg" width="713" height="321" alt="Slide
7">
</div>
<! - end SlidesJS slideshow - ->
<! - Example play/stop controls - ->
<a href="#">
<! - Example slide count - ->
<p>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div id="sidebar">
<h3>Бомбардиры</h3>
<ul>
<li>
<p>Арон Рэмзи</p>
<small>
</li>
<li>
<p>Оливье Жиру</p>
<small>
</li>
<li>
<p>Месут Озил</p>
<small>
</li>
<li>
<p>Лукас Подольски</p>
<small>
</li>
<li>
<p>Джек Уилшер</p>
<small>
</li>
</ul>
</div>
<div id="content">
<div>
<div>
<h3><a
href="Новость15.html">Новость15</a></h3>
<a href=" Новость15.html"><img
src=" Новости\images\zp_playerprofile_oxladechamberlain_9837. jpg"
width="205" height="101" alt="Slide 1"
/></a>
<p>
<span>Окслейд-Чемберлен: "Большие
команды создают большую атмосферу" </span>
<a href="Новость15.html">
</p>
</div>
<div>
<h3><a href=" Новость14.html">Новость14</a></h3>
<a href=" Новость14.html"><img
src=" Новости\images\35538196. jpg" width="205"
height="101" alt="Slide 1" /></a>
<p>
<span>Игроки Баварии о жребии ЛЧ
</span>
<a href=" Новость14.html">
</p>
</div>
<div>
<h3><a href="
Новость13.html">Новость13</a></h3>
<a href=" Новость13.html"><img
src="Новости\images\Bacary-Sagna-Arsenal-Football. jpg "
width="205" height="101" alt="Slide 1"
/></a>
<p>
<span>Бакари Санья: "Если от нас не
уходили бы игроки, все было бы по другому" </span>
<a href=" Новость13.html">
</p>
</div>
<div>
<h3><a
href="Новость12.html">Новость12</a></h3>
<a href=" Новость12.html"><img
src="Новости\images\images (1). jpg" width="205"
height="101" alt="Slide 1" /></a>
<p>
<span>В 1/8 ЛЧ Арсенал сыграет с
Баварией</span>
<a href="Новость12.html">
</p>
</div>
<div>
<h3><a href="
Новость11.html">Новость11</a></h3>
<a href=" Новость11.html"><img
src="Новости\images\travma-Koscielny2. jpg" width="205"
height="101" alt="Slide 1" /></a>
<p>
<span>Лоран Косьелини пропустит остаток
года из-за травмы колена</span>
<a href=" Новость11.html">
</p>
</div>
<div>
<a href=" Новость10.html"><img
src="Новости\images\1075683. jpg " width="205"
height="101" alt="Slide 1" /></a>
<p>
<span>Месут Озил извинился перед
болельщиками </span>
<a href=" Новость10.html">
</p>
</div>
<div>
</div>
<div>
</div>
</div>
<div id="footer">
<div>
<div>
<p>
<div>
</div>
</div>
</body>
</html>
CSS - style. css
* { padding: 0; margin: 0; outline: 0; }{size:
12px;family: Arial, sans-serif;: #fff;: #171717;: 100%;align: left;
}
#container {: 713px;: auto;: relative;
}
#slides {: relative;
}
#slides. slidesContainer
{: 713px;: 8px solid #fff;left: - 8px;shadow: 0
2.5px 5px rgba (0,0,0,.1);
}
/*/prev buttons
*/
#slides. slidesNext,#slides. slidesPrevious {:
absolute;: 134px;: - 40px;: 24px;: 0;top: 32px;: block;index: 101;: hidden;:
url (. /img/navigation-previous. png) no-repeat 0 0;
}
#slides. slidesNext {: 731px;: url (.
/img/navigation-next. png) no-repeat 0 0;
}
/*
*/
. slidesPagination {: 10px 0 0;: right;
}
. slidesPagination li {: left;: 0 1px;style:
none;
}
. slidesPagination li a {: block;: 14px;: 0;top:
14px;image: url (. /img/pagination. png);position: 0 0;: hidden;
}
. slidesPagination li. slidesCurrent a {position:
0 - 14px;
}
. current_slide {: bold 10px/1.33 sans-serif;:
left;top: 12px;
}
. controls {: block;top: 12px;: left;: #fff;:
bold 10px/1.33 sans-serif;right: 10px;
}
. cl { font-size: 0; line-height: 0; height: 0;
clear: both; }img { border: 0; }{ color: #fff; text-decoration: none; }: hover
{ text-decoration: underline; cursor: pointer; }
. left { float: left; display: inline; }
. right { float: right; display: inline; }
. notext {font-size: 0; line-height: 0;
text-indent: - 4000px; }{margin-top: 10px; }
. center {display: block; margin: 0 auto; }
. shell {margin: 0 auto; width: 930px; }
#header {background: #000; }
#header. shell {width: 1018px; background: url
(images/header. jpg) no-repeat 10px 0; height: 84px; }#logo {padding-left:
340px; float: left; padding-top: 8px; }#logo a {display: block; background: url
(images/2. png) no-repeat 0 0; width: 322px; height: 73px; }
#navigation {background: url (images/nav. gif)
repeat-x 0 0; height: 50px; }
#navigation ul {float: right; list-style-type:
none; }
#navigation ul li {background: url
(images/nav-divider. gif) no-repeat right 0; float: left; display: inline;
padding-left: 23px; padding-right: 29px; }
#navigation ul li a {color: #676767; font-family:
tahoma, sans-serif; font-size: 13px; text-transform: uppercase; padding-top:
16px; display: block; height: 34px; float: left; }
#heading {height: 369px; background: url
(images/heading. jpg) repeat-x 0 0; }
#heading. shell {width: 983px; position:
relative; }
#heading-cnt {background: url
(images/heading-cnt. png) no-repeat 0 0; width: 983px; height: 161px; }
#side-nav ul {list-style-type: none; width:
205px; padding-top: 9px; padding-left: 20px; }
#side-nav ul li {float: left; display: block;
width: 205px; padding-bottom: 5px; }
#side-nav ul li a {width: 195px; height: 18px;
display: block; padding-left: 10px; padding-top: 4px; text-transform:
uppercase; color: #636363; font-size: 11px; font-weight: bold; position:
relative; }
#side-nav ul li. link {background: url
(images/side-nav. png) no-repeat 0 0; width: 205px; height: 22px; }
#heading-box {position: absolute; top: 9px; left:
235px; }
#heading-box table{background: no-repeat 0 0;
width: 709px; height: 316px; padding-top: 34px; padding-left: 4px; }
#heading-box table tr. l{background: #339933; }
#heading-box-1. {background: no-repeat 0 0;
width: 709px; height: 316px; padding-top: 345px; padding-left: 4px; }
#main {background: url (images/main-bg. gif)
repeat-x 0 0; padding-top: 8px; padding-bottom: 45px; }
#main h2 {color: #fff; font-size: 16px;
text-transform: uppercase; padding-bottom: 2px; }
#sidebar {padding-top: 14px; width: 197px;
padding-right: 10px; float: left; }
#sidebar ul {list-style-type: none;
padding-bottom: 7px; }
#sidebar ul li {background: url
(images/news-divider. gif) repeat-x 0 bottom; padding-bottom: 5px; padding-top:
5px; }
#sidebar ul li small. date {color: #93de3c;
font-size: 9px; }. archives {color: #909090; font-size: 11px; text-decoration:
underline; display: block; }. archives: hover {text-decoration: none; }
#content {width: 713px; float: left; }
. grey-box {background: url (images/grey-box.
gif) no-repeat 0 0; width: 209px; height: 228px; float: left; padding: 10px
26px 17px 8px; }
. last {padding-right: 10px! important; }
. grey-box h3,. grey-box h3 a {font-size: 13px;
color: #303235; text-transform: uppercase; padding-bottom: 8px; }
. grey-box img {background: #fff; border: 1px
solid #cfcfcf; padding: 1px; margin-bottom: 6px; }
. grey-box p {color: #1f1f1f; width: 205px; }
. grey-box p span {padding-bottom: 6px; display:
block; }. button {background: url (images/button. png) no-repeat 0 0; float:
right; width: 81px; height: 16px; display: block; color: #373737; font-size:
10px; padding-top: 3px; text-align: center; text-transform: uppercase; }
. second {padding-right: 5px! important;
background: url (images/second. gif) no-repeat 0 0; width: 324px; }. watch-now
{text-decoration: underline; text-transform: uppercase; }. watch-now: hover
{text-decoration: none; }
#footer {padding-bottom: 50px; width: 930px;
margin: 0 auto; padding-right: 12px; font-size: 10px; padding-top: 500px; }
#footer. shell {background: url
(images/news-divider. gif) repeat-x 0 0; padding-top: 10px; margin: 0 auto; }
#footer a {color: #fff; margin-right: 10px;
text-decoration: underline; }
#footer a: hover {text-decoration: none; }