Esercizio 1.4: Progettazione dell'aspetto del sito Web
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.
Utilizzando un modello pagina è possibile controllare l'aspetto del
layout di un sito in maniera molto diversa rispetto all'uso di un foglio di stile. Ulteriori informazioni sulla differenza 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:
Creazione di un nuovo modello pagina
- Nella vista Selezione progetti, fare clic sul tasto destro sul nome
del progetto, ClassifiedsTutorial.
- Selezionare Nuovo > File modello pagina dal menu
a comparsa. Si apre la procedura guidata Nuovo file modello pagina.
- Accettare la cartella predefinita (/ClassifiedsTutorial/WebContent).
Dopo la creazione, il file del modello verrà inserito in questa cartella.
- 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.
- Assicurarsi che come linguaggio di markup sia selezionato HTML.
- Selezionare Modello contenente componenti Faces come
modello.
- Lasciare la casella di controllo Configura opzioni avanzate
deselezionata.
- 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. Fare clic su OK
per chiudere la finestra di dialogo.
Aggiunta di elementi al modello vuoto
Dopo aver creato il modello, occorre aggiungere alcuni elementi
al modello vuoto.
- Come prima cosa, eliminare l'area di contenuto predefinita. Per visualizzare
l'area di contenuto predefinita, fare clic sul testo predefinito Place
content here. I bordi invisibili vengono visualizzati attorno all'area di contenuto.
- 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.
- Nella vista Tavolozza, espandere il cassetto Tag HTML facendo clic
su di esso.
- Trascinare il componente Tabella dalla Tavolozza nel modello
vuoto. Si apre Inserimento tabella.
- Per questo modello sono necessarie 3 righe e 1 colonna. Immettere 3
nel campo Righe e 1 nel campo Colonne.
- Fare clic su OK. La tabella viene visualizzata nella pagina
del modello.
- In un primo momento, la tabella sembrerà molto piccola. Per modificare le dimensioni e la struttura della
tabella, occorre modificare gli attributi della tabella.
- Nella vista Attributi, scegliere la scheda Tabella.
- Nel campo Allineamento, selezionare Al centro. In tal modo,
la tabella viene posizionata al centro della pagina.
- 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 (%).
- 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.
- 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 graphic designer 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.
- Selezionare la cella superiore della tabella.
- Con questa cella selezionata, specificare un'altezza di 70
pixel nella scheda cella nella vista Attributi. 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.
- Nella scheda Cella delle vista Attributi, 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.
- Fare clic su un punto qualsiasi nella riga superiore e immettere Benvenuti in
Classifieds!
- 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.
- 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.
- Fare clic su OK.
- Per posizionare al centro il testo del banner, selezionare di nuovo il testo e fare clic su Formato
> Allinea > Al centro orizzontalmente.
- 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.
- Selezionare la seconda cella nella tabella.
- Impostare questa cella sulle stesse dimensioni della cella del banner immettendo
un'altezza di 70 pixel nella scheda Cella della vista
Attributi.
- La terza riga è la riga in cui verrà inserito il contenuto. Assicurarsi che il
contenuto sia allineato con la parte superiore della riga.
- Selezionare la terza riga della tabella.
- Nella vista Attributi, nella scheda Cella, 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 create_record. Ora che si
dispone di una struttura comune e che lo schema dei colori è stato
definito, è possibile aggiungere un'area di contenuto.
- Nella vista Tavolozza, fare clic sul cassetto Modello pagina.
- Trascinare e rilasciare 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.
- È 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.
- Salvare le modifiche apportate al modello della pagina.
La struttura del modello di base dovrebbe essere simile a quella seguente:
In questo esercizio è stato creato un modello pagina con alcune aree comuni 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.