Создание на сайте кнопки произвольного вида

Давненько не брался я за обновление своего блога, но вопросы у новичков накопились, и надо на них помочь найти ответ. Сегодня рассмотрим тему вставки в произвольном месте графической ссылки, а, проще говоря, кнопки, вид которой будет отличаться от стандартных кнопок, содержащихся в модулях.

Задачу эту можно решить несколькими путями. А именно:

Первый и самый простой вариант - в нужном месте после текста или где-то еще вставляем кнопку-картинку, т.е. обыкновенный имидж, и к нему привязываем ссылку на нужную нам страницу.

Все бы хорошо, но текст на такой кнопке ставить будет затруднительно, разве что поиграть наложением слоев при помощи стилей css - тот еще головняк. Либо прописать текст в фотошопе поверх картинки, но в таком случае и сам текст будет картинкой, что не всегда, вернее всегда не гут для поисковиков. Но этот способ имеет место быть. В крайнем случае, текст можно прописать к имижду при помощи тега alt, может быть поможет.

Еще есть способ сделать кликабельной какую либо область сайта, которую сложно вырезать из дизайна отдельной картинкой. Заключается он в том, что мы создаем слой, по величине соответствующий кликабельной области, и стилями css позиционируем его над этой областью. Затем в слой помещаем переменную, в которую надо поставить абсолютно прозрачный имидж в формате png, так же размерами соответствующий кликабельной области. Вот к этому имиджу мы и подвешиваем ссылку.

Ну и наконец тот, который я считаю наиболее правильным и гибким. Я уже писал о нем в своем посте Ставим универсальную кнопку "Вернуться назад" По сути там и был описан этот способ, вернее его частное применение. Здесь же я опишу общий вариант для любых случаев

Итак, в нужном месте, например, после основного текста страницы вы хотите поставить кнопку с надписью "Напишите нам", ведущую на страницу Контакты с формой обратной связи.

Для этого необходимо сделать следующее:

1.  Открыть нужный нам раздел в редакторе контента и перейти на вкладку html. Под текстом с тэгами размещаем следующий код:

<input type="button" value="Напишите нам" onclick="window.location.href='contact.html';" class="myButton">

Ключевые теги:

• value - это текст на кнопке, выделенное желтым маркером заменяете на свое
• свойства атрибута onclick - это путь к нашей целевой странице, пропишите его очень внимательно, не пропустив ни одной запятой, а лучше просто скопируйте, заменив выделенную желтым часть своим адресом страницы
• class - это ваш стиль css, что с ним делать узнаете дальше, а пока запомните, что выделенное маркером название класса также пишите произвольное, но не ошибитесь, когда будете прописывать свойства этого класса в css - название должно совпадать в точности, с учетом регистра букв.

Переходим в режим текста и видим ниже текста стандартную кнопку с необходимой нам надписью, никак не настроенную визуально. Если она вас устраивает в таком виде - бога ради! Дело закончено. Но если вы все же хотите настроить ее под ваш дизайн, переходим к шагу 2.

2. Теперь нам необходимо прописать в css стилевой класс для этой кнопки и вывести его в дерево редактора дизайна, чтобы настроить внешний вид.

Для этого открываем для многих загадочный "текст CSS" и обнаруживаем кучу непонятного кода (профи конечно все поймут!). В дебри лезть не надо: отматываем код к самому концу и с новой строки вставляем следующую конструкцию:

.myButton  {

}

Как видите, название класса должно совпадать с прописанным в коде кнопки, хотя и может отличаться от моего. Между фигурными скобками у нас пустая строка. А теперь ключевой момент: для того, чтобы ваш новый стиль появился в дереве редактора дизайна, и вы могли его настроить в визуальном режиме, сделайте следующее: скопируйте из любого класса, который уже прописан в ваше коде css, любой атрибут, но в законченном виде, с "точкой с запятой" на конце и поставьте его в пустую строку между фигурными скобками. После чего не забываем нажать "Сохранить CSS"

Далее на вкладке Оформление в окне программы кликаем на пункт "Обновить параметры css-редактора" или нажимаем Shift+Ctrl+F5. И в дереве дизайна на ветке Другие стили обнаруживаем наш новый стиль .myButton

Теперь мы можем настраивать вид и расположение кнопки и текста на ней обычными средствами редактора дизайна так, как нам надо. Не забудьте только удалить прописанный там вручную атрибут, в моем примере это был "отступ текста" - он нам теперь не нужен.

И последнее, но очень важное замечание: чтобы кнопка работала в проекте в оффлайне (в интернете она будет работать точно), обязательно снимите птичку в Свойствах проекта с   пункта "Блокировать Java Script в программе"

На этом все. Надеюсь, материал будет вам полезен. Не забудьте пролайкать страничку и добавить +1, за что вам заранее спасибо!

А вот секреты настройки кнопки под любой визуальный вариант, в том числе и вариант прозрачной кнопки, вы сможете узнать в моем следующем посте. Для того чтобы не пропустить его, зарегистрируйтесь постоянным читателем блога. Успехов!