Ime okvira. Spajanje kolona i redova. Atributi oznake okvira za prilagođavanje izgleda prozora

U zoru izgradnje web stranica, web resursi su naširoko koristili okvire za prikaz pojedinačnih dijelova stranica. Ali dolaskom nove verzije HTML 5, sve se promijenilo. Elementi označavanja<okvir>, <frameset> i<noframes> smatraju se zastarjelim. Zamijenjene su jednom oznakom -<iframe>. Kako dodati u html

U gornjoj oznaci, dovoljno je zamijeniti adresu stranice bilo kojom drugom i, ako je potrebno, prilagoditi veličinu okvira.

07.12.2015

Ne još

Zdravo svima!
Nastavljamo marljivo da proučavamo osnove HTML-a. Drago mi je što ne odustaješ od svojih lekcija.

U ovoj lekciji ćemo pogledati šta su okviri i kako se kreiraju u HTML-u.
Dakle, hajde da definišemo šta su okviri u HTML-u.
Okviri- Ovo je podjela prozora pretraživača na zasebne oblasti u koje se mogu učitati pojedinačni HTML dokumenti.

Mislim da razumijete da zahvaljujući okvirima možete vidjeti nekoliko web stranica odjednom u jednom prozoru pretraživača.

Kao primjer, da biste razumjeli kako okvir funkcionira u praksi, predlažem da pogledate primjer. Tamo napravite nekoliko prijelaza:

Pa šta misliš? Želite li naučiti kako ovo kreirati? Sada ćemo naučiti ubacite okvire u html dokument.

Okvir na web stranici se kreira pomoću sljedećeg izgleda:

pažnja: raspored koda okvira je umetnut u html dokument umjesto oznake

:

○ frameset tag

Ovo je glavni kontejner za kreiranje okvira, unutar kojeg se nalaze ostali elementi.
Završna oznaka je obavezna.

*Atributi oznake okvira:

• Cols - vertikalni
• Redovi - horizontalni

redova- horizontalno

cols- vertikalno

Atributi cols i rows označavaju na koliko delova treba da bude podeljen prozor pretraživača. Na primjer, da biste prozor preglednika podijelili na dva vertikalna dijela, trebate napisati ovako:

Lijeva strana ekrana će biti veličine 30%, a desna 70%.

Ako želite podijeliti preglednik na još nekoliko dijelova, dodajte dodatne dimenzije odvojene zarezima, na primjer, ovako:

Kao rezultat toga, prvi vertikalna kolona biće širok 30%, drugi - 20%, treći - 10%, četvrti - 40%.

Jasno?

Isto važi i za horizontalni raspored:

Prvi horizontalni stup će biti širok 30%, drugi - 20%, treći - 10%, četvrti - 40%.

○ oznaka okvira

Oznaka okvira određuje koji HTML dokument treba učitati u prozor pretraživača.
Na primjer, trebamo učitati tri različite stranice “1.html”, “2.html”, “3.html” u jednom prozoru pretraživača. Oznaka okvira će izgledati ovako:

Hajde da sumiramo znanje o okvirima. Dakle, zadatak: trebate podijeliti prozor pretraživača na dva dijela i u ove dijelove učitati dvije web stranice - “1.html” za 30%, “2.html” za 70%.
Evo gotovog koda:

Rezultat će biti ovakav:

* Atributi oznake okvira

• src – adresa web stranice. src="1.html" ;
• marginwidth – margina unutar okvira duž širine. primjer: marginwidth="10" ;
• marginhight – margina visine unutar okvira. primjer: marginhight="10" ;
• skrolovanje – pomeranje okvira kroz skrol.
  - da – skrol će biti prisutan u okviru. primjer: pomicanje="da" ;
  - ne – skrol neće biti prisutan u okviru. primjer: pomicanje="ne" ;
  - auto – skrol će biti prisutan u okviru ako je potrebno. primjer: pomicanje="automatski" ;
• noresize – zabranjuje pomicanje granica okvira.
• ime – naziv okvira. Određuje u kojem prozoru treba otvoriti druge okvire. primjer: name = "stranica" ;

Ako ne navedete ime okvira u atributu “name”, onda kada kliknete na vezu, novi okvir će se otvoriti u prozoru gdje je bila veza:

Evo primjera ako dodate atribut “name”:

Zar to nije bolje?
Za bilo koji okvir dodajte atribut “name” gdje želite da se u njemu otvaraju drugi HTML dokumenti

