Доброе время суток.

Выпуск №11

Новости нашего сайта

В IE 5.0 было сделано одно очень важное нововведение- фильтры. Благодаря этому дизайнер получает доступ к таким визуальным эффектам, которые раньше были доступны только в профессиональных графических редакторах, таких как Adobe Fotoshop или Corel Photopaint. При этом размер паги не увеличивается. К сожалению Netscape Navigator не поддерживает эту фичу. Рассмотрим ближе применение фильтров. Устанавливаются они по средствам свойства filter любого визуального объекта. Самый простой состоит в использовании параметра STYLE в тэге объекта. Например:
IMG SRС="image.gray" style=""filter:" gray"
Аналогичное действие можно сделать с помощью JavaScript:
image1.style.filter = Gray() Alpha(opacity=50);
При этом объекту, идентифицируемому как image1, будут присвоены фильтры gray и alpha. К фильтру можно обращаться, используя все то же свойство filter. Если к одному объекту применено несколько фильтров, то обращение к ним происходит с помощью массива filters. В процессе работы можно изменять значения аргументов, просто обращаясь к соответствующему фильтру и его свойству. Например:
image1.style.filters[1].opacity=30;
Можно также присвоить фильтр какой-либо переменной и затем работать с ней:
var imagefilter = image2.style. filters[3];
imagefilter.changeColor (0,0,0,255,1);
Фильтр можно удалить, просто присвоив пустую строку свойству filter:
myobject.style.filter = "";
Как вы видите из этих параметров, использовать замечательное нововведение очень просто. Осталось только понять какие бывают фильтры и какие эффекты они придают изображению. В этой статье я расскажу только о фильтре FlipV и FlipH!!! Эти фильтры позволяют зеркально отображать объект по вертикали или горизонтали. Они не имеют параметров:
testimage.style.filter="FlipV()" testimage.style.filter=FlipH()"
Фильтр FlipV() зеркально отображает объект по вертикали, фильтр FlipH() - по горизонтали. Об остальных фильтрах, возможно я расскажу позже.

Вверх страницы вот такой код:

<SCRIPT>
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){
setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}
clearTimeout(nereidFadeTimers[object.sourceIndex]);
diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;

if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}
</script>

А вот что надо писать при вставки изображения:

<img src="http://ida-dbs.com/banner/88_31_2.gif" width="88" height="31" border="0" onMouseOver=nereidFade(this,100,10,20) style='FILTER: alpha(opacity=30)' onMouseOut=nereidFade(this,30,10,20) alt="Изготовление баннеров">

Источник:  http://sid.com.ru

Изучаем HTML: рисунки и карты 

Статью подготовил: Mike (info@metalloprofil.ru)

<IMG> - элемент для создания ссылки на графический файл (image). Он не содержит конечного тега - вся необходимая информация задается при помощи атрибутов. Этот элемент является универсальным: с его помощью можно использовать изображения в гиперссылках, вставлять картинки в таблицы, просто размещать рисунки на Web-странице, создавать маркеры, решать задачи дизайна и т.д.

Необходимым атрибутом является src - указатель на файл графики:

src="Ссылка на файл"

Очень полезным атрибутом является alt. Он позволяет выводить текст в тех местах, где должны располагаться рисунки. Страница может загружаться достаточно долго, и пока графические файлы на подходе, пользователь должен видеть, какие изображения он сможет получить. В некоторых случаях это позволит ему, не дожидаясь окончания загрузки, прокрутить в окне текущий документ или перейти на другую страницу. Вот несколько примеров:

alt="My photo" — для фотографии;
alt="www.webshops.ru" — если это гиперссылка;
alt="pict15.gif" — удобно для разработчика страницы.

Высоту и ширину области, в которой демонстрируется рисунок, задают: при помощи атрибутов height и width. В том случае, когда задается один из этих атрибутов, рисунок масштабируется таким образом, чтобы его высота или ширина соответствовали заданной. Второй размер устанавливается автоматически, в соответствующей пропорции. Таким образом, применение только одного из атрибутов изменяет оба размера рисунка. Если задать явным образом оба атрибута, то рисунок будет масштабироваться по двум осям в соответствии с заданным размером. Масштабирование, как правило, ухудшает качество изображения.

Рисунок можно снабдить и стандартными атрибутами: class, dir, id, lang, longdesc, style, title, атрибутами событий.

Элемент IMG позволяет использовать изображения, отдельные части которых связаны со ссылками и позволяют выполнять переходы. Такие изображения называются картами (mар). В том случае, когда реакцию на щелчок на карте обрабатывает программа, расположенная на сервере, в элемент включается атрибут ismap. Иногда его записывают так:

ismap="ismap"

В том случае, когда карта обрабатывается броузером, используется атрибут usemap. Он определяет имя карты:

