Э н ц и к л о п е д и я    н е о б х о д и м ы х    к о м п ь ю т е р н ы х    з н а н и й
ezPC
     Поиск:   по сайту  по архиву новостей   

                Сегодня:

Разделы сайта

Первая полоса
Архив новостей
Железо
Компьютеры
Процессоры
Материнские платы
Память
Видеокарты
Звуковые карты
Сетевые карты
Накопители
Устройства ввода
Корпуса
Мониторы
Принтеры
Модемы
Сканеры
Цифровые камеры
Плоттеры
Дигитайзеры
ИБП
Кабели / Разъемы
Ссылки
Софт
Операционные системы
Приложения
Ссылки
Разное
Интернет
Полезняшки
Читальный зал
Конференц-зал
Комната смеха
Веб-камеры
Желтые страницы Сети
Поиск информации
Друзья сайта
EzPC -
Компьютерые новости

Мобилографический Петербург
Реклама
Интернет
FAQ по web-дизайну

Создан: 23.05.93.
Последнее обновление: 13.02.98.
Автоp: Евгений Рукавишников.
Некоторые ответы на некоторые вопросы, касающиеся Web-дизайна. В ответах приведены только способы решения проблемы, а не законченные программы и решения.

ВОПРОСЫ:

  1. 

Как сделать анимированную картинку?

  2. 

Как сделать картинку с "прозрачным" фоном?

  3. 

Как работает "случайный" URL?

  4. 

А как сделать "случайную" картинку?

  5. 

Как открыть дополнительное окно?

  6. 

Как сделать навигацию через выпадающее меню?

  7. 

Как c помощью CGI-программы показать картинку?

  8. 

Иногда требуется удалить из файла все HTML тэги. Как это сделать?

  9. 

Как заменить картинку, когда пользователь "наехал" курсором на линк?

10. 

Как сделать чтобы банеры, на странице, менялись?

ОТВЕТЫ:

1. Как сделать анимированную картинку?

Чаще всего (в Web), как анимированная картинка используется GIF стандарта 89a. Чтобы сделать такую картинку необходимо иметь соответствующее программное обеспечение и набор картинок из которых будет собираться анимационная картинка.
Программное обеспечение для Windows95/NT:
Microsoft GIF Animator V1.0 (http://www.microsoft.com/imagecomposer/gifanimator/gifanin.htm)
GIF Construction Set (http://www.mindworkshop.com/alchemy/gifcon.html)
WWW Gif Animator (http://stud1.tuwien.ac.at/~e8925005/)
ULead GIF Animator (http://www.ulead.com/)
Подготовить последовательность кадров для создания анимированной картинки можно в любом анимационном редакторе.
Вернуться к началу страницы /

2. Как сделать картинку с "прозрачным" фоном?

Чтобы сделать картинку с прозрачным фоном необходимо чтобы ваш графический редактор поддерживал работу с форматом GIF89a. Большинство современных графических редакторов (Adobe Photo Shop 3.5 и выше, Corel Photo Paint 7, и т.д.) поддерживают этот формат.
Если ваш графический редактор не поддерживает этот формат, а вы, в силу каких-либо обстоятельств, не желаете от него отказываться, можно использовать некоторые дополнительные программы, такие, как:
PhotoImpact Viewer (Ulead Systems, Inc. http://www.ulead.com/).
Помимо того, что эта программа позволяет просматривать графические файлы разнообразных форматов, она позволяет конвертировать файлы из одного формата в другой, включая и GIF89a с заданием прозрачного фона.
Вернуться к началу страницы /

3. Как работает "случайный" 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>
Вернуться к началу страницы /

4. А как сделать "случайную" картинку?

В принципе, можно использовать программу 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">
Внимание! Этот способ не очень хорошо подходит для демонстрации рекламных банеров. Хотя, в некоторых случаях можно использовать и эту программу. :-)
Вернуться к началу страницы /

5. Как открыть дополнительное окно?

На многих 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]
Вернуться к началу страницы /

6. Как сделать навигацию через выпадающее меню?

Для этого можно использовать 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>

Работает это вот так:

В демонстрации используются реальные названия страниц и реальные ссылки.
Вернуться к началу страницы /

7. Как 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">
Вернуться к началу страницы /

8. Иногда требуется удалить из файла все 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).
Вернуться к началу страницы /

9. Как заменить картинку, когда пользователь "наехал" курсором на линк?

Попробуйте использовать следующий скрипт.

<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 это работает.
Вернуться к началу страницы /

10. Как сделать чтобы банеры, на странице, менялись?

Проще всего воспользоваться такой приятной возможностью многих 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, но это слегка сложнее.
Вернуться к началу страницы /

Источник информации: http://wbm.tsu.ru/re/wm_faq.html.

 
Наверх /     / Назад /

      
контент
       Rambler's Top100       Рейтинг@Mail.ru       Яндекс цитирования       количество читателей онлайн и всего