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

目錄 

第1章Web服務(wù)器及開發(fā)環(huán)境的搭建/1

1.1實(shí)驗(yàn)一開發(fā)環(huán)境的搭建/1

1.1.1實(shí)驗(yàn)?zāi)康?1

1.1.2實(shí)驗(yàn)要求/1

1.1.3相關(guān)知識(shí)/1

1.1.4實(shí)驗(yàn)內(nèi)容及步驟/1

項(xiàng)目一安裝、配置Apache/1

項(xiàng)目二安裝、配置IIS/3

項(xiàng)目三Windows系統(tǒng)中FTP服務(wù)器的配置/6

1.2實(shí)驗(yàn)二制作一個(gè)網(wǎng)頁/8

1.2.1實(shí)驗(yàn)?zāi)康?8

1.2.2實(shí)驗(yàn)要求/8

1.2.3相關(guān)知識(shí)/8

1.2.4實(shí)驗(yàn)內(nèi)容及步驟/10

項(xiàng)目一使用編輯器編寫網(wǎng)頁/10

項(xiàng)目二編寫一個(gè)結(jié)構(gòu)完整的HTML頁面/10第2章熟悉HTML的基本標(biāo)記/12

2.1實(shí)驗(yàn)一熟悉HTML(一)/12

2.1.1實(shí)驗(yàn)?zāi)康?12

2.1.2實(shí)驗(yàn)要求/12

2.1.3相關(guān)知識(shí)/12

2.1.4實(shí)驗(yàn)內(nèi)容及步驟/14

項(xiàng)目一學(xué)習(xí)創(chuàng)建簡(jiǎn)單的網(wǎng)頁/14

項(xiàng)目二創(chuàng)建不同類型的鏈接/16

項(xiàng)目三鏈接到同一頁面的不同位置/17

項(xiàng)目四添加圖像/18

2.2實(shí)驗(yàn)二熟悉HTML(二)/19

2.2.1實(shí)驗(yàn)?zāi)康?19

2.2.2實(shí)驗(yàn)要求/19

2.2.3相關(guān)知識(shí)/19

2.2.4實(shí)驗(yàn)內(nèi)容及步驟/21

項(xiàng)目一制作學(xué)生成績(jī)單/21

項(xiàng)目二創(chuàng)建嵌套列表/22

項(xiàng)目三創(chuàng)建用戶注冊(cè)表單/23第3章CSS的運(yùn)用/25

3.1實(shí)驗(yàn)一CSS基礎(chǔ)知識(shí)/25

3.1.1實(shí)驗(yàn)?zāi)康?25

3.1.2實(shí)驗(yàn)要求/25

3.1.3相關(guān)知識(shí)/25

3.1.4實(shí)驗(yàn)內(nèi)容及步驟/27

項(xiàng)目一用CSS格式化文本/27

項(xiàng)目二用CSS美化顏色和背景/30

項(xiàng)目三用CSS美化表單/35

3.2實(shí)驗(yàn)二CSS布局/36

3.2.1實(shí)驗(yàn)?zāi)康?36

3.2.2實(shí)驗(yàn)要求/37

3.2.3相關(guān)知識(shí)/37

3.2.4實(shí)驗(yàn)內(nèi)容及步驟/38

項(xiàng)目一盒子模式/38

項(xiàng)目二浮動(dòng)和導(dǎo)航條/42

項(xiàng)目三網(wǎng)頁布局/46第4章JavaScript入門/52

4.1實(shí)驗(yàn)一JavaScript基礎(chǔ)知識(shí)/52

4.1.1實(shí)驗(yàn)?zāi)康?52

4.1.2實(shí)驗(yàn)要求/52

4.1.3相關(guān)知識(shí)/52

4.1.4實(shí)驗(yàn)內(nèi)容及步驟/54

項(xiàng)目一文本輸出及提示框調(diào)用/54

項(xiàng)目二變量定義和條件語句/55

項(xiàng)目三while循環(huán)/56

項(xiàng)目四數(shù)組/58

4.2實(shí)驗(yàn)二了解jQuery/59

4.2.1實(shí)驗(yàn)?zāi)康?59

4.2.2實(shí)驗(yàn)要求/59

4.2.3相關(guān)知識(shí)/59

4.2.4實(shí)驗(yàn)內(nèi)容及步驟/60

項(xiàng)目一jQuery基礎(chǔ)/60

項(xiàng)目二jQuery選擇器和事件/61

項(xiàng)目三jQuery效果/63

4.3實(shí)驗(yàn)三編寫綜合JavaScript程序/68

4.3.1實(shí)驗(yàn)?zāi)康?68

4.3.2相關(guān)知識(shí)/68

4.3.3實(shí)驗(yàn)內(nèi)容及步驟/69

項(xiàng)目一圖片輪播插件的應(yīng)用/69

項(xiàng)目二在表單上使用日期時(shí)間選擇器/71

項(xiàng)目三在網(wǎng)頁上繪制圖表/74第5章網(wǎng)頁版式設(shè)計(jì)/78

5.1實(shí)驗(yàn)一Web圖像基礎(chǔ)/78

5.1.1實(shí)驗(yàn)?zāi)康?78

5.1.2實(shí)驗(yàn)要求/78

5.1.3相關(guān)知識(shí)/78

5.1.4實(shí)驗(yàn)內(nèi)容及步驟/79

項(xiàng)目一創(chuàng)建并存儲(chǔ)一個(gè)平面彩色圖像/79

項(xiàng)目二保存多級(jí)透明度圖像/80

項(xiàng)目三創(chuàng)建并保存多色彩圖片/81

5.2實(shí)驗(yàn)二Web版式設(shè)計(jì)/82

5.2.1實(shí)驗(yàn)?zāi)康?82

5.2.2實(shí)驗(yàn)要求/82

5.2.3相關(guān)知識(shí)/82

5.2.4實(shí)驗(yàn)內(nèi)容及步驟/83

項(xiàng)目一制定網(wǎng)頁布局及配色方案/83

項(xiàng)目二制作主頁設(shè)計(jì)效果圖/85第6章新型網(wǎng)頁設(shè)計(jì)/92

6.1實(shí)驗(yàn)一HTML5與CSS3/92

6.1.1實(shí)驗(yàn)?zāi)康?92

6.1.2實(shí)驗(yàn)要求/92

6.1.3相關(guān)知識(shí)/92

6.1.4實(shí)驗(yàn)內(nèi)容及步驟/93

項(xiàng)目一利用HTML5布局頁面并展示音頻、

視頻/93

項(xiàng)目二為HTML5頁面定義樣式/96

6.2實(shí)驗(yàn)二響應(yīng)式布局及移動(dòng)終端自適應(yīng)網(wǎng)頁

設(shè)計(jì)/97

6.2.1實(shí)驗(yàn)?zāi)康?97

6.2.2實(shí)驗(yàn)要求/98

6.2.3相關(guān)知識(shí)/98

6.2.4實(shí)驗(yàn)內(nèi)容及步驟/99

項(xiàng)目一使用Bootstrap框架制作響應(yīng)式網(wǎng)頁/99

項(xiàng)目二模擬移動(dòng)端尺寸查看網(wǎng)站/103第7章CMS內(nèi)容管理系統(tǒng)簡(jiǎn)介/105

7.1實(shí)驗(yàn)一常用CMS系統(tǒng)介紹及帝國(guó)CMS的

安裝/105

7.1.1實(shí)驗(yàn)?zāi)康?105

7.1.2實(shí)驗(yàn)要求/105

7.1.3相關(guān)知識(shí)/105

7.1.4實(shí)驗(yàn)內(nèi)容及步驟/106

項(xiàng)目一在本地安裝帝國(guó)CMS/106

項(xiàng)目二帝國(guó)CMS的初始設(shè)置/108

7.2實(shí)驗(yàn)二應(yīng)用帝國(guó)CMS創(chuàng)建網(wǎng)站/109

7.2.1實(shí)驗(yàn)?zāi)康?109

7.2.2實(shí)驗(yàn)要求/109

7.2.3相關(guān)知識(shí)/110

7.2.4實(shí)驗(yàn)內(nèi)容及步驟/111

項(xiàng)目一增加欄目并錄入信息/111

項(xiàng)目二利用帝國(guó)CMS標(biāo)簽制作網(wǎng)頁模板/114

項(xiàng)目三網(wǎng)站的遷移/117第8章動(dòng)態(tài)網(wǎng)站搭建案例/119

8.1實(shí)驗(yàn)一服務(wù)環(huán)境和CMS系統(tǒng)的搭建/119

8.1.1實(shí)驗(yàn)?zāi)康?119

8.1.2實(shí)驗(yàn)要求/119

8.1.3相關(guān)知識(shí)/119

8.1.4實(shí)驗(yàn)內(nèi)容及步驟/119

項(xiàng)目一服務(wù)環(huán)境的搭建/119

項(xiàng)目二CMS系統(tǒng)的搭建/124

項(xiàng)目三前端網(wǎng)頁模板的制作/127

8.2實(shí)驗(yàn)二網(wǎng)站運(yùn)維/133

8.2.1實(shí)驗(yàn)?zāi)康?133

8.2.2實(shí)驗(yàn)要求/133

8.2.3實(shí)驗(yàn)內(nèi)容及步驟/133

項(xiàng)目一管理欄目信息/133

項(xiàng)目二管理運(yùn)維人員賬號(hào)/133參考文獻(xiàn)/136