Pagina aggiornata... Sabato, 09 settembre 2023 *
Tempo di caricamento
0.60
secondi
Link navigazione :
Home telaio ೡ Home ~ Tutorial ~ Html » Iframe - Finestre pagina personalizzate |
..:: Iframe ::..
Una delle tante piccole utilissime magie del web... "iframe" ovvero
uno speciale box che ci permette di visualizzare in modo assolutamente personalizzato
il contenuto di una pagina web in un qualsiasi punto del nostro spazio
Largamente utilizzati nel web sopratutto per postare gadget e accessori
ma anche per la realizzazione di siti web
Perché è necessario un iframe per postare un gadget o un accessorio web?
Molto spesso i gadget o gli accessori web hanno dei codici molto lunghi, in alcuni casi è anche necessario
dividere le parti, (parte tra <head> e </head> e parte tra <body> e </body>) alcuni script vanno
in conflitto con altri presenti nella pagina, altri ancora si possono postare una sola volta in una pagina,
per cui l'uso degli iframe diventa indispensabile, sia per chi li distribuisce che per chi li preleva,
specie se è poco pratico con la gestione dei codici.
Il codice base per un iframe è questo:
<iframe name="xx" src="http://url pagina web" frameborder="0"
marginheight="0" marginwidth="0" scrolling="no" width="xx" height="xx"
allowtransparency="true"></iframe> |
- Vediamo a cosa servono i vari parametri:
<iframe : apertura tag
name="xx" : parametro essenziale identificativo per l'apertura dei link se l'iframe è utilizzato
nella struttura di un sito, non necessario nella realizzazione di un gadget
src="http://url pagina web" : indirizzo web della pagina che si desidera visualizzare
frameborder="0" : parametro per i bordi
marginheight="0" marginwidth="0" : parametri per i margini
scrolling="no" : parametro per lo scroll, per i gadget si esclude impostando "no"
nella struttura di un sito si inserisce impostando "auto"
width="xx" height="xx" : larghezza e altezza dell'iframe in base alle esigenze di visualizzazione
allowtransparency="true" : strasparenza dell'iframe, parametro necessario per IE, nello style
della pagina in cui viene postato il gadget andrà inserito questo parametro:
body { background-color=transparent;}
(N.B.: Il parametro allowtransparency="true" non passa la validazione w3c)
></iframe> : chiusura tag |
Quando utilizziamo l'iframe per un gadget dobbiamo preoccuparci di inserire l'url esatto
della pagina in cui è inserito, impostare le esatte misure per la larghezza e l'altezza del gadget
nel caso in cui serva aggiungere il parametro per la trasparenza.
Lasciamo a "0" i parametri frameborder, marginheight, marginwidth, non cancellateli,
altrimenti si vedranno i contorni della "finestra" e l'effetto non sarà piacevole >_<'
Piccolo esempio...
Iframe completo
|
Iframe senza i parametri
frameborder, marginheight, marginwidth
|
- Nell'iframe completo, è inserito anche il parametro allowtransparency="true",
l'immagine usata non ha un bordo regolare (rettangolo) quindi senza
la trasparenza si visualizzerebbe uno sfondo bianco, se usate IE
lo vedete nel secondo iframe^^ |
Come procedere...
Prepariamo il nostro gadget e mettiamolo online in una pagina del nostro spazio, che deve essere
necessariamente un sito web, anche se postiamo i nostri lavori su un blog, possiamo creare un account
su un hostigh per siti, tipo Altervista che offre tanto spazio assolutamente gratuito...
^__________^ Guida dettagliata... || ||
Come dicevo, mettiamo online il nostro gadget e recuperiamo url della pagina,
andiamo nel pannello di controllo del nostro spazio, apriamo la pagina e copiamo direttamente
dalla barra del browser l'indirizzo web della pagina (url) quindi scriviamolo nel nostro codice iframe;
è sottinteso che eseguiremo questa procedura lavorando su una nuova pagina del nostro Editor html
<iframe src="http://url pagina gadget/accessorio"
frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="**"
height="**" allowtransparency="true"></iframe> |
Inseriamo le giuste misure negli appositi parametri "width="**" height="**"" dell'iframe
nel caso utilizziamo un immagine o una table con misure note ci basterà appunto riportarle nei parametri,
se invece, e può capitare, di non avere la certezza delle misure, possiamo dare un colore di sfondo alla pagina
in cui lavoriamo, togliere momentaneamente se lo abbiamo inserito il parametro allowtransparency="true"
e sistemare quindi le misure affinché siano precise.
- Nella maggior parte degli Editor html è presente l'opzione "Doppia visualizzazione" cioè
la pagina in cui si lavora è divisa in due parti, nella parte superiore si scrive il codice in quella inferiore
si visualizza il lavoro, agendo nella parte inferiore possiamo sistemare le misere del box^^

- Non ci resta che copiare il codice iframe nella pagina che metteremo online per poter prelevare i gadget^^
Rifiniamo il codice con due piccole stringhe che serviranno sia come credits che
per individuare facilmente il codice una volta postato in uno spazio:
<!-- Gadget by Tuo nome -->
<iframe src="http://url pagina web" frameborder="0"
marginheight="0" marginwidth="0" scrolling="no" width="**" height="**"
allowtransparency="true"></iframe>
<!-- Gadget by Tuo nome --> |
# Prelevate qui il codice base:
Possiamo inserire vari iframe in una pagina, senza esagerare però altrimenti diventa troppo pesante
e ci vorrà un secolo per visualizzarla utilizziamo una table per un'anteprima ordinata e gradevole ^_^
Potete leggere il tutorial qui ->

- Avremmo bisogno di una Textarea affinché il codice da prelevare... rimanga codice!
Un altro piccolo box magico, ecco la guida per il codice e i vari parametri:
Spero di essere stata chiara in tutti i passaggi ^_^
Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥
ೡ Dai un giudizio a questa guida... Grazie ^_^
|
Voti totali: |
9 |
Rating... |
5 |
|
Commentario...
Scrivi qui per lasciare un saluto, una richiesta di aiuto, un suggerimento o una critica ^_^
|
- Pagina visitata da 5435 utenti
|
H:
Buon Autunno
!
* Info sezione...
Mi farebbe molto piacere la condivisione
dei miei tutorial ma vi sarei anche molto grata
se evitaste di fare copia e incolla su altri spazi
del mio lavoro, linkate le pagine, avvisatemi
ricambierò senza problemi. Grazie ♥
..:: Basi ::..
..:: html ::..
..:: Script page ::..
..:: Script gadget ::..
Accessori e gadget del telaio...
..: Spazio web...
Realizzare e gestire un sito web
con l'hosting free più famoso...


Pagina Facebook del telaio... |
 |
|
|