Я люблю фреймы...

ПРЕДИСЛОВИЕ

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

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

1. (-) Фреймы, в отличие от одностраничных документов, требуют использования нескольких файлов - собственно фреймсета и по одному файлу на каждый фрейм. Как следствие, во-первых, труднее ориентироваться в структуре сайта. Впрочем, не так уж и труднее, если с умом подойти к названиям файлов, благо с 95 года Маздай (а всеми тайно любимая Mac OS - с глубокой древности) предоставляет такую полезную вещь, как длинные имена файлов (закоренелые фидошники могут пропустить мимо ушей последнее предложение - им уже ничего не поможет). Во-вторых, может показаться, что несколько файлов труднее редактировать, но это лишь на первый взгляд. Современные html-редакторы (как например, любимый автором Macromedia Dreamweaver) позволяют редактировать фреймсет и прилагающиеся к нему файлы в одном окне.
2. (+++) Как правило, крайний левый (хотя на самом деле его положение может быть любым) фрейм используется под панель навигации. Этот элемент оформления сайта как правило не изменяется. Загрузившись в броузер однажды, он больше не отнимет у посетителя его драгоценное время, как это произошло бы, будь панель навигации в каждом загружающемся документе. Кроме того, модификация сайта неимоверно упростится. Вдумайтесь, для добавления нового раздела придется модифицировать только один(!) файл - файл с навигационными элементами. В одностраничном варианте реализации сайта понадобится модифицировать все(!) файлы, где панель навигации присутствует. Продвинутый веб-мастер возразит, что это не составит большого труда при использовании шаблонов (в том же Dreamweaver), но объем то информации от этого не станет меньше...
3. (-) Многие поисковые системы используют программы-роботы для сканирования сайтов и индексации содержащейся в них информации. Однако не многие из этих программ-роботов понимают фрейм-структуры. Как следствие поисковая система, скорее всего, не сможет обработать информацию, представленную в виде фреймов.
4. (++) Фреймы предоставляют создателю сайта уникальную возможность для обмена информацией между документами, одновременно отображающимися на экране. Осуществляется это путем использования глобальных переменных Java Script инициализируемых во фреймсете и доступных для чтения и модификации в любом документе внутри него. Данное решение значительно проще варианта с cookies и не требует написания различных perl, cgi и прочих программ, генерирующих html документ. Примеры использования рассмотрены в следующей главе.
5. (+/-) Если фон сайта отличен от однородного цвета, у одностраничных документов появляется проблема, связанная с различием разрешений мониторов у каждого отдельно взятого посетителя сайта. Веб-дизайнер не вправе привязаться к конкретному разрешению (ибо сразу отпугнет львиную долю посетителей) и посему вынужден ориентироваться на самое низкое (обычно 800х600). У тех посетителей сайта, которые имеют более высокое разрешение, вся картинка упирается влево, заставляя пользователя помалу косоглазить. Классическим примером такого решения является домашняя страничка Лебедева (возможно, к тому моменту, когда Уважаемый Посетитель читает эти строки, дизайн уже изменился) - у постоянных посетителей правый глаз значительно меньше левого :)... Однако, решение проблемы композиции создает другую проблему - см. следующий пункт.
6. (---?) Основной недостаток фреймов (уже упоминавшийся) - появление полосы прокрутки в середине экрана. Зрелище (об этом можно даже не говорить) отнюдь не из приятных. Однако, с прокруткой можно (и нужно) бороться. Способов борьбы мне на данный момент известно два. Первый заключается в использовании прокрутки в качестве элемента оформления ("окно в окне"), второй - в замене прокрутки декоративным оформлением в стиле Вашего сайта. Оба способа будут детально рассмотрены ниже.
7. (-/+) Если посетитель сайта вдруг возжелает занести адрес документа в свои букмарки (bookmarks), записан будет адрес фреймсета, но (увы) не положение документов внутри него. Повторно вернувшись по закладке, посетитель увидит те документы, которые прописаны во фреймсете по умолчанию, но (что очень вероятно) совсем, не те, на которые подразумевалась закладка. В результате пользователю придется произвести дополнительно кликать мышкой и ждать... Неприятно.. для пользователя... Но вебмастеру это может быть выгодно - ведь пользователь нащелкает ему дополнительных показов баннеров, которых всегда мало. Главное при этом не злоупотреблять терпеливостью пользователя. Один (но не два и более) щелчок для попадания в нужное место последнего не сильно огорчит.

