На главную

	1.Как создают веб-страницы
	Как написать веб-страницу
	Обзор программ для просмотра и создания веб-страниц
	Создание веб-страниц

	2.Основные средства языка HTML
	Самое главное на любой веб-странице - гиперссылки
	Как создать списки на веб-странице
	Создание таблиц

	3.Графика на веб-странице
	Графические форматы интернета
	Графические элементы оформления веб-страниц
	Графические маркеры
	Подготовка рисунков в программе Adobe Photoshop

	4.Оформление веб-страницы с использованием стилей
	Определение стилей в специальной таблице
	Обзор других возможностий стилевых таблиц

	5.Использование звука на веб-странице
	Маленькие хитрости

	6.Динамические веб-страницы на основе JavaScript
	Как писать собственные функции
	Динамическое изменение внешнего вида страницы
	Другие возможности языка JavaScript

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

	8.Размещение элементов на веб-странице с помощью таблиц
	Управление расположением элементов на веб-страницы
	Динамическое позиционирование слоев

	9.Дополнительные возможности формирования веб-страниц
	Пример использования элемента управления Tabular Data

Размещение элементов на веб-странице и навигация по сайту

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

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

• использование фреймов;

• использование таблиц;

• и позиционирование независимых слоев.

Давайте же рассмотрим эти технологии по порядку, и начнем с той из них, которая еще не обсуждалась в этой книге — с использования фреймов.

Использование структуры фреймов

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

Формирование набора фреймов

Итак, начнем. Разделим нашу страницу на две части (два фрейма) — левую и правую. Вообще говоря, каждый фрейм представляет собой отдельный HTML-документ. Таким образом, нам надо так определить набор фреймов, чтобы в правую часть страницы загружался НТМL-документ, созданный нами в предыдущей главе и показанный на рис. 7.16 (назовем этот файл sergtext.html), а в левый фрейм — файл, содержащий «автопортрет» Сергея Сергеева. Этот файл мы назовем sergport.html. Сначала напишем его текст.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<ТIТLЕ>Домашняя страница Сергея Сергеева. </TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>
<IMG SRC="Images/sergport.gif" WIDTH="257" HEIGHT="305" BORDER="0" ALT="ABTОПОPTPET">
<HR>
АВТОПОРТРЕТ СЕРГЕЯ СЕРГЕЕВА
</BODY>
</HTML>

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

Надо сказать, что HTML-файлы, содержащие набор фреймов, существенно отличаются от обычных НTML-файлов, В частности, они не должны содержать тег <BODY>. Их основная часть определяется тегом <FRAMESET>. Все, что заключено между ним и его закрывающим тегом </FRAMESET>, является набором фреймов. Содержимое каждого фрейма задается с помощью тега <FRAME>. Его основным атрибутом является SRC=, значением которого является имя соответствующего HTML-файла.Кроме того, в первой строке файла, содержащего набор фреймов, необходимо указывать тип Frameset, например, вот так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

Давайте напишем текст набора фреймов для нашего примера, а затем рассмотрим его подробнее. Итак, если страница с портретом называется sergport.html, а страница с текстом — sergtext.html, то текст основного документа будет следующим.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<ТITLЕ>Домашняя страница Сергея Cepгеева</TITLE>
</HEAD>
<FRAMESET COLS="277,*" FRAMESРАСING="0" FRAMEBORDER="0">
<FRAME NAME="portrait" SRC="sergport .html" SCROLLING="no" FRAMEBORDER="0" NORESIZE>
<FRAME NAME="text" SRC="sergtext .html" SCROLLING="auto" FRAMEBORDER="0" NORESIZE>
</FRAMESET>
</HTML>

Результат работы этого кода показан на рис. 8.1. Давайте внесем некоторые пояснения.

Чтобы фреймы располагались, как столбцы таблицы (а не как ряды, например, сверху и снизу), нужно в теге <FRAMESET> указать атрибут COLS=. Его значением должно быть перечисление ширины каждого фрейма (через запятую). Например, если написать <FRAMESET COLS="25%,25%,50%">, то окно броузера будет разделено на три фрейма: левый шириной в четверть окна броузера, средний такой же ширины и правый шириной в половину окна броузера. В данном случае ширина каждого фрейма указана в процентах. Можно также указывать ширину фрейма в пикселах. В приведенном выше коде мы определяем ширину левого фрейма в 277 пикселов, чтобы туда уместился рисунок:

В этой записи звездочка означает, что для другого фрейма отведено все оставшееся место в окне броузера. Сколько его будет — зависит только от ширины окна броузера на компьютере пользователя. (Если у пользователя разрешение 1600x1200 и окно броузера развернуто на весь экран, то у него ширина правого фрейма будет около 1320 пикселов, а если он сузил окно броузера до 300 пикселов, то на правый фрейм у него останется менее 15 пикселов.) В большинстве случаев левый фрейм шириной 277 пикселов будет все же занимать меньше половины окна броузера, а значит, у пользователя сложится правильное впечатление, что основная информация заключена в правом фрейме.

Рис. 8.1. Простейшая фреймовая структура

Далее, чтобы между фреймами на было видимой границы, следует установить значения атрибутов FRAMESPACING= (расстояние между фреймами) и FRAMEBORDER= (наличие рамки фреймов) равными нулю. В принципе, если установить значение атрибута FRAMEBORDER= равным 1 (кстати, для Netscape версии 3 было необходимо вместо значений 0 и 1 для атрибута FRAMEBORDER= использовать значения Yes или No), то можно проконтролировать толщину рамки с помощью атрибута BORDER=, а также ее цвет с помощью атрибута BORDERCOLOR=.

Если надо расположить фреймы, как строки таблицы, то вместо атрибута COLS= следует использовать атрибут ROWS=. В остальном все остается точно так же, как ранее. В принципе, возможно использовать в одном теге <FRAMESET> оба атрибута: и COLS=, и ROWS=.

Но вернемся к приведенному выше коду. Между тегами <FRAMESET> и </FRAMESET> в нем находятся определения содержимого каждого из фреймов. Каждый фрейм определяется с помощью тега <FRAME>:

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

Атрибут SRC=, как уже говорилось выше, является самым главным атрибутом, поскольку его значение указывает, какой, собственно говоря, файл следует в этот фрейм загрузить. Атрибут SCROLLING= управляет наличием полосы прокрутки в каждом фрейме. Если его значением является auto, то броузер сам определяет, отображать ли полосу прокрутки. Как правило, это самое удобное значение — если все содержимое фрейма помещается в видимую область, то полоса прокрутки не отображается, а если часть содержимого не видна, то полоса прокрутки отображается.

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

Как видите, все достаточно просто. Нужно только не забывать определить нужное количество тегов <FRAME>. Впрочем, если их будет меньше, чем указано в теге <FRAMESET>, то на месте «отсутствующего» фрейма отобразится просто белый прямоугольник.

Вложенные наборы фреймов

— Хорошо, — скажете вы, а как быть, если мы захотим, к примеру, отобразить заголовок страницы во всю ширину окна броузера, а уж под ним расположить левый и правый фреймы?

— Это весьма просто. Создадим отдельный HTML-файл заголовка.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>
<HEAD>
<TITLE>Домашняя страница Сергея Сергеева. </TITLE>
<STYLE TYPE="text/css">
<!--
BODY { background-color: #BABAAO;
color: rgb(29, 29,24);
}
H1 { text-align: center; }
-- >
</STYLE>
</HEAD>
<BODY>
<Н1>Домашняя страница Сергея Сергеева</Н1>
</BODY>
</HTML>

Назовем этот файл, например, serghdr.html. Далее удалим заголовок из файла sergtext.html. И теперь давайте немного подумаем. Чтобы расположить наш заголовок в верхнем фрейме, придется сначала определить набор горизонтальных фреймов с помощью атрибута ROWS= в теге <FRAMESET>:

Здесь мы определили высоту верхнего фрейма в 80 пикселов — вполне достаточно для заголовка. Теперь определим содержимое верхнего фрейма (загрузим туда наш только что созданный файл serghdr.html):

Теперь нужно определить содержимое нижнего фрейма. А что там должно находиться? А там должен находиться тот самый набор фреймов, который был определен в прошлом примере! К счастью, нам ничто не мешает в качестве содержимого одного из фреймов указывать тег <FRAMESET> — ведь каждый фрейм имеет те же «права», что и отдельное окно броузера! Вот что у нас получится в целом.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset/ /EN">
<HTML>
<HEAD>
<TITLE>Домашняя страница Сергея Cepгеева</TITLE>
</HEAD>
<FRAMESET ROWS="80,*" FRAMESPACING="0" FRAMEBORDER="0">
<FRAME SRC="serghdr.html" NAME="header" SCROLLING="no">
<FRAMESET COLS="277,*" FRAMESPACING="0" FRAMEBORDER="0">
<FRAME NAME="portrait" SRC="sergport .html" SCROLLING="no" NORESIZE> <FRAME NAME="text" SRC="sergtext2 .html" SCROLLING="auto" NORESIZE> </FRAMESET>
</FRAMESET>
</HTML>

