Примечание

При использовании описанных в этом разделе свойств объекта style следует учитывать одну неприятную особенность: до того, как сценарий может получить значение свойства, это значение должно быть установлено также с использованием сценария.

Примеры использования объекта style

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

В первом примере реализуется перемещение изображений«шариков» внутри рамки (элемент DIV). Шарики имеют случайные первоначальные скорости и направления движения. Кроме того, при достижении стенок (рамки элемента DIV) они упруго он них отталкиваются. Страница примера выглядит так, как показано на рис. 13. 4.

Рис. 13. 4. Перемещение «шариков» внутри элемента DIV

Ниже приведен текст HTML‑ документа, который показан на рис. 13. 4 (пример 13. 11).

Пример 13. 11. Перемещающиеся элементы

<! DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Frameset//EN»

" http: //www. w3. org/TR/html4/frameset. dtd" >

< HTML>

< HEAD>

< TITLE> Страница с анимацией< /TITLE>

< STYLE type = " text/css" >

. ball {position: absolute}

. ballarea {border-style: solid; border-width: 1px;

position: absolute; background-color: white}

< /STYLE>

< /HEAD>

< BODY>

< DIV class = " ballarea" id = " area" >

<! –Изображения-шарики–>

< IMG src = " balls/ball1. bmp" class = " ball" id = " ball1" >

< IMG src = " balls/ball2. bmp" class = " ball" id = " ball2" >

< IMG src = " balls/ball3. bmp" class = " ball" id = " ball3" >

< IMG src = " balls/ball4. bmp" class = " ball" id = " ball4" >

< IMG src = " balls/ball5. bmp" class = " ball" id = " ball5" >

< SCRIPT type = " text/javascript" >

//Позиционируем элемент DIV

area. style. left = area. style. top = " 10mm";

area. style. width = area. style. height = 200;

//Установим размер изображений-шариков ball1. style. pixelWidth = ball1. style. pixelHeight = 16;

ball2. style. pixelWidth = ball2. style. pixelHeight = 16;

ball3. style. pixelWidth = ball3. style. pixelHeight = 16;

ball4. style. pixelWidth = ball4. style. pixelHeight = 16;

ball5. style. pixelWidth = ball5. style. pixelHeight = 16;

< /SCRIPT>

< /DIV>

< SCRIPT type = " text/javascript" src = " balls. js" > < /SCRIPT>

< /BODY>

< /HTML>

Здесь предполагается использование пяти изображений из папки balls. Как видно из примера, чтобы сценарий нормально работал с координатами и размером изображений, соответствующие свойства пришлось установить не в CSS, а опять же с помощью сценария.

Во внешний файл вынесен сценарий, отвечающий за перемещение изображений (файл balls. js). Cодержимое файла balls. js выглядит следующим образом (пример 13. 12).

Пример 13. 12. Содержимое файла balls. js

//Массив со ссылками на объекты-изображения шариков var balls = [ball1, ball2, ball3, ball4, ball5];

//Массивы скоростей по горизонтали и вертикали (от –10 до 10)

var xSpeed = [rand(–10, 10), rand(–10, 10), rand(–10, 10),

rand(–10, 10), rand(–10, 10)];

var ySpeed = [rand(–10, 10), rand(–10, 10), rand(–10, 10),

rand(–10, 10), rand(–10, 10)];

//Минимальные значения координат изображений var minX = ball1. style. pixelLeft;

var minY = ball1. style. pixelTop;

//Максимальные значения координат изображений var maxX = area. style. pixelWidth + minX – balls[0]. style. pixelWidth;

var maxY = area. style. pixelHeight + minY – balls[0]. style. pixelHeight;

//Назначаем функцию обновления изображения, вызываемую по таймеру window. setInterval(redraw, 100);

//Функция генерации случайных значений function rand(min, max){

return Math. random()*(max–min)+min;

}

//Функция обновления координат и перерисовки изображений function redraw(){

var i, newX, newY;

for (i=0; i< balls. length; i++){

//Вычисляем новое положение шарика newX = balls[i]. style. pixelLeft + xSpeed[i];

newY = balls[i]. style. pixelTop + ySpeed[i];

//Проверка столкновения с границами if (newX > maxX){

newX = maxX;

xSpeed[i] = –xSpeed[i];

}

else if (newX < minX){

newX = minX;

xSpeed[i] = –xSpeed[i];

}

if (newY > maxY){

newY = maxY;

ySpeed[i] = –ySpeed[i];

}

else if (newY < minY){

newY = minY;

ySpeed[i] = –ySpeed[i];

}

//Наконец, перемещаем изображение balls[i]. style. pixelLeft = newX;

balls[i]. style. pixelTop = newY;

}

В следующем примере рассматривается сценарий, позволяющий случайным образом изменять цвет текста, для которого задан определенный стилевой класс. Стилевой класс в примере имеет название colored. Пример разбит на две части: собственно сценарий (файл coloredtext. js) и HTML‑ документ, использующий возможности этого сценария.

Для начала рассмотрим сам сценарий, код которого приведен ниже (пример 13. 13).

Пример 13. 13. Содержимое файла coloredtext. js

//Поиск всех элементов, имеющих класс «colored»

var i, j = 0;

var elements = [];

for (i=0; i< document. all. length; i++){

if (document. all(i). className == " colored" ){

elements[j] = document. all(i);

j++;

}

//RGB-составляющие цвета текста var R = 0, G = 0, B = 0; //По умолчанию цвет черный

//Назначаем функцию перерисовки window. setInterval(redraw, 50);

//Функция генерации случайных значений function rand(min, max){

return Math. random()*(max–min)+min;

}

function redraw(){

//Вычисляем новые значения составляющих цвета

R += rand(–8, 8);

R = (R> =0)? R: 0;

R = (R< =255)? R: 255;

G += rand(–8, 8);

G = (G> =0)? G: 0;

G = (G< =255)? G: 255;

B += rand(–8, 8);

B = (B> =0)? B: 0;

B = (B< =255)? B: 255;

//Установка нового цвета для всех элементов for (i=0; i< elements. length; i++){

elements[i]. style. color =

" rgb(" + R + ", " + G + ", " + B + " )";

}

Этот сценарий работает следующим образом. После загрузки содержимого документа (для этого файл должен подключаться к документу перед закрывающим тегом < /BODY> ) производится просмотр всей коллекции all документа, и в массив elements помещаются ссылки на все элементы, имеющие стилевой класс colored. Кроме обозначения элементов, цвет которых нужно изменять, этот стилевой класс больше ни для чего не используется.

Изменение цвета в примере осуществляется по таймеру. Значения RGB‑ составляющих цвета случайным образом изменяются на небольшие значения, что обеспечивает эффект этакого плавного перехода цвета. Еще следует отметить, что цвет всех отобранных элементов всегда одинаков. Это сделано для упрощения программы.

В примере 13. 14 показано, как используется рассматриваемый сценарий.

Пример 13. 14. Страница с разноцветным текстом

<! DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Frameset//EN»

" http: //www. w3. org/TR/html4/frameset. dtd" >

< HTML>

< HEAD>

< TITLE> Разноцветный текст< /TITLE>

< STYLE type = " text/css" >

. colored {}

< /STYLE>

< /HEAD>

< BODY>

< H1> Обычный заголовок< /H1>

< H1 class = " colored" > Разноцветный заголовок< /H1>

< P class> Обычный текст

< P class = " colored" > Разноцветный текст

< SCRIPT type = " text/javascript" src = " coloredtext. js" > < /SCRIPT>

< /BODY>

< /HTML>

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

Пример реализован следующим образом: вверху окна организуется строка меню, в которой присутствуют два пункта, открывающих два различных меню. Первое меню выглядит так, как показано на рис. 13. 5.

Рис. 13. 5. Открыто первое меню

Второе меню, вызываемое при выборе второго пункта в строке меню, показано на рис. 13. 6.

Рис. 13. 6. Открыто второе меню

Как видно, оба меню появляются под соответствующими пунктами строки меню. Теперь рассмотрим, как реализован этот пример, а также какие существуют направления усовершенствования этого примера. Пример разбит на две части: HTML‑ документ и сценарий (файл popup_menu. js). Сначала разберем текст HTML‑ документа (пример 13. 15).

Пример 13. 15. Документ со строкой меню

<! DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Frameset//EN»>

< HTML>

< HEAD>

< TITLE> Страница с меню< /TITLE>

< STYLE type = " text/css" >

. item {background-color: rgb(170, 170, 170)}

. selected {background-color: magenta}

. menu {border-style: ridge; visibility: visible; position: absolute}

. hidden {display: none}

. menu_line {border-style: solid; border-width: 1px;

background-color: rgb(170, 170, 170); width: 100%}

< /STYLE>

< SCRIPT src = " popup_menu. js" type = " text/javascript" > < /SCRIPT>

< /HEAD>

< BODY>

<! –Создаем первое меню (изначально оно скрывается)–>

< TABLE id = " menu1" class = " hidden" >

