Pagina aggiornata... Sabato, 20 gennaio 2024 * Tempo di caricamento 0.97 secondi
Link navigazione : Home telaioHome ~ Tutorial ~ Html » Iframe

..:: Iframe per accessori e gadget web ::..

Un iframe ci permette di visualizzare il contenuto di una pagina web dentro un'altra
pagina web, personalizzando le misure della larghezza e dell'altezza in base alle necessità,
quindi molto utili se non indispensabili per realizzare accessori e gadget

Spesso gli accessori e i gadget per pagine web hanno dei codici molto lunghi e in alcuni casi
sono divisi in due parti, una si scrive tra <head> e </head> e l'altra 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, quindi realizzarli in una pagina esterna e visualizzarli tramite
una "finestra" personalizzata è davvero comodo e utile

* Opzione inevitabile per chi vuole realizzare accessori e gadget da far prelevare

Esempi live...

Gadget web con dolci bimbe che ci indicano
la stagione attuale in una finestra/iframe che
misura 245 pixel in larghezza e 200 in altezza
ma si possono fare anche più piccoli...
l'orsetto con data e ora è in un iframe di
146 pixel in larghezza e 50 in altezza


Il codice base per un iframe è questo:

<iframe src="https://url pagina" frameborder="0" scrolling="no" width="***" height="***" ></iframe>


<iframe - Apertura tag

src="https://url pagina" - indirizzo web della pagina che si desidera visualizzare

* frameborder="0" - parametro per i bordi

scrolling="no" - parametro per lo scroll (Per accessori e gadget si esclude impostando "no")

width="***" - parametro per la misura in larghezza della "finestra/iframe"

height="***" - parametro per la misura in altezza della "finestra/iframe"

></iframe> - chiusura tag

* Il parametro per il bordo frameborder="0" deve essere inserito affinché non
si visualizzi un antiestetico bordo rientrato (inset) come in questo esempio



Vediamo come procedere...

Se vogliamo realizzare un accessorio o un gadget web per il nostro sito creiamo una nuova pagina,
a cui daremo un nome indicativo di ciò che contiene, datario, calendario, almanacco, ecc, ecc.
(* Una cartella apposita per queste utilità è consigliata, sarà più semplice trovare in seguito le pagine
per aggiornamenti e/o modifiche e ovviamente avremo lo spazio del sito più ordinato *)

Iniziamo con lo style della pagina, imposteremo il colore di sfondo che abbiamo nelle altre pagine
del sito o il colore di sfondo della pagina in cui vogliamo inserire l'accessorio/gadget e proseguiamo
con le classi di eventuali contenitori, div o table, che ospiteranno i codici

<style type="text/css">
body {background-color:#******;
margin-top: 0 px;
margin-left: 0 px;

}
//Contenitore div
div#contenitore {
border:1px solid #******;
background-color: #******;
text-align: center;
width: ***px;
height: ***px;
[***]
margin-left:auto;
margin-right:auto;

}
// Contenitore table
table.contenitore {
border:1px solid #******;
background-color: #******;
text-align: center;
width: ***px;
height: ***px;
[***]
margin-left:auto;
margin-right:auto;

}
</style>

* Con i parametri margin-top: 0 px; margin-left: 0 px; inseriti nel tag body
impostiamo la posizione del contenuto nella pagina in alto a sinistra senza margini

* [***] Aggiungiamo i parametri per il testo, font-family:nome font; font-size : **px; color: #******;

* Con i parametri margin-left:auto; margin-right:auto; inseriti nei contenitori,
ne impostiamo la posizione corretta nella pagina e del contenuto

Se non volete utilizzare contenitori inserite i parametri per il testo nella classe css del body,
aggiungendo il parametro text-align:center; si annullerà margin-left: 0 px; eliminatelo,
il contenuto si visualizzerà centrato e senza margine all'inizio della pagina (top)

Scriviamo o incolliamo i codici necessari per l'accessorio/gadget che vogliamo realizzare
facendo attenzione a dove occorre inserirli affinché funzionino correttamente,
cioè se tra <head>***</head> o tra <body>***</body>

Possiamo realizzare accessori e gadget utilizzando solo i contenitori, contenitori
e immagini o realizzare delle basi grafiche come sfondo per i contenitori dei codici.

Salviamo la pagina e mettiamola online, se lavorate direttamente sul sito vi basterà salvare e
andare in anteprima per aprirla nel browser, se invece lavorate con un editor html dovrete fare
il trasferimento in fpt tramite l'editor stesso o caricando il file da pc al vostro hosting

Copiate quindi url dalla barra del browser o scrivetela voi per inserirla nel tag iframe




Per le misure in larghezza e altezza regolatevi in base ai contenitori o all'eventuale base grafica
fate delle prove con uno sfondo a contrasto nella pagina in cui avete scritto il codice iframe

