網頁設計一直是我很想學的一門課程,只不過在網路連結性與一些常識,我一直無法取領悟!也不敢自己去動手 操作,哪怕檔案存在哪?都會不知道!可是在這兩次的摸索,是乎有點起色了!真的是太感謝阿寶老師了!還有一些同學的幫忙及開導,因為我太會鑽牛角尖了,實在自己想太多了!我相信哪天我一定會成功的!終於我的網頁鋪上去了,在來要放一些文件上去,再增加一些特色的設計了,加油...
資料擷取自寶老師部落格目標了解網站內容的線性結構、層屬結構與檔案命名學習新功能
●網站地圖 (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.到你的部落格,新增「網站結構」的 文章。