Dopo aver trattato l'argomento di pagine dinamiche create in ASP della precedente lezione, che richiedono un server commerciale per la pubblicazione, in questa parleremo di pagine con FRAME che possono essere utilizzate anche nei server gratuiti.
Frame in inglese significa Struttura, ovvero pagine web che si raggruppano in una struttura e agevolano la gestione del sito in confronto alle pagine uniche.
FrontPage Express non é in grado di gestire nell'insieme un sito realizzato con Frame, ma questo non ci impedirà di poterlo utilizzare, certo non potremmo modificare tutta la struttura nell'insieme, ma non e un grave problema, anzi utilizzando i frame tutto il lavoro sarà più organizzato e gestibile.
Come le pagine ASP, anche i frame utilizza più pagine più una di gestione.
Nelle pagine in ASP tutte le pagine vengono incorporate e visivamente diventano una sola come la pagina di VolontariWEB.com che state leggendo, con i frame invece le pagine vengono si raggruppate in un insieme, ma sono scorribili separatamente, nel senso che una può stare ferma e l'altra scorrere verso il basso per poterla leggere, in pratica e come avere più siti su una sola finestra.
Per renderci conto di come si presenta un sito realizzato con i frame <Clicca qui> potrete notare che sono presenti tre finestre, quella in verde superiore, quella blu a sinistra e quella bianca a destra, questo e un tipico utilizzo di un sito con frame, potete scorrere le due pagine bianca e blu indipendentemente l'una dall'altra.
Come abbiamo detto nella lezione precedente, lo scopo non é quello di mostrare più pagine insieme o più siti, lo scopo e semplicemente quello di poter organizzare il lavoro, con un comodo menu unico invece che inserito su ogni pagina, con il conseguente problema che se dovessimo modificare qualcosa dovremmo ritoccare una per una tutte le pagine.
Quindi se non abbiamo la possibilità di pubblicare le pagine in ASP, i frame sono la nostra salvezza, anche pensando ad un domani, nel senso che se un domani vorreste utilizzare gli articoli con pagine ASP o altri livelli di programmazione, gli articoli saranno pronti per poter essere inclusi senza alcuna modifica, se invece utilizzerete pagine singole, inserendo in queste, menu, banner e articoli, ad ogni necessaria modifica dovrete ritoccare tutte le pagine con una notevole perdita di tempo.
Più sotto in questo articolo troverete vari esempi di pagine con FRAME da me realizzati che potrete prelevare e utilizzare gratuitamente per il vostro sito, non dovete fare altro che inserire i vostri dati.
Qui di seguito vediamo come apportare le modifiche necessarie alle pagine che andrete a scaricare.
Prendiamo come esempio della spiegazione la pagina che avete appena visitato con tre finestre, verde, blu e bianca, queste tre pagine hanno una quarta pagina che li guida, altrimenti non potrebbero stare insieme, come nella lezione precedente c'é la pagina BASE che era colorata in rosso, in questa pagina guida viene specificata quale pagine devono aprirsi e in che posizione, quindi memorizzate che qualsiasi sito che utilizza i FRAME ha una pagina nascosta che li guida.
Nella lezione 21 abbiamo parlato della pagina INDEX, ovvero della pagina che si carica in automatico senza specificarla nell'indirizzo. Nell'utilizzo dei frame la pagina index.htm deve essere la pagina nascosta in quanto e la pagina guida di tutto l'insieme.
Andiamo a vedere come e composta questa pagina nascosta, qui sotto possiamo vedere il suo codice HTML, ho tolto alcune parti di codice che non ci interessano in questa spiegazione.
</head>
<frameset framespacing="0" border="0" rows="64,*" frameborder="0">
<frame name="intestazione" scrolling="no" noresize target="intestazione" src="barra.htm">
<frameset cols="150,*">
<frame name="sommario" target="principale" src="menu.htm">
<frame name="principale" src="home.htm" scrolling="auto">
</frameset>
<noframes>
<body>
I punti di interesse sono rivolti alle parti colorate in rosso e in azzurro, iniziamo con il primo numero in rosso 64, questo numero riferito in PIXEL indica l'altezza della barra superiore, volendo inserire un immagine nella barra superiore che ha l'altezza di 70 pixel, dovremmo sostituire il 64 con 70, cosi facendo tutta la barra superiore aumenta in altezza e conterrà l'immagine senza problemi.
Passiamo adesso al secondo numero nel codice: 150, questa indica la larghezza da sinistra in pixel, della pagina menu.htm, anche qui possiamo aumentare o diminuire la dimensione, questa volta in larghezza.
La terza pagina non ha impostazioni in quanto dipende dalle misure delle altre due.
Le voci in azzurro sono invece le pagine richiamate dalla pagina index e i loro nomi non possono confondervi, volendo modificare i nomi delle pagine, oltre che a rinominare le pagine HTM nella cartella, dovete qui inserire gli stessi nomi che avete dato alle pagine HTM altrimenti viene generato un errore di pagina non trovata.
Con FrontPage Express se tentate di aprire la pagina guida, nel nostro caso l'abbiamo chiamata index.htm, di una struttura con frame, vi darà un messaggio di errore in quanto al suo interno trova codici che non riconosce. La pagina index.htm dei frame deve essere quindi aperta per la modifica con il Blocco note di Windows.
Invece le pagine barra.htm, menu.htm e home.htm possono essere aperte con FrontPage Express senza alcun problema, in quanto sono normali pagine HTML.
Nelle pagine con frame che ho preparato per voi, troverete delle tabelle gia impostate, queste vi indicheranno la dimensione del frame, non dovete andare oltre la dimensione della tabella altrimenti uscite fuori dai bordi impostati, se sarà necessario modificare la dimensione dei frame, dovrete modificare anche la dimensione della tabella nella pagina.
Ma sopratutto le tabelle già dimensionate vi indicheranno dove inserire i dati, perché se ad esempio apriamo la pagina menu.htm in FrontPage, e la pagina deve comparire nel frame stretto a sinistra, avrete tutta la pagina visibile e vi potreste confondere, in pratica con i frame dovete considerare l'area della tabella come spazio a disposizione.
Potete naturalmente eliminare la tabella, nessuno ve lo vieta, ma il lavoro sarà meno organizzato.
Utilizzando i frame non sarà possibile centrare il sito sullo schermo, se impostate il sito su 800x600 e lo andiamo a vedere a una risoluzione maggiore 1024x768, questo comparirà sempre a sinistra dello schermo.
Ho impostato le pagine da scaricare tutti alla risoluzione 800x600, per modificarla a 1024x768 o superiore non dovete fare altro che modificare la dimensione in larghezza delle tabelle inserite.
Descriviamo ora una per una i vari esempi di siti con frame che ho realizzato
Premessa
Abbiamo detto nella lezione 12 per la creazione del giornale a pagina singola, che la tabella che deve contenere il sito deve essere impostata a 780 pixel di larghezza per non andare fuori dai bordi usando la risoluzione a 800x600, credo di non aver specificato il motivo, comunque lo ripeto.
Se la risoluzione video e impostata a 800x600, per quale strano motivo devo impostare la tabella a 780 pixel?
La motivazione e che 20 pixel se li ruba la barra di scorrimento pagina laterale, impostando la tabella a 800 il contenuto verrebbe coperto dalla barra e pertanto comparirebbe la barra inferiore.
Ho realizzato otto schemi diversi di pagine con frame, clicca su uno degli schemi che vuoi vedere in anteprima e scaricare, oppure scorrendo la pagina li troverai tutti uno dopo l'altro.
Visto che i file sono piccolissimi, ho inserito nel file da scaricare
tutti gli otto esempi, ognuno ha i suoi file nella relativa cartella.
 SCARICA Esempi per utilizzarli nel tuo sito
1
 Esempio 1
 VEDI on line Esempio 1
Descrizione di questa struttura in frame
In questa struttura possiamo vedere da subito in alto a destra, che la tabella combacia con il bordo del monitor, non ha cioè quei 20 pixel in meno appena indicati nella premessa qui sopra. Il Motivo?
La motivazione e che in questa struttura il bordo superiore non e scorribile, o meglio l'ho reso non scorribile, non avrebbe senso far scorrere questa pagina stretta, pertanto essendo bloccato, l'area e completamente utilizzabile, la dimensione in altezza e regolabile come indicato più sopra in questo articolo.
Considerando in questo caso che la barra superiore e larga 800 pixel
che il menu sinistro e largo 150 pixel
non rimane che sottrarre 800 - 150 = 650 pixel da assegnare alla pagina articolo.
Notiamo però a destra della pagina articolo che vi sono 20 pixel in bianco, se impostiamo la tabella a 650 lo spazio bianco scompare, ma se il testo scende giù oltre la finestra visibile, qui compare la barra di scorrimento che va ad occupare quei 20 famosi pixel e di conseguenza il testo verrebbe coperto dalla barra laterale e comparirebbe la barra inferiore di scorrimento orizontale.
Quindi si deve impostare questa tabella a 630, e se vogliamo colorare anche la parte bianca diamo colore in Proprietà pagina come visto nella lezione 06 e non alla tabella.
Ho impostato la tabella nella barra superiore a 800 pixel, nella cella a destra ho dato la dimensione di 468 pixel (misura standard dei banner) e nella cella di sinistra di 332 pixel utilizzabile per inserire il logo del nostro sito.
Andiamo adesso a vedere la pagina menu. Possiamo notare subito che all'interno della pagina ho inserito una tabella con un colore azzurro più chiaro per farvi notare una specie di difetto che non é un difetto, ovvero se notiamo la tabella sembra che non sia centrata nella pagina, a destra lo spazio azzurro e maggiore che a sinistra della tabella, il motivo é sempre per colpa di quei 20 pixel occupati dalla barra di scorrimento, adesso non si vede, ma se scendiamo con il testo facendo comparire la barra ecco come si presenta, la tabella e perfettamente centrata.
vi consiglio quindi di usare un solo colore, qui ho colorato la tabella diversa solo per dimostrazione.
2
 Esempio 2
