Вставляем на сайт красивую кнопку и делаем её ссылкой.
Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Вставляем на сайт красивую кнопку и делаем её ссылкой.

Автор: Андрей Краснокутский

Дата: 2010-06-08

Как сделать из кнопки ссылку?

Довольно часто в практике web-мастера возникает необходимость в установке на сайте различных кнопок, причем кнопок, нажав на которую посетитель попадет в другой раздел сайта, на другую страницу или даже на другой сайт, т.е. эта кнопка должна работать как ссылка.

Сделать красивую кнопку сейчас можно различными способами и множеством сторонних программ. Один из самых простых, распространённых и часто используемых способов - это создать кнопку в Photoshop и разместить её на сайте.

Сегодня мы и разберемся: как же нам разместить кнопку на сайте и сделать её ссылкой. Для наглядности примера, я подготовил пару кнопок с которыми мы и будем работать (см. ниже):

Кнопки сделаны на скорую руку для примера, поэтому не судите строго, но если созданию кнопки уделить должное внимание, можно создать настоящие шедевры, да и назначение может быть довольно разное (следовательно и надписи тоже разные), но суть от этого не меняется, то что мы сейчас с Вами разберем, применимо для вставки всех кнопок.

В первую очередь хочу отметить, что кнопка, созданная в каком либо графическом редакторе, например Photoshop - это обычная картинка, сохранённая в одном из графических форматов используемых в web-технологиях: GIF, JPEG или PNG, а следовательно на вставку таких картинок распространяются и все правила вставки изображений в HTML. Эту тему мы уже подробно обсуждали, поэтому не буду тратить Ваше время, а сразу приведу Листинг 1 вставки изображений для первой кнопки На Главную. Для тех кто не помнит эту тему, посмотреть можно здесь.

Листинг 1.

<img src="files/20100608/glavnaj.jpg" width="200" height="67">

Кратенько поясню, графический файл (картинка кнопки На Главную), имеет следующие параметры: имя glavnal.jpg, ширина 200 пикселей, высота 67 пикселей, путь до этого файла (лежит на сайте) files/20100608/glavnaj.jpg . Если Вам что-то не понятно, вернитесь к Урок 8. Вставляем изображение в HTML.

 

Второй важный момент - это создание ссылки, про ссылки мы также уже беседовали с Вами, если Вы не знаете как в HTML создаются ссылки, вернитесь к Уроку 9. Ссылкии внимательно узучите этот урок.

В Листинге 2, приведен код текстовой ссылки, которая ведет на главную страницу моего сайта. Вот так выглядит текстовый вариант абсолютной ссылки http://www.LuksWeb.ru/

Листинг 2.

<a href="http://www.luksweb.ru">http://www.LuksWeb.ru/</a>

Естественно в якоре ссылки вы можете указать любой нужный Вам текст.

 

А теперь наша задача совместить в коде web-страницы вставку картинки и в качестве якоря ссылки указать не текст а картинку (графический файл) в данном случае это будет наша с Вами кнопка (графический файл glavnal.jpg). Это мы сделаем в Листинге 3:

Листинг 3.

<a href="http://www.luksweb.ru/" target="_blank"><img src="files/20100608/glavnaj.jpg" alt="На Главную страницу сайта LuksWeb.ru" width="200" height="67" border="0"></a>

А вот так эта кнопка будет отображаться на web-странице:

На Главную страницу сайта LuksWeb.ru

И если Вы на неё нажмёте, то попадете на Главную страницу моего сайта. Соотвественно в качестве URL-адреса для перехода, Вы можете указать любой ресурс в Интернете.

Теперь давайте используем вторую картинку (кнопку Оформить заказ). Для перехода будем использовать индексную страницу моего магазина. Для примера сделаем относительную ссылку (относительная ссылка - это ссылка работающая в пределах одного сайта). Кнопку Оформить Заказ Вы видите ниже. Код которым представлена работа этой кнопки, отражен в Листинге 4:

Магазин сайта LuksWeb

Листинг 4.

<p align="center"><a href="shopgold/index.php" target="_blank"><img src="files/20100608/zakaz.jpg" alt="Магазин сайта LuksWeb" width="200" height="67" border="0"></a></p>

Если Вы сейчас нажмёте на кнопку Оформить заказ, то попадете по адресу: http://www.luksweb.ru/shopgold/ главная страница Магазина LuksWebShop.

А теперь сравните Листинг 3 и Листинг 4 и найдите чем отличается Абсолютная и Относительные ссылки.

Вот собственно говоря и всё, естественно у Вас будут свои имена графических файлов, свои ширина и высота картинок, свои пути до этих картинок и конечно же в коде вставки кнопок Вы должны верно указать все эти параметры!

На что еще хочу обатить Ваше внимание. При использовании в качестве якоря ссылок картинки, обязательно добавляйте параметр border="0" иначе вокруг картинки-ссылки будет отображаться рамка, которая во многих случаях очень сильно будет портить дизайн Вашего сайта.

