День пятый Разговор о цветах. Разработка цветового сочетания для сайта

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

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

Итак, первый способ. Файл "index" по умолчанию является интернет-файлом, так как имеет формат HTM (HTML). Поэтому, если вы откроете его двойным щелчком, вы попадете в окно просмотра браузера (рис. 5.1).

Этот способ открытия файла index во FrontPage заключается в том, чтобы в верхней командной строке выбрать команду Файл, а в выпадающем меню — Править в Microsoft FrontPage (рис. 5.2).

Если у вас в меню Файл такого пункта нет, значит, FrontPage у вас на ком­пьютере не установлен в качестве редактора интернет-страниц. Чтобы это исправить, нужно, во-первых, открыть саму программу FrontPage, а затем в командной строке выбрать Инструменты | Опции. Откроется следующее окно (рис. 5.3).

Чтобы нормально работать с сайтом, нам нужно, чтобы в области Запуск около надписи Использовать FrontPage как редактор по умолчанию для Веб

стоил флажок. Если у вас все именно так, это просто замечательно. Но если флажка нет, его нужно поставить.

Это был первый способ открытия файла во FrontPage — через окно браузе­ра. Но логичнее будет этот путь сократить. Поэтому, чтобы не тратить время, можно, не открывая файл, нажать на него правой кнопкой мыши, в выпадающем меню выбрать Открыть с помощью (Open with) и в предло­женном списке найти программу FrontPage (рис, 5.4). Это второй способ.ІВх

(чйп Пмакл вил Изйра+кж Сервис Справка

 

 

 

 

 

Главная Статьи

 

П слезное

Программы Оба мяд Юмор Усттк

Ссылки Гостевая

 

Рис. S.1. Страница index в окне просмотра браузера Internet Explorer

ГОайц rvaww Ви» Избран**

Сервис (

Ссодщь

 

Открыть...

СВ1+0

і IfkSHTt. в Mfciwoft ("-raitPaQe

 

 

Сохранил» ы*,,,

 

Рис. 5.2. Правка документа во FrontPage из окна браузера

Устамоікм

Главные опции | настройка редакторов] Просмотр отчетов] Запуск

Г" Открывать последний Вей-сайт при запуске программы Р* Использовать Оерис так редактор по уиопчанио.

р- ІИслопьзовать ГгопРаде как редактор по умолчанию для Веб]

Предупреждение--

\; Показывать панель статуса

Г" Предупреждать, если включенные компоненты устарели Г~ Предупреждать, если текст устарел \* предупреждать при применении тем установки лрокси сервера

Рис. S.3. Диалоговое окно УстановкиРазговор о цветах. Разработка цветового сочетания для сайта

 

 

 

 

Открыть С ПОМГВД>*0 *

Л tntemet Єжріогег

 

Scan wHti Norton Antivirus

Si Mlcrowft RwOJ'agt

 

■ WlnRAR ♦

* Блокнот

 

 

В Mkj neon Word tor wmridws

 

Отправить ►

Щ Текстовый редактор WordPad (№C)

Вьреэоть

Выбрать г^юфамму...

j-

-

Рис. 5.4. Быстрое открытие документа ао FrontPage

И последний, третий способ. Сначала нужно открыть саму программу FrontPage, а уже после этого открыть весь сайт, выбрав Файл (File) | Открыть сайт (Open web) (рис. 5.5).

 

 

Открыть сайт

 

 

 

 

 

Lockip:

\a Documents and Setting}              *■ IS 10 X С j

Tools*

 

 

 

OAlt Users

 

 

 

 

§s\ і

-i All Usere.WMJOWS

 

 

 

 

HS-itm-V І

■ Default Use

 

 

 

 

1

Default user.WIMXWS

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

к

My Dcramets

Администратор

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

It A

Folder дате |C:V5ocumente and Settings\slte

 

Щ

 

Qpan

/СП Ю

 

 

 

 

Cance)

Рис. 5.5. Диалоговое окно открытия сайта во FrontPage

Но два предыдущих способа открытия страницы во FrontPage, конечно же, удобнее, так как после открытия одного файла сайта автоматически откры­вается и сам сайт.

А вообще, это совершенно не важно, каким способом вы откроете страницу index во FrontPage, главное, чтобы вы ее открыли и посмотрели на результа­ты нашей вчерашней работы. А вчера мы поработали на славу:).

У вас на странице сейчас должна быть таблица из трех строк со структурой сайта. Больше мы пока ничего не делали. Хотя, вообще-то, можно написатьчто-нибудь в остальных строках. Не забывайте, что страница index — это главная страница сайта. Поэтому, когда вы будете писать, помните, что по­сетитель в 80% (!) случаев первым делом попадает именно сюда, на страни­цу index! Постарайтесь написать ваш текст так, чтобы посетитель не нажал на крестик в правом верхнем углу, а остался и заинтересовался тем, что на­ходится на вашем сайте.

