網(wǎng)站建設與網(wǎng)頁設計（含盤）

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

實戰(zhàn)應用——網(wǎng)站建設與網(wǎng)頁設計
5．機構類網(wǎng)站 ..................................................... 6
6．電子商務類網(wǎng)站 ............................................. 7
Point 05
網(wǎng)頁設計常用工具 ............................ 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)頁中的圖像應用 .......................... 10
1．常見的網(wǎng)頁圖像格式 .................................... 10
2．網(wǎng)頁中應用圖像的注意要點 ......................... 10
Point 07
Point 08
屏幕分辨率與網(wǎng)頁設計 .................... 11
韓國網(wǎng)頁設計的特點 ....................... 11
學習小結........................................13
Chapter 網(wǎng)站建設規(guī)范和建設流程
02
知識講解——行業(yè)知識鏈接..................15
Point 01
網(wǎng)站建設規(guī)范 ................................ 15
1．組建開發(fā)團隊規(guī)范 ........................................ 15
2．開發(fā)工具規(guī)范 ............................................... 15
3．超鏈接規(guī)范 ................................................... 16
4．數(shù)據(jù)庫開發(fā) ................................................... 16
5．文件夾和文件命名規(guī)范 ................................. 17
Point 02
網(wǎng)站建設的基本流程 ....................... 17
1．網(wǎng)站整體規(guī)劃 ............................................... 17
2．確定網(wǎng)站的內容和服務 ................................. 18
重做目錄.indd 2
2015-8-11 14:19:23

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

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

目　錄
1．強調字首 ...................................................... 48
2．引文的強調 ................................................... 49
3．關鍵詞的強調 ............................................... 49
4．鏈接文字的強調 ........................................... 49
5．線框、符號的強調 ........................................ 49
Point 08
網(wǎng)頁文字設計方法 .......................... 49
1．對比 ............................................................. 50
2．筆畫互用 ...................................................... 50
3．筆畫突變 ...................................................... 50
4．添加形象 ...................................................... 50
5．筆畫連接 ...................................................... 51
6．表面裝飾 ..................................................... 51
7．添加圓框或方框 ........................................... 51
實戰(zhàn)應用——上機實戰(zhàn)訓練..................51
Example 01
網(wǎng)頁卷邊文字 ........................... 52
Example 02 網(wǎng)站入口文字 ........................... 55
Example 03
Example 04
巧克力文字 .............................. 58
金色紋理文字 ........................... 60
學習小結....................................... 65
網(wǎng)頁按鈕特效設計
知識講解——行業(yè)知識鏈接................. 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

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

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

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

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

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

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

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

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

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