Совет 1: Как сделать кнопку

Занявшись созданием собственного сайта, вы непременно столкнетесь с выполнением задачи по созданию кнопок для его разделов. Кнопка – это картинка, щелкая по которой, пользователь переходит на соответствующий раздел сайта. Кнопки можно делать в фотошопе, но не все создатели сайтов могут с этим справиться. Есть в интернете несколько бесплатных сервисов, воспользовавшись которыми, можно без особого труда сделать кнопочки для своего ресурса.
как сделать кнопку
Инструкция
1
В общем, этот процесс выглядит так: заходим на нужный сайт и далее задаем необходимое нам значение нескольким характеристикам кнопки, определяющим ее внешний вид. Каждая «трансформация», которой подвергается кнопка, обычно отображается на самом экране редактирования внешнего вида кнопки.
2
Поле Text. В этом поле нужно ввести надпись, которая будет отображаться на будущей кнопке. Здесь можно выбрать шрифт, эффекты для него (жирность, подчеркивание и так далее), размер, цвет. Можно также сделать текст с тенью от букв или без тени. И, наконец, мы можем выбрать формат, в котором наша кнопка с текстом будет сохранена. Лучше воспользоваться форматом JPG для статичной кнопки или GIF – для анимированной.
3
Переходим к другой части экрана редактирования, где можно кнопку визуально оформить. Первое, что нам нужно будет – это задать форму кнопки (круг, квадрат, прямоугольник и так далее).
4
Далее выбираем обводку для нашей кнопочки. Варианта два: обводка отключена и включена. Выбрав второй вариант, задаем размер и цвет границы.
5
Выбираем тень от кнопки. Опять же, можно ее либо отключить, либо включить, задав при этом цвет тени и ее расстояние от кнопки.
6
Размер кнопки. Он может быть фиксированным и нефиксированным. Во втором случае мы сами выбираем ширину, длину кнопки, расстояние от концов текста до границ кнопки.
7
После всех операций по изменению внешнего вида текста и кнопки можно сохранить готовую кнопочку на компьютере, выбрав нужный формат и имя изображения.
Видео по теме

Совет 2 : Как добавить кнопку на сайт

Интернет становится все более интерактивен, и пользователи все чаще начинают взаимодействовать друг с другом через самые разные сайты, используя свои аккаунты в социальных сетях – таких, как ВКонтакте, Facebook, Одноклассники, и другие. Практически на каждом сайте теперь в конце статьи имеется несколько кнопок, нажав на которые, вы можете оперативно поделиться понравившимся материалом с друзьями в своем аккаунте. Установить кнопки социальных сетей вы можете и на свой собственный сайт.
Как добавить кнопку на сайт
Инструкция
1
Вы можете пойти простым путем и установить готовые кнопки, коды javascript, которых имеются в соответствующих разделах на сайтах социальных сервисов. Однако javascript существенно снижает скорость загрузки страниц, особенно, если таких элементов на странице много, а также такой формат кнопки не позволяет изменять ее размер и делать все кнопки одинаковыми и аккуратными.
2
Если вы владеете Photoshop, вы можете сделать кнопки в виде графических файлов, скачав из интернета иконки популярных социальных сетей и доработав их до одинаковой ширины и высоты.
3
Все, что вам понадобится сделать – это добиться того, чтобы при нажатии на графическую кнопку информация размещалась в вашем аккаунте в соответствующей социальной сети. Используйте обычный системный блокнот для открытия php-файлов.
4
Все коды кнопок добавляйте в файл single.php или index.php, и формируйте код следующего вида, для соблюдения общего стиля всех кнопок, коды которых вы сформируете и вставите в тег:<div class=”buttons”>
коды кнопок
</div>
5
Стиль оформления всех кнопок задается через файл style.css.
6
Установите кнопки нескольких наиболее популярных социальных сервисов с функцией «поделиться с друзьями» и «разместить материал на своей странице», а также при желании добавьте ссылки на собственные профили в тех же социальных сетях, чтобы посетители вашего сайта могли легко находить с вами контакт.

Совет 3 : Как вставить кнопки на сайт

