|
Iframes - okvirji
Iframes oziroma okvirji imajo svoje dobre in
slabe lastnosti.
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.
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.
Zaključek je tak, da si lahko z iframe-i
veliko pomagate toda vaša obiskanost bo pri
tem skoraj zagotovo trpela. |
|
Postavitev
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.
Primer: |
|
<html>
<head>
</head>
<body>
<iframe src="http://www.moje-mesto.com"> </iframe>
</body>
</html> |
|
|
Prikaz
uvožene spletne strani |
|
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.
Primer:
|
|
<html>
<head>
</head>
<body>
<iframe src="http://www.moje-mesto.com"
height="200" width="500">
</iframe>
</body>
</html> |
|
|
Prikaz velikosti okvirja |
|
Obroba
|
|
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.
Primer:
|
|
<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.
Primer:
|
|
<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> |
|
|
Prikaz oblikovanja obrobe |
|
Scrolling oz. drsniki
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.
Primer:
|
|
<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
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.
Primer:
|
|
<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
|
|
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.
Primer:
|
|
<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 prozornim
ozadjem -->
</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 |
|
|