Ime u atributu "name" može biti bilo šta. Ali u budućnosti, ako date imena drugim oznakama "okvira", zapamtite da svaka mora biti jedinstvena:

strana 2 strana 3

“Stranica 1”, “Stranica 2” će se otvoriti u jednom prozoru u kojem ste naveli naziv okvira “name =" web stranica "" i "Stranica 3" će se otvoriti u drugom okviru, gdje je naziv "name =" bloggood-ru "»

VJEŽBA

Zadatak: Morate kreirati okvire prema ovom rasporedu:

Prvo, napravimo tri horizontalna okvira:

Sada dodajmo "top.html" i "footer.html"

Dosadašnji rezultat će biti ovakav:

Sada između “top.html” i “footer.html” dodaćemo “menu.html” i “content.html”:

Spreman kod:

Sačuvajte fajl kao "index.html"

Kreirajte stranice “top.html”, “footer.html”, “menu.html” i “content.html”:

Kôd fajla "top.html"

web stranica

Kôd fajla "footer.html"

StepkinBlog.com © 2015

Kôd fajla "menu.html"

• Početna stranica
• o autoru

Kod datoteke "content.html":

Početna stranica

Kod datoteke "autor.html":

Ovo je rezultat koji sam dobio:

Koristimo atribute "frame" i onemogućimo ručno rastezanje okvira i uklonimo pomicanje u datoteci "index.html".

○ šta učiniti ako preglednik ne podržava okvire?

Možete prikazati poruku korisniku da njihov pretraživač ne podržava okvire. Da biste to učinili, umetnite oznaku unutar strukture <frameset> :</p><p> <frameset rows="15%,*,15%"> <noframes>

○ Plutajući okvir

Ako trebate umetnuti iframe prozor direktno u stranicu koja nema strukturu okvira, postoji oznaka "iframe" za to.

* “iframe” tag atributi

• src - put do stranice za otvaranje
• širina - širina plutajućeg okvira
• visina - visina plutajućeg okvira
• pomicanje - traka za pomicanje
  - ne - nikad ne prikazuj traku za pomicanje
  - da - uvek pokaži
  - auto - prikaži ako je potrebno
• align - poravnanje plutajućeg okvira
  - lijevo – lijevo
  - desno – desno
  - vrh – viši
  - dno – ispod
• frameborder - granica oko plutajućeg okvira
  - 1 - uključite okvir
  - 0 - isključite okvir

Ovako će izgledati oznaka “iframe” sa atributima:

Ako vaš pretraživač ne podržava okvire, možete umetnuti tekst " OOPS! Vaš pretraživač ne podržava okvire. » između oznaka .
To će izgledati ovako:

Na primjer, dodajmo iframe u datoteku "content.html":

Početna stranica

Prethodni post
Sljedeći unos

Dobar dan svima! Andrey Bernatsky je sa vama.

Prije nego što pređemo direktno na članak, želio bih vam dati link na video verziju ove teme:

U ovoj epizodi ćemo pričati o tome okviri u HTML-u. Okviri u suštini su veoma slične tabelama, ali za razliku od tabela, svaki okvir je nezavisan i svaki od njih može imati zasebnu web stranicu sa svojom adresom.

Na slici vidimo prilično uobičajenu strukturu stranice. Može se predstaviti u obliku tabele, ili se sve to može učiniti pomoću okvira. U gornjem okviru možete učitati stranicu sa logom i menijem, u levom okviru možete učitati stranicu sa navigacijom po sajtu, u centralnom okviru će biti stranica sa glavnim sadržajem sajta, u desnom okviru ćete može učitati stranicu sa reklamnim banerima, au donjem okviru možete učitati stranicu sa kontakt informacijama. Evo šta su okviri ukratko.

Pogledajmo sada kako se sve ovo može uraditi.

Posebnost dokumenta koji sadrži okvire je da ne sadrži kontejner TIJELO. Umjesto toga se koristi kontejner FRAMESET. Opća sintaksa za okvire je sljedeća:

XHTML

… ….

U kontejneru …. oznake se nalaze , koji definiraju sadržaj okvira.

Na oznaci postoje dva parametra:

redovi = broj– broj linija (horizontalni pragovi).

cols = broj– broj stubova (vertikalni pragovi).

