網(wǎng)站建設(shè)與網(wǎng)頁(yè)設(shè)計(jì)（含盤(pán)）

CONTENTS
網(wǎng)
站
建
設(shè)
與
網(wǎng)
頁(yè)
設(shè)
計(jì)
目錄
了解網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)
知識(shí)講解——行業(yè)知識(shí)鏈接................... 2
Point 01
認(rèn)識(shí)網(wǎng)頁(yè) ......................................... 2
1．文字 ............................................................... 2
2．圖片 ............................................................... 2
3．表單 ............................................................... 2
4．Logo............................................................... 3
5．導(dǎo)航 ............................................................... 3
6．動(dòng)畫(huà) ............................................................... 3
7．廣告 ............................................................... 3
Chapter
01
Point 02 什么是首頁(yè)與主頁(yè) ............................ 3
1．首頁(yè) ............................................................... 3
2．主頁(yè) ............................................................... 3
Point 03
常用網(wǎng)絡(luò)術(shù)語(yǔ) .................................. 4
1．域名 ............................................................... 4
2．HTTP 協(xié)議 ..................................................... 4
3．FTP 協(xié)議 ........................................................ 4
4．超鏈接 ............................................................ 4
5．站點(diǎn) ............................................................... 5
Point 04
認(rèn)識(shí)網(wǎng)站類(lèi)型 .................................. 5
1．門(mén)戶(hù)網(wǎng)站 ........................................................ 5
2．企業(yè)網(wǎng)站 ........................................................ 5
3．個(gè)人網(wǎng)站 ........................................................ 6
4．娛樂(lè)類(lèi)網(wǎng)站 ..................................................... 6
重做目錄.indd 1
2015-8-11 14:19:23

實(shí)戰(zhàn)應(yīng)用——網(wǎng)站建設(shè)與網(wǎng)頁(yè)設(shè)計(jì)
5．機(jī)構(gòu)類(lèi)網(wǎng)站 ..................................................... 6
6．電子商務(wù)類(lèi)網(wǎng)站 ............................................. 7
Point 05
網(wǎng)頁(yè)設(shè)計(jì)常用工具 ............................ 7
1．Dreamweaver ................................................ 7
2．Flash .............................................................. 8
3．Photoshop ..................................................... 8
4．HTML ............................................................. 8
5．CSS ............................................................... 9
6．JavaScript ...................................................... 9
7．ASP ............................................................... 9
8．PHP ............................................................. 10
Point 06
網(wǎng)頁(yè)中的圖像應(yīng)用 .......................... 10
1．常見(jiàn)的網(wǎng)頁(yè)圖像格式 .................................... 10
2．網(wǎng)頁(yè)中應(yīng)用圖像的注意要點(diǎn) ......................... 10
Point 07
Point 08
屏幕分辨率與網(wǎng)頁(yè)設(shè)計(jì) .................... 11
韓國(guó)網(wǎng)頁(yè)設(shè)計(jì)的特點(diǎn) ....................... 11
學(xué)習(xí)小結(jié)........................................13
Chapter 網(wǎng)站建設(shè)規(guī)范和建設(shè)流程
02
知識(shí)講解——行業(yè)知識(shí)鏈接..................15
Point 01
網(wǎng)站建設(shè)規(guī)范 ................................ 15
1．組建開(kāi)發(fā)團(tuán)隊(duì)規(guī)范 ........................................ 15
2．開(kāi)發(fā)工具規(guī)范 ............................................... 15
3．超鏈接規(guī)范 ................................................... 16
4．?dāng)?shù)據(jù)庫(kù)開(kāi)發(fā) ................................................... 16
5．文件夾和文件命名規(guī)范 ................................. 17
Point 02
網(wǎng)站建設(shè)的基本流程 ....................... 17
1．網(wǎng)站整體規(guī)劃 ............................................... 17
2．確定網(wǎng)站的內(nèi)容和服務(wù) ................................. 18
重做目錄.indd 2
2015-8-11 14:19:23

