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

目錄
第1章　網(wǎng)頁制作基礎(chǔ) 10
1.1　認(rèn)識網(wǎng)頁 10
1.1.1　網(wǎng)頁和網(wǎng)站 10
1.1.2　網(wǎng)頁的類型 11
1.1.3　動態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁 11
1.1.4　網(wǎng)頁的基本構(gòu)成元素 12
1.2　如何設(shè)計網(wǎng)頁 12
1.2.1　網(wǎng)頁設(shè)計的基本原則 13
1.2.2　網(wǎng)頁設(shè)計的成功要素 13
1.2.3　網(wǎng)頁的設(shè)計風(fēng)格和色彩搭配 14
1.3　網(wǎng)站設(shè)計要點(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è)計流程 17
1.4.1　網(wǎ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)頁編輯軟件簡介 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)頁文檔的關(guān)系 24
2.2　初識HTML和XHTML 24
2.3　HTML 24
2.3.1　HTML概述25
2.3.2　HTML的基本結(jié)構(gòu)25
2.3.3　HTML的基本語法26
2.3.4　HTML的主要功能26
2.3.5　HTML標(biāo)簽26
2.4　XHTML語法 32
2.5　初識CSS 33
2.6　本章小結(jié) 35
2.7　課后習(xí)題 35
2.7.1　課后習(xí)題1-創(chuàng)建一個簡單的html網(wǎng)頁 36
2.7.2　課后習(xí)題1-使用Dreamweaver創(chuàng)建頁面 36
第3章　CSS初體驗 38
3.1　編寫XHTML文檔 38
3.1.1　使用Dreamweaver新建XHTML框架文檔 38
3.1.2　手工編寫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)先級問題 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)站頁面 47
3.6.2　課后習(xí)題2-創(chuàng)建外部CSS文件 48
第4章　掌握CSS基本語法 50
4.1　選擇器 50
4.1.1　標(biāo)簽選擇器 50
4.1.2　類選擇器 52
4.1.3　ID選擇器 53
4.1.4　全局選擇器 55
4.1.5　組合選擇器 56
4.1.6　繼承選擇器 57
4.1.7　偽類選擇器 57
4.2　聲明 58
4.2.1　多重聲明 58
4.2.2　集體聲明 58
4.3　CSS的層疊原理 59
4.3.1　CSS樣式來源 59
4.3.2　CSS的繼承 59
4.3.3　選擇器的優(yōu)先級 61
4.3.4　important語句 64
4.4　CSS的單位 65
4.4.1　顏色單位 65
4.4.2　長度單位 68
4.5　本章小結(jié) 70
4.6　課后習(xí)題 70
4.6.1　課后習(xí)題1-實現(xiàn)水平菜單條 70
4.6.2　課后習(xí)題2-通過CSS控制整個頁面 71
第5章　Div+CSS布局頁面 72
5.1　初識Div+CSS 72
5.1.1　布局的流程 72
5.1.2 Div+CSS布局的優(yōu)勢 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　頁面元素的布局 79
5.3.1　塊級元素 80
5.3.2　行內(nèi)元素 80
5.4　CSS布局方式——浮動 81
5.4.1　兩個元素的浮動應(yīng)用 82
5.4.2　多個元素的浮動應(yīng)用 83
5.4.3　清除浮動 85
5.5　CSS布局定位 87
5.5.1　CSS的定位屬性 87
5.5.2　相對定位 88
5.5.3　絕對定位 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-制作歌曲專輯列表 98
5.8.2　課后習(xí)題2-給圖片加入信息 98
第6章　CSS排版頁面 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ù)雜的頁面排版 109
6.3.1　復(fù)雜的頁面排版——垂直布局 109
6.3.2　復(fù)雜的頁面排版——水平布局 112
6.4　本章小結(jié) 114
6.5　課后習(xí)題 114
6.5.1　課后習(xí)題1-創(chuàng)建復(fù)雜的頁面 114
6.5.2　課后習(xí)題2-布局圖像展示頁面 115
第7章　CSS控制頁面中的文本 116
7.1　字體 116
7.2　文字大小概述 118
7.2.1　設(shè)置文字大小 118
7.2.2　定義文字的相對大小 119
7.2.3　定義文字的絕對大小 120
7.3　字體顏色 121
7.4　字體粗細(xì) 122
7.5　斜體 123
7.6　下劃線、頂劃線和刪除線 123
7.7　屬性的縮寫法 123
7.8　段落屬性 125
7.8.1　段落的水平對齊方式 125
7.8.2　段落的垂直對齊方式 126
7.8.3　首行縮進(jìn) 127
7.8.4　行間距與字間距 128
7.8.5　文本轉(zhuǎn)換 129
7.8.6　處理空白符 129
7.9　文本的高級樣式 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-制作文章頁面 135
7.11.2　課后習(xí)題2-制作多種文本版面 136
第8章　CSS控制頁面背景 138
8.1　背景控制概述 138
8.1.1　背景控制原則 138
8.1.2　背景控制屬性 138
8.2　背景顏色控制 139
8.2.1　控制頁面背景顏色 139
8.2.2　設(shè)置區(qū)塊背景顏色 140
8.3　背景圖像控制 141
8.3.1　控制頁面背景圖片 142
8.3.2　背景圖的重復(fù) 143
8.3.3　背景圖的位置 144
8.3.4　背景圖像的滾動 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　實現(xiàn)動態(tài)背景 158
8.5　本章小結(jié) 160
8.6　課后習(xí)題 160
8.6.1　課后習(xí)題1-圖片評論頁面 160
8.6.2　課后習(xí)題2-創(chuàng)建外部CSS文件 161
第9章　CSS控制頁面中的圖片 162
9.1　使用CSS控制圖片的樣式 162
9.1.1　在網(wǎng)頁中插入圖片 162
9.1.2　控制圖片的大小 164
9.1.3　為圖像添加邊框 165
9.1.4　為圖像增加超鏈接 167
9.2　圖片對齊 168
9.2.1　水平對齊 168
9.2.2　垂直對齊 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-個人信息頁頭部 174
9.6.2　課后習(xí)題2-個人頁面圖冊 174
第10章　CSS控制列表 176
10.1　列表控制概述 176
10.2　列表的類型 177
10.2.1　無序列表 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　列表屬性的速寫法 187
10.4　使用列表制作實用菜單18