Делаем внешний лист стилей (CSS)
Теперь, когда каркас будущего сайта уже сделан, самое время определиться с цветовым решением сайта.
Сейчас мы создадим внешний лист стилей, в котором укажем цвета фона страницы, таблиц, шрифтов; определимся с размерами элементов и их положением.
По поводу цветового решения. Если строго следовать рекомендациям для веб-дизайнеров, то для цветового решения нужно использовать так называемую таблицу безопасных цветов (всего 216 цветов), или безопасную палитру. Почему она безопасная? Потому, что такая палитра обеспечивает точное соответствие отображения цветов на различных мониторах. Правило простое. Как известно, цвет задается шестнадцатеричным значением от 000000 (черный цвет) до FFFFFF(белый цвет). Так вот, безопасный цвет может содержать только следующие значения: 00, 33, 66, 99, CC, FF. Например: 003300, 6699СС, FF0099.
Размер, стиль, цвет шрифта и цвет фона надо выбирать с таким расчетом, чтобы шрифт легко читался и не вызывал усталости глаз. Гораздо лучше смотрится темный шрифт на светлом фоне, чем наоборот. Причем размер шрифта должен быть таким, чтобы текст легко читался при различных разрешениях мониторов.
Для облегчения подбора безопасных цветов мною разработана оригинальная программа SafeColor. Скачать ее можно с главной страницы сайта "Все о векторной и растровой графике Corel".
Наиболее популярные шрифты, используемые для веб-дизайна:
Verdana Verdana Verdana
Tahoma Tahoma Tahoma
Arial Arial Arial
Times New Roman Times New Roman Times New Roman
Century Century Century
Georgia Georgia Georgia
Courier Courier Courier
Garamond Garamond Garamond
Не мудрствуя лукаво, назовем наш лист стилей style.css. Файл листа стилей является простым текстовым файлом, а посему его можно делать в любом текстовом редакторе. Достаточно после написания переименовать расширение файла.
Перво-наперво сделаем на нашей странице ссылку на будущий файл листа стилей:
<link rel="stylesheet" href="style.css" type="text/css">
Первым делом определим используемые шрифты, цвет фона, шрифта:
BODY {
font-family: Verdana,Tahoma,Arial;
background-color: #33CCCC;
color: black}
Теперь сделаем полосу прокрутки
BODY{
scrollbar-face-color: #99CCCC;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-track-color:#CCFFFF}
Основные параметры для абзаца
p {
font-size: 8pt;
margin-left:8px;
font-weight: normal ;
text-align: justify;
margin-right:3px;
margin-top: 0px;
text-indent: 6px;
margin:0px;
padding-bottom : 1px;
padding-left : 4px;
padding-right : 4px;
padding-top : 1px;
color:#003300
}
И, наконец, определимся с гиперссылками
.a:link {
FONT-SIZE:8pt; color: #3300CC;
text-decoration:none;
font-weight: bold;
font-family: Verdana, Arial;}
.a:visited {
FONT-SIZE:8pt; color: #3300CC;
text-decoration:none;
font-weight: bold;
font-family: Verdana, Arial;}
.a:active {
FONT-SIZE:8pt; color: #FF0033;
text-decoration:none;
font-weight: bold;
font-family: Verdana, Arial;}
.a:hover {
FONT-SIZE:8pt; color: #FF0033;
text-decoration:underline;
font-weight: bold;
font-family: Verdana, Arial;}
Что у нас получилось, можно посмотреть здесь. На место будущего баннера я вставил рисунок, совпадающий с ним по размеру, чтобы увидеть, как будет выглядеть страница при использовании рекламы. Цветовое решение, надо сказать, далеко не самое лучшее, но сейчас мы преследуем другие цели. Поэкспериментируйте с цветовой гаммой сами и выберите наиболее подходящую на ваш взгляд.
