Riječ "okvir" znači okvir, okvir. Koristeći okvire, prostor prozora pretraživača je podijeljen u nezavisne sekcije u kojima se mogu prikazati različite informacije. Pogodno je koristiti okvire kada trebate prikazati podatke iz različitih izvora na ekranu.

Napomena 1

Okviri dijele prozor za pregled pretraživača na nekoliko pravokutnih podoblasti koje se nalaze jedna pored druge. Pojedinačni HTML dokumenti se mogu učitati u ove podoblasti i gledati nezavisno jedan od drugog. Između okvira, ako je potrebno, možete organizirati interakciju na osnovu odabira veze u jednom od okvira, što će dovesti do učitavanja traženi dokument u drugi okvir ili prozor pretraživača.

Područja primjene okvira

Programeri HTML dokumenata imaju na raspolaganju širok izbor formi za prezentaciju informacija na stranicama. Tekst i grafičke informacije može se naručiti i organizirati pomoću lista, tabela, opcija poravnanja, postavljanja horizontalnih linija i podjela pasusa. Ali ove mogućnosti nisu uvijek dovoljne, u takvim slučajevima potrebno je podijeliti prozor za gledanje na odvojene oblasti (okvire).

Izbor strukture okvira za predstavljanje informacija na WWW-u opravdava se:

• kada organizujete kontrolu učitavanja dokumenta u jednu od podoblasti prozora za pregled pretraživača dok istovremeno radite u drugoj podoblasti;
• kada se nalaze na određenom mestu u prozoru za pregled, informacije koje će uvek biti na ekranu bez obzira na sadržaj drugih podoblasti ekrana;
• kada se prikazuju informacije koje su pogodno locirane u nekoliko podoblasti prozora, od kojih se svako može gledati nezavisno od drugih.

Slika ispod prikazuje strukturu okvira prozora pretraživača HTML stranice.

Ova struktura je najtipičnija u slučajevima kada neki okviri služe kao sadržaj dokumenata, dok se drugi koriste za učitavanje njihovog sadržaja. Ranije se takav zadatak rješavao na ovaj način bez korištenja okvira. Na jednoj od stranica nalazio se sadržaj koji se sastojao od veza do drugih dokumenata ili određenih fragmenata. Kada ste kliknuli na takav link, sadržaj je nestao, a na njegovo mjesto se učitao dokument, nakon čitanja kojeg ste morali ponovo da se vratite na sadržaj. Kada su okviri počeli da se koriste, ovaj povratak više nije bio efikasan, jer je sadržaj počeo da se trajno nalazi na delu ekrana.

Okviri su inherentno slični tabelama, budući da ih obje koriste za podjelu prozora pretraživača na pravokutna područja s informacijama koje se nalaze u njima. Međutim, okviri vam omogućavaju ne samo da formatirate stranice dokumenta, već i da organizujete interakciju između njih. U osnovi, okviri i tabele se razlikuju po tome što svaki okvir odgovara zasebnom HTML dokumentu, a sadržaj svih ćelija tabele je deo jednog dokumenta. Osim toga, stranica prikazana u okviru može se pomicati kada se gleda nezavisno od drugih. Svaki okvir je neka vrsta zasebnog mini pretraživača. Tablice, za razliku od okvira, koji su uvijek u potpunosti prikazani na ekranu, često ne mogu u potpunosti da stanu u prozor i gledaju se samo u dijelovima. Stoga se može primijetiti da u HTML tabelama ukupan broj Budući da ćelije nisu ograničene i ponekad dosežu nekoliko stotina, broj okvira u dokumentu je obično nekoliko jedinica.

Kreiranje okvira

Oznake se koriste za kreiranje okvira.

Deskriptor formira skupove okvira koji dijele prostore prozora na redove i stupce. Zatim se visina i širina svih redova i kolona postavljaju kao procenat trenutnih dimenzija prozora pretraživača, u pikselima ili kao zvjezdica. Simbol zvjezdice označava da veličine okvira zavise od dimenzija drugih okvira na stranici.

Deskriptor definira strukturu i sadržaj određenog okvira.

Ispod je primjer koda stranice.

Primjer rada sa okvirima

Prednosti i nedostaci okvira

Prednosti okvira uključuju sljedeće:

