網頁設計一直是我很想學的一門課程，只不過在網路連結性與一些常識，我一直無法取領悟！也不敢自己去動手 操作，哪怕檔案存在哪？都會不知道！可是在這兩次的摸索，是乎有點起色了！真的是太感謝阿寶老師了！還有一些同學的幫忙及開導，因為我太會鑽牛角尖了，實在自己想太多了！我相信哪天我一定會成功的！終於我的網頁鋪上去了，在來要放一些文件上去，再增加一些特色的設計了，加油...
資料擷取自寶老師部落格目標了解網站內容的線性結構、層屬結構與檔案命名學習新功能
●網站地圖 (site map)
●線性結構
●層屬結構
●超連結
一、前置作業
1.開啟Dreamweaver，進入網站管理，連結到遠端資訊。
2.於本機端修改上周的index.html檔，加入居中排列，依序作業一、作業二至作業七。
3.存檔。
二、網站地圖
資料擷取自寶老師部落格目標了解網站內容的線性結構、層屬結構與檔案命名學習新功能
●網站地圖 (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，編輯它，換新圖文，
將文章最下方下一篇刪除，另鍵入上一篇。
13.將上一篇的超連結連到article2.html。儲存檔案 article3.html。
14.在瀏覽器測試 (IE的快速鍵為F12鍵)。上傳到伺服
器。
四、層屬結構層屬結構：
三、線性結構
●線性結構：網頁內容像火車那樣，一站接一站往前或倒後。
●實例簡介：利用線性結構，介紹三張圖文說明，用←(上一篇 )及→(下一篇)做超連結。
●製作步驟：
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，編輯它，換新圖文，
將文章最下方下一篇刪除，另鍵入上一篇。
13.將上一篇的超連結連到article2.html。儲存檔案 article3.html。
14.在瀏覽器測試 (IE的快速鍵為F12鍵)。上傳到伺服
器。
四、層屬結構層屬結構：
像書本那樣，一書有數章，每章數節等。實例簡介：利用可任選且具超連結的文字或圖像。
製作步驟：
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.在本地端的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是你的學號
~sxxxxxxx，此處的xxxxxxx是你的學號
沒有留言:
張貼留言