Первые шаги - Учебник по фреймам. Как загружать два и более фреймов одним кликом мышки

Учебник по фреймам

Урок 8

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

Итак, сначала ссылки...

Создадим парочку новых документов. Первый сохраним как al_frank.html...

<Html>
<Head>
<Title></Title>
</Head>
<Body bgcolor="#33CCCC">

<Font size="+0">Друг Al'а</font><Br>
<Font size="+1">Frank</Font>

</Body>
</Html>

Посмотреть.

... а второй сохраним как al_steve.html.

<Html>
<Head>
<Title></Title>
</Head>
<Body bgcolor="#33CCCC">

<Font size="+0">Друг Al'а</font><Br>
<Font size="+1">Steve</Font>

</Body>
</Html>

Посмотреть.

Теперь внесем изменения во документ с меню (direct.html).

<Html>
<Head>
<Title></Title>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</Head>
<Body bgcolor="#FFFFFF">

<H3>Меню</H3>

<A href="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Друзья
Hugh'а</A><P>

<A href="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Друзья
Ron'а</A><P>

<A href="javascript:multiLoad('al_frank.html', 'al_steve.html')">Друзья
Al'а</A>

</Body>
</Html>

Посмотреть.

Как видите все просто. Продолжим закрепление пройденного материала.

Для этого нам понадобиться создать еще парочку документов. Первый сохраним как jake_bob.html...

<Html>
<Head>
<Title></Title>
</Head>
<Body bgcolor="#FFCC66">

<Font size="+0">Друг Jake'а</font><Br>
<Font size="+1">Bob</Font>

</Body>
</Html>

Посмотреть.

... а второй сохраним как jake_bub.html.

<Html>
<Head>
<Title></Title>
</Head>
<Body bgcolor="#FFCC66">

<Font size="+0">Друг Jake'а</font><Br>
<Font size="+1">Bubba</Font>

</Body>
</Html>

Посмотреть.

И снова внесем изменения в документ с меню (direct.html).

<Html>
<Head>
<Title></Title>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</Head>
<Body bgcolor="#FFFFFF">

<H3>Меню</H3>

<A href="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Друзья
Hugh'а</A><P>

<A href="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Друзья
Ron'а</A><P>

<A href="javascript:multiLoad('al_frank.html', 'al_steve.html')">Друзья
Al'а</A><P>

<A href="javascript:multiLoad('jake_bob.html', 'jake_bub.html')">Друзья
Jake'а</A>

</Body>
</Html>

Посмотреть.

Полагаю это было несложно.

Что ж, теперь, когда мы закрепили изученное, перейдем к более сложным вещам: мы увеличим количество фреймов в нашем документе. Для этого мы вернемся к варианту, когда в нашем меню только две ссылки на друзей Рона и Хага.

В итоге, мы придем к такому документу.

А пока что мы создадим снова несколько новых документов. Подружим Хага и Рона с новыми людьми.

Первый документ сохраните как hugh_jim.html

<Html>
<Head>
<Title></Title>
</Head>
<Body bgcolor="#CCFFFF">

<Font size="+0">Друг Hugh'а</font><Br>
<Font size="+1">Jim</Font>

</Body>
</Html>

Посмотреть.

Второй как hugh_bil.html

<Html>
<Head>
<Title></Title>
</Head>
<Body bgcolor="#CCFFFF">

<Font size="+0">Друг Hugh'а</font><Br>
<Font size="+1">Bill</Font>

</Body>
</Html>

Посмотреть.

Третий как ron_paul.html

<Html>
<Head>
<Title></Title>
</Head>
<Body bgcolor="#CCFF00">

<Font size="+0">Друг Ron'а</font><Br>
<Font size="+1">Paul</Font>

</Body>
</Html>

Посмотреть.

И четвертый как ron_sam.html

<Html>
<Head>
<Title></Title>
</Head>
<Body bgcolor="#CCFF00">

<Font size="+0">Друг Ron'а</font><Br>
<Font size="+1">Sam</Font>

</Body>
</Html>

Посмотреть.

Теперь в нашей папке, помимо всяких прочих документов, обязательно должны быть:

1) фрейм-документ (index.html)
2) страница с меню (direct.html)
3) и восемь документов с друзьями:
    - hugh_ed.html
    - hugh_cal.html
    - hugh_jim.html
    - hugh_bil.html
    - ron_mike.html
    - ron_pete.html
    - ron_paul.html
    - ron_sam.html

Изменим наш фрейм-документ (index.html), нет, даже лучше переделаем его с самого начала.

