網路傳播設計_建立網站

◎建立網站_Homework1 & Homework2
這是我第一次接觸到設計網頁的部分，
在我的工作中會有碰到，但由於寫成是這部分都是有工程師會做，
所以導致我就偷懶沒有去學，
剛好利用這個機會一定要好好給他學一下。
我的網站網址:
http://web2.ntit.edu.tw/~s33973010/

以下是我設計的作業網站畫面(Index/Homework1/Homework2):
●Index


●Homework1_01


●Homework1_02


●Homework1_03

●Homework2_01

●Homework2_02

●Homework2_03

●Homework2_04

資料擷取自阿寶老師部落格:
◎目標
了解網站內容的線性結構、層屬結構與檔案命名學習新功能

●網站地圖 (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_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是你的學號。