Будь умным!

У вас вопросы?
У нас ответы:) SamZan.net

Целью курсового проекта было создать новостной футбольный сайт

Работа добавлена на сайт samzan.net: 2015-07-05

Поможем написать учебную работу

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

Предоплата всего

от 25%

Подписываем

договор

Имя

Выберите тип работы:

Принимаю Политику конфиденциальности

Скидка 25% при заказе до 21.5.2024

Введение

Целью курсового проекта было создать новостной футбольный сайт “Football news” для того, чтобы любители футбола могли узнавать все последние новости мирового футбола, а так же просматривать репортажи и видео с последних футбольных матчей и быть в курсе последних новостей футбола.
При создании сайта целью является освоение языков программирования (Html,Css,JavaScript). Так же буду работать со стилями Css, которые позволят поменять цвет оформления фона, изменять стили шрифта, так же будут использованы javascript, чтобы анимировать некоторые элементы сайта что сделает сайт был более живым и красочным. Вся разработка моего сайта будет полностью посвящена изучению языков программирования, чтобы полностью изучить и понять весь программный код проекта и продолжать работать в этом направлении.

Теоретическая часть

В интернете есть множество футбольных сайтов, например:
LiveTv - последние футбольные новости и трансляции на все футбольные матчи
Ссылка на сайт: http://livetv.ru/

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

Ссылка на сайт: http://news.sportbox.ru/

Footboom-сайт с множеством видео материалов и фото галерей с последних матчей а так же статистика и ставки на матчи
Ссылка на сайт: http://www.footboom.com/

Отличие моего сайта от множества футбольных сайтов это более простой и удобный дизайн. Так же есть ссылки на трансляции матчей, последние новости, фотогалерея, описание к последним футбольным матчам с ссылками на просмотр футбольных баталий и все это объединяет мой сайт Football.news.com

Практическая часть

Разработка моего проекта началась с установки программы “Macromedia Dreamweaver 8”
После установки программы я создал новый проект, где уже автоматически был прописан программный код, который уже создается программой

Потом я создал отдельный файл Css чтобы создать в нём стили и блоки. Css- CSS (а CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

В следующем своём действии я создал файл JavaScript, чтобы разместить, новый элемент «Плавающего облака»

Я начал разрабатывать свой сайт с простого html кода, в котором будет заложена главная страница моего футбольного сайта я создал файл Football news.html и в нем прописал начальный код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Football_news.com</title>-Название страницы

<!--

.style1 {font-family: Georgia, "Times New Roman", Times, serif}

#Layer1 {

position:absolute;

width:200px;

height:115px;

z-index:1;

left: 980px;

top: 533px; -Выбор стилей текста и блоков

}

-->

</style>

</head>

<body bgcolor=white text=#ffffff> -цвет текста

<div class="header"><img src="../files/123/img/football.jpg" width="643"></img></div> -добавление картинки в голову блока

<a href="information.html"><img src="../files/123/img/novosti.jpg" border="0"></a>-добавление меню кнопок с переходами на другую страницу

</div>

<p align=center><strong>Футбольный сайт Football news.com<br>

Football news.com —информационный сайт о футболе,здесь можно посмотреть свежие фото с матчей а так же сами трансляции и ссылки на игры футбольных грандов </p>

<img src="img/rooney.jpg"></div>-добавление картинки в центральный блок для фона

<div id="con"><p align="center">Для отображения Облака ссылок

<br />необходим<br /><b>Adobe Flash Player 9</b><br />или выше.</div>

var rnumber = Math.floor(Math.random()*99);

var widget_so = new SWFObject("http://freeviral.ru/tagcloud.swf?r="+rnumber, "tagcloudflash", "380", "150", "9");

widget_so.addParam("wmode", "transparent");

widget_so.addParam("allowScriptAccess", "always");

widget_so.addVariable("tcolor", "0xCffffff");

widget_so.addVariable("tspeed", "100");

widget_so.addVariable("distr", "true");

widget_so.addVariable("mode", "tags");