Но на сегодня это далеко не главная наша задача. Наша главная задача — выбрать правильное цветовое сочетание для сайта.

Почему это так важно? Сейчас объясню. Но сначала подумайте, что в пер­вую очередь бросается в глаза при взгляде на предмет? Правильно, его ос­новной цвет. А потом? А потом мы замечаем и его второстепенные цвета. Так, когда мы смотрим на красный мячик с небольшим черным рисунком, мы в первую очередь видим красный цвет, а потом уже черный. А если это не рисунок, а надпись (то есть некая информация), то смысловое содержа­ние этой надписи мы начинаем воспринимать только после того, как вос­приняли ее внешний вид (в данном случае черное на красном).

Так и с сайтом. Первым делом нам в глаза бросается вовсе не информа­ция, а оформление сайта. А оформление — это в первую очередь цветовое сочетание. Цветовое сочетание сайта — это сочетание его главного и вто­ростепенных цветов. Как эти цвета сочетаются, такое впечатление и про­изводит сайт.

Понимаете важность? Какой бы замечательной ни была информация на ва­шем сайте, первым делом посетитель видит не ее, а оформление сайта, его цветовое сочетание. А первое впечатление всегда самое важное, оно практи­чески полностью определяет дальнейшее поведение посетителя. Конечно же, большое значение имеет и сама информация, но если оформление сайта будет производить негативное впечатление, посетитель, скорее всего, по­ищет интересующую его информацию в другом месте.

Поэтому, как вы понимаете, только в ваших силах сделать так, чтобы цвето­вое сочетание на вашем сайте работало вам во благо, а не во вред. А я вас только немного подтолкну к правильному решению :).

Давайте предположим, что основной цвет вашего сайта — черный. А второ­степенный — красный. Не буду говорить, хорошо это или плохо, факт та­кой: черный + красный = ... Что для вас будет значить это сочетание? Мне, лично, такое сочетание не слишком нравится, глаза режет! Да и текст на черном фоне.,. Скажем так, это не в моем вкусе. Но, да не об этом речь.

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

Вот именно, от нее, родимой, прежде всего и зависит цветовое сочетание. Решили, вы, например, сделать сайт... хм... ну, предположим, о собаках.Странно, но слово "собака" ассоциируется у меня со следующим цветовым сочетанием: белый + коричневый + черный, причем именно в такой после­довательности. Белый фон, различные элементы дизайна коричневого цвета, а текст черный. По-моему, получится неплохо.

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

Кстати, вы знаете, что различным сочетаниям цветов и цвету вообще по­священы большие толстые книжки! Если не верите, зайдите в любой книж­ный магазин. Оказывается, цвет сильно влияет на психологию людей! На­пример, люди, живущие в комнатах с такими яркими и неожиданными цветовыми сочетаниями, как салатовый + алый, становятся агрессивными и опасными для общества! А люди, живущие в комнатах с такими спокойны­ми оттенками, как бежевый, темно-зеленый + белый и т. д., наоборот, бы­вают более спокойными и имеют характер намного лучше, чем "агрессоры". Для сайтов эти выводы ученых тоже справедливы.

Ради эксперимента, посмотрите на рис. ЦВ5.6 (напоминаю, он расположен на цветной вклейке), где представлено несколько разных цветов. Какие ас­социации вызывает у вас каждый из них?

Если вы, например, хотите устроить революцию, то для вашего сайта по­дойдут такие "возбуждающие" цвета, как ярко-красный, ядовито-зеленый или ярко-желтый. Просьба фразу про революцию близко к сердцу не при­нимать! :)

Но если тематика вашего сайта никакая не "революционная", а тихая и спо­койная, например, вы любите выращивать цветы и хотите рассказать об этом на своем сайте (а так же немного заработать на своем маленьком хоб­би), вам в выборе цветового сочетания нужно опираться на различные "мяг­кие" цвета, которые глаза не режут, но и не слишком скучные.

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

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

□ Светлый фон,

□ Белый + черный + серый.

П Контрастные цвета.

•Л. ч> ий ЛтхкрГ-рЛсТ.

□ Оттенки одного цвета.

Рассмотрим каждый из них.Светлый фон

Светлый фон — это прием, который наиболее часто используется в оформ­лении сайтов. Посмотрите сами, на подавляющем большинстве серьезных, популярных сайтов, фон светлый.

Скажу вам по секрету, на белом, светлом фоне информация, которой, я уве­рена, у вас будет много, воспринимается в несколько раз лучше, чем на темном. Недаром же и книги пишут на белом фоне черными буквами! И это не потому, что краски жалко, тут присутствует еще и момент особенности восприятия! Конечно, имеет место и то, как эта информация выглядит... Стоп! Это уже задача следующих дней!:)

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

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

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

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

