網站結構探討

目標
觀察網站，熟悉使用者經驗元素中的策略 (Strategy)層、眼界 (Scope)層、結構 (Structure)層。培養sitemap的建構及網站結構的命名。

方法
瀏覽以下的網站

• 創造力公司
• Apple
• frogdesign
  
• zafu
  
• woolworths

隨堂作業

1. 以Dreamweaver連結到你在學校的網站。(假如本地端無內容，你須將遠端內容下載)
   
2. 在本地端網站的www資料夾內，新增work_3資料夾。
3. 依前二公司的網站瀏覽，在work_3資料夾內建立以下二個檔案
   
   1. sitemap1.html，其內容能一目了然地看到創造力公司或Apple公司的網站
      
      1. 對象是誰？ 要提供什麼？
      2. 網站地圖 (另一名稱為網站導覽 )
      3. 網站結構的資料夾命名及各網頁的英文命名。
         註：資料夾的名稱能在瀏覽器的網址欄看到，其原則如下：
         
         • 在http://右方第一個 / 之後未具.html的英文(和或數字)名為第一層資料夾名稱。
         • 在http://右方第二個 / 之後未具.html的英文(和或數字)名為第二層資料夾名稱，餘再依此類推。
         • 網頁的名稱為有.htm或.html或asp或php副檔名者。
4. 在本地端網站的www資料夾內，新增work_4資料夾。
   1. sitemap2.html，內容能一目了然地看到你期未作業欲改善的公司的網站
      
      1. 對象是誰？要提供什麼？
      2. 網站地圖。
      3. 網站結構的資料夾命名及各網頁的英文命名。
      4. 可改善之處何在？
5. 將前兩個檔案存檔並上傳。
   
6. 將www資料夾中index.html檔案中的作業三超連結到work_3資料夾內的sitemap1.html。
7. 將www資料夾中index.html檔案中的作業四超連結到work_4資料夾內的sitemap2.html。
8. 將index.html存檔並上傳。
9. 在瀏覽器測視你的作品。

建議瀏覽

• 到Google搜尋sitemap圖片。
• 同學的作業一
• 同學的作業二
• 同學的作業三
  

下周進度

• 版面編排設計
• Fireworks軟體應用
  

網站結構

目標
了解網站內容的線性結構、層屬結構與檔案命名

學習新功能

• 網站地圖 (site map)
• 線性結構
• 層屬結構
  
• 超連結

一、前置作業

1. 開啟Dreamweaver，進入網站管理，連結到遠端資訊。
2. 於本機端修改上周的index.html檔，加入居中排列，依序作業一、作業二至作業七。
3. 存檔。
   

二、網站地圖
一個網站是眾多網頁的組合，每一個網頁，都是個別的檔案，常見的附檔名為html。每一網頁會與其他網頁建立出關係，例如是同類關係，或者連續關係，或者連結關係。
為了管理這些網頁成為良好的結構，網站會附設網站地圖 (有中譯為網站導覽)，讓維修人員或瀏覽者容易理解整個網站的結構。在架網站時，須先想好內容的組織架構，以期能符合使用者經驗。

三、線性結構

• 線性結構：網頁內容像火車那樣，一站接一站往前或倒後。
• 實例簡介：利用線性結構，介紹三張圖文說明，用←(上一篇)及→(下一篇)做超連結。
• 製作步驟：
  
  1. 在本地端的www資料夾內新增一個資料夾，取一小寫英文名，如work_1。
  2. 在work_1內新增一個檔案，取名為article1.html。
  3. 再新增一個檔案，取名為article2.html。
  4. 再新增一個檔案，取名為article3.html。
  5. 再新增一檔案夾，取名為images。
  6. 將三個圖像 (格式以gif或jpg為主，圖最好在640x480以內) 放入images資料來內。
     
  7. 開啟article1.html，編輯它，使成為圖文作品，在文章最下方下一篇。
  8. 為下一篇設超連結，連到入article2.html。
  9. 儲存檔案article1.html。
     
  10. 另存新檔為article2.html，編輯它，換新圖文，在文章最下方下一篇左側，另鍵入上一篇。
      1. 為下一篇設超連結，連到入article3.html。
      2. 為上一篇設超連結，連到入article1.html。
  11. 儲存檔案article2.html。
  12. 另存新檔為article3.html，編輯它，換新圖文，將文章最下方下一篇刪除，另鍵入上一篇。。
      1. 將上一篇的超連結連到article2.html。
      儲存檔案article3.html。
  13. 在瀏覽器測試 (IE的快速鍵為F12鍵)。
  14. 上傳到伺服器。

