Практическая часть
Листинг сайта:
<html>
<HEAD>
<TITLE>Школа №100</title>
<META content="text/html; charset=windows-1251" http-equiv=Content-Type>
<META content="" name=Description>
<META content="" name=Keywords>
<META content=Nikolay name=Author>
<SCRIPT language=JavaScript1.2
src="search/search.js"></SCRIPT>
<SCRIPT language=JavaScript1.2
src="search/searchEngine.js"></SCRIPT>
<STYLE>
p,span,form,input,hr,textarea{
font-family: Tahoma, Verdana, Arial, Sans serif;
font-size: 11px;
margin: 0px;padding: 0px;
vertical-align: middle;
.vmarg{margin-top:4px;}
.hmarg{margin-left:5px;margin-right:5px;}
.userData {BEHAVIOR: url(newhome0.htm)}
img {margin: 0px;padding: 0px;}
.checkbox{border:none;width:17px;height: 11px;vertical-align: middle;text-align: left;margin:2px;}
.b{font-weight:bold;}
.select{height: 21px; vertical-align:top;border:#A2B1C9 1px solid;background-color: #FFFFFF;}
.button{height: 21px; vertical-align:top; font-family: Verdana, Arial, Sans serif; font-size:10px;}
.but{height: 21px; vertical-align:bottom;font-family: Verdana, Arial, Sans serif; font-size:10px;}
input,textarea{border:#A2B1C9 1px solid;height: 21px; vertical-align:bottom;font-family: Verdana, Arial, Sans serif; font-size:11px;}
.head{background-color: #084D6C;}
.height1{height: 1px;}
.headline{background: #A7C1DD; padding: 0px; margin-top:2px;margin-bottom:2px;}
.headline_m{padding: 0px; margin:0px;}
.headline1{text-align: left; color: #FFFFFF; font-weight: bold; margin: 2px; margin-left:3px;}
.text{text-align:justify;padding: 2px; margin: 2px; color: #26486E;}
a{text-decoration:none;}
a:hover {text-decoration:none;}
a.nav{color:#FFFFFF;}
a.nav:hover{color:#FF0000;}
a.copyr:visited{color:#074C6B;text-decoration:none;}
a.copyr:hover{color:#074C6B;text-decoration:underline;}
a.copyr{color:#074C6B;}
.w{color:#FFFFFF;}
.r{color:#FF0000;}
a.podrobnee{color: #AB7A2C; padding: 10px;}
a.podrobnee:hover{ text-decoration: underline; }
.mi1{padding: 4px; background-color: #5FA4DE;}
.mi{padding: 2px; background-color: #4D81BA; border-bottom: 1px solid White; padding-left: 4px; }
.mi2{padding: 2px; padding-left: 4px; }
.mlink{padding: 0px; background-color: #529ADA;}
a.al{
color:#FFFFFF;
background-image:none;
width:181px;
height:43px;
text-align:left;
font-weight:bold;
padding: 2px 5px 0px 10px;
border-bottom: 1px solid #FFFFFF;
}
a.al:hover{color:#771C00; background-image:url(but_on00.gif); height:43px; width:180px;}
.ramka{margin: 3px; border: 1px solid #A2B1C9; background-color: #3273bb; text-align: center;}
.copyright{margin-left: 5px; color:#FFFFFF;}
div.win{
overflow: scroll;
overflow-x: hidden;
scrollbar-face-color: #306CAD;
scrollbar-shadow-color: #A7C1DD;
scrollbar-highlight-color: #A7C1DD;
scrollbar-3dlight-color: #306CAD;
scrollbar-darkshadow-color: #306CAD;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #ffffff;
body{
scrollbar-face-color: #306CAD;
scrollbar-shadow-color: #A7C1DD;
scrollbar-highlight-color: #A7C1DD;
scrollbar-3dlight-color: #306CAD;
scrollbar-darkshadow-color: #306CAD;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #ffffff;
}
</STYLE>
</head>
<body aLink=#006699 link=#000066 bgColor=#ffffff leftMargin=0 topMargin=0 marginheight="0" marginwidth="0" text="black" vlink="purple" style="skrolling:no">
<table align=center border=0 bordercolor=black border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan=3>
<table background="img\fon1.gif" border=0 >
<tr >
<td><img src="img\admin.jpg"> </td>
<td width="100%" align=center> <img src="img\adnin1.gif" align=center> </td>
<td ><img src="img\flag1.gif" align=right> </td>
</table>
</td>
</tr>
<tr>
<td colspan=3 height="7" ></td>
</tr>
<tr>
<td colspan=3 background="img\fon4.gif" height="24"> </td>
</tr>
<tr>
<td colspan=3 height="7" ></td>
</tr>
<tr>
<td background="img\fon1.gif" width="10" valign="top">
<a href=index.htm > <img src="img\home.gif" border=0></a><br>
<a href=01.htm ><img src="img\hystor.gif" border=0></a><br>
<a href=02.htm ><img src="img\peopls.gif" border=0></a><br>
<a href=03.htm ><img src="img\model.gif" border=0></a><br>
<a href=04.htm ><img src="img\obraz.gif" border=0></a><br>
<a href=05.htm ><img src="img\sou.gif" border=0></a><br>
<a href=06.htm ><img src="img\kontak.gif"border=0></a><br>
</td>
<td width="65%" valign="top" height="890" bgcolor="#FAF8F8">
<table width="100%">
<tr class="ramka">
<td> <p > </p></td>
</tr>
<tr>
<td><P id=sR align=justify> </td>
</tr>
</table>
</td>
</td>
<td height="100%" valign="top">
<table class="ramka" width="182" border="0" cellspacing="0" cellpadding="2" >
<tr height="18" align="right" >
<td valign="middle" width="100%" background="grad.gif" height="18"><p class="headline1">Опрос</p></td>
</tr>
<tr>
<td colspan="3" bgcolor="#ffffff" height="200" >
<div id="winnews" style="height:350;" > </p></div></td>
</tr>
<table class="ramka" width="182" border="0" cellspacing="0" cellpadding="2">
<tr height="18" >
<td valign="middle" width="100%" height="18"><p class="headline1">Найти</p></td>
<td width="18" height="1" height="18"></td>
</tr>
<tr>
<td height="100" colspan="2" bgcolor="#ffffff" >
<table border="0" cellpadding="0" cellspacing="0">
<div align="center"><center>
<FORM name=searchform onsubmit="find();return false;"> <TBODY>
<tr><td nowrap><p>Поиск по сайту</p><p><input style="width:143px" size="11" value="" name=searchbox maxlenght="100"></p><p align="right"><input onclick=find(); type="button" value="Найти"></p></td></tr>
<tr>
</td>
</tr>
</table>
</table>
</td>
</tr>
<tr>
<td colspan=3 height="7" ></td>
</tr>
<tr>
<td colspan=3 background="img\fon4.gif" height="24"> </td>
</tr>
<tr>
<td colspan=3 height="100"></td>
</tr>
</table>
Листинг скриптов:
- 1. search.js
<!--
function info(name,link,info) {
this.name=name;
this.link=link;
this.info=info;
var searchInfo=new Array();
searchInfo[0]=new info("Главная","index.htm","20.12 Игра Самый умный 6-7 классы 25.12 КВН 27.12 Конференция по борьбе против зависимостей 20.01 Сбор макулатуры (собрано 4 тонны) 11.02 Выборы президента совета школы В дальнейшем планируется 14.02 День Святого Валентина В программе: - концерт - дискотека - работа почты влюблённых 19.02 Смотр строя и песни 22.02 Игра Рыцарский турнир 5 7 классы 26.02 День семьи ");
searchInfo[1]=new info("история 1969 1977","01_1.htm","I этап – становления, 1969 – 1977 годы, создание единого коллектива <br>педагогов, учащихся, родителей. Сформировались прочные традиции в эстетическом направлении образования, сложились творческие коллективы:<br> хор учащихся, ансамбль педагогов, школьный <br>театр, которые имели успех не только в районных конкурсах, но и городских. Как отмечали учителя школ № 22, 28 , где продолжали обучение дети, выпускники школы- восьмилетки № 100 отличались жизнерадостностью и взаимопониманием.");
searchInfo[2]=new info("История 1977 1997","01_2.htm","II этап – функционирования, в 1978 году школа приобрела статус средней общеобразовательной.\ Это привело к дальнейшему развитию её потенциала, коллектив учителей пополнился новыми талантливыми педагогами, имеющими опыт работы в средней школе.\ Контингент учащихся определила специфическая социальная среда.\ В основном это были на 65% семьи рабочих второго поколения уралмашевцев и 35% семьи ИТР и интеллигенции. \ В тот период большинство родителей связывали судьбу своих детей с заводом и стремились дать им среднее или высшее техническое образование.\ Поэтому в школе традиционно огромное значение придавалось точным наукам.\В 1988 – 1989 г.г. школа вступила в полосу кризиса, в котором находилась вся советская система.\ Были утрачены былые ценностные ориентиры, которые стали подменяться ценностями материального обогащения любой ценой. \ Наряду с этим, постепенно начались процессы пробуждения и роста общественного самосознания.\ В 90-е годы XX века изменились целевые ориентиры нашего государства.\ Общество обращается к признанию позиции социальных групп и прав конкретного человека.\ Этим обусловлен следующий этап развития школы.\ В 1988 – 1989 г.г. школа вступила в полосу кризиса, в котором находилась вся советская система.\ Были утрачены былые ценностные ориентиры, которые стали подменяться ценностями материального обогащения любой ценой.\ Наряду с этим, постепенно начались процессы пробуждения и роста общественного самосознания. \В 90-е годы XX века изменились целевые ориентиры нашего государства. \Общество обращается к признанию позиции социальных групп и прав конкретного человека.\ Этим обусловлен следующий этап развития школы.\ II этап – поиска идей обеспечения прав личности в образовательном процессе через дифференциацию в обучении.\ В 1992 году принята I программа развития школы.\ Деятельность педагогического коллектива была направлена на обеспечение условий для становления ученика как личности, с разным уровнем способностей и потребностей, для реабилитации отстающих и предоставления возможности продвинутого обучения тем, кто способен учиться с опережением. В период до 1995 года была проведена жёсткая дифференциация по уровню обученности, созданы гомогенные классы: классы коррекционно-развивающие, компенсирующие. Математической и гуманитарной направленности, развивающего обучения по системе Эльконина Д.Б. и Давыдова В.В.\Однако впоследствии мы отказались от ранней жёсткой дифференциации, сохранив лишь специальные коррекционные классы для детей с задержкой психического развития. Так как в гомогенном классе ограничиваются возможности развития личности.\В 1996 году была разработана новая концепция и программа развития школы, где ведущей идеей стала идея адаптивного дифференцированного обучения. Особое внимание в этот период педагогический коллектив уделял конструированию урока в зависимости от склонностей, возможностей и способностей детей в классах смешанного типа. Осуществлялся поиск различных форм и методов обучения для максимального развития каждого ребёнка, апробировались в начальном и среднем звене технологии развивающего обучения. Была начата работа по освоению программы углублённого изучения математики и созданию УМК для классов гуманитарной направленности на завершающей стадии основной школы.\В 1997 году поступил заказ родителей будущих десятиклассников на открытие подготовительных курсов в ВУЗ на базе школы и был заключён договор с УГТУ-УПИ. \Данный этап развития школы характеризуется бурным ростом педагогического мастерства учителей. Методическая работа способствовала становлению статуса педагога как субъекта образовательного процесса, поскольку было направленно не только на повышение теоретических знаний и методических умений, но и на развитие самостоятельности, ответственности, рефлексивности (способности осмысливать свои действия, самопознание). ");
searchInfo[3]=new info("История 1998-2002","01_3.htm","В 1998 – 1999 г.г. школа прошла процесс лицензирования и аттестации.\ Основные виды услуг зафиксированы в лицензии, и школа получила право на образовательную деятельность по программам углублённого изучения математики, коррекционным образовательным программам, наряду с общеобразовательными программами обучения.\Учитывая социальный заказ родителей и учащихся, в 2000 году был заключён договор с УГПУ на создание подготовительных курсов для классов гуманитарной направленности (9 – 11 кл.), в перспективе планируется совместная работа с УрГСХА (открытие профильных сельскохозяйственных 10 классов).\ Таким образом, в деятельности образовательного учреждения за эти годы произошли серьёзные целевые, содержательные, организационно-методические и управленческие изменения, на анализе которых мы остановимся ниже, и проводимые нами социологические исследования подтверждают наше предположение о том, что на пути традиционного, негуманного подхода к растущей личности не могутнаступить качественные изменения в системе образования, в том числе в работе нашей школы, благодаря которым достигался бы главный результат – воспитание свободной и ответственной, духовно и нравственно развитой личности.\Решение столь важной задачи возможно, по нашему убеждению, в учебном заведении, переведённого из условий стабильного функционирования в развивающиеся, работа которого направлена на развитие личности ребёнка в процессе духовного взаимодействия с постоянно совершенствующейся личностью взрослого.");
searchInfo[4]=new info("Дополнительное образование","04.htm"," В школе действует 18 детских объединений по следующим направлениям : - спортивное - художественно-эстетическое - Прикладное (театр модница затейливый крючок, сделай сам, юный редактор и юнный оформитель) - проедметные (эколлогия урала литертура урала занимательный французский логика речь ) - развивающие кружки (МДО) ");
searchInfo[5]=new info("Дополнительное образование Кружки","04_1.htm","Театр Юный программист Танцы Хор ");
searchInfo[6]=new info("Дополнительное образование Секции","04_2.htm","Волейбол Баскетбол Каратэ Киокушинкай ОФП ");
searchInfo[7]=new info("Дополнительное образование Платные услуги","04_4.htm","Эти занятия с удовольствием посещают дети с 3 по 6 класс.\ На уроках они осваивают азы компьютерной грамотности. \Информатика помогает им развивать внимательность сосредоточенность, память и мышление.\ Ребята узнают , как возникают ошибки, как их предотвращать и разыскивать.\ Но самое главное : «Информатика учит их учиться!»");
// searchInfo[n]=new info("","","")
//-->
- 1. searchEngine.js
var msg="";
var yes=false;
var found=0;
var bold="";
var boldN="";
var resultsN="";
function find ()
{
var search= "";
search = document.searchform.searchbox.value;
if(search.length <3) { return;}
var searchFor=search.toUpperCase()
for(i=0;i<searchInfo.length;i++)
{
for(n=0;n<searchInfo[i].info.length;n++)
{
var results=searchInfo[i].info.substring(n,n+search.length);
if(results.toUpperCase()==searchFor)
{
yes=true;
bold=searchInfo[i].info.substring(0,40);
bold +=".....";
break;
if(yes==true)
{
found++;
boldN=searchInfo[i].name;
msg+= '<a href="'+searchInfo[i].link+'">'+boldN+'</a> - '+bold+'<br>';
yes=false
var table=" <b> РЕЗУЛЬТАТЫ ПОИСКА: </b> Найдено <font size=+1 color=#00008B>"+found+"</font> ссылок "+ '<font color=#FF0000><b>' + search + '</b></font><br><br>'
if(document.all) document.all.sR.innerHTML =table + '\n' +msg;
if(document.layers)
{
//Здесь открыть новое окно, куда все и записать.
var neww = window.open("", "neww");
neww.document.write(table + '\n' + msg);
neww.document.close();
window.status="Поиск завершен.";
yes=false;
found=0;
document.forms[0].searchbox.value="";
resultsN="";
bold="";
msg="";
boldN="";
Заключение
В этом проекте был рассмотрен язык разметки гипертекстовых документов HTML, его основные функции свойства и параметры. Сегодня применение HTML практикуется во всех без исключения электронных документах, независимо от тематики, величины и коммерческой направленности Интернет проекта.
В данной работе такие технологии, как CSS JavaScript, были затронуты лишь поверхностно дабы показать эффективность совокупности использования HTML с интерактивными скриптовыми технологиями. Использование последних является отдельной темой, подходящей для отдельного проекта.