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

《HTML5+CSS3網頁設計與製作案例教程》是於2017年1月清華大學出版社出版的一本圖書,作者是姬莉霞

前言,圖書簡介,

前言

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網頁標題<title>25
2.3.3定義元數據<meta>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段落<p>34
3.1.2控制換行<br>35
3.1.3預先格式化<pre>37
3.1.4水平線<hr>38
3.1.5標題文字<h1>~<h6>40
3.2描述文本的語義化、結構化
元素41
3.2.1強調文本<b>/<i>/<em>/
<strong>41
3.2.2作品標題<cite>43
3.2.3小型文本<small>44
3.2.4標記文本改變<ins>/<del>45
3.2.5文字上下標<sup>/<sub>46
3.2.6旁註<ruby>/<rt>/<rp>47
3.2.7日期時間<time>48
3.2.8其他語義化、結構化元素49
3.3塊級元素與行內元素49
3.4無語義的容器元素51
3.4.1<div>元素51
3.4.2<span>元素53
3.5使用字元實體表示特殊字元54
3.6添加注釋55
3.7列表56
3.7.1無序列表<ul>56
3.7.2有序列表<ol>58
3.7.3描述列表<dl>/<dt>/<dd>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在頁面中插入圖像<img>71
4.2.1網頁圖像的格式71
4.2.2插入圖像72
4.3在網頁中插入視頻<video>74
4.3.1視頻格式74
4.3.2插入視頻74
4.4在網頁中插入音頻<audio>76
4.4.1音頻格式76
4.4.2插入音頻格式77
4.5使用多種來源的多媒體和備用
文本<source>78
4.6插入多媒體檔案<embed>78
4.7定義媒介分組和標題<figure>/
<figcaption>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<a>標記的屬性91
5.2.4超連結的目標類型95
5.2.5Email連結97
5.3錨記(書籤)連結97
5.4設定圖像映射101
5.5內聯框架<iframe>及其連結104
5.5.1內聯框架104
5.5.2內聯框架相關的連結105
5.6定義基準地址<base>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表格的按行分組顯示<thead>/
<tbody>/<tfoot>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建立表單<form>135
7.3表單基本元素135
7.3.1<input>標記136
7.3.2多行文字框<textarea>143
7.3.3列表<select>/<option>/
<datalist>144
7.4<input>新增表單高級元素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

相關詞條

熱門詞條

聯絡我們