Esercizio 1.4: Progettazione dell'aspetto del sito Web

Mostra

Prima di iniziare la progettazione del sito Web, è necessario completare l'Esercizio 1.3: Inserimento di pagine nel sito Web.

Le pagine che costituiscono un sito Web dovrebbero presentare un layout e una struttura visivi simili. Le singole pagine devono apparire collegate tra loro, così da garantire coesione e uniformità al sito Web. È buona norma iniziare un progetto pensando innanzitutto alla struttura del sito Web, quindi procedere con la creazione delle singole pagine Web. In caso contrario, si corre il rischio di creare un sito Web formato da pagine scollegate tra loro, senza alcuna organizzazione o apparenti relazioni visive.

Il modo migliore per garantire al sito Web un aspetto uniforme consiste nell'utilizzare un modello pagina. Un modello pagina è un singolo file che è possibile utilizzare per controllare gli elementi comuni di tutte le pagine del sito. Una volta applicato il modello alle pagine, è possibile ridurre al minimo le eventuali modifiche apportate alla struttura del sito, apportando tali modifiche una volta sola, al modello; queste modifiche, poi, vengono applicate automaticamente a tutte le pagine che utilizzano il modello.

Il modello pagina presenta aree comune e aree di contenuto. Un'area comune è un'area condivisa comune a tutte le pagine che utilizzano il modello pagina, molto utile per gli elementi uguali per ciascuna pagina come, ad esempio, i banner e le aree di navigazione. L'area di contenuto sarà differente per ciascuna pagina. Dopo aver applicato il modello alle singole pagine, è possibile modificare le aree di contenuto di queste pagine per aggiungere informazioni specifiche a questa pagina. Gli elementi di pagina come il testo e le immagini specifici di una determinata pagina sono tipi di elementi che verranno inseriti nelle aree di contenuto del modello pagina. In un modello è possibile creare tante aree comuni e di contenuto quante se ne desiderano.

I modelli pagina controllano l'aspetto del layout di un sito in maniera molto diversa rispetto all'uso di un foglio di stile. Ulteriori informazioni sulle differenze tra i modelli pagina e i fogli di stile.

In questa esercitazione, verrà creato un modello pagina e verranno definite alcune aree di contenuto e comuni per progettare un aspetto comune e uniforme per l'intero sito degli annunci economici. Questo modello pagina farà in modo che il sito presenti il seguente layout:

Layout del sito di base

Creazione di un nuovo modello pagina

  1. Nella vista Esplora progetti, selezionare il nome del del progetto, ClassifiedsTutorial, con il tasto destro del mouse.
  2. Selezionare Nuovo > File modello pagina dal menu a comparsa. Si apre la procedura guidata Nuovo file modello pagina.
  3. Accettare la cartella predefinita (/ClassifiedsTutorial/WebContent). Dopo la creazione, il file del modello verrà inserito in questa cartella.
  4. Immettere un nome per il file del modello nel campo Nome file. Per questa esercitazione, scegliere il nome template. Tuttavia, il nome completo del file sarà template.jtpl.
  5. Assicurarsi che come linguaggio di markup sia selezionato HTML.
  6. Selezionare Modello contenente JSP come modello.
  7. Lasciare la casella di controllo Configura opzioni avanzate deselezionata.
  8. Fare clic su Fine. Il nuovo modello si apre in Page Designer. Quando si apre un modello vuoto, il messaggio contenuto in una finestra segnala che occorre aggiungere almeno un'area di contenuto al modello. Scegliere OK per chiudere la finestra.

Aggiunta di elementi al modello vuoto