Uopšteno govoreći, vrijednosti parametara rows i cols nisu specificirane baš brojevima, već navođenjem brojeva odvojenih zarezima. Koliko brojeva ima, toliko će biti i redova ili kolona, ​​a brojevi određuju veličinu okvira. Glavna stvar je da zbir ovih brojeva bude jednak cijeloj širini ekrana.

Pogledajmo ovo na primjeru i sve će biti jasno. Sada kreirajmo okvirni dokument ovako:

Kod koji će nam definirati ovu strukturu okvira će izgledati ovako:

XHTML

Prvi red koda iznad otvara kontejner skupa okvira, parametar cols ukazuje da će biti tri ugniježđena okvira. Prvi će imati širinu od 30% ukupne širine ekrana. Treći će takođe imati 30% ukupne širine ekrana. A drugi okvir će zauzeti sav preostali prostor. Da simbol "*" (zvjezdica) znači da zauzima sav preostali prostor na ekranu.

Usput, pogledajmo kako se okviri mogu podesiti u veličini pomoću parametara cols i rows:

Veličinu možete postaviti jednostavnim unosom broja. Ovaj broj će odrediti veličinu okvira u pikselima.

Možete postaviti širinu u postocima. Štaviše, ako zbir postotaka svih kolona prelazi 100%, onda će svi okviri biti proporcionalno smanjeni tako da je ukupna suma jednaka 100%. Situacija će biti slična: ako je zbir postotaka svih kolona manji od 100%, onda će se svi okviri proporcionalno povećati tako da ukupan zbroj bude jednak 100%.

Veličinu okvira možete postaviti simbolom “*” (zvijezda). To znači da okvir mora zauzeti sav preostali prostor. Ako je navedeno, na primjer , odnosno dvije zvjezdice, tada će sav preostali prostor biti jednako podijeljen između ova dva okvira (u ovom slučaju 40%).

Možete kombinovati opcije za postavljanje veličine okvira u HTML-u. Na primjer:

XHTML

Ovaj kod znači da će prvi okvir imati 70 piksela, treći će biti 40% širine ekrana, a drugi će zauzimati ostatak prostora.

U potpunosti smo shvatili prvi red koda. Nastavi.

Oznake slijede . Budući da je odvojeno zarezima u parametru cols tag frameset ako su data tri broja (tj. biće tri okvira), onda oznake moraju biti i tri. Vrijednost src parametra je adresa web stranice koja će biti učitana u ovaj okvir. Adresa, kao što se može vidjeti iz primjera, može biti apsolutna i relativna.

I posljednji red zatvara kontejner .

Ako zamenimo parametar cols redovima u prvom redu koda, dobićemo isti dokument okvira koji se sastoji od tri okvira. Samo će podjela na okvire biti okomita.

XHTML

Opcije redova I cols ne može se koristiti istovremeno. To dovodi do grešaka i netačnog prikaza sadržaja.

Sada svi imaju pitanje kako napraviti takvu strukturu, o čemu sam govorio na samom početku članka. Na ovo ćemo se vratiti malo kasnije, ali za sada se okrenimo onome što se sada dešava u našem pretraživaču.

U pretraživaču vidimo tri stranice, od kojih je svaka u svom okviru.

Istovremeno, pomeranjem pokazivača miša na ivice okvira, možemo promijeniti veličinu okvira za pomicanje, a granice između okvira su također vidljive. Ovo nije uvijek potrebno, zapravo uopće nije potrebno. A sve se to može kontrolisati zahvaljujući parametrima oznaka okvir I frameset.

Opcije oznaka okvir I frameset:

src="url"– traženi parametar. Određuje adresu stranice koja će biti prikazana unutar okvira. Koristi se samo za okvir.

noresize– poništava mogućnost promjene veličine. Korišćen samo za okvir.

pomicanje="da/ne/auto"– određuje prisutnost traka za pomicanje. Vrijednost da – označava prisustvo traka za pomicanje. Vrijednost no označava da neće biti traka za pomicanje. Kada se postavi na auto, pretraživač sam određuje da li će biti traka za pomeranje. Korišćen samo za okvir.

name="ime-frame"– naziv okvira. Ovaj parametar se koristi za interakciju između okvira. Pričaćemo više o tome malo kasnije. Korišćen samo za okvir.

granica=broj– debljina ivica između okvira. Ako ima vrijednost 0, granice između okvira se ne prikazuju. Koristi se samo za okvire.

framespace="broj"– razmak između okvira. Koristi se samo za okvire.

