Frames Tutor- Lezione 5

Frames Tutor- Lezione 5

Penso che quello che dovremmo fare ora sia una pagina con frames da prendere ad esempio.
Niente di eccezionale, solo qualcosa tipo questo.

Prima di iniziare, lasciatemelo dire ancora... fate qualcosa di semplice! Un sito con una marea di frames e links che puntano da qualunque parte nel web serve solo a confondere la sua costruzione ed ancora di più la sua navigazione.

Prima cosa dobbiamo pensare chiaramente a cosa vogliamo ottenere alla fine. Penso che un buon progetto di semplice fattura potrebbe essere un banner in alto, un frame con una directory a sinistra, e la finestra principale sulla destra. Prepariamo prima la Pagina Master.

<HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD>

</HTML>

Creiamo un'altra cartella e salviamo questo file come index.html. Ancora: l'immagine che useremo come banner è quella di "MY FRAMZ PAGE". Si chiama framz1.gif ed è nella directory framz. Copiatela nella directory di lavoro appena creata.

Dividiamo lo schermo orizzontalmente.

<HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD>

</HTML>

Nota che abbiamo ottenuto 83 sommando 8 all'altezza dell'immagine (75+8=83). Nota anche che dal momento che usiamo dimensioni assolute stiamo usando anche un frame elastico.

Ora specifichiamo che banner.html deve andare nel frame in alto (faremo quel documento fra qualche minuto). Inoltre mettiamo subito una coppia di tags <FRAMESET> perchè stiamo per dividere ulteriormente la parte di schermo in basso.

<HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD>

</HTML>

VERIFICALO
Puoi verificarlo anche subito, ma sicuramente avrai un messaggio di errore perchè è ancora incompleto.

Dividiamo la window in basso in due parti. Specifichiamo inoltre che la window di sinistra contiene directry.html e che la window di destra contiene home.html. Ancora una volta, non abbiamo ancora costruito questi documenti perciò potresti avere un messaggio di errore (o due) (o tre).

<HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD>

</HTML>

VERIFICALO

Poichè avremo la nostra directory sulla sinistra e le pagine verrano caricate nel frame di destra, dobbiamo dare un nome a questi frames. L'unico che avrà l'incombenza di caricarsi le pagine è anche l'unico che ha la vera necessità di avere un nome.

<HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD>

</HTML>

VERIFICALO
OK. Abbiamo finito con questo... per ora.

Costruiamo il file banner.html. Cominciamo con questo e salviamolo.

<HTML> <HEAD> <TITLE>Practice Page- Banner</TITLE> </HEAD> <BODY BGCOLOR="#0000FF"> </BODY> </HTML>

Nota che abbiamo specificato un colore di fondo blue.
VERIFICA banner.html VERIFICA la Pagina Master

Mettiamoci l'immagine e centriamola con <CENTER>.

<HTML> <HEAD> <TITLE>Practice Page- Banner</TITLE> </HEAD> <BODY BGCOLOR="#0000FF"> <CENTER><IMG SRC="framz1.gif" WIDTH=500 HEIGHT=75></CENTER> </BODY> </HTML>

VERIFICA banner.html VERIFICA la Pagina Master

Mentre sto pensando a questo vorrei richiamare l'attenzione sul fatto che se guardate i sorgenti dei miei documenti per avere qualche dritta nel creare i vostri documenti potreste trovare alcune cose che non hanno senso o che contraddicono ciò che ho scritto. Questo perchè io devo fare le mie pagine forzando alcune cose in modo che la lezione venga su bene quando è mostrata nel browser. E' chiaro? Se così non fosse semplicemente non guardare i sorgenti finchè non vuoi confonderti.

Bene... come si può notare abbiamo un problema. Abbiamo le barre di scorrimento (scrollbars) in mezzo ai piedi e l'immagine non è ben posizionata nella window. Aprite la vostra Pagina Master. Togliete le scrollbars ed aggiustate i margini.

<HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD>

</HTML>

VERIFICALO

Adesso passiamo alla pagina che farà da directory. Cominciamo con questo e salviamolo come directry.html.

<HTML> <HEAD> <TITLE>Practice Page- Directory</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> </BODY> </HTML>

VERIFICA directry.html VERIFICA la Pagina Master

Dategli un'intestazione e scrivete il testo di tutti i links. Si possono aggiungere le informazioni sui links in un minuto.

<HTML> <HEAD> <TITLE>Practice Page- Directory</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF">

<H3>Directory</H3>

Home<P>

vai QUI<BR>
o LAGGIÙ<P>

o visita<BR>
Yahoo<BR>
Netscape

</BODY>
</HTML>

VERIFICALO directry.html VERIFICA la Pagina Master

Ora aggiungiamo le informazioni sui links.

<HTML> <HEAD> <TITLE>Practice Page- Directory</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF">

<H3>Directory</H3>

<A HREF="here.html">vai QUI</A><BR>
<A HREF="there.html">o LAGGIÙ</A><P>

o visita<BR>
<A HREF="http://www.yahoo.com/">Yahoo</A><BR>
<A HREF="http://home.netscape.com/">Netscape</A>

</BODY>
</HTML>

VERIFICA directry.html VERIFICA la Pagina Master

Caspita, non è carino? Si, penso proprio di si. Dammi il cinque. Batti qua, prenditi una tazza di caffè, fa quello che vuoi. Prenditi un attimo di respiro. Sono qua.

<--INDIETRO AVANTI-->

Lezione 5