Dopo aver creato il modello, occorre aggiungere alcuni elementi al modello vuoto.
  1. Iniziare con l'eliminare il testo Place content here.
  2. Uno dei modi più semplici per definire il layout della struttura di un modello pagina è quello di utilizzare una tabella invisibile. In questo modo, è possibile specificare sezioni di pagina da utilizzare in modi differenti ed è possibile controllare la sistemazione degli oggetti all'interno della pagina.
    1. Nella vista Tavolozza, espandere il cassetto Tag HTML facendo clic su di esso.
    2. Trascinare il componente Tabella dalla tavolozza nel modello vuoto. Si apre la finestra Inserimento tabella.
    3. Per questo modello sono necessarie 3 righe e 1 colonna. Immettere 3 nel campo Righe e 1 nel campo Colonne.
    4. Fare clic su OK. La tabella viene visualizzata nella pagina del modello.
  3. In un primo momento, la tabella sembrerà molto piccola. Per modificare le dimensioni e la struttura della tabella, occorre modificare gli attributi della tabella.
    1. Selezionare la tabella con il tasto destro del mouse e scegliere Proprietà per aprire la vista Proprietà.
    2. Nella vista Proprietà, fare clic sulla scheda Tabella.
    3. Nel campo Allineamento, selezionare Al centro. In tal modo, la tabella viene posizionata al centro della pagina.
    4. A questo punto, è necessario incrementare le dimensioni della tabella in modo che la struttura del modello si espanda in base alle dimensioni dello schermo su cui viene visualizzata la pagina. In caso contrario, la struttura delle pagine verrà visualizzata con dimensioni fisse, che possono risultare troppo grandi su schermi piccoli oppure troppo piccole su schermi grandi. Nei campi Larghezza tabella e Altezza tabella, immettere 90 e selezionare il simbolo di percentuale (%).
    5. Dal momento che non si desidera visualizzare nelle pagine la struttura della tabella, occorre impostare il bordo su 0 pixel. Page Designer visualizza i bordi della tabella invisibile come linee punteggiate.
  4. Dal momento che si desidera visualizzare nella parte alta di ciascuna pagina un banner che contenga il sito Web ed elementi visivi per uniformare il sito, occorre formattare l'area in questa tabella di layout. Anche se sarebbe preferibile affidare a un disegnatore grafico la creazione dell'immagine per il logo o il banner per il sito, in questo modello è possibile aggiungere del testo come segnaposto per il banner.
    1. Selezionare la cella superiore della tabella.
    2. Con questa cella selezionata, specificare un'altezza di 70 pixel nella scheda TD nella vista Proprietà. Se si stesse creando un modello che dovrebbe contenere un banner sviluppato dal proprio designer, sarebbe possibile specificare per questa cella le dimensioni precise dell'immagine del banner.
    3. Nella scheda TD delle vista Proprietà, impostare il Colore su Grigio nel menu a discesa. Se si desiderasse utilizzare un colore differente, utilizzare lo strumento Preleva colore per prelevare un colore da un punto qualsiasi dello schermo oppure immettere il valore RGB (come #808080 per il grigio) nel campo.
    4. Fare clic su un punto qualsiasi nella riga superiore e immettere Benvenuti in Classifieds!
    5. Dal momento che il testo predefinito è piccolo e difficile da visualizzare, occorre incrementare le dimensioni del tipo di carattere. Selezionare l'intera frase e fare clic su Formato > Tipo di carattere.
    6. Per rendere le caratteristiche di un giornale, selezionare Courier come Tipo di carattere. Selezionare 6 come Dimensione e selezionare Bianco come Colore sullo sfondo grigio nella cella.
    7. Fare clic su OK.
    8. Per posizionare al centro il testo del banner, selezionare di nuovo il testo e fare clic su Formato > Allinea > Al centro orizzontalmente.
  5. Per consentire agli utenti di visitare altre pagine, occorre inserire una riga di collegamenti al di sotto del banner. Successivamente, verranno aggiunte schede per la navigazione; per ora, formattare la seconda riga per creare spazio per i pulsanti.
    1. Selezionare la seconda cella nella tabella.
    2. Impostare questa cella sulle stesse dimensioni della cella del banner immettendo un'altezza di 70 pixel nella scheda TD della vista Proprietà.
  6. La terza riga è la riga in cui verrà inserito il contenuto. Assicurarsi che il contenuto sia allineato con la parte superiore della riga.
    1. Selezionare la terza riga della tabella.
    2. Nella vista Proprietà, nella scheda TD, selezionare Alto per Allineamento verticale.

Aggiunta di un'area di contenuto

Occorre un'area del modello in cui visualizzare il contenuto specifico di ciascuna pagina: ad esempio, i risultati della ricerca nella pagina filtered_records oppure il modulo da riempire nella pagina new_record. Ora che si dispone di una struttura comune e che lo schema dei colori è stato definito, è possibile aggiungere un'area di contenuto.
  1. Nella vista Tavolozza, fare clic sul cassetto Modello pagina.
  2. Trascinare un componente Area contenuti nella terza riga. È questo il punto le singole pagine forniranno il contenuto specifico. Si apre la procedura guidata Inserimento area contenuti per il modello pagina.
  3. È possibile accettare il nome dell'area contenuti bodyarea facendo clic su OK. Nome area contenuti consente di specificare nomi differenti per differenti aree contenuti ai fini dell'organizzazione del sito. Ad esempio, se si sta creando un sito che presenterà sempre due aree contenuti per pagina, è possibile denominare l'area del contenuto principale come bodyarea e l'area con i risultati di ricerca come searcharea. In tal modo, sarà più semplice applicare il modello pagina a pagine già esistenti, in quanto è possibile assegnare aree di pagine esistenti in base alle tag di markup per inserire le aree di contenuto specifiche del modello. L'area contenuti viene inserita nella cella della tabella.
  4. Salvare le modifiche apportate al modello della pagina.

La struttura del modello di base dovrebbe essere simile a questo esempio:

Modello pagina di base

In questo esercizio è stato creato un modello pagina con alcune aree comune e aree contenuti definite per il sito Web. A questo punto, è possibile iniziare l'Esercizio 1.5: Applicazione di un modello pagina al sito Web.

Termini di utilizzo | Feedback

(C) Copyright IBM Corporation 2000, 2004. Tutti i diritti riservati.