目　錄
3．規(guī)劃網(wǎng)站目錄結(jié)構(gòu) ........................................ 18
4．收集資源 ...................................................... 19
5．網(wǎng)頁(yè)效果圖設(shè)計(jì) ........................................... 19
6．編輯制作網(wǎng)頁(yè) ............................................... 20
7．申請(qǐng)域名和服務(wù)器空間 ................................. 20
8．網(wǎng)站的維護(hù)、測(cè)試和發(fā)布 ............................. 21
9．網(wǎng)站的宣傳推廣 ........................................... 21
學(xué)習(xí)小結(jié)........................................22
網(wǎng)頁(yè)的色彩搭配
知識(shí)講解——行業(yè)知識(shí)鏈接..................24
Point 01
網(wǎng)頁(yè)配色基礎(chǔ) ................................ 24
1．RGB ............................................................. 24
2．HSB ............................................................. 25
3．色環(huán) ............................................................. 25
4．原色 ............................................................. 25
Chapter
03
Point 02
網(wǎng)頁(yè)的色彩對(duì)比 ............................. 26
1．明度對(duì)比 ...................................................... 26
2．色相對(duì)比 ...................................................... 26
3．純度對(duì)比 ...................................................... 28
4．色彩的冷暖對(duì)比 ........................................... 28
Point 03
常見(jiàn)的網(wǎng)頁(yè)配色方案 ....................... 29
1．黃色網(wǎng)頁(yè)例圖 ............................................... 29
2．紅色網(wǎng)頁(yè)例圖 ............................................... 30
3．藍(lán)色網(wǎng)頁(yè)例圖 ............................................... 30
4．間色網(wǎng)頁(yè)例圖 ............................................... 31
5．復(fù)色網(wǎng)頁(yè)例圖 ............................................... 32
6．補(bǔ)色網(wǎng)頁(yè)例圖 ............................................... 33
7．鄰近色網(wǎng)頁(yè)例圖 ........................................... 34
8．同類(lèi)色網(wǎng)頁(yè)例圖 ........................................... 34
重做目錄.indd 3
2015-8-11 14:19:23

實(shí)戰(zhàn)應(yīng)用——網(wǎng)站建設(shè)與網(wǎng)頁(yè)設(shè)計(jì)
9．暖色網(wǎng)頁(yè)例圖 ............................................... 35
10．冷色網(wǎng)頁(yè)例圖 ............................................. 36
Point 04
網(wǎng)站的色彩選擇與搭配 .................... 37
1．選擇色彩 ...................................................... 37
2．搭配色彩 ...................................................... 39
學(xué)習(xí)小結(jié)........................................42
Chapter 網(wǎng)頁(yè)文字特效設(shè)計(jì)
04
知識(shí)講解——行業(yè)知識(shí)鏈接................. 44
Point 01
網(wǎng)頁(yè)文字的形式概述 ....................... 44
1．標(biāo)志 ............................................................. 44
2．標(biāo)題 ............................................................. 44
3．超鏈接 .......................................................... 44
4．文字信息 ...................................................... 44
Point 02
字體的使用 .................................... 45
1．中文字體 ...................................................... 45
2．拉丁字母 ...................................................... 46
Point 03
文字的大小 .................................... 46
1．文字的大小決定形象 .................................... 46
2．粗細(xì)印象優(yōu)先 ............................................... 46
Point 04
字體的粗細(xì) .................................... 46
1．字體粗細(xì)特征 ............................................... 47
2．細(xì)字不適合做新聞標(biāo)題 ................................. 47
3．正文不要應(yīng)用粗細(xì)變化 ................................. 47
Point 05
Point 06
字距與行距 .................................... 47
文字圖形化 .................................... 48
Point 07 文字的強(qiáng)調(diào) .................................... 48
重做目錄.indd 4
2015-8-11 14:19:24

