Примеры использования Java и GGI скриптов
Рассмотрим два простейших вида программирования: применение 1.CGI-скриптов и 2. JAVA-скриптов.
1. CGI-скрипты на странице это комманды посетителя сайта программе, размещенной на сервере, выполнить определенные
действия: занести в гостевую книгу, искать по серверу, обработать форму для отправки сообщений.
Применение их разрешено не на всех серверах, а в основном на платных. Создавать скрипты самому сейчас необходимости нет, можно скопировать, например из сайта www.cgi-resources.com.
Пример формы:
<P>Начало формы</P>
<table border=1 width=250 >
<tr>
<td >
Впишите свой адрес:
</td>
<td >
Подписаться:
</td>
</tr>
</table>
<P>Конец формы</P>
<P>Код формы: </P>
<P><FORM action=http://kulichki.rambler.ru/cgi-bin/cgiwrap/listserv/subscribe.pl
method=get> <TABLE bgColor=#F3FEFF border=1 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> </P>
Как видно, форма начинается меткой FORM. Метка АCTION-указывает
на путь к обработчику формы (там где находится исполняемый файл-скрипт), METHOD -метод протокола передачи гипертекстов: METHOD=POST и METHOD=GET, по
умолчанию предполагается METHOD=GET.
надписью отправить и действием подписаться при нажатии
значек кнопки подтверждается желание подписаться (следите за логикой: ввод помеченной кнопки=подписка) .
Форма может содержать CHECKBOX- квадратик, куда можно ставить галочку, HIDEN- cкрытые элементы и др. Самый простой метод создать форму: скачать готовую и
подогнать ее под свои потребности. Базисные знания у вас уже есть.
2. JAVA-cкрипты тоже лучше изучать на примерах.
а) Меняющаяся кнопка при нажатии.
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";
}
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";
}
</P>
Код:
<
<P> </P>
<P>browser_name = navigator.appName; </P>
<P>browser_version = parseFloat(navigator.appVersion); </P>
<P>if (browser_name == "Netscape" && browser_version >= 3.0) {
roll = "true"; } </P>
<P>else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) { roll = "true"; } </P>
<P>else { roll = "false"; } </P>
<P>function over(img,ref) { if (roll == "true") { document.images[img].src = ref; } } </P>
<P>function out(img,ref) { if (roll == "true") { document.images[img].src = ref; } } </P>
<P>if (roll == "true") </P>
<P>{ </P>
<P>[b]a1=new Image;a1.src="../menue/news_an.jpg"; [/b]</P>
<P>[b]a2=new Image;a2.src="../menue/news_aus.jpg"; [/b]</P>
<P>} </P>
<P></SCRIPT> </P>
<P><script LANGUAGE="javascript"> </P>
<P>1 browser_name = navigator.appName; </P>
<P>2 browser_version = parseFloat(navigator.appVersion); </P>
<P>3 if (browser_name == "Netscape" && browser_version >= 3.0) { roll = "true"; } </P>
<P>3 else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) { roll = "true";
} </P>
<P>4 else { roll = "false"; } </P>
<P>5 function over(img,ref) { if (roll == "true") { document.images[img].src = ref; } } </P>
<P>6 function out(img,ref) { if (roll == "true") { document.images[img].src = ref; } } </P>
<P>7 if (roll == "true") </P>
<P>{ </P>
<P>8 [b]a1=new Image;a1.src="../menue/news_an.jpg"; [/b]</P>
<P>[b]9 a2=new Image;a2.src="../menue/news_aus.jpg"; [/b]</P>
<P>} </P>
<P></SCRIPT> </P>
<P>
10 [b]<p><A HREF="../distant/index.html" onmouseover="over("image_name","menue/news_aus.jpg");" [/b]</P>
<P>[b]11 onmouseout="out("image_name","menue/news_an.jpg");">[/b]</P>
<P>12 <img name="image_name" alt="О дистанционном обучении" src="../menue/news_an.jpg"
width=84 height=28 border="0"></P>
<P></A> </P>
Для себя этот скрипт можно приспособить делая ссылки на свои рисунки в строках 8,9,10,11,12 (убирая естественно номера строк) и ссылку на
свой документ в строке 10. Рисунков может быть больше. У меня имена рисунков: news_an - мышь нажата, news_aus- отпущена. Те строки, которые нужно менять,
выделены
б) Если ваш сайт "переехал", вы можете перенаправить посетителей со старого адреса на новый (new.address) этим
скриптом:
<P><HEAD></P>
<P><META HTTP-EQUIV="REFRESH" CONTENT="1; URL=http://www.[b]new. address[/b]"></P>
<P><script language="javascript"> </script></P>
<P><!-- window.location.href = "http://www..[b]new. address[/b]" //
--> </P>
<P><CENTER></P>
<P>[b]<A HREF="http://www.new.address">new name</A>[/b]</P>
<P></BODY></P>
<P></HTML></P>
в) Выпадающее меню:
Начало формы
Пособие по веб дизайну
Основы HTML Программирование веб страниц
Cоветы
Конец формы
Код:
<
<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.[b]menu name[/b].options[this.form.[b]menu name[/b].selectedIndex].value">
</form>
Форма задается элементом SELECT. Если форм несколько, menue name должны
отличаться.
г) Поместите свой текст в строку состояния браузера автоматической корректировкой тега BODY:
Вот и все программирование для начинающего веб дизайнера. Знание даже этого минимума позволит придать вашим страницам привлекательный
профессиональный вид.