Как видим, пока плюсов больше, чем минусов, хотя и не намного. Постараемся склонить чашу весов в сторону фреймов...

Дальше рассказ пойдет о том

1. Как использовать глобальные переменные Java Script в фреймсете. Рассматриваются два примера: сайт с картинками и реализация ниспадающих меню.
2. Как красиво вписать прокрутку в центре экрана в оформление сайта.
3. Как избавиться от прокрутки и поменять ее на нечто более стильное.

Глава 1
ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ
JAVA SCRIPT

Разберем использование глобальной переменной Java Script в фреймсодержащих документах на примере простой задачи - сайт с картинками.

---

Пример 1

Имеем два фрейма. В первом - превью картинок (thumbnails), во втором ожидается собственно сама картинка большого размера. Картинок много (возьмем 20), они часто обновляются и/или изменяются. Одновременно показывается определенное количество превью (5 штук), причем существуют ссылки на следующую/предыдущую группу.

Все картинки и превью хранятся в подкаталоге Images и названы соответственно pic1.gif...pic50.gif и pic1_Thumb.gif...pic50_Thumb.gif.

Фреймсет-файл выглядит банально, за исключением Java Script строк инициализации переменной.

<script language="JavaScript">
PicNum = 0;
MaxNum = 20;
Thumbs = 5;
ThumbsStart = 1;
</script>
<frameset rows="*, 150" border="0" framespacing="0">
<frame src="Pic.html" name = "Pic" frameborder="NO">
<frame src="Thumbs.html" name = "Thumbs" frameborder="NO">
</frameset>

Файл с превью автоматически генерирует тело html документа на основе информации, которая передана ему в глобальных переменных, определенных выше. Но сначала определим основные функции. GotoNext () и GotoPrev () выполняют переход на соответственно следующую и предыдущую группы превью.

<script language="Java Script">

function GotoPrev () {
top.ThumbsStart = top.ThumbsStart - top.Thumbs;
self.location = "Thumbs.html";
}

function GotoNext () {
top.ThumbsStart = top.ThumbsStart + top.Thumbs;
self.location = "Thumbs.html";
}

function SetPicNum (Num) {
top.PicNum = Num;
}

</script>

Теперь собственно сгенерируем тело документа:

<script language="JavaScript">
document.write ("<center>");
n1 = parent.ThumbsStart;
n2 = top.ThumbsStart + top.Thumbs - 1;
if (n2 > top.MaxNum){n2 = top.MaxNum};
if (n1 != 1){document.write ("<a href=\"javascript:GotoPrev()\">PREV</a> ");}
for (n = n1; n<=n2; n++)
{
ThumbName = "Images/pic" + n + "_Thumb.gif";
document.write ("<a href = \"Pic.html\" target = \"Pic\" onClick = \"SetPicNum (" + n +")\"><img src = \"" +ThumbName + "\"></a> ");
}
if (n2 < top.MaxNum){document.write ("<a href=\"javascript:GotoNext()\">NEXT</a> ");}
document.write ("</center>");
</script>

Как это работает? Рассказываем подробности. Переменные n1 и n2 определяют номера соответственно первой и последней картинок в данной группе превью. В зависимости от их значений в тело документа вписываются ссылки на предыдущую и последующие группы. Причем переключение между этими группами осуществляется путем банальной перезагрузки фрейма тем же самым документом, но картинки будут уже совсем другими, потому что изменилось значение глобальной переменной ThumbsStart.

Затем в цикле мы по очереди вставляем в документ превью картинок обрамленные ссылкой на файл Pic.html (target="Pic"). Не удивляйтесь, что все картинки ссылаются на один и тот же документ. Когда пользователь щелкает на превью, по onClick активизируется функция SetPicNum (n), изменяющая глобальную переменную PicNum. Фрейм с большой картинкой тупо перегружается и показывает нам картинку, номер которой содержится в упомянутой переменной:

<script language="JavaScript">
if (top.PicNum != 0) {
PicName = "Images/pic" + top.PicNum + ".gif";
document.write ("<p align=\"center\"><img src = \"" + PicName "\"></p>");
}
else { document.write ("<p align=\"center\">Картинка не выбрана</p>");}
</script>

