Koncept rámca v HTML. Iframe a Frame - čo sú to a ako najlepšie používať rámce v Html Zobrazenie šírky okraja rámca je riadené atribútom

Začnime štruktúrou rámu. Čo je jej podstatou? V dokumente, ktorý načítame do prehliadača, máme možnosť usporiadať špeciálne oblasti typu okna. Do týchto oblastí je možné načítať ďalšie jednotlivé dokumenty (webové stránky).

Prečo je to potrebné? Keďže sa dokumenty načítavajú do samostatných oblastí, správajú sa nezávisle. To znamená, že môžete urobiť niečo v jednom dokumente, zatiaľ čo ostatné dokumenty zostanú nezmenené.

Kde nájdete takéto rámové konštrukcie? Toto sú súbory pomocníka (s príponou .chm).

Tu je jednoduchý príklad dokumentu s rámami:

Príklad rámov Túto stránku si prezeráte pomocou prehliadača, ktorý nepodporuje rámce.

Prvok sady rámov. Jeho úlohou je pokryť oblasť zobrazenia a rozdeliť ju na samostatné oblasti. Tie. inštruovať prehliadač, v akom pomere a ako (horizontálne alebo vertikálne) delíme tieto oblasti.

Prvok rámu popisuje každú takúto jednotlivú oblasť. Jediný štítok. Zaberá rozmery uvedené v sade rámov.

Ak prehliadač nepodporuje rámce, zobrazí sa prvok noframes.

Všimnite si, že neexistuje žiadny prvok tela. Namiesto toho sa použije prvok frameset. To je jeden z dôvodov, prečo sa rámce na webových stránkach už nepoužívajú.

Atribúty prvkov sady rámcov
  • cols - vertikálne rozdelenie stránky do oblastí zobrazenia.
  • riadky - horizontálne rozdelenie stránky do oblastí zobrazenia.
prvok rámu

Tento prvok popisuje oblasť jedného okna. Pomocou atribútu src môžete do nej načítať ľubovoľný dokument. Príklady:

Atribút rolovanie- rolovanie (štandardne automatické). Ak dokument presahuje oblasť zobrazenia tohto rámca, dôjde k rolovaniu. Ak sa dokument úplne zmestí do rámčeka, nedochádza k posúvaniu. Posúvanie je možné deaktivovať, ale je lepšie ho nechať na automatickom režime.

Jediný atribút noresize- zakazuje zmenu veľkosti rámca v prehliadači. Štandardne je to povolené.

Atribút rámová hranica- snímok po snímku. Hodnota '1' - kresliť, hodnota '0' - nekresliť. Platné sú len tieto dve hodnoty. Štandardne je rám nakreslený.

Atribút šírka okraja– označuje vzdialenosť, o ktorú bude obsah daného rámca horizontálne ustupovať od rámov tohto rámca.

Atribút výška okraja– zvislé odsadenie od obsahu k okrajom rámu.

Vložený prvok iframe

Prvok iframe („čiarové okno“). Tento prvok je spárovaný (existuje otváracia a zatváracia značka). Tento prvok slúži na rovnaký účel – na usporiadanie prvku okna v dokumente.

Ako sa líši od starých rámov? Je sebestačný a nepotrebuje žiadne ďalšie nádoby. A môže sa objaviť v akýchkoľvek dokumentoch, teda tam, kde je prvok tela.

Prvok iframe je vložený prvok s vymeniteľným obsahom. Tie. vytvorí sa oblasť čiarového typu s akýmikoľvek abstraktnými rozmermi a do tejto oblasti sa načíta obsah nejakého externého dokumentu (súbor html).

Iframe má rovnaké atribúty ako obrázky (keďže sú rovnakého typu): name, width, height, src, frameborder, scrolling, hspace, vspace, marginwidth, marginheight.

3,8 tis

Mnoho moderných webových stránok obsahuje „lepkavé“ navigačné ponuky, ktoré sa zobrazujú buď na bočnom paneli, alebo v hornej časti pri posúvaní stránky nahor a nadol. Ale vlastnosti CSS, ktoré vám umožňujú vytvárať rýchle ponuky, nie sú vždy podporované prehliadačmi. Predtým sa na implementáciu podobnej funkcie používali rámce HTML.

Rozdiel medzi rámcami a rámcami iframe

Keď použijete sadu rámcov, rozdelíte viditeľnú časť okna prehliadača na viacero rámcov. Každý rámec má svoj vlastný obsah, ktorý neovplyvňuje obsah nasledujúceho. Rámce a prvky iframe plnia podobnú funkciu – vkladajú zdroj do webovej stránky, ale zásadne sa od seba líšia:

  • Rámy sú prvky, ktoré definujú rozloženie;
  • Prvky iframe sú prvky, ktoré pridávajú obsah.
História a budúcnosť rámov

W3C má zastarané rámce v HTML5. Dôvodom tohto rozhodnutia bolo, že rámce HTML majú negatívny vplyv na použiteľnosť a dostupnosť. Uvidíme, či sú tieto tvrdenia oprávnené.

Problémy s rámami
  • Problémy s použiteľnosťou: S rastúcou popularitou mobilných zariadení s malými obrazovkami je potrebné, aby stránky ponúkali používateľom viacero zobrazení, ktoré sa menia v závislosti od veľkosti zobrazovanej oblasti. Zatiaľ čo rámce môžu byť manipulované tak, aby poskytovali určitý stupeň odozvy, nie sú veľmi vhodné na vytváranie responzívnych webových stránok;
  • Dostupnosť: Čítačky obrazovky a ďalšie pomocné technológie sú pomerne náročné na čítanie a interakciu s webmi, ktoré používajú rámce.

V súčasnosti existuje globálny trend vo vývoji webu oddeľovať obsah webovej stránky od jej prezentácie:

  • Obsah musí byť pridaný a definovaný značkovaním, napríklad prostredníctvom HTML;
  • Prezentácia je definovaná jazykmi ako CSS a JavaScript.

Používanie rámcov spočiatku zahŕňa vytvorenie špecifického vzhľadu a štruktúry, zatiaľ čo prezentačné úlohy musia byť spracované pomocou CSS.

Budúcnosť rámov

Hoci všetky moderné prehliadače dnes podporujú rámce, W3C výslovne uvádza, že rámce „by nemali používať weboví vývojári“. Ak máte web, ktorý používa rámce, mali by ste zvážiť prechod na iné technológie. V určitom okamihu prehliadače prestanú podporovať rámce a keď sa to stane, stránky, ktoré ich používajú, sa stanú nepoužiteľnými.

Ako vytvoriť rámy v HTML

Rámce by sa nemali používať pri vývoji nových stránok, ale pre webmasterov, ktorí udržiavajú staré zdroje, môže byť užitočné vedieť, ako ich používať.

Základná koncepcia rámov

Základný koncept rámov je pomerne jednoduchý:

  • Použite prvok frameset na konkrétnom mieste v prvku body v dokumente HTML;
  • Použite prvok rámu na zarámovanie obsahu webovej stránky;
  • Použite atribút src na identifikáciu prostriedku, ktorý by sa mal načítať do rámca;
  • Vytvorte samostatný súbor obsahu pre každý rámec HTML.