<! –Первый пункт меню–>

< TR id = " menu1_item1" class = " item" onClick = " menu1_item1_click()"

onMouseOver = " menu1_item1. className = 'selected'"

onMouseOut = " menu1_item1. className = 'item'" >

< TD> < IMG src = " icons/1.jpg" > < TD> Первый пункт меню

<! –Второй пункт меню–>

< TR id = " menu1_item2" class = " item" onClick = " menu1_item2_click()"

onMouseOver = " menu1_item2. className = 'selected'"

onMouseOut = " menu1_item2. className = 'item'" >

< TD> < IMG src = " icons/2.jpg" > < TD> Второй пункт меню

<! –Третий пункт меню–>

< TR id = " menu1_item3" class = " item" onClick = " menu1_item3_click()"

onMouseOver = " menu1_item3. className = 'selected'"

onMouseOut = " menu1_item3. className = 'item'" >

< TD> < IMG src = " icons/3.jpg" > < TD> Третий пункт меню

<! –Четвертый пункт меню–>

< TR id = " menu1_item4" class = " item" onClick = " menu1_item4_click()"

onMouseOver = " menu1_item4. className = 'selected'"

onMouseOut = " menu1_item4. className = 'item'" >

< TD> < IMG src = " icons/4.jpg" > < TD> Четвертый пункт меню

<! –Пятый пункт меню–>

< TR id = " menu1_item5" class = " item" onClick = " menu1_item5_click()"

onMouseOver = " menu1_item5. className = 'selected'"

onMouseOut = " menu1_item5. className = 'item'" >

< TD> < IMG src = " icons/5.jpg" > < TD> Пятый пункт меню

< /TABLE>

<! –Создаем второе меню (изначально оно также скрывается)–>

< TABLE id = " menu2" class = " hidden" >

<! –Первый пункт меню–>

< TR id = " menu2_item1" class = " item" onClick = " menu2_item1_click()"

onMouseOver = " menu2_item1. className = 'selected'"

onMouseOut = " menu2_item1. className = 'item'" >

< TD> < IMG src = " balls/ball1. bmp" > < TD> Первый пункт меню

<! –Второй пункт меню–>

< TR id = " menu2_item2" class = " item" onClick = " menu2_item2_click()"

onMouseOver = " menu2_item2. className = 'selected'"

onMouseOut = " menu2_item2. className = 'item'" >

< TD> < IMG src = " balls/ball2. bmp" > < TD> Второй пункт меню

<! –Третий пункт меню–>

< TR id = " menu2_item3" class = " item" onClick = " menu2_item3_click()"

onMouseOver = " menu2_item3. className = 'selected'"

onMouseOut = " menu2_item3. className = 'item'" >

< TD> < IMG src = " balls/ball3. bmp" > < TD> Третий пункт меню

< /TABLE>

<! –Вверху страницы организуется строка меню–>

< TABLE id = " main_menu1" class = " menu_line" >

< COL span = " 2" width = " 150" >

< COL width = " *" >

< TR>

< TD class = " item" id = " main_item1"

onClick = " show_menu(menu1, main_menu1, main_item1)"

onMouseOver = " main_item1. className = 'selected'"

onMouseOut = " main_item1. className = 'item'" > Показать меню1

< TD class = " item" id = " main_item2"

onClick = " show_menu(menu2, main_menu1, main_item2)"

onMouseOver = " main_item2. className = 'selected'"

onMouseOut = " main_item2. className = 'item'" > Показать меню2

< TD> <! -Пустая ячейка, просто занимает место–>

< /TABLE> <! –Далее идет остальное содержимое страницы–>

< P> Текст страницы...

< /BODY>

< /HTML>

Хотя документ практически не содержит текста, являющегося обычным содержимым страницы (ведь мы рассматриваем не наполнение страницы текстов, а меню), он все равно получился довольно объемным. Больше всего места в документе примера 13. 5 занимают описания двух меню. Описание первого меню практически не отличается от рассмотренного ранее в примере 13. 6. Второе же меню, обозначенное как menu2, создано по такому же шаблону.

В таблицу стилей пришлось добавить новый стиль menu_line. После этого очень просто создавать любое количество строк меню на странице. При создании строки меню основной работой является настройка пунктов, которые будут открывать нужные меню (см. определение пунктов в таблице с id, равным main_menu1 в примере 13. 5).

При выборе пунктов из строки меню происходит вызов одной и той же функции сценария. Этой функции в качестве параметров передается ссылка на меню, которое нужно открыть, а также ссылки на строку меню и ссылка на пункт, к которому относится показываемое меню. При рассмотрении сценария станет ясно, зачем это нужно.

Ниже приводится текст сценария из файла popup_menu. js (пример 13. 16).

Пример 13. 16. Содержимое файла popup_menu. js

Функция показывает заданное всплывающее меню под заданным главным пунктом заданного меню

var lastMenu = null; //Предыдущее показанное меню function show_menu(menu, main_menu, item){

if (menu. className == " menu" ){

//Закрываем открытое меню hide_menu();

return;

}

if (lastMenu! = null)

//Скрываем прошлое меню hide_menu();

//Определяем положение меню menu. className = " menu";

menu. style. top = main_menu. offsetTop + main_menu. clientHeight;

menu. style. left = main_menu. offsetLeft + item. offsetLeft;

lastMenu = menu;

}

//Функция скрывает меню, открытое ранее function hide_menu(){

lastMenu. className = " hidden";

lastMenu = null;

}

Далее содержатся функции-обработчики для каждого пункта меню " menu1"

function menu1_item1_click(){

hide_menu();

alert(" Вы выбрали первый пункт в меню1" );

//Другие действия...

}

function menu1_item2_click(){

hide_menu();

alert(" Вы выбрали второй пункт в меню1" );

//Другие действия...

}

function menu1_item3_click(){

hide_menu();

alert(" Вы выбрали третий пункт в меню1" );

//Другие действия...

}

function menu1_item4_click(){

hide_menu();

alert(" Вы выбрали четвертый пункт в меню1" );

//Другие действия...

}

function menu1_item5_click(){

hide_menu();

alert(" Вы выбрали пятый пункт в меню1" );

//Другие действия...

}

Далее содержатся функции-обработчики для каждого пункта меню " menu2"

function menu2_item1_click(){

hide_menu();

alert(" Вы выбрали первый пункт в меню2" );

//Другие действия...

}

function menu2_item2_click(){

hide_menu();

alert(" Вы выбрали второй пункт в меню2" );

//Другие действия...

}

function menu2_item3_click(){

hide_menu();

alert(" Вы выбрали третий пункт в меню2" );

//Другие действия...

}

Первая функция приведенного в примере 13. 16 сценария отвечает за правильное отображение меню. Первый параметр является ссылкой на показываемое меню (таблица в HTML‑ документе).

Второй и третий параметры используются для корректного позиционирования показываемого меню. Перед тем как будет показано новое меню, скрывается то, которое было показано ранее (если оно имеется). Для этого ссылка на отображаемое меню сохраняется в глобальной переменной lastMenu.

Если пользователь открыл меню, но потом передумал выбирать какой‑ либо пункт, он должен иметь возможность закрыть меню. В рассматриваемом примере для закрытия меню пользователь должен повторно выбрать тот же самый пункт строки меню.

Основной объем сценария составляют обработчики выбора пунктов меню. Думаю, принцип именования функций‑ обработчиков в зависимости от принадлежности в меню очевиден. Новой же деталью является наличие в каждом обработчике вызова функции hide_menu(). Этим достигается закрытие меню после выбора одного из его пунктов.

Объект screen

Глобальный объект screen предоставляет набор свойств, которые сообщают сценарию некоторую информацию о возможностях видеосистемы компьютера пользователя.

Свойства объекта screen приводятся в табл. 13. 10.

Таблица 13. 10. Свойства объекта screen

Объект screen может представлять большой интерес для тех, кто заботится о том, чтобы пользователь получал максимум комфорта при просмотре веб‑ страниц независимо, например, от разрешения своего монитора.

Объект event

Глобальный объект event является большим подарком для тех, кто хочет создавать сценарии, досконально отслеживающие и адекватно реагирующие практически на все действия пользователя. Поддержка этого объекта очень сильно отличается в различных браузерах. В этом разделе рассмотрено использование объекта event только для браузера Internet Explorer.

Свойства объекта event

Итак, используя браузер Internet Explorer, получить доступ к объекту event можно, как к свойству объекта window. Можно также указывать event как глобальный объект. Свойства объекта event приведены в табл. 13. 11.

Таблица 13. 11. Свойства объекта event

Примеры использования объекта event

Для демонстрации работы с объектом event рассмотрены два небольших примера, использующие информацию о положении указателя и состоянии кнопок мыши.

В первом примере используется возможность получения координат указателя мыши относительно различных объектов документа. Текст HTML‑ документа примера приведен ниже. Обратите внимание, что благодаря «всплытию» событий отслеживать перемещение мыши можно, только написав обработчик события onMouseMove для элемента BODY (это самый верхний элемент, до которого доходит событие) (пример 13. 17).

