Web標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)原理與前端開(kāi)發(fā)技術(shù)

第1章 網(wǎng)站與網(wǎng)頁(yè)... 1

1.1 互聯(lián)網(wǎng)與萬(wàn)維網(wǎng)... 1

1.2 服務(wù)器、客戶機(jī)和Web瀏覽器... 2

1.3 網(wǎng)頁(yè)與HTML. 3

1.4 網(wǎng)頁(yè)素材... 7

1.5 靜態(tài)網(wǎng)頁(yè)、動(dòng)態(tài)網(wǎng)頁(yè)和網(wǎng)站... 7

1.6 小結(jié)... 8

1.7 習(xí)題... 8

第2章 使用Fireworks制作圖片... 10

2.1 Fireworks軟件的工作界面... 10

2.2 制作網(wǎng)站標(biāo)題... 11

2.3 制作導(dǎo)航欄按鈕圖片... 13

2.4 將文本附加到路徑... 14

2.5 制作圖片交替的GIF動(dòng)畫(huà)... 15

2.6 制作滾動(dòng)字幕效果的GIF動(dòng)畫(huà)... 17

2.7 小結(jié)... 20

2.8 習(xí)題... 20

第3章 使用Flash制作動(dòng)畫(huà)... 21

3.1 Flash軟件的工作界面... 21

3.2 制作縮放自如的文字... 22

3.3 制作運(yùn)動(dòng)漸變的動(dòng)畫(huà)... 24

3.4 制作環(huán)繞球體旋轉(zhuǎn)的文字... 28

3.5 小結(jié)... 31

3.6 習(xí)題... 31

第4章 超文本標(biāo)記語(yǔ)言... 32

4.1 表現(xiàn)性元素... 32

4.2 HTML元素及其屬性... 33

4.3 a元素及其應(yīng)用... 35

4.4 標(biāo)題元素... 37

4.5 段落元素... 38

4.6 列表元素... 39

4.7 表格元素... 40

4.8 img元素及其應(yīng)用... 42

4.9 行內(nèi)元素和塊級(jí)元素... 44

4.10 結(jié)構(gòu)性元素、表現(xiàn)性元素、表現(xiàn)性屬性... 45

4.11 小結(jié)... 46

4.12 習(xí)題... 47

第5章 CSS基礎(chǔ)... 48

5.1 網(wǎng)頁(yè)的內(nèi)容、結(jié)構(gòu)與表現(xiàn)... 48

5.2 HTML規(guī)范及文檔類(lèi)型定義... 50

5.2.1 Transitional類(lèi)型的HTML文檔的基本要求... 51

5.2.2 W3C標(biāo)記驗(yàn)證服務(wù)... 52

5.2.3 使用Dreamweaver驗(yàn)證HTML文檔的語(yǔ)法規(guī)范性... 53

5.3 內(nèi)部樣式表... 54

5.3.1 類(lèi)型選擇器... 55

5.3.2 類(lèi)選擇器... 55

5.3.3 ID選擇器... 57

5.3.4 后代選擇器... 58

5.3.5 子元素選擇器... 59

5.3.6 偽類(lèi)... 59

5.3.7 選擇器分組... 60

5.4 常用的樣式特性... 61

5.4.1 類(lèi)型特性... 61

5.4.2 背景特性... 62

5.4.3 區(qū)塊特性... 63

5.5 行內(nèi)樣式... 63

5.6 外部樣式表及其應(yīng)用... 64

5.6.1 創(chuàng)建外部樣式表... 64

5.6.2 W3C在線CSS驗(yàn)證服務(wù)... 65

5.6.3 在HTML文檔中鏈接外部樣式表... 65

5.6.4 Web瀏覽器的兼容性視圖設(shè)置... 67

5.7 層疊樣式表... 67

5.7.1 CSS的層疊性... 68

5.7.2 CSS的繼承性... 70

5.8 小結(jié)... 71

5.9 習(xí)題... 72

第6章 可擴(kuò)展超文本標(biāo)記語(yǔ)言... 73

6.1 XHTML的形成背景... 73

6.1.1 缺乏語(yǔ)法規(guī)范性的HTML文檔... 73

6.1.2 XHTML的面世... 74

6.2 XHTML的語(yǔ)法規(guī)定... 74

6.3 XHTML文檔的基本結(jié)構(gòu)... 76

6.4 使用W3C標(biāo)記驗(yàn)證服務(wù)檢查XHTML文檔的語(yǔ)法... 77

6.5 XHTML CSS. 78

6.6 使用字符實(shí)體在網(wǎng)頁(yè)中顯示特殊字符... 79

6.7 小結(jié)... 80

6.8 習(xí)題... 80

第7章 應(yīng)用div CSS布局網(wǎng)頁(yè)... 82

7.1 盒子模型... 82

7.2 與盒子模型有關(guān)的樣式特性... 83

7.2.1 方框特性... 83

7.2.2 邊框特性... 83

7.2.3 盒子模型演示... 84

7.3 元素及其盒子在網(wǎng)頁(yè)中的排列... 85

7.3.1 正常流中的元素盒子... 86

7.3.2 元素盒子的浮動(dòng)... 87

7.3.3 應(yīng)用CSS和盒子浮動(dòng)制作水平導(dǎo)航條... 89

7.4 div CSS網(wǎng)頁(yè)布局... 90

7.5 Web標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)舉例... 93

7.6 小結(jié)... 96

7.7 習(xí)題... 97

第8章 使用Dreamweaver設(shè)計(jì)和制作網(wǎng)頁(yè)... 100

8.1 Dreamweaver軟件的工作界面... 100

8.2 使用Dreamweaver創(chuàng)建CSS文檔... 101

8.3 使用Dreamweaver創(chuàng)建XHTML文檔... 106

8.4 小結(jié)... 111

8.5 習(xí)題... 111

第9章 使用Dreamweaver建設(shè)網(wǎng)站... 112

9.1 網(wǎng)站規(guī)劃與功能定位... 112

9.2 創(chuàng)建本地站點(diǎn)... 112

9.3 創(chuàng)建公共文件夾... 114

9.4 設(shè)計(jì)網(wǎng)頁(yè)的版面布局... 115

9.5 素材準(zhǔn)備... 116

9.6 創(chuàng)建實(shí)現(xiàn)網(wǎng)頁(yè)版面布局的CSS文檔... 118

9.7 創(chuàng)建HTML模板... 118

9.8 運(yùn)用模板制作網(wǎng)頁(yè)... 125

9.9 通過(guò)HTML模板維護(hù)網(wǎng)站... 131

9.10 通過(guò)CSS文檔定制網(wǎng)站風(fēng)格... 133

9.11 規(guī)范化HTML文檔... 134

9.12 網(wǎng)頁(yè)測(cè)試... 135

9.13 小結(jié)... 136

9.14 習(xí)題... 137

第10章 JavaScript基礎(chǔ)... 138

10.1 JavaScript放置... 138

10.1.1 在HTML文檔主體直接插入JavaScript 138

10.1.2 在IE瀏覽器中調(diào)試JavaScript 141

10.1.3 JavaScript函數(shù)... 143

10.1.4 在HTML文檔頭部定義JavaScript函數(shù)... 143

10.1.5 在外部腳本文檔定義JavaScript函數(shù)... 144

10.2 變量和類(lèi)型... 146

10.2.1 變量... 146

10.2.2 類(lèi)型... 146

10.3 運(yùn)算符與表達(dá)式... 148

10.4 全局變量和局部變量... 151

10.5 類(lèi)型轉(zhuǎn)換... 152

10.5.1 隱式類(lèi)型轉(zhuǎn)換... 152

10.5.2 顯式類(lèi)型轉(zhuǎn)換... 153

10.6 JavaScript中的流程控制語(yǔ)句... 154

10.6.1 選擇控制語(yǔ)句... 154

10.6.2 循環(huán)控制語(yǔ)句... 155

10.7 小結(jié)... 157

10.8 習(xí)題... 158

第11章 JavaScript內(nèi)置對(duì)象... 159

11.1 對(duì)象、屬性和方法... 159

11.2 Date對(duì)象... 159

11.3 String對(duì)象... 161

11.3.1 創(chuàng)建String對(duì)象... 161

11.3.2 String對(duì)象的屬性... 161

11.3.3 String對(duì)象的方法... 161

11.3.4 String對(duì)象和string類(lèi)型的變量... 162

11.3.5 String對(duì)象的應(yīng)用... 163

11.3.6 正則表達(dá)式及其應(yīng)用... 165

11.4 RegExp對(duì)象... 168

11.5 Array對(duì)象... 170

11.5.1 數(shù)組的邏輯結(jié)構(gòu)... 170

11.5.2 創(chuàng)建Array對(duì)象... 170

11.5.3 Array對(duì)象的length屬性和數(shù)組元素... 171

11.5.4 Array對(duì)象的方法... 172

11.5.5 使用for-in 語(yǔ)句遍歷數(shù)組... 173

11.6 Math對(duì)象... 174

11.7 小結(jié)... 174

11.8 習(xí)題... 175

第12章 處理和驗(yàn)證表單數(shù)據(jù)... 177

12.1 表單、控件及其屬性... 177

12.2 表單事件和事件屬性... 180

12.3 驗(yàn)證表單數(shù)據(jù)... 181

12.4 網(wǎng)頁(yè)的Web標(biāo)準(zhǔn)... 185

12.4.1 網(wǎng)頁(yè)Web標(biāo)準(zhǔn)的四個(gè)層次... 185

12.4.2 Web標(biāo)準(zhǔn)系列... 188

12.5 小結(jié)... 189

12.6 習(xí)題... 189

第13章 BOM和DOM... 191

13.1 瀏覽器對(duì)象模型... 191

13.1.1 訪問(wèn)window對(duì)象的屬性... 192

13.1.2 通過(guò)window對(duì)象調(diào)用的方法... 192

13.1.3 screen對(duì)象... 195

13.2 文檔對(duì)象模型及HTML文檔樹(shù)... 195

13.2.1 文檔對(duì)象模型... 195

13.2.2 使用innerHTML屬性和innerText屬性訪問(wèn)元素的內(nèi)容... 197

13.2.3 調(diào)用getElementById方法訪問(wèn)HTML文檔樹(shù)中的元素節(jié)點(diǎn)... 197

13.2.4 調(diào)用getElementsByTagName方法訪問(wèn)HTML文檔樹(shù)中的
元素節(jié)點(diǎn)... 200

13.3 事件及其處理... 202

13.3.1 事件的類(lèi)型... 202

13.3.2 在HTML元素的開(kāi)始標(biāo)簽中處理事件... 203

13.3.3 使用對(duì)象及有關(guān)屬性處理事件... 204

13.4 事件的綜合處理... 205

13.5 小結(jié)... 208

13.6 習(xí)題... 209

第14章 DHTML.. 211

14.1 *定位和相對(duì)定位... 211

14.1.1 *定位... 211

14.1.2 相對(duì)定位... 213

14.2 下拉菜單... 214

14.3 垂直移動(dòng)的文本... 218

14.4 水平方向呈現(xiàn)跑馬燈效果的文本串... 222

14.5 在網(wǎng)頁(yè)上漂浮的圖片鏈接... 224

14.5.1 從左向右移動(dòng)的圖片鏈接... 224

14.5.2 沿水平方向來(lái)回移動(dòng)的圖片鏈接... 225

14.5.3 在Web瀏覽器窗口內(nèi)漂浮的圖片鏈接... 227

14.6 自動(dòng)切換的圖片... 229

14.6.1 嵌入自動(dòng)切換的圖片... 230

14.6.2 自動(dòng)切換的圖片及數(shù)字按鈕組... 233

14.6.3 自動(dòng)切換的圖片、數(shù)字按鈕組及數(shù)字按鈕click事件... 235

14.7 表格數(shù)據(jù)隔行變色... 236

14.8 小結(jié)... 238

14.9 習(xí)題... 239

第15章 jQuery基礎(chǔ)... 240

15.1 從JavaScript到j(luò)Query的轉(zhuǎn)換... 240

15.1.1 函數(shù)作為參數(shù)... 240

15.1.2 使用JavaScript說(shuō)明jQuery程序的基本語(yǔ)法及其格式... 241

15.1.3 獲取和使用jQuery. 248

15.1.4 jQuery程序的基本語(yǔ)法及其格式... 249

15.2 事件及其處理... 253

15.3 選取HTML DOM元素對(duì)象... 254

15.3.1 常用的CSS選擇器、偽類(lèi)以及結(jié)合符... 254

15.3.2 jQuery選擇器... 257

15.3.3 使用過(guò)濾器縮小結(jié)果集... 259

15.4 對(duì)jQuery對(duì)象進(jìn)行迭代... 260

15.5 DOM操作... 261

15.5.1 取值/賦值方法... 261

15.5.2 垂直滾動(dòng)播放的文本... 263

15.5.3 沿水平方向來(lái)回移動(dòng)的圖片鏈接... 265

15.5.4 JSON.. 267

15.5.5 創(chuàng)建和插入HTML元素對(duì)象... 269

15.6 更多應(yīng)用舉例... 277

15.6.1 簡(jiǎn)單數(shù)組排序... 277

15.6.2 對(duì)象數(shù)組排序... 278

15.6.3 閉包和內(nèi)部函數(shù)... 281

15.6.4 表格數(shù)據(jù)排序... 283

15.7 小結(jié)... 287

15.8 習(xí)題... 288

參考文獻(xiàn)... 291