* Cliccate sull'immagine per ingrandire e vedere maggiori dettagli



Con alcuni editor è possibile visualizzare il lavoro in due finestre, una con il codice e
l'altra con l'anteprima, è comodo perché si fa prima a settare le misure, inoltre c'è la possibilità
di sistemare le dimensioni della "finestra" direttamente con il mouse cliccando sui puntini neri
che vedete nello stamp, io uso un editor obsoleto e lo dovrò cambiare, appena ne trovo
uno gratuito, che abbia queste caratteristiche e funzioni con ogni tipo di linguaggio vi avviso^^
altrimenti c'è Adobe Dreamweaver ma costa parecchio...

E abbiamo finito, sistemate le misure possiamo incollare nella pagina il codice dell'iframe
nel punto in cui vogliamo far visualizzare il nostro accessorio/gadget

Realizzare accessori e gadget da far prelevare

Piccola premessa per chi gestisce un blog o un forum, per realizzare accessori/gadget
per pagine web è necessario uno spazio hosting, cioè un sito web in cui creare le pagine dei vari lavori,
ce ne sono diversi che offrono spazio free, io ho lavorato solo su Altervista e mi sono trovata sempre bene,
tanto spazio gratuito, tanti accessori e utilità per gestire al meglio il sito, se volete approfondire
e creare un account visitate il mio sito dedicato alla piattaforma Un sito su Altervista
Quindi, si crea una pagina per ogni accessorio o gadget e si procede come descritto sopra, ma nella classe
css del body non potremmo inserire un colore di sfondo, le pagine dovranno essere "trasparenti"
affinché si possano utilizzare su qualsiasi sfondo, sopratutto se i lavori non hanno
una base con contorni definiti, tipo una tag grafica, una table o un div con bordi e sfondo

* Ecco un esempio pratico


Come potete vedere nel primo esempio, se la pagina che contiene il lavoro
si lascia bianca o si inserisce un colore di sfondo l'effetto non è gradevole, quindi
modificheremo il parametro con: background-color=transparent;

Table con bordo e sfondo

Con i contenitori che hanno bordi definiti non ci sono problemi,
basterà fare attenzione alle misure dell'iframe

Nel codice dell'iframe, solo a favore di Internet Explorer ora Microsoft Edge, aggiungeremo
il parametro allowtransparency="true" altrimenti si visualizzerà comunque uno sfondo bianco




Una volta realizzati i vari accessori/gadget occorre preparare una pagina
in cui mostrarli, se vi serve potete leggere i tutorial Pagina anteprima gadget e
Textarea per scrivere il codice iframe in modo che si possa prelevare

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 questo tutorial... Grazie ^_^




100%
Voti totali: 11
Rating... 5





Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^

Nickname
Home page
B i U   ^_^ o_O O_O *_* Gif...

  

I vostri commenti in questa pagina...


Lula ~ HomePage
15/02/2024 15:32:39
Ciao cara come stai? Spero bene sono passata per un saluto veloce ♥
Penelope
21/01/2024 23:01:40
Cara Grazia WordPress è sicuramente la scelta migliore che si possa fare per avere uno spazio professionale semplice da gestire, conosco la piattaforma piuttosto bene e so che è anche molto versatile, per il mio telaio però preferisco un sito tradizionale mi piace trafficare con i codici ^_^ Un abbraccio forte a te
Grazia ~ HomePage
21/01/2024 08:21:23
Buongiorno e buona domenica Penelope! ❤️ Sai, io adoro come te i siti statici, ma per quel che riguarda gli spazi che personalmente costruisco con WordPress, sono tutti realizzati con software esterni acquistati di editing tecnico-grafico, nel mio caso non utilizzo le basi pronte fornite da Altervista, ma decido ogni singolo componente (anche la struttura interna delle pagine ecc.). Avevo bisogno di un blog per argomentare e WordPress era la scelta più professionale a disposizione! È sempre un piacere passare a trovarti, un abbraccio forte forte a te e ai ragazzi ed a presto
Penelope
20/01/2024 22:57:04
Grazie carissima Grazia i tuoi complimenti sono davvero graditi, gli iframe sono una grande risorsa web e capire come utilizzarli al meglio può essere molto utile, spero ^_^ ho provato ad utilizzare WordPress con Altervista ma non fanno per me i cms, preferisco un sito indipendente da codici preimpostati Un abbraccio forte
Grazia ~ HomePage
19/01/2024 16:27:52
I nostri adorati iframe... :) Complimenti per la chiarezza, mi è piaciuto molto come hai descritto i vari passaggi, sei stata come sempre bravissima! Chi utilizza WordPress (ad es. su Altervista) ha la comodità di un blog e la possibilità anche di caricare pagine web complete, per questo lo adoro, c'è pure l'accesso FTP alla cartella dei contenuti, volendo...♥ Ma i siti prettamente statici hanno sempre il loro fascino....un abbraccio carissima!