Пример 13. 17. Отслеживание положения мыши

<! DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Transitional//EN»>

< HTML>

< HEAD>

< TITLE> Слежение за мышью< /TITLE>

< STYLE type = " text/css" >

. category {font-weight: bold}

. value {font-family: " courier new" }

< /STYLE>

< SCRIPT type = " text/javascript" >

function move(){

//Записываем в элементы страницы текущее значение

//координат указателя мыши scr. innerText = event. screenX + " x" + event. screenY;

wnd. innerText = event. clientX + " x" + event. clientY;

element. innerText = event. offsetX + " x" + event. offsetY;

prnt. innerText = event. x + " x" + event. y;

//Индикация состояния мыши switch (event. button){

case 0: mouse. innerText = " 0|0|0"; break;

case 1: mouse. innerText = " 1|0|0"; break;

case 2: mouse. innerText = " 0|0|1"; break;

case 3: mouse. innerText = " 1|0|1"; break;

case 4: mouse. innerText = " 0|1|0"; break;

case 5: mouse. innerText = " 1|1|0"; break;

case 6: mouse. innerText = " 0|1|1"; break;

case 7: mouse. innerText = " 1|1|1"; break;

}

< /SCRIPT>

< /HEAD>

< BODY onMouseMove = " move()" >

< DIV style = " border-style: solid; border-width: 1px; width: 50%;

position: absolute; left: 50%; background-color: yellow; padding: 2mm" >

< SPAN class = " category" > Экранные координаты: < /SPAN>

< SPAN class = " value" id = " scr" > < /SPAN> < BR>

< SPAN class = " category" > Оконные координаты: < /SPAN>

< SPAN class = " value" id = " wnd" > < /SPAN> < BR>

< SPAN class = " category" > Относительно элемента: < /SPAN>

< SPAN class = " value" id = " element" > < /SPAN> < BR>

< SPAN class = " category" > Относительно родителя: < /SPAN>

< SPAN class = " value" id = " prnt" > < /SPAN>

< P> < SPAN class = " category" > Кнопки мыши (л|c|п): < /SPAN>

< SPAN class = " value" id = " mouse" > < /SPAN>

< /DIV>

< H1> Заголовок< /H1>

< P> Содержимое страницы...

< /BODY>

< /HTML>

Приведенный HTML‑ документ выглядит так, как показано на рис. 13. 7.

Рис. 13. 7. Отслеживание указателя и состояния кнопок мыши

В следующем примере реализовано перетаскивание элементов страницы с помощью мыши. Перетаскивание элемента начинается при нажатии левой кнопки мыши и заканчивается при ее отпускании. Операции начала перемещения, самого перемещения и «бросания» элемента на новом месте реализованы в обработчиках событий элемента BODY (пример 13. 18).

Пример 13. 18. Перетаскивание элементов

<! DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 0 Transitional//EN»>

< HTML>

< HEAD>

< TITLE> Перемещение элементов страницы< /TITLE>

< SCRIPT type = " text/javascript" >

var dX, dY; //Координаты точки, за которую " держат" элемент var element; //Перемещаемый элемент var fMoving = false; //==true, если перемещается элемент

//Функция начинает перемещение элемента function start(){

if (event)

fMoving = true;

element = event. srcElement;

//Сохраняем координаты " хватания" элемента dX = event. offsetX;

dY = event. offsetY;

//Для перемещения элемент должен свободно позиционироваться element. style. position = " absolute";

}

//Функция перемещения элемента function move(){

if (fMoving){

//Установим новые координаты для элемента element. style. pixelLeft = event. x – dX;

element. style. pixelTop = event. y – dY;

}

< /SCRIPT>

< /HEAD>

< BODY onMouseMove=" move()" onMouseDown = " start()"

onMouseUp = " fMoving = false" >

< IMG alt = " Перемещаемый рисунок" width = " 100" height = " 100" >

< P> Перемещаемый текст

< H1> Перемещаемый заголовок< /H1>

< /BODY>

< /HTML>

Документ, текст которого приведен в примере 13. 18, после перетаскивания элементов показан на рис. 13. 8.

Рис. 13. 8. Перетаскивание элементов страницы

Свободно позиционировать можно практически любой элемент страницы, однако наиболее эффектно выглядит перетаскивание изображений. Несмотря на кажущуюся ненужность, перетаскивание элементов может все же оказаться полезным при повышении «дружественности» интерфейса веб‑ страниц. Представьте себе, что вы, например, совершаете покупки в интернет‑ магазине. Понравился товар – перетаскиваете его изображение в свою корзину (определенная область окна). Хотите отказаться от покупки выбранного ранее товара – перетаскиваете его изображение за пределы корзины. Удобно, не так ли?

Глава 14 Создаем настоящий веб-сайт

После достаточно долгого изучения создания HTML‑ документов самих по себе, после изучения каскадных таблиц стилей и того, как добавляются и действуют сценарии в документах, наконец‑ то рассмотрим применение описанных ранее технологий на примере создания веб‑ сайта.

Эта глава посвящается непосредственно разработке и реализации веб‑ сайта. В следующей главе представлена довольно полезная информация, которая может пригодиться при публикации разработанного сайта в Интернете.

14. 1. Содержание сайта

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

Итак, наш информационный ресурс о яблоках будет содержать следующую информацию (кроме стартовой страницы и страницы информации о сайте):

• краткая история развития яблочной культуры;

• информация о пищевых свойствах яблок;

• информация о сборе и хранении яблок;

• информация о сортах яблок;

• рецепты приготовления различных блюд с использованием яблок.

Информация будет по большей части текстовой, а также немного таблиц. Нужно уделить особое внимание представлению рецептов блюд так, чтобы сайт можно было без проблем использовать как справочник по этим рецептам. Кстати, предположительно, что рецепты будут составлять основную долю информации, представленной на сайте.

14. 2. Навигация по сайту

Для навигации по сайту будет использован усовершенствованный вариант всплывающего меню, рассмотренного в предыдущей главе. Меню организуем вверху страницы. Оно будет содержать следующие пункты.

• Главная (переход на главную страницу, файл index. html).

• Информация, содержит следующие пункты:

· История (файл history. html);

· Пищевая ценность яблок (файл values. html);

· Сбор и хранение яблок (файл collectsave. html).

• Сорта яблок, содержит следующие пункты:

· Летние (файл summer. html);

· Осенние (файл autumn. html);

· Зимние (файл winter. html);

· Позднезимние (файл deepwinter. html).

• Рецепты, содержит следующие пункты:

· Салаты с яблоками (файл salat. html);

· Супы с яблоками (файл soup. html);

· Мясные блюда с яблоками (файл meat. html);

· Рыбные блюда с яблоками (файл fish. html).

• О проекте (переход на страницу с информацией о сайте, файл about. html).

Внешний вид меню навигации показан на рис. 14. 1. Реализация меню будет рассмотрена позже.

Рис. 14. 1. Внешний вид меню навигации

14. 3. Расположение файлов

Теперь определимся с тем, какие папки будут созданы и как в них будут располагаться файлы, используемые для сайта. Сразу отметим, что стартовый файл – index. html.

Пусть рассматривается папка, в которой находится сайт. Тогда ее содержимое можно представить следующим списком:

• все HTML‑ файлы сайта (index. html, history. html и т. д. );

• папка с именем css, в которой находятся используемые таблицы стилей;

• папка с именем script, в которой находятся все используемые сценарии;

• папка с именем apples, в которой находятся иллюстрации – картинки яблок (для чего они, см. далее).

В следующем разделе будет пояснено, почему все HTML‑ файлы сайта помещаются в одну папку, а не группируются в папки по своей тематике.

14. 4. Реализация сайта

Шаблон и внешний вид страниц

Итак, внешний вид страниц строится на основе таблиц. Чтобы сделать наполнение страниц сайта как можно менее трудоемким, разработан HTML‑ файл шаблонной страницы (шаблон. html), его содержимое приведено в примере 14. 1.

Пример 14. 1. Содержимое файла шаблон. html

<! DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Transitional//EN»>

< HTML>

< HEAD>

< TITLE> Шаблон< /TITLE>

< META name = " Keywords" content = " яблоки, яблоневая культура,

история, сорта яблок, сорт яблок, рецепты, сбор, хранение" >

< META http-equiv = " Content-Type" content = " text/html;

charset=windows-1251" >

< LINK type = " text/css" href = " css/menu. css" rel = " stylesheet" >

< LINK type = " text/css" href = " css/page. css" rel = " stylesheet" >

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

< /HEAD>

< BODY onClick = " hide_menu(); " >

< A id = " _start" > < /A>

<! –Вставка строки меню–>

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

< TABLE class = " main_table" >

< COL width = " 70" class = " info" >

< COL width = " *" class = " content" >

< TR>

< TD class = " info" >

<! –Здесь содержится дополнительная информация, реклама и др.

