-Приложения

  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • Перейти к приложению Дешевые авиабилеты Дешевые авиабилетыВыгодные цены, удобный поиск, без комиссии, 24 часа. Бронируй сейчас – плати потом!
  • Программа телепередачУдобная программа телепередач на неделю, предоставленная Akado телегид.
  • Перейти к приложению Стена СтенаСтена: мини-гостевая книга, позволяет посетителям Вашего дневника оставлять Вам сообщения. Для того, чтобы сообщения появились у Вас в профиле необходимо зайти на свою стену и нажать кнопку "Обновить

 -Метки

Чеснок ажурные узоры спицами ажурный платок аксессуары аудиокниги безрукавка бисер варежки варенье видео вышивка петлей вяжем спицами вязание вязание крючком вязание на спицах вязание по кругу вязание спицами горловина джемпер дома жакет жаккард жаккардовые носки женская одежда женский пуловер журналы по макраме заготовки заготовки на зиму закрытие петель здоровье игрушки индийский платок в оренбургском стиле интересное исторические фильмы капуста кино кино онлайн кинозал коврики ковровая вышивка кокетки косынка красота красота и здоровье кулинария личные отношения лоскутное шитьё лоскутные блоки магия макраме маска для волос массаж мастер класс мастер-класс мк мк видео моделирование молитвы мужская шапка музыка набор петель народная медицина народные рецепты носки. носочки носочки. огород окат рукава оренбургские платки очищение организма очищение печени пасхальный кулич плеер плетение плетение макраме полезные советы построение выкройки пуловер пуловеры пуховые косынки пуховый платок пятка реглан реглан сверху резинка религия рецепты рукава рукоделие сад сад огород салаты следки спицами стихи схемы тапочки удобрения узлы узлы и узоры узлы и узоры макраме узор из кос узор листья узоры узоры крючком узоры спицами умелые ручки уроки вязания уроки маераме уроки шитья уход за волосами уход за комнатными цветами учебник по макраме уют в доме физические упражнения хлеб хрен хреновая закуска цветоводство цветы цигун массаж шали шаль шаль квадратная шапка мужская шапочка швейная машина швейные хитрости шетландские узоры шитьё шитье шторы юбки японские узоры

 -Рубрики

 -Поиск по дневнику

Поиск сообщений в Галина_Озерина

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 08.07.2012
Записей:
Комментариев:
Написано: 12905


Делаем кнопки

Четверг, 16 Января 2014 г. 17:09 + в цитатник
Цитата сообщения ka82 Делаем кнопки

Кнопки есть разные.
Например, есть кнопки - флешки (шуточные). Развлекаться тут: http://www.liveinternet.ru/users/ka82/post275377421
Есть кнопки "далее" (убрать текст под кат). Это можно делать с помощью картинок-гифок и просто картинок. [more=<img src="АДРЕС КАРТИНКИ" />]. Подробнее тут: http://www.liveinternet.ru/users/ka82/post171857399/
Примеры:
Берем картинку, например
Вставляем ее адрес в тег
[more=<img src="//img0.liveinternet.ru/images/attach/c/2//70/855/70855532_blu_1.gif" />]
Про то как убирать под кат полробнее тут: http://www.liveinternet.ru/users/ka82/post171857399/
А здесь я хочу остановиться на таких кнопках:


Можно делать кнопки на любой сайт, пост, страницу.
Если вас устраивают только кнопки-картинки, то можете сделать сами такую "картинку" на сайте (под получившейся пустой кнопкой будет слово download - т.е. загрузить картинку)

Подобных сайтов, делающих кнопки он-лайн, много, можете поискать в Яндексе, Гугле и т.д. В любом случае эту "пустую" кнопку надо будет вставить в тег чтобы вас отсылало на какой-то сайт.

Примеры тега:
1 Откроется в том же окне если правой клавишей мыши не указать открыть в новом окне:
<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" > КОД ПУСТОЙ КНОПКИ </form>
2 Откроется в новом окне / вкладке даже если правой клавишей мыши будете просить открыть в том же окне. Ключевая команда здесь с пробелом target="_blank"
<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank"> КОД ПУСТОЙ КНОПКИ </form>
3 Откроется в том же окне если правой клавишей мыши не указать открыть в новом окне. Подходит для кодов не только кнопок, но и просто текстов и картинок - отсылок
<a href="АДРЕС КУДА ПЕРЕХОДИТЬ">КОД ПУСТОЙ КНОПКИ, КАРТИНКИ ИЛИ ПРОСТО СЛОВА </a>
4 Откроется в новом окне / вкладке даже если правой клавишей мыши будете просить открыть в том же окне. Ключевая команда здесь с пробелом target="_blank". Подходит для кодов не только кнопок, но и просто текстов и картинок - отсылок
<a href="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank">КОД ПУСТОЙ КНОПКИ, КАРТИНКИ ИЛИ ПРОСТО СЛОВА </a>
5 Аналог предыдущего случая 4, открывается всегда в новом окне / вкладке, просто пишется более коротко:
[url=АДРЕС КУДА ПЕРЕХОДИТЬ] КОД ПУСТОЙ КНОПКИ, КАРТИНКИ ИЛИ ПРОСТО СЛОВА [/url]

А здесь - как сделать не просто кнопку-картинку, а чтобы при нажатии она еще и как будто "нажималась".
Первый вид кнопки, с указанием точных размеров высоты HEIGHT: 100px и ширины WIDTH: 607px. Если сделать ширину меньше, текст не поместится.
<div align="center"> - просто команда находиться кнопке по центру строки.
Итак, вот "пустая" кнопка, т.е. которая никуда не ведет, можете жать на нее сколько хотите:

А вот тут ширина и высота маловаты. Когда нажмете, увидите, что весь не поместившийся текст "побежит" бегущей строкой. По крайней мере в браузере Опера у меня так:

Как написать:
<input style="WIDTH: ШИРИНА КНОПКИ НАПР. 207px; HEIGHT: ВЫСОТА КНОПКИ НАПР. 100px" type="submit" size="РАЗМЕР БУКВ НАПР. 33" value="ПОДПИСЬ КНОПКИ" />

А вообще кнопка будет вас отсылать туда, куда вы укажете, какой адрес страницы, сайта, блога. Зачем нужно target="_blank" уже знаете (чтобы открывало в новом окне / вкладке), так что можете стереть эти буквы при желании. Ширина и высота фиксированы, но если текст будет слишком длинный в ширину, то он просто не поместится на кнопке, поэтому надо подредактировать величину, например, сделать ширину не WIDTH: 207px, а WIDTH: 410px или даже больше (можно и меньше если текста мало)
Просто "пустая" кнопка:

<input style="WIDTH: ШИРИНА КНОПКИ НАПР. 207px; HEIGHT: ВЫСОТА КНОПКИ НАПР. 100px" type="submit" size="РАЗМЕР БУКВ НАПР. 33" value="ПОДПИСЬ КНОПКИ" />

Кнопка, ведущая на какой-то сайт:

<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank"><div align="center"><input style="WIDTH: ШИРИНА КНОПКИ НАПР. 207px; HEIGHT: ВЫСОТА КНОПКИ НАПР. 100px" type="submit" size="РАЗМЕР БУКВ НАПР. 33" value="ПОДПИСЬ КНОПКИ" /></div></form>

То же, но без фиксированного указания широты и высоты. В этом случае она растянется на ширину текста:
<div align="center"> - просто команда находиться кнопке по центру строки.

А вот тут даже нет фиксированного размера букв (в таких случаях размер переносится с настроек дизайна дневника применительно к размеру текста в вашем дневнике). И тогда это уже не кнопка...
Вот что получилось:

<input style="type="submit" value="Пишем любой тег" />

Другой тип кнопки:
"Пустая" кнопка:

<input type="submit" value="ПОДПИСЬ КНОПКИ">

Кнопка, ведущая на сайт:

<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank" method="get"><input type="submit" value="ПОДПИСЬ КНОПКИ"></form>

Кнопка с таким вот фоном:
"Пустая" кнопка:

<input type="submit" value="ПОДПИСЬ КНОПКИ" style="background-image:url('АДРЕС КАРТИНКИ-ФОНА КНОПКИ')" />

Кнопка, ведущая на сайт:

<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank" method="get"><input type="submit" value="ПОДПИСЬ КНОПКИ" style="background-image:url('АДРЕС КАРТИНКИ-ФОНА КНОПКИ')" /></form>

По идее, после слова style=" можно приписать не только фон, но и все что хотите применимое к обычному тексту в тегах типа div (шрифт, размер и т.д.). Вот пример "пустой" кнопки:

<input type="submit" value="ПОДПИСЬ КНОПКИ" style="background-image:url('ФОН КНОПКИ'); font-family:ШРИФТ БУКВ НАПР.arial; font-size:РАЗМЕР БУКВ НАПР.24pt; color:ЦВЕТ БУКВ НАПР.#00FF00;" />

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

<button title="ТЕКСТ-ПОЯСНЯЛКА"><table border=5><tbody><tr><td><center><font color=#ЦВЕТ БУКВ НАПР. #BA55D3 size=РАЗМЕР БУКВ НАПР. 4>НАЗВАНИЕ КНОПКИ</font></center></td></tr></tbody></table></button>
Для тех, кто знает тег "таблица", можете увидеть, что table border="5" - это рамка таблицы толщины 5. Можете сделать толщину больше (напр. не 5 а 11) или меньше (напр. 1). По умолчанию 0 рамки вообще НЕ будет, а цвет по умолчанию как правило цвета букв (у меня - черный), поэтому рамку можете "раскрасить" по правилам работы с таблицами, например border: #119931 3px solid;
Итого вместо <table border=5> получится: <table style="border:#F70000 3px solid; ">
Пояснение: #F70000 - цвет рамки, 3px толщина рамки, solid - стиль рамки.

Кнопка, ведущая на сайт:

<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank" method="get"><button title="ТЕКСТ-ПОЯСНЯЛКА"><table border=5><tbody><tr><td><center><font color=#ЦВЕТ БУКВ НАПР. #BA55D3 size=РАЗМЕР БУКВ НАПР. 4>НАЗВАНИЕ КНОПКИ</font></center></td></tr></tbody></table></button></form>

Четвертая кнопка:
"Пустая" кнопка.

<button style="BACKGROUND: #ЦВЕТ ФОНА КНОПКИ НАПР. #8080ff; WIDTH: ШИРИНА КНОПКИ НАПР.150px" type="submit"><img src="URL КАРТИНКИ"></button>

Кнопка, ведущая на сайт:

<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank" method="get"><button style="BACKGROUND: #ЦВЕТ ФОНА КНОПКИ НАПР. #8080ff; WIDTH: ШИРИНА КНОПКИ НАПР.150px" type="submit"><img src="URL КАРТИНКИ"></button></form>
Рубрики:  Полезные советы для дневника/**у р о к и ЛИ РУ
Метки:  
Понравилось: 1 пользователю

ka82   обратиться по имени Четверг, 16 Января 2014 г. 21:13 (ссылка)
Ответить С цитатой В цитатник
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку