8 Размещение элементов на веб-странице и навигация по сайту. Создание сайтов (самоучитель)

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

В те недавние времена, когда технология WWW только появилась на свет и стали создаваться первые веб-страницы, одной из самых больших проблем при их создании была невозможность произвольного размещение элементов на странице. Другими словами, все содержимое страницы par полагалось последовательно. Но веб-дизайнерам все чаще и чаще хотелось. расположить материал так, чтобы создать подобие композиции и облегчить восприятие. Самый простой и распространенный пример - разместить ссылки на разделы сайта в левой части, а сами разделы - в правой При этом в нижней части страницы можно разместить, например, какую либо статическую информацию, которая не меняет свое местоположеши в зависимости от количества материала на странице. Но как это осуществить?

Для этого в процессе развития WWW то и дело появлялись различныx решения (некоторые из них по ходу дела уже рассматривались в этой книг выше). На сегодняшний день можно сказать, что наиболее удобных решений для произвольного расположения элементов на странице существую 3:

использование фреймов;
использование таблиц;
и позиционирование независимых слоев.

Давайте же рассмотрим эти технологии по порядку, и начнем с той из них, которая еще не обсуждалась в этой книге - с использования фреймов.

8.1. Использование структуры фреймов

Формирование набора фреймов

Итак, начнем. Разделим нашу страницу на две части (два фрейма) - левую и правую. Вообще говоря, каждый фрейм представляет собой отдельный чтобы-документ. Таким образом, нам надо так определить набор фреймов, чтобы в правую часть страницы загружался html-документ, (назовем этот файл sergtext.phpl), а в левый фрейм - файл, содержащий "автопортрет" Ивана. Этот файл мы назовем sergport.phpl. Сначала напишем его текст.

<!DOCTYPE html><html><head>

<ТITLEЕ>Домашняя страница Ивана.</title>

<STYLE>