目　錄
1．強(qiáng)調(diào)字首 ...................................................... 48
2．引文的強(qiáng)調(diào) ................................................... 49
3．關(guān)鍵詞的強(qiáng)調(diào) ............................................... 49
4．鏈接文字的強(qiáng)調(diào) ........................................... 49
5．線框、符號(hào)的強(qiáng)調(diào) ........................................ 49
Point 08
網(wǎng)頁(yè)文字設(shè)計(jì)方法 .......................... 49
1．對(duì)比 ............................................................. 50
2．筆畫(huà)互用 ...................................................... 50
3．筆畫(huà)突變 ...................................................... 50
4．添加形象 ...................................................... 50
5．筆畫(huà)連接 ...................................................... 51
6．表面裝飾 ..................................................... 51
7．添加圓框或方框 ........................................... 51
實(shí)戰(zhàn)應(yīng)用——上機(jī)實(shí)戰(zhàn)訓(xùn)練..................51
Example 01
網(wǎng)頁(yè)卷邊文字 ........................... 52
Example 02 網(wǎng)站入口文字 ........................... 55
Example 03
Example 04
巧克力文字 .............................. 58
金色紋理文字 ........................... 60
學(xué)習(xí)小結(jié)....................................... 65
網(wǎng)頁(yè)按鈕特效設(shè)計(jì)
知識(shí)講解——行業(yè)知識(shí)鏈接................. 67
Point 01
按鈕與鏈接的區(qū)別 .......................... 67
1．按鈕 ............................................................. 67
2．鏈接 ............................................................. 67
Chapter
05
Point 02
Point 03
按鈕本身的用色 ............................. 67
按鈕的位置 .................................... 68
重做目錄.indd 5
2015-8-11 14:19:24

實(shí)戰(zhàn)應(yīng)用——網(wǎng)站建設(shè)與網(wǎng)頁(yè)設(shè)計(jì)
Point 04
按鈕上的文字表述 .......................... 68
Point 05 按鈕的空間 .................................... 68
Point 06
按鈕的優(yōu)先級(jí)別 ............................. 68
實(shí)戰(zhàn)應(yīng)用——上機(jī)實(shí)戰(zhàn)訓(xùn)練................. 69
Example 01
Example 02
Example 03
Example 04
Example 05
網(wǎng)站豎列按鈕 ........................... 69
網(wǎng)頁(yè)上的透明按鈕 .................... 71
小魚(yú)按鈕 ................................. 74
網(wǎng)站導(dǎo)航按鈕 ........................... 77
視頻與音樂(lè)按鈕 ........................ 80
學(xué)習(xí)小結(jié)....................................... 83
Chapter 網(wǎng)頁(yè)圖像處理與特效設(shè)計(jì)
06
知識(shí)講解——行業(yè)知識(shí)鏈接................. 85
Point 01
常見(jiàn)的網(wǎng)頁(yè)圖像格式及優(yōu)點(diǎn) ............. 85
Point 02 圖像的顏色 .................................... 85
Point 03
Point 04
圖像的尺寸 .................................... 85
圖像與文字的搭配 .......................... 86
1．主次分明，中心突出 .................................... 86
2．大小搭配，相互呼應(yīng) .................................... 86
3．圖文并茂，相得益彰 .................................... 86
實(shí)戰(zhàn)應(yīng)用——上機(jī)實(shí)戰(zhàn)訓(xùn)練................. 86
Example 01
將網(wǎng)頁(yè)中的圖像添加懷舊效果 .... 86
Example 02 替換網(wǎng)頁(yè)圖像的顏色 ................. 89
Example 03 使用變化制作三色網(wǎng)頁(yè)圖片 ........ 91
重做目錄.indd 6
2015-8-11 14:19:24

