Esercizio 1.2: Progettazione della struttura del sito Web

Mostra

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. Queste pagine sono:


  1. Nella vista Selezione progetti, fare clic sul simbolo + accanto al progetto ClassifiedsTutorial per espanderlo.
  2. Nella vista Selezione progetti, fare doppio su Navigazione nel sito Web. Web Site Designer si apre nella vista Navigazione. Con questo strumento è possibile aggiungere, eliminare e riorganizzare le pagine Web che costituiscono il sito Web.
  3. 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.
  4. 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.
  5. A questo punto, occorre stabilire in che modo i visitatori possono pubblicare i propri annunci nel sito Web. A tale scopo, è necessario realizzare una pagina per la creazione delle nuove voci. Aggiungere un'icona per la seconda pagina trascinando il componente Nuova pagina nella vista Navigazione direttamente sotto l'icona della pagina View All Classifieds
  6. 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.
  7. 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.
  8. 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 e rilasciare le icone di pagina in qualsiasi momento per riorganizzare il sito.
  9. Premere Ctrl+S oppure fare clic sul pulsante Salva Pulsante Salva per salvare. La vista Navigazione dovrebbe apparire come illustrato nella seguente immagine:
Navigazione del sito Web

Notare la presenza una serie di piccole icone nella parte superiore di ciascuna icona di pagina. La prima () e la seconda 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 terza icona () rappresenta il primo livello di navigazione. La quarta 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 (). Sarà possibile acquisire ulteriori informazioni su queste icone e su altri aspetti relative alla visualizzazione delle icone di pagina nel corso di questo modulo.

Ora che è stata creata la struttura generale del sito Web, è possibile iniziare l'Esercizio 1.3: Inserimento delle pagine nelle pagine Web.

Termini di utilizzo | Feedback

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