四、層屬結構

• 層屬結構：像書本那樣，一書有數章，每章數節等。
• 實例簡介：利用可任選且具超連結的文字或圖像。
• 製作步驟：
  
  1. 在本地端的www資料夾，新增一個資料夾，取一小寫英文名，如work_2。
  2. 在work_2資料夾內新增一個檔案，取名為article1.html。
  3. 再新增一個檔案，取名為article2.html。
  4. 再新增一個檔案，取名為article3.html。
  5. 再新增一個檔案，取名為article4.html。
  6. 再新增一檔案夾，取名為images。
  7. 將四個圖像 (格式以gif或jpg為主，圖最好在640x480以內) 放入images資料來內。
     
  8. article1.html，編輯它，使成為圖文作品，在文章最下方加入第一篇、第二篇、第三篇、第四篇等四個詞，為讓各詞間有空白，按Ctrl+Shift+空間棒。
     
     1. 將第一篇做超連結到article1.html。
     2. 將第二篇做超連結到article2.html。
     3. 將第三篇做超連結到article3.html。
     4. 將第四篇做超連結到article4.html。
  9. 儲存檔案。
  10. 另存新檔，取名為article2.html，取代原檔案，編輯article2.html，存檔。
  11. 另存新檔，取名為article3.html，取代原檔案，編輯article3.html，存檔。
  12. 另存新檔，取名為article4.html，取代原檔案，編輯article4.html，存檔。
  13. 在瀏覽器測試 (IE的快速鍵為F12鍵)。
  14. 上傳到伺服器。

五、首頁與內頁超連結

1. 將index.html檔的作業一與work_1內的article1.html連結。
2. 將index.html檔的作業一與work_2內的article2.html連結。
3. 在瀏覽器測試 (IE的快速鍵為F12鍵)。
4. 儲存檔案。
5. 上傳到伺服器。

六、在部落格做超連結

1. 到你的部落格，新增「網站結構」的文章。
2. 於內文寫「我在校方的網站」，將這些字做成超連結，其網址是http://web2.ntit.edu.tw/~sxxxxxxx，此處的xxxxxxx是你的學號。

網站結構圖

網站是存放資料與人分享的地方，它可以包含許多資訊，為方便管理者及使用者使用，所以有必要加以分類，分類的方法一般如下圖，這樣的結構，第一層是瀏覽者到網站看到的index.html檔，係一網頁，但單一網頁無法包容許多內容，所以會有進一層的分類的必要。例如，你的網站主題是要展現你的作業，所以，你將作業分成三類，如攝影、插畫及文學創作。在攝影類之下，你可能細分成人物類、貝殼類及建築類。在人物類內，你呈現12幅作品.....每一件作品佔用一個html檔。
分類的階層依你的主題及內容而定，簡單者，到第二、三層或更多，但原則是不要讓瀏覽者不知身在何處。

你可到google搜尋，選「圖片」，鍵入「website structure」，按google搜尋，看看別人如何建構網站的架構圖。

觀摩下列網站

• http://www.abc.net.au/children
• http://www.zakka.com.tw

並思考以下幾個問題：

1. 點按同一網站不同選項時，瀏覽器上的網址有什麼變化？
2. 兩個網站的 URL之最後一個副檔名不同，代表什麼意義？
   
3. 點按Sitemap，看它呈現什麼？