Як вставити фрейм

Як вставити фрейм

Для відображення в одній сторінці інформації з кількох джерел часто використовують наявний в HTML механізм розбиття статті на фрейми. Нижче — опис конструкцій мови, призначених для вставки фреймів.

Вам знадобиться

Початкові знання мови HTML

Інструкція

  1. Мова HTML (HyperText Markup Language — «мова розмітки гіпертексту») передбачає два види фреймів. «Плаваючий» більш гнучкий і його простіше вкласти у вже існуючу статтю. У загальному випадку конструкція, що описує врізку вікна за допомогою плаваючого фрейма, виглядає так:

    <iframe src=»http://kakprosto.ru/» width=»400″ height=»300″> </ iframe>

    Тут в якості джерела даних для цього кадру вказана головна сторінка існуючого сайту (атрибут src). Вона і буде відкрита у фреймі розміром 400 на 300 пікселів, як це зазначено в атрибутах width і height.

    Ви можете вказати в атрибуті src і сторінку свого сайту. У цьому випадку досить задати відносний адресу (тобто адресу щодо сторінки, в яку вставляється фрейм):

    <iframe src=»framePage.html» id=»frameOne»> </ iframe>

    У цьому зразку не вказано ширина і висота кадру, зате є атрибут-ідентифікатор id. Використовуючи його, ви можете за допомогою CSS () задати для цього кадру необхідні розміри:

    <style type=»text/css»>

     # FrameOne {width: 700px; height: 200px;}

    </ Style>
  2. Інший тип фреймів — «класичний» — вимагає наявності окремої сторінки, яка буде містити опис структури фреймів. Самі фрейми будуть знаходитися в окремих сторінках, може навіть на окремих сайтах. HTML-код такої сторінки-контейнера для фреймів може виглядати так:

    <html>

    <frameset rows=»*,*»>

    <frame src=»http://kakprosto.ru» />

    <frame src=»http://chateauonline.ru» />

    </ Frameset>

    </ Html>

    Ніяких блоків <head> … </ Head> і <body> … </ Body>, обов’язкових для звичайних сторінок, тут бути не повинно.

    У цьому зразку відкриває тег контейнера <frameset> містить атрибут rows — це означає, що простір сторінки повинно бути поділено по вертикалі і першому фрейму буде віддана верхня частина. Якщо замінити rows на cols, то поділ буде горизонтальним. Значення цього атрибута «*,*» вказує, що пропорції розподілу рівні — по 50% кожному. Якщо вказати, наприклад «20 %,*», то першому фрейму буде віддано лише 20%, а решта простору — другому.

    Користувач може сам змінювати ці пропорції, перетягуючи кордону фреймів мишкою, але є можливість заборонити цю дію. Для цього в тег конкретного кадру потрібно додати атрибут noresize. Можна також вказати розміри відступів від сусіднього кадру по вертикалі і горизонталі (атрибути marginwidth і marginheight):

    <frame src=»framePage.html» noresize=»noresize» marginwidth=»10″ marginheight=»20″ />

    Є можливість задавати правила поведінки для смуг прокрутки кожного кадру окремо. Для цього використовується атрибут scrolling, який може містити одне з трьох зумовлених значень. Якщо вказати scrolling = «auto», то смуги прокрутки будуть з’являтися коли вміст фрейма не вміщається в його межі. Якщо «yes» — смуги будуть присутні постійно, незалежно від наявності потреби в них. Якщо «no» — це буде означати заборону смуг прокрутки для цього кадру.
  3. Виходячи з інформації, викладеної на двох попередніх кроках, вам потрібно сконструювати html-код, який більше підходить для вирішення вашої задачі. Після цього залишиться лише вставити його у вихідний код сторінки. Для цього можна скористатися редактором сторінок системи управління вашим сайтом — відкрийте в ньому потрібну сторінку, переведіть у режим редагування html-коду і вставте ваш код в потрібне місце сторінки. А можна скачати файл вихідного коду сторінки файл-менеджером управління хостингу або системи управління сайтом, відкрити його в текстовому редакторі і вставити код в ньому. А потім тим же способом закачати змінений код назад на сервер.