練習 1.2:設計網站結構

顯示說明文件

您必須先完成練習 1.1:建立 Web 專案,才能設計網站結構。

網站是網頁的集合所組成的。 網頁含有實際的內容,如 HTML 元素、影像和鏈結,網站則是網頁如何彼此配合的一種階層設計和組織。 網站應該有它的高階目標(如提供有組織的分類廣告清單集合區域),個別網頁則是用來配合高階目標的特定用途(如搜尋清單的網頁)。

在設計網站時,最好先設想網站應該支援哪些功能來實現整體目標。 關於分類廣告網站,您知道您想要網站執行一些功能。 比方說,您知道您想使網站訪客能夠同時搜尋和檢視清單,且您要他們能夠建立和編輯新的清單。

為了使網站執行這些功能,我們在這個練習中規劃了四個網頁,下一個練習則要建立網頁本身。 這些網頁包括:


  1. 在「專案導覽器」視圖中,按一下 ClassifiedsTutorial 專案旁的 + 號來展開它。
  2. 按兩下「專案導覽器」視圖中的網站導覽。這時會開啟 Web Site Designer 的「導覽」視圖。 您可以利用這個工具來新增、刪除和重新排列組成網站的網頁。
  3. 首先,「導覽」視圖不會顯示任何網頁圖示。 您在設計網站時,最先設想的網頁通常是網站的最上頁或首頁。 這是訪客進入網站的網頁。 請從「選用區」視圖中,將新網頁元件拖放在「導覽」視圖中。 這時會出現含有焦點網頁導覽標題的網頁圖示。
  4. 這個網頁會成為顯示資料庫所有廣告的首頁。 請輸入檢視所有分類廣告來作為網頁的導覽標題。 稍後,您將學習如何將導覽標題當作網頁標籤來進行網站導覽。
  5. 那麼,訪客如何將他們自己的清單公佈在您的網站呢? 他們需要一個用來建立新清單的網頁。 請將新網頁元件拖曳到「導覽」視圖中,在檢視所有分類廣告網頁圖示之下來新增第二個網頁圖示。  
  6. 將新網頁命名為公佈清單。 請注意,新網頁圖示會顯示在檢視所有分類廣告網頁圖示之下,且會用線條連接起來。 這表示「公佈清單」和「檢視所有分類廣告」有親子關係。
  7. 您也需要一個網頁,供訪客編輯或刪除現有的清單。 比方說,如果訪客新增了腳踏車清單,這份清單已公佈了很長的時間,但始終沒有回應,銷售者可能會想降低要價。 請在「公佈清單」網頁旁新增另一個網頁圖示,將它命名為更新清單。 請注意,這個新網頁圖示是「公佈清單」的同輩,它是「檢視所有分類廣告」的另一個子項。
  8. 之後,您的網站需要搜尋功能,供訪客搜尋現有的清單來尋找想要的清單。 如果要新增顯示搜尋結果的網頁,請將另一個網頁圖示放在「更新清單」網頁旁,將它命名為過濾清單
    附註:如果您意外將網頁放在錯誤位置,或您要重新排列網頁結構,您可以隨時拖放網頁圖示來重新安排網站。
  9. Ctrl+S 或按一下儲存按鈕「儲存」按鈕來加以儲存。這時「導覽」視圖應該看起來如下:
網站導覽

請注意,每個網頁圖示頂端都會有一列小圖示。 第一個 () 和第二個圖示 () 是可見的,表示所有網頁都預設成會分別出現在導覽和網站對照表中。 第三個圖示 () 代表導覽根。 第四個圖示目前仍不可見,它代表圖示的實際相關檔案,建立這些檔案之後,就會出現。 如果您建立 JSP 檔,圖示是藍色菱形 (); 如果您建立 HTML 檔,圖示是一組方括弧 ()。 您將在這個這個模組中,進一步學習這些圖示和網頁圖示顯示的其他項目。

您已建立好一般網站結構,現在,您已準備好開始練習 1.3:將網頁移入網站

使用條款 | 讀者意見

(C) Copyright IBM Corporation 1999, 2004. All Rights Reserved.