Белый + черный + серый

В оформлении сайтов также часто используется такое цветовое сочетание, как белый + черный + серый: черный текст с серыми ссыпками на белом фоне (рис. 5,7). Просто и официально. Но как ску-учно!..

Этот прием можно использовать, если только ваш сайт посвящен чему-то очень серьезному и официальному. Например, вы адвокат и, следовательно, на вашем сайте представлен список услуг, которые вы предоставляете. Ад­вокат — профессия серьезная, под стать ей должен быть и сайт.

Но, знаете, это действительно очень скучно. Лучше использовать строгие, но все-таки более "веселые" цвета. Или, чтобы немного "разрядить" офици­оз, можно поместить на сайт побольше иллюстраций, тоже в стиле "бе­лый + черный + серый".

Заголовок

■ І..іпі

 

 

 

Программы

 

 

Тсісст.текст» текст...

Юмоо

 

Vcnvni

 

• Ч-.ij ил

 

Госпма

 

 

 

Рис. 5.7. Страница с цветовым сочетанием "белый + черный + серый"

Контрастные цвета

Неплохой прием — использовать контрастные, противоположные цвета. Самый простой пример контрастных цветов — черный + белый. Это соче­тание я уже описала. Но существуют, конечно же, и другие сочетания кон­трастных цветов. Основные из них это: красный — голубой; синий — жел­тый; зеленый — фиолетовый (см. рис. ЦВ5.8). Все остальные контрастные цвета уже только промежуточные между основными.

Но сочетание из двух основных контрастных цветов на сайте лучше не при­менять, Это только затруднит восприятие его содержимого. Поэтому, если вы не ставите своей целью как можно скорее избавиться от всех посетите­лей вашего сайга, при выборе цветового сочетания целесообразно использо­вать кроме основных контрастных цветов еще и промежуточные. Но чтобы создать гармоничное цветовое сочетание, нужно знать, какие оттенки цветов являются контрастными. Определить это очень просто. В любом графиче­ском редакторе (например, в Paint, который входит в комплект Windows) существует такая функция — Обратить цвета (Invert). Посмотрите на резуль­тат применения этой функции (рис. ЦВ5.9).

Оттенки одного цвета

В предыдущем примере было рассмотрено несколько оттенков двух контра­стных цветов. Здесь же рассмотрим страницу, где использованы несколько оттенков одного цвета. Оттенки одного цвета — замечательный прием, ко­торый очень хорошо использовать на сайте. Единственная трудность — гар­монично подобрать эти самые оттенки. В этом деле вам придется рассчиты­вать только на свой вкус, надеюсь, он вас не подведет :). Пример страницы с цветовым сочетанием "оттенки одного цвета" см. на рис. ЦВ5.10.Ну все, пару идей я вам подкинула, теперь самое время определиться с цве­товым сочетанием до конца. Идите, погуляйте, подумайте, поэксперименти­руйте с цветами, а как вернетесь, мы продолжим.

Ну что, уже выбрали цветовое сочетание? Тогда вперед — изменять цвет ра­мок и фона таблиц! Это мы с вами уже умеем. Выделяем таблицу — правая кнопка мыши — пункт Свойства таблицы.

Можно еще изменить фон самой страницы. Сделать это просто: нажмите на любом месте страницы правую кнопку мыши и выберите пункт Свойства страницы (Page properties). Появится следующее окно (рис. 5.11). Нажмите на вкладку Фон (Background) и в строке Фон выберите нужный цвет.

Но можно вместо однотонного фона сделать еще и фоновой рисунок! Чтобы сделать его, нам понадобится программа Adobe Photoshop. С ее помощью вы впоследствии можете создать не только фон, но и различные элементы дизай­на, кнопки, логотипы, линии, значки... Причем, сами! А создавать графиче­ские элементы для сайта своими руками — это непередаваемое ошущение!

Так что запасайтесь программой Photoshop, а если у вас ее еще нет, то беги­те в магазин, потому что уже завтра мы приступим к такому увлекательному занятию, как создание фона, Я вам гарантирую, попробовав раз — оторвать­ся невозможно! :)

С врйстиа с г г

Основные Фон |поля | Пользовательский! Язык | Workgroup!

Форматирование------------т--ггт—-

[~ Фоновый рисунок f . ■

г і:-™ »і-иіо і -а? ШШВг "<

 

J

і   Включить эффекты наведения ССЫЛКИ

Цвета

 

І      Гиперссылка        I ■ Automatic

Посещенная ссылка11 ■ Automatic

Активная ссылка    | ■ Automata: V]

Custom Colors.

■ иоазпогз

[   Получить фонов -.UG^DUDD зутой страницы і- Cocumenfs colors -

 

lore Colors.

Ot

Cancel

Рис. 5.11. Окно Свойства страницы