HTML, Excel, Word, SEO   Свой сайт  Делаем внешний лист стилей (CSS)

«Верхушка сайта | Свой сайт | Последние штрихи»

Делаем внешний лист стилей (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;}

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

top

«Верхушка сайта | Свой сайт | Последние штрихи»

Спасибо, что заглянули на сайт. Надеюсь, Вам понравилось. Заходите еще. Здесь всегда рады вам :)
При копировании материалов, размещенных на сайте, ссылка на первоисточник обязательна.
Если понравился этот сайт..

© 2005-2010
Юрий Кордык All Rights Reserved

E-mail:
admin@on-line-teaching.com