PC АД PC АД
PC АД

Почта Домой

Семь уроков по HTML:

Урок4, Фреймы.
  • Что такое фреймы.

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

  • Как создать документ, использующий фреймы?.

    • Сначала нужно создать загрузочный файл, который обычно является главной страничкой сервера и имеет имя index.htm или index.html. В этом файле задаются размеры, количество и атрибуты фреймов. Затем уже будем создавать файлы для каждого из фреймов.

    Фреймы задаются тэгом <FRAMESET></FRAMESET>

    Атрибуты тэга <FRAMESET>:
    rows="разделенный запятыми список пикселов, процентов и относительных длин".Расположение горизонтальных фреймов. По умолчанию равен 100%, что означает одну строку.
    cols="разделенный запятыми список пикселов, процентов и относительных длин".Расположение вертикальных фреймов. По умолчанию равен 100%, что означает один столбец.

    Пример:
    Текст программы:
    <FRAMESET cols="1*,200,3*" >
    </FRAMESET>
     Здесь страница браузера разбивается на три столбца, причем, сначала браузер выделит 200 пикселей для среднего столбца, а затем распределит оставшееся пространство следующим образом:
    Если принять ширину оставшегося пространства за три четыре части (1*+3*=4*), то левый фрейм получит одну (1*) часть а правый фрейм оставшиеся три (3*) части.
    Результат выполнения:
    Страничка разобьется приблизительно так:
    1* 200 пикселей 3*

    Текст программы:
    <FRAMESETrows="30%,70%" cols="33%,37%,*" >
    </FRAMESET>
     В этом случае страница разбивается на две строки, высотой 30% и 70% от всей высоты окна браузера, и три столбца, левый будет задан с шириной 33% от ширины экрана браузера, средний - 37%, а правый получит все что осталось т.е. 100%-(33%+37%)=30%
    Результат выполнения:
    Страничка разобьется приблизительно так:
         
         

    Более сложная структура фреймов создается с помощью вложения набора фреймов друг в друга.

    Допустим, нужно создать следующую структуру сайта:
    Название странички
    Главное меню Здесь будем отображать информацию, выбранную в главном меню
    copyright

    Здесь мы видим три строки, причем средняя имеет два столбца.
    Сначала задаем строки. Верхняя и нижняя будут иметь высоту по 5%, а средняя то что останется.
    <FRAMESET rows="5%,*,5%" >
     Затем задаем столбцы. Левый будет 30% от ширины браузера, а правый, соответственно, 70%.
    <FRAMESET cols="30%,70%" >
    </FRAMESET>
    </FRAMESET>

    Теперь осталось задать сами фреймы. Фреймы определяются тэгом <FRAME></FRAME>.

    Атрибуты тэга <FRAME>:
    src="URL"Описывает URL документа, который будет отображен внутри ланного фрэйма. Если он отсутствует, то будет отображен пустой фрэйм.
    name="frame_name"Имя фрейма, которое должно обязательно начинаться с символа. Содержимое поименованных фрэймов может быть задействовано из других документов при помощи специального атрибута TARGET, описываемого ниже.
    marginwidth="value"Ширина боковых разделительных полос между фреймами в пикселях.
    marginheight="value"Ширина верхних и нижних разделительных полос между фреймами в пикселях.
    scrolling="yes", "no", "auto"Наличие полос прокрутки у фреймов где:
    • yes - полосы прокрутки присутствуют.
    • no - полосы прокрутки отсутствуют.
    • auto - полосы прокрутки присутствуют только при их необходимости (по умолчанию).
    noresize Отмена возможности изменения размеров фреймов. Если у одного фрэйма установлен атрибут noresize, то у соседних фрэймов тоже не может быть изменен размер со стороны данного.

    Исходя из всего этого допишем программу:
    <FRAMESET rows="5%,*,5%" >
     Задаем параметры верхнего фрейма, который будет фиксированной ширины, без полос прокрутки
    <FRAME src="top.htm" name="top_page" scrolling="no" noresize>
    <FRAMESET cols="30%,70%" >
     Задаем параметры левого фрейма, фиксированной ширины, с возможностью вывода полос прокрутки
    <FRAME src="main_mnu.htm" name="main_mnu" scrolling="auto" noresize>
     Задаем параметры правого фрейма, фиксированной ширины, с возможностью вывода полос прокрутки
    <FRAME src="content.htm" name="content" scrolling="auto" noresize>
    </FRAMESET>
     И наконец, задаем параметры нижнего фрейма, фиксированной ширины, без полос прокрутки.
    <FRAME src="bottom.htm" name="bottom_page" scrolling="no" noresize> </FRAMESET>

    Полностью код программы будет выглядить так:
    <HTML>
    <TITLE>Титул странички</TITLE> <FRAMESET rows="5%,*,5%" >
    <FRAME src="top.htm" name="top_page" scrolling="no" noresize>
    <FRAMESET cols="30%,70%" >
    <FRAME src="main_mnu.htm" name="main_mnu" scrolling="auto" noresize>
    <FRAME src="content.htm" name="content" scrolling="auto" noresize>
    </FRAMESET>
    <FRAME src="bottom.htm" name="bottom_page" scrolling="no" noresize> </FRAMESET>
     Заметьте, что документ, описывающий набор фреймов, не содержит тэга <BODY>. Он должен задавать только структуру фреймов и больше ничего.
    Чтобы ваша страничка была видна в браузерах не поддерживающих фреймы, следует указать тэг <NOFRAMES></NOFRAMES>, внутри контейнера <FRAMESET>.
    К таким браузерам относятся браузер NSCA Mosaic, IE2.0 и NN версии ниже чем 2.0.

    Например:
    <FRAMESET>
    <NOFRAMES>
    <BODY bgcolor="red"> Ваш браузер не поддерживает фреймы. </BODY> </NOFRAMES>
    </FRAMESET>

    Теперь создадим файл main_mnu.htm, где будет главное меню сайта..
    <HTML>
    <BODY BGCOLOR="gray">
    <A HREF="menu1.htm" TARGET="content">1. Первый элемент меню</A><BR> <A HREF="menu2.htm" TARGET="content">2. Второй элемент меню</A><BR>
    </HTML>

    Урок3,Списки и таблицы. | Урок5, Ссылки в документах HTML.

    Malder © 2004

    Используются технологии uCoz