《網頁設計與制作教程(HTML+CSS+JavaScript)第3版》內容緊扣國家對高等院校培養(yǎng)高級應用型、復合型人才的技能水平和知識結構的要求,采用全新的Web標準編寫,詳細講解了HTML5、CSS3、JavaScript開發(fā)技術基礎和HTML5網站制作實例!毒W頁設計與制作教程(HTML+CSS+JavaScript)第3版》共11章,主要內容包括網頁設計與制作基礎、編輯HTML5元素、網頁布局與交互、CSS3樣式基礎、使用CSS3修飾網頁元素、CSS3盒模型、Div+CSS布局頁面、JavaScript基礎、JavaScript DOM編程、HTML5的高級應用和“馨美裝修”網站的制作。
《網頁設計與制作教程(HTML+CSS+JavaScript)第3版》可作為高等院校計算機及相關專業(yè)的教材,也可以作為網站建設、相關軟件開發(fā)人員和計算機愛好者的參考書。
前言
第1章 網頁設計與制作基礎1
1.1 網頁與網站的概念1
1.2 Web前端開發(fā)技術簡介1
1.2.1 HTML5簡介1
1.2.2 CSS3簡介3
1.2.3 JavaScript簡介4
1.3 HTML5的基本結構和編碼規(guī)范4
1.3.1 HTML5語法結構4
1.3.2 HTML5文檔結構5
1.3.3 HTML5編碼規(guī)范7
1.4 編輯HTML文件8
1.4.1 常見的網頁編輯工具8
1.4.2 HTML文件的創(chuàng)建8
1.5 案例—制作“馨美裝修”公司介紹頁面11
習題111
第2章 編輯HTML5元素12
2.1 HTML5元素的分類12
2.1.1 元信息元素12
2.1.2 語義元素13
2.1.3 無語義元素15
2.2 注釋和特殊符號15
2.2.1 注釋15
2.2.2 特殊符號15
2.3 HTML5的顏色表示16
2.4 文本元素17
2.4.1 字體樣式元素17
2.4.2 短語元素18
2.5 文本層次語義元素19
2.5.1 mark元素19
2.5.2 cite元素19
2.5.3 time元素19
2.6 基本排版元素20
2.6.1 標題元素20
2.6.2 段落元素和換行元素21
2.6.3 縮排元素21
2.6.4 水平線元素22
2.6.5 案例—制作“馨美裝修”網購向導頁面22
2.7 圖像元素23
2.7.1 常用的Web圖像格式23
2.7.2 圖像元素的基本用法23
2.8 超鏈接元素25
2.8.1 a元素25
2.8.2 頁面轉向鏈接25
2.8.3 書簽鏈接26
2.8.4 下載文件鏈接26
2.8.5 電子郵件鏈接26
2.8.6 JavaScript鏈接27
2.8.7 圖像鏈接27
2.8.8 空鏈接27
2.8.9 案例—制作“馨美裝修”服務資源頁面27
2.9 列表元素29
2.9.1 無序列表29
2.9.2 有序列表29
2.9.3 定義列表30
2.9.4 嵌套列表31
2.9.5 案例—制作“馨美裝修”廣告聯盟頁面31
2.10 HTML5多媒體元素32
2.10.1 HTML5對音頻和視頻的支持32
2.10.2 audio元素32
2.10.3 video元素33
習題234
第3章 網頁布局與交互35
3.1 iframe框架元素35
3.1.1 基本格法35
3.1.2 使用iframe框架元素布局頁面35
3.1.3 使用iframe框架元素實現頁面間的跳轉36
3.2 分區(qū)元素37
3.2.1 基本語法37
3.2.2 使用div元素布局頁面內容37
3.3 范圍元素38
3.3.1 基本語法38
3.3.2 span元素與div元素的異同38
3.3.3 案例—布局“馨美裝修”技術支持頁面39
3.4 HTML5文檔結構元素39
3.4.1 section元素40
3.4.2 nav元素40
3.4.3 header元素40
3.4.4 footer元素40
3.4.5 article元素40
3.4.6 aside元素42
3.4.7 分組元素43
3.4.8 案例—制作“馨美裝修”人才招聘頁面44
3.5 HTML5頁面交互元素45
3.5.1 details元素和summary元素45
3.5.2 progress元素45
3.6 表格元素46
3.6.1 表格的組成46
3.6.2 基本表格46
3.6.3 不規(guī)范表格47
3.6.4 數據分組48
3.6.5 調整列的格式49
3.6.6 案例—使用表格布局“馨美裝修”案例頁面49
3.7 表單50
3.7.1 表單元素form50
3.7.2 輸入元素input51
3.7.3 標簽元素label53
3.7.4 選擇欄元素select53
3.7.5 多行文本元素textarea55
3.7.6 表單分組55
3.7.7 案例—制作“馨美裝修”聯系我們表單56
習題357
第4章 CSS3樣式基礎59
4.1 CSS3簡介59
4.1.1 初識CSS359
4.1.2 CSS3的優(yōu)點59
4.1.3 CSS3的局限性60
4.1.4 CSS3編寫規(guī)范60
4.1.5 CSS3的工作環(huán)境61
4.2 在HTML中引入CSS3樣式表61
4.2.1 行內樣式61
4.2.2 內部樣式表62
4.2.3 鏈入外部樣式表63
4.2.4 導入外部樣式表65
4.3 CSS3的基本語法和屬性值單位66
4.3.1 基本語法66
4.3.2 注意事項67
4.3.3 長度、百分比單位68
4.3.4 色彩單位69
4.4 CSS3的選擇符70
4.4.1 基本選擇符70
4.4.2 復合選擇符71
4.4.3 通配符選擇符75
4.4.4 偽類選擇符76
4.4.5 偽元素選擇符78
4.4.6 案例—制作“馨美裝修”網站使用條款頁面79
4.5 文檔結構與元素類型81
4.5.1 文檔結構的基本概念81
4.5.2 元素類型82
4.6 繼承性、層疊性和優(yōu)先級83
4.6.1 繼承性83
4.6.2 層疊性84
4.6.3 優(yōu)先級84
4.7 綜合案例—制作“馨美裝修”幫助中心局部頁面85
習題488
第5章 使用CSS3修飾網頁元素89
5.1 CSS3字體屬性89
5.1.1 字體類型屬性font-family89
5.1.2 字體尺寸屬性font-size89
5.1.3 字體傾斜屬性font-style90
5.1.4 小寫字體屬性font-variant90
5.1.5 字體粗細font-weight90
5.2 CSS3文本屬性91
5.2.1 文本顏色屬性color91
5.2.2 行高屬性line-height91
5.2.3 文本水平對齊方式屬性text-align92
5.2.4 為文本添加修飾屬性text-decoration92
5.2.5 段落首行縮進屬性text-indent92
5.2.6 文本的陰影屬性text-shadow92
5.2.7 元素內部的空白屬性white-space93
5.2.8 文本的截斷效果屬性text-overflow93
5.3 CSS3背景屬性94
5.3.1 背景顏色屬性background-color94
5.3.2 背景圖像屬性background-image95
5.3.3 重復背景圖像屬性background-repeat96
5.3.4 固定背景圖像屬性background-attachment97
5.3.5 背景圖像位置屬性background-position97
5.3.6 背景圖像大小屬性background-size98
5.3.7 背景屬性background98
5.3.8 背景圖像起點屬性background-origin98
5.4 CSS3尺寸屬性99
5.4.1 寬度屬性width100
5.4.2 高度屬性height100
5.4.3 小寬度屬性min-width100
5.4.4 大寬度屬性max-width101
5.4.5 小高度屬性min-height101
5.4.6 大高度屬性max-height101
5.5 CSS3列表屬性102
5.5.1 圖像作為列表項的標記屬性list-style-image102
5.5.2 列表項標記的位置屬性list-style-position102
5.5.3 標記的類型屬性list-style-type103
5.5.4 列表簡寫屬性list-style103
5.6 CSS3表格屬性106
5.6.1 合并邊框屬性border-collapse106
5.6.2 邊框間隔屬性border-spacing106
5.6.3 標題位置屬性caption-side106
5.6.4 單元格無內容顯示方式屬性empty-cells107
5.6.5 案例—使用斑馬線表格制作裝修工程年度排行榜108
5.7 CSS3屬性的應用109
5.7.1 設置圖像樣式109
5.7.2 設置表單樣式111
5.7.3 設置鏈接113
5.7.4 創(chuàng)建導航菜單114
5.8 綜合案例—制作“馨美裝修”網購學堂頁面116
5.8.1 網購學堂頁面布局規(guī)劃117
5.8.2 網購學堂頁面的制作過程117
習題5122
第6章 CSS3盒模型124
6.1 盒模型概述124
6.1.1 盒子的組成124
6.1.2 盒子的大小125
6.1.3 塊級元素與行級元素的寬度和高度126
6.2 盒模型的屬性127
6.2.1 內邊距屬性padding127
6.2.2 外邊距屬性margin129
6.2.3 邊框屬性border131
6.2.4 圓角邊框屬性border-radius134
6.2.5 盒模型的陰影屬性box-shadow135
6.2.6 調整大小屬性resize136
6.3 CSS3布局屬性137
6.3.1 元素的布局方式概述137
6.3.2 CSS浮動屬性float139
6.3.3 清除浮動屬性clear141
6.3.4 裁剪屬性clip142
6.3.5 元素顯示方式屬性display142
6.3.6 元素可見性屬性visibility143
6.4 CSS3盒子定位屬性144
6.4.1 定位位置屬性top、right、bottom、left144
6.4.2 定位方式屬性position145
6.4.3 層疊順序屬性z-index150
6.5 CSS3多列屬性151
6.6 綜合案例—“馨美裝修”登錄頁面整體布局154
習題6155
第7章 Div+CSS布局頁面156
7.1 Div+CSS布局技術簡介156
7.1.1 Div+CSS布局的優(yōu)點156
7.1.2 使用嵌套的Div實現頁面排版156
7.2 典型的Div+CSS整體頁面布局157
7.2.1 CSS布局類型157
7.2.2 CSS布局樣式158
7.3 典型的局部布局161
7.3.1
-
-- 局部布局161
7.3.2 -
-- -
- 局部布局162
7.4 綜合案例—制作“馨美裝修”商務服務中心頁面162
7.4.1 商務服務中心頁面布局規(guī)劃162
7.4.2 商務服務中心頁面的制作過程163
習題7168
第8章 JavaScript基礎170
8.1 JavaScript概述170
8.2 在HTML文件中使用JavaScript170
8.2.1 在HTML文檔中嵌入腳本程序171
8.2.2 鏈接腳本文件171
8.2.3 在HTML標簽內添加腳本172
8.3 數據類型172
8.3.1 數據類型的分類172
8.3.2 基本數據類型173
8.3.3 數據類型的轉換174
8.4 常量和變量175
8.4.1 常量175
8.4.2 變量176
8.5 運算符和表達式176
8.5.1 基本概念177
8.5.2 運算符和表達式的分類177
8.6 流程控制語句178
8.6.1 順序結構語句179
8.6.2 條件選擇結構語句181
8.6.3 循環(huán)結構語句184
8.7 函數186
8.7.1 函數的聲明187
8.7.2 函數的調用188
8.7.3 變量的作用域189
8.7.4 內置函數189
習題8190
第9章 JavaScript DOM編程191
9.1 DOM概述191
9.2 window對象191
9.2.1 window對象的屬性192
9.2.2 window對象的方法192
9.3 document對象193
9.3.1 document對象的屬性193
9.3.2 document對象的方法193
9.4 location對象195
9.4.1 location對象的屬性195
9.4.2 location對象的方法195
9.5 history對象195
9.6 screen對象196
9.7 navigator對象196
9.8 form對象197
9.8.1 form對象的屬性197
9.8.2 form對象的方法198
9.9 DOM節(jié)點198
9.9.1 node對象198
9.9.2 element對象198
9.9.3 nodeList對象199
9.10 對象事件處理程序200
9.10.1 對象的事件200
9.10.2 常用的事件及處理201
9.10.3 表單對象與交互性203
9.11 綜合案例—“馨美裝修”工程復選框全選效果205
習題9207
第10章 HTML5的高級應用209
10.1 拖放API209
10.1.1 draggable屬性209
10.1.2 拖放事件209
10.1.3 數據傳遞對象dataTransfer210
10.2 繪圖API212
10.2.1 創(chuàng)建canvas元素212
10.2.2 構建繪圖環(huán)境213
10.2.3 通過JavaScript繪制圖形213
習題10219
第11章 “馨美裝修”網站的制作221
11.1 網站的開發(fā)流程221
11.2 網站結構222
11.2.1 創(chuàng)建站點目錄222
11.2.2 網站頁面的組成223
11.3 網站技術分析223
11.4 制作首頁224
11.4.1 頁面結構代碼224
11.4.2 頁面樣式設計226
11.4.3 頁面交互與網頁特效的實現230
11.5 制作合作案例頁面231
11.5.1 頁面結構代碼231
11.5.2 頁面樣式設計232
11.6 網站的整合233
習題11233
參考文獻235