1 / 22

專業 HTML 網頁設計

P303. 專業 HTML 網頁設計. HTML/DHTML/CSS/JavaScript. 陳錦輝. 第十八章　網頁 DIY. 18.1 登記免費網站及使用工具製作網頁 18.2 建立第一個 DIY 網頁 18.3 段落及線條 18.4 網頁底色及文字變化 18.5 清單 18.6 表格 18.7 超鏈結 18.8 圖片. 第十八章　網頁 DIY. 18.9 框架結構 18.10 多媒體與跑馬燈 18.11 加入表單

chen
Télécharger la présentation

專業 HTML 網頁設計

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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的網站結構，讀者學習任何一種語言或技術時，應培養觀念的建立，而非埋頭於語法的細節。 • 對於各項語法，應該有基本的認識而不必強記完整語法，只要在需要明確語法時，再翻閱書籍即可。以上意見僅提供一些網頁設計的經驗，做為各位讀者參考之用。

More Related