Введение в HTML-фреймы.

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

Основной шаблон html-файла немного отличается от обычного файла, в нем отсутствует тег BODY вообще!!!

        <html>
        <head>
        <title>Введение в фреймы</title>
        </head>
        <frameset>
               <frame >
                <frame >
        </frameset>
        </html>

Кажый html-файл в фреймах называется рамка(frame), все рамки вставляются в набор рамок(frameset), но начнем по порядку.

frameset является тегом контейнером и закрывающий(конечный) тег необходим!!!
Этот тег может принимать всего два атрибута:
rows определяет что в frameset горизонтальный вывод фрэймов.
cols определяет что в frameset вертикальный вывод фрэймов.
Оба этих атрибута принимают одни значения, которые указывают сколько файлов мы подключаем и их размеры. Размеры фреймов задаются:
1)В процентах:

        <html>
        <head>
        <title>Введение в фреймы</title>
        </head>
        <frameset rows="30%,70%">
               <frame >
                <frame >
        </frameset>
        </html>
Если у вас три фрейма тогда <frameset rows="30%,40%,30%"> главное чтобы в итоге сумма всех фреймов получилась 100%.
2)Пропорциональные в пикселях 
        <html>
        <head>
        <title>Введение в фреймы</title>
        </head>
        <frameset rows="150,10,*">
               <frame >
               <frame >
               <frame >
        </frameset>
        </html>
В процентах конечно задавать размеры можно, но опять-же разрешение экрана у каждого монитора разное и тогда приходят на помощь пиксели. В нашем примере первый фрейм будет 150 пикселей, второй 10 пикселей. а вот этот символ * говорит браузеру что третий фрейм займет все остальное пространство. Этот символ вводится клавишами shilt+8.
Есть еще вот такой вариант: rows="150,1*,3*" , получается первый фрейм займет 150 пикселей, а оставшееся пространство возьмем как 100%, значит вторая ячейка займет 25%, а третья 75%. Это как в школе уравнения, 1х+3х=100.

Вложенные фрэймы. Фреймы(frameset) можно при необходимости вкладывать другие фреймы, например базовый мы расположим горизонтально, а вложенный вертикально:

        <html>
        <head>
        <title>Введение в фреймы</title>
        </head>
        <frameset rows="150,*">
               <frame >
               <frame >
            <frameset cols="150,10,*">
               <frame >
               <frame >
               <frame >
            </frameset>
        </frameset>
        </html>

Для того чтобы frame подгрузил другой html-файл в него нужно вставить атрибут SRC(путь в файлу, как в картинках).

Если мы все знаем, то давайте попрактикуемся с фреймами. Создадим первый документ logotip.html:

        <html>
        <body>
   <div align="center"> <img src="images/logotip.png" alt="Супер сайт"> </div>
        </body>
        </html>
В который вставим только картинку логотип.
Создадим второй документ с навигацией navigatcia.html: 
        <html>
        <body>
           навигация:<br>
 <a href="">ссылка</a><br>
 <a href="">ссылка</a><br>
 <a href="">ссылка</a><br>
 <a href="">ссылка</a><br>
 <a href="">ссылка</a>
        </body>
        </html>

И создадим документ для контента kontent.html 
        <html>
        <body>
       <h1 align="center">Содержание страницы</h1>
         контент страницы
        </body>
        </html>

А теперь создадим страницу frame.html которая будет это все загружать:

        <html>
        <head>
        <title>Введение в фреймы</title>
        </head>
        <frameset rows="150,*">
               <frame src="logotip.html">
            <frameset cols="150,*">
               <frame src="navigatcia.html">
               <frame src="kontent.html">
            </frameset>
        </frameset>
        </html>
А теперь просмотрим что получилось.
С моей точки зрения получилось не плохо как для первого раза, но эта страница очень "сырая", И с этой сыростью мы будем бороться в следующей главе.

Смотрите также: