Будь умным!

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

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

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

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

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

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

от 25%

Подписываем

договор

Имя

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

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

Скидка 25% при заказе до 24.11.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. Развитие некоторых идей Сократа и Платона в теософии XX века
3. Прилади і матеріали- установка для вимірювання швидкості звуку звуковий генератор підсилювач низької ча
4. реферата- Введение Глава 1
5. 1АСЕПТИКА это комплекс профилактических хирургических мероприятий направленных на предупреждение попадан
6. Тема 5. Сбытовая политика Распределение и продвижение товара
7. план по производству шоколадных конфет Концепция проекта по производству шоколадных конфет Планирует
8. тема состоит из четырех шаров массы которых равны соответственно m 2m 3m 4m.
9. Язвенная болезнь Стадия обострения
10. Терапия истинной кармы
11. Дипломная работа- Психологічні чинники прояву політичної культури студентської молоді
12. Контрольная работа- Природа и климат четвертичного периода.html
13. реферат дисертації на здобуття наукового ступеня кандидата економічних наук Хар.html
14. Северный Арктический федеральный университет имени М
15. Инновационные социальные технологии
16. Литературные памятники
17. История вычислительной техники (до процессора Intel 80486)
18. Австрия и Австрийская республика.html
19. .Дитині 7 р. батьки відзначають блідість шкіри і біль в поперековій ділянці головний біль.
20. задание представляет собой самостоятельную аналитическую работу студента по выбранной теме

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

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

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

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

Оглавление

Введение

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

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

Заключение

Приложения