Blogger: Голография и раскрашивание скрипта!

Раскрасим Наш Мир и поговорим о голографии!

Здравствуйте! Сегодня мы продолжаем раскрашивать Наш Мир, вернее наш сайт, нет все-таки наш мир, который каждый из нас пытается создать на просторах интернета...

Ну, ладно достаточно, пожалуй философии, а то так мы договоримся до некоторых принципов голографии, которые я до сих пор не очень понимаю и считаю скорее парадоксами. Я имею ввиду, когда часть голографического изображения предмета на пленке хранит информацию о целом предмете (т.е. если мы порежем голографическую картинку на кусочки - в каждом косочке мы будем видеть всю картинку!)

Так и наши интернет дневники - являющиеся только частью нашего мира, может быть как голограмма отражают весь наш мир целиком?

Давайте договоримся так: сегодня мы раскрашивает только наши сайты на примере раскраски скриптов. А уж раскрасится ли от этого наш реальный мир и какими цветами - мы просто понаблюдаем!

Итак, раскрашивать будем на примере скрипта Поиск в нашем блоге, который Катя (Бебеккины Кузяки) себе уже установила и чем я очень горжусь!

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

На самом деле раскрашивать с помощью CSS (Cascading Style Sheets - Каскадных таблиц стилей), очень просто. Для этого в HTML описание объекта который мы хотим раскрасить или как-то изменить мы добавляем волшебный атрибут style и его значением будет строка состоящая из объявлений свойств, каждое из которых представляется в виде пары имя: значение и если у обекта несколько свойств они разделяются точкой с запятой.

Не будучи еще очень большими специалистами в HTML, с атрибутом style мы уже встречались: вот например, когда разговаривали о Картинках для фотохудожников мы изучили такое свойство как ширина width и присвоили ему значение 500px, записав width:500px;

Так что не все так страшно и мы приступаем к раскраске нашего скрипта:

А вот и его код:

<center><form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 200px;" value="Введите слово для поиска..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" value="Искать" type="submit"/></form></center>

в нем присутствует описание двух графических объектов "поле для ввода" и "кнопка поиск". Вот их то мы сегодня и будем изменять.

В описании поля для ввода уже есть магический атрибут style и он задает ширину поля для ввода (width) - в моем случае это было 200px, но если у вас такое поле в блог не помещается его можно уменьшить: поставьте например width:150px на пробу. Кстати слова в атрибуте value можно тоже изменить, чтобы они помещались в строку ввода.

Какие свойства нам могут понадобиться:
width - ширина
height - высота

background-color - цвет фона
border-color - цвет рамочки

color - цвет шрифта
font-size - размер шрифта

размеры будем указывать в пикселях px
а цвета - 6 шестнадцатиричных цифр с символом # перед ними

Для раскраски нашего скрипта я уже заготовила несколько цветов:

#00CCFF
#FF0000
#3300FF
#00CC00

И вот какой код у меня получился:

<center><form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 150px; height: 15px; color: #00CCFF; font-size: 14px; background-color: #FF0000;" value="Что ищем?..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" style="border-color: #00CCFF; background-color: #00CC00; color: #3300FF;" value="Искать" type="submit"/></form></center>

и вот так он теперь выглядит:

Немного попугаисто, зато никакой цвет не перепутаешь ;).

На этом я с вами прощаюсь и надеюсь, что раскрашивать и изменять размеры мы с вами немного научились. Будут вопросы спрашивайте, а кому все это было не интересно может посмотреть фильм про голографию.

Всем удачи во всем!
Света


Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...