在計算機網絡如此普及的今天，越來越多的人想學習計算機。計算機的用途如此廣泛，讓想學習它的人無所適從。本書面向計算機最普遍的應用，即網頁的制作，力求讓更多的人從中得到啟發。

本書的網頁制作是介于靜態網頁制作和動態網頁制作之間的一門學科。本書共分為三個模塊：HTML語言、CSS語言和JavaScript語言，從網頁制作的基礎認識到網頁的一些簡單變換，再到網頁的高級應用，給想認識和掌握網頁制作的初學者提供了一個入門級的教程。對初學者的網頁制作提供了一個完善和實際的解決方案，也讓希望在計算機網頁制作方面有所成就的人增加自信心，讓他們覺得計算機網頁制作是如此簡單和容易掌握，并且以此來進一步發展。

本書面向最實際和最富可操作性的技能，提供了完整的、具體的操作步驟，讓使用者有遵循的依據。盡管這個依據不是唯一的、最完善的，但它絕對是最簡便的、最容易操作的。

第一個模塊分為七個任務，分別是網頁中的文字、段落、圖片、聲音、表格、表單及頁面分割的基本技能。學會了這部分技能，就對網頁的制作有了更加清楚的認識，能夠制作簡單的網頁。第二個模塊分為三個任務，分別是網頁的文字、層及特效的技能，是對前面的網頁技能的進一步提高，讓學習網頁制作的人感到實用且簡單，也能從中體會到新鮮、有趣。第三個模塊分為四個任務，分別是特效、對象、瀏覽器對象及事件的技能，它又是前兩個模塊的擴展，讓初學者體會到網頁制作的強大，增強自信心，為有志在計算機網頁制作方面有更深入發展的人提供一個新的技能。

本書提供了實用的知識和技能，且都是身邊最常用的技能。學習的目的是應用，讓使用本書的人感覺這正是他想要的、是他百思不得其解的，以提高他的學習興趣。也讓使用本書的人感覺到有具體的方法和步驟參考，以提高他們學習的信心。

本書采用最新的任務驅動式的教學方法。教無定法，但不可無法。在眾多教學方法中選定任務驅動式教學方法，是因為目前它是最接近實際工作的教學方法，可以使讀者覺得他們的工作和所學的是如此接近和相似，讓他們掌握最直接的應用技能，而且一步到位。學習有兩個方向：一個方向是先告訴他為什么，再告訴他怎么做；另一個方向是先告訴他怎么做，再讓他自己找出為什么。第二個方向是人們發現理論的途徑，盡管在眾多實踐中總結出理論是困難的，但這種經驗式的理論是最持久的。你可能覺得直接告訴他為什么更直接、簡便，但他不會應用或規則式地套用讓其往往很快便忘記且不會創新。

眾多朋友的支持是本書得以正常出版的重要原因。感謝我們學院的郝世峰院長對本書的關注和支持，他的反復閱讀和豐富的經驗給了我們無窮的動力和自信，使我們的編撰工作得以順利地開展和進行。還要感謝身邊同事的支持，他們在教學上的豐富經驗使得其在本書內容和教學方法上更有發言權，也使得他們的建議彌足珍貴。

本書的分工如下：第一個模塊由王敏杰編寫；第二個模塊由任云暉編寫；第三個模塊的任務一和任務二由王海濤編寫，任務三和任務四由閆春玲編寫。全書的審核校驗工作由汪衍輝承擔。

由于時間倉促，編者水平有限，在知識、技能和教學方法的安排上難免有疏漏和不足之處，敬請廣大讀者和同仁批評指正。

編 者

2012年2月

前言
模塊一 HTML語言

任務一 認識HTML 2
1.1 案例一 創建第一個HTML文件 2
1.1.1 案例資訊 3
1.1.2 案例步驟 5
1.2 案例二 正確進行網頁布局 5
1.2.1 案例資訊 5
1.2.2 案例步驟 9
任務二 在網頁中對文字及段落進行修飾 10
2.1 案例一 在網頁中插入絕美的文字 10
2.1.1 案例資訊 10
2.1.2 案例步驟 12
2.2 案例二 設計布局合理的段落 15
2.2.1 案例資訊 15
2.2.2 案例步驟 16
2.3 案例三 用列表讓網頁格式更工整 20
2.3.1 案例資訊 20
2.3.2 案例步驟 21
任務三 插入圖片和多媒體讓網頁更生動 26
3.1 案例一 我的音樂賀卡 26
3.1.1 案例資訊 26
3.1.2 案例步驟 27
3.2 案例二 我的網頁也能看電影 29
3.2.1 案例資訊 29
3.2.2 案例步驟 29
3.3 案例三 我的滾動相冊 30
3.3.1 案例資訊 31
3.3.2 案例步驟 31
任務四 如何實現頁面的跳轉 33
4.1 案例一 用文字來進行超鏈接 33
4.1.1 案例資訊 33
4.1.2 案例步驟 34
4.2 案例二 用圖像制作導航條 38
4.2.1 案例資訊 39
4.2.2 案例步驟 39
任務五 學會使用表格 41
5.1 案例一 制作成績表 41
5.1.1 案例資訊 41
5.1.2 案例步驟 42
5.2 案例二 制作課程表 43
5.2.1 案例資訊 43
5.2.2 案例步驟 44
5.3 案例三 用表格進行復雜網頁的布局 48
5.3.1 案例資訊 48
5.3.2 案例步驟 48
任務六 會用表單收集用戶輸入的信息 50
6.1 案例一 制作用戶登錄界面 50
6.1.1 案例資訊 50
6.1.2 案例步驟 52
6.2 案例二 制作用戶注冊界面 54
6.2.1 案例資訊 54
6.2.2 案例步驟 57
任務七 使用框架對頁面進行分割 59
7.1 案例一 使用普通框架進行頁面分割 59
7.1.1 案例資訊 59
7.1.2 案例步驟 61
7.2 案例二 使用內部框架進行頁面分割 62
7.2.1 案例資訊 62
7.2.2 案例步驟 62

模塊二 CSS語言

任務一 認識CSS 65
1.1 案例一 我的第一個CSS文件 65
1.1.1 案例資訊 65
1.1.2 案例步驟 69
任務二 用CSS實現頁面風格的統一 71
2.1 案例一 用CSS美化字體 71
2.1.1 案例資訊 71
2.1.2 案例步驟 72
2.2 案例二 用CSS實現頁面的精細排版 73
2.2.1 案例資訊 73
2.2.2 案例步驟 74
2.3 案例三 用CSS設置對象的邊框 75
2.3.1 案例資訊 75
2.3.2 案例步驟 76
2.4 案例四 用CSS進行頁面的顏色和背
景設置 78
2.4.1 案例資訊 78
2.4.2 案例步驟 79
任務三 學會CSS的高級應用技巧 81
3.1 案例一 用CSS實現層的排版 81
3.1.1 案例資訊 81
3.1.2 案例步驟 83
3.2 案例二 用CSS的濾鏡實現各種特效 85
3.2.1 案例資訊 85
3.2.2 案例步驟 86

模塊三 JavaScrip語言

任務一 認識JavaScript 89
1.1 案例一 Title欄滾動特效 89
1.1.1 案例資訊 89
1.1.2 案例步驟 97
1.2 案例二 水波文字效果 98
1.2.1 案例資訊 98
1.2.2 案例步驟 100
1.3 案例三 頁面中輸入的年月日是否正確 101
1.3.1 案例資訊 102
1.3.2 案例步驟 108
任務二 認識JavaScript對象 113
2.1 案例一 打印機式字符輸出 113
2.1.1 案例資訊 113
2.1.2 案例步驟 119
2.2 案例二 頁面兩側的小廣告 121
2.2.1 案例資訊 121
2.2.2 案例步驟 123
2.3 案例三 記憶測試 125
2.3.1 案例資訊 125
2.3.2 案例步驟 128
2.4 案例四 很酷的日歷 135
2.4.1 案例資訊 135
2.4.2 案例步驟 138
2.5 案例五 產生隨機數 142
2.5.1 案例資訊 142
2.5.2 案例步驟 145
任務三 認識瀏覽器對象 148
3.1 案例一 顯示Navigator對象屬性 148
3.1.1 案例資訊 148
3.1.2 案例步驟 151
3.2 案例二 子窗體返值到母窗體 154
3.2.1 案例資訊 154
3.2.2 案例步驟 156
3.3 案例三 Screen綜合應用實例 158
3.3.1 案例資訊 158
3.3.2 案例步驟 159
3.4 案例四 隱藏菜單 162
3.4.1 案例資訊 162
3.4.2 案例步驟 164
任務四 認識事件 168
4.1 案例一 可移動的導航條 168
4.1.1 案例資訊 168
4.1.2 案例步驟 180
4.2 案例二 驗證輸入的注冊信息 183
4.2.1 案例資訊 183
4.2.2 案例步驟 186
參考文獻 192

1. 基于.NET Core框架的分布式系統架構設計 [湯佳 著]
2. Web用戶界面設計與制作 [主編 趙娟]
3. ASP.NET（C#）網站開發（第二版） [主編 張志明 王輝]
4. Web開發實戰 [主編　肖睿　陳永]
5. Bootstrap與jQuery UI框架設計 [主編 肖睿 吳振宇]
6. 網頁設計與制作 [主編 楊毅]
7. 網頁制作實戰 [主編 肖睿 羅保山]
8. 網頁設計與制作 [主編 陳建國 項煒]
9. 16課學會網頁程序設計—— HTML5+CSS3+JavaScript+jQuery+ [施威銘研究室 著]
10. HTML5+CSS3前端技術——UI設計師與開發人員合作秘籍 [北京課工場教育科技有限公司Q]
11. Web程序設計實踐教程 [主編 侯萍 郭俊榮]
12. 網頁設計與制作 [孫娜 蒲秋梅 南洋 編著]
13. 玩轉Axure RP——Axure RP 7.0高保真網頁、APP原型設計 [謝星星 編著]
14. ASP.NET Web程序設計 [吳琴霞 栗青生 康晶 編著]
15. CSS+DIV頁面布局技術 [主編 朱翠苗]
16. Web開發與安全防范 [主編 武春嶺]
17. 網頁設計實訓教程 [主編 張春英 李英文 鐘大偉]
18. ASP.NET（C#）網站開發 [主編 張志明 王輝]
19. 網頁設計實用技術 [主 編 陳建國 李勤]
20. JSP設計與開發 [秦毅 王可]
21. ASP.NET項目開發教程 [鄒承俊 任 華]
22. 動態網頁設計與制作實用教程（第三版） [程偉淵 倪燃]
23. ASP程序設計（第二版） [葉潮流 杜奕智]
24. 網頁設計與制作實用技術（第二版） [齊建玲 楊艷杰]
25. 多媒體網頁設計教程 [主編 朱國華 齊暉 李楓]
26. 網頁設計與制作（第二版）實訓指導 [任正云 賴玲 嚴永松 王婭紛]
27. 網頁設計與制作（第二版） [任正云 賴玲 嚴永松 編著]
28. 網頁設計與制作 [主編 陳彥許 陳維華]