Самоучитель по HTML, изучение фреймов.

Вот мы и добрались до фреймов (frames). Зачем нужны фреймы и в чём их преимущесво? Они позволяю нам открыть сразу несколько HTML-документов, на пример файл logotip.html, menu.html и kontent.html одновременно, при этом нажимая на ссылки в menu.html перзагружается только kontent.html, это очень выгодно если вы нагрузили много графики. Хотя это не единственая возможность Фреймов. Хотя так-же есть много недостатков, на пример: можно нажать правую кнопку "мышки" и щёлкнуть по пункту "показать только этот фрейм" или "заблокировать фрейм" и вся ваша красота пойдёт коту под хвост(здесь имею ввиду не безопасность а ваши труды по написанию страниц). Ну не будем терять времени, тем более возможно вы пока не понимаете о чем я говорю...
Перейддём к изучению:

Откроем нашу учебную папку (надеюсь вы ещё не удалили картинки) и создадим новый документ:
       <html>
        <body  bgcolor="gold">
   <img src="images/logo.gif" border="0"  width="700" height="150">
        </body>
        </html> 
Сохраним наш документ как logotip.html
Создадим второй документ:
       <html>
        <body  bgcolor="silver" text="#000000">
       Меню сайта
        </body>
        </html> 
Сохраним наш документ как menu.html
Создадим третий документ:
       <html>
        <body  >
        содержание страницы, картинки, текст и
        другая начинка
        </body>
        </html> 
Сохраним наш документ как kontent.html
Верхние примеры кодов для вас не новинка , единственое полное отсуствие тегов HAED и TITLE, это не ошибка.
А вот следующий код немного не обычный:
       <html>
        <head>
        <title>Фреймы </title>
        </head>
        <frameset>
        </frameset>
        </html> 
Сохраним наш документ как frame.html

А здесь наоборот теги HAED и TITLE присуствуют, а вот тег BODY мы заменили на frameset и это тоже не ошибка!
Возможно я не правильно начал раказывать о фреймах, но дальше этого не повторится!!!
Фреймы делятся на три вида: горизонтальный(документы один под другим); вертикальный(документы рядом ) и смешаный, с этого места подробно: Обратите внимание что frame в переводе с английкого рамка , а frameset - набор рамок.
Расмотрим первый(горизонтальный): изменим наш документ "frame.html" таким образом:

       <html>
        <head>
        <title>Фреймы </title>
        </head>
        <frameset rows="150,*">
        <frame src="logotip.html">
        <frame src="kontent.html">
        </frameset>
        </html> 
теперь разберём: у тега frameset появился новый атрибут rows, означающий что наши фреймы расположены вертикально, также это атрибут принимает значение "150,*", 150 говорит нам о том, что верхний фрейм равен 150 пикселям, а * этот символ(сочетание клавиш shilt + 8)говорит что второй документ занимает всё остальное пространство по вертикали. Далее самостоятельно протестируйте файл frame.html
Сейчас хочу остановиться и поговорить о размерах в фреймах в общем. Мой пример содержит два фрейма, а как задать размеры если фреймов 3 или 5 или больше? Если три rows="150,*,*" - верхний будет 150 пикселей, а средний и нижний делят отавшееся пространство поровну; а если вы решите вставить "menu.html" по средине то:
        <html>
        <head>
        <title>Фреймы </title>
        </head>
        <frameset rows="150,25,*">
        <frame src="logotip.html">
        <frame src="menu.html">
        <frame src="kontent.html">
        </frameset>
        </html> 
логотип будет 150, меню 25, а контент будет занимать всё остальное пространство. Не советую писать что-то вроде этого: rows="150,15,800", ваш фрейм может круто "уехать"!
Размеры в фреймах задают не только в пикселях, но и в процентах, вот так:rows="50%,15%,35%", обратите внимание что в процентах нужно задавать размер каждому фрейму, и общая сумма равна строго = 100%.
Вертикальное размещение фреймов задаётся с помощью атрибута cols самостоятельно замените строчку:
<frameset rows="150,25,*">
на <frameset cols="150,100,*"> и протестируйте в браузере(пока бред, но моя цель не создать вам сайт, а показать все тонкости ).
А это смешаный вариан расположения фреймов:
        <html>
        <head>
        <title>Фреймы </title>
        </head>
        <frameset rows="140,*">
        <frame src="logotip.html">
              <frameset cols="130,*">
                  <frame src="menu.html">
                  <frame src="kontent.html">
              </frameset>
        </frameset>
        </html> 
посмотреть думаю такой вариант уже имеет какой-то вид!!!

А теперь обсудим последний код:
Обратите внимание, фреймы немного похожи на таблицы, их тоже вкладуют в друг друга. Первый frameset я расположил друг под другом, а в нижнем фрейме вместо frame вставил ещё один frameset с меню сайта и контентом рядом друг с другом. Приоритетов как располагать фреймы(сперва вертикально, а потом горизонтально или на оборот) нет, а свой пример придумал только для демонстрации...

P.S. Я сказал что мой пример уже имеет какой-то вид, но пока он довольно сырой, если вы наведёте "мышку" на полосу разделяющую фреймы и нажмёте левую кнопку и подвигаете мышкой, то заметите что они двигаютя, а у документа logotip.html вообще появилась полоса прокрутки, можно конечно написать не rows="140" а rows="150", но это сделать можно более цивилизовано!!! Об этом вы узнаете в следующих уроках...


Перейти к выбору следующей страницы