Iframe i Frame - što su i kako najbolje koristiti okvire u Html-u. Korištenje okvira u HTML-u Kako otvoriti dokumente pomoću veze u okviru
Izraz "okvir" došao nam je iz na engleskom. U prijevodu ova riječ znači "okvir" i predstavlja zasebno područje prozora. Po svojoj strukturi, takav odjeljak je potpuno gotov HTML dokument.
Pojedinačni okviri dijele prozore preglednika u odjeljke koji su postavljeni jedan pored drugog. U ovom slučaju, svaki okvir se učitava sa svojom punom stranicom. Tehnologija okvira još uvijek izaziva mnogo kontroverzi, ali mora se reći da je vrhunac njegove popularnosti već prošao. U ovaj trenutak ova je tehnologija zastarjela i uobičajeni okviri više nisu podržani u HTML5.
Povijest tehnologije
Danas možemo konstatirati da je odluka o odustajanju od rada s okvirnom tehnologijom konačno donesena. Stranica https://www.w3.org/TR/html5-diff/#obsolete-elements jasno navodi da su uobičajene oznake frame, frameset i noframes za stvaranje takve strukture zastarjele. Kao argument navode se podaci da korištenje takve strukture negativno utječe na upotrebljivost stranica i njihovu dostupnost na internetu.
Ali moderne tehnologije podržavaju element IFRAME. Njegova upotreba omogućuje vam umetanje okvira u tekstualne blokove na stranicama. Štoviše, takvi se elementi mogu poravnati u odnosu na sam tekst. Važna točka: u načelu ne možete promijeniti veličinu ugrađenih okvira. Nemaju odgovarajući atribut za promjenu veličine.
U budućnosti, bez skokova u tehnologiji, daljnja uporaba okvira nije vjerojatna. I vrijedno je zapamtiti da je vodeća organizacija za standardizaciju internetskih tehnologija - W3C - jasno naznačila da takve strukture ne bi trebale koristiti programeri web stranica.
Odnosno, okviri se u načelu ne bi trebali koristiti za strukturiranje stranica prilikom stvaranja novih izvora. Ali uz podršku i poboljšanje postojećih stranica, znanje o značajkama tehnologije i njihovoj upotrebi bit će vrlo korisno i produktivno.
Prednosti okvira
Među prednostima tehnologije okvira su jednostavnost korištenja, velika brzina i mogućnost točnog pozicioniranja informacija u određenim područjima prozora.
Korištenje okvira omogućuje uštedu količine prenesenog prometa tijekom rada s web mjestom. Uostalom, kada se pristupa drugom dijelu informacija, obično se ažurira samo jedan dio stranice, a ne cijeli kod.
Ova struktura pruža zanimljive mogućnosti navigacije kroz sadržaj izvora. Uostalom, unutar prozora preglednika u susjednim okvirima možete vidjeti različite blokove informacija. Važno je da korisnici znaju da je pretraživanje unutar okvira jednako izvođenju takve operacije na zasebnoj stranici.
Tijekom rada s web mjestom možete dinamički mijenjati veličinu zasebnog odjeljka, što je teško implementirati pomoću drugih tehnoloških rješenja.
Mogući nedostaci
Problemi s web stranicama koje koriste okvire nakupljali su se postupno, ali danas su dosegnuli razinu praga. Među glavnim nedostacima su:
Nezadovoljavajuća upotrebljivost. Danas udio korisnika mobilnih uređaja i tableta malih razlučivosti ekrana raste i već premašuje broj onih koji stranice posjećuju sa stolnih i prijenosnih računala. I ovdje korištenje okvira stvara ozbiljne probleme s prilagodljivošću stranica kada se prikazuju razne uređaje. Taj problem danas nema praktično rješenje.
Pogoršanje pristupačnosti stranice za razne programe. Povećanje broja dodatnih programa (primjerice, čitača zaslona) otkriva znatno lošiju dostupnost informacija za čitanje.
Stranice se ne prikazuju ispravno. Često izgled stranica s takvom strukturom izgleda netočno u preglednicima sa stajališta dizajna. A to je zbog značajki tehnologije. Sa stajališta SEO-a, korištenje okvira u HTML izgledu stranice vrlo je nepoželjno.
Dostupnost jedne adrese za cijelu strukturu. Kao rezultat toga, interne stranice takve stranice ne mogu se označiti. To dovodi do neugodnosti za korisnike.
Netočno indeksiranje od strane tražilica. Prisutnost na web stranici nekoliko cjelovitih dokumenata, od kojih se formira jedna stranica, značajno komplicira rad tražilica. To dovodi do značajnih pogrešaka tijekom indeksiranja. Kao rezultat toga, netočna definicija tema i adresa stranica dovodi do gubitka kritičnog sadržaja iz indeksiranja.
Nepoštovanje. Ovo je prilično neobičan nedostatak za resurse na mreži. Pa ipak, mora se reći da činjenica da izgled stranica na okvirima zastarijeva dovodi do činjenice da se autori i vlasnici takvih resursa smatraju retrogradnima. Ali postoje neke iznimke. Čak i moderne stranice koje sadrže chat sobe obično koriste okvire.
Indeksiranje okvira od strane tražilica
Informacije koje dolaze s tražilica jasno nam govore da se stranice s okvirima indeksiraju osjetno sporije. U tom slučaju često nastaju pogreške vezane uz samu strukturu. Uostalom, svaki okvir prikazuje punu internetsku stranicu. I upravo takav dio stranice može biti uključen u bazu podataka za indeksiranje.
Negativni aspekt ovakvog indeksiranja je taj što korisnik obično ne vidi izbornike i druge navigacijske mehanizme prilikom odlaska na unutrašnjost stranice. I to ne čudi. Morate shvatiti da ažuriranje okvira u ovom slučaju nije rješenje problema. Uostalom, svi navigacijski mehanizmi smješteni su u drugi spremnik.
Drugi problem je što često glavna stranica strukture spremnika sadrži samo naslov, oznake meta opisa i oznaku FRAMESET. I to se čini logičnim - na kraju krajeva, smisleni sadržaj nalazi se u zasebnim dokumentima. Upravo će ih posjetitelj vidjeti na stranici u okvirima.
Ali robot za pretraživanje gotovo nikad ne indeksira takvu stranicu. Na njemu ne nalazi nikakav sadržaj koristan posjetiteljima. Roboti za pretraživanje su konfigurirani na takav način da pokušavaju dohvatiti i indeksirati informacije smještene unutar oznake tijela. Tu se javlja potraga za korisnim sadržajem za korisnika. Ali na stranici okvira nema te oznake; zamijenjena je s FRAMESET.
Ovaj problem se može djelomično riješiti korištenjem NOFRAMES-a. Ali na mnogim stranicama, kada mu se pristupa, daje se samo informacija da preglednik ne podržava okvire. A za pregled stranice morate koristiti drugi program.
Takvi slučajevi stvaraju brojne probleme korisnicima koji prilikom posjete web stranici ne vide izbornik i druge informacije koje bi trebale biti prikazane. Ako se okviri postave na web stranicu, njeni parametri sa SEO gledišta se smanjuju. Istodobno, statistika ponašanja korisnika pokazuje da autoritet resursa među tražilicama pada. To definitivno ima negativan utjecaj na promet web stranice.
Tražilicama i botovima za indeksiranje posebno je teško obraditi ugniježđene i višestruke strukture osoblja. Situaciju dodatno komplicira činjenica da svaki spremnik ima sve značajke zasebnog dokumenta, ali ne sadrži punu navigaciju i druge informacije.
Ispravnim povezivanjem na stranicama možete olakšati rad tražilicama. U tom slučaju trebate duplicirati sve veze izbornika tako da se mogu pronaći unutar svakog pojedinog dijela stranice. Ali to značajno komplicira i usporava rad na optimizaciji stranice i ažuriranju informacija na njoj.
Iskustvo mnogih optimizatora i webmastera također sugerira da stranice na okvirima ne dobivaju visoko rangiranje u rezultatima pretraživanja. To se događa čak i ako su uključeni u bazu podataka za indeksiranje.
Značajke promocije web stranica u okvirima
Neke tražilice indeksiraju uokvirene datoteke netočno ili vrlo netočno. Kao rezultat toga, baza podataka indeksa nije ispunjena adresama nadređenih resursa (kao što bi trebalo biti), već vezama na podređene stranice.
Kako bi se problemi indeksiranja stranica na temelju okvira sveli na najmanju moguću mjeru, prilikom njihovog opisa koriste se posebne oznake i parametri. Glavni element strukture spremnika je okvir. On je taj koji zamjenjuje standardno tijelo; u izvornom kodu. Svaki pojedinačni spremnik u strukturi opisan je okvirom. Njegova količina u kodu stranice odgovara broju pojedinačnih odjeljaka prikazanih u prozoru preglednika prilikom pregledavanja.
Ove oznake treba staviti na početna stranica mjesto, a zatim duplicirati sadržaj unutar svakog od njih.
Područja primjene okvira
Programeri HTML dokumenata imaju prilično širok izbor oblika za prikaz informacija na stranicama. Tekst i grafičke informacije mogu se poredati i organizirati pomoću popisa, tablica ili jednostavno pomoću opcija poravnanja, postavljanja vodoravnih linija i dijeljenja na odlomke. Ponekad ove značajke nisu dovoljne i tada morate podijeliti prozor preglednika u odvojena područja ili okvire. U brojnim opisima HTML jezika na ruskom jeziku umjesto pojma okviri koristi se izraz okviri. Učestalost upotrebe oba pojma je približno ista.
Izbor strukture okvira za prikaz informacija na WWW-u opravdan je u sljedećim slučajevima:
ako je potrebno, upravljajte učitavanjem dokumenata u jedno od podpodručja prozora preglednika dok radite u drugom podpodručju;
locirati informaciju na određeno mjesto u prozoru za gledanje koje uvijek mora biti na ekranu, bez obzira na sadržaj ostalih podpodručja ekrana;
za predstavljanje informacija koje su prikladno raspoređene u nekoliko susjednih podpodručja prozora, od kojih se svako može zasebno pregledavati.
Navedeni popis ne iscrpljuje sve moguće slučajeve u kojima se okviri mogu primijeniti, već je preporuke.
Prvo razmotrimo tipične upotrebe okvira koristeći primjere stvarnih HTML dokumenata, a zatim se okrenimo pravilima za razvoj dokumenata koji sadrže okvire.
Na sl. Slika 5.1 prikazuje jednu od HTML stranica agencije Finmarket, specijalizirane za pružanje informacija s financijskih i burzovnih tržišta Rusije.
Riža. 5.1. Tipičan web dokument sa strukturom okvira
Ova stranica dijeli prozor preglednika u tri okvira. Donji dio prozor zauzima 20% visine cijelog prozora i sadrži stalne informacije, a to je u ovom slučaju grafički izbornik koji vam u svakom trenutku omogućuje pristup najvažnijim dijelovima. Ovaj okvir ne može promijeniti svoju veličinu na temelju korisničkih naredbi i nema trake za pomicanje. Gornji dio prozor (80% visine) podijeljen je vodoravno u dva okvira. Lijevi okvir sadrži sadržaj dokumenata koje korisnik može vidjeti. Desni okvir, koji zauzima veći dio prozora za pregled, namijenjen je za prikaz samih dokumenata. Kada se inicijalno učitaju, ova dva okvira vodoravno dijele prozor preglednika u omjeru od 15% prema 85%. Ovaj omjer korisnik može promijeniti tijekom gledanja, što vam omogućuje odabir optimalnih veličina okvira uzimajući u obzir sadržaj učitanih dokumenata. Svaki od ovih okvira ima svoju traku za pomicanje, što vam omogućuje pregled cijelog sadržaja okvira, bez obzira na veličinu samog okvira, cijelog prozora preglednika ili korištenih fontova. Kada odaberete bilo koju vezu u lijevom okviru, odgovarajući dokument će se učitati u desnom okviru. Ova struktura omogućuje vam da istovremeno vidite na ekranu i sadržaj dokumenata i sadržaj odabranog dokumenta.
Ovdje je, bez objašnjenja, fragment HTML koda korištenog za izradu dokumenta s ovom strukturom:
Ovaj primjer pokazuje najtipičniju upotrebu struktura okvira, gdje jedan okvir služi kao tablica sadržaja za dokumente, a drugi se koristi za učitavanje njihovog sadržaja. Rješavanje takvog problema bez korištenja okvira obično se radi na sljedeći način. Na jednoj od stranica nalazi se sadržaj koji se sastoji od poveznica na druge dokumente ili njihove pojedinačne fragmente. Kada kliknete na takvu poveznicu, sadržaj nestaje, a na njegovo se mjesto učitava traženi dokument nakon čijeg čitanja se obično trebate vratiti na sadržaj. Kod korištenja okvira ovaj povratak postaje nepotreban, jer se sadržaj uvijek nalazi na dijelu ekrana.
Možete ga pronaći na internetu
web stranica elektroničkog izdanja popularnog adresnog i telefonskog imenika "All Petersburg" u St.
Elektronička verzija imenika dostupna je na http://www.allpetersburg.ru te vam omogućuje pronalazak potrebnih informacija na temelju zahtjeva korisnika. Ova stranica dokumenta također ima strukturu okvira i sastoji se od dva okvira, od kojih je prvi širok 100 piksela, a drugi zauzima cijelu preostalu širinu okvira za prikaz. Okvir koji se nalazi s lijeve strane služi za grafički izbornik koji je stalno prisutan na ekranu, a sadrži i logo tvrtke Nevalink. Drugi okvir sadrži dokument, koji je u ovom slučaju obrazac zahtjeva korisnika. Struktura ove stranice definirana je sljedećim HTML kodom:
Okviri su vrlo slični tablicama - oba dijele prozor preglednika na pravokutna područja u kojima se nalaze neke informacije. Međutim, uz pomoć okvira možete riješiti ne samo problem oblikovanja stranica dokumenta, već i organizirati interakciju između njih. Temeljna razlika između okvira i tablice je u tome što svaki okvir mora imati svoj zasebni HTML dokument, ali sadržaj svih ćelija tablice uvijek je dio istog dokumenta. Osim toga, stranica prikazana u okviru može se pomicati kada se gleda neovisno o ostalima. Svaki okvir je u biti zaseban "mini-preglednik". Za razliku od okvira, čija je cijela struktura uvijek prikazana na ekranu, tablice možda neće u potpunosti stati u prozor i mogu se vidjeti samo u dijelovima. Iz toga slijedi da ako je u HTML tablicama ukupan broj ćelija praktički neograničen i može doseći nekoliko stotina, tada broj okvira u dokumentu obično ne prelazi nekoliko jedinica.
Savjet
Ako trebate samo formatirati dokument, dovoljno je ograničiti se na korištenje tablica. Ako trebate riješiti složenije probleme, na primjer, organizirati interakciju između potpodručja prozora ili stvoriti potpodručja koja se trajno nalaze na zaslonu, tada je prikladno koristiti okvire.
U konačnici, izbor strukture dokumenta - tablične ili okvirne - ovisi o mnogim čimbenicima i ne može se jednoznačno unaprijed odrediti.
Postoje takođerstranice za koje se čini da su izgrađene slično prethodnima. Na primjer, možete uzeti stranica vrlo popularne svjetske zbirke softverskih proizvoda namijenjenih prvenstveno za rad s Internetom. Adresa poslužitelja http://www.tucows.com. Imajte na umu da je naziv poslužitelja određen kraticom izvedenom iz kratice punog naziva kolekcije - The Ultimate Collection of Winsock Software. Budući da se kratica tucows pokazala suglasnom s frazom dvije krave (dvije krave), slike krava često se nalaze na stranicama poslužitelja, a ocjena softverskih proizvoda procjenjuje se u broju mooings ("Moo") i je grafički prikazan kao niz odgovarajućeg broja krava. Većina stranica poslužitelja izgrađena je na isti način - s lijeve strane prozora nalazi se popis dostupnih odjeljaka, a s desne strane popis softverskih proizvoda za odabrani odjeljak. Na prvi pogled struktura dokumenta trebala bi izgledati približno isto kao u prethodnim primjerima. Međutim, ovaj dokument ne koristi okvire! Ova je stranica izrađena pomoću tablice koja se sastoji od samo jednog retka s dvije ćelije. Tablica nema okvir i služi samo za formatiranje stranice. Dojam okomito podijeljenog zaslona stvara se korištenjem pozadinske grafike koja sadrži vertikalna linija, a ne rešetku tablice uopće. To možete provjeriti pregledom stranice bez učitavanja slika. Upotreba tablice ovdje je očito zbog razmatranja veće dostupnosti dokumenata, budući da okviri ne dopuštaju prikaz u svim preglednicima.
Nedostatak ovog pristupa u ovom slučaju je potreba ponavljanja cijelog popisa odjeljaka (lijeva strana stranice) u svakom dokumentu, što malo povećava veličinu datoteke.
Usporedba gornjih primjera pokazuje da upotreba tablica i okvira ponekad može biti međusobno zamjenjiva i određena željama programera. Imajte na umu da je često kada gledate stranicu s dokumentom prikazanim na njoj, nemoguće odrediti kako je izgrađen. Krajnji korisnik ne mora poznavati unutarnju strukturu dokumenta, no pri izradi vlastitih web stranica upoznavanje s izvornim kodom postojećih dokumenata bilo bi od velike koristi. U prvom primjeru (vidi sl. 5.1), struktura okvira dokumenta je odmah vidljiva - prisutnost dvije okomite trake za pomicanje već određuje prisutnost pojedinačnih okvira. Sljedeća dva primjera vrlo su slična po izgledu i nemoguće je utvrditi da je prvi od njih izgrađen pomoću okvira, a drugi - pomoću tablica. Razlike će se pojaviti samo u radu s njima. U primjeru telefonskog imenika, prilikom listanja dokumenta, lijevi dio prozora će ostati na mjestu, što je moguće samo ako postoji okvirna struktura. U sljedećem primjeru (zbirka softverskih proizvoda), pomicanje će pomaknuti cijeli sadržaj prozora.
Možete vidjeti strukturu dokumenta kada radite s Netscape preglednikom koristeći stavku Informacije o stranici (u verzijama 3.x preglednika Netscape ova se stavka izbornika zvala Informacije o dokumentu) izbornika Pogled (Slika 5.2).
Osim toga, uvijek možete vidjeti izvorni HTML kod cijelog dokumenta pomoću stavke Izvor stranice na izborniku Pogled (ili stavke Pregled izvora okvira kontekstnog izbornika desnog klika za prikaz HTML koda dokumenta učitanog u odabrani okvir).
Savjet
Ne smijete nepotrebno zlorabiti korištenje okvira, a njihov broj ne smije biti veći od tri ili četiri.
Često na stvarnim stranicama na Internetu možete vidjeti sljedeće slučajeve korištenja okvira:dva susjedna okvira koriste se za učitavanje dokumenata koji su zgodni za simultani pregled i međusobnu usporedbu. Svaki od dva dokumenta učitana u okvire koristi tabelarnu formu za prezentiranje informacija. Kao rezultat ove organizacije podataka, svaka od dvije tablice može se zasebno pregledavati (ili ispisivati) ili proučavati u usporedbi s drugom.
Svi primjeri navedeni u ovom odjeljku preuzeti su sa stranica popularnih WWW poslužitelja i možda mogu poslužiti kao primjeri korištenja okvira u HTML dokumentima.
Sljedeći odjeljci ovog poglavlja pokrivaju pravila za pisanje dokumenata koji sadrže okvire.
Pravila za opisivanje okvira
Prijeđimo sada na razmatranje pravila za pisanje oznaka koje se koriste za dokumente sa strukturama okvira.
Pogledajmo prvo potpuni HTML kôd koji stvara dokument s okvirima srednje složenosti:
Ovaj primjer stvara uokvirenu stranicu prikazanu na slici. 5.3. Kao što vidite, ovaj HTML kod definira četiri okvira. Gornji okvir proteže se cijelom širinom stranice i sadrži naslov. Slijede dva središnja okvira, od kojih se jedan nalazi s lijeve strane i zauzima 25 posto širine ekrana, a drugi zauzima preostali prostor. Posljednji, četvrti okvir zauzima donju četvrtinu ekrana. U svaki okvir učitava se zaseban HTML dokument čiji je naziv određen SRC parametrom.
Kao što se može vidjeti iz primjera, oznake se koriste za opisivanje strukture okvira
, I . Pogledajmo svrhu ovih oznaka.
Riža. 5. 3
.
Rezultat preglednika Netscape koji prikazuje HTML dokument s okvirima prikazanim u primjeru
Označiti
Okviri su definirani u strukturi koja se zove FRAMESET, koja se koristi za stranice koje sadrže okvire umjesto odjeljka BODY redovni dokument. Web stranice sastavljene od okvira ne mogu sadržavati odjeljak BODY u svom HTML kodu. Zauzvrat, stranice s odjeljkom BODY ne mogu koristiti okvire.
Savjet
Budući da uokvirene stranice nemaju BODY odjeljak, ne postoji način za postavljanje pozadinske slike i pozadinske boje za cijelu stranicu. Podsjetimo se da su ove postavke određene parametrima BACKGROUND i BGCOLOR koji su napisani u oznaci BODY. Međutim, to vas ne sprječava da u svaki okvir učitavate dokumente s vlastitim postavkama pozadine.
Spremnik oznaka
I okviri svaki blok definicije okvira. Unutar kontejnera može sadržavati samo oznake i ugniježđene oznake .
Označiti
ima dva parametra: ROWS (redovi) i COLS (kolone) i piše se na sljedeći način:
.
Bilješka
Neki preglednici dopuštaju dodatne parametre oznake
Možete definirati vrijednosti za ROWS ili COLS, ili oboje. Za barem jedan od ovih parametara potrebno je definirati najmanje dvije vrijednosti. Ako je neki drugi parametar izostavljen, pretpostavlja se da je njegova vrijednost 100%.
Savjet
Ako je u oznaci Ako je definirana samo jedna vrijednost za ROWS i COLS, ta će se oznaka smatrati nevažećom i preglednik će je zanemariti. Drugim riječima, nemoguće je utvrditi , koji se sastoji od samo jednog okvira.
Popis vrijednosti parametara oznake ROWS i COLS
je popis vrijednosti odvojenih zarezima koje se mogu navesti u pikselima, postocima ili relativnim jedinicama. Broj redaka ili stupaca određen je brojem vrijednosti na odgovarajućem popisu. Na primjer, snimite
definira skup od tri okvira. Ove vrijednosti su apsolutne vrijednosti piksela. Drugim riječima, prvi okvir (prvi red) visok je 100 piksela, drugi je 240 piksela, a posljednji je visok 140 piksela.
Postavljanje vrijednosti veličine okvira u pikselima nije baš zgodno. Ovo ne uzima u obzir činjenicu da preglednici rade na različitim operativnim sustavima i s različitim rezolucijama zaslona. Istodobno, moguće je definirati apsolutne vrijednosti veličine za neke slučajeve, na primjer, za prikaz male slike s poznatim dimenzijama. Najbolja opcija bila bi postaviti vrijednosti u postocima ili relativnim jedinicama, na primjer:
.
Ovaj primjer stvara tri okvira koji su postavljeni kao redovi preko cijele širine zaslona. Gornji red će zauzeti 25 posto dostupne visine zaslona, srednji red će zauzeti 50 posto, a donji red će zauzeti 25 posto. Ako zbroj navedenih postotaka nije jednak 100%, tada će se vrijednosti proporcionalno skalirati tako da rezultat bude točno 100%.
Vrijednosti u relativnim jedinicama su sljedeće:
.
Zvjezdica (*) koristi se za proporcionalnu podjelu prostora. Svaka zvijezda predstavlja jedan dio cjeline. Zbrajanjem svih vrijednosti brojeva pored zvjezdica (ako je broj izostavljen, onda se jedan uzima) dobivamo nazivnik razlomka. U ovom primjeru, prvi stupac će zauzeti 1/6 ukupne širine prozora, drugi stupac će zauzeti 2/6 (ili 1/3), a posljednji će zauzeti 3/6 (ili 1/ 2).
Upamtite da numerička vrijednost bez ikakvih znakova navodi apsolutni broj piksela za red ili stupac. Vrijednost sa znakom postotka (%) određuje udio ukupne širine (za COLS) ili visine (za ROWS) okvira za prikaz, a vrijednost sa zvjezdicom (*) navodi proporcionalnu raspodjelu preostalog prostora.
Evo primjera koji koristi sve tri opcije za postavljanje vrijednosti:
.
U ovom primjeru prvi će stupac biti širok 100 piksela. Drugi stupac će zauzeti 25 posto cijele širine okvira za prikaz, treći stupac će zauzeti 1/3 preostalog prostora, a posljednji će stupac zauzeti 2/3. Preporuča se prvo dodijeliti apsolutne vrijednosti redom s lijeva na desno. Slijede se postotne vrijednosti od ukupne veličine prostora. Na kraju se bilježe vrijednosti koje određuju proporcionalnu podjelu preostalog prostora.
Savjet
Ako koristite apsolutne vrijednosti COLS ili ROWS, neka budu male kako bi mogle stati u bilo koji prozor preglednika i dopunite ih prema potrebi. barem, jedna vrijednost, navedena u postotku ili relativnom obliku, za popunjavanje preostalog prostora.
Ako se koristi oznaka
, u kojem su navedeni i COLS i ROWS, kreirat će se mreža okvira. Na primjer:
Ovaj redak HTML koda stvara mrežu okvira s tri retka i dva stupca. Prva i zadnja linija zauzimaju po 1/4 visine, a srednja linija zauzima polovicu. Prvi stupac zauzima 2/3 širine, a drugi - 1/3.
Kontejner
može biti ugniježđen unutar drugog sličnog spremnika, kao što je prikazano u početnom primjeru. Razmotrimo dalje upotrebu oznake .
Bilješka
Neki izvori o HTML jeziku navode da COLS i ROWS parametri oznake međusobno se isključuju. Međutim, i Netscape i Microsoft Internet Explorer dopuštaju njihovu zajedničku upotrebu.
Označiti
Označiti definira jedan okvir. Mora se nalaziti unutar para oznaka
I. Na primjer:
Imajte na umu da oznaka nije spremnik i za razliku od
nema završnu oznaku. Cjelokupna definicija jednog okvira učinjena je jednim redom HTML koda.
Ima toliko mnogo oznaka za snimanje koliko je pojedinačnih okvira definirano prilikom navođenja oznake
. U prethodnom primjeru oznaka data su dva niza, pa je trebalo napisati dvije oznake . Međutim, ovaj primjer je u biti beskoristan, jer niti jedan od okvira nema nikakav sadržaj!
Označiti ima šest parametara: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING i NORESIZE.
Bilješka
Neki vam preglednici dopuštaju korištenje brojnih dodatnih parametara oznaka . Na kraju poglavlja dan je pregled mogućnosti preglednika Netscape i Microsoft Internet Explorer.
U praksi u tag Rijetko se svi parametri koriste u isto vrijeme.
Najviše važan parametar- SRC (skraćenica za izvor). Dosta često u oznaci naveden je jedan SRC parametar. Na primjer:
.
Vrijednost SRC parametra određuje URL dokumenta koji će se inicijalno učitati u ovaj okvir. Obično je ova adresa naziv HTML datoteke koja se nalazi u istom direktoriju kao i glavni dokument. Tada će linija definicije okvira izgledati, na primjer, ovako:
.
Imajte na umu da svaka HTML datoteka navedena u definiciji okvira mora biti potpuni HTML dokument, a ne fragment. To znači da dokument mora imati HTML, HEAD, BODY itd. oznake.
Naravno, SRC vrijednost može biti bilo koji važeći URL. Ako se, primjerice, okvir koristi za prikaz GIF slike koja se nalazi na poslužitelju izdavača ove knjige, tada trebate napisati:
.
Savjet
Nemojte uključivati nikakav sadržaj u dokument koji opisuje strukturu okvira.
Običan tekst, naslovi, grafike i drugi elementi ne mogu se koristiti izravno u dokumentu koji opisuje strukturu okvira. Sav sadržaj okvira mora biti definiran u zasebnim HTML datotekama, čiji su nazivi navedeni SRC parametrom oznake .
Parametar NAME specificira naziv okvira koji se može koristiti za referiranje na ovaj okvir. Veza se obično postavlja iz drugog okvira koji se nalazi na istoj stranici. Na primjer:
.
Ovaj unos stvara okvir pod nazivom "Frame_1" na koji se može pozivati. Na primjer:
Kliknite ovdje za preuzimanje
dokument other.htm u okvir pod nazivom Okvir_1.
Obratite pažnju na parametar TARGET koji se odnosi na naziv okvira. Ako okviru nije dodijeljen naziv, stvorit će se neimenovani okvir i neće biti moguće referencirati ga iz drugog okvira. Imena okvira moraju započeti alfanumeričkim znakom.
Parametri MARGINWIDTH i MARGINHEIGHT omogućuju postavljanje širine margina okvira. Ovo je napisano na sljedeći način:
MARGINWIDTH="vrijednost",
gdje je "vrijednost" apsolutna vrijednost u pikselima. Na primjer:
Ovaj okvir ima margine na vrhu i dnu od 5 piksela, a na lijevoj i desnoj strani - 7 piksela. Upamtite da ovdje govorimo o marginama, a ne okvirima. Parametri MARGINWIDTH i MARGINHEIGHT definiraju prostor unutar okvira unutar kojeg se neće nalaziti nikakva informacija. Minimalna prihvatljiva vrijednost za ove parametre je jedan.
Okviri će automatski stvoriti i prikazati trake za pomicanje ako sadržaj okvira ne stane u potpunosti unutar dodijeljenog prostora. Ponekad to kvari dizajn stranice, pa bi bilo zgodno kontrolirati prikaz traka za pomicanje. Parametar SCROLLING se koristi za ove svrhe. Format snimanja:
.
Parametar SCROLLING može imati tri vrijednosti: YES, NO ili AUTO. AUTO vrijednost ima isti učinak kao da nema parametra SCROLING. Vrijednost DA uzrokuje da se trake za pomicanje pojavljuju bez obzira na to jesu li potrebne, a vrijednost NO sprječava njihovo pojavljivanje. Na primjer:
.
Obično korisnik može promijeniti veličinu okvira dok gleda stranicu. Postavite li kursor miša na okvir okvira, kursor će poprimiti oblik koji označava mogućnost promjene veličine i omogućiti pomicanje okvira na željeno mjesto. To ponekad narušava strukturu lijepo dizajniranih okvira. Kako biste spriječili korisnika da mijenja veličinu okvira, koristite NORESIZE parametar:
.
Ovaj parametar ne zahtijeva nikakve vrijednosti. Naravno, kada je parametar NORESIZE postavljen za jedan od okvira, tada se ne može mijenjati ni veličina bilo kojeg od susjednih okvira. Ponekad, ovisno o rasporedu okvira, upotreba parametra NORESIZE na jednom od okvira bit će dovoljna da spriječi promjenu veličine bilo kojeg od njih na zaslonu.
Označiti
Mogućnost rada s okvirima nije bila predviđena ni u HTML 3.0 ni u HTML 3.2 standardu. Ovdje je donedavno postojala prilično tipična situacija kada se stvarno korištene značajke aktivno koriste na mnogim WWW stranicama, ali nisu dio standarda. To je značilo da preglednici mogu legitimno ignorirati okvire. Dolaskom standarda HTML 4.0 situacija se promijenila - sada je podrška za strukture okvira ugrađena u standard. Imajte na umu da je većina modernih preglednika prepoznavala okvire i prije pojave HTML 4.O. Međutim, potrebno je pružiti informacije korisnicima koji koriste preglednike koji ne podržavaju okvire. Za takve preglednike moguće je pružiti alternativne informacije koje su zapisane između para oznaka I. Ovako izgleda:
cijeli HTML dokument
Sve što se nalazi između oznaka I, prikazat će se u preglednicima koji nemaju mogućnosti podrške okvira. Frame-aware preglednici će zanemariti sve informacije između ovih oznaka.
Imajte na umu da u stvarnom životu programeri HTML stranica često ne koriste mogućnosti oznake za stvaranje stranica bez struktura okvira, već jednostavno kreiraju dvije verzije svojih HTML dokumenata. Za ovu opciju početna stranica Obično vam se nudi izbor učitavanja dokumenta sa ili bez strukture okvira. Zatim se, ovisno o izboru korisnika, učitava samo jedna verzija dokumenta.
Značajke opisa okvirnih konstrukcija
Jedna od najvažnijih oznaka koja se koristi pri opisivanju struktura okvira je oznaka . Oznaka ima niz parametara, od kojih niti jedan nije obavezan niti ovisi o drugima, ali postoje brojne stvari koje treba uzeti u obzir kada ih pišete.
Ispada da ako trebate stvoriti okvir u koji se kasnije može učitati dokument, na primjer, naredbom iz drugog okvira, trebali biste koristiti oznaku napisati SRC parametar. Ako ovo
parametar je izostavljen, okvir neće biti kreiran, ali će za njega biti ostavljen prostor. Na primjer, zapis poput sasvim je logično i moglo bi definirati okvir pod nazivom "B" u koji se inicijalno ne učitava nikakav dokument. Međutim, zbog nepostojanja SRC parametra, okvir s tim nazivom neće postojati, pa će daljnji pokušaji učitavanja bilo kojeg dokumenta u njega ostati neuspješni, a prostor u prozoru dodijeljen za ovaj okvir će biti prazan. Štoviše, neki će preglednici (na primjer, Microsoft Internet Explorer verzija 3 za Windows Z.xx) prikazati poruku o pogrešci i izaći kada pokušaju učitati dokument u takav okvir.
Zahtjev za postavljanje parametra SRC ne može se logično objasniti, stoga je najbolje tu činjenicu jednostavno uzeti u obzir. Zatim, čak i ako ne postoji dokument koji treba učitati u ovaj okvir od samog početka, trebali biste navesti naziv datoteke u SRC parametru. Na primjer, takva se datoteka može nazvati empty.htm (prazna), čiji će sadržaj biti minimalno mogući točan HTML dokument, naime:
Ovaj dokument možete smanjiti na dvije oznake: , koji će također biti važeći HTML dokument. Slijedeći put maksimalnog smanjenja veličine "praznog" dokumenta, možete se ograničiti na datoteku veličine jednog bajta, koja pohranjuje znak razmaka (ili bilo koji drugi znak koji se ne može prikazati). Ova datoteka neće biti važeći HTML dokument, ali neće uzrokovati probleme s većinom preglednika. Daljnje smanjivanje veličine takve datoteke na nulu nije opravdano, jer kada je učita Netscape preglednik, prikazat će poruku upozorenja (Sl. 5.4) da dokument ne sadrži podatke.
Istovremeno, na ovu poruku morate reagirati pritiskom na tipku ili tipku miša. Svaki put kad se dokument ponovno učita ili se promijeni veličina prozora preglednika, poruka će se ponovno pojaviti.
Također možete navesti naziv nepostojeće datoteke, ali će u tom slučaju Netscape preglednik prikazati poruku upozorenja (Sl. 5.5), što neće spriječiti daljnji rad, ali će dovesti do sličnih neugodnosti.
Napravite datoteku pod nazivom empty.htm koja je veličine jedan bajt i sadrži znak za razmak. Neka to postane pravilo kada pišete oznaku uvijek navedite SRC=empty.htm ako je nemoguće odmah navesti naziv određene datoteke.
Primjeri okvira
Ovaj odjeljak daje neke tipične primjere definicija okvira.
Vratimo se na primjer dat na početku ovog odjeljka (Sl. 5.3). Ovaj primjer koristi ugniježđenu strukturu
. Vanjska oznaka stvara tri retka visine, odnosno 25, 50 i 25 posto ukupne visine prozora:
.
Unutar ovog opsega definicije, prvi i posljednji redak su jednostavni okviri:
Svaka od ovih linija ispunjava cijelu širinu zaslona. Prvi redak na vrhu ekrana zauzima 25 posto visine, a treći redak na dnu također zauzima 25 posto visine. Međutim, između njih postoji ugniježđena oznaka
:
Ova oznaka definira dva stupca na koje je podijeljen srednji red ekrana. Red koji sadrži ova dva stupca zauzima 50 posto visine zaslona, kako je definirano u vanjskoj oznaci
. Lijevi stupac zauzima 25 posto širine zaslona, dok desni stupac zauzima preostalih 75 posto širine.
Okviri za ove stupce definirani su unutar ugniježđenog para oznaka
I, dok je definicija okvira za prvi i zadnji redak napisana izvan ovog para, ali unutar vanjskog odgovarajućim redoslijedom.
Struktura zapisa lako je razumjeti ako je zamislite kao ugniježđeni blok
kao poseban element . U našem primjeru, vanjska oznaka definira tri linije. Svaki od njih mora biti dovršen. U ovom slučaju, prvo se popunjavaju zasebnim elementom , zatim - kao ugniježđeni blok dva stupca širine pa još jedan element .
Sada se može postaviti pitanje može li vrijednost parametra oznake SRC biti postavite naziv datoteke, koja zauzvrat sadrži opis strukture okvira. Da, to je prihvatljivo. U ovom slučaju oznaka će se koristiti za ukazivanje na HTML dokument koji je struktura okvira i koristi se kao zaseban okvir.
Vratimo se primjeru i zamijenimo ugniježđeno
na odvojeno . Naravno, trebat ćete dvije HTML datoteke umjesto jedne, jer su ugniježđene sada će se nalaziti u zasebnom dokumentu. Evo sadržaja prve (vanjske) datoteke:
Vaš preglednik ne može prikazati okvire
Druga datoteka pod nazivom frameset.htm sadrži sljedeći kod:
U ovom slučaju, gornja i donja linija ponašaju se isto. Ali druga linija je sada jednostavan okvir poput ostalih. Međutim, datoteka frameset.htm na koju ukazuje SRC parametar definira vlastitu strukturu okvira. Kao rezultat toga, zaslon će biti potpuno isti kao u izvornom primjeru.
Bilješka
Načelno je moguće stvoriti ugniježđene strukture , koristeći oznake , koji se odnose na istu datoteku koja opisuje strukturu okvira, ali to se ne bi trebalo činiti. Ova situacija će dovesti do beskonačne rekurzije i neće dopustiti daljnji rad. Neki preglednici kontroliraju ovu situaciju i sprječavaju mogućnost kvara. Ako adresa zapisana u SRC odgovara jednoj od prethodnih adresa u hijerarhiji okvira, tada se zanemaruje, kao da SRC parametar uopće nije prisutan.
Savjet
Korištenje ugniježđenih struktura u raznim kombinacijama, moguće je stvoriti gotovo bilo koju zamislivu mrežu okvira. Međutim, ne zaboravite stvoriti korisničko sučelje, a ne samo pokazati svoju sposobnost rada s okvirima.
Evo primjera stvaranja pravilne pravokutne mreže okvira:
Ovaj primjer stvara mrežu okvira s dva retka i tri stupca (Slika 5.6). Budući da je definiran skup od šest okvira, potrebno je definirati i šest pojedinačnih okvira . Imajte na umu da su definicije okvira dane redak po redak. Odnosno prva oznaka definira sadržaj prvog stupca u prvom retku, drugi definira sadržaj drugog stupca, a treći završava definiranje podataka za posljednji stupac prvog retka. Posljednja tri okvira tada ispunjavaju stupce drugog reda.
Riža. 5. 6
.
Mreža okvira 2 puta 3
Također imajte na umu da zbroj postotnih vrijednosti u parametru COLS nije 100, već samo 90 posto. Nema ništa loše u tome, jer će preglednik automatski proporcionalno promijeniti širinu stupaca kako bi eliminirao ovu kontradikciju.
Značajke navigacije pri korištenju okvira
Rad s dokumentima koji imaju strukturu okvira ima neke značajke koje morate znati. Ove značajke JB-a uglavnom se očituju u navigaciji prilikom učitavanja dokumenata. Značajne razlike u navigaciji karakteristične su ne samo za različite preglednike, već i različite verzije isti preglednik.
Netscape preglednik verzije 3.x i 4.x, kada kliknete gumb Natrag, vraća dokument natrag u okvir na kojem je zadnji put izvršena radnja. Iste radnje će se izvršiti ako je stavka Natrag odabrana prilikom pozivanja kontekstnog izbornika u bilo kojem od okvira. Podsjetimo, kontekstni izbornik se poziva desnim klikom miša. Dakle, bez obzira u kojem je okviru pozvan kontekstni izbornik, pritiskom na tipku Natrag poništit ćete posljednju operaciju, čak i ako je izvršena u drugom okviru.
Preglednik Netscape 2.x radio je potpuno drugačije. Kontekstni izbornik sadrži naredbu Natrag u okvir, koja vraća dokument u trenutni okvir umjesto poništavanja zadnje operacije.
U bilo kojoj verziji Netscapea možete označiti dokument koji se nalazi u odabranom okviru. Da biste to učinili, trebate odabrati način Dodaj knjižnu oznaku iz gore navedenog kontekstnog izbornika. Ako jednostavno odaberete način Dodaj oznaku iz glavnog izbornika preglednika, na dokumentu će se napraviti oznaka s opisom strukture okvira
, koji neće točno ukazivati na određeni okvir. Mogućnost stvaranja oznake na dokumentu zasebnog okvira ne znači da će se ista struktura okvira pojaviti kada nastavite koristiti ovu oznaku. Dokument na koji ukazuje knjižna oznaka bit će učitan u puni prozor izvan strukture okvira.
Interakcija između okvira
Najjednostavniji oblik pregledavanja informacija na WWW-u sastoji se od čitanja stranica i praćenja poveznica, pri čemu se trenutni dokument u prozoru preglednika zamjenjuje drugim dokumentom. Kada radite s okvirima, možete organizirati jednostavniju shemu učitavanja dokumenata.
Interakcija između okvira je mogućnost učitavanja dokumenata u odabrani okvir pomoću naredbi iz drugog okvira. U tu svrhu koristi se parametar oznake TARGET<А>. Ovaj parametar specificira naziv okvira ili prozora preglednika u koji će se učitati dokument na koji upućuje ova veza. Prema zadanim postavkama, ako nema parametra TARGET, dokument se učitava u trenutni okvir (ili prozor). Ova se zadana vrijednost može nadjačati navođenjem oznake sa željenom vrijednošću parametra TARGET. Određivanje naziva zadanog okvira za učitavanje vrlo je korisno kada veliki broj veza treba usmjeriti dokumente na određeni okvir. Tipična situacija sa sadržajem u jednom okviru, poveznice iz kojih se učitavaju odgovarajući dokumenti u susjedni okvir, prikazana je na početku ovog poglavlja (slika 5.1). Za ovaj primjer u odjeljku
datoteku pod nazivom LIST.htm, preporučljivo je napisati sljedeći red: . Inače biste morali navesti parametar TARGET za svaku vezu.
Imena okvira moraju započeti latiničnim slovom ili brojem. Naziv može biti naziv postojećeg prozora ili okvira ili se može navesti novi naziv pod kojim će se otvoriti novi prozor. Postoje četiri rezervirana imena koja izvode posebne akcije kada su navedena. Ova imena počinju podvlakom (_): "_blank", "_self", "_parent" i "_top". Svako drugo ime koje počinje podvlakom nije važeće.
TARGET="_prazno" - osigurava učitavanje dokumenta u novi prozor. Ovaj prozor neće imati naziv, pa stoga neće biti moguće učitati drugi dokument u njega.
TARGET="_sebe" - dokument će se učitati u trenutni okvir (ili prozor). Ovaj bi se unos trebao koristiti za zaobilaženje zadane vrijednosti navedene oznakom .
TARGET="_top" - uzrokuje učitavanje dokumenta u cijeli prozor. Ako je dokument već u punom prozoru, ta vrijednost ima isti učinak kao"_sebe".
TARGET="_roditelj" - uzrokuje učitavanje dokumenta u područje koje zauzima nadređeni okvir trenutnog okvira. Ako ne postoji roditeljski okvir, ova vrijednost parametra ima isti učinak kao"_vrh" .
Bilješka
Neki HTML izvori pogrešno navode da ako okvir nema roditelja, vrijednost "_parent" je ekvivalentna "_self". Ova izjava nije uvijek točna.
Upozorenje
Rezervirana imena okvira "_blank", "_self", "_parent" i "_top" moraju biti napisana malim latiničnim slovima. Imajte na umu da je takva zahtjevnost jedinstvena za Netscape. Microsoft Internet Explorer ispravno prepoznaje rezervirana imena napisana u svakom slučaju.
Evo primjera interakcije između okvira i pojedinačnih prozora preglednika. Razmotrite sljedeći HTML kod:
Korištenje okvira
Ovaj HTML dokument opisuje strukturu koja se sastoji od tri okvira pod nazivom "A", "B" i "C". Imena okvira bit će potrebna kasnije za organiziranje veza između okvira. Imajte na umu da okvir pod nazivom "A" u u ovom primjeru neće biti referenci, pa je moglo ostati i bez imena. Kada učitate gornji dokument u preglednik, okviri će prikazati informacije sadržane u datotekama identificiranim SRC parametrom. Okvir "A" će primiti sadržaj datoteke frame_a.htm, a preostala dva okvira će dobiti podatke iz datoteke empty.htm, koja nema podataka za prikaz. Još jednom vas podsjetimo da HTML dokument koji opisuje strukturu okvira nema odjeljak
Ovaj dokument je potpuni HTML dokument s odjeljcima
I i zauzvrat ima veze na datoteku pod nazivom test.htm, koja se nalazi u istom direktoriju kao i datoteka frame_a.htm.
Tekst test.htm datoteke je krajnje jednostavan:
Ispitni dokument
Testni tekst dokumenta
Datoteka frame_a.htm, čiji je sadržaj učitan u okvir "A", ima šest veza na istu datoteku test.htm s različitim vrijednostima za parametar TARGET.
Razmotrimo radnje koje će se dogoditi prilikom implementacije ovih veza. Prva poveznica s vrijednošću TARGET="B" će učitati datoteku test.htm u okvir pod nazivom "in". Imajte na umu da će nakon implementacije bilo koje od šest poveznica, Netscape preglednik automatski obojiti svih šest u drugu boju, budući da pokazuju na istu datoteku. Microsoft Internet Explorer označava samo veze koje su stvarno implementirane.
Druga poveznica će učiniti isto za okvir "C". Inicijalno u okvirima “B” i “C” nema ničega (točnije, učitava se sadržaj prazne datoteke empty.htm). Implementacija prve i druge poveznice ispunit će ove okvire.
Treća poveznica s vrijednošću TARGET=MD" dovest će do formiranja novog prozora preglednika s nazivom "D" i učitavanja datoteke test.htm u njega. Imajte na umu da se oblik pisanja ove veze ne razlikuje od prvog 2. Razlika je u tome što su u prva dva slučaja dane reference na postojeće okvire, čija su imena definirana u datoteci sa strukturom okvira, au ovom slučaju referenca je dana na nepostojeći objekt. ova referenca napravljena barem jednom, tada će se kreirati prozor s imenom "D" i ponovnim klikom na poveznicu samo će se ponovno učitati podaci u sada postojeći prozor "D". Naravno, korisnik ga može zatvoriti u bilo kojem trenutku vrijeme i ponovno ga kreirajte odabirom ove poveznice. Slika 5.7 prikazuje situaciju nakon što su prve tri veze implementirane. Podsjetimo se da mjesto i veličinu prozora na ekranu određuje korisnik.
Riža. 5. 7
.
Situacija dobivena nakon uzastopne implementacije prve tri veze dostupne u lijevom okviru
Peta veza s vrijednošću TARGET="_top" će učitati dokument u cijelom prozoru umjesto cijele strukture okvira. S ovom vrijednošću parametra TARGET ne stvara se novi prozor. Povratak na strukturu okvira moguć je klikom na gumb Natrag.
Bilješka
Nazivi okvira ili prozora preglednika ne smiju se brkati s nazivima preuzetih dokumenata. Nazivi okvira nisu vidljivi nigdje kada se gledaju; oni su potrebni samo za organizaciju interakcije i stoga su skriveni od korisnika. Možete ih vidjeti samo kada gledate izvorni tekst HTML datoteka.
Savjet
Podsjetimo, nazivi preuzetih dokumenata navedeni su oznakom . Ako je dokument učitan u punom prozoru, njegov naziv se prikazuje na samom vrhu prozora preglednika. Ako je dokument učitan u okvir, tada se njegov naziv nigdje ne prikazuje, a naslov dokumenta koji sadrži opis strukture okvira dokumenta i dalje će se nalaziti u gornjem dijelu prozora. Stoga nazivi dokumenata namijenjenih za gledanje u okvirima nisu jako važni. Na primjer, na sl. 5.7 isti dokument se učitava u okvire “B” i “C”, kao iu poseban prozor pod nazivom “D”, dok je naziv dokumenta vidljiv samo u prozoru “D”. Međutim, teško je preporučljivo izostaviti nazive dokumenata učitanih u okvire, jer se oni mogu pojaviti, na primjer, u popisu knjižnih oznaka prilikom stvaranja knjižne oznake za dokument koji se nalazi u okviru ili na popisu pregledanih dokumenata.
Pogledajmo još jedan zanimljiv primjer organiziranja interakcije između okvira i prozora preglednika. Neka to bude tekst glavnog učitanog HTML dokumenta:
Korištenje imena prozora
Dokument sa strukturom okvira u novi prozorА>
Korištenje okvira
Imajte na umu da ako je glavni dokument standardni HTML dokument, tada datoteka frame.htm učitana s poveznice iz glavnog dokumenta sadrži strukturu okvira i zauzvrat povezuje s datotekom empty.htm.
Nakon učitavanja glavnog dokumenta, prozor preglednika će izgledati kao što je prikazano na sl. 5.8 (lijevi prozor). Cijeli dokument sastoji se od dvije poveznice. Slijedimo prvi link. Stvorit će se novi prozor s nazivom “D” u kojem će se pojaviti tekst datoteke test.htm (Sl. 5.8, desni prozor). Ponavljanje ove veze samo će ponovno učitati podatke u prozoru "D".
Riža. 5.8. Primjer interakcijskih okvirnih prozora
Slijedimo drugi link. Formirat će se novi prozor bez imena u koji će se učitati datoteka frame.htm, definirajući dva okvira s nazivima “C” i “D” (Sl. 5.8, donji prozor). U oba okvira nema ništa (točnije učitava se prazan dokument empty.htm). Primijetite da sada postoji otvoren prozor pod nazivom "D" i prozor s okvirima, od kojih se jedan također zove "D". Slijedimo ponovno prvu poveznicu. Za razliku od prvog slučaja, podaci se neće učitavati u prozor "D", već u okvir pod nazivom "D". Rezultat svih opisanih radnji prikazan je na sl. 5.8.
Bilješka
Izgled prozora koji se otvaraju i njihov sadržaj ponekad čak može ovisiti o redoslijedu radnji korisnika. Rad s dokumentima čije je ponašanje teško predvidjeti obično izaziva opravdanu iritaciju kod korisnika i ukazuje na nedostatak promišljenosti u strukturi podataka od strane programera.
Ako promijenite redoslijed radnji, tj. prvo izvršite drugu vezu, a zatim prvu, tada se prozor pod nazivom “D” uopće neće pojaviti! To će se dogoditi jer će se nakon implementacije druge poveznice stvoriti okvir pod nazivom "D" i neće biti potrebno otvarati novi prozor za prvu vezu.
Ovaj primjer uopće nije uzor, već samo pokazuje moguću složenost organizacije interakcije. Naprotiv, trebali biste pokušati nepotrebno komplicirati organizaciju podataka, a još manje stvarati situacije u kojima se rezultat mijenja ovisno o redoslijedu radnji korisnika.
Savjet
Izbjegavajte kolizije u nazivima okvira i prozora. Iako formalno nije zabranjeno imati okvire s istim imenima, to može dovesti do zabune.
Upozorenje
Nazivi okvira i prozora uspoređuju se na način koji razlikuje velika i mala slova. Tako će se, na primjer, okviri pod nazivom "frame_1" i "Frame_1" razlikovati.
Primjeri složenijih interakcija između okvira
Prilično jednostavni tipični primjeri interakcije između okvira razmatrani su gore. Razmatrani su zadaci izrade novih prozora, zamjena sadržaja pojedinačnih okvira, kao i prikaz dokumenta u punom prozoru uz uništavanje cijele strukture okvira. Dati su primjeri korištenja prilagođenih naziva okvira, kao i rezerviranih naziva "_blank", "_self" i "_top". Korištenje zadnjeg rezerviranog imena "_parent" je složenije i bit će opisano u nastavku.
Ovaj odjeljak će razmotriti složenije opcije za interakciju između okvira. Posebno će se implementirati zamjena sadržaja nekoliko susjednih okvira.
Jedna od najčešćih upotreba okvira, koja je već spomenuta u ovom poglavlju, je slučaj dva okvira, od kojih jedan sadrži popis poveznica, a drugi sadrži same dokumente (slika 5.1).
Pokušajmo proširiti formulaciju problema. Pretpostavimo da na ekranu želite prikazati sadržaj prilično velikog dokumenta koji se sastoji od poglavlja podijeljenih u odjeljke. Tipičan primjer je stručna literatura o određenoj temi. Opišimo željeni prikaz takvog dokumenta na ekranu. Podijelimo ekran na tri okvira, od kojih će jedan sadržavati popis poglavlja knjige, drugi - popis odjeljaka odabranog poglavlja, a treći - tekst odabranog odjeljka. Kada odaberete vezu u drugom okviru, sadržaj trećeg okvira trebao bi se promijeniti. Provedba ovog zahtjeva je trivijalna. Kada odaberete vezu u prvom okviru, sadržaj drugog i trećeg okvira trebao bi se promijeniti istovremeno. Na prvi pogled, implementacija ovog zadatka u HTML-u je nemoguća (bez korištenja programiranja u JavaScript-u ili drugima), budući da se prilikom izvršavanja veze učitava samo jedan dokument, a ne dva ili više. Ipak, rješenje ovog problema je sasvim moguće.
Pokažimo moguće rješenje takvog problema na jednostavnom primjeru. Pretpostavimo da želite prikazati tri okvira na ekranu i u njih učitati neke dokumente. Postavimo zadatak stvaranja poveznica u svakom od tih okvira, čijom se implementacijom, na primjer, zamijenio sadržaj dvaju okvira. Neka prvi okvir zauzima 50% širine prozora i 100% njegove visine i postavite ga na lijevu stranu prozora. Desna polovica prozora također je horizontalno podijeljena na pola i sadrži dva druga okvira. Ova struktura je opisana sljedećim kodom:
Pomoću ovog HTML koda stvorit će se potrebna struktura, ali je nemoguće riješiti problem. Potrebno je ukloniti ugniježđenu strukturu
u zasebnu datoteku, au tom HTML kodu opišite okvir koji se odnosi na kreiranu datoteku. Tada će tekst izvornog dokumenta izgledati ovako:
Primjer interakcije između okvira
Stvorena datoteka s ugniježđenom strukturom
ima naziv 1_2.htm i sadrži sljedeći kod:
1-2
Na prvi pogled nije se baš ništa promijenilo. U oba slučaja postoje tri okvira u koje se redom učitavaju dokumenti left.htm, 1.htm i 2.htm. Međutim, kada su okviri u interakciji, razlika će se pojaviti. Ako u prvom slučaju niti jedan od okvira nema nadređeni okvir, tada će u drugom slučaju za dva okvira roditelj biti okvir pod nazivom "Dva_okvira". Stoga, ako u bilo kojem od dva okvira primijenite vezu s vrijednošću parametra TARGET jednakom "_parent", tada će rezultat biti drugačiji za prvi i drugi slučaj. U prvom slučaju, implementacija takve veze će učitati dokument u puni prozor, zamjenjujući postojeću strukturu okvira. Ovdje dolazi do izražaja svojstvo vrijednosti "_parent", koje se ponaša kao "_top" u nedostatku nadređenog okvira. U drugom slučaju, okvir pod nazivom "Two_Frames" će biti zamijenjen, koji zauzima desnu polovicu ekrana i u biti se sastoji od dva okvira.
Drugi slučaj se formalno razlikuje od prvog također po prisutnosti okvira pod nazivom "Dva_okvira" na koji se mogu uputiti. Upravo će nam ova značajka omogućiti da riješimo problem.
Evo sadržaja lijeve.htm datoteke, koja je inicijalno učitana u prvi od razmatranih okvira:
Lijevi okvir
dokumenti u dva okvira koji se nalaze na desnoj strani prozora.
Imajte na umu da se tekst datoteka 1_2.htm i 2_1.htm razlikuje samo u redoslijedu poveznica na datoteke 1.htm i 2.htm.
Razmotrimo sada konstrukciju dokumenta učitanog u lijevi okvir. Sadrži dvije veze s parametrom TARGET="Two_Frames". Implementacija bilo koje od ovih veza stvara dva okvira na mjestu okvira “Two_Frames” (ovo je desna polovica ekrana), učitavajući dokumente 1.htm i 2.htm jednim ili drugim redoslijedom. Tako se kod odabira opcije 1-2 dokument 1.htm učitava u gornji desni okvir, a 2.htm u donji desni okvir. Kada odaberete opciju 2-1, redoslijed dokumenata se mijenja. Kao rezultat toga, naizmjenično odabiranje opcija stvara dojam da dokumenti u dva okvira mijenjaju mjesta. To je upravo učinak koji smo željeli postići (slika 5.9).
Za opisani primjer nije bitan sadržaj dokumenata 1.htm i 2.htm. No, primjerice, umjesto trivijalnih dokumenata, izradit ćemo dokumente s poveznicama koje provode iste radnje.
Tekst datoteke 1.htm:
Dokument 1
Dokument 1
Opcija 1 -2
Opcija 2-1
Datoteka 2.htm razlikuje se od 1.htm samo u zaglavlju.
Postoje dvije veze s vrijednošću TARGET="_parent" koje upućuju na nadređeni okvir. Ove veze također mogu biti napisane s eksplicitnim nazivom nadređenog okvira, tj. TARGET="Two_Frames", ali korištenje implicitnog naziva obično je praktičnije. Na primjer, ako izuzmete veze iz lijevog okvira (dokument left.htm), mogli biste izostaviti naziv okvira "Dva_okvira" naveden pri opisu strukture glavnog okvira. Ovo bi stvorilo okvir bez imena, ali bi veze iz dokumenata 1.htm i 2.htm s TARGET="_parent" i dalje radile ispravno.
Savjet
Kad god je moguće, koristite implicitno imenovanje okvira. Na primjer, "parent", "top", "self" umjesto navođenja određenih imena.
Riža. 5.9. Međusobni okviri prozora s učinkom promjene učitanih dokumenata
Razlika između okvira i prozora preglednika
Kada radite s okvirima, postavlja se pitanje temeljne razlike između organiziranja strukture okvira prozora preglednika i stvaranja više prozora. Na prvi pogled moglo bi se činiti da biste mogli proći s mogućnošću stvaranja više prozora, budući da je rad s prozorima i okvirima vrlo sličan. Svaki okvir zahtijeva učitavanje zasebnog dokumenta, ima mogućnost neovisnog pomicanja sadržaja i može se mijenjati naredbama iz drugih okvira. Ova svojstva okvira slična su onima prozora preglednika. Tabelarnom organizacijom podataka nemoguće je postići takvu slobodu djelovanja.
Međutim, postoji značajna razlika između okvira i prozora. S organizacijom okvira, podjelu područja gledanja u okvire izvodi sam HTML dokument, navodeći dimenzije i njihov položaj. Prilikom pregledavanja, korisnik može promijeniti veličinu okvira, osim ako to nije zabranjeno u opisu njihove strukture. Raspored prozora određen je općim pravilima rada sa sustavom Windows - korisnik može proširiti bilo koji prozor na cijeli zaslon, minimizirati ga u ikonu ili proizvoljno postaviti njegovu veličinu i mjesto. Prozori se, za razliku od okvira, mogu preklapati. Ovo bogatstvo izbora ima svoju lošu stranu - morate svaki put ručno pozicionirati prozore na zaslonu i promijeniti im veličinu kako biste postigli optimalnu opciju gledanja. U slučaju okvira, optimalni omjer veličina obično određuje programer u opisu strukture okvira i često ga nije potrebno mijenjati.
Savjet
Iako okviri ne mogu pružiti sve mogućnosti za rad s pojedinačnim prozorima, njihova će racionalna organizacija stvoriti maksimalnu pogodnost za korisnika.
Rad s prozorima ima i druge nedostatke. Stvaranje svakog prozora zahtijeva puno memorije. U Netscapeu, svaki prozor je u biti još jedna kopija preglednika, zajedno s punim skupom gumba i izbornika. Ista je situacija tipična za Microsoft Internet Explorer.
Imajte na umu da se organizacija pojedinačnih prozora u preglednicima razlikuje. Stvaranje novog prozora s dokumentom rezultira pojavom zasebnog zadatka u Windows sustavu, kao što možete vidjeti kada pregledavate popis pokrenutih zadataka. Stoga se prebacivanje između prozora može učiniti na isti način kao i prebacivanje između različitih zadataka, na primjer pritiskom na tipkovni prečac +.
Mnoge popularne Windows aplikacije imaju koncept prozora dokumenta. Primjeri uključuju program za obradu teksta Microsoft Word ili grafički program Paint Shop Pro i mnoge druge. Svaka od ovih aplikacija omogućuje istovremenu upotrebu nekoliko prozora s podacima i, u pravilu, postoji izbornik Prozor, koji daje popis prozora i daje mogućnost prebacivanja između njih. Stvaranje novog prozora u takvim aplikacijama obično se događa prilikom otvaranja postojeće datoteke ili stvaranja nove. Međutim, u tim programima, kada se stvori novi prozor, ne stvara se novi pokrenuti zadatak.
Netscape također ima izbornik Prozor koji ispisuje postojeće prozore. (U verzijama Netscape 4.x ovu značajku pruža stavka Window na izborniku Communicator.) Vratimo se na sl. 5.8. U ovom primjeru, tri prozora su otvorena u isto vrijeme, od kojih je svaki u biti zaseban preglednik. Međutim, za korisnika su to svi prozori istog preglednika koji mogu međusobno komunicirati. U bilo kojem od ovih prozora možete otvoriti izbornik Prozor i vidjeti popis od tri prozora. Na sl. Slika 5.10 prikazuje situaciju kada je to učinjeno za donji prozor.
Riža. 5.10. Otvaranje okvirnih prozora u pregledniku Netscape
Svaki prozor se može zasebno zatvoriti (naredbom Zatvori iz izbornika Datoteka). Da biste završili rad s preglednikom u bilo kojem prozoru, možete otvoriti izbornik Datoteka i odabrati Izlaz (Slika 5.11).
Ako je bilo otvoreno nekoliko prozora, svi će se zatvoriti, ali će se prije toga pojaviti poruka upozorenja (Slika 5.12).
Svaki prozor preglednika može imati vlastite postavke (iako ne sve). Pogledajte sl. 5.11. Dva su prozora otvorena, od kojih je jedan podijeljen na tri okvira. Isti dokument se učitava u dva od tri okvira, kao iu zasebnom prozoru. Mogućnost neovisne konfiguracije parametara svakog prozora omogućuje vam različit prikaz istog dokumenta. U gornjem primjeru, veličina fonta dokumenta u jednom prozoru je veća nego u drugom. Taj se učinak postiže postavljanjem različitih kodiranja za svaki prozor (stavka Kodiranje dokumenta u izborniku Mogućnosti ili stavka Skup znakova u izborniku Pogled za verziju 4.x), pri čemu oba kodiranja koriste isti font, ali različitih veličina. Promjena bilo koje stavke u izborniku General Preferences utječe na sve prozore.
Riža. 5.11. Zatvaranje preglednika Netscape
Riža. 5.12. Upozorenje o zatvaranju prozora u pregledniku Netscape
Dodatne značajke preglednika
Sve gore navedene oznake opisa okvira s pripadajućim parametrima implementirane su gotovo identično u preglednicima Netscape i Microsoft Internet Explorer, no svaki od ovih preglednika omogućuje dodatno korištenje vlastitih jedinstvenih oznaka ili parametara.
Značajke preglednika Netscape
Netscape preglednik, počevši od verzije 3.0, dopušta tri dodatne opcije: BORDER, FRAMEBORDER i BORDERCOLOR. Parametar BORDER primjenjuje se samo na oznaku
. Vrijednost parametra BORDER određuje debljinu granica između okvira u pikselima.
Parametar FRAMEBORDER može se koristiti iu oznaci
, i u oznaci i utvrđuje prisutnost okvira između okvira. Ovaj parametar može biti Da ili NE. Ako je parametar zapisan u oznaci , tada se njegov učinak primjenjuje na sve okvire u ovoj grupi. Za pojedinačni okvir, vrijednost se može nadjačati. Zadana vrijednost je Da.
Imajte na umu da parametri BORDER i FRAMEBORDER rade neovisno jedan o drugome. Na primjer, ako je FRAMEBORDER postavljen na NO, a BORDER na vrijednost različitu od nule, tada granica između okvira neće biti nacrtana, ali će prostor određen vrijednošću parametra BORDER i dalje biti dodijeljen za nju.
Parametar BORDERCOLOR može se koristiti kao u oznaci
, i u oznaci i definira boju obruba, koja se može odrediti imenom boje ili njezinim heksadecimalnim prikazom.
Evo primjera:
Prvi redak ovog HTML koda navodi tri okvira, s razmakom između njih za okvir debljine 10 piksela (Slika 5.13).
Riža. 5.13. Crtanje granica između okvira u pregledniku Netscape
Između prozora okvira "A" i "B" ne iscrtava se okvir zbog vrijednosti NO parametra FRAMEBORDER, ali je za okvir definirana crvena boja. Za posljednji okvir "c", vrijednost FRAMEBORDER postavljena je na Da i poništava vrijednost postavljenu u prvom retku. Dakle, između okvira pod nazivom “B” i “C” i dalje će se iscrtavati crveni okvir debljine 10 piksela.
Bilješka
Ako granice između okvira nisu iscrtane, Netscape preglednik neće dopustiti promjenu veličine okvira povlačenjem mišem, čak i bez parametra NORESIZE. Za Microsoft Internet Explorer situacija je drugačija.
Imajte na umu da se okviri bez obruba ne koriste vrlo rijetko. Treba imati na umu da nedostatak okvira ne sprječava pojavu traka za pomicanje (slika 5.14).
Riža. 5.14. Trake za pomicanje u okviru bez obruba
Značajke preglednika Microsoft Internet Explorer
Preglednik Microsoft Internet Explorer omogućuje korištenje parametra FRAMEBORDER za iste svrhe kao što je gore opisano, ali ne dopušta postavljanje boje i debljine okvira. Međutim, samo se numerička vrijednost "O" može koristiti kao vrijednost za parametar FRAMEBORDER za otkazivanje crtanja okvira ili numerička vrijednost različita od nule za crtanje okvira.
Razlika u pravilima za postavljanje vrijednosti parametra FRAMEBORDER za različite preglednike vrlo je neugodna. Pokušajte, na primjer, postaviti FRAMEBORDER=Da. Ovaj unos je ispravan za Netscape, ali za Microsoft Internet Explorer rezultirat će nedostatkom okvira. Prethodni primjer (Sl. 5.13) kada se gleda u Microsoft Internet Exploreru bit će prikazan bez okvira.
Savjet
Preporučljivo je uvijek pisati vrijednost parametra FRAMEBORDER u numeričkom obliku, na primjer, FRAMEBORDER=0. Ovo slijedi pravila za pisanje parametra za Microsoft Internet Explorer, ali krši pravila za Netscape (iako ga potonji ispravno percipira).
Bilješka
Ako okviri između okvira nisu nacrtani, tada će preglednik Microsoft Internet Explorer (za razliku od Netscapea), u nedostatku parametra NORESIZE, omogućiti promjenu veličine okvira "dodirom" povlačenjem okvira mišem. Mjesto gdje bi trebao biti okvir možete pronaći promjenom oblika pokazivača miša.
Preglednik Microsoft Internet Explorer dopušta korištenje dodatnog FRAMESPACING parametra upisanog u oznaku
, čija vrijednost određuje broj piksela između okvira koje treba ostaviti praznima.
Navedimo primjer čiji je rezultat prikaza prikazan na sl. 5.15.
Promjena udaljenosti između okvira
Riža. 5.15. Prazan prostor između okvira u Microsoft Internet Exploreru
Bilješka
Nažalost, mnogi opisi HTML jezika pogrešno navode da se parametar FRAMESPACING mora koristiti u oznaci . Microsoft Internet Explorer dopušta samo korištenje ovog parametra u oznaci .
Plutajući okviri
Preglednik Microsoft Internet Explorer omogućuje korištenje jedinstvene oznake
Osim toga, sljedeći dodatni parametri mogu se koristiti za postavljanje položaja i veličine plutajućeg okvira u dokumentu: WIDTH, HEIGHT, HSPACE, VSPACE, ALIGN. Njihova svrha i redoslijed korištenja podudaraju se s odgovarajućim parametrima za ugrađene slike, koji su navedeni oznakom .
Evo primjera korištenja plutajućih okvira:
Korištenje plutajućih okvira
Primjer korištenja koncepta plutajućih okvira
СЕМТЕК>
Vaš preglednik ne dopušta prikaz plutajućih okvira
Microsoft Internet Explorer prvi je preglednik (i za sada jedini) koji podržava takozvane "plutajuće" okvire.
Ti se okviri mogu postaviti bilo gdje na zaslonu, baš kao i grafike i tablice.
Okvir s desne strane ovog teksta postavlja se na stranicu pomoću posebne oznake . Prilikom izrade okvira navedeno je desno poravnanje.
Rezultat prikazivanja ovog primjera u pregledniku Microsoft Internet Explorer prikazan je na sl. 5.16. Preglednici koji ne podržavaju koncept plutajućih okvira će, za ovaj primjer, umjesto prikaza sadržaja dokumenta float.htm prikazati tekst "Vaš preglednik ne dopušta prikaz plutajućih okvira."
Riža. 5.16. Plutajući okvir u Microsoft Internet Exploreru
Imajte na umu da je koncept plutajućih okvira po ideologiji sličan ugrađenim slikama ili tablicama. Ovdje je drugi HTML dokument potpuno ugrađen na željeno mjesto u HTML dokumentu.
Savjet
Trenutačno je korištenje plutajućih okvira ograničeno na jedan preglednik - Microsoft Internet Explorer verzija 3.0 i novija. Imajte na umu da korisnici drugih preglednika (osobito Netscape) neće moći vidjeti sadržaj iframeova.
Alati za izradu dokumenata koji sadrže okvire
HTML dokument koji sadrži okvire, kao i svaki drugi dokument, može se izraditi ili urediti ručno pomoću bilo kojeg dostupnog uređivača teksta. Većina specijaliziranih HTML uređivača ili nema mogućnosti vizualnog uokvirivanja ili ima vrlo ograničene mogućnosti. Postoji nekoliko posebnih urednika koji su usmjereni na stvaranje okvira. Ukratko ćemo opisati mogućnosti nekih od njih.
FrameGang uređivač okvira
Jedan od takvih uređivača je uslužni program FrameGang koji je razvila australska tvrtka Sausage Software, poznatija po popularnom HTML editoru HotDog.
Informacije o ovom softverskom proizvodu mogu se dobiti na http://www.sausage.com, kao i iz kolekcije softverskih proizvoda za Internet (at http://www.tucows.com ili bilo koji drugi od nekoliko desetaka zrcalnih poslužitelja razasutih diljem svijeta).
Uslužni program FrameGang dodatak je bilo kojem HTML uređivaču ili običnom uređivaču teksta koji radi u Windows okruženju, a koji vam omogućuje vizualno dizajniranje potrebne strukture okvira i potom generiranje odgovarajućeg HTML koda. Rezultirajući HTML kod može se prenijeti u HTML uređivač putem Windows međuspremnika (Clipboard). Program FrameGang omogućit će vam brzu izgradnju željene strukture okvira.
Pogledajmo mogućnosti programa. Nakon instaliranja ovog programa u sustavu Windows i njegovog pokretanja, od vas se traži da odaberete jednu od dvije moguće strukture okvira prve (gornje) razine - stupčasti raspored okvira (Columns) ili po redovima (Rows), te također odredite njihov broj. U budućnosti, svaki od okvira prve razine može se, ako je potrebno, podijeliti u nekoliko okvira druge razine. Veći broj razina okvira nije predviđen, ali to nije značajno ograničenje jer se u praksi rijetko koristi više od dvije razine.
Kao primjer odaberimo četiri okvira raspoređena u stupce. Zatim biste trebali stvoriti strukturu okvira druge razine, što se radi dijeljenjem postojećih okvira u suprotnom smjeru. Za ovaj primjer, okviri se mogu podijeliti samo horizontalno. Stvaranje okvira druge razine izvodi se u stavci izbornika Dodaj, čijom implementacijom se dodaje sljedeći okvir trenutnom.
Imajte na umu da smiješne slike u okvirima nemaju nikakvo značenje i služe samo za popunjavanje praznog prostora. Njihovo crtanje može se poništiti u izborniku Opcije. Također napominjemo da je sam naziv proizvođača (sausage - kobasice) i naziv nekih njegovih softverskih proizvoda (HotDog - ne treba prijevod) odredio stil sučelja ovog paketa - u mnogim stavkama izbornika nalazi se slika kobasica .
Nakon definiranja strukture okvira, potrebno je postaviti njihove veličine. To se postiže jednostavnim pomicanjem obruba okvira mišem na isti način kao što se radi za promjenu veličine Windows prozora. Postavljene dimenzije za trenutni okvir prikazane su u postocima u prozorima pod nazivom Širina i Visina. Ako ne trebate postaviti veličinu okvira u postocima, već u pikselima ili relativnim jedinicama, morate ručno promijeniti dobiveni HTML kod izvan programa FrameGang.
Zatim, za svaki okvir trebate postaviti njegov naziv (Name), koji se može izostaviti, URL dokumenta koji je inicijalno učitan u ovaj okvir (URL okvira), te također odabrati vrijednost parametra Resizeable Frame Border i parametra za pomicanje za sadržaj okvira (Frame Scrolling).
U bilo kojem trenutku možete vidjeti strukturu okvira koja se stvara u odabranom vanjskom pregledniku bez napuštanja programa FrameGang. Za to se koristi gumb Pregled. Postavljanje naziva preglednika vrši se u izborniku Opcije. Nakon postavljanja svih parametara, trebate generirati HTML kod koji odgovara odabranoj strukturi okvira, a koji će biti zapisan u međuspremnik Windows (gumb HTML Compile). Rezultirajući kod može se zalijepiti iz međuspremnika na željeno mjesto u HTML datoteci kada radite u bilo kojem uređivaču.
Gumbi Spremi i Otvori datoteku omogućuju vam spremanje i čitanje datoteke samo u posebnom kodiranju specifičnom za program FrameGang i nije namijenjeno za bilo koju drugu upotrebu.
Ispod je HTML kod koji je generirao FrameGang za opisani primjer:
Da biste dobili ispravan HTML dokument, dovoljno je staviti dobiveni kod između oznaka I. Možete dodati odjeljak zaglavlja dokumenta
, u kojem definirati potrebne podatke, npr. naslov dokumenta (ne zaboravite da je naslov dokumenta ispisan između oznaka I). Imajte na umu da moderni preglednici mogu ispravno raditi čak i ako neke od potrebnih oznaka nedostaju. Ako se gornji HTML kod spremi kao datoteka s odgovarajućom ekstenzijom, čak i bez dodavanja oznaka, tada će i Netscape Navigator i Microsoft Internet Explorer moći ispravno prikazati dokument.
Program FrameGang omogućuje vam vizualno oblikovanje okvira, prilično je zgodan i jednostavan za korištenje, ali nije bez nekih nedostataka. Konkretno, ne postoji način da odredite veličinu okvira upisivanjem potrebnih brojeva u prozore Širina i Visina, budući da oni prikazuju samo veličine postavljene prilikom pomicanja granica okvira mišem. Općeprihvaćeni parametri okvira MARGINWIDTH i MARGINHEIGHT nisu postavljeni. Ne postoji način za pisanje datoteke u tekstualnom formatu na disk, što onemogućuje korištenje ovog programa izvan mreže.
Frame-It uređivač okvira
Još jedan specijalizirani uređivač okvira je Frame-It, informacije o kojem se mogu pronaći na:
http://www.iinet.net.au/~bwh/frame-it.html
Rad s ovim programom na mnogo je načina sličan prethodnom. Prvo morate odrediti osnovnu strukturu okvira i njihov broj. Zatim se svaki okvir, ako je potrebno, dijeli na nekoliko, tvoreći strukture druge razine. Kao iu prethodnom programu, broj razina ugniježđivanja okvira ograničen je na dvije.
Za svaki okvir postavljaju se svi potrebni parametri popunjavanjem odgovarajućih polja. Za razliku od prethodnog programa, moguće je postaviti vrijednosti parametara MARGINWIDTH i MARGINHEIGHT. Osim toga, uvedena je zastavica Invisible Frame Borders, koja, kada je postavljena, generira sljedeći fragment koda:
FRAMEBORDER="NE" BORDER="0" FRAMESPACING="0".
Nakon postavljanja potrebnih parametara okvira, možete spremiti generirani HTML kod u datoteku ili ga zapisati u Windows međuspremnik. Generirani kod sadržavat će ne samo opis strukture okvira, već i početnu oznaku , kao i par oznaka I, između kojih su ispisane informacije, namijenjene preglednicima koji ne prikazuju okvire.
Za određeni primjer generira se sljedeći kod:
FRAMESACING="0">
s strukturom okvira
Ako u ovom primjeru poništite potvrdni okvir Invisible Frame Borders, generirani kod značajno će se promijeniti:
pomicanje=automatska veličina>
pomicanje=automatska veličina>
pomicanje=automatska veličina>
pomicanje=automatska veličina>
pomicanje=automatska veličina>
Vaš preglednik ne može prikazati dokumente
s strukturom okvira
Informacije o korištenju okvira na WWW
Za informacije o okvirima možete se obratiti na sljedeće adrese na WWW:
Kako umetnuti stranicu u HTML stranicu? Da biste to učinili, morate koristiti , koji stvara umetnuti okvir u trenutnom dokumentu koji prikazuje drugi HTML dokument.
Prikaz
Blok prikaza.
Primjer koda
Snažan, ali jednostavan za korištenje
U loša stara vremena bilo je mnogo web dizajna elementi koji kvare život svakom programeru. Gotovo su uvijek bili loš pristup dizajnu. Srećom, element je zastario u HTML5. Ali ili " inline okvir» je još uvijek dostupan. Hoće li biti zastario u sljedećoj verziji? Možda bismo to trebali izbjegavati? Postoji nekoliko valjanih upotreba ovog elementa prilikom izrade HTML stranice. Ali morate razumjeti što je to i kako radi kako biste izbjegli pogreške.
Sličnosti i razlike I
Oba ova elementa omogućuju vam stvaranje zasebnog HTML dokumenta. Poveznica na sadržaj dokumenta na koji upućuje trenutna web stranica navedena je u atributu src.
. . . . . .
Glavna razlika između I stvar je osigurava poštivanje pravila da je HTML dokument prioritet. Sadržaj se pojavljuje unutar elementa koji je dio trenutnog dokumenta. Kao primjer, razmotrite ovaj ugrađeni videozapis preuzet s YouTubea:
Videozapis se jasno nalazi na HTML stranici, a ne na zasebnoj ploči. element je razbio ovu paradigmu i dopustio dokumentu da vrši kontrolu nad prozorom preglednika, razbijajući ga na nekoliko malih panela (okvira), od kojih svaki prikazuje zasebni dokument. Sve druge razlike između i slijede iz ove osnovne razlike.
Nemojte prepravljati izglede temeljene na okvirima s iframeovima
Jednog dana ćete se možda suočiti sa zadatkom ažuriranja stare web stranice koja je napravljena pomoću okvira. Možda želite koristiti i fiksnu širinu rasporeda za ponovno stvaranje iste noćne more neovisnih panela i pragova. Ali nećete moći koristiti ciljni atribut za otvaranje veze u zasebnom okviru. Možete početi tražiti JavaScript rješenja. Molim te nemoj to raditi.
Dobre (i užasne) upotrebe
Postoji nekoliko valjanih slučajeva upotrebe za izradu HTML stranice:
ugrađivanje medijskih sadržaja trećih strana;
ugradnju vlastitog medijskog sadržaja kroz dokument na više platformi;
primjeri kodova za ugradnju;
ugrađivanje "apleta" trećih strana kao oblika plaćanja.
Evo nekoliko užasnih slučajeva upotrebe: :
FOTOGALERIJA;
forum ili chat.
Ako trebate ugraditi nezavisne, već postojeće HTML dokumente u trenutni, upotrijebite . Ako gradite sve od nule, nema razloga da dijelite dizajn stranice na više zasebnih dokumenata. Pogotovo ako zapravo nisu neovisni dijelovi sadržaja.
iframe atributi
Naziv atributa
Značenje
Opis
pješčanik
Dopusti-isto porijeklo Dopusti gornju navigaciju Dozvoljeni obrasci Allow-skripte
Postavlja brojna ograničenja za sadržaj učitan u okvir. Postavite prije kako napraviti HTML stranicu.
listanje
da ne auto
Određuje hoće li se pomicati u okviru ili ne. Zastarjelo u HTML5. Umjesto toga koristite CSS.
Ime
Ime
Određuje naziv okvira.
Uskladiti
lijevo desno gore srednje dno
Određuje poravnanje okvira u odnosu na okolne elemente. je zastario. Umjesto toga koristite CSS.
granica okvira
da (ili 1) Ne
Koristi se za omogućavanje prikaza obruba oko okvira. Zastarjelo u HTML5. Umjesto toga koristite CSS.
longdesc
URL
Koristi se za određivanje URL-a stranice koja sadrži dugi opis sadržaja okvira. je zastario. Umjesto toga koristite CSS.
marginwidth
piksela
Koristi se za kontrolu širine ispune od sadržaja do ruba okvira. je zastario. Umjesto toga koristite CSS.
src
URL
Određuje URL dokumenta za prikaz u IFRAME-u.
vspace
piksela
Postavlja okomite margine od okvira do okolnog sadržaja. je zastario. Umjesto toga koristite CSS.
širina
piksela %
Definira širinu okvira na HTML stranici.
Ova publikacija je prijevod članka “ “, koju je pripremio ljubazni projektni tim
Pozdrav, dragi čitatelji bloga. Danas ćemo govoriti o okvirima u HTML-u. Jasno je da ćemo krenuti od početka, odnosno o kakvoj se životinji radi. Također ćemo govoriti o sadašnjosti (Frame) i budućnosti (Iframe) ovih elemenata u trenutnoj verziji jezika za označavanje hiperteksta iu novom Html 5 standardu s .
Na kraju članka, nakon detaljnog opisa procesa stvaranja ugrađenih okvira i njihove klasične strukture u Html kodu (koji se već rijetko koristi), dotaknut ćemo se važnosti izrade web stranice na njima, te razmotriti moguće načine korištenja u sadašnjem vremenskom razdoblju na primjeru mog bloga.
Što je to i po čemu se iframe razlikuje od okvira?
Što je? Ispostavilo se da se mogu koristiti ne samo na web stranicama, već iu bilo kojoj aplikaciji za programe, ali se razlikuju po tome što će prozor web stranice ili aplikacije biti podijeljen u nekoliko područja, u svako od kojih se učitava zasebni dokument . Štoviše, ova područja okvira ponašaju se neovisno jedno o drugom.
Vjerojatno najočitiji primjer njihove upotrebe, s kojim ste se gotovo svi susreli, su takozvane datoteke pomoći koje imaju mnogi programi instalirani na vašem računalu.
Datoteka s izbornikom pomoći učitava se u lijevi prozor, a dokument koji odgovara odabranoj stavci izbornika prikazuje se u desnom prozoru. Važno je napomenuti da vam ova struktura omogućuje da ne učitate datoteku s izbornikom u lijevi prozor kada otvarate novi dokument u desnom. To je upravo ono od čega se sastoji Glavna prednost korištenja okvira u HTML-u.
Zapravo, sam naziv ovih elemenata treba tumačiti kao samostalan prozor. Uz pomoć okvira, imamo priliku podijeliti jedan veliki prozor u nekoliko fragmenata, koji zauzvrat mogu poslužiti kao prijemnici za zasebne dokumente neovisne jedan o drugom (stranice, tekstovi, slike, video zapisi itd.).
Kako se struktura okvira stvara u jeziku za označavanje hiperteksta? Ako govorimo o standardu Html 4.01 (prema klasifikaciji), koji je trenutno glavni, tada se za to koriste tri elementa - Frame, Frameset i Noframes.
Iframe - ugrađeni okvir u Html 5 standardu
Ako govorimo o standardu Html 5 (naša budućnost, čije neke elemente već podržavaju mnogi preglednici), tada neće biti oznaka Frame, Frameset i Noframes, kao ni klasične strukture okvira, već će postojati jedan single Iframe tag (embedded frame) , o čemu ćemo govoriti na početku, a zatim ćemo obratiti pozornost na klasičnu shemu iz verzije 4.01, koja je sada zapravo u uporabi.
Iframe, za razliku od klasika o kojima se govori u nastavku, ne zahtijeva zamjenu oznake Body oznakama Frameset. Oni. ova se oznaka može umetnuti na obične stranice, na primjer, unutar odlomka ili bilo gdje drugdje. U svojoj srži, ovaj je element vrlo sličan Img oznaci koju smo već razmotrili.
To je umetnuti element sa zamjenjivim sadržajem jer se ponaša točno kao umetnuti element, ali se prikazuje strani vanjski sadržaj. U HTML jeziku postoje samo četiri takva elementa – Img, Iframe, Object i Embed. Stoga naš junak podrazumijeva prisutnost vanjske datoteke koja će se učitati u područje čija je veličina postavljena pomoću atributa ove oznake.
Da. Iframe je element ponora u koji se učitava vanjski objekt (kao što je video). A da biste označili put do ove datoteke, koja bi se trebala učitati na stranici, upotrijebite poseban atribut Src. Ali za razliku od Img-a, Iframe element je uparen, tj. postoji i završna oznaka:
Ovaj primjer prikazuje izlaz na YouTube video stranici pomoću iframea. Kako bi se ograničilo područje okvira (prozora) gdje će se učitati vanjska datoteka, daju se atributi Širina i visina, čije su vrijednosti navedene u pikselima:
Oni. ova oznaka stvara područje u koje se učitava neki vanjski objekt (nije važno je li s vaše stranice ili s drugog izvora). Širina i visina područja specificirane su pomoću Width i Height, a atribut Src specificira put do ovog objekta.
Element Iframe naslijedio je sve te atribute od sličnih ugrađenih oznaka sa zamijenjenim sadržajem (kao što je Img već spomenut gore). Pa i atribute je uzeo sa slika Hspace i Vspace, koji vam omogućuju postavljanje uvlaka od obruba okvira do teksta koji ga okružuje.
Također je značajno da se poravnanje ugrađenog okvira provodi na potpuno isti način kao što smo mogli vidjeti prilikom proučavanja slika u Html-u - . Sve isto Uskladiti, ali za oznaku Iframe s mogućim vrijednostima Bottom, Top, Middle, Left i Right.
No, ovaj je element također preuzeo nekoliko atributa iz oznake Frame iz klasične strukture okvira, o čemu ćemo detaljnije govoriti u nastavku teksta. Ovi atributi uključuju Name, čija se vrijednost može koristiti kao vrijednost tako da se dokument koji vam je potreban kada kliknete na poveznicu otvori u prozoru ovog okvira (više pročitajte u nastavku).
Također u Iframe, atribut Frameborder migrirao je iz oznake Frame, koja ima samo dvije vrijednosti - ili 0 (okvir oko okvira se ne prikazuje) ili 1 (okvir je vidljiv). Zadana vrijednost je Frameborder=1, tako da ćete je ukloniti morat ćete unijeti Frameborder="0":
Atribut Pomicanje je također prenesen iz Okvira u ovaj element, koji ima zadanu vrijednost Automatski - trake za pomicanje u okviru će se pojaviti prema potrebi kada je sadržaj veći od veličine prozora namijenjenog za prikaz.
Pa, atributi Marginwidth i Marginheight također su premješteni iz elementa Frame. O njima će biti više riječi u nastavku teksta, ali ukratko – omogućuju postavljanje uvlake po širini i visini od rubova okvira do sadržaja koji se u njega postavlja.
Kao što sam već spomenuo, jasan primjer korištenja iframea je:
Umetanjem iframea izravno na web stranicu, primit ćete izlazni video s YouTubea. Zaključujemo da je ovaj element križanac inline elemenata sa zamijenjenim sadržajem i, zapravo, klasičnih okvira, o kojima ćemo sada govoriti.
Okviri temeljeni na oznakama Frame i Frameset – njihova struktura
Dakle, stvaranje klasične strukture okvira počinje činjenicom da upisujete Html kod umjesto oznake za otvaranje i zatvaranje Body, koja bi obično trebala biti prisutna u bilo kojem dokumentu, zamjenjujući je spremnikom temeljenim na elementima Skup okvira.
Temeljna točka je da se element Body ne može koristiti u ovom slučaju - bilo Body (za običan dokument) ili Frameset (kada se stvara struktura okvira dokumenta):
Svaki okvir koji stvaramo unutar glavnog kreiran je pomoću zasebnog elementa Okvir. Ovaj tag je jednostruk i u njemu postavljamo putanju do dokumenta koji će se učitati u ovaj prozor.
Treći element kojeg se još nismo dotakli je Bez okvira. Uparen je i omogućuje vam da unutra napišete neki tekst, koji će preglednik obraditi i prikazati na web stranici samo ako taj isti preglednik (ili drugi uređaj za prikaz) ne podržava okvire. To se može dogoditi, primjerice, ako koristite preglednik za mobilne uređaje.
Obično u Noframes dodaju ne samo informacije o trenutnoj situaciji s nemogućnošću obrade strukture okvira, već dodaju i mogućnost odlaska na druge stranice na kojima možete nastaviti raditi bez da ih koristite. Teško je reći bilo što drugo o njemu, pa idemo dalje.
Ispostavilo se da element Frameset, koji se koristi umjesto oznake Body, zauzima sav prostor dodijeljen za područje gledanja, a okviri će se stvoriti unutar ovog područja pomoću pojedinačnih elemenata Frame. S tim u vezi, postavlja se pitanje - kako podijeliti područje gledanja između zasebnih prozora ili, drugim riječima, kako odrediti veličinu svakog od njih.
To se postiže dodavanjem odgovarajućih atributa elementu Frameset. Ima ih dvoje - Stupci i redovi. Cols postavlja podjelu velikog prozora u okomite okvire ili stupce, a Rows vam omogućuje da ga podijelite u vodoravne prozore ili retke.
Stvaranje strukture na temelju skupa okvira i njegovih atributa Cols i Rows
Vrijednosti za Cols i Rows oznake Html Frameset su brojevi odvojeni zarezima (bez razmaka). Ovi brojevi postavljaju proporcije prozora koje želimo dobiti kao rezultat. Stoga, bez obzira koliko je brojeva odvojenih zarezima napisano u Cols ili Rows, broj okvira koji imamo bit će rezultat.
Na primjer, korištenjem ove oznake dobit ćemo tri okomita stupca čija će širina odgovarati omjeru 2:5:3.
Budući da smo postavili proporcije za tri okvira, morat ćemo uključiti tri elementa okvira između početnih i završnih oznaka Frameset, čak i bez navođenja dodatnih atributa:
Kao rezultat, naša struktura okvira, koja se sastoji od tri prazna prozora, izgledat će ovako:
U ovom primjeru postavljamo veličine prozora (Frame) pomoću postotaka koji se uzimaju iz širine područja za gledanje (to je slučaj kada se koriste Cols) ili iz njegove visine (Redovi). Prilikom promjene okvira za prikaz, postotni odnos između veličina okvira će se zadržati. Ali umjesto postotaka, možete koristiti i jednostavne brojeve koji će značiti. Ovdje, mislim, također ne bi trebalo biti poteškoća u razumijevanju.
Ali postoji i prilično neobična opcija u oznakama veličine, koja izgleda zvjezdica "*". Štoviše, to može biti samo "*" ili zvjezdica s brojem ispred, na primjer, "3*". Pametna stvar koja je vrlo slična postocima i znači da prostor za Frame podijelimo proporcionalno.
Pogledajmo primjer. Odaberimo sada podijeliti okvir za prikaz u vodoravne retke pomoću Redova:
Što ovaj unos znači? Cijelo područje gledanja koje nam je dostupno okomito bit će podijeljeno u tri linije. Visina prvog bit će snimljena na 200 piksela, druga - na 500, ali treći red će zauzeti sav preostali prostor u visini, jer Kao njegova veličina korišteno je "*".
Ono što je vrijedno pažnje je da vrijednosti "*" i "1*" znače istu stvar - sav preostali prostor dijelimo u jedan i ovaj dio dajemo ovom okviru (dobro, sav preostali prostor).
Ali pogledajte što se događa ako upotrijebite vrijednost "*" s brojem za razmjerno dijeljenje:
Što mislite koje će biti dimenzije okvira u ovom slučaju? Jasno je da će druga linija sigurno imati visinu od 100 piksela. Ali kako će preostali prostor biti podijeljen po visini između trećeg i prvog reda?
Prilično je lako izračunati - samo dodajte četiri (4*) dva (2*) i podijelite ovim nazivnikom (sjetite se razlomaka iz školskog programa) dva i četiri. Oni. dobivamo da će prvi stupac s okvirom zauzimati trećinu preostalog prostora po visini, a treći stupac dvije trećine. Ili, drugim riječima, treći će biti dvostruko veći od prvog:
Možete koristiti sva tri načina za određivanje veličine okvira prozora u jednom atributu, na primjer:
Kao rezultat toga, dobit ćemo prvi okvirni stupac širine deset posto cjelokupnog dostupnog područja, drugi - 100 piksela, a preostala tri imat će širinu u omjeru četiri, tri i dvije devetine od preostali prostor za širinu. Dakle, sve je jednostavno i jasno.
Ako želite podijeliti glavni prozor ne samo na vodoravne i okomite okvire, već, na primjer, na njihove kombinacije, tada možete koristiti ugniježđenu strukturu Frameset elemenata zasebno za stupce i zasebno za retke. Na primjer, da biste dobili strukturu prikazanu na slici ispod, dovoljno je koristiti sljedeću konstrukciju:
Oni. prvo koristimo “frameset cols=”20%,80%"“ da podijelimo sav raspoloživi prostor u dva okomita stupca i postavimo sadržaj desnog stupca s oznakom “frame", ali umjesto dodavanja elementa “frame” za lijevi stupac otvaramo novi “frameset rows=“10%,*”".
I uz pomoć njega dijelimo desni stupac u dva retka s okvirima, čiji se sadržaj postavlja pomoću dvije oznake "frame", nakon čega zatvaramo oba spremnika "frameset". Sve je jednostavno i logično.
Navedite stazu u atributu Src elementa Frame
Ali svi smo pričali o Frameset elementu i njegovim Cols i Rows atributima, uz pomoć kojih formiramo strukturu i postavljamo im veličinu. Sada shvatimo kako prikazati potrebne dokumente u potrebnim okvirima i kako konfigurirati interakciju između njihovih prozora.
Dakle, kako kontroliramo izgled prozora koje stvaramo? Sve to sadržano je u atributima oznake Frame. Prvi koji vrijedi spomenuti je Src. Već smo to vidjeli u oznaci Img kada smo gledali umetanje slika u Html kod. Njegova se bit nije promijenila i još uvijek vam omogućuje da odredite put do dokumenta koji treba učitati u okvir.
Put do dokumenta u Src može se navesti kao . Relativne staze obično se koriste za dokument koji se nalazi na vašem izvoru, ali trebat će vam apsolutne staze kada želite učitati dokument s druge stranice u okvirni prozor.
Ako atribut Src koji označava stazu do željenog dokumenta nije naveden, u prozor će se učitati prazan dokument. Osobno sam jednom napravio sličnu stvar za svoj blog (kao dodatni navigacijski element) i istovremeno stvorio zasebnu mapu za njega na hosting poslužitelju i tamo smjestio ne samo Html datoteku sa strukturom okvira (koju sam nazvao indeks .html), ali i sve učitano u razne prozore dokumenata, kao i slikovne datoteke koje su korištene kao pozadine.
Stoga mi je bilo najlakše koristiti relativne veze u atributu Src oznake Frame:
Ono što je vrijedno pažnje je da ako zamijenite sve veze dane u ovom kodu iz relativnih u apsolutne (kao što je https://site/navigator/joomla.html) i otvorite ovu datoteku u pregledniku, tada će se učitati dokumenti navedeni u okviru s mog poslužitelja i vidjet ćete sličnu sliku u svom pregledniku. Štoviše, nije važno gdje će se nalaziti vaša datoteka sa strukturom okvira (index.html) - na vašem računalu ili na hostingu.
U primjeru prikazanom na slici, stranica s određenim izbornikom, koji je obični izbornik, učitava se u prozor lijevog okvira. Ali ono što je važno nije kako je izbornik formiran, već što se događa nakon klika na bilo koju od njegovih poveznica.
Ako to učinite, sve će se dogoditi točno kako treba - dokument će se otvoriti u donjem desnom prozoru. Ali za ovo sam morao upotrijebiti jedan mali trik, jer se u zadanoj verziji dokument otvarao u cijeloj veličini prozora, zamjenjujući strukturu okvira, koja mi uopće nije trebala, jer je navigacijski izbornik u lijevom i gornjem okviru nestao.
Kako otvoriti dokumente preko poveznice u okviru
Dakle, kada smo govorili o hipervezama, spomenuli smo atribut oznake "A" kao Target=_blank. Sjećate li se čemu služi? Ispravno je otvoriti povezani dokument u novom prozoru. Prema zadanim postavkama trebao bi se otvoriti u istom prozoru, što je ekvivalentno target="_self".
Ali ovo su prilike Cilj nisu ograničeni. Ispada da tome možete dodati vrijednost kao naziv okvira, koji je unaprijed naveden u posebnom atributu Name oznake Frame. Tada se dokument putem ove veze neće otvoriti u istom prozoru, zauzimajući sav njegov prostor, već u okviru koji ste naveli. To je jasno? Ako ne u potpunosti, onda će to sada biti jasno kada analiziramo primjer.
Dakle, vratimo se našem primjeru prikazanom na gornjoj slici. Moramo otvoriti stranice pomoću poveznica iz lijevog prozora u donjem desnom (velikom) okviru. Stoga, prvo morate ovom velikom prozoru dati ime pomoću atributa Name u oznaci Frame.
Napravili su ga i nazvali "ktona". Sada možete sigurno otvoriti datoteku koja je učitana kao izbornik u lijevom prozoru i dodati atribut Target="ktona" svim A oznakama u njoj:
Povijest Joomle i komponente VirtueMart
Naravno, uz pomoć alata za pretraživanje i zamjenu neće biti teško staviti ga za sve hiperveze, ali zašto nepotrebno učitavati kod kada imamo sjajnu priliku koristiti posebna oznaka Base, što smo već spomenuli u istom članku o hipervezama, kada smo govorili o korištenju Target blank.
Dovoljno je samo postaviti osnovni element target="ktona" između početne i završne oznake Head i svih poveznica u HTML kôd ovog dokumenta će otvoriti nove stranice u navedenom okviru pod nazivom "ktona":
Usput, ako uzmemo u obzir moj nekada postojeći alat kao primjer, onda još trebamo paziti da sve poveznice iz gornjeg vodoravnog prozora otvaraju svoje stranice u lijevom okomitom okviru, koji mi služi kao lijevi izbornik. Što za to treba učiniti?
Pa, prvo, lijevom okomitom okviru trebate dati ime:
A u datoteci koja se učitava u gornji prozor (gor.html) trebate dodati osnovni element target="gor":
To je to, sada smo sve napravili kako treba. Svi dokumenti koji slijede veze iz gornjeg okvira otvaraju se u lijevom prozoru, a svi linkovi iz njega otvorit će dokumente u središnjem i najvećem okviru. Po mom mišljenju, sve je jednostavno i logično.
Atributi oznake okvira za prilagodbu izgleda prozora
Pogledajmo sada koji se atributi osim Src i Name mogu koristiti u oznaci Frame za prilagodbu izgleda okvira. Počnimo s Pomicanje. Pomoću njega možemo konfigurirati prikaz traka za pomicanje za svaki prozor vaše okvirne strukture zasebno.
Pomicanje ima zadanu vrijednost Auto - preglednik će automatski odlučiti, na temelju veličine dokumenta učitanog u okvir, hoće li prikazati traku za pomicanje ili ne. Ako dokument ne stane u potpunosti u prozor, pojavit će se traka za pomicanje koja vam omogućuje da ga pogledate do kraja.
Također možete koristiti vrijednosti Da (klizne trake u prozoru uvijek će biti prikazane, čak i ako dokument u potpunosti stane u njega) i Ne (klizne trake se uopće neće pojaviti, čak i ako dio dokumenta ne stane) kao vrijednosti za pomicanje.
U svom nekoć postojećem alatu koristio sam zadanu vrijednost Automatski i trake za pomicanje u okvirima su se pojavljivale po potrebi:
Sljedeći atribut Frame oznake je Noresize- je jednostruk (nema vrijednosti). Njegovom registracijom time ćete zabraniti promjenu njegove veličine, što se standardno radi jednostavnim povlačenjem ruba okvira mišem.
Kada kursor miša pomaknete na rub, vidjet ćete da će se kursor pretvoriti u dvosmjernu strelicu i sada klikom na lijevi gumb miša, možete pomicati granicu kako želite. Noresize nameće zabranu ove samovolje (kada pomaknete kursor miša na rub prozora, više nećete vidjeti dvosmjernu strelicu).
Drugi vizualni atribut je Granica okvira. Pomoću njega možete odrediti želite li nacrtati okvir (borbu) između okvira ili ne crtati. Frameborder može imati samo dvije moguće vrijednosti - ili 0 (ne crtaj okvir) ili 1 (prikaži rub). Zadana vrijednost je, naravno, 1.
Postoji jedna suptilnost. Ako želite ukloniti vidljivu granicu, morat ćete dodati Frameborder=0 svim Frame oznakama okvira između kojih želite ukloniti vidljivu granicu.
Pa, još uvijek moramo uzeti u obzir nekoliko atributa Frame oznake - Marginwidth i Marginheight, koji postavljaju padding u širinu (desno i lijevo) i visinu (gore i dolje) od rubova prozora do sadržaja učitanog u njega (broj označava broj piksela ispune):
Zašto ne možete napraviti web stranicu na okvirima?
Pogledajmo koji je temeljni nedostatak klasičnih struktura, koji u biti prestaje njihovoj upotrebi pri izradi web stranice. Sastoji se u tome što prema ovoj strukturi okvira nemoguće je pratiti njezino stanje.
Složene strukture mogu imati tisuće različitih stanja (varijanti dokumenata otvorenih u različitim okvirima), ali se Url adresa te strukture ne mijenja. Zbog ovoga će biti Ne mogu koristiti oznake preglednika ili pošaljite poveznice na svoje omiljene stranice drugim korisnicima. Zašto?
Budući da adresa ostaje nepromijenjena čak i kada je otvorite iz knjižnih oznaka preglednika ili iz e-pošte E-mail, dobit ćete stranicu s početnim stanjem strukture okvira, a ne stanjem koje želite spremiti.
Iako se, naravno, ovaj problem može riješiti, ali ne s HTML alatima, već uz pomoć poslužitelja (na primjer, Php) ili klijentskih programskih jezika (JavaScript), a ta rješenja neće biti sto posto učinkovita. Takva rješenja, naime, omogućuju dodavanje dodatnih podataka o njegovom trenutnom stanju na Url adresu strukture okvira, ali to nije lako učiniti, a pouzdanost neće biti apsolutna.
Ovo je prvi nedostatak korištenja okvira za izradu web stranica i vrlo je značajan, ali postoji još jedan veliki nedostatak. Tražilice su ih, naravno, odavno naučile indeksirati i izvući iz njih adrese onih dokumenata koji su učitani u njihove prozore. Problem je drugačiji.
Kada korisnik prijeđe s Yandex ili Google rezultata pretraživanja na vašu web stranicu izgrađenu na temelju strukture okvira, otvorit će se samo dokument koji je učitan u jedan od okvira, a ne cijela struktura. Shvaćaš li o čemu govorim?
Korisnik će vidjeti dokument i neće vidjeti navigaciju na vašoj stranici, jer će biti zaštićen u drugim prozorima, a oni se učitavaju samo kao dio cijele strukture.
Kao rezultat toga, stranica izgrađena na okvirima jednostavno postaje neupotrebljiva. Iako, opet, postoje rješenja za ovaj problem temeljena na poslužiteljskim skriptama, kada će se izvršiti preusmjeravanje s adresa pojedinačnih dokumenata na okvirnu strukturu koja je u željenom stanju, ali to je opet vrlo teško i ne uvijek pouzdano.
Općenito, zaključak se može izvući nedvosmisleno - Nema potrebe za izradom web stranica na okvirima. Ali stalno se koriste za izradu pomoći za razne aplikacije, a mogu dobro doći i u drugim sitnicama.
Na primjer, stvorio sam strukturu okvira koju sam nazvao "Navigator" (sada je privremeno uklonjen) i koja je postala neka vrsta proširenog vanjskog izbornika za moj blog, što bi, čini mi se, trebalo pojednostaviti rad s resursom i, stoga, poboljšati "bez gluposti" imaju vrlo, vrlo snažan utjecaj na promociju stranice.
Ali, međutim, kako bi se izbjegli problemi s tražilice, zatvorio sam cijelu ovu strukturu okvira iz pogleda i također dodao, za svaki slučaj, Rodots meta oznaku svim njegovim Html datotekama, zabranjujući njihovo indeksiranje:
JOOMLA
Ali sva ova ograničenja odnose se samo na strukture na oznakama Frame i Frameset, i ugrađeni okviri na Iframe oznake nemaju vidljivih nedostataka, a mogu se i čak trebaju koristiti na vašim projektima, barem za umetanje videa s YouTubea.
Sretno ti! Vidimo se uskoro na stranicama bloga
Moglo bi vas zanimati
Naredbe komentara i Doctype u Html kodu, kao i koncept bloka i inline elemenata (tagova) Embed and object - Html oznake za prikaz medijskog sadržaja (video, flash, audio) na web stranicama Img - Html tag za umetanje slike (Src), poravnavanje i omatanje teksta oko nje (align), kao i postavljanje pozadine (background) Što je hipertekstualni označni jezik Html i kako vidjeti popis svih oznaka u W3C validatoruSelect, Option, Textarea, Label, Fieldset, Legend - oznake HTML obrasci padajuće liste i tekstualno polje Popisi u Html kodu - UL, OL, LI i DL oznake Font (lice, veličina i boja), Blockquote i Pre oznake - staro oblikovanje teksta u čisti HTML(bez korištenja CSS-a) Kako su postavljene boje u Html i CSS kodu, izbor RGB nijansi u tablicama, Yandex izlaz i drugi programi