本書以HTML語言為基礎，圍繞最新的CSS技術精髓展開深入講解，主要內容包括認識網站開發、網頁文字和圖片、超連結、表格、多媒體、滾動字幕、列表、表單、框架、設定文本樣式、設定網頁背景樣式、設定框線和邊距樣式、設定表格和列表樣式、控制元素布局、網頁布局與設計技巧等。 本書結構合理、條理清晰、實用性強，從第2章開始，每一個技術的講解都附有具體的實例，可供讀者實際操作使用。此外，每章都附有習題和上機指導，供課後練習和上機實驗。 本書可以作為高等院校計算機科學與技術、軟體工程、網路工程、計算機套用等相關專業“網頁設計”課程的教材，也可供從事網頁設計與製作人員自學參考。
基本介紹
- 中文名：HTML+CSS+DIV網頁設計與布局
- 作者：聶斌
- 日期：2013年10月
- 頁數：318
目錄
第一篇 認識網站和網頁
第1章 認識網站開發 2
1.1 認識網站開發 2
1.1.1 網頁設計概述 2
1.1.2 網頁構成元素 2
1.1.3 網站建設流程 3
1.1.4 網站開發軟體 4
1.2 HTML基本概念 5
1.2.1 HTML簡介 6
1.2.2 HTML基本結構 6
1.3 一個簡單的HTML實例 6
1.3.1 編寫HTML代碼 6
1.3.2 運行HTML檔案查看效果 8
1.4 HTML基本標記 8
1.4.1 檔案類型標記 8
1.4.2 HTML頭標記 9
1.4.3 HTML主體標記 9
1.4.4 頁面標題 9
1.5 小結 10
本章習題 10
第二篇 HTML學習篇
第2章 網頁文字和圖片 12
2.1 文字格式 12
2.1.1 設定文字大小 12
2.1.2 設定字型 13
2.1.3 設定字型顏色 15
2.1.4 加粗與斜體 18
2.1.5 下劃線與刪除線 19
2.1.6 上標與下標 20
2.1.7 等寬字 21
2.2 與文字排版相關的元素 21
2.2.1 文本縮進 21
2.2.2 換行 22
2.2.3 段落 23
2.2.4 段落居中 23
2.2.5 預定義格式 24
2.2.6 水平分隔線 25
2.3 文字閃爍 26
2.4 設定網頁背景顏色 27
2.5 在網頁中插入圖像 28
2.6 設定背景圖片 29
2.7 小結 30
本章習題 30
上機指導 31
實驗一：練習使用FONT元素來設定文字的大小、顏色和字型 31
實驗二：練習使用與文字排版相關的元素來設定文字的段落的樣式 31
實驗三：練習使用BACKGROUND屬性來設定網頁的背景圖片 32
第3章 超連結 34
3.1 創建超連結 34
3.1.1 超連結標記 34
3.1.2 連結地址 35
3.1.3 打開連結的方式 37
3.2 錨點 37
3.2.1 創建錨點 38
3.2.2 連結到本頁錨點 38
3.2.3 連結到其他網頁的錨點 39
3.3 圖像的超連結 40
3.3.1 將整個圖像設為超連結 40
3.3.2 設定圖像熱點區域 41
3.4 小結 43
本章習題 43
上機指導 44
實驗一：練習使用A標記創建一個以新視窗打開的超連結 44
實驗二：練習使用A標記創建一個連結到其他網頁的錨點連結 44
實驗三：練習使用A標記設定一個矩形的圖像熱點區域 46
第4章 表格 47
4.1 創建表格 47
4.2 表格屬性 48
4.2.1 表格寬度 48
4.2.2 表格高度 49
4.2.3 表格背景圖片 51
4.2.4 單元格間距 52
4.2.5 表格內單元格與文字的距離 54
4.3 表格框線 55
4.3.1 框線寬度 55
4.3.2 框線顏色 57
4.3.3 亮框線顏色 58
4.3.4 暗框線顏色 58
4.4 設定表格行的對齊方式 59
4.4.1 垂直對齊方式 59
4.4.2 水平對齊方式 60
4.5 行和列的合併 61
4.5.1 列的合併 62
4.5.2 行的合併 63
4.6 表格結構 64
4.6.1 表頭 64
4.6.2 主體 65
4.6.3 表尾 66
4.7 表格標題 68
4.8 表格嵌套 69
4.9 小結 70
本章習題 71
上機指導 72
實驗一：練習使用TABLE元素創建一個表格 72
實驗二：練習使用TABLE元素中的各種屬性創建一個課程表 73
實驗三：練習使用TABLE元素創建嵌套表格 74
第5章 多媒體、滾動字幕和列表 76
5.1 多媒體元素 76
5.1.1 插入多媒體元素 76
5.1.2 循環播放 77
5.1.3 自動播放 77
5.1.4 隱藏多媒體元素 78
5.2 插入背景音樂 80
5.3 滾動字幕 80
5.3.1 添加滾動字幕 81
5.3.2 滾動方向 81
5.3.3 滾動方式 82
5.3.4 滾動字幕背景顏色 83
5.3.5 滾動速度 84
5.3.6 滾動延遲 84
5.3.7 滾動次數 86
5.3.8 滾動字幕空白空間 86
5.3.9 設定滑鼠經過效果 87
5.4 無序列表 88
5.4.1 無序列表結構 88
5.4.2 無序列表的列表項樣式 89
5.5 有序列表 90
5.5.1 有序列表結構 91
5.5.2 有序列表的列表項樣式 92
5.6 嵌套列表 93
5.7 定義列表 94
5.8 目錄列表 96
5.9 選單列表 96
5.10 小結 98
本章習題 98
上機指導 99
實驗一：練習使用EMBED元素插入一個多媒體元素 99
實驗二：練習使用MARQUEE元素添加一個滾動字幕 100
實驗三：練習使用UL元素和OL元素創建一個嵌套列表 100
第6章 表單 102
6.1 添加表單 102
6.1.1 連結跳轉 102
6.1.2 連結跳轉方式 103
6.1.3 表單名稱 103
6.2 輸入標籤 104
6.2.1 文本框 104
6.2.2 密碼框 105
6.2.3 單選框 105
6.2.4 複選框 107
6.2.5 提交按鈕 107
6.2.6 重置按鈕 108
6.2.7 圖像按鈕 109
6.2.8 檔案域 110
6.2.9 隱藏域 111
6.3 下拉列表 112
6.4 文本域 113
6.5 小結 114
本章習題 114
上機指導 115
實驗一：練習使用FORM元素插入一個表單 115
實驗二：練習在表單元素中添加不同的表單控制項 116
實驗三：練習使用在表單元素中添加下拉列表 117
第7章 框架 118
7.1 創建框架 118
7.2 分割視窗 118
7.2.1 上下分割 118
7.2.2 左右分割 121
7.2.3 視窗的嵌套 122
7.3 設定框架框線 123
7.3.1 設定框架框線顯示或隱藏 123
7.3.2 設定框架框線寬度 124
7.3.3 設定框架框線顏色 125
7.4 框架屬性 126
7.4.1 設定框架滾動條顯示 126
7.4.2 固定框架 126
7.4.3 不支持框架標記 128
7.5 在框架中使用連結 128
7.6 浮動框架 132
7.6.1 插入浮動框架 132
7.6.2 浮動框架大小 133
7.6.3 浮動框架對齊方式 133
7.6.4 浮動框架頁面的連結 134
7.7 小結 135
本章習題 136
上機指導 137
實驗一：練習使用FRAMESET元素創建一個框架 137
實驗二：練習使用FRAMESET元素創建一個嵌套框架 138
實驗三：練習使用IFRAME元素創建一個浮動框架 138
第三篇 CCS學習篇
第8章 認識CSS 141
8.1 CSS簡介 141
8.2 CSS樣式表的設定方法 141
8.2.1 內聯樣式表 141
8.2.2 內部樣式表 142
8.2.3 外部樣式表 143
8.2.4 引用多個樣式表 144
8.2.5 使用@import引用外部樣式表 145
8.2.6 CSS注釋 146
8.3 選擇符 147
8.3.1 類型選擇符 147
8.3.2 類選擇符 148
8.3.3 ID選擇符 151
8.3.4 包含選擇符 152
8.3.5 選擇符分組 156
8.3.6 通用選擇符 157
8.3.7 子選擇符 159
8.3.8 相鄰選擇符 161
8.3.9 屬性選擇符 162
8.4 偽類和偽元素 166
8.4.1 超連結的偽類 167
8.4.2 偽元素 168
8.5 CSS優先權 169
8.6 CSS中的單位 172
8.6.1 顏色單位 172
8.6.2 長度單位 172
8.6.3 時間單位 173
8.6.4 角度單位 173
8.6.5 頻率單位 173
8.7 小結 173
本章習題 173
上機指導 175
實驗一：練習使用CSS內部樣式表設定網頁樣式 175
實驗二：練習使用CSS外部樣式表設定網頁樣式 175
實驗三：練習使用CSS偽類設定超連結的樣式 176
第9章 設定文字和文本樣式 178
9.1 設定文字樣式 178
9.1.1 字型設定 178
9.1.2 設定文字大小 179
9.1.3 設定粗體 181
9.1.4 設定文字顏色 181
9.1.5 設定斜體 183
9.1.6 綜合設定 183
9.2 設定文本樣式 184
9.2.1 設定陰影效果 185
9.2.2 大小寫轉換 185
9.2.3 文本縮進 187
9.2.4 文本的水平對齊方式 188
9.2.5 文本的垂直對齊方式 189
9.2.6 設定文本流入方向 191
9.2.7 設定文本修飾 192
9.3 空白與換行 193
9.3.1 空格的處理方式 194
9.3.2 字內換行 195
9.4 設定間距 197
9.4.1 行間距 197
9.4.2 字間距 199
9.4.3 詞間距 201
9.5 小結 203
本章習題 203
上機指導 203
實驗一：練習使用font屬性綜合設定文字樣式 204
實驗二：練習使用不同的屬性設定文本的樣式 204
實驗三：練習使用不同的屬性設定文本的間距 205
第10章 設定背景、框線、邊距和補白 206
10.1 背景顏色 206
10.2 背景圖像 207
10.2.1 設定背景圖像 207
10.2.2 設定固定背景圖像 209
10.2.3 設定背景圖像平鋪方式 210
10.2.4 背景圖像定位 213
10.3 框線 215
10.3.1 設定框線樣式 215
10.3.2 設定不同的框線樣式 217
10.3.3 設定框線寬度 218
10.3.4 設定不同的框線寬度 220
10.3.5 設定框線顏色 222
10.3.6 設定不同的框線顏色 224
10.3.7 綜合設定框線效果 225
10.4 邊距 226
10.4.1 設定上邊距 227
10.4.2 設定下邊距 227
10.4.3 設定左邊距 228
10.4.4 設定右邊距 229
10.4.5 綜合設定邊距 230
10.5 補白 231
10.5.1 設定頂端補白 231
10.5.2 設定底部補白 232
10.5.3 設定左側補白 233
10.5.4 設定右側補白 234
10.5.5 綜合設定補白 234
10.6 小結 235
本章習題 235
上機指導 235
實驗一：練習使用背景圖像屬性綜合設定背景圖像的樣式 237
實驗二：練習使用框線屬性綜合設定元素框線的樣式 237
實驗三：練習使用margin屬性和padding屬性綜合設定元素的邊距和補白 238
第11章 設定表格、列表和滾動條樣式 240
11.1 表格 240
11.1.1 合併表格框線 240
11.1.2 定義表格框線間距 242
11.1.3 定義表格標題位置 244
11.1.4 設定表格布局 246
11.2 列表 248
11.2.1 設定列表符號樣式 248
11.2.2 使用圖片設定列表樣式 251
11.2.3 列表符號顯示位置 252
11.2.4 綜合設定列表樣式 253
11.3 滾動條 254
11.3.1 設定滾動條顏色 254
11.3.2 設定滾動條亮框線顏色 255
11.3.3 設定滾動條暗框線顏色 256
11.3.4 設定滾動條方向箭頭顏色 257
11.3.5 設定滾動條基準色 258
11.4 小結 260
本章習題 260
上機指導 260
實驗一：練習使用CSS中的表格屬性設定表格的樣式 261
實驗二：練習使用CSS中的列表屬性設定列表的樣式 261
實驗三：練習使用CSS中的滾動條屬性設定滾動條的樣式 262
第四篇 布局學習篇
第12章 控制元素布局 265
12.1 塊級元素和內聯元素 265
12.1.1 塊級元素和內聯元素的概念 265
12.1.2 div元素和span元素 265
12.2 定位 267
12.2.1 定位方式 267
12.2.2 偏移 268
12.2.3 綜合運用 268
12.2.4 定位元素的層疊次序 272
12.3 浮動 273
12.3.1 浮動的概念 274
12.3.2 設定浮動 274
12.3.3 清除浮動 275
12.4 溢出與剪下 276
12.4.1 溢出內容的設定 277
12.4.2 設定水平方向超出範圍的處理方式 278
12.4.3 設定垂直方向超出範圍的處理方式 279
12.4.4 內容的剪下 281
12.5 對象的顯示與隱藏 282
12.6 小結 283
本章習題 283
上機指導 284
實驗一：練習使用定位設定元素的位置 284
實驗二：練習使用浮動設定元素的位置 285
實驗三：練習使用清除浮動清除元素的浮動效果 286
第13章 網頁布局與設計技巧 287
13.1 網頁布局 287
13.1.1 網頁大小 287
13.1.2 網頁欄目劃分 288
13.1.3 表格布局 289
13.1.4 CSS布局 292
13.2 CSS布局技巧 293
13.2.1 一欄布局 293
13.2.2 二欄布局 295
13.2.3 多欄布局 296
13.3 小結 298
本章習題 298
上機指導 299
實驗一：利用表格設計網頁 299
實驗二：利用CSS設計網頁 300
實驗三：利用CSS對網頁進行布局 301
第14章 網頁布局綜合案例——寶貝屋網上商店 302
14.1 案例分析 302
14.2 內容分析 303
14.3 原型設計 303
14.4 布局設計 305
14.4.1 整體樣式設計 305
14.4.2 頁頭部分 306
14.4.3 內容部分 310
14.4.4 頁腳部分 315
14.5 互動效果設計 316
14.5.1 頂部導航欄 316
14.5.2 主導航欄 317
14.5.3 賬號區 317
14.5.4 圖像框線 317
14.5.5 產品分類 318
14.6 小結 318