usemap="#Имя"

Интересно, что задание атрибутов usemap придает элементу IMG свойства, характерные для элемента А, то есть возможность осуществления перехода. Кроме того, мы сталкиваемся со случаем, когда необходимо обязательное совместное использование сразу трёх элементов: AREA, IMG и MAP.

<map><area></map>

name="Имя"

href="Адрес"

alt="Текст подсказки"

Атрибуты, определяющие форму области на карте, являются обязательными. Существует три стандартных вида областей: круг (circle), прямоугольник (rect) и многоугольник произвольной формы (polygon).

Для круга необходимо задать координаты центра и радиус (r), выраженные в пикселах. Координаты центра отсчитываются от левого края (х) и верхнего края (у) рисунка. Шаблон для задания круговой области таков:

shape="circle" , coords=x, у, r

shape="poly" coords=x1, у1, х2, у2, х3, у3 ...

shape="rect" coords=x1, y1, x2, y2

На листинге приведен пример страницы Map.htm, на которой размещены две карты. Карта, имеющая имя karta1, содержит область в виде круга и область произвольной формы. Карта karta2 содержит область прямоугольной формы.

Web-страница с картами

<html>
<head>
  <title>Указатель Wеb-страниц</title>
</head>
<body bgcolor="#FFFFFF"  text="#000000"  link="#0000FF" vlink="ffFF00">
  <center><h2>Примеры карт</h2></center>
  <p>Изображения карт иллюстрируют способы задания координат областей для
  переходов
  <hr>
  <h2>Карта 1</h2>
  <map name="karta1">
    <area alt="Kpyг" shape="circle" coords="119, 114, 83"
    href="http://www.metalloprofil.ru">
    <area alt="Mнoгoyгольник" shape="poly" сoords="74, 242, 180, 250, 249,
    239, 242, 278, 31, 276" href="Start.htm">
  </map>
  <map name="karta2">
    <area аlt="Переход к карте 2" shape="rect" coords="27, 31, 191, 101"
    href="#verh">
  </map>
  <img src="Map1.gif" usemap="#karta1" alt="Kapта 1">
  <hr>
  <p>Ha этой странице представлены две карты, которые позволяют
     выполнять различные переходы. Для правильного функционирования
     страницы необходимо проверить все ссылки на файлы, заданные
     с помощью атрибутов <b>src</b> и <b>href</b>,
  <p>Щелчок по зеленому кругу обеспечит переход к Web-странице
     издательства "Питер". Желтый многоугольник вернет вас
     на страницу Start.htm. Красный прямоугольник
     обеспечивает переход в начало этой страницы.
  <hr>
  <h2>Карта 2</h2>
  <img src="Map2.gif" useraap="#karta2" alt="Kapтa 2">
</body>
</html>

<object data="Имя.gif" type="image/gif" usemap="#karta1"></object>

Но сейчас, в связи с развитием новых технологий, вместо такой карты можно использовать флеш. Стильный флеш ролик на главной странице сайта может приятно удивить посетителя.

Одним из способов применения карты является создание меню страницы. Это обычно горизонтальная полоса, состоящая из цветных прямоугольников с текстом команд. Щелчок на каждом из прямоугольников переводит пользователя на другую страницу или в другую точку текущей страницы. Преимущество графического меню заключается в независимости от используемой кодировки символов: буквы всегда будут видны. Такое меню можно сделать как набор нескольких рисунков, но тогда надо принимать меры к тому, чтобы эти рисунки всегда, при любой конфигурации окна броузера, располагались в ряд. Гораздо проще представить меню в виде одного рисунка-карты и разбить его на несколько прямоугольных областей. Но этот способ не приемлем для профессиональных web-дизайнеров.

Автор: Евгений Жданов (protoplex@mailru.com)
Источник: Российский мультипортал ProtoPlex

Каждый человек, попадающий в сеть, замечает на страницах сайтов небольшие красочные картинки определённого размера. Все такие картинки пытаются Вас куда-то утащить, заманить на другой сайт. Часто Вы поддаётесь их влиянию и в результате знакомитесь с различными интересными сайтами. Картинка называется баннером (banner - плакат, флаг), за размещение баннера на своём сайте автор получает вознаграждение в некотором роде. Часто это вознаграждение имеет денежный эквивалент, однако, сумма обычно мала, поэтому баннеры служат в основном не для обеспечения заработка, а скорее для продвижения сайта. Иногда и для того, и для другого. Всё зависит от популярности сайта и от идеологии самого автора.