Рис. 8.2. Страница из трех фреймов

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

Навигация между фреймами

А теперь давайте рассмотрим чуть более сложный пример. Попытаемся, наконец, организовать полную навигацию по сайту гипотетической фирмы «Лентяй», отдельные части которого мы создали в предыдущих главах. Посмотрите на рис. 4.16. Здесь в правой части имеются гиперссылки на различные разделы сайта, но при создании примера эти гиперссылки не действовали. А ведь по крайней мере три из них могут действовать, поскольку три раздела: «Услуги», «Цены» и «Книга отзывов» уже созданы! Для реализации полной навигации мы в этом разделе будем использовать фреймы, хотя это не единственное решение. (Более изящное решение на основе позиционирования будет предложено в конце этой главы.) Прежде всего, нам придется выделить в отдельные файлы заголовок и блок гиперссылок. Кроме того, чтобы пользоваться одинаковыми стилями в нескольких HTML-файлах сразу, мы не будем дублировать таблицу стилей в каждом из файлов, а тоже выделим ее в отдельный файл. Назовем его lent.css. Давайте вначале взглянем на его содержимое:

BODY {
background-color: #D2FFFF;
color: #003737;
background- image: url ("Images \grad2 . jpg") ;
background-position: right;
background-repeat: repeat-y;
}
A:link,A:active,A:visited { color: #006A6A; }
A: hover { font-weight: bold;
text-decoration: none;
}

.hdr {
position: absolute;
left: 50px;
top: 10px;
text-align: center;
font-family: OdessaScriptFWF, fantasy;
font-size: 60px;
font-weight: 900;
width: 90%;
height: 100px;
letter-spacing: 0.05em;
line-height: 100px;
filter: shadow;
border: 10px outset #003163;
color: #3163CE;
}
.rght {
font-size: large;
}
.lnk {
border-width: thick;
border-style: ridge;
margin: 10px;
padding: 5px;
border-color: #319CFF;
background-image: url ("Images\backlnk1 . jpg") ;
color: red;
text-align: center;
}
.lnk A: link, .lnk A: visited {
text-decoration: none;
color: white;
}
.lnk A: active {
text-decoration: none;
color: red;
}
.lft {
font-size: meduim;
}
.bigger {
font-size: larger;
font-family: sans-serif;
}
.logo {
position: absolute;
left: 70;
top: 120;
z-index: -5;
}

Как видите, эта таблица стилей очень похожа на ту, что использовалась ранее в главе 4 (см. рис. 4.16), однако в нее пришлось внести некоторые изменения. Поскольку все разделы будут теперь располагаться в отдельных фреймах, отпадает необходимость в позиционировании, поэтому для классов lft и rght свойства position, left, top, width и height мы вообще не определили. Кроме того, изменена позиция (свойства left и top) логотипа, то есть класса logo. Для выделения красным цветом ссылки на текущий раздел (то есть тот, который в данный момент просматривает пользователь) пришлось добавить псевдокласс .lnk A:active.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Фирма "Лентяй"</ТIТLЕ>
</HEAD>
<FRAMESET ROWS="150,*" FRAMESPACING="0" FRAMEBORDER="0">
<FRAME SRС="lenthdr.html" NAME="header" FRAMEBORDER="0" SCROLLING="no">
<FRAMESET COLS="*,200" FRAMESPACING="0" FRAMEBORDER="0">
<FRAME NAME="main" SRC="main.html" FRAMEBORDER="0" NORESIZE>
<FRAME NAME="link" SRC="lentlink.html" FRAMEBORDER="0" NORESIZE> </FRAMESET>
</FRAMESET>
</HTML>

Теперь создадим файл заголовка lenthdr.html. Собственно говоря, он будет очень коротким, поскольку в нем не должно быть ничего, кроме заголовка, написанного классом hdr, уже определенным в файле lent.css. Надо только не забыть подключить файл таблицы стилей с помощью тега <LINK>:

Взглянем на текст этого файла целиком.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<ТTТLЕ>Фирма "ЛЕНТЯЙ"</ТIТLЕ>
<LINK REL="stylesheet" HREF="lent .css">
</HEAD>
<BODY>
<DIV CLASS="hdr">Фиpмa «ЛEHTЯЙ»</DIV>
</BODY>
</HTML>

Теперь давайте напишем файл main.html, в котором будут перечисляться услуги фирмы. Собственно говоря, в нем также нет ничего для нас нового. Единственное замечание касается фонового рисунка. Если помните, в таблице стилей он был определен так, чтобы отображаться с правого края окна. Однако, каждый фрейм представляет собой как бы полноправное окно. Поэтому если не предпринять никаких мер, фоновый рисунок отобразится также и в левом фрейме, то есть почти в центра окна броузера, что нарушит общую композицию градиентного фона. Что же делать? Неужели из-за этого придется писать всю таблицу стилей внутри файла, вместо того, чтобы подключить внешнюю?

Конечно же, нет! Мы можем просто сначала подключить внешнюю таблицу стилей, а затем написать переопределение всего лишь одного свойства:

<STYLE> BODY { background-image: none } </STYLE>

При этом фоновый рисунок не будет отображаться вообще, а все остальные свойства, определенные в файле lent.ess, сохранятся!

Итак, давайте посмотрим на весь текст файла.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Фирма "ЛЕНТЯЙ"</ТITLЕ>
<LINK REL="stylesheet" HREF="lent .css">
<STYLE> BODY {
background-image: none
}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="lft">
<DIV CLASS="bigger">
Haшa фирма предоставляет следующие услуги :
</DIV>
<UL STYLE="list-style-image: url (' Images\marker1 .gif ' ) ; ">
<LI>Бытовыe услуги
<UL STYLE="list-style-image : url ( ' Images \marker2 . gif ' ) ; ">
<LI>Вкручивание электрических лампочек
<LI>Услуги по наведению чистоты
<UL STYLE="list-style-image: url (' Images\marker3 .gif ' ) ; ">
<LI>Подметание пола
<LI>Вынесение мусора из квартиры
<LI>Мытье посуды
</UL> </UL>
<LI>Приготовление пищи
<LI>Компьютерные услуги
<UL STYLE="list-style-image: url (' Images\marker2 .gif ' ) ; ">
<LI>Дeфpaгмeнтaция жестких дисков
<LI>Переустановка Windows
</UL> </UL>
<DIV СLАSS="bigger">Для того чтобы воспользоваться нашими услугами, вам следует:
</DIV>
<OL>
<LI>Зарегистрироваться (<А HREF="reg.html">здесь</A>)
<LI>Зaпoлнить форму заказа (<А HREF="form1.html">здесь</A>)
<LI>Пoдтвepдить заказ:
<OL TYPE="I">
<LI>Пoлyчив письмо с паролем подтверждения, послать пустой ответ, нажав "Reply"
<LI>Заполнить форму-подтверждение заказа (<А HREF="form2.html">здесь</A>)
</OL>
<LI>Приготовить деньги для оплаты услуг
</OL> </DIV>
<IMG CLASS="logo" SRC="Images/logo6.gif " WIDTH="500" HEIGHT="346" BORDER="0">
</BODY>
</HTML>

Теперь нам осталось самое интересное — написать файл lentlink.html, содержащий блок гиперссылок. Поскольку его содержимое будет отображаться в правом фрейме, а после щелчка на гиперссылке соответствующий файл должен загружаться в левый фрейм, необходимо в каждой гиперссылке установить атрибут TARGET=, значением которого должно быть имя того фрейма, в который нужно загрузить документ:

В данном случае левый нижний фрейм имеет имя main (таким оно было определено с помощью атрибута NAME= тега <FRAME>). Это имя и нужно указать как значение атрибута TARGET= гиперссылки. Кстати, если в качестве значения атрибутаTARGET= указать ключевое слово _blank, то соответствующий файл загрузится в новое окно броузера. Об этом уже говорилось выше. А если в качестве значения TARGET= указать ключевое слово _top, то соответствующий файл загрузится прямо в основное окно броузера, заменив собой весь набор фреймов!

Итак, посмотрим целиком на текст файла lentlink.html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Фирма "ЛEHTЯЙ"</TITLE>
<LINK REL="stylesheet" HREF="lent .css">
</HEAD>
<BODY>
<DIV CLASS="rght">
<DIV CLASS="lnk">
<A HREF="main.html" target="main">УСЛУГИ</A>
</DIV>
<DIV CLASS="lnk"><A HREF="prices.html" target="main">ЦЕНЫ</A>
</DIV>
<DIV CLASS="lnk">
<A HREF="forml .html" target="main">ФОРМА 3AKA3A</A>
</DIV>
<DIV CLASS="lnk">
<A HREF="history .html" target="main">ИСТОРИЯ <SPAN STYLE="letter-spacing: -3px; ">КОМПАНИИ</SPAN></A>
</DIV>
<DIV CLASS="lnk">
<A HREF="guestbook.html" target="main">КНИГА ОТЗЫВОВ</A>
</DIV>
</DIV>
</BODY>
</HTML>

Собственно говоря, на этом этапе можно уже открыть основной файл в броузере. Правда, чтобы гиперссылки работали, давайте напишем еще файлы prices.html и guestbook.html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<ТITLЕ>Фирма "ЛЕНТЯЙ"</ТITLЕ>
<LINK REL="stylesheet" HREF="lent .css">
<STYLE> BODY { background- image: none } </STYLE>
<SCRIPT LANGUAGE=" JavaScript" TYPE="text/javascript">
<! —
var foodlist = new Array(25, 60, 10, 14, 100, 24, 7, 144);
var foodingr = new Array(50, 26, 5, 28, 32, 11, 3, 96);
function calclamp() {
document . forms [ 0 ] . lamptotal . value= parseInt (document. forms [0] . lamp. value) *7;
calcall() ;
}
function calcchist() {
document. forms [0] . chisttotal .value= parseInt (document. forms [0] . chist . selectedIndex) *35;
calcall () ;
}
function calcfood() {
document . forms [ 0 ] . foodtotal . value=0 ;
for (var i=0; i<8; i++) {
if (document. forms [0] .food [i] .selected) {
document . forms [ 0 ] . foodtotal . value= parselnt (document. forms [0] . foodtotal. value) +parseInt (foodlist [i] ) ;
if (document .forms [0] . ingred. checked)
document. forms [0] . foodtotal .value= parseInt (document. forms [0] . foodtotal .value) +parseInt (foodingr [i] ) ;
}
}
calcall () ;
}
function calccomp() {
document . forms [ 0 ] . comptotal . value=
parseInt (document. forms [0] .сотр. selectedlndex) *101;
calcall () ;
}
function calcall () {
document . forms [ 0 ] . total . value=
parseInt (document. forms [0] . lamptotal. value) +
parseInt (document. forms [0] . chisttotal .value) +
parseInt (document. forms [0] . foodtotal .value) +
parseInt (document. forms [0] .comptotal. value) ;
}
//— >
</SCRIPT>
</HEAD>
<BODY>
<DIV CLASS="lft">
<DIV CLASS="bigger">Здесь вы можете не только увидеть наши цены, но и рассчитать стоимость будущего заказа !</DIV><BR>
<FORM>
<TABLE WIDTH="99%" CELLSPACING="0">
<TR>
<TH WIDТН="70%">УСЛУГИ</ТН>
<TH WIDTH="15%" ALIGN="left">ЦEHA</TH>
<TH WIDTH="15%">CTOИMOCTb</TH>
</TR>
<TR>
<TD>
Количество вкручиваемых лампочек:
<INPUT TYPE="text" NAME="lamp" VALUE="0" SIZE="2" MAXLENGTH="2" onChange="calclamp () "></TD>
<TD ALIGN="center">
<INPUT TYPE="text" NAME="lampprice" VALUE="7" SIZE="3" READONLY> p.</TD>
<TD ALIGN="right">
<INPUT TYPE="text" NAME="lamptotal" VALUE="0" SIZE="3" READONLY> p.</TD>
</TR>
<TR><TD> Количество услуг по наведению чистоты:
<SELECT NAME="chist" onChange="calcchist () ">
<OPTION VALUE="0">0
<OPTION VALUE="1">1
<OPTION VALUE="2">2
<OPTION VALUE="3">3
</SELECT>
</TD>
<TD ALIGN="center">
<INPUT TYPE="text" NAME="chistprice" VALUE="35" SIZE="3" READONLY> p.</TD>
<TD ALIGN="right">
<INPUT TYPE="text" NAME="chisttotal" VALUE="0" SIZE="3" READONLY> p.</TD>
</TR>
<TR><TD>Приготовление пищи :
<BR>
<SELECT NAME="food" SIZE="4" MULTIPLE onChange="calcfood() ">
<OPTION VALUE="25">Cyп
<OPTION VALUE="60">Kypиные котлеты
<OPTION VALUE="10">Maкароны
<OPTION VALUE="14">Koмпот
<OPTION VALUE="100">Плов
<OPTION VALUE="24">Каша
<OPTION VALUE="7">Koфe
<OPTION VАLUЕ="144">Салат
</SELECT><BR>
<INPUT TYPE="checkbox" NAME="ingred" VALUE="ours" onClick="calcfood() ">Привезти ингредиенты с собой
</TD>
<TD ALIGN="center">
<INPUT TYPE="text" NAME="foodprice" VALUE="OT 10" SIZE="4" READONLY> p.</TD> <TD ALIGN="right">
<INPUT TYPE="text" NAME="foodtotal" VALUE="0" SIZE="3" READONLY> p.</TD>
</TR>
<TR>
<TD STYLE="padding-bottom: 15px;"> Количество компьютерных услуг :
<SELECT NAME="comp" onChange="calccomp () ">
<OPTION VALUE="0">0
<OPTION VALUE="1">1
<OPTION VALUE="2">2
</SELECT></TD>
<TD ALIGN="center" STYLE="padding-bottom: 15px; ">
<INPUT TYPE="text" NAME="compprice" VALUE="101" SIZE="3" READONLY> p.</TD>
<TD STYLE="padding-bottom: 15px;" ALIGN="right">
<INPUT TYPE="text" NAME="comptotal" VALUE="0" SIZE="3" READONLY> p.</TD>
</TR>
<TR>
<TD COLSPAN="2" ALIGN="right" STYLE="padding-top: 15px; border-top: double black; ">
<В>ИТОГО:</В>
</ТD>
<TD ALIGN="right" STYLE="padding-top: 15px; border-top: double black; ">
<INPUT TYPE="text" NAME="total" VALUE="0" SIZE="3" READONLY> p.</TD>
</TR>
</TABLE>
</FORM>
</DIV>
<IMG CLASS="logo" SRC="Images/logo6.gif " WIDTH="500" HEIGHT="346" BORDER="0"> </BODY>
</HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Ваш отзыв</TITLE>
<LINK REL="stylesheet" HREF="lent .css">
<STYLE> BODY {
background- image : none
}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="lft">
<Н1>Ваш отзыв о наших услугах</Н1>
<DIV ALIGN="center">
<FORM ACTION="http: //cgi . lentyay. com/guest . cgi" METHOD="post">
<LABEL FOR="Name">Baшe имя:</LABEL>
<INPUT TYPE="text" NAME="Name" VALUE =" Аноним " SIZE="30"><BR>
<LABEL FOR="Opinion">Baшe мнение :</LABEL>
<TEXTAREA COLS="30" ROWS="4" NAME="Opinion" STYLE="vertical-align: middle; ">
</TEXTAREA>
<BR><BR>
<INPUT TYPE="submit" VALUE="Отправить">
<INPUT TYPE="reset" VALUE="Очистить форму">
</FORM>
</DIV>
</DIV>
<IMG CLASS="logo" SRC="Images/logo6 .gif " WIDTH="500" HEIGHT="346" BORDER="0">
</BODY>
</HTML>

Содержимое обоих файлов уже знакомо нам по разделам 7.1 и 7.7 Кроме того, нужно написать еще файлы form1.html и history.html. Но пока они не написаны, можно просто предупредить об этом пользователя:

<DIV CLASS="lnk"><A HREF="forml.html" target="main" onClick="alert ('Извините, этот раздел еще не готов!\nПриходите позже!');return false;">
ФОРМА 3AKA3A</A></DIV>

Теперь при щелчке на этой гиперссылке оператор return false; отменит действие гиперссылки, а перед этим с помощью метода alert будет выведено предупреждение для пользователя (рис. 8.3). Обратите внимание на то, что оператор return false; должен быть непосредственно в обработчике событий.

Рис. 8.3. Сообщение о выборе несуществующего раздела

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