BODY{background:#BAB;color:rgb(29,29,24)}-->

</STYLE></head><body>

<HR>АВТОПОРТРЕТ Ивана

</body></html>

Здесь пока что нет ничего нового - это обычная статическая страница, содержащая рисунок, горизонтальную черту и подрисуночную подпись. Теперь настало время определить набор фреймов.

Надо сказать, что НТМL-файлы, содержащие набор фреймов, существенно отличаются от обычных html-файлов. В частности, они не должны содержать тег <body>. Их основная часть определяется тегом <FRAMESET>. Все, что заключено между ним и его закрывающим тегом </FRAMESET>, является набором фреймов. Содержимое каждого фрейма задается с помощью тега <FRAME>. Его основным атрибутом является SRC=, значением которого является имя соответствующего .html-файла.

Кроме того, в 1-й строке файла, содержащего набор фреймов, необхидимо указывать тип Frameset, например, вот так:

<!DOCTYPE html>

Давайте напишем текст набора фреймов для нашего примера, а затем paссмотрим его подробнее. Итак, если страница с портретом называем sergport.phpl, а страница с текстом - sergtext.phpl, то текст основного документа будет следующим.

<!DOCTYPE html><html><head>

<ТITLЕ>Домашняя страница Ивана</title></head>

</FRAMESET>

</html>

Давайте внесем некоторые пояснения. Чтобы фреймы располагались, как столбцы таблицы (а не как ряды, Hanpимер, сверху и снизу), нужно в теге <FRAMESET> указать атрибут COLS= Его значением должно быть перечисление ширины каждого фрейма (через запятую). Например, если написать <FRAMESET COLS="25%,25%,50%>,то окно браузера будет разделено на 3 фрейма: левый шириной в четверть окна браузера, средний такой же ширины и правый шириной в половину окна браузера. В данном случае ширина каждого фрейма указана в про- центах. Можно также указывать ширину фрейма в пикселах. В приведенном выше коде мы определяем ширину левого фрейма в 277px чтобы туда уместился рисунок:

В этой записи звездочка означает, что для другого фрейма отведено все оставшееся место в окне браузера. Сколько его будет - зависит только отi ширины окна браузера на компьютере пользователя. (Если у пользователя разрешение 1600*1200 и окно браузера развернуто на весь экран, то у него ширина правого фрейма будет около 1320px, а если он сузил окно браузера до 300px, то на правый фрейм у него останется менее 15 пикселов.) В большинстве случаев левый фрейм шириной 277px будет все же занимать меньше половины окна браузера, а значит, у пользователя сложится правильное впечатление, что основная информация заключена в правом фрейме.

Далее, чтобы между фреймами на было видимой границы, следует установить значения атрибутов FRAMESPACING= (расстояние между фреймами) и FRAMEBORDER= (наличие рамки фреймов) равными нулю. В принципе, если установить значение атрибута FRAMEBORDER= равным 1 (кстати, для Netscape керсии 3 было необходимо вместо значений 0 и 1 для атрибута RAMEBORDER= использовать значения Yes или No), то можно проконтролировать толщину рамки с помощью атрибута BORDER=, а также ее цвет с помощью атрибута BORDERCOLOR=.

Если надо расположить фреймы, как строки таблицы, то вместо атрибута COLS= следует использовать атрибут ROWS=. В остальном все остается точно так же, как ранее. В принципе, возможно использовать в 1 теге <FRAMESET> оба атрибута: и COLS=, и ROWS=.

Но вернемся к приведенному выше коду. Между тегами <FRAMESET> и </FRAMESET> к нем находятся определения содержимого каждого из фрей-мов. Каждый фрейм определяется с помощью тега <FRAME>:

Атрибут NAME= в этом примере не несет никакой нагрузки - это прост, название фрейма. Однако его присутствие нам потребуется в случае организации межфреймовой навигации (например, если при нажатии на гиперссылку, находящуюся в 1 из фреймов, следует загрузить соответствующи документ в другой фрейм - об этом речь пойдет в следующем разделе В любом случае установка атрибута NAME= является хорошей привычкой Атрибут SRC=, как уже говорилось выше, является самым главным атрибутом, поскольку его значение указывает, какой, собственно говоря, файл следует в этот фрейм загрузить. Атрибут SCROLLING= управляет наличием полосы прокрутки в каждом фрейме. Если его значением является auto, то браузер сам определяет, отображать ли полосу прокрутки. Как правило, это самое удобное значение - если все содержимое фрейма помещается и видимую область, то полоса прокрутки не отображается, а если часть содержимого не видна, то полоса прокрутки отображается.

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

Как видите, все достаточно просто. Нужно только не забывать определи нужное количество тегов <FRAME>. Впрочем, если их будет меньше, не указано в теге <FRAMESET>, то на месте "отсутствующего" фрейма отобразится просто белый прямоугольник.

Вложенные наборы фреймов

- Хорошо, - скажете вы, а как быть, если мы захотим, к примеру, oтобразить заголовок страницы во всю ширину окна браузера, а уж под ним расположить левый и правый фреймы?

Это весьма просто. Создадим отдельный НТМL-файл заголовка.

<!DOCTYPE html><html><head>

<ТITLЕ>Домашняя страница Ивана</title>

<STYLE>

<!--

BODY{background:#BAB;color:rgb(29,29,24)}H1{text-align:center}

-->

</STYLE></head><body>

<Н1>Домашняя страница Ивана</Н1>

</body></html>

Назовем этот файл, например, serghdr. html. Далее удалим заголовок из файла sergtext.phpl. И теперь давайте немного подумаем. Чтобы расположить наш заголовок в верхнем фрейме, придется сначала определить набор горизонтальных фреймов с помощью атрибута ROWS= в теге <FRAMESET>:

Здесь мы определили высоту верхнего фрейма в 80px - вполне достаточно для заголовка. Теперь определим содержимое верхнего фрейма (загрузим туда наш только что созданный файл serghdr.phpl):

Теперь нужно определить содержимое нижнего фрейма. А что там должно находиться? А там должен находиться тот самый набор фреймов, который был определен в прошлом примере! К счастью, нам ничто не мешает в качестве содержимого одного из фреймов указывать тег <FRAMESET> - ведь каждый фрейм имеет те же "права", что и отдельное окно браузера! Вот что у нас получится в целом.

<!DOCTYPE html><html><head>

<ТITLE>Домашняя страница Ивана</title></head>

</FRAMESET></FRAMESET> </html>

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

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

Прежде всего, нам придется выделить в отдельные файлы заголовок и блок гиперссылок. Кроме того, чтобы пользоваться одинаковыми стилями в нескольких html-файлах сразу, мы не будем дублировать таблицу стилей в каждом из файлов, а тоже выделим ее в отдельный файл. Назовем его lent.css. Давайте вначале взглянем на его содержимое:

BODY{background:#D2FFFF;color:#003737;background:url("Images/grad2.jpg");background-position:right;background-repeat:repeat-y} A:link,A:active,A:visited{color:#006}

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: 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;}

.1ft {font-size: meduim;}

.bigger {font-size: larger;

font-family: arial;}

.logo

{position:absolute;

left: 70; top:120; z-index: -5}

Как видите, эта таблица стилей очень похожа на ту, однако в нее пришлось внести некоторые изменения. Поскольку все разделы будут теперь располагаться в отдельных фреймах, отпадает необходимость в позиционировании, поэтому для классов Ift и rght свойства position, left, top, width и height мы вообще не опре делили. Кроме того, изменена позиция (свойства left и top) логотипа, т.е. класса logo. Для выделения красным цветом ссылки на текущий раз дел (т.е. тот, который в данный момент просматривает пользователь) пришлось добавить псевдокласс .Ink Aactive.

Теперь давайте напишем главный документ, определяющий набор фреймов. После изучения предыдущего раздела это не составит никакого труда - он будет в точности таким же, как в предыдущем примере, только имена файлов и названия фреймов изменятся. Кроме того, для верхнего фрейма придется выделить чуть больше места (150px), а для правого нижнего фрейма (блока ссылок) определить фиксированную ширину 200px

<!DOCTYPE html><html><head><title>Фирма "Лентяй"</title></head>

</FRAMESET></FRAMESET>

</html>

Теперь создадим файл заголовка lenthdr.phpl. Собственно говоря, он будет очень коротким, поскольку в нем не должно быть ничего, кроме заголовка, написанного классом hdr, уже определенным в файле lent.css. Надо только не забыть подключить файл таблицы стилей с помощью тега <LINK>:

<LINK REL="stylesheet" HREF="lent.css> Взглянем на текст этого файла целиком.

<!DOCTYPE html><html><head><title>Фиpмa "ЛEHTЯЙ"</title>

<LINK REL="stylesheet" HREF="lent.css></head><body><DIV CLASS="hdr>Фиpмa "ЛEHTЯЙ"</DIV>

</body></html>

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

<!DOCTYPE html><html><head>

<title>Фирма "ЛEHTЯЙ"</title>

<DIV CLASS="rght><DIV CLASS="lnk><A HREF="main.phpl" target="niain>ycnyги</A></DIV>

<DIV CLASS="lnk><A HREF="prices.phpl" target="main>цены</A></DI

<DIV CLASS="lnk><A HREF="forml.phpl" tаrgеt="main>ФОРМА 3AKA3A</A></DIV>

<DIV CLASS="lnk><A HREF="history.phpl" target="main>История

<SPAN STYLE="letter-spacing:-3px>KOMПAHИЯ</SPAN></A></DIV>

<DIV CLASS="lnk><A HREF="guestbook.phpl" target="main>KHИГA OT3ЫBOB</A></DIV></DIV>

</body></html>

Собственно говоря, на этом этапе можно уже открыть основной файл и браузере. Правда, чтобы гиперссылки работали, давайте напишем еще файлы prices.phpl и guestbook.phpl.

<!DOCTYPE html><html><head><title>Фиpмa "ЛEHTЯЙ"</title>

<STYLE>BODY{background:none} </STYLE>

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>

Здecь вы можете не только увидеть наши цены, но и рассчитать стоимость будущего заказа !</DIV>

<TH WIDTH="70%>Услуги</TH>

<TH WIDTH="15%>CTOИMOCTb</TH> </TR><TR> <TD>

Количество вкручиваемых лампочек:

<INPUT tYPE="text" NAME="lampprice" VALUE="7" SIZE="3" READONLY> p.

<INPUT tYPE="text" NAME="lamptotal" VALUE="0" SIZE="3" READONLY> p.

</TR><TR>

<TD> Количество услуг по наведению чистоты:

<OPTION VALUE="0>0

<OPTION VALUE="1>1

<OPTION VALUE="2>2

<INPUT tYPE="text" NAME="chistprice" VALUE="35" SIZE="3" READONLY> p.

<INPUT tYPE="text" NAME="chisttotal" VALUE="0" SIZE="3" READONLY> p.

</TR><ТR><ТD>Приготовление пищи:<ВR>

<OPTION VALUE="25>Cyп <OPTION VALUE="60>Kypинные котлеты

<OPTION VALUE="10>Maкapoны

<OPTION VALUE="14>Koмпoт <OPTION VALUE="100>ПЛOB

<OPTION VALUE="24>КАША

<OPTION VALUE ="7>Кофе <OPTION VALUE="144>Caлaт </SELECT><br><INPUT tYPE="checkbox" NAME="ingred" VALUE="ours" onClick="calcfood()>Привезти ингредиенты с собой

<INPUT tYPE="text" NAME="foodprice" VALUE="OT 10" SIZE="4" READONLY> p.

<INPUT tYPE="text" NAME="foodtotal" VALUE="0" SIZE="3" READONLY> p.

</TR><TR><TD STYLE="padding-bottom: 15px;> Количество компьютерных услуг: <SELECT NAME="comp" onChange="calccomp () >

< INPUT tYPE="text" NAME="compprice" VALUE="101" SIZE="3" READONLY> p.

<lNPUT tYPE="text" NAME="comptotal" VALUE="0" SIZE="3" READONLY> p.

</TR><TR>

<TD COLSPAN"2" ALIGN="right" STYLE="padding-top: 15px; border-top: double black; ><В>ИТОГО:</В></ТD>

<INPUT tYPE="text" NAME="total" VALUE="0" SI'ZE="3" READONLY> p.

</TABLE>

</FORM></DIV>

</body></html>

<!DOCTYPE html><html><head><title>Baш отзыв</ТITLЕ>

<STYLE>BODY{background:none} </STYLE></head><body>

<DIV CLASS="lft><Н1>Ваш отзыв о наших услугах</Н1>

<INPUT tYPE="text" NAME="Name" VALUE="AHOHИM" SIZE="30><br><LABEL FOR="Opinion>Bame мнение:</LABEL>

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

Вперед

Отвечу на любые вопросы. С уважением, Дмитрий Владимирович.

Ваше письмо	×