VEDI on line Esempio 2
Descrizione di questa struttura in frame
Questa struttura con due frame verticali non ha un impostazione da consigliare, tutto dipende dall'utilizzo che se ne fa, si consiglia, dopo aver impostato la dimensione della finestra di sinistra sulla pagina index.htm (con il Blocco note, se si usa FrontPage Explorer) di fare le dovute somme, esempio:
La pagina visibile alla risoluzione 800x600 e di 780 pixel + 20 pixel occupati dalla barra laterale.
In questo caso la pagina di sinistra e impostato a 380 pixel, di cui 20 pixel appartengono alla barra di scorrimento se viene mostrata, in questo caso la tabella all'interno non deve superare i 360 pixel.
Per la pagina di destra, si fa la sottrazione 780 - 380 = 400, da impostare alla tabella, in questa pagina i 20 pixel sono già stati tolti da 800.
3
 Esempio 3
VEDI on line Esempio 3
Descrizione di questa struttura in frame
Questa struttura e simile all'esempio 1, con la sola aggiunta di un nuovo frame inferiore a cui ho dato il nome barrasotto.htm, qui per esempio si potrebbe inserire delle icone, dei banner pubblicitari, o qualsiasi altro volete, personalmente preferisco l'esempio 1.
Ho impostato questa barra a 30 pixel di altezza, qui sotto il codice HTML della pagina index dove ho colorato i numeri azzurro per la barra sopra e rosso per la barra sotto
<frameset framespacing="0" border="0" rows="64,*,30" frameborder="0">
<frame name="superiore" scrolling="no" noresize target="sommario" src="barra.htm">
<frameset cols="150,*">
<frame name="sommario" target="principale" src="menu.htm">
<frame name="principale" src="home.htm" target="_self" scrolling="auto">
</frameset>
<frame name="inferiore" scrolling="no" noresize target="sommario" src="barrasotto.htm">
<noframes>
<body>
4
 Esempio 4
VEDI on line Esempio 4
Descrizione di questa struttura in frame
Questa struttura é simile all'esempio 1, a cui é stato eliminato il frame laterale sinistro.
La barra superiore contiene la tabella da 800 pixel.
Nella pagina articolo la tabella deve essere impostata a 780 pixel.
5
 Esempio 5
VEDI on line Esempio 5
Descrizione di questa struttura in frame
Questa struttura utilizza due pagine articolo, quella in basso per inserire delle note a pie di pagina, in questo caso la dimensione della finestra non si imposta in pixel ma in percentuale, nell'esempio e impostato al 30% di area utilizzabile per il pie di pagina.
In entrambe le pagine, le tabelle vanno impostate a 780 pixel
Volendo sostituire il valore in percentuale con quella in pixel non si deve far altro che togliere il segno % e impostare il numero in pixel, esempio:
In Percentuale "30%,*"
In Pixel "80,*"
<frameset framespacing="0" border="0" rows="*,30%" frameborder="0">
<frame name="principale" target="note a piè di pagina" src="home.htm">
<frame name="note a piè di pagina" target="intestazione" src="homedue.htm" scrolling="auto">
<noframes>
<body>
6
 Esempio 6
VEDI on line Esempio 6
Descrizione di questa struttura in frame
Questa struttura ha un menu laterale e due finestre articolo, quella superiore per intestazione o inesimento banner
Anche qui la modifica in altezza per la pagina intestazione e in percentuale invece che in pixel.
Volendo sostituire il valore in percentuale con quella in pixel non si deve far altro che togliere il segno % e impostare il numero in pixel, esempio:
In Percentuale "15%,*"
In Pixel "64,*"
<frameset framespacing="0" border="0" cols="150,*" frameborder="0">
<frame name="sinistra" scrolling="no" noresize target="superioredx" src="menu.htm">
<frameset rows="15%,*">
<frame name="superioredx" target="inferioredx" src="homesopra.htm">
<frame name="inferioredx" src="home.htm" target="_self" scrolling="auto">
</frameset>
<noframes>
<body>
7
 Esempio 7
VEDI on line Esempio 7
Descrizione di questa struttura in frame
Questa struttura ha la barra superiore con una tabella di 800 pixel, una pagina scorribile con tabella da 780 pixel e la pagina articolo con tabella di 780 pixel
<frameset framespacing="0" border="0" rows="64,64,*" frameborder="0">
<frame name="superiore" scrolling="no" noresize target="centrale" src="barra.htm">
<frame name="centrale" target="inferiore" src="homesopra.htm" scrolling="auto">
<frame name="inferiore" src="home.htm" target="_self">
<noframes>
<body>
8
 Esempio 8
VEDI on line Esempio 8
Descrizione di questa struttura in frame
Conclude la raccolta questo schema a due pagine sovrapposte dove non e possibile cambiare le dimensioni delle due finestre in altezza.
Alla prossima lezione vedremmo come indirizzare i collegamenti per far aprire la pagina nel frame interessato
|