Иллюстрированный самоучитель по созданию сайтов

       

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


А теперь давайте рассмотрим чуть более сложный пример. Попытаемся наконец, организовать полную навигацию по сайту гипотетической фирмы “Лентяй”, отдельные части которого мы создали в предыдущих главах. Здесь в правой части имеются гиперссылкп на различные разделы сайта, но при создании примера эти гиперссылю 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 ROWS="150," FRAMES РАСING="0" FRAMEBORDER="0">

<FRAME SRC="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>:

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

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

<HTML>

<HEAD>

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

<LINK REL="stylesheet" HREF="lent.css"> </HEAD>

<BODY> <DIV CLASS="hdr">Фиpмa&nbsp;&laquo;ЛEHTЯЙ&raquo;</DIV>

</BODY>

</HTML>

Итак, посмотрим целиком на текст файла 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="niain">ycnyги</A></DIV>

<DIV CLASS="lnk">

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

<DIV CLASS="lnk">

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

<DIV CLASS="lnk">

<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>

<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.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>

<DIV CLASS="lft">

<DIV CLASS="bigger">

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

<BR>

<FORM>

<TABLE WIDTH="99%" CELLSPACING="0"> <TR>

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

<TH WIDTH="15%" ALIGN="left">ЦЕHA</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> <ТR><ТD>Приготовление пищи:<ВR>

<SELECT NAME="food" SIZE="4" MULTIPLE onChange="calcfood() ">

<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>

<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">

<lNPUT 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" SI'ZE="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>Baш отзыв</ТITLЕ>

<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.corn/guest.cgi" METHOD="post">



<LABEL FOR="Name">Baшe имя:</LABEL>

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

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


Содержание раздела