Загружается сценарием–>

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

< /TD>

< TD class = " content" >

<! –Далее идет содержимое страницы–>

< /TD>

< /TR>

< TR class = " copyright" >

< TD colspan = " 2" >

<! –Информация об авторском праве и др. Загружается сценарием–>

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

< /TD>

< /TR>

< /TABLE>

< /BODY>

< /HTML>

Чтобы сделать из приведенного в примере 14. 1 файла страницу на конкретную тему, достаточно изменить название страницы, а также добавить на нее содержимое (место вставки содержимого указано HTML‑ комментарием). Страница шаблона выглядит так, как показано на рис. 14. 2.

Рис. 14. 2. Внешний вид страницы шаблона

Как можно заметить, кроме названия страницы, собственно текста страницы, а также расположения и размера главной таблицы, формирующей интерфейс страницы, ключевых слов и элементов, подключающих сценарии и таблицы стилей, в файлах создаваемого сайта нет жестко заданной информации. Это сделано для того, чтобы максимально облегчить последующую модификацию всех страниц сайта: меню, информация об авторских правах, информация в левой колонке формируются соответствующими сценариями при загрузке страниц.

Вообще для большей универсальности можно было бы поручить отдельному сценарию полностью формировать раздел HEAD документа (кроме содержимого элемента TITLE), а еще одному сценарию доверить формирование элемента BODY документа (кроме, естественно, содержимого страницы).

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

Чтобы такого не случилось, можно добавить, например, в начало и конец текста каждой страницы гиперссылку на дополнительную страницу сайта, в которой содержится оглавление в виде гиперссылок. Тогда пользователь «ущербного» браузера сможет перемещаться по страницам сайта. Если же браузер пользователя поддерживает сценарии, то упомянутые гиперссылки целесообразно скрывать, для чего им можно присвоить идентификаторы, например index1, index2, а в один из файлов сценариев вставить следующие строки:

index1. style. display = «none»;

index2. style. display = " none";

Итак, после рассмотрения файла шаблона страниц сайта можно назвать первую причину, по которой все файлы помещаются в одной папке, – это отсутствие необходимости изменения значений атрибутов в тегах < SCRIPT>, < LINK> и < META> каждой новой страницы. Вторая причина станет очевидна при рассмотрении сценария, создающего меню при загрузке страницы.

Реализация меню

Итак, с меню связаны два сценария. Первый находится в файле create_menu. js и записывает в HTML‑ документ строки, создающие таблицы – раскрывающиеся меню и таблицу строки меню. Рассмотрим содержимое этого файла (пример 14. 2).

Пример 14. 2. Содержимое файла create_menu. js

Сценарий в этом файле вставляет в документ определение пунктов меню,

а также определение строки главного меню (выполняется при загрузке)

//Определение меню " Информация"

document. write(" < TABLE id = \" general\" class = \" hidden\" > " );

document. write(" < TR id = \" general_history\" class = \" item\" " );

document. write(" onMouseOver = \" general_history. className = 'selected'\" " );

document. write(" onMouseOut = \" general_history. className = 'item'\" > " );

document. write(" < TD> < A href = \" history. html\" > История< /A> < /TD> " );

document. write(" < /TR> " );

document. write(" < TR id = \" general_values\" class = \" item\" " );

document. write(" onMouseOver = \" general_values. className = 'selected'\" " );

document. write(" onMouseOut = \" general_values. className = 'item'\" > " );

document. write(" < TD> < A href = \" values. html\" > Пищевая ценность яблок< /A> < /TD> " );

document. write(" < /TR> " );

document. write(" < TR id = \" general_collectsave\" class = \" item\" " );

document. write(" onMouseOver = \" general_collectsave. className = 'selected'\" " );

document. write(" onMouseOut = \" general_collectsave. className = 'item'\" > " );

document. write(" < TD> < A href = \" collectsave. html\" > Сбор и хранение яблок< /A> < /TD> " );

document. write(" < /TR> " );

document. write(" < /TABLE> " );

//Определение меню «Сорта яблок»

document. write(" < TABLE id = \" types\" class = \" hidden\" > " );

document. write(" < TR id = \" types_summer\" class = \" item\" " );

document. write(" onMouseOver = \" types_summer. className = 'selected'\" " );

document. write(" onMouseOut = \" types_summer. className = 'item'\" > " );

document. write(" < TD> < A href = \" summer. html\" > Летние< /A> < /TD> " );

document. write(" < /TR> " );

document. write(" < TR id = \" types_autumn\" class = \" item\" " );

document. write(" onMouseOver = \" types_autumn. className = 'selected'\" " );

document. write(" onMouseOut = \" types_autumn. className = 'item'\" > " );

document. write(" < TD> < A href = \" autumn. html\" > Осенние< /A> < /TD> " );

document. write(" < /TR> " );

document. write(" < TR id = \" types_winter\" class = \" item\" " );

document. write(" onMouseOver = \" types_winter. className = 'selected'\" " );

document. write(" onMouseOut = \" types_winter. className = 'item'\" > " );

document. write(" < TD> < A href = \" winter. html\" > Зимние< /A> < /TD> " );

document. write(" < /TR> " );

document. write(" < TR id = \" types_deepwinter\" class = \" item\" " );

document. write(" onMouseOver = \" types_deepwinter. className = 'selected'\" " );

document. write(" onMouseOut = \" types_deepwinter. className = 'item'\" > " );

document. write(" < TD> < A href = \" deepwinter. html\" > Позднезимние< /A> < /TD> " );

document. write(" < /TR> " );

document. write(" < /TABLE> " );

//Определение меню «Рецепты»

document. write(" < TABLE id = \" recepts\" class = \" hidden\" > " );

document. write(" < TR id = \" recepts_salat\" class = \" item\" " );

document. write(" onMouseOver = \" recepts_salat. className = 'selected'\" " );

document. write(" onMouseOut = \" recepts_salat. className = 'item'\" > " );

document. write(" < TD> < A href = \" salat. html\" > Салаты с яблоками< /A> < /TD> " );

document. write(" < /TR> " );

document. write(" < TR id = \" recepts_soup\" class = \" item\" " );

document. write(" onMouseOver = \" recepts_soup. className = 'selected'\" " );

document. write(" onMouseOut = \" recepts_soup. className = 'item'\" > " );

document. write(" < TD> < A href = \" soup. html\" > Супы с яблоками< /A> < /TD> " );

document. write(" < /TR> " );

document. write(" < TR id = \" recepts_meat\" class = \" item\" " );

document. write(" onMouseOver = \" recepts_meat. className = 'selected'\" " );

document. write(" onMouseOut = \" recepts_meat. className = 'item'\" > " );

document. write(" < TD> < A href = \" meat. html\" > Мясные блюда с яблоками< /A> < /TD> " );

document. write(" < /TR> " );

document. write(" < TR id = \" recepts_fish\" class = \" item\" " );

document. write(" onMouseOver = \" recepts_fish. className = 'selected'\" " );

document. write(" onMouseOut = \" recepts_fish. className = 'item'\" > " );

document. write(" < TD> < A href = \" fish. html\" > Рыбные блюда с яблоками< /A> < /TD> " );

document. write(" < /TR> " );

document. write(" < /TABLE> " );

//Определение строки меню

document. write(" < TABLE id = \" main_menu1\" class = \" menu_line\" > " );

document. write(" < COL width = \" 70\" > " );

document. write(" < COL width = \" 100\" > " );

document. write(" < COL width = \" 80\" > " );

document. write(" < COL width = \" *\" > " );

document. write(" < COL width = \" 100\" > " );

document. write(" < TR> " );

document. write(" < TD class = \" main_item\" id = \" main_index\" " );

document. write(" onMouseOver = \" main_index. className = 'main_selected'\" " );

document. write(" onMouseOut = \" main_index. className = 'main_item'\" > " );

document. write(" < A href = \" index. html\" class = \" main_href\" > Главная< /A> " );

document. write(" < /TD> " );

document. write(" < TD class = \" main_item\" id = \" main_general\" " );

document. write(" onClick = \" show_menu(general, main_menu1, main_general)\" " );

document. write(" onMouseOver = \" main_general. className = 'main_selected'\" " );

document. write(" onMouseOut = \" main_general. className = 'main_item'\" > " );

document. write(" < A href = \" general\" class = \" main_href\" " );

document. write(" onClick = \" event. returnValue = false\" > " );

document. write(" Информация< /A> " );

document. write(" < /TD> " );

document. write(" < TD class = \" main_item\" id = \" main_types\" " );

document. write(" onClick = \" show_menu(types, main_menu1, main_types)\" " );

document. write(" onMouseOver = \" main_types. className = 'main_selected'\" " );

document. write(" onMouseOut = \" main_types. className = 'main_item'\" > " );

document. write(" < A href = \" types\" class = \" main_href\" onClick = \" " );

document. write(" event. returnValue = false\" > " );

document. write(" Сорта яблок< /A> " );