Pozrime sa na niekoľko príkladov, ako to funguje. Najprv si musíme vytvoriť nejaké HTML dokumenty, s ktorými budeme pracovať. Vytvorme štyri rôzne HTML dokumenty. Tu je to, čo bude obsahovať prvý:

Rám 1

Obsah rámu 1

Prvý dokument uložíme ako frame_1.html. Zvyšné tri dokumenty budú mať podobný obsah a budú podľa toho pomenované.

Vytváranie zvislých stĺpcov

Ak chcete vytvoriť sadu štyroch vertikálnych stĺpcov, musíte použiť prvok frameset s atribútom cols. Atribút cols sa používa na určenie počtu a veľkosti stĺpcov, ktoré bude sada rámcov obsahovať. V našom prípade máme na zobrazenie štyri súbory. Preto potrebujeme štyri rámy.

Aby sme ich vytvorili, musíme nastaviť atribút cols na štyri hodnoty oddelené čiarkou. Pre jednoduchosť priradíme každému z rámov hodnotu * , tým mu nastavíme veľkosť, ktorá automaticky zaplní všetok dostupný priestor. Naše značenie HTML bude vyzerať takto:

A takto sa toto označenie zobrazí:

Vytváranie vodorovných riadkov

Riadky rámca HTML možno vytvoriť pomocou atribútu rows namiesto atribútu cols ako v predchádzajúcom príklade:

Vykonaním tejto zmeny sme to urobili tak, že rámce sa teraz načítavajú v štyroch radoch nad sebou:

Zlúčenie stĺpcov a riadkov

Stĺpce a riadky rámcov môžu byť zobrazené súčasne na tej istej stránke. Môžete vložiť jeden rám do druhého. Aby sme to dosiahli, najprv vytvoríme sadu rámcov a potom vnoríme podradenú sadu rámcov do nadradeného prvku. Tu je príklad toho, ako môžete vnoriť dva riadky do množiny troch stĺpcov:

frameset cols="*,*,*">

Príklad HTML rámca:


Vnorená sada rámcov sa nachádza vo vnútri nadradeného prvku, prvého rámca. Vnorený prvok je možné umiestniť kdekoľvek. Napríklad, ak chceme, aby bol vnorený prvok umiestnený v strede, potom jednoducho preusporiadame prvky takto:

Takto sa budú rámy zobrazovať takto:


Môžete vytvoriť ďalšie vnorené rámce:

Tento kód vytvorí množinu dvoch rovnako veľkých stĺpcov. Druhý stĺpec potom rozdelíme na dva riadky. A nakoniec rozdelíme druhý riadok na dva stĺpce. Takto to bude vyzerať:


Ďalším spôsobom, ako vytvoriť kombináciu riadkov a stĺpcov, je definovať mriežku stĺpcov a riadkov v jednom rámci. Napríklad, ak chcete vytvoriť mriežku štyroch rovnako veľkých rámcov, môžete použiť nasledujúci kód:

Výsledná mriežka riadkov a stĺpcov bude vyzerať takto:

Ako upravovať rámy

Pokiaľ ide o úpravu štýlu webovej stránky, ktorá používa rámce v HTML, existujú dva spôsoby priradenia štýlov:

  • Definovanie štýlov v každom rámci;
  • Definovanie štýlov pre sadu rámov.

Reprezentácia každého rámca musí byť definovaná v zdrojovom dokumente. Zobrazenie sady rámcov musí byť definované v nadradenom dokumente obsahujúcom sadu rámcov. Inými slovami, štýly pre frame_1.html musia byť nastavené pravidlami CSS obsiahnutými v súbore frame_1.html alebo v predlohe priradenej k súboru frame_1.html.

Definovanie štýlov rámu v zdrojovom dokumente

Ako pri každej webovej stránke, obsah každého rámca možno upraviť pomocou CSS. Ak chcete upraviť obsah každého rámca, musíte ho pridať do hlavného dokumentu, a to buď prepojením na externý súbor štýlov, alebo pridaním interných alebo vložených štýlov. Vzhľadom na to, že máme štyri zdrojové dokumenty, CSS štýly je potrebné aplikovať na každý dokument zvlášť.

Aplikovaním štýlov CSS na webovú stránku, ktorá obsahuje sadu rámcov, nebudeme môcť použiť štýly na každý rámec jednotlivo. Ak chceme upraviť štýl frame_1.html, musíme tieto štýly pridať priamo do samotného dokumentu. Tu je príklad, ako to možno urobiť:

telo (pozadie: sivé;) h1 (farba: modrá;) p (okraj: 20px;) Rám 1

Obsah rámu 1

Ak sa vrátime k predchádzajúcemu príkladu vytvárania rámcov v HTML so štyrmi rovnako veľkými stĺpcami a po vykonaní týchto zmien v súbore frame_1.html načítame sadu rámcov, dostaneme toto:

Definovanie štýlov a formátovania rámcov

Ako ovplyvniť prezentáciu sady rámcov nad rámec definovania štýlov samotných dokumentov:

  • Veľkosť každého rámca môže byť definovaná alebo pevná;
  • Priestor medzi rámami je možné zmeniť;
  • Je možné určiť formát okraja okolo každého rámu.

Tieto zmeny sa nevykonávajú prostredníctvom CSS. Vykonávajú sa pridaním atribútov a ich hodnôt do prvku rámu.

Veľkosť rámu

Veľkosti snímok možno zadať v pixeloch, percentách alebo snímky môžu automaticky zaberať všetok dostupný priestor. Ak chcete určiť veľkosť rámca, vložte požadovanú hodnotu do atribútu cols alebo rows. V predvolenom nastavení, ak rám nemá špecifikovaný atribút noresize, návštevníci stránky môžu použiť myš na pretiahnutie hranice medzi dvoma rámami a zmeniť ich veľkosť. Ak to nie je žiaduce, na prvok rámca sa môže použiť atribút noresize a nebude možné zmeniť veľkosť. Skombinujme oba tieto pojmy v praxi.

Vytvoríme nasledovné rozloženie:

  • Jeden riadok na celú šírku pozdĺž hornej časti strany;
  • Tri stĺpce pod horným riadkom;
  • Prvý a tretí stĺpec majú veľkosť tak, aby vytvorili ľavý a pravý bočný panel;
  • Stredný stĺpec má veľkosť tak, aby predstavoval väčšiu oblasť obsahu.

HTML rámec môžeme vytvoriť pomocou nasledujúceho kódu:

Tento kód vytvorí sadu rámcov z dvoch riadkov:

  • Prvý riadok je vysoký 150 pixelov. Atribút noresize špecifikovaný pre prvý rámec znamená, že jeho veľkosť nemožno zmeniť;
  • Štýly, ktoré sme predtým použili na frame_1.html, sa zachovajú, ale ovplyvňujú iba obsah tohto rámca;
  • Druhý riadok sa roztiahne a vyplní zostávajúci priestor;
  • Druhá sada rámcov je vnorená do druhého riadku a obsahuje tri stĺpce;
  • Prvý a tretí stĺpec vypĺňajú 20 % dostupného priestoru v okne prehliadača;
  • Druhý stĺpec sa rozšíri a vyplní priestor medzi prvým a tretím stĺpcom;
  • Keďže sme nešpecifikovali atribút noresize pre stĺpce, na začiatku sa zobrazia na základe veľkostí uvedených v kóde.

