Красивое оформление кнопок

[Gra_ad]

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

Если виджет не поддерживает фиксированную позицию, то можно использовать следующий код:

<div class="buttocks"> <!-- Будет использоваться класс "Кнопки" -->
<!-- Ниже код кнопки -->

<!-- Выше код кнопки -->
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4ff8303105347856"></script>
</div>
<style>
.buttocks {
position:fixed;right:2;bottom:2;
background:#fff;
padding:20px;
height: 20px;
}
</style>

[Gulia]

Я вижу, что Вы используете простой CSS. Согласна с тем, что можно поднапрячься и создать с простых элементов что-то красивое и уникальное, нужно продумать не только о фиксированной позиции, а и о дизайне. Благо, для это сейчас существует много программ и технологий, которые позволяют создавать такие элементы управления с красивым дизайном, например технология Silverlight и инструмент разработчика Expression Studio позволять создать дизайн кнопочек, на который в Вас хватить фантазии. К стати, Expression Studio можно бесплатно скачать с сайта Microsoft.

[Gra_ad]

Я вижу, что Вы используете простой CSS

Других не знаю. Подучился в ходе создания сайта...

[Gulia]

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

пример кнопки на Silverlight

button.PNG (4.75 KiB) Просмотров: 7998

[Oleg]

Вы затронули очень интересную и сейчас довольно таки популярную тему создания уникальных пользовательских элементов управления для сайта и приложений. Вроде бы мелочь, но для сайта оформления таких элементов имеет большое значения. Лично я был бы не против перенять опыт создания такой кнопки, которую представили Вы, Gulia, тем более что с Expression Studio я хоть немного, но знаком, недавно приходилось работать с этим пакетом, а сейчас представилась возможность расширить свои горизонты. Так что жду Вашего ответа, Gulia.

[Gulia]

Охотно поделюсь тем, что знаю. Итак, с пакета Expression Studio мы будем использовать программу Expression Blend. Запустите программу и создайте новый проект. Когда откроется созданный проект, на рабочую область перетащите с панели инструментов прямоугольник и растяните его до того размера, который Вам нужен. Далее нужно указать, что этот прямоугольник будет кнопкой. Для этого Вы выделяете нарисованный прямоугольник и в меню выбираете пункт Tools/Make into Control, в открывающемся диалоговом выбираете элемент Button, как показано на рисунке ниже.
Далее, чтоб изменить созданную кнопку с контекстного меню выберите Edit Template/Edit Current и теперь можно редактировать шаблон кнопки. Для выделенного прямоугольника сделайте фон чёрным, а цвет обводки сделайте жёлтой, параметрам RadiusX и RadiusY присвойте значения 20, а StrokeThickness – 5. Далее нарисуйте внутри этого прямоугольника и отредактируйте так: сделайте фон жёлтым, параметрам RadiusX и RadiusY присвойте значения 10, а StrokeThickness – 4. Для того, чтоб отредактировать надпись кнопки на панели Template перетащите ContentPresenter так, чтоб он находился после внутреннего прямоугольника, для изменения надписи кнопки параметру Content присвойте то значения, которое посчитаете нужным (в моем случаи это «Кнопка»).

[Oleg]

Спасибо за такой расширенный ответ. Но вот хочу спросить: зачем в Expression Blend Вы делаете кнопку с графического примитива прямоугольника, если на панели инструментов есть специальный элемент управления – кнопка (button)? И зачем такие сложности: сначала создавать шаблон, потом его редактировать, разве не проще это всё сделать с элементом button? И второй вопрос: я не один раз видел кнопки на Silverlight сделанный в виде жабки или другого животного. Такие кнопки не нарисуешь с помощью только графических примитивов. Как делаются эти кнопки?

[Gulia]

зачем в Expression Blend Вы делаете кнопку с графического примитива прямоугольника, если на панели инструментов есть специальный элемент управления – кнопка (button)?

Button – это стандартный элемент управления, используя его что-то креативное с кнопкой Вы сделать не сможете, то есть для этого элемента управления Вы можете поменять разве что ширину, высоту, шрифт надписи. А для того, чтоб сделать нечто непохожее на стандартную кнопку нужно использовать вот такие графические примитивы.

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

В пакете Expression Studio есть ещё один инструмент Design. С помощью этого инструмента Вы и можете нарисовать всё что хотите, его интерфейс очень напоминает графический редактор. После того, как Вы нарисовали будущую кнопку выбираете пункт File/Export, открывается окно, где на правой панели Вы выбираете Format XAML Silverlight 4/ WPF Canvas, как на рисунке и нажимаете Export All. Далее запускаете Expression Blend, создаете новый проект (или открываете старый), выбираете меню Project/ Add Existing Item, открываете свой рисунок и дальше уже всё по накатанной схеме.

[Oleg]

Вы, как я вижу, эксперт в технологии Silverlight. Спасибо за помощь. Но, только у меня не всё получается. Вот допустим, я нарисовал себе интерфейс кнопки, сохранил, как Вы говорили в формате XAML Silverlight 4/ WPF Canvas. Открываю Blend, открываю этот файл с интерфейсом кнопки и ничего нет, рабочий стол, как был пуст, так и остался. Ещё один вопрос, как я могу внедрить этот элемент на страницу HTML? Ответьте, пожалуйста, очень нужно. Разрабатываю сайт детской тематики и такая необычная кнопка смотрелась б замечательно, но сроки сдачи сайта поджимают.

[Gulia]

Ну, допустим, эксперт очень громко сказано, так любитель-аматор.
Подключаемый модуль не отображается на главной страницы через то, что загружается в созданный проект отдельным классом. На панели браузера Вы должны заметить названия нового элемента, щёлкните на нём два раза и загрузиться Вам Ваш объект. Главную страницу можно удалить, но при этом нужно внести некоторые изменения в файлы конфигурации, чтоб главной страницей стал загруженный элемент и точкой входа программы стал этот класс.
Относительно внедрения на страницу, то в книге «Silverlight 4. Создание насыщенных Web-приложений» С. Байдачного в главе «Размещения Silverlight-элемента на странице» детально об этом говориться. Внедрения осуществляется с помощью тега <object>. Книга доступна в интернете в свободном скачивания, кроме того, там есть ещё и другая информация, которая будет для Вас полезной.