document. write(" < /TD> " );

document. write(" < TD class = \" main_item\" id = \" main_recepts\" " );

document. write(" onClick = \" show_menu(recepts, main_menu1, main_recepts)\" " );

document. write(" onMouseOver = \" main_recepts. className = 'main_selected'\" " );

document. write(" onMouseOut = \" main_recepts. className = 'main_item'\" > " );

document. write(" < A href = \" recepts\" class = \" main_href\" onClick = \" " );

document. write(" event. returnValue = false\" > " );

document. write(" Рецепты< /A> " );

document. write(" < /TD> " );

document. write(" < TD> < /TD> " );

document. write(" < TD class = \" main_item\" id = \" main_about\" " );

document. write(" onMouseOver = \" main_about. className = 'main_selected'\" " );

document. write(" onMouseOut = \" main_about. className = 'main_item'\" > " );

document. write(" < A href = \" about. html\" class = \" main_href\" > О проекте< /A> " );

document. write(" < /TD> " );

document. write(" < /TR> " );

document. write(" < /TABLE> " );

Приведенный пример является самым объемным в этой книге, однако его суть довольно проста. Вначале в документ записывается HTML‑ код создания трех таблиц, соответствующих раскрывающимся меню (идентификаторы таблиц: general, types, recepts). Четвертая таблица, добавляемая в документ сценарием, является строкой меню. Начнем рассмотрение именно с нее.

Для начала перепишем HTML‑ код, описывающий строку меню, в более наглядной форме (то есть рассмотрим создаваемую сценарием таблицу) (пример 14. 3).

Пример 14. 3. Таблица строки меню

< TABLE id = «main_menu1» class = «menu_line»>

< COL width = " 70" >

< COL width = " 100" >

< COL width = " 80" >

< COL width = " *" >

< COL width = " 100" >

< TR>

< TD class = " main_item" id = " main_index"

onMouseOver = " main_index. className = 'main_selected'"

onMouseOut = " main_index. className = 'main_item'" >

< A href = " index. html" class = " main_href" > Главная< /A>

< /TD>

< TD class = " main_item" id = " main_general"

onClick = " show_menu(general, main_menu1, main_general)"

onMouseOver = " main_general. className = 'main_selected'"

onMouseOut = " main_general. className = 'main_item'" >

< A href = " general" class = " main_href"

onClick = " event. returnValue = false" >

Информация

< /A>

< /TD>

< TD class = " main_item" id = " main_types"

onClick = " show_menu(types, main_menu1, main_types)"

onMouseOver = " main_types. className = 'main_selected'"

onMouseOut = " main_types. className = 'main_item'" >

< A href = " types" class = " main_href" onClick = "

event. returnValue = false" >

Сорта яблок

< /A>

< /TD>

< TD class = " main_item" id = " main_recepts"

onClick = " show_menu(recepts, main_menu1, main_recepts)"

onMouseOver = " main_recepts. className = 'main_selected'"

onMouseOut = " main_recepts. className = 'main_item'" >

< A href = " recepts" class = " main_href" onClick = "

event. returnValue = false" >

Рецепты

< /A>

< /TD>

< TD> < /TD> <! –Эта ячейка просто занимает место–>

< TD class = " main_item" id = " main_about"

onMouseOver = " main_about. className = 'main_selected'"

onMouseOut = " main_about. className = 'main_item'" >

< A href = " about. html" class = " main_href" > О проекте< /A>

< /TD>

< /TR>

< /TABLE>

Как можно увидеть, строка меню во многом аналогична той, что была создана в предыдущей главе. Исключением является использование гиперссылок вместо обработки событий onClick для пунктов Главная и О проекте. Конечно, можно было бы осуществлять переход к страницам для этих пунктов при обработке события onClick с использованием объекта location, но зачем? Ведь для простого перехода к другой странице проще использовать стандартную обработку выбора пользователем гиперссылки. Да и к тому же не нужно заботиться о форме указателя, когда он находится над текстом пункта меню.

Обратите также внимание, что для остальных гиперссылок (пункты меню Информация, Сорта, Рецепты) выполнение действия по умолчанию не используется.

Подсветка выделенных пунктов меню осуществляется за счет назначения ячейкам таблицы соответствующего стилевого класса при обработке событий onMouseOver (ячейка выделяется, включается подсветка) и onMouseOut (подсветка убирается).

При выборе одного из пунктов Информация, Сорта, Рецепты обработчиком события onClick вызывается функция show_menu(), показывающая меню возле выбранного пункта. Эта функция вместе с функцией hide_menu() находится в файле popup_menu. js. Они приводятся в примере 14. 4.

Пример 14. 4. Сценарий, показывающий и скрывающий всплывающее меню

var lastMenu = null; //Прошлое показанное меню

//Функция показывает меню function show_menu(menu, main_menu, item){

if (menu. className == " menu" ){

//Закрываем открытое меню hide_menu();

return;

}

//Скрываем прошлое меню hide_menu();

//Определяем положение меню menu. className = " menu";

menu. style. top = main_menu. offsetTop + main_menu. clientHeight;

menu. style. left = main_menu. offsetLeft + item. offsetLeft;

lastMenu = menu;

//Сделаем так, чтобы до BODY событие onClick не дошло event. cancelBubble = true;

}

//Функция скрывает меню, открытое ранее

