網站結構

33973006 昭雯的網站


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

學習新功能

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

超連結
一、前置作業

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

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

三、線性結構

線性結構：網頁內容像火車那樣，一站接一站往前或倒後。
實例簡介：利用線性結構，介紹三張圖文說明，用←(上一篇)及→(下一篇)做超連結。
製作步驟：

在本地端的www資料夾內新增一個資料夾，取一小寫英文名，如work_1。
在work_1內新增一個檔案，取名為article1.html。
再新增一個檔案，取名為article2.html。
再新增一個檔案，取名為article3.html。
再新增一檔案夾，取名為images。
將三個圖像放入images資料來內。

開啟article1.html，編輯它，使成為圖文作品，在文章最下方下一篇。
為下一篇設超連結，連到入article2.html。
儲存檔案article1.html。

另存新檔為article2.html，編輯它，換新圖文，在文章最下方下一篇左側，另鍵入上一篇。
為下一篇設超連結，連到入article3.html。
為上一篇設超連結，連到入article1.html。
儲存檔案article2.html。
另存新檔為article3.html，編輯它，換新圖文，將文章最下方下一篇刪除，另鍵入上一篇。。
將上一篇的超連結連到article2.html。
儲存檔案article3.html。
在瀏覽器測試 (IE的快速鍵為F12鍵)。
上傳到伺服器。
四、層屬結構

層屬結構：像書本那樣，一書有數章，每章數節等。
實例簡介：利用可任選且具超連結的文字或圖像。
製作步驟：

在本地端的www資料夾，新增一個資料夾，取一小寫英文名，如work_2。
在work_2資料夾內新增一個檔案，取名為article1.html。
再新增一個檔案，取名為article2.html。
再新增一個檔案，取名為article3.html。
再新增一個檔案，取名為article4.html。
再新增一檔案夾，取名為images。
將四個圖像放入images資料來內。

article1.html，編輯它，使成為圖文作品，在文章最下方加入第一篇、第二篇、第三篇、第四篇等四個詞，為讓各詞間有空白，按Ctrl+Shift+空間棒。

將第一篇做超連結到article1.html。
將第二篇做超連結到article2.html。
將第三篇做超連結到article3.html。
將第四篇做超連結到article4.html。
儲存檔案。
另存新檔，取名為article2.html，取代原檔案，編輯article2.html，存檔。
另存新檔，取名為article3.html，取代原檔案，編輯article3.html，存檔。
另存新檔，取名為article4.html，取代原檔案，編輯article4.html，存檔。
在瀏覽器測試 (IE的快速鍵為F12鍵)。
上傳到伺服器。
五、首頁與內頁超連結

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


越看越花 這真是有難度阿