I Frames (le cornici)

0
52

Abbiamo visto nella lezione precedente come poter interagire con i visitatori del sito tramite un modulo per la spedizione dei dati. Vediamo adesso di trattare un argomento piuttosto discusso e contrastato dalle varie filosofie del fare web, si tratta dei frames: croce e delizia di molti.

I frames permettono di suddividere la stessa pagina web in più pagine indipendenti fra di loro, questa indipendenza consente di avere parti fisse come per esempio il menù o le intestazioni e parti mobili come possono essere invece le varie pagine che si alternano all’interno della stessa struttura. Dicevo croce e delizia perchè sui frames se ne sentono dire davvero molte, alcune delle quali non corrispondono assolutamente a verità.

Se i frames sono stati inventati a partire da html 3.2 ed ancora oggi in xhtml 1.1 sono ammessi un motivo ci dovrà pur essere o sarebbero stati deprecati come è accaduto a molti altri elementi di html. E’ vero che è possibile ottenere risultati identici, con l’uso dei <div> ed è altrettanto vero che se il sito deve rispettare certe regole di accessibilità, i frames andrebbero evitati.

I Frames (o cornici) altro non sono che una suddivisione della finestra principale del browser in modo tale che nella stessa ci siano due o più finestre. Quante e come disporle dipenderà soltanto da voi, dal vostro progetto e dalla sua organizzazione. Non esistono limiti se non quelli del buon gusto e della praticità d’uso che tradotto in termini pratici significa: semplicità di navigazione.

In molti casi sono sufficienti due sole cornici (frames), per esempio una laterale (o superiore) dove inserire il menù di navigazione e l’altra, la vera e propria finestra di navigazione, quella principale. Per dare meglio l’idea vediamo un paio di possibili esempi, con menù laterale e con menù superiore:

frame Finestra Principale

 

frame Finestra Principale

 

Quale dei due schemi adottare dipenderà soltanto da voi e da come avete deciso di organizzare il sito, in qualsiasi caso sarà necessario creare una nuova pagina html che contenga al suo interno il solo codice per la struttura dei frames. Questa nuova pagina richiamerà all’interno di se stessa tutte le altre pagine (in questo caso due) che si disporranno affiancate verticalmente oppure orizzontalmente a seconda del tipo di struttura impostata. Di solito questa pagina si chiama index.html che è poi la pagina iniziale del sito ma qualsiasi altro nome per il nostro esempio andrà ugualmente bene.

Per prima cosa si preparano le due pagine che saranno richiamate dalla struttura: menu.html e principale.html, potete adoperare qualsiasi altro nome l’importante è ricordarsi di cambiare poi i riferimenti laddove io negli esempi avrò adoperato questi due nomi.

Se vi ricordate all’inizio di questo tutorial si è parlato del DOCTYPE DTD di inizio pagina che in questo caso dovrà cambiare da transitional o strict, a frameset.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”it” lang=”it”>
<head>
<title> Titolo della mia pagina Web con frames</title>
</head>
<body>
</body>
</html>

Portatevi col cursore subito sotto il tag </head> ed inserite il nuovo elemento <frameset> che serve per dichiarare una struttura a frames.

Avete capito bene, proprio dopo </head> e prima di <body>, i frames sono gli unici elementi che non vanno inseriti né dentro a <head> testa, né dentro a <body> corpo, della pagina web ma in mezzo, esattamente dove finisce la testa ed inizia il suo corpo.

L’elemento <frameset> è uno di quei tags che da soli non dicono niente, necessita di almeno uno dei suoi fondamentali attributi: rows o cols che servono rispettivamente per suddividere la struttura in righe o in colonne. Al suo interno, e prima della relativa chiusura </frameset> sono contenuti altri elementi di cui uno fondamentale: <frame> che serve per richiamare la pagina da incorporare nella struttura.

Supponendo di dover dividere la finestra in modo verticale adopereremo: <frameset cols=”130, *”> assegnando così 130 pixel della finestra del browser al frame piccolo laterale per il menù, ed il restante spazio (* significa tutto il resto) al frame principale, potremo adoperare anche valori espressi in percentuale <frameset cols=”25%, 75%”> nel caso in cui si debbano rispettare delle misure proporzionate alla risoluzione video del visitatore.