• mogu istovremeno prikazati različite informacije u jednom prozoru;
• njihovim korištenjem moguće je trajno prikazivati ​​neke informacije (logotipe), bez potrebe za njihovim uvrštavanjem na svaku stranicu stranice;
• oni pomažu u izgradnji fleksibilne navigacije web lokacije.

Nedostaci okvira uključuju:

• njihova glavna prednost (prikazivanje informacija u jednom prozoru), budući da pristupačno područje web stranice u tom pogledu postaje znatno manje;
• odabir prave veličine okvira prilikom kreiranja često je težak, jer korisnik mora stalno da se kreće kroz okvir pomoću traka za pomicanje;
• na monitorima sa niskom rezolucijom ekrana, količina vidljivih informacija je znatno manja;
• Mnogi pretraživači i direktoriji odbijaju da registruju stranice koje koriste okvire.

Napomena 2

Još jedan nedostatak je što neki pretraživači ne mogu obraditi okvire. U ovom slučaju, pred korisnikom se pojavljuje samo prazan ekran. Da bi se pomoglo korisniku u ovoj situaciji, dizajnirana je oznaka koja omogućava prikaz teksta koji se nalazi između početne i završne oznake kada se okvir ne može prikazati.

Trake za pomicanje okvira

Podrazumevano, pretraživač će prikazati trake za pomeranje samo kada se informacije ne uklapaju u dimenzije okvira. Da biste to učinili, atribut SCROLLING je postavljen na jednu od vrijednosti da (ne), što omogućava pregledniku da uvijek sakrije trake za pomicanje ili ih uvijek prikazuje. Skrivanje traka za pomicanje omogućava vam da povećate veličinu vidljivog područja okvira. Istovremeno, ako podaci ne stanu u prozor, postat će nedostupni korisniku.

Promjena granica okvira

Promjena granica okvira može biti onemogućena, to se radi pomoću atributa NORESIZE. Ovaj atribut je pogodan za korištenje kada korisniku treba spriječiti promjenu originalnog izgleda stranice. Po zadanim postavkama, korisnik ima mogućnost pomicanja granica okvira po svom nahođenju, može postaviti nove dimenzije objekta kako bi poboljšao preglednost određeni fragment podaci. U slučajevima kada okviri nemaju vidljive granice, to će automatski zabraniti njihovu promjenu veličine. Koristeći atribut BORDER oznake, možete promijeniti debljinu graničnih linija okvira. Podrazumevano, pretraživač uokviruje okvir sivim okvirom i debljinom od 6 piksela. Atribut BORDERCOLOR vam omogućava da promijenite boju ivice. Atribut FRAMEBORDER vam omogućava da sakrijete granice okvira.

Podrazumevano, pretraživač prikazuje okvire sa marginom od 10 piksela između teksta i ivice okvira.

Atribut MARGINWIDTH specificira širinu lijeve i desne margine.

A atribut MARGINHEIGHT određuje visinu gornje i donje margine.

Kada postavljate veličine polja, morate koristiti oba atributa, jer pretraživač može automatski smanjiti veličinu nespecificiranih polja na minimalnu vrijednost.

Plutajući okviri

Neaktivni okviri su dio web stranice i ne zahtijevaju posebnu stranicu koja ih opisuje. Za kreiranje takvih okvira koristi se oznaka. Atribut NAME ove oznake specificira ime plutajućeg okvira, koje se kasnije može koristiti u definiranju hiperveze koja otvara odgovarajuću stranicu u ovom okviru. Atributi WIDTH i HEIGHT određuju dimenzije plutajućeg okvira, budući da korisnik nema mogućnost da ih sam promijeni.

Plutajuće okvire trenutno podržava samo Microsoft IE.

Ispod je primjer koda stranice:

Primjer 1

Primjer rada sa okvirima

width="350" height="300" align="left">

Primjer rada sa okvirima

Primjer rada sa okvirima

Uputstva

