Quello che abbiamo fatto è costruire una pagina a frames dove puoi cambiare due frames con un solo click del mouse. Ora tenteremo di espandere la nostra creatura. Ci sono due modi per farlo... possiamo aggiungere links oppure possiamo aggiungere frames.
Come prima cosa aggiungeremo un link... come questo.
Dobbiamo scrivere altri due documenti. Salva questo come al_frank.html...
<HTML>
<FONT SIZE=3>Al's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#33CCCC">
<FONT SIZE=4>Frank</FONT>
</HTML>
e salva questo come al_steve.html...
<HTML>
<FONT SIZE=3>Al's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#33CCCC">
<FONT SIZE=4>Steve</FONT>
</HTML>
Quindi modifichiamo il frame directory (direct.html)...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Nascosto ai vecchi browser
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>
<A HREF="javascript:multiLoad('al_frank.html', 'al_steve.html')">Al's friends</A><P>
</BODY>
</HTML>
VERIFICALO
Tutto questo tradotto in un linguaggio più umano significa: se viene fatto un click su "Al's friends", passa al_frank.html & al_steve.html alla funzione (multiLoad()).
Facciamone un'altro. Ancora una volta abbiamo bisogno di altri due documenti. Salva questo come jake_bob.html...
<HTML>
<FONT SIZE=3>Jakes's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#FFCC66">
<FONT SIZE=4>Bob</FONT>
</HTML>
E questo invece come jake_bub.html...
<HTML>
<FONT SIZE=3>Jakes's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#FFCC66">
<FONT SIZE=4>Bubba</FONT>
</HTML>
Ora modifichiamo direct.html...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Nascosto ai vecchi browser
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>
<A HREF="javascript:multiLoad('al_frank.html', 'al_steve.html')">Al's friends</A><P>
<A HREF="javascript:multiLoad('jake_bob.html', 'jake_bub.html')">Jake's friends</A><P>
</BODY>
</HTML>
Non era questa gran difficoltà, vero??
L'ultima cosa che impareremo sarà come incrementare il numero di frames. Penso che il modo più semplice di farlo sia di tornare indietro a quando avevamo solo 2 links nel frame directory. Perciò modifichiamo Al's friends e Jake's friends in modo da ottenere questo.
Quello che faremo sarà dividere il lato destro in 4 frames, come questo.
Per cominciare abbiamo bisogno di qualche altro documento... tanto per fare qualcosa di nuovo.
Salva questo come hugh_jim.html...
<HTML>
<FONT SIZE=3>Hugh's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<FONT SIZE=4>Jim</FONT>
</HTML>
Questo invece sarà hugh_bil.html...
<HTML>
<FONT SIZE=3>Hugh's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<FONT SIZE=4>Bill</FONT>
</HTML>
Questo è ron_paul.html...
<HTML>
<FONT SIZE=3>Ron's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFCC">
<FONT SIZE=4>Paul</FONT>
</HTML>
E questo è ron_sam.html...
<HTML>
<FONT SIZE=3>Ron's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFCC">
<FONT SIZE=4>Sam</FONT>
</HTML>
Ora dovresti avere nella tua cartella (tra le altre cose)...
1) la pagina master (index.html)
2) la pagina directory (direct.html)
3) otto documenti da caricare
- hugh_ed.html
- hugh_cal.html
- hugh_jim.html
- hugh_bil.html
- ron_mike.html
- ron_pete.html
- ron_paul.html
- ron_sam.html
Ora dobbiamo rifare la nostra pagina master. Penso sia meglio se ricominciamo da zero. Allora carichiamo index.html e cancelliamo tutto. Incolla questo codice per ricominciare...
<HTML>
</HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
Dividiamo la window verticalmente. Nella parte sinistra metteremo direct.html mentre la parte destra la divideremo ancora.
<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET>
</FRAMESET>
</FRAMESET>
VERIFICALO (tieni presente che è ancora in costruzione)
Ora dividiamo la parte destra a metà orizzontalmente, mettendo una coppia di tags FRAMESET sia per la metà in alto che per quella in basso.
<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAMESET>
</FRAMESET>
<FRAMESET>
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
VERIFICALO (nessun cambiamento visibile)
Ora specificheremo che ognuno di quei frames si deve dividere ulteriormente a metà verticalmente.
<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAMESET COLS="50%,50%">
</FRAMESET>
<FRAMESET COLS="50%,50%">
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
VERIFICALO (nessun cambiamento visibile)
Mettici i tags FRAME. (li riempiremo fra un minuto.)
<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAMESET COLS="50%,50%">
<FRAME>
<FRAME>
</FRAMESET>
<FRAMESET COLS="50%,50%">
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
Specifichiamo innanzitutto quali documenti caricare nei frames.
<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAMESET COLS="50%,50%">
<FRAME SRC="hugh_ed.html">
<FRAME SRC="hugh_cal.html">
</FRAMESET>
<FRAMESET COLS="50%,50%">
<FRAME SRC="hugh_jim.html">
<FRAME SRC="hugh_bil.html">
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
Ora, cosa importantissima, diamo un nome ai frames. (ancora una volta, è necessario il nome solo per quei frames che cambieranno contenuto.)
<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAMESET COLS="50%,50%">
<FRAME SRC="hugh_ed.html" NAME="Frame_A">
<FRAME SRC="hugh_cal.html" NAME="Frame_B">
</FRAMESET>
<FRAMESET COLS="50%,50%">
<FRAME SRC="hugh_jim.html" NAME="Frame_C">
<FRAME SRC="hugh_bil.html" NAME="Frame_D">
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
VERIFICALO (nessun cambiamento visibile)
Ora cominciamo a lavorare su direct.html. Questo è quello che dovrebbe contenere al momento...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Nascosto ai vecchi browser
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>
</BODY>
</HTML>
Prima cosa, aggiungiamo i links in modo che alla funzione venga passato un totale di quattro documenti.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Nascosto ai vecchi browser
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html', 'hugh_jim.html', 'hugh_bil.html')">Hugh's friends</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html', 'ron_paul.html', 'ron_sam.html')">Ron's friends</A><P>
</BODY>
</HTML>
Ora arricchiamo la funzione...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Nascosto ai vecchi browser
function multiLoad(doc1,doc2,doc3,doc4) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
parent.Frame_C.location.href=doc3;
parent.Frame_D.location.href=doc4;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html', 'hugh_jim.html', 'hugh_bil.html')">Hugh's friends</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html', 'ron_paul.html', 'ron_sam.html')">Ron's friends</A><P>
</BODY>
</HTML>
... e questo è tutto!
Vorrei dire una cosa ancora prima di finire. Sebbene sia abbastanza semplice creare frames e modalità carine per navigarli, ricorda che gli altri devono poter trovare la strada all'interno della tua creatura. Ricorda inoltre che sebbene tu conosci intimamente il tuo sito, i tuoi visitatori probabilmente no. Se il tuo sito diventa troppo confuso per navigarci dentro, la gente semplicemente se ne va.
Buona fortuna!