DIV+CSS網(wǎng)頁(yè)布局實(shí)用教程

目錄
第1章　網(wǎng)頁(yè)制作基礎(chǔ) 10
1.1　認(rèn)識(shí)網(wǎng)頁(yè) 10
1.1.1　網(wǎng)頁(yè)和網(wǎng)站 10
1.1.2　網(wǎng)頁(yè)的類(lèi)型 11
1.1.3　動(dòng)態(tài)網(wǎng)頁(yè)與靜態(tài)網(wǎng)頁(yè) 11
1.1.4　網(wǎng)頁(yè)的基本構(gòu)成元素 12
1.2　如何設(shè)計(jì)網(wǎng)頁(yè) 12
1.2.1　網(wǎng)頁(yè)設(shè)計(jì)的基本原則 13
1.2.2　網(wǎng)頁(yè)設(shè)計(jì)的成功要素 13
1.2.3　網(wǎng)頁(yè)的設(shè)計(jì)風(fēng)格和色彩搭配 14
1.3　網(wǎng)站設(shè)計(jì)要點(diǎn) 14
1.3.1　為用戶考慮 14
1.3.2　主題突出 15
1.3.3　整體原則 16
1.3.4　內(nèi)容與形式相統(tǒng)一 16
1.3.5　更新和維護(hù) 17
1.4　網(wǎng)站設(shè)計(jì)流程 17
1.4.1　網(wǎng)站項(xiàng)目的定義 17
1.4.2　網(wǎng)站策劃方案 17
1.4.3　網(wǎng)站內(nèi)容規(guī)劃 17
1.4.4　獲得網(wǎng)站資源 18
1.5　常用網(wǎng)頁(yè)編輯軟件簡(jiǎn)介 18
1.5.1　Dreamweaver 18
1.5.2　FrontPage 21
1.5.3　HomeSite 21
1.6　本章小結(jié) 21
1.7　課后習(xí)題 21
1.7.1　課后習(xí)題1-新建Dreamweaver文檔 22
1.7.2　課后習(xí)題2-新建Dreamweaver工作區(qū) 22
第2章　HTML和XHTML 24
2.1　了解瀏覽器和網(wǎng)頁(yè)文檔的關(guān)系 24
2.2　初識(shí)HTML和XHTML 24
2.3　HTML 24
2.3.1　HTML概述25
2.3.2　HTML的基本結(jié)構(gòu)25
2.3.3　HTML的基本語(yǔ)法26
2.3.4　HTML的主要功能26
2.3.5　HTML標(biāo)簽26
2.4　XHTML語(yǔ)法 32
2.5　初識(shí)CSS 33
2.6　本章小結(jié) 35
2.7　課后習(xí)題 35
2.7.1　課后習(xí)題1-創(chuàng)建一個(gè)簡(jiǎn)單的html網(wǎng)頁(yè) 36
2.7.2　課后習(xí)題1-使用Dreamweaver創(chuàng)建頁(yè)面 36
第3章　CSS初體驗(yàn) 38
3.1　編寫(xiě)XHTML文檔 38
3.1.1　使用Dreamweaver新建XHTML框架文檔 38
3.1.2　手工編寫(xiě)XHTML文檔 39
3.2　使CSS在XHTML文檔中生效 39
3.2.1　在標(biāo)簽中加入CSS樣式 39
3.2.2　在標(biāo)簽中加入樣式 41
3.2.3　鏈入外部CSS樣式表 42
3.2.4　優(yōu)先級(jí)問(wèn)題 44
3.3　CSS樣式表的規(guī)則 46
3.4　CSS的注釋 47
3.4.1　單行注釋 47
3.4.2　整段注釋 47
3.5　本章小結(jié) 47
3.6　課后習(xí)題 47
3.6.1　課后習(xí)題1-創(chuàng)建CSS結(jié)構(gòu)的網(wǎng)站頁(yè)面 47
3.6.2　課后習(xí)題2-創(chuàng)建外部CSS文件 48
第4章　掌握CSS基本語(yǔ)法 50
4.1　選擇器 50
4.1.1　標(biāo)簽選擇器 50
4.1.2　類(lèi)選擇器 52
4.1.3　ID選擇器 53
4.1.4　全局選擇器 55
4.1.5　組合選擇器 56
4.1.6　繼承選擇器 57
4.1.7　偽類(lèi)選擇器 57
4.2　聲明 58
4.2.1　多重聲明 58
4.2.2　集體聲明 58
4.3　CSS的層疊原理 59
4.3.1　CSS樣式來(lái)源 59
4.3.2　CSS的繼承 59
4.3.3　選擇器的優(yōu)先級(jí) 61
4.3.4　important語(yǔ)句 64
4.4　CSS的單位 65
4.4.1　顏色單位 65
4.4.2　長(zhǎng)度單位 68
4.5　本章小結(jié) 70
4.6　課后習(xí)題 70
4.6.1　課后習(xí)題1-實(shí)現(xiàn)水平菜單條 70
4.6.2　課后習(xí)題2-通過(guò)CSS控制整個(gè)頁(yè)面 71
第5章　Div+CSS布局頁(yè)面 72
5.1　初識(shí)Div+CSS 72
5.1.1　布局的流程 72
5.1.2 Div+CSS布局的優(yōu)勢(shì) 73
5.2　了解盒模型 74
5.2.1　基本盒模型 74
5.2.2　邊距 74
5.2.3　填充 76
5.2.4　邊框 77
5.2.5　內(nèi)容 79
5.3　頁(yè)面元素的布局 79
5.3.1　塊級(jí)元素 80
5.3.2　行內(nèi)元素 80
5.4　CSS布局方式——浮動(dòng) 81
5.4.1　兩個(gè)元素的浮動(dòng)應(yīng)用 82
5.4.2　多個(gè)元素的浮動(dòng)應(yīng)用 83
5.4.3　清除浮動(dòng) 85
5.5　CSS布局定位 87
5.5.1　CSS的定位屬性 87
5.5.2　相對(duì)定位 88
5.5.3　絕對(duì)定位 89
5.5.4　固定定位 91
5.6　控制溢出元素 92
5.6.1　overfl ow93
5.6.2　overfl ow-x 95
5.6.3　overfl ow-y 96
5.7　本章小結(jié) 97
5.8　課后習(xí)題 97
5.8.1　課后習(xí)題1-制作歌曲專(zhuān)輯列表 98
5.8.2　課后習(xí)題2-給圖片加入信息 98
第6章　CSS排版頁(yè)面 100
6.1　固定寬度布局 100
6.1.1　一列居中布局 100
6.1.2　兩列居中布局 103
6.2　自適應(yīng)寬度布局 105
6.2.1　一列寬度自適應(yīng)布局 105
6.2.2　兩列布局——左側(cè)固定右側(cè)自適應(yīng) 106
6.2.3　兩列布局——兩列均自適應(yīng)布局 107
6.2.4　三列布局——兩側(cè)固定中間自適應(yīng) 108
6.3　復(fù)雜的頁(yè)面排版 109
6.3.1　復(fù)雜的頁(yè)面排版——垂直布局 109
6.3.2　復(fù)雜的頁(yè)面排版——水平布局 112
6.4　本章小結(jié) 114
6.5　課后習(xí)題 114
6.5.1　課后習(xí)題1-創(chuàng)建復(fù)雜的頁(yè)面 114
6.5.2　課后習(xí)題2-布局圖像展示頁(yè)面 115
第7章　CSS控制頁(yè)面中的文本 116
7.1　字體 116
7.2　文字大小概述 118
7.2.1　設(shè)置文字大小 118
7.2.2　定義文字的相對(duì)大小 119
7.2.3　定義文字的絕對(duì)大小 120
7.3　字體顏色 121
7.4　字體粗細(xì) 122
7.5　斜體 123
7.6　下劃線、頂劃線和刪除線 123
7.7　屬性的縮寫(xiě)法 123
7.8　段落屬性 125
7.8.1　段落的水平對(duì)齊方式 125
7.8.2　段落的垂直對(duì)齊方式 126
7.8.3　首行縮進(jìn) 127
7.8.4　行間距與字間距 128
7.8.5　文本轉(zhuǎn)換 129
7.8.6　處理空白符 129
7.9　文本的高級(jí)樣式 131
7.9.1　陰影文本 132
7.9.2　溢出文本 132
7.9.3　控制文本換行 133
7.10　本章小結(jié) 135
7.11　課后習(xí)題 135
7.11.1　課后習(xí)題1-制作文章頁(yè)面 135
7.11.2　課后習(xí)題2-制作多種文本版面 136
第8章　CSS控制頁(yè)面背景 138
8.1　背景控制概述 138
8.1.1　背景控制原則 138
8.1.2　背景控制屬性 138
8.2　背景顏色控制 139
8.2.1　控制頁(yè)面背景顏色 139
8.2.2　設(shè)置區(qū)塊背景顏色 140
8.3　背景圖像控制 141
8.3.1　控制頁(yè)面背景圖片 142
8.3.2　背景圖的重復(fù) 143
8.3.3　背景圖的位置 144
8.3.4　背景圖像的滾動(dòng) 146
8.4　CSS 3.0新增背景屬性 148
8.4.1　background-origin 148
8.4.2　background-clip 151
8.4.3　background-size 153
8.4.4　multiple background 156
8.4.5　實(shí)現(xiàn)動(dòng)態(tài)背景 158
8.5　本章小結(jié) 160
8.6　課后習(xí)題 160
8.6.1　課后習(xí)題1-圖片評(píng)論頁(yè)面 160
8.6.2　課后習(xí)題2-創(chuàng)建外部CSS文件 161
第9章　CSS控制頁(yè)面中的圖片 162
9.1　使用CSS控制圖片的樣式 162
9.1.1　在網(wǎng)頁(yè)中插入圖片 162
9.1.2　控制圖片的大小 164
9.1.3　為圖像添加邊框 165
9.1.4　為圖像增加超鏈接 167
9.2　圖片對(duì)齊 168
9.2.1　水平對(duì)齊 168
9.2.2　垂直對(duì)齊 168
9.3　圖文混排 169
9.3.1　文本混排 169
9.3.2　設(shè)置混排間距 170
9.4　圖片特殊效果 171
9.4.1　圓角圖片 171
9.4.2　多色邊框效果 173
9.5　本章小結(jié) 173
9.6　課后習(xí)題 173
9.6.1　課后習(xí)題1-個(gè)人信息頁(yè)頭部 174
9.6.2　課后習(xí)題2-個(gè)人頁(yè)面圖冊(cè) 174
第10章　CSS控制列表 176
10.1　列表控制概述 176
10.2　列表的類(lèi)型 177
10.2.1　無(wú)序列表 177
10.2.2　有序列表 179
10.2.3　定義列表 180
10.3　改變列表符的樣式 181
10.3.1　使用自帶的列表符 181
10.3.2　用背景圖片改變列表符 184
10.3.3　改變列表符的位置 185
10.3.4　列表屬性的速寫(xiě)法 187
10.4　使用列表制作實(shí)用菜單18