Návštevník stránky však bude môcť manuálne zmeniť ich veľkosť.

Tento kód vytvorí webovú stránku, ktorá sa vykreslí takto:

Formátovanie okraja a vypchávky okolo rámu

Teraz, keď sme definovali rozloženie, v prípade potreby môžeme zväčšiť alebo zmenšiť výplň medzi rámami, ako aj odstrániť hranice medzi nimi. Pomocou rozloženia, ktoré sme vytvorili v predchádzajúcom kroku, odstránime okraje medzi tromi stĺpcami, ale ponechajme okraj medzi horným a spodným riadkom. Pridajme tiež výplň okolo obsahu prvého rámca HTML:

Atribút marginheight aplikovaný na prvú snímku pridáva okraj o 15 pixelov nad a pod obsah načítaný v prvej snímke. Hodnota frameborder 0 odstráni okraje pre všetky tri spodné snímky. Takto to bude vyzerať:

Určenie rámov pomocou odkazov

Jedným z najbežnejších použití rámcov je vytvorenie „lepkavej“ navigačnej ponuky v rámci, ktorá je vždy viditeľná bez ohľadu na polohu obsahu ostatných rámcov. Pri správnom použití odkazy v navigačnej ponuke spôsobia načítanie nových zdrojov do rámca, zatiaľ čo zvyšok rámca zostane statický.

Kotvy môžete naformátovať tak, aby sa zacielili na konkrétne rámce, a to tak, že požadovanému prvku rámca pridelíte atribút názvu a použijete cieľový atribút vo vnútri prvku a na načítanie href v zadanom rámci. Ak je to všetko trochu mätúce, prevedieme vás procesom vytvárania rámcov v HTML krok za krokom.

V prvom rade musíme rámu priradiť názov, v ktorom sa majú odkazy otvárať. V rozložení, ktoré sme vytvorili skôr, môžeme použiť ľavý stĺpec pre navigačnú ponuku a stredový stĺpec ako cieľový rám. Ak to chcete urobiť, musíte cieľovému prvku priradiť atribút názvu:

Teraz, keď sme nastavili name="mid_col" pre centrálny stĺpec, môžeme vytvoriť niekoľko odkazov v zdrojovom dokumente nášho ľavého stĺpca frame_2.html:

Rám 2

Obsah Rámca 2

  • Načítať frame_1.html
  • Načítať frame_2.html
  • Načítať frame_3.html
  • Načítať frame_4.html

Teraz, keď načítame webovú stránku, ľavý bočný panel bude obsahovať štyri navigačné odkazy. Po kliknutí na odkaz sa obsah súboru načíta v rámci stredného stĺpca s atribútom name="mid_col" . Toto uvidíme, keď sa stránka načíta:


Ak klikneme na odkaz Načítať frame_1.html, obsah tohto súboru sa načíta do stredového stĺpca a získame nasledovné:

Ak klikneme na odkaz Načítať frame_2.html, uvidíme, že v ľavom bočnom paneli aj v stredovom stĺpci sa zobrazia navigačné odkazy:

Kliknutím na odkazy Načítať frame_3.html a Načítať frame_4.html v stredovom stĺpci sa načíta obsah týchto súborov. Ak sme zabudli pridať atribút target="mid_col" pre jeden z odkazov, potom keď naň kliknete, súbor sa načíta v rámci, ktorý obsahuje odkaz. Ak chceme znova načítať celú stránku, napríklad pri sledovaní odkazu na externý web, musíme pridať atribút target="_blank" alebo target="_top". Poskytovanie noframes noframes

V minulosti sa prvok noframes používal na zabezpečenie núdzového prístupu pre prehliadače, ktoré nepodporujú rámce HTML. V súčasnosti všetky moderné prehliadače podporujú rámce, ale noframe prakticky nie sú podporované. Výsledkom je, že pri práci s rámcami už nemusíme vytvárať noframes.

Ako urobiť rámy responzívne

Pri používaní rámov je pomerne ťažké zabezpečiť jednoduché používanie pre návštevníkov pristupujúcich na stránku zo smartfónov a malých tabletov. Keďže rámce boli z HTML5 úplne odstránené a považujú sa za zastarané, je dôležité, aby vlastníci stránok vytvorených pomocou rámov plánovali prestavbu svojich zdrojov a migráciu na iné technológie.

Namiesto stĺpcov použite riadky

Ak je to možné, usporiadajte rámce do riadkov a nie do stĺpcov. Na malej obrazovke je oveľa jednoduchšie prechádzať obsahom vertikálne ako horizontálne. Rámce HTML, ktoré sú usporiadané v rade, sa oveľa ľahšie zobrazujú na malej obrazovke. Ak zmenšíme šírku rozložení obsahujúcich riadky a stĺpce, simulujúc obrazovku Apple iPhone 6, uvidíme, že riadky sa dajú zobraziť oveľa jednoduchšie ako stĺpce:

Pre šírky stĺpcov použite percentá

Keď sú veľkosti stĺpcov nastavené v percentách a nie v pixeloch, ich veľkosť sa automaticky zmení na základe veľkosti obrazovky zariadenia. Aj keď to môže spôsobiť určité problémy v tom, že niektoré snímky môžu byť príliš malé, celková interakcia a zážitok zo sledovania budú lepšie, ak sa celková šírka stĺpcov zadá v percentách a nie v pixeloch.

Ako prejsť z rámov na iné technológie

Element frameset aj frame element boli z najnovšej špecifikácie HTML5 odstránené. Vlastníci lokalít vytvorených pomocou rámcov musia svoje aktíva prebudovať, aby ich odstránili z rozloženia. V určitom okamihu prehliadače prestanú podporovať rámce. Opustenie rámov je teda nielen žiaduce, ale musí sa to urobiť.

Hodnotenie obsahu obsiahnutého v rámoch

Prvým krokom k prepracovaniu webu, ktorý používa prvky iframe HTML, je identifikovať dôvody, prečo sa rámce používajú:

  • Boli rámy použité na vytvorenie špecifického rozloženia? Ak áno, CSS možno použiť na vytvorenie podobného rozloženia;
  • Boli rámce použité na vytvorenie konkrétnej veľkosti reklamného kontajnera? Existuje mnoho spôsobov, ako tento efekt znovu vytvoriť pomocou CSS alebo widgetov navrhnutých na prácu s CMS;
  • Používali sa rámce na vytvorenie lepivých navigačných ponúk? Rovnaký efekt možno opäť vytvoriť pomocou CSS;
  • Boli rámce použité na načítanie obsahu z externého webu? Ak áno, potom prvok iframe, ktorý je súčasťou HTML5, možno použiť na vloženie obsahu z externého webu.

Takmer v každom prípade môžete použiť CSS na opätovné vytvorenie rozloženia navrhnutého pomocou rámcov a prvky iframe možno použiť na vloženie externých zdrojov.

Stratégia pre váš nový web

Ak bola vaša stránka vytvorená pomocou rámcov, je veľká šanca, že je už veľmi zastaraná. Namiesto jednoduchého skompilovania celého obsahu vašej stránky do jedného súboru HTML a jeho štylizácie pomocou CSS, možno je čas popremýšľať o inovácii na systém na správu obsahu.

