Фрейми в html, приклади фреймів - life-prog

ЗМІСТ

1. Подання фреймів на Web-сторінці
1.1 Завдання фреймової структури
1.2 Завдання параметрів фреймів
2 Плаваючі фрейми
3 Розробка многооконной Web-сторінки
3.1 Фрейм "title"
3.2 Фрейм "left"
Приклад № 1

1. Подання фреймів на Web-сторінці

1.1 Завдання фреймової структури

На відміну від звичайного HTML-документа в документі з описом фреймів немає тега-контейнера . . Замість нього використовується тег-контейнер . . який ділить екран на кілька горизонтальних частин (вікон), або на декілька вертикальних вікон. Кожне з вікон описується в вигляді фрейму за допомогою тега . Тег містить наступні параметри:

  • COLS - вказує через кому ширину вертикальних вікон в пікселях або в% від ширини екрана (якщо задається *, то цього вікна відводиться решта екрану);
  • ROWS - вказує через кому висоту горизонтальних вікон в пікселях або в% від висоти екрана (якщо задається *, то цього вікна відводиться решта екрану);
  • FRAMEBORDER.
    • 1 - фрейми мають рамку;
    • 0 - фрейми не мають рамку.
  • FRAMESPACING - вказує відстань між фреймами в пікселях.





ділить екран на три вертикальних вікна, які займають соответсвенно 20%, 30% і решту (50%) екрана. На місці кожного з тегів може бути вказаний тег . . Це дозволяє формувати на екрані складну багатовіконну структуру.

У прикладі № 1 показано побудова і використання трьохвіконні структури на Web-сторінці.

1.2 Завдання параметрів фреймів

Для опису характеристик кожного вікна використовується тег , який містить наступні параметри:

2 Плаваючі фрейми в HTML

При створенні многооконной Web-сторінки крім застосування фреймової структури на базі тега . (Див. Пункт 1.1) також можуть бути використані плаваючі фрейми. В цьому випадку в HTML-документі замість тега . використовується, як і у всіх інших Web-сторінках, тег . .
Плаваючий фрейм, подібно зображенню, буде розташовуватися на екрані в тому місці, яке відпо розташуванню тега з його описом в HTML-документі. Для завдання плаваючого фрейма використовується тег-контейнер . Оскільки плаваючий фрейм багато в чому об'єднує властивості і фрейму, і зображення, то він має частину параметрів (MARGINHEIGHT, MARGINWIDTH, NAME, SCROLING, SRC, BORDERCOLOR), які властиві фреймам і розглянуті в пункті 1.2, інша частина його параметрів (ALIGN, HEIGHT, WIDTH, HSPACE, VSPACE) характерна для зображень і розглянута в HTML зображення в пункті 1.1.

У прикладі № 1 поряд зі звичайними фреймами показано застосування плаваючих фреймів (в файлі "left.htm").

3 Розробка многооконной Web-сторінки

У прикладі (№ 1) показано побудова трьохвіконні Web-сторінки, що має відповідно три фрейми: один горизонтальний ( "title") і два вертикальних ( "left" і "right").

приклад 1



Фрейми в HTML на Web-сторінці


MARGINHEIGHT = 0 MARGINTEIGHT = 0
STYLE = "border: red 6 dashed">


BORDERCOLOR = # 0000E0>


Як видно з фреймової структури екран спочатку ділиться на два горизонтальних вікна: перше вікно має розмір 60 пікселів, друге займає решту екрана. Потім друге горизонтальне вікно ділиться на два вертикальних з розмірами відповідно 30% і 70% екрану.

3.1 Фрейм "title"

Фрейм "title" використовується для завдання загальних або заголовних відомостей. Може бути використаний як домашня сторінка (home page). У ньому заборонені смуги прокрутки і зміна розміру вікна.
Файл "title.htm", що завантажується у вікно "title", містить HTML-документ з двох рядків, які задають колір фону, параметри написи і сам напис:

ВИВЧЕННЯ HTML

3.2 Фрейм "left"

Файл "left.htm", що завантажується у вікно "left" містить HTML-документ, в якому поставлено набір посилань у вигляді кнопок, які здійснюють доступ до описів лобораторних робіт, і плаваючий фрейм:






сторінка №2


сторінка №3


сторінка №4


сторінка №5


сторінка №6