HTML5網頁設計與製作案例教程（簡體書）

《HTML 5網頁設計與製作案例教程》是為適應中等職業學校培養計算機應用及軟件技術領域技能緊缺人才的需要而編寫的。《HTML 5網頁設計與製作案例教程》從淺到深逐步講解，通過語法、示例、案例的逐層遞進方式闡釋HTML 5 的新特性。通過精彩案例，綜合應用多種HTML 5 技術，從而實現“知識是基礎，能力是目標”，且部分案例給出視頻講解。
《HTML 5網頁設計與製作案例教程》適合所有想全面和深入學習HTML 5 開發技術的人員閱讀；對於大中專院校相關專業的學生和培訓機構的學員，本書也是一本不可多得的參考書。

目 錄


第1章 教育培訓類網頁――設計網頁文本內容 1
視頻講解：4個
1.1 標題與文字格式 2
1.1.1 設置文字標題及字體樣式 2
1.1.2 設置文字的屬性 3
1.1.3 設置文字的顏色 4
1.1.4 設置文字的陰影 4
1.1.5 設置字體複合屬性 5
1.1.6 控制換行 5
1.1.7 塊元素及行元素 5
1.1.8 製作G-Team教育培訓類
網頁(一) 6
1.2 設置段落與網頁水平線 9
1.2.1 段落標簽 9
1.2.2 段落內容排版 10
1.2.3 使用
標簽添加水平線 13
1.2.4 使用CSS樣式添加水平線 13
1.2.5 設置水平線樣式 14
1.2.6 製作G-Team教育培訓類
網頁(二) 15
1.3 網頁文字列表設計 18
1.3.1 無序列表 18
1.3.2 有序列表 18
1.3.3 建立不同的無序列表 19
1.3.4 建立不同的有序列表 19
1.3.5 嵌套列表 19
1.3.6 自定義列表 20
1.3.7 製作G-Team教育培訓類
網頁（三） 20
1.4 上機練習――製作G-Team簡介網頁 22
1.5 思考與練習 26


第2章 企業門戶類網頁―HTML 5網頁中的圖像 27
視頻講解：3個
2.1 在網頁中插入圖像 28
2.1.1 圖像基礎 28
2.1.2 標簽簡介 29
2.1.3 CSS引入方式 30
2.1.4 標簽的適用範圍 31
2.1.5 路徑問題 31
2.1.6 製作房地產網頁 32
2.2 將圖片設置為網頁背景 35
2.2.1 標簽 35
2.2.2 製作裝飾公司網頁（一） 35
2.3 上機練習――製作裝飾公司
網頁（二） 37
2.4 思考與練習 41


第3章 孕嬰類網頁―使用HTML5創建超鏈接 42
視頻講解：3個
3.1 建立網頁超鏈接 43
3.1.1 認識超鏈接 43
3.1.2 創建超鏈接 43
3.1.3 創建圖片鏈接 44
3.1.4 圖片熱點鏈接 44
3.1.5 創建下載鏈接 46
3.1.6 創建錨點鏈接 46
3.1.7 相對路徑和絕對路徑 48
3.1.8 設置以新窗口顯示超鏈接頁面 48
3.1.9 設置電子郵件鏈接 49
3.1.10 製作母嬰商城網頁（一） 50
3.2 浮動框架iframe 53
3.2.1 浮動框架iframe的使用 53
3.2.2 width屬性和height屬性 54
3.2.3 align屬性 54
3.2.4 frameborder屬性 55
3.2.5 name屬性 56
3.2.6 scrolling屬性 56
3.2.7 marginwidth和marginheight
屬性 56
3.2.8 製作母嬰商城網頁（二） 57
3.3 上機練習―製作育兒類網頁 58
3.4 思考與練習 64