widget_so.addVariable("tagcloud", "<tags><a href='C:\Users\П-20\Desktop\сайт\index.html' style=';'>Балотелли</a><a href='http://www.manutd.com/' style=';'>Manchester united</a><a href='http://www.realmadrid.com/cs/Satellite/en/Home.htm' style=';'>Real Madrid</a><a href='http://www.fcbarcelona.com/' style=';'>Barcelona</a><a href='http://www.santosfc.com.br/home.asp' style=';'>Santos</a><a href='http://www.sopcast.com/' style=';'>SOPCOAS</a><a href='http://www.leomessi.com/eng/' style=';'>Messi</a><a href='http://www.ronaldinho80.ru/' style=';'>Ronaldinio</a><a href='http://www.ronaldohome.com/' style=';'>Ronaldo</a><a href='http://livetv.ru/' style=';'>LiveTv</a></tags>");- это ссылки на официальные сайты которые будут отображаться при нажатии на облако тегов

widget_so.write("con");

</script>

</div>

var flashvars = {};

flashvars.mode = 'tags';

flashvars.minFontSize = '8'; /* минимальный размер шрифта в облаке. Размер задается в пунктах.*/

flashvars.maxFontSize = '12'; /* максимальный размер шрифта в облаке. Размер задается в пунктах.*/

flashvars.tcolor = '0x006600'; /*"0x006600" - цвет самого частого текста в облаке тегов в RGB формате. Частота текста определяется по свойству ссылки style. 0x не меняем.*/

flashvars.tcolor2 = '0x006600'; /* "0x006600" - цвет самого редкого текста в облаке тегов в RGB формате. Частота текста определяется по свойству ссылки style. 0x не меняем.*/

flashvars.hicolor = '0xFF0000'; /*"0xFF0000" - цвет текста при наведении на него курсора. 0x не меняем.*/

flashvars.distr = 'true'; /*тип вращения облака, может принимать значение "true" или "false"*/

flashvars.tspeed = '100'; /*скорость вращения*/

eTagz = document.getElementById('yoblako').getElementsByTagName('A');

flashvars.tagcloud = '<tags>';

for (var i=0; eTagz[i]; ++i) flashvars.tagcloud += '<a href=\'' + eTagz[i].getAttribute('href')

+ '\' style=\'' + parseInt(eTagz[i].style.fontSize)

+ '\'>' + eTagz[i].innerHTML.replace(/&/i, '%26') + '</a>';

delete eTagz;

flashvars.tagcloud += '</tags>';

var params = {};

/*params.wmode = 'transparent'; устанавливаем фон облака прозрачным. Если убрать эту строку, то можно будет самим задавать цвет фона.*/

params.bgcolor = '#FFFFCC';

params.allowscriptaccess = 'always';

var attributes = {};

attributes.id = 'yoblako';

attributes.name = 'tagcloud';

swfobject.embedSWF('http://neotech.3dn.ru/Tegs/tagcloud.swf', 'yoblako', '300', '200', '9.0.0', false, flashvars, params, attributes); /*"300" - ширина будущего облака тегов в пикселях.

"200" - высота будущего облака тегов.

"9" - максимальная версия флеш-плеера, которая нужна для отображения облака.*/

</script>

</div>

<div class="right"><a href="index.html"><img src="../files/123/img/3434.jpg" border="0"></a><a href="RealMadrid_ManchesterUnited.HTML">Real Madrid-Manchester United 21:45

</a>

<p><a href="barcelona_milan.html">Barcelona-Milan 22:30</a>

<p><p><a href="arsenal.html">Arsenal-Manchecter city 21:00</a>

<p><p><a href="INTER.HTML">Inter-Juventus 20:00</a>

<p><p><a href="lazio.html">Lazio-Napoli 17:45</a>

<p><p><a href="santos1.html">Santos-Flamengo 13:45</a>

<p><a href="index.html"><img src="../files/123/img/1015.jpg" border="0"><a href="RealMadrid_ManchesterUnited.html">Real Madrid-Manchester United 21:45</div>

<body>
В этом программном коде расположены блоки взятые с файла CSS который я создал сразу после файла Football.news
программный код файла Css: h1{color:blue;" xml:lang="en-US" lang="en-US">BODY {

background-image : url(img/becham.jpg);}

.header { -здесь задается фон сайта

position:relative;

width:640px;

height:100px;

border: 0px solid black;

left:10%; -1 блок с координатами “Header”

}

p{color:white;}

.left {

position:relative;

float:left;

width:1024px;

height:32px;

border: 0px solid white;

position:absolute;

left:25%; - 2 блок c координатами “Left”,левый блок

}.center {

position:relative;

width:768px;

border: 0px solid white;

left:200px;

top:50px;

}

.right {

position:absolute;

width:138px;

height:561px;

left: 983px;

top: 114px;

} - 2 блок c координатами “Right”, правый блок

.btn {

float:left;

width: 190px;

margin: 0 auto;

}