HTML jezik(HyperText Markup Language - “jezik za označavanje hiperteksta”) pruža dvije vrste okvira. „Plutajući“ je fleksibilniji i lakši za umetanje u postojeći. Općenito, konstrukcija koja opisuje umetanje prozora pomoću plutajućeg okvira izgleda ovako: Ovdje je izvor podataka za ovaj okvir postojeća lokacija (src atribut). Otvara se u okviru dimenzija 400 x 300, kao što je naznačeno u atributima širine i visine. Takođe možete odrediti stranicu vašeg sajta u atributu src. U ovom slučaju, dovoljno je navesti relativnu adresu (odnosno adresu u odnosu na stranicu u koju je okvir umetnut): U ovom primjeru visina okvira nije navedena, ali postoji id atribut. Koristeći ga možete koristeći CSS() postavite potrebne dimenzije za ovaj okvir:

Druga vrsta okvira - "klasična" - zahtijeva posebnu stranicu koja će sadržavati opis strukture okvira. Sami okviri će se nalaziti na zasebnim stranicama, možda čak i na zasebnim stranicama. HTML kod za takvu stranicu kontejnera za okvire može izgledati ovako:




Nema blokova ... I ... , koji su potrebni za obične stranice, ne bi trebalo biti ovdje sadrži atribut rows - to znači da prostor stranice treba podijeliti okomito i prvi okvir će dobiti gornji dio. Ako redove zamijenite kolonama, podjela će biti horizontalna. Vrijednost ovog atributa "*,*" označava da su proporcije podjele jednake - po 50%. Ako navedete, na primjer, “20%,*”, tada će samo 20% biti dodijeljeno prvom kadru, a ostatak prostora će biti dodijeljen drugom. Korisnik može promijeniti ove proporcije povlačenjem granica okvire mišem, ali je moguće zabraniti ovu radnju. Da biste to učinili, morate dodati atribut noresize u oznaku određenog okvira. Također možete odrediti veličinu vertikalnih i horizontalnih margina iz susjednog okvira (atributi marginwidth i marginheight): Moguće je postaviti pravila ponašanja za trake za pomicanje svakog okvira posebno. Ovo se radi pomoću atributa pomicanja, koji može sadržavati jednu od tri unaprijed definirane vrijednosti. Ako navedete scrolling="auto", tada će se trake za pomicanje pojaviti kada se sadržaj okvira ne uklapa u njegove granice. Ako je "da" - pruge će biti prisutne stalno, bez obzira da li su potrebne. Ako "ne" - to će značiti da su trake za pomicanje onemogućene za ovaj okvir.

Na osnovu informacija predstavljenih u prethodna dva koraka, potrebno je da konstruišete html kod koji je prikladniji za rešavanje vašeg problema. Nakon toga, ostaje samo da ga umetnete u izvorni kod stranice. Da biste to učinili, možete koristiti uređivač stranica vašeg sistema za upravljanje web lokacijom - otvorite u njemu željenu stranicu, prebacite se na mod za uređivanje html koda i zalijepite svoj kod na željeno mjesto na stranici. Možete li preuzeti fajl? izvorni kod stranicu za upravljanje datotekama za upravljanje hostingom ili sistem za upravljanje sadržajem, otvorite je u uređivaču teksta i zalijepite kod u nju. A zatim koristite isti metod da učitate promijenjeni kod nazad na server.

Kreiranje HTML dokumenta na osnovu strukture okvira je prilično jednostavno. Ova stranica će biti prikazana kao dijaloški okviri, od kojih svaki učitava poseban dokument.

Trebaće ti

• - uređivač teksta;
• - pretraživač.

Uputstva

Struktura okvira dokumenta znači da se svaka stranica sastoji od zasebnih područja, od kojih svaka prikazuje jednu HTML datoteku. Dakle, prvo otvorite uređivač teksta kao što je Notepad i kreirajte tijelo dokumenta koristeći oznake BODY i /BODY.

Okvirni dokument je zatvoren između dvije oznake FRAMESET i /FRAMESET. Ovdje će se nalaziti neka vrsta tabele u čiju svaku kolonu možete učitati poseban dokument. Koristeći dva svojstva COLS i ROWS, možete postaviti veličinu stupca i reda u pikselima ili kao postotak veličine prozora preglednika (ako umjesto brojeva unesete zvjezdicu, tada će se koristiti sve slobodan prostor pretraživač).

