HTML5+CSS3網頁設計與製作案例教程

《HTML5+CSS3網頁設計與製作案例教程》是於2017年1月清華大學出版社出版的一本圖書，作者是姬莉霞、李學相、韓穎、劉成明。

基本介紹

• 中文名：HTML5+CSS3網頁設計與製作案例教程
• 作者：姬莉霞、李學相、韓穎、劉成明
• 出版社：清華大學出版社 
• 出版時間：2017年1月 
• 頁數：513 頁
• 裝幀：平裝
• ISBN：9787302459699 

前言

HTML5+CSS3以其標準布局和精美樣式，實現了網頁內容和樣式的分離，使網頁樣式布局和美化達到了一個不可思議的高度，成為Web標準中不可替代的技術規範。本書以知識點示例、章節綜合案例、全書綜合案例和實驗手冊等形式，全面涵蓋網頁設計的基礎知識、HTML5和CSS3技術、DIV+CSS網頁布局技術等。

本書主要內容如下：第1章多方位講解網頁設計的基本知識和技能；第2～7章深入淺出地講解HTML5的語法和標記；第8～13章以案例為載體，分模組講述CSS3對網頁元素的控制和美化；第14章通過大量案例講述“內容”與“樣式”分離的網頁設計方式，主要介紹DIV+CSS布局方式；第15～16章以綜合案例引領讀者掌握頁面及網站的設計和實現。

圖書簡介

Web標準是所有網頁前端技術的規範和發展方向，本書學習的HTML5和CSS3是Web標準的主要組成部分，闡述了內容和樣式分離的網頁設計精髓。

全書共16章，從初學者的角度出發，以知識點示例、章節綜合案例、全書綜合案例和實驗手冊等形式，全面涵蓋網頁設計的基礎知識、HTML5和CSS3技術、DIV+CSS網頁布局技術等。講解過程由淺入深、循序漸進，力求通過實例操作讓讀者快速掌握網頁設計的方法和技巧。

本書附帶1張光碟，其中包含書中所有實例的源檔案以及教學用課件，以方便讀者學習和參考。

本書既適合作為大中專院校和培訓學校計算機相關專業學生的教材，也適合作為網頁設計製作人員及愛好者的參考用書。

圖書目錄

第1章網頁設計基礎知識1

1.1　網頁相關知識簡介2

1.1.1網際網路(internet)、網際網路

(Internet)、全球資訊網(WWW)2

1.1.2網站和網頁2

1.1.3網頁與HTML3

1.1.4靜態網頁和動態網頁4

1.1.5IP位址、域名和URL5

1.1.6HTTP和FTP6

1.1.7瀏覽器6

1.2　網頁的基本元素6

1.2.1網頁的基本媒體元素6

1.2.2網頁的基本布局元素8

1.3　網頁設計常用技術10

1.3.1網頁標記語言HTML10

1.3.2網頁表現技術CSS10

1.3.3網頁腳本語言JavaScript11

1.3.4動態網頁編程技術ASP.NET、

JSP、PHP等11

1.4　網頁設計常用工具11

1.4.1基於文本的編輯器12

1.4.2所見即所得編輯器13

1.4.3如何選擇工具13

1.5　習題14

1.5.1單選題14

1.5.2填空題14

1.5.3判斷題14

1.5.4簡答題15

第2章HTML5基礎17

2.1　認識HTML518

2.1.1HTML及其發展18

2.1.2HTML5的新特性18

2.1.3編寫第一個HTML5檔案19

2.2　HTML基本語法20

2.2.1標記與元素20

2.2.2HTML屬性22

2.2.3全局屬性22

2.3　HTML5文檔的結構25

2.3.1HTML5文檔的基本結構25

2.3.2網頁標題25

2.3.3定義元數據26

2.3.4HTML5新增的結構標記29

2.4　綜合案例——基本的HTML5

網頁30

2.5　習題32

2.5.1填空題32

2.5.2判斷題32

2.5.3簡答題32

第3章文字與段落33

3.1基本的文字排版34

3.1.1段落34

3.1.2控制換行35

3.1.3預先格式化37

3.1.4水平線38

3.1.5標題文字40

3.2描述文本的語義化、結構化元素41

3.2.1強調文本41

3.2.2作品標題43

3.2.3小型文本44

3.2.4標記文本改變45

3.2.5文字上下標46

3.2.6旁註47

3.2.7日期時間48

3.2.8其他語義化、結構化元素49

3.3塊級元素與行內元素49

3.4無語義的容器元素51

3.4.1元素51

3.4.2元素53

3.5使用字元實體表示特殊字元54

3.6添加注釋55