目　錄
Example 04
Example 05
網(wǎng)頁(yè)中的立體圖像 .................... 94
為網(wǎng)頁(yè)圖像添加藝術(shù)色彩 ........... 97
學(xué)習(xí)小結(jié)...................................... 100
網(wǎng)頁(yè)文字動(dòng)畫(huà)特效設(shè)計(jì)
知識(shí)講解——行業(yè)知識(shí)鏈接................ 102
Point 01
文字動(dòng)畫(huà)的特點(diǎn) ........................... 102
Chapter
Point 02 文字動(dòng)畫(huà)的表現(xiàn)方法 ..................... 102
07
實(shí)戰(zhàn)應(yīng)用——上機(jī)實(shí)戰(zhàn)訓(xùn)練................ 102
Example 01
毛筆寫(xiě)字特效 ......................... 102
Example 02 網(wǎng)頁(yè)沖擊波文字 ...................... 106
Example 03
Example 04
Example 05
極光文字 ............................... 109
網(wǎng)頁(yè)中極速漂移的文字 ............ 113
甩不開(kāi)的文字 ......................... 118
學(xué)習(xí)小結(jié)...................................... 121
鼠標(biāo)與菜單動(dòng)畫(huà)特效設(shè)計(jì)
知識(shí)講解——行業(yè)知識(shí)鏈接................ 123
Point 01
Point 02
鼠標(biāo)特效的應(yīng)用 ........................... 123
菜單特效的應(yīng)用 ........................... 123
Chapter
08
實(shí)戰(zhàn)應(yīng)用——上機(jī)實(shí)戰(zhàn)訓(xùn)練................ 123
Example 01
控制彈性小球 ......................... 124
Example 02 圖像上的水紋 ......................... 128
重做目錄.indd 7
2015-8-11 14:19:24

實(shí)戰(zhàn)應(yīng)用——網(wǎng)站建設(shè)與網(wǎng)頁(yè)設(shè)計(jì)
Example 03 把網(wǎng)頁(yè)擦出來(lái) ......................... 132
Example 04
Example 05
Example 06
右鍵快捷菜單 ......................... 134
不停旋轉(zhuǎn)的3d菜單 .................. 136
控制小兔動(dòng)作 ......................... 140
學(xué)習(xí)小結(jié)...................................... 145
Chapter Flash 網(wǎng)絡(luò)廣告動(dòng)畫(huà)設(shè)計(jì)
09
知識(shí)講解——行業(yè)知識(shí)鏈接................147
Point 01
Flash廣告的特點(diǎn) ......................... 147
1．適合網(wǎng)絡(luò)傳播 ............................................. 147
2．表現(xiàn)形式豐富 ............................................. 147
3．強(qiáng)大的交互功能 ......................................... 147
4．針對(duì)性強(qiáng) .................................................... 147
Point 02
Flash廣告的應(yīng)用 ......................... 147
1．宣傳某項(xiàng)內(nèi)容 ............................................. 147
2．作為鏈接的標(biāo)志 ......................................... 148
3．用于展示某些產(chǎn)品 ...................................... 148
Point 03
Flash廣告的基本類(lèi)型 ................... 148
1．普通 Flash 廣告條 ...................................... 148
2．彈出式 Flash 廣告 ...................................... 148
3．網(wǎng)站片頭廣告 ............................................. 148
Point 04
Flash廣告的制作流程 ................... 148
1．確定廣告的內(nèi)容 ......................................... 148
2．構(gòu)思廣告的結(jié)構(gòu) ......................................... 148
3．收集素材 .................................................... 149
4．編輯動(dòng)畫(huà)及發(fā)布 ......................................... 149
實(shí)戰(zhàn)應(yīng)用——上機(jī)實(shí)戰(zhàn)訓(xùn)練................149
重做目錄.indd 8
2015-8-11 14:19:24

目　錄
Example 01
Example 02
Example 03
Example 04
網(wǎng)絡(luò)游戲宣傳廣告 .................. 149
服飾豎條廣告 ......................... 155
美食網(wǎng)站Banner條 ................. 162
家居網(wǎng)絡(luò)廣告 ......................... 166
學(xué)習(xí)小結(jié)......................................169
Action 動(dòng)畫(huà)特效設(shè)計(jì)
知識(shí)講解——行業(yè)知識(shí)鏈接................ 171
Point 01
Action Script 3.0概述 .................. 171
Chapter
Point 02 Action Script 3.0暫新的“動(dòng)作”
　　　　　面板 ........................................... 171
Point 03 良好的編程習(xí)慣 ........................... 172
1．命名規(guī)則 .................................................... 173
2．給代碼添加注釋 ......................................... 173
3．保持代碼的整體性 ...................................... 174
10
實(shí)戰(zhàn)應(yīng)用——上機(jī)實(shí)戰(zhàn)訓(xùn)練................174
Example 01
雪花動(dòng)畫(huà)特效 ......................... 174
Example 02 神秘網(wǎng)頁(yè)特效 ......................... 177
Example 03 多彩方塊效果 ......................... 180
Example 04
小雨點(diǎn) .................................. 187
Example 05 美麗的噴泉 ............................ 191
Example 06
Example 07
網(wǎng)頁(yè)登錄界面 ......................... 194
氣球 ...................................... 197
學(xué)習(xí)小結(jié)...................................... 201
重做目錄.indd 9
2015-8-11 14:19:25

