基本介紹
- 中文名：HTML+DIV+CSS網頁設計與布局實用教程
- 作者：徐洪峰
- 出版時間：2017年9月
- 出版社：清華大學出版社
- ISBN：9787302474463
- 定價：49 元
內容簡介,圖書目錄,
內容簡介
本書的作者為一線開發工程師、資深編程專家、專業培訓師，在網站開發方面有著豐富的經驗，並已出版過多本相關暢銷書，頗受廣大讀者認可。本書內容不局限於語法講解上，還通過一個個鮮活、典型的實例來達到學以致用的目的。每個語法都有相應的實例，每章後面又配有綜合小實例。
本書共21章，主要內容包括HTML入門，HTML基本標籤，用HTML設定文字、段落與列表，列表的建立和使用，用HTML創建精彩的圖像和多媒體頁面，用HTML創建超連結，用HTML創建表格，用表單創建互動式網頁，HTML 5的結構，CSS基礎知識，用CSS設計豐富的文字效果，用CSS設計圖像和背景，用CSS設計表格和表單樣式，用CSS製作連結與網站導航，CSS+DIV布局定位基礎，CSS盒子模型，盒子的浮動與定位，CSS+DIV布局方法，CSS 3入門基礎，設計和製作適合手機瀏覽的網頁，公司宣傳網站的布局。
本書內容翔實、結構清晰，既適合HTML和CSS的初學者自學使用，也可以作為各類院校相關專業的學生和電腦培訓班的教材或輔導用書。
圖書目錄
第1章 HTML入門 1
1.1 什麼是HTML 1
1.1.1 HTML的特點 1
1.1.2 HTML的歷史 2
1.2 HTML檔案的基本結構 2
1.2.1 HTML檔案結構 2
1.2.2 編寫HTML檔案的注意事項 4
1.3 HTML檔案的編寫方法 4
1.3.1 使用記事本編寫HTML頁面 4
1.3.2 使用Dreamweaver CC
編寫HTML頁面 6
1.4 網頁設計與開發的過程 7
1.4.1 明確網站定位 7
1.4.2 收集信息和素材 7
1.4.3 規劃欄目結構 8
1.4.4 設計網頁圖像 9
1.4.5 製作頁面 9
1.4.6 實現後台功能 10
1.4.7 網站的測試與發布 12
本章小結 12
練習題 13
第2章 HTML基本標籤 14
2.1 HTML頁面主體標籤 14
2.1.1 定義網頁背景色：bgcolor 14
2.1.2 設定背景圖片：background 15
2.1.3 設定文字顏色：text 16
2.1.4 設定連結文字屬性 17
2.1.5 設定頁面邊距 20
2.2 head部分標籤 21
2.2.1 標題標籤：<title> 21
2.2.2 定義頁面關鍵字 22
2.2.3 定義頁面描述 23
2.2.4 定義網頁編輯工具 24
2.2.5 定義作者信息 24
2.2.6 定義網頁文字及語言 25
2.2.7 定義網頁的定時跳轉 25
2.3 綜合實例——創建基本的HTML
檔案 26
本章小結 29
練習題 29
第3章 用HTML設定文字、段落
與列表 31
3.1 標題字 31
3.1.1 標題字標籤：<h> 31
3.1.2 標題字對齊屬性：align 32
3.2 插入其他標記 33
3.2.1 輸入空格符號 33
3.2.2 輸入特殊符號 34
3.3 設定段落的格式 35
3.3.1 段落標籤：<p> 35
3.3.2 段落的對齊屬性：align 36
3.3.3 不換行標籤：<nobr> 37
3.3.4 換行標籤：<br> 38
3.4 水平線標籤 39
3.4.1 插入水平線標籤：<hr> 39
3.4.2 設定水平線寬度與高度的
屬性：width、size 40
3.4.3 設定水平線的顏色：color 41
3.4.4 設定水平線的對齊方式：
align 42
3.4.5 水平線去掉陰影：noshade 43
3.5 使用<marquee>設定滾動效果 44
3.5.1 <marquee>標籤及其屬性 44
3.5.2 使用<marquee>標籤插入滾動
公告 45
3.6 綜合實例——設定頁面文本及段落 49
本章小結 51
練習題 52
第4章 列表的建立和使用 53
4.1 使用無序列表 53
4.1.1 無序列表標籤：<ul> 53
4.1.2 設定無序列表類型的
屬性type 54
4.1.3 選單列表標籤：<menu> 55
4.1.4 列表：<dir> 56
4.2 使用有序列表 58
4.2.1 有序列表標籤：<ol> 58
4.2.2 有序列表類型的屬性：type 59
4.2.3 有序列表的起始數值：start 60
4.3 列表條目元素<li> 61
4.3.1 項目符號的類型：type 61
4.3.2 條目編號：value 62
4.4 定義列表標籤<dl> 63
本章小結 65
練習題 65
第5章 用HTML創建精彩的圖像和
多媒體頁面 67
5.1 網頁中常見的圖像格式 67
5.2 插入圖像並設定圖像屬性 68
5.2.1 圖像標籤：<img> 68
5.2.2 圖像的源檔案：src 69
5.2.3 圖像的提示文字：alt 70
5.2.4 圖像的寬度和高度：width、
height 71
5.3 添加多媒體檔案 72
5.3.1 添加多媒體檔案標籤：
<embed> 72
5.3.2 設定自動運行：autostart 73
5.4 添加背景音樂 74
5.4.1 設定背景音樂：<bgsound> 74
5.4.2 設定循環播放次數：loop 75
5.5 插入Flash動畫 76
5.6 綜合實例 77
綜合實例1——創建多媒體網頁 78
綜合實例2——創建圖文混合排版
網頁 79
本章小結 82
練習題 82
第6章 用HTML創建超連結 84
6.1 超連結的基本概念 84
6.2 創建基本超連結 84
6.2.1 超連結標籤 85
6.2.2 設定目標視窗 86
6.3 創建圖像超連結 87
6.3.1 設定圖像超連結 87
6.3.2 設定圖像熱區連結 88
6.4 創建錨點連結 90
6.4.1 創建錨點 90
6.4.2 錨點連結 92
6.5 外部連結 95
6.5.1 連結到外部網站 96
6.5.2 連結到E-Mail 96
6.5.3 連結到FTP 97
6.5.4 連結到Telnet 98
6.5.5 下載檔案 99
6.6 綜合實例——給網頁添加連結 100
本章小結 102
練習題 102
第7章 用HTML創建表格 103
7.1 創建並設定表格屬性 103
7.1.1 表格的基本標籤：
<table><tr><td> 103
7.1.2 表格寬度和高度：width、
height 104
7.1.3 表格的標題：<caption> 105
7.1.4 表格的表頭：<th> 107
7.1.5 表格對齊方式：align 109
7.1.6 表格的框線寬度：border 110
7.1.7 表格框線顏色：bordercolor 111
7.1.8 單元格間距：cellspacing 112
7.1.9 單元格邊距：cellpadding 113
7.1.10 表格的背景色：bgcolor 114
7.1.11 表格的背景圖像：
background 115
7.2 表格的結構標籤 117
7.2.1 設計表頭樣式：<thead> 117
7.2.2 設計表主體樣式：<tbody> 118
7.2.3 設計表尾樣式：<tfoot> 120
7.3 綜合實例——使用表格排版網頁 121
本章小結 126
練習題 126
第8章 用表單創建互動式網頁 128
8.1 插入表單：<form> 128
8.1.1 處理動作：action 128
8.1.2 表單名稱：name 129
8.1.3 傳送方法：method 129
8.1.4 編碼方式：enctype 130
8.1.5 目標顯示方式：target 131
8.2 表單控制項：<input> 132
8.2.1 文本欄位：text 132
8.2.2 密碼域：password 134
8.2.3 單選按鈕：radio 135
8.2.4 複選框：checkbox 136
8.2.5 普通按鈕：button 138
8.2.6 提交按鈕：submit 139
8.2.7 重置按鈕：reset 140
8.2.8 圖像域：image 142
8.2.9 隱藏域：hidden 143
8.2.10 檔案域：file 144
8.3 選擇列表條目標籤：<option> 145
8.4 選擇列表標籤：<select> 147
8.4.1 高度屬性：size 147
8.4.2 多項選擇屬性：multiple 148
8.5 文本區域標籤：<textarea> 150
本章小結 151
練習題 151
第9章 HTML 5的結構 153
9.1 認識HTML 5 153
9.2 HTML 5的新特性 154
9.3 HTML 5與HTML 4的區別 155
9.3.1 HTML 5的語法變化 155
9.3.2 HTML 5中的標記方法 155
9.3.3 HTML 5語法中的3個
要點 156
9.4 新增的主體結構標籤 157
9.4.1 <article>標籤 157
9.4.2 <section>標籤 158
9.4.3 <nav>標籤 159
9.4.4 <aside>標籤 160
9.4.5 <time>標籤 161
9.4.6 pubdate屬性 162
9.5 新增的非主體結構標籤 163
9.5.1 <header>標籤 163
9.5.2 <hgroup>標籤 164
9.5.3 <footer>標籤 165
9.5.4 <address>標籤 166
本章小結 167
練習題 167
第10章 CSS基礎知識 169
10.1 為什麼要在網頁中加入CSS 169
10.1.1 什麼是CSS 169
10.1.2 使用CSS的好處 170
10.1.3 如何編寫CSS 171
10.1.4 CSS的基本語法 171
10.1.5 瀏覽器與CSS 172
10.2 基本CSS選擇器 172
10.2.1 標籤選擇器 173
10.2.2 class選擇器 173
10.2.3 ID選擇器 174
10.3 在HTML中使用CSS 176
10.3.1 連結外部樣式表 176
10.3.2 行內方式 177
10.3.3 嵌入外部樣式表 177
10.3.4 定義內部樣式表 177
本章小結 178
練習題 178
第11章 用CSS設計豐富的文字
效果 180
11.1 設計網頁中的文字樣式 180
11.1.1 字型 181
11.1.2 字號 182
11.1.3 加粗 183
11.1.4 樣式 184
11.1.5 變體屬性 185
11.1.6 文字修飾 186
11.2 設計文本的段落樣式 187
11.2.1 行高 187
11.2.2 對齊 188
11.2.3 縮進 190
11.2.4 單詞間距 191
11.2.5 首字下沉 192
11.2.6 大小寫轉換 192
11.3 綜合實例——用CSS排版網頁
文字 193
本章小結 197
練習題 197
第12章 用CSS設計圖像和背景 199
12.1 設定網頁的背景 199
12.1.1 背景顏色：background-
color 199
12.1.2 背景圖像：background-
image 200
12.2 設定背景圖像的屬性 202
12.2.1 設定背景重複：
background-repeat 202
12.2.2 設定固定背景：
background-attachment 203
12.2.3 設定背景定位：
background-position 204
12.3 設定網頁圖像的樣式 206
12.3.1 設定圖像框線 206
12.3.2 圖文混合排版 208
12.4 綜合實例——給圖片添加框線 209
本章小結 212
練習題 212
第13章 用CSS設計表格和表單
樣式 214
13.1 網頁中的表格 214
13.1.1 表格對象標籤 214
13.1.2 在Dreamweaver中插入
表格 215
13.1.3 設定表格的顏色 216
13.1.4 設定表格的框線樣式 217
13.1.5 設定表格的陰影 219
13.2 網頁中的表單 219
13.2.1 表單對象 219
13.2.2 表單標籤 220
13.2.3 表單的布局設計 220
13.2.4 設定框線樣式 224
13.2.5 設定背景樣式 224
13.2.6 設定輸入文本的樣式 225
13.3 綜合實例 225
綜合實例1——製作變換背景色的
表格 225
綜合實例2——設計表單的樣式 227
本章小結 229
練習題 230
第14章 用CSS製作連結與網站
導航 231
14.1 連結標籤 231
14.1.1 a:link 231
14.1.2 a:visited 232
14.1.3 a:active 233
14.1.4 a:hover 234
14.2 創建按鈕式超連結 235
14.3 控制滑鼠指針 237
14.4 設定項目列表樣式 238
14.4.1 列表符號類型：list-style-
type 238
14.4.2 列表符號的混用 241
14.4.3 列表圖像屬性：list-style-
image 242
14.4.4 列表綜合屬性：list-style 243
14.5 創建簡單的導航選單 244
14.5.1 簡單的豎直排列選單 244
14.5.2 橫豎自由轉換導航選單 246
本章小結 247
練習題 247
第15章 CSS+DIV布局定位基礎 248
15.1 網站與Web標準 248
15.1.1 什麼是Web標準 248
15.1.2 為什麼要建立Web標準 249
15.1.3 怎樣改善現有網站 250
15.2 <div>標籤與<span>標籤 251
15.2.1 <div>概述 251
15.2.2 <div>與<span>的區別 252
本章小結 254
練習題 254
第16章 CSS盒子模型 255
16.1 “盒子”與“模型”的概念 255
16.2 框線：border 257
16.2.1 框線寬度：border-width 257
16.2.2 框線顏色：border-color 258
16.2.3 框線樣式：border-style 259
16.3 設定內邊距：padding 261
16.3.1 頂部屬性：padding-top 261
16.3.2 右側屬性：padding-right 262
16.3.3 底部屬性：padding-
bottom 263
16.3.4 左側屬性：padding-left 264
16.4 設定外邊距：margin 265
16.4.1 頂部邊界屬性：margin-
top 266
16.4.2 右側邊界屬性：margin-
right 267
16.4.3 底部邊界屬性：margin-
bottom 268
16.4.4 左側邊界屬性：margin-
left 268
本章小結 269
練習題 270
第17章 盒子的浮動與定位 271
17.1 盒子的浮動 271
17.1.1 元素的浮動屬性：float 271
17.1.2 清除浮動屬性：clear 275
17.2 元素的定位 277
17.2.1 元素的定位屬性：
position 277
17.2.2 上邊偏移屬性top、下邊偏移
屬性bottom 279
17.2.3 左邊偏移屬性left、右邊偏移
屬性right 280
17.3 盒子的定位 281
17.3.1 絕對定位：absolute 282
17.3.2 固定定位：fixed 284
17.3.3 相對定位：relative 286
17.3.4 靜態定位：static 288
17.4 z-index空間位置 289
本章小結 291
練習題 291
第18章 CSS+DIV布局方法 292
18.1 CSS布局理念 292
18.2 固定寬度布局 293
18.2.1 1列固定寬度 294
18.2.2 兩列固定寬度 295
18.2.3 圓角框 297
18.3 可變寬度布局 299
18.3.1 1列自適應 299
18.3.2 兩列寬度自適應 300
18.3.3 兩列右列寬度自適應 302
18.3.4 3列浮動中間寬度自適應 302
18.3.5 3行2列居中高度自適應 304
18.4 CSS布局與傳統的表格方式布局
分析 306
本章小結 309
練習題 309
第19章 CSS 3入門基礎 310
19.1 預覽激動人心的CSS 3 310
19.1.1 CSS 3的發展歷史 310
19.1.2 CSS 3新增特性 311
19.1.3 主流瀏覽器對CSS 3的
支持 315
19.2 使用CSS 3實現圓角表格 316
19.3 使用CSS 3製作圖片滾動選單 318
19.4 使用CSS 3製作文字立體效果 323
19.5 使用CSS 3製作多彩的網頁
圖片庫 324
本章小結 327
練習題 328
第20章 設計和製作適合手機瀏覽的
網頁 329
20.1 怎樣進行網站策劃 329
20.1.1 網站策劃的原則 329
20.1.2 網站策劃的關鍵點 330
20.2 網站的定位 331
20.3 確定網站的目標用戶 332
20.4 網站的內容策劃 333
20.4.1 網站內容策劃的重要性 333
20.4.2 如何做好網站內容策劃 333
20.5 手機網頁設計 334
20.6 整體布局 335
20.6.1 設計分析 335
20.6.2 排版架構 336
20.7 製作首頁 339
20.7.1 定義頁面的整體樣式 339
20.7.2 body_header部分製作 340
20.7.3 body_banner部分製作 340
20.7.4 body_main部分製作 342
20.7.5 body_footer部分製作 344
本章小結 345
練習題 345
第21章 公司宣傳網站的布局 347
21.1 案例概述 347
21.2 內容分析 348
21.3 HTML結構設計 349
21.4 頁面方案設計 351
21.5 定義頁面的整體樣式 352
21.6 製作頁面頭部 354
21.6.1 製作頁面頭部的結構 355
21.6.2 定義頁面頭部的樣式 355
21.7 製作左側導航 356
21.7.1 製作左側導航部分的
結構 357
21.7.2 定義左側導航的樣式 357
21.8 製作聯繫我們部分 359
21.8.1 製作聯繫我們部分的
結構 359
21.8.2 定義联系我們內容的
樣式 359
21.9 製作公司介紹部分 360
21.9.1 製作公司介紹部分結構 360
21.9.2 定義公司介紹部分的
樣式 360
21.10 製作圖片展示和新聞動態 361
21.10.1 製作頁面結構 361
21.10.2 定義頁面樣式 362
21.11 製作酒店訂購部分 363
21.11.1 製作頁面結構 363
21.11.2 定義頁面樣式 364
21.12 製作底部著作權部分 365
本章小結 365
練習題 366
