第 1章.網頁設計與網站建設基礎　　1.



1.1　網頁設計基礎知識　2

1.1.1　認識網站與網頁　2

1.1.2　常見的網站類型　2

1.1.3　常見的網頁類型　3

1.1.4　常用的網站結構　3

1.1.5　網頁的基本構成元素　4

1.1.6　網頁常用術語　5

1.1.7　網頁色彩搭配　5

1.1.8　HTML標記語言　7

1.2　課堂案例：創(chuàng)建婚紗攝影網站　9

1.2.1　商業(yè)網站開發(fā)流程　10

1.2.2　網站制作流程　10

1.2.3　常用網頁制作軟件　12

1.2.4　創(chuàng)建本地站點　15

1.2.5　編輯站點　15

1.2.6　管理站點和站點文件夾　16

1.3　項目實訓　18

1.3.1　賞析電商購物類網站　18

1.3.2　規(guī)劃并創(chuàng)建果蔬網站點　18

1.4　課后練習　19

練習1：規(guī)劃個人網站　19

練習2：創(chuàng)建會展中心站點　20

1.5　技巧提升　20

1．站點命名規(guī)則　20

2．網頁設計師需要知道的網頁設計內容　21

3．網頁設計需要遵循的原則　21

4．網站設計時的色彩聯(lián)想　22



第　2章.使用Photoshop編輯網頁圖像.. 23.





2.1　課堂案例：處理商品圖片展示效果　24

2.1.1　圖像處理基礎知識　24

2.1.2　旋轉并裁剪商品圖片　26

2.1.3　修復商品圖片　27

2.1.4　使用液化濾鏡處理圖片　31

2.1.5　調整圖片顏色　33

2.1.6　使用濾鏡處理圖片　34

2.1.7　摳取素材圖片　37

2.1.8　為圖像添加文本和形狀　41

2.2　課堂案例：制作Banner區(qū)海報　43

2.2.1　通過圖層制作海報　43

2.2.2　設置圖層樣式　44

2.3　項目實訓　45

2.3.1　制作海報廣告　45

2.3.2　制作網頁廣告　47

2.4　課后練習　48

練習1：制作直通車圖片　49

練習2：制作幫助中心　49

2.5　技巧提升　50

1．快速控制圖像顯示大小　50

2．快速恢復圖像　50

3．使用濾鏡注意事項　50

4．使用外部畫筆的方法　50



第3章.使用Photoshop設計界面效果圖..　51.



3.1　課堂案例：設計燈具網主頁效果圖　52

3.1.1　新建圖像文件　52

3.1.2　創(chuàng)建參考線　53

3.1.3　制作網頁頭部　54

3.1.4　制作網頁內容部分　58

3.1.5　設計網頁頁尾　63

3.2　課堂案例：輸出燈具網主頁效果圖　65

3.2.1　創(chuàng)建切片　66

3.2.2　輸出切片　67

3.3　項目實訓　68

3.3.1　設計攝影之家網頁效果圖　68

3.3.2　設計訂餐網界面效果　70

3.4　課后練習　71

　練習1：設計婚紗售賣網站首頁　71

練習2：設計個人網頁效果圖　72

3.5　技巧提升　73

1．網頁效果圖設計技巧　73

2．組合切片　74

3．直接輸出為html文件　74



第4章.使用Dreamweaver制作基礎網頁..　75.



4.1　課堂案例：創(chuàng)建index.html網頁　76

4.1.1　創(chuàng)建網頁文檔　76

4.1.2　設置頁面屬性　77

4.1.3　保存、預覽和關閉網頁文檔　78

4.2　課堂案例：制作學校簡介網頁　79

4.2.1　添加文字　79

4.2.2　設置文本格式　80

4.2.3　添加水平線　82

4.2.4　添加空格　83

4.3　項目實訓　83

4.3.1　制作優(yōu)惠券說明網頁　83

4.3.2　制作服務協(xié)議網頁　85

4.4　課后練習　86

練習1：制作保修服務網頁　87

練習2：制作代金券說明網頁　87

4.5　技巧提升　88

1．添加日期　88

2．添加滾動文字　88



第5章.為網頁添加元素..　89.



5.1　課堂案例：美化酒店預訂網頁　90

5.1.1　插入與編輯圖像　90

5.1.2　優(yōu)化圖像　92

5.1.3　創(chuàng)建鼠標經過圖像　94

5.1.4　插入Flash動畫　95

5.1.5　添加背景音樂　97

5.2　課堂案例：鏈接婚紗禮服網頁　98

5.2.1　認識超鏈接　98

5.2.2　插入文本超鏈接　100

5.2.3　創(chuàng)建空鏈接　102

5.2.4　創(chuàng)建圖像超鏈接　102

5.2.5　創(chuàng)建熱點圖片超鏈接　103

5.2.6　創(chuàng)建錨點超鏈接　104

5.2.7　創(chuàng)建電子郵件超鏈接　105

5.2.8　創(chuàng)建外部超鏈接　105

5.2.9　創(chuàng)建腳本鏈接　106

5.3　項目實訓　107

5.3.1　制作科技產品網頁　107

5.3.2　制作訂單網頁　108

5.4　課后練習　110

練習1：制作服裝網頁　110

練習2：制作產品介紹網頁　111

5.5　技巧提升　112

1．在CSS中定義超鏈接樣式a:link、

　a:visited、a:hover、a:active的順序　112

2．刪除鏈接圖片上的藍色邊框　112

3．設置鼠標移動到文字鏈接上改變文字的

　大小或顏色　112



第6章.布局網頁版面..　113.



6.1　課堂案例：布局酒店預訂網頁　114

6.1.1　創(chuàng)建表格　114

6.1.2　調整表格結構　115

6.1.3　設置表格和單元格　117

6.1.4　在表格中插入內容　118

6.1.5　創(chuàng)建框架和框架集　119

6.1.6　保存框架和框架集　121

6.1.7　設置框架集與框架屬性　123

6.1.8　在框架中添加網頁　124

6.2　課堂案例：布局婚紗禮服網

　首頁　125

6.2.1　認識CSS樣式　126

6.2.2　認識CSS DIV布局模式　127

6.2.3　CSS DIV布局模式的優(yōu)勢　128

6.2.4　插入并編輯DIV　129

6.2.5　創(chuàng)建與編輯CSS樣式　131

6.2.6　使用AP Div元素　134

6.3　項目實訓　136

6.3.1　制作歇山園林網頁　136

6.3.2　制作花店網頁　138

6.4　課后練習　140

練習1：制作花卉推薦網頁　140

練習2：制作攝影網網頁　141

6.5　技巧提升　142

1．CSS樣式鏈接　142

2．批量設置AP　Div　142

3．導入表格數據　142



第7章.使用表單和行為..　143.



7.1　課堂案例：制作學員注冊網頁　144

7.1.1　認識表單　144

7.1.2　創(chuàng)建表單　145

7.1.3　插入表單對象　145

7.2　課堂案例：完善網頁行為效果　154

7.2.1　行為的基礎知識　155

7.2.2　彈出窗口　156

7.2.3　打開瀏覽器窗口　157

7.2.4　檢查表單　158

7.2.5　交換圖像　159

7.2.6　添加效果　161

7.3　項目實訓　162

7.3.1　制作會員注冊網頁　162

7.3.2　制作用戶注冊網頁　164

7.4　課后練習　166

練習1：制作航班查詢網頁　166

練習2：制作搜索條　166

練習3：制作login.html登錄界面　167

7.5　技巧提升　167

1．表單制作技巧　167

2．快速制作相同結構的網頁　168

3．使用庫快速完成網頁制作　168



第8章.制作ASP動態(tài)網頁..　169.



8.1　課堂案例：搭建動態(tài)網站平臺　170

8.1.1　認識動態(tài)網頁　170

8.1.2　動態(tài)網頁常用的開發(fā)語言　170

8.1.3　動態(tài)網頁的開發(fā)流程　172

8.1.4　認識Web服務器　173

8.1.5　安裝與配置IIS　173

8.1.6　使用Access創(chuàng)建數據表　175

8.1.7　創(chuàng)建與配置動態(tài)站點　176

8.1.8　創(chuàng)建數據源　178

8.2　課堂案例：制作發(fā)貨記錄

　動態(tài)網頁　180

8.2.1　創(chuàng)建記錄集　180

8.2.2　插入動態(tài)表格　181

8.2.3　創(chuàng)建記錄集導航　182

8.2.4　插入記錄　183

8.2.5　刪除記錄　184

8.3　課堂案例：制作食孜源APP頁面　184

8.3.1　認識jQuery Mobile　185

8.3.2　創(chuàng)建頁面　187

8.3.3　添加jQuery Mobile組件　188

8.4　項目實訓　191

8.4.1　制作用戶登錄網頁　191

8.4.2　制作jQuery Mobile頁面　193

8.5　課后練習　194

練習1：制作網站后臺系統(tǒng)　194

練習2：制作手機軟件網頁　195

8.6　技巧提升　195

1．通過字符串連接數據源　195

2．jQuery　Mobile的主題應用　196



第9章.使用Flash制作網頁動畫..　197.



9.1　課堂案例：制作橫幅廣告　198

9.1.1　Flash動畫在網頁中的應用　198

9.1.2　新建文檔并制作動畫背景　200

9.1.3　創(chuàng)建基本動畫　202

9.1.4　輸入文字并編輯動畫　205

9.2　課堂案例：制作圖片滾動動畫　206

9.2.1　制作基本動畫效果　207

9.2.2　發(fā)布動畫　209

9.3　課堂案例：制作網頁導航　210

9.3.1　認識ActionScript　211

9.3.2　制作動畫背景　211

9.3.3　添加ActionScript語句　212

9.4　項目實訓　212

9.4.1　制作網頁片頭動畫　212

9.4.2　制作動態(tài)Banner　214

9.5　課后練習　216

練習1：制作玩具網站首頁　216

練習2：制作圖片輪播動畫　216

9.6　技巧提升　217

1．快速刪除幀與清除幀　217

2．導出Flash動畫為GIF動畫　217

3．補間動畫與傳統(tǒng)補間之間的差異　217

4．事件　218



第　10章.綜合案例制作企業(yè)官網.. 219.



10.1　實訓目標　220

10.2　專業(yè)背景　221

10.3　操作思路　221

10.4　準備工作　222

10.4.1　站點規(guī)劃　222

10.4.2　素材收集　222

10.5　操作過程　222

10.5.1　使用Photoshop設計網頁效果圖　222

10.5.2　使用Flash制作圖片輪播動畫　232

10.5.3　使用Dreamweaver合成網頁　234

10.6　項目實訓　240

10.6.1　制作微觀多肉植物網頁　240

10.6.2　制作注冊和登錄頁面　241

10.7　課后練習　243

練習1：制作產品中心頁面　243

練習2：制作聯(lián)系我們頁面　244



附錄..　245.



附錄1　網頁常用設計尺寸　245

附錄2　iPhone常用設計尺寸　245

附錄3　Android常用設計尺寸　246