«WEB-мастерство для каждого»

Часто перед WEB-дизайнерами встает проблема: поменялись кнопочками 88х31 с несколькими партнерами, оптимально вписали их в дизайн страниц сайта, для экономии времени и места сделали ротацию с помощью хитроумного JavaScript, а посетители что-то не идут. И дело не в том, что накололи партнеры, просто по статистике около 80 % пользователей отключают в браузере графику с целью экономии трафика и ускорения загрузки сайта. Вот и видят они "голый скелет", да безликие прямоугольники-кнопки.

Я тоже столкнулся с такой проблемой более года назад. Меня очень огорчила низкая эффективность подобных обменов, и я решил найти кардинальное средство. И нашел, вот оно:

Мир Идей

Правда прелесть? Давайте разберемся, что же мы видим. Прамоугольная область размером 88х31, с ободком и тенью по краям, и надпись-ссылка в центре. В общем, обычная таблица, раскрашенная разными цветами. Ничего особенного.

Но почему-то она производит непередаваемое впечатление. Вероятно в силу простоты своей сущности, и универсальности: такой "кнопке" совершенно не важно, включена ли у пользователя графика: в любом случае, она будет отображаться как есть. При этом она притягивает взгляды, и ее CTR выше большинства своих графических собратьев!


Разберем процедуру ее создания по шагам:


Шаг 1: делаем ободок:

<table border="0" width="88" height="31" bgcolor="#c9ba31" cellpadding="0" cellspacing="1"> <tr> <th bgcolor="#bb8a21"> &nbsp; </th> </tr> </table>

Некрасивый? Да и не виден совсем! Сейчас все исправим!

Шаг 2: делаем ободок двойным (еще одна вложенная таблица):

<table border="0" width="88" height="31" bgcolor="#78783c" cellpadding="1" cellspacing="0"> <tr> <th> <table border="0" width="100%" height="100%" bgcolor="#c9ba31" cellpadding="0" cellspacing="1"> <tr> <th bgcolor="#bb8a21"> &nbsp; </th> </tr> </table> </th> </tr> </table>

Как теперь? Лучше?

Шаг 3: ставим свою ссылку (вместо  ):

<table border="0" width="88" height="31" bgcolor="#78783c" cellpadding="1" cellspacing="0"> <tr> <th> <table border="0" width="100%" height="100%" bgcolor="#c9ba31" cellpadding="0" cellspacing="1"> <tr> <th bgcolor="#bb8a21"> <a target="_blank" href="http://www.alex-world.nm.ru" style="text-decoration:none;font-family:Arial;font-size:15;margin:0;color:#ffff00" title="Проекты различной направленности"> Мир Идей </a> </th> </tr> </table> </th> </tr> </table>

Мир Идей Достаточно? Кому как!

Шаг 4: вешаем украшения:

<table border="0" width="88" height="31" bgcolor="#78783c" cellpadding="1" cellspacing="0" style="cursor:hand"> <tr> <th> <table border="0" width="100%" height="100%" bgcolor="#c9ba31" cellpadding="0" cellspacing="1"> <tr> <th bgcolor="#bb8a21"> <a target="_blank" href="http://www.alex-world.nm.ru" style="text-decoration:none;font-family:Arial;font-size:15;margin:0;color:#ffff00" title="Проекты различной направленности" onmouseover="this.style.color='#cc0000'" onmouseout="this.style.color='#ffff00'"> Мир Идей </a> </th> </tr> </table> </th> </tr> </table>

Мир Идей Вот теперь да!

Примечание: Если вы читаете выпуск через WEB-форму, то вы не увидите никаких эффектов! Просто скопируйте этот код в новый документ, и откройте его в браузере!


Шаг 5: последний штрих:

<table border="0" width="88" height="31" bgcolor="#78783c" cellpadding="1" cellspacing="0" style="cursor:hand"> <tr> <th> <table border="0" width="100%" height="100%" bgcolor="#c9ba31" cellpadding="0" cellspacing="1"> <tr> <th bgcolor="#bb8a21"> <a target="_blank" href="http://www.alex-world.nm.ru" style="text-decoration:none;font-family:Arial;font-size:15;margin:0;color:#ffff00" title="Проекты различной направленности" onmouseover="this.style.color='#cc0000'" onmouseout="this.style.color='#ffff00'"> <nobr>&#8729; Мир И &#8729;</nobr> </a> </th> </tr> </table> </th> </tr> </table>

∙ Мир И ∙ Финальный вариант!

Примечание: Постарайтесь использовать короткую надпись, иначе кнопка может разъехаться!


Комментарий:

На первых двух шагах мы создаем вложенные таблицы, раскрашиваем их ячейки в контрастные цвета (черный, желтый, желто-зеленый). Толщина бортика (1 пиксел) задается параметром cellpadding="1" или cellcpacing="1" (без разницы, каким именно, главное - второй должен равняться нулю).

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

Пятый шаг - не обязательный. Там мы добавляем два "гвоздика" (которыми наша кнопочка "прибита"). Это реализовано с помощью спецсимвола &#8729; Осталось лишь подстраховаться: чтобы надпись в кнопке не разъехалась, заключаем ее внутрь <nobr> ... </nobr>.

Вот и все, пользуйтесь на здоровье! Думаю, теперь вы и сами догадаетесь, как сделан навигационный бар в самом низу выпуска!

P.S. Попробуйте на досуге сравнить, что больше весит: графическая кнопка, или получившаяся текстовая.