Если у Вас еще остались вопросы по этой теме, еще раз внимательно прочитайте:

 

Удачи.

 

Читайте так же:

Покупаем и Регистрируем Доменное имя для сайта.

Favicon Creator программа для создания иконкок (пиктограмм) для сайтов.

Как написать правильный код для баннера.

FTP протокол. Закачать сайт по FTP. FTP-клиент.

Как найти человека в Интернете. Очередной Лохатрон? Или хороший сервис?

Коллекция Фонов для сайта в стиле: Зелёная ткань.

 

Просмотров: 38324

Нравится


Комментарии к этой заметке:

Комментарии добавил(а): герман
Дата: 2011-02-24

окей...! всё получилось...! спасибо...огромное...!!!

Комментарии добавил(а): герман
Дата: 2011-02-24

http://bobos.moy.su/ а как сделать так чтоб при нажатии на кнопку открывалась не в новом окне а на этой же странице...!?

Комментарии добавил(а): Илья
Дата: 2011-02-25

Герман уберите из кода атрибут target="_blank"

Комментарии добавил(а): 3g
Дата: 2011-02-28

Подключение 3G MODEM, 4G YOTA, Wi-Fi INTERNET Спутниковое телевидение БЕЗЛИМИТНЫЕ ТАРИФЫ на несколько компьютеров Создание домовых локальных сетей В ваш дом, дачу, коттедж, квартиру при приемлемой стоимости А также монтаж проводных и беспроводных систем видеонаблюдения

Комментарии добавил(а): Дмитрий
Дата: 2011-04-03

Прописал путь к картинки, а она не отображается. (sayt.ru/templates/NewWeb/images/ money01.png. Может неправильно указал адрес ?

Комментарии добавил(а): Катя
Дата: 2011-04-26

а у меня хрень какая то получается, даже если ваши все теги загрузить. От чего это зависит

Комментарии добавил(а): Вова
Дата: 2011-07-07

Для вставки изоброжения на сайт требуеться указать путь к нему, если картинка лежит в материнской папке сайта то нао прописать IMG src=images/Имя файла и рассширение а если в какой либо другой папке то следует написать вот так IMG src=../images/мя файла и рассширение

Комментарии добавил(а): Алексей
Дата: 2011-08-11

Автор - капитальный красавчик))

Комментарии добавил(а): виталий
Дата: 2011-10-09

напешите сразу весь код у меня не получилось только 3 пустых рамки!

Комментарии добавил(а): Александр
Дата: 2012-02-08

Спасибо, Андрей, всё получилось с первого раза ) Вот, можно посмотреть: http://ccc26.ru/mastera/

Комментарии добавил(а): Елена
Дата: 2012-02-02

Я создала кнопку в программе Crystal_Button , но не знаю как её "вытащить" оттуда. Если сохраняю, то сохраняется ПОЛНОЕ изображение, типа скриншота.

Комментарии добавил(а): АндрейК
Дата: 2012-02-02

Не работал с прогаммой Crystal_Button, поэтому ничего не могу сказать по этому поводу

Комментарии добавил(а): Руслан
Дата: 2012-04-07

подскажите пожалуйста...Сделал кнопку, работала нормально, решил отредактировать в фотошопе, картинка кнопки со страницы пропала, осталась только рамка и ссылка.???

Комментарии добавил(а): АндрейК
Дата: 2012-04-08

Руслан, скорее всего Вы ошиблись при сохранении файла: неправильно указали имя файла, не туда сохранили и т.д. Проверьте правильность пути до нового файла и его имя.

Комментарии добавил(а): Руслан
Дата: 2012-04-08

спасибо, все исправил. Огромное спасибо за ваш сайт!!! я даже на курсах сайтостроения так не понимал всей сути...

Комментарии добавил(а): Андрей
Дата: 2012-11-08

Информация полезная но оформление текста г... Светофор.

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта

09.08.2012
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2012
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2012
Новый Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

12.01.2012
Новая почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"

10.07.2011
Новая услуга сайта: Реклама в Почтовых Рассылках.

Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструментарий

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Аттестация рабочих мест по условиям труда

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Как заработать деньги в Интернете?
Создай свой ИнфоБизнес


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Скачать бесплатно CCleaner 2.16.830

Аттестация рабочих мест. Итоговые документы.

Аттестация рабочих мест в Смоленске

Аттестация рабочих мест выбираем Аттестующую организацию

Зачем проводить аттестацию рабочих мест?

Не пропустите !!!

Как поднять Ваш бизнес в заоблачные высоты и заработать кучу денег
Эффективная методика
увеличения Вашего
заработка.

Всего за 11 дней!!!

Подробности здесь >>>

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Новости России и Мира. Все что случилось за последние 24 часа.

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!


Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT