html css trikovi ubacivanje i frame na web stranicu


Besplatni online kurs web dizajna

Nastavna jedinica: Trick 3 - I FRAME - "ekran" ka web stranici


Nazad


I FRAME - okvir sa prikazom druge web strane


IFRAME predstavlja RAM (FRAME) koji daje prikaz odredjene web strane. Primeri u nastavku daju praktičnu primenu IFRAME odnosno kroz definisanje dve klase "mobil-frame-portrait" i "mobil-frame-landscape", njihovo stilizovanje (širine, visine, bordure itd) a potom pozivanje tih klasa za dva IFRAME-a, omogućavate da se neka web strana (src="http://www.ime-domena.rs") prikaže i renderuje samo kroz IFRAME (simulacija mobilne verzije). Stilizovanjem ova dva IFRAME kroz klase predstavlja u stvari kombinaciju bordure crne boje i debljine 20 px, s tim što je jedna bordura na primer 80 px, dok je druga 60 px i bordure imaju radijus zaobljenja 40px - čime se daje sličnost mobilnim ili tablet uredjajima. Naravno, preko stilova za širinu i visinu definišete dimenzije uredjaja - u pixelima ili milimetrima.

Head


<style type="text/css">
.mobil-frame-portrait {             /* OVO JE DIV TAG SA RAZLIČITIM DIMENZIJAMA BORDURA I ZAOBLJENJIMA */
 width: 80mm;                    /* širina div taga od ivice do ivice */
 height: 121.5mm;                /* visina div taga od ivice do ivice */    
 border: solid 20px #000;        /* osnovna bordura oko divtaga - širna mobil uredjaja */
 box-shadow: 0 0 0 3pt #999;     /* Preko stila box-shadows senka ima formu linije odnosno efekat bordure od bordure */
 border-radius: 40px;            /* zaobljenje div taga */   
 -webkit-border-radius: 40px;    /* zaobljenje div taga */
 -moz-border-radius: 40px;       /* zaobljenje div taga */
 -o-border-radius: 40px;         /* zaobljenje div taga */ 
 -ms-border-radius: 40px;        /* zaobljenje div taga */
 border-bottom: solid 80px #000; /* donja bordura */
 border-top: solid 60px #000;    /* gornja bordura */ 
 margin-right: 15px;               
}

.mobil-frame-landscape {            /* OVO JE DIV TAG SA RAZLIČITIM DIMENZIJAMA BORDURA I ZAOBLJENJIMA */
 width: 121.5mm;                 /* širina div taga od ivice do ivice */
 height: 80mm;                   /* visina div taga od ivice do ivice */
 border: solid 20px #000;        /* osnovna bordura oko divtaga - širna mobil uredjaja */ 
 box-shadow: 0 0 0 3pt #999;     /* Preko stila box-shadows senka ima formu linije odnosno efekat bordure od bordure */
 border-radius: 40px;            /* zaobljenje div taga */   
 -webkit-border-radius: 40px;    /* zaobljenje div taga */
 -moz-border-radius: 40px;       /* zaobljenje div taga */
 -o-border-radius: 40px;         /* zaobljenje div taga */ 
 -ms-border-radius: 40px;        /* zaobljenje div taga */
 border-bottom: solid 20px #000; /* donja bordura */
 border-top: solid 20px #000;    /* gornja bordura */
 border-left: solid 60px #000;   /* leva bordura */  
 border-right: solid 80px #000;  /* desna bordura */ 
}
</style>

Body


<iframe class="mobil-frame-portrait" src="http://www.tekoms.co.rs/" frameborder="0"></iframe>
<iframe class="mobil-frame-landscape" src="http://www.tekoms.co.rs/" frameborder="0"></iframe>

Prikaz u Browser-u


NOVO - DOPUNITE ZNANJE - WEB PROGRAMIRANJE (PHP, SQL)

Posle pređenih svih nastavnih jedinica u okviru Besplatne online obuke za web dizajn, obuku možete nadograditi odnosno dopuniti svoje znanje tako što će naučiti i web programiranje - PHP, SQL - izrada dinamičkih sajtova, online prodavnica. Kurs prati napisana skripta, izvorni kodovi i nekoliko desetina video nastavnih jedinica gde polaznik hronološki uči pisanje koda u PHP-u, testiranje skripti, korišćenje i rad sa Local serverom.

Cena obuke