ФРЭЙМЫ (HTML Уроки)

Главная » Мастерская » Статьи » ФРЭЙМЫ (HTML Уроки)

Учебник по HTML (HTML Уроки) - Урок 5

Теперь сделаем Фреймовую Страницу с самого начала.

Во первых мы должны продумать, что мы хотим в конечном результате. Мы полагаем, что хорошим простым проектом был бы заголовок поперек верхней части, окно каталога слева и основное окно справа. Давайте начнем делать Главную Страницу сначала.

<HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD>

<FRAMESET> </FRAMESET>

</HTML>

Создайте новую папку и сохраните это как index.html. Также изображение, которое мы будем использовать для заголовка - "MY FRAMZ PAGE". Оно называется framz1.gif и оно находится в папке framz . Скопируйте его в рабочую папку, которую Вы только что создали.

Раздельте экран горизонтально.

<HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD>

<FRAMESET ROWS="83,*"> </FRAMESET>

</HTML>

Примечание: Мы получили 83, добавляя 8 к высоте изображения (75 + 8=83). Также обратите внимание на то, что поскольку мы используем абсолютную размерность, мы включаем упругий фрейм

Затем определите banner.htm, чтобы войти в верхний фрейм (мы сделаем этот документ в пару минут). Также вставьте пару меток <FRAMESET> , потому что мы собираемся делить нижнюю часть далее.

<HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD>

<FRAMESET ROWS="83,*"> <FRAME SRC="banner.htm"> <FRAMESET> </FRAMESET> </FRAMESET>

</HTML>

Вы можете выполнить страницу теперь, но Вы можете получить сообщения об ошибках, потому что она не завершена.

Мы будем делить окно нижней части на две секции. Мы также определим, что левое окно содержит directry.htm, а правое окно - home.htm. Замечу еще раз, мы не создали эти документы, так что Вы можете все еще получать сообщение об ошибках.

<HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD>

<FRAMESET ROWS="83,*"> <FRAME SRC="banner.htm"> <FRAMESET COLS="20%,80%"> <FRAME SRC="directry.htm"> <FRAME SRC="home.htm"> </FRAMESET> </FRAMESET>

</HTML>

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

<HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD>

<FRAMESET ROWS="83,*"> <FRAME SRC="banner.htm"> <FRAMESET COLS="20%,80%"> <FRAME SRC="directry.htm"> <FRAME SRC="home.htm" NAME="MAIN-WINDOW"> </FRAMESET> </FRAMESET>

</HTML>

Хорошо. Мы выполнили это ... пока.

Позвольте создать banner.htm. Начните со следующего и сохраните его.

<HTML> <HEAD> <TITLE>Practice Page- Banner</TITLE> </HEAD> <BODY BGCOLOR="#0000FF"> </BODY> </HTML>

Обратите внимание, мы определили цвет фона синим.

Вставим изображении и отцентрируем его.

<HTML> <HEAD> <TITLE>Practice Page- Banner</TITLE> </HEAD> <BODY BGCOLOR="#0000FF"> <CENTER><IMG SRC="framz1.gif" WIDTH=500 HEIGHT=75></CENTER> </BODY> </HTML>

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

Как Вы можете видеть, мы имеем проблему. Мы имеем линейку прокрутки и не очень хорошо установленное изображение в окне. Откройте вашу Главную Страницу. Выключите линейки прокрутки и избавьтесь от полей..

<HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD>

<FRAMESET ROWS="83,*"> <FRAME SRC="banner.htm" SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAMESET COLS="20%,80%"> <FRAME SRC="directry.htm"> <FRAME SRC="home.htm" NAME="MAIN-WINDOW"> </FRAMESET> </FRAMESET>

</HTML>

Теперь давайте создадим наш Каталог страницы. Начните со следующего и сохраните это как directry.htm.

<HTML> <HEAD> <TITLE>Practice Page- Directory</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> </BODY> </HTML>

Дайте заголовок и укажите в тексте все связи. Мы добавим информацию связи за минуту.

<HTML> <HEAD> <TITLE>Practice Page- Directory</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF">

<H3>Directory</H3>

Home<P>

Go here<BR> or there<P>

or visit<BR> Yahoo<BR> Netscape

</BODY> </HTML>

Теперь добавьте информацию связей.

<HTML> <HEAD> <TITLE>Practice Page- Directory</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF">

<H3>Directory</H3>

<A HREF="home.htm">Home</A><P>

<A HREF="here.htm">Go here</A><BR> <A HREF="there.htm">or there</A><P>

or visit<BR> <A HREF="http://www.yahoo.com/">Yahoo</A><BR> <A HREF="http://home.netscape.com/">Netscape</A>

</BODY> </HTML>

[дальше] [дальше]