本書全面、系統(tǒng)地介紹了網(wǎng)頁設(shè)計的核心技術(shù)――HTML、CSS和JavaScript,側(cè)重于基礎(chǔ)理論和實際運用,并結(jié)合技術(shù)的*新前沿知識。主要內(nèi)容包括:網(wǎng)頁設(shè)計基礎(chǔ)知識;HTML的使用及HTML5新標(biāo)簽的介紹;CSS基礎(chǔ)和應(yīng)用、CSS3.0新特征的使用; JavaScript腳本編程;本書的*后1章介紹Web前端設(shè)計的新技術(shù)――響應(yīng)式網(wǎng)頁及目前流行的用于實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計的Bootstrap前端框架的使用,通過案例詳敘了基于Bootstrap框架的響應(yīng)式網(wǎng)站的設(shè)計與開發(fā)的完整實現(xiàn)過程。本書以“講清語法、學(xué)以致用”為指導(dǎo)思想,不僅著重介紹每個技術(shù)點的語法,更側(cè)重通過具體小實例來達(dá)到學(xué)以致用的目的。其作者結(jié)合多年講授這門課程的教學(xué)經(jīng)驗,合理地組織教材內(nèi)容,做到內(nèi)容緊湊、實踐性強(qiáng)并結(jié)合技術(shù)的前沿知識。
本書所介紹內(nèi)容,不僅是網(wǎng)頁前端技術(shù)的核心與關(guān)鍵技術(shù),而且也是從事網(wǎng)頁設(shè)計工作必備的技能。本書作者長期從事網(wǎng)頁前端技術(shù)相關(guān)的教學(xué)與科研工作,比較清楚學(xué)生及業(yè)內(nèi)人士的需求,本書是其多年來教學(xué)實踐的提煉與總結(jié)。
舒后:北京印刷學(xué)院副教授,長期從事計算機(jī)、數(shù)字媒體技術(shù)專業(yè)的教學(xué)工作,主要教授的有數(shù)據(jù)結(jié)構(gòu)、數(shù)據(jù)庫及應(yīng)用基礎(chǔ)、網(wǎng)絡(luò)數(shù)據(jù)庫技術(shù)、C程序設(shè)計、Web技術(shù)、CSS+JavaScript程序設(shè)計。最近主要主持或參的研究項目有文本數(shù)字水印在博客版權(quán)保護(hù)中的應(yīng)用研究、基于安卓系統(tǒng)的手機(jī)應(yīng)用軟件開發(fā)、數(shù)字新媒體技術(shù)主題資源庫、數(shù)字與網(wǎng)絡(luò)出版”實踐教學(xué)模式研究、矢量圖形表示媒體安全技術(shù)研究、基于XML的印刷企業(yè)數(shù)據(jù)集成模型研究、文本數(shù)字水印技術(shù)在網(wǎng)絡(luò)出版中的研究、網(wǎng)絡(luò)出版中版權(quán)保護(hù)技術(shù)--基于自然語言文本數(shù)字水印的研究。出版教材8部,發(fā)表 論文十幾篇。
第1章 網(wǎng)頁設(shè)計基礎(chǔ)知識 1
1.1 相關(guān)知識 2
1.2 Web前端開發(fā)技術(shù) 5
1.2.1 認(rèn)識HTML 5
1.2.2 認(rèn)識CSS 6
1.2.3 認(rèn)識JavaScript 7
第2章 HTML基礎(chǔ) 9
2.1 HTML的概念 10
2.2 HTML的基本語法 10
2.2.1 標(biāo)簽 10
2.2.2 屬性 11
2.3 HTML的文檔結(jié)構(gòu) 12
2.3.1 基本結(jié)構(gòu) 12
2.3.2 書寫注意事項 12
2.4 HTML的頭部文件和主體文件 13
2.4.1 文件頭部內(nèi)容 13
2.4.2 主體內(nèi)容 16
習(xí)題 19
第3章 網(wǎng)頁文字與排版設(shè)計 21
3.1 編輯網(wǎng)頁內(nèi)容 22
3.1.1 添加文字 22
3.1.2 添加注釋 22
3.1.3 添加空格 23
3.2 文字效果與修飾 23
3.2.1 設(shè)置文字樣式 23
3.2.2 修飾文字 24
3.3 段落與排版 29
3.3.1 段落的標(biāo)簽 30
3.3.2 換行 30
3.3.3 預(yù)格式化 32
3.3.4 居中顯示文字 33
3.3.5 插入水平線 33
3.3.6 設(shè)置段落縮進(jìn) 34
3.4 建立列表 35
3.4.1 建立定義列表 35
3.4.2 建立無序列表 37
3.4.3 建立有序列表 39
3.4.4 建立嵌套列表 41
3.5 文字網(wǎng)頁綜合實例 41
習(xí)題 43
第4章 超鏈接的使用 45
4.1 超鏈接簡介 46
4.2 超鏈接的路徑 46
4.2.1 設(shè)置絕對路徑 46
4.2.2 設(shè)置相對路徑 46
4.2.3 設(shè)置根路徑 47
4.3 超鏈接的應(yīng)用 47
4.3.1 超鏈接的建立 47
4.3.2 插入內(nèi)部和外部鏈接 48
4.3.3 插入錨鏈接(書簽鏈接) 49
4.3.4 插入圖片鏈接 52
4.3.5 電子郵件鏈接 53
4.3.6 下載文件的鏈接 54
4.4 設(shè)置圖像映射 55
4.5 其他鏈接 56
4.5.1 定義基準(zhǔn)網(wǎng)址<base> 56
4.5.2 框架的鏈接 57
4.6 綜合實例 57
習(xí)題 58
第5章 表格的使用 60
5.1 創(chuàng)建表格 61
5.1.1 表格的結(jié)構(gòu) 61
5.1.2 表格的標(biāo)題與表頭 62
5.2 設(shè)置表格屬性 64
5.2.1 設(shè)置表格的邊框 64
5.2.2 設(shè)置邊框樣式 65
5.2.3 設(shè)置表格的寬度和高度 67
5.2.4 設(shè)置表格的背景顏色 67
5.3 設(shè)置單元格 68
5.3.1 設(shè)置單元格水平對齊屬性 68
5.3.2 設(shè)置單元格垂直對齊 69
5.3.3 設(shè)置單元格間距和邊距 70
5.3.4 合并單元格 72
5.4 表格嵌套 74
5.5 綜合實例 75
習(xí)題 76
第6章 網(wǎng)頁框架設(shè)計 78
6.1 框架 79
6.1.1 框架的概念 79
6.1.2 框架的基本結(jié)構(gòu) 80
6.2 框架的設(shè)置 80
6.2.1 框架的文件屬性 80
6.2.2 設(shè)置框架的名稱 81
6.2.3 框架的邊框 81
6.2.4 框架的滾動條 82
6.2.5 調(diào)整框架尺寸 83
6.2.6 設(shè)置框架邊緣寬度與高度 84
6.3 框架集的設(shè)置 85
6.3.1 框架集邊框?qū)挾?85
6.3.2 設(shè)置框架集邊框顏色 86
6.3.3 框架的分割 87
6.4 框架的嵌套 88
6.5 不支持框架 88
6.6 浮動框架 90
6.7 設(shè)置框架的鏈接 91
6.7.1 普通框架添加鏈接 91
6.7.2 浮動框架添加鏈接 92
6.8 框架的綜合應(yīng)用 94
習(xí)題 96
第7章 層的應(yīng)用 98
7.1 創(chuàng)建層 99
7.2 層的屬性 99
7.2.1 層屬性的設(shè)置 99
7.2.2 層的邊框 100
7.2.3 層邊框的顏色 100
7.3 嵌套層 102
7.4 <span>標(biāo)簽的使用 102
7.5 綜合應(yīng)用 103
習(xí)題 104
第8章 表單的使用 106
8.1 表單 107
8.1.1 基本概念 107
8.1.2 表單的屬性 107
8.2 輸入標(biāo)簽<input> 108
8.2.1 表單元素標(biāo)記 108
8.2.2 文本框 108
8.2.3 密碼框 109
8.2.4 單選框、復(fù)選框 110
8.2.5 圖像域 111
8.2.6 隱藏域 112
8.2.7 多行文本域 113
8.2.8 按鈕 113
8.2.9 下拉菜單和滾動列表 114
8.2.10 插入文件域 115
8.3 表單綜合實例 117
習(xí)題 118
第9章 HTML5基本介紹 120
9.1 認(rèn)識HTML5 121
9.1.1 HTML5的發(fā)展史 121
9.1.2 HTML5與HTML4的差異 121
9.1.3 HTML5廢除的標(biāo)簽 122
9.2 HTML5的新功能 122
9.2.1 HTML5聲明 123
9.2.2 語義化標(biāo)簽 123
9.3 新增標(biāo)簽介紹 126
9.3.1 視頻標(biāo)簽與屬性 126
9.3.2 音頻標(biāo)簽與屬性 127
9.3.3 畫布標(biāo)簽與屬性 128
9.3.4 表單屬性 129
9.4 Web存儲 137
9.4.1 Web存儲的兩種方法 137
9.4.2 Web存儲的優(yōu)勢和意義 139
第10章 CSS語法基礎(chǔ) 140
10.1 CSS的簡介 141
10.1.1 CSS的發(fā)展史 141
10.1.2 CSS的定義 141
10.2 CSS的基本語法 142
10.3 CSS選擇符的類型 143
10.3.1 標(biāo)記選擇符 143
10.3.2 組合選擇符 144
10.3.3 類選擇符 145
10.3.4 id選擇符 146
10.3.5 包含選擇符 148
10.3.6 偽類 149
10.4 選擇符的優(yōu)先級 150
10.5 應(yīng)用CSS樣式表 151
10.5.1 行內(nèi)樣式 151
10.5.2 內(nèi)嵌樣式 152
10.5.3 鏈接外部樣式 153
10.5.4 導(dǎo)入外部樣式 154
10.5.5 樣式表的優(yōu)先級 155
習(xí)題 156
第11章 CSS設(shè)置文字與版式 158
11.1 字體屬性的設(shè)置 159
11.1.1 字體font-family 159
11.1.2 字號font-size 159
11.1.3 字體風(fēng)格font-style 162
11.1.4 字體加粗font-weight 162
11.1.5 字體變體font-variant 162
11.1.6 綜合字體屬性font 163
11.2 文本的版式控制(文本排版) 164
11.2.1 設(shè)置首行縮進(jìn)text-indent 164
11.2.2 設(shè)置首字下沉first-letter類 165
11.2.3 調(diào)整行高line-height 166
11.2.4 調(diào)整字符間距l(xiāng)etter-spacing 168
11.2.5 調(diào)整單詞間距word-spacing 168
11.2.6 添加文字修飾text-decoration 169
11.2.7 設(shè)置文本對齊方式text-align和vertical-align 170
11.2.8 轉(zhuǎn)換英文大小寫text-transform 171
11.2.9 文本陰影text-shadow 172
習(xí)題 173
第12章 顏色和背景 174
12.1 顏色color 175
12.1.1 顏色名稱定義 175
12.1.2 顏色的十六進(jìn)制定義 175
12.1.3 顏色的RGB函數(shù)定義 176
12.2 頁面背景background 176
12.2.1 設(shè)置背景顏色 176
12.2.2 設(shè)置背景圖片 177
12.2.3 設(shè)置重復(fù)背景圖片 179
12.2.4 設(shè)置滾動背景圖片 180
12.2.5 設(shè)置背景圖片位置 181
12.2.6 背景復(fù)合屬性background 183
12.2.7 設(shè)置背景尺寸 184
12.2.8 定義透明度 185
習(xí)題 186
第13章 CSS盒子模型 188
13.1 盒模型簡介 189
13.1.1 盒模型定義 189
13.1.2 DIV盒子 189
13.2 邊框?qū)傩?190
13.2.1 邊框樣式屬性border-style 190
13.2.2 邊框?qū)挾葘傩詁order-width 192
13.2.3 邊框顏色屬性border-color 192
13.2.4 邊框?qū)傩缘木C合設(shè)置 193
13.3 邊距屬性 194
13.3.1 內(nèi)邊距padding 194
13.3.2 外邊距margin 195
13.4 圓角邊框 199
習(xí)題 201
第14章 定位和布局 202
14.1 CSS元素定位 203
14.1.1 定位方式 203
14.1.2 設(shè)置位置top、bottom、right、left 203
14.1.3 圖層定位z-index屬性 206
14.1.4 使用浮動屬性 207
14.2 CSS布局屬性 207
14.2.1 可見性visibility 207
14.2.2 裁切clip 209
14.2.3 設(shè)置層大小width和height 210
14.2.4 溢出overflow 211
14.2.5 浮動float 212
14.2.6 清除浮動clear 213
14.3 其他頁面元素的設(shè)置 214
14.3.1 鼠標(biāo)特效 214
14.3.2 項目列表 216
習(xí)題 221
第15章 CSS濾鏡特效 223
15.1 概述 224
15.2 視覺濾鏡 225
15.2.1 Alpha濾鏡 225
15.2.2 Blur濾鏡 227
15.2.3 DropShadow濾鏡 228
15.2.4 Glow濾鏡 229
15.2.5 FlipH/FlipV濾鏡 230
15.2.6 Gray、Invert、Xray濾鏡 232
15.2.7 Chroma濾鏡 233
15.2.8 Wave濾鏡 235
15.2.9 Shadow濾鏡 237
15.2.10 Mask濾鏡 239
15.2.11 Emboss、Engrave濾鏡 240
習(xí)題 243
第16章 JavaScript基礎(chǔ) 244
16.1 JavaScript簡介 245
16.1.1 什么是腳本語言 245
16.1.2 JavaScript、VBScript與Jscript 245
16.1.3 JavaScript語言的基本特點 245
16.1.4 在HTML中加入JavaScript代碼 246
16.1.5 一個簡單的實例 247
16.2 JavaScript基本語法 247
16.2.1 JavaScript的語句 247
16.2.2 數(shù)據(jù)類型 248
16.2.3 變量和常量 249
16.2.4 運算符和表達(dá)式 250
16.3 JavaScript流程控制語句 254
16.3.1 選擇語句 254
16.3.2 循環(huán)語句 259
16.3.3 其他語句 263
16.4 函數(shù) 264
16.4.1 函數(shù)的定義 264
16.4.2 函數(shù)的參數(shù)與返回值 265
習(xí)題 269
第17章 JavaScript的對象和事件 271
17.1 JavaScript的對象 272
17.1.1 JavaScript對象 272
17.1.2 JavaScript的內(nèi)置對象和函數(shù) 272
17.1.3 瀏覽器內(nèi)部對象 279
17.1.4 自定義對象 295
17.2 JavaScript的事件處理方式 297
17.2.1 JavaScript的常用事件 298
17.2.2 事件處理 299
習(xí)題 303
第18章 Web前端新技術(shù)――響應(yīng)式網(wǎng)頁的設(shè)計與實現(xiàn) 305
18.1 響應(yīng)式網(wǎng)頁技術(shù) 306
18.2 前端開發(fā)框架 306
18.3 Bootstrap框架 307
18.3.1 框架簡介 307
18.3.2 Bootstrap框架特點 307
18.3.3 Bootstrap環(huán)境安裝 310
18.4 基于數(shù)字媒體技術(shù)專業(yè)網(wǎng)站的設(shè)計與實現(xiàn) 311
18.4.1 美術(shù)設(shè)計 311
18.4.2 首頁的設(shè)計 312
18.4.3 Bootstrap導(dǎo)航 313
18.4.4 網(wǎng)頁內(nèi)容區(qū) 313
18.4.5 頁腳導(dǎo)航區(qū) 317
18.5 小結(jié) 318
參考文獻(xiàn) 319
習(xí)題答案(選擇題) 320