本書全面展現了Div+CSS進行網頁設計布局的方法，主要包括CSS的基本語法和概念，通過CSS樣式表設定文字、圖片、背景、表格、表單和選單等網頁元素的方法，通過Div+CSS進行頁面布局，以及CSS濾鏡的使用，著重講解如何用Div+CSS進行頁面布局。書中精心設定了大量課堂案例，幫助讀者提高實際操作能力。課後還提供了課後練習，可以幫助讀者鞏固所學到的知識。最後給出了6個完整的網頁綜合案例，讓讀者可以將所學到的知識綜合運用到實際的網頁設計製作中。隨書配套光碟中提供了書中所有課堂案例和課後習題的製作過程的教學視頻，以及源檔案和素材，能使讀者提高學習效率。隨書還提供教學用途的PPT課件，老師可直接使用或者修改後配合課程使用，便於提高教學質量。全書內容全面，講解通俗易懂，適合初學者和對網頁設計感興趣的讀者。本書內容豐富、結構清晰、循序漸進，注重思維鍛鍊與實踐套用，章節與案例之間相互呼應，適合作為CSS初學者的入門教材，也可以作為中高級用戶的參考。
基本介紹
- 書名：DIV+CSS網頁布局實用教程
- ISBN：978-7-115-36843-0
- 頁數：399頁
- 出版社：人民郵電出版社
- 出版時間：2015-02
目錄
第1章 網頁製作基礎 10
1.1 認識網頁 10
1.1.1 網頁和網站 10
1.1.2 網頁的類型 11
1.1.3 動態網頁與靜態網頁 11
1.1.4 網頁的基本構成元素 12
1.2 如何設計網頁 12
1.2.1 網頁設計的基本原則 13
1.2.2 網頁設計的成功要素 13
1.2.3 網頁的設計風格和色彩搭配 14
1.3 網站設計要點 14
1.3.1 為用戶考慮 14
1.3.2 主題突出 15
1.3.3 整體原則 16
1.3.4 內容與形式相統一 16
1.3.5 更新和維護 17
1.4 網站設計流程 17
1.4.1 網站項目的定義 17
1.4.2 網站策劃方案 17
1.4.3 網站內容規劃 17
1.4.4 獲得網站資源 18
1.5 常用網頁編輯軟體簡介 18
1.5.1 Dreamweaver 18
1.5.2 FrontPage 21
1.5.3 HomeSite 21
1.6 本章小結 21
1.7 課後習題 21
1.7.1 課後習題1-新建Dreamweaver文檔 22
1.7.2 課後習題2-新建Dreamweaver工作區 22
第2章 HTML和XHTML 24
2.1 了解瀏覽器和網頁文檔的關係 24
2.2 初識HTML和XHTML 24
2.3 HTML 24
2.3.1 HTML概述25
2.3.2 HTML的基本結構25
2.3.3 HTML的基本語法26
2.3.4 HTML的主要功能26
2.3.5 HTML標籤26
2.4 XHTML語法 32
2.5 初識CSS 33
2.6 本章小結 35
2.7 課後習題 35
2.7.1 課後習題1-創建一個簡單的html網頁 36
2.7.2 課後習題1-使用Dreamweaver創建頁面 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 在標籤中加入CSS樣式 39
3.2.2 在style/style標籤中加入樣式 41
3.2.3 鏈入外部CSS樣式表 42
3.2.4 優先權問題 44
3.3 CSS樣式表的規則 46
3.4 CSS的注釋 47
3.4.1 單行注釋 47
3.4.2 整段注釋 47
3.5 本章小結 47
3.6 課後習題 47
3.6.1 課後習題1-創建CSS結構的網站頁面 47
3.6.2 課後習題2-創建外部CSS檔案 48
第4章 掌握CSS基本語法 50
4.1 選擇器 50
4.1.1 標籤選擇器 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 選擇器的優先權 61
4.3.4 important語句 64
4.4 CSS的單位 65
4.4.1 顏色單位 65
4.4.2 長度單位 68
4.5 本章小結 70
4.6 課後習題 70
4.6.1 課後習題1-實現水平選單條 70
4.6.2 課後習題2-通過CSS控制整個頁面 71
第5章 Div+CSS布局頁面 72
5.1 初識Div+CSS 72
5.1.1 布局的流程 72
5.1.2 Div+CSS布局的優勢 73
5.2 了解盒模型 74
5.2.1 基本盒模型 74
5.2.2 邊距 74
5.2.3 填充 76
5.2.4 框線 77
5.2.5 內容 79
5.3 頁面元素的布局 79
5.3.1 塊級元素 80
5.3.2 行內元素 80
5.4 CSS布局方式——浮動 81
5.4.1 兩個元素的浮動套用 82
5.4.2 多個元素的浮動套用 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 本章小結 97
5.8 課後習題 97
5.8.1 課後習題1-製作歌曲專輯列表 98
5.8.2 課後習題2-給圖片加入信息 98
第6章 CSS排版頁面 100
6.1 固定寬度布局 100
6.1.1 一列居中布局 100
6.1.2 兩列居中布局 103
6.2 自適應寬度布局 105
6.2.1 一列寬度自適應布局 105
6.2.2 兩列布局——左側固定右側自適應 106
6.2.3 兩列布局——兩列均自適應布局 107
6.2.4 三列布局——兩側固定中間自適應 108
6.3 複雜的頁面排版 109
6.3.1 複雜的頁面排版——垂直布局 109
6.3.2 複雜的頁面排版——水平布局 112
6.4 本章小結 114
6.5 課後習題 114
6.5.1 課後習題1-創建複雜的頁面 114
6.5.2 課後習題2-布局圖像展示頁面 115
第7章 CSS控制頁面中的文本 116
7.1 字型 116
7.2 文字大小概述 118
7.2.1 設定文字大小 118
7.2.2 定義文字的相對大小 119
7.2.3 定義文字的絕對大小 120
7.3 字型顏色 121
7.4 字型粗細 122
7.5 斜體 123
7.6 下劃線、頂劃線和刪除線 123
7.7 屬性的縮寫法 123
7.8 段落屬性 125
7.8.1 段落的水平對齊方式 125
7.8.2 段落的垂直對齊方式 126
7.8.3 首行縮進 127
7.8.4 行間距與字間距 128
7.8.5 文本轉換 129
7.8.6 處理空白符 129
7.9 文本的高級樣式 131
7.9.1 陰影文本 132
7.9.2 溢出文本 132
7.9.3 控制文本換行 133
7.10 本章小結 135
7.11 課後習題 135
7.11.1 課後習題1-製作文章頁面 135
7.11.2 課後習題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 設定區塊背景顏色 140
8.3 背景圖像控制 141
8.3.1 控制頁面背景圖片 142
8.3.2 背景圖的重複 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 實現動態背景 158
8.5 本章小結 160
8.6 課後習題 160
8.6.1 課後習題1-圖片評論頁面 160
8.6.2 課後習題2-創建外部CSS檔案 161
第9章 CSS控制頁面中的圖片 162
9.1 使用CSS控制圖片的樣式 162
9.1.1 在網頁中插入圖片 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 設定混排間距 170
9.4 圖片特殊效果 171
9.4.1 圓角圖片 171
9.4.2 多色框線效果 173
9.5 本章小結 173
9.6 課後習題 173
9.6.1 課後習題1-個人信息頁頭部 174
9.6.2 課後習題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
