WEB design

Програмирование при создании сайтов

Рассмотрим два простейших вида программирования: применение 1.CGI-скриптов и 2. JAVA-скриптов.

1. CGI-скрипты на странице это комманды посетителя сайта программе, размещенной на сервере, выполнить определенные действия: занести в гостевую книгу, искать по серверу, обработать форму для отправки сообщений.
Применение их разрешено не на всех серверах, а в основном на платных. Создавать скрипты самому сейчас необходимости нет, можно скопировать, например из сайта www.cgi-resources.com.
Пример формы:

Код формы:

<FORM action=http://www.kulichki.com/cgi-bin/cgiwrap/listserv/subscribe.pl method=get> <TABLE bgColor=#F3FEFF border=0 cellSpacing=4 width=250> <TBODY> <TR align=middle> <TD> Впишите свой адрес: <INPUT name=email> <INPUT type=submit value=Отправить!> </TD> <TD>Подписаться: <INPUT CHECKED name=action type=radio value=subscribe> </TD></TR></TBODY></TABLE></FORM></TD>

Как видно, форма начинается меткой FORM. Метка АCTION-указывает на путь к обработчику формы (там где находится исполняемый файл-скрипт), METHOD -метод протокола передачи гипертекстов: METHOD=POST и METHOD=GET, по умолчанию предполагается METHOD=GET.
<INPUT>-элемент ввода данных, input type=sybmit - кнопка с надписью отправить и действием подписаться при нажатии
<INPUT CHECKED name=action type=radio value=subscribe>- при нажатии на значек кнопки подтверждается желание подписаться (следите за логикой: ввод помеченной кнопки=подписка) .
Форма может содержать CHECKBOX- квадратик, куда можно ставить галочку, HIDEN- cкрытые элементы и др. Самый простой метод создать форму: скачать готовую и подогнать ее под свои потребности. Базисные знания у вас уже есть.

2. JAVA-cкрипты тоже лучше изучать на примерах.

а) Меняющаяся кнопка при нажатии.

Код:

<SCRIPT LANGUAGE="JavaScript"> 
 
browser_name = navigator.appName; 
browser_version = parseFloat(navigator.appVersion); 
if (browser_name == "Netscape" && browser_version >= 3.0) { roll = 'true'; } 
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) { roll = 'true'; } 
else { roll = 'false'; } 
function over(img,ref) { if (roll == 'true') { document.images[img].src = ref; } } 
function out(img,ref) { if (roll == 'true') { document.images[img].src = ref; } } 
if (roll == 'true') 
{ 
a1=new Image;a1.src="../menue/news_an.jpg"; 
a2=new Image;a2.src="../menue/news_aus.jpg"; 
} 

</SCRIPT> 
<SCRIPT LANGUAGE="JavaScript"> 

1  browser_name = navigator.appName; 
2  browser_version = parseFloat(navigator.appVersion); 
3  if (browser_name == "Netscape" && browser_version >= 3.0) { roll = 'true'; } 
3  else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) { roll = 'true'; } 
4  else { roll = 'false'; } 
5  function over(img,ref) { if (roll == 'true') { document.images[img].src = ref; } } 
6  function out(img,ref) { if (roll == 'true') { document.images[img].src = ref; } } 
7  if (roll == 'true') 
{ 
8  a1=new Image;a1.src="../menue/news_an.jpg"; 
9  a2=new Image;a2.src="../menue/news_aus.jpg"; 

} 

</SCRIPT> 
  
10   <p><A HREF="../distant/index.html" onMouseOver="over('image_name','../menue/news_aus.jpg');" 
11  onMouseOut="out('image_name','../menue/news_an.jpg');">
12  <img name="image_name" alt="О дистанционном обучении" src="../menue/news_an.jpg" width=84 height=28 border="0">
</A>

Для себя этот скрипт можно приспособить делая ссылки на свои рисунки в строках 8,9,10,11,12 (убирая естественно номера строк) и ссылку на свой документ в строке 10. Рисунков может быть больше. У меня имена рисунков: news_an - мышь нажата, news_aus- отпущена. Те строки, которые нужно менять, выделены

б) Если ваш сайт "переехал", вы можете перенаправить посетителей со старого адреса на новый (new.address) этим скриптом:

<HTML>
<HEAD>
<META HTTP-EQUIV="REFRESH" CONTENT="1; URL=http://www.new. address">
<script language="JavaScript">  </script>
<!-- window.location.href = "http://www..new. address" // --> 

<CENTER><A HREF="http://www.new.address">new name</A>




</BODY>







</HTML>

в) Выпадающее меню:

Код:

<form> <select name="menu name">
<option selected value="webdesign.html">Пособие по веб дизайну
<option value="webhtm.html">Основы HTML
<option value="webprog.html">Программирование веб страниц
<option value="web3.html">Cоветы
</select>
<input type=button value="Ok" onclick="top.location.href = this.form.menu name.options[this.form.menu name.selectedIndex].value"> </form>
Форма задается элементом SELECT. Если форм несколько, menue name должны отличаться.

г) Поместите свой текст в строку состояния браузера автоматической корректировкой тега BODY:

Вот и все программирование для начинающего веб дизайнера. Знание даже этого минимума позволит придать вашим страницам привлекательный профессиональный вид.

Содержание