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

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

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

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

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

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

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

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

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

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

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

<HTML>

<HEAD>

<ТITLEЕ>Домашняя страница Сергея Сергеева.</TITLE>

BODY { background-color: #BABAAO;

color: rgb(29,29,24);

} -->

</STYLE>

</HEAD>

<BODY>

<HR> АВТОПОРТРЕТ СЕРГЕЯ СЕРГЕЕВА

</BODY>

</HTML>

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

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

Кроме того, в первой строке файла, содержащего набор фреймов, необхидимо указывать тип Frameset, например, вот так:

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

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

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

<HTML>

<HEAD>

<ТITLЕ>Домашняя страница Сергея CepreeBa</TITLE>

</HEAD>

</FRAMESET>

</HTML>

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

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

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

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

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

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

Атрибут SRC=, как уже говорилось выше, является самым главным атрибутом,

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

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

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

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

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

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

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

<HTML>

<HEAD>

<ТITLЕ>Домашняя страница Сергея Сергеева. </TITLE>

<!--

BODY { background-color: #BABAAO;

color: rgb(29,29,24); . } HI { 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>

<ТITLE>Домашняя страница Сергея CepreeBa</TITLE>

</HEAD>

</FRAMESET> </FRAMESET> </HTML>

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

А теперь давайте рассмотрим чуть более сложный пример. Попытаемся наконец, организовать полную навигацию по сайту гипотетической фирмы “Лентяй”, отдельные части которого мы создали в предыдущих главах. Здесь в правой части имеются гиперссылкп на различные разделы сайта, но при создании примера эти гиперссылю i не действовали. А ведь по крайней мере три из них могут действовать, поскольку три раздела: “Услуги”, “Цены” и “Книга отзывов” уже созданы!

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

Прежде всего, нам придется выделить в отдельные файлы заголовок и блок гиперссылок. Кроме того, чтобы пользоваться одинаковыми стилями г нескольких 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;

}

.Ink { border-width: thick; border-style: ridged; margin: 10px; padding: 5px; border-color: #319CFF;

background-image: url("Images\backlnkl.jpg");

color: red; text-align: center; }

.Ink A:link, .Ink A:visited {

text-decoration: none; color: white;

} .Ink A:active ( text-decoration: none;

color: red; }

.1ft { font-size: meduim; }

.bigger { font-size: larger;

font-family: sans-serif; }

.logo

{ position: absolute;

left: 70; top: 120; z-index: -5;

}

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

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

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

<HTML>

<HEAD>

<ТIТLЕ>Фирма "Лентяй"</ТIТLЕ>

</HEAD>

</FRAMESET> </FRAMESET>

</HTML>

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

<LINK REL="stylesheet" HREF="lent.css"> Взглянем на текст этого файла целиком.

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

<HTML>

<HEAD>

<TITLE>Фиpмa "ЛEHTЯЙ"</TITLE>

<BODY> <DIV CLASS="hdr">Фиpмa «ЛEHTЯЙ»</DIV>

</BODY>

</HTML>

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

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

<HTML>

<HEAD>

<title>Фирма "ЛEHTЯЙ"</title>

<BODY>

<A HREF="main.html" target="niain">ycnyги</A></DIV>

<A HREF="prices .html" target="main">цены</A></DI

<A HREF="forml.html" tаrgеt="main">ФОРМА 3AKA3A</A></DIV>

<A HREF="history.html" target="main">История

<SPAN STYLE="letter-spacing: -3px; ">KOMПAHИЯ</SPAN></A></DIV>

<DIV CLASS="lnk"><A HREF="guestbook.html" target="main">KHИГA OT3ЫBOB</A></DIV>

</DIV>

</BODY>

</HTML>

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

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

<HTML>

<HEAD>

<TITLE>Фиpмa "ЛEHTЯЙ"</TITLE>

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

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.selectedlndex)*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= parseint(document.forms[0].foodtotal.value)+parselnt(foodlist[i]);

if (document.forms[0].ingred.checked)

document.forms[0].foodtotal.value= parseint(document.forms[0].foodtotal.value)+parselnt(foodingr[i]);

} } calcall();

} f unction calccomp() {

document.forms[0].comptotal.value= parseint(document.forms[0].comp.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>

Здecь вы можете не только увидеть наши цены, но и рассчитать стоимость будущего заказа !</DIV>

<BR>

<FORM>

<TH WIDTH="70%">Услуги</TH>

<TH WIDTH="15%">CTOИMOCTb</TH> </TR> <TR> <TD>

Количество вкручиваемых лампочек:

</TR> <TR>

<TD> Количество услуг по наведению чистоты:

<OPTION VALUE="0">0

<OPTION VALUE="1">1

<OPTION VALUE="2">2

</TR> <ТR><ТD>Приготовление пищи:<ВR>

<OPTION VALUE="25">Cyп <OPTION VALUE="60">Kypинные котлеты

<OPTION VALUE="10">Maкapoны

<OPTION VALUE="14">Koмпoт

<OPTION VALUE="100">ПЛOB

<OPTION VALUE="24">КАША

<OPTION VALUE ="7">Кофе

<OPTION VALUE="144">Caлaт </SELECT><BR>

<INPUT TYPE="checkbox" NAME="ingred" VALUE="ours" onClick="calcfood()">Привезти ингредиенты с собой

</TD>

</TR> <TR><TD STYLE="padding-bottom: 15px;"> Количество компьютерных услуг: <SELECT NAME="comp" onChange="calccomp () ">

< INPUT TYPE="text" NAME="compprice" VALUE="101" SIZE="3" READONLY> p.</TD>

</TR> <TR>

<TD COLSPAN”"2" ALIGN="right" STYLE="padding-top: 15px; border-top: double black; "><В>ИТОГО:</В></ТD>

</TR>

</TABLE>

</FORM>

</DIV>

</BODY>

</HTML>

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

<HTML>

<HEAD>

<TITLE>Baш отзыв</ТITLЕ>

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

</HEAD>

<BODY>

<DIV CLASS="lft"> <Н1>Ваш отзыв о наших услугах</Н1>

<INPUT TYPE="text" NAME="Name" VALUE="AHOHИM" SIZE="30"><BR> <LABEL FOR="Opinion">Bame мнение:</LABEL>

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