本書由教學團隊與企業密切合作，對課程進行定位，修訂教學大綱，確定教學內容，選用了網站設計最新工具HTML5、Dreamweaver、Fireworks、Flash和jQuery的技術精華。

針對應用技術型院校教學目標和學生情況，教材打破傳統以知識為主線的結構，采用全新教學模式，依托合作企業的成功案例“深房小區”網站項目，任務選擇具有典型性、針對性和代表性。

全書強調應用技術型人才能力培養這條主線，根據網頁設計師的崗位能力需求，結合網站開發過程將內容分為11章。學生以任務驅動直接面對網站項目進行設計與實踐，通過完整設計過程，學會并掌握網站前端設計知識和技術。

我們生活在一個充滿機遇與挑戰的時代，急需大量應用技術型人才。高等教育正在經歷著一場深刻變革，教育存在要服務于社會，應該按照社會不同行業的崗位群來培養有用人才。解決學以致用問題，是高等教育應該完成的教育目的。按照社會不同需求培養出直接有用人才，是教育改革的終極目標。要讓高等教育全面達到應用技術型人才培養的理性發展狀態，就需要在微觀層面從每一個專業領域、每一門課程教材入手，凸顯出能力培養的本質特征。

互聯網應用日益普及，承載信息的網站平臺擁有繽紛多彩的資訊。隨著信息技術快速發展，各類網站設計工具不斷增多。如何選擇設計工具？如何高效快速地學以致用，將自己培養成網站設計開發的應用技術型人才？這是擺在廣大初學者面前迫切需要解決的問題。

教學設計

本書由教學團隊與企業密切合作，對課程進行定位，修訂教學大綱，確定教學內容。選用了網站設計最新工具HTML5、Dreamweaver、Fireworks、Flash和jQuery的技術精華。

針對應用技術型院校教學目標和學生情況，教材打破了傳統以知識為主線的結構，采用全新教學模式，課程教學依托合作企業的成功案例“深房小區”網站項目，范例任務選擇具有典型性、針對性和代表性。教學設計切合工程技術要求，是一個非常適合以技能培養為主線的學習情境。讓學生通過基于工作過程的方式，以任務驅動直接面對網站項目進行設計與實踐，通過完整系列設計過程的學習與訓練，學會并掌握網站前端設計知識和技術。同時，也能夠更好地激發學習者學習的積極性。

教材特色

全書強調應用技術型人才的能力培養這條主線。每項任務都有：設計效果、任務描述、設計思路、任務實現、任務拓展、知識補充等環節，有些還增加了技術要點或任務小結。對設計中遇到的問題和技術要點，給出了諸如“說明”、“解釋”、“講解”、“提示”或“注意”等詳細描述。這樣的過程設計有利于初學者學會如何將技術靈活運用于實踐，同時對遇到的知識和技術能輕松地加以理解，進而掌握針對任務要求的設計方法。每章最后一個環節都給出了“實訓項目”任務，讓學習者再次運用技術進行個性化綜合應用，最終達到熟練掌握Web前端設計實用技能的學習目標。

內容結構鏈條

教材根據網頁設計師的崗位能力需求，結合網站開發過程將內容分為11章。第1章“網站策劃與創建”，包括3個任務：講解互聯網基礎知識，通過剖析典型網站獲得啟示；規劃自己待建網站主題和結構；接著利用Dreamweaver軟件創建開發網站的站點。第2章“HTML5網頁設計”包括3個任務：學習網頁中文字、圖片、聲音和視頻等插入與排版，學會設計單獨頁面的基本技術。第3章“網站首頁設計”包括9個任務：在基本網頁設計基礎上，拓展利用表格進行較為復雜的主頁面設計；主頁用到的Logo設計；頁眉用到的橫幅Gif動畫；導航欄部分的導航條和下拉單設計；頁面經常用到的Flash廣告動畫；以及網站首頁檢查插件并彈出一個公告等。第4章“超鏈接”包括2個任務：超鏈接是網站精髓，前面設計的網站首頁等還是一個個單獨頁面，這里要通過內部鏈接、外部鏈接、錨點鏈接、電子郵件鏈接以及圖像熱點等，將網站中頁面鏈接成為一個整體。第5章“網頁配色與CSS定義布局設計”是教材的重點，將主頁布局設計分為3個任務，每個任務都有其側重點，前兩項涉及頁面整體效果的圖片素材與色彩搭配設計；接著，學習如何一步一步構建一個CSS整體布局頁面。第6章“Spry構件應用”將應用構件分解為3個任務，輕松實現由JavaScript編程才能設計的網站導航條、折疊內容導航和選項卡面板等效果，來重新設計“深房小區”網站生活雜志頁面。第7章“網頁模板設計與表單”包括2個任務：定義與利用模板設計固定樣式的子欄目頁面；創建交互式表單應用。第8章“JavaScript交互效果設計”包括4個任務：設計動態頁面效果，帶你步入腳本程序大門。第9章“jQuery應用設計”利用jQuery將你帶入具有豐富交互與數據更新效果的世界。第10章“網站測試與發布”讓你熟悉測試、發布與更新各項工作和流程。第11章“網站項目開發綜合訓練方案”教你作為一位網站項目設計師，系統地設計完成一個網站項目，所必需經歷訓練的各個環節，包括網站開發規范。

如何有效地使用本書

本書各章節在內容編排上遵循了循序漸進原則，由淺入深地展開學習。從第1章至最后一章每項任務都是環環相扣，在完成前一項任務的基礎上，才能夠完成后一項任務。其中第8、9章無編程經驗讀者可以棄用，對于有一定網頁基礎者，允許選擇感興趣部分參考。

特別指出，1.1.1節是剖析有代表性典型網站，分析這些網站的結構構成。接著，1.2.1節是規劃自己待建網站，從前面剖析中汲取營養，借鑒分析結果，思考、提煉自己感興趣主題，來規劃和設計一個待建網站。待建網站內容和素材資源課后可以不斷查找、搜集。在接下來學習中就需要結合任務和單元實訓項目，獨立完成設計自己網站的頁面，直到最后完成一個網站設計，并進行測試和發布。

全書網站項目資源、任務范例都在教材資源庫中提供。建議下載使用，以便彌補教材無法提供彩頁的不足。

教學建議

本書適合作為應用技術型本科院校相關專業教材，也適合高職高專和自學者使用。本書資源庫提供全部網站文件和范例資源、參考教學大綱。

最好將課程安排在機房，使教學在實訓中進行。既可以是正常課堂教學也可以安排整周實訓。根據各自情況安排50～68學時，有些內容可以選擇使用。

本書教學團隊總結多年網站設計課程教學和項目開發經驗，結合榮獲2008年教育部高等教育“精品教材”的內容更新，針對應用技術型院校學生的培養要求，收集和參考了網站設計最新技術。參加大綱與內容確定的人員有騰訊（深圳）公司唐文榮高級工程師、王明福、范新燦、李斌、楊麗娟、鐘劍龍、莊亞俊、梁雪平等老師，全書由李云程執筆撰寫而成。

編者在撰寫過程中參考了大量書籍和資料，在此對相關作者表示最誠摯的謝意。對騰訊（深圳）公司及唐文榮高級工程師、教學團隊老師們在課程開發過程中的合作和幫助表示感謝。

本教材的撰寫是一次全新嘗試，教學方法也有待不斷探索和總結，加之時間倉促、水平有限，不妥之處懇請批評指正，以便下次修訂時加以改進。E-mail: yunchengli@sina.com。

李云程

2014年5月

第1章 網站策劃與創建 1
1.1 互聯網與網站剖析 1
1.1.1 網站基礎知識 2
1.1.2 任務：網站剖析 4
1.1.3 任務實現 5
1.2 網站策劃設計 7
1.2.1 任務：策劃一個自己待建主題網站 7
1.2.2 任務實現 8
1.2.3 知識補充：網站策劃與頁面設計 8
1.3 使用Dreamweaver創建網站站點 14
1.3.1 任務：創建與維護待建網站站點 14
1.3.2 任務實現 17
1.3.3 知識補充：Web網站與維護 22
實訓項目一 23
第2章 HTML5網頁設計 25
2.1 制作基本網頁 25
2.1.1 任務：一個“云南怒江游記”的
文字頁面 25
2.1.2 任務實現 26
2.1.3 知識補充：定義Dreamweaver的首選
參數和HTML5簡介 33
2.2 制作圖文網頁 38
2.2.1 任務：帶有文字和圖片混排的
“云南怒江游記”頁面 38
2.2.2 任務實現 39
2.2.3 任務拓展：為文字配多張圖片 42
2.2.4 知識補充：圖像使用和Dreamweaver
的組件功能 43
2.3 制作多媒體網頁 45
2.3.1 任務：一個帶有文字、圖片和視頻
的頁面 45
2.3.2 任務實現 46
2.3.3 任務拓展：帶有歌曲鏈接和Flash
動畫等效果的頁面 49
2.3.4 知識補充：常用多媒體對象 53
實訓項目二 56
第3章 網站首頁設計 58
3.1 利用表格布局設計首頁 58
3.1.1 任務：設計一個網站首頁頁面 59
3.1.2 任務實現 60
3.1.3 知識補充：網頁布局設計 63
3.2 設計網站Logo 65
3.2.1 任務：設計深房小區網站Logo 66
3.2.2 任務實現 66
3.2.3 任務拓展：設計另一個深房小區
網站Logo 68
3.2.4 知識補充 70
3.3 設計Gif動畫 71
3.3.1 任務：設計一個橫幅的Gif動畫廣告 72
3.3.2 任務實現 73
3.3.3 任務拓展：設計一個圖形圍繞中心
順時針不停旋轉Gif動畫 75
3.3.4 知識補充：動畫設計 78
3.4 設計網站導航條 79
3.4.1 任務：設計一組導航條 79
3.4.2 任務實現 80
3.4.3 任務拓展：利用系統按鈕設計導航條 82
3.4.4 知識補充：導航條設計 83
3.5 導航下拉單 84
3.5.1 任務：設計一帶有下拉菜單的導航條 85
3.5.2 任務實現 86
3.5.3 知識補充：再談設計下拉菜單 89
3.6 用Flash設計文字變化動畫 90
3.6.1 任務：設計一個橫幅文字變化廣告 91
3.6.2 任務實現 92
3.6.3 知識補充：Flash動畫設計 98
3.7 用Flash設計帶有圖文變化動畫 101
3.7.1 任務：設計一個帶有圖文變化
廣告條 101
3.7.2 任務實現 103
3.7.3 知識補充：Flash設計規范 110
3.8 用Flash設計復雜變化效果 111
3.8.1 任務：設計一個復雜變化效果廣告 111
3.8.2 任務實現 113
3.8.3 知識補充：Flash動畫場景應用 120
3.8.4 任務小結 120
3.9 在主頁中檢查插件和跳出公告窗口 122
3.9.1 任務：網站首頁檢查插件并彈出
一個公告 122
3.9.2 任務實現 125
3.9.3 知識補充：行為面板及其功能 127
實訓項目三 131
第4章 超鏈接 132
4.1 創建文字圖片內外部鏈接和電子
郵件鏈接 132
4.1.1 任務：設計頁面各種超鏈接 133
4.1.2 任務實現 134
4.2 創建錨點鏈接以及圖像熱點 136
4.2.1 任務：為頁面信息設置錨點鏈接 137
4.2.2 任務實現 138
4.2.3 任務拓展：在頁面地圖上設置
熱點鏈接 139
4.2.4 知識補充：網頁文檔的設計備注 140
實訓項目四 142
第5章 網頁配色與CSS定義布局設計 144
5.1 玻璃質感導航按鈕與主頁配色設計 144
5.1.1 任務：設計一組玻璃質感按鈕 145
5.1.2 任務實現 145
5.1.3 知識補充：顏色搭配設計 147
5.2 頁眉圖片和Logo視覺修飾設計 148
5.2.1 任務：設計一幅頁眉圖片 148
5.2.2 任務實現 149
5.2.3 知識補充：網站整體風格設計 152
5.3 用CSS與Div設計網頁 154
5.3.1 任務：一個網頁的布局設計 154
5.3.2 任務實現 156
5.3.3 任務拓展：CSS及其規則 168
5.3.4 知識補充：Dreamweaver中
創建CSS 170
實訓項目五 172
第6章 Spry構件應用 174
6.1 Spry菜單欄構件 174
6.1.1 任務：用Spry菜單欄構件設計網站
導航條 175
6.1.2 任務實現 176
6.1.3 知識補充：Spry Widget的進一步
說明 181
6.2 Spry折疊構件 182
6.2.1 任務：用Spry折疊構件設計網站
左側內容導航 182
6.2.2 任務實現 183
6.3 Spry選項卡式與可折疊式等構件 188
6.3.1 任務：用Spry選項卡式面板等設計
正文內容顯示效果 188
6.3.2 任務實現 190
6.3.3 任務小結 194
實訓項目六 195
第7章 網頁模板設計與表單 197
7.1 使用模板制作頁面 197
7.1.1 任務：定義與利用模板設計“時尚
直擊”子欄目頁面 198
7.1.2 任務實現 199
7.1.3 知識補充：Dreamweaver創建模板
的首選參數 203
7.2 表單 204
7.2.1 任務：創建交互式表單 204
7.2.2 任務實現 205
實訓項目七（a） 209
實訓項目七（b） 210
第8章 JavaScript交互效果設計 212
8.1 日期時間對象Date() 212
8.1.1 任務：在頁面內顯示日期時間并倒記時天數 213
8.1.2 任務實現 214
8.1.3 任務拓展：在頁面上顯示時間和
中文日期 221
8.2 樹型目錄設計 224
8.2.1 任務：樹型目錄導航設計 224
8.2.2 任務實現 225
8.2.3 任務拓展：單純利用表格設計
樹型目錄 231
8.3 隱藏的浮動導航面板 234
8.3.1 任務：設計可以隱藏于瀏覽器側面
的導航面板 234
8.3.2 任務實現 235
8.4 鼠標控制文字運動效果 241
8.4.1 任務：跟隨鼠標運動的蛇形文字 242
8.4.2 任務實現 243
實訓項目八 245
第9章 jQuery應用設計 246
9.1 jQurey選擇器使用 246
9.1.1 任務：利用jQuery改變頁面
顯示效果 247
9.1.2 任務實現 248
9.1.3 任務小結 251
9.1.4 任務拓展：使用幾個常用方法
設計頁面效果 251
9.1.5 知識補充：jQuery選擇器與方法 257
9.2 圖片切換效果設計 259
9.2.1 任務：在頁面顯示圖片切換廣告 259
9.2.2 任務實現 260
9.2.3 任務小結：jQuery選擇器 262
9.2.4 任務拓展：頁面帶有縮圖的圖片
切換效果 263
9.2.5 任務拓展：在頁面顯示圖片
切換廣告 265
9.2.6 任務拓展：又一種圖片切換
廣告效果 268
9.3 導航條與下拉菜單設計 272
9.3.1 任務：設計水平二級菜單效果 272
9.3.2 任務實現 273
9.3.3 任務小結 276
9.3.4 任務拓展：帶有濾鏡切換效果的
導航條設計 276
9.4 jQuery Ajax技術 281
9.4.1 任務：利用jQuery Load( )方法
加載數據 281
9.4.2 任務實現 282
9.4.3 任務拓展：jQuery 常用客戶端與服務器端數據加載方法設計 285
9.4.4 知識補充：GET和POST方法差異
和jQuery Ajax操作函數 288
實訓項目九 289
第10章 網站測試與發布 291
10.1 部署發布以及更新網站 292
10.1.1 任務：網站測試與發布 292
10.1.2 任務實現 293
10.1.3 知識補充：定義IIS站點服務器 300
實訓項目十 301
第11章 網站項目開發綜合訓練方案 302
11.1 項目立項與規劃 302
11.2 項目建設方案 303
11.3 網站設計與實現 305
11.3.1 網站頁面設計 305
11.3.2 網站設計特別注意問題 314
11.3.3 一位早期Microsoft公司網站
設計者的經驗 316
11.3.4 測試 318
11.3.5 推廣站點 318
11.4 網站開發規范 319
11.4.1 確定網站目錄結構 319
11.4.2 確定網站的鏈接結構 319
11.4.3 命名規范 320
11.4.4 搜索框設計規范 324
11.4.5 頁碼設計規范 326
11.4.6 文字編排與設計 327
11.4.7 文字超鏈接 332
11.4.8 局部效果設計 333
11.4.9 頁面各個模塊修飾設計 335
11.4.10 廣告設計規范 335
11.4.11 頁腳信息 335
11.4.12 圖片修飾設計 336
參考文獻 339

1. 庭院風骨—樹、灌、籬 [創意房主 著]
2. Python語言程序設計教程 [郭其標 房宜汕]
3. 微積分（經管類）教程篇（下冊） [曹海軍 王海棠 周玲麗]
4. 微積分（經管類）教程篇（上冊） [曹海軍 王海棠 周玲麗]
5. 微積分（經管類）導學篇（上冊） [王海棠 曹海軍 周玲麗]
6. 網站前端技術案例教程（HTML+CSS+JavaScript）（第二版） [黃華升]
7. 線性代數 [主編 史昱 陳鳳欣]
8. 電力電子技術課程學習及實驗指導 [主編 陳榮]
9. 成長對話：青春的榜樣 [主編　施端銀　黃武剛　應巨林]
10. 人工智能應用基礎 [主編 楊纓 李佳]
11. 中華水文化（慕課版）（第二版） [畢雪燕 楊華軻 羅玲誼 等編著]
12. 電路與電子技術Ⅱ——電路分析基礎 [主編 陳曉 金哲]
13. 飛機維修專業英語——飛機系統（第二版） [趙迎春]
14. 英語大爆炸：跟趣味情景劇學口語（微課版） [秦然　編著]
15. 機械工程制圖任務跟蹤訓練 [主編 王瑞清 趙金考 周彥云 ]
16. 機械工程制圖 [主編 覃國萍 劉百順 禹晨]
17. 平面設計與制作項目化教程 [主編　李晨]
18. 后期影像剪輯技術 [主編　郭建偉]
19. 人工智能概論（第二版） [主編　任云暉　丁紅　徐迎春 ]
20. 信息時代美育之道 [主編　劉宏宇　黎婭]
21. 數字媒體交互設計項目式教程（微課版） [主編　蘇陸]
22. 動畫運動規律項目實例解析（微課版） [孫珊珊　袁維坤]
23. 自然語言處理 [主編　馮建周]
24. 新媒體內容創作實務（微課版） [主編　覃思源]
25. 人工智能基礎 [主編 余平 張春陽]
26. 人工智能導論 [主編 王飛 潘立武]
27. Amazing！兒童英語自然拼讀分級教材（全8冊） [王玲　編著]
28. Spark大數據處理技術 [主編　劉仁山　周洪翠　莊新妍]
29. 毫無PS痕跡—你的第一本Photoshop書（第二版） [趙鵬 著]
30. 電視新聞制作（活頁式） [主編 王曉翠 劉傳琳]