Prechod na CMS zaberie spočiatku viac času, no z dlhodobého hľadiska výhody prevádzky moderného webu prevážia krátkodobé výzvy. Aby sme vám pomohli pri rozhodovaní o redakčnom systéme, odporúčame venovať pozornosť trom najobľúbenejším:

  • WordPress ;
  • Joomla! ;
  • Drupal.
Dodatočné zdroje

Ak sa chcete dozvedieť viac o rámcoch HTML, najlepším zdrojom ďalších informácií je World Wide Web Consortium (W3C). Tu sú niektoré zo stránok s informáciami o rámoch:

  • HTML4 dokumentácia o rámoch;
  • Zastarané funkcie HTML5
Súvisiace položky
Názov položky Atribúty Popis
noframes Prvok bol použitý vo vnútri nadradeného prvku na poskytovanie záložného obsahu pre používateľov, ktorých prehliadače nepodporovali . V tomto bode sú rámy zastaranou technológiou, takže prvok by sa nemal používať.
iframe pieskovisko vytvorí vložený rámec, ktorý vypíše nezávislý dokument HTML do aktuálneho dokumentu.
frameset rámová hranica Prvok bol použitý na vytvorenie skupiny rámov, s ktorými možno manipulovať a upravovať ich ako jeden. Rámce HTML sú teraz zastarané a nemali by sa používať.
rám Src Prvok bol použitý na rozdelenie okna prehliadača na niekoľko nezávislých častí. Rámy sú momentálne zastarané a nemali by sa používať.

Táto publikácia je prekladom článku „Rámy“, ktorý pripravil priateľský projektový tím

453

Frameset predstavuje jednoduchý spôsob vytvorenia viacerých samostatných oblastí posúvania v okne prehliadača, ako aj pohodlný mechanizmus na zmenu obsahu rámca.

Ale rámy majú aj značné nevýhody. Preto sa ich používanie neodporúča. Hoci sú rámce podporované v HTML 4.01, nie sú v HTML 5. Boli nahradené metódami formátovania CSS bohatými na funkcie. Hlavné nevýhody rámov:

  • Vyhľadávače majú problémy s prácou s rámami;
  • Nízka kompatibilita URL;
  • Rámce nie sú dostupné pre všetky klientske aplikácie;
  • Stránky zobrazené v rámoch sa ťažko pridávajú do záložiek;
  • Bežné problémy pri tlači webových stránok.

Rámy sa zvyčajne používajú na vytvorenie oddelených posúvateľných oblastí v rámci jedného okna. Tento prístup sa používa v aplikáciách pre mobilné a desktopové platformy. Príkladom takejto aplikácie je Windows Explorer. Okno Prieskumníka sa skladá z dvoch častí. Priečinky a „Obľúbené“ sa zobrazia na ľavej strane okna a obsah priečinka vybratého na ľavej strane okna sa zobrazí na pravej strane.

Framesety a rámové dokumenty

Rámy sa ťažko používajú, pretože vyžadujú vytvorenie samostatného súboru HTML, ktorý definuje umiestnenie rámcov. Rovnako ako ďalšie súbory HTML na ich použitie.

Vytvorenie sady rámov

Nižšie je uvedený príklad vytvorenia súboru rámcov HTML:

… …

Vlastnosti kódu:

  • Chýba prvok „telo“. Jeho úlohu zohráva značka;
  • Tagy umiestnené vo vnútri definujú obsah rámcov a ich vlastnosti;
  • Okrem a v dokumente už nie je žiadny obsah.
Tag

Značka je zodpovedná za umiestnenie rámu v dokumente. Hodnoty v ňom uvedené určujú počet riadkov a riadkov sady rámcov, ako aj šírku snímok. Formát značky vyzerá takto:

Veľkosti stĺpcov alebo riadkov je možné zadať v pixeloch, percentách alebo „*“. V druhom prípade prehliadač rozdelí zvyšok okna do stĺpcov, kde hodnota „*“ označuje ich šírku.

Hodnoty atribútu cols alebo rows tiež určujú počet snímok zobrazených na stránke. Každá položka (hodnota) vyžaduje značku vo vnútri značky.

Zvážte nasledujúce príklady vytvorenia značky:

Tag

Značka je zodpovedná za vlastnosti každého rámca v sade rámcov uzavretého v značke sady rámcov. Má nasledujúcu syntax:

Atribút name dáva rámu jedinečný názov, na ktorý môžu odkazovať adresy URL, skripty atď. Je to potrebné na kontrolu obsahu rámca. Atribút src sa používa na určenie adresy URL obsahu, ktorý sa má zobraziť v rámci.

Značka podporuje ešte jeden atribút - noresize. V predvolenom nastavení je veľkosť rámu nastaviteľná. Ak chcete zabrániť zmene veľkosti, musíte nastaviť atribút noresize na noresize .

Napríklad :

Definovanie odkazov pre rámy

Ak chcete zmeniť obsah rámca, musíte zadať požadovaný rámec. Používa sa na to atribút name. Tieto názvy sa potom môžu použiť v skriptoch a značkách odkazov na definovanie nového obsahu pre rámec.

Obsah rámca v sade rámov môžete zmeniť pomocou atribútu target tagu odkazu. Pre atribút target sú povolené nasledujúce hodnoty:


Napríklad :

Takže rámy... na čo slúžia a aké výhody poskytujú? Pokúsim sa o tom hovoriť v tejto kapitole a samozrejme o tom, ako ich implementovať a pracovať s nimi.

Pri vytváraní webovej stránky sa často stáva, že je potrebné otvoriť niekoľko HTML dokumentov súčasne v jednom okne prehliadača... preto boli vytvorené rámce na definovanie pracovných oblastí pre každý dokument. Okrem toho sú rámy dobrým nástrojom, pomocou ktorého môžete rozložiť stránku, slúžia ako dôstojná „alternatíva“ k tabuľkovej metóde rozloženia stránky... Slovo „alternatíva“ dávam do úvodzoviek, pretože je to úplne iný spôsob budovania webu s vlastnými výhodami a nevýhodami a je dosť ťažké ho porovnávať s doteraz známou konštrukciou webu.. ale najskôr..

Začnime? Povedzme, že potrebujeme otvoriť tri HTML dokumenty naraz v jednom okne prehliadača a usporiadať ich napríklad takto:

Čo k tomu potrebujeme? Na začiatok si samozrejme musíme vytvoriť tri samostatné html dokumenty, ktoré si vlastne otvoríme v jednom okne Prvý dokument nech obsahuje grafický obrázok a funguje ako logo, nazvime ho logotyp.html, druhý dokument bude nejaký obsah.. nazvime to menu .html a tretí je dokument s množstvom textu. text.html. Samozrejme, môžete si vymyslieť vlastné mená, ako aj obsah dokumentov, ale zatiaľ je lepšie skopírovať moje ... bude to pohodlnejšie pre mňa aj pre vás.

Máme teda tri súbory logotype.html, menu.html a text.html.. ktoré musíme umiestniť pod jednu strechu, no zatiaľ strechu nemáme.

