本書(shū)共13章，主要內(nèi)容包括HTML5入門(mén)基礎(chǔ)、HTML5結(jié)構(gòu)元素、HTML5頁(yè)面基本元素、HTML5網(wǎng)頁(yè)文本與段落信息組織、使用CSS設(shè)計(jì)表單和表格樣式、HTML5音頻與視頻、HTML5畫(huà)布canvas與SVG、CSS語(yǔ)言基礎(chǔ)、設(shè)置CSS基本樣式、移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)CSS3、CSS盒子模型、用CSS定位控制網(wǎng)頁(yè)布局和企業(yè)網(wǎng)站設(shè)計(jì)。
本書(shū)內(nèi)容翔實(shí)，結(jié)構(gòu)清晰，講解循序漸進(jìn)，并注意各個(gè)章節(jié)與實(shí)例之間的呼應(yīng)和對(duì)照。
本書(shū)還有豐富的配套資源，如書(shū)中案例源文件、典型實(shí)例教學(xué)視頻、PPT教學(xué)課件、教學(xué)大綱和教學(xué)規(guī)劃參考等。
本書(shū)適合網(wǎng)頁(yè)設(shè)計(jì)與制作人員、HTML和CSS開(kāi)發(fā)初學(xué)者、前端開(kāi)發(fā)愛(ài)好者、網(wǎng)頁(yè)設(shè)計(jì)愛(ài)好者、培訓(xùn)機(jī)構(gòu)學(xué)員、網(wǎng)站重構(gòu)工程師、從事后端開(kāi)發(fā)但對(duì)前端開(kāi)發(fā)感興趣的人員、網(wǎng)站編輯或網(wǎng)站運(yùn)營(yíng)人員學(xué)習(xí)或參考。
張輝 擁有多年計(jì)算機(jī)網(wǎng)絡(luò)教學(xué)經(jīng)驗(yàn)，參與編寫(xiě)多本網(wǎng)頁(yè)前端開(kāi)發(fā)教材。擅長(zhǎng)網(wǎng)站設(shè)計(jì)、網(wǎng)站W(wǎng)eb前端開(kāi)發(fā)和網(wǎng)站后臺(tái)開(kāi)發(fā)，對(duì)HTML、CSS、 JavaScript等網(wǎng)頁(yè)前端技術(shù)有著深入的研究和獨(dú)到的見(jiàn)解。
祁東升 擁有多年Web應(yīng)用、開(kāi)發(fā)技術(shù)教學(xué)經(jīng)驗(yàn)，精通計(jì)算機(jī)網(wǎng)絡(luò)開(kāi)發(fā)技術(shù)，HTML5、 JavaScript CSS3、 Dreamweaver等網(wǎng)絡(luò)開(kāi)發(fā)技術(shù)有很深入的研究和豐富的實(shí)踐經(jīng)驗(yàn)。
第 1章 HTML5入門(mén)基礎(chǔ) 11
1．1 認(rèn)識(shí)HTML5 12
1．2 HTML5與HTML4的區(qū)別 13
1．2．1 HTML5的語(yǔ)法變化 13
1．2．2 HTML5中的標(biāo)簽方法 13
1．2．3 HTML5語(yǔ)法中的3個(gè)要點(diǎn) 14
1．2．4 HTML5與HTML4在搜索引擎優(yōu)化方面的對(duì)比 14
1．3 HTML5新增的元素和廢除的元素 15
1．3．1 新增的結(jié)構(gòu)元素 15
1．3．2 新增的塊級(jí)元素 17
1．3．3 新增的行內(nèi)語(yǔ)義元素 19
1．3．4 新增的嵌入多媒體元素與交互性元素 22
1．3．5 新增的input元素的類(lèi)型 23
1．3．6 廢除的元素 24
1．3．7 課堂練習(xí)——使用記事本手工編寫(xiě)HTML代碼 25
1．4 課后習(xí)題 26
第 2章 HTML5結(jié)構(gòu)元素 27
2．1 新增的主體結(jié)構(gòu)元素 28
2．1．1 article元素 28
2．1．2 section元素 29
2．1．3 nav元素 29
2．1．4 aside元素 30
2．2 新增的非主體結(jié)構(gòu)元素 31
2．2．1 課堂案例——?jiǎng)?chuàng)建企業(yè)簡(jiǎn)介網(wǎng)頁(yè) 31
2．2．2 header元素 33
2．2．3 hgroup元素 33
2．2．4 footer元素 34
2．2．5 address元素 35
2．2．6 課堂練習(xí)——用HTML5中的結(jié)構(gòu)元素布局主頁(yè) 35
2．3 課后習(xí)題 38
第3章 HTML5頁(yè)面基本元素 39
3．1 頁(yè)面頭部元素head 40
3．2 頁(yè)面標(biāo)題元素title 40
3．3 元信息元素meta 41
3．3．1 定義網(wǎng)頁(yè)語(yǔ)言 41
3．3．2 定義頁(yè)面關(guān)鍵字 41
3．3．3 設(shè)置頁(yè)面說(shuō)明 42
3．3．4 設(shè)置頁(yè)面跳轉(zhuǎn) 42
3．3．5 設(shè)置頁(yè)面的作者信息 43
3．3．6 頁(yè)面的編輯工具 43
3．4 頁(yè)面主體元素body 44
3．4．1 課堂案例——用頁(yè)面主體元素構(gòu)建一個(gè)網(wǎng)頁(yè) 44
3．4．2 主體元素的背景屬性 45
3．4．3 主體元素的背景圖片屬性 46
3．4．4 主體元素的文本屬性 47
3．4．5 瀏覽器中的邊界屬性 47
3．5 腳本元素script 48
3．6 創(chuàng)建樣式元素style 49
課堂練習(xí)——?jiǎng)?chuàng)建基本的HTML文件 50
3．7 課后習(xí)題 51
第4章 HTML5網(wǎng)頁(yè)文本與段落信息組織 52
4．1 文本的基本標(biāo)簽 53
4．1．1 課堂案例——?jiǎng)?chuàng)建旅游景點(diǎn)介紹網(wǎng)頁(yè) 53
4．1．2 設(shè)置字體 54
4．1．3 設(shè)置字號(hào) 55
4．1．4 設(shè)置顏色 56
4．1．5 使用～設(shè)置標(biāo)題 56
4．2 文本的分段與換行 57
4．2．1 課堂案例——?jiǎng)?chuàng)建酒店網(wǎng)頁(yè) 57
4．2．2 換行標(biāo)簽
58
4．2．3 分段標(biāo)簽
59
4．2．4 取消換行標(biāo)簽 60
4．3 文本的樣式設(shè)置 60
4．3．1 課堂案例——設(shè)置學(xué)校教育網(wǎng)頁(yè)文本樣式 61
4．3．2 斜體顯示標(biāo)簽、和 62
4．3．3 加粗顯示標(biāo)簽和 63
4．3．4 下標(biāo)標(biāo)簽和上標(biāo)標(biāo)簽 63
4．3．5 放大字號(hào)標(biāo)簽 64
4．3．6 縮小字號(hào)標(biāo)簽 65
4．4 水平分隔線標(biāo)簽
66
4．4．1 課堂案例——在網(wǎng)頁(yè)中插入水平線 66
4．4．2 高度屬性size和寬度屬性width 67
4．4．3 陰影屬性noshade 67
4．4．4 顏色屬性color 68
4．4．5 對(duì)齊屬性align 69
4．4．6 課堂練習(xí)——設(shè)置網(wǎng)頁(yè)文本及段落格式 70
4．5 課后習(xí)題 71
第5章 使用CSS設(shè)計(jì)表單和表格樣式 72
5．1 表單標(biāo)簽 73
5．1．1 程序提交action 73
5．1．2 表單名稱name 73
5．1．3 傳送方法method 74
5．1．4 編碼方式enctype 74
5．1．5 目標(biāo)顯示方式target 75
5．2 插入表單對(duì)象 75
5．2．1 課堂案例——在網(wǎng)頁(yè)中插入表單對(duì)象 76
5．2．2 插入文字字段text 79
5．2．3 插入密碼域password 80
5．2．4 插入單選按鈕radio 81
5．2．5 插入復(fù)選框checkbox 81
5．2．6 插入普通按鈕button 82
5．2．7 插入提交按鈕submit 83
5．2．8 重置按鈕reset 84
5．2．9 插入圖像域image 84
5．2．10 插入隱藏域hidden 85
5．2．11 插入文件域file 86
5．3 菜單和列表 87
5．3．1 插入下拉菜單 87
5．3．2 插入列表項(xiàng) 88
5．3．3 課堂練習(xí)——用戶注冊(cè)表單頁(yè)面制作實(shí)例 89
5．4 課后習(xí)題 92
第6章 HTML5音頻與視頻 93
6．1 HTML5多媒體技術(shù)概述 94
6．1．1 音頻文件格式 94
6．1．2 視頻文件格式 94
6．2 HTML5 視頻video 94
6．2．1 課堂案例——在網(wǎng)頁(yè)中添加視頻文件 95
6．2．2 標(biāo)簽概述 96
6．2．3 鏈接不同的視頻文件 97
6．3 HTML5 音頻audio 98
6．3．1 課堂案例——在網(wǎng)頁(yè)中插入音頻 98
6．3．2 audio元素 100
6．3．3 隱藏audio音頻播放器 100
6．3．4 audio元素的事件 101
6．4 音頻與視頻相關(guān)屬性、方法與事件 103
6．4．1 音頻與視頻相關(guān)屬性 103
6．4．2 音頻與視頻相關(guān)方法 104
6．4．3 音頻與視頻相關(guān)事件 104
6．4．4 課堂練習(xí)——用腳本控制音樂(lè)播放 105
6．5 課后習(xí)題 107
第7章 HTML5畫(huà)布canvas與SVG 108
7．1 使用畫(huà)布canvas繪制基本圖形 109
7．1．1 課堂案例——使用canvas元素繪制花朵 109
7．1．2 canvas元素 111
7．1．3 繪制直線 112
7．1．4 繪制矩形 113
7．1．5 繪制三角形 115
7．1．6 繪制圓弧 116
7．1．7 繪制貝塞爾曲線 118
7．2 更多的顏色和樣式選項(xiàng) 119
7．2．1 課堂案例——用繪制的線條組合幾何體動(dòng)畫(huà) 119
7．2．2 應(yīng)用不同的線型 121
7．2．3 繪制線性漸變 123
7．2．4 繪制徑向漸變 124
7．2．5 設(shè)置圖形的透明度 126
7．2．6 創(chuàng)建陰影 127
7．3 變換的使用 128
7．3．1 課堂案例——使用canvas元素繪制圖像放大鏡效果 128
7．3．2 平移變換 132
7．3．3 縮放變換 133
7．3．4 旋轉(zhuǎn)變換 133
7．4 HTML5 SVG 134
7．4．1 課堂案例——制作動(dòng)畫(huà) 135
7．4．2 SVG概述 136
7．4．3 繪制圖形 136
7．4．4 文本與圖像 139
7．4．5 筆畫(huà)與填充 140
7．4．6 課堂練習(xí)——繪制精美時(shí)鐘 141
7．5 課后習(xí)題 144
第8章 CSS語(yǔ)言基礎(chǔ) 145
8．1 CSS入門(mén) 146
8．1．1 認(rèn)識(shí)CSS 146
8．1．2 CSS的基本語(yǔ)法 146
8．2 基本CSS選擇器 147
8．2．1 標(biāo)簽選擇器 147
8．2．2 類(lèi)選擇器 147
8．2．3 ID選擇器 148
8．3 在HTML中添加CSS的方法 149
8．3．1 課堂案例——為網(wǎng)頁(yè)添加CSS樣式 150
8．3．2 內(nèi)嵌樣式表 151
8．3．3 行內(nèi)樣式表 152
8．3．4 鏈接外部樣式表 153
8．3．5 導(dǎo)入外部樣式表 153
8．3．6 課堂練習(xí)——設(shè)計(jì)一個(gè)樣式 154
8．4 課后習(xí)題 156
第9章 設(shè)置CSS基本樣式 157
9．1 字體屬性 158
9．1．1 課堂案例——使用CSS美化字體樣式 158
9．1．2 字體font-family 159
9．1．3 字號(hào)font-size 160
9．1．4 文字風(fēng)格font-style 161
9．1．5 加粗文字font-weight 162
9．1．6 小寫(xiě)字母轉(zhuǎn)為大寫(xiě)字母font-variant 163
9．1．7 文字的復(fù)合屬性font 164
9．2 顏色和背景屬性 165
9．2．1 課堂案例——用CSS實(shí)現(xiàn)背景半透明效果 165
9．2．2 顏色屬性color 167
9．2．3 背景顏色background-color 168
9．2．4 背景圖像background-image 169
9．2．5 背景重復(fù)background-repeat 170
9．2．6 背景附件background-attachment 171
9．2．7 背景位置background-position 172
9．2．8 背景復(fù)合屬性background 174
9．3 段落屬性 175
9．3．1 課堂案例——設(shè)計(jì)網(wǎng)頁(yè)文本段落樣式 175
9．3．2 單詞間隔word-spacing 176
9．3．3 字符間隔letter-spacing 177
9．3．4 文字修飾text-decoration 178
9．3．5 垂直對(duì)齊方式vertical-align 179
9．3．6 文本轉(zhuǎn)換text-transform 180
9．3．7 水平對(duì)齊方式text-align 182
9．3．8 文本縮進(jìn)text-indent 182
9．3．9 文本行高line-height 183
9．3．10 處理空白white-space 184
9．3．11 文本反排unicode-bidi和direction 185
9．4 列表屬性 186
9．4．1 設(shè)計(jì)背景變換的導(dǎo)航菜單 186
9．4．2 列表符號(hào)list-style-type 188
9．4．3 圖像符號(hào)list-style-image 190
9．4．4 列表縮進(jìn)list-style-position 191
9．4．5 列表復(fù)合屬性list-style 192
9．4．6 課堂練習(xí)——利用CSS制作豎排導(dǎo)航菜單 193
9．5 課后習(xí)題 194
第 10章 移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)CSS3 195
10．1 邊框 196
10．1．1 課堂案例——制作美觀的按鈕效果 196
10．1．2 圓角邊框 border-radius 197
10．1．3 邊框圖片border-image 200
10．1．4 邊框陰影box-shadow 201
10．2 背景 203
10．2．1 課堂案例——控制網(wǎng)頁(yè)背景屬性 203
10．2．2 背景圖片尺寸background-size 204
10．2．3 背景圖片定位區(qū)域background-origin 205
10．2．4 背景裁剪區(qū)域background-clip 206
10．3 文本 207
10．3．1 課堂案例——制作3D眩光效果文字 208
10．3．2 文本陰影text-shadow 209
10．3．3 強(qiáng)制換行word-wrap 210
10．3．4 文本溢出text-overflow 210
10．3．5 文字描邊text-stroke 212
10．3．6 文本填充顏色text-fill-color 212
10．4 多列 213
10．4．1 課堂案例——制作多列布局的Web頁(yè)面 214
10．4．2 多列column-count 215
10．4．3 列的寬度column-width 216
10．4．4 列的間隔column-gap 217
10．4．5 列的規(guī)則column-rule 218
10．5 轉(zhuǎn)換變形 220
10．5．1 課堂案例——設(shè)計(jì)3D幾何體 220
10．5．2 移動(dòng)translate() 223
10．5．3 旋轉(zhuǎn)rotate() 224
10．5．4 縮放scale() 225
10．5．5 扭曲skew() 227
10．5．6 矩陣matrix() 228
10．5．7 課堂練習(xí)——美觀的圖片排列 228
10．6 課后習(xí)題 230
第 11章 CSS盒子模型 231
11．1 認(rèn)識(shí)盒模型 232
11．2 外邊距 233
11．2．1 課堂案例——設(shè)置盒子外邊距 233
11．2．2 上外邊距margin-top 233
11．2．3 右外邊距margin-right 234
11．2．4 下外邊距margin-bottom 235
11．2．5 左外邊距margin-left 236
11．3 內(nèi)邊距 237
11．3．1 課堂案例——設(shè)置盒子內(nèi)邊距 237
11．3．2 上內(nèi)邊距padding-top 238
11．3．3 右內(nèi)邊距padding-right 239
11．3．4 下內(nèi)邊距padding-bottom 239
11．3．5 左內(nèi)邊距padding-left 240
11．4 邊框 241
11．4．1 課堂案例——制作立體邊框效果 241
11．4．2 邊框樣式border-style 241
11．4．3 邊框?qū)挾萣order-width 243
11．4．4 邊框顏色border-color 245
11．4．5 邊框?qū)傩詁order 246
11．5 課堂練習(xí)——制作一個(gè)盒子模型 248
11．6 課后習(xí)題 250
第 12章 用CSS定位控制網(wǎng)頁(yè)布局 251
12．1 position定位 252
12．1．1 課堂案例——position定位布局網(wǎng)頁(yè) 252
12．1．2 絕對(duì)定位absolute 253
12．1．3 固定定位fixed 254
12．1．4 相對(duì)定位relative 255
12．2 浮動(dòng)定位 256
12．2．1 課堂案例——浮動(dòng)布局網(wǎng)頁(yè) 256
12．2．2 float屬性 257
12．2．3 浮動(dòng)布局的新問(wèn)題 259
12．2．4 清除浮動(dòng)clear 259
12．3 定位層疊 261
12．3．1 層疊順序 261
12．3．2 簡(jiǎn)單嵌套元素中的層疊定位 262
12．3．3 包含子元素的復(fù)雜層疊定位 263
12．4 課堂練習(xí) 264
12．4．1 課堂練習(xí)1——一列固定寬度 264
12．4．2 課堂練習(xí)2——一列自適應(yīng) 265
12．4．3 課堂練習(xí)3——兩列固定寬度 266
12．4．4 課堂練習(xí)4——兩列寬度自適應(yīng) 267
12．4．5 課堂練習(xí)5——兩列右列寬度自適應(yīng) 268
12．5 課后習(xí)題 269
第 13章 企業(yè)網(wǎng)站設(shè)計(jì) 270
13．1 企業(yè)網(wǎng)站設(shè)計(jì)概述 271
13．1．1 企業(yè)網(wǎng)站分類(lèi) 271
13．1．2 企業(yè)網(wǎng)站主要功能欄目 272
13．2 網(wǎng)站內(nèi)容分析 273
13．3 HTML結(jié)構(gòu)設(shè)計(jì) 273
13．4 方案設(shè)計(jì) 276
13．5 定義整體樣式 276
13．6 制作頁(yè)面頂部 278
13．6．1 頁(yè)面頂部的結(jié)構(gòu) 278
13．6．2 定義頁(yè)面外部的樣式 278
13．7 制作左側(cè)導(dǎo)航菜單 279
13．7．1 制作導(dǎo)航菜單的結(jié)構(gòu) 280
13．7．2 定義導(dǎo)航菜單的樣式 280
13．8 制作“快速聯(lián)系我們”部分 281
13．8．1 定義“快速聯(lián)系我們”部分的結(jié)構(gòu) 281
13．8．2 定義“快速聯(lián)系我們”內(nèi)容的樣式 282
13．9 制作“公司介紹”部分 282
13．9．1 制作“公司介紹”部分結(jié)構(gòu) 282
13．9．2 定義“公司介紹”部分的樣式 282
13．10 制作“圖片展示”和“新聞動(dòng)態(tài)” 283
13．10．1 制作頁(yè)面結(jié)構(gòu) 283
13．10．2 定義頁(yè)面樣式 284
13．11 制作“酒店訂購(gòu)”部分 284
13．11．1 制作“酒店訂購(gòu)”部分的頁(yè)面結(jié)構(gòu) 284
13．11．2 定義“酒店訂購(gòu)”部分的樣式 285
13．12 制作底部版權(quán)部分 286
13．13 網(wǎng)站的上傳 287
13．14 課后習(xí)題 288
書(shū)單推薦
