HTML5+CSS3 網(wǎng)頁(yè)制作基礎(chǔ)培訓(xùn)教程

第 1章 HTML5入門基礎(chǔ)\t11
1．1　認(rèn)識(shí)HTML5　12
1．2　HTML5與HTML4的區(qū)別　13
1．2．1　HTML5的語法變化　13
1．2．2　HTML5中的標(biāo)簽方法　13
1．2．3　HTML5語法中的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)語義元素　19
1．3．4　新增的嵌入多媒體元素與交互性元素　22
1．3．5　新增的input元素的類型　23
1．3．6　廢除的元素　24
1．3．7　課堂練習(xí)——使用記事本手工編寫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è)語言　41
3．3．2　定義頁(yè)面關(guān)鍵字　41
3．3．3　設(shè)置頁(yè)面說明　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í)——用腳本控制音樂播放　105
6．5　課后習(xí)題　107
第7章　HTML5畫布canvas與SVG　108
7．1　使用畫布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)畫　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)畫　135
7．4．2　SVG概述　136
7．4．3　繪制圖形　136
7．4．4　文本與圖像　139
7．4．5　筆畫與填充　140
7．4．6　課堂練習(xí)——繪制精美時(shí)鐘　141
7．5　課后習(xí)題　144
第8章　CSS語言基礎(chǔ)　145
8．1　CSS入門　146
8．1．1　認(rèn)識(shí)CSS　146
8．1．2　CSS的基本語法　146
8．2　基本CSS選擇器　147
8．2．1　標(biāo)簽選擇器　147
8．2．2　類選擇器　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　小寫字母轉(zhuǎn)為大寫字母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)布局的新問題　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)站分類　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