Размещение элементов на веб-странице и навигация по сайту
Собственно говоря, на этом этапе можно уже открыть основной файл в браузере. Правда, чтобы гиперссылки работали, давайте напишем еще файлы 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(); } function 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> <TR> <TD>Приготовление пищи: <BR> <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; "> <B>ИТОГО:</B> </TD> <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"> <H1>Ваш отзыв о наших услугах</H1> <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">Ваше мнение:</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></BODY> </HTML>Однако в последнее время использование фреймов становится все менее популярным решением. В следующих разделах мы рассмотрим, как можно произвольно расположить элементы на странице и организовать навигацию по сайту без использования фреймов.