• Авторизация


Поля для кодов. Внешний вид и пр. 29-01-2011 10:50 к комментариям - к полной версии - понравилось!


Такой небольшой, но очень полезный постик:)

Речь пойдет про поля, в которые прописывается некий код, для того, чтобы читатель мог потом этот код с легкостью взять. Коды флешек, картинок, постов и пр. Окошки такие, к примеру:





Такие простенькие окошки. Про первое говорить не будем. Оно как бы не совсем предназначено для этих целей (содержать в себе некий код), а вот про второе,- поговорим.

Пишется оно очень просто:


<textarea >А сюда просто вставляем нужный нам код, который должен отображаться в окошке</textarea>

Просто и легко. Можно весь пост "вставить" в такое вот окошко:) В качестве борьбы с плагиатом, например:) Ведь захотят взять,- возьмут, а так... больше шансов, что возьмут то, что вам надо

Отошли от темы:)

Окошко это конечно замечательное, но уж слишком стандартное.
Займемся его внешним видом

Я не буду рассказывать о всех возможных изменениях,- их уж слишком много. Можно столько всего накрутить:)

Размер окошка.

За размер окошка отвечают два параметра:
cols - ширина и rows - высота

Применим эти два параметра например так:


Или так:


Пишется это все так:

<textarea cols="5" rows="20">код, который должен отображаться в окошке</textarea>


Обводка и фон окошка.
Тут уже будем применять стили. Вообще, стили можно применять практически к чему угодно ( сейчас даже и не вспомню, есть ли в html хоть один тег, к которому нельзя применить стиль)

В результате всех этих манипуляций,- можем получить даже такое окошко:


Это я конечно переборщил с яркостью, чтоб нагляднее было:) НИКОГДА ТАК НЕ ДЕЛАЙТЕ! Это жутко давит на глаза:)

Итак, пишем так:

<textarea style="background-color: ЦИФРОВОЕ обозначение цвета; border: 2px solid ЦИФРОВОЕ обозначение цвета;">код, который должен отображаться в окошке</textarea>

Про "цифровые" обозначения цвета уже сто раз говорили, но напомню к примеру:
#ffffff - белый,
#cccccc - серый,
#000000 - черный.

В коде есть кусок border: 2px - 2px это толщина обводки. Меняем двойку как хотим:)

На этом пока все, т.к. я тут затронул тему стилей, а это ооочень уж большая тема, но жутко интересная и удобная. Основные знания вы получили, вам их пока хватит:)

Только одно важное дополнение.
Вот коды окошек, которые мы учили выше,- позволяют пользователю не только брать код из окошка, но и писать самому в этом окошке:))
В этом нет ничего страшного, но вдруг, нечаянно чего-нибудь ткнет и видоизменит код:) Скопирует его, а потом побежит к вам с вопросом "почему ничего не работает?":)
Так вот, чтобы этого избежать, приписываем дополнительный параметр readonly. Пишется так:
<textarea readonly="readonly">код, который должен отображаться в окошке</textarea>

Ну и результат:


Написать что-либо в это окошко пользователю уже не удастся:)
вверх^ к полной версии понравилось! в evernote
Legionary 29-01-2011-14:15 удалить
Ответ на комментарий NeTakaya_6til # NeTakaya_6til, зачем? в планах "великие дела"?:)
NeTakaya_6til 29-01-2011-14:17 удалить
Ответ на комментарий Legionary # Пошевелить пельменем в голове для разнообразия))
Legionary 29-01-2011-14:20 удалить
Ответ на комментарий NeTakaya_6til # NeTakaya_6til, хм... пельмень предпочитает html? прикольный такой:)
NeTakaya_6til 29-01-2011-14:23 удалить
Ответ на комментарий Legionary # Псю...он у меня много чиго предпочитает)))
Legionary 29-01-2011-14:24 удалить
Ответ на комментарий NeTakaya_6til # NeTakaya_6til, дать Д/З ?:)
lusina03 29-01-2011-14:31 удалить
Спасибо Лёша забираю
NeTakaya_6til 29-01-2011-14:33 удалить
Ответ на комментарий Legionary # Угу...желательно всо с самого начала и в ссылках))) Это тебе Д.З)))))))))
Legionary 29-01-2011-14:36 удалить
Ответ на комментарий lusina03 # lusina03, всегда пожалуйста:))
Legionary 29-01-2011-14:36 удалить
Ответ на комментарий NeTakaya_6til # NeTakaya_6til, хех, тоже мне проблема, называется:) на:
http://www.liveinternet.ru/users/legionary/rubric/1270043/
Ответ на комментарий Legionary # агаааааааааааааа!ессссссссссс!!!!!!
Legionary 29-01-2011-14:37 удалить
Ответ на комментарий Торнадо2112 # Торнадо2112, и ведь не поспорю..даж обидно как-то:)))
NeTakaya_6til 29-01-2011-14:45 удалить
Ответ на комментарий Legionary # Такс...ладно...хорошо))) сам напросился)))
Legionary 29-01-2011-14:48 удалить
Ответ на комментарий Самазнаю # Самазнаю, пожалуйста:)
Legionary 29-01-2011-14:49 удалить
Ответ на комментарий Legionary # NeTakaya_6til,
NeTakaya_6til 29-01-2011-14:51 удалить
Ответ на комментарий Legionary # Вечуром...
Legionary 29-01-2011-15:06 удалить
Ответ на комментарий ludamilla # ludamilla, пожалуйста:)
Танго_Х 29-01-2011-17:24 удалить
Спасибо! Было очень интересно узнать про readonly. Многие не могут скопировать точно из окошка.
REMEUR 29-01-2011-19:52 удалить
Спасиб,Лёша!Пошла учиться:-))
овно4ка 29-01-2011-20:41 удалить
Спасибо за урок! унесла в копилочку!(пока сама коды не пишу, а вдруг пригодится.. надо осваивать!)))
TATIANA5 29-01-2011-21:14 удалить
Спасибо за полезность!
 (150x150, 31Kb)
Legionary 29-01-2011-21:31 удалить
Ответ на комментарий Зиновия # Зиновия, пожалуйста:))
Legionary 29-01-2011-21:31 удалить
Ответ на комментарий love_amor # love_amor, кому ес, а кому... надоели уже все эти окошки:))
Legionary 29-01-2011-21:33 удалить
Ответ на комментарий Танго_Х # туесок, да способ есть более удобного использования:) но на лиру... не воплотить:(
Legionary 29-01-2011-21:33 удалить
Ответ на комментарий REMEUR # REMEUR, а на здоровье:))
Legionary 29-01-2011-21:34 удалить
Ответ на комментарий овно4ка # овно4ка, генератор справляется?;) а и вправду, вдруг:))
Legionary 29-01-2011-21:34 удалить
Ответ на комментарий TATIANA5 # TATIANA5, пожалуйста:))


Вы сейчас не можете прокомментировать это сообщение.

Дневник Поля для кодов. Внешний вид и пр. | Legionary - Legionblog | Лента друзей Legionary / Полная версия Добавить в друзья Страницы: «позже раньше»