Інтэрнэт, Вэб-дызайн

Фрэйм - гэта што? Структура і стварэнне фрэймаў

Фрэйм - гэта вобласць на сайце (акно), у якой відаць іншую вэб-старонку. Вэб-майстры выкарыстоўваюць такую магчымасць, каб прадэманстраваць галоўную старонку сайта сваіх сяброў або партнёраў. Той жа прыём выкарыстоўваецца, каб адлюстроўваць у акенцах форму пошуку і побач яго вынік, і т. Д.

Але ў асноўным фрэймы выкарыстоўваюцца ў стварэнні буйных вэб-парталаў, дзе патрабуецца немалая колькасць пунктаў меню і падменю. Пра такія звычайна кажуць: "сайт на фрэймах". Для стварэння падобнага рэсурсу патрабуецца добрае веданне HTML-мовы.

Стварэнне фрэймаў у канструктару сайтаў

У некаторых канструктарах сайтаў прадугледжана аўтаматычная генерацыя падобнага кода. Звычайна кнопка дадання фрэйма знаходзіцца ў асноўным меню праграмы. Спачатку неабходна ўсталяваць курсор у патрэбным месцы на старонцы, затым націснуць кнопку, адкрыецца акно (як паказана на скрыншоце). У ім можна задаць адрас старонкі, якая будзе адчыняцца ў фрэйме, і адрэгуляваць памеры: шырыню і вышыню.

Але ў асноўным фрэймы выкарыстоўваюцца ў стварэнні буйных вэб-парталаў, дзе патрабуецца немалая колькасць пунктаў меню і падменю. Пра такія звычайна кажуць: "сайт на фрэймах". Для стварэння падобнага рэсурсу патрабуецца добрае веданне HTML-мовы.

Пры дапамозе дадзенага "сэрвісу" магчыма стварэнне некалькіх фрэймаў на старонцы, вось толькі узаемазвязаных элементаў такім чынам вам не атрымаць.

Фрэймы ў CMS

У многіх праграмах для стварэння сайтаў прадугледжана магчымасць устаноўкі адпаведнага модуля. Напрыклад, для Joomla фрэйм - гэта модуль "абгортцы (Wrapper)".

Яго можна знайсці і стварыць у панэлі кіравання CMS Джумла: "Пашырэньні" - "Менеджэр модуляў" - "Стварыць" (круглая кнопка аранжавага колеру з плюсікам ўнутры). Ць ўсплываючым акне, у спісе, вы ўбачыце модуль "абгортку".

Калі яго тут не будзе, значыць, ён не ўключаны. Каб скарыстацца ім, спачатку трэба яго актываваць тут: ўкладка "Пашырэньні", далей "Менеджэр пашырэньні", далей ўкладка "Кіраванне". І шукаем у якое адкрылася спісе, можна для хуткага пошуку ў полі "Фільтр" ўвесці слова: Wrapper. Насупраць дадзенага модуля павінен стаяць значок зялёнага колеру з галачкай ўнутры. Чырвоны гурток з кропкай усярэдзіне будзе азначаць, што дадзены убудова выключаны.

Пасля гэтай працэдуры можна вярнуцца ў "Менеджэр модуляў", стварыць фрэйм і ўсталяваць яго параметры.

Як відаць на малюнку, модуль дазваляе ўсталяваць: загаловак над фрэйме, пазіцыю модуля, выбраць старонкі сайта, на якіх ён будзе адлюстроўвацца. А таксама наладзіць шырыню, вышыню; дадаць рамку і ўласна спасылку на вэб-старонку. Калі ў фрэйме вы хочаце адлюстраваць галоўную старонку якога-небудзь сайта ва ўсю шырыню, то 100%, устаноўленых па змаўчанні, будзе недастаткова. Можна адразу смела ставіць 400%. Вышыні 200 звычайна хапае, каб адлюстраваць верхняе меню старонкі. Увесь астатні кантэнт будзе бачны, калі карыстальнік (наведвальнік сайта) скарыстаецца паласой пракруткі.

Вось прыклад таго, што такое фрэйм ў Джумлы.

Модуль Джумла для стварэння фрэйма вельмі зручны і просты ва ўжыванні. Аднак яго магчымасці абмежаваныя, як і магчымасці канструктара.

Гісторыя і рэаліі

У практыцы стварэння сайтаў з фрэймаў гэты тэг (яго прымяненне) ужо даўно адышоў на другі план. Іх змаглі замяніць модулі, налады ў праграмах-канструктарах, генеравальныя код для вэб-старонкі без удзелу сайтостроителя. Аднак у некаторых выпадках гэтага бывае недастаткова. Напрыклад, калі фрэйм - гэта цэласная складаная структура з абласцей, якія адлюстроўваюцца ў браўзэры. Так бачаць яго ўладальнікі сложноструктурированных сайтаў. На яе стварэнне ідуць толькі ў крайніх выпадках, паколькі фреймовские сайты ствараюцца выключна пры дапамозе спецыялізаваных тэгаў.

Сложноструктурированные сайты

Для іх стварэнне некалькіх узаемазвязаных фрэймаў з'яўляецца аптымальным рашэннем арганізацыі кантэнту на старонках рэсурсу. Гэта, як правіла, буйныя парталы, разрасталыя з кожным годам усё мацней.

Як дамагчыся такога ж выніку? Як ствараецца структура фрэйма?

Як упісаць фрэйм у код старонкі

Фрэймы ў HTML дадаюць пры дапамозе тэгаў:

  • frame (для асобнага акна);
  • frameset (пры дапамозе яго ствараецца цэлая структура);
  • iframe ( "плавае" фрэйм);
  • noframes (на выпадак неотображения фрэйма ў браўзэры карыстальніка).