Если фреймсет загрузился в первый раз значение переменной PicNum = 0, программа выведет пояснительный текст.

Работу системы можно посмотреть здесь (открывается в новом окне броузера). Скачать архив с данным примером для анатомического вскрытия и изучения можно здесь (zip 30.7 K).

Преимущество данного способа заключается в простоте реализации. Всего три (!) файла. Причем, если Вы решите добавить новые картинки, независимо от их количества (хоть несколько тысяч!) обновление документов сведется к изменению всего одной строки во фреймсет-файле (значение MaxNum).

Недостатки у этого способа тоже есть (их не может не быть). Во-первых, перегружая окно броузера (по Reload или Refresh), пользователь увидит начальную страничку, ибо все переменные возвратятся к своим начальным значениям. Во-вторых, ссылки вокруг всех превью (цвет бордюра) будут показаны как уже посещенные, потому что параметр href во всех ссылках одинаков (указывает на один файл), что может сбить с толку посетителя сайта, особенно, если превью недостаточно разборчивы.

---

Пример 2

Здесь мы рассмотрим более актуальный случай - динамически раскрывающиеся меню. Пусть у нас есть три пункта меню, в каждом из которых есть свои подменю (по две штуки). Назовем их незатейливо (в жизни все гораздо интересней) - Menu1 ... Menu3, SubMenu1_1, SubMenu1_2 ... SubMenu3_2

Открытости/закрытости пункта меню поставим в соответствие элемент массива булевых переменных. Значение true (1) соответствует открытому пункту меню, false (0) - закрытому. Инициализируется массив во фреймсете:

MMenu = new Array(false, false, false);

Файл меню выглядит следующим образом:

<script language="JavaScript">
function SwitchMenu (Num){
top.MMenu[Num] = !top.MMenu[Num];
}
function PicName (Num){
if (top.MMenu[Num]){Pname = "Open.gif"}
else {Pname = "Closed.gif"}
return (Pname); }
Pic1url = "Images/" + PicName(0);
Pic2url = "Images/" + PicName(1);
Pic3url = "Images/" + PicName(2);
document.write ("<a href=\"Menu.html\" onClick=\"SwitchMenu(0)\"><img src=\"" + Pic1url + "\" border=\"0\"> <b>Menu1</b></a>");
if (top.MMenu[0]) {document.write ("<br><a href=\"#\"> SubMenu1_1</a><br><a href=\"#\">SubMenu1_2</a>") }
document.write ("<br><a href=\"Menu.html\" onClick=\"SwitchMenu(1)\"><img src=\"" + Pic2url + "\" border=\"0\"> <b>Menu2</b></a>");
if (top.MMenu[1]) {document.write ("<br><a href=\"#\"> SubMenu2_1</a><br><a href=\"#\">SubMenu2_2</a>")
document.write ("<br><a href=\"Menu.html\" onClick=\"SwitchMenu(2)\"><img src=\"" + Pic3url + "\" border=\"0\"> <b>Menu3</b></a>");
if (top.MMenu[2]) {document.write ("<br><a href=\"#\"> SubMenu3_1</a><br><a href=\"#\">SubMenu3_2</a>")} </script>

По-моему текст скрипта настолько туп, прямолинеен и очевиден, что в пояснениях не нуждается. Автоматизировать генерацию html документа не имеет смысла (субъективное мнение) по причине того, что все пункты меню и подменю имеют разные (в жизни) ссылки. Хотя, в принципе, можно было бы сделать код несколько менее громоздким и более универсальным, задав пункты меню и подменю, ссылки в соответствующих массивах данных внутри фреймсет-документа или даже внутри самого файла Menu.html.

Рабочую версию примера можно посмотреть здесь (открывается в новом окне), скачать здесь (zip 1.75 K).

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

Глава 2
ИСПОЛЬЗОВАНИЕ ПРОКРУТКИ
КАК ЭЛЕМЕНТА ОФОРМЛЕНИЯ

Классическим способом обернуть появление прокрутки в свою пользу, о котором и пойдет речь в этой главе, является использование такого типа оформления, как "окно в окне".

Данное решение было найдено автором статьи вследствие незначительного напряжения мышц головного мозга. Не исключаю, впрочем, вероятности, что кто-нибудь другой параллельно пришел к аналогичному результату, ведь решение НАСТОЛЬКО простое и нехитрое, что об этом даже неловко писать. Итак...

---

Пример 3

Разобьем экран на фреймы так, как показано на рисунке 1. Значения X(left) и X(right) одинаковы (хотя в жизни это может быть и по-другому), они изменяются в зависимости от разрешения экрана пользователя. Таким образом, наша композиция логично размещается в центре экрана. Значения X(center), а также Y(top) и Y(buttom) - фиксированы и остаются неизменными при любом разрешении экрана. Получаем рабочее окно в центре экрана фиксированной ширины и переменной высоты.

рис.1.

Если текст (в общем, информация) не помещается в центральном рабочем фрейме (назовем его Body), у правого края последнего появляется нелюбимая всеми прокрутка. На возникший вопрос "Как вписать прокрутку в оформление сайта?" мы и постараемся теперь ответить.

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

В нашем случае необходимо заполнить фоном фреймы (Top и Buttom), имеющие уникальную особенность - фиксированный размер (в пикселях)! Не об этом ли мечтает каждый веб-дизайнер - теперь картинка будет выглядеть абсолютно одинаково во ВСЕХ броузерах при ЛЮБЫХ разрешениях! Мы может вписать элемент оформления с точность до пикселя, и, что самое интересное, этим элементом теперь послужит background, воспроизведя себя внутри фрейма один единственный раз (фреймы Top и Buttom).

Фоновые картинки в каждом фрейме собирают в единое целое некое подобие окна внутри экрана - "Окно в окне". Выбор фоновой картинки для каждого фрейма иллюстрирует рисунок 2.

Рис. 2.

Естественно, для получения целостной картины необходимо удалить любые признаки границ между фреймами, иными словами, избавиться от bordera.

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

Что получается в результате - Вы уже можете наблюдать на примере моего сайта. Рабочую версию этого примера можно увидеть здесь (открывается в новом окне). Для ознакомления с исходниками - пример упакован в архив (zip 34.1 K)

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

---

Пример 4

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

Отличием данного примера от предыдущего есть только дизайн, описывать который особого смысла не имеет. Принцип же построения остается аналогичным. Поэтому Вы можете сразу посмотреть результат (открывается в новом окне), либо скачать оригинальные файлы для ознакомления здесь (zip 30.4 K).

Глава 3
ПРОКРУТОК БОЛЬШЕ НЕТ...

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

Как избавиться от прокруток, знает, наверное, каждый школьник. Но на всякий случай напомню. Во фреймсет файле при определении конкретного фрейма прописываются следующие строки: scrolling="NO"

Но позвольте! - воскликнет Уважаемый посетитель, - а как мы увидим все содержимое фрейма, если прокрутить его не имеем возможности? Однако, как Вы увидите позже, существуют способы крутить фрейм, не пользуясь при этом полосой прокрутки.

Первый способ заключается в использовании меток (anchors) внутри документа. Рассмотрим его на следующем примере.

---

Пример 5

Пусть у нас имеется фрейм содержащий список из 20 ссылок. В начало каждой строки поставим метку, название которой соответствует номеру ссылки ("1" ... "20"). Скроллинг внутри фрейма будет осуществляться банальной ссылкой на соответствующую позицию в документе, причем содержимое фрейма будет сдвигаться таким образом, чтобы строка с текущей меткой оказалась первой в видимой части фрейма.

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

и

Кликая на большой стрелочке, мы смещаем содержимое фрейма на самую первую/последнюю позицию списка. Маленькая стрелочка будет сдвигать список вверх/вниз на одну позицию (хотя шаг сдвига в принципе может быть любым). За каждой картинкой висит определенная JavaScript функция: соответственно ScrollMenuUp() / ScrollMenuDown() и ScrollNenuUpOne() / ScrollMenuDownOne(). Все перечисленные функции выполняют аналогичные функции - изменяют значение глобальной переменной CurAnchor, а затем передают управление функции ScrollMenu(), которая смещает список инструкцией

top.NavBar.location.href = "NavBar.html#" + top.CurAnchor;

где NavBar - имя фрейма со списком ссылок, NavBar.html - файл содержащийся в этом фрейме.

Работающий пример вы можете посмотреть здесь (открывается в новом окне). Исходники примера лежат здесь (Zip 5.63 K).

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

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

---

Пример 6

Пусть у нас имеется список из 10 ссылок, каждая из которых оформлена в виде картинки (MenuItem0 ... Menu Item9). Кроме того нам потребуются еще две кнопки такого же размера, которые будут пролистывать меню вверх и вниз, причем появляться кнопки со стрелочками будут только тогда, когда имеется необходимость в прокрутке элементов списка. Одновременно на экран выводится пять кнопок, из которых верхняя и/или нижняя могут быть прокрутками.

Фокус состоит в динамической замене картинки и ссылки под ней по аналогии со всем известным эффектом, называемым (в частности в Dreamweaverе) "Rollover Image".

Текст программы выглядит следующим образом:

CurTop = 0;
AllLinks = new Array("Menu1.html", ... "Menu10.html");
Links = new Array();
for (i=0; i<=3; i++){
Links[i] ="GotoUrl(" + i + ")";
}
Links [4] = "ScrollDown()";

Переменная CurTop указывает на смещение относительно самой верхней кнопки.

Массивы:
AllLinks - хранит все ссылки списка на другие документы сайта.
Links - хранит названия функций, которые будут вызываться при нажатии на одну из выведенных кнопок. Может принимать одно из следующих значений: "GotoUrl(n)" (здесь n - номер ссылки из массива AllLinks ), "ScrollUp()" или "ScrollDown()".

Определим основные функции:

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

function PreloadImages(){
Menu0 = new Image();
Menu0.src = "Images/MenuItem0.gif";
...
Menu9 = new Image();
Menu9.src = "Images/MenuItem9.gif";
Down = new Image();
Down.src = "Images/Down.gif";
Up = new Image();
Up.src = "Images/Up.gif"; }

Фнкции ScrollUp() и ScrollDown() соответственно декрементируют и инкрементируют переменную CurTop, а затем передают управление функции Redraw().

function ScrollUp(){
CurTop--;
Redraw();
return (true);
}

function ScrollDown(){
CurTop++;
Redraw();
return (true);
}

Функция Redraw () выполняет основную функцию по модификации текущего вида меню на основании нового значения переменной CurTop. Оператор If в начале и в конце функции определяет, необходимо ли в качестве соответственно верхнего или нижнего элемента меню поставить полноценную кнопку, или же необходимо поставить кнопку прокрутки. Также функция модифицирует массив Links в соответствии с новыми изображениями кнопок.

function Redraw (){

if (CurTop == 0){
MenuItem0.src = Menu0.src;
Links[0] = "GotoUrl(0)";}
else {
MenuItem0.src = Up.src;
Links[0] = "ScrollUp()";}

MenuItem1.src = eval ("Menu" + (CurTop +1) + ".src");
Links[1] = "GotoUrl(" + (CurTop +1) + ")";
MenuItem2.src = eval ("Menu" + (CurTop +2) + ".src");
Links[2] = "GotoUrl(" + (CurTop +2) + ")";
MenuItem3.src = eval ("Menu" + (CurTop +3) + ".src");
Links[3] = "GotoUrl(" + (CurTop +3) + ")";

if (CurTop == 5){
MenuItem4.src = Menu9.src;
Links[4] = "GotoUrl(9)";}
else {
MenuItem4.src = Down.src;
Links[4] = "ScrollDown()";}

}

Фукция GotoUrl (n) осуществляет загрузку документа во фрейм Body в соответствии с выбором пользователя.

function GotoUrl(n){
top.Body.location.href = AllLinks[n];
return (true);
}

Функция Click (n) является точкой входа в систему и запускается банальной ссылкой из документа. Значение параметра n соответствует положению в списке нажатой кнопки.

function Click(n){
x = eval(Links[n]);
}

Посмотреть рабочую версию примера можно здесь (открывается в новом окне), ознакомиться с исходниками - здесь (Zip 11.2 K).

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

---

Вот, пожалуй, и все, что я хотел рассказать Уважаемому посетителю про фреймы. Данная статья ни в коем случае не призывает отказаться от дизайна без фреймов, однако хотелось обратить Ваше внимание на те полезности, которые несут нам фреймы при участии JavaScript.

Спасибо за внимание! Отзывы и пожелания отправляйте на roolic@mail.ru или roolic@alfacom.net