HTML5+CSS3網(wǎng)頁設(shè)計(jì)基礎(chǔ)

目    錄
 
第1章  HTML5網(wǎng)頁基礎(chǔ)   1
1.1  網(wǎng)頁的基本元素   1
1.2  網(wǎng)頁的布局結(jié)構(gòu)   3
1.3  創(chuàng)建HTML5頁面   4
1.3.1  案例分析   4
1.3.2  用記事本創(chuàng)建網(wǎng)頁   4
1.3.3  用Hbuilder創(chuàng)建網(wǎng)頁   5
1.4  HTML5基礎(chǔ)   7
1.4.1  HTML5概述   7
1.4.2  HTML5文檔結(jié)構(gòu)   8
1.4.3  HTML5語句結(jié)構(gòu)   9
1.4.4  HTML5語法規(guī)范   10
1.5  實(shí)訓(xùn)   10
1.6  本章小結(jié)   11
1.7  練習(xí)題   11
第2章  網(wǎng)頁基本元素   13
2.1  文本控制標(biāo)簽   13
2.1.1  案例分析   13
2.1.2  (標(biāo)題標(biāo)簽)   14
2.1.3  (段落標(biāo)簽)   15
2.1.4 
(換行標(biāo)簽)   15
2.1.5  (水平線標(biāo)簽)   15
2.1.6  文本格式化標(biāo)簽   16
2.1.7  (范圍標(biāo)簽)   17
2.1.8  (注釋標(biāo)簽)   17
2.1.9  特殊符號(hào)   17
2.1.10  案例制作   18
2.2  圖像標(biāo)簽   19
2.2.1  案例分析   19
2.2.2  常用圖像格式   19
2.2.3  圖像標(biāo)簽及其屬性   20
2.2.4  路徑與相對(duì)路徑   23
2.2.5  案例制作   23
2.3  超鏈接標(biāo)簽   24
2.3.1  案例分析   24
2.3.2  超鏈接簡(jiǎn)介   25
2.3.3  超鏈接的應(yīng)用   25
2.3.4  案例制作   29
2.4  列表   30
2.4.1  案例分析   30
2.4.2  無序列表   30
2.4.3  有序列表   31
2.4.4  定義列表   32
2.4.5  嵌套列表   33
2.4.6  案例制作   34
2.5  表格   35
2.5.1  案例分析   35
2.5.2  表格的結(jié)構(gòu)   35
2.5.3  表格的基本語法   36
2.5.4  表格的修飾   37
2.5.5  不規(guī)范表格   39
2.5.6  案例制作   40
2.6  頁面交互標(biāo)簽   41
2.6.1  details和summary元素   41
2.6.2  progress元素   42
2.6.3  meter元素   42
2.7  實(shí)訓(xùn)   43
2.7.1  任務(wù)分析   44
2.7.2  任務(wù)實(shí)現(xiàn)   44
2.8  本章小結(jié)   45
2.9  練習(xí)題   46
第3章  CSS入門   47
3.1  CSS的定義與使用   47
3.1.1  CSS概述   47
3.1.2  CSS的定義和引用   48
3.2  CSS選擇器   51
3.2.1  案例分析   51
3.2.2  CSS樣式規(guī)則   51
3.2.3  CSS基礎(chǔ)選擇器   53
3.2.4  案例——制作企業(yè)簡(jiǎn)介頁面   58
3.3  CSS屬性單位   59
3.3.1  長度與百分比單位   59
3.3.2  色彩單位   60
3.4  CSS高級(jí)特性   61
3.4.1  案例分析   61
3.4.2  CSS的層疊性和繼承性   61
3.4.3  CSS的優(yōu)先級(jí)   64
3.4.4  案例——制作工程案例局部頁面   64
3.5  實(shí)訓(xùn)   66
3.6  本章小結(jié)   68
3.7  練習(xí)題   68
第4章  元素外觀修飾   71
4.1  文本樣式   71
4.1.1  案例分析   71
4.1.2  字體樣式   72
4.1.3  文本外觀屬性   75
4.1.4  案例制作   81
4.2  圖像樣式   82
4.2.1  案例分析   83
4.2.2  設(shè)置圖像樣式   83
4.2.3  案例制作   85
4.3  列表樣式   86
4.3.1  案例分析   86
4.3.2  設(shè)置列表項(xiàng)的標(biāo)記類型   86
4.3.3  設(shè)置列表項(xiàng)的標(biāo)記位置   88
4.3.4  案例制作   89
4.4  表格樣式   92
4.4.1  案例分析   92
4.4.2  border-collapse(設(shè)置表格邊框合并)   92
4.4.3  border-spacing(設(shè)置單元格間距)   93
4.4.4  empty-cells(設(shè)置是否顯示單元格邊框)   94
4.4.5  caption-side(設(shè)置表格標(biāo)題的位置)   95
4.4.6  案例制作   95
4.5  實(shí)訓(xùn)   97
4.5.1  任務(wù)分析   97
4.5.2  任務(wù)實(shí)現(xiàn)   97
4.6  本章小結(jié)   100
4.7  練習(xí)題   100
第5章  CSS3選擇器   103
5.1  屬性選擇器   103
5.1.1  案例分析   103
5.1.2  E[attribute^=value]選擇器   104
5.1.3  E[attribute$=value]選擇器   104
5.1.4  E[attribute*=value]選擇器   104
5.1.5  案例制作   105
5.2  偽類選擇器   106
5.2.1  案例分析   106
5.2.2  :first-child和:last-child選擇器   107
5.2.3  :nth-child(n)和:nth-last-child(n)選擇器   109
5.2.4  :nth-of-type(n)和:nth-last-of-type(n)選擇器   109
5.2.5  :empty選擇器   111
5.2.6  :target選擇器   112
5.2.7  案例制作   113
5.3  偽元素選擇器   116
5.3.1  案例分析   116
5.3.2  :before選擇器   116
5.3.3  :after選擇器   117
5.3.4  案例制作   118
5.4  鏈接偽類   119
5.4.1  案例分析   119
5.4.2  案例制作   119
5.5  實(shí)訓(xùn)   120
5.5.1  任務(wù)分析   121
5.5.2  任務(wù)完成   121
5.6  本章小結(jié)   125
5.7  練習(xí)題   125
第6章  CSS盒子模型   127
6.1  盒子模型簡(jiǎn)介   127
6.2  盒子的外觀屬性   128
6.2.1  案例分析   128
6.2.2  盒子模型的寬和高   129
6.2.3  盒子邊框?qū)傩?nbsp;  132
6.2.4  盒子模型的邊距屬性   137
6.2.5  案例制作   139
6.3  背景屬性   142
6.3.1  案例分析   142
6.3.2  background屬性   142
6.3.3  CSS漸變背景   150
6.3.4  背景和圖像不透明度設(shè)置   153
6.3.5  案例制作   154
6.4  實(shí)訓(xùn)   155
6.4.1  任務(wù)分析   155
6.4.2  任務(wù)實(shí)現(xiàn)   156
6.5  本章小結(jié)   158
6.6  練習(xí)題   158
第7章  網(wǎng)頁布局設(shè)計(jì)   161
7.1  網(wǎng)頁布局標(biāo)簽   161
7.1.1  布局標(biāo)簽 CSS布局的優(yōu)點(diǎn)   161
7.1.2  頁面分塊   162
7.1.3  頁面結(jié)構(gòu)標(biāo)簽   163
7.2  浮動(dòng)與定位   167
7.2.1  案例分析   167
7.2.2  元素的浮動(dòng)   167
7.2.3  清除浮動(dòng)   171
7.2.4  定位屬性   172
7.2.5  定位方式   173
7.2.6  overflow屬性   177
7.2.7  案例制作   178
7.3  典型的CSS布局   181
7.3.1  兩列布局   181
7.3.2  三列布局   185
7.3.3  三列自適應(yīng)布局   189
7.4  實(shí)訓(xùn)   190
7.4.1  任務(wù)分析   191
7.4.2  任務(wù)實(shí)現(xiàn)   191
7.5  本章小結(jié)   195
7.6  練習(xí)題   196
第8章  鏈接與導(dǎo)航   199
8.1  鏈接樣式   199
8.1.1  案例分析   199
8.1.2  設(shè)置文字鏈接樣式   200
8.1.3  設(shè)置圖像鏈接樣式   202
8.1.4  案例——制作產(chǎn)品中心-景觀路燈局部   203
8.2  縱向?qū)Ш讲藛蔚脑O(shè)計(jì)   205
8.2.1  案例分析   205
8.2.2  縱向?qū)Ш讲藛?nbsp;  206
8.2.3  案例——制作產(chǎn)品中心頁面的左側(cè)導(dǎo)航   207
8.3  橫向?qū)Ш讲藛蔚脑O(shè)計(jì)   209
8.3.1  案例分析   209
8.3.2  網(wǎng)站主導(dǎo)航菜單的設(shè)計(jì)   210
8.3.3  案例——制作產(chǎn)品中心頁面的頁碼導(dǎo)航   212
8.4  實(shí)訓(xùn)   213
8.4.1  任務(wù)分析   213
8.4.2  任務(wù)實(shí)現(xiàn)   214
8.5  本章小結(jié)   223
8.6  練習(xí)題   223
第9章  表單   225
9.1  表單標(biāo)簽   225
9.2  表單元素   226
9.2.1  案例分析   226
9.2.2  input元素及其屬性   227
9.2.3  其他表單元素   232
9.2.4  案例制作   234
9.3  用CSS控制表單樣式   235
9.4  實(shí)訓(xùn)   238
9.4.1  任務(wù)分析   238
9.4.2  任務(wù)實(shí)現(xiàn)   239
9.5  本章小結(jié)   242
9.6  練習(xí)題   242
第10章  CSS3簡(jiǎn)單動(dòng)畫   245
10.1  CSS3過渡   245
10.1.1  transition-property屬性   245
10.1.2  transition-duration屬性   247
10.1.3  transition-timing-function屬性   247
10.1.4  transition-delay屬性   248
10.1.5  transition屬性   248
10.2  變形   249
10.2.1  案例展示   249
10.2.2  認(rèn)識(shí)變形   249
10.2.3  2D轉(zhuǎn)換   250
10.2.4  3D轉(zhuǎn)換   256
10.2.5  案例實(shí)現(xiàn)   260
10.3  動(dòng)畫設(shè)計(jì)   262
10.3.1  @keyframes規(guī)則   262
10.3.2  animation屬性   263
10.4  實(shí)訓(xùn)   266
10.5  本章小結(jié)   270
10.6  練習(xí)題   270
第11章  多媒體技術(shù)   273
11.1  HTML5多媒體特性   273
11.1.1  多媒體格式   273
11.1.2  支持多媒體的瀏覽器   274
11.2  嵌入視頻和音頻   275
11.2.1  在HTML5中嵌入視頻   275
11.2.2  在HTML5中嵌入音頻   277
11.2.3  音視頻中的source元素   278
11.3  用CSS控制視頻的寬高   279
11.4  視頻和音頻的方法和事件   281
11.4.1  video和audio元素的方法   281
11.4.2  video和audio元素的事件   281
11.5  實(shí)訓(xùn)   282
11.5.1  任務(wù)分析   283
11.5.2  任務(wù)實(shí)現(xiàn)   284
11.6  本章小結(jié)   285
11.7  練習(xí)題   285
第12章  網(wǎng)頁設(shè)計(jì)基礎(chǔ)   287
12.1  網(wǎng)站的開發(fā)流程   287
12.1.1  需求分析   288
12.1.2  站點(diǎn)規(guī)劃   288
12.1.3  網(wǎng)站制作   289
12.1.4  測(cè)試發(fā)布   289
12.2  用HBulider創(chuàng)建Web項(xiàng)目   290
12.3  案例：制作愛德照明網(wǎng)站首頁   290
12.4  案例：制作公司新聞頁面   302
12.5  案例：制作聯(lián)系方式頁面   308
12.6  本章小結(jié)   310
12.7  練習(xí)題   310
參考文獻(xiàn)   312