網頁設計與製作(HTML5+CSS3+JavaScript)（第4版）（微課版）

《網頁設計與製作（HTML5+CSS3+JavaScript）（第4版）（微課版）》是2020年7月人民郵電出版社出版的圖書，作者是趙豐年。

基本介紹

• 中文名：網頁設計與製作（HTML5+CSS3+JavaScript）（第4版）（微課版）
• 作者：趙豐年
• 出版社：人民郵電出版社
• 出版時間：2020年7月1日
• 頁數：283 頁
• 定價：59.8 元
• 開本：16 開
• 裝幀：平裝
• ISBN：9787115534859

內容簡介

本書系統全面地介紹了網頁製作和前端開發技術的基本理論和實際套用。全書共10章，邏輯上可分為三大部分。前5章為第1部分，主要介紹了網頁製作的基本理論——HTML 和CSS，同時介紹了Photoshop在網頁製作過程中的套用；第6章和第7章為第2部分，主要介紹了CSS技術的高級套用技巧和JavaScript編程，並對各種常見的前端開發技術進行了系統梳理；最後3章為第3部分，其中，第8章從心理學和設計理論視角介紹了如何進行網頁設計，第9章介紹了如何使用Dreamweaver 進行網站開發，第10章則從項目實踐的角度論述了如何設計和開發一個網站，使讀者能夠在具體套用中鞏固所學知識。

本書以實用為基本出發點，不僅包括各種網頁製作和前端開發技術的基礎理論，還強調了它們的具體套用，使讀者既能打下堅實的理論基礎，又能掌握實際的操作技能。本書絕大部分內容經過了長期的教學檢驗，證明是重點突出而詳略得當的。本書可作為各類本科院校、高等職業學校、成人高校和培訓班講授“網頁製作”和“前端開發”等課程的教材或參考書，也適合廣大愛好者或相關從業人員自學之用。

圖書目錄

第 1章 HTML5 基礎．．．．．．．．．．．．．．．．．．． 1

1．1　什麼是HTML ．．．．．．．．．．．．．．．．．．．．．．．1

1．1．1　網頁的基本概念．．．．．．．．．．．．．．．．．．．．．．．．　1

1．1．2　HTML 的工作原理．．．．．．．．．．．．．．．．．．．．　3

1．1．3　創建和測試網頁．．．．．．．．．．．．．．．．．．．．．．．．　5

1．1．4　網頁編輯工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．　6

1．2　創建網頁．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．7

1．2．1　標記符基礎．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　7

1．2．2　網頁的基本結構．．．．．．．．．．．．．．．．．．．．．．．．　8

1．2．3　在網頁中添加內容．．．．．．．．．．．．．．．．．．．　12

1．3　綜合實例：人物介紹網頁．．．．．．．．13

練習題　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．15

第　2章 文本格式與超連結．．．．．．．．．．．．　16

2．1　設定文本格式．．．．．．．．．．．．．．．．．．．．．．16

2．1．1　段落格式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　16

2．1．2　字型格式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　19

2．1．3　列表格式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　20

2．2　創建超連結．．．．．．．．．．．．．．．．．．．．．．．．．22

2．2．1　URL 概述．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　22

2．2．2　頁面連結．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　23

2．2．3　錨點連結．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　25

2．3　綜合實例：唐詩宋詞網站．．．．．．．．27

2．3．1　網站規劃．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　28

2．3．2　網頁設計．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　29

2．3．3　網頁製作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　30

練習題　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．33

第3章　CSS3 基礎．．．．．．．．．．．．．．．．．．．．　34

3．1　CSS 入門．．．．．．．．．．．．．．．．．．．．．．．．．．34

3．1．1　什麼是CSS ．．．．．．．．．．．．．．．．．．．．．．．．．．．．34

3．1．2　CSS 樣式定義．．．．．．．．．．．．．．．．．．．．．．．．．35

3．1．3　CSS 的屬性單位．．．．．．．．．．．．．．．．．．．．．36

3．2　在網頁中使用CSS ．．．．．．．．．．．．．．37

3．2．1　使用站點樣式．．．．．．．．．．．．．．．．．．．．．．．．．．37

3．2．2　使用網頁樣式．．．．．．．．．．．．．．．．．．．．．．．．．．39

3．2．3　使用行內樣式．．．．．．．．．．．．．．．．．．．．．．．．．．39

3．3　CSS3 基本選擇器．．．．．．．．．．．．．．．40

3．3．1　標記符選擇器．．．．．．．．．．．．．．．．．．．．．．．．．．40

3．3．2　類選擇器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．41

3．3．3　ID 選擇器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．41

3．3．4　偽類選擇器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．42

3．3．5　群組選擇器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．43

3．4　CSS3 基礎屬性．．．．．．．．．．．．．．．．．．43

3．4．1　顏色與背景屬性．．．．．．．．．．．．．．．．．．．．．．．43

3．4．2　字型屬性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．45

3．4．3　文本屬性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．47

3．5　綜合實例：電影欣賞網站．．．．．．．．48

3．5．1　網站規劃與設計．．．．．．．．．．．．．．．．．．．．．．．49

3．5．2　網頁製作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．50

練習題　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．53

第4章　圖像與多媒體．．．．．．．．．．．．．．．．．．　54

4．1　網頁圖像基礎．．．．．．．．．．．．．．．．．．．．．．54

4．1．1　點陣圖與矢量圖．．．．．．．．．．．．．．．．．．．．．．．．．．54

4．1．2　網頁圖像格式．．．．．．．．．．．．．．．．．．．．．．．．．．55

4．1．3　使用網頁圖像的要點．．．．．．．．．．．．．．．．56

4．2　圖像處理基本操作．．．．．．．．．．．．．．．．57

4．2．1　Photoshop 的界面．．．．．．．．．．．．．．．．．．57

4．2．2　修改圖像的大小．．．．．．．．．．．．．．．．．．．．．．．58

4．2．3　調整圖像的顏色．．．．．．．．．．．．．．．．．．．．．．．58

4．2．4　修補圖像與摳像．．．．．．．．．．．．．．．．．．．．．．　59

4．2．5　用適當的格式保存圖像．．．．．．．．．．．．．　61

4．3　圖像標記符img ．．．．．．．．．．．．．．．．．．．62

4．3．1　插入圖像．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　62

4．3．2　設定圖像屬性．．．．．．．．．．．．．．．．．．．．．．．．．．　63

4．4　使用多媒體對象．．．．．．．．．．．．．．．．．．．67

4．4．1　多媒體對象概述．．．．．．．．．．．．．．．．．．．．．．　67

4．4．2　插入多媒體對象．．．．．．．．．．．．．．．．．．．．．．　67

練習題　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．70

第5章　表格與表單．．．．．．．．．．．．．．．．．．．．．　72

5．1　創建表格．．．．．．．．．．．．．．．．．．．．．．．．．．．．72

5．1．1　表格的基本構成．．．．．．．．．．．．．．．．．．．．．．　72

5．1．2　合併單元格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　74

5．1．3　構造表格的步驟．．．．．．．．．．．．．．．．．．．．．．　74

5．2　表格的屬性設定．．．．．．．．．．．．．．．．．．．75

5．2．1　框線與分隔線．．．．．．．．．．．．．．．．．．．．．．．．．．　75

5．2．2　控制單元格空白．．．．．．．．．．．．．．．．．．．．．．　76

5．2．3　表格的對齊．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　78

5．3　創建表單．．．．．．．．．．．．．．．．．．．．．．．．．．．．80

5．3．1　什麼是表單．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　80

5．3．2　表單控制項的類型．．．．．．．．．．．．．．．．．．．．．．　82

5．3．3　form 標記符．．．．．．．．．．．．．．．．．．．．．．．．．．．．　82

5．4　創建表單控制項．．．．．．．．．．．．．．．．．．．．．．83

5．4．1　文本框與密碼框．．．．．．．．．．．．．．．．．．．．．．　83

5．4．2　複選框與單選框．．．．．．．．．．．．．．．．．．．．．．　84

5．4．3　按鈕．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　86

5．4．4　多行文本框．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　87

5．4．5　選項選單．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　88

5．5　綜合實例：表格與表單．．．．．．．．．．．89

5．5．1　複雜表格頁面．．．．．．．．．．．．．．．．．．．．．．．．．．　89

5．5．2　登錄註冊頁面．．．．．．．．．．．．．．．．．．．．．．．．．．　90

練習題　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．93

第6章　CSS3 進階．．．．．．．．．．．．．．．．．．．．　95

6．1　CSS3 高級選擇器．．．．．．．．．．．．．．．．95

6．1．1　後代選擇器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．95

6．1．2　子元素選擇器．．．．．．．．．．．．．．．．．．．．．．．．．．97

