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

..:: Iframe per sito 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à.

Molto utile per gli accessori e i gadget dei nostri spazi che spesso hanno codici lunghi
e divisi tra header e body, come ho spiegato nel tutorial Iframe per accessori e gadget, ma
anche una grande risorsa per un sito web che diventa più comodo e veloce da gestire

Prima di saper lavorare in php ero la prima fan dell'iframe ^_^ è davvero comodo perché ogni
sito web ha una bella serie di immagini/grafica, link, accessori, gadget e via dicendo che compongono
le pagine e dover riportare tutte queste cose in tutte le pagine del sito è un gran lavoro inoltre diventano
anche molto pesanti da visualizzare perché logicamente deve essere processato parecchio codice
e poi ovviamente c'è l'incubo di dover cambiare grafica e/o struttura quando vogliamo rinnovare...

Un esempio pratico e il codice per l'iframe

Ogni sito web ha la sua Home suddivisa in una o due colonne per link, accessori e gadget ed una parte
più grande per i contenuti di presentazione e anteprima, ed è in questa parte che possiamo utilizzare
un iframe, ovvero una finestra con dimensioni specifiche per visualizzare i contenuti di tutte
le pagine del sito, ho preparato un mini sito per farvi capire meglio di cosa sto parlando, si aprirà
in un popup così avrete anche questa pagina per identificare meglio le parti della struttura
Mini sito prova iframe

Anche se realizziamo il sito con delle basi in grafica avremo bisogno di contenitori,
div o table per poterle visualizzare e creare la struttura, procediamo come siamo abituati
a fare di solito aggiungendo il tag per l'iframe nel contenitore che ospiterà i contenuti,
nell'esempio ho utilizzato diversi nomi, "Spazio home - corpo pagina - spazio contenuti"
perché ognuno di noi ha un suo modo di definire gli spazi del proprio sito

In questa table sono visibili i contorni dei vari spazi che compongono più o meno un sito
e la finestra iframe che ci permetterà di visualizzare i contenuti di tutte le altre pagine

Spazio header
Spazio home - corpo pagina - spazio contenuti...

Iframe
Spazio colonna
Spazio footer


Questo è il codice che ci occorre per l'iframe




<iframe - apertura del tag

name="nome_iframe" - parametro essenziale per l'apertura delle pagine, deve essere inserito tramite il tag targhet (target="_nome_iframe") in ogni link delle pagine che si vogliono far visualizzare tramite l'iframe

src="https://url_sito/pagina_base.htm" - indirizzo (url) della pagina che si visualizzerà all'entrata del sito, la pagina della home

frameborder="0" - specifica se visualizzare o meno un bordo attorno all'iframe,
è un attributo deprecato ma ancora supportato in tutti i principali browser. Non è supportato in HTML5, e se si vuole stare tranquilli si può impostare un valore con il tag border nei css
* Prima o poi si potrà impostare esclusivamente tramite css

marginwidth="0" - con un valore impostato in pixel si può stabilire uno spazio alla sinistra e destra fra il bordo dell'iframe ed il suo contenuto

marginwidth="0" - con un valore impostato in pixel si può specificare l'altezza dello spazio tra la parte superiore e inferiore dei bordi dell'iframe e il suo contenuto

scrolling="auto" - attributo per le barre di scorrimento, si visualizzano quando il contenuto della pagina è maggiore alle misure impostate nell'iframe, per lo scroll verticale non ci sono problemi ma occorre fare attenzione alle dimensioni che occupa il contenuto delle pagine in larghezza altrimenti si visualizzerà anche lo scroll alla base

width="000" - definisce la misura in larghezza dell'iframe, è una misura fissa quindi và impostata tenendo conto della misura in larghezza dello spazio stabilito per i contenuti principali (Spazio home)

height="000" - definisce la misura in altezza dell'iframe, in questo caso occorre regolarsi in base a cosa si è inserito nella/e colonna/e e ai contenuti delle pagine che si apriranno nell'iframe, se impostate una misura molto piccola ma i contenuti sono corposi sarà molto scomodo poter leggere e/o visualizzare tutto dovendo scrollare di continuo ma impostando una misura troppo grande avrete tanto spazio vuoto

></iframe> - chiusura del tag


Vediamo come procedere

1) Per prima cosa dobbiamo realizzare la grafica (se preferite altrimenti si può usare solo html e css) e la struttura del sito, scriviamo il nostro codice, evitate style css scritto in linea altrimenti avrete comunque il problema delle modifiche future ed un codice disordinato, nel menu html trovate i vari tutorial per scriverli senza difficoltà, quindi stabilita la misura in larghezza che deve occupare la parte per i contenuti, scriviamo una nuova pagina che sarà la base della nostra "Home"

2) Scriviamo il codice per la pagina che sarà la base della "Home", il nome di questa pagina sarà
il nome dell'iframe e dovrà essere riportato in ogni link che si vuole far aprire nella "finestra"
per cui meglio un nome semplice tipo, base, ante o appunto home

Impostiamo lo sfondo della pagina con il colore principale usato in fase di progettazione,
(body {background-color:#000000;) copiamo nello style anche gli altri parametri css scritti,
vi consiglio assolutamente di scrivere i css di questa pagina in un file esterno (css file esterno)
perché sarà lo style di tutte le pagine e lo potrete richiamare con una riga di codice

Scriviamo una frase di prova e salviamo la pagina, scriviamo il codice dell'iframe nello spazio
dedicato con il nome scelto e il link della pagina base, settiamo la misura in larghezza stabilita
e una misura per l'altezza che si potrà variare in seguito tenendo conto dei contenuti delle pagine e
dell'effetto che avrà all'entrata nel sito, cioè se con il contenuto della/e colonna/e arriviamo a
800 pixel non esageriamo con la misura nell'iframe altrimenti poi ci sarà tanto spazio vuoto
Non ci resta che controllare online o tramite l'editor html se la pagina base si visualizza per bene

3) Possiamo quindi completare con i contenuti la nostra pagina base e scrivere le altre pagine,
se inizialmente avete difficoltà per regolarvi con lo spazio in larghezza per evitare l'antiestetica
barra/scroll orizzontale nell'iframe scrivete e inserire i contenuti in una table con la misura
in larghezza impostata per l'iframe, se avete già delle pagine pronte, con un po' di pazienza vi
basterà modificarle

* Nel fondo di ogni pagina è utile scrivere il link di ritorno alla pagina base (Pagina Home)
e siccome è possibile che le pagine vengano aperte all'esterno dell'iframe inserite anche una nota
con il link del sito, ad esempio:
"Nome Pagina - parte integrante del sito <a href="https://url_sito/">Nome Sito</a>"

4) Scriviamo i link delle pagine
Scriveremo così tutti i link delle pagine che si devono aprire nell'iframe




*Nelle pagine che si aprono nell'iframe invece, per i link di altri spazi o pagine che non si devono
aprire nell'iframe scriveremo il link con target="_blank" ovvero in una nuova finestra



# Se vi fa piacere avere dei contenuti o dei gadget che siano visibili sempre, potete inserirli sia sopra che sotto l'iframe, ad esempio nella parte superiore, si può scrivere nome e frase di benvenuto
nel sito, e/o un datario con saluto e nella parte inferiore una chat per i messaggi

Ovviamente un sito strutturato con un iframe non sarà comodo sui dispositivi mobili,
che devono essere molto "elastici" e semplificati considerando le misure dei vari dispositivi,
quindi o avete un sito tipo il telaio, che difficilmente si consulta tramite telefono o tablet
o in base a ciò che proponete realizzate anche una versione mobile

Per concludere...

Chi ha già un sito con parecchie pagine si dovrà mettere con un po' di pazienza a riscriverle
per sistemare i contenuti nello spazio stabilito ma poi sarà molto comodo effettuare modifiche e
aggiornamenti, per chi invece sta iniziando ora considerate l'idea di questa opzione

Io l'ho usato per tanti anni e mi sono trovata benissimo sarà che ritengo molto scomodi i siti
in cui ogni pagina si apre in una nuova finestra, mi piacciono le cose ordinate e ben coordinate,
se non siete molto pratici con la scrittura di pagine web o avete poco tempo l'alternativa è un cms
ovvero un sito/blog tipo WordPress con pagine pronte in cui dovrete solo scrivere

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: 1
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...

  


~ Pagina visitata da 109 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