前言
第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)1
1.1 網(wǎng)頁與網(wǎng)站的概念1
1.2 Web前端開發(fā)技術(shù)簡介1
1.2.1 HTML5簡介1
1.2.2 CSS3簡介3
1.2.3 JavaScript簡介4
1.3 HTML5的基本結(jié)構(gòu)和編碼規(guī)范4
1.3.1 HTML5語法結(jié)構(gòu)4
1.3.2 HTML5文檔結(jié)構(gòu)5
1.3.3 HTML5編碼規(guī)范7
1.4 編輯HTML文件8
1.4.1 常見的網(wǎng)頁編輯工具8
1.4.2 HTML文件的創(chuàng)建8
1.5 案例—制作“馨美裝修”公司介紹頁面11
習(xí)題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 標(biāo)題元素20
2.6.2 段落元素和換行元素21
2.6.3 縮排元素21
2.6.4 水平線元素22
2.6.5 案例—制作“馨美裝修”網(wǎng)購向?qū)ы撁?2
2.7 圖像元素23
2.7.1 常用的Web圖像格式23
2.7.2 圖像元素的基本用法23
2.8 超鏈接元素25
2.8.1 a元素25
2.8.2 頁面轉(zhuǎn)向鏈接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 案例—制作“馨美裝修”服務(wù)資源頁面27
2.9 列表元素29
2.9.1 無序列表29
2.9.2 有序列表29
2.9.3 定義列表30
2.9.4 嵌套列表31
2.9.5 案例—制作“馨美裝修”廣告聯(lián)盟頁面31
2.10 HTML5多媒體元素32
2.10.1 HTML5對音頻和視頻的支持32
2.10.2 audio元素32
2.10.3 video元素33
習(xí)題234
第3章 網(wǎng)頁布局與交互35
3.1 iframe框架元素35
3.1.1 基本格法35
3.1.2 使用iframe框架元素布局頁面35
3.1.3 使用iframe框架元素實現(xiàn)頁面間的跳轉(zhuǎn)36
3.2 分區(qū)元素37
3.2.1 基本語法37
3.2.2 使用div元素布局頁面內(nèi)容37
3.3 范圍元素38
3.3.1 基本語法38
3.3.2 span元素與div元素的異同38
3.3.3 案例—布局“馨美裝修”技術(shù)支持頁面39
3.4 HTML5文檔結(jié)構(gòu)元素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 數(shù)據(jù)分組48
3.6.5 調(diào)整列的格式49
3.6.6 案例—使用表格布局“馨美裝修”案例頁面49
3.7 表單50
3.7.1 表單元素form50
3.7.2 輸入元素input51
3.7.3 標(biāo)簽元素label53
3.7.4 選擇欄元素select53
3.7.5 多行文本元素textarea55
3.7.6 表單分組55
3.7.7 案例—制作“馨美裝修”聯(lián)系我們表單56
習(xí)題357
第4章 CSS3樣式基礎(chǔ)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 行內(nèi)樣式61
4.2.2 內(nèi)部樣式表62
4.2.3 鏈入外部樣式表63
4.2.4 導(dǎo)入外部樣式表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 復(fù)合選擇符71
4.4.3 通配符選擇符75
4.4.4 偽類選擇符76
4.4.5 偽元素選擇符78
4.4.6 案例—制作“馨美裝修”網(wǎng)站使用條款頁面79
4.5 文檔結(jié)構(gòu)與元素類型81
4.5.1 文檔結(jié)構(gòu)的基本概念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
習(xí)題488
第5章 使用CSS3修飾網(wǎng)頁元素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 元素內(nèi)部的空白屬性white-space93
5.2.8 文本的截斷效果屬性text-overflow93
5.3 CSS3背景屬性94
5.3.1 背景顏色屬性background-color94
5.3.2 背景圖像屬性background-image95
5.3.3 重復(fù)背景圖像屬性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 圖像作為列表項的標(biāo)記屬性list-style-image102
5.5.2 列表項標(biāo)記的位置屬性list-style-position102
5.5.3 標(biāo)記的類型屬性list-style-type103
5.5.4 列表簡寫屬性list-style103
5.6 CSS3表格屬性106
5.6.1 合并邊框?qū)傩詁order-collapse106
5.6.2 邊框間隔屬性border-spacing106
5.6.3 標(biāo)題位置屬性caption-side106
5.6.4 單元格無內(nèi)容顯示方式屬性empty-cells107
5.6.5 案例—使用斑馬線表格制作裝修工程年度排行榜108
5.7 CSS3屬性的應(yīng)用109
5.7.1 設(shè)置圖像樣式109
5.7.2 設(shè)置表單樣式111
5.7.3 設(shè)置鏈接113
5.7.4 創(chuàng)建導(dǎo)航菜單114
5.8 綜合案例—制作“馨美裝修”網(wǎng)購學(xué)堂頁面116
5.8.1 網(wǎng)購學(xué)堂頁面布局規(guī)劃117
5.8.2 網(wǎng)購學(xué)堂頁面的制作過程117
習(xí)題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 內(nèi)邊距屬性padding127
6.2.2 外邊距屬性margin129
6.2.3 邊框?qū)傩詁order131
6.2.4 圓角邊框?qū)傩詁order-radius134
6.2.5 盒模型的陰影屬性box-shadow135
6.2.6 調(diào)整大小屬性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 層疊順序?qū)傩詚-index150
6.5 CSS3多列屬性151
6.6 綜合案例—“馨美裝修”登錄頁面整體布局154
習(xí)題6155
第7章 Div+CSS布局頁面156
7.1 Div+CSS布局技術(shù)簡介156
7.1.1 Div+CSS布局的優(yōu)點156
7.1.2 使用嵌套的Div實現(xiàn)頁面排版156
7.2 典型的Div+CSS整體頁面布局157
7.2.1 CSS布局類型157
7.2.2 CSS布局樣式158
7.3 典型的局部布局161
7.3.1