Вставляем на сайт красивую кнопку и делаем её ссылкой.
Автор: Андрей Краснокутский
Дата: 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-странице:
И если Вы на неё нажмёте, то попадете на Главную страницу моего сайта. Соотвественно в качестве URL-адреса для перехода, Вы можете указать любой ресурс в Интернете.
Теперь давайте используем вторую картинку (кнопку Оформить заказ). Для перехода будем использовать индексную страницу моего магазина. Для примера сделаем относительную ссылку (относительная ссылка - это ссылка работающая в пределах одного сайта). Кнопку Оформить Заказ Вы видите ниже. Код которым представлена работа этой кнопки, отражен в Листинге 4:

Листинг 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-клиент.
Как найти человека в Интернете. Очередной Лохатрон? Или хороший сервис?
Коллекция Фонов для сайта в стиле: Зелёная ткань.
Просмотров: 65461
окей...!
всё получилось...!
спасибо...огромное...!!!
http://bobos.moy.su/ а как сделать так чтоб при нажатии на кнопку открывалась не в новом окне а на этой же странице...!?
Герман уберите из кода атрибут target="_blank"
Подключение
3G MODEM, 4G YOTA, Wi-Fi INTERNET
Спутниковое телевидение
БЕЗЛИМИТНЫЕ ТАРИФЫ
на несколько компьютеров
Создание домовых локальных сетей
В ваш дом, дачу, коттедж, квартиру
при приемлемой стоимости
А также монтаж
проводных и беспроводных систем видеонаблюдения
Прописал путь к картинки, а она не отображается. (sayt.ru/templates/NewWeb/images/ money01.png. Может неправильно указал адрес ?
а у меня хрень какая то получается, даже если ваши все теги загрузить. От чего это зависит
Для вставки изоброжения на сайт требуеться указать путь к нему, если картинка лежит в материнской папке сайта то нао прописать IMG src=images/Имя файла и рассширение
а если в какой либо другой папке то следует написать вот так IMG src=../images/мя файла и рассширение
Автор - капитальный красавчик))
напешите сразу весь код у меня не получилось только 3 пустых рамки!
Спасибо, Андрей, всё получилось с первого раза ) Вот, можно посмотреть: http://ccc26.ru/mastera/
Я создала кнопку в программе Crystal_Button , но не знаю как её "вытащить" оттуда. Если сохраняю, то сохраняется ПОЛНОЕ изображение, типа скриншота.
Не работал с прогаммой Crystal_Button, поэтому ничего не могу сказать по этому поводу
подскажите пожалуйста...Сделал кнопку, работала нормально, решил отредактировать в фотошопе, картинка кнопки со страницы пропала, осталась только рамка и ссылка.???
Руслан, скорее всего Вы ошиблись при сохранении файла: неправильно указали имя файла, не туда сохранили и т.д. Проверьте правильность пути до нового файла и его имя.
спасибо, все исправил. Огромное спасибо за ваш сайт!!! я даже на курсах сайтостроения так не понимал всей сути...
Информация полезная но оформление текста г... Светофор.
Друзья! Всем пора отдохнуть и развлечься!!!
Сыграйте пару шахматных партий с соперниками со всего мира в режиме реального времени на сайте www.chesslove.ru
а как создать кнопку "скачать"?
|