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

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

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

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

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

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