Евгений Рукавишников. Web-master FAQ
---------------------------------------------------------------
Оригинал этой странички расположен на
http://wbm.tsu.ru/re/wm_faq.html
К тому же она там регулярно пополняется.
Updated at 13 feb 1993
---------------------------------------------------------------
Некоторые ответы на некоторые вопросы, касающиеся 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">
<!--
var Nwindow = null
function OpenNW ( url, name, parms ) {
Nwindow = window.open( url, name, parms );
}
// -->
</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">
<!--
Version = navigator.appVersion.substring(0,1);
flag = 0;
if (Version > 2) {
flag = 1;
}
function switch_img(imgName, imgURL) {
if (flag == 1) {
document.images[imgName].src = imgURL;
}
}
// -->
</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-документе:
Опять возникает проблемма различий серверов. Приведу несколько видов вызова.
<!--#include "/cgi-bin/banner.pl"-->
<!--#include virtual="/cgi-bin/banner.pl"-->
<!--#exec cgi="/cgi-bin/banner.pl"-->
P.S. Ротацию банеров моджно сделать и для обычного .html, но это слегка сложнее.
Продолжение следует.
HOME PAGE
Last-modified: Fri, 13 Feb 1998 19:29:58 GMT