![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Разработка сайта
Видео вставлено с помощью кода: < iframe width=" 250" height=" 188" src=https://www.youtube.com/embed/Lseyylh3Zm0 //ссылка на источник. frameborder=" 0" allowfullscreen> < /iframe>
С помощью 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.
|