前言
第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)1
1.1 網(wǎng)頁(yè)與網(wǎng)站的概念1
1.2 Web前端開(kāi)發(fā)技術(shù)簡(jiǎn)介1
1.2.1 HTML5簡(jiǎn)介1
1.2.2 CSS3簡(jiǎn)介3
1.2.3 JavaScript簡(jiǎn)介4
1.3 HTML5的基本結(jié)構(gòu)和編碼規(guī)范4
1.3.1 HTML5語(yǔ)法結(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 常見(jiàn)的網(wǎng)頁(yè)編輯工具8
1.4.2 HTML文件的創(chuàng)建8
1.5 案例—制作“馨美裝修”公司介紹頁(yè)面11
習(xí)題111
第2章 編輯HTML5元素12
2.1 HTML5元素的分類(lèi)12
2.1.1 元信息元素12
2.1.2 語(yǔ)義元素13
2.1.3 無(wú)語(yǔ)義元素15
2.2 注釋和特殊符號(hào)15
2.2.1 注釋15
2.2.2 特殊符號(hào)15
2.3 HTML5的顏色表示16
2.4 文本元素17
2.4.1 字體樣式元素17
2.4.2 短語(yǔ)元素18
2.5 文本層次語(yǔ)義元素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 水平線(xiàn)元素22
2.6.5 案例—制作“馨美裝修”網(wǎng)購(gòu)向?qū)ы?yè)面22
2.7 圖像元素23
2.7.1 常用的Web圖像格式23
2.7.2 圖像元素的基本用法23
2.8 超鏈接元素25
2.8.1 a元素25
2.8.2 頁(yè)面轉(zhuǎn)向鏈接25
2.8.3 書(shū)簽鏈接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ù)資源頁(yè)面27
2.9 列表元素29
2.9.1 無(wú)序列表29
2.9.2 有序列表29
2.9.3 定義列表30
2.9.4 嵌套列表31
2.9.5 案例—制作“馨美裝修”廣告聯(lián)盟頁(yè)面31
2.10 HTML5多媒體元素32
2.10.1 HTML5對(duì)音頻和視頻的支持32
2.10.2 audio元素32
2.10.3 video元素33
習(xí)題234
第3章 網(wǎng)頁(yè)布局與交互35
3.1 iframe框架元素35
3.1.1 基本格法35
3.1.2 使用iframe框架元素布局頁(yè)面35
3.1.3 使用iframe框架元素實(shí)現(xiàn)頁(yè)面間的跳轉(zhuǎn)36
3.2 分區(qū)元素37
3.2.1 基本語(yǔ)法37
3.2.2 使用div元素布局頁(yè)面內(nèi)容37
3.3 范圍元素38
3.3.1 基本語(yǔ)法38
3.3.2 span元素與div元素的異同38
3.3.3 案例—布局“馨美裝修”技術(shù)支持頁(yè)面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 案例—制作“馨美裝修”人才招聘頁(yè)面44
3.5 HTML5頁(yè)面交互元素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 案例—使用表格布局“馨美裝修”案例頁(yè)面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簡(jiǎn)介59
4.1.1 初識(shí)CSS359
4.1.2 CSS3的優(yōu)點(diǎn)59
4.1.3 CSS3的局限性60
4.1.4 CSS3編寫(xiě)規(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的基本語(yǔ)法和屬性值單位66
4.3.1 基本語(yǔ)法66
4.3.2 注意事項(xiàng)67
4.3.3 長(zhǎng)度、百分比單位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 偽類(lèi)選擇符76
4.4.5 偽元素選擇符78
4.4.6 案例—制作“馨美裝修”網(wǎng)站使用條款頁(yè)面79
4.5 文檔結(jié)構(gòu)與元素類(lèi)型81
4.5.1 文檔結(jié)構(gòu)的基本概念81
4.5.2 元素類(lèi)型82
4.6 繼承性、層疊性和優(yōu)先級(jí)83
4.6.1 繼承性83
4.6.2 層疊性84
4.6.3 優(yōu)先級(jí)84
4.7 綜合案例—制作“馨美裝修”幫助中心局部頁(yè)面85
習(xí)題488
第5章 使用CSS3修飾網(wǎng)頁(yè)元素89
5.1 CSS3字體屬性89
5.1.1 字體類(lèi)型屬性font-family89
5.1.2 字體尺寸屬性font-size89
5.1.3 字體傾斜屬性font-style90
5.1.4 小寫(xiě)字體屬性font-variant90
5.1.5 字體粗細(xì)font-weight90
5.2 CSS3文本屬性91
5.2.1 文本顏色屬性color91
5.2.2 行高屬性line-height91
5.2.3 文本水平對(duì)齊方式屬性text-align92
5.2.4 為文本添加修飾屬性text-decoration92
5.2.5 段落首行縮進(jìn)屬性text-indent92
5.2.6 文本的陰影屬性text-shadow92
5.2.7 元素內(nèi)部的空白屬性white-space93
5.2.8 文本的截?cái)嘈Ч麑傩詔ext-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 背景圖像起點(diǎn)屬性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 圖像作為列表項(xiàng)的標(biāo)記屬性list-style-image102
5.5.2 列表項(xiàng)標(biāo)記的位置屬性list-style-position102
5.5.3 標(biāo)記的類(lèi)型屬性list-style-type103
5.5.4 列表簡(jiǎn)寫(xiě)屬性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 單元格無(wú)內(nèi)容顯示方式屬性empty-cells107
5.6.5 案例—使用斑馬線(xiàn)表格制作裝修工程年度排行榜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)購(gòu)學(xué)堂頁(yè)面116
5.8.1 網(wǎng)購(gòu)學(xué)堂頁(yè)面布局規(guī)劃117
5.8.2 網(wǎng)購(gòu)學(xué)堂頁(yè)面的制作過(guò)程117
習(xí)題5122
第6章 CSS3盒模型124
6.1 盒模型概述124
6.1.1 盒子的組成124
6.1.2 盒子的大小125
6.1.3 塊級(jí)元素與行級(jí)元素的寬度和高度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浮動(dòng)屬性float139
6.3.3 清除浮動(dòng)屬性clear141
6.3.4 裁剪屬性clip142
6.3.5 元素顯示方式屬性display142
6.3.6 元素可見(jiàn)性屬性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 綜合案例—“馨美裝修”登錄頁(yè)面整體布局154
習(xí)題6155
第7章 Div+CSS布局頁(yè)面156
7.1 Div+CSS布局技術(shù)簡(jiǎn)介156
7.1.1 Div+CSS布局的優(yōu)點(diǎn)156
7.1.2 使用嵌套的Div實(shí)現(xiàn)頁(yè)面排版156
7.2 典型的Div+CSS整體頁(yè)面布局157
7.2.1 CSS布局類(lèi)型157
7.2.2 CSS布局樣式158
7.3 典型的局部布局161
7.3.1