您必須先完成練習 1.1:建立 Web 專案,才能設計網站結構。
網站是網頁的集合所組成的。
網頁含有實際的內容,如 HTML 元素、影像和鏈結,網站則是網頁如何彼此配合的一種階層設計和組織。
網站應該有它的高階目標(如提供有組織的分類廣告清單集合區域),個別網頁則是用來配合高階目標的特定用途(如搜尋清單的網頁)。
在設計網站時,最好先設想網站應該支援哪些功能來實現整體目標。
關於分類廣告網站,您知道您想要網站執行一些功能。
比方說,您知道您想使網站訪客能夠同時搜尋和檢視清單,且您要他們能夠建立和編輯新的清單。
為了使網站執行這些功能,我們在這個練習中規劃了四個網頁,下一個練習則要建立網頁本身。
這些網頁包括:
- 顯示資料庫所有分類廣告的首頁。
- 將新分類廣告加到資料庫的網頁。
- 變更或刪除資料庫中現行廣告的網頁。
- 依種類過濾廣告來顯示搜尋結果的網頁。
- 在「專案導覽器」視圖中,按一下 ClassifiedsTutorial 專案旁的 + 號來展開它。
- 按兩下「專案導覽器」視圖中的網站導覽。這時會開啟 Web Site Designer 的「導覽」視圖。
您可以利用這個工具來新增、刪除和重新排列組成網站的網頁。
- 首先,「導覽」視圖不會顯示任何網頁圖示。
您在設計網站時,最先設想的網頁通常是網站的最上頁或首頁。
這是訪客進入網站的網頁。
請從「選用區」視圖中,將新網頁元件拖放在「導覽」視圖中。
這時會出現含有焦點網頁導覽標題的網頁圖示。
- 這個網頁會成為顯示資料庫所有廣告的首頁。
請輸入檢視所有分類廣告來作為網頁的導覽標題。
稍後,您將學習如何將導覽標題當作網頁標籤來進行網站導覽。
- 那麼,訪客如何將他們自己的清單公佈在您的網站呢?
他們需要一個用來建立新清單的網頁。
請將新網頁元件拖曳到「導覽」視圖中,在檢視所有分類廣告網頁圖示之下來新增第二個網頁圖示。
- 將新網頁命名為公佈清單。
請注意,新網頁圖示會顯示在檢視所有分類廣告網頁圖示之下,且會用線條連接起來。
這表示「公佈清單」和「檢視所有分類廣告」有親子關係。
- 您也需要一個網頁,供訪客編輯或刪除現有的清單。
比方說,如果訪客新增了腳踏車清單,這份清單已公佈了很長的時間,但始終沒有回應,銷售者可能會想降低要價。
請在「公佈清單」網頁旁新增另一個網頁圖示,將它命名為更新清單。
請注意,這個新網頁圖示是「公佈清單」的同輩,它是「檢視所有分類廣告」的另一個子項。
- 之後,您的網站需要搜尋功能,供訪客搜尋現有的清單來尋找想要的清單。
如果要新增顯示搜尋結果的網頁,請將另一個網頁圖示放在「更新清單」網頁旁,將它命名為過濾清單。
附註:如果您意外將網頁放在錯誤位置,或您要重新排列網頁結構,您可以隨時拖放網頁圖示來重新安排網站。
- 按 Ctrl+S 或按一下儲存按鈕
來加以儲存。這時「導覽」視圖應該看起來如下:
請注意,每個網頁圖示頂端都會有一列小圖示。
第一個 (

) 和第二個圖示 (

) 是可見的,表示所有網頁都預設成會分別出現在導覽和網站對照表中。
第三個圖示 (

) 代表導覽根。
第四個圖示目前仍不可見,它代表圖示的實際相關檔案,建立這些檔案之後,就會出現。
如果您建立 JSP 檔,圖示是藍色菱形 (

);
如果您建立 HTML 檔,圖示是一組方括弧 (

)。
您將在這個這個模組中,進一步學習這些圖示和網頁圖示顯示的其他項目。