Навигация между фреймами
А теперь давайте рассмотрим чуть более сложный пример. Попытаемся наконец, организовать полную навигацию по сайту гипотетической фирмы “Лентяй”, отдельные части которого мы создали в предыдущих главах. Здесь в правой части имеются гиперссылкп на различные разделы сайта, но при создании примера эти гиперссылю 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 «ЛEHTЯЙ»</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>
Однако в последнее время использование фреймов становится все менее популярным решением. В следующих разделах мы рассмотрим, как можно произвольно расположить элементы на странице и организовать навигацию по сайту без использования фреймов.
