|
|
|
|
Вставляем на сайт красивую кнопку и делаем её ссылкой. Автор: Андрей Краснокутский Дата: 2010-06-08 Как сделать из кнопки ссылку?Довольно часто в практике web-мастера возникает необходимость в установке на сайте различных кнопок, причем кнопок, нажав на которую посетитель попадет в другой раздел сайта, на другую страницу или даже на другой сайт, т.е. эта кнопка должна работать как ссылка. Сделать красивую кнопку сейчас можно различными способами и множеством сторонних программ. Один из самых простых, распространённых и часто используемых способов - это создать кнопку в Photoshop и разместить её на сайте. Сегодня мы и разберемся: как же нам разместить кнопку на сайте и сделать её ссылкой. Для наглядности примера, я подготовил пару кнопок с которыми мы и будем работать (см. ниже):
Кнопки сделаны на скорую руку для примера, поэтому не судите строго, но если созданию кнопки уделить должное внимание, можно создать настоящие шедевры, да и назначение может быть довольно разное (следовательно и надписи тоже разные), но суть от этого не меняется, то что мы сейчас с Вами разберем, применимо для вставки всех кнопок. В первую очередь хочу отметить, что кнопка, созданная в каком либо графическом редакторе, например Photoshop - это обычная картинка, сохранённая в одном из графических форматов используемых в web-технологиях: GIF, JPEG или PNG, а следовательно на вставку таких картинок распространяются и все правила вставки изображений в HTML. Эту тему мы уже подробно обсуждали, поэтому не буду тратить Ваше время, а сразу приведу Листинг 1 вставки изображений для первой кнопки На Главную. Для тех кто не помнит эту тему, посмотреть можно здесь. Листинг 1.
Кратенько поясню, графический файл (картинка кнопки На Главную), имеет следующие параметры: имя glavnal.jpg, ширина 200 пикселей, высота 67 пикселей, путь до этого файла (лежит на сайте) files/20100608/glavnaj.jpg . Если Вам что-то не понятно, вернитесь к Урок 8. Вставляем изображение в HTML.
Второй важный момент - это создание ссылки, про ссылки мы также уже беседовали с Вами, если Вы не знаете как в HTML создаются ссылки, вернитесь к Уроку 9. Ссылкии внимательно узучите этот урок. В Листинге 2, приведен код текстовой ссылки, которая ведет на главную страницу моего сайта. Вот так выглядит текстовый вариант абсолютной ссылки http://www.LuksWeb.ru/ Листинг 2.
Естественно в якоре ссылки вы можете указать любой нужный Вам текст.
А теперь наша задача совместить в коде web-страницы вставку картинки и в качестве якоря ссылки указать не текст а картинку (графический файл) в данном случае это будет наша с Вами кнопка (графический файл glavnal.jpg). Это мы сделаем в Листинге 3: Листинг 3.
А вот так эта кнопка будет отображаться на web-странице:
И если Вы на неё нажмёте, то попадете на Главную страницу моего сайта. Соотвественно в качестве URL-адреса для перехода, Вы можете указать любой ресурс в Интернете. Теперь давайте используем вторую картинку (кнопку Оформить заказ). Для перехода будем использовать индексную страницу моего магазина. Для примера сделаем относительную ссылку (относительная ссылка - это ссылка работающая в пределах одного сайта). Кнопку Оформить Заказ Вы видите ниже. Код которым представлена работа этой кнопки, отражен в Листинге 4:
Листинг 4.
Если Вы сейчас нажмёте на кнопку Оформить заказ, то попадете по адресу: http://www.luksweb.ru/shopgold/ главная страница Магазина LuksWebShop. А теперь сравните Листинг 3 и Листинг 4 и найдите чем отличается Абсолютная и Относительные ссылки. Вот собственно говоря и всё, естественно у Вас будут свои имена графических файлов, свои ширина и высота картинок, свои пути до этих картинок и конечно же в коде вставки кнопок Вы должны верно указать все эти параметры! На что еще хочу обатить Ваше внимание. При использовании в качестве якоря ссылок картинки, обязательно добавляйте параметр border="0" иначе вокруг картинки-ссылки будет отображаться рамка, которая во многих случаях очень сильно будет портить дизайн Вашего сайта. Если у Вас еще остались вопросы по этой теме, еще раз внимательно прочитайте:
Удачи.
Читайте так же: Покупаем и Регистрируем Доменное имя для сайта. Favicon Creator программа для создания иконкок (пиктограмм) для сайтов. Как написать правильный код для баннера. FTP протокол. Закачать сайт по FTP. FTP-клиент. Как найти человека в Интернете. Очередной Лохатрон? Или хороший сервис? Коллекция Фонов для сайта в стиле: Зелёная ткань.
Просмотров: 61752 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): герман окей...! всё получилось...! спасибо...огромное...!!! Комментарии добавил(а): герман http://bobos.moy.su/ а как сделать так чтоб при нажатии на кнопку открывалась не в новом окне а на этой же странице...!? Комментарии добавил(а): Илья Герман уберите из кода атрибут target="_blank" Комментарии добавил(а): 3g Подключение 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 Комментарии добавил(а): исмаил а как создать кнопку "скачать"? Добавить Ваш комментарий: |
Новости сайта Почтовая рассылка Новинка! Как реально заработатьв Интернете? "Обзор видов и способов заработка."
Специальный Отчет:  В подарок всем подписчикам! Полный список наших почтовых рассылок! Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |