網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）

前言

第1章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)
1.1 網(wǎng)頁(yè)概述
1.2 網(wǎng)站開(kāi)發(fā)流程
1.3 Web設(shè)計(jì)基礎(chǔ)
1.3.1 Web設(shè)計(jì)原則
1.3.2 網(wǎng)站結(jié)構(gòu)規(guī)劃
1.4 布局設(shè)計(jì)
1.4.1 布局設(shè)計(jì)原則
1.4.2 布局設(shè)計(jì)類(lèi)型
1.4.3 布局設(shè)計(jì)元素
1.4.4 布局設(shè)計(jì)技術(shù)
1.5 內(nèi)容設(shè)計(jì)
1.5.1 文本
1.5.2 多媒體
1.5.3 內(nèi)容排版
1.6 風(fēng)格設(shè)計(jì)
1.6.1 網(wǎng)頁(yè)設(shè)計(jì)構(gòu)成要素
1.6.2 網(wǎng)頁(yè)設(shè)計(jì)的風(fēng)格類(lèi)型
1.7 色彩設(shè)計(jì)
1.7.1 色彩基礎(chǔ)
1.7.2 網(wǎng)頁(yè)中的色彩
1.7.3 網(wǎng)頁(yè)配色方案
1.8 小結(jié)
1.9 思考與練習(xí)
第2章 HTML基礎(chǔ)
2.1 HTML文檔結(jié)構(gòu)
2.2 HTML基本語(yǔ)法
2.2.1 標(biāo)記語(yǔ)法28
2.2.2 屬性語(yǔ)法29
2.2.3 命名規(guī)則30
2.3 塊元素與內(nèi)聯(lián)元素30
2.4 HTML的格式元素31
2.4.1 字符格式化31
2.4.2 輸出32
2.4.3 塊級(jí)33
2.4.4 wbr和time元素34
2.5 HTML5新增的文檔結(jié)構(gòu)元素35
2.5.1 文章語(yǔ)義（article、header、footer）
元素35
2.5.2 內(nèi)容區(qū)塊語(yǔ)義（section）元素37
2.5.3 側(cè)欄（aside）與導(dǎo)航（nav）元素37
2.5.4 hgroup元素為標(biāo)題分組38
2.6 小結(jié)38
2.7 思考與練習(xí)39
第3章 CSS基礎(chǔ)40
3.1 CSS語(yǔ)法與規(guī)則40
3.2 樣式表的定義與使用42
3.2.1 內(nèi)聯(lián)方式42
3.2.2 內(nèi)部樣式塊對(duì)象42
3.2.3 外部樣式表43
3.3 選擇器43
3.3.1 基本選擇器44
3.3.2 層次選擇器45
3.3.3 屬性選擇器47
3.3.4 偽類(lèi)選擇器48
3.3.5 偽元素選擇器52
3.4 小結(jié)53
3.5 思考與練習(xí)53
第4章 文本樣式與背景54
4.1 長(zhǎng)度單位與顏色54
4.1.1 長(zhǎng)度單位54
4.1.2 顏色設(shè)置方法55
4.2 文本排版樣式56
4.2.1 文本樣式56
4.2.2 排版樣式58
4.2.3 文本裝飾61
4.3 背景樣式62
4.3.1 基本背景屬性62
4.3.2 多重背景圖像63
4.3.3 CSS3新增背景屬性64
4.3.4 漸變背景66
4.4 小結(jié)69
4.5 思考與練習(xí)70
第5章 常用Web元素71
5.1 添加特殊符號(hào)71
5.2 圖像71
5.2.1 圖像標(biāo)簽72
5.2.2 圖像的寬高、間距與邊框72
5.2.3 圖像的對(duì)齊方式72
5.2.4 figure元素73
5.3 超鏈接73
5.3.1 創(chuàng)建超鏈接73
5.3.2 鏈接對(duì)象75
5.3.3 網(wǎng)頁(yè)鏈接屬性設(shè)置78
5.3.4 圖像映射78
5.4 列表79
5.4.1 無(wú)序列表79
5.4.2 有序列表80
5.4.3 嵌套列表82
5.4.4 定義列表82
5.4.5 菜單列表83
5.4.6 圖像列表84
5.4.7 列表符號(hào)位置84
5.5 表格85
5.5.1 表格元素85
5.5.2 表格修飾87
5.5.3 設(shè)置表格行屬性88
5.5.4 設(shè)置單元格屬性88
5.5.5 單線表格的制作89
5.5.6 表格的嵌套90
5.6 內(nèi)聯(lián)框架90
5.7 小結(jié)91
5.8 思考與練習(xí)91
第6章 盒模型92
6.1 盒模型概述92
6.1.1 邊框93
6.1.2 填充94
6.1.3 邊距95
6.2 邊框高級(jí)屬性95
6.2.1 圓角邊框95
6.2.2 盒陰影97
6.2.3 圖像邊框97
6.3 伸縮盒99
6.3.1 CSS中的布局模式99
6.3.2 Flexbox模型的功能99
6.3.3 Flexbox模型的相關(guān)術(shù)語(yǔ)100
6.3.4 Flexbox模型的使用102
6.4 小結(jié)106
6.5 思考與練習(xí)107
第7章 界面設(shè)計(jì)108
7.1 定位與布局108
7.1.1 定位108
7.1.2 浮動(dòng)109
7.1.3 顯示110
7.1.4 溢出112
7.2 用戶界面113
7.2.1 輪廓113
7.2.2 放大113
7.2.3 盒模型組成模式114
7.2.4 允許縮放114
7.3 多列115
7.3.1 多列的基本屬性115
7.3.2 列間距116
7.3.3 列邊框116
7.3.4 跨列117
7.3.5 列高117
7.3.6 斷行118
7.4 CSS網(wǎng)格布局118
7.4.1 重要術(shù)語(yǔ)118
7.4.2 網(wǎng)格容器屬性119
7.4.3 網(wǎng)格項(xiàng)屬性126
7.5 小結(jié)129
7.6 思考與練習(xí)129
第8章 表單130
8.1 網(wǎng)頁(yè)表單概述130
8.2 傳統(tǒng)表單元素131
8.2.1 傳統(tǒng)表單輸入類(lèi)型131
8.2.2 標(biāo)注元素135
8.2.3 文本區(qū)域136
8.2.4 選擇域137
8.2.5 域集138
8.3 HTML5表單的新特性139
8.3.1 HTML5新增表單輸入類(lèi)型139
8.3.2 HTML5新增表單元素141
8.3.3 HTML5新增表單屬性142
8.4 小結(jié)145
8.5 思考與練習(xí)145
第9章 JavaScript146
9.1 JavaScript簡(jiǎn)介146
9.2 JavaScript程序148
9.2.1 語(yǔ)句148
9.2.2 函數(shù)149
9.2.3 消息對(duì)話框151
9.3 標(biāo)識(shí)符和變量152
9.3.1 命名規(guī)定152
9.3.2 數(shù)據(jù)類(lèi)型153
9.3.3 變量153
9.3.4 轉(zhuǎn)義字符155
9.4 運(yùn)算符和表達(dá)式155
9.4.1 算術(shù)運(yùn)算符和表達(dá)式155
9.4.2 賦值運(yùn)算符和表達(dá)式156
9.4.3 關(guān)系運(yùn)算符和表達(dá)式156
9.4.4 邏輯運(yùn)算符和表達(dá)式158
9.4.5 條件運(yùn)算符和表達(dá)式158
9.4.6 其他運(yùn)算符和表達(dá)式159
9.5 JavaScript程序控制結(jié)構(gòu)159
9.5.1 順序程序159
9.5.2 分支程序160
9.5.3 循環(huán)程序163
9.6 常用對(duì)象166
9.6.1 對(duì)象簡(jiǎn)介166
9.6.2 核心對(duì)象166
9.6.3 文檔171
9.6.4 窗口174
9.7 事件編程174
9.7.1 事件簡(jiǎn)介174
9.7.2 表單事件176
9.7.3 鼠標(biāo)事件177
9.7.4 鍵盤(pán)事件177
9.7.5 頁(yè)面載入和離開(kāi)177
9.8 利用JS實(shí)現(xiàn)在線訂購(gòu)178
9.9 小結(jié)179
9.10 思考與練習(xí)179
第10章 網(wǎng)頁(yè)多媒體實(shí)現(xiàn)180
10.1 HTML多媒體元素180
10.1.1 多媒體元素的基本屬性180
10.1.2 多媒體元素的常用方法183
10.1.3 多媒體元素的重要事件186
10.1.4 Flash動(dòng)畫(huà)與視頻189
10.2 CSS動(dòng)畫(huà)設(shè)計(jì)189
10.2.1 CSS變換189
10.2.2 CSS過(guò)渡194
10.2.3 CSS動(dòng)畫(huà)195
10.3 HTML繪圖197
10.3.1 canvas元素的基本用法197
10.3.2 繪制基本圖形198
10.3.3 繪制曲線200
10.3.4 繪制文本203
10.3.5 圖像的繪制與裁切204
10.4 HTML拖放206
10.5 小結(jié)207
10.6 思考與練習(xí)208
第11章 jQuery209
11.1 jQuery概述209
11.2 jQuery選擇器211
11.2.1 基本選擇器211
11.2.2 層次選擇器212
11.2.3 過(guò)濾選擇器213
11.2.4 表單選擇器218
11.3 jQuery操作DOM220
11.3.1 訪問(wèn)元素220
11.3.2 結(jié)點(diǎn)操作225
11.3.3 遍歷元素229
11.3.4 刪除元素230
11.4 jQuery中的事件231
11.4.1 頁(yè)面載入事件231
11.4.2 綁定事件231
11.4.3 切換事件232
11.4.4 移除事件233
11.4.5 trigger方法234
11.5 jQuery動(dòng)畫(huà)與特效234
11.5.1 基本動(dòng)畫(huà)234
11.5.2 滑動(dòng)動(dòng)畫(huà)237
11.5.3 淡入淡出動(dòng)畫(huà)238
11.5.4 自定義動(dòng)畫(huà)240
11.6 jQuery UI插件243
11.6.1 jQuery UI交互性插件243
11.6.2 jQuery UI微型插件246
11.7 小結(jié)249
11.8 思考與練習(xí)250
第12章 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)252
12.1 響應(yīng)式網(wǎng)頁(yè)簡(jiǎn)介252
12.1.1 響應(yīng)式網(wǎng)頁(yè)的優(yōu)點(diǎn)252
12.1.2 響應(yīng)式的概念253
12.1.3 Viewport253
12.1.4 流式網(wǎng)格254
12.1.5 媒體查詢255
12.1.6 圖像、視頻與字體257
12.2 Bootstrap響應(yīng)式網(wǎng)頁(yè)258
12.2.1 布局259
12.2.2 內(nèi)容263
12.2.3 組件264
12.3 小結(jié)272

12.4 思考與練習(xí)272
第13章 綜合實(shí)例273
13.1 網(wǎng)頁(yè)仿制實(shí)例273
13.1.1 導(dǎo)航條274
13.1.2 輪播275
13.1.3 自定義區(qū)域276
13.1.4 Services區(qū)域278
13.1.5 Portfolio區(qū)域279
13.1.6 Contact區(qū)域281
13.2 基于CMS快速構(gòu)建網(wǎng)站實(shí)例282
13.2.1 CMS與Drupal282
13.2.2 Drupal基本應(yīng)用284
13.2.3 導(dǎo)入與導(dǎo)出站點(diǎn)294
13.2.4 主題296
13.2.5 內(nèi)容類(lèi)型300
13.2.6 制作首頁(yè)輪播303
13.2.7 自定義首頁(yè)區(qū)域311
13.2.8 制作分類(lèi)列表頁(yè)312
13.2.9 添加視頻功能317
13.3 小結(jié)318
13.4 思考與練習(xí)319
參考文獻(xiàn)320