HTML5網(wǎng)頁(yè)設(shè)計(jì)案例課堂（第2版）

目 錄
第Ⅰ篇 基 礎(chǔ) 入 門(mén)
第1章 新一代Web前端
技術(shù)HTML 5 3
1.1 HTML的基本概念 4
1.1.1 HTML的發(fā)展歷程 4
1.1.2 什么是HTML 4
1.1.3 HTML 5文件的基本結(jié)構(gòu) 5
1.2 HTML 5的優(yōu)勢(shì) 5
1.2.1 解決了跨瀏覽器問(wèn)題 5
1.2.2 新增了多個(gè)新特性 5
1.2.3 用戶(hù)優(yōu)先的原則 6
1.2.4 化繁為簡(jiǎn)的優(yōu)勢(shì) 7
1.3 HTML 5網(wǎng)頁(yè)的開(kāi)發(fā)環(huán)境 7
1.3.1 案例1——使用記事本手工
編寫(xiě)HTML 5 7
1.3.2 案例2——使用Dreamweaver CC
編寫(xiě)HTML文件 8
1.4 使用瀏覽器查看HTML 5文件 11
1.4.1 案例3——查看頁(yè)面效果 11
1.4.2 案例4——查看源文件 12
1.5 高手解惑 12
第2章 HTML 5網(wǎng)頁(yè)的文檔結(jié)構(gòu) 13
2.1 HTML 5文件的基本結(jié)構(gòu) 14
2.1.1 HTML 5頁(yè)面的整體結(jié)構(gòu) 14
2.1.2 HTML 5新增的結(jié)構(gòu)標(biāo)記 14
2.2 HTML 5基本標(biāo)記詳解 15
2.2.1 文檔類(lèi)型說(shuō)明 15
2.2.2 HTML標(biāo)記 15
2.2.3 頭標(biāo)記head 16
2.2.4 網(wǎng)頁(yè)的主體標(biāo)記body 18
2.2.5 頁(yè)面注釋標(biāo)記 19
2.3 HTML 5語(yǔ)法的變化 20
2.3.1 標(biāo)簽不再區(qū)分大小寫(xiě) 20
2.3.2 允許屬性值不使用引號(hào) 20
2.3.3 允許部分屬性值的屬性省略 20
2.4 必知必會(huì)——HTML 5代碼規(guī)范 21
2.5 綜合案例——符合W3C標(biāo)準(zhǔn)的
HTML 5網(wǎng)頁(yè) 22
2.6 跟我學(xué)上機(jī)——簡(jiǎn)單的HTML 5網(wǎng)頁(yè) 22
2.7 高手解惑 23
第3章 HTML 5與HTML 4 的區(qū)別 25
3.1　新增的主體結(jié)構(gòu)元素 26
3.1.1　案例1——section元素的使用 26
3.1.2　案例2——article元素的使用 26
3.1.3　案例3——aside元素的使用 29
3.1.4　案例4——nav元素的使用 31
3.1.5　案例5——time元素的使用 32
3.2　新增的非主體結(jié)構(gòu)元素 34
3.2.1　案例6——header元素的使用 34
3.2.2　案例7——hgroup元素的使用 34
3.2.3　案例8——footer元素的使用 36
3.2.4　案例9——figure元素的使用 37
3.2.5　案例10——address元素的使用 39
3.3　新增其他常用元素 40
3.3.1　案例11——mark元素的使用 40
3.3.2　案例12——rp元素、rt元素與
ruby元素的使用 41
3.3.3　案例13——progress元素的
使用 42
3.3.4　案例14——command元素的
使用 42
3.3.5　案例15——embed元素的
使用 43
3.3.6　案例16——details元素與
summary元素的使用 43
3.3.7　案例17——datalist元素的
使用 44
3.4　新增全局屬性 45
3.4.1　案例18——contentEditable
屬性的使用 45
3.4.2　案例19——spellcheck屬性的
使用 46
3.4.3　案例20——tabIndex屬性的
使用 46
3.5　新增的其他屬性 47
3.5.1　案例21——表單相關(guān)屬性的
使用 47
3.5.2　案例22——鏈接相關(guān)屬性的
使用 54
3.5.3　案例23——其他新增屬性的
使用 55
3.6　HTML 5廢除的屬性 56
3.7　高手解惑 57
第II篇 核 心 技 術(shù)
第4章 設(shè)計(jì)網(wǎng)頁(yè)文本內(nèi)容 61
4.1　標(biāo)題文字的建立 62
4.1.1　案例1——標(biāo)題文字標(biāo)記 62
4.1.2　案例2——標(biāo)題文字的
對(duì)齊方式 63
4.2　設(shè)置文字格式 63
4.2.1　案例3——設(shè)置文字字體 63
4.2.2　案例4——設(shè)置字號(hào) 64
4.2.3　案例5——設(shè)置文字顏色 66
4.2.4　案例6——設(shè)置粗體、斜體、
下畫(huà)線(xiàn) 67
4.2.5　案例7——設(shè)置上標(biāo)與下標(biāo) 68
4.2.6　案例8——設(shè)置字體風(fēng)格 68
4.2.7　案例9——設(shè)置加粗字體 69
4.2.8　案例10——設(shè)置字體
復(fù)合屬性 70
4.2.9　案例11——設(shè)置陰影文本 71
4.2.10　案例12——控制換行 72
4.3　設(shè)置段落格式 73
4.3.1　案例13——設(shè)置段落標(biāo)記 73
4.3.2　案例14——設(shè)置換行標(biāo)記 74
4.4　設(shè)置網(wǎng)頁(yè)水平線(xiàn) 75
4.4.1　案例15——添加水平線(xiàn) 75
4.4.2　案例16——設(shè)置水平線(xiàn)的
寬度與高度 75
4.4.3　案例17——設(shè)置水平線(xiàn)的顏色 76
4.4.4　案例18——設(shè)置水平線(xiàn)的
對(duì)齊方式 76
4.4.5　案例19——去掉水平線(xiàn)陰影 77
4.5　綜合案例——成才教育網(wǎng)文本設(shè)計(jì) 77
4.6　高手解惑 78
第5章 設(shè)計(jì)網(wǎng)頁(yè)列表與段落 79
5.1　網(wǎng)頁(yè)文字列表的設(shè)計(jì) 80
5.1.1　案例1——建立無(wú)序列表 80
5.1.2　案例2——建立有序列表 81
5.1.3　案例3——建立不同類(lèi)型的
無(wú)序列表 82
5.1.4　案例4——建立不同類(lèi)型的
有序列表 82
5.1.5　案例5——嵌套列表 83
5.1.6　案例6——自定義列表 83
5.2　網(wǎng)頁(yè)段落格式的設(shè)計(jì) 84
5.2.1　案例7——設(shè)計(jì)單詞間隔
word-spacing 84
5.2.2　案例8——設(shè)計(jì)字符間隔
letter-spacing 85
5.2.3　案例9——設(shè)計(jì)文字修飾
text-decoration 86
5.2.4　案例10——設(shè)計(jì)垂直
對(duì)齊方式vertical-align 87
5.2.5　案例11——設(shè)計(jì)文本轉(zhuǎn)換
text-transform 88
5.2.6　案例12——設(shè)計(jì)水平對(duì)齊
方式text-align 89
5.2.7　案例13——設(shè)計(jì)文本縮進(jìn)
text-indent 91
5.2.8　案例14——設(shè)計(jì)文本行高
line-height 92
5.2.9　案例15——處理空白
white-space 93
5.2.10　案例16——文本反排
unicode-bidi 94
5.3　綜合案例——制作圖文混排型
旅游網(wǎng)頁(yè) 96
5.4　高手解惑 97
第6章 HTML 5網(wǎng)頁(yè)中的圖像 99
6.1　網(wǎng)頁(yè)中的圖像 100
6.1.1　網(wǎng)頁(yè)中支持的圖片格式 100
6.1.2　圖像中的路徑 100
6.2　在網(wǎng)頁(yè)中插入圖像 102
6.2.1　案例1——插入圖像 102
6.2.2　案例2——從不同位置插入
圖像 103
6.3　編輯網(wǎng)頁(yè)中的圖像 103
6.3.1　案例3——設(shè)置圖像的
寬度和高度 104
6.3.2　案例4——設(shè)置圖像的
提示文字 104
6.3.3　案例5——將圖片設(shè)置為
網(wǎng)頁(yè)背景 105
6.3.4　案例6——排列圖像 106
6.4　綜合案例——圖文并茂的房屋裝飾
裝修網(wǎng)頁(yè) 107
6.5　高手解惑 108
第7章 使用HTML 5建立超鏈接 109
7.1　網(wǎng)頁(yè)超鏈接的概念 110
7.1.1　什么是網(wǎng)頁(yè)超鏈接 110
7.1.2　超鏈接中的URL 110
7.1.3　超鏈接的URL類(lèi)型 111
7.2　建立網(wǎng)頁(yè)超級(jí)鏈接 111
7.2.1　案例1——?jiǎng)?chuàng)建超文本鏈接 111
7.2.2　案例2——?jiǎng)?chuàng)建圖片鏈接 113
7.2.3　案例3——?jiǎng)?chuàng)建下載鏈接 114
7.2.4　案例4——使用相對(duì)路徑和
絕對(duì)路徑 115
7.2.5　案例5——設(shè)置以新窗口顯示
超鏈接頁(yè)面 115
7.2.6　案例6——設(shè)置電子郵件鏈接 116
7.3　案例7——浮動(dòng)框架iframe的使用 117
7.4　綜合案例——使用錨鏈接制作電子書(shū)
閱讀網(wǎng)頁(yè) 119
7.5 高手解惑 122
第8章 使用HTML 5 創(chuàng)建表單 123
8.1 案例1——認(rèn)識(shí)表單 124
8.2 表單基本元素的使用 124
8.2.1 案例2——單行文本輸入框
text 125
8.2.2 案例3——多行文本輸入框
textarea 125
8.2.3 案例4——密碼域password 126
8.2.4 案例5——單選按鈕radio 127
8.2.5 案例6——復(fù)選框checkbox 128
8.2.6 案例7——列表框select 128
8.2.7 案例8——普通按鈕button 129
8.2.8 案例9——提交按鈕submit 130
8.2.9 案例10——重置按鈕reset 131
8.3 表單高級(jí)元素的使用 132
8.3.1 案例11——url屬性的使用 132
8.3.2 案例12——email屬性的使用 132
8.3.3 案例13——date和time屬性的
使用 133
8.3.4 案例14——number屬性的
使用 134
8.3.5 案例15——range屬性的使用 135
8.3.6 案例16——required屬性的
使用 136
8.4 綜合案例——?jiǎng)?chuàng)建用戶(hù)反饋表單 137
8.5 跟我學(xué)上機(jī)——制作用戶(hù)注冊(cè)表單 138
8.6 高手解惑 139
第9章 使用HTML 5 創(chuàng)建表格 141
9.1 案例1——表格的基本結(jié)構(gòu) 142
9.2 創(chuàng)建表格 143
9.2.1 案例2——?jiǎng)?chuàng)建普通表格 143
9.2.2 案例3——?jiǎng)?chuàng)建一個(gè)帶有標(biāo)題的
表格 144
9.3 編輯表格 145
9.3.1 案例4——定義表格的
邊框類(lèi)型 145
9.3.2 案例5——定義表格的表頭 146
9.3.3 案例6——設(shè)置表格背景 147
9.3.4 案例7——設(shè)置單元格的背景 148
9.3.5 案例8——合并單元格 148
9.3.6 案例9——排列單元格中的
內(nèi)容 152
9.3.7 案例10——設(shè)置單元格的
行高與列寬 153
9.4 案例11——完整的表格標(biāo)記 153
9.5 綜合案例——制作計(jì)算機(jī)報(bào)價(jià)表 154
9.6 跟我學(xué)上機(jī)——制作學(xué)生成績(jī)表 157
9.7 高手解惑 160