В наше время сайты, как правило, имеют стилевой файл, определяющий единое форматирование элементов HTML. Иногда приходит в голову мысль, а не использовать ли сменяющийся фон с какими-то картинками или надписями для привлечения внимания пользователя к важным событиям? Ведь сменой одной строки кода мы достигнем того, что посетитель абсолютно любой страницы портала сразу же увидит на нём главное :)

Приём я попробовал на паре сайтов, и, поскольку так никто уже не делает, раздраженных комментов было немного, так что можно сделать вывод, что опыт удался :)

Разумеется, рисунок фона должен быть таким, чтоб текст на нём можно было прочитать. Вообще, в отношении фоновых рисунков я советую придерживаться умеренности и соблюдать следующие проверенные опытом правила:

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

Узнать больше можно, купив мою книгу об HTML и CSS (издательство "BHV").

Теперь посмотрим, какие есть варианты для быстрой смены фона.

1. Клиентское решение для статических сайтов

Добавить в стилевой файл сайта следующее указание:

body {
 background-image: url(img/back.jpg);
 background-repeat: repeat;
}

Разумеется, если стиль для тега body уже существует, можно просто вписать в тег этого стиля инструкции background-image и background-repeat. Здесь предполагается, что рисунок фона называется back.jpg и находится в папке img, расположенной на один уровень ниже файла стиля.

2. Клиентское решение на JavaScript для любых сайтов (зависит от установки календаря пользователя)

Добавить в каждый нужный файл HTML (для статического сайта) или в шаблон верхней части страницы сайта следующий скрипт на JavaScript:

<script type="text/javascript">
var dates=new Array ( 
 //события д.б. упорядочены по дате; каждая пара пара чисел обозначает день и месяц, 
 //третий параметр - обозначение события, можно использовать где-нибудь для вывода текстовой строки
 1,1,'Новый год',
 7,1,'Рождество',
 14,2,'День влюблённых',
 23,2,'День защитника Отечества',
 8,3,'Международный женский день',
 1,4,'Праздник юмора!',
 1,5,'Праздник Первомая',
 9,5,'День Победы',
 12,6,'День независимости',
 1,9,'День знаний и начало учебного года',
 31,12,'C наступающим Новым годом!'
);

var mondays= new Array (31,28,31,30,31,30,31,31,30,31,30,31);
var today=new Date();
var day0=today.getDate();
var day=(day0<10 ? '0' : '') + day0;
var mon0=today.getMonth()+1;
var mon=(mon0<10 ? '0' : '') + mon0;
var year=today.getFullYear();
var dow = '';
var down = today.getDay();
if (down == 0) { dow = 'Вс'; }
else if (down == 1) { dow = 'Пн'; }
else if (down == 2) { dow = 'Вт'; }
else if (down == 3) { dow = 'Ср'; }
else if (down == 4) { dow = 'Чт'; }
else if (down == 5) { dow = 'Пт'; }
else if (down == 6) { dow = 'Сб'; }

function LeapYear (year) {
 mondays[1]=( (year%4==0) && (year%100!=0) || (year%400==0) ? 29 : 28);
}

LeapYear(year);

function DateFound (d,m) {
 var di,mi,i;
 for (i=0; i<dates.length; i+=3) {
  di=dates[i];
  mi=dates[i+1];
  if ((d==di) && (m==mi)) {
   document.getElementById('back1').style.backgroundImage = 'url('+'img/'+day+mon+'.jpg'+')';
   return i;
  }
 }
 return -1;
}

function DisplayDate() {
 var i=DateFound(day0,mon0);
 if (i>-1) {
  //Здесь можно поменять вывод и оформление события или же убрать этот вывод
  document.writeln ('<center><font size=1 color=red>');
  document.write(dow + ', ' + day + '.' + mon + '.' + year+': '+dates[i+2]); 
  document.writeln ('</font></center>');
 }
}
</script>

При этом идентификатор тега <body> определен как

<body id="back1">

а скрипт вызыван из любого места документа тегом вида

<script type="text/javascript"> DisplayDate(); </script>

Естественно, тело скрипта можно разместить в отдельном файле с именем вроде dynamic_back.js и сослаться на него тегом вида

<script type="text/javascript" src="dynamic_back.js"></script>

Скрипт в работе: новое окно

Здесь предполагается, что набор рисунков, имена которых кодируют нужные даты (например, 0105 - рисунок для 1 мая), также находится во вложенной папке img и все рисунки имеют расширение .jpg.

3. Серверное решение для динамических сайтов (подставляет фон в зависимости от времени сервера, на котором расположен сайт)

От предыдущего вариант отличается лишь тем, что дата получается с сервера при формировании страницы, а затем, в зависимости от даты, ставится нужный фон. Если предположить, что рисунки, имена которых кодируют нужные числа и номера месяцев, хранятся так же, как в предыдущем пункте, то получаем следующий код на PHP (вставленнном внутрь тега <body>):

<body style="background-image: url(img/<? print get_ddmm(); ?>.jpg); background-repeat: repeat;">

Функция на PHP get_ddmm() просто получает текущую дату в виде ДДММ и имеет следующий вид:

<?
 function get_ddmm () {
  list($d,$m) = explode(',',date("d,m",time()));
  return $d.$m;
 }
?>

гостевая; E-mail