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

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

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

А теперь давайте рассмотрим чуть более сложный пример. Попытаемся наконец, организовать полную навигацию по сайту гипотетической фирмы “Лентяй”, отдельные части которого мы создали в предыдущих главах. Здесь в правой части имеются гиперссылки на различные разделы сайта, но при создании примера эти гиперссылки не действовали. А ведь по крайней мере три из них могут действовать, поскольку три раздела: “Услуги”, “Цены” и “Книга отзывов” уже созданы!

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

Прежде всего, нам придется выделить в отдельные файлы заголовок и блок гиперссылок. Кроме того, чтобы пользоваться одинаковыми стилями г нескольких 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;
    }
    lft {
        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>
    <TITLE>Фирма "Лентяй"</TITLE>
</HEAD>
<FRAMESET ROWS="150," FRAMESPACING="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>Фирма "ЛЕНТЯЙ"</TITLE>
    <LINK REL="stylesheet" HREF="lent.css">
</HEAD>
  
<BODY>
    <DIV CLASS="hdr">Фирма&nbsp;&laquo;ЛЕНТЯЙ&raquo;</DIV>
</BODY>
  
</HTML>

Итак, посмотрим целиком на текст файла lentlink.html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  
<HEAD>
    <title>Фирма "ЛЕНТЯЙ"</title>
    <LINK REL="stylesheet" HREF="lent.css">
</HEAD>
  
<BODY>
    <DIV CLASS="rght">
        <DIV CLASS="lnk">
            <A HREF="main.html" target="niain">услуги</A>
        </DIV>
        <DIV CLASS="lnk">
            <A HREF="prices.html" target="main">цены</A>
        </DIV>
        <DIV CLASS="lnk">
            <A HREF="forml.html" target="main">ФОРМА ЗАКАЗА</A>
        </DIV>
        <DIV CLASS="lnk">
            <A HREF="history.html" target="main">История <SPAN STYLE="letter-spacing:  3px;">КОМПАНИЯ</SPAN></A>
        </DIV>
        <DIV CLASS="lnk">
            <A HREF="guestbook.html" target="main">КНИГА ОТЗЫВОВ</A>
        </DIV>
    </DIV>
</BODY>
  
</HTML>
Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.