Разработка сайта

Видео вставлено с помощью кода:

< iframe width=" 250" height=" 188" src=https://www.youtube.com/embed/Lseyylh3Zm0 //ссылка на источник.

frameborder=" 0" allowfullscreen>

< /iframe>

Рис. 1. Вставка видеоролика

С помощью CSS я создал стиль всему сайту:

< link href=" css/style.css" rel=" stylesheet" type=" text/css" />

Рис. 2. Часы

Часы сделаны с использованием JavaScript и использован в пункте “Галерея” можно посмотреть на рисунке 1, вывод времени происходит с помощью:

Src=" time/cb.gif" Name=" d" border=0> < Img Src=" cb.gif" Name=" e"

border=0> < Img Src=" colon.gif" Name=" f" border=0> < Img Src=" cb.gif" Name=" g" border=0> < Img Src=" cb.gif" Name=" h" border=0> < Img Src=" cam.gif" Name=" j" border=0>

А остальной процесс происходит с помощью функций:

< Script Language=" JavaScript1.1" >

var dn

c1=new Image(); c1.src=" c1.gif"

c2=new Image(); c2.src=" c2.gif"

c3=new Image(); c3.src=" c3.gif"

c4=new Image(); c4.src=" c4.gif"

c5=new Image(); c5.src=" c5.gif"

c6=new Image(); c6.src=" c6.gif"

c7=new Image(); c7.src=" c7.gif"

c8=new Image(); c8.src=" c8.gif"

c9=new Image(); c9.src=" c9.gif"

c0=new Image(); c0.src=" c0.gif"

cb=new Image(); cb.src=" cb.gif"

cam=new Image(); cam.src=" cam.gif"

cpm=new Image(); cpm.src=" cpm.gif"

function extract(h, m, s, type)

{if (! document.images)

return

if (h< =9)

{document.images.a.src=cb.src

document.images.b.src=eval(" c" +h+".src")}

else

{document.images.a.src=eval(" c" +Math.floor(h/10)+".src")

document.images.b.src=eval(" c" +(h%10)+".src")}

if (m< =9)

document.images.e.src=eval(" c" +m+".src")}

else

{document.images.d.src=eval(" c" +Math.floor(m/10)+".src")

document.images.e.src=eval(" c" +(m%10)+".src")}

if (s< =9)

{document.g.src=c0.src

document.images.h.src=eval(" c" +s+".src")}

else

{document.images.g.src=eval(" c" +Math.floor(s/10)+".src")

document.images.h.src=eval(" c" +(s%10)+".src")}

if (dn==" AM") document.j.src=cam.src

else document.images.j.src=cpm.src}

function show3()

{if (! document.images)

return

var Digital=new Date()

var hours=Digital.getHours()

var minutes=Digital.getMinutes()

var seconds=Digital.getSeconds()

dn=" AM"

if ((hours> =12)& & (minutes> =1)||(hours> =13))

{dn=" PM"

hours=hours-12}

if (hours==0)

hours=12

extract(hours, minutes, seconds, dn)

setTimeout(" show3()", 1000)} < /Script>

Рис. 3. Срок действия сайта

Скрипт вывода срока действия сайта у меня использован в пункте “Галерея” можно посмотреть на рисунке 1:

< script language=" JavaScript" >

d0 = new Date('December 6, 2012');

d1 = new Date();

dt = (d1.getTime() - d0.getTime()) / (1000*60*60*24);

При наведении на пункт меню “Галерея” на рис 4. срабатывает тег:

< td class=" toplinks" > < a href=" raznoe.html" > Галерея< /a> < /td>

Соответствующий CSS код:

.toplinks

{height: 34px; width: 88px; text-align: center; font-weight: bold; font-size: 11px; text-transform: uppercase; }

.toplinks a

