Okvir je područje na stranici (prozoru) u kojem je vidljiva druga web stranica. Webmasteri koriste ovu priliku da pokažu početnu stranicu stranica svojih prijatelja ili partnera. Ista tehnika se koristi za prikaz obrasca za pretragu u okvirima sa rezultatom pored, itd.
Ali uglavnom se okviri koriste u kreiranju velikih web portala, gdje je potreban znatan broj stavki menija i podmenija. Za takve ljudi obično kažu: "website on frames". Za kreiranje takvog resursa potrebno je dobro poznavanje HTML-a.
Kreiranje okvira u izradi web stranica
Neki graditelji web stranica omogućavaju automatsko generiranje takvog koda. Obično se dugme za dodavanje okvira nalazi u glavnom meniju programa. Prvo morate postaviti kursor na pravo mjesto na stranici, zatim kliknuti na dugme, otvoriće se prozor (kao što je prikazano na snimku ekrana). U njemu možete postaviti adresu stranice koja će se otvoriti u okviru, te podesiti dimenzije: širinu i visinu.
Ali uglavnom se okviri koriste u kreiranju velikih web portala, gdje je potreban znatan broj stavki menija i podmenija. Za takve ljudi obično kažu: "website on frames". Za stvaranje takvog resursa potrebno je dobro znanjeHTML jezik.
Uz pomoć ove "usluge" moguće je kreirati nekoliko okvira na stranici, ali na ovaj način nećete dobiti međusobno povezane elemente.
Okviri u CMS-u
U mnogim programima za kreiranje web stranica moguće je instalirati odgovarajući modul. Na primjer, za Joomla, okvir je "Wrapper" modul.
Može se naći i kreirati na Joomla CMS kontrolnoj tabli: "Extensions" - "Module Manager" - "Create" (okruglo narandžasto dugme sa znakom plus unutra). U iskačućem prozoru, na listi, vidjet ćete "Wrapper" modul.
Ako nije ovdje, nije uključeno. Da biste ga koristili, prvo ga morate aktivirati ovdje: kartica "Extensions", zatim "Extension Manager", zatim kartica "Management". I tražimo na listi koja se otvori, za brzu pretragu u polje "Filter" unesite riječ: Wrapper. Nasuprot ovog modula treba da stoji zelena ikona sa kvačicom unutra. Crveni krug sa tačkom unutar znači da je ovaj dodatak onemogućen.
Nakon ove procedure, možete se vratiti u "Module Manager", kreirati okvir i postaviti njegove parametre.
Kao što vidite na slici, modul vam omogućava da postavite: naslov iznad okvira, poziciju modula, odaberete stranice sajta na kojima će se prikazivati. I također podesite širinu, visinu; dodati okvir i zapravolink na web stranicu. Ako u okviru želite da prikažete glavnu stranicu web-mjesta u punoj širini, tada 100%, podešeno po defaultu, neće biti dovoljno. Možete odmah sigurno staviti 400%. Visina od 200 je obično dovoljna za prikaz gornjeg menija stranice. Sav ostali sadržaj će biti vidljiv ako korisnik (posjetilac web stranice) koristi traku za pomicanje.
Evo primjera šta je okvir u Joomli.
Jumla modul za kreiranje okvira je vrlo zgodan i jednostavan za korištenje. Međutim, njegove mogućnosti su ograničene, kao i mogućnosti konstruktora.
Istorija i stvarnost
U praksi kreiranja sajtova iz okvira, ova oznaka (njena primena) je odavno izbledela u pozadini. Mogli su biti zamijenjeni modulima, postavkama u konstruktorskim programima koji generiraju kod za web stranicu bez sudjelovanja graditelja web stranica. Međutim, u nekim slučajevima to nije dovoljno. Na primjer, kada je okvir holistička složena struktura područja prikazanih u pretraživaču. Tako to vide vlasnici kompleksno strukturiranih stranica. Njegovo kreiranje se koristi samo u ekstremnim slučajevima, budući da se okvirne stranice kreiraju isključivo uz pomoć specijalizovanih oznaka.
Složeno strukturirane stranice
Za njih je kreiranje nekoliko međusobno povezanih okvira najbolje rješenje za organiziranje sadržaja na stranicama resursa. To su, po pravilu, veliki portali, koji svake godine jačaju.
Kako postići isti rezultat? Kako se kreira struktura okvira?
Kakoumetni okvir u kod stranice
Okviri u HTML-u se dodaju pomoću oznaka:
- okvir (za poseban prozor);
- frameset (koristeći ga za stvaranje cijele strukture);
- iframe ("plutajući" okvir);
- noframes (u slučaju da okvir nije prikazan u pretraživaču korisnika).
Prva navedena oznaka uvijek stane u par i. I zamjenjuje i. A uz pomoć odgovarajućih atributa možete podesiti karakteristike svakog elementa: naziv (name=), veličinu (cols=i rows=), prisustvo ivice (bordera), izgled trake za pomicanje i, naravno, link na web stranicu za prikaz.
Varijacije dizajna
Cijela stranica stranice može se podijeliti na područja. Na primjer, ovako:
| Lijevo | Gornji okvir |
| Desno |
Ovakva struktura (naziva se ugniježđena) može se dobiti pisanjem atributa cols unutar oznake, što znači horizontalnu lokaciju okvira, a redove - vertikalno. Zatim se stavlja znak=i propisuju se dimenzije. Na primjer, 60%, 40% - postotak (jedan prozor će zauzeti 60% prostora u pretraživaču, drugi, respektivno, 40%). Ili 100, 200 - omjer širine i visine u pikselima. Veličina jednog okvira se uopće ne može podesiti (podešava se po defaultu). Da biste to učinili, nakon ili prije zareza, potrebno je navesti simbol.
Ugniježđenjesvako novo područje je označeno novim okvirom.
Primjer koda:
Imajte na umu da su u našem primjeru, za drugi i treći okvir, veličine navedene samo jednom.
Mnoge ideje vam omogućavaju da dovršite okvire. Primjeri njihove lokacije u prozoru pretraživača mogu se navoditi beskonačno (shodno tome mijenjajući kod). Međutim, ove informacije dugo nisu našle praktičnu primjenu. Okviri, ako se danas koriste prilikom kreiranja sajtova, su samo u obliku modula u besplatnom CMS-u ili u obliku iframe-a.
Plutajući okvir
Čudno zašto je dobio takav naziv, ovdje je prikladnija riječ "ugrađeni". Ovaj okvir je kreiran za prikaz sadržaja datoteke. Ubacite bilo koji dokument ili datoteku u bazu podataka, napišete putanju do njega koristeći iframe oznake - i posjetitelji će vidjeti tekst datoteke (video ili sliku). Nažalost, pretraživači ne prikazuju uvijek sadržaj. Da bi to učinili, graditelji weba unose frazu između početne i završne oznake: "Vaš pretraživač ne prikazuje sadržaj."
Na primjer, Seopult.ru je dobro poznata usluga za majstore promocije. Samo ne njegov glavni sajt, već ogledalo I.seopult.pro, kreirano za klijente portala. Iframe kod je napisan ovdje na sljedeći način:
Upute
. Gdje je oznaka
-
je kreiran za definiranje stavke liste. Podržano od svih pretraživača.
Na samoj stranici ogledala možete vidjeti riječ "Uputstvo" u obliku dugmeta. Klikom na nju u sredini prozora pretraživača otvara se prezentacija.
Sve velikestranice za gledanje filmova i serija kreiraju se pomoću iframe-a (na primjer, "Imhonet"), kao i društvenih mreža. Čak i glavna stranica "Yandexa" sadrži ovu oznaku i više od jednog para.
Kako napisati iframe
Možete da otpremite dokument u obliku prozora sa trakom za pomeranje na bilo koje mesto na sajtu. Obično se oznake postavljaju unutar tijela. Iznad standarda
i, kao što je prikazano u gornjem primjeru, može se koristiti i oznaka liste -
-
Atributi se dodaju u iframe:
- širina (širina) i visina (visina=);
- poravnanje ivica;
- uvlake koje se mogu ili ne moraju specificirati: zadana vrijednost je 6 - ovo je sasvim dovoljno;
- koristeći dozvoljenu transparentnost, možete postaviti transparentnost područja okvira tako da se vidi pozadina stranice;
- plus poznati scr, ime, skrolovanje, granica.
Navigacija pomoću iframe-a
Najzanimljivija vještina kadriranja je pisanje koda koji vam omogućava otvaranje sadržaja u prozoru putem linka, što su i uradili kreatori ogledala Seopult, samo sa nekoliko linkova odjednom (istovremeno dostupnim korisniku na ista stranica).
Za ovo se uzima iframe, u njega se dodatno upisuje ime kroz name=. Na primjer, zaglavlje. Dalje, ispred nje u tagovima i linkovima se upisuje preko HREF=uz obaveznu naznaku atributa iza njih. Pre upotrebe završne oznake a označava se natpis koji će služiti kao link-dugme. Oznake "a" otvaranje i zatvaranjenalaze se u oznaci p.
Možete napisati nekoliko takvih redova u kodu kako biste na kraju dobili nekoliko dugmadi za linkove u jednom redu na stranici, klikom na koji će se različiti sadržaj prikazati u prozoru ispod.
Šifra će izgledati ovako:
Postavi oglas
Pogledajte oglase
Image Kako će to izgledati na web stranici:
Kako umetnuti iframe u Joomla stranicu
Kao standard, Joomla kontrolni panel ima omogućen (spreman za upotrebu) "HTML-code" modul. Pomoću njega možete umetnuti bilo koji kod bilo gdje na stranici. Međutim, on tvrdoglavo ignoriše kod sa iFrem oznakom. Stoga ćemo koristiti poseban Jumi modul.
Pre svega, potrebno je da ga preuzmete sa Interneta i instalirate preko Joomla administrativnog panela: "Extensions" - "Extension Manager" - "Select File". Odredite putanju do preuzete arhive i kliknite na "Preuzmi".
Nakon uspješne instalacije, idite na "Module Manager" i kreirajte novi. Odaberite vrstu Jumi. U prozoru koji se otvori, u polje "Custom Code" unesite pripremljeni iFrem, kao što je prikazano u prethodnom pasusu članka. Dajte modulu naslov, odredite poziciju plasmana i stranice stranice. Kliknite sačuvaj i provjeri.
Pretraživači i okviri
Svi popularni pretraživači dobro prikazuju sadržaj prozora okvira: Chrome, Safari, Firefox, Android, iOS. Internet Explorer i Opera imaju posebno visoku stopu u ovom pogledu. A ipak nema garancijeda će posjetitelj vaše stranice vidjeti sadržaj svih prozora. U tom slučaju, trebali biste ostaviti poruku koristeći noframe tag (otvaranje i zatvaranje). U njega možete unijeti sljedeće: "Vaš pretraživač je zastario. Ažurirajte verziju kako biste prikazali sadržaj stranice." Ako korisnikov pretraživač ispravno renderira okvire, neće vidjeti ovu poruku.
Dakle, okvir je područje ili prozor stranice koji ima svoj URL. Koristi se za prikaz nekoliko web stranica ili nezavisnih dokumenata u jednom polju pretraživača odjednom, koji također imaju vlastiti URL. Unatoč činjenici da vam okviri omogućavaju dobro organiziranje složene stranice, oni se dugo vremena ne koriste, osim iframe-a. Upotreba ove oznake je i dalje relevantna za učitavanje prezentacija, video plejera, tekstualnih dokumenata u određenom prozoru. Aktivno ga koriste veliki i dobro poznati web resursi.
-