Першы ўказаны тэг заўсёды ўпісваецца ў пары і . Прычым яна замяняе і . А пры дапамозе адпаведных атрыбутаў можна карэктаваць характарыстыкі кожнага элемента: назва (name =), памер (cols = і rows =), наяўнасць рамкі (border), выгляд паласы пракруткі і, вядома, спасылку на вэб-старонку для адлюстравання.

варыяцыі афармлення

Ўсю старонку сайта можна разбіць на вобласці. Напрыклад, так:

левы

верхні фрэйм

правы

Такую структуру (яе называюць укладзенай) можна атрымаць, прапісаўшы ўнутры тэга атрыбут cols, які азначае размяшчэнне фрэйма па гарызанталі, і rows - па вертыкалі. Следам ставіцца знак = і прапісваюцца памеры. Напрыклад, 60%, 40% - адсоткавыя суадносіны (адно акно зойме 60% прасторы браўзэра, іншае, адпаведна, 40%). Або 100, 200 - суадносіны памераў у пікселях. Памеры аднаго з фрэймаў можна наогул не задаваць (ўсталюецца па змаўчанні). Для гэтага пасля або перад коскі трэба пазначыць сімвал *.

Унутры гэтай пары frameset прапісвае кожны фрэйм з параметрамі: src = http: // site / article / 143778 /% 2C далей у двукоссях даецца спасылка на вэб-старонку і name = з загалоўкам (напрыклад, фрэйме 1).

Укладзенасць кожнай новай вобласці пазначаецца новым frameset.

Прыклад кода:

Заўважце, у нашым прыкладзе для фрэймаў другога і трэцяга памеры прапісваюцца толькі адзін раз.

Мноства задумак дазваляюць выканаць фрэймы. Прыклады іх размяшчэння ў акне браўзэра можна прыводзіць бясконца (змяняючы код адпаведным чынам). Аднак практычнага прымянення гэтыя звесткі не знаходзяць ўжо даўно. Фрэймы, калі і выкарыстоўваюцца сёння пры стварэнні сайтаў, то толькі ў выглядзе модуляў ў бясплатных CMS або ў выглядзе iframe.

плавае фрэйм

Дзіўна, чаму ён атрымаў такую назву, тут больш падыходзіць слова "убудаваны". Гэты фрэйм створаны для адлюстравання змесціва файла. Вы загружаеце ў базу якой-небудзь дакумент або файл, пры дапамозе тэгаў айфрейма прапісваеце шлях да яго - і наведвальнікі ўбачаць тэкст файла (відэа ці малюнак). На жаль, браўзэры не заўсёды адлюстроўваюць змесціва. Для гэтага вэб-будаўнікі ўпісваюць паміж адкрывалым і тэгам фразу: "Ваш браўзэр не адлюстроўвае зьмест".

Напрыклад, Seopult.ru - вядомы сэрвіс у майстроў па прасоўванні. Толькі не яго асноўны сайт, а люстэрка I.seopult.pro, створанае для кліентаў партала. Код айфрейма тут прапісаны так:

  • Інструкцыя . Дзе тэг
  • створаны для вызначэння элемента спісу. Падтрымліваецца ўсімі браўзэрамі.

    На самай старонцы люстэрка можна ўбачыць слова "Інструкцыя" у выглядзе кнопкі. Пры націску на яе ў цэнтры акна браўзэра адкрываецца прэзентацыя.

    Усе буйныя сайты для прагляду фільмаў і серыялаў створаны пры дапамозе айфреймов (напрыклад, "Имхонет"), гэтак жа як і сацыяльныя сеткі. Нават галоўная старонка "Яндэкса" змяшчае гэты тэг, і не адну пару.

    Як прапісаць iframe

    Запампаваць на сайт дакумент у выглядзе акенца з паласой пракруткі можна ў любое месца. Звычайна тэгі размяшчаюць ўнутры body. Акрамя стандартнага

    і , як было паказана на прыкладзе вышэй, можа выкарыстоўвацца і тэг спісу -

  • .

    У айфрейм дадаюцца атрыбуты:

    • шырыні (width) і вышыні (height =);
    • выраўноўвання па краі align;
    • водступаў, якія можна і не прапісваць: па змаўчанні задаецца значэнне 6 - гэтага цалкам дастаткова;
    • пры дапамозе allowtransparency можна задаць празрыстасць вобласці фрэйма, каб было відаць фон старонкі;
    • плюс ўжо знаёмыя scr, name, scrolling, border.

    Рух пры дапамозе айфрейма

    Самае цікавае ўменне ў галіне стварэння фрэймаў - гэта напісанне кода, які дазваляе адкрываць у акне кантэнт па спасылцы, - тое, што зрабілі стваральнікі люстэрка Seopult, толькі адразу з некалькімі спасылкамі (адначасова даступнымі карыстачу на адной старонцы).

    Для гэтага бярэцца айфрейм, у ім дадаткова прапісваецца імя праз name =. Напрыклад, zagolovok. Далей перад ім у тэгах і прапісваюцца спасылкі праз a HREF = http: // site / article / 143778 /% D1% 81 абавязковым указаннем пасьля іх атрыбуту target = zagolovok. Перад тым як выкарыстоўваць зачыняе тэг а, паказваецца надпіс, якая будзе служыць спасылкай-кнопкай. Тэгі "а" адкрываюць і закрываюць заключаюцца ў тэг p.

    Такіх радкоў у кодзе можна прапісаць некалькі, каб у выніку на сайце атрымаць у адзін шэраг некалькі кнопак-спасылак, націскаючы на якія ў акне знізу будзе адлюстроўвацца розны кантэнт.

    Код будзе выглядет так:

    Падаць аб'яву

    Праглядзець аб'явы