網(wǎng)頁設(shè)計(jì)與制作

•突出高職教育特色。根據(jù)行業(yè)企業(yè)需要，基礎(chǔ)知識和理論以“必需、夠用”為度，強(qiáng)化學(xué)生實(shí)踐能力的培養(yǎng)，提升從業(yè)技能。

•定位最新技術(shù)。在強(qiáng)化基礎(chǔ)知識和基本技能的基礎(chǔ)上，兼顧軟件的最新版本和行業(yè)應(yīng)用的最新技術(shù)并進(jìn)行講解。

•采用實(shí)例教學(xué)。依托參編人員豐富的網(wǎng)站制作經(jīng)驗(yàn)，每章至少一個(gè)實(shí)例，方便學(xué)生學(xué)習(xí)，激發(fā)學(xué)習(xí)興趣。

隨著WWW技術(shù)的日益成熟，以Internet為基礎(chǔ)的電子商務(wù)、電子政務(wù)、電子校園等信息化手段成為工作、生活的重要內(nèi)容，而網(wǎng)站和網(wǎng)頁作為WWW網(wǎng)絡(luò)的最常規(guī)方式，已成為企、事業(yè)單位和個(gè)人的網(wǎng)上名片。網(wǎng)頁（站）設(shè)計(jì)與制作行業(yè)需要一大批具有一定理論基礎(chǔ)和較強(qiáng)操作技能的專業(yè)技術(shù)人才。為了適應(yīng)行業(yè)企業(yè)需要，許多高職高專院校在計(jì)算機(jī)、電子商務(wù)、軟件技術(shù)、多媒體等專業(yè)開設(shè)了網(wǎng)頁設(shè)計(jì)與制作課程。為此，我們組織多位具有多年教學(xué)經(jīng)驗(yàn)和較強(qiáng)實(shí)踐能力的老師，編寫了這本適合高職高專院校在校生使用的教材，以滿足廣大教師和學(xué)生的需要。

本教材緊緊抓住行業(yè)需要，以培養(yǎng)能力、突出實(shí)用為主要出發(fā)點(diǎn)。全書在介紹網(wǎng)頁設(shè)計(jì)與制作相關(guān)知識的基礎(chǔ)上，以實(shí)例為主線，詳細(xì)介紹制作步驟、方法和技巧。

本教材充分考慮高職院校學(xué)生的認(rèn)知特點(diǎn)，每章通過具有綜合性、創(chuàng)造性、實(shí)踐性的實(shí)例，在促進(jìn)學(xué)生綜合運(yùn)用所學(xué)知識、提升制作能力的同時(shí)，激發(fā)學(xué)生的學(xué)習(xí)興趣。全書共分8章，主要內(nèi)容如下：

第1章通過一個(gè)農(nóng)家院網(wǎng)站的設(shè)計(jì)與制作，介紹網(wǎng)頁的基本概念和網(wǎng)站、網(wǎng)頁的常規(guī)操作。

第2章通過一個(gè)工業(yè)企業(yè)網(wǎng)站的設(shè)計(jì)，介紹常用網(wǎng)頁元素（文字、圖像、表格和超鏈接等）的創(chuàng)建與設(shè)置方法。

第3章通過一個(gè)旅游網(wǎng)站的設(shè)計(jì)與制作，重點(diǎn)講解CSS樣式在網(wǎng)頁設(shè)計(jì)與制作中的應(yīng)用。

第4章通過一個(gè)網(wǎng)頁拼圖游戲的設(shè)計(jì)與制作，講解網(wǎng)頁特效的相關(guān)知識，包括利用Dreamweaver軟件本身制作特效和如何從網(wǎng)上下載特效并進(jìn)行修改等。

第5章通過一個(gè)留言板的設(shè)計(jì)與制作，講解表單和動(dòng)態(tài)網(wǎng)站開發(fā)環(huán)境的搭建等內(nèi)容。

第6章通過制作網(wǎng)頁的Logo、效果圖和背景圖像等，講解如何使用Photoshop軟件處理網(wǎng)頁的圖像。

第7章通過圖片輪顯動(dòng)畫和引導(dǎo)頁動(dòng)畫的設(shè)計(jì)與制作，講解如何使用Flash軟件制作網(wǎng)頁動(dòng)畫。

第8章通過一個(gè)完整的網(wǎng)站制作實(shí)例，講解網(wǎng)站規(guī)劃、圖像制作、動(dòng)畫制作和網(wǎng)頁編輯合成等內(nèi)容，使學(xué)習(xí)者在全書內(nèi)容的基礎(chǔ)上，所學(xué)知識和技能得到升華。

本教材的主要特色如下：

（1）突出高職教育特色。根據(jù)行業(yè)企業(yè)需要，基礎(chǔ)知識和理論以“必需、夠用”為度，強(qiáng)化學(xué)生實(shí)踐能力的培養(yǎng)，提升從業(yè)技能。

（2）定位最新技術(shù)。在強(qiáng)化基礎(chǔ)知識和基本技能的基礎(chǔ)上，兼顧軟件的最新版本和行業(yè)應(yīng)用的最新技術(shù)并進(jìn)行講解。

（3）采用實(shí)例教學(xué)。依托參編人員豐富的網(wǎng)站制作經(jīng)驗(yàn)，每章至少一個(gè)實(shí)例，方便學(xué)生學(xué)習(xí)，激發(fā)學(xué)習(xí)興趣。

（4）在內(nèi)容上做到內(nèi)容全面、重點(diǎn)突出、針對性強(qiáng)。在內(nèi)容安排上，加入了軟件之外的網(wǎng)頁特效、動(dòng)態(tài)網(wǎng)站開發(fā)初步等章節(jié)；為適應(yīng)目前網(wǎng)站開發(fā)的新趨勢，強(qiáng)化CSS樣式在網(wǎng)頁設(shè)計(jì)與制作中的應(yīng)用；同時(shí)，大膽刪除了許多網(wǎng)站開發(fā)中少用或不用的內(nèi)容。

（5）遵循高職教育的教學(xué)規(guī)律。本教材的主編與副主編大部分為教育學(xué)碩士，具有多年的教學(xué)與實(shí)踐經(jīng)驗(yàn)，能夠?qū)⒕W(wǎng)站設(shè)計(jì)與制作知識和技能與教學(xué)工作緊密結(jié)合。

本書由陳彥許、陳維華任主編，盧愛芹、李巍、方士杰任副主編，同時(shí)參與本書編寫工作的人員還有郭士琪、張紅艷、吳樹芳、姜清超、王紅艷、梅豪杰、潘霞、付巖等。

由于計(jì)算機(jī)技術(shù)發(fā)展迅速，加上編者水平所限，書中難免有錯(cuò)誤和不妥之處，歡迎廣大讀者批評指正。

目 錄
前言

第1章 網(wǎng)頁設(shè)計(jì)與制作概述 1
1.1 網(wǎng)站設(shè)計(jì)與制作的基礎(chǔ)知識 1
1.1.1 網(wǎng)站設(shè)計(jì)的有關(guān)概念 1
1.1.2 超文本協(xié)議、超文本標(biāo)記語言網(wǎng)頁 2
1.1.3 常用的網(wǎng)頁設(shè)計(jì)與制作工具 4
1.2 Dreamweaver的操作界面 5
1.2.1 菜單欄 6
1.2.2 文檔標(biāo)題欄 6
1.2.3 文檔工具欄 6
1.2.4 插入工具欄 6
1.2.5 狀態(tài)欄 6
1.2.6 屬性欄 7
1.2.7 浮動(dòng)窗口 7
1.3 站點(diǎn)操作 7
1.3.1 站點(diǎn)的創(chuàng)建 7
1.3.2 文件的操作 10
1.3.3 頁面屬性 11
1.4 實(shí)踐與運(yùn)用—農(nóng)家院網(wǎng)站的設(shè)計(jì)
與制作 11
1.4.1 站點(diǎn)的建立 11
1.4.2 新建網(wǎng)頁 14
1.4.3 網(wǎng)頁的設(shè)計(jì) 15
1.4.4 設(shè)置超鏈接 19
復(fù)習(xí)思考題 20
第2章 Dreamweaver的基本操作 21
2.1 表格操作 21
2.1.1 表格基本語法 21
2.1.2 插入表格 22
2.1.3 編輯表格 23
2.1.4 編輯行、列和單元格 24
2.1.5 特殊樣式表格的制作 25
2.1.6 使用表格布局網(wǎng)頁 29
2.2 文字操作 31
2.2.1 插入標(biāo)題文本 31
2.2.2 插入普通文本 31
2.2.3 插入特殊字符 32
2.2.4 設(shè)置文本樣式 33
2.2.5 設(shè)置文本列表 35
2.2.6 添加滾動(dòng)文本 36
2.3 圖像操作 37
2.3.1 插入圖像 37
2.3.2 圖像屬性 38
2.3.3 為網(wǎng)頁設(shè)置背景圖片 39
2.4 超鏈接 42
2.4.1 文本鏈接 43
2.4.2 空鏈接 44
2.4.3 錨鏈接 44
2.4.4 電子郵件鏈接 45
2.5 實(shí)踐與運(yùn)用—保定秦奮切割機(jī)廠
網(wǎng)站設(shè)計(jì)與制作 45
2.5.1 網(wǎng)頁布局設(shè)計(jì) 46
2.5.2 素材搜集與編輯 46
2.5.3 建立站點(diǎn) 47
2.5.4 網(wǎng)頁制作 47
復(fù)習(xí)思考題 53
第3章 CSS樣式 54
3.1 CSS樣式的概念 54
3.1.1 CSS樣式簡介 54
3.1.2 CSS規(guī)則 54
3.2 Dreamweaver中使用CSS 55
3.2.1 創(chuàng)建CSS 55
3.2.2 應(yīng)用CSS 63
3.2.3 編輯CSS 65
3.3 CSS的應(yīng)用 66
3.3.1 使用CSS設(shè)置文字格式 66
3.3.2 使用CSS設(shè)置圖片格式 70
3.3.3 使用CSS設(shè)置超鏈接格式 72
3.3.4 同一頁內(nèi)設(shè)置不同的超鏈接 73
3.4 實(shí)踐與運(yùn)用——“保定旅游網(wǎng)”的
設(shè)計(jì)與制作 76
復(fù)習(xí)思考題 82
第4章 網(wǎng)頁特效設(shè)計(jì) 84
4.1 使用Spry框架構(gòu)件 84
4.1.1 使用Spry菜單欄構(gòu)件 84
4.1.2 使用Spry折疊式構(gòu)件 86
4.1.3 使用Spry選項(xiàng)卡式面板構(gòu)件 88
4.2 行為 89
4.2.1 設(shè)置行為 90
4.2.2 常用的事件及行為 91
4.3 插入多媒體對象 92
4.3.1 插入Flash動(dòng)畫 92
4.3.2 插入FlashPaper文件 93
4.3.3 插入FLV視頻 94
4.4 從網(wǎng)上下載網(wǎng)頁特效代碼 95
4.4.1 設(shè)為首頁與加入收藏 95
4.4.2 滾動(dòng)文字代碼 97
4.4.3 橫向滾動(dòng)的圖片代碼 97
4.5 AP Div元素 99
4.5.1 AP Div元素的創(chuàng)建 99
4.5.2 設(shè)置 AP Div元素的屬性 100
4.5.3 AP Div元素與表格的相互轉(zhuǎn)換 100
4.6 制作一個(gè)簡單的網(wǎng)頁拼圖游戲 101
4.6.1 圖片的準(zhǔn)備 101
4.6.2 制作拼圖游戲 104
4.6.3 拼圖游戲的完善 105
復(fù)習(xí)思考題 106
第5章 動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)初步 108
5.1 超文本標(biāo)記語言HTML 108
5.1.1 HTML簡介 108
5.1.2 常用的HTML標(biāo)記 109
5.2 表單 110
5.2.1 插入表單域 111
5.2.2 插入表單對象 111
5.2.3 表單實(shí)例 115
5.3 搭建動(dòng)態(tài)網(wǎng)站設(shè)計(jì)環(huán)境 116
5.3.1 動(dòng)態(tài)網(wǎng)站設(shè)計(jì)簡介 117
5.3.2 配置ASP服務(wù)器 117
5.3.3 其他小型的ASP服務(wù)器 121
5.3.4 開發(fā)環(huán)境的搭建 121
5.4 數(shù)據(jù)庫的建立與連接 124
5.4.1 數(shù)據(jù)庫建立 124
5.4.2 在網(wǎng)頁中連接數(shù)據(jù)庫 126
5.5 交互網(wǎng)站設(shè)計(jì)—留住客戶信息 126
5.5.1 顯示客戶留言 127
5.5.2 客戶留言 129
復(fù)習(xí)思考題 131
第6章 處理網(wǎng)頁中的圖像 133
6.1 圖像處理基礎(chǔ)知識 133
6.1.1 像素與圖像分辨率 133
6.1.2 RGB色彩模式 134
6.1.3 位圖與矢量圖 134
6.1.4 網(wǎng)頁圖像的格式 135
6.1.5 了解Photoshop 135
6.2 Photoshop圖像繪制 138
6.2.1 畫筆工具的使用 138
6.2.2 圖案的使用與定義 143
6.2.3 矢量工具的使用 147
6.3 使用Photoshop摳圖 148
6.3.1 選區(qū)工具 148
6.3.2 路徑工具 150
6.4 實(shí)踐與運(yùn)用——女性美食網(wǎng)站效果圖
設(shè)計(jì)與制作 154
6.4.1 Logo的制作 154
6.4.2 網(wǎng)頁背景的制作 156
6.4.3 網(wǎng)頁效果圖制作 158
復(fù)習(xí)思考題 162
第7章 網(wǎng)頁動(dòng)畫的制作 164
7.1 Flash簡介 164
7.1.1 基本概念 165
7.1.2 操作環(huán)境 165
7.1.3 Flash工具箱 166
7.2 動(dòng)畫制作 168
7.2.1 逐幀動(dòng)畫 168
7.2.2 補(bǔ)間動(dòng)畫 170
7.3 引導(dǎo)動(dòng)畫與蒙版 173
7.3.1 引導(dǎo)動(dòng)畫 173
7.3.2 遮罩動(dòng)畫 176
7.3.3 元件與庫 178
7.4 綜合實(shí)踐—網(wǎng)頁中圖片輪顯動(dòng)畫與
引導(dǎo)頁的設(shè)計(jì)制作 182
7.4.1 圖片輪顯動(dòng)畫制作 182
7.4.2 引導(dǎo)頁動(dòng)畫設(shè)計(jì)制作 184
復(fù)習(xí)思考題 188
第8章 網(wǎng)站設(shè)計(jì)與制作綜合實(shí)例 190
8.1 網(wǎng)站規(guī)劃 190
8.1.1 進(jìn)行用戶調(diào)研，確定網(wǎng)站內(nèi)容 190
8.1.2 根據(jù)網(wǎng)站內(nèi)容，確定網(wǎng)站結(jié)構(gòu) 191
8.1.3 確定網(wǎng)頁的版面布局 191
8.1.4 確定網(wǎng)站的配色與風(fēng)格 192
8.2 使用Photoshop編輯網(wǎng)頁圖像 193
8.2.1 制作網(wǎng)頁Logo 193
8.2.2 制作網(wǎng)頁效果圖 200
8.3 使用Flash制作網(wǎng)頁動(dòng)畫效果 210
8.3.1 制作banner的圖片輪顯動(dòng)畫 210
8.3.2 制作首頁中按鈕控制的案例
展示動(dòng)畫 213
8.4 使用Dreamweaver制作網(wǎng)站 216
8.4.1 建立站點(diǎn) 216
8.4.2 使用表格布局網(wǎng)站首頁 217
8.4.3 填充表格內(nèi)容 219
8.4.4 網(wǎng)站效果 225

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