grow img{

height: 300px;

width: 190px;

margin: 5px 0;

-webkit-transition: all 0.2s ease;

-moz-transition: all 0.2 ease;

-o-transtition: all 0.2 ease;

}

.grow img:hover {

height: 110%;

width: 110%;

margin-left: -30px;

}

h1{color:white;

}

a:link{

color:#FFFFFF;

}

a:visited{

color:#FFFFFF;

}

a:active{

color:#FFFFFF;

}a:hover{color:#66FF00; }

В этом файле расположены все блоки для сайта (Голова, центральная часть, и боковые части)
так же в этих блоках заданы цвета текста, фона, стиль текста и его расположение в блоке

Потом прописан код для «воздушного облака»

<div align="center"> -центральный блок

<div id="con"><p align="center">Для отображения Облака ссылок

<br />необходим<br /><b>Adobe Flash Player 9</b><br />или выше.</div>

widget_so.addVariable("tagcloud", "<tags><a href='Ссылка' style='font-

size:18pt;'>Галерея</a><a href='Ссылка' style=';'>Название

ссылки</a><a href='Ссылка' style=';'>Название ссылки</a><a

href='Ссылка' style=';'>Название ссылки</a><a href='Ссылка'

style=';'>Название ссылки</a><a href='Ссылка' style='font-

size:18pt;'>Название ссылки</a><a href='Ссылка' style='font-

size:18pt;'>Название ссылки</a></tags>"); -ссылки для тегов облака

widget_so.write("con");</script></div>

Вот так вот выглядит главная страница:

Потом я начал создавать другие страницы на (Галерею, Новости , Сегодня Играют ,Match Day) У них код был практически у всех одинаковый: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Football_news.com</title>

<!--

.style1 {font-family: Georgia, "Times New Roman", Times, serif}

#Layer1 {

position:absolute;width:200px;height:115px;z-index:1;left: 980px;top: 533px;}--></style></head><body bgcolor=whitetext=#ffffff><divclass="header"><imgsrc="../files/123/img/football.jpg"width="643"></img></div><div class="left"><a href="index.html"><img src="../files/123/img/menu.jpg" border="0"></a>

</div><div class="center">

<p align=center><strong>Футбольный сайт Football news.com<br>

Единственное отличие было в странице Галерея. Там был задан программный код на анимацию картинок, чтобы при наведении курсором картинки увеличивались в размере.
Вот этот программный код: <span class="grow btn"><a href="img/torres.jpg"><img src="../files/123/img/torres1.jpg" border="0"></a></span>

<span class="grow btn"><a href="img/rooney10.jpg"><img src="../files/123/img/rooney101.jpg"border="0"></a></span>
функция grow btn-это увеличение объекта.

Заключение

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

При создании сайта были использованы языки программирования(html,CSS, JavaScript)

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

Сайт выполнялся в программе Macromedia Dreamweaver 8, в ней достаточно просто работать не всегда нужно прописывать программный код чтобы вставлять картинки видео и блоки, можно просто добавлять и размещать все на видимом экране программы

Ссылка на учебник: http://www.zvirec.com/

Список используемых источников

http://www.zvirec.com/

Приложения

Приложение 1

Главная страница сайта

Программный код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Football_news.com</title>

<!--

.style1 {font-family: Georgia, "Times New Roman", Times, serif}

#Layer1 {

position:absolute;width:200px;height:115px;z-index:1;left: 980px;top: 533px}--></style></head><body bgcolor=white text=#ffffff>

<a href="information.html"><img src="../files/123/img/novosti.jpg" border="0"></a></div

<p align=center><strong>Футбольный сайт Football news.com<br>

Football news.com —информационный сайт о футболе,здесь можно посмотреть свежие фото с матчей а так же сами трансляции и ссылки на игры футбольных грандов </p> <img src="img/rooney.jpg"></div>

Приложение2

Страница «Галерея сайта»

Код страницы:

</head><body>

</div>

</body>

Приложение 3

Страница «Новости»