<Html>
<Head>
<Title></Title>
</Head>

</Html>

Разделим страничку по вертикали: в левом фрейме разместим меню (direct.html), а правый мы потом разделим еще на несколько частей.

<Html>
<Head>
<Title></Title>
</Head>

<Frameset cols="160,*">
    <Frame src="direct.html">
    <Frameset>
    </Frameset>
</Frameset>

</Html>

Посмотреть (помните, мы еще не до конца доделали, так что не надо беспокоится относительно всяких ошибок).

Теперь разделим правый фрейм по горизонтали пополам, а также введем еще несколько тегов <FRAMESET>

<Html>
<Head>
<Title></Title>
</Head>

<Frameset cols="160,*">
    <Frame src="direct.html">
    <Frameset rows="50%,50%">
        <Frameset>
        </Frameset>
        <Frameset>
        </Frameset>
    </Frameset>
</Frameset>

</Html>

Разделим пополам по горизонтали

<Html>
<Head>
<Title></Title>
</Head>

<Frameset cols="160,*">
    <Frame src="direct.html">
    <Frameset rows="50%,50%">
        <Frameset rows="50%,50%">
        </Frameset>
        <Frameset rows="50%,50%">
        </Frameset>
    </Frameset>
</Frameset>

</Html>

Введем теги <FRAME>

<Html>
<Head>
<Title></Title>
</Head>

<Frameset cols="160,*">
    <Frame src="direct.html">
    <Frameset rows="50%,50%">
        <Frameset cols="50%,50%">
            <Frame>
            <Frame>
        </Frameset>
        <Frameset cols="50%,50%">
            <Frame>
            <Frame>
        </Frameset>
    </Frameset>
</Frameset>

</Html>

Посмотреть

Укажем, какие документы загрузяться во фреймах

<Html>
<Head>
<Title></Title>
</Head>

<Frameset cols="160,*">
    <Frame src="direct.html">
    <Frameset rows="50%,50%">
        <Frameset cols="50%,50%">
            <Frame src="hugh_ed.html">
            <Frame src="hugh_cal.html">
        </Frameset>
        <Frameset cols="50%,50%">
            <Frame src="hugh_jim.html">
            <Frame src="hugh_bil.html">
        </Frameset>
    </Frameset>
</Frameset>

</Html>

Посмотреть

Теперь зададим имена тем фреймам (NAME), в которых будет меняться содержимое (значит всем, кроме меню).

<Html>
<Head>
<Title></Title>
</Head>

<Frameset cols="160,*">
    <Frame src="direct.html">
    <Frameset rows="50%,50%">
        <Frameset cols="50%,50%">
            <Frame src="hugh_ed.html" name="frame_A">
            <Frame src="hugh_cal.html" name="frame_B">
        </Frameset>
        <Frameset cols="50%,50%">
            <Frame src="hugh_jim.html" name="frame_C">
            <Frame src="hugh_bil.html" name="frame_D">
        </Frameset>
    </Frameset>
</Frameset>

</Html>

Теперь пора внести изменения в direct.html. Пока что код этого документа такой:

<Html>
<Head>
<Title></Title>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</Head>
<Body bgcolor="#FFFFFF">

<H3>Меню</H3>

<A href="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Друзья
Hugh'а</A><P>

<A href="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Друзья
Ron'а</A><P>

</Body>
</Html>

Сначала внесем изменения в ссылки, укажем, что теперь мы подгружаем одновременно не два, а четыре документа.

<Html>
<Head>
<Title></Title>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</Head>
<Body bgcolor="#FFFFFF">

<H3>Меню</H3>

<A href="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html', 'hugh_jim.html',
'hugh_bil.html')">Друзья Hugh'а</A><P>

<A href="javascript:multiLoad('ron_mike.html', 'ron_pete.html', 'ron_paul.html',
'ron_sam.html')">Друзья Ron'а</A><P>

</Body>
</Html>

А теперь внесем изменения в скрипт

<Html>
<Head>
<Title></Title>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</Head>
<Body bgcolor="#FFFFFF">

<H3>Меню</H3>

<A href="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html', 'hugh_jim.html',
'hugh_bil.html')">Друзья Hugh'а</A><P>

<A href="javascript:multiLoad('ron_mike.html', 'ron_pete.html', 'ron_paul.html',
'ron_sam.html')">Друзья Ron'а</A><P>

</Body>
</Html>

Посмотреть

... вот, собственно, и все.

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

Вот теперь точно все :) Удачи!

К оглавлению >>>