<< Пред. стр.

стр. 45
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

ходимо перейти по истечении пяти секунд.


Часто задаваемые вопросы
Какие ТИПЫ пути можно использовать для URL-адреса тега
<meta>?
В URL-адресе тега <meta> может применяться любой тип пути: абсо-
лютный, относительный, указываемый относительно документа или
относительно корня.


Пять секунд, возможно, будет слишком большим периодом ожидания для большинства
посетителей вашего сайта. Тем не менее, вы хотите предоставить тем немногим, кто
действительно читает содержимое вашего сайта, возможность увидеть, о чем сообща-
ется на странице, прежде чем браузер выполнит переход. В этом случае, возможно, пя-
ти секунд будет мало. Как удовлетворить требования обеих категорий посетителей?
Просто. Увеличьте задержку переадресации приблизительно до десяти - пятнадцати
секунд и включите прямую ссылку на новую страницу, как на рисунке 76.2.
Листинг 76.2. Исходный код страницы, вид которой в браузере
показан на рисунке 76.2
<html>
<head>
ГЛАВА 76. Автоматическая переадресация браузера 421

<title>Uh, oh!</title>
<meta http-equiv="refresh" content="10, http://newpage.htm">
</head> ,
<body>
<hl>Uh, oh!</hl>
<p>The page you're looking for no longer exists. Your browser
will automatically jump to the <a href="http://newpage.htm">new
page</a> in ten seconds. Please update your bookmarks.</p>
</body>
</html>



Ffc Edit Wew Favorites Xods beip



Uh, oh!
The page you're looking for no longer easts. Your browser will automatically jump to the new page in ten
seconds. Please update your bookmarks.




Рис. 76.2. Чтобы предоставить нетерпеливым посетителям
возможность быстрого перехода на новую страницу,
включите прямую ссылку на измененную Web-страницу


Совет
В любых ситуациях ссылки «Click Here» (Щелкните здесь) представ-
ляют неудачное решение, хотя, по-видимому, они нередко встреча-
ются на страницах переадресации. Когда вы включаете прямую ссыл-
ку на новую страницу, выбирайте текст ссылки из содержимого суще-
ствующего абзаца или создайте специальную ссылку, взяв для нее
название новой страницы.
ГЛАВА77.
Отображение содержимого,
выбираемого случайным образом
Общая проблема для МНОГИХ Web-сайтов состоит в следующем: в то время как основ-
ным разделам сайта уделяется немало внимания и выполняется регулярное обновле-
ние их содержимого, второстепенные разделы отличаются запущенностью. Пусть это
обстоятельство не расстраивает вас. Возможно, ваши ресурсы ограничены, и необхо-
димо расставлять приоритеты. Списки ваших товаров должны быть точными и ваши
новости необходимо постоянно обновлять. В условиях цейтнота изменение страницы
«About Us» (О нас) будет находиться внизу списка актуальных задач.
Один из способов оживления заброшенной Web-страницы состоит в возложении дан-
ной задачи на браузер, который решает ее с помощью генератора случайного содер-
жимого. Возьмем для примера страницу «About Us» (О нас). Вместо того чтобы при
каждом посещении посетителями этой страницы загружался один и тот же файл изоб-
ражения, можно заставить браузер выбирать одно из трех изображений, или из пяти
изображений, или из десяти изображений, или из сотни изображений.
Случайно выбираемое содержимое не обязательно должно быть изображением. Выби-
рать в случайном порядке можно буквально все: цвет фона страницы, шрифт, стиль на-
чертания шрифта, содержание абзаца и так далее. В этой главе предлагается несколь-
ко инструментариев, чтобы дать общее представление о доступных возможностях.


Инструментарий Генератор случайного изображения
Код данного инструментария выбирает случайным образом из
предопределенного набора изображение и отображает его на
Web-странице. Код состоит из двух частей. Первая часть пред-
ставляет собой функцию JavaScript, которая фактически и выби-
рает случайным образом изображение. Вторая часть — это стро-
ка кода, которая вставляется в тело Web-страницы. Этот код по-
мещается в HTML-код в том месте, где должно появляться выб-
ранное случайным образом изображение.


Часто задаваемые вопросы
Можно ли в условиях стесненности в сред-
ствах использовать этот инструментарий в
качестве сервера рекламы?
Несомненно. Можно попеременно выводить
несколько возможных рекламных объявлений
вверху своей страницы. При каждой загрузке
страницы браузер будет выбирать случайным
образом рекламное объявление из доступного
набора баннеров.
ГЛАВА 77. Отображение содержимого, выбираемого случайным образом 423

