RSS-лента

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

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

Дата: 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" иначе вокруг картинки-ссылки будет отображаться рамка, которая во многих случаях очень сильно будет портить дизайн Вашего сайта.

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

• Урок 8. Вставляем изображение в HTML.
• Урок 9. Ссылки

Удачи.

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

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

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

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

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

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

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

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

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

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

Навигация

Уроки HTML

CSS уроки

Статьи

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

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

Книги

Украшения

Сайт от А до Я

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

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

PHP УРОКИ

Услуги

Скрипты

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

SEO

jQuery

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

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

Видео Курсы

Заработает каждый от Школьника до Пенсионера! "Как?" Узнать сейчас >>> Хотите заработать? 2-х Уровневая Партнерская программа! Присоединяйтесь.

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

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

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

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

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

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

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

Как пользоваться электронными деньгами в Интернете. Заводить кошельки, Оплачивать, Обменивать, Выводить, Передавать и т.д. и т.п. Обучающий Видео Курс! Узнать сейчас >>> Стань партнером и заработай денег >>>

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

Архив

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

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

Наши ссылки

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

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

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

Проверено Z-PAYMENT