Koristeći ove parametre, možete dobiti stranicu na kojoj se granice između okvira ne prikazuju, ne postoji način da se promijeni veličina okvira, a pomicanje je zabranjeno za zadnja dva okvira. Kod za takvu stranicu izgleda ovako:

XHTML

Postoji nekoliko drugih opcija, ali one ne rade jasno, pa mislim da je logično da ih ne spominjemo u izdanju.

Možda je to sve sa parametrima. Pogledali smo primjer kako ih koristiti.

Sada napravimo strukturu okvira o kojoj sam govorio na samom početku izdanja.

Da bismo to učinili, kreiramo strukturu od tri okvira podijeljena okomito.

XHTML

Shodno tome, umjesto oznake , moramo umetnuti još jedan kontejner .. sa tri kolone i u svaki upišite adresu svoje stranice. Vidite, ništa komplikovano, mi samo koristimo oznaku ubacite novi kontejner koji nam je potreban .. .

XHTML

Nakon toga ubacujemo naš treći okvir s kontakt informacijama i zatvaramo glavni kontejner

XHTML

Kompletan kod za ovu stranicu je ispod:

XHTML

Naravno, uzeo sam adrese za okvire iz prethodnih brojeva newslettera, a ovdje nismo vidjeli meni, logo, navigaciju itd. Ali dobili smo strukturu koja nam je bila potrebna. Ali ako kreirate prave stranice koje su vam potrebne, možete dobiti prekrasnu strukturu.

Šta smo na kraju dobili. Da li je ovo zgodno ili nezgodno, na vama je da odlučite, ali sa strukturom okvira, svi naši okviri uvijek ostaju na stranici. Bez obzira na veličinu sadržaja, uvijek ćemo vidjeti logo i meni stranice, dno stranice s kontakt informacijama, navigacijski blok i banere. To je, općenito, suština i značenje okvira.

Postoji mogućnost interakcije između okvira. Možete napraviti tako da se klikom na vezu u jednom okviru informacije pojavljuju u drugom. Sada ćemo vidjeti kako se to radi.

Napravimo okvir ovako:

Naše veze će se nalaziti u lijevom okviru. A na desnoj strani su stranice na koje vode ove veze.

Napravimo okvir ovako:

XHTML

Prozor pretraživača se može podijeliti u okvire, tj. u oblasti koje se nalaze jedna pored druge. Možete učitati vlastite HTML stranice u svako od ovih područja. Biće jasnije sa primerom, kreirajte novu datoteku pod nazivom index.html sa sledećim kodom:

Okviri u html-u

Prozor pretraživača je podijeljen na 3 dijela. Moram reći da je to jedini slučaj kada u html dokumentu nema oznaka

. Umjesto toga se koriste oznake , koji govore pretraživaču da podijeli prozor na nekoliko područja - okvira.

Koliko će takvih područja biti i kako će se nalaziti ovisi o dva parametra oznake :

• redova- određuje da se prozor podijeli na horizontalne oblasti. Štoviše, broj vrijednosti koje ovaj parametar ima, broj područja. U našem primjeru rows="30%, 10%, 60%", tj. tri horizontalne oblasti: širina prve je 30% širine ekrana, širina druge je 10%, a treće je 60%.
• cols- određuje da se prozor podijeli na vertikalne oblasti.

Pogledat ćemo parametre oznake sa primjerima.

Pa smo pogledali sve parametre oznake .

Posljednji dodir: uklonite okvire okvira. Da biste to učinili u oznaci dodajmo dva parametra border="0" frameborder="0".

Okviri u html-u

Prednosti i mane okvira

Sada kada ste razumjeli okvire, vrijeme je da razgovaramo o prednostima i nedostacima uokvirenih web stranica.

Nesumnjiva prednost je smanjenje količine informacija koje se preuzimaju na računar korisnika. Uostalom, zaglavlje i meni stranice se učitavaju samo jednom, a onda se mijenja samo sadržaj. Naravno, ovo skraćuje vrijeme učitavanja.

Ali ima još mnogo nedostataka. Prvo, lako se zbuniti u strukturi okvira.

Drugo, naš meni je u posebnom fajlu. To znači da ako je korisnik pronašao, na primjer, vašu content.html stranicu putem tražilice, tada će moći samo da je pročita, jer na ovoj stranici nema linkova ili stavki menija.