Далее приводится функция JavaScript:
<script language="JavaScript">
/* Если данный скрипт добавляется во внешний JS-
файл, теги <script>, вставленные в начале и в кон-
це этого кода, можно отбросить. Если данный скрипт
вставляется внутрь HTML-документа, не удаляйте те-
ги <script> и поместите весь этот код в раздел за-
головка страницы. */
function doRandomlmage() {
/* Следующие строки кода реализуют выбор случайно-
го числа между 1 и 5. При необходимости измените
код так, чтобы он соответствовал точному числу слу-
чайных изображений в вашем наборе. Применяется сле-
дующая формула: Math.round(Math.random() * [число
изображений - 1]) + 1. Таким образом, для выбора
из десяти возможных изображений применяется форму-
ла Math.round(Math.random() * 9) + 1. Подобным об-
разом, для выбора из двух возможных изображений
формула принимает вид Math.round(Math.random() *
1) + 1 . */
var x = Math.round(Math.random() * 4) + 1;
/* Следующая строка кода инициализирует переменную
image, которая будет содержать HTML-код, выводящий
изображение на странице. */
var image;
/* Следующие блоки кода if/then проверяют значение
х и в соответствии с ним устанавливают значение пе-
ременной image. На каждое возможное изображение
приходится один блок кода if /then. И если у вас
есть только три возможных изображения, потребуется
всего три блока кода if/then. */
if (x == 1) {
image - "<img src=\"src01\" width=\"width01\"
height=\"height01\" alt=\"alt01\">";


/* Замените переменную srcOl на путь к первому слу-
чайному изображению. Подобным образом замените
widthOl, heightOl и altOl на ширину, высоту и аль-
тернативный текст данного изображения. Случайные
изображения могут быть разного размера, но вид
страницы будет лучше, когда физические размеры всех
случайных изображений одинаковы.
424 Строим Web-сайты

Обратите внимание, что внутренним кавычкам предше-
ствует обратная косая черта (\). Это символ выхо-
да. Он сообщает браузеру, что кавычки являются
частью значения переменной. */
if (x == 2) {


image = "<img src=\"srcO2\" width=\"widthO2\"
height=\"heightO2\" alt=\"altO2\">";




if (x == 3) {
image = "<img src=\"srcO3\" width=\"widthO3\"
height=\"height03\" alt=\"altO3\">";




if (x == 4) {
image = "<img src=\"srcO4\" width=\"width04\"
height=\"heightO4\" alt=\"alt04\">";




if (x'== 5) {
image = "<img src=\"srcO5\" width=\"widthO5\"
height=\"heightO5\" alt=\"altO5\">";


/* В следующей строке браузер записывает HTML-код
в переменную image на Web-странице. */
document.write(image);




</script>
Это была функция. Теперь необходим код для ее вызова. Помес-
тите следующую строку HTML-кода точно в то место, где должно
появляться случайное изображение.

<script language="JavaScript">doRandomImage();
</script>
ГЛАВА 77. Отображение содержимого, выбираемого случайным образом 425


Совет
Если случайное изображение реагирует на щелчки мыши и служит
ссылкой, по которой переход всегда выполняется в одно и то же мес-
то, независимо от изображения, поместите HTML-код, вызывающий
функцию, между тегами-анкерами:
<а href="targetpath"xscript
language= "JavaScript ">doRandomImage (); </scriptx/a>
Однако если пункт назначения ссылки зависит от того, какое случай-
ное изображение выводится браузером, встройте тег-анкер в значе-
ние переменной image в функции doRandomlmage () :
if (x == 1) {
image = "<а href=\"targetpath01\"ximg
src=\"src01\" width=\"width01\" height=\"height01\"
alt = \"alt01\"x/a>"




Инструментарий Генератор случайной цитаты
Код данного инструментария выбирает случайную цитату и
отображает ее на Web-странице. Как и в предыдущем инструмен-
тарии код состоит из двух частей: самой функции JavaScript и вы-
зова этой функции с Web-страницы.
Далее приводится функция JavaScript:
<script language="JavaScript">
/* Если данный скрипт добавляется во внешний J S -
файл, теги < s c r i p t > , вставленные в начале и в кон-
це этого кода, можно- отбросить. Если данный скрипт
вставляется внутрь HTML-документа, не удаляйте т е -
ги <script> и поместите весь этот код в раздел за-
головка страницы. */ .
function doRandomQuote() {
/* Следующие строки кода реализуют выбор случайно-
го числа между 1 и 5. При необходимости измените
код так, чтобы он соответствовал точному числу слу-
чайных цитат в вашем наборе. Применяется следующая
формула: Math.round(Math.random() * [число цитат -
1]) + 1. */
1;
var x = Math.round(Math.random(
/* Следующая строка кода инициализирует переменную
quote, которая будет содержать текст цитаты. */
var quote;
Строим Web-сайты
426

/* Следующая строка кода инициализирует переменную
tag. Задайте в качестве значения этой переменной
тип тега, который хотите использовать для разметки
цитаты: р, blockquote, hi, любой другой. */
var tag = "blockquote";
/* Следующая строка кода инициализирует переменную
source. Значение этой переменной будет равно имени
автора цитаты, вместе с названием книги, речи или
статьи, где упоминалась цитата. */
var source;
/* Следующая строка кода инициализирует переменную
code, которая будет содержать блок HTML-кода, вы-
водящий цитату на экран. */
var code;
/* Следующие блоки кода if/then проверяют значение
х и в соответствии с ним устанавливают значение пе-
ременной quote. Для каждой цитаты требуется один
блок кода if/then.
.Если вы не хотите выводить на экран источник цита-
ты, используйте вместо соответствующей строки кода
следующее выражение: source = ""; */
if (x == 1) {
quote = "Цитата 1 размещается здесь.";
source = "Строка источника 1 размещается
здесь.";




if (x == 2) {
quote = "Цитата 2 размещается здесь.";
source = "Строка источника 2 размещается
здесь.";




if (х == 3) {
quote = "Цитата 3 .размещается здесь.";
source = "Строка источника 3 размещается
здесь.";
ГЛАВА 77. Отображение содержимого, выбираемого случайным образом 427

if (х == 4) {
quote = "Цитата 4 размещается здесь.";
source = "Строка источника 4 размещается
здесь.";



if (х == 5) {
quote = "Цитата 5 размещается здесь.";
source = "Строка источника 5 размещается
здесь.";


/* Теперь браузер начинает формировать HTML-код для
записи на страницу. */
code = tag
/* Если вы не хотите отображать левую кавычку, уда-
лите следующую строку кода. , /
*
code += "&#8220;";
/* Далее следует текст цитаты. */
code += quote;
/* Если вы не хотите отображать правую кавычку,
удалите следующую строку кода. */
code += "&#8221;";


/* Следующая строка кода добавляет тег <cite> для
источника цитаты. Даже если вы не хотите отображать
источник, во всяком случае оставьте эту строку ко-
да. 7
code += "<cite>";
/* Этот блок кода if/then проверяет, определена или
нет переменная source. Если переменная определена,
добавляется дефис между текстом цитаты и текстом
источника.
Если вы не хотите отображать дефис между текстом
цитаты и текстом источника, удалите этот блок ко-
да. Или если требуется отобразить не дефис, а дру-
гой знак, замените код дефиса (&#8212) на код тре-
буемого знака, например, на двоеточие (:). */
428 Строим Web-сайты

if (source.lqngth != 0) {
code += "&#8212;";


/t Следующая строка кода добавляет источник, зак-
рывает тег <cite> и 'закрывает тег основной размет-
ки. */
code += (source + "</cite></" + tag + ">");
/* В следующей строке браузер записывает всю кодо
вую строку на Web-страницу. */
document.write(code);




</script>
Для вызова этой функции поместите следующий HTML-код точ-
но в то место, где цитата должна появляться на Web-странице.
<script language="JavaScript">doRandomQuote1);
</script>


Совет
Для получения дополнительного визуального
эффекта создайте специальный CSS-стиль
класса для своих случайных цитат. Затем в
функции doRandomQuote () замените следую-
щую строку кода:
code ="< tag
на:
code = "<" + tag +
class=\"имякласса\">"
ГЛАВА 77. Отображение содержимого, выбираемого случайным образом 429

Инструментарий Генерирование случайных свойств страницы
Для реального переключения код из этого инструментария вы-
бирает случайное правило стиля из таблицы стилей и применя-
ет его к тегу <body> на странице. Ваши случайные правила сти-
лей могут содержать практически любое форматирование,
включая цвета фона, цвета ссылок, гарнитуры шрифтов и стили
шрифта.
Код этого инструментария состоит из трех частей. Первая часть
представляет собой набор правил стилей, из которых произво-
дится выбор. Вторая часть кода — это функция JavaScript, кото-
рая выбирает стиль. И третьей частью является строка HTML-
кода, которая записывает измененный тег <body> на вашу Web-
страницу.
Здесь описываются правила стилей:
<style type="text/css">
/* Если правила стилей находятся во внешнем CSS-
файле, теги <style> не нужны. Если правила стилей'
вставляются внутрь HTML-файла, не удаляйте теги
<style> и поместите весь блок каскадных таблиц сти-
лей в раздел заголовка страницы.
Можно включать любое количество правил стилей, при-
чем можно добавлять любые определения стилей. Сле-
дующие блоки кода создают три разных правила сти-
лей. Обратите внимание, что каждый блок кода явля-
ется специальным стилем класса тега <body>. */
body.styleOl {


background-color: #000000;
color: #FFFFFF;
font-family: Arial, Helvetica,' sans-serif;




body.style02 {


background-color: #FFFF00;
color: #FF0000;
font-family: "Times New Roman", Times, serif;
430 Строим Web-сайты



<< Пред. стр.

стр. 45
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>