| Iframes oz. Okvirji |
| HTML vodiči |
 Spoznajte IframeIframe
Iframes oziroma okvirji imajo svoje dobre in slabe lastnosti. Ta vodič vam bo pokazal dobre stvari, kako uvoziti drugo spletno stran na vašo, kako določiti obrobo, drsnike in prosojno ozadje okvirja in pa povedal slabe lastnosti okvirjev.
Dobra lastnost je predvsem to, da lahko z njihovo pomočjo uvozimo druge spletne strani na našo spletno stran. To lahko uporabimo približno tako, da naredimo en del spletne strani npr. header ali pa meni, kot popolnoma ločeno stran in to nato lahko prikažemo na vseh podstraneh naše spletne strani. Ko je npr. meni potreben kakšne modifikacije enostavno spremenimo le tisto stran z menijem, ki smo jo uporabili na naši spletni strani in ta sprememba se bo pokazala na vseh podstraneh. Tako nam ni treba spreminjati vsake strani posebej !
Iframei po poglavjih: - drsniki - ozadje
Priporočam: - prozorno ozadje pri iframeih - target _parent pri povezavah
Edina pomanjkljivost je ta, da boste v iskalnikih prikazani na zelo nizkem mestu. Iskalniki namreč največkrat iščejo ključne besede ravno na prvi strani in če je tam veliko iframe-ov ne bodo našli veliko ključnih besed oz. če je stran sestavljena celotno iz iframe-ov tam v bistvu ni nobenih besed.
Uvoz druge spletne strani z iframe !
Iframe v spletno stran vstavimo s pomočjo oznake <iframe>, ki jo zapremo z oznako </iframe>. Toda s tem, da smo to vpisali v kodo nismo še nič naredili. V značko <iframe> moramo vstaviti atribut src="/ ". Ta atribut pove, katero stran bomo uvozili na našo spletno stran.
HTML primer 1:
<html> <head> </head> <body> <iframe src="/http://www.moje-mesto.com"> </iframe> </body> </html>
Sedaj, ko smo uvozili drugo stran na našo spletno stran moramo določiti še velikost okvirja, drsniki da ali ne, kakšne barve bo obroba in če sploh bo obroba, kakšne barve bo ozadje ...
Velikost okvirja
Velikost okvirja določimo z atributoma height=" " in width=" ". Vrednosti, ki jih vnesete notri so izražene v slikovnih pikah oz. pikslih. Z atributom height=" " določamo višino, z atributom width=" " pa širino okvirja.
HTML primer 2:
<html> <head> </head> <body> <iframe src="http://www.moje-mesto.com" height="200" width="500"> </iframe> </body> </html>
Obroba iframea
Obrobo določimo z atributom frameborder=" ". Vrednosti, ki jih lahko vnesemo notri pa so edino 1 ali 0 oz. yes ali no. 1 oz. yes pomeni, da obroba je, 0 oz. no pa pomeni, da obrobe ni.
HTML primer 3:
<html> <head> </head> <body> <iframe src="http://www.moje-mesto.com" height="200" width="500" frameborder="1"> </iframe> <br> <br> <iframe src="http://www.moje-mesto.com" height="200" width="500" frameborder="0"> </iframe> </body> </html>
prikaz okvirja z obrobo in brez nje
Imamo pa tudi možnost, da oblikujemo obrobe. To lahko naredimo s pomočjo atributa style=" ", ki je v bistvu CSS koda vključena v HTML kodo. Toda nič ne de, uporabna je pa le. Na primeru bomo določili, da bo obroba velika 5 pikslov oz. slikovnih pik, da bo prikazana kot polna črta in ne kot črtkana ali pa celo pikčasta črta, in pa, da bo modre barve.
HTML primer 4:
<html> <head> </head> <body> <iframe src="http://www.moje-mesto.com" height="200" width="500" frameborder="1" style="border: 5px solid #0000FF"> </iframe> </body> </html>
Scrolling oz. drsniki pri iframeu
Kot ste na zgornjih primerih opazili so drsniki vključeni v vsak okvir. To je pa zato, ker je uvožena stran večja, kot pa sam okvir. Drsnike oz. Scroll bar-e določimo z atributom scrolling=" ". Tukaj pa imamo sedaj tri možnosti. Lahko preprosto uporabimo izraza yes in no. Yes za to, da bodo drsniki zagotovo vključeni v okvir in pa no, ki določi, da drsnikov ne bo. Tretja možnost pa je vrednost auto, ki določi drsnike glede na velikost uvožene strani. Če je stran večja od okvirja, potem drsniki bodo, če je manjša pa drsnikov ne bo.
HTML primer 5:
<html> <head> </head> <body> <iframe src="http://www.moje-mesto.com" height="200" width="500" scrolling="yes"> </iframe> <br> <br> <iframe src="http://www.moje-mesto.com" height="200" width="500" scrolling="no"> </iframe> <br> <br> <iframe src="http://www.moje-mesto.com" height="200" width="500" scrolling="auto"> </iframe> </body> </html>
Prikaz uporabe atributa scrolling
Ozadje iframea
Ozadje iframe-a je vedno take barve, kot je barva ozadja strani, ki jo uvažamo na svojo spletno stran. Problem nastane, ko hočemo uvoziti stran s prozornim ozadjem (transparent background). Rešitev tega problema pa je sledeča:
V oznako <body> na strani, ki jo hočemo uvoziti moramo nujno vključiti atribut style="background-color: transparent". V oznako <iframe> pa moramo nujno vključiti atribut allowTransparency="true". S tem povemo brskalniku, da mora dovoliti prozornost oz. transparency.
HTML primer 6 & 7:
<html> <head> <!-- to je stran, ki jo bomo uvozili na neko drugo spletno stran --> </head> <body style="background-color: transparent"> To je besedilo, iz strani, ki smo jo uvozili </body> </html>
<html> <head> <!-- to je stran, na katero bomo uvozili stran s prozornim ozadjem --> </head> <body style="background-color: blue"> <iframe src="/stran_uvoz.htm" frameborder="1" style="border: 5px solid #FF0000" allowTransparency="true"> </iframe> </body> </html>
Prikaz uvoza strani s prozornim ozadjem
Povezave in iframe
Zelo zanimivo področje pri iframe-ih so povezave. Če imaš npr. na strani, ki jo uvozimo v spletno stran povezavo oz. link do neke druge strani oz. do neke druge podstrani, kako sedaj narediti, da se bo ta povezava odprla v iframe-u oz. v novem oknu oz. v istem oknu. Tukaj bomo uporabili atribut target=" ". Predstavil bom tri možnosti._blank, _self in pa _parent. Vrednost _blank odpre povezavo v novem oknu. Vrednost _self odpre povezavo v istem oknu to se pravi v iframe-u. Vrednost _parent odpre povezavo v največjem odprtem oknu in to bo v našem primeru kar stran, na kateri je iframe (najbolj uporabno!).
HTML primer 8 & 9:
<html> <head> <!-- to je stran, ki jo bomo uvozili na neko drugo spletno stran --> </head> <body style="background-color: red"> <a href="http://www.moje-mesto.com" target="_blank">Povezava, ki se bo odprla v novem oknu</a> <br> <a href="http://www.moje-mesto.com" target="_self">Povezava, ki se bo odprla v istem oknu</a> <br> <a href="http://www.moje-mesto.com" target="_parent">Povezava, ki se bo odprla v največjem oknu</a> </body> </html>
<html> <head> <!-- to je stran, na katero bomo uvozili stran s povezavami --> </head> <body style="background-color: blue"> <iframe src="/stran_uvoz2.htm" frameborder="1" style="border: 5px solid #0000FF"> </iframe> </body> </html>
Prikaz različnih načinov povezav
To bi bilo od iframe-ov vse. Sedaj veste, kako uvoziti stran, kako iframeu določiti obrobo in drsnike ter kako urediti povezave. Iframei so čudovita pogruntavščina in nam ponujajo res veliko možnosti.
|
| Sorodni vodiči | |
Moje-Mesto.com
Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.
