Prima di procedere con la progettazione della struttura del sito Web, è necessario completare l'Esercizio 1.1:
Creazione di un progetto Web.
Un sito Web è formato da una raccolta di pagine Web. Se nelle pagine Web
si trova il contenuto vero e proprio come, ad esempio,
elementi HTML, immagini e collegamenti, un sito Web è l'organizzazione e la struttura
gerarchiche del modo in cui le pagine Web fit
together. Un sito Web dovrebbe avere un obiettivo di alto livello (ad esempio, fornire
un'area di raccolta organizzata degli
annunci economici) e ciascuna pagina Web
offre il proprio contributo per raggiungere questo obiettivo (ad esempio, vi è una
pagina che esegue ricerche tra i vari annunci).
Il modo migliore per iniziare la progettazione del sito Web consiste nell'identificare
le funzioni che il sito deve supportare per conseguire l'obiettivo prefisso. Per un sito
Web di annunci economici,
è noto che vi sono molte funzioni che si desidera che il sito
esegua. Ad esempio, si desidera che i visitatori del sito possano
effettuare ricerche dei vari elenchi oppure visualizzarli tutti insieme;
inoltre si desidera poter creare e modificare nuovi elenchi.
Per creare un sito Web in grado di eseguire queste funzioni, in questo esercizio si pianificherà la
creazione di quattro pagine che verranno realizzate nell'esercizio successivo.
- Una home page che visualizzi tutti gli annunci economici del database.
- Una pagina che aggiunge un nuovo annuncio economico al database.
- Una pagina che modifichi o elimini un annuncio presente nel database.
- Una pagina che visualizzi i risultati di ricerca filtrando i risultati di ricerca per categoria.
- Nella vista Esplora progetti, espandere ClassifiedsTutorial.
- Fare doppio clic su Navigazione del sito Web nella vista Esplora progetti.
Web Site Designer si apre nella vista Navigazione. Con questo strumento
è possibile aggiungere, eliminare e riorganizzare le pagine Web che costituiscono il sito
Web.
- All'inizio, non vi sono icone di pagina visualizzate nella vista
Navigazione. Di solito, la prima pagina che si progetta è la pagina iniziale
oppure la home page del sito. Si tratta della prima pagina a cui accedono
i visitatori del sito Web. Trascinare il componente Nuova pagina
dalla vista Tavolozza e rilasciarlo nella vista Navigazione. Un'icona di
pagina viene visualizzata con il titolo di navigazione della pagina attivo.
- Questa sarà la home page che visualizzerà tutti gli annunci presenti nel
database. Immettere View All Classifieds come titolo di navigazione della
pagina. Successivamente, verrà illustrato come utilizzare il titolo di navigazione
come etichetta della pagina ai fini della navigazione nel sito.
- Affinché i visitatori possano pubblicare i propri elenchi, è necessaria una pagina in cui
sia possibile crearli. Aggiungere un'icona per la seconda pagina
trascinando il componente Nuova pagina nella vista Navigazione direttamente
sotto l'icona della pagina View All Classifieds.
- Denominare la pagina Post a Listing. Notare che la nuova pagina
viene visualizzata al di sotto dell'icona della pagina View All Classifieds
e collegata con una linee. Ciò significa che le due pagine presentano
una relazione principale-secondario.
- Inoltre, è necessario creare anche una pagina in cui i visitatori possano modificare oppure
eliminare gli annunci esistenti. Ad esempio, se un visitatore ha aggiunto un annuncio per una bicicletta
e questo annuncio è stato pubblicato per un lungo periodo di tempo senza ricevere alcuna risposta, è
possibile che il venditore desideri diminuire il prezzo richiesto
inizialmente. Aggiungere un'altra icona di pagina accanto
a Post a Listing e denominarla Update Listing. Notare che questa nuova
icona pagina è un elemento di pari livello di Post a Listing e un altro elemento secondario di
View All Classifieds.
- Successivamente, occorre aggiungere una funzione di ricerca al sito Web, in modo che i visitatori
possano effettuare ricerche tra gli annunci esistenti per identificare quelli di maggiore interesse. Per aggiungere
una pagina per visualizzare i risultati di ricerca, inserire un'icona di pagina accanto alla
pagina Update Listing e denominarla Filtered Listings.
Nota: se accidentalmente si inserisce una pagina
nel punto errato oppure si desidera riordinare la struttura della pagina, è possibile
trascinare le icone di pagina in qualsiasi momento per riorganizzare il sito.
- Premere Ctrl+S per salvare il disegno del sito. La vista Navigazione dovrebbe apparire
come illustrato nella seguente immagine:
Osservare la presenza di una serie di piccole icone nella parte inferiore di ciascuna
icona di pagina. La prima icona, che non è ancora
visibile, rappresenta i file reali associati all'icona e sarà
visibile solo dopo la
creazione di questi file. Se si crea un file JSP, l'icona è un diamante blu
(

); se crea un file
HTML, l'icona è un gruppo di
parentesi (

).
La seconda (

) e la terza icona (

) sono visibili, a indicare
che, per impostazione predefinita, tutte le pagine sono impostate per essere
visualizzate rispettivamente nella navigazione e nella mappa del
sito. La quarta icona (

), non ancora visibile,
viene mostrata quando l'icona pagina viene associata ad un file reale che non contiene alcun elemento di
navigazione. L'icona
(

), non ancora visibile nella parte superiore della pagina, rappresenta
il primo livello di navigazione. Sarà possibile acquisire ulteriori informazioni
su queste icone e su altri aspetti relative alla visualizzazione delle
icone di pagina nel corso di questo
modulo.