Фреймы — это функция HTML, которая позволяет вам, как автору, управлять макетом веб-сайта в браузере пользователя. В частности, фреймы позволяют разделить окно браузера на прямоугольные секции, которые можно рассматривать как отдельные окна браузера. Их можно прокручивать, изменять их размер и загружать с разных веб-страниц. Эти разделы называются фреймами.
Хотя они не были признаны W3C в качестве официального аспекта какой-либо спецификации HTML до текущей версии HTML 4.0, фреймы поддерживаются двумя основными браузерами начиная с их ранних версий (Netscape Navigator начиная с версии 2.0, Microsoft Internet Explorer начиная с версии 3.0). Этот факт помог им стать одним из наиболее часто используемых (и неправильно используемых) «уловок» для улучшения дизайна веб-сайта.
При правильном использовании фреймы могут добавить структуру и простоту использования на сайт. При неправильном использовании фреймы на некоторых аппаратных установках сайт может выглядеть многолюдным, неоднородным, а иногда просто непригодным для использования. Их наиболее распространенное использование, создание не прокручивающейся строки меню в левой части окна, обычно является хорошей идеей; однако, если вы попытаетесь втиснуть слишком много информации в эту строку меню, некоторые пользователи с меньшими размерами монитора не смогут получить доступ к элементам в нижней части вашего меню. Неправильные макеты фреймов, подобные этим, заняли особое место в списке любимых мозолей большинства опытных веб-дизайнеров. По этой причине важно, чтобы вы изучали не только сильные стороны макетов на основе фреймов, но и их слабые стороны.
Для целей этой статьи предполагается базовое понимание HTML. Некоторое знание JavaScript и его принципов также будет полезно в последних разделах, но это не обязательно. Если вы хотите прочитать один из этих языков, я рекомендую серию HTML для начинающих и учебник по Javascript 101 .
Основные рамки
В этом разделе мы создадим очень простой набор фреймов. Затем мы изменим некоторые их свойства, чтобы они работали и выглядели так, как мы хотим.
Наш первый фреймсет
Люди часто удивляются тому, как легко создать веб-страницу, содержащую фреймы. Каждый прямоугольный раздел, на который вы хотите разделить окно браузера, называется фреймом. Чтобы определить набор фреймов, которые вы собираетесь отображать на своем веб-сайте, все, что вам нужно сделать, это написать специальный HTML-файл, который определяет размер, положение и исходное содержимое каждого фрейма. Затем вы должны написать отдельные HTML-файлы для содержимого каждого фрейма, так же, как для обычного окна браузера.
Не волнуйтесь, если это пока не имеет смысла … Я вернусь к этим идеям через минуту. А пока давайте сосредоточимся на файле HTML, который определяет ваш набор фреймов. Это просто называется frameset и выглядит примерно так:
<HTML> <HEAD> <TITLE> Our First Frameset </TITLE> </HEAD> <FRAMESET> <FRAME> <FRAME> ... </FRAMESET> <NOFRAMES> ... </NOFRAMES> </HTML> Обратите внимание, что этот HTML-файл не содержит <BODY> . Обратите внимание также на использование трех новых тегов в этом файле:
-
<FRAMESET> -
<FRAME> -
<NOFRAMES>
Тег <FRAMESET> занимает место <BODY> в «обычном» HTML-файле и используется для предоставления информации о наборе кадров, которые появятся в окне браузера. Такая информация, как то, как должно быть разделено окно, сколько кадров будет, и любая другая информация, которая относится к набору кадров в целом, указывается с помощью этого тега.
Давайте использовать конкретный пример. Предположим, вы хотите создать веб-страницу с горизонтальным разделением прямо в середине окна браузера. Другими словами, у вас будет два кадра, каждый из которых занимает 50% вертикального пространства в окне. Этот способ восприятия фреймов как делений доступного пространства важен, потому что вот как работает тег <FRAMESET>:
<FRAMESET ROWS="50%,*">
Это просто говорит браузеру:
«Мне нужен набор кадров, который делит окно на строки. Из доступного пространства первый кадр будет занимать 50%, а второй будет занимать все, что осталось».
Особенно обратите внимание на тот факт, что звездочка («*») означает «все, что осталось». Подробнее об этом позже.
Чтобы разместить разделение вертикально вниз в середине страницы, вы просто должны набрать следующее:
<FRAMESET COLS="50%,*">
Обратите внимание, что для краткости в HTML « COLS » означает «столбцы». То есть COLUMNS="50%,*" не сработает!
Теперь, как вы уже догадались, <FRAME> предоставляет информацию, специфичную для каждого отдельного кадра. Вам нужно будет ввести количество тегов <FRAME> , равное количеству кадров, которое вы указали с помощью <FRAMESET> . В нашем простом примере этот тег будет использоваться просто для того, чтобы сообщить браузеру, какой HTML-файл загружать в каждый кадр, следующим образом:
<FRAME SRC="topframe.html"> <FRAME SRC="botframe.html">
Таким образом, первый (верхний) кадр в нашем наборе кадров будет загружен с topframe.html , а второй (нижний) кадр будет содержать botframe.html .
Наконец, <NOFRAMES> следует за тегом <FRAMESET> и используется для указания содержимого, которое должно отображаться, если браузер пользователя не может отображать кадры. Хотя это становится все более редким явлением, многие учебные заведения по-прежнему позволяют учащимся выходить в Интернет через текстовые терминалы. Веб-браузеры для этого носителя, наиболее популярным из которых является Lynx, обычно не могут отображать фреймы.
<NOFRAMES> <P>Sorry, but it appears you are using a Web browser that does not support frames. Click <A HREF="noframes/ index.html">here</A> to access the non-frames version of our site.</P> </NOFRAMES>
Тег <NOFRAMES> работает, говоря любому браузеру, который поддерживает фреймы: «Не отображать это». Поскольку любой веб-браузер, который не поддерживает фреймы, больше не будет знать об этом теге, что он будет тегами <FRAMESET> и <FRAME> , он просто проигнорирует их все и останется с вложенным текстом для отображения. В приведенном выше примере я предоставил ссылку на версию сайта, которая не использует фреймы. Если это невозможно, все равно рекомендуется добавить примечание, сообщающее пользователям браузеров, не поддерживающих фреймы, о невозможности доступа к вашему сайту с помощью их браузера.
Собирая все это вместе, мы получаем наш простой набор из двух кадров.
Подробнее о <FRAMESET>
Как упоминалось выше, <FRAMESET> используется для предоставления информации о том, как окно должно быть разделено на фреймы. Это делается с помощью ROWS и COLS чтобы определить строки и столбцы, на которые окно должно быть разделено соответственно.
Эти подразделения могут быть определены тремя способами: проценты, пиксели и отношения. Эти три метода могут быть четко проиллюстрированы на нескольких примерах.
<FRAMESET COLS="50,*,*">
В этом примере окно будет разделено на три столбца; первый из которых будет занимать ширину 50 пикселей. Второй и третий кадры будут занимать половину оставшегося пространства.
<FRAMESET COLS="50%,*,20%">
Этот пример определяет три столбца, занимающих 50%, 30% и 20% окна соответственно. Первый и третий имеют свои проценты, а второй занимает оставшиеся 30% окна.
<FRAMESET ROWS="3*,1*,2*">
На этот раз окно будет разделено на строки вместо столбцов. Первое займет половину высоты окна, второе — шестое, а последнее — треть окна. Поначалу это может показаться странным, но подумайте об этом с точки зрения соотношений. Окно разделено на 6 равных частей (3 + 1 + 2 = 6). Первый кадр занимает 3 из них (три шестых — половина), второй — 1 (шестой), а последний — оставшиеся два (два шестых — третий).
<FRAMESET ROWS="30,50%,2*,1*">
На этот раз будет четыре ряда. Первый кадр занимает 30 пикселей высоты окна, а остальные занимают остальные. Второй кадр займет 50% от общей высоты окна браузера. Третий и четвертый кадры занимают пространство, оставленное в соотношении 2 к 1. То есть второй кадр занимает вдвое больше места, чем третий.
Как правило, не рекомендуется смешивать три метода, как это. Этот метод делает очень трудным для того, кто читает ваш код, угадать, как он будет выглядеть раньше времени. В таких случаях я обычно рекомендую использовать вложенные наборы кадров для удобства чтения. Подробнее об этом через минуту.
Вы можете использовать либо ROWS или COLS самостоятельно, либо вместе, чтобы определить расположение сетки:
<FRAMESET ROWS="60,50%,*" COLS="1*,2*,3*"> <FRAME SRC="frame1.html"> <FRAME SRC="frame2.html"> <FRAME SRC="frame3.html"> <FRAME SRC="frame4.html"> <FRAME SRC="frame5.html"> <FRAME SRC="frame6.html"> <FRAME SRC="frame7.html"> <FRAME SRC="frame8.html"> <FRAME SRC="frame9.html"> </FRAMESET>
Если вам нужна большая гибкость в определении вашего макета, вы можете использовать технику, называемую вложенными наборами кадров. Как следует из названия, это включает в себя размещение наборов кадров внутри наборов кадров. Например, если вам нужна навигационная панель шириной 50 пикселей по левой стороне вашей страницы, но вы также хотели иметь рамку заголовка высотой 30 пикселей в верхней части страницы, вы можете использовать это:
<FRAMESET COLS="50,*"> <FRAME SRC="menu.html"> <FRAMESET ROWS="30,*"> <FRAME SRC="title.html"> <FRAME SRC="body.html"> </FRAMESET> </FRAMESET>
Обратите внимание, как идет «внутренний» <FRAMESET> куда обычно идет тег <FRAME> . Вы заменяете столько фреймов, сколько хотите, на вложенные наборы фреймов, и вы даже можете определить наборы фреймов внутри наборов фреймов внутри наборов фреймов (и так далее)!
Помимо ROWS и COLS , к тегу <FRAMESET> есть несколько других атрибутов, которые позволяют влиять на то, как выглядит набор фреймов:
FRAMEBORDER="n"
Устанавливает, отображать или нет 3D-границу между кадрами. Если n равно 1, 3D-граница будет отображаться так же, как если бы этот атрибут был пропущен. Если n равно 0, граница будет невидимой. Вы также можете использовать YES вместо 1 и NO вместо 0. Этот атрибут работает с Netscape и Internet Explorer версий 3 и новее.
BORDER="n"
Устанавливает ширину 3D границы между кадрами. n это количество пикселей. Этот атрибут работает с Netscape версий 3 и новее и Internet Explorer версий 4 и новее.
FRAMESPACING="n"
Устанавливает количество пространства между кадрами. n это количество пикселей. Это позволяет вам размещать ваши рамки, даже если вы решили не отображать 3D-границы. Этот атрибут работает только с браузерами Internet Explorer.
BORDERCOLOR="color"
Устанавливает цвет 3D-границы между кадрами. Цвет — это стандартный цвет HTML (например, « RED », « #FFFFFF » и т. д.). Этот атрибут работает с Netscape 3 и выше, а также с Internet Explorer 4.
Попробуйте сами, но всегда помните, какие браузеры поддерживают используемые вами атрибуты, а какие нет. Кроме того, убедитесь, что ваш набор фреймов можно использовать в максимально возможном количестве браузеров, чтобы люди могли получить доступ к самой важной части вашего сайта — контенту.
Подробнее о <FRAME>
Как вы, без сомнения, уже знаете, основная функция <FRAME> заключается в установке начального содержимого каждого кадра в вашем наборе кадров. Как и <FRAMESET> , он также принимает несколько других атрибутов, которые позволяют вам изменить способ работы отдельного фрейма. Если не указано иное, эти атрибуты работают в Netscape 2 и выше и Internet Explorer 3 и выше.
NAME="name"
Позволяет установить имя для вашего кадра. name — это фрагмент текста, обычно заключенный в кавычки. Задавая имя фрейма, вы можете назначать ему гипертекстовые ссылки и манипулировать им с помощью JavaScript. Примеры этих методов приведены в следующих разделах этой статьи.
FRAMEBORDER="n"
Устанавливает, отображать или нет 3D-рамку вокруг этого кадра. Если n равно 1, 3D-граница будет отображаться. Если n равно 0, граница будет невидимой. Вы также можете использовать YES вместо 1 и NO вместо 0. Использование этого в <FRAME> переопределит атрибут FRAMEBORDER вмещающего <FRAMESET> , если таковой имеется. Этот атрибут работает с Netscape и Internet Explorer версий 3 и новее.
NORESIZE
Предоставляет пользователю возможность изменять размер этого кадра, перетаскивая его границу с помощью мыши. Синтаксис просто NORESIZE ; ему не нужно присваивать значение.
SCROLLING="value"
Определяет, должны ли полосы прокрутки отображаться в этом кадре. value может быть YES , NO или AUTO . Если YES , горизонтальные и вертикальные полосы прокрутки всегда будут отображаться, даже если содержимое рамки достаточно мало, чтобы поместиться внутри рамки сразу. Если NO , полосы прокрутки никогда не будут отображаться, даже если содержимое кадра слишком велико, чтобы поместиться в кадр сразу. AUTO указывает, что кадр должен вести себя нормально; отображение полос прокрутки только тогда, когда содержимое превышает размер кадра.
ПРИМЕЧАНИЕ. Если вы не NORESIZE особую осторожность, кадр, использующий NORESIZE и NORESIZE SCROLLING=NO может представлять проблему для пользователей с экранами меньшего размера. Не используйте эту комбинацию, если вам не нужно. Если вы это сделаете, обязательно протестируйте его на экране 640 × 480 пикселей, чтобы убедиться, что он все еще пригоден для использования.
MARGINWIDTH="n"
Устанавливает расстояние между левой и правой границами рамки и ее содержимым. n это количество пикселей. Браузеры Internet Explorer принимают значения от 0 или выше, но браузеры Netscape принимают только значения от 1 и выше, а от 0 до 1.
MARGINHEIGHT="n"
Устанавливает расстояние между верхней и нижней границами рамки и ее содержимым. n это количество пикселей. Браузеры Internet Explorer принимают значения от 0 или выше, но браузеры Netscape принимают только значения от 1 и выше, а от 0 до 1.
СОВЕТ: Если вы хотите, чтобы содержимое фрейма находилось по краям, вы должны комбинировать несколько приемов для разных браузеров. Во-первых, используйте MARGINWIDTH и MARGINHEIGHT 0 для браузеров Internet Explorer. Для Netscape 4 вы также должны установить MARGINWIDTH и MARGINHEIGHT 0 в <BODY> HTML-файла (ов) для загрузки в рассматриваемый фрейм. Однако они не будут распознаваться Netscape 3 или более ранней версией, для которой существует минимальный запас в один пиксель, которого нельзя избежать в кадрах.
Еще раз, эффекты этих атрибутов лучше всего демонстрируются, играя с ними самостоятельно. Всегда помните, какие браузеры будут поддерживать каждую функцию, которую вы используете. Никогда не используйте атрибут, который может исключать часть вашей целевой аудитории.
навигация
Теперь, когда вы знаете, как создавать кадры, пришло время научиться их использовать. Этот раздел научит вас, как фреймы влияют на работу ссылок на вашей странице. После этого мы будем использовать то, что мы узнали до сих пор, для разработки веб-сайта, который использует хорошо известный макет «строки меню».
Целевые ссылки
До фреймов, единственному, что веб-автору приходилось беспокоиться при создании гипертекстовой ссылки, было местоположение загружаемого документа. С фреймами новая проблема вводится. В какой кадр должен быть загружен документ?
Любой, кто хоть немного знаком с HTML, должен знать, что вы создаете гипертекстовую ссылку с помощью тега привязки <A> с атрибутом HREF .
<A HREF="newdoc.html">...</A>
По умолчанию newdoc.html будет загружен во фрейм, в котором была нажата ссылка. В некоторых случаях это именно то, что вы хотите. Но что, если вы создали сайт с двумя фреймами, один из которых содержал меню документов, которые можно загрузить в другой? В этом случае вы хотите, чтобы ссылки в фрейме меню были нацелены на основной фрейм.
Первый шаг для достижения этой цели — дать вашим фреймам имена. Как описано в предыдущем разделе, вы делаете это с помощью атрибута NAME тега <FRAME> . В нашем примере мы назвали бы наше меню фреймов и main, как показано здесь:
<FRAMESET COLS="75,*" FRAMEBORDER=0> <FRAME SRC="ourmenu.html" NAME="menu"> <FRAME SRC="introduction.html" NAME="main"> </FRAMESET>
Затем, чтобы все ссылки в фрейме меню были нацелены на наш основной фрейм, мы должны использовать атрибут TARGET <BASE> в заголовке ourmenu.html, который является файлом, загруженным в наш фрейм меню.
<HTML> <HEAD> <BASE TARGET="main"> </HEAD> <BODY> ...
«Хорошо, это все хорошо», — говорите вы. «Но что, если я хочу, чтобы разные ссылки в одном файле предназначались для разных фреймов?» Нет проблем! Тег <A> также поддерживает атрибут TARGET , который переопределяет любую цель, которую вы могли указать с помощью <BASE> .
<A HREF="newdoc.html" TARGET="main">...</A>
Используя это, вы можете на самом деле просто забыть о <BASE> и просто поставить TARGET на все ваши ссылки, но если нет четкой цели по умолчанию, вы обычно экономите на размере вашего файла, устанавливая его с помощью Тег <BASE> .
Специальные цели
Поскольку вы не всегда хотите, чтобы ссылка загружалась в один из ваших фреймов, есть несколько специальных целей, которые вы можете использовать. Они могут использоваться с тегами <BASE> или <A HREF> и должны вводиться точно так, как они отображаются здесь, поскольку они чувствительны к регистру.
TARGET="_self"
Загружает ссылку в тот же фрейм, что и сама ссылка. Это поведение по умолчанию, и оно работает так, как будто атрибут TARGET вообще не указан.
TARGET="_top"
Удаляет все кадры в вашем окне, а затем загружает новый документ в окно. Как правило, вы будете использовать это всякий раз, когда вы предоставили ссылку, ведущую на другой сайт. Если вы этого не сделаете, другой сайт будет загружен в ваши кадры, что приведет к некрасивому и иногда непригодному макету экрана. Если у вас нет особых причин не делать этого, всегда используйте это при предоставлении ссылок за пределами вашего сайта. Нет ничего более раздражающего для пользователя, чем застревание в чьих-то кадрах.
TARGET="_parent"
Загружает ссылку в родительский элемент текущего кадра. Проще говоря, он стирает набор фреймов, содержащий фрейм, содержащий ссылку, и загружает целевой документ на его место. Различие между _parent и _top возникает в случае вложенных наборов фреймов, где вы можете загрузить ссылку на следующий шаг вверх в порядке вложения, не стирая никаких «внешних» наборов фреймов. В простом, не вложенном _top _parent и _top делают одно и то же.
TARGET="_blank"
Открывает новое окно браузера и загружает в него целевой документ, оставляя текущий набор кадров без изменений. В некоторых ситуациях это предпочтительнее использования _top при предоставлении ссылки на чужой сайт.
Фреймовый сайт
Теперь, когда мы рассмотрели все основные навыки, необходимые для использования фреймов, давайте объединим все, что мы узнали, в конкретный пример. Любой, кто много путешествовал по сети за последние несколько лет, несомненно, заметил, что один из самых популярных макетов сайтов использует панель меню в левой части страницы. Популярный поворот заключается в том, чтобы поместить эту строку меню в рамку, чтобы основной контент сайта можно было прокручивать вверх и вниз, чтобы пользователь никогда не упускал из виду меню.
Как и для любого сайта на основе фреймов, мы начинаем с настройки нашего фрейм-набора. Мы назовем наш файл index.html фреймов index.html , предполагая, что это будет первая страница, загруженная при входе на наш сайт. Как и в любом файле набора фреймов, он не будет содержать <BODY> , но вместо этого будет использовать теги <FRAMESET> , <FRAME> и <NOFRAMES> для определения макета.
<HTML> <HEAD> <TITLE> Welcome to my Web site! </TITLE> </HEAD> <FRAMESET FRAMEBORDER=0 COLS="150,*"> <FRAME NAME="menu" NORESIZE SRC="mainmenu.html"> <FRAME NAME="main" SRC="welcome.html"> </FRAMESET> <NOFRAMES> <H1>Welcome!</H1> <P>This site was designed to use frames to provide a menu bar to ease navigation; however, your browser does not support frames. Click <AHREF="welcome.html">here</A> to go to the main page of our site, where you can use the alternative links we have provided to get around the site. </NOFRAMES> </HTML>
Обратите внимание на несколько вещей об этом примере. Мы использовали FRAMEBORDER=0 в <FRAMESET> чтобы скрыть 3D-границы, которые появляются между кадрами по умолчанию. Во многих случаях это делает макет на основе фреймов более привлекательным, делая его более прозрачным.
Затем мы использовали атрибут NAME <FRAME> чтобы назначить подходящее имя каждому из наших фреймов. Это поможет нам позже, когда нам нужно будет определить связи между нашими фреймами.
Также обратите внимание на использование атрибута NORESIZE в нашем первом <FRAME> . Это не позволяет пользователю изменять ширину строки меню и сохраняет макет нашего сайта так, как мы намеревались. Нам не нужно указывать NORESIZE для основного фрейма, потому что это происходит автоматически, когда мы отключаем изменение размера фрейма меню. У нас есть два кадра. Очевидно, что если нам не разрешено изменять размер одного, мы не сможем изменить размер другого, поскольку это будет означать изменение размера первого, чтобы правильно заполнить окно.
Наконец, мы использовали <NOFRAMES> чтобы предоставить альтернативное приветственное сообщение пользователям, чьи браузеры не поддерживают фреймы. Поскольку мы не хотим создавать совершенно другую версию нашего сайта для браузеров, не поддерживающих фреймы, мы просто предоставляем ссылку на тот же файл, который мы обычно загружаем в наш основной фрейм. Затем мы можем предоставить сдержанный набор ссылок, чтобы обойти наш сайт на главных страницах.
Далее нам нужно оформить наше меню. Как установлено в frameset, наше главное меню будет содержаться в файле mainmenu.html . Это будет HTML-файл, как и любой другой, за исключением того, что нам не понадобится <TITLE> , потому что у фреймов нет строк заголовка, в которых отображается их заголовок.
<HTML> <HEAD> <BASE TARGET="main"> </HEAD> <BODY BGCOLOR="DarkSlateBlue" BACKGROUND="menuback.gif" TEXT="white" LINK="LightSkyBlue" ALINK="Orange" VLINK="#FF9900"> <BASEFONT SIZE="2" FACE="Arial, Helvetica, sans-serif" SIZE="-1"> <H3>Main Menu</H3> <HR NOSHADE> <A HREF="welcome.html">Welcome</A> <P><A HREF="products.html">Products</A> <P><A HREF="order.html">Order</A> <P><A HREF="support.html">Support</A> <P><A HREF="info.html">Info</A> <HR NOSHADE> </BODY> </HTML>
Здесь главное отметить тег <BASE> , который мы использовали для указания цели по умолчанию для ссылок в этом файле. Проще говоря, это заставляет все ссылки в нашем меню загружать свои целевые файлы в основной фрейм.
Осталось только создать главные страницы нашего сайта. Они будут написаны точно так, как если бы на нашем сайте вообще не было рамок. Нет необходимости использовать <BASE> , потому что имеет смысл, что, если мы не укажем иное с помощью атрибута TARGET в нашем теге <A> , мы хотим, чтобы ссылки на наших главных страницах загружались в наш основной фрейм. Помните, что для тех пользователей, чьи браузеры не поддерживают эти фреймы, мы должны разместить где-то сдержанный набор ссылок, совпадающих с теми, что находятся в нашем фрейме меню.
Я представил основы того, как будет выглядеть этот сайт. Используйте следующие ссылки для просмотра. Когда вы закончите, закройте окно, чтобы вернуться сюда. Не стесняйтесь использовать этот код на своем собственном сайте, если хотите.
Расширенные вопросы
Для тех из вас, кому особенно любопытно, или для тех, кто уже хорошо разбирается в фреймах, но хотел бы выучить одну или две причудливые уловки, в этом разделе рассматриваются два продвинутых метода фрейма. Первый охватывает, пожалуй, самый часто задаваемый вопрос в мире фрейм-дизайна: «Как сделать так, чтобы одна ссылка меняла два фрейма?» Второй — это хитрый трюк, позволяющий избежать написания множества маленьких HTML-файлов для заполнения простых и повторяющихся фреймов.
Оба эти метода требуют определенного понимания JavaScript, но я объясню все с нуля. Любой, кто имеет базовое понимание концепций программирования, не должен испытывать никаких проблем.
Многокадровые ссылки
Итак, вы писали прямоугольные прямоугольники на заметках Post-It весь день, и вы, наконец, придумали окончательный макет для вашего нового сайта. Вы просеиваете смятые желтые квадраты, покрывающие ваш стол, чтобы найти свою мышь, и открываете свой редактор. Когда вы смотрите на экран, вы внезапно приходите в ужасное осознание. Чтобы ваш макет работал, вам нужно сделать одну ссылку, чтобы изменить содержимое двух фреймов.
Ты утонул? Конечно, нет! Введите JavaScript. Используя этот простой язык, мы изменим нашу ссылку, чтобы вместо загрузки файла во фрейм он вызывал небольшой кусочек JavaScript, который мы отложили, определив его в заголовке нашего файла. Этот фрагмент JavaScript называется функцией, и он будет выполнять сложную работу по смене нескольких кадров одновременно. Подробнее об этом через минуту.
Прежде чем идти дальше, позвольте мне сказать, что методика, описанная здесь, будет работать для всех браузеров Netscape, а также для Internet Explorer 4.0. Пользователи Internet Explorer 3.0 не смогут получить доступ к вашему сайту должным образом, если вы воспользуетесь этой техникой, поэтому убедитесь, что вы взвешиваете свои варианты, чтобы решить, действительно ли многокадровые ссылки того стоят.
Если вы новичок в JavaScript, позвольте мне описать, как работает этот умный язык. JavaScript — это то, что обычно называют объектно-ориентированным языком программирования. Проще говоря, это означает, что он думает обо всем с точки зрения объектов. Ваш веб-браузер — это объект, окно браузера — это объект, изображения на ваших веб-страницах — это объекты, а ваши фреймы — это объекты! Хорошая вещь об объектах в том, что вы можете изменить их. Вещи, которые вы можете изменить в конкретном объекте, называются свойствами этого объекта.
Одним из свойств объекта, представляющего окно браузера (объект окна), является документ. Оказывается, документ также является объектом (разве я не говорил вам, что все было объектом?). Одним из свойств объекта документа является его местоположение. Это местоположение — URL документа, отображаемого в данный момент окном.
«Какое это имеет отношение к моей проблеме с многокадровыми ссылками?» ты спрашиваешь. Ну, как я уже сказал, вы можете изменить свойства объектов. Так что же произойдет, если вы измените свойство местоположения документа одного из ваших фреймов? Ну, фрейм, естественно, загружает новый URL. А в JavaScript нет ничего, что могло бы помешать вам изменить столько свойств объектов, сколько вы пожелаете!
Позвольте мне вначале показать вам JavaScript, связанный с изменением содержимого одного фрейма.
parent.frames["name"].document.location = "newdoc.html";
Где name — это имя фрейма, который вы хотите изменить, а newdoc.html — это имя файла или URL нового документа, который будет загружен в этот фрейм. Это способ JavaScript сказать:
«В родительском окне в рамке с именем
"name" измените местоположение документа на "newdoc.html" .»
Итак, теперь у вас есть действительно причудливый способ делать то, что вы уже знаете, как делать. Как изменить местоположение более одного кадра? Ну, вы просто повторяете эту строку JavaScript для каждого кадра, который хотите изменить.
parent.frames["frame1"].document.location = "newdoc1.html"; parent.frames["frame2"].document.location = "newdoc2.html"; ...
Итак, куда же все эти причудливые вещи из JavaScript ушли? Ну, как я уже говорил, каждая из ваших ссылок будет вызывать небольшой кусочек JavaScript, называемый функцией. Вы определяете функции в заголовке вашего HTML-файла внутри <SCRIPT> .
<HTML> <HEAD> ... <SCRIPT LANGUAGE="JavaScript"> <!-- Hide from older browsers function speciallink() { parent.frames["frame1"].document.location = "newdoc1.html"; parent.frames["frame2"].document.location = "newdoc2.html"; } // --> </SCRIPT> </HEAD> ...
В приведенном выше примере мы определили функцию JavaScript под названием speciallink() , которая изменяет содержимое двух фреймов. Теперь осталось только запустить эту функцию, когда пользователь нажимает на правильную ссылку.
Все, что для этого требуется, — это <A HREF> тега <A HREF> мы все знаем и любим:
<A HREF="javascript:speciallink()">...</A>
Мы называем это ссылкой JavaScript. Это просто говорит браузеру, что при щелчке по ссылке необходимо запустить функцию JavaScript под названием speciallink() , которая, как вы знаете, определяется в заголовке файла.
При использовании этого метода важно не использовать атрибут TARGET тега <A> . Помните, что в этом случае у вас есть несколько «целевых» фреймов, и они уже указаны в функции JavaScript. Если бы вы использовали атрибут TARGET , ваш браузер искал бы функцию JavaScript в указанном вами кадре TARGET . В некоторых особых случаях вы можете захотеть сделать это, но для наших целей этого следует избегать. По этой же причине не используйте метод <BASE TARGET=...> для указания целевого фрейма по умолчанию в документе со ссылками JavaScript.
Таким образом, чтобы подвести итог, для каждой ссылки, которую вы хотите изменить более чем на один кадр, создайте функцию JavaScript, которая вносит необходимые изменения. Затем укажите на эту функцию с помощью ссылки JavaScript.
В качестве примера рассмотрим пример фрейм-сайта, который мы создали в предыдущем разделе. В верхней части каждой страницы у нас был заголовок крупным шрифтом, который соответствовал разделу сайта, на котором вы были (Продукты, Заказ, Поддержка клиентов и т. Д.). Что если мы захотим поместить этот заголовок в его собственный фрейм вверху страницы, чтобы при прокрутке пользователя он оставался видимым? Всякий раз, когда пользователь щелкает ссылку в меню, нам приходится менять заголовок и главную страницу.
Это легко сделать с помощью новых методов, которые мы изучили. Вот наш модифицированный пример:
Если вы собираетесь использовать эту технику в больших масштабах, вы можете потратить немного времени на изучение JavaScript. Представьте, например, что ваш сайт имеет пять основных разделов, каждый из которых состоит из нескольких подразделов, и вы хотите иметь возможность обрабатывать многокадровые ссылки не только в вашем меню, но и на главных страницах. Вам придется написать невероятное количество функций JavaScript и повторить их в заголовке почти каждого HTML-файла на вашем сайте.
Обладая хорошим знанием JavaScript, можно делать такие вещи, как совместное использование одной многоцелевой функции между всеми вашими фреймами и файлами HTML. Таким образом, вы можете значительно сократить объем кода, необходимого для реализации этого метода на большом сайте. Простая техника, которую я продемонстрировал здесь, отлично подойдет для небольшого личного сайта.
Сценарии
Часто, когда вы пишете сайт на основе фреймов, вы хотите использовать фрейм для отображения чего-то простого, например, заголовка или определения, и вы пишете множество небольших HTML-файлов для загрузки в этот фрейм.
Давайте возьмем практический (если обыденный) пример фрейма, для которого мы можем выбрать цвет текста и фона. В одном кадре у нас будут ссылки для каждой комбинации текста и фона. В другом мы покажем результат по выбору пользователя. Теперь, когда нам нужен только один HTML-файл для фрейма, содержащего ссылки, нам потребуется отдельный HTML-файл для каждой цветовой комбинации, которую мы хотим отобразить во втором фрейме. Каждый из этих файлов будет небольшим и будет выглядеть так:
<HTML> <BODY BGCOLOR="bgcolor" TEXT="textcolor"> Can you read this? </BODY> </HTML>
Довольно скучно, а? Хуже всего то, что вам не нужно вводить их по одному, а в том, что браузер пользователя должен будет загружать каждый из них по отдельности! Что если я скажу вам, что нет необходимости писать каждый из этих маленьких файлов? Что если я скажу вам, что вы можете изменить содержимое фрейма, не загружая новый HTML-файл?
В предыдущем разделе я немного рассказал вам об объектах, свойствах и функциях JavaScript. Что ж, бывает так, что некоторые объекты JavaScript, помимо наличия свойств, которые вы можете изменить, также имеют встроенные функции, которые вы можете использовать, чтобы делать с ними особые вещи. Эти встроенные функции называются методами.
Как вы помните, объект документа представляет файл HTML, загруженный в данный фрейм. Мы уже видели, что у объекта документа есть свойство с именем location, которое вы можете использовать для загрузки в него нового файла. Как выясняется, объект документа также имеет метод write() , который позволяет напрямую изменять содержимое фрейма. Наряду с write() , нам также понадобятся два других метода: open() и close() . open() очищает содержимое документа и подготавливает его для write() с использованием метода write() . close() сообщает вашему браузеру, что вы завершили запись в документ, и теперь он может отображать внесенные вами изменения.
Поэтому вместо загрузки нового файла мы могли бы изменить содержимое нашего примера фрейма следующим образом:
parent.frames["sample"].document.open(); parent.frames["sample"].document.write('<HTML>'); parent.frames["sample"].document.write('<BODY BGCOLOR="bgcolor" TEXT="textcolor">'); parent.frames["sample"].document.write('Can you read this?'); parent.frames["sample"].document.write('</BODY>'); parent.frames["sample"].document.write('</HTML>'); parent.frames["sample"].document.close();
Обратите внимание, что текст, который мы хотим записать, находится в скобках в write() и заключен в одинарные кавычки ( ' ). Выбор одинарных кавычек был сделан таким образом, чтобы они не мешали каким-либо двойным кавычкам ( " ) в написанном HTML-коде.
В качестве ярлыка мы создадим переменную для хранения местоположения документа, в который мы пишем. Думайте об этом как о «закладке» JavaScript, которую мы можем использовать для ссылки на документ parent.frames["sample"].document С удобным именем. Мы используем ключевое слово var чтобы создать новую переменную и присвоить ей значение.
var sampledoc = parent.frames["sample"].document; sampledoc.open(); sampledoc.write('<HTML>'); sampledoc.write('<BODY BGCOLOR="bgcolor" TEXT="textcolor">'); sampledoc.write('Can you read this?'); sampledoc.write('</BODY>'); sampledoc.write('</HTML>'); sampledoc.close();
Теперь для большого трюка. Что если бы мы также использовали переменные для текста bgcolor и textcolor ? Затем мы можем изменить значение этих переменных на то, что нам нужно, и повторно использовать весь этот кусок кода, чтобы каждый раз писать наш примерный кадр!
var bgcolor = 'black'; var textcolor = 'lightsteelblue'; var sampledoc = parent.frames["sample"].document; sampledoc.open(); sampledoc.write('<HTML>'); sampledoc.write('<BODY BGCOLOR="' + bgcolor + '" TEXT="' + textcolor + '">'); sampledoc.write('Can you read this?'); sampledoc.write('</B></FONT>'); sampledoc.write('</BODY>'); sampledoc.write('</HTML>'); sampledoc.close();
Обратите внимание, как мы используем оператор « + » для склеивания фрагментов текста с содержимым наших двух переменных.
Чтобы завершить картину, мы вставляем весь этот кусок кода в функцию JavaScript. Функция позволяет нам запускать эту операцию записи всякий раз, когда пользователь нажимает на ссылку. Это также делает еще одну важную вещь. Это позволяет нам определять значения наших двух цветовых переменных, когда мы запускаем функцию! Мы делаем это, вставляя в круглые скобки в имени нашей функции имена переменных, которые мы хотели бы указать, когда функция запускается, разделенных двоеточиями.
Наша законченная функция будет выглядеть так:
function chgcolor(bgcolor,textcolor) { var sampledoc = parent.frames["sample"].document; sampledoc.open(); sampledoc.write('<HTML>'); sampledoc.write('<BODY BGCOLOR="' + bgcolor + '" TEXT="' + textcolor + '">'); sampledoc.write('Can you read this?'); sampledoc.write('</B></FONT>'); sampledoc.write('</BODY>'); sampledoc.write('</HTML>'); sampledoc.close(); }
Ссылка для запуска этой функции с черным фоном и текстом LightSteelBlue будет выглядеть следующим образом:
<A HREF="javascript:chgcolor('Black','LightSteelBlue');">...</A>
Вот и все! Теперь вы резко сократили объем загрузки, которую должен будет выполнять браузер пользователя, а также объем печати (в зависимости от того, сколько цветовых комбинаций вы планируете предлагать).
В итоге
В этой статье я постарался представить довольно полную картину методов, используемых при создании веб-сайтов с использованием фреймов. Я не только рассмотрел основы в терминах, которые, надеюсь, были доступны любому, имеющему элементарные знания в области веб-дизайна и общего программирования, но также затронул некоторые более сложные темы, которые могут оказаться полезными для более опытного веб-разработчика.
Для получения дополнительной информации о фреймах попробуйте: