網(wǎng)頁(yè)制作課程設(shè)計(jì)案例精編

Internet席卷全球，網(wǎng)頁(yè)制作技術(shù)如日中天。網(wǎng)絡(luò)的普及所帶來(lái)的是前所未有的交流方式。無(wú)論是學(xué)術(shù)、商業(yè)，還是游戲、娛樂(lè)，都與網(wǎng)頁(yè)息息相關(guān)。以至于現(xiàn)在上至電腦精英，下至電腦初學(xué)者，都對(duì)網(wǎng)頁(yè)的制作有濃厚的興趣。網(wǎng)頁(yè)的制作，已經(jīng)隨著電腦技術(shù)的普及而逐漸成為一門(mén)必修課程。

而我們所要運(yùn)用的最強(qiáng)大的網(wǎng)頁(yè)制作工具便是Macromedia Dreamweaver MX這一專業(yè)的HTML編輯器，它將被用于對(duì)Web站點(diǎn)、Web頁(yè)和Web應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開(kāi)發(fā)。無(wú)論你喜歡直接編寫(xiě)HTML代碼的駕馭感還是偏愛(ài)在可視化編輯環(huán)境中工作，Dreamweaver都會(huì)為你提供幫助良多的工具，豐富你的Web創(chuàng)作體驗(yàn)。利用Dreamweaver中的可視化編輯功能，你可以快速地創(chuàng)建頁(yè)面而無(wú)需編寫(xiě)任何代碼。不過(guò)，如果你更喜歡用手工直接編碼，Dreamweaver還包括許多與編碼相關(guān)的工具和功能。借助Dreamweaver，你還可以使用服務(wù)器語(yǔ)言，例如ASP、ASP.NET、ColdFusion標(biāo)記語(yǔ)言（CFML、JSP和PHP）生成支持動(dòng)態(tài)數(shù)據(jù)庫(kù)的Web應(yīng)用程序。

除了Dreamweaver，還有并稱三劍客的Fireworks和Flash兩個(gè)軟件的大力支持。本書(shū)全面介紹以上3個(gè)軟件在網(wǎng)頁(yè)制作中的綜合運(yùn)用技術(shù)。

本書(shū)有以下特點(diǎn)：

 圖注豐富，便于理解

本書(shū)以大量的圖注增加了信息的表達(dá)，讓你一目了然。同時(shí)減少了讀者對(duì)照?qǐng)D文的時(shí)間，大大提高學(xué)習(xí)效率。

 實(shí)例入手，針對(duì)性強(qiáng)

作者在把握內(nèi)容的基礎(chǔ)上，精挑細(xì)選了15個(gè)實(shí)例，拋棄了傳統(tǒng)教程中大段大段的說(shuō)明，只要跟著作者的步法，掌握這些實(shí)例的制作技巧，你會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)制作易如反掌。

 內(nèi)容全面，重點(diǎn)突出

本書(shū)以簡(jiǎn)練的語(yǔ)言介紹軟件的功能，讓你輕松掌握網(wǎng)頁(yè)制作所有的精髓。

本書(shū)的寫(xiě)作過(guò)程中，得到了中國(guó)水利水電出版社計(jì)算機(jī)編輯室的大力支持。本書(shū)由梁奕繽主編，郭曉光、徐春卉、武海燕副主編，參與本書(shū)編寫(xiě)的還有黃卓、李鑫、杜波、郝思嘉、葉鑫、朱力思、權(quán)亮、龔嘉棟、王婧、盧福子、林廣毅、黃浩、童劍等。

同時(shí)，歡迎廣大讀者和作者聯(lián)系，電子信箱是bsbwindy@hotmail.com。也歡迎大家對(duì)本書(shū)的不足提出意見(jiàn)和建議。

最后，祝所有對(duì)網(wǎng)頁(yè)制作知識(shí)渴望的朋友能獲得真知，早日成功。

編者

2005年10月

叢書(shū)序
前言
案例一 Hello Macromedia，我的歡迎網(wǎng)頁(yè) 1
1.1 實(shí)現(xiàn)功能及思路簡(jiǎn)析 1
1.2 設(shè)計(jì)過(guò)程 1
1.2.1 網(wǎng)頁(yè)基本屬性設(shè)置 1
1.2.2 背景顏色的設(shè)置及顏色的選取 2
1.2.3 文本的輸入和網(wǎng)頁(yè)的完成 3
1.2.4 檢查和預(yù)覽 4
1.3 配色方案 5
1.3.1 網(wǎng)頁(yè)顏色原理和象征意義 5
1.3.2 網(wǎng)頁(yè)顏色的使用風(fēng)格 6
1.3.3 設(shè)計(jì)用色10例 6
1.4 小結(jié) 10
1.5 課后作業(yè) 10
案例二 與影同行，我的電影發(fā)布站 11
2.1 實(shí)現(xiàn)功能及思路簡(jiǎn)析 11
2.2 設(shè)計(jì)過(guò)程 11
2.2.1 單頁(yè)面的建立 11
2.2.2 頁(yè)內(nèi)的錨接 13
2.2.3 頁(yè)面間的鏈接 14
2.2.4 指向Internet站點(diǎn)的鏈接 16
2.2.5 創(chuàng)建電子郵件鏈接 16
2.2.6 鏈接的管理 17
2.2.7 站點(diǎn)的建立 17
2.2.8 鏈接的檢查 20
2.2.9 使用“報(bào)告”測(cè)試站點(diǎn) 22
2.3 小結(jié) 22
2.4 課后作業(yè) 23
案例三 五彩繽紛，我的世界地圖 24
3.1 實(shí)現(xiàn)功能及思路簡(jiǎn)析 24
3.2 設(shè)計(jì)過(guò)程 24
3.2.1 基本要素的插入 24
3.2.2 修改文字的屬性 25
3.2.3 修改圖像的屬性 26
3.2.4 利用CSS進(jìn)行樣式修改 28
3.2.5 建立鏈接網(wǎng)頁(yè) 29
3.2.6 熱點(diǎn)鏈接的建立 30
3.2.7 返回按鈕的建立 31
3.3 小結(jié) 32
3.4 課后作業(yè) 33
3.5 附表 33
案例四 秀出個(gè)性，我的網(wǎng)絡(luò)簡(jiǎn)歷 34
4.1 實(shí)現(xiàn)功能及思路簡(jiǎn)析 34
4.2 設(shè)計(jì)過(guò)程 34
4.2.1 新建文檔，創(chuàng)建表格 34
4.2.2 選擇表格元素 35
4.2.3 表格基本屬性的修改 37
4.2.4 編輯表格 40
4.2.5 在表格中插入內(nèi)容 41
4.3 利用表格美化網(wǎng)頁(yè) 43
4.3.1 一個(gè)像素寬的分隔線 43
4.3.2 利用cellspacing屬性制作細(xì)線表格 44
4.3.3 利用cellpadding屬性制作等間距細(xì)線表格 45
4.3.4 利用表格做空格 47
4.4 表格中常見(jiàn)問(wèn)題及應(yīng)變處理方法 48
4.4.1 表格的變形問(wèn)題 48
4.4.2 表格布滿頁(yè)面的問(wèn)題 49
4.4.3 任意大小的表格 49
4.4.4 被撐大的表格 49
4.5 小結(jié) 49
4.6 課后作業(yè) 49
案例五 憑票入內(nèi)，我的注冊(cè)系統(tǒng) 51
5.1 實(shí)現(xiàn)功能及思路簡(jiǎn)析 51
5.2 設(shè)計(jì)過(guò)程 51
5.2.1 創(chuàng)建表單 51
5.2.2 添加文本框 53
5.2.3 插入列表或菜單 54
5.2.4 插入單選按鈕和復(fù)選框 55
5.2.5 添加按鈕 56
5.2.6 跳轉(zhuǎn)菜單 57
5.2.7 在表單中插入表格 57
5.2.8 檢查表單 58
5.2.9 完成網(wǎng)頁(yè)并預(yù)覽 58
5.3 檢驗(yàn)表單 59
5.3.1 配置表單 60
5.3.2 打開(kāi)行為界面 60
5.3.3 添加行為 61
5.3.4 預(yù)覽效果 63
5.3.5 即時(shí)檢查 64
5.4 小結(jié) 64
5.5 課后作業(yè) 65
案例六 多面英姿，我的框架系統(tǒng) 66
6.1 實(shí)現(xiàn)功能及思路簡(jiǎn)析 66
6.2 設(shè)計(jì)過(guò)程 66
6.2.1 創(chuàng)建框架 66
6.2.2 框架結(jié)構(gòu)的修改 68
6.2.3 框架的屬性 72
6.2.4 在框架中編輯網(wǎng)頁(yè) 72
6.2.5 對(duì)框架設(shè)計(jì)的思考 75
6.3 小結(jié) 76
6.4 課后作業(yè) 76
案例七 騰云駕霧，我的動(dòng)感網(wǎng)頁(yè) 77
7.1 實(shí)現(xiàn)功能及思路簡(jiǎn)析 77
7.2 設(shè)計(jì)過(guò)程 77
7.2.1 基本網(wǎng)頁(yè)的制作 77
7.2.2 層的建立 78
7.2.3 利用Timelines設(shè)置簡(jiǎn)單層動(dòng)畫(huà) 80
7.2.4 利用關(guān)鍵幀完成動(dòng)畫(huà) 83
7.2.5 利用Flash制作GIF動(dòng)畫(huà)元素 84
7.2.6 在層中插入GIF動(dòng)畫(huà) 88
7.2.7 對(duì)層動(dòng)畫(huà)進(jìn)行調(diào)整 88
7.3 小結(jié) 90
7.4 課后作業(yè) 90
案例八 千里傳情，我的電子賀卡 92
8.1 實(shí)現(xiàn)功能及思路簡(jiǎn)析 92
8.2 設(shè)計(jì)過(guò)程 92
8.2.1 建立網(wǎng)站 92
8.2.2 首頁(yè)的布局規(guī)劃 95
8.2.3 首頁(yè)內(nèi)容的處理 97
8.2.4 發(fā)送卡片子頁(yè)的布局 99
8.2.5 完成網(wǎng)站之間的鏈接 101
8.3 小結(jié) 103
8.4 課后作業(yè) 104
案例九 流光溢彩，我的電影收藏夾 105
9.1 實(shí)現(xiàn)功能及思路簡(jiǎn)析 105
9.2 設(shè)計(jì)過(guò)程 105
9.2.1 站點(diǎn)的建立 105
9.2.2 相冊(cè)的建立 106
9.2.3 子頁(yè)的制作 109
9.2.4 主頁(yè)面的完善 110
9.2.5 預(yù)覽效果 111
9.3 小結(jié) 112
9.4 課后作業(yè) 112
案例十 橫嶺側(cè)峰，我的網(wǎng)頁(yè)布局 113
10.1 實(shí)現(xiàn)功能及思路簡(jiǎn)析 113
10.2 利用表格進(jìn)行排版設(shè)計(jì)過(guò)程 113
10.2.1 制作圖像元素 113
10.2.2 插入表格并設(shè)置標(biāo)題圖像 114
10.2.3 內(nèi)容區(qū)的布局 117
10.2.4 設(shè)置網(wǎng)頁(yè)過(guò)渡效果 120
10.3 利用層面進(jìn)行排版設(shè)計(jì)過(guò)程 121
10.3.1 插入層面 121
10.3.2 層中插入內(nèi)容 122
10.4 轉(zhuǎn)換網(wǎng)頁(yè)和檢查網(wǎng)頁(yè) 125
10.4.1 轉(zhuǎn)換網(wǎng)頁(yè) 125
10.4.2 檢查網(wǎng)頁(yè) 127
10.4.3 建立選擇瀏覽器的網(wǎng)頁(yè) 128
10.5 實(shí)現(xiàn)HTML自動(dòng)排版的法則 129
10.5.1 不使用絕對(duì)位置 130
10.5.2 對(duì)話框應(yīng)當(dāng)匹配最大可用寬度和高度 130
10.5.3 每個(gè)控件都應(yīng)位于分離的表格單元中 131
10.5.4 允許文本換行 131
10.5.5 把復(fù)選框、單選按鈕與它們的標(biāo)簽分離 132
10.5.6 為今后的擴(kuò)展預(yù)留足夠的空間，避免固定寬度的項(xiàng)目 132
10.5.7 按鈕、列表框和組群框大小的確定方法 132
10.5.8 高度的設(shè)置 133
10.5.9 不使用左對(duì)齊和右對(duì)齊 134
10.5.10 避免將本地化工作人員需要改變的CSS值內(nèi)聯(lián)在網(wǎng)頁(yè)中 134
10.6 布局理念 134
10.6.1 網(wǎng)頁(yè)布局類型 134
10.6.2 關(guān)于第一屏 135
10.6.3 有關(guān)導(dǎo)航欄的位置 135
10.6.4 什么樣的布局是最好的 135
10.7 小結(jié) 135
10.8 課后作業(yè) 136
案例十一 鏡花水月，我的模板網(wǎng)頁(yè) 137
11.1 實(shí)現(xiàn)功能及思路簡(jiǎn)析 137
11.2 利用模板建立網(wǎng)頁(yè) 137
11.2.1 插入模板 137
11.2.2 網(wǎng)頁(yè)的加工 139
11.3 制作模板 139
11.3.1 設(shè)置模板布局 140
11.3.2 插入可編輯區(qū)域 142
11.3.3 插入可選區(qū)域 144
11.3.4 創(chuàng)建重復(fù)區(qū) 145
11.3.5 嵌套表格 147
11.4 小結(jié) 147
11.5 課后作業(yè) 148
案例十二 兩面三刀，我的翻滾按鈕 149
12.1 實(shí)現(xiàn)功能及思路簡(jiǎn)析 149
12.2 設(shè)計(jì)過(guò)程 149
12.2.1 建立平臺(tái) 149
12.2.2 切片并設(shè)置圖層內(nèi)容 151
12.2.3 設(shè)置按鈕的行為 153
12.2.4 插入元素按鈕 156
12.2.5 在Dreamweaver中插入交互圖 157
12.3 小結(jié) 159
12.4 課后作業(yè) 159
案例十三 多才多藝，我的多樣圖層 160
13.1 實(shí)現(xiàn)功能及思路簡(jiǎn)析 160
13.2 設(shè)計(jì)過(guò)程 160
13.2.1 制作對(duì)象的輔助說(shuō)明 160
13.2.2 拖動(dòng)圖層的應(yīng)用 163
13.2.3 制作靜止浮動(dòng)效果 165
13.2.4 活動(dòng)菜單的制作 166
13.3 小結(jié) 170
13.4 課后作業(yè) 170
案例十四 個(gè)性天下，我的游戲網(wǎng)站 171
14.1 實(shí)現(xiàn)功能及思路簡(jiǎn)析 171
14.2 網(wǎng)頁(yè)框架和內(nèi)容設(shè)計(jì) 171
14.2.1 網(wǎng)站主題的制定 171
14.2.2 網(wǎng)站標(biāo)題的制定 172
14.2.3 網(wǎng)站框架的建立 172
14.2.4 規(guī)劃站點(diǎn) 172
14.2.5 素材的準(zhǔn)備 173
14.2.6 定位網(wǎng)站CI形象 173
14.2.7 確定網(wǎng)站的欄目 175
14.2.8 確定網(wǎng)站的鏈接結(jié)構(gòu) 175
14.2.9 設(shè)計(jì)網(wǎng)站的整體風(fēng)格 176
14.3 片頭Flash的制作 176
14.3.1 背景的制作 176
14.3.2 logo和標(biāo)題的制作 179
14.3.3 動(dòng)畫(huà)的制作 179
14.4 模板的建立 183
14.4.1 標(biāo)題欄制作 183
14.4.2 導(dǎo)航按鈕的制作 186
14.4.3 可編輯區(qū)的設(shè)定 189
14.5 層疊樣式 190
14.6 各個(gè)欄目網(wǎng)頁(yè)的制作 192
14.6.1 建立News頁(yè) 192
14.6.2 desktop頁(yè)的制作 194
14.6.3 music音樂(lè)和video視頻的播放和下載 200
14.6.4 設(shè)置狀態(tài)行上的文本 201
14.6.5 添加信息交互功能 203
14.7 檢查網(wǎng)站 205
14.8 小結(jié) 206
14.9 課后作業(yè) 206
案例十五 “錢(qián)”途無(wú)量，我的商業(yè)網(wǎng)站 207
15.1 實(shí)現(xiàn)功能及思路簡(jiǎn)析 207
15.2 設(shè)計(jì)理念概述 207
15.2.1 構(gòu)思階段 207
15.2.2 整體規(guī)劃 208
15.2.3 設(shè)計(jì)過(guò)程 209
15.2.4 色彩方案 210
15.2.5 頁(yè)面各要素 212
15.3 精品賞析 214
15.3.1 韓國(guó)商業(yè)網(wǎng)站設(shè)計(jì)分析 214
15.3.2 ericsson.com 219
15.3.3 FSX.CO.UK 221
15.3.4 sonystyle.com 221
15.3.5 millennium point 221
15.3.6 hp.com 223
15.4 如何讓更多的人知道自己的網(wǎng)站 224
15.5 小結(jié) 226

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