Как использовать html-цвета для вебдизайна сайта?

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

Согласитесь, на любом сайте много элементов, нуждающихся в выделении цветом - это и текстовые записи, и графические элементы. Для выделения цветом разных частей текста в программе WebPageMaker есть специальная функция, предусматривающая выбор нужного цвета в предлагаемой цветовой палитре. Текст мы не так часто выделяем цветом, как графику. Поэтому с графическими элементами приходиться повозиться чуть дольше.

Часто вебмастер, создав самостоятельно или скачав готовую шапку для своего сайта, старается подобрать остальные графические элементы в такой же цветовой гамме. Так вот, для того, чтобы не подбирать цвет вручную, можно определить его "название" (код) в  Color Pix. И затем просто вставить в цветовой редактор в специальное поле для появления нужного вам цвета.

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

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

Цвет можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA.

Часто для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры для записи кода используются от 0 до 9 включительно. Цифры от 10 до 15 заменены латинскими буквами A, B, C, D, E, F. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует буквенное обозначение FF в шестнадцатеричной системе.

Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.

Такой код (вида #666999) чаще всего используется при задании определенного цвета и определить его совсем не проблема. Теперь попробуем выполнить небольшое задание.

Для начала скачайте ColorPix с официального сайта. Это займет максимум минуту.


После появления такого окошка программа готова к работе. Подводите курсор к нужному вам цвету и тут же получите о нем информацию в голубом поле слева: пиксели, формулировку цвета в разных системах. 

Для тех, кто создает свой сайт в WebPageMaker нужна вторая строка RGB, с цифровым определением цвета, так как цветовой редактор, встроенный в WebPageMaker, работает именно с таким кодом. Для тех, кто самостоятельно умеет править цвета в стилях, нужна третья строка HEX, в которой отображается шестнадцатеричный код цвета.

Кнопки "+" и "-" используются для сворачивания программы и перемещения ее в трей и соответственно для ее вызова из трея, что очень удобно в работе.
Теперь для примера я возьму шапку одного из шаблонов сайта. Имея такую шапку, кнопки меню можно сделать либо розовыми в тон цветка либо черными. Я выберу розовый цвет... Вызову из трея ColorPix, подведу курсор к малиновой рамке шапки и запишу появившееся цифровое обозначение цвета. Это 183,10,103.

Теперь вставлю прямоугольник  через Вставка - Фигуры - Прямоугольник и нажму на значок изменения цвета. В открывшейся цветовой палитре программы я впишу цифры цвета и нажму ОК. Получен прямоугольник розового цвета, вполне подходящий для кнопок меню или обозначения разделов сайта.
Вы обратили внимание на то, что цифры в цифровом обозначении разделены запятыми? Это для их правильного написания, первые три цифры до запятой вписываем в поле напротив "Красный", следующие две (три) цифры напротив поля "Зеленый" и последние три - напротив поля "Синий". Вот и нужный цвет появился в палитре. Сохраняем его в наборе и используем по мере надобности.
Я уверена, вам обязательно пригодится данная програмка для работы над своими сайтами. Кроме ее могу предложить вам для еще две программы по определению цвета.
Первая - это так называемое "солнышко", где вы выбираете цвет щелкая по палитре.
И вторая программа - для тех вебмастеров, кто работает в других конструкторах и не имеет удобного встроенного редактора цвета.
Здесь цвет подбирается двигая ползунок по вертикальной линейке и затем выбирая дополнительный оттенок в основном поле. Такой же цветовой редактор встроен в программу-конструктор WebPageMaker.

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

Всем удачи и до новых встреч! С ув. Светлана (SvetLana_TSV)
                                               Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

                               Всем желаю удачи и смелых воплощений идей на вашем сайте !
Проект для новичков
Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla -  русские версии.
Автор и администратор  данного проекта - SvetLana_TSV.  Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Главная       Скачать       Уроки        Новости        Статьи        Контакты        Карта сайта
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
ПОДРОБНЕЕ

Фоны
для
сайта
Не забудь заглянуть в свою почту и подтвердить подписку!