Россия, с. Верхнетавлыкаево
СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Был в сети 04.09.2023 06:38
Байзигитов Урал Нурбакович
учитель информатики
71 год
1 077
61 764 
Местоположение
Специализация
Работа Байзигитова Азамата
В прошлом учебном году я подготовил для конкурса научно-исследовательских работ несколько вариантов тестов. Для их составления я использовал JavaScript. В этом году я продолжил работу с применением скриптов, но уже для создания сайта.
Скрипты были применены для создания горизонтального меню (файл index.html), фотоальбома одноклассников (файл frends.html) и семейного фотоальбома (файл foto.html).
Работа, пока, выполнена частично. В дальнейшем я надеюсь завершить работу и опубликовать ее в сети Интернет.
Возможно добавлю некоторые пункты. Например, можно разместить форму для отправки сообщений, можно отобразить погоду, календарь и т.п.
Таким образом, имея в своем распоряжении только текстовый редактор «Блокнот», входящий в состав операционной системы Windows, можно создать вполне работоспособный сайт.
Листинг файла index.html
<html>
<title>Личная страница Байзигитова А.А.</title>
<style type="text/css">
<!-
a.bi{
background-color:#CC99FF;
color:#3333FF;
display:block;
font-family: MS Sans Serif,sans-serif;
font-size:8pt;
font-weight:bold;
padding:3px 3px 3px 3px;
text-decoration:none;
border-color: #225555 #000000 #000000 #225555;
border-style:solid;
border-width:2px;
}
a.bi:hover{
background-color:;
color:#0000FF;
}
a.mi{
background-color:;
color:#FF00FF;
display:block;
font-family:MS Sans Serif,sans-serif;
font-size:8pt;
font-weight:bold;
padding: 2px 2px 2px 4px;
text-decoration:none;
}
a.mi:hover{
background-color:#CCCCFF;
color:;
}
.mn{
background-color:;
border-color: #225555 #000000 #000000 #225555;
border-style:solid;
border-width:2px;
z-index:100;
}
.sp{
BORDER-TOP:#000000 1px solid;
MARGIN:2px;
BORDER-BOTTOM:#225555 1px solid
}
//->
</style>
<script language="JavaScript">
<!-//
var D6=window,Y7=document;function B8(){this.ver=navigator.appVersion;this.agent=navigator.userAgent;this.dom=Y7.getElementById?1:0;this.opera5=this.agent.indexOf("Opera 5")>-1;this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;this.ie4=(Y7.all && !this.dom && !this.opera5)?1:0;this.ie=this.ie4||this.ie5||this.ie6;this.mac=this.agent.indexOf("Mac")>-1;this.ns6=(this.dom && parseInt(this.ver)>=5)?1:0;this.ns4=(Y7.layers && !this.dom)?1:0;this.bw=(this.ie6||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5);return this}bw=new B8();z=0;b=0;g="";if(bw.opera5||bw.ns6){b=2};if(bw.ie){g=" style='width: 100%'"}else{z=6}mt=10;ml=10;w=150;mh=23;mw=ml-w;k=1;mt=mt-z;p="<a class='mi'"+g+" href='";q="' title='";r="\"; return true' onmouseout='window.status=\"\"; return true'>";t="</a>";a="' onmouseover='window.status=\"";v="<div class=sp></div>"
m=new Array();n=new Array();s=new Array();sw=new Array();su=new Array();st=new Array()
m[0]='Школьные друзья';n[0]='#';sw[0]=150;su[0]='Школьные друзья';st[0]="";s[0]=""
+p+"frends.htm"+q+a+"Фотографии"+r+"Фотографии"+t
m[1]='Семья';n[1]='#';sw[1]=150;su[1]='Семья';st[1]="";s[1]=""
+p+"no.html"+q+a+"О семье"+r+"О семье"+t
+p+"photo.htm"+q+a+"Фотографии"+r+"Фотографии"+t
m[2]='Мои достижения';n[2]='#';sw[2]=150;su[2]='';st[2]="";s[2]=""
+p+"works.html"+q+a+"Мои работы"+r+"Мои работы"+t
+p+"dostig.html"+q+a+"Достижения"+r+"Достижения"+t
+p+"nagrady.html"+q+a+"Награды"+r+"Награды"+t
m[3]='Моя школа';n[3]='#';sw[3]=150;su[3]='';st[3]="";s[3]=""
+p+"no.html"+q+a+"Сведения о школе"+r+"Сведения о школе"+t
+p+"no.html"+q+a+"Фотографии"+r+"Фотографии"+t
m[4]='Родная деревня';n[4]='#';sw[4]=150;su[4]='';st[4]="";s[4]=""
+p+"no.html"+q+a+"Из истории деревни"+r+"Из истории деревни"+t
+p+"no.html"+q+a+"Виды"+r+"Виды"+t
m[5]='Мой адрес';n[5]='#';sw[5]=150;su[5]='';st[5]="";s[5]=""
+p+"post.html"+q+a+"Почтовый"+r+"Почтовый"+t
+p+"el.html"+q+a+"Электронный"+r+"Электронный"+t
ma=m.length
if (k==1) {mw2=ml-w;
for (i=0; i < ma; i++){document.write("<div id='sb"+i+"' class='mn' style='position: absolute; top:"+(mt+mh)+";left:"+(mw+=w+2)+";width:"+(sw[i]-b)+"' onmouseover='o["+i+"].showIt()' onmouseout='o["+i+"].hideIt()'>"+s[i]+"</div>")}
for (i=0; i < ma; i++){document.write("<div style='position: absolute; top:"+mt+";left:"+(mw2+=w+2)+";width:"+w+"' onmouseover='o["+i+"].showIt()' onmouseout='o["+i+"].hideIt()'><a class='bi'"+g+" href='"+n[i]+q+st[i]+a+su[i]+r+m[i]+t+"</div>")}}
else {mw2=mt-mh;mt2=mt-mh+2
for (i=0; i < ma; i++){document.write("<div id='sb"+i+"' class='mn' style='position: absolute; top:"+(mt2+=(mh+1))+";left:"+(ml+w-10)+";width:"+sw[i]+"' onmouseover='o["+i+"].showIt()' onmouseout='o["+i+"].hideIt()'>"+s[i]+"</div>")}
for (i=0; i < ma; i++){document.write("<div style='position: absolute; top:"+(mw2+=(mh+1))+";left:"+ml+";width:"+w+"' onmouseover='o["+i+"].showIt()' onmouseout='o["+i+"].hideIt()'><a class='bi'"+g+" href='"+n[i]+q+st[i]+a+su[i]+r+m[i]+t+"</div>")}}
function lib_obj(obj,nest){nest=(!nest) ? "":'document.'+nest+'.';this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt;this.ref=bw.dom||bw.ie4?document:this.css.document;this.x=parseInt(this.css.left)||this.css.pixelLeft||this.evnt.offsetLeft||0;this.y=parseInt(this.css.top)||this.css.pixelTop||this.evnt.offsetTop||0;return this}
function lib_doc_size(){this.x=0;this.x2=bw.ie && document.body.offsetWidth-20||innerWidth||0;this.y=0;this.y2=bw.ie && document.body.offsetHeight-5||innerHeight||0;this.x50=this.x2/2;this.y50=this.y2/2;return this;}
lib_obj.prototype.showIt = function(){this.css.visibility="visible"}
lib_obj.prototype.hideIt = function(){this.css.visibility="hidden"}
function libinit(){page=new lib_doc_size();o=new Array();for (i=0; i < ma; i++){o[i]=new lib_obj('sb'+i);o[i].hideIt()}}
libinit()
//->
</script>
</html>
Листинг файла frends.html
<html>
<head>
<title>Фотоальбом</title>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<Style>
A:Link{ Color: white; Text-decoration: underline}
A:Visited{ Color: white; Text-decoration: underline}
A:Hover{ Color: white; Text-decoration: none}
td, body {font-family: verdana, arial, helvetica; font-size:11px;}
</Style>
<!- HEAD START HERE ->
<SCRIPT language=JavaScript type=text/javascript>
var i=1
function next(){
i++
if (i==9) i=8
s="f"+i+".htm"
document.all.innerframe.src=s
}
function prev(){
i-
if (i==0) i=1
s="f"+i+".htm"
document.all.innerframe.src=s
}
function GotoNomber(nomber){
i=nomber
s="f"+nomber+".htm"
document.all.innerframe.src=s
}
function nombersShow(){
document.all.raw.style.display=""
document.all.raw.style.visibility="visible"
document.all.nombers.href="javascript:nombersHide()"
}
function nombersHide(){
document.all.raw.style.display="none"
document.all.raw.style.visibility="hidden"
document.all.nombers.href="javascript:nombersShow()"
}
</SCRIPT>
<!- HEAD END HERE ->
</head>
<body bgcolor="#737994" text="#FFFFFF" link="#FFFFFF" topmargin="0" leftmargin="0">
<!- BODY START HERE ->
<TABLE align=center border=1 borderColor=#000000 cellPadding=0 cellSpacing=0 height=400 width="875">
<TR>
<TD class=headcolor height=20 width="55%"><b> Каталог
фотографий</b></TD>
<TD align=middle class=headcolor width=311>
<A href="javascript:prev()"><<Предыдущая</A>
<A href="javascript:nombersShow()" id=nombers title="Переход по номеру"><B><№></B></A>
<A href="javascript:next()">Следующая>></A>
</TD></TR>
<TR id=raw style="DISPLAY: none; VISIBILITY: hidden"><TD align=right class=headcolor colSpan=2 height=1 width="871">
<A href="javascript:GotoNomber(1)">1</A>
<A href="javascript:GotoNomber(2)">2</A>
</TD></TR>
<TR><TD align=middle class=bodycolor colSpan=2 width="871">
<IFRAME align=middle frameBorder=0 height="100%" id=innerframe src="f1.htm"
width="100%"></IFRAME></TD></TR></TABLE>
<!- BODY END HERE ->
<A href=index.htm>На главную</A>
</body>
</html>
Листинг файла photo.html
<html>
<head>
<title>Фотоальбом</title>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<Style>
A:Link{ Color: white; Text-decoration: underline}
A:Visited{ Color: white; Text-decoration: underline}
A:Hover{ Color: white; Text-decoration: none}
td, body {font-family: verdana, arial, helvetica; font-size:11px;}
</Style>
<!- HEAD START HERE ->
<SCRIPT language=JavaScript type=text/javascript>
var i=1
function next(){
i++
if (i==9) i=8
s="p"+i+".htm"
document.all.innerframe.src=s
}
function prev(){
i-
if (i==0) i=1
s="p"+i+".htm"
document.all.innerframe.src=s
}
function GotoNomber(nomber){
i=nomber
s="p"+nomber+".htm"
document.all.innerframe.src=s
}
function nombersShow(){
document.all.raw.style.display=""
document.all.raw.style.visibility="visible"
document.all.nombers.href="javascript:nombersHide()"
}
function nombersHide(){
document.all.raw.style.display="none"
document.all.raw.style.visibility="hidden"
document.all.nombers.href="javascript:nombersShow()"
}
</SCRIPT>
<!- HEAD END HERE ->
</head>
<body bgcolor="#737994" text="#FFFFFF" link="#FFFFFF" topmargin="0" leftmargin="0">
<!- BODY START HERE ->
<TABLE align=center border=1 borderColor=#000000 cellPadding=0 cellSpacing=0 height=400 width="875">
<TR>
<TD class=headcolor height=20 width="55%"><b> Моя семья</b></TD>
<TD align=middle class=headcolor width=311>
<A href="javascript:prev()"><<Предыдущая</A>
<A href="javascript:nombersShow()" id=nombers title="Переход по номеру"><B><№></B></A>
<A href="javascript:next()">Следующая>></A>
</TD></TR>
<TR id=raw style="DISPLAY: none; VISIBILITY: hidden"><TD align=right class=headcolor colSpan=2 height=1 width="871">
<A href="javascript:GotoNomber(1)">1</A>
<A href="javascript:GotoNomber(2)">2</A>
</TD></TR>
<TR><TD align=middle class=bodycolor colSpan=2 width="871">
<IFRAME align=middle frameBorder=0 height="100%" id=innerframe src="p1.htm"
width="100%"></IFRAME></TD></TR></TABLE>
<!- BODY END HERE ->
<A href=index.htm>На главную</A>
</body>
</html>
Использованная литература
- Информатика №21, 2000. Приложение к газете «ПЕРВОЕ СЕНТЯБРЯ»
- Информатика №22, 2000. Приложение к газете «ПЕРВОЕ СЕНТЯБРЯ»
- Информатика №29, 2001. Приложение к газете «ПЕРВОЕ СЕНТЯБРЯ»
- Информатика №25, 2001. Приложение к газете «ПЕРВОЕ СЕНТЯБРЯ»
- Информатика №21, 2001. Приложение к газете «ПЕРВОЕ СЕНТЯБРЯ»
- Информатика и информационные технологии. Учебник для 10-11 классов. Угринович Н.Д. Москва. Бином. Лаборатория знаний. 2006.
Категория:
Информатика
23.03.2015 09:52
Вебинар для учителей
Свидетельство об участии БЕСПЛАТНО!
