русс | укр

Мови програмуванняВідео уроки php mysqlПаскальСіАсемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование


Linux Unix Алгоритмічні мови Архітектура мікроконтролерів Введення в розробку розподілених інформаційних систем Дискретна математика Інформаційне обслуговування користувачів Інформація та моделювання в управлінні виробництвом Комп'ютерна графіка Лекції


Шановні українці! Матеріал був перекладений з російської мови. Тому можуть бути незначні помикли...

Кадри в HTML | Приклади фреймів

ЗАГОЛОВОК

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

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

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

Щоб зробити перегляд документів на Web-сторінці більш зручним, можна скористатися многооконным інтерфейсом, реалізованим за допомогою фреймів. У цьому випадку можна завантажити відразу кілька документів (Web-сторінок) і працювати одночасно з усіма ними.

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

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

Наприклад, тег

<FRAMESET COLS="20%,30%,*">
<FRAME . . . >
<FRAME . . . >
<FRAME . . . >
</FRAMESET>

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

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

Заголовок

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

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

  • MARGINHEIGHT - вказує інтервал у точках по висоті від кордонів кадру;
  • MARGINWIDTH - вказує інтервал у точках по ширині від кордонів кадру;
  • FRAMEBORDER - має ті ж значення (0,1), що і однойменний параметр тега FRAMESET;
  • NAME - вказує ім'я кадру, яке може бути використане в посиланнях для завантаження Web сторінки в потрібне вікно екрану (див. опис параметр TARGET в розділі 1.1 описания лабораторної роботи №6); є ряд стандартних доменів вікон:
    • _self - для завантаження Web сторінки в поточне вікно (приймається за замовчуванням, якщо посилання не вказаний параметр TARGET);
    • _top - для завантаження web-сторінки на весь екран;
    • _blank - для завантаження Web сторінки в нове вікно (відрізняється від _top тим, що нельза повернутися в початкове вікно за стрілкою "Тому").
  • NORESIZE - забороняє змінювати за допомогою мишки фрейму;
  • SCROLING - вказує на один з трьох режимів перегляду кадру:
    • yes - з створенням смуги прокрутки;
    • no - без створення смуги прокрутки;
    • auto - з створенням смуги прокрутки тільки тоді, коли завантажувані дані не поміщаються у вікні кадру (приймається за замовчуванням).
  • SRC - URL-адреса Web-сторінка завантажується у вікно кадру;
  • BORDERCOLOR - вказує колір кордону кадру (ширина межі визначається параметром FRAMESPACING).

Заголовок

2 Плаваючі кадри в HTML

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

Нижче наведено приклад завдання плаваючого кадру, з ім'ям "ff", розміром 200*200 пікселів, який завантажується Web-сторінка з адресою "prim3-1.htm":

<IFRAME NAME="ff" SRC="prim3-1.htm" HEIGHT=200 WIDTH=200> </IFRAME>

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

Зміст

3 Розробка багатовіконної Web сторінки

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

Приклад 1

<HTML>
<HEAD>
<TITLE> Кадри в HTML на Web-сторінці </TITLE>
</HEAD>
<FRAMESET ROWS="60,*" FRAMESPACING=0>
<FRAME NAME="title" SRC="title.htm" NORESIZE SCROLLING="no"
MARGINHEIGHT=0 MARGINTEIGHT=0
STYLE="border: red 6 dashed" >
<FRAMESET COLS="30%,*" FRAMESPACING=2 >
<FRAME NAME="left" SRC="left.htm" FRAMEBORDER=0 >
<FRAME NAME="right" SRC="prim1-1.htm" FRAMEBORDER=1
BORDERCOLOR=#0000E0 >
</FRAMESET>
</FRAMESET>
</HTML>

 

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

Заголовок

3.1 Кадр "title"

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

<P STYLE="background:#E0FFE0; color:#0000C0;font: italic 10mm; text-align:center"> ВИВЧЕННЯ HTML

Заголовок

3.2 Кадр "left"

 

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

<HTML>
<HEAD>
<LINK REL=stylesheet HREF="my_d.css">
</HEAD>
<BODY>
<A CLASS="kn" HREF="2.htm" TARGET="right"> Сторінка №2
</A> <BR>
<A CLASS="kn" HREF="3.htm" TARGET="right"> Сторінка №3
</A> <BR>
<A CLASS="kn" HREF="4.htm" TARGET="right"> Сторінка №4
</A> <BR>
<A CLASS="kn" HREF="5.htm" TARGET="_top"> Сторінка №5
</A> <BR>
<A CLASS="kn" HREF="6.htm" TARGET="ff"> Сторінка №6
</A> <BR><BR>
<IFRAME NAME="ff" SRC="prim2-2.htm" HEIGHT=200 WIDTH=200>
</IFRAME>
</BODY>
</HTML>

 

Перші три посилання download Web сторінки з описом лабораторних робіт №2, №3 та №4 у кадр з ім'ям "right", четверта посилання завантажує Web-сторінку з описом лабораторної роботи №5 на весь екран, а остання посилання завантажує Web-сторінку з описом лабораторної роботи №6 в плаваючий кадр з ім'ям "ff". Опис параметрів плаваючого кадру та його використання на Web-сторінці наведено в розділі 2.

Заголовок

 

Переглядів: 1623

Повернутися взміст


Онлайн система числення Калькулятор онлайн звичайний Науковий калькулятор онлайн