專業 HTML 網頁設計

1. P303 專業HTML網頁設計 HTML/DHTML/CSS/JavaScript 陳錦輝

2. 第十八章　網頁DIY • 18.1 登記免費網站及使用工具製作網頁 • 18.2 建立第一個DIY網頁 • 18.3 段落及線條 • 18.4 網頁底色及文字變化 • 18.5 清單 • 18.6 表格 • 18.7 超鏈結 • 18.8 圖片

3. 第十八章　網頁DIY • 18.9 框架結構 • 18.10 多媒體與跑馬燈 • 18.11 加入表單 • 18.12 架設IIS 5.1伺服器 • 18.13 使用CSS樣式表美化網頁 • 18.14 使用JavaScript • 18.15 圖片動畫 • 18.16 動態選單 • 18.17 網頁設計軟體及本書結語

4. 18.1　登記免費網站及使用工具製 作網頁 • 在本節中，將使用Yahoo!奇摩所提供的免費網頁空間置放練習用網頁，並將使用該網站所提供的網頁製作工具製作一個簡單的網頁。 • 此免費網頁空間將一直沿用至18.12節，由自行架設IIS網頁伺服器之後，再將網頁移到所架設的網站中。並且在本節中使用工具所製作的網頁也將於下一節棄之不用，重新一步步來建構DIY網頁。 • 範例18-1： • 請參照課本p.18-2~p.18-6

5. 18.2　建立第一個DIY網頁 • 在本節中，將建立第一個DIY網頁，名稱為main.htm，並且由於Yahoo!奇摩站預設的首頁名稱為index.html。 • 因此，也利用<meta>標籤，將網頁自動引導到default.htm(這是IIS的預設首頁名稱)，再將網頁引導至main.htm。 • 範例18-2： • 執行結果 • 請參照課本p.18-7~p.18-9

6. 18.3　段落及線條 • 針對18.2節的main網頁做適當的初步排版，使得網頁看起來整齊一些。 • 範例18-3： • 執行結果

7. 18.4　網頁底色及文字變化 • 把18.3節的main網頁加上底色，並做一些文字變化，使得網頁看起來更漂亮一些。 • 範例18-4： • 執行結果

8. 18.5　清單 • 使用清單來安排3個網頁內容，分別為『書籍介紹』、『書籍排行』、『新書預告』。 • 範例18-5： • 執行結果 • 執行結果 • 執行結果

9. 18.6　表格 • 在網頁中加入表格來表示資料，並且使用無邊框的表格來對齊網頁內容。 • 範例18-6： • 執行結果 • 執行結果 • 執行結果 • 執行結果

10. 18.7　超鏈結 • 將超鏈結加入網頁之中，使得網頁與網頁間產生互動，甚至還可以連線到其他的網站。 • 範例18-7： • 執行結果 • 執行結果 • 執行結果 • 執行結果 • 執行結果

11. 18.8　圖片 • 將圖片加入網頁之中，使得網頁看起來更加漂亮，並且我們也整合圖片、表格、超鏈結等3項HTML標籤，使得網頁更加專業化。 • 範例18-8： • 執行結果 • 執行結果 • 執行結果 • 執行結果

12. 18.9　框架結構 • 為了讓網頁內容更豐富以及瀏覽順暢，將框架結構加入網頁之中，並修正各項超鏈結的目標視窗。 • 範例18-9： • 執行結果 • 執行結果 • 請參照課本p.18-34~p.18-41

13. 18.10　多媒體與跑馬燈 • 在網頁中加入跑馬燈與背景音樂，您可以將跑馬燈內容換成最新消息，也可以錄製一段語音，做為背景音樂。 • 範例18-10： • 執行結果

14. 18.11　加入表單 • 將在網頁中加入<form>表單，讓瀏覽者可以與伺服器間取得某些聯繫，例如：輸入留言、訂購書籍等等。 • 範例18-11： • 執行結果

15. 18.12　架設IIS 5.1伺服器 • 將order.htm以及save_message.htm目標程式設為ASP檔案，不過Yahoo!奇摩站並未提供執行ASP程式的環境。 • 因此，依照範例12-7架設Windows XP Professional(含IIS 5.1伺服器)於E磁碟機中，然後將網頁移到自行架設的IIS伺服器子目錄DIY中。 • 範例18-12： • 執行結果 • 請參照課本p.18-47

16. 18.13　使用CSS樣式表美化網頁 • 將某些網頁加入CSS樣式表來加以美化，儘可能將CSS樣式表應用在HTML所無法完成的效果，以突顯CSS強大的能力。 • 範例18-13： • 將ch18_13目錄下的所有檔案及子目錄複製到伺服 器DIY字目錄 • 執行結果

17. 18.14　使用JavaScript • 由於可能仍然不是非常熟悉JavaScript語法，因此並不打算加入過多的JavaScript特效，僅僅提供一個最簡單的開新視窗範例，這個特效在商業網站中通常用來扮演顯示最新消息的角色。 • 範例18-14： • 將ch18_14目錄下的所有檔案及子目錄複製到伺服 器DIY字目錄 • 執行結果

18. 18.15　圖片動畫 • 在right.htm中的圖片並不是全部都具有動畫效果，將右邊的圖片修改為百葉窗的動畫效果，以增加網頁的生動感。 • 範例18-15： • 將ch18_15目錄下的所有檔案及子目錄複製到伺服 器DIY字目錄 • 執行結果

19. 18.16　動態選單 • 雖然top網頁的超鏈結能夠改變左框架，但仍舊不是非常方便，將下拉式選單加入網頁之中，取代原本上框架中的超鏈結。 • 範例18-16： • 將ch18_16目錄下的所有檔案及子目錄複製到伺服 器DIY字目錄 • 執行結果

20. 18.17　網頁設計軟體及本書結語 • 假設要更新資料，則可以使用網頁設計軟體FrontPage或Dreamweaver載入原網頁檔案，於所見即所得的視窗中加以修改就可以了，如此一來，可以避免在HTML檔案中尋找資料不易的困擾。 • FrontPage、Dreamweaver的網頁製作功能越來越完備，但有時候仍無法完全設計出所需要的網頁。

21. 18.17　網頁設計軟體及本書結語 • 關於HTML與FrontPage、Dreamweaver的使用及學習並無一定的順序，事實上，一般會用FrontPage、Dreamweaver拉出網頁雛型，再進入HTML檔案中做細微的調整，而最後要更新網頁資料時，也會回到FrontPage、Dreamweaver中來修改。 • 此外，FrontPage、Dreamweaver也可以做為JavaScript的除錯器，以方便設計JavaScript程式。

22. 18.17　網頁設計軟體及本書結語 • 資訊技術一日千里，網頁技術更是蓬勃發展，但許多觀念並不容易更改，例如Client/Server的網站結構，讀者學習任何一種語言或技術時，應培養觀念的建立，而非埋頭於語法的細節。 • 對於各項語法，應該有基本的認識而不必強記完整語法，只要在需要明確語法時，再翻閱書籍即可。以上意見僅提供一些網頁設計的經驗，做為各位讀者參考之用。