Wolf-WebSystem scarica gratis gli Script Java e le Utilitā per il tuo Sito

I.      Prendi un foglio di carta con il tracciato della finestra.

 II.      Evidenzia nel colore verde, le linee orizzontali e verticali che dividono la finestra in frames.

III.      Evidenzia tutte le linee, quelle che partono da un lato della finestra e arrivano a quello opposto nel colore rosso

IV.      In questo caso, l'unica linea possibile č verticale e divide la finestra in due colonne, la prima a sinistra contiene il menų, la seconda contiene testata e copertina. 

Ora devi definire lo spazio da occupare. Inizia con il suddividere la finestra principale in due colonne: la prima a larghezza fissa che conterrā i pulsanti del menų, la seconda a larghezza variabile che conterrā le pagine vere e proprie del tuo Sito.

Il codice HTML č abbastanza semplice:

<FRAMESET COLS="110,*">
<FRAME SRC="wolfmenu.html" NAME="menu">
<FRAME SRC="wolfcopertina.html" NAME="copertina">
</FRAMESET>

Hai ottenuto una pagina simile a questa:



Il tag FRAMESET definisce la suddivisione in frames della finestra che, tramite il parametro COLS="110,*", viene spezzata in due colonne: la prima larga 110 pixel e la seconda che occupa tutto lo spazio rimanente (per farlo viene utilizzato il carattere *)

I tags FRAME invece indicano quale pagina HTML vada visualizzata all'inizio in ogni frames (tramite il parametro SRC="file.html"), e definiscono il nome di ogni singolo frames (tramite il parametro NAME="nome-frame").

E’ necessario ora suddividere il frame "Copertina" in due righe: una superiore che conterrā la testata, ed una inferiore che conterrā le pagine (compresa la copertina).

Il codice HTML č:

<FRAMESET COLS="110,*">
<FRAME SRC="wolfmenu.html" NAME="menu">
<FRAMESET ROWS="60,*">
<FRAME SRC="wolftestata.html" NAME="testata" SCROLLING=no>
<FRAME SRC="wolfcopertina.html" NAME="copertina">
</FRAMESET>
</FRAMESET>

Abbiamo ottenuto una pagina simile a questa:



Il tag <FRAME SRC="wolfcopertina.html" NAME="copertina"> č stato sostituito dalla nuova definizione <FRAMESET ROWS="60,*">, ad indicare che tutta la colonna di destra (quella specificata appunto da <FRAME SRC="wolfcopertina.html" NAME="copertina">) č stata considerata come una vera e propria finestra da suddividere nuovamente in due righe (tramite il tag <FRAMESET ROWS="60,*">). Ora la finestra č divisa in tre parti.

Riassumiamo ora passo passo, come abbiamo raggiunto il nostro obbiettivo:

  1. Suddivisione della finestra in due colonne tramite il tag <FRAMESET COLS="110,*">
  2. Definizione della colonna di sinistra tramite il tag <FRAME SRC="wolfmenu.html" NAME="menu">
  3. Suddivisione della colonna di destra in due righe tramite il tag <FRAMESET ROWS="60,*">
  4. Definizione della riga superiore tramite il tag <FRAME SRC="wolftestata.html" NAME="testata" SCROLLING=no>
  5. Definizione della riga inferiore tramite il tag <FRAME SRC="wolfcopertina.html" NAME="copertina">