Konačno, ne podržavaju svi pretraživači strukturu okvira. Dakle, postojeće oznake , nalaze se unutar oznaka i sadrže alternativne informacije za pretraživače koji ne podržavaju okvire. U suštini, moraćete da uradite dupli posao i napravite dve verzije sajta: sa i bez okvira.

Otuda zaključak - nemojte koristiti okvire osim ako je to apsolutno neophodno.

Primjeri okvirnih struktura

Kao što se sjećate, dva parametra su odgovorna za podjelu u okvire: redova I cols. Njihovom kombinacijom možete na bilo koji način podijeliti prozor u okvire. Razmotrit ćemo primjere takvog podjele.

Primjer 1:

Okviri u html-u

rezultat:

Primjer 2:

Okviri u html-u

rezultat:

Primjer 3:

Okviri u html-u

Uprkos činjenici da su sajtovi sa okvirima sve ređi, učenje HTML-a ne bi bilo potpuno bez razmatranja teme okvira. Osim toga, okviri su, na neki način, zauzeli svoju nišu i koriste se za administraciju i sisteme pomoći. Gdje nedostaci okvira nisu posebno važni, ali su prednosti, naprotiv, aktivno tražene.

Oznaka se koristi za kreiranje okvira , koji zamjenjuje oznaku u dokumentu i koristi se za podelu ekrana na oblasti. Unutar ove oznake nalaze se oznake , koji ukazuju na HTML dokument koji je predviđen za učitavanje u područje (slika 13.1).

Rice. 13.1. Primjer podjele prozora pretraživača u dva okvira

Kada koristite okvire, potrebna su vam najmanje tri HTML datoteke: prva definira strukturu okvira i dijeli prozor pretraživača na dva dijela, a preostala dva dokumenta se učitavaju u navedene prozore. Broj okvira nije nužno jednak dva, možda i više, ali ne manji od dva, inače se potpuno gubi smisao korištenja okvira.

Razmotrimo faze kreiranja okvira na osnovu stranice prikazane na Sl. 13.1. Biće nam potrebna tri fajla: index.html - definiše strukturu dokumenta, menu.html - učitava se u levi okvir i content.html - učitava se u desni okvir. Od njih se samo index.html razlikuje po strukturi svog koda od ostalih datoteka (primjer 13.1).

Primjer 13.1. index.html fajl

Ako se koriste okviri, u prvom redu koda upisuje se sljedeći tip dokumenta.

Thekaže pretraživaču da radi sa okvirima, ova linija koda je obavezna. Kontejner sadrži tipične informacije kao što su kodiranje stranice i naslov dokumenta. Samo imajte na umu da zaglavlje ostaje isto sve dok se HTML datoteke otvaraju unutar okvira.

U ovom primjeru, prozor pretraživača je podijeljen u dvije kolone pomoću atributa cols, pri čemu lijeva kolona zauzima 100 piksela, a desna kolona zauzima preostali prostor naveden simbolom zvjezdice. Širina ili visina okvira se također može postaviti kao postotak, slično kao u tablicama.

U oznaci Ime HTML datoteke učitane u navedeno područje je navedeno pomoću atributa src. Datoteka pod nazivom menu.html biće učitana u levi prozor (Primer 13.2), a content.html će biti učitana u desni prozor (Primer 13.3). Preporučljivo je svakom okviru dati jedinstveno ime kako bi se dokumenti mogli učitati u navedeni prozor koristeći atribut name.

Primjer 13.2. Datoteka menu.html

U ovom primjeru, siva pozadina na stranici je postavljena pomoću stilova, o čemu će biti riječi kasnije.

Primjer 13.3. File content.html

SADRŽAJ

Razmotrimo složeniji primjer sa tri okvira (slika 13.2).

Rice. 13.2. Podjela stranice u tri okvira

U ovom slučaju, oznaka se ponovo koristi , ali dva puta, s jednom oznakom ugniježđenom u drugu. Horizontalno particioniranje se kreira preko atributa rows, gdje se procentualna notacija koristi za raznolikost (Primjer 13.4).

Primjer 13.4. Tri okvira

Kao što se može vidjeti iz ovog primjera, kontejner sa atributom rows prvo kreira dva horizontalna okvira, ali zamjenjuje drugi okvir drugim okvirom , koji ponavlja strukturu koju već poznajete iz primjera 13.1. Kako bi se spriječilo pojavljivanje vertikalne trake za pomicanje i da korisnik ne može samostalno mijenjati veličinu gornjeg okvira, dodani su atributi scrolling="no" i noresize.