Za dizajniranje strukture koristite sljedeća svojstva: 1) FRAMEBORDER=1 - svaki okvir ima trodimenzionalni okvir;2) FRAMEBORDER=0 - neće biti okvira;3) FRAMESPACING - udaljenost između susjednih okvira u pikselima;4 ) FRAME - /FRAME - definisanje sadržaja posebnog okvira: a) SRC - HTML datoteka sa sadržajem okvira; b) MARGINHEIGHT, MARGINWIDTH - specificiranje vertikalnog i horizontalnog uvlačenja od granica okvira u pikselima; c) NORESIZE - korisnik ne može promijeniti veličinu okvira; d) KROZANJE - da li je potrebno (DA) ili ne (NE) kreirati trake za pomicanje za pregled okvira, vrijednost AUTO ih kreira samo ako je potrebno.

Prozor pretraživača se može podijeliti na dijelove koji se nazivaju okviri, ponekad okviri; Možete ih nazvati i pragovima. U svakom takvom dijelu prozora pretraživača, tj. okvir, može se učitati poseban HTML dokument. Pogledajmo primjer prozora pretraživača sa tri okvira.

U ovom slučaju, radi jasnoće, svaki okvir se učitava jednostavnim HTML dokumentom koji označava broj okvira i ime datoteke u kojoj se pohranjuje njegov sadržaj. Ako se u okvir učita pravi dokument koji ne stane u njega u potpunosti, onda će okvir (pažnja, ne cijeli prozor!) imati vertikalne i/ili horizontalne trake za pomicanje u zavisnosti od toga da li sadržaj ne staje horizontalno i/ ili vertikalno dokument.
Na primjer, dizajn i struktura vašeg sajta su takvi da se na svakoj stranici sajta ponavljaju isti elementi: naslov, navigacioni meni, adresa na kraju stranice ili neki drugi slični elementi. Mijenja se samo sadržaj sekcija. Zatim se stranice mogu podijeliti na dijelove tako da se nepromjenjivi dijelovi smjeste u zasebne okvire, a drugi okvir se može dodijeliti tako da se sadržaj učitava u njega željeni dio nakon što kliknete na odgovarajuću vezu, na primjer iz menija.
Time se štedi na brzini učitavanja, jer se identični dijelovi stranica stranice ne učitavaju ponovo, već se jednostavno prikazuju cijelo vrijeme u okvirima koji su im dodijeljeni.

Kreiranje elementa strukture okvira FRAMESET

Struktura izgleda prozora pohranjena je u zasebnom HTML dokumentu, koji se naziva uokvireni dokument. Struktura okvira se formira pomoću posebnog FRAMESET elementa. Običan dokument ima jednu sekciju HEAD i jednu sekciju TIJELO, dok je u dokumentu sa okvirima dio TIJELO zamijenjen opisom strukture okvira, tj. FRAMESET sekcija.
Element NOFRAME se može dodati u odeljak FRAMESET sa alternativnim sadržajem za prikaz u pretraživačima koji ne podržavaju okvire ili u pretraživačima koji ne podržavaju okvire. Takvi pretraživači jednostavno neće razumjeti FRAMESET i NOFRAME strukture, već će prikazati tekst smješten unutar njih.

U gornjem primjeru, stranica sadrži tri oblasti, od kojih je svaka inicijalno učitana HTML dokumentima frame_top.html, frame_left.html i frame_right.html. Pored HTML dokumenata, okvir može sadržavati i grafiku. Da biste to učinili, morate navesti adresu odgovarajuće slike u atributu src, Na primjer src="image.gif". Imajte na umu da element koristi se bez završne oznake.
Unutar kontejnera može sadržavati samo oznake ili drugi set okvira prekrivenih oznakama I .
Tag ima sljedeće atribute:

• redova— opisuje kako podijeliti stranicu u redove:
• cols— opisuje kako je stranica podijeljena u kolone:

Područja koja su rezultat ovog dijeljenja stranice bit će okviri. Odsustvo ovih atributa definira jedan okvir koji će zauzeti cijeli prozor pretraživača.

U značenju atributa redova I cols Potrebno je navesti ne broj redova ili kolona, ​​već širinu i visinu okvira. Sve vrijednosti na listi su odvojene zarezima. Dimenzije se mogu specificirati u apsolutnim jedinicama (pikseli) ili procentima:

• cols="20%, 80%"— prozor pretraživača je podijeljen u dvije kolone pomoću atributa cols, lijeva kolona zauzima 20%, a desna 80% prozora pretraživača.
• rows="100, *" Prozor pretraživača je podijeljen na dva horizontalna prozora pomoću atributa redova, gornji prozor zauzima 100 piksela, a donji prozor zauzima preostali prostor naveden simbolom zvjezdice.

Kao što se vidi iz ovaj primjer, kontejner sa atributom redova prvo kreira dva horizontalna okvira, a drugi okvir zamjenjuje drugim koji dijeli donji horizontalni okvir u dvije kolone koristeći atribut cols, lijeva kolona zauzima 20%, a desna 80% prozora pretraživača.
Ako pretraživač ne podržava okvire, prozor će prikazati tekst koji se nalazi između oznaka </b> I <b> . Sve između oznaka </b> I <b> , zanemaruju pretraživači koji podržavaju okvire. Prema tome, programer treba da napiše kod koji duplira sadržaj okvira na drugi način i da ovaj kod stavi u kontejner </b>, tada svi korisnici mogu vidjeti njegovu web stranicu. <br>Kao što je već napomenuto, neuparena oznaka se koristi za umetanje zasebnog okvira u dokument <b><frame> </b>. Atribut <b>src</b> specificira dokument koji bi trebao biti prikazan unutar ovog okvira, na primjer: <frame src="frame_top.html">. If attribute <b>src</b> nedostaje, prikazuje se prazan okvir.</p> <h2>Ivice ili razmak između okvira</h2> <p>Prema zadanim postavkama, pretraživač prikazuje sivu, obično 3D linijsku granicu između okvira koju posjetitelji mogu koristiti za podešavanje veličine okvira. <br>Granicom okvira može se manipulirati kao i svaki drugi element okvira. Za to postoji nekoliko atributa elementa <b><frameset> </b>, što vam omogućava da prilagodite granice okvira. Debljina granične linije određena je atributom <b>granica</b>. Zadana vrijednost debljine ivice je pet. <br>Da biste sakrili ivicu okvira, morate ili postaviti vrijednost širine ivice na nulu ili postaviti vrijednost "ne" ili "0" na atribut <b>frameborder</b>. Atribut <b>frameborder</b> može imati samo dva suprotna značenja. Ako vrijednost atributa <b>frameborder</b> je jednako “da” ili “1”, tada će se prikazati granica okvira, a ako je “0” ili “ne”, onda ne. Imajte na umu da vrijednosti atributa <b>frameborder</b> varirati za <a href="https://pzik.ru/bs/kak-dobavit-stranicu-v-vizualnye-zakladki-yandeks-dobavlenie/">različitim pretraživačima</a>. Da biste riješili ovaj problem, koristite atribut dvaput <b>frameborder</b>, a za neke pretraživače morate dodati i atribut <b>razmak između okvira</b> sa vrijednošću "0":</p><p> <frameset frameborder="0" framespacing="0" frameborder="no" border="0"> </p><p>U sljedećem primjeru uklanjamo granicu između okvira:</p> <h3>Primjer: Uklanjanje granice između okvira</h3> <ul><li>Probajte sami »</li> </ul><table><tr><td style="width: 10px;background-color:green;color: white;">frame_left</td> <td style="width: 90%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Okviri bez ivica</title> </head> <frameset cols="100,*" frameborder="0" framespacing="0" frameborder="no" border="0"> <frame src="frame_left.html" name=" frame_left" > <frame src="frame_right.html" name="frame_right" > </frameset> </html></p> <p>Ako uklonite granicu između okvira, posjetitelji neće moći promijeniti veličinu okvira u pretraživaču. Također možete spriječiti promjenu veličine okvira tako što ćete sačuvati ivice pomoću atributa <b>noresize</b>:</p><p> <frame src="frame_left.html" noresize> </p><p>Korištenje atributa <b>bordercolor</b> Možete promijeniti boju ivice okvira, samo trebate navesti kod ili odgovarajuće rezervirano ime boje. <br>Ispod je primjer HTML stranice koja sadrži gore opisane atribute kontrole okvira: boja obruba je crvena, veličina gornjeg okvira se ne može promijeniti:</p> <h3>Primjer: Kontrola granica okvira</h3> <ul><li>Probajte sami »</li> </ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid red;background-color:blue;color: white;" colspan="2">frame_top</td> </tr><tr><td style="border-right: 4px solid red;width: 20%;background-color:green;color: white;">frame_left</td> <td style="width: 80%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Frame Border Management</title> </head> <frameset rows="150, *" border="10" bordercolor="red" frameborder="1" frameborder="yes"> <frame src="frame_top.html" noresize> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html"> </frameset> </frameset> </html></p> <p>Ako želite stranicu prikazanu unutar okvira pozicionirati bliže njegovim granicama ili je, obrnuto, pomaknuti dalje, promijenite atribute <b>marginheight</b> I <b>marginwidth</b> tag <b><frame> </b>. Atribut <b>marginheight</b> definira padding između sadržaja okvira i njegovih gornjih i donjih granica. sintaksa:</p><p> <frame marginheight="число"> </p><p>Atribut <b>marginwidth</b> definira padding između sadržaja okvira i njegove desne i lijeve ivice. sintaksa:</p><p> <frame marginwidth="число"> </p><p>Ova html linija, na primjer, pozicionira prikazanu stranicu blizu ivice okvira:</p> <p>Ako stranica prikazuje traku za pomicanje koju ne želite, problem možete riješiti navođenjem atributa <b>skrolovanje</b>="ne" u oznaci <b><frame> </b>. Ali imajte na umu da ako okvir nije dovoljno velik da prikaže cijeli sadržaj stranice, posjetitelj neće imati načina da skroluje prikazanu stranicu.</p> <h2>Veze unutar okvira</h2> <p>Praćenje veze u običnom HTML dokumentu radi se na sledeći način: kliknite na vezu i trenutni dokument se zamenjuje novim u trenutnom ili u novom prozoru pretraživača. Kada koristite okvire, shema učitavanja HTML dokumenata razlikuje se od uobičajene, a glavna razlika je mogućnost učitavanja HTML dokumenta u jedan okvir iz drugog okvira. <br>Da biste učitali dokument u određeni okvir, koristite atribut <b>cilj</b> tag <b><a> </b>. Kao vrijednost atributa <b>cilj</b> koristi se naziv okvira u koji će se učitati dokument specificiran atributom <b>ime</b> tag <b><frame> </b>. Također je vrijedno napomenuti da naziv okvira mora početi ili brojem ili latiničnim slovom. Sljedeća imena se koriste kao rezervirana imena:</p> <p>Za vanjske veze, trebali biste postaviti ciljni atribut na _top ili _blank kako biste osigurali da se projekti trećih strana ne pojavljuju u vašim okvirima, već da popune cijeli prozor pretraživača.</p> <p>Sljedeći primjer prikazuje HTML dokument u kojem desni okvir učitava stranicu sa veze postavljene u gornji okvir. Link do dokumenta koji će se otvoriti u desnom okviru:</p><p> <a href="http://www.google.com" target="frame_right">Google</a> </p><p>Desnom okviru je dato ime <i>frame_right</i>:</p><p> <frame src="frame_right.html" name="frame_right"> </p><p>Da biste učitali dokument u određeni okvir, koristite konstrukciju <i>target="frame_right"</i>, kao što je prikazano u primjeru:</p> <h3>Primjer: Veza na drugi okvir</h3> <ul><li>Probajte sami »</li> </ul><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Veza na drugi okvir</title> </head> <frameset rows="100, *"> <frame src="frame_topic.html"> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html" name="frame_right"> </frameset> <noframes> <p>Vaš pretraživač ne prikazuje okvire</p>