Napíšeme „strecha“, hlavný dokument, ku ktorému pripojíme naše súbory. Keďže bude hlavný, dáme mu názov index.html.



rámy



Tu je štruktúra nám dobre známeho dokumentu, ktorý sme žuvali na úplnom začiatku nášho tréningu Rámy narúšajú existujúce stereotypy! Štruktúra rámca dokumentu vyzerá takto:



rámy



Absenciu štítku kompenzuje nový štítok - nainštalujte rám alebo sadu rámikov... s týmto chlapom budeme vlastne ďalej pracovať.

Značka má atribúty rows a cols – tieto atribúty hovoria prehliadaču, ako umiestniť rámce do okna prehliadača

riadky - horizontálne cols - vertikálne

V našom prípade potrebujeme horizontálne umiestnenie rámov... takže píšeme takto:



rámy



Percentá za rovnítkom nie sú nič iné ako veľkosť okien našich rámcov v jednom veľkom okne prehliadača, mali by sme umiestniť tri okná - preto sú tu aj tri hodnoty oddelené čiarkami. Pamätajte si, ako nastavujeme veľkosti buniek pre tabuľku, aj tu platí rovnaký princíp, rovnako ako v prípade buniek tabuľky, veľkosti rámov je možné zadať v percentách z celkovej plochy a v pixeloch.

Tu je niekoľko príkladov písania:
- táto položka označuje, že budú tri horizontálne okná, pričom posledné bude zaberať 70 % plochy okna prehliadača a prvé dve budú zaberať 15 %.
- tu sú vertikálne umiestnené tri okná, ktorých šírka je uvedená v pixeloch.
- takéto zadanie znamená, že prvé a tretie okno bude mať šírku 100 a 180 pixelov a druhý rám zaberie celú zostávajúcu plochu.

S umiestňovaním dokumentov sme skončili, teraz ich už zostáva len spojiť a vychutnať si prvý výsledok..

Značka a jej atribút src budú prehliadaču indikovať cestu k html dokumentu, ktorý by sa mal otvoriť v priestore, ktorý je na to určený. Máme tri samostatné dokumenty logotyp.html, menu.html a text.html, teraz musíme pre každý určiť cestu, čo vlastne robíme. (Predpokladám, že všetky štyri súbory sú v rovnakom priečinku a cesty k nim majú najjednoduchší zápis ako: )

súbor index.html


rámy







Súbor logotype.html


rámy





Súbor menu.html


rámy


Ponuka:

Šampiňónová polievka
Fazuľa v hrnci na taliansky spôsob
Austrálsky letný šalát
... ... ...



Súbor text.html


rámy


Šampiňónová polievka

veľa textu..


V tomto príklade som zverejnil všetky štyri dokumenty HTML, kde je hlavný index.html a ďalšie tri sú stránky typu plug-in, z ktorých každá môže v princípe fungovať autonómne a obsahovať čokoľvek, obrázky, tabuľky, texty, odkazy. .. Urobil som to Aby ste pochopili princíp práce s rámami. V ďalších príkladoch uverejním iba súbor hlavy s rámami (inak všetky zaberajú príliš veľa miesta na stránke) a viete, že mám „niekde vonku“ všetky ostatné súbory obsahujúce grafiku, texty, možno niečo inac.. no nezaostavaj za mnou, pomaly uprav svoje stranky pre buducu treningovu stranku.. neviem o com budes pisat ty svoje, ale slubila som ze pomozem jednej dievcatu napisat stranku venovanu do varenia..)) takze som sa rozhodol takpovediac namierit na dve muchy jednou ranou.. zajacik a web..)) asi takto..))

Vo vyššie uvedenom príklade sme usporiadali všetky okná horizontálne; zmenou atribútu rows na cols ich môžete usporiadať vo vertikálnom poradí. Čo ak však potrebujete umiestniť naše okná?


takto?: alebo takto?: alebo dokonca takto?:

Je tam východ. Pozrime sa na príklady.

Začnime prvým prípadom... čo vidíme? A vidíme dva riadky, kde druhý je rozdelený na dva stĺpce.

A teraz v poradí:

- rozdeliť okno prehliadača na dva riadky
- nahrajte naše logo do prvého riadku
- a rozdeľte druhý riadok na dva stĺpce
- v prvej bude jedálny lístok
- a v druhom je veľa textu
- zatvorte značku delenia stĺpcov
- zatvorte značku delenia riadkov

Vo všeobecnosti je nesprávne hovoriť stĺpce a riadky, pretože rámce nemajú nič spoločné s tabuľkami okrem vizuálnej podobnosti; správne je povedať horizontálne a vertikálne rámce... dobre, hovorím to tak, aby to bolo jasnejšie ti..

Dobre, pozrime sa na príklad:



rámy









V druhom prípade máme dva stĺpce, v ktorých je druhý rozdelený na dva riadky, takže budeme písať takto:

- rozdeliť okno na dva stĺpce
- prvý bude obsahovať obsah
- a druhú rozdeľte na dva riadky
- logo
- a hlavný text
- zatvorte delenie čiary
- uzavrieť rozdelenie do stĺpcov



rámy









Tretí prípad je trochu komplikovanejší, ale nemali by ste sa ho báť... najmä preto, že som si osobne vybral tento druh konštrukcie pre stránku o kulinárskom umení; nižšie vysvetlím prečo. čo máme? tri stĺpce a druhý stĺpec v podstate obsahuje náš prvý prípad.

- rozdeliť okno na tri stĺpce (všimnite si, že druhý stĺpec zaberá presne 800 pixelov a dva vonkajšie nemajú presnú veľkosť a rozdelia zostávajúci priestor na polovicu)
-v prvom stĺpci načítame html dokument, ktorý bude plniť čisto dekoratívnu funkciu

-
-
- Do druhého stĺpca vložíme náš „prvý prípad“
-
-
-
-

- v treťom stĺpci naložíme ten istý súbor s ozdobami
- buchnúť

Pozrite sa na príklad a potom vysvetlím, prečo som si vybral cestu piatich okien



rámy













Prečo teda päť okien? Spomínam si, že som už písal o tom, že rôzni užívatelia internetu majú na svojich monitoroch rôzne rozlíšenia a podľa toho na rôznych obrazovkách bude naša stránka vyzerať inak... a ak neexistujú žiadne konkrétne veľkosti, všetky naše kresby, texty, tabuľky budú vyzerať inak. , ako sa hovorí, „pláva“ pre tých používateľov, ktorých rozlíšenia monitora sú odlišné od vášho. Keď sme rozložili stránku pomocou tabuľky, problém s rozmermi stránky bol vyriešený priradením konkrétnej šírky a výšky tejto tabuľke, žiaľ, nie je možné to urobiť s rámami... aj keď zadáte šírku rámov, ktoré nie sú v percentách, ale v pixeloch je to stále posledný stĺpec, ktorý sa roztiahne po zostávajúcej šírke okna prehliadača a stránka, ako sa hovorí, stratí svoj „predajný vzhľad“. Čo by sme teda mali robiť? Musíme sa uchýliť k malým trikom... Nastavením centrálneho stĺpca (v ktorom máme vlastne celú stránku) na veľkosť 800 pixelov raz a navždy určíme jeho šírku a bezrozmerný prvý a tretí stĺpec v okrem dekorácie fungujú ako akési „pružiny“, na ktorých je centrálny stĺpik. Takže pre ľudí s malým rozlíšením monitora budú tieto okná/polia úzke a pre ľudí s vysokým rozlíšením široké, takže centrálny stĺp nebude nijako ovplyvnený a teraz doň môžeme umiestniť akékoľvek predmety s úplnou istotou, s presnou lokálnou referenciou, bez obáv o ich budúci osud. Porovnajte prvý príklad, kde sú tri okná, a tretí, kde ich je už päť, nie je to lepšie?