3.7列表56

3.7.1無序列表56

3.7.2有序列表58

3.7.3描述列表60

3.7.4列表嵌套62

3.8綜合實例——簡單文字網頁63

3.9習題66

3.9.1單選題66

3.9.2填空題67

3.9.3判斷題67

3.9.4簡答題67

第4章HTML5中的圖像、音頻和

視頻69

4.1檔案路徑70

4.1.1絕對路徑70

4.1.2相對路徑70

4.2在頁面中插入圖像71

4.2.1網頁圖像的格式71

4.2.2插入圖像72

4.3在網頁中插入視頻74

4.3.1視頻格式74

4.3.2插入視頻74

4.4在網頁中插入音頻76

4.4.1音頻格式76

4.4.2插入音頻格式77

4.5使用多種來源的多媒體和備用文本78

4.6插入多媒體檔案78

4.7定義媒介分組和標題80

4.8綜合實例——多媒體頁面的設計82

4.9習題84

4.9.1單選題84

4.9.2填空題84

4.9.3判斷題85

4.9.4簡答題85

第5章超連結87

5.1超連結概述88

5.2基本連結88

5.2.1外部連結88

5.2.2內部連結90

5.2.3標記的屬性91

5.2.4超連結的目標類型95

5.2.5Email連結97

5.3錨記(書籤)連結97

5.4設定圖像映射101

5.5內聯框架及其連結104

5.5.1內聯框架104

5.5.2內聯框架相關的連結105

5.6定義基準地址107

5.7綜合實例——設定超連結108

5.8　習題112

5.8.1單選題112

5.8.2填空題113

5.8.3判斷題113

5.8.4簡答題113

第6章表格115

6.1表格簡介116

6.2創建表格116

6.2.1表格基本結構117

6.2.2表格框線顯示119

6.2.3帶圖像的單元格121

6.3合併單元格122

6.3.1設定跨列colspan122

6.3.2設定跨行rowspan124

6.4表格嵌套126

6.5表格的按行分組顯示127

6.6綜合實例——表格套用129

6.7習題131

6.7.1單選題131

6.7.2填空題131

6.7.3判斷題132

6.7.4簡答題132

第7章表單133

7.1表單概述134

7.2建立表單135

7.3表單基本元素135

7.3.1標記136

7.3.2多行文字框143

7.3.3列表144

7.4新增表單高級元素146

7.4.1url類型147

7.4.2email類型148

7.4.3日期和時間149

7.4.4數字類型150

7.4.5color類型151

7.4.6fieldset控制項組152

7.4.7search類型153

7.4.8tel類型153

7.5通用的表單屬性154

7.5.1autofocus屬性154

7.5.2multiple屬性155

7.5.3placeholder屬性156

7.5.4required屬性157

7.5.5pattern屬性158

7.6綜合實例——表單設計160

7.7　習題162

7.7.1單選題162

7.7.2填空題162

7.7.3簡答題163

第8章CSS基礎165

8.1CSS介紹166

8.1.1CSS概述166

8.1.2CSS3167

8.2CSS的基本語法168

8.3CSS屬性169

8.4在HTML文檔中使用CSS的

方法171

8.4.1行內樣式171

8.4.2內部樣式表172

8.4.3鏈入外部樣式表175

8.4.4導入外部樣式表177

8.5CSS基本選擇器178

8.5.1標記選擇器179

8.5.2類選擇器179

8.5.3id選擇器181

8.5.4通用選擇器183

8.6其他CSS選擇器184

8.6.1組合選擇器184

8.6.2偽類選擇器191

8.6.3偽對象選擇器192

8.6.4屬性選擇器192

8.7綜合案例——CSS的簡單

套用194

8.8習題197

8.8.1單選題197

8.8.2填空題198

8.8.3判斷題198

8.8.4簡答題198

第9章CSS文本樣式199

9.1顏色color200

9.2CSS字型屬性202

9.2.1字型font-family203

9.2.2字型尺寸font-size204

9.2.3字型粗細font-weight207

9.2.4字型風格font-style209

9.2.5小型大寫字母font-variant210

9.2.6字型複合屬性font211

9.3文本格式化213

9.3.1行高line-height213

9.3.2水平對齊方式text-align215

9.3.3文本縮進text-indent216

9.3.4大小寫text-transform218

9.3.5字元間距letter-spacing219

9.3.6單詞間距word-spacing220

9.3.7垂直對齊方式vertical-align221

9.3.8文本修飾text-decoration223

9.3.9文本陰影text-shadow225

9.3.10書寫模式writing-mode226

9.3.11斷行處理word-wrap和

overflow-wrap229