第4章 旅遊交通類網頁――使用HTML 5創建表單與 表格 65
視頻講解：4個
4.1 表單的使用 66
4.1.1 定義表單 66
4.1.2 文本框 66
4.1.3 文本區域 67
4.1.4 單選按鈕 67
4.1.5 複選框 68
4.1.6 下拉列表框 68
4.1.7 按鈕 68
4.1.8 新的input類型 69
4.1.9 旅遊網站登錄界面 71
4.2 創建表格 74
4.2.1 定義表格 74
4.2.2 帶有標題的表格 75
4.2.3 製作旅遊網頁（一） 75
4.3 表格的設置 77
4.3.1 定義表格邊框類型 77
4.3.2 定義表格的表頭 78
4.3.3 定義表格的背景 79
4.3.4 設置單元格的背景 80
4.3.5 合並單元格 80
4.3.6 排列單元格中的內容 81
4.3.7 設置單元格的行高與列寬 82
4.3.8 製作旅遊網頁（二） 82
4.4 上機練習――製作愛旅遊論壇網頁 84
4.5 思考與練習 87


第5章 音視頻類網頁――HTML 5中的多媒體 88
視頻講解：3個
5.1 音視頻的添加與設置 89
5.1.1 設置背景音樂 89
5.1.2 設置背景音樂循環播放 89
5.1.3 為網頁添加視頻文件 90
5.1.4 設置自動運行 90
5.1.5 設置視頻文件的循環播放 91
5.1.6 設置視頻文件窗口的高度與
寬度 91
5.1.7 Bootstrap4 網格系統 92
5.1.8 Bootstrap4 輪播圖 92
5.1.9 Bootstrap4 卡片 93
5.1.10 Bootstrap4 彈性盒子 94
5.1.11 Bootstrap4 多媒體對象 95
5.1.12 CSS選擇器 97
5.1.13 製作多媒體首頁 99
5.2 網頁中的滾動文字 107
5.2.1 滾動文字標簽的使用 107
5.2.2 滾動方向屬性的應用 107
5.2.3 滾動方式屬性的應用 107
5.2.4 滾動速度屬性的應用 108
5.2.5 滾動延遲屬性的應用 108
5.2.6 滾動循環屬性的應用 108
5.2.7 滾動範圍屬性的應用 108
5.2.8 滾動背景顏色屬性的應用 108
5.2.9 滾動空間屬性的應用 109
5.2.10 Bootstrap4顏色 109
5.2.11 製作視頻播放網頁 110
5.3 上機練習――製作音頻播放網頁 115
5.4 思考與練習 118


第６章 企業門戶類網頁――使用JavaScript完善網頁 效果 119
視頻講解：2個
6.1 JavaScript基礎 120
6.1.1 直接嵌入.js文件 120
6.1.2 外部引入.js文件 120
6.2 使用JavaScript 120
6.2.1 數據類型 120
6.2.2 變量 120
6.2.3 注釋、表達式與運算符 121
6.2.4 常用語句 123
6.2.5 函數 125
6.2.6 面向對象程序設計 127
6.2.7 事件 132
6.2.8 育嬰網首頁 137
6.3 上機練習――G-Team培訓網站首頁 142
6.4 思考與練習 149


第7章 餐飲美食類網頁――使用HTML 5繪製圖形 150
視頻講解：3個
7.1 使用HTML 5繪製圖形 151
7.1.1 繪製基本形狀 151
7.1.2 繪製漸變形狀 152
7.1.3 繪製變形圖形 153
7.1.4 繪製其他樣式的圖形 155
7.1.5 製作必勝客網頁 159
7.2 圖形的保存與恢復 164
7.2.1 保存與恢復狀態 164
7.2.2 保存文件 166
7.2.3 製作餐廳網頁 167
7.3 上機練習――製作餐廳首頁 172
7.4 思考與練習 176


第8章 電子商務類網頁――HTML 5中的文件與拖放 177
視頻講解：3個
8.1 選擇文件 178
8.1.1 選擇單個文件 178
8.1.2 選擇多個文件 178
8.1.3 製作建站服務商城網頁 178
8.2 使用HTML 5實現文件的拖放 183
8.2.1 認識文件拖放的過程 183
8.2.2 瀏覽器支持情況 183
8.2.3 在網頁中拖放圖片 183
8.2.4 在網頁中拖放文字 186
8.2.5 製作產品介紹界面 186
8.3 上機練習―製作銷售後臺
管理系統 191
8.4 思考與練習 197
附錄.參考答案 198