Ciao,
in questa pillola cercherò di di definire ( potete trovare le spiegazioni compete su html.it ) in grandi linee che cosa sia un "frame", un "iframe" e un "frameset" siccome
ho notato che più volte sul forum ci sono discussioni inerenti proprio alle differenze tra quest'ultimi e
sul loro utilizzo. Oltre a definire questi elementi che possono comporre una pagina web , inerisco alcune
utlity e suggerimenti per migliorarne l'utilizzo.
Iframe
Gli iframe sono degli elenti che vengono inseriti in una pagina web creando come una sub-pagina nella pagina
principale nella quale sono inseriti. Gli iframe sono molte volte utilizzati come "location" per lo scorrere
delle pagine web di un sito per avere il menù, il tiolo o qualche altro componente della pagina presente in
ogni pagina dal fatto che le pagine "appaiono" nell'iframe .
Questo non è comunque l'unico utilizzo degli stessi ma uno dei tanti.
Compatibilità : con tutti i browser trantte Netscape Navigator 4 ma orami sta scomparendo come browser
Passiamo ora alla struttura e creazione di essi :
- i tag che ne caratterizzano la creazione e li delimitano sono <iframe> e </iframe>
- per indicare la pagina che deve apparire nel iframe bisogna aggiungere :
codice:
<iframe src="pagina_contenuta_nell'_iframe></iframe>
- per stabilire il nome dell'ifame la comosizione di esso è :
codice:
<iframe src="pagina_contenuta_nell'_iframe name="iframe"></iframe>
- per stabilire le dimensioni dell'iframe in altezza e largeìhezza come sempre :
codice:
<iframe src="pagina_contenuta_nell'_iframe name="iframe" width="100px" height="100px"></iframe>
- per stabilirne lo scrolling, ovvero se permettere lo scrolling all'iframe bisogna aggiungere :
codice:
scrolling="no" // se non si vuole permettere lo scrolling dell'iframe
scrolling="yes" // se si vuole che la scrollbar appaia sempre in ogni caso
scrolling="auto" // se si vuole che la barra appaia solo quando necessario
- per sabilirne i bordi :
codice:
frameborder="0" // nessun bordo al iframe
frameborder="1px" // l'iframe ha un bordo di un pixel
- per sabilire lo spazio dal top e dal bottom:
codice:
hspace="0" vspace="0" // impostate a 0
Questa è la struttura fondamentale per "costruire " un iframe nel proprio sito, ma l'utilizzo è a libero arbitrio
del webmaster a seconda delle sue esigenze e capacità
N.B.
Perchè una pagina appaia nel iframe :
codice:
<iframe src="pagina_contenuta_nell'_iframe name="iframe" width="100px" height="100px"></iframe>
bisogn ricordarsi di mettere nei link per le pagine che devono apparire in esso il target con il nome dell'iframe
e quindi in questo caso specifico così :
Dopo aver spiegato cosa sono in generale gli iframe farò degli esempi sul loro utlizzo pratico e su vari
"trucchetti " per il loro utilizzo nella pagina web presi da varie fonti
Un iframe al centro di una tabella
codice:
<table border="1" width="100%">
<tr>
<td width="33%"></td>
<td width="33%"></td>
<td width="34%"></td>
</tr>
<tr>
<td width="33%"></td>
<td width="33%">
<iframe src="pagina_contenuta_nell'_iframe name="iframe" width="100%" height="100%"></iframe>
</td>
<td width="34%"></td>
</tr>
<tr>
<td width="33%"></td>
<td width="33%"></td>
<td width="34%"></td>
</tr>
</table>
Ricaricare automaticamente un iframe
tra <head> e </head> della pagina contenente l'iframe
codice:
<script>
function aggiorna (){
parent.nomeiframe.location.reload();
}
setTimeout (aggiorna(),3000);
</script>
e nel <body>
codice:
<body onLoad="aggiorna()">
Ricaricare l'iframe e la pgina che lo contiene
tra <head> e </head> della pagina contenete l'iframe
codice:
<script>
function aggiorna (){
parent.nomeframe.location.reload();
location.reload();
}
setTimeout (aggiorna(),3000);
</script>
e nel <body>
codice:
<body onLoad="aggiorna()">
e ci sono poi altre varie utility da applicare agli iframe che per brevità posterò in futuri aggiornamenti della
pillola e mano a mano che troverò o farò !
I Frame e i Frameset
I frame sono un elemento di una pagina web che solo usati all'interno di un frameset.
Cos'è però un frameset ?
Un frameset è come la diviione di una pagina in più reparti contenenti pagine e documenti diversi; è come la
suddivisione di una pagina in altre sue pagine più piccole che sono "ferme" sulla pagina. I frameset sono
molte volte utlizzati per avere in ogni pagina o il menù o il titolo del sito per comodità sia della navigazione
che della costruzione di esso. Infatti come accade con l'iframe i fari frame che compongono il frameset sono
elementi a se che sono uniti in una pagina e un di essi può cambiare contenuto e gli altri rimangono "fermi"
come fissi sulla pagina. Un framset può essere immaginato come quando ad esempio sul nostro pc facciamo:
start >> cerca >> e ci appare una finestra suddivisa in due :
in una parte a sinistra dove c'è l'input text ove inserire la parola da cercare , e la parte di destra dove
scorre il contenuto e i risultati della ricerca.
Passiamo ora alla costruzione di un frameset:
la struttura più semlpice di un framset è la pagina divisa in due orrizontalmente e si forma così :
codice:
<html>
<head>
<title>Pagina con frame 1</title>
</head>
<frameset rows="*,*">
<frame name="superiore" src="Nuova_pagina_1.htm">
<frame name="inferiore" src="Nuova_pagina_2.htm">
</frameset>
</html>
come si vede dal codice il frameset viene "delimitato" da : <frameset> e </frameset>
- rows="*,*" idica la dimensioni dell'frame
- i frame si "delimitano" a loro volta da : <frame> e </frame>
- Ogni frame che compone il frameset si costituisce così :
codice:
<frame name="superiore" src="Nuova_pagina_6.htm">
dove "name" è il nome, scr="" è il percorso per il contenuto o la pagina del frame
Per perfezionare il codice bisogna inserire una frase per avvertire un utente che non ha la possibilità o la
compatibilità per vedere il frema. A tal proposito si inserisce un tag <noframes> che contiene ciò verrà visulizzato
caso non si vedesse il frameset. Il codice completo è :
codice:
<noframes>
<body>
La pagina corrente utilizza i frame. Questa caratteristica non è
supportata dal browser in uso.</p>
</body>
</noframes>
dove <noframes> e </noframes> delimitano il contenuto della visulaizzazione , <body> contiene il corpo del messaggio
che verrà mostrato all'utente e poi chiuso </body>.
Vediamo ora un frameset che divide la pagina in vericale :
codice:
<html>
<head>
<title>Nuova pagina 8</title>
</head>
<frameset cols="26%,*">
<frame name="sinistra" src="Nuova_pagina_10.htm">
<frame name="destra" src="Nuova_pagina_9.htm">
<noframes>
<body>
La pagina corrente utilizza i frame. Questa caratteristica non è
supportata dal browser in uso.</p>
</body>
</noframes>
</frameset>
</html>
Le vare parti del codice sono uguali a quello di prima cambia solo la posizione dei singoli frame .
Proprietà
Per personalizzare un frameset si possono cambiare i colori di sfondo , dei bordi , se permettere o no lo scrolling ...
cambiare il bordo
Per cambiare il colore e le dimensioni del brodo di un frame singolo bisogna inserire nel frameset nel frame che
si vuola uno style css :
codice:
style="border-left: 1 solid #00FFFF; // bordo sinistro ( spessore - tipo - colore )
border-right: 1 solid #800080; // bordo destro ( spessore - tipo - colore )
border-top: 1 solid #C0C0C0; // brodo in alto ( spessore - tipo - colore )
border-bottom: 1 solid #00FF00" // bordo basso ( spessore - tipo - colore )
>
Distanza e spazio tra due frame di un framset
Bisogna aggiungere alla costruzione del frameset :
codice:
<frameset framespacing="0" border="0" cols="26%,*" frameborder="0">
Dove framespacing è lo spazio tra i due frame e frameborder e il bordo dei due frames
Permettere o no lo scrolling
Nel singolo frame che compone il frameset inerire :
codice:
scrolling="no" // se non si vuole permettere lo scrolling dell'iframe
scrolling="yes" // se si vuole che la scrollbar appaia sempre in ogni caso
scrolling="auto" // se si vuole che la barra appaia solo quando necessario
ecc... con le personalizzazioni
N.B.
Perchè un link di un frame venga visulazizzato in una latro frame del frameset bisogna fare nei link :
Trucchetti
Una scollbar per due frame :
tra <head> e </head> di uno sei un frame
codice:
<script langauge="JavaScript">
var var_down = 0;
function syn()
{
if(navigator.appName == "Netscape") {
down = window.pageYOffset}
else{
down = document.body.scrollTop;}
if(down != var_down)
{
parent.nomealtroframe.scrollTo(0,down);
var_down = down
}
}
setInterval("syn()",10);
</script>
Aprire due frame con un solo click : (by html.it )
tra <head>
codice:
<SCRIPT>
<!--
function twoinone(nr){
if (nr==1){
parent.framealto.location.href="centrale.htm"
parent.framecentrale.location.href="alto.htm"
}
if (nr==2){
parent.framealto.location.href="alto.htm"
parent.framecentrale.location.href="centrale.htm"
}
}
//-->
</SCRIPT>
e nei link :
Ricaricare automaticamente due frame :
tra <head>
codice:
<script>
function aggiorna (){
parent.nomeframe.location.reload();
location.reload();
}
setTimeout (aggiorna(),3000);
</script>
e nel body
codice:
<body onload="aggiorna()">
Ecco, queste sono le utlity sui frame che ho trovato e fatto per il momento ma ne arriveranno tante altre con i
vari aggiornamenti che farò!
ACCETTO CRITICHE E COMMENTI !
ciao e alla prossima
Rispondi quotando
