2008年12月7日 星期日

網路傳播設計_建立網站

網頁設計一直是我很想學的一門課程,只不過在網路連結性與一些常識,我一直無法取領悟!也不敢自己去動手 操作,哪怕檔案存在哪?都會不知道!可是在這兩次的摸索,是乎有點起色了!真的是太感謝阿寶老師了!還有一些同學的幫忙及開導,因為我太會鑽牛角尖了,實在自己想太多了!我相信哪天我一定會成功的!終於我的網頁鋪上去了,在來要放一些文件上去,再增加一些特色的設計了,加油...

資料擷取自寶老師部落格目標了解網站內容的線性結構、層屬結構與檔案命名學習新功能
●網站地圖 (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是你的學號