Отправляет email-рассылки с помощью сервиса Sendsay

Веб-дизайн. От А до Я.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Интернет-дизайн и мастеринг - полезные советы" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Октябрь 2001   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Дмитрий

Статистика

535 подписчиков
0 за неделю
←   Все выпуски   →

Веб-дизайн. От А до Я. # 19


Служба Рассылок Subscribe.Ru
Веб - Дизайн. От А до Я.
# 19
22 октября 2001г.
Проект сайта "AGS Design" http://dweb.ru
кол-во подписчиков - 9300
    В этом выпуске:

  Ссылки Вебмастеру:
* Web-дизайн, архив рассылок
* Анимация и графика
* Иконки и кнопки
* Фоновые изображения
* Flash
* Баннеры
* Все скрипты
* Фото
* 3D анимация
Доброе время суток!


Копилка веб-мастера. Часть 5


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

Эффект MouseOver
В последнее время появилась большая мода на включение JavaScript-событий onMouseOver и onMouseOut в код веб-документов, содержащих различные объекты (навигационные меню, простые графические изображения, таблицы и пр.). Вы наверняка не раз посещали Интернет-сайты, на которых присутствовали некие элементы, изменяющиеся как только над ними установится курсор мыши. Наводите курсор - вид элемента изменяется (событие onMouseOver), убираете курсор - элемент принимает свой исходный вид (событие onMouseOut). Такой эффект чаще всего применяется к текстовым фрагментам, табличным ячейкам и графическим изображениям. Рассмотрим каждый из вариантов.

По сути, говоря об изменении внешнего вида текста при наведении на него курсора, следует заметить, что в данном случае никакое событие языка JavaScript не используется: данный эффект достигается при помощи каскадных таблиц стилей CSS:

A         { color: black; }
A:Hover   { color: red; }

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

Если вы хотите, чтобы этот эффект был применен к отдельным ячейкам таблицы (которая может, например, служить меню сайта), то одними каскадными таблицами стилей здесь не обойтись - придется подключать события JavaScript. Сперва задаем условия отображения для активной и неактивной ячеек:

TD.normal
{
background:black;
}
TD.selected
{
background:silver;
}

По данному стилевому предписанию, исходный цвет ячеек должен быть черным (TD.normal и background:black;), а при наведении на них курсора мыши становится серебристым (TD.selected и background:silver;). Теперь осталось связать события замены/возврата объекта с заданными стилевыми параметрами (не забывайте обособлять наименования назначенных стилевых классов отдельными одинарными кавычками):

<td class="normal" onMouseOver="this.className='selected'" onMouseOut="this.className='normal'">Ячейка 1</td>

Однако, наибольшую популярность все же получило использование эффекта изменения при наведении курсора в области графических изображений. Если текст и табличные ячейки могли только менять цвет, то графика давала гораздо больше возможностей для фантазии, т.к. во втором элементе (выводящимся посредством события onMouseOver) можно было менять все, что угодно: цвет, размер, оформление, надписи и т.д. Можно просто поменять исходный зеленый цвет надписи на графической заготовке на желтый, а можно добавить эффект объемности или подсветки, или поместить подсказку. Одним словом, вариантов совместного применения графики и данных событий JavaScript - огромное количество, и все их перечислить невозможно, поэтому перейдем непосредственно к тому, как этот своеобразный альянс реализовать. Сначала определяем условия отображения графических заготовок для двух разных событий (раздел HEAD):

<script language = "JavaScript">
<!-- //
if (document.images) {

     img0on = new Image();
     img0on.src ="./img/1_active.gif";

     img1on = new Image();
     img1on.src ="./img/2_active.gif";

     img2on = new Image();
     img2on.src ="./img/3_active.gif";

     img0off = new Image();
     img0off.src ="./img/1_passive.gif";

     img1off = new Image();
     img1off.src ="./img/2_passive.gif";

     img2off = new Image();
     img2off.src ="./img/3_passive.gif";


}

