了解網站內容的線性結構、層屬結構與檔案命名
學習新功能
- 網站地圖 (site map)
- 線性結構
- 層屬結構
- 超連結
- 開啟Dreamweaver，進入網站管理，連結到遠端資訊。
- 於本機端修改上周的index.html檔，加入居中排列，依序作業一、作業二至作業七。
- 存檔。
一個網站是眾多網頁的組合，每一個網頁，都是個別的檔案，常見的附檔名為html。每一網頁會與其他網頁建立出關係，例如是同類關係，或者連續關係，或者連結關係。
為了管理這些網頁成為良好的結構，網站會附設網站地圖 (有中譯為網站導覽)，讓維修人員或瀏覽者容易理解整個網站的結構。在架網站時，須先想好內容的組織架構，以期能符合使用者經驗。
三、線性結構
- 線性結構：網頁內容像火車那樣，一站接一站往前或倒後。
- 實例簡介：利用線性結構，介紹三張圖文說明，用←(上一篇)及→(下一篇)做超連結。
- 製作步驟：
- 在本地端的www資料夾內新增一個資料夾，取一小寫英文名，如work_1。
- 在work_1內新增一個檔案，取名為article1.html。
- 再新增一個檔案，取名為article2.html。
- 再新增一個檔案，取名為article3.html。
- 再新增一檔案夾，取名為images。
- 將三個圖像 (格式以gif或jpg為主，圖最好在640x480以內) 放入images資料來內。
- 開啟article1.html，編輯它，使成為圖文作品，在文章最下方下一篇。
- 為下一篇設超連結，連到入article2.html。
- 儲存檔案article1.html。
- 另存新檔為article2.html，編輯它，換新圖文，在文章最下方下一篇左側，另鍵入上一篇。
- 為下一篇設超連結，連到入article3.html。
- 為上一篇設超連結，連到入article1.html。
- 儲存檔案article2.html。
- 另存新檔為article3.html，編輯它，換新圖文，將文章最下方下一篇刪除，另鍵入上一篇。。
- 將上一篇的超連結連到article2.html。
- 在瀏覽器測試 (IE的快速鍵為F12鍵)。
- 上傳到伺服器。
- 層屬結構：像書本那樣，一書有數章，每章數節等。
- 實例簡介：利用可任選且具超連結的文字或圖像。
- 製作步驟：
- 在本地端的www資料夾，新增一個資料夾，取一小寫英文名，如work_2。
- 在work_2資料夾內新增一個檔案，取名為article1.html。
- 再新增一個檔案，取名為article2.html。
- 再新增一個檔案，取名為article3.html。
- 再新增一個檔案，取名為article4.html。
- 再新增一檔案夾，取名為images。
- 將四個圖像 (格式以gif或jpg為主，圖最好在640x480以內) 放入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鍵)。
- 儲存檔案。
- 上傳到伺服器。
- 到你的部落格，新增「網站結構」的文章。
- 於內文寫「我在校方的網站」，將這些字做成超連結，其網址是http://web2.ntit.edu.tw/~sxxxxxxx，此處的xxxxxxx是你的學號。
