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

目錄 

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

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

1.1.1實驗?zāi)康?1

1.1.2實驗要求/1

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

1.1.4實驗內(nèi)容及步驟/1

項目一安裝、配置Apache/1

項目二安裝、配置IIS/3

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

1.2實驗二制作一個網(wǎng)頁/8

1.2.1實驗?zāi)康?8

1.2.2實驗要求/8

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

1.2.4實驗內(nèi)容及步驟/10

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

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

2.1實驗一熟悉HTML(一)/12

2.1.1實驗?zāi)康?12

2.1.2實驗要求/12

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

2.1.4實驗內(nèi)容及步驟/14

項目一學習創(chuàng)建簡單的網(wǎng)頁/14

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

項目三鏈接到同一頁面的不同位置/17

項目四添加圖像/18

2.2實驗二熟悉HTML(二)/19

2.2.1實驗?zāi)康?19

2.2.2實驗要求/19

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

2.2.4實驗內(nèi)容及步驟/21

項目一制作學生成績單/21

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

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

3.1實驗一CSS基礎(chǔ)知識/25

3.1.1實驗?zāi)康?25

3.1.2實驗要求/25

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

3.1.4實驗內(nèi)容及步驟/27

項目一用CSS格式化文本/27

項目二用CSS美化顏色和背景/30

項目三用CSS美化表單/35

3.2實驗二CSS布局/36

3.2.1實驗?zāi)康?36

3.2.2實驗要求/37

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

3.2.4實驗內(nèi)容及步驟/38

項目一盒子模式/38

項目二浮動和導航條/42

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

4.1實驗一JavaScript基礎(chǔ)知識/52

4.1.1實驗?zāi)康?52

4.1.2實驗要求/52

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

4.1.4實驗內(nèi)容及步驟/54

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

項目二變量定義和條件語句/55

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

項目四數(shù)組/58

4.2實驗二了解jQuery/59

4.2.1實驗?zāi)康?59

4.2.2實驗要求/59

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

4.2.4實驗內(nèi)容及步驟/60

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

項目二jQuery選擇器和事件/61

項目三jQuery效果/63

4.3實驗三編寫綜合JavaScript程序/68

4.3.1實驗?zāi)康?68

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

4.3.3實驗內(nèi)容及步驟/69

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

項目二在表單上使用日期時間選擇器/71

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

5.1實驗一Web圖像基礎(chǔ)/78

5.1.1實驗?zāi)康?78

5.1.2實驗要求/78

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

5.1.4實驗內(nèi)容及步驟/79

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

項目二保存多級透明度圖像/80

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

5.2實驗二Web版式設(shè)計/82

5.2.1實驗?zāi)康?82

5.2.2實驗要求/82

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

5.2.4實驗內(nèi)容及步驟/83

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

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

6.1實驗一HTML5與CSS3/92

6.1.1實驗?zāi)康?92

6.1.2實驗要求/92

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

6.1.4實驗內(nèi)容及步驟/93

項目一利用HTML5布局頁面并展示音頻、

視頻/93

項目二為HTML5頁面定義樣式/96

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

設(shè)計/97

6.2.1實驗?zāi)康?97

6.2.2實驗要求/98

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

6.2.4實驗內(nèi)容及步驟/99

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

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

7.1實驗一常用CMS系統(tǒng)介紹及帝國CMS的

安裝/105

7.1.1實驗?zāi)康?105

7.1.2實驗要求/105

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

7.1.4實驗內(nèi)容及步驟/106

項目一在本地安裝帝國CMS/106

項目二帝國CMS的初始設(shè)置/108

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

7.2.1實驗?zāi)康?109

7.2.2實驗要求/109

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

7.2.4實驗內(nèi)容及步驟/111

項目一增加欄目并錄入信息/111

項目二利用帝國CMS標簽制作網(wǎng)頁模板/114

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

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

8.1.1實驗?zāi)康?119

8.1.2實驗要求/119

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

8.1.4實驗內(nèi)容及步驟/119

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

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

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

8.2實驗二網(wǎng)站運維/133

8.2.1實驗?zāi)康?133

8.2.2實驗要求/133

8.2.3實驗內(nèi)容及步驟/133

項目一管理欄目信息/133

項目二管理運維人員賬號/133參考文獻/136