實(shí)戰(zhàn)應(yīng)用——網(wǎng)站建設(shè)與網(wǎng)頁(yè)設(shè)計(jì)
Chapter 網(wǎng)頁(yè)特效設(shè)計(jì)
11
知識(shí)講解——行業(yè)知識(shí)鏈接................203
Point 01
Point 02
什么是網(wǎng)頁(yè)特效 ........................... 203
網(wǎng)頁(yè)特效的分類(lèi) ........................... 203
實(shí)戰(zhàn)應(yīng)用——上機(jī)實(shí)戰(zhàn)訓(xùn)練................203
Example 01
Example 02
Example 03
Example 04
Example 05
Example 06
Example 07
網(wǎng)站提示信息 ......................... 203
響應(yīng)鼠標(biāo)的文字 ...................... 206
單擊隱去圖像 ......................... 210
網(wǎng)頁(yè)中的動(dòng)態(tài)日期 .................. 212
網(wǎng)頁(yè)中的透明動(dòng)畫(huà) .................. 215
檢測(cè)用戶(hù)屏幕分辨率 ............... 219
制作虛線表格 ......................... 221
學(xué)習(xí)小結(jié)......................................224
Chapter CSS 與 DIV 設(shè)計(jì)網(wǎng)頁(yè)
12
知識(shí)講解——行業(yè)知識(shí)鏈接................226
Point 01
Point 02
Point 03
Point 04
CSS概述 .................................... 226
DIV概述 ..................................... 226
什么是Web標(biāo)準(zhǔn) .......................... 226
Web標(biāo)準(zhǔn)的構(gòu)成 .......................... 227
1．結(jié)構(gòu) ........................................................... 227
2．表現(xiàn) ........................................................... 227
3．行為 ........................................................... 227
重做目錄.indd 10
2015-8-11 14:19:25

目　錄
實(shí)戰(zhàn)應(yīng)用——上機(jī)實(shí)戰(zhàn)訓(xùn)練................227
Example 01
Example 02
Example 03
Example 04
Example 05
Example 06
Example 07
制作邊框陰影與折角效果 ......... 228
制作商品圖文列表 .................. 231
在網(wǎng)頁(yè)中放大文字 .................. 237
創(chuàng)意六邊形菜單設(shè)計(jì) ............... 239
制作動(dòng)態(tài)模糊網(wǎng)頁(yè) .................. 241
制作卡通網(wǎng)頁(yè) ......................... 243
制作時(shí)尚網(wǎng)頁(yè) ......................... 247
學(xué)習(xí)小結(jié)......................................253
網(wǎng)頁(yè)布局設(shè)計(jì)
知識(shí)講解——行業(yè)知識(shí)鏈接................255
Point 01
網(wǎng)站欄目和頁(yè)面設(shè)計(jì)策劃 .............. 255
1．網(wǎng)站的欄目策劃 ......................................... 255
2．網(wǎng)站的頁(yè)面策劃 ......................................... 255
Chapter
13
Point 02
點(diǎn)、線、面的構(gòu)成 ........................ 256
1．點(diǎn)的構(gòu)成 .................................................... 256
2．線的構(gòu)成 .................................................... 257
3．面的構(gòu)成 .................................................... 257
Point 03
網(wǎng)站頁(yè)面版式設(shè)計(jì) ........................ 258
1．“國(guó)”字型布局 ......................................... 258
2．拐角型布局 ................................................. 258
3．框架型布局 ................................................. 259
4．封面型布局 ................................................. 259
5．Flash 型布局 .............................................. 259
6．標(biāo)題正文型 ................................................. 259
重做目錄.indd 11
2015-8-11 14:19:25