S rozmiestnením a veľkosťami rámikov skončíme... a už sme sa tu dlho zasekli... ideme ďalej.

Uvádzame rámy do úhľadného vzhľadu.

V našom poslednom príklade prvá vec, ktorá vás upúta, je celý rad posuvníkov, ktoré sú tam, kde sú potrebné a kde nie sú potrebné.. Poďme sa ich zbaviť, no, môžete ich niekde nechať. Robí sa to pomocou rolovacieho atribútu - tag, môže mať jeden z troch významov:

  • č
  • áno - vždy ukázať,
  • auto



rámy













Okraje rámca alebo inak vzdialenosť od hraníc rámčeka k textu alebo obrázku, ako v našom prípade, sa nastavujú v pixeloch pomocou atribútov marginwidth a marginheight tagu.



rámy













Povedzme si trochu o rámci okolo našich rámov.

Ak ste si v poslednom príklade všimli, že kurzor myši nadobudne v poslednom príklade iný vzhľad (uchopenie a posunutie) a teraz je možné túto hranicu ťahať ľubovoľným smerom, pričom držíte ľavú tlačidlo myši. Niekedy táto „mobilita“ rámčekov hrá do karát webmasterovi, no častejšie stále prekáža. Aby sa používateľovi zabránilo hrať sa s veľkosťou okien pre značku, bol vynájdený atribút noresize



rámy













Ale atribút border, ktorý je nám už dávno známy, nastavuje šírku v pixeloch tých istých snímok medzi snímkami... píše sa vo vnútri značky. Rovnako ako predtým, hodnota border="0" úplne odstráni okraje.



rámy













Rámy a odkazy.

Nastal čas oživiť našu stránku odkazmi, ale problém je, že známy odkaz Fazuľa v hrnci v taliančine otvorí tento dokument v rovnakom rámci, kde sa nachádza, v našom prípade priamo v rámci s obsahom a samotný obsah v momente kliknutia na toto odkazy zmiznú do zabudnutia.. môžete sa pozrieť na neohrabaný príklad.. kliknite na ktorýkoľvek odkaz v ňom.. Aby sa to v budúcnosti nestalo, musíte prehliadaču povedať v akom rámci na otvorenie dokumentu, ktorý potrebujeme, no, pokiaľ ho samozrejme naozaj nemusíte otvárať v tom istom rámci.

Pamätám si, že sme sa už v kapitole venovanej odkazom zoznámili s atribútmi názvu a cieľa, používajú sa aj pri práci s rámami, mechanizmus je mierne zmenený a je takmer rovnaký. V prvom rade, rám, v ktorom by sme chceli otvárať akékoľvek dokumenty, musí mať priradený individuálny názov.

píše sa to takto:

Meno si môžeš vymyslieť hocijaké..hlavné je nezabudnúť..

Píše sa to takto:

Fazuľa v hrnci na taliansky spôsob

No myslím, že ti netreba vysvetľovať, že predtým, ako sa odvoláš na nejaké dokumenty, je potrebné ich vytvoriť... v mojom prípade majú súbory (recepty) názvy text.html, text1.html, text2.html ...

Pozrite si príklad:

súbor index.html


rámy













Súbor menu.html


rámy


Ponuka:

Šampiňónová polievka
Fazuľa v hrnci na taliansky spôsob
Austrálsky letný šalát
... ... ...



Rovnako ako predtým je možné dokument otvoriť v samostatnom okne. Pripomínam, že sa to píše takto:

Fazuľa v hrnci na taliansky spôsob

Alebo priradením hodnoty _top k cieľovému atribútu ho otvorte v tom istom okne prehliadača, ale na celú obrazovku.. “vynulovanie” všetkého, čo tam je.. je to napísané takto:

Fazuľa v hrnci na taliansky spôsob

Takto dopadla stranka...samozrejme, je na nej este popracovat...okrem toho podla mojej predstavy bude mat trochu inu strukturu, co sa tyka navigacie po stranke, bude mat cela kopa stranok, krasne menu, ale co sa tyka ramkovej struktury, myslim, ze ona ostane rovnaka..

plávajúci rám

Niekedy je potrebné vložiť ďalší HTML dokument alebo dokonca sériu takýchto dokumentov na stránku obsahujúcu nerámovú štruktúru v samostatnom okne. Na dosiahnutie tohto účelu existuje štítok - takzvaný plávajúci rám.

Táto značka má niekoľko atribútov:

src - povinný atribút označujúci cestu k stránke, ktorá sa má otvoriť
šírka - šírka plávajúceho rámca v pixeloch alebo percentách
výška - plávajúca výška rámu

rolovanie - zobrazenie rolovacej lišty

  • nie - nikdy nezobrazovať posúvač,
  • áno - vždy ukázať,
  • auto - zobraziť, ak je to potrebné.
zarovnať - zarovnanie plávajúceho rámu
  • vľavo - vľavo
  • vpravo - vpravo
  • hore - vyššie
  • dole - dole
frameborder - prítomnosť rámu okolo plávajúceho rámu
  • 1 - povoliť rám
  • 0 - vypnite rám

Všetko spolu je napísané takto:

Príklad dokumentu s pohyblivým rámom:



plávajúci rám


plávajúci rám
Na túto stránku bol zavedený takzvaný „plávajúci rám“.
V samostatnom okne otvorí ďalší html dokument na zobrazenie.



… … …


Noframes

Niektoré prehliadače nepodporujú štruktúru rámca dokumentu alebo ju nesprávne interpretujú, používatelia navyše často v nastaveniach prehliadača zámerne vypínajú podporu štruktúry rámca dokumentu HTML. A hoci je percento takýchto prehliadačov a používateľov malé, napriek tomu existujú.

Teraz si predstavte, že ste vytvorili svoju webovú stránku pomocou rámcovej štruktúry a niektorí návštevníci, možno bez toho, aby vedeli, v čom je problém, sa pokúsia otvoriť vašu webovú stránku a ich prehliadač zobrazí chybu! Čo si budú myslieť o vašej stránke? Myslím niečo ako: "Uf.. nejaký nezmysel.. Už sem neprídem!"

Aby bolo používateľovi jasné, že jeho nastavenia prehliadača/prehliadača nepodporujú rámce, je tu značka.

Značka zobrazuje text, ktorý je v nej uzavretý, ak prehliadač používateľa nepodporuje rámce alebo sú v jeho nastaveniach násilne zakázané. Ak prehliadač používateľa podporuje rámce, potom sa táto značka jednoducho ignoruje.



rámy


Prepáčte, ale váš prehliadač nepodporuje rámy.











Výsledok príkladu bude viditeľný, ak váš prehliadač naozaj nepodporuje rámy (tu som dlho rozmýšľal.. :) ak je to tak, tak prečo čítať túto kapitolu?) alebo ste vo svojom prehliadač ako experiment.

Značka musí byť umiestnená vo vnútri značky

S plávajúcim rámom je všetko ešte jednoduchšie, stačí napísať požadovaný text a tento text sa zobrazí na obrazovke, ak prehliadač nepodporuje rámce.

Prepáčte, ale váš prehliadač nepodporuje rámy.

    Predtým, ako začnete vytvárať stránku pomocou rámovej štruktúry, analyzujte jej rozloženie, veľkosť každého okna, prítomnosť alebo neprítomnosť posuvných pruhov v nich atď. polohu voči sebe navzájom.

    Použite značku. Pamätajte, že ak stránka vo vašom prehliadači funguje a zobrazuje sa tak, ako ste zamýšľali, pre ostatných používateľov to môže byť iné!

Rámy sú obdĺžnikové oblasti obrazovky, z ktorých každá obsahuje svoj vlastný dokument HTML. Rámy sú skvelé na formátovanie nasledujúcich dokumentov:

  • Obsah. Ak umiestnite obsah do zvislého stĺpca na webovej stránke, používateľ sa naň môže kedykoľvek odvolať bez toho, aby musel neustále klikať na tlačidlo návratu na predchádzajúcu stránku. Keďže obsah bude v rámci vždy po ruke, používateľ si bude musieť jednoducho vybrať inú položku a okamžite získať potrebné informácie.
  • Pevné prvky rozhrania. Môžete zmraziť grafiku na obrazovke, napríklad logo spoločnosti, zatiaľ čo zvyšok stránky sa posúva v inom rámci.
  • Formuláre a výsledky. V jednom rámci môžete vytvoriť formulár a v inom zobraziť výsledky dotazu.

    Bežné rámce sa v súčasnosti považujú za zastaranú technológiu a nie sú podporované v HTML5. Vo svojich projektoch nepoužívajte bežné rámy! V HTML5 už značky frame , frameset a noframes jednoducho neexistujú, namiesto toho je k dispozícii jedna značka iframe (vnorená alebo plávajúca snímka).

    Tag

    Štítok – nahrádza štítok a používa sa na rozdelenie obrazovky. Má uzatváraciu značku.

    Atribúty
  • COLS. Vertikálne rozdeľuje obrazovku. Prijíma hodnoty v pixeloch, percentách alebo len *. Hodnota * znamená, že príslušný stĺpec bude zaberať zvyšok obrazovky
  • RIADKY. Rozdeľuje obrazovku horizontálne. Prijíma hodnoty v pixeloch, percentách alebo len *. Hodnota * označuje, že konkrétny riadok bude zaberať zvyšok obrazovky
  • FRAMEBORDER. Určuje prítomnosť rámov, t.j. hranice rámu. Akceptuje hodnoty „áno“ alebo „nie“.
  • HRANICIA. Určuje šírku rámu v pixeloch.
  • BORDERCOLOR. Definuje farbu rámov. V predvolenom nastavení (ak sa používa štandardná farebná schéma systému Windows) majú okraje rámov matný sivý odtieň. Ale ak chcete, môžete si vybrať akúkoľvek inú farbu. Pri definovaní farby si môžete zvoliť jej názov aj číselný ekvivalent v systéme RGB. Napríklad MODRÁ alebo #0000FF.

    V samostatnom tagu má zmysel použiť iba jeden z atribútov - COLS alebo ROWS. To znamená, že štruktúra rámca bude pozostávať buď len zo stĺpcov, alebo iba z riadkov. Ak chcete vytvoriť riadky v stĺpcoch alebo stĺpce v riadkoch, budete potrebovať vnorené kontajnery....

    Príklad






    výsledok:

    Všimnite si aj rozdiel v poradí číslovania rámov.

    Tag

    Značka umiestnená v kontajneri ... určuje, čo presne sa má zobraziť v konkrétnom rámci. Nemá uzatváraciu značku.

    Atribúty
  • SRC. Definuje adresu URL spojenú s konkrétnym rámcom.
  • MARGINWIDTH. Určuje vzdialenosť medzi obsahom rámca a jeho ľavým a pravým okrajom.
  • MARGINHEIGHT. Určuje vzdialenosť medzi obsahom rámca a jeho horným a spodným okrajom.
  • ROLOVANIE. Určuje, či sa v okne rámu nachádza posúvač. Môže nadobúdať hodnoty „yes“, „no“ a „auto“ (predvolené).
  • NORESIZE. Definuje hranice rámca ako „pevné“ a bráni používateľovi zmeniť veľkosť okna rámu. Okrem toho sa zaznamenávajú veľkosti všetkých snímok, ktoré majú spoločnú hranicu s pevnou hranicou.
  • FRAMEBORDER, BORDER, BORDERCOLOR. Tieto atribúty sú spojené s rámcami a sú podobné tým v súbore .
  • NÁZOV. Určuje názov okna rámu. Jediný atribút, ktorý neovplyvňuje vzhľad rámu. Umožňuje vám ovládať proces načítania rámu. Ak má okno rámca jedinečný názov, dá sa k nemu priamo pristupovať z iných rámov. Pri pomenovaní okien rámov je potrebné mať na pamäti jedno obmedzenie: názov nesmie začínať znakom podčiarknutia „_“, inak bude ignorovaný. Keďže niektoré názvy služieb začínajú týmto znakom. Príklad




    Použitie značky A na načítanie do rámca Atribúty
  • HREF. Určuje adresu URL alebo názov nového dokumentu, ktorý chcete načítať do okna špecifického rámca.
  • CIEĽ. Určuje názov rámca, do ktorého sa načíta nový dokument. Tento názov musí byť priradený k rámu pomocou atribútu NAME v súbore .

    Nasledujúci príklad rozdelí obrazovku na dve vertikálne oblasti. Menšia ľavá strana obsahuje obsah a pravá strana načíta všetky ostatné HTML dokumenty. Súbor s obsahom obsahuje jednoduché textové hypertextové odkazy na príslušné sekcie. Aby všetko fungovalo, je potrebné vytvoriť HTML dokumenty v súboroch cosm.htm, eat.htm, perf.htm, massage.htm a manic.htm.

    Príklad obsahu
    • Tovar
      • Kozmetika
      • Výživové doplnky
      • Parfuméria
    • Služby
      • Masáž
      • Manikúra
    Ahoj! Tag

    Značka vás ušetrí od toho, aby ste museli opakovať atribút TARGET na každom jednom hypertextovom odkaze, ak všetky ukazujú na rovnaké okno rámca. Ak to chcete urobiť, musíte do kontajnera umiestniť značku s atribútom TARGET....

    Použitie tagu umožní zmenšiť veľkosť súboru s obsahom left.htm z predchádzajúceho príkladu.

    Príklad obsahu
    • Tovar
      • Kozmetika
      • Výživové doplnky
      • Parfuméria
    • Služby
      • Masáž
      • Manikúra

    Atribút TARGET každého konkrétneho odkazu nahrádza atribút tagu s rovnakým názvom.

    Príklad obsahu
    • Tovar
      • Kozmetika
      • Výživové doplnky
      • Parfuméria
    • Služby
      • Masáž
      • Manikúra
    Tu je tovar! Tu sú služby! Špeciálne efekty získané pomocou atribútu TARGET

    Ako už bolo spomenuté, názvy rámcov nemôžu začínať podčiarkovníkom, pretože začínajú názvami služieb, ktoré prenášajú špeciálne informácie do prehliadača. Nižšie sú uvedené špeciálne názvy, z ktorých každý sa používa na dosiahnutie špecifického účinku.

  • TARGET=”_blank” . Dokument sa načíta do nového okna prehliadača.
  • TARGET=”_self” . Dokument sa načíta do aktuálneho okna.
  • TARGET=”_rodič” . Dokument sa načíta do nadradeného rámca. Zvyčajne je to rám stojaci v kontajneri... pred aktuálnym. Ak neexistuje nadradený rámec, hodnota „_parent“ sa stane identickou s hodnotou „_self“.
  • TARGET=”_top” . Dokument sa vloží do najvrchnejšieho rámu.

    V zásade sú tieto názvy služieb určené na to, aby sa tak či onak „vylomili“ zo súčasnej štruktúry rámca. Experimentujte s nimi, aby ste videli, ako môžete načítať dokumenty do rôznych okien.

    Tag

    HTML 4.0 zaviedlo plávajúce (alebo vložené) rámce. Pomocou značky môžete umiestniť jeden rámec do bežného dokumentu HTML. Navyše tu nie je potrebný kontajner.

    Záverečná značka je povinná!

    Atribúty
  • ALING. Určuje typ zarovnania. Akceptuje hodnoty „vľavo“, „v strede“, „vpravo“.
  • VÝŠKA. Určuje výšku rámu v pixeloch
  • WIDTH. Určuje šírku rámu v pixeloch.
  • SRC, MARGINIDTH, MARGINHEIGHT, SCROLLING, FRAME BORDER, BORDER, BORDERCOLOR, NAME . Podobné tým, o ktorých sa hovorilo vyššie.
  • vsspace. Nastaví okraje v hornej a dolnej časti na vonkajšej strane prvku iframe
  • hspace. Nastaví okraje na stranách mimo prvku iframe
  • šírka okraja. Určuje množstvo výplne pozdĺž ľavého a pravého okraja vo vnútri prvku iframe; musí byť rovné alebo väčšie ako 1.
  • výška okraja. Určuje množstvo výplne pozdĺž horného a spodného okraja vnútri prvku iframe; musí byť rovné alebo väčšie ako 1.
  • rolovanie. Určuje, či sa v prvku iframe zobrazí posúvač; hodnota môže byť „áno“, „nie“ alebo „auto“. Predvolená hodnota pre bežné dokumenty je auto.
  • titul. Text popisu. Tag

    Určuje, čo sa zobrazí v okne prehliadača, ak nepodporuje rámce.

    Váš prehliadač nepodporuje prvky iframe!

    Ako načítať rám bez ďalších súborov?

    Ak chcete načítať rámec bez použitia externých súborov, musíte vložiť kód HTML rámca do premennej a potom zadať „javascript:parent“ ako značku SRC. názov premennej".

    var varFrame = "HTML kód"; ...

    Problém panela s adresou so štruktúrou rámcovej lokality

    Pri používaní rámcov používa lokalita jednu stránku, ktorá označuje umiestnenie rámcov.

    Tu je príklad takejto stránky:

    ...

    Po načítaní tejto stránky sa informácie načítajú do rámcov. Všetky používateľské prechody na stránkach lokality sa uskutočňujú v týchto rámcoch. V adresnom riadku sa vždy zobrazuje iba cesta na úvodnú stránku, ktorá sa pri prechodoch nemení. Návštevník nevie, kde sa momentálne nachádza.

    Ak sa návštevník okamžite nedostane na hlavnú stránku webu (napríklad z vyhľadávača), nevedie to k rekonštrukcii všeobecnej štruktúry rámcov. To je dôvod, prečo vlastník lokality nemôže poskytnúť adresu internej stránke lokality.

    Existuje niekoľko riešení tohto problému

    Predtým sa zvažoval príklad rámovej konštrukcie. Zvážime rôzne spôsoby, ako tento problém vyriešiť pomocou neho.

    Myšlienka je nasledovná: pri načítaní stránky obsahujúcej informačnú časť skontrolujeme prostredie stránky a ak chýba požadovaná rámcová štruktúra, vytvoríme ju pomocou skriptu.

    Možné sú tri prípady:

  • návštevník navštívil stránku obsahujúcu rámcovú štruktúru;
  • návštevník navštívil jednu z informačných stránok;
  • návštevník sa dostane na stránku s navigačnou ponukou.
  • V prvom prípade sa po dokončení kontroly nevyžaduje žiadna akcia. Druhý a tretí sú takmer totožné, takže ďalej budeme uvažovať iba o druhom prípade.

    A tak sa návštevník dostane „tam, kde by nemal“. Na úplný začiatok stránky vložíme skript, ktorý vytvorí štruktúru rámca.

    Riešenie je možné implementovať ako na strane klienta, tak aj na strane servera. Hlavná nevýhoda implementácie na strane klienta je zrejmá – závislosť od možností a nastavení klienta. Napríklad je zakázané spúšťať skripty na počítači používateľa. Druhá možnosť nebude fungovať, ak server nepodporuje PHP.

    JavaScript riešenie.

    Tento prístup má svoje obmedzenie – nie všetky prehliadače podporujú JavaScript a v niektorých prípadoch používatelia skripty sami deaktivujú.

    Najprv skontrolujeme prostredie stránky a potom, ak požadovaná rámcová štruktúra neexistuje, vytvoríme ju.

    Vytvorme súbor frame.js :

    If (window.name != "main") ( window.name="root"; document.write(""); document.write(""); document.write(""); document.write("" ;)

    Najprv skontrolujeme názov okna, v ktorom sa stránka načíta: if (window.name != "hlavne"). Ak sa názov okna a názov rámu nezhodujú, musíte vytvoriť štruktúru rámu. Toto sa vykonáva dynamicky pomocou metódy zápisu objektu dokumentu.

    Ku každej stránke lokality pripájame súbor frame.js. Teraz budú mať stránky nasledujúcu štruktúru:

    ... ...

    S týmto prístupom k riešeniu tohto problému odpadá potreba súboru obsahujúceho rámcovú štruktúru.

    PHP riešenie

    Vďaka tomuto prístupu sa stránka stane prístupnou pre väčší počet návštevníkov.

    Prostredie stránky skontrolujeme inak (nie ako pri použití JavaScriptu). Dokument načítame do rámca s parametrom frames=yes. Pri otváraní stránky tento parameter skontrolujeme a v prípade potreby dynamicky vytvoríme štruktúru rámca. Nižšie je uvedený kód, ktorý je za to zodpovedný.

    Vloženie kódu do súboru frames.php. Teraz ho musíte pripojiť ku každej stránke webu. Nižšie je uvedený príklad takejto stránky.

    rámy...

    V tomto prípade, rovnako ako pri implementácii na strane klienta, nie je potrebné samostatne vytvárať HTML dokument popisujúci štruktúru rámca.


    .

     

    Môže byť užitočné prečítať si: