HTML5+CSS3+JavaScript網(wǎng)頁設計案例課堂（第2版）

目 錄
第I篇 HTML 5網(wǎng)頁設計
第1章 初識HTML 5 3
1.1 HTML 5的基本概念 4
1.1.1 HTML的發(fā)展歷程 4
1.1.2 什么是HTML 5 4
1.1.3 HTML 5文件的基本結構 5
1.2 HTML 5的優(yōu)勢 5
1.2.1 解決了跨瀏覽器問題 5
1.2.2 新增了多個新特性 5
1.2.3 用戶優(yōu)先的原則 6
1.2.4 化繁為簡的優(yōu)勢 7
1.3 HTML 5文件的編寫方法 7
1.3.1 使用記事本手工編寫HTML 5 7
1.3.2 使用Dreamweaver CC編寫
HTML文件 8
1.4 使用瀏覽器查看HTML 5文件 12
1.4.1 查看頁面效果 12
1.4.2 查看源文件 13
1.5 疑難解惑 13
第2章 HTML 5網(wǎng)頁的文檔結構 15
2.1 HTML 5文件的基本結構 16
2.1.1 HTML 5頁面的整體結構 16
2.1.2 HTML 5新增的結構標記 16
2.2 HTML 5基本標記詳解 17
2.2.1 文檔類型說明 17
2.2.2 HTML標記 17
2.2.3 頭標記head 18
2.2.4 網(wǎng)頁的主體標記body 20
2.2.5 頁面注釋標記 21
2.3 HTML 5語法的變化 22
2.3.1 標簽不再區(qū)分大小寫 22
2.3.2 允許屬性值不使用引號 22
2.3.3 允許部分屬性的屬性值省略 23
2.4 綜合案例——符合W3C標準的
HTML 5網(wǎng)頁 23
2.5 跟我學上機——簡單的HTML 5
網(wǎng)頁 25
2.6 疑難解惑 26
第3章 HTML 5網(wǎng)頁中的文本和圖像 27
3.1 在網(wǎng)頁中添加文本 28
3.1.1 普通文本的添加 28
3.1.2 特殊字符文本的添加 28
3.1.3 使用HTML 5標記添加特殊
文本 30
3.2 文本排版 32
3.2.1 換行標記
32
3.2.2 段落標記 32
3.2.3 標題標記~ 33
3.3 文字列表 34
3.3.1 建立無序列表 34
3.3.2 建立有序列表 36
3.3.3 建立不同類型的無序列表 37
3.3.4 建立不同類型的有序列表 38
3.3.5 建立嵌套列表 38
3.3.6 自定義列表 39
3.4 網(wǎng)頁中的圖像 40
3.4.1 在網(wǎng)頁中插入圖像 40
3.4.2 設置圖像的寬度和高度 42
3.4.3 設置圖像的提示文字 43
3.4.4 將圖片設置為網(wǎng)頁背景 44
3.4.5 排列圖像 45
3.5 綜合案例——圖文并茂的房屋裝飾裝修
網(wǎng)頁 45
3.6 跟我學上機——在線購物網(wǎng)站的產(chǎn)品
展示效果 47
3.7 疑難解惑 48
第4章 用HTML 5建立超鏈接 49
4.1 URL的概念 50
4.1.1 URL的格式 50
4.1.2 URL的類型 50
4.2 超鏈接標記 51
4.2.1 設置文本和圖片的超鏈接 51
4.2.2 創(chuàng)建指向不同目標類型的
超鏈接 52
4.2.3 設置以新窗口顯示超鏈接
頁面 54
4.2.4 鏈接到同一頁面的不同位置 55
4.3 創(chuàng)建熱點區(qū)域 56
4.4 創(chuàng)建浮動框架 58
4.5 綜合案例——用Dreamweaver精確
定位熱點區(qū)域 59
4.6 跟我學上機——創(chuàng)建熱點區(qū)域 61
4.7 疑難解惑 62
第5章 用HTML 5創(chuàng)建表格 63
5.1 表格的基本結構 64
5.2 創(chuàng)建表格 65
5.2.1 創(chuàng)建普通表格 65
5.2.2 創(chuàng)建一個帶有標題的表格 66
5.3 編輯表格 67
5.3.1 定義表格的邊框類型 67
5.3.2 定義表格的表頭 68
5.3.3 設置表格背景 69
5.3.4 設置單元格的背景 71
5.3.5 合并單元格 72
5.3.6 排列單元格中的內容 76
5.3.7 設置單元格的行高與列寬 77
5.4 完整的表格標記 78
5.5 綜合案例——制作計算機報價表 79
5.6 跟我學上機——制作學生成績表 82
5.7 疑難解惑 85
第6章 用HTML 5創(chuàng)建表單 87
6.1 表單概述 88
6.2 表單基本元素的使用 88
6.2.1 單行文本輸入框 89
6.2.2 多行文本輸入框 89
6.2.3 密碼輸入框 90
6.2.4 單選按鈕 91
6.2.5 復選框 92
6.2.6 列表框 92
6.2.7 普通按鈕 93
6.2.8 提交按鈕 94
6.2.9 重置按鈕 95
6.3 表單高級元素的使用 96
6.3.1 url屬性的使用 96
6.3.2 email屬性的使用 97
6.3.3 date和time屬性的使用 97
6.3.4 number屬性的使用 98
6.3.5 range屬性的使用 99
6.3.6 required屬性的使用 100
6.4 綜合案例——創(chuàng)建用戶反饋表單 101
6.5 跟我學上機——制作用戶注冊表單 102
6.6 疑難解惑 103
第7章 用HTML 5繪制圖形 105
7.1 添加canvas的步驟 106
7.2 繪制基本形狀 106
7.2.1 繪制矩形 107
7.2.2 繪制圓形 108
7.2.3 使用moveTo與lineTo繪制
直線 108
7.2.4 使用bezierCurveTo繪制貝塞爾
曲線 109
7.3 繪制漸變圖形 111
7.3.1 繪制線性漸變 111
7.3.2 繪制徑向漸變 112
7.4 繪制變形圖形 114
7.4.1 繪制平移效果的圖形 114
7.4.2 繪制縮放效果的圖形 115
7.4.3 繪制旋轉效果的圖形 116
7.4.4 繪制組合圖形 117
7.4.5 繪制帶陰影的圖形 119
7.5 使用圖像 120
7.5.1 繪制圖像 120
7.5.2 平鋪圖像 121
7.5.3 裁剪圖像 122
7.5.4 圖像的像素化處理 124
7.6 繪制文字 126
7.7 圖形的保存與恢復 127
7.7.1 保存與恢復狀態(tài) 127
7.7.2 保存圖形 129
7.8 綜合案例——繪制火柴棒人物 130
7.9 跟我學上機——繪制商標 132
7.10 疑難解惑 134
第8章 HTML 5中的音頻和視頻 135
8.1 audio標簽概述 136
8.1.1 audio標簽概述 136
8.1.2 audio標簽的屬性 137
8.1.3 瀏覽器對audio標簽的支持
情況 137
8.2 在網(wǎng)頁中添加音頻文件 138
8.2.1 添加自動播放的音頻文件 138
8.2.2 添加帶有控件的音頻文件 138
8.2.3 添加循環(huán)播放的音頻文件 139
8.2.4 添加預播放的音頻文件 139
8.3 video標簽概述 140
8.3.1 video標簽概述 140
8.3.2 video標簽的屬性 141
8.3.3 瀏覽器對video標簽的支持
情況 142
8.4 在網(wǎng)頁中添加視頻文件 142
8.4.1 添加自動播放的視頻文件 142
8.4.2 添加帶有控件的視頻文件 143
8.4.3 添加循環(huán)播放的視頻文件 144
8.5 綜合案例——設置視頻文件的高度
與寬度 144
8.6 跟我學上機——添加預播放的視頻
文件 145
8.5 疑難解惑 146
　　
第II篇 CSS 3美化網(wǎng)頁