實(shí)戰(zhàn)應(yīng)用——網(wǎng)站建設(shè)與網(wǎng)頁(yè)設(shè)計(jì)
實(shí)戰(zhàn)應(yīng)用——上機(jī)實(shí)戰(zhàn)訓(xùn)練................260
Example 01
Example 02
Example 03
Example 04
Example 05
Example 06
Example 07
Example 08
制作浮動(dòng)框架網(wǎng)頁(yè) .................. 260
制作搜索網(wǎng)頁(yè) ......................... 266
制作數(shù)碼產(chǎn)品網(wǎng)頁(yè) .................. 269
制作登錄網(wǎng)頁(yè) ......................... 274
制作注冊(cè)網(wǎng)頁(yè) ......................... 278
制作聯(lián)系我們網(wǎng)頁(yè) .................. 283
制作動(dòng)感導(dǎo)航網(wǎng)頁(yè) .................. 286
制作業(yè)務(wù)介紹網(wǎng)頁(yè) .................. 291
學(xué)習(xí)小結(jié)......................................294
Chapter 綜合案例：企業(yè)官方網(wǎng)站設(shè)計(jì)
14
知識(shí)講解——行業(yè)知識(shí)鏈接................296
Point 01
Point 02
網(wǎng)站項(xiàng)目分析 .............................. 296
確定網(wǎng)站風(fēng)格 .............................. 296
實(shí)戰(zhàn)應(yīng)用——上機(jī)實(shí)戰(zhàn)訓(xùn)練................296
Example 01
Example 02
Example 03
Example 04
Example 05
處理網(wǎng)站圖像 ......................... 297
插入透明Flash動(dòng)畫(huà) ................ 299
制作網(wǎng)站公告 ......................... 302
制作網(wǎng)頁(yè)主體部分 .................. 304
制作產(chǎn)品展示頁(yè)面 .................. 307
學(xué)習(xí)小結(jié)...................................... 312
重做目錄.indd 12
2015-8-11 14:19:25

目　錄
綜合案例：某房地產(chǎn)網(wǎng)站設(shè)計(jì)
知識(shí)講解——行業(yè)知識(shí)鏈接................ 314
Point 01
Point 02
網(wǎng)站項(xiàng)目分析 .............................. 314
確定網(wǎng)站風(fēng)格 .............................. 314
Chapter
15
實(shí)戰(zhàn)應(yīng)用——上機(jī)實(shí)戰(zhàn)訓(xùn)練................ 314
Example 01
制作Flash動(dòng)畫(huà) ....................... 314
Example 02 制作網(wǎng)站片頭頁(yè) ...................... 318
Example 03
Example 04
制作網(wǎng)站導(dǎo)航 ......................... 321
制作網(wǎng)站首頁(yè) ......................... 324
學(xué)習(xí)小結(jié)......................................327
綜合案例：在線交互娛樂(lè)網(wǎng)站設(shè)計(jì)
知識(shí)講解——行業(yè)知識(shí)鏈接................329
Point 01
Point 02
網(wǎng)站項(xiàng)目分析 .............................. 329
確定網(wǎng)站風(fēng)格 .............................. 329
Chapter
16
實(shí)戰(zhàn)應(yīng)用——上機(jī)實(shí)戰(zhàn)訓(xùn)練................329
Example 01
Example 02
Example 03
Example 04
Example 05
制作按鈕 ............................... 329
制作首頁(yè) ............................... 332
制作庫(kù)項(xiàng)目 ............................ 335
在線播放音樂(lè) ......................... 337
在線播放視頻 ......................... 341
學(xué)習(xí)小結(jié)......................................344
重做目錄.indd 13
2015-8-11 14:19:25

重做目錄.indd 14
2015-8-11 14:19:25