В интернете существуют общепринятые стандарты на размеры рекламных баннеров. Баннеры самого маленького из размеров (88 на 31 пиксель) принято называть «кнопками». Их наиболее часто используют не для полномасштабной рекламы, а при обмене ссылками между владельцами сайтов или в качестве графических счетчиков посетителей. Последовательность действий при размещении таких кнопок на вашем сайте описана ниже.
Как вставить кнопки на сайт
Вам понадобится
  • Система управления сайтом или текстовый редактор.
Инструкция
1
Если вам нужно разместить кнопку-счетчик какого либо интернет-каталога или рейтинговой системы, то, как правило, вместе с регистрацией на этом ресурсе, вы получаете код для вставки в свои страницы. Это может быть JavaScript-код или простой код HTML. Сама картинка при этом находится на сервере рейтинговой системы, загружать ее на ваш сервер не требуется. В этом случае последовательность ваших действий должна быть такова:- в редакторе страниц системы управления вашим сайтом откройте нужную страницу и переключитесь в режим редактирования html-кода. Если вы не используете систему управления сайтом, то скачайте файл с исходным кодом страницы к себе в компьютер и откройте его, например, в стандартном блокноте. Скачивать страницу удобно с помощью файл-менеджера, который есть практически в любой панели управления хостинговой компании;- затем скопируйте код счетчика и вставьте в нужное вам место исходного кода редактируемой страницы. Кнопки счетчиков, как правило, помещают в самый низ страницы, то есть перед тегом </body>. Но, в зависимости от дизайна вашей страницы, его можно поместить и в другое место;- если вы используете он-лайн редактор, то просто сохраните изменения. Если редактируете страницу в текстовом редакторе, то, сохранив, не забудьте закачать на сервер, заменив существующий файл страницы. Это можно сделать с помощью того же файл-менеджера.
2
Если это кнопка не от рейтинговой системы, а от какого-либо партнера по обмену ссылками, то и в этом случае, чаще всего, партнер предоставляет код для вставки его в страницы вашего сайта. Ваши действия должны быть таким же, как в предыдущем варианте. Разница может заключаться в том, что саму картинку вы должны разместить на своем сайте. Закачать ее на свой сервер можно воспользовавшись тем же файл-менеджером хостинг-провайдера или системы управления сайтом.
3
Если в вашем случае никакого исходного кода в комплекте с кнопкой нет, то его не трудно составить самостоятельно. В языке HTML (HyperText Markup Language - «язык разметки гипертекста») для отображения картинки служит тег, который выглядит так:<img src="button.gif" border="0">Здесь button.gif в атрибуте src вам надо заменить на имя файла вашей кнопки. Этот тег изображения следует поместить внутрь тега, формирующего гиперссылку:<a href="http://partnerSite.ru"><img src="button.gif" border="0"><br /></a>Здесь http://partnerSite.ru в атрибуте href вам надо заменить на адрес сайта вашего партнера по обмену ссылками.Этой строки кода будет достаточно для отображения кнопки со ссылкой, ведущей на сайт партнера. Вам осталось вставить ее в исходный код страницы способом, описанным выше.
Видео по теме
Источники:
  • как поставить кнопку скачать

Совет 4 : Как сделать кнопку с кодом