Una volta stabilite nel frameset le dimensioni della suddivisione, si dovranno richiamare i due files preparati precedentemente che in questo caso sono menu.html e principale.html Questo il codice completo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”it” lang=”it”>
<head>
<title> Titolo della mia pagina Web con frames</title>
</head>
<frameset cols=”130, *”>
<frame name=”menu” id=”menu” src=”menu.html” />
<frame name=”princ” id=”princ” src=”principale.html” />
</frameset>
<body>
</body>
</html>

L’elemento <frame> ha diversi attributi, alcuni di questi sono indispensabili: nameid che attribuiscono un nome al frame in modo da poterlo usare per richiamare al suo interno una pagina da un link, vedremo più avanti come fare con target, src(source) che richiama la pagina html vera e propria. scrolling con: auto, yes o no per la barra di scorrimento laterale, se non specificato si intende auto. frameborder con valori 0 o 1 per nascondere o mostrare il bordo. marginwidth e marginheight per la distanza in pixel dal margine laterale sinistro e distanza in pixel dal margine superiore. Vediamo un esempio completo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”it” lang=”it”>
<head>
<title> Titolo della mia pagina Web con frames</title>
</head>
<frameset cols=”130, *”>
<frame name=”menu” id=”menu” src=”menu.html” />
<frame name=”princ” id=”princ” src=”principale.html” />
<noframes>
<body>
<p> Testo visto da chi non supporta i frames</p>
</body>
</noframes>
</frameset>
</html>

Abbiamo introdotto l’elemento <noframes> che si adopera all’interno di frameset e serve per quei browser che non supportano i frames, soltanto in quel caso sarebbe interpretato il codice al suo interno: body ed il suo contenuto altrimenti ignorati.

Se avete preparato le tre pagine non resta che provare a vedere cosa succede, voi richiamate soltanto quella con la struttura, le altre due saranno gestite dalla struttura stessa.

Se avete fatto tutto correttamente dovreste avere le due pagine visualizzate contemporaneamente, una di fianco all’altra nella stessa finestra come nell’esempio che ho messo in questo link.

Ricordatevi i nomi che avete assegnato ai vostri frames, e per nomi intendo quelli specificati con l’attributo name e id, saranno questi nomi che se dichiarati all’interno dell’attributo target che abbiamo visto per i links, decideranno su quale dei due frames aprire quanto associato al link stesso.

Su questo link è possibile vedere ben 18 schemi di frames diversi e selezionare il codice html già pronto per quello che potrebbe essere la vostra struttura ideale, attenzione però che quel codice fa riferimento a html 4.01 e certi attributi non sarebbero validi per xhtml ma potrà sempre essere utile per avere un’idea.

Con questa lezione avete imparato a gestire il vostro sito adoperando più pagine web contemporaneamente. Molte persone manifestano una certa diffidenza per una gestione del sito con i frames, capisco che sia meno accessibile di uno senza frames e trovo qualsiasi altra motivazione non giustificata, c’è chi dice che i siti con frames non vengono indicizzati dai motori di ricerca, è vero ma a causa di una cattiva progettazione, provate ad andare su google e digitare nel box ricerca “fare pagine web” e guardate in quale posizione si trova web-link.it che è sempre stato fatto con frames.

Nella prossima lezione, vedremo come usare iframe.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

PS: vuoi imparare a usare l'HTML come un vero professionista in pochissimo tempo?

Segui il miglior video corso di HTML

corso HTML5

Impara la tecnologia che sta ALLA BASE del mondo Internet di oggi, in particolar modo se vuoi creare siti facilmente indicizzabili e responsive.

12345
33 Recensioni, aggiornato l'8 agosto 2018

CONDIVIDI
Articolo precedenteI Moduli o Forms
Prossimo articoloIframe (cornice interna)
La nostra redazione è costantemente impegnata nel ricercare fonti attendibili e produrre contenuti informativi, guide e suggerimenti utili gratuiti per i lettori di questo sito.

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here