Формализм кнопок
Под кнопкой сайта обычно понимается миниатюрный баннер 88х31 пиксель, содержащий стилизованное название сайта. Поскольку с рисованием на такой маленькой площади постоянно возникают проблемы встает резонный вопрос: а зачем такие размеры и чем грозит их изменение. Многие новички полагают, что ничем и меняют размер как им заблагорассудится.
Зададим вопрос по другому: для чего делается кнопка? - Чтобы желающие сайты размещали ее у себя, а их посетители, заинтересовавшись, приходили по кнопке к вам. А теперь представьте, что ваша кнопка не вписывается в стандартные размеры. При этом она выбивается из общего ряда кнопок (хорошо же!), что портит общее впечатление от страницы. Или еще хуже, слишком большая кнопка "распирает" страницу, что тоже отнюдь не радует пользователей, но в первую очередь администратора "того" сайта. Вряд ли человек, уважающий свое творение, будет согласен на такие жертвы и, соответственно, кнопку не разместит.
С размером закончили, перейдем к формату. В каком формате лучше делать кнопку: jpg, gif, png, swf. Как бы Вы и я хорошо не относились к Flash, его лучше исключить. Флэш-ролики слишком тяжелые по отношению к простой интернет-графике, они загружаются браузером порой в последнюю очередь, а у некоторых пользователей отключены (либо включены выборочно и вряд ли ваша кнопочка попадет в список исключений). PNG тоже не советую начинающим - неумелое обращение с png-компрессором так же приводит к завышению веса файла.
Содержание кнопки
Действительно, трудно на такую маленькую площадь впихнуть все, что хочется.
Во-первых, на кнопке должно быть название сайта, стилизованное под дизайн. Для текста на мелких объектах есть золотое правило: шрифт должен быть пиксельный! Не выровненный TrueType, а именно пиксельный. Это при крупных размерах он страшный и некрасивый, а при мелких - все наоборот. Найти их в изобилии можно в поисковике, набрав "пиксельный шрифт" или "шрифт для юзербаров". Если вы пользуйтесь фотошопом, то тут у инструмента текста есть замечательная опция: "Anti-aliasing method: none" ("метод сглаживание: нет"). Помните, что текст должен быть читабельным - контрастным.
Во-вторых, логотип сайта. Скорее всего его придется адаптировать под мелкий размер, хотя и простой "ресайз" может сгодиться. Если рисунок не удается впихнуть в кнопку целиком, что называется "от ушей до хвоста", попробуйте различные варианты фрагментов.
Третье, слоган или девиз. Имеет смысл только на анимированной кнопке.
Об анимации на кнопках. Кроме длинных фраз, разбитых на кадры, кнопки можно просто украсить блестками, мерцанием или еще каким эффектом для привлечения внимания. Тут главное - знать меру и не переборщить.
Ставим кнопку на сайт
Первое, что нужно сделать - это разместить файл с кнопкой в интернете. Во-первых, "залить" к себе на сайт, воспользовавшись файловым менеджером для загрузки файлов в панели управления сайтом (не важно, где сайт на юкозе, или еще где). С другой стороны, нужно знать особенности своего хостинга, так как кнопку вы "раздаете", т.е. она должна корректно отображаться на других сайтах. Вот, к примеру, "Народ" не очень любит "отдавать" картинки, и периодически на месте картинок с "народа" можно наблюдать "дырки". С другой стороны, к примеру, форум Мирчара требует от сервера, на котором находится картинка ее размеры, а юкоз таких сведений не предоставляет. В этом случае рекомендую воспользоваться специализированными фото-хостингами - Радикал или Photobucket. Если вы пользуйтесь для таких вещей Радикалом, обязательно заведите аккаунт - и картинки целее, и ссылки к ним в шаговой доступности.
Теперь код. HTML-код.
<img src="полный адрес картинки" alt="название сайта"><br /> <textarea cols="20" readonly="" onСlick="select(this)"> <a href="полный адрес сайта" title="название сайта"> <img src="полный адрес картинки" alt="название сайта"> </a> </textarea>
Для любознательных и неграмотных разбираемся. Первая строчка - отображение самой картинки-кнопки на странице. За это отвечает тэг <img>, без закрывающейся части. Главный атрибут этого тэга src="" указывает на адрес картинки в интернете. В случае кнопки лучше писать полный адрес, начиная с http://. Второй атрибут необязательный, но весьма полезный, особенно для роботов, alt="". "Альтернативный текст" к картинке может быть и на русском и призван охарактеризовать картинку.
Вторая строка представляет на странице текстовую область, в которой написан готовый код кнопки вида "ссылка+картинка" с достоверными адресами кнопки и собственно сайта. Тэг <textarea></textarea> - собственно текстовая область. То, что заключено между открывающим и закрывающим тэгами, на веб-странице будет отображаться в нашей текстовой области. Атрибут colls="" задает ширину области в символах (при 20 ширина области составит порядка 170 пикселей - как раз для боковой колонки страницы). Для задания высоты используется атрибут rows="", в строках. Следующий атрибут, readonly="" не имеет значения, а указывает браузеру и знакомым с английским, что поле можно только читать - вносить изменения нельзя. Конечно, если опустить этот параметр, исправленный текст не сохранится, но к чему пользователю лишние проблемы, вдруг, он кнопку не ту нажмет, придется лишний раз перезагружать страницу.
Атрибут со значением onClick="select(this)" тоже создан для удобства пользователя и понятен знатокам английского. onClick="" - это событие, которое должно произойти с нашим полем - на него кликнут мышкой, дабы выделить находящийся в нем текст. Фраза в кавычках - оператор, который нужно выполнить при данном событии, и ежу понятен без перевода. При клике в области текст выделится автоматически и целиком. Это особенно удобно, когда полосы прокрутки в области мешают обзору.
Код, находящийся в текстовой области - это картинка-ссылка. Знакомая нам картинка-кнопка обрамляется тэгом <a></a>, основной атрибут которого href="" - адрес, на который перейдет пользователь, кликнув на кнопке. Вспомогательный атрибут title="" являет собой текст всплывающей подсказки при наведении кнопки мыши на объект, и также, как и alt="" может набираться на русском.
Надеюсь, этот материал поможет нашим многочисленным начинающим админам не перерывать форум и интернет в поисках такого простого кода и сподвигнет их на дальнейшее изучение html.
0