Plutajući okviri

Element

Sigurno ste više puta čuli za takav koncept kao što su okviri. O njima možete pročitati u bilo kojem html udžbeniku, kao i na resursima o izradi web stranica. Nakon što sam proučio mnoge primjere i opise, odlučio sam na vrlo jednostavan način ispričati sve o okvirima svojim riječima. Prednosti, nedostaci i budućnost okvira će se raspravljati na samom dnu ove stranice. Dakle, šta su okviri u html-u?

Šta su okviri u html-u

Okvir(Engleski okvir) - neko nezavisno područje na web stranici koje se može povezati.

Nemojte se plašiti da ovo zvuči malo zbunjujuće. Hajdemo odmah da damo najjednostavniji primjer i onda će sve postati jasno.

Otvorite pomoć u bilo kojem programu (to može biti notepad, neki program, pretraživač itd.). Gotovo uvijek ćete vidjeti pomoć koja se sastoji od dva dijela (navigacija lijevo, sadržaj desno). Lijevi i desni dio su samo odvojeni okviri. Ispod je snimak ekrana preuzet uz pomoć najobičnije Windows notepad:

Slika 1. Korištenje okvira koristeći pomoć za notepad kao primjer

Ono što vidite je web stranica koja se sastoji od dva odvojena nezavisna okvira. Dajemo primjer html kod takav okvir iz pomoći.

