Иллюстрированный самоучитель по созданию сайтов › Размещение элементов на веб-странице и навигация по сайту [страница - 141] | Самоучители по работе в Internet

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

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

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