~ Pagina visitata da 5728 utenti


 H: 
Buon Inverno !





* 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...



Gif  & co... Penelope ♥


Pagina Facebook
del telaio...




 

I vostri messaggi...

Lula
15/02/2024 15:32:39
Ciao cara come stai? Spero bene sono passata per un saluto veloce ♥
ೡ Scritto in... Iframe
 
Grazia
07/02/2024 07:45:12
Ciao Penny cara, mentre continuo l'interminabile lavoro per il mio sitino nuovo, sono passata a lasciarti un salutino veloce ♥ Spero sia tutto ok :) Cerco di fare, nei limiti delle mie possibilità, molte cose in contemporanea, avendo tante passioni (a proposito, grazie del tuo voto alla mia poesia su Instagram ♥ ) e quindi sono come te sempre di corsa, ma le amiche vengono prima di tutto. Un abbraccio e mille complimenti come sempre!
ೡ Scritto in... Il telaio di Penelope...
 
Grazia
27/01/2024 08:50:44
Ciao Penny cara, sono passata per un salutino e per augurarti buon sabato ♥ Mentre lavoro con SharepointDesigner al nuovo spazio che ti dicevo di recente, un giro di saluti tra le amiche fa sempre piacere. Bacioni ♥
ೡ Scritto in... Il telaio di Penelope...
 
Penelope
21/01/2024 23:01:40
Cara Grazia WordPress è sicuramente la scelta migliore che si possa fare per avere uno spazio professionale semplice da gestire, conosco la piattaforma piuttosto bene e so che è anche molto versatile, per il mio telaio però preferisco un sito tradizionale mi piace trafficare con i codici ^_^ Un abbraccio forte a te
ೡ Scritto in... Iframe
 
Grazia
21/01/2024 08:21:23
Buongiorno e buona domenica Penelope! ❤️ Sai, io adoro come te i siti statici, ma per quel che riguarda gli spazi che personalmente costruisco con WordPress, sono tutti realizzati con software esterni acquistati di editing tecnico-grafico, nel mio caso non utilizzo le basi pronte fornite da Altervista, ma decido ogni singolo componente (anche la struttura interna delle pagine ecc.). Avevo bisogno di un blog per argomentare e WordPress era la scelta più professionale a disposizione! È sempre un piacere passare a trovarti, un abbraccio forte forte a te e ai ragazzi ed a presto
ೡ Scritto in... Iframe
 
Penelope
20/01/2024 22:57:04
Grazie carissima Grazia i tuoi complimenti sono davvero graditi, gli iframe sono una grande risorsa web e capire come utilizzarli al meglio può essere molto utile, spero ^_^ ho provato ad utilizzare WordPress con Altervista ma non fanno per me i cms, preferisco un sito indipendente da codici preimpostati Un abbraccio forte
ೡ Scritto in... Iframe
 
Grazia
19/01/2024 16:27:52
I nostri adorati iframe... :) Complimenti per la chiarezza, mi è piaciuto molto come hai descritto i vari passaggi, sei stata come sempre bravissima! Chi utilizza WordPress (ad es. su Altervista) ha la comodità di un blog e la possibilità anche di caricare pagine web complete, per questo lo adoro, c'è pure l'accesso FTP alla cartella dei contenuti, volendo...♥ Ma i siti prettamente statici hanno sempre il loro fascino....un abbraccio carissima!
ೡ Scritto in... Iframe
 
Grazia
12/01/2024 16:39:08
Buon pomeriggio, carissima Penelope, sono passata per lasciarti un salutino, io tutto bene, grazie di essere passata nel Taccuino! in questi giorni mi sto dedicando a tante attività creative/manuali e di scrittura...ad ogni modo spero che anche a te sia tutto ok! Passare qui è sempre un piacere. Un abbraccio forte ed alla prossima ♥
ೡ ...commentario
 
Lula
11/01/2024 10:50:29
Ciao carissima Penny, auguri di buone feste passate. Spero tu le abbia trascorse con serenità e in salute! io dietro ai fornelli e ai bimbi. ma sono felice^^ anche se un po' stanca e con la schiena a pezzi ^^Un abbraccio!!!
ೡ Scritto in... Il telaio di Penelope...
 
Grazia
03/01/2024 10:40:42
Ciao carissima Penny, auguri di buon anno a te e ai ragazzi anche qui :) Sono venuta a prendere una giffina per la grafica nuova del Taccuino ♥ Grazie mille un abbraccio forte
ೡ Scritto in... Il telaio di Penelope...
 

Referer...



Gestisci le opzioni di privacy