9.3.12文本相關偽對象231

9.4CSS列表屬性232

9.4.1列表項目符號list-style-type233

9.4.2圖片符號list-style-image235

9.4.3列表符號位置

list-style-position236

9.4.4列表複合屬性list-style238

9.5綜合實例——基本圖文混排

網頁240

9.6習題244

9.6.1單選題244

9.6.2填空題245

9.6.3判斷題246

9.6.4簡答題246

第10章CSS盒子模型247

10.1盒子BOX的基本概念248

10.1.1盒子的基本形式248

10.1.2盒子大小的計算width/height250

10.1.3改變盒子大小的計算

方式box-sizing252

10.2框線的基本屬性254

10.2.1框線樣式border-style254

10.2.2框線厚度border-width256

10.2.3框線顏色border-color258

10.2.4框線複合屬性260

10.3邊距261

10.3.1內邊距padding261

10.3.2外邊距margin264

10.4框線的其他屬性267

10.4.1圓角框線border-radius267

10.4.2圖像框線border-image270

10.4.3盒子陰影box-shadow275

10.5綜合案例——盒子布局排版278

10.6習題284

10.6.1單選題284

10.6.2填空題286

10.6.3判斷題286

10.6.4簡答題286

第11章CSS背景287

11.1CSS背景概述288

11.2背景顏色288

11.2.1背景顏色background-color288

11.2.2用背景色給頁面分塊290

11.3背景圖像294

11.3.1頁面背景圖像background-image294

11.3.2背景圖像重複background-repeat296

11.3.3背景圖像滾動background-attachment298

11.3.4背景圖像位置background-position300

11.3.5背景參考原點background-origin302

11.3.6背景圖像尺寸background-size304

11.3.7背景圖像裁剪區域background-clip306

11.3.8線性漸變背景圖像308

11.4背景複合屬性和多背景311

11.4.1背景複合屬性background311

11.4.2多背景311

11.5定義不透明度314

11.6綜合實例——設定背景315

11.7習題323

11.7.1單選題323

11.7.2填空題324

11.7.3判斷題324

11.7.4簡答題324

第12章CSS美化表格與表單325

12.1CSS美化表格326

12.1.1表格框線顏色設定326

12.1.2盒子陰影327

12.1.3表格隔行變色329

12.1.4表格互動變色332

12.2CSS美化表單333

12.2.1美化表單文本框334

12.2.2美化表單元素背景顏色335

12.2.3美化註冊表單元素例子337

第13章CSS盒子布局和定位341

13.1CSS定位屬性342

13.1.1正常流向342

13.1.2定位偏移屬性top、bottom、

right、left344

13.1.3定位方式position344

13.1.4分層呈現z-index353

13.1.5裁切clip354

13.2CSS布局屬性356

13.2.1可見性visibility356

13.2.2溢出overflow358

13.2.3顯示display361

13.2.4浮動float364

13.2.5清除clear367

13.3綜合案例——幼稚園頁面設計369

13.4習題380

13.4.1單選題380

13.4.2填空題380

13.4.3判斷題380

13.4.4簡答題381

第14章網頁布局383

14.1網頁布局方法384

14.1.1網頁布局基本思想384

14.1.2DIV+CSS布局384

14.1.3DIV+CSS分塊方法385

14.2設計超連結樣式389

14.2.1超連結樣式變換389

14.2.2按鈕式超連結394

14.2.3使用列表製作選單397

14.3布局版式401

14.3.1版心和布局流程401

14.3.2單列布局403

14.3.3兩列布局408

14.3.4三列布局416

14.3.5通欄布局429

14.4習題439

14.4.1單選題439

14.4.2填空題439

14.4.3判斷題439

14.4.4簡答題439

第15章　綜合案例——旅遊網站441

15.1網頁布局概述442

15.2頁面的設計442

15.3全局樣式設定454

15.4網頁首部(top)454

15.4.1連結選單(link)455

15.4.2導航選單(menu)456

15.4.3網站的橫幅廣告(bannerwrap)457

15.5　主內容區(main)458

15.5.1登錄區(login)459

15.5.2左邊內容區(left)460

15.5.3中間上部內容區(centertop)462

15.5.4中間底部內容區(centerbottom)464

15.5.5右邊內容區(rigth)466

15.6頁尾區(footer)469

第16章綜合案例——婚戒網站471

16.1網站總體設計472

16.2首頁設計473

16.2.1首頁頁面效果473

16.2.2首頁版式布局475

16.2.3首頁HTML代碼實現476

16.2.4公用的CSS代碼實現480

16.2.5首頁CSS代碼實現481

附錄513