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

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

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

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

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

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

Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

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

Книги

Украшения

Сайт от А до Я

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

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

PHP УРОКИ

Услуги

Скрипты

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

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

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

Видео Курсы

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

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

Федеральный закон от 28.12.2013 N 426-ФЗ "О специальной оценке условий труда" Глава 4. Заключительные положения.

Федеральный закон от 28.12.2013 N 426-ФЗ "О специальной оценке условий труда" Глава 3. Организации, проводящие специальную оценку условий труда, и эксперты организаций, проводящих специальную оценку условий труда.

ТЕХНИЧЕСКИЕ ДОСТИЖЕНИЯ ТРЕСТА «ЭНЕРГОГИДРОМЕХАНИЗАЦИЯ»

Федеральный закон от 28.12.2013 N 426-ФЗ "О специальной оценке условий труда" Глава 2. Порядок проведения специальной оценки условий труда. Редакция от 23.06.2014 г.

Федеральный закон от 28.12.2013 N 426-ФЗ "О специальной оценке условий труда". Глава 1. Общие положения.

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

Архив

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

Наши ссылки

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

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

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

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