Как создать красивую кнопку для сайта
В этом разделе вы сможете узнать, как сделать красивые и объёмные кнопки для вашего сайта (Пример кнопки смотрите внизу страницы).
Для того, чтобы создать кнопку для сайта, сначала перейдите сюда.
На открывшейся странице вы видите различные виды кнопок. Внимание! Выбирайте кнопку по её форме, т.к. надпись на кнопке, её цвет и форму границ можно будет изменить. Итак, выберите понравившуюся вам кнопку(нажмите на неё).
Далее вам предлагается настроить вид вашей кнопки.
В поле Text введите текст, который будет на вашей кнопке. В разделе Font выберите шрифт, цвет шрифта и его размер.
В поле Button настройте саму кнопку. В разделе Shape выберите форму кнопки. В разделе Fill вы можете сделать градиентную заливку кнопки (переход от одного цвета к другому). В разделе Outline, Shadow и Other вы можете выбрать эффекты для кнопки, такие как тень, отражение и т.п. В настройке Mouse Over выберите вид, который будет приобретать кнопка при наведении на неё курсора. И в разделе Size можете изменить размеры кнопки.
После того, как вы закончили настройки вашей кнопки, нажмите Render Button.
На открывшеёся странице вы видите 3 изображения вашей кнопки. Первые 2 изображения вам необходимо скачать (если вы не настраивали Mouse Over, то изображений должно быть не 3, а 2). Третье изображение - готовый вариант вашей кнопки. И ниже находится код, который нам в дальнейшем понадобиться. Итак, скачиваем 2 ( или 1) изображения.
Теперь создайте любой текстовый документ и скопируйте туда следующий код:
Для того, чтобы создать кнопку для сайта, сначала перейдите сюда.
На открывшейся странице вы видите различные виды кнопок. Внимание! Выбирайте кнопку по её форме, т.к. надпись на кнопке, её цвет и форму границ можно будет изменить. Итак, выберите понравившуюся вам кнопку(нажмите на неё).
Далее вам предлагается настроить вид вашей кнопки.
В поле Text введите текст, который будет на вашей кнопке. В разделе Font выберите шрифт, цвет шрифта и его размер.
В поле Button настройте саму кнопку. В разделе Shape выберите форму кнопки. В разделе Fill вы можете сделать градиентную заливку кнопки (переход от одного цвета к другому). В разделе Outline, Shadow и Other вы можете выбрать эффекты для кнопки, такие как тень, отражение и т.п. В настройке Mouse Over выберите вид, который будет приобретать кнопка при наведении на неё курсора. И в разделе Size можете изменить размеры кнопки.
После того, как вы закончили настройки вашей кнопки, нажмите Render Button.
На открывшеёся странице вы видите 3 изображения вашей кнопки. Первые 2 изображения вам необходимо скачать (если вы не настраивали Mouse Over, то изображений должно быть не 3, а 2). Третье изображение - готовый вариант вашей кнопки. И ниже находится код, который нам в дальнейшем понадобиться. Итак, скачиваем 2 ( или 1) изображения.
Теперь создайте любой текстовый документ и скопируйте туда следующий код:
<a href="http..." target="_blank">код</a>
где http... - ссылка на сайт или страницу вашего сайта, на который будет выполнен переход после нажатия на кнопку (кавычки не убирать),
код - это, как вы наверно догадались, код, полученный на сайте cooltext.com.
Внимание!
Если переход после нажатия кнопки будет на другую страницу вашего сайта, то наверное, лучше чтоб страница открывалась в этой же странице вместо предыдущей. В этом случае ваш код будет выглядеть следующим образом:
Если же переход после нажатия кнопки будет на чужой сайт, то желательно, чтобы он открывался в другом окне, и тогда вы код не меняете.
Итак вам нужно вписать в код адрес сайта и код.
Далее процесс создания кнопки немного изменяется в зависимости от хостинга вашего сайта. Мы рассмотрим установку кнопки на сайт UCOZ и Яндекс Народ.
код - это, как вы наверно догадались, код, полученный на сайте cooltext.com.
Внимание!
Если переход после нажатия кнопки будет на другую страницу вашего сайта, то наверное, лучше чтоб страница открывалась в этой же странице вместо предыдущей. В этом случае ваш код будет выглядеть следующим образом:
<a href="http...">код</a>
Если же переход после нажатия кнопки будет на чужой сайт, то желательно, чтобы он открывался в другом окне, и тогда вы код не меняете.
Итак вам нужно вписать в код адрес сайта и код.
Далее процесс создания кнопки немного изменяется в зависимости от хостинга вашего сайта. Мы рассмотрим установку кнопки на сайт UCOZ и Яндекс Народ.
Яндекс
Итак, вы скачали изображения (изображение) кнопки и полностью подготовили html код. Внимание! Установка кнопки на сайт Яндекс.Народ предусматривается в Конструкторе сайтов. Для начала переходим на ту страницу, где вы хотите разместить кнопку. Далее вставляем форму "внешний код" в то место, куда вы хотите установить кнопку. На окне внешнего кода нажимаем "Вставить". Теперь вставляем в открывшееся окно заранее подготовленный код. Нажимаем "Готово".
Теперь переходим в "Управление файлами". В левом списке выбираем страницу, на которую вы хотите разместить кнопку. Далее нажмите "Загрузить файл" и найдите изображения кнопки, которые вы скачали. Опять повторюсь, изображение может быть и одно. Итак, загружаем изображения. Убедитесь в том, что они находятся в нужной папке (в папке с названием страницы).
Вот и всё. Если вы сделали всё правильно, то кнопка после нажатия должна переходить на нужный вам сайт. Если кнопка не появляется вообще или после нажатия не происходит переход на нужный сайт, то внимательно прочитайте ещё раз весь процесс установки. Проверьте корректность вашего html кода.
Теперь переходим в "Управление файлами". В левом списке выбираем страницу, на которую вы хотите разместить кнопку. Далее нажмите "Загрузить файл" и найдите изображения кнопки, которые вы скачали. Опять повторюсь, изображение может быть и одно. Итак, загружаем изображения. Убедитесь в том, что они находятся в нужной папке (в папке с названием страницы).
Вот и всё. Если вы сделали всё правильно, то кнопка после нажатия должна переходить на нужный вам сайт. Если кнопка не появляется вообще или после нажатия не происходит переход на нужный сайт, то внимательно прочитайте ещё раз весь процесс установки. Проверьте корректность вашего html кода.
Ucoz
Для начала зайдите на ваш сайт как администратор. Теперь перейдите в "Управление"(вверху в панели администратора)
> "Файловай менеджер". Загрузите изображения (изображение) вашей
кнопки.
Далее перейдите на ту страницу, где вы хотите разместить кнопку. Нажмите на значок "Редактировать в визуальном редакторе (изображение "глаз"). Найдите то место, где нужно установить кнопку и для удобства в этом месте поставьте несколько знаков "+" (плюс). Например +++. Теперь в верхнем правом углу нажмите [панель HTML кодов]. В открывшемся окне найдите ваши знаки "+", удалите их и на их место вставьте html код, который вы уже заранее подготовили. Теперь нам нужно немного изменить наш код. Вот так выглядит изначально мой html код:
<div align="center"><a href="http://google.ru" target="_blank"><img src="cooltext495765341.png" onmouseover="this.src='cooltext495765341MouseOver.png';" onmouseout="this.src='cooltext495765341.png';" border="0" /></a></a></div>
Цветным шрифтом обозначены участки, которые мы будем редактировать.
Итак, перейдите в файловый менеджер и щёлкните по названию изображения №1 (в названии которого НЕТ MouseOver). Должна появиться ссылка на это изображение. Скопируйте эту ссылку и вставьте в html код, заменив в моём случае участки, выделенные красным цветом.
Теперь проделайте то же самое с другим изображением: скопируйте его ссылку, и замените в своём коде тот участок, который у меня выделен зелёным цветом. Затем пропишите border="0" в том же месте, где и у меня.
Затем нажмите "Сохранить".
Вот код кнопки, расположенной в самом низу этой страницы:
<div align="center"><a href="http://internet-m0ney.ucoz.com/index/0-3"><img src="http://internet-m0ney.ucoz.com/cooltext495765341.png" onmouseover="this.src='http://internet-m0ney.ucoz.com/cooltext495765341MouseOver.png';" onmouseout="this.src='http://internet-m0ney.ucoz.com/cooltext495765341.png';" border="0"></a></div>
Далее перейдите на ту страницу, где вы хотите разместить кнопку. Нажмите на значок "Редактировать в визуальном редакторе (изображение "глаз"). Найдите то место, где нужно установить кнопку и для удобства в этом месте поставьте несколько знаков "+" (плюс). Например +++. Теперь в верхнем правом углу нажмите [панель HTML кодов]. В открывшемся окне найдите ваши знаки "+", удалите их и на их место вставьте html код, который вы уже заранее подготовили. Теперь нам нужно немного изменить наш код. Вот так выглядит изначально мой html код:
<div align="center"><a href="http://google.ru" target="_blank"><img src="cooltext495765341.png" onmouseover="this.src='cooltext495765341MouseOver.png';" onmouseout="this.src='cooltext495765341.png';" border="0" /></a></a></div>
Цветным шрифтом обозначены участки, которые мы будем редактировать.
Итак, перейдите в файловый менеджер и щёлкните по названию изображения №1 (в названии которого НЕТ MouseOver). Должна появиться ссылка на это изображение. Скопируйте эту ссылку и вставьте в html код, заменив в моём случае участки, выделенные красным цветом.
Теперь проделайте то же самое с другим изображением: скопируйте его ссылку, и замените в своём коде тот участок, который у меня выделен зелёным цветом. Затем пропишите border="0" в том же месте, где и у меня.
Затем нажмите "Сохранить".
Вот код кнопки, расположенной в самом низу этой страницы:
<div align="center"><a href="http://internet-m0ney.ucoz.com/index/0-3"><img src="http://internet-m0ney.ucoz.com/cooltext495765341.png" onmouseover="this.src='http://internet-m0ney.ucoz.com/cooltext495765341MouseOver.png';" onmouseout="this.src='http://internet-m0ney.ucoz.com/cooltext495765341.png';" border="0"></a></div>
Теперь сохраните все настройки и проверьте правильность работы кнопки. Если возникли какие-либо проблемы, проверьте ещё раз правильность всех html-кодов. Также вы можете написать нам о вашей проблеме и мы обязательно вам поможем.