6．1．3　相鄰兄弟選擇器．．．．．．．．．．．．．．．．．．．．．．．97

6．1．4　屬性選擇器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．98

6．2　CSS3 布局．．．．．．．．．．．．．．．．．．．．．．．．99

6．2．1　CSS 盒模型．．．．．．．．．．．．．．．．．．．．．．．．．．．．99

6．2．2　CSS 定位概述．．．．．．．．．．．．．．．．．．．．．．．103

6．2．3　浮動定位．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．105

6．2．4　相對定位．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．107

6．2．5　絕對定位與固定定位．．．．．．．．．．．．．．．108

6．3　CSS3 高級屬性．．．．．．．．．．．．．．．．　111

6．3．1　分類屬性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．111

6．3．2　列表屬性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．113

6．3．3　特效屬性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．115

6．4　CSS3 樣式的優先權．．．．．．．．．．．　118

6．4．1　一般性規則．．．．．．．．．．．．．．．．．．．．．．．．．．．．118

6．4．2　樣式優先權的計算．．．．．．．．．．．．．．．．．．119

6．5　綜合實例：中華美食網站．．．．．．　122

6．5．1　網站規劃與設計．．．．．．．．．．．．．．．．．．．．．123

6．5．2　網頁製作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．124

練習題　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　130

第7章　JavaScript 與前端開發技術．．．．．．．．．．131

7．1　使用客戶端腳本．．．．．．．．．．．．．．．．．　131

7．1．1　使用script 標記符．．．．．．．．．．．．．．．．．131

7．1．2　直接添加腳本．．．．．．．．．．．．．．．．．．．．．．．．132

7．1．3　連結腳本檔案．．．．．．．．．．．．．．．．．．．．．．．．132

7．2　JavaScript 編程．．．．．．．．．．．．．．．　133

7．2．1　JavaScript 語言基礎．．．．．．．．．．．．．133

7．2．2　使用JavaScript 對象．．．．．．．．．．．．．139

7．2．3　使用瀏覽器對象．．．．．．．．．．．．．．．．．．．．．144

7．2．4　使用HTML DOM 對象．．．．．．．．．．147

7．3　前端開發技術．．．．．．．．．．．．．．．．．．．．　159

7．3．1　使用jQuery ．．．．．．．．．．．．．．．．．．．．．．．．．．159

7．3．2　使用Bootstrap．．．．．．．．．．．．．．．．．．．．．　164

7．3．3　使用Vue．js ．．．．．．．．．．．．．．．．．．．．．．．．．．　172

7．3．4　使用AngularJS ．．．．．．．．．．．．．．．．．．．　176

7．3．5　使用React．．．．．．．．．．．．．．．．．．．．．．．．．．．　179

練習題　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　180

第8章　網頁設計基礎．．．．．．．．．．．．．．．．　182

8．1　設計與認知．．．．．．．．．．．．．．．．．．．．．．．　182

8．1．1　格式塔理論概述．．．．．．．．．．．．．．．．．．．．　182

8．1．2　認知時的組織原則．．．．．．．．．．．．．．．．．　182

8．2　設計原則．．．．．．．．．．．．．．．．．．．．．．．．．．　185

8．2．1　緊湊原則．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　185

8．2．2　對齊原則．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　187

8．2．3　重複原則．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　189

8．2．4　對比原則．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　190

8．3　設計適於掃描的網頁．．．．．．．．．．．．　191

8．3．1　建立清楚的視覺層次．．．．．．．．．．．．．．　192

8．3．2　使用習慣用法．．．．．．．．．．．．．．．．．．．．．．．．　193

8．3．3　劃分明確的頁面區域．．．．．．．．．．．．．．　194

8．3．4　減輕視覺污染．．．．．．．．．．．．．．．．．．．．．．．．　194

8．4　設計導航．．．．．．．．．．．．．．．．．．．．．．．．．．　195

8．4．1　網頁導航慣例．．．．．．．．．．．．．．．．．．．．．．．．　195

8．4．2　全局導航．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　196

8．4．3　站點ID．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　197

8．4．4　導航條．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　198

8．4．5　實用工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　198

8．4．6　返回主頁．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　198

8．4．7　搜尋功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　199

8．4．8　頁面名稱．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　199

8．4．9　當前位置與麵包屑．．．．．．．．．．．．．．．．．　200