function hide_menu(){

if (lastMenu! = null){

lastMenu. className = " hidden";

lastMenu = null;

}

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

< BODY onClick = «hide_menu(); »>

Теперь рассмотрим, как реализованы раскрывающиеся меню. Они реализуются даже проще, чем сама строка меню. Как и в примерах предыдущей главы, раскрывающиеся меню основаны на использовании свободно позиционируемых таблиц (хотя это можно сделать на основе любого свободно позиционируемого элемента, например DIV, причем внешний вид такого меню будет ничуть не хуже). Каждая строка таблицы представляет собой отдельный пункт меню. Ниже приводится HTML‑ код, добавляемый сценарием для создания раскрывающегося меню Информация (это меню самое маленькое и поэтому его реализацию удобнее изучать) (пример 14. 5).

Пример 14. 5. Таблица, соответствующая меню Информация

< TABLE id = «general» class = «hidden»>

< TR id = " general_history" class = " item"

onMouseOver = " general_history. className = 'selected'"

onMouseOut = " general_history. className = 'item'" >

< TD> < A href = " history. html" > История< /A> < /TD>

< /TR>

< TR id = " general_values" class = " item"

onMouseOver = " general_values. className = 'selected'"

onMouseOut = " general_values. className = 'item'" >

< TD> < A href = " values. html" > Пищевая ценность яблок< /A> < /TD>

< /TR>

< TR id = " general_collectsave" class = " item"

onMouseOver = " general_collectsave. className = 'selected'"

onMouseOut = " general_collectsave. className = 'item'" >

< TD> < A href = " collectsave. html" > Сбор и хранение яблок< /A> < /TD>

< /TR>

< /TABLE>

При просмотре текста примера 14. 5 можно увидеть, что текст пунктов меню, как и текст пунктов строки меню, заключен в теги < A> и < /A>. Это сделано для упрощения, ведь, кроме навигации (основная функция гиперссылок), других функций на меню не возлагается.

Подсветка выделенных пунктов меню осуществляется за счет изменения их стилевого класса при обработке событий onMouseOver и onMouseOut.

Следует отметить один недостаток использованной реализации меню: хотя и подсвечивается вся ячейка таблицы, «срабатывает» пункт меню только при щелчке кнопкой мыши на тексте гиперссылки. Это потому, что внутрь тегов < A> и < /A> заключен только текст, а не вся ячейка таблицы. Это сделано лишь для того, чтобы не усложнять еще больше сценарий, создающий меню. Вы можете устранить этот недостаток самостоятельно, изменив фрагменты типа

< TD> < A href = «history. html»> История< /A> < /TD>

на

< A href = «history. html»> < TD> < A href = «history. html»> История< /A> < /TD> < /A>

Если же просто поместить внутрь элемента A ячейку (не помещая еще и текст), то меню тоже будет работать, но форма указателя над текстом будет уже не та (текстовый I‑ указатель).

Разворачивающиеся абзацы

Как было сказано выше, особое внимание нужно уделить представлению на страницах рецептов (если не забыли, сайт по большей части кулинарной тематики). Поэтому рассмотрим, как можно повысить удобство при работе со списком рецептов, который планируется разместить на сайте.

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

Собственно так и реализовано представление рецептов на сайте. Фрагмент HTML‑ документа, в котором используется описанный подход (разворачивающиеся абзацы), приведен в примере 14. 6.

Пример 14. 6. Использование разворачивающихся абзацев

...

< TD class = " content" >

<! –Далее идет содержимое страницы–>

< P> Текст страницы...

< P class = " exp" onClick = " expand(recept1_body)" >

< A href = " expand" class = " exp_ref"

onClick = " event. returnValue = false; " >

Рецепт 1

< /A>

< DIV class = " exp_hidden" id = " recept1_body" >

< SPAN class = " process" >

Порядок приготовления блюда

< /SPAN>

< P class = " products" > Состав блюда

< /DIV>

< P class = " exp" onClick = " expand(recept2_body)" >

< A href = " expand" class = " exp_ref"

onClick = " event. returnValue = false; " >

Рецепт 2

< /A>

< DIV class = " exp_hidden" id = " recept2_body" >

< SPAN class = " process" >

Порядок приготовления блюда

< /SPAN>

< P class = " products" > Состав блюда

< /DIV>

< P> Прочий текст страницы...

< /TD>

...

В приведенном выше примере, помимо текста, к содержимому страницы добавлены два рецепта (см. элементы, имеющие стилевой класс exp, разворачиваемая часть этих элементов имеет стилевой класс exp_hidden, когда она скрыта, и класс expboby, когда показана).

Страница, фрагмент которой приведен в примере 14. 6, выглядит так, как показано на рис. 14. 3.

Рис. 14. 3. Представление рецептов

Работоспособность используемого способа представления рецептов обеспечивает небольшой сценарий (функция), находящийся там же, где и сценарий, отвечающий за всплывающее меню, то есть в файле popup_menu. js (пример 14. 7).

Пример 14. 7. Сценарий, реализующий работу разворачивающихся абзацев

//Функция разворачивает или сворачивает абзац, на котором щелкнул

//пользователь (если, конечно, абзац для этого предназначен)

function expand(element){

if (element. className == " exp_hidden" ){

//Показываем абзац element. className = " expbody";

}

else if (element. className == " expbody" ){

//Скрываем элемент element. className = " exp_hidden";

}

Приведенная в примере функция expand() скрывает или показывает элемент страницы, ссылка на который передана ей в качестве параметра, путем изменения его стилевого класса (описание используемых стилевых таблиц приведено далее).

Прочие сценарии

Кроме рассмотренных сценариев, обеспечивающих создание, работоспособность меню и разворачивающихся абзацев, каждая страница использует еще два сценария для заполнения секции дополнительной информации (ячейка, образующая левый ряд основной таблицы) и информации об авторских правах (нижняя часть страницы, образованная слиянием ячеек последней строки основной таблицы).

Первый из указанных сценариев находится в файле load_info. js и выглядит следующим образом (пример 14. 8).

Пример 14. 8. Содержимое файла load_info. js

Сценарий в этом файле загружает картинки яблок

и рекламные сообщения

//Функция генерации случайного значения (целого)

function rand(min, max){

return Math. floor(Math. random()*(max-min)+min);

}

//Загрузка изображения document. write(" < TABLE width = \" 100%\" height = \" 100%\" > " );

document. write(" < TR> < TD> < IMG id = \" apple_image\" width = \" 100%\" " );

document. write(" src = \" apples/" + rand(1, 14. 9) + ".jpg\" > < /TD> < /TR> " );

//Типа загрузка рекламы...

document. write(" < TR> < TD> Здесь могла быть Ваша реклама< /TD> < /TR> " );

document. write(" < /TABLE> " );

При анализе текста приведенного сценария можно увидеть, что сценарием создается таблица, занимающая все доступное пространство (имеется в виду левая часть страницы). В ячейки этой таблицы и добавляются различные сведения. В данном случае это одна из 14 картинок с изображением яблок в папке apples, а также надпись.

Еще один сценарий используется для заполнения ячейки в нижней части страницы сведениями об авторских правах. Он записан в файле copyright. js и состоит из одной‑ единственной строки:

Используемые таблицы стилей

В двух CSS‑ файлах помещены используемые таблицы стилей. В файле page. css находится таблица стилей, используемая для оформления текста страниц (плюс оформление основной таблицы страниц) (пример 14. 9).

Пример 14. 9. Содержимое файла page. css

Определения стилей для таблицы, форматирующей страницу

TABLE. main_table {width: 100%; border-style: none;

background-color: green}

COL. info {width: 100px; background-color: rgb(180, 255, 200)}

COL. content {background-color: rgb(200, 255, 200)}

TR. copyright {background-color: green; color: white; text-align: right;

padding: 5; font-size: 3mm}

Стили рецептов

. process {font-size: 85%}

. products {font-style: italic; font-size: 85%}

Прочие стили разметки

H1 {text-align: center}

В файле menu. css находится таблица стилей, используемая для оформления пунктов меню и рецептов (пример 14. 10).

Пример 14. 10. Содержимое файла menu. css

Стиль строки меню и ее пунктов

. menu_line {border-style: none; background-color: green;

width: 100%; text-align: center}

. main_item {background-color: green}

. main_selected {background-color: magenta}

A. main_href {color: rgb(230, 230, 230); text-decoration: none;

font-family: " times new roman" }

Стиль пунктов меню

. item {background-color: rgb(230, 230, 230)}

. selected {background-color: magenta}

A. main_href {}

Стили отображаемого и спрятанного меню

. menu {border-style: solid; border-width: 1px;

visibility: visible; position: absolute;

background-color: rgb(230, 230, 230); border-color: black}

. hidden {display: none}

Определение стилей для разворачиваемых элементов exp – класс элемента, при щелчке кнопкой мыши на котором будет показан соответствующий элемент класса expbody

. exp {background-color: rgb(150, 255, 200)}

. exp_ref {text-decoration: none; font-weight: bold}

. expbody {display: block; background-color: rgb(150, 255, 150)}

. exp_hidden {display: none}

В приведенных таблицах стилей использовано небольшое количество настроек, чтобы слишком не увеличивать размер таблиц.

14. 5. Примеры работы сайта

При открытии сайта пользователь попадает на главную (стартовую) страницу (файл index. html), показанную на рис. 14. 4.

Рис. 14. 4. Главная страница сайта

Реализованная страница истории яблок особого интереса не представляет. Обратим внимание, как выглядит страница с рецептами, ведь там дополнительно используются реализованные нами разворачивающиеся абзацы. Итак, внешний вид страницы с рецептами приведен на рис. 14. 5 (начало страницы).

Рис. 14. 5. Страница с рецептами

Сами рецепты выглядят так, как показано на рис. 14. 6.

Рис. 14. 6. Страница с рецептами (сами рецепты)

Ну вот, мы выполнили практически все необходимое для того, чтобы можно было поместить сайт в сеть Интернет (правда, содержание сайта пока неполное). Как раз этому посвящена следующая – последняя – глава книги.

Глава 15 Публикация сайта в Интернете

После того как пройден путь от изучения основ HTML до создания собственного сайта, наступило время выйти в большой мир, то есть опубликовать сайт в Интернете. Для этого нужно узнать еще совсем немного (на первый взгляд): как, где помещается сайт в Сети.

15. 1. Ищем место для сайта

Чтобы опубликовать сайт в Интернете, нужно сначала найти для него место. В Сети существует ряд серверов, предназначенных как раз для размещения на них сайтов. Услуга предоставления места на таком сервере называется хостингом.

Существует большое количество компаний, осуществляющих как платный, так и бесплатный хостинг. Оба вида хостинга имеют свои преимущества и недостатки. Основными недостатками бесплатного хостинга зачастую являются следующие:

• ограничение на объем данных сайта (часто, но не всегда);

• отсутствие поддержки полезных сервисов и сценариев, выполняемых на сервере (например, PHP‑ сценариев);

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

• отсутствие гарантий постоянной готовности сервера, то есть вероятность (и иногда она бывает высокой), что ваш сайт будет недоступен пользователям Сети;

• более «слабое» оборудование по сравнению с серверами платного хостинга.

Кроме всего перечисленного, при пользовании бесплатным хостингом часто приходится расплачиваться местом страницы, отведенным под рекламу (баннеры, ссылки и пр. ), ведь хостеру нужно как‑ то зарабатывать деньги.

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

Чтобы получить информацию, где и на каких условиях вы можете разместить свой сайт, достаточно ввести слово «хостинг» или что‑ то подобное в строке поиска любого поисковика, например Google (www. google. com).

Не стоит оставлять без внимания и тот факт, что возможность размещения для зарегистрированных пользователей личного сайта на своем сервере предоставляют некоторые интернет‑ порталы. Для таких сайтов бесплатно выделяется очень небольшой объем (5–10 Мбайт), но зато вероятность удаления сайта не более чем вероятность удаления учетной записи пользователя портала. Только следует помнить, что и здесь действует законодательство о цензуре. Для поделок начинающих мастеров такой хостинг подходит как нельзя лучше. Тем более что, помимо сайта, вы будете располагать еще и почтовым ящиком.

Для размещения созданного в предыдущей главе сайта воспользуемся услугами как раз интернет‑ портала, а конкретно – интернет‑ портала www. tut. by. Пользователю этого портала предоставляется 50 Мбайт на почтовый ящик и 5 Мбайт на личный сайт. Ну что же, для начала вполне хватит. К тому же здесь вполне снисходительно относятся к пользователям в отношении обязательного размещения рекламы на личном сайте – ее нет.

15. 2. Доменное имя для сайта

Сайт мало просто разместить на сервере, доступном по Интернету. Его же нужно как‑ то идентифицировать. Для сайта нужно заполучить доменное имя. Что же это такое?

Система доменных имен возникла как средство повышения удобства работы с сетью пользователя. Эта система первоначально обеспечивала возможность назначения компьютерам Сети символьных имен, которые преобразовываются в IP‑ адреса серверами службы DNS. Сеть WWW позволяет не только определять адреса компьютеров Сети при использовании доменных имен, но и получить доступ к опубликованным на этих компьютерах ресурсам.

Рассмотрим, из чего состоит доменное имя на примере имени www. some. site. mysoft. com. Здесь www – это просто обозначение, что адрес в сети WWW. Итак, собственно доменное имя имеет вид: some. site. mysoft. com. Читать адрес нужно справа налево. При таком порядке разбора адреса получим следующую последовательность адресов доменов и поддоменов, которым принадлежит сайт с указанным адресом.

• com – домен первого уровня, самый верхний. В домены первого уровня входят ресурсы, объединенные по территориальному признаку (например, домены ru, by, de и т. д. ) и типам организаций, использующих этот домен (например, com – коммерческие организации, gov – правительственные организации, edu – образовательные учреждения). Доменов верхнего уровня немного, и заполучить такое имя нельзя.

• mysoft. com – доменное имя второго уровня (поддомен домена com). Получить такое имя можно, но за плату. Оптимальный выбор для организаций.

• site. mysoft. com – доменное имя третьего уровня. Обычно такие имена могут бесплатно предоставляться пользователям бесплатного хостинга.

• some. site. mysoft. com – доменное имя четвертого уровня, в нашем примере идентифицирующее сайт.

Полным именем сайта будет some. site. mysoft. com/index. html, где последняя часть указывает, какой именно HTML‑ файл открывать. Однако серверы, на которых размещаются ресурсы, предусматривают автоматическое преобразование к таким адресам. Могут различаться только имена страниц, открываемых по умолчанию.

Теперь вернемся к публикации сайта о яблоках. Используемый портал tut. by предоставляет для личных сайтов довольно короткие доменные адреса четвертого уровня вида: < имя_пользователя>. at. tut. by. Значит, сайт будет иметь имя applesite. at. tut. by.

15. 3. Проблема стартовой страницы

Рассмотрим небольшой вопрос, связанный с различными именами стартовых страниц сайтов на различных серверах. Так, используемый домен at. tut. by предъявляет требование: стартовая страница должна иметь имя default. html. В соответствии с этим требованием стартовую страницу можно переименовать с index. html на default. html, а можно создать стартовую страницу‑ редиректор, используя элемент META следующим образом (пример 15. 1).

Пример 15. 1. Страница-редиректор

< HTML>

< HEAD>

< META http-equiv = " refresh" content = " 0; url = index. html" >

< /HEAD>

< /HTML>

Приведенный в примере HTML‑ документ нужно назвать default. html и скопировать вместе с остальными страницами сайта (как это делается, рассказано далее). При открытии файла default. html браузер пользователя сразу перейдет к файлу index. html.

15. 4. Администрирование сайта

Итак, непосредственно администрирование сайта (копирование и изменение информации на сервере) может осуществляться как минимум двумя путями. Первый из них – наименее удобный, пригодный для небольших изменений сайта (например, для закачки нового файла) – это применение форм, своеобразных файловых менеджеров, предоставляемых хостерами. Второй способ – куда более мощный и удобный – использование файловых менеджеров, поддерживающих соединение по протоколу FTP (Проводник Windows, FAR Manager и т. д. ). Рассмотрим оба способа.

Использование форм

Этот вопрос удобнее рассматривать на конкретном примере, в данном случае на примере at. tut. by. Итак, чтобы приступить к редактированию сайта, нужно войти под зарегистрированным ранее именем и перейти по ссылке Личный сайт. Здесь вы увидите форму, похожую на ту, что приводится на рис. 15. 1.

Рис. 15. 1. Форма администрирования сайта

В частности, на рисунке приведена форма администрирования сайта applesite. at. tut. by. Пользоваться этой формой довольно легко, пока не нужно создавать большое количество каталогов или закачивать на сервер много файлов. Для этого более пригоден способ, описанный в следующем разделе.

Использование Проводника Windows

Чтобы получить возможность управлять файлами и папками сайта прямо из Проводника, достаточно подключиться к соответствующему FTP‑ серверу. Для tut. by этим сервером является ftp. tut. by.

Чтобы подключиться к FTP‑ серверу, в адресной строке вводится строка вида:

ftp: //< имя_пользователя>: < пароль> @ftp. tut. by

Пароль можно прямо в строке адреса и не вводить, тогда его нужно будет ввести в окне, показанном на рис. 15. 2 (или подобном).

Рис. 15. 2. Окно авторизации пользователя FTP-сервера

В данном случае показано окно, которое появилось при подключении с использованием строки ftp: //applesite@ftp. tut. by

После того как авторизация произведена, получаем в свое распоряжение окно Проводника, в котором позволено производить все необходимые операции над файлами и папками сайта (рис. 15. 3).

Рис. 15. 3. Папка сайта в Проводнике

Показанное на рис. 15. 3 окно использовалось для помещения файлов сайта на сервер. Ненужность ручного создания папок и копирования каждого файла в отдельности при этом сэкономила много, прежде всего, оплачиваемого времени подключения к Интернету.

После того как файлы сайта помещены на сервер, можно открыть браузер, ввести в строке адреса applesite. at. tut. by и посмотреть, как сайт открывается уже непосредственно с сервера в Интернете (рис. 15. 4).

Рис. 15. 4. Сайт при загрузке с сервера

Ну вот, собственно, и все, что необходимо для публикации сайта. Теперь он стал доступен многочисленной аудитории Интернета.

15. 5. Увеличение посещаемости сайта

Здесь мы кратко рассмотрим основные направления увеличения посещаемости сайтов. На самом деле эта тема очень объемна. Существует множество методов, как честных так и не очень, направленных на рост посещаемости сайта. Раскруткой сайтов занимается множество компаний, да и качественной информации в Интернете на этот счет очень много, поэтому ограничимся общими замечаниями на эту тему.

Итак, после публикации сайта в Сети вы можете обмениваться рекламой с авторами других сайтов. Это может представлять собой простой обмен гиперссылками (вы размещаете ссылку на другой сайт, и на нем размещают ссылку на ваш сайт). Даже тут существует ряд тонкостей, которые нужно знать, чтобы быть уверенным в честном сотрудничестве с вами других авторов.

Кроме того, разновидностью обмена рекламной информацией можно назвать и участие вашего сайта в баннерных сетях. Суть обмена баннерами (графическими ссылками) в следующем: ваш баннер показывается на других сайтах в обмен на показ баннеров других сайтов на вашем сайте. Можно также купить показы собственных баннеров на популярных сайтах у рекламных агентств.

Не забывайте рассказывать о новом ресурсе всем заинтересованным и незаинтересованным лицам (вдруг им станет интересно). Интерес могут представлять публикации сайта на досках объявлений Интернета, форумах, чатах и т. д.

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

Современные поисковые системы производят автоматическое индексирование сайтов специальными программами (так называемые роботы). При этом очень часто может анализироваться не только содержимое элементов META, но и содержимое самого сайта. Кстати, созданный в предыдущей главе сайт несколько неудачен для подобного индексирования: гиперссылки создаются сценарием, что делает невозможном перемещение по страницам при индексировании сайта. Способ решения проблемы с гиперссылками уже рассмотрен в предыдущей главе. Можно также постараться сформировать текст главной страницы сайта таким образом, чтобы в нем упоминались все ключевые слова (главное, чтобы получился нормальный текст, а не «масло масляное»).

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

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

Итак, на главной странице большинства поисковиков (например, yandex. ru, rambler. ru, tut. by, aport. ru, google. com) есть ссылка типа Добавить ресурс. При переходе по такой ссылке вам будет предложено заполнить форму с информацией о вашем сайте. Если используется стартовая страница‑ редиректор, то лучше все‑ таки указать путь к настоящей стартовой странице, чтобы не возникло проблем при индексировании. В данном случае этот адрес имеет вид:

applesile. at. tut. by/index. html

Возможно, что при заполнении формы вам будет предложено составить список ключевых слов, характеризующих ваш сайт (некоторые поисковики используют такой список, а не содержимое элемента META с ключевыми словами). Время, в течение которого будет рассмотрена поданная вами заявка на регистрацию, зависит от конкретной поисковой системы. Кстати, ручная регистрация сайта в поисковой системе – хороший способ проверить, не найден ли сайт роботом поисковика раньше. В таких случаях после заполнения формы вас обычно предупредят, что заданный сайт уже обработан или уже найден и будет в скором времени обработан.

Заключение

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

При изложении я старался придерживаться стандарта языка HTML 4. 01. Однако для того чтобы создавать полностью переносимые сайты, нужно знать не только HTML на уровне стандарта организации W3C. Дело в том, что браузеры различных производителей могут не только по‑ разному реализовывать поведение стандартных атрибутов HTML‑ элементов, но и предоставлять множество дополнительных возможностей, поддержка которых браузерами других производителей отнюдь не гарантирована.

По этой причине крайне полезно знать об отличиях, особенностях браузеров различных производителей. Для этого нужно изучать, так сказать, первоисточники – документацию самих производителей браузеров. Вот несколько ссылок, по которым можно найти много полезного:

• http: //msdn. microsoft. com/ie/ – документация к браузеру Microsoft Internet Explorer, информация об HTML и не только;

• http: //opera. com/docs/ – документация к браузеру Opera.

Кроме того, в Сети можно найти огромное количество русскоязычных ресурсов, посвященных веб‑ дизайну (не только HTML, но и многим современным технологиям, его использующим).

И конечно же, нужно помнить про официальный сайт W3C: http: //www. w3. org. Здесь есть многое, практически все о современных интернет‑ технологиях.

Полезной в качестве справочника является официальная спецификация HTML, которую можно найти по адресу http: //www. w3. org/TR/1999/REC-html401-19991224/. Один из весьма приятно оформленных русскоязычных вариантов этого документа можно найти по адресу http: //gigo. ru/doc/html/book/.

На этом я с вами прощаюсь. Творческих вам успехов!

Приложение 1 Именованные ссылки на символы

В табл. П1. 1 приведен список именованных ссылок на символы.

Таблица П1. 1. Список ссылок на символы (стандарт ISO8859–1)

Полный список греческих букв, а также математические и прочие символы приведены в табл. П1. 2.

Таблица П1. 2. Греческие буквы, математические и прочие символы

Приложение 2 Свойства CSS

Ввиду большого количества свойств их список в главах книги полностью не приводится. Здесь представлен более полный список свойств, доступных в таблицах стилей. Свойства задания цвета текста и фона представлены в табл. П2. 1. Свойства для настройки рамок, отступов и полей приведены в табл. П2. 2. Свойства отображения текста приведены в табл. П2. 3. Свойства, применяемые к спискам, приведены в табл. П2. 4. Наконец, свойства позиционирования, размера и видимости элементов находятся в табл. П2. 5.

Таблица П2. 1. Цвет и фон

Таблица П2. 2. Рамки, поля и отступы

Таблица П2. 3. Свойства отображения текста

Таблица П2. 4. Списки

Таблица П2. 5 Свойства позиционирования, размера и видимости элементов страницы

Приложение 3 Названия основных цветов

В табл. П3. 1 приведен список названий основных цветов и их численные значения.

Таблица П3. 1. Название основных цветов и их RGB-значения

Оглавление

 Введение

 Глава 1 Введение в HTML

 1. 1. Краткая история HTML

 1. 2. Базовые понятия HTML

 Элементы

 Атрибуты

 Вложенные элементы

 Блочные и встроенные элементы

 1. 3. Просмотр HTML-документа

 1. 4. Универсальный идентификатор ресурса URI

 Глава 2 Структура HTML-документа

 2. 1. Информация о версии HTML

 2. 2. Элемент HTML

 2. 3. Заголовок

 Элемент HEAD

 Элемент TITLE

 Элемент BASE

 Метаданные

 2. 4. Тело HTML-документа

 Глава 3 Текст

 3. 1. Особенности ввода текста

 3. 2. Форматирование текста

 Задание начертания текста

 Задание шрифта текста

 Задание выравнивания текста

 Сохранение авторского форматирования

 Запрет разрыва строки

 Переносы

 Обтекание текстом нетекстовых элементов

 3. 3. Структурирование текста

 Разбиение на абзацы

 Заголовки

 Задание типов фраз

 Цитаты

 Указание изменений в документе

 Контактная информация

 3. 4. Комментарии в HTML-коде

 Глава 4 Списки

 4. 1. Маркированные списки

 4. 2. Нумерованные списки

 4. 3. Списки определений

 4. 4. Создание вложенных списков

 Глава 5 Гиперссылки

 5. 1. Простой переход к ресурсам

 Навигация между HTML-документами

 Загрузка файлов

 Ссылки на другие службы

 5. 2. Навигация в пределах документа

 5. 3. Прочие атрибуты гиперссылок

 Глава 6 Линейки, изображения, внедренные объекты

 6. 1. Линейки

 6. 2. Изображения

 Изображения-гиперссылки

 Изображения-карты

 6. 3. Добавление фоновой музыки

 6. 4. Простое проигрывание видео

 6. 5. Внедрение объектов

 Глава 7 Таблицы

 7. 1. Структура простейшей таблицы

 7. 2. Элементы таблицы

 Заголовок таблицы

 Параметры отображения таблицы

 Параметры отображения строк таблицы

 Параметры отображения ячеек. Слияние ячеек

 Ячейки заголовков

 7. 3. Структурирование таблицы

 Группировка строк

 Описание и группировка столбцов

 Особенности задания ширины столбцов

 7. 4. Использование таблиц для формирования дизайна HTML-документа

 Глава 8 Фреймы

 8. 1. Понятие фрейма

 8. 2. Создание набора фреймов

 8. 3. Новые возможности гиперссылок

 Целевой фрейм отдельных гиперссылок

 Целевой фрейм по умолчанию

 8. 4. Элемент NOFRAMES

 8. 5. Плавающие фреймы

 8. 6. Замена фреймов внедренными HTML-документами

 Глава 9 Формы

 9. 1. Создание формы

 9. 2. Элементы управления формы

 Стандартные элементы управления

 Многострочное текстовое поле

 Снова кнопки

 Меню

 Подписи элементов управления

 9. 3. Группировка элементов управления

 Глава 10 Введение в CSS

 10. 1. Возможности CSS

 10. 2. Внешние и встроенные таблицы стилей

 10. 3. Записи таблицы стилей

 Правила отображения HTML-элементов

 Использование стилевых классов

 Задание отображения единичных элементов документа

 Контекстные селекторы

 Комментарии в таблице стилей

 10. 4. Порядок применения стилей

 10. 5. Единицы измерения CSS

 Линейный размер и положение

 Цвета

 10. 6. Скрытие таблиц стилей

 Глава 11 Использование таблиц стилей

 11. 1. Шрифт

 11. 2. Стиль текста

 11. 3. Cписки

 11. 4. Границы

 11. 5. Поля и отступы

 11. 6. Цвет и фон

 11. 7. Свободное позиционирование

 11. 8. Использование элементов DIV и SPAN

 11. 9. Псевдоклассы гиперссылок

 11. 10. Псевдоклассы текста

 11. 11. Создание CSS для различных устройств

 Глава 12 Краткий курс JavaScript

 12. 1. Замечание о строках кода JavaScript

 12. 2. Комментарии

 12. 3. Типы данных, переменные, выражения

 12. 4. Простые и составные операторы

 12. 5. Операторы языка JavaScript

 Арифметические операторы. Инкремент и декремент

 Логические операторы и операторы сравнения

 Двоичные операторы

 Приоритет операторов

 Условные операторы

 Циклы

 Операторы break и continue

 Оператор запятая

 12. 6. Функции

 Пользовательские функции

 Встроенные функции JavaScript

 Глобальные и локальные переменные

 Ссылки на функции

 12. 7. Массивы

 12. 8. Работа с объектами

 Понятие объекта. Свойства и методы

 Встроенные классы JavaScript

 12. 9. Взаимодействие с пользователем

 12. 10. Поиск ошибок в программе

 Глава 13 Динамический HTML

 13. 1. Основы использования сценариев в HTML-документе

 Помещение сценария в документ

 Скрытие сценария

 13. 2. Исполнение сценария

 Исполнение при загрузке документа

 Реакция на события

 13. 3. Объектная модель документа

 Объект document

 Объект navigator

 Объект window

 Объект style

 Объект screen

 Объект event

 Глава 14 Создаем настоящий веб-сайт

 14. 1. Содержание сайта

 14. 2. Навигация по сайту

 14. 3. Расположение файлов

 14. 4. Реализация сайта

 Шаблон и внешний вид страниц

 Реализация меню

 Разворачивающиеся абзацы

 Прочие сценарии

 Используемые таблицы стилей

 14. 5. Примеры работы сайта

 Глава 15 Публикация сайта в Интернете

 15. 1. Ищем место для сайта

 15. 2. Доменное имя для сайта

 15. 3. Проблема стартовой страницы

 15. 4. Администрирование сайта

 Использование форм

 Использование Проводника Windows

 15. 5. Увеличение посещаемости сайта

 Заключение

 Приложение 1 Именованные ссылки на символы

 Приложение 2 Свойства CSS

 Приложение 3 Названия основных цветов var loc = ''; try{ var loc = escape(top. location. href); }catch(e){; }

⇐ Предыдущая 4 5 6 7 8 9 10 11 1213