HTML, Excel, Word, SEOКак сделать свой сайт ⇒ Делаем внешний лист стилей (CSS)

СВОЙ САЙТ

Этапы создания сайта
· Контент сайта
· Выбор хостинга (бесплатный хостинг)
· Выбор хостинга (платный хостинг)
· Компоновка сайта
· Верхняя часть сайта
· Внешний лист стилей
· Последние штрихи создания сайта
· Размещение сайта в сети
· Раскрутка сайта. Счетчики посещений
· Регистрация сайта в каталогах и поисковиках
Поисковая оптимизация
· Поисковые системы
· Внутренние факторы ранжирования
· Внешние факторы ранжирования
· Правильный обмен ссылками
· Регистрация в белых каталогах
· Индексация сайта
· Подбор ключевых слов
· Общие советы
· Пример пошаговой раскрутки сайта
Основы администрирования сайта
· Что такое лог-файлы. Анализ лог-файлов
· Счетчики посещений сайта
· Работа с FTP
Форум phpBB2
· Стартовое окно
· Общие настройки
· Смайлики
· Управление форумами
· Управление пользователями
Основы SEO
· Информация в Интернете как средство заработка
· Как заработать на сайте
· Где взять посетителей на сайт
· Цель раскрутки сайта
· Как работает поисковик
· Что индексирует поисковик
· Что такое "релевантность"
· Ранжирование результатов поиска
· Семантическое ядро сайта
· Анализ контента сайта
· Внутренние факторы ранжирования
· Коррекция сайта
· Ссылочное ранжирование и авторитетность сайта
· Внешние ссылки
· Техническая работа со ссылками
· "Черные" методы продвижения сайта
· Поисковая реклама
· Планирование поисковой рекламы
· Софт для раскрутки сайта
· Серч - самый полный форум по поисковой оптимизации

 

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

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



В начало страницы



В начало страницы