HTML5+CSS3網頁設計與製作案例課堂(第2版)（簡體書）

《HTML 5+CSS 3網頁設計與制作案例課堂(第2版)》以零基礎講解為宗旨，用實例引導讀者深入學習，采取“HTML 5網頁設計→CSS 3美化網頁→高級提升技能→綜合案例實戰”的講解模式，深入淺出地講解HTML 5+CSS 3的各項技術及實戰技能。
《HTML 5+CSS 3網頁設計與制作案例課堂(第2版)》第I篇“HTML 5網頁設計”主要內容包括新一代Web前端技術，HTML 5網頁的文檔結構，HTML 5網頁中的文本、超鏈接和圖像，使用HTML 5創建表格，使用HTML 5創建表單，HTML 5中的音頻和視頻，使用HTML 5繪制圖形等；第II篇“CSS 3美化網頁”主要內容包括CSS 3概述與基本語法，使用CSS 3美化網頁字體與段落，使用CSS 3美化網頁圖片，使用CSS 3美化網頁背景與邊框，使用CSS 3美化超級鏈接和鼠標，使用CSS 3美化表格和表單的樣式，使用CSS 3美化網頁菜單，使用濾鏡美化網頁元素等；第III篇“高級提升技能”主要內容包括CSS 3中的動畫效果，HTML 5中的文件與拖放，定位地理位置技術，Web存儲和通信技術，處理線程和服務器發送事件，CSS 3定位與DIV布局核心技術等；第IV篇“綜合案例實戰”主要內容包括網頁布局剖析與制作，設計企業門戶類網頁，設計在線購物類網頁。
《HTML 5+CSS 3網頁設計與制作案例課堂(第2版)》適合任何想學習前臺網頁設計與布局的人員，無論您是否從事計算機相關行業，無論您是否接觸過HTML 5和CSS 3，通過學習本書均可快速掌握網頁的設計方法和技巧。

劉春茂，本科畢業于上海復旦大學，碩士畢業于清華大學。曾在美國IBM公司移動產品開發組從事Android平臺應用的開發。
擅長的核心技術
媒體和教育領域個性化信息推薦，網站用戶行為數據挖掘，健康領域非結構化數據處理。
擅長的其他技術
熟悉各種網站和手機（Andorid和iOS）app的開發等，精通Java, C/C++, PHP, Python等流行語言并對Hadoop， MapReduce等大數據框架有深入研究。

目 錄
第I篇 HTML 5網頁設計

第1章 新一代Web前端技術 3
1.1 HTML的基本概念 4
1.1.1 HTML的發展歷程 4
1.1.2 什么是HTML 4
1.1.3 HTML 5文件的基本結構 5
1.2 HTML 5的優勢 5
1.2.1 解決了跨瀏覽器的問題 5
1.2.2 增加了多個新特性 5
1.2.3 用戶優先的原則 6
1.2.4 化繁為簡的優勢 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 疑難解惑 14
第2章 HTML 5網頁的文檔結構 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 頭標記 18
2.2.4 網頁的主體標記 20
2.2.5 頁面注釋標記 21
2.3 HTML 5語法的變化 22
2.3.1 標簽不再區分大小寫 22
2.3.2 允許屬性值不使用引號 22
2.3.3 允許部分屬性的屬性值省略 23
2.4 綜合案例——符合W3C標準的
HTML 5網頁 23
2.5 跟我學上機——簡單的HTML 5網頁 25
2.6 疑難解惑 26
第3章 HTML 5網頁中的文本、超鏈接
和圖像 27
3.1 在網頁中添加文本 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 建立不同類型的無序列表 36
3.3.4 建立不同類型的有序列表 37
3.3.5 建立嵌套列表 38
3.3.6 自定義列表 39
3.4 超鏈接標記 40
3.4.1 設置文本和圖片的超鏈接 40
3.4.2 創建指向不同目標類型的
超鏈接 40
3.4.3 設置以新窗口顯示超鏈接頁面 42
3.4.4 鏈接到同一頁面的不同位置 43
3.5 創建熱點區域 44
3.6 網頁中的圖片 45
3.6.1 在網頁中插入圖像 45
3.6.2 設置圖像的寬度和高度 47
3.6.3 設置圖像的提示文字 48
3.6.4 將圖片設置為網頁背景 49
3.6.5 排列圖像 50
3.7 綜合案例——圖文并茂的房屋裝飾
裝修網頁 50
3.8 跟我學上機——在線購物網站的產品
展示效果 52
3.9 疑難解惑 53
第4章 使用HTML 5創建表格 55
4.1 表格的基本結構 56
4.2 創建表格 57
4.2.1 創建普通表格 57
4.2.2 創建一個帶有標題的表格 58
4.3 編輯表格 59
4.3.1 定義表格的邊框類型 59
4.3.2 定義表格的表頭 59
4.3.3 設置表格背景 60
4.3.4 設置單元格的背景 61
4.3.5 合并單元格 62
4.3.6 排列單元格中的內容 65
4.3.7 設置單元格的行高與列寬 66
4.4 完整的表格標記 67
4.5 綜合案例——制作計算機報價表 68
4.6 跟我學上機——制作學生成績表 70
4.7 疑難解惑 74
第5章 使用HTML 5創建表單 75
5.1 表單概述 76
5.2 表單基本元素的使用 76
5.2.1 單行文本輸入框 77
5.2.2 多行文本輸入框 77
5.2.3 密碼輸入框 78
5.2.4 單選按鈕 78
5.2.5 復選框 79
5.2.6 列表框 80
5.2.7 普通按鈕 81
5.2.8 提交按鈕 81
5.2.9 重置按鈕 82
5.3 表單高級元素的使用 83
5.3.1 url屬性的使用 83
5.3.2 email屬性的使用 83
5.3.3 date屬性和time屬性的使用 84
5.3.4 number屬性的使用 85
5.3.5 range屬性的使用 86
5.3.6 required屬性的使用 86
5.4 綜合案例——創建用戶反饋表單 87
5.5 跟我學上機——制作用戶注冊表單 88
5.6 疑難解惑 90
第6章 HTML 5中的音頻和視頻 91
6.1 audio標簽 92
6.1.1 audio標簽概述 92
6.1.2 audio標簽的屬性 93
6.1.3 瀏覽器對audio標簽的支持
情況 93
6.2 在網頁中添加音頻文件 94
6.2.1 添加自動播放的音頻文件 94
6.2.2 添加帶有控件的音頻文件 94
6.2.3 添加循環播放的音頻文件 95
6.2.4 添加預播放的音頻文件 95
6.3 video標簽 96
6.3.1 video標簽概述 96
6.3.2 video標簽的屬性 97
6.3.3 瀏覽器對video標簽的支持
情況 98
6.4 在網頁中添加視頻文件 98
6.4.1 添加自動播放的視頻文件 98
6.4.2 添加帶有控件的視頻文件 99
6.4.3 添加循環播放的視頻文件 99
6.5 綜合案例——設置視頻文件的高度
與寬度 100
6.6 跟我學上機——添加預播放的視頻
文件 101
6.7 疑難解惑 101
第7章 使用HTML 5繪制圖形 103
7.1 添加canvas的步驟 104
7.2 繪制基本形狀 104
7.2.1 繪制矩形 105
7.2.2 繪制圓形 105
7.2.3 使用moveTo與lineTo繪制
直線 107
7.2.4 使用bezierCurveTo繪制
貝塞爾曲線 108
7.3 繪制漸變圖形 109
7.3.1 繪制線性漸變 109
7.3.2 繪制徑向漸變 111
7.4 繪制變形圖形 112
7.4.1 繪制平移效果的圖形 112
7.4.2 繪制縮放效果的圖形 113
7.4.3 繪制旋轉效果的圖形 114
7.4.4 繪制組合效果的圖形 115
7.4.5 繪制帶陰影的圖形 117
7.5 使用圖像 118
7.5.1 繪制圖像 118
7.5.2 平鋪圖像 119
7.5.3 裁剪圖像 121
7.5.4 圖像的像素化處理 122
7.6 繪制文字 124
7.7 圖形的保存與恢復 126
7.7.1 保存與恢復狀態 126
7.7.2 保存文件 127
7.8 綜合案例——繪制火柴棒人物 128
7.9 跟我學上機——繪制商標 132
7.10 疑難解惑 134


第II篇 CSS 3美化網頁