где 1_active.gif, 2_active.gif, 3_active.gif - файлы, отображающиеся при наведении курсора мыши; 1_passive.gif, 2_passive.gif, 3_passive.gif - исходные файлы и файлы, повторно загружаемые браузером, когда курсор перемещается за пределы графических заготовок;

Далее необходимо определить функции, выполняющие замену/возврат изображений:

function imgOn(imgName) {
     if (document.images) {
          document[imgName].src = eval(imgName + "on.src");

}
}

function imgOff(imgName) {
     if (document.images) {
          document[imgName].src = eval(imgName + "off.src");

}

}
// -->
</script>

На этом код самого JavaScript-сценария, вставляемого в раздел HEAD документа, заканчивается. Теперь нужно связать HTML-код графических изображений с заданными параметрами посредством событий onMouseOver и onMouseOut:

<a href="page1.html" onMouseOver = "imgOn('img0'); return true" onMouseOut = "imgOff('img0')" ><img src="./img/1_passive.gif" width=150 height=50 border=0 name="img0"></a>

<a href="page2.html" onMouseOver = "imgOn('img1'); return true" onMouseOut = "imgOff('img1')" ><img src="./img/2_passive.gif" width=150 height=50 border=0 name="img1"></a>

<a href="page3.html" onMouseOver = "imgOn('img2'); return true" onMouseOut = "imgOff('img2')" ><img src="./img/3_passive.gif" width=150 height=50 border=0 name="img2"></a>

Здесь необходимо обратить особое внимание на следующие моменты. Во-первых, значения onMouseOver и onMouseOut должны совпадать с условиями, определенными в начале скрипта: 


 img0on = new Image();
 img0on.src ="./img/1_active.gif";

 img0off = new Image();
 img0off.src ="./img/1_passive.gif";
Другими словами, нельзя для данных условий задать следующее: onMouseOver = "imgOn('img2'); return true" onMouseOut = "imgOff('img2')", т.к. далее у нас указан файл неактивной графической заготовки 1_passive.gif, отображение которого зависит от фрагмента кода, данного чуть выше. onMouseOver = "imgOn('img2'); return true" onMouseOut = "imgOff('img2')" будет соответствовать условиям: 

 img2on = new Image();
 img2on.src ="./img/3_active.gif";

 img2off = new Image();
 img2off.src ="./img/3_passive.gif";
Во-вторых, обязательно указание атрибута NAME в теге IMG графических изображений со значением, соответствующим условиям отображения (начало сценария) и параметрам событий onMouseOver и onMouseOut.

На этом, в принципе, можно было и завершить разговор о способах реализации эффекта MouseOver, однако освещение областей применения этого эффекта было бы неполным, если не упомянуть такое средство динамического HTML, как фильтры. Вообще следует заметить, что сегодня DHTML-фильтры пользуются весьма низкой популярностью по старой, как мир, причине: несовместимость документов, использующих такие фильтры, с такими браузерами, как Netscape Navigator и Opera (разумеется, Microsoft как компания-разработчик динамических средств HTML осуществила в своем браузере полную поддержку данной спецификации).

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

Для того, чтобы получить этот эффект, нам потребуется всего одна графическая заготовка (а не пара, как в предыдущем примере!) и какой-нибудь DHTML-фильтр (возьмем один из наиболее часто встречаемых, а именно - alpha, устанавливающий степень прозрачности объекта). Исходя из синтаксических правил указания фильтров и JavaScript-событий onMouseOver и onMouseOut, вписываем в нужное место документа следующую инструкцию (раздел BODY):

<img src="./img/example.gif" style="filter:alpha(opacity=75)" onMouseOver="this.filters.alpha.opacity=100" onMouseOut="this.filters.alpha.opacity=75" width=250 height=85>