Primjer sa okvirima br. 1 (pomoć)

U gorenavedenom okviru, pomoć o kojoj je bilo riječi gore će izgledati ovako:

Slika 2. Okvir za korištenje okvira na primjer br. 1

Podjela stranice na područja pomoću okvira je vrlo slično izgledu HTML tablice (pogledajte oznaku HTML tablice). Primjer koda za takvu stranicu može izgledati ovako:

Objašnjenje na primjer br. 1

Kao što možete vidjeti iz gornjeg koda, stranica kreirana iz okvira je vrlo slična običnoj html stranici: postoji početna html oznaka, odjeljak , naslov <span>Vaš pretraživač ne podržava prikaz okvira</span>

Top.html kod datoteke

Primjer br. 2

A ovdje bi mogao biti logo i više :)

Menu.html kod datoteke

• Početna stranica
• O sajtu
• O autoru
• ...

Content.html kod datoteke

Početna stranica

Sadržaj stranice. Datoteka content.html je sada otvorena
Ovo je početno stanje našeg okvira. Nazovimo ovaj fajl "Master Page"

Kôd datoteke about-site.html

O sajtu

Stranica o sajtu. Fajl about-site.html je sada otvoren

Kôd datoteke about-autor.html

O autoru

O autorskoj stranici. Fajl about-autor.html je sada otvoren

Footer.html kod datoteke

Podnožje web stranice. Fajl footer.html je sada otvoren

Objašnjenje na primjer br. 2

U početku je cijela stranica podijeljena na tri područja horizontalno u omjeru 3:14:3. Za to je odgovoran atribut rows="15%,70%,15%". Prvi okvir u našem primjeru je zaglavlje (zvali smo ga top.html), njemu je dodijeljeno 15% visinskog prostora. Slijedi veliki okvir koji zauzima 70% visine. Podijelili smo ga na dva dijela koristeći cols="25%,75%" u omjeru 1:3. Na lijevoj strani će biti okvir menu.html , na desnoj content.html . Drugi okvir smo posebno nazvali name="main" kako bismo mogli mijenjati stranice. Imajte na umu da u datoteci menu.html svaka veza ima pridružen atribut target="main", koji omogućava da se stavke učitaju u područje koje se zove main kada se klikne na vezu. Na dnu stranice je zadnji okvir footer.html.

Ako implementirate primjer br. 2, trebali biste dobiti sljedeću HTML stranicu u njenom originalnom stanju:

Slika 4. Primjer br. 2 - početno stanje

Kada odete na stranicu o stranici, stranica će izgledati ovako:

Slika 5. Primjer br. 2 - drugo stanje

Slika 6. Primjer br. 2 – treće stanje

Tag

Opcioni atributi ove oznake su width="width" i height="height" , a obavezni atribut je src="adresa okvira" .

Atributi i svojstva oznake

1. COLS attribute="Parametri"
Postavlja broj vertikalnih podjela stranica.

2. ROWS="Parameters" atribut
Postavlja broj horizontalnih podjela stranica.

Pogledajmo sada kako možete podesiti parametre particioniranja.

a) Koristeći broj, koji će odgovarati broju piksela. Na primjer, cols = "100,100,300" postavlja stranicu tako da bude podijeljena na tri područja, od kojih će svaka biti široka: 100 piksela, 100 piksela i 300 piksela, respektivno.

