Как сделать сайт с кнопками

Добавлено: 13.04.2018, 18:51 / Просмотров: 51133

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

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

Дата: 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-клиент.

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

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

 

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


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

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

а как создать кнопку "скачать"?


Источник: http://www.luksweb.ru/view_post.php?id=189


Поделись с друзьями



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Похожие новости


Как сделать мужской пробор
Как сделать себя и своих друзей админами
Кокон для новорожденного своими руками пошагово
Узор из профильной трубы своими руками
Ораторское искусство научиться самостоятельно
Бабочка для мальчика своими руками
Соляной спрей для волос своими руками
Мебель своими руками установка


Как сделать сайт с кнопками
Как сделать сайт с кнопками


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



ШОКИРУЮЩИЕ НОВОСТИ


Back to Top