8．4．10　網站導航測試．．．．．．．．．．．．．．．．．．．．．．　202

8．5　設計版式．．．．．．．．．．．．．．．．．．．．．．．．．．202

8．5．1　頁面比例．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　202

8．5．2　網頁的分欄．．．．．．．．．．．．．．．．．．．．．．．．．．．　203

8．5．3　版面率．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　205

8．5．4　圖版面積．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　206

8．5．5　跳躍率．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　207

練習題　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　208

第9章　用Dreamweaver製作網頁．．．．．．．．．．．．　210

9．1　Dreamweaver 的界面．．．．．．．　210

9．2　使用本地站點．．．．．．．．．．．．．．．．．．．．　211

9．2．1　創建本地站點．．．．．．．．．．．．．．．．．．．．．．．．211

9．2．2　站點檔案操作．．．．．．．．．．．．．．．．．．．．．．．．213

9．3　編輯網頁．．．．．．．．．．．．．．．．．．．．．．．．．．　215

9．3．1　製作網頁的一般過程．．．．．．．．．．．．．．215

9．3．2　使用文本．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．217

9．3．3　使用超連結．．．．．．．．．．．．．．．．．．．．．．．．．．．．218

9．3．4　使用圖像．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．220

9．3．5　使用音頻與視頻．．．．．．．．．．．．．．．．．．．．．221

9．3．6　使用表格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．222

9．3．7　使用表單．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．225

9．4　使用CSS 樣式．．．．．．．．．．．．．．．．．　227

9．4．1　創建CSS 樣式表．．．．．．．．．．．．．．．．．．227

9．4．2　定義樣式規則．．．．．．．．．．．．．．．．．．．．．．．．229

9．4．3　套用樣式規則．．．．．．．．．．．．．．．．．．．．．．．．230

9．4．4　使用CSS 設計頁面布局．．．．．．．．．230

9．5　高級功能．．．．．．．．．．．．．．．．．．．．．．．．．．　232

9．5．1　快速代碼編寫．．．．．．．．．．．．．．．．．．．．．．．．232

9．5．2　回響式網頁設計．．．．．．．．．．．．．．．．．．．．．237

9．5．3　使用Bootstrap ．．．．．．．．．．．．．．．．．．．．．243

9．5．4　使用jQuery ．．．．．．．．．．．．．．．．．．．．．．．．．．248

練習題　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．249

第　10章 綜合項目實踐．．．．．．．．．．．．．．．．　251

10．1　網站開發的項目管理．．．．．．．．．．　251

10．1．1　網站開發流程．．．．．．．．．．．．．．．．．．．．．．251

10．1．2　網站開發團隊．．．．．．．．．．．．．．．．．．．．．．253

10．1．3　網站策劃書．．．．．．．．．．．．．．．．．．．．．．．．．．254

10．2　“遊戲天地”網站規劃．．．．．．．．256

10．2．1　網站目標．．．．．．．．．．．．．．．．．．．．．．．．．．．．　256

10．2．2　站點風格與技術因素．．．．．．．．．．．．　256

10．2．3　信息架構．．．．．．．．．．．．．．．．．．．．．．．．．．．．　257

10．3　“遊戲天地”網站設計．．．．．．．257

10．3．1　導航設計．．．．．．．．．．．．．．．．．．．．．．．．．．．．　258

10．3．2　頁面設計．．．．．．．．．．．．．．．．．．．．．．．．．．．．　259

10．4　“遊戲天地”網站實現．．．．．．．　261

10．4．1　實現流程．．．．．．．．．．．．．．．．．．．．．．．．．．．．　261

10．4．2　網頁基本結構的實現．．．．．．．．．．．．　262

10．4．3　典型頁面的實現．．．．．．．．．．．．．．．．．．　265

練習題　．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．276

附錄1　HTML 和CSS 顏色表．．．　278

附錄2　HTML5 快速參考．．．．．．．．．．　280

附錄3　CSS3 快速參考．．．．．．．．．．．．　283

作者簡介

趙豐年，北京理工大學“我愛我師”評選十佳教師，軟體學院“我最喜愛的教師”，北京理工大學“T-more優秀教師獎”一等獎，負責***精品課程2門，***教優秀學團隊成員，主編北京市精品教材3部，***規劃教材4部，研究方向：數字媒體技術、教育技術、遊戲化（gamification）。成果：發表學術論文和教改論文多篇，獲得***和省部級教學獎多項。