Što je okvir? Struktura i kreiranje okvira

Okvir je područje na web mjestu (prozor) u kojem je vidljiva druga web stranica. Webmasteri iskoristiti ovu priliku za prikaz glavne stranice stranice svojih prijatelja ili partnera. Ista tehnika se koristi za prikaz oblika pretraživanja u prozorima i njenom rezultatu, i tako dalje.

No u osnovi se koriste okviri za izradu velikih internetskih portala, gdje su potrebne puno opcija izbornika i podizbornika. O tim obično kažu: "web mjesto na okvirima". Stvaranje takvog resursa zahtijeva dobro poznavanje HTML jezika.

Izrada okvira u graditelju web sučelja

U nekim dizajnerskim stranicama omogućeno je automatsko generiranje takvog koda. Obično je gumb za dodavanje okvira u glavnom izborniku programa. Prvo morate staviti pokazivač na željeno mjesto na stranici, a zatim kliknite gumb, prozor će se otvoriti (kao što je prikazano na snimci zaslona). U njemu možete postaviti adresu stranice koja će se otvoriti u okviru i podesiti dimenzije: širinu i visinu.

No u osnovi se koriste okviri za izradu velikih internetskih portala, gdje su potrebne puno opcija izbornika i podizbornika. O tim obično kažu: "web mjesto na okvirima". Stvaranje takvog resursa zahtijeva dobro poznavanje HTML jezika.

Pomoću ove "usluge" moguće je stvoriti nekoliko okvira na stranici, to su samo međusobno povezani elementi tako da ne dobivate.

Okviri u CMS-u

Mnogi programi za izradu web stranica pružaju mogućnost instaliranja odgovarajućeg modula. Na primjer, za Joomla okvir, ovo je modul "Wrapper".

Može se pronaći i stvoriti na upravljačkoj ploči CMS Jumla: "Proširenja" - "Moduli upravitelja" - "Stvaranje" (okrugli gumb narančasti s oznakom plus). U pop-up prozor, na popisu ćete vidjeti modul "Wrapper".

Ako nije ovdje, onda to nije uključeno. Da biste ga koristili, prvo ga morate aktivirati ovdje: karticu "Proširenja", a zatim "Upravitelj proširenja", a zatim karticu "Upravljanje". I pogledaj na popis koji se otvori, možete unijeti riječ: Wrapper za brzo pretraživanje u polju "Filter". Nasuprot ovom modulu trebao bi biti zelena ikona s oznakom unutar. Crveni krug s točkicom označit će da je dodatak isključen.

Nakon ovog postupka možete se vratiti na "Upravitelj modula", stvoriti okvir i postaviti njegove parametre.

Kao što možete vidjeti na slici, modul vam omogućuje da postavite: zaglavlje iznad okvira, položaj modula, odaberite stranice stranice na kojima će se prikazati. I prilagodite širinu, visinu - dodajte okvir i stvarnu vezu na web stranicu. Ako u okviru želite prikazati glavnu stranicu web mjesta u punoj širini, 100%, postavljeno prema zadanim postavkama, neće biti dovoljno. Možete ga odmah staviti sigurno 400%. Visine od 200 su obično dovoljne za prikaz izbornika na vrhu stranice. Svi ostali sadržaji bit će vidljivi ako korisnik (posjetitelj web mjesta) koristi traku za pomicanje.

Evo primjera što je okvir u Jumli.

Modul Jumla za stvaranje okvira vrlo je prikladan i jednostavan za korištenje. Međutim, njegove su mogućnosti ograničene, kao i mogućnosti dizajnerice.

Povijest i stvarnost

