Часто перед WEB-дизайнерами встает проблема: поменялись кнопочками 88х31 с несколькими партнерами, оптимально вписали их в дизайн страниц сайта, для экономии времени и места сделали ротацию с помощью хитроумного JavaScript, а посетители что-то не идут. И дело не в том, что накололи партнеры, просто по статистике около 80 % пользователей отключают в браузере графику с целью экономии трафика и ускорения загрузки сайта. Вот и видят они "голый скелет", да безликие прямоугольники-кнопки.
Я тоже столкнулся с такой проблемой более года назад. Меня очень огорчила низкая эффективность подобных обменов, и я решил найти кардинальное средство. И нашел, вот оно:
Правда прелесть? Давайте разберемся, что же мы видим. Прамоугольная область размером 88х31, с ободком и тенью по краям, и надпись-ссылка в центре. В общем, обычная таблица, раскрашенная разными цветами. Ничего особенного.
Но почему-то она производит непередаваемое впечатление. Вероятно в силу простоты своей сущности, и универсальности: такой "кнопке" совершенно не важно, включена ли у пользователя графика: в любом случае, она будет отображаться как есть. При этом она притягивает взгляды, и ее CTR выше большинства своих графических собратьев!
Разберем процедуру ее создания по шагам:
Шаг 1: делаем ободок:
|
Некрасивый? Да и не виден совсем! Сейчас все исправим!
|
---|
Шаг 2: делаем ободок двойным (еще одна вложенная таблица):
Шаг 3: ставим свою ссылку (вместо ):
Шаг 4: вешаем украшения:
Примечание: Если вы читаете выпуск через WEB-форму, то вы не увидите никаких эффектов! Просто скопируйте этот код в новый документ, и откройте его в браузере!
Шаг 5: последний штрих:
Примечание: Постарайтесь использовать короткую надпись, иначе кнопка может разъехаться!
Комментарий:
На первых двух шагах мы создаем вложенные таблицы, раскрашиваем их ячейки в контрастные цвета (черный, желтый, желто-зеленый). Толщина бортика (1 пиксел) задается параметром cellpadding="1" или cellcpacing="1" (без разницы, каким именно, главное - второй должен равняться нулю).
Далее мы начинаем работать с надписью. На третьем шаге мы делаем обычную статическую ссылку, подкрашенную с помощью стиля в золотой цвет. А вот на четвертом - делаем трансформацию курсора и изменение цвета ссылки при наведении.
Пятый шаг - не обязательный. Там мы добавляем два "гвоздика" (которыми наша кнопочка "прибита"). Это реализовано с помощью спецсимвола ∙ Осталось лишь подстраховаться: чтобы надпись в кнопке не разъехалась, заключаем ее внутрь <nobr> ... </nobr>.
Вот и все, пользуйтесь на здоровье! Думаю, теперь вы и сами догадаетесь, как сделан навигационный бар в самом низу выпуска!
P.S. Попробуйте на досуге сравнить, что больше весит: графическая кнопка, или получившаяся текстовая.
|