{text-decoration: none; color: #ffffff; }

.toplinks a: hover

{text-decoration: none; color: #383838; }

Рис.5. Календарь

Обратите внимание на календарь слева на рисунке 5, он реализован кодом:

Рис.5. Фотогалерея

На рисунке 5. в фотогалерее чтобы увеличить картинку достаточно навести мышью на картинку слева. Здесь используется отдельный CSS-файл. Реализована с помощью скриптов:

< td width=" 578" valign=" top" > < table width=" 100%" border=" 0" cellspacing=" 0" cellpadding=" 0" > < tr>

< td class=" main-head" > Фотогалерея< /td> < /tr>

< tr> < td height=" 8" > < /td> < /tr>

< tr> < td>

< div id=" gallery" > < em id=" thumbs" > < a href=" images/18.jpg" >

< img src=" images/1.jpg" alt=" " /> < /a> < a href=" #nogo" >

< img src=" images/2.jpg" alt=" " /> < /a> < a href=" #nogo" >

< img src=" images/3.jpg" alt=" " /> < /a> < a href=" #nogo" >

< img src=" images/4.jpg" alt=" " /> < /a> < a href=" #nogo" >

< img src=" images/5.jpg" alt=" " /> < /a> < a href=" #nogo" >

< img src=" images/6.jpg" alt=" " /> < /a> < a href=" #nogo" >

< img src=" images/7.jpg" alt=" " /> < /a> < a href=" #nogo" >

< img src=" images/9.jpg" alt=" " /> < /a> < a href=" #nogo" >

< img src=" images/10.jpg" alt=" " /> < /a> < a href=" #nogo" >

< img src=" images/11.jpg" alt=" " /> < /a> < a href=" #nogo" >

< img src=" images/12.jpg" alt=" " /> < /a> < a href=" #nogo" >

< img src=" images/13.jpg" alt=" " /> < /a> < a href=" #nogo" >

< img src=" images/14.jpg" alt=" " /> < /a> < a href=" #nogo" >

< img src=" images/15.jpg" alt=" " /> < /a> < a href=" #nogo" >

< img src=" images/16.jpg" alt=" " /> < /a> < a href=" #nogo" >

< img src=" images/17.gif" alt=" " /> < /a> < a href=" #nogo" >

< img src=" images/18.jpg" alt=" " /> < /a> < /em> < /div>

< /td> < /tr>

Рис.6. Крестики нолики

На рис.6. реализована простая игра «крестики нолики» на JavaScript.

<! -- Begin

var x = " game/x.gif";

var o = " game/o.gif";

var blank = " blank.jpg";

// фон

var pause = 0;

var all = 0;

var a = 0;

var b = 0;

var c = 0;

var d = 0;

var e = 0;

var f = 0;

var g = 0;

var h = 0;

var i = 0;

var temp=" ";

var ok = 0;

var cf = 0;

var choice=9;

var aRandomNumber = 0;

var comp = 0;

var t = 0;

var wn = 0;

var ls = 0;

var ts = 0;

function help() {

alert(" Привет! Играй и выигрывай");

}

if ((a==1)& & (b==1)& & (c==1)) all=1;

if ((a==1)& & (d==1)& & (g==1)) all=1;

if ((a==1)& & (e==1)& & (i==1)) all=1;

if ((b==1)& & (e==1)& & (h==1)) all=1;

if ((d==1)& & (e==1)& & (f==1)) all=1;

if ((g==1)& & (h==1)& & (i==1)) all=1;

if ((c==1)& & (f==1)& & (i==1)) all=1;

if ((g==1)& & (e==1)& & (c==1)) all=1;

if ((a==2)& & (b==2)& & (c==2)) all=2;

if ((a==2)& & (d==2)& & (g==2)) all=2;

if ((a==2)& & (e==2)& & (i==2)) all=2;

if ((b==2)& & (e==2)& & (h==2)) all=2;

if ((d==2)& & (e==2)& & (f==2)) all=2;

if ((g==2)& & (h==2)& & (i==2)) all=2;

if ((c==2)& & (f==2)& & (i==2)) all=2;

if ((g==2)& & (e==2)& & (c==2)) all=2;

if ((a! = 0)& & (b! = 0)& & (c! = 0)& & (d! = 0)& & (e! = 0)& & (f! = 0)& & (g! = 0)& & (h! = 0)& & (i! = 0)& & (all == 0)) all = 3;

}

function logicTwo() {

if ((a==2)& & (b==2)& & (c== 0)& & (temp==" ")) temp=" C";

if ((a==2)& & (b== 0)& & (c==2)& & (temp==" ")) temp=" B";

if ((a== 0)& & (b==2)& & (c==2)& & (temp==" ")) temp=" A";

if ((a==2)& & (d==2)& & (g== 0)& & (temp==" ")) temp=" G";

if ((a==2)& & (d== 0)& & (g==2)& & (temp==" ")) temp=" D";

if ((a== 0)& & (d==2)& & (g==2)& & (temp==" ")) temp=" A";

if ((a==2)& & (e==2)& & (i== 0)& & (temp==" ")) temp=" I";

if ((a==2)& & (e== 0)& & (i==2)& & (temp==" ")) temp=" E";

if ((a== 0)& & (e==2)& & (i==2)& & (temp==" ")) temp=" A";

if ((b==2)& & (e==2)& & (h== 0)& & (temp==" ")) temp=" H";

if ((b==2)& & (e== 0)& & (h==2)& & (temp==" ")) temp=" E";

if ((b== 0)& & (e==2)& & (h==2)& & (temp==" ")) temp=" B";

if ((d==2)& & (e==2)& & (f== 0)& & (temp==" ")) temp=" F";

if ((d==2)& & (e== 0)& & (f==2)& & (temp==" ")) temp=" E";

if ((d== 0)& & (e==2)& & (f==2)& & (temp==" ")) temp=" D";

if ((g==2)& & (h==2)& & (i== 0)& & (temp==" ")) temp=" I";

if ((g== 0)& & (h==2)& & (i==2)& & (temp==" ")) temp=" G";

if ((c==2)& & (f==2)& & (i== 0)& & (temp==" ")) temp=" I";

if ((c==2)& & (f== 0)& & (i==2)& & (temp==" ")) temp=" F";

if ((c== 0)& & (f==2)& & (i==2)& & (temp==" ")) temp=" C";

if ((g==2)& & (e==2)& & (c== 0)& & (temp==" ")) temp=" C";

if ((g==2)& & (e== 0)& & (c==2)& & (temp==" ")) temp=" E";

if ((g== 0)& & (e==2)& & (c==2)& & (temp==" ")) temp=" G";

}

function logicThree() {

if ((a==1)& & (b==1)& & (c==0)& & (temp==" ")) temp=" C";

if ((a==1)& & (b==0)& & (c==1)& & (temp==" ")) temp=" B";

if ((a==0)& & (b==1)& & (c==1)& & (temp==" ")) temp=" A";

if ((a==1)& & (d==1)& & (g==0)& & (temp==" ")) temp=" G";

if ((a==1)& & (d==0)& & (g==1)& & (temp==" ")) temp=" D";

if ((a==0)& & (d==1)& & (g==1)& & (temp==" ")) temp=" A";

if ((a==1)& & (e==1)& & (i==0)& & (temp==" ")) temp=" I";

if ((a==1)& & (e==0)& & (i==1)& & (temp==" ")) temp=" E";

if ((a==0)& & (e==1)& & (i==1)& & (temp==" ")) temp=" A";

if ((b==1)& & (e==1)& & (h==0)& & (temp==" ")) temp=" H";

if ((b==1)& & (e==0)& & (h==1)& & (temp==" ")) temp=" E";

if ((b==0)& & (e==1)& & (h==1)& & (temp==" ")) temp=" B";

if ((d==1)& & (e==1)& & (f==0)& & (temp==" ")) temp=" F";

if ((d==1)& & (e==0)& & (f==1)& & (temp==" ")) temp=" E";

if ((d==0)& & (e==1)& & (f==1)& & (temp==" ")) temp=" D";

if ((g==1)& & (h==1)& & (i==0)& & (temp==" ")) temp=" I";

if ((g==1)& & (h==0)& & (i==1)& & (temp==" ")) temp=" H";

if ((g==0)& & (h==1)& & (i==1)& & (temp==" ")) temp=" G";

if ((c==1)& & (f==1)& & (i==0)& & (temp==" ")) temp=" I";

if ((c==1)& & (f==0)& & (i==1)& & (temp==" ")) temp=" F";

if ((c==0)& & (f==1)& & (i==1)& & (temp==" ")) temp=" C";

if ((g==1)& & (e==1)& & (c==0)& & (temp==" ")) temp=" C";

if ((g==1)& & (e==0)& & (c==1)& & (temp==" ")) temp=" E";

if ((g==0)& & (e==1)& & (c==1)& & (temp==" ")) temp=" G";

}

function clearOut() {

document.game.you.value=" 0";

document.game.computer.value=" 0";

}

function checkSpace() {

if ((temp==" A")& & (a==0)) {

ok=1;

if (cf==0) a=1;

if (cf==1) a=2;

}

if ((temp==" B")& & (b==0)) {

ok=1;

if (cf==0) b=1;

if (cf==1) b=2;

}

if ((temp==" C")& & (c==0)) {

ok=1;

if (cf==0) c=1;

if (cf==1) c=2;

}

if ((temp==" D")& & (d==0)) {

ok=1;

if (cf==0) d=1;

if (cf==1) d=2;

}

if ((temp==" E")& & (e==0)) {

ok=1;

if (cf==0) e=1;

if (cf==1) e=2;

}

if ((temp==" F")& & (f==0)) {

ok=1

if (cf==0) f=1;

if (cf==1) f=2;

}

if ((temp==" G")& & (g==0)) {

ok=1

if (cf==1) g=2;

}

if ((temp==" H")& & (h==0)) {

ok=1;

if (cf==0) h=1;

if (cf==1) h=2;

}

if ((temp==" I")& & (i==0)) {

ok=1;

if (cf==0) i=1;

if (cf==1) i=2;

}

}

function yourChoice(chName) {

pause = 0;

if (all! =0) ended();

if (all==0) {

cf = 0;

ok = 0;

temp=chName;

checkSpace();

if (ok==1) {

document.images[chName].src = x; }

if (ok==0)taken();

process();

if ((all==0)& & (pause==0)) myChoice(); }}

function taken() {

alert(" Эта клетка занята! ")

pause=1; }

function myChoice() {

temp=" ";

ok = 0;

cf=1;

logicTwo();

logicThree();

checkSpace();

while(ok==0) {

aRandomNumber=Math.random()

comp=Math.round((choice-1)*aRandomNumber)+1;

if (comp==1) temp=" A";

if (comp==2) temp=" B";

if (comp==3) temp=" C";

if (comp==4) temp=" D";

if (comp==5) temp=" E";

if (comp==6) temp=" F";

if (comp==7) temp=" G";

if (comp==8) temp=" H";

if (comp==9) temp=" I";

checkSpace(); }

document.images[temp].src= o;

process(); }

function ended() {

alert(" Игры закончена! Чтобы сыграть ещё нажмите кнопку (Новая Игра)")}

function process() {

logicOne();

if (all==1){ alert(" Вы выграли! "); wn++; }

if (all==2){ alert(" Я выиграл! "); ls++; }

if (all==3){ alert(" Ничья..."); ts++; }

if (all! =0) {

document.game.you.value = wn;

document.game.computer.value = ls;

document.game.ties.value = ts; }}

function playAgain() {

if (all==0) {

if(confirm(" Вы уверены? ")) reset(); }

if (all> 0) reset(); }

function reset() {

all = 0; a = 0; b = 0; c = 0;

temp=" ";

ok = 0;

cf = 0;

choice=9;

aRandomNumber = 0;

comp = 0;

document.images.A.src= blank;

document.images.B.src= blank;

document.images.C.src= blank;

document.images.D.src= blank;

document.images.E.src= blank;

document.images.F.src= blank;

document.images.G.src= blank;

document.images.H.src= blank;

document.images.I.src= blank;

if (t==0) { t=2; myChoice(); }

t--; }

var ie4 = (document.all)? true: false;

var nn4 = (document.layers)? true: false;

// End -->

< /script>

< meta content=" Microsoft FrontPage 3.0" name=" GENERATOR" >

< title> < /title>

< /head>

< body bgColor=" #ffffff" >

< form name=" game" >

< div align=" center" > < center> < table border=" 0" >

< TBODY> < tr>

< td> < table border=" 1" borderColor=" #000000" cellPadding=" 0" cellSpacing=" 0" >

< TBODY> < tr>

< td> < a href=" javascript: yourChoice('A')" > < img border=" 0" height=" 61" name=" A"

src=" game/blank.jpg" width=" 56" > < /a> < /td>

< td> < a href=" javascript: yourChoice('B')" > < img border=" 0" height=" 61" name=" B"

src=" game/blank.jpg" width=" 56" > < /a> < /td>

< td> < a href=" javascript: yourChoice('C')" > < img border=" 0" height=" 61" name=" C"

src=" game/blank.jpg" width=" 56" > < /a> < /td>

< /tr> < tr>

< td> < a href=" javascript: yourChoice('D')" > < img border=" 0" height=" 61" name=" D"

src=" game/blank.jpg" width=" 56" > < /a> < /td>

< td> < a href=" javascript: yourChoice('E')" > < img border=" 0" height=" 61" name=" E"

src=" game/blank.jpg" width=" 56" > < /a> < /td>

< td> < a href=" javascript: yourChoice('F')" > < img border=" 0" height=" 61" name=" F"

src=" game/blank.jpg" width=" 56" > < /a> < /td>

< /tr> < tr>

< td> < a href=" javascript: yourChoice('G')" > < img border=" 0" height=" 61"

name=" G"

src=" game/blank.jpg" width=" 56" > < /a> < /td>

< td> < a href=" javascript: yourChoice('H')" > < img border=" 0" height=" 61" name=" H"

src=" game/blank.jpg" width=" 56" > < /a> < /td>

src=" game/blank.jpg" width=" 56" > < /a> < /td>

< /tr>

< /TBODY>

< /table>

< /td>

< td> < table>

< TBODY>

< tr colspan=" 2" >

< td> < font face=" MS Sans Serif" size=" 1" > < b> Счет: < /b> < /font> < /td>

< /tr> < tr>

< td> < font face=" MS Sans Serif" size=" 1" > < input name=" you" size=" 5"

< style=" font-family: MS Sans Serif; font-size: 1" > < /font> < /td>

< td> < font face=" MS Sans Serif" size=" 1" > Вы< /font> < /td>

< /tr> < tr>

< td> < font face=" MS Sans Serif" size=" 1" > < input name=" computer" size=" 5"

< style=" font-family: MS Sans Serif; font-size: 1" > < /font> < /td>

< td> < font face=" MS Sans Serif" size=" 1" > Компьютер< /font> < /td>

< /tr> < tr>

< td> < font face=" MS Sans Serif" size=" 1" > < input name=" ties" size=" 5"

< style=" font-family: MS Sans Serif; font-size: 1" > < /font> < /td>

< td> < font face=" MS Sans Serif" size=" 1" > Ничья< /font> < /td>

< /tr>

< /TBODY>

< /table> < /td> < /tr>

< /TBODY>

< /table>

< /center> < /div> < div align=" center" > < center> < p> < input onclick=" playAgain(); "

type=" button" value=" Новая Игра"

< style=" font-family: MS Sans Serif; font-size: 1; font-weight: bold" > < /p>

< /center> < /div>

Рис.7. Apple shooter

На рис.7. реализована простая игра «Apple shooter» которая ссылается на папку с файлами. Реализована скриптом:

< h4> Игра Apple-shooter стреляй и устанавливай свои рекорды < /h4> < hr/>

< object type=application/x-shockwave-flash data=apple-shooter.swf width=450 height=300>

< param name=movie value=apple-shooter.swf>

< /object>

Рис.7. Пузырьки

На рис.8. реализована онлайн-игра «Пузырьки» которая не будет отображаться без подключения к интернету потому что ссылается на другой сайт. Реализована скриптом:

< hr/> < h4> Онлайн игра Пузырки< /h4> < hr/>

< object type=application/x-shockwave-flash data=https://htmlka.com/wp-content/uploads/2011/08/bubble.swf width=450 height=300>

< param name=movie value=https://htmlka.com/wp-content/uploads/2011/08/bubble.swf>

< /object>

Заключение

В ходе выполнения данной курсовой работы были использованы CSS, JavaScript и HTML. Выполнялась работа программиста, целью которой являлось написание программного кода сайта. Из данной курсовой работы, более познавательно узнал о использовании CSS и других средствах реализации сайта.

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

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

Практическое значение исследования заключается в разработке на содержательном и технологическом уровне Веб-приложения «Языки программирования интерактивных Html-документов (JavaScript)». Результаты работы могут быть использованы студентами и преподавателями дисциплин с использованием Интернет технологий.

Список использованной литературы

1. Влад Мержевич. HTML и CSS на примерах. – СПб.: БХВ-Петербург, 2005. – 447 с.

2. Денни Гудман. JavaScript. Библия пользователя, 4-е издание.– М.: Издательский дом «Вильямс», 2003. – 960с.

3. Дж. Тарин Тауэрс. Macromedia HomeSite MX: – М.: ДМК Пресс, 2003. – 768 с.

4. Карла Роуз. Adobe Photoshop за 24 часа..– М.: Издательский дом «Вильямс», 2001. – 381с.

5. Флэнаган Д. Java в примерах. Справочник, 2-е издание. – СПб: Символ-Плюс, 2003. – 664 с.

6. Фролов А. В., Фролов Г. В. Создание Web-приложений: Практическое руководство. – М.: Издательско-торговый дом «Русская Редакция», 2001. – 1040 с.

7. Шапошников И. В. Самоучитель HTML 4. – СПб.: БХВ-Петербург, 2003. – 288 с.

8. Белсуновская, Н. А. Возможности использования офисной программы Microsoft Excel в деятельности педагогов – психологов / Н. А. Болсуновская, Л. В. Беспалова // Вестник практической психологии образования. – 2007. - № 1. – С. 121 – 127.

9. Булин – Соколова, Е. Внедрение информационно-компьютерных технологий в систему общего образования: деятельностный подход / Е. Булин – Соколова, канд. пед. наук // Учитель. – 2005. - № 3. – С. 63 – 66.

10. Ваисова, Л. М. Информационные технологии в проектной деятельности по истории и обществознанию / Л. М. Ваисова // Преподавание истории в школе. – 2007. - № 5. – С. 17 – 21.

11. Вайсман, О. А. Создание службы информатизации в школе / О. А. Вайсман, Н. Л. Демкина // Справочник руководителя образовательного учреждения. – 2005. - № 9. – С. 71 – 75.

12. Васильева, И. Использование компьютерных рисунков в раннем интенсивном обучении / И. Васильева // Дошкольное воспитание. – 1999. - № 3. – С. 22 – 27.

13. Васильева, О. П. Применение информационных технологий в учебно - воспитательном процессе / О. П. Васильева // Классный руководитель. – 2008. - № 5. – С. 115 – 120.

14. Высоцкий, И. Р. Компьютер в образовании / И. Р. Высоцкий // Информатика и образование. – 2000. - № 1. – С. 86 - 87.

15. CSS - каскадные таблицы стилей. Подробное руководство, 3-е издание. - Пер.с англ. - СПб: Символ-Плюс, 2008. - 576 с, ил.

16. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил.

17. Электронные книги JavaScript

18. Аверьянов, Л. Я. Современные проблемы Интернет – обучения / Л. Я. Аверьянов, д-р соц. наук, проф., А. В. Рунов, канд. социол. наук, доц. // Информатика и образование. – 2003. - № 5. – С. 70 – 75.