Рефераты. Разработка web сайта на основе HTML с использованием JavaScript

.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">&nbsp;</td>

    <td width="100%" align=center>  <img src="img\adnin1.gif" align=center> &nbsp;</td>

    <td ><img src="img\flag1.gif" align=right>&nbsp;</td>

    </table>

  </td>

 </tr>

 <tr>

  <td colspan=3 height="7" ></td>

 </tr>

 

 <tr>

  <td colspan=3 background="img\fon4.gif" height="24">&nbsp;</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>

    

     <td>  <p >&nbsp;</p></td>

    </tr>

    <tr>

     <td><P id=sR align=justify>&nbsp;</td>

    </tr>

   </table>                     

  </td>

  </td>

  <td  height="100%" valign="top">

   <table   >

    <tr height="18" align="right" >

     <td valign="middle" width="100%" background="grad.gif" height="18"><p>Опрос</p></td>      

    </tr>

    <tr>

     <td colspan="3" bgcolor="#ffffff" height="200" >

      <div id="winnews"  style="height:350;" >&nbsp;</p></div></td>

    </tr>

 

 

 

<table   >

<tr height="18" >

<td valign="middle" width="100%"  height="18"><p>Найти</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">&nbsp;</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("","","");






//-->

2.        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  с интерактивными скриптовыми технологиями. Использование последних является отдельной темой, подходящей для отдельного проекта.

 

Список литературы


1.      Айзекс А. Dynamic HTML BHV-Санкт-Петербург 1998

2.      Ганчаров А. Самоучитель HTML. Питер 2000

3.      Дарнелл Р. HTML 4 Энциклопедия пользователя ДиаСофт 1999

4.      Денисов Internet Explorer 5 Справочник Питер 1999

5.      Хоумер А. Dynamic HTML Справочник Питер 1999

6.      Петюшкин А.В., HTML. Экспресс-курс. – СПб.: БХВ - Петербург, 2003

7.      Кингсли-Хью Э., JavaScript: учебный курс. – СПб.: Питер, 2002

8.      http://www.robotland.ru/



Страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18



2012 © Все права защищены
При использовании материалов активная ссылка на источник обязательна.