U praksi stvaranja web stranica iz okvira, ova oznaka (njegova primjena) odavno je postala sekundarna. Mogla su zamijeniti module, postavke u dizajnerima koji generiraju kod za web stranicu bez sudjelovanja graditelja web mjesta. Međutim, u nekim slučajevima to nije dovoljno. Na primjer, kada je okvir integralna složena struktura područja prikazanih u pregledniku. Na taj način vlasnici vide složenost strukturiranih web-lokacija. Na njegovu stvaranju su samo u ekstremnim slučajevima, jer Framey`s web stranice su stvorene isključivo uz pomoć specijaliziranih oznaka.

Kompleksna strukturirana mjesta

Za njih je stvaranje nekoliko međusobno povezanih okvira optimalno rješenje za organiziranje sadržaja na stranicama resursa. Ovo, u pravilu, veliki portali, raste svake godine sve više i više.

Kako postići isti rezultat? Kako stvoriti strukturu okvira?

Kako napisati okvir u kôd stranice

Okviri u HTML dodaju se oznakama:

• okvir (za zaseban prozor);
• frameset (stvara cijelu strukturu uz pomoć nje);
• iframe ("plutajući" okvir);
• noframe (u slučaju da okvir nije prikazan u korisnikovom pregledniku).

Prva navedena oznaka uvijek se uklapa u par i . I zamjenjuje i . Pomoću odgovarajućih atributa možete prilagoditi značajke svakog elementa: naziv (ime =), veličina (cols = i redovi =), granica (granica), traka za pomicanje i, naravno, veza na web stranicu za prikaz.

Varijacije dizajna

Cijela stranica stranice može se podijeliti na područja. Na primjer, ovo:

Ova struktura (nazvana nested) može se dobiti postavljanjem atributa cols unutar oznake, što označava vodoravni položaj okvira i redaka - okomito. Sljedeći je = znak i dimenzije su napisane. Na primjer, 60%, 40% - postotak (jedan prozor će zauzeti 60% prostora preglednika, drugi, odnosno 40%). Ili 100, 200 - omjer veličina u pikselima. Veličina jednog od okvira se uopće ne može podesiti (bit će instalirana prema zadanim postavkama). Da biste to učinili, morate odrediti * nakon zareza ili nakon nje.

Unutar ovog para, frameset registrira svaki okvir s parametrima: src =, zatim citate slijedi veza na web stranicu i name = s zaglavljem (na primjer, okvir 1).

Gniježđenje svakog novog područja označeno je novim okvirom.

Primjer koda:

Primijetite da je u našem primjeru za okvire druge i treće dimenzije napisano samo jedno vrijeme.

Mnogo zadumok vam omogućuje izvršavanje okvira. Primjeri njihovog položaja u prozoru preglednika mogu se donijeti bez prekida (mijenjanje koda sukladno tome). Međutim, ove informacije dulje vrijeme ne pronalaze praktičnu primjenu. Okviri, ako se koriste danas prilikom izrade web stranica, a zatim samo u obliku modula u besplatnom CMS-u ili u obliku iframea.

Plutajući okvir

Čudno je zašto je dobio to ime, riječ "ugrađena" ovdje je prikladnija. Ovaj je okvir izrađen za prikaz sadržaja datoteke. U bilo koju dokument ili datoteku učitate u bazu podataka, koristite oznake ayframea da biste registrirali put do njega - posjetitelji će vidjeti tekst datoteke (video ili slika). Nažalost, preglednici ne prikazuju uvijek sadržaj. Da biste to učinili, web-lokacije unesite izraz između oznake otvaranja i zatvaranja: "Vaš preglednik ne prikazuje sadržaj."

Na primjer, Seopult.ru je poznata usluga za promicanje majstora. Nije njegovo glavno mjesto, već I.seopult.pro ogledalo, stvoreno za klijente portala. Ovdje je napisan kôd ayframea:

Na stranici zrcala možete vidjeti riječ "Uputa" u obliku gumba. Kada kliknete na nju, prezentacija se otvara u središtu prozora preglednika.

Sva glavna mjesta za gledanje filmova i serijala izrađuju se pomoću ayframesa (npr. "Imhonet"), kao i društvenih mreža. Čak i glavna stranica "Yandex" sadrži ovu oznaku, a ne jedan par.

Kako prepisati iframe

Prijenos na web stranicu dokument u obliku prozora s trakom za pomicanje može biti bilo gdje. Obično su oznake smještene unutar tijela. Osim standarda

i

Navigacija pomoću letjelice

Najinteresantnija vještina u stvaranju okvira je pisanje koda koji vam omogućuje da u prozoru otvorite sadržaj po referenci, nešto što su napravili zrcalo Seopult, samo s samo nekoliko veza (istovremeno dostupni korisniku na jednoj stranici).

U tu svrhu, ayframe se uzima, dodatno je registriran s imenom preko name =. Na primjer, zagolovok. Sljedeće prije nego što se ona nalazi u oznakama i veze se dodjeljuju putem HREF = s obaveznom oznakom nakon njih atributa target = zagolovok. Prije korištenja oznake zatvaranja označen je natpis koji će poslužiti kao gumb za povezivanje. Oznake "a" otvaraju se i zatvaraju u p oznaku.

Kod ima nekoliko redaka koji se mogu koristiti za dobivanje nekoliko gumba za redom na web stranici, klikom na koji će se drugi sadržaj prikazati u donjem prozoru.

Kôd će izgledati ovako:

Pošaljite svoj oglas

Prikaži oglase

Kako će izgledati na web mjestu:

Kako umetnuti iframe na Jumlaovu stranicu

Standardno na upravljačkoj ploči Jumla nalazi se modul "HTML-kod" koji je uključen (tj. Spreman za korištenje). Uz to možete umetnuti bilo koji kôd bilo gdje na web mjestu. Međutim, kôd s ayfrem tagom neprestano se zanemaruje. Stoga ćemo koristiti posebni modul Jumi.

Prije svega, morate ga preuzeti s Interneta i instalirati ga sami putem upravne ploče Jumla: "Extensions" - "Extension Manager" - "Select file". Navedite put do preuzete arhive i kliknite "Preuzmi".

Nakon uspješne instalacije, idite na "Upravitelj modula" i stvorite novu. Odaberite Jumi tip. U prozoru koji se otvori, u polju "Prilagođeni kod" unesite pripremljeni iFram, kao što je prikazano u prethodnom odlomku članka. Dajte modulu naslov, navedi položaj položaja i stranicu web mjesta. Kliknite Spremi i potvrdite što se dogodilo.

Preglednici i okviri

Svi popularni preglednici prikazuju sadržaj okvira prozora: Chrome, Safari, Firefox, Android i iOS. Posebno visoka u tom pogledu su Internet Explorer i Opera. I još uvijek ne postoji jamstvo da će posjetitelj vaše web stranice vidjeti sadržaj svih prozora. U tom slučaju trebate ostaviti poruku s oznakom noframe (otvaranje i zatvaranje). U njemu možete unijeti sljedeće: "Vaš preglednik je zastario". Za prikaz sadržaja web stranice, ažurirajte verziju ". Ako korisnikov preglednik ispravno prikazuje okvire, ova se poruka neće prikazati.

Dakle, okvir je područje ili prozor web lokacije koji ima vlastiti URL. Koristi se za prikazivanje na jednom polju preglednika nekoliko web stranica ili nezavisnih dokumenata koji također imaju svoj vlastiti URL. Unatoč činjenici da vam okviri omogućuju dobro organiziranje složenog strukturiranog web sučelja, dugo nisu korišteni, osim iframea. Aplikacija ove oznake i dalje je relevantna za preuzimanje prezentacija, videoplayera, tekstualnih dokumenata u određenom prozoru. Aktivno se koriste velikim i poznatim web resursima.