《HTML+CSS網頁設計指南》是2010年清華大學出版社出版的圖書，作者是趙輝。本書主要介紹了頁面前端技術的開發，即常說的“html+css+javascript”。
基本介紹
- 書名：HTML+CSS網頁設計指南
- 作者： 趙輝
- ISBN：9787302213024
- 頁數：384頁
- 出版社：清華大學出版社
- 出版時間：2010 年1月
- 開本：16開
內容簡介,目錄,
內容簡介
現在的web設計理念較之於前兩年，已經發生了很大的改變，css比傳統的屬性標籤使頁面變得更漂亮，而將來，頁面中要求的不僅僅是美觀，甚至是越來越多的互動功能，javascript即是目前最流行的頁面腳本語言。
2009年，網際網路巨頭google公司在全球推廣google chrome瀏覽器，正如chrome瀏覽器本身：“今天，我們日常生活所用的網際網路不再僅僅是網頁，而是應用程式。”本書針對當前網頁的開發，詳細介紹了css的使用法則，不僅如此，本書同時注重於javascript的使用，目的就在於不僅著眼於今天最流行、最成熟的技術，更要把握明天頁面開發的趨勢。
本書從最基本的html標籤講起，適用於web開發的初學者，而對於有一定web前端開發基礎的讀者，也有一定的參考意義。
目錄
第1篇 頁面製作入門篇
第1章 了解網頁 2
1.1 什麼是網頁 2
1.1.1 網頁的概述 2
1.1.2 靜態網頁 3
1.1.3 動態網頁 4
1.1.4 開發動態頁面和靜態頁面的聯繫 6
1.2 開發網頁的工具 7
1.2.1 html頁面的開發工具 7
1.2.2 動態頁面的開發工具 9
1.3 使用網頁瀏覽器 10
1.3.1 網頁瀏覽器的工作原理 10
1.3.2 常用的兩種瀏覽器 11
1.4 html、xml和xhtml語言 11
1.4.1 超文本標記語言html 12
1.4.2 可擴展標識語言xml 12
1.4.3 可擴展超文本標識語言xhtml 13
1.5 編寫一個簡單的頁面 13
1.6 小結 14
第2章 通過學習他人的網頁了解html
.能做什麼 15
2.1 用記事本打開一個頁面 15
2.2 初識html 17
2.2.1 html語法 17
2.2.2 html文檔的結構 18
2.3 html文檔基本結構標籤的作用 20
2.3.1 給頁面一個聲明——樣本代碼 20
2.3.2 踏出製作頁面的第一步——開始
標籤[html] 21
2.3.3 頁面的腦袋——頭標籤和頭標籤的
對象 21
2.3.4 給頁面起名字——標題標籤[title] 24
2.3.5 頁面的身體——體標籤[body] 25
2.3.6 美化html文檔 26
2.4 案例：我們的第一個頁面 27
2.5 小結 28
第3章 動手在網頁中寫些什麼 30
3.1 新舊方法對比 30
3.2 文本的排版格式 32
3.2.1 寫一行換一行 33
3.2.2 在頁面文本中空格 34
3.2.3 文本的段落要對齊 36
3.3 文本的屬性樣式 38
3.3.1 不一樣的文本字型大小 39
3.3.2 奇妙的特殊符號 41
3.3.3 給文本加標註 42
3.4 整齊的文本列表 43
3.4.1 無序列表 43
3.4.2 有序列表 45
3.4.3 定義列表 45
3.4.4 列表嵌套 46
3.5 製作一則通知 49
3.6 小結 50
第4章 將圖像放入頁面中 51
4.1 圖像的基礎知識 51
4.1.1 最常用的圖像——點陣圖 52
4.1.2 在頁面中常用的點陣圖格式 52
4.1.3 奇妙的矢量圖 53
4.1.4 圖像的解析度 54
4.1.5 認識一些網頁中常用的banner尺寸 54
4.2 用圖像來編織美麗的頁面 55
4.2.1 理解圖像路徑 55
4.2.2 像編輯文本對齊一樣在頁面中對齊
圖片 56
4.2.3 圖像與文本的對齊方式 57
4.2.4 控制圖像與文本的距離 58
4.3 讓圖像變得更美觀 60
4.3.1 使用畫圖工具修改圖像 60
4.3.2 不一樣的改變——給圖像添加框線 61
4.3.3 獨樹一幟的水平線 62
4.4 改變頁面的背景 63
4.5 案例：把寵物的照片放到網頁
上去 64
4.6 小結 65
第5章 讓網頁變得更絢麗一些 66
5.1 了解計算機語言下的顏色描述 66
5.2 讓頁面絢麗多彩 67
5.2.1 改變頁面背景顏色 67
5.2.2 改變頁面文本字型顏色 68
5.3 不尋常的圖像套用 69
5.3.1 會動的gif圖像 69
5.3.2 圖像的透明通道 70
5.3.3 帶有透明通道圖像的套用 72
5.4 案例：修飾普通頁面 74
5.5 小結 75
第6章 網頁連結 76
6.1 網頁連結概述 76
6.1.1 初識頁面連結 77
6.1.2 理解連結地址 78
6.2 連結的種種不同 79
6.2.1 基本的文本連結 79
6.2.2 基本的圖像連結 80
6.2.3 把信箱留給需要聯繫你的人 81
6.2.4 在同一頁面中快速查找信息 83
6.3 提高頁面連結的友好度 85
6.3.1 美觀連結的狀態 85
6.3.2 奇妙特殊的連結方式 87
6.3.3 熱點圖像區域的連結 89
6.4 在新視窗中顯示連結視窗 91
6.5 案例：製作普通連結的主頁 92
6.6 小結 94
第2篇 頁面製作提高篇
第7章 css規則 98
7.1 如何學習css 98
7.2 css基本的規則寫法 101
7.2.1 基本的樣式表的寫法 101
7.2.2 使用類class和標誌id連結樣式表 102
7.2.3 創建選擇器 103
7.2.4 套用css樣式表 107
7.3 用css來修飾頁面文本 110
7.3.1 修飾頁面文本字型 110
7.3.2 文本的字號 111
7.3.3 文本段落行高 112
7.3.4 禁止文本自動換行 114
7.4 給頁面對象添加顏色 115
7.5 案例：使用css製作個人頁面 117
7.6 小結 119
第8章 表格 120
8.1 理解頁面中的表格 120
8.2 普通表格的套用 121
8.2.1 製作普通表格 121
8.2.2 表格的基本屬性 123
8.2.3 合併單元格 125
8.2.4 表格標題 127
8.2.5 拆分表格 127
8.2.6 設定表格的列 128
8.3 修飾單元格 130
8.3.1 通過css修飾單元格的框線 130
8.3.2 合併相鄰單元格 132
8.4 編輯單元格中的內容 133
8.4.1 單元格中文本與單元格大小 133
8.4.2 修飾單元格中的內容 134
8.5 案例：製作球賽積分表 135
8.6 小結 139
第9章 創建框架結構的頁面 140
9.1 創建視窗框架頁面 140
9.1.1 創建視窗框架的[frameset]和[frame]
標籤 141
9.1.2 橫向分割視窗 141
9.1.3 縱向分割視窗 142
9.1.4 框架的嵌套 143
9.1.5 將頁面放入視窗框架中 144
9.2 花點心思修飾框架的細節 145
9.2.1 給無法處理框架的瀏覽器添加注釋
說明 145
9.2.2 固定框架的位置 146
9.2.3 框架中設定滾動條 146
9.3 修改框架框線的樣式 148
9.3.1 判定框線是否顯示 148
9.3.2 改變框線的表現效果 149
9.3.3 框線的邊距 150
9.4 框架集中頁面之間的連結 151
9.4.1 在指定的框架中打開連結 151
9.4.2 框架內的錨點連結 153
9.5 靈活的[iframe]框架 155
9.6 案例：制定自己的連結主頁 156
9.7 小結 159
第10章 當css樣式表遇到層 160
10.1 理解塊級的意義 160
10.2 頁面中的層 162
10.2.1 行[span]和層[div] 162
10.2.2 層的基本定位 163
10.2.3 層的疊加 164
10.3 框模型 166
10.3.1 理解框模型 166
10.3.2 空距padding屬性 168
10.3.3 框線border的擴展屬性 170
10.3.4 邊距 171
10.3.5 框模型的溢出 172
10.4 定製層的display屬性 173
10.5 css hack 175
10.6 案例：簡單的css+div 177
10.7 小結 179
第11章 進一步討論頁面布局的方法 181
11.1 頁面中的定位 181
11.1.1 靜態定位 181
11.1.2 相對定位 183
11.1.3 絕對定位 183
11.1.4 固定定位 184
11.2 浮動層 185
11.3 css的新奇技術以及未來發展 186
11.3.1 圖像替換技術 187
11.3.2 css 3.0中的新發展 189
11.3.3 firefox瀏覽器中實現圓角框模型 189
11.4 案例：有效地管理頁面布局 190
11.5 小結 196
第3篇 動感頁面篇
第12章 神奇的表單 198
12.1 表單的工作原理 200
12.1.1 [script]標記 200
12.1.2 創建表單 201
12.1.3 表單域 202
12.2 通過表單展示不一樣的頁面 202
12.2.1 input對象下的多種表單表現形式 203
12.2.2 text文本框的樣式表單 203
12.2.3 password輸入密碼的樣式表單 205
12.2.4 checkbox複選框的樣式表單 205
12.2.5 radio單選按鈕的樣式表單 207
12.2.6 submit提交數據的樣式表單 207
12.2.7 hidden隱藏域的樣式表單 209
12.2.8 image樣式表單 209
12.2.9 file上傳檔案的樣式表單 210
12.3 textarea對象的表單 211
12.4 select對象的表單 212
12.5 表單域集合 215
12.6 案例：製作一個精美的由表單構成
的頁面 215
12.7 小結 221
第13章 在網頁中加入神奇的效果 222
13.1 什麼是腳本語言 222
13.1.1 初識vbscript 222
13.1.2 學習javascript的起步 223
13.2 javascript和java的區別 225
13.3 javascript的基本語法 226
13.3.1 javascript中的標識符和保留關
鍵字 226
13.3.2 javascript語法的特殊規則 227
13.4 javascript的數據類型 228
13.4.1 常量 228
13.4.2 變數 228
13.4.3 數據類型轉換 229
13.4.4 運算符 230
13.4.5 表達式 231
13.5 流程控制 232
13.5.1 順序結構 232
13.5.2 選擇結構 232
13.5.3 循環結構 235
13.6 了解函式 237
13.7 案例：一個使用基本語法的
javascript例子 239
13.8 小結 242
第14章 javascript入門 244
14.1 了解一下何為“對象” 244
14.1.1 javascript對象概述 244
14.1.2 dom介紹 246
14.2 javascript中的數組 247
14.2.1 定義數組和運算元組 247
14.2.2 多維數組 250
14.3 內部對象 250
14.3.1 math對象 251
14.3.2 date對象 251
14.3.3 string對象 251
14.4 window對象 252
14.4.1 window對象屬性 252
14.4.2 window對象方法 255
14.4.3 事件 258
14.5 document對象 260
14.5.1 document對象屬性 261
14.5.2 document對象方法 261
14.5.3 document對象事件 261
14.6 案例：一個運用javascript實現的
動態頁面 263
14.7 小結 268
第15章 了解製作頁面的工具 269
15.1 可視化編輯頁面工具：
dreamweaver 269
15.1.1 了解dreamweaver的界面 269
15.1.2 dreamweaver的選單 271
15.2 神奇的“美工筆”：photoshop 271
15.2.1 了解photoshop的界面 271
15.2.2 photoshop的實用技巧 272
15.3 網頁中的動畫：flash 274
15.3.1 認識flash檔案 274
15.3.2 在頁面中放入flash檔案 275
15.3.3 製作flash的軟體 277
15.3.4 flash8的選單 278
15.3.5 flash8的主要功能 278
15.3.6 flash的常用互動技巧 279
15.4 案例：使用dreamweaver製作
頁面 280
15.5 小結 281
第4篇 頁面實戰篇
第16章 綜合實例一：製作主流網站
界面 284
16.1 構思基礎的布局 284
16.2 設計基礎模組的樣式表 285
16.3 完善網站的子模組 287
16.3.1 網站的導航欄 287
16.3.2 頁面的側欄 289
16.4 最終頁面 291
16.5 小結 291
第17章 綜合實例二：設計複雜頁面 292
17.1 頁面的框架布局 292
17.1.1 定位頁面的內容 292
17.1.2 頁面初級布局的代碼 293
17.2 細化頁面的局部 294
17.2.1 intro部分 294
17.2.2 頁面的左側部分 297
17.2.3 頁面的右側欄主體部分 300
17.3 小結 302
第18章 綜合實例三：製作英文網站 303
18.1 分析效果圖 303
18.2 切圖 304
18.2.1 製作首頁的切圖 304
18.2.2 二級頁面的切圖 305
18.3 製作站點首頁頭部 306
18.3.1 首頁頭部的信息和基礎樣式的
製作 306
18.3.2 首頁頭部的分析 307
18.3.3 首頁頭部結構的製作 308
18.3.4 首頁頭部css代碼的編寫 309
18.4 製作首頁的主體部分 311
18.4.1 分析主體部分效果圖 311
18.4.2 製作主體左側部分的結構 312
18.4.3 製作主體左側部分的樣式 313
18.4.4 製作主體中間部分的結構 316
18.4.5 製作主體中間部分的樣式 318
18.4.6 製作主體右側部分的結構 320
18.4.7 製作主體右側部分的樣式 322
18.5 製作首頁的底部 324
18.6 首頁的兼容問題 325
18.7 二級頁面的製作 326
18.7.1 分析二級頁面的效果圖 326
18.7.2 製作二級頁面中間內容部分的
結構 327
18.7.3 製作二級頁面中間內容部分的
樣式 328
18.7.4 製作二級頁面右側部分的結構 330
18.7.5 製作二級頁面右側部分的樣式 330
18.8 小結 331
第19章 綜合實例四：使用dreamweaver
製作中文網站 332
19.1 分析效果圖 332
19.2 製作首頁的切圖 333
19.3 製作站點首頁頭部 334
19.3.1 首頁頭部的信息和基礎樣式的
製作 334
19.3.2 首頁頭部的分析 337
19.3.3 首頁頭部logo和banner部分的
製作 337
19.3.4 導航列表的製作 341
19.4 製作首頁的主體部分 344
19.4.1 分析主體部分效果圖 344
19.4.2 製作主體部分的父元素 344
19.4.3 製作主體左側部分的樣式 345
19.4.4 製作主體右側內容中關於我們的
部分 349
19.4.5 製作今日新聞部分 351
19.4.6 製作點撥和時評的部分 353
19.4.7 製作合作夥伴部分 356
19.5 製作首頁的底部 357
19.6 首頁的兼容問題 358
19.7 二級頁面的製作 359
19.8 小結 361
附錄a 362
a.1 html 4.0快速參考 362
a.1.1 通用屬性 362
a.1.2 html文檔結構元素 362
a.1.3 文本元素 363
a.1.4 字型樣式元素 365
a.1.5 列表元素 366
a.1.6 表格元素 367
a.1.7 框架元素 369
a.1.8 表單元素 370
a.1.9 其他元素 373
a.2 css中支持的顏色名稱 377
a.2.1 w3c規定的十六色 377
a.2.2 網路安全色 378
a.2.3 ie 4以上版本中的預命名顏色 381