Здесь свойство фильтра opacity определяет степень прозрачности: значение "0" означает полную прозрачность объекта, значение "100" - нормальный вид изображения (без действия фильтра). Согласно описанию событий замены/возврата объекта, исходный вид изображения будет "обработан" фильтром alpha и сделает его "прозрачнее" (светлее в визуальном плане). При наведении курсора мыши на заготовку объект принимает свой первоначальный вид (onMouseOver="this.filters.alpha.opacity=100), при перемещении курсора за пределы изображения на объект вновь накладывается фильтр (onMouseOut="this.filters.alpha.opacity=75).

Чтобы фрейм не стал помехой
Несмотря на продолжающиеся споры о функциональной пригодности фреймов, такой вид структуры сегодня можно встретить в Интернете очень часто. Если не брать во внимание домашние страницы и небольшие, исключительно информативные веб-узлы, то чаще всего фреймовую структуру можно встретить в каталогах ресурсов, порталах, базах данных, электронных банках вакансий и пр. Это, прежде всего, обусловлено желанием разработчиков определенного онлайн-сервиса дать возможность пользователю постоянно иметь перед глазами если не все, то наиболее важные и необходимые пункты меню. Чего нельзя (или чрезвычайно сложно) достигнуть при больших объемах выдаваемой информации. А если предположить, что структура состоит не из двух (как обычно) окон, а более, то пользователю бывает сложно сориентироваться во всем этом многообразии фреймов. Один из примеров, подтверждающих это утверждение, - занесение документа в "Избранное". Возьмем, к примеру, каталог ресурсов, рабочая область которого разбита на три окна (фрейма): верхнее - основное меню, правое нижнее - рубрикатор тем, левое нижнее - содержание рубрик каталога. Пользователь, выбрав нужный себе раздел, хочет впоследствии быстро к нему получить доступ, занеся его себе в "Избранное". Но адрес, обозначенный в строке браузера, остается неизменным (что-то типа http://www.catalog.ru), а в "фавориты" будет занесен не конкретный документ, содержащий перечень ссылок каталога по интересущей пользователя теме, а целая фреймовая конструкция: нужная страницы, навигация и рубрикатор. При повторном обращении к такой "закладке" браузер загрузит 2/3 абсолютно ненужной информации.

Как же избежать такого неудобства? Если вы пользователь такого ресурса, то можете просмотреть код и выявить требуемый URL. Если вы автор подобного проекта, то советую вам позаботиться о своих посетителях и вставить в код каждой страницы, являющейся потенциальным URL'ом для занесения в "Избранное", небольшой скрипт:

<script language="JavaScript" type="text/javascript">
<!--
document.write("Адрес этой страницы: " + document.location);
// -->
</script>

При загрузке документа, содержащего этот код, отобразится полный путь текущей страницы, например, - "Адрес этой страницы: http://www.catalog.ru/catalog/auto/toyota/index.html". Теперь посетителю гораздо проще и удобнее будет работать с каталогом (или иным ресурсом), зная полный URL интересующего его документа.

HTML или JavaScript?
Сегодня в Интернете очень часто встречаются так называемые меню быстрого перехода, представляющие собой обычные HTML-dropdown-меню (ниспадающие меню). Одни такие меню используют в качестве основной навигации (чем экономят очень много места на странице), другие, не желая загромождать главное меню, помещают в такой раскрывающийся список второстепенные пункты, подразделы и пр., третьи делают его дублирующим (например, внизу каждой страницы) и т.д. Одним словом, такое меню - вещь, безусловно, нужная и полезная, а в ряде случаев - просто необходимая. Используя в качестве основы стандартный раскрывающийся список HTML (теги SELECT и OPTION), переход по заданным адресам можно осуществить 3-мя основными способами: посредством "чистого" HTML, HTML плюс JavaScript и с помощью CGI. Если вы читали хотя бы парочку статей цикла "Копилка веб-мастера", то наверняка заметили, что все предлагаемые примеры относятся к типу Client-Side (исполняемых на строне клиента). Это сделано специально, т.к. далеко не каждый имеет доступ к серверным настройкам и может исполнять свои собственные скрипты. Поэтому остановимся на первых двух вариантах реализации.

HTML-вариант чрезвычайно прост. Вот примерный листинг для такого HTML-меню:

<form>
<select name="menu">

<option value="page1.html">Страница 1</option>

<option value="page2.html">Страница 2</option>

<option value="page3.html">Страница 3</option>

</select>

<input type="button" value="Перейти" onclick="top.location.href=this.form.menu.options[this.form.menu.selectedIndex].value">
</form>

Посредством тега OPTION можно добавлять сколько угодно новых пунктов меню. У тега SELECT обязательно должен быть атрибут NAME со значением, соответствующим объекту в записи "top.location.href=this.form.menu.options" (расшифровка следующая: "документ во весь экран=в этом окне.эта форма.название этой формы.значения пунктов").

С помощью JavaScript такое меню можно реализовать по-разному. Вот один из вариантов. Задаем массив данных:

<script language="JavaScript">

function MakeArray()
{
this.length = MakeArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = MakeArray.arguments[i]
}

Определяем переменную наименований пунктов меню (названия пунктов в кавычках):

var sitename = new MakeArray(
"Страница 1",
"Страница 2",
"Страница 3"
);

Определяем переменную конечных адресов перехода после выбора пункта меню (адреса в кавычках):

var url = new MakeArray(
"page1.html",
"page2.html",
"page3.html"
);

Задаем функцию перехода по указанным адресам из HTML-меню:

function gotoURL(form)
{
i = form.SelectMenu.selectedIndex;
Wind0ws.Location.Href= url[i+1];
}
document.writeln('<form>');
document.writeln('<select name="SelectMenu">');
go = sitename.length;
for (var i = 1; i <= go; i++)
document.write("<option>" +sitename[i]);
document.writeln('</select>');
document.writeln('<input type="button" value="Перейти" onClick="gotoURL(this.form)">');
document.writeln('</form>');
// -->
</script>

Алексей Петюшкин

 Оглавление/Вверх


Баннерная сеть


В предыдущем выпуске я рассказывал о сервисе "Заголовки новостей Inethelp", позволяющем устанавливать обновляемые новости от ведущих информагенств на своем сайте. Обзор этого сервиса был представлен в виде ряда вопросов заданных авторам сервиса и ответов на эти вопросы. Такая форма обзора оказалась интересной большому числу читателей и я решил продолжить использование данного способа. Сегодня речь пойдет о тематической баннерной сети. Как и в прошлый раз, на вопросы отвечает Анатолий (А), один из авторов сервиса.

Д: Какова основная цель вашей баннерной сети?
А: Формирование сегмента рынка баннерной рекламы тематики IT, в которую включаются сайты о создании, поддержке, раскрутке сайта в Интернет, рекламе, дизайне, программировании, вебмастеринге, интернет услуги и сервисы и другие подобные сайты. Мы также стремимся создать такую баннерную сеть, в которой участники будут уверены в том, что на их сайте будут показываться только приличные баннеры, а их баннер будет показываться только на приличных сайтах.

Д: Есть ли у вашей баннерной сети бонусы, отличающие ее от других баннерных сетей?
А: Эффективность баннернов в нашей баннерной сети выше, чем в баннерных сетях общей направленности для баннеров соответствующей тематики. Средний CTR в сети составляет 0.5% а CTR отдельных баннеров достигает 3-4%. Это абсолютный рекорд для баннеров подобной тематики при использовании баннерных сетей. Посмтореть статистику лучшей десятки баннеров за текущий день вы можете по адресу http://bs.inethelp.ru/top.php3?catid=rating&action=ratingbanners

Д: Какие опции таргетинга предоставляет ваша баннерная сеть?
А: Наша баннерная сеть предоставляет все основные полезные опции таргетинга, такие как, ограничение кол-ва показов в сутки, ограничение кол-ва показов всего, таргетинг показов по дням недели, таргетинг по часам суток, таргетинг по категориям сайтов, таргетинг по отдельным сайтам, обратный таргетинг по категориям и сайтам. Кроме того, есть опция таргетинга не реализованная в большинстве баннерных сетей, но значительно повышающая эффективность баннеров. Это ограничение количества показов вашего баннера одному и тому же посетителю на одном и том же сайте.

Д: Какие баннеры можно размещать в вашей баннерой сети?
А: Помимо обычных баннеров в формате GIF и JPEG можно размещать Flash баннеры и HTML баннеры (так называемые metastream баннеры). Ограничение на размер файлов для всех баннеров 15кб. В нашей сети производится обмен только баннерами формата 468х60.

Д: Почему стоит выбрать именно вашу баннерную сеть?
А: Во-первых, реализованное ограничение кол-ва показов вашего баннеру одному и тому же посетителю значительно повышает эффективность рекламы. Зачастую в обычных баннерных сетях возникает ситуация, когда баннер одного участника прокручивается 200-300 раз за несколько минут, например в случае скачивания сайта целиком с помошью специальной программы для последующего просмотра без подключения к Интернет или простого просмотра десятков страниц одним посетителем. В нашей сети это исключено. Кроме того, участие в баннерной сети общей направленности, даже с учетом возможности таргетинга по категориям, не дает такой целевой направленности аудитории, которая увидит вашу рекламу. Размещение же баннеров в нашей сети можно сравнить с размещением баннеров на отедльных сайтах, представляющих интерес для вас, что как известно намного эффективнее размещения баннеров на сайтах разнородной тематики. Все сказанное выше справедливо только для сайтов IT тематики (см. описание выше).

Итак уважаемые читатели, рекомендую всем у кого есть сайты категории IT обратить внимание на баннерную сеть Inethelp. Адрес сети: http://bs.inethelp.ru

Давыденко Дмитрий

Оглавление/Вверх


Основы CSS.


Это просто. Делаем так:
<font size=-1 TITLE="Подсказка" style="cursor:w-resize;" OnMouseOver="this.style.color='red';" OnMouseOut="this.style.color='#FFFF00';">ЗАНЕСТИ В ИЗБРАННОЕ</font>

Добавить в ИЗБРАННОЕ

Сборная конструкция, так сказать. Подсказка, изменение курсора, изменение цвета под мышкой. Обратите внимание - цвет после "посещеня" мышки устанавливается отдельно! Если хотите, чтобы цвет возвращался к исходному, установите исходный цвет текста.

Зачем я все это привожу? Обратите внимание на this.style.color=. В данном случае мы меняем цвет текста, но так можно изменить цвет чего угодно. Вместо color мы можем изменять и другие свойства обьектов.

ONMOUSEOVER="this.className = 'k';"
ONMOUSEOUT="this.className = 'kd';"
Еще более "актуальный" случай— изменение класса обьекта в ответ на событие. В данном виде— изменение класса при наведении мышки. Именно так делаются простейшие меню— описываем необходимые параметры для обоих классов и изменяем класс обьекта в ответ на наведение мышки.

ONMOUSEOVER="this.src = '11.gif';"
ONMOUSEOUT="this.src = '22.gif';"
В данном случае мы меняем один рисунок на другой при наведении мышки. Только предварительно картинки подгрузить рекомендуется.

Используя подобные методы мы можем изменять очень многие параметры обьектов. Изменяя класс мы можем изменять цвет, шрифт, фоновый цвет, фоновый рисунок, размер, стили рамки... Что еще можно придумать? Конечно, Нетскейпы до шестого почти ничего из этого не поддерживают.

A-design studio http://mtk.on.ufanet.ru

Оглавление/Вверх


Рассылки Вебмастера


Вас интересуют вопросы web-дизайна, скриптов, графики, и т.п.? Тогда у Вас есть возможность подписаться на рассылку "Веб-Дизайн, азы" (более 25000 подп.)

У Вас есть вопросы по софту вебмастера, скриптам, графике и т.п.? Эти вопросы Вы можете задать в рассылке "Веб-Дизайн. Вопросы и Ответы" и в следующем номере получить отеты на свои вопросы.

На эти рассылки Вы можете подписаться на сайте http://dweb.ru/


Качественный хостинг


Недорогой качественный хостинг. Неоценимый плюс - отсутсвие многих ограничений, в том числе на траффик. Т.е. вы можете позволять посетителям скачивать файлы с вашего сайта, можете размещать много графики - без боязни, что хостер оштрафует вас за превышение лимита!
Преимущества: 6 поддоменов. 200 мегабайт, CGI, PHP, SSI, MySQL, 6 анлим траффик и масса др. всего за 8,95$. А также регистрация в зоне .info Сходите, есть на что посмотреть.

Баннерообменные сети.


TBE (Tranzit Banner Exchange) http://dweb.ru/go/ - уникальная сеть обмена, позволяющая увеличить посещаемость Вашего сайта. Поддерживаются типоразмеры баннеров 120х60, 100х100 и Текстовые блоки. Комиссия 7-10%. Высокий CTR. Выкуп показов. Каждому новому участнику 20000-50000 БЕСПЛАТНЫХ показов! Узнать подробности и зарегистрироваться можно на сайте http://dweb.ru

XBN (Xmen Banner Network) http://dweb.ru/go/ - уникальная сеть обмена, позволяющая увеличить посещаемость Вашего сайта. Поддерживаются баннеры 468х60. Комиссия 7-10%. Высокий CTR. Выкуп показов. Каждому новому участнику 20000-50000 БЕСПЛАТНЫХ показов! Узнать подробности и зарегистрироваться можно на сайте http://dweb.ru


Ссылки "На Досуге"


* Мега-Портал - HTML, PhotoShop, Corel Draw, JavaScript, CGI, различным графическим редакторам. Существует спецкурс создания суперграфики. Присутствуют 3 языковых курса: английский, французский, немецкий. Программирование (редкие исходники). Медицина. Для женщин и мн. др.
* Удвойте скорость своего Интернета. - Ускоритель Интернет. Уникальный сервис, позволяющий до двух раз увеличить скорость загрузки интернет страниц. Самые продвинутые технологии кеширования и сжатия.
* Работа - Дистантная (удаленная) работа через Интернет по вашей специальности, заработок до $1000 в мес.
* Новости для сайта Вебмастера
* Качественный хостинг - Регистрация в зоне .info
* Кольца сайтов
* BIG-WEB - все для вебмастера: Анимированные GIF, Бакграунды, баннеры, Java Script, Applet, CGI, PHP, HTML, CSS. Советы, статьи, эфективная раскрутка.

Попасть в рубрику, правила.

Оглавление/Вверх


  ICQ - Клуб
Адрес Клуба http://dweb.ru/1/icq.htm

Если у Вас возник вопрос по дизайну, графике, скриптам и т.п. То Вы в любой момент можете его задать на странице Клуба любому консультанту находящегося в on-лайне.

Для тех, кто может, а главное хочет поделиться своими знаниями, Вы можете вступить в наш Клуб, для этого присылайте # ICQ, Имя, E-mail, Город, и темы по которым возможна консультация.

Оглавление/Вверх


    Авторам

    Вы хотите, чтобы ваши статьи были опубликованы в этой рассылке? Если вы считаете, что можете написать о дизайне, скриптам, графике и т.п., если Вам есть что сказать и о чем рассказать, я буду рад сотрудничеству с Вами. Присылайте свои предложения и статьи.
    Давайте вместе делать общее дело! Присылайте свои соображения, мысли, истории... поделитесь своим опытом.
    В качестве гонорара Вы получите показы сети TBE (от 3000 до 10000) плюс N-кол-во читателей, которые посетят Ваш сайт.
    Буду рад сотрудничеству.
Ведущий рассылки Дмитрий Давыденко

http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу 		Рейтингуется SpyLog
В избранное