內容簡介

本書以零基礎講解為宗旨，用實例引導讀者深入學習，采取【HTML 5網頁設計→CSS 3美化網頁→JavaScript動態特效→綜合案例實戰】的講解模式，深入淺出地講解CSS+DIV的各項技術及實戰技能。

本書第I篇主要內容包括初識HTML 5、HTML 5網頁的文檔結構、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篇主要內容包括JavaScript編程基本知識、JavaScript的程序控制結構與語句、JavaScript中的函數、JavaScript對象編程、JavaScript的內置對象、HTML 5、CSS 3和JavaScript的綜合應用等；第IV篇主要內容包括制作企業門戶類網頁、制作在線購物類網頁、移動設備類型網站開發。

 

本書適合任何想學習網頁前臺網頁設計與布局的人員，無論您是否從事計算機相關行業，是否接觸過HTML 5、CSS 3和JavaScript，通過學習均可快速掌握HTML 5+CSS 3+JavaScript的設計方法和技巧。

前    言

　　“網站開發案例課堂”系列圖書是專門為辦公技能和網頁設計初學者量身定制的一套學習用書。整套書涵蓋高效辦公、網站開發、數據庫設計等方面。整套書具有以下幾個特點。

前沿科技

　　無論是網站建設、數據庫設計還是HTML 5、CSS 3，我們都精選較為前沿或者用戶群最大的領域推進，幫助大家認識和了解最新動態。

權威的作者團隊

　　組織國家重點實驗室和資深應用專家聯手編著該套圖書，融合豐富的教學經驗與優秀的管理理念。

學習型案例設計

　　以技術的實際應用過程為主線，全程采用圖解和同步多媒體結合的教學方式，生動、直觀、全面地剖析使用過程中的各種應用技能，降低難度以提升學習效率。

為什么要寫這樣一本書

　　目前，HTML 5、CSS 3和JavaScript是網頁制作和設計的黃金搭檔。特別是HTML 5的出現，大大減輕了前端開發者的工作量，降低了開發成本。目前學習和關注的人越來越多，而很多網頁制作和設計的初學者都苦于找不到一本通俗易懂、容易入門和案例實用的參考書。通過本書的案例實訓，讀者可以很快地上手流行的工具，提高職業化能力，從而幫助解決公司與學生的雙重需求問題。

本書特色

零基礎、入門級的講解

　　無論您是否從事計算機相關行業，是否接觸過網頁制作和設計，都能從本書中找到最佳起點。

超多、實用、專業的范例和項目

　　本書在編排上緊密結合深入學習網頁制作技術的先后過程，從HTML 5的基本概念開始，帶領大家逐步深入地學習各種應用技巧，側重實戰技能，使用簡單易懂的實際案例進行分析和操作指導，讓讀者讀起來簡明輕松，操作起來有章可循。

隨時檢測自己的學習成果

　　每章首頁中，均提供了學習目標，以指導讀者重點學習及學后檢查。

　　大部分章最后的“跟我學上機”板塊，均根據本章內容精選而成，讀者可以隨時檢測自己的學習成果和實戰能力，做到融會貫通。

細致入微、貼心提示

　　本書在講解過程中，在各章中使用了“注意”“提示”“技巧”等小貼士，使讀者在學習過程中更清楚地了解相關操作、理解相關概念，并輕松掌握各種操作技巧。

專業創作團隊和技術支持

　　本書由千谷高新教育中心編著和提供技術支持。

　　您在學習過程中遇到任何問題，可加入QQ群(案例課堂VIP)——451102631進行提問，專家人員會在線答疑。

超值資源大放送

全程同步教學錄像

　　涵蓋本書所有知識點，詳細講解每個實例及項目的過程及技術關鍵點。比看書更輕松地掌握書中所有的網頁制作和設計知識，而且擴展的講解部分使您得到比書中更多的收獲。

超多容量王牌資源

　　贈送大量王牌資源，包括實例源代碼、教學幻燈片、本書精品教學視頻、88個實用類網頁模板、12部網頁開發必備參考手冊、HTML 5標簽速查手冊、精選的JavaScript實例、CSS 3屬性速查表、JavaScript函數速查手冊、CSS+DIV布局賞析案例、精彩網站配色方案賞析、網頁樣式與布局案例賞析、Web前端工程師常見面試題等。讀者可以通過QQ群(案例課堂VIP)——451102631獲取贈送資源，也可以掃描二維碼，下載本書資源。

讀者對象

沒有任何網頁設計基礎的初學者。

有一定的HTML 5和CSS 3基礎，想精通網頁制作和設計的人員。

有一定的HTML 5和CSS 3基礎，沒有項目經驗的人員。

正在進行畢業設計的學生。

大專院校及培訓學校的老師和學生。

創作團隊

　　本書由劉春茂編著，參加編寫的人員還有劉玉萍、張金偉、蒲娟、周佳、付紅、李園、郭廣新、侯永崗、王攀登、劉海松、孫若淞、王月嬌、包慧利、陳偉光、胡同夫、王偉、展娜娜、李琪、梁云梁和周浩浩。在編寫過程中，我們竭盡所能地將最好的講解呈現給讀者，但也難免有疏漏和不妥之處，敬請不吝指正。若您在學習中遇到困難或疑問，或有何建議，可寫信至信箱357975357@qq.com。

　　

　　                                                      編  者  

 

目    錄

第I篇  HTML 5網頁設計

 

第1章  初識HTML 5 3

1.1  HTML 5的基本概念 4

1.1.1  HTML的發展歷程 4

1.1.2  什么是HTML 5 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  疑難解惑 13

第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  頭標記head 18

2.2.4  網頁的主體標記body 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  換行標記<br> 32

3.2.2  段落標記<p> 32

3.2.3  標題標記<h1>~<h6> 33

3.3  文字列表 34

3.3.1  建立無序列表<ul> 34

3.3.2  建立有序列表<ol> 36

3.3.3  建立不同類型的無序列表 37

3.3.4  建立不同類型的有序列表 38

3.3.5  建立嵌套列表 38

3.3.6  自定義列表 39

3.4  網頁中的圖像<img> 40

3.4.1  在網頁中插入圖像 40

3.4.2  設置圖像的寬度和高度 42

3.4.3  設置圖像的提示文字 43

3.4.4  將圖片設置為網頁背景 44

3.4.5  排列圖像 45

3.5  綜合案例——圖文并茂的房屋裝飾裝修

網頁 45

3.6  跟我學上機——在線購物網站的產品

展示效果 47

3.7  疑難解惑 48

第4章  用HTML 5建立超鏈接 49

4.1  URL的概念 50

4.1.1  URL的格式 50

4.1.2  URL的類型 50

4.2  超鏈接標記<a> 51

4.2.1  設置文本和圖片的超鏈接 51

4.2.2  創建指向不同目標類型的

超鏈接 52

4.2.3  設置以新窗口顯示超鏈接

頁面 54

4.2.4  鏈接到同一頁面的不同位置 55

4.3  創建熱點區域 56

4.4  創建浮動框架 58

4.5  綜合案例——用Dreamweaver精確

定位熱點區域 59

4.6  跟我學上機——創建熱點區域 61

4.7  疑難解惑 62

第5章  用HTML 5創建表格 63

5.1  表格的基本結構 64

5.2  創建表格 65

5.2.1  創建普通表格 65

5.2.2  創建一個帶有標題的表格 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創建表單 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  綜合案例——創建用戶反饋表單 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  保存與恢復狀態 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  在網頁中添加音頻文件 138

8.2.1  添加自動播放的音頻文件 138

8.2.2  添加帶有控件的音頻文件 138

8.2.3  添加循環播放的音頻文件 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  在網頁中添加視頻文件 142

8.4.1  添加自動播放的視頻文件 142

8.4.2  添加帶有控件的視頻文件 143

8.4.3  添加循環播放的視頻文件 144

8.5  綜合案例——設置視頻文件的高度

與寬度 144

8.6  跟我學上機——添加預播放的視頻

文件 145

8.5  疑難解惑 146

 

　　

第II篇  CSS 3美化網頁

 

第9章  CSS 3概述與基本語法 149

9.1  CSS 3概述 150

9.1.1  CSS 3的功能 150

9.1.2  瀏覽器與CSS 3 150

9.1.3  CSS 3的基礎語法 151

9.1.4  CSS 3的常用單位 151

9.2  編輯和瀏覽CSS 3 156

9.2.1  手工編寫CSS 3 156

9.2.2  用Dreamweaver編寫CSS 157

9.3  在HTML 5中使用CSS 3的方法 158

9.3.1  行內樣式 158

9.3.2  內嵌樣式 159

9.3.3  鏈接樣式 161

9.3.4  導入樣式 162

9.3.5  優先級問題 163

9.4  CSS 3的常用選擇器 165

9.4.1  標簽選擇器 165

9.4.2  類選擇器 166

9.4.3  ID選擇器 167

9.4.4  全局選擇器 168

9.4.5  組合選擇器 169

9.4.6  繼承選擇器 170

9.4.7  偽類選擇器 171

9.5  選擇器聲明 172

9.5.1  集體聲明 172

9.5.2  多重嵌套聲明 173

9.6  綜合案例——制作炫彩網站Logo 174

9.7  跟我學上機——制作學生信息

統計表 176

9.8  疑難解惑 178

第10章  用CSS 3美化網頁字體

 與段落 179

10.1  美化網頁文字 180

10.1.1  設置文字的字體 180

10.1.2  設置文字的字號 181

10.1.3  設置字體風格 182

10.1.4  設置加粗字體 183

10.1.5  將小寫字母轉為大寫字母 184

10.1.6  設置字體的復合屬性 185

10.1.7  設置字體顏色 186

10.2  設置文本的高級樣式 187

10.2.1  設置文本陰影效果 187

10.2.2  設置文本的溢出效果 189

10.2.3  設置文本的控制換行 190

10.2.4  保持字體尺寸不變 191

10.3  美化網頁中的段落 192

10.3.1  設置單詞之間的間隔 192

10.3.2  設置字符之間的間隔 193

10.3.3  設置文字的修飾效果 194

10.3.4  設置垂直對齊方式 195

10.3.5  轉換文本的大小寫 196

10.3.6  設置文本的水平對齊方式 197

10.3.7  設置文本的縮進效果 199

10.3.8  設置文本的行高 199

10.3.9  文本的空白處理 200

10.3.10  文本的反排 202

10.4  綜合案例——設置網頁標題 203

10.5  跟我學上機——制作新聞頁面 204

10.6  疑難解惑 206

第11章  用CSS 3美化網頁圖片 207

11.1  圖片縮放 208

11.1.1  通過描述標記width和height

 縮放圖片 208

11.1.2  用CSS 3中的max-width和

 max-height縮放圖片 208

11.1.3  用CSS 3中的width和height

 縮放圖片 209

11.2  設置圖片的對齊方式 210

11.2.1  設置圖片的橫向對齊 210

11.2.2  設置圖片的縱向對齊 211

11.3  圖文混排 213

11.3.1  設置文字環繞效果 213

11.3.2  設置圖片與文字的間距 215

11.4  綜合案例——制作學校宣傳單 216

11.5  跟我學上機——制作簡單的圖文

 混排網頁 219

11.6  疑難解惑 220

第12章  用CSS 3美化網頁背景

 與邊框 221

12.1  用CSS 3美化背景 222

12.1.1  設置背景顏色 222

12.1.2  設置背景圖片 223

12.1.3  背景圖片重復 224

12.1.4  背景圖片顯示 226

12.1.5  背景圖片的位置 227

12.1.6  背景圖片的大小 229

12.1.7  背景的顯示區域 230

12.1.8  背景圖像的裁剪區域 231

12.1.9  背景復合屬性 232

12.2  用CSS 3美化邊框 234

12.2.1  設置邊框的樣式 234

12.2.2  設置邊框的顏色 235

12.2.3  設置邊框的線寬 237

12.2.4  設置邊框的復合屬性 238

12.3  設置邊框的圓角效果 239

12.3.1  設置圓角邊框 239

12.3.2  指定兩個圓角半徑 240

12.3.3  繪制4個不同角的圓角

 邊框 241

12.3.4  繪制不同種類的邊框 243

12.4  綜合案例——制作簡單的公司

 主頁 244

12.5  跟我學上機——制作簡單的生活資訊

 主頁 248

12.6  疑難解惑 249

第13章  用CSS 3美化超級鏈接

 和鼠標 251

13.1  用CSS 3來美化超鏈接 252

13.1.1  改變超級鏈接的基本樣式 252

13.1.2  設置帶有提示信息的超級

 鏈接 253

13.1.3  設置超級鏈接的背景圖 254

13.1.4  設置超級鏈接的按鈕效果 255

13.2  用CSS 3美化鼠標特效 256

13.2.1  用CSS 3控制鼠標箭頭 256

13.2.2  設置鼠標變幻式超鏈接 258

13.2.3  設置網頁頁面滾動條 259

13.3  綜合案例1——圖片版本的超級

 鏈接 261

13.4  綜合案例2——關于鼠標特效 263

13.5  跟我學上機——制作一個簡單的

 導航欄 265

13.6  疑難解惑 268

第14章  用CSS 3美化表格和表單的

 樣式 269

14.1  美化表格的樣式 270

14.1.1  設置表格邊框的樣式 270

14.1.2  設置表格邊框的寬度 272

14.1.3  設置表格邊框的顏色 273

14.2  美化表單樣式 274

14.2.1  美化表單中的元素 275

14.2.2  美化提交按鈕 277

14.2.3  美化下拉菜單 278

14.3  綜合案例——制作用戶登錄頁面 279

14.4  跟我學上機——制作用戶注冊頁面 281

14.5  疑難解惑 284

第15章  用CSS 3美化網頁菜單 285

15.1  用CSS 3美化項目列表 286

15.1.1  美化無序列表 286

15.1.2  美化有序列表 287

15.1.3  美化自定義列表 289

15.1.4  制作圖片列表 290

15.1.5  縮進圖片列表 292

15.1.6  列表的復合屬性 293

15.2  用CSS 3制作網頁菜單 294

15.2.1  制作無須表格的菜單 294

15.2.2  制作水平和垂直菜單 296

15.3  綜合案例——模擬soso導航欄 298

15.4  跟我學上機——將段落轉變成列表 301

15.5  疑難解惑 303

第16章  用濾鏡美化網頁元素 305

16.1  濾鏡概述 306

16.2  設置基本濾鏡效果