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

Собственно говоря, на этом этапе можно уже открыть основной файл в броузере. Правда, чтобы гиперссылки работали, давайте напишем еще файлы prices.html и guestbook.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>
<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">
Здесь вы можете не только увидеть наши цены, но и рассчитать стоимость будущего заказа!</DIV>
<BR>
<FORM>
<TABLE WIDTH="99%" CELLSPACING="0"> <TR>
<TH WIDTH="70%">Услуги</TH>
<TH WIDTH="15%" ALIGN="left">ЦЕНА</TH>
<TH WIDTH="15%">СТОИМОСТЬ</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">Суп <OPTION VALUE="60">Куриные котлеты
<OPTION VALUE="10">Макароны
<OPTION VALUE="14">Компот
<OPTION VALUE="100">Плов
<OPTION VALUE="24">Каша
<OPTION VALUE ="7">Кофе
<OPTION VALUE="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">
<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">Ваше имя:</LABEL>
<INPUT TYPE="text" NAME="Name" VALUE="АНОНИМ" 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>

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