Евгений Рукавишников. Web-master FAQ

Некоторые ответы на некоторые вопросы, касающиеся Web-дизайна. В ответах приведены только способы решения проблемы, а не законченные программы и решения.

Как сделать анимированную картинку?
Как сделать картинку с "прозрачным" фоном?
Как работает "случайный" URL?
А как сделать "случайную" картинку?
Как открыть дополнительное окно?
Как сделать навигацию через выпадающее меню?
Как c помощью CGI-программы показать картинку?
Иногда требуется удалить из файла все HTML тэги. Как это сделать?
Как заменить картинку, когда пользователь "наехал" курсором на линк?
Как сделать чтобы банеры, на странице, менялись?

Как сделать анимированную картинку?
Чаще всего (в Web), как анимированная картинка используется GIF стандарта 89a. Чтобы сделать такую картинку необходимо иметь соответствующее программное обеспечение и набор картинок из которых будет собираться анимационная картинка. Программное обеспечение для Windows95/NT:
Microsoft GIF Animator V1.0 (http://www.microsoft.com/imagecomposer/gifanimator/gifanin.htm) freeware
GIF Construction Set (http://www.mindworkshop.com/alchemy/gifcon.html) shareware
WWW Gif Animator (http://stud1.tuwien.ac.at/~e8925005/) shareware
ULead GIF Animator (http://www.ulead.com/) shareware
Подготовить последовательность кадров для создания анимированной картинки можно в любом анимационном редакторе.
Как сделать картинку с "прозрачным" фоном?
Чтобы сделать картинку с прозрачным фоном необходимо чтобы ваш графический редактор поддерживал работу с форматом GIF89a. Большинство современных графических редакторов (Adobe Photo Shop 3.5 и выше, Corel Photo Paint 7, и т.д.) поддерживают этот формат. Если ваш графический редактор не поддерживает этот формат, а вы, в силу каких-либо обстоятельств, не желаете от него отказываться, можно использовать некоторые дополнительные программы, такие, как:
PhotoImpact Viewer (Ulead Systems, Inc. http://www.ulead.com/) помимо того, что эта программа позволяет просматривать графические файлы разнообразных форматов, она позволяет конвертировать файлы из одного формата в другой, включая и GIF89a с заданием прозрачного фона.

Как работает "случайный" URL?
Проще всего, оформить это, как CGI-программу. Сразу, стоит оговориться, что URL не совсем случайный, он случайный-, но из вашего списка. Формат списка простой и может пополняться либо в ручную, либо другими программами.
Пример файл LINKS.LST:

http://www.tsu.ru/
http://www.netscape.com/
http://www.microsoft.com/

CGI-программа на Perl ( rurl.pl ):

# случайный URL
open (FILE, "<LINKS.LST"); # открываем файл LINKS.LST на чтение
@url = (<FILE>);   # прочитали файл в массив, один элемент массива - одна строка из файла
close (FILE);
srand ( time );
$index = int ( rand ( $#url + 1 ) );   # получили случайное число в интервале от 0 до $#url + 1
print "Location: ", $url[$index], "\n\n";
exit;

Фрагмент вызова программы в HTML-файле:

<a href="/cgi-bin/rurl.pl">Случайный URL</a>

А как сделать "случайную" картинку?
В принципе, можно использовать программу RURL.PL (см. "Как работает "случайный" URL?"). Отличия будут только в файле с URL и в способе вызова программы из HTML-файла.
Пример файл LINKS.LST:
```
http://www.myhost/pics/img01.gif
http://www.myhost/pics/img02.gif
http://www.myhost/pics/img03.jpg
```
Фрагмент вызова программы в HTML-файле:
```
<img src="/cgi-bin/rurl.pl">
```
Внимание! Этот способ не очень хорошо подходит для демонстрации рекламных банеров. Хотя, в некоторых случаях можно использовать и эту программу. : )
Как открыть дополнительное окно?
На многих Web-sites (для навигации или отображения рекламной или другой информации) открывают дополнительное окно, проще всего это сделать на Java Script. Пример:
```
<HTML>
<HEAD>
<TITLE>My page</TITLE>
<SCRIPT Language="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
...
```
Вызвать это безобразие можно следующими способами:
```
<BODY onload= "javascript:OpenNW('some.html', 'window_name','width=300,height=100')" ... >
или
<a href= "javascript:OpenNW('some.html', 'window_name','width=300,height=100')">...</a>
и т.д.
```
some.html - это для примера, вместо этого должен стоять URL на файл который вы хотите отобразить в открываемом окне.
window_name - имя окна.
Помимо WIDTH и HEIGHT через переменную parms можно передать следующие параметры открываемого окна - [toolbar=yes|no], [location=yes|no], [directories=yes|no], [status=yes|no], [menubar=yes|no], [scrollbars=yes|no], [resizable=yes|no]
Как сделать навигацию через выпадающее меню?
Для этого можно использовать CGI - программу, но в большинстве случаев проще воспользоваться Java Script. Пример :
```
<FORM>
<SELECT Name="list">
<OPTION Selected Value="file01.html">Документ #1</OPTION>
<OPTION Value="file02.html">Документ #2</OPTION>
<OPTION Value="file03.html">Документ #3</OPTION>
<OPTION Value="file04.html">Документ #4</OPTION>
</SELECT>
<INPUT Type=button Value= "Go"onClick="window.location.href=this.form.list.options[this.form.list.selectedIndex].value">
</FORM>
```
Работает это вот так:
В демонстрации используются реальные названия страниц и реальные ссылки.
Как c помощью CGI-программы показать картинку?
Иногда необходимо выводить картинку ИМЕННО CGI-программой. Как это сделать? Предположим у нас есть картинка (в директории cgi-bin) - my_lg01.jpg.
Фрагмент CGI-программы (show_img.pl) на Perl:
```
open(FILE, "<my_lg.jpg");
print "Content-type: image/jpeg\n\n";
binmode( FILE );
binmode( STDOUT );
while (read(FILE, $data, 4096)) {
	print $data;
}
close(FILE);
```
Вызов из HTML-документа будет выглядеть так:
```
<img src="/cgi-bin/show_img.pl">
```
Иногда требуется удалить из файла все HTML тэги. Как это сделать?
Можно воспользоваться многочисленными программами конвертирующими HTML в различные форматы. Можно самому написать маленькую программку.
Пример на Perl:
```
open(IFILE, "<$ARGV[0]");
@line = (<IFILE>);
close(IFILE);

$all_lines = join( "", @line);
$all_lines =~ s/<([^>]*)>//g;

open(OFILE, ">$ARGV[1]");
print OFILE $all_lines;
close(OFILE);
```
Фрагмент этой программки можно использовать в CGI-программах для удаления HTML тэгов (например в Guest Book или Message Board)
Как заменить картинку, когда пользователь "наехал" курсором на линк?
Попробуйте использовать следующий скрипт.
```
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
```
Вызывается это следующим образом:
```
<a href=some.html onMouseOver="switch_img('pic01','box02.gif')" onMouseOut="switch_img('pic01','box01.gif')">
<img name="pic01" src="box01.gif" width=10 height=10 border=0> Текст</a>
```
onMouseOver - вызывается, когда курсор "наехал" на линк.
onMouseOut - вызывается, когда курсор "съехал" с линка.
box01.gif и box02.gif - URL на картинки.
P.S. Честно говоря, я не очень тщательно тестировал это, но на Netscape Navigator 3.nn и Netscape Communicator 4.nn это работает.
Как сделать чтобы банеры, на странице, менялись?
Проще всего воспользоваться такой приятной возможностью многих Web-серверов, как SSI (Server Side Includes). Сервер, перед тем как послать HTML-документ пользователью, разбирает его сам и выполняет некоторые "вставки" и только после этого отдает документ пользователю. Чаще всего, документы с такими "вставками" имеют тип .shtml, но это не обязательно. Для примера, я написал простенькую программу случайного выбора банера из списка.
```
#!/usr/local/bin/perl
# banner.pl
$banner[0] = '<a href="http://www.some.site/><img src=benner0.gif width=468 height=60 alt="banner0"></a>"';
$banner[1] = '<a href="http://www.some.site/><img src=benner1.gif width=468 height=60 alt="banner1"></a>"';
$banner[2] = '<a href="http://www.some.site/><img src=benner2.gif width=468 height=60 alt="banner2"></a>"';
$banner[3] = '<a href="http://www.some.site/><img src=benner3.gif width=468 height=60 alt="banner3"></a>"';
$banner[4] = '<a href="http://www.some.site/><img src=benner4.gif width=468 height=60 alt="banner4"></a>"';

srand(time);
$index = int(rand($#banner+1));

  # некоторые сервера требуют более детального описания content
  # для них требуется выдавать в STDOUT еще одну строку:
  # print "Content-type: text/html\n\n";

print $banner[$index];
exit;
```
Вызов в HTML-документе:
Опять возникает проблемма различий серверов. Приведу несколько видов вызова.
```



```
P.S. Ротацию банеров моджно сделать и для обычного .html, но это слегка сложнее.