Код страницы: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Football_news.com</title><link rel="stylesheet" type="text/css" href="style.css" ><style type="text/css"><!--.style1 {color: #F0F0F0}.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}.style3 {" xml:lang="en-US" lang="en-US"><div class="header"><img src="../files/123/img/football.jpg"></img>

</div>

</div>

<div class="center"> <h1 align=center class="style2">Новости мирового футбола: </h1> <div align="center" class="style1"><span class="style3"><a href="Balotelli.html">Балотелли официально перешел в Милан</a></span> <img src="../files/123/img/balotelli.jpg" width="665" height="385"></div> <p align="center"><span class="style3"><a href="Russia.html">Сборная России начнет 2013 год товарищеским матчем с Исландией</a> </span></p> <p align="center"><img src="../files/123/img/RUSSIA.jpg" width="667" height="361"><BR> </p> <p align="center"><SPAN class="style3" metrikaId_0.6390772151912141="55"><a href="Neymar.html">Неймар: "Англия не составит конкуренци&#1102Бразилии на ЧМ-2014"</a></SPAN> </p> <p align="center"><img src="../files/123/img/neymar.jpg"width="663" height="346"><BR> </p> <p align="center"><BR> </p></div>

<div class="right"><a href="index.html"><img src="../files/123/img/3434.jpg" border="0"></a><a href="RealMadrid_ManchesterUnited.HTML">Real Madrid-Manchester United 21:45

</a><p><a href="barcelona_milan.html">Barcelona-Milan 22:30</a></p>

<p><a href="arsenal.html">Arsenal-Manchecter city 21:00</a></p>

<p><a href="INTER.HTML">Inter-Juventus 20:00</a></p>

<p><a href="lazio.html">Lazio-Napoli 17:45</a></p>

<p><a href="santos1.html">Santos-Flamengo 13:45</a></p>

<a href="index.html"><img src="../files/123/img/1015.jpg" border="0"><a href="RealMadrid_ManchesterUnited.html">Real Madrid-Manchester United 21:45</div>

<body>

Приложение 4

Страница «Новости про трансфер»

программный код страницы: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Football_news.com</title>

<p>Сборная России проведет свой первый матч после нового года со сборной Исландии</p>

<p>матч будет проходить в гостях у Исландцев </p>

</div><div class="right"><a href="index.html"><img src="../files/123/img/3434.jpg" border="0"></a>Real Madrid-Manchester United 21:45 <p>Barcelona-Milan 22:30</p><p>Arsenal-Manchecter city 21:00</p><p>Inter-Juventus 20:00</p><p>Lazio-Napoli 17:45</p><p>Santos-Flamengo 13:45</p><a href="index.html"><img src="../files/123/img/1015.jpg" border="0"><a href="RealMadrid_ManchesterUnited.html">Real Madrid-Manchester United 21:45</div>

<body>

Приложение 5

Страница: «Футбольные матчи»

Код страницы: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Football_news.com</title>

</div>

</div>

<div class="center"><p align=center><STRONG>Великолепное противостоянние двух великих грандов футбола,Real Madrid </p>

<p>Ссылка на матч </p>

</div>

<body>

1. Тема- Маркетинговая составляющая в популяризации еврейского образа жизни
2. Земельный фонд Республики Казахстан
3. вариант ответа. За каждый правильный ответ ~ 1 балл
4. тема ее элементы и функция автоперевозок Структура системы автоперевозок Входы и выходы системы упра
5. тематики и программирования ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ Государственное образо
6. а Кафедра Приладобудування повна назва Напрям підготовки 6
7. реферат дисертації на здобуття наукового ступеня кандидата біологічних наук Ялта 2007
8. Тема 1 Общие механизмы понятия и термины
9. Тема- Контакты тяговых аппаратов
10. и суффиксы то либо нибудь пишутся с дефисом например- коечто коекакой ктото коголибо чемнибудь
11. Реферат- Система количественных оценок экономического риска
12. ТЕМАТИКИ ИНФОРМАТИКИ И ФИЗИКИ заочной формы обучения ОЗО срок обучения 5 лет
13. Реферат- Расчет подкрановой балки
14. 2012 уч.г. ЗНАЧЕНИЕ ИГРЫ В ФИЗИЧЕСКОМ РАЗВИТИИ В
15. Реферат- История горного дела
16. cd cmpo semntico le corresponde un esfer de experienci concret o bstrct
17. Организация службы внутреннего аудита на предприятии
18. Тема- Мы туристы
19. тематики З досвіду роботи вчителя математики Калинівської загальноосвітньої школи ІІІІ ступенів 2г.
20. Задание 1. Закрепление новых слов Прочитай слова и найди их значение

Материалы собраны группой SamZan и находятся в свободном доступе

Целью курсового проекта было создать новостной футбольный сайт

Поможем написать учебную работу

Выберите тип работы:

Оглавление

Введение

Теоретическая часть

Практическая часть

Заключение

Приложения