Не секрет, что некоторые "прогрессивные" сайты (в основном развлекательные, эротические ресурсы) страдают от чрезмерного количества баннеров на одной странице. Обычно такие сайты долго грузятся, очень громоздки, и, как правило, неинформативны. Авторы таких сайтов явно хотят что-то поиметь со своих посетителей, заставляя их смотреть кучу рекламы. В результате имеют самих авторов. Жадность приводит к тому, что многие посетители, желая ускорить загрузку, "обрезают баннеры" специальными программами. У них создаётся плохое впечатление от самих баннеров. Многие их недолюбливают. В результате от жадности одних страдают другие. Например, страдают действительно трудолюбивые авторы интересных ресурсов. А ведь они так усердно работают, работают для своих посетителей. Почему бы и посетителям не подумать об авторах?

При создании сайта автор изначально не думает о своём проекте, как о средстве заработка. И это правильно - желание обогатиться не приведёт к созданию отличного во всех отношениях сайта. Автор сайта просто хочет сделать интересный и красивый сайт, чтобы его оценили другие люди. В конце концов, автор просто желает самовыразиться, показать, на что он горазд. Так появляются молодые интересные сайты. В процессе своего развития сайт не дают того наплыва посетителей, о котором мечтает автор. Начинаются различные работы по продвижению сайта: обмен ссылками, кнопками, регистрация в каталогах и поисковых машинах, заметки в форумах, написание статей и так далее. Автор обычно раскручивает свой сайт бесплатно. Данный подход требует большого труда и терпения. Приток посетителей не всегда большой, приходиться много работать, чтобы "выбиться в люди". Некоторые не выдерживают, применяют неправильные средства раскрутки (спам, спамдексинг поисковых машин, ложные рассылки и др.), которые не только не служат продвижению сайта, но и отталкивают от него посетителей. Да и сам автор, вместо того, чтобы работать над сайтом и улучшать его, занимается глупой и аморальной работой, которая лишь ведёт к его деградации как творца. Автор начинает разочаровываться в своей работе, хотя разочарование идёт именно от рутины злобных действий. Некоторые бросают проекты (обычно это слабые люди - от таких часто можно ждать спама), более сильные учатся на своих ошибках.

Единственный путь продвижения сайта - постоянная работа над ним. Это требует усилий и затрат времени. Чтобы как-то компенсировать затраты, автор размещает на своём сайте баннеры. В основном баннеры ставят для продвижения сайта. Сайты становятся участниками какой-либо баннерообменной сети, показывают баннеры других сайтов. Соответственно, другие сайты будут показывать баннеры своих коллег. Получается постоянный обмен посетителями среди участников той или иной баннерной сети. Сама сеть берёт со своих участников какой-то определённый или изменяющийся в определённых пределах процент с показов. Допустим, Вы показали на своём сайте 100 баннеров других, сеть взяла 15 из них, другие показали 85 ваших баннеров. Обычно берут от 10 до 25 процентов. Всё зависит от условий конкретной сети, от количества участников и, разумеется, от затрат самой сети. Заработанные проценты баннерная сеть продаёт рекламодателям. Обычно берут от 1 до 10 долларов за 1000 показов. Это первичный рынок баннеров. Такие баннеры не имеют ограничений в самих сетях, часто не вполне цензурны, имеют высокий приоритет. Баннерная рекламная сеть руководит данными показами, они очень эффективны и имеют больший отклик у посетителей, чем обычные обменные баннеры.

С ростом популярности сайтам становится не так выгодно участие в баннерных сетях, как при появлении. Зачем раскручивать сайт, когда его и так все знают? Он уже в закладках ;-) В результате авторы сайтов начинают накапливать показы в обменных сетях и продавать их за реальные деньги рекламодателям. Цена тысячи показов обычно колеблется в районе от 10 до 40 центов. Отклик таких баннеров обычно около 0,03%. Это, так называемый вторичный рынок баннерных показов. Он не приветствуется баннерными сетями, его пытаются контролировать сверху. Но не так всё просто. Сейчас некоторые интернет-компании, занимающиеся рекламой в Интернете, предпочитают выкупать показы именно у сайтов-участников. Это дешевле. Руководства баннерных сетей тоже начали шевелиться, придумали выкупы показов у крупных участников. Обычно выкупают по ценам вторичного рынка. Некоторые стимулируют рынок более высокими ценами. Автору сайта реально заработать на этом приличные деньги. При условии, что сайт достаточно популярный, автор получает вполне достойное вознаграждение за свою работу. Обычно денег хватает, чтобы бросить обычную работу (не самую высокооплачиваемую). Автор теперь может больше времени посвятить своему сайту. У него будет не только стимул, но и реальная возможность заниматься своим творением. Купит компьютер помощнее, монитор плоский достанет, мышку оптическую. Какая нам от этого польза? Да просто сайт будет постоянно обновляться, улучшаться, наполняться контентом. Наличие у автора сайта денежных средств позволит ему проводить различные конкурсы среди своих счастливых посетителей. Не так-то плохо всё получается.

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