При создании страниц бывает нужно, чтобы при нажатии на помещенную в страницу кнопку в браузере происходило какое-либо запрограммированное автором событие. Для этого требуется поместить в создаваемый документ JavaScript-код и привязать его к нужной кнопке. В зависимости от объема кода, который необходим для реализации задуманного события, можно использовать разные способы подключения кнопки к коду.
Как сделать кнопку с кодом
Инструкция
1
Чаще всего вызов JavaScript-кода привязывают к событию onclick, то есть к щелчку по кнопке левой кнопкой мыши. Если для описания действия, которое должно произойти, не требуется большого объема кода, то его весь можно поместить прямо в тег кнопки. Например, чтобы запрограммировать браузер показывать простое сообщение при нажатии кнопки, JavaScript-сценарий должен выглядеть так:alert('Код сработал!')Требуется всего один оператор и текст. Все это без проблем можно поместить в описание события onclick тега button. Простейший HTML-код страницы в этом случае может выглядеть так:<html>
<head>
<title>Кнопка с кодом</title>
</head>
<body><button onclick="javascript:alert('Код сработал!');">Кнопка с кодом</button></body>
</html>
2
Код более сложного JavaScript-сценария размещать непосредственно в теге кнопки нецелесообразно. Проще сделать из него отдельную функцию, а в событие onclick помесить ее вызов. Например, так может выглядеть функция, которая показывает окошко, содержащее время нажатия кнопки:function getTime() {
var now = new date();
alert("Код сработал в " + now.getHours() + ":" + now.getMinutes());
}Ее следует разместить в заголовочной части страницы (между тегами <head> и </head>). Полный код страницы с привязанным к кнопке вызовом этой функции может выглядеть так:<html>
<head>
<title>Кнопка с вызовом функции</title>
<script>
function getTime() {
var now = new date();
alert("Код сработал в " + now.getHours() + ":" + now.getMinutes());
}
</script>
</head>
<body><button onclick="getTime();">Кнопка с вызовом функции</button></body>
</html>
3
Этот же способ следует использовать, когда нажатие нескольких разных кнопок должно вызывать событие, которое можно описать одинаковым JavaScript-кодом. Например, можно немного изменить предыдущую функцию, чтобы она добавить в окошко с сообщением идентификацию нажатой кнопки: function getTime(btnString) {
var now = new date();
alert(btnString + " нажата в " + now.getHours() + ":" + now.getMinutes());
}Полный код страницы с тремя такими кнопками может выглядеть так:<html>
<head>
<title>Три кнопки с вызовом функции</title>
<script>
function getTime(btnString) {
var now = new date();
alert(btnString + " нажата в " + now.getHours() + ":" + now.getMinutes());
}
</script>
</head>
<body><button onclick="getTime(this.innerHTML);">Первая кнопка</button>
<button onclick="getTime(this.innerHTML);">Вторая кнопка</button>
<button onclick="getTime(this.innerHTML);">Третья кнопка</button></body>
</html>

Совет 5 : Как сделать нажимающуюся кнопку

При создании собственного сайта вам понадобится разработать элементы управления, такие как: элементы меню, кнопки для перехода по страницам. Нажимающаяся кнопка представляет собой элемент, который при наведении мыши изменяет внешний вид, становится «придавленной», т.е. имитирует нажатие.
Как сделать нажимающуюся кнопку
Вам понадобится
  • - программа Dreamweaver.
Инструкция
1
Запустите программу Dreamweaver, чтобы сделать кнопку во флеш. Создайте новую веб-страницу, сохраните ее. Для создания нажимающейся кнопки во флеш используйте страницу Media на панели объектов, а из нее – кнопку Flash Button. Здесь можно выбрать стиль для кнопки - для этого используйте панель предварительного просмотра, которая находится выше списка стилей. Далее введите текст, который будет отображаться на кнопке в поле Button Text. Просмотрите полученный результат с помощью кнопки Play.
2
Используйте язык ява-скрипт для создания нажимающихся кнопок. Создайте три изображения, одно – кнопка в спокойном состоянии, другое – вид кнопки при наведении. Далее откройте с помощью блокнота файл веб-страницы в формате html и добавьте следующий текст в поле Body. < SCRIPT LANGUAGE="JavaScript" > на следующей строке введите if( parseInt( navigator.appVersion ) >= 3 ) compat = true. >
3
Далее на строке введите if(compat) {I1 = new Image; затем укажите пути к файлам изображений I1.src= «введите путь к изображению кнопки в обычном режиме»; I1_1.src= «введите путь к изображению кнопки при наведении на нее курсора мыши»; далее введите текст function SetImg(Name,Img); {if(compat) document.images «введите ссылки на оба изображения» .src=eval(Img+'.src'); } далее введите закрывающийся тег < /SCRIPT >.
4
Перейдите в коде страницы в то место, в которое необходимо добавить кнопку, введите туда следующий код: < A HREF= «введите адрес ссылки, куда будет происходить перенаправление после нажатия кнопки» target="_self" ONMOUSEOVER="SetImg('PIC1','I1_1')" ONMOUSEOUT="SetImg('PIC1','I1')" > < IMG SRC= «Путь к файлу с обычной кнопкой» i1.gif alt= «Текст на кнопке» NAME="PIC1" BORDER= «Размер границы кнопки» > < /A >. Сохраните изменения и откройте страницу в браузере, чтобы просмотреть полученный результат.
Видео по теме
Совет полезен?
Поиск
Добавить комментарий к статье
Осталось символов: 500