b) Koristeći procente ukupne širine/visine. U gore navedenim primjerima koristili smo procentualno dijeljenje, pa se čini besmislenim navoditi primjer.

c) Korištenje * (zvjezdica). Na primjer, cols = "2*,3*,100" postavlja prve dvije oblasti na omjer 2:3, a treće područje na širinu od 100 piksela.

Sve tri metode se mogu kombinovati. Na primjer, cols="2*,100,15%,4*" .

3. Frameborder="(yes|ne)" atribut
Određuje da li okvir ima ivicu. Ako je odgovor da, tada je na snazi ​​sljedeći četvrti atribut granice.

4. Atribut border="parametar"
U pikselima, granica specificira debljinu ivice područja okvira. Na primjer, frameborder = "2" specificira područje sa odabranim obrisom od 2 piksela.

5. bordercolor="color" atribut
Određuje boju ivice, ako postoji. Boja se može odrediti riječima ili kodom (pogledajte html paletu boja).

Napomena: Imajte na umu da je oznaka potrebna je završna oznaka .

Atributi i svojstva oznake

1. Atribut src="adresa elementa"
Ovdje se kao parametar mora navesti puni URL adrese elementa. Ovaj atribut je obavezan. On vam je već poznat, jer... bio je prisutan u primjerima 1 i 2.

2. Atribut marginwidth="broj"
Postavlja širinu uvlačenja unutar okvira od granica u pikselima. Na primjer, marginwidth="10" će postaviti marginu sadržaja lijevo i desno od granice okvira.

3. Atribut marginhight="broj"
Slično drugom sa jedinom razlikom što postavlja pomak visine.

4. Atribut Scrolling="(yes|no|auto)".
Postavlja mogućnost pomicanja okvira ako ne može stati u područje koje mu je dodijeljeno. Zadana vrijednost je auto (znači kreiranje skrolovanja ako je potrebno).

5. Noresize atribut
Ako je ovaj atribut postavljen, korisniku je zabranjeno samostalno mijenjati granice okvira. Po defaultu, ovaj atribut nije postavljen i korisnik može mijenjati granice kako želi.

5. Attribute name="title"
Ovaj atribut se može koristiti za davanje imena okviru. Ovo je neophodno kako bi drugi okviri mogli pristupiti ovom okviru. Primjer br. 2 bavi se upravo takvim slučajem.

Napomena:
Ime ne smije početi s donjom crtom "_".

6. Atributi frameborder, border i bordercolor
Ova tri atributa su ista kao frameset (pogledajte atribute okvira iznad).

Prednosti i nedostaci okvira

Prednosti okvira

• Mogućnost nezavisnog prikaza nekoliko stranica u jednom prozoru (primjer 1 i 2 iznad);
• Mogućnost prebacivanja sadržaja stranice bez ponovnog učitavanja stranice (mijenja se samo jedno područje ekrana);
• Mogućnost fleksibilne izgradnje strukture stranice (zaglavlje, meni, podnožje itd. - sve statičke informacije se pohranjuju odvojeno u fajlovima, a to vam omogućava brzo uređivanje dijela stranice);
• Korisnik može sam promijeniti veličinu okvira za prikaz ako nije postavljena opcija noresize;

Nedostaci okvira

• Pretraživači loše indeksiraju uokvirene stranice jer nisu u stanju protumačiti učitane datoteke u okvirima. Pretraživač razlikuje stranice po adresi (URL), a za okvire, uprkos različitim stanjima, adresa stranice se ne mijenja. Ovo je u suprotnosti sa pravilima pretraživača, što znači da nije činjenica da će pretraživač moći da indeksira sajt.
• Nemoguće je označiti stranicu u okvirima, jer URL stranice će biti isti. Tako možete sačuvati samo originalno stanje okvira.
• Ne podržavaju svi pretraživači okvire.

Budućnost okvira:
Mnogi webmasteri su odavno počeli da napuštaju okvire. To je zbog poteškoća u promociji na pretraživačima. Sada svi prelaze na Ajax kao dinamičniji i moderniji način prikazivanja informacija na jednoj stranici stranice.

Dragi čitaoče, pregledali smo oznake html dokument u vezi ramova. Unatoč sumnjivoj budućnosti ovog područja, svaki webmaster bi trebao znati o okvirima.