第8章 CSS 3概述與基本語法 137
8.1 CSS 3概述 138
8.1.1 CSS 3的功能 138
8.1.2 瀏覽器與CSS 3 138
8.1.3 CSS 3的基礎語法 139
8.1.4 CSS 3的常用單位 139
8.2 編輯和瀏覽CSS 3 144
8.2.1 手工編寫CSS 3 144
8.2.2 用Dreamweaver編寫CSS 145
8.3 在HTML 5中使用CSS 3的方法 147
8.3.1 行內樣式 147
8.3.2 內嵌樣式 148
8.3.3 鏈接樣式 149
8.3.4 導入樣式 150
8.3.5 優先級問題 151
8.4 CSS 3的常用選擇器 154
8.4.1 標簽選擇器 154
8.4.2 類選擇器 155
8.4.3 ID選擇器 155
8.4.4 全局選擇器 156
8.4.5 組合選擇器 157
8.4.6 繼承選擇器 158
8.4.7 偽類選擇器 159
8.5 選擇器聲明 160
8.5.1 集體聲明 160
8.5.2 多重嵌套聲明 161
8.6 綜合案例——制作炫彩網站Logo 161
8.7 跟我學上機——制作學生信息
統計表 164
8.8 疑難解惑 166
第9章 使用CSS 3美化網頁字體
與段落 167
9.1 美化網頁文字 168
9.1.1 設置文字的字體 168
9.1.2 設置文字的字號 169
9.1.3 設置字體風格 170
9.1.4 設置加粗字體 171
9.1.5 將小寫字母轉為大寫字母 171
9.1.6 設置字體的復合屬性 172
9.1.7 設置字體顏色 173
9.2 設置文本的高級樣式 174
9.2.1 設置文本陰影效果 174
9.2.2 設置文本的溢出效果 176
9.2.3 設置文本的控制換行 177
9.2.4 保持字體尺寸不變 177
9.3 美化網頁中的段落 178
9.3.1 設置單詞之間的間隔 179
9.3.2 設置字符之間的間隔 179
9.3.3 設置文字的修飾效果 180
9.3.4 設置垂直對齊方式 181
9.3.5 轉換文本的大小寫 183
9.3.6 設置文本的水平對齊方式 183
9.3.7 設置文本的縮進效果 185
9.3.8 設置文本的行高 186
9.3.9 文本的空白處理 187
9.3.10 文本的反排 188
9.4 綜合案例——設置網頁標題 189
9.5 跟我學上機——制作新聞頁面 191
9.6 疑難解惑 192

第7章 使用HTML 5繪制圖形

HTML 5有很多新特性，其中一個最值得提及的特性就是HTML canvas，它可以對2D圖形或位圖進行動態、腳本的渲染。使用canvas可以繪制一個矩形區域，然后使用JavaScript可以控制其每像素，例如可以用它來畫圖、合成圖像，或制作簡單的動畫。本章介紹如何使用HTML 5繪制圖形。

7.1 添加canvas的步驟
canvas標簽是一個矩形區域，它包含width和height兩個屬性，分別表示矩形區域的寬度和高度。這兩個屬性都是可選的，并且都可以通過CSS來定義，其默認值是300px和150px。
canvas在網頁中的常用形式如下：

　style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.


在上述示例代碼中，id表示畫布對象名稱，width和height分別表示寬度和高度。最初的畫布是不可見的，此處為了觀察這個矩形區域，使用了CSS樣式，即style標記。style表示畫布的樣式。如果瀏覽器不支持畫布標記，會顯示畫布中間的提示信息。
畫布canvas本身不具有繪制圖形的功能，它只是一個容器。如果讀者對于Java語言非常了解，就會發現HTML 5的畫布和Java中的Panel面板非常相似，都可以在容器中繪制圖形。既然canvas畫布元素放好了，就可以使用腳本語言JavaScript在網頁上繪制圖形了。
使用canvas結合JavaScript繪制圖形，一般情況下需要下面幾個步驟。
JavaScript使用id來尋找canvas元素，即獲取當前畫布對象：

var c = document.getElementById("myCanvas");

創建context對象：

var cxt = c.getContext("2d");

getContext方法返回一個指定contextId的上下文對象，如果指定的id不被支持，則返回null，當前唯一被強制必須支持的是“2d”，也許在將來會有“3d”。注意，指定的id是大小寫敏感的。對象cxt建立之后，就可以擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
繪制圖形：

cxt.fillStyle = "#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle方法將其染成紅色，fillRect方法規定了形狀、位置和尺寸。這兩行代碼可以繪制一個紅色的矩形。
7.2 繪制基本形狀
畫布canvas結合JavaScript可以繪制簡單的矩形，還可以繪制一些其他的常見圖形，如直線、圓等。