HTML+CSS網頁設計與布局從入門到精通

HTML+CSS網頁設計與布局從入門到精通

《HTML+CSS網頁設計與布局從入門到精通》緊密圍繞網頁設計師在製作網頁過程中的實際需要和應該掌握的技術,全面介紹了使用HTML和CSS進行網頁設計和製作的各方面內容和技巧。

基本信息

版權資訊

書 名: HTML+CSS網頁設計與布局從入門到精通

作 者:溫謙

出版社: 人民郵電出版社

出版時間: 2008

ISBN: 9787115183392

開本: 16

定價: 49.00 元

內容簡介

本書共分4個部分21章和兩個附錄,包括網頁設計基礎、HTML基礎、CSS基礎、CSS高級技術和CSS布局技術等內容。全書遵循Web標準,強調“表現”與“內容”的分離,拋棄了那些過時的HTML標記和屬性,從更規範的角度全面、系統地介紹了網頁設計製作方法與技巧。附錄收錄了網站發布與管理的知識和160個套用CSS時出現頻度較高的英文單詞及其中文解釋。書中給出了大量詳細的案例,並對案例進行分析,便於讀者在理解的基礎上,直接修改後使用。本書作者具備紮實的實踐功底,行文細膩,對每一個技術細節以及每一個實際工作中可能遇到的難點和錯誤都進行了詳細的說明,並給出了解決方案。

本書附帶學習光碟,收錄了12個小時HTML和CSS多媒體教學錄像和網頁製作技術多媒體教學錄像,輔助讀者學習,達到事半功倍的效果。光碟還附帶書中所有實例的素材檔案、原始碼和最終效果檔案,修改後可直接使用。

本書適合於網頁設計製作人員和開發人員閱讀,讀者可以在掌握HTML和CSS之後做出精美的網頁。

編輯推薦

《HTML+CSS網頁設計與布局從入門到精通》包括6小時HTML+CSS關鍵技術視頻教程

6小時網頁製作視頻教程

書中實例源檔案/效果檔案/製作素材

資深網頁設計師傾心打造,融合多年項目經驗和工作心得。

拋棄過時的HTML標記和屬性,詳細介紹Web標準化網頁製作必備的HTML標記和屬性

全面講解CSS控制頁面表現的方法,包括控制文字、圖像、背景、表格、表單、導航連結等。

深入剖析CSS布局的核心技術和實際操作方法,包括固定寬度布局、變寬度布局。

逐個效果解決IE6/IE7/Firefox瀏覽器兼容性問題。

讀者對象:網頁設計與布局人員,網頁美工人員,網站建設與開發人員,網頁製作與網站建設培訓學員,HTML/CSS愛好者。

目錄

第1部分 HTML基礎篇

第1章 網頁設計基礎知識 3

1.1 基礎概念 3

1.2 網頁與HTML語言 4

1.3 Web標準:結構、表現與行為 5

1.3.1 標準的重要性 5

1.3.2 “Web標準”概述 6

1.4 初步理解網頁設計與開發的過程 7

1.4.1 基本任務與角色 7

1.4.2 明確網站定位 8

1.4.3 收集信息和素材 8

1.4.4 策劃欄目內容 8

1.4.5 設計頁面方案 9

1.4.6 製作頁面 9

1.4.7 實現後台功能 9

1.4.8 整合與測試網站 10

1.5 與設計相關的技術因素 10

1.6 本章小結 12

第2章 HTML網頁文檔結構 13

2.1 HTML簡介 13

2.1.1 創建第一個HTML檔案 13

2.1.2 HTML檔案結構 15

2.2 簡單的HTML案例 16

2.3 網頁源檔案的獲取 18

2.3.1 直接查看源檔案 19

2.3.2 保存網頁 19

2.4 輔助:利用Dreamweaver快速建立基本文檔 20

2.5 本章小結 24

第3章 用HTML設定文本和圖像 25

3.1 文本排版 25

3.1.1 實現段落與段內換行(p和br) 25

3.1.2 設定標題(h1~h6) 27

3.1.3 使文字水平居中(center) 27

3.1.4 設定文欄位落的縮進(blockquote) 29

3.2 設定文字列表 29

3.2.1 建立無序列表(ul) 29

3.2.2 建立有序列表(ol) 30

3.3 HTML標記與HTML屬性 31

3.3.1 用align屬性控制段落的水平位置 31

3.3.2 用bgcolor屬性設定背景顏色 32

3.3.3 設定文字的特殊樣式 34

3.3.4 設定文字的大小和顏色(font) 35

3.4 忘記過時的HTML標記和屬性 35

3.5 特殊文字元號 36

3.6 在網頁中使用圖像(img) 38

3.6.1 網頁中的圖片格式 38

3.6.2 一個簡單的圖片網頁 38

3.6.3 使用路徑 39

3.7 用width和height屬性設定圖片的尺寸 41

3.8 用alt屬性為圖像設定替換文本 43

3.9 輔助:利用Dreamweaver設定文本和圖像 43

3.10 輔助:利用Dreamweaver代碼視圖提高效率 47

3.10.1 代碼提示 47

3.10.2 代碼摺疊 49

3.10.3 使用拆分視圖對代碼快速定位 49

3.11 本章小結 50

第4章 用HTML建立超連結(a) 51

4.1 設定基本文字超連結 51

4.1.1 URL的格式 51

4.1.2 URL的類型 52

4.2 設定頁面內部的特定目標的連結 53

4.3 設定圖片的超連結 54

4.4 設定電子郵件連結 54

4.5 設定以新視窗顯示連結頁面 55

4.6 創建熱點區域 55

4.6.1 用HTML建立熱點區域(map和area) 56

4.6.2 輔助:利用Dreamweaver精確定位熱點區域 57

4.7 框架之間的連結 59

4.7.1 建立框架與框架集(frame和frameset) 59

4.7.2 用cols屬性將視窗分為左右兩部分 60

4.7.3 用rows屬性將視窗分為上中下三部分 60

4.7.4 框架的嵌套 61

4.7.5 用src屬性在框架中插入網頁 61

4.7.6 用src屬性在框架之間連結 62

4.7.7 創建嵌入式框架(iframe) 64

4.8 連結增多後網站的組織結構與維護 65

4.9 本章小結 66

第5章 用HTML創建表格 67

5.1 表格基本結構(table) 67

5.2 合併單元格 68

5.2.1 用colspan屬性左右合併單元格 68

5.2.2 用rowspan屬性上下合併單元格 69

5.3 用align屬性設定對齊方式 70

5.4 用bgcolor屬性設定表格背景色和框線顏色 71

5.5 用cellpadding屬性和cellspacing屬性設定距離 72

5.6 完整的表格標記(thead、tbody和tfoot) 73

5.7 需要拋棄的方法:用表格進行頁面布局 75

5.8 本章小結 78

第2部分 CSS基礎篇

第6章 (X)HTML與CSS概述 81

6.1 HTML與XHTML 81

6.1.1 追根溯源 81

6.1.2 DOCTYPE(文檔類型)的含義與選擇 82

6.1.3 XHTML與HTML的重要區別 83

6.2 (X)HTML與CSS 84

6.2.1 CSS標準 85

6.2.2 傳統HTML的缺點 85

6.2.3 CSS的引入 86

6.2.4 如何編輯CSS 88

6.2.5 瀏覽器與CSS 89

6.3 本章小結 90

第7章 CSS核心基礎 91

7.1 構造CSS規則 91

7.2 基本CSS選擇器 92

7.2.1 標記選擇器 92

7.2.2 類別選擇器 93

7.2.3 ID選擇器 95

7.3 在HTML中使用CSS的方法 96

7.3.1 行內樣式 96

7.3.2 內嵌式 97

7.3.3 連結式 98

7.3.4 導入樣式 99

7.3.5 各種方式的優先權問題 100

7.4 本章小結 102

第8章 手工編寫與藉助工具 103

8.1 從零開始 103

8.2 設定標題 104

8.3 控制圖片 105

8.4 設定正文 106

8.5 設定整體頁面 106

8.6 對段落進行分別設定 107

8.7 完整代碼 108

8.8 CSS的注釋 109

8.9 輔助:使用Dreamweaver創建頁面 109

8.10 輔助:在Dreamweaver中新建CSS規則 110

8.11 輔助:在Dreamweaver中編輯CSS規則 112

8.12 為圖像創建CSS規則 114

8.13 本章小結 116

第9章 CSS的高級特性 117

9.1 複合選擇器 117

9.1.1 “交集”選擇器 117

9.1.2 “並集”選擇器 118

9.1.3 後代選擇器 120

9.2 CSS的繼承特性 122

9.2.1 繼承關係 122

9.2.2 CSS繼承的運用 123

9.3 CSS的層疊特性 125

9.4 本章小結 126

第10章 用CSS設定文本樣式 127

10.1 長度單位 127

10.2 顏色定義 128

10.3 準備頁面 129

10.4 設定文字的字型 129

10.5 設定文字的傾斜效果 130

10.6 設定文字的加粗效果 131

10.7 英文字母大小寫轉換 132

10.8 控制文字的大小 133

10.9 文字的裝飾效果 133

10.10 設定段落首行縮進 134

10.11 設定字詞間距 135

10.12 設定段落內部的文字行高 136

10.13 設定段落之間的距離 136

10.14 控制文本的水平位置 137

10.15 設定文字與背景的顏色 138

10.16 設定段落的垂直對齊方式 138

10.16.1 使用line-height屬性進行設定 138

10.16.2 更通用的解決方案 139

10.17 本章小結 140

第11章 用CSS設定圖像效果 141

11.1 設定圖片框線 141

11.1.1 基本屬性 141

11.1.2 為不同的框線分別設定樣式 142

11.2 圖片縮放 144

11.3 圖文混排 145

11.3.1 文字環繞 145

11.3.2 設定圖片與文字的間距 146

11.4 案例——八大行星科普網頁 147

11.5 設定圖片與文字的對齊方式 150

11.5.1 橫向對齊方式 150

11.5.2 縱向對齊方式 151

11.6 本章小結 154

第12章 用CSS設定背景顏色與圖像 155

12.1 設定背景顏色 155

12.2 設定背景圖像 156

12.3 設定背景圖像平鋪 157

12.4 設定背景圖像位置 159

12.5 設定背景圖片位置固定 162

12.6 設定標題的圖像替換 163

12.7 使用滑動門技術的標題 166

12.8 本章小結 168

第3部分 CSS高級篇

第13章 CSS盒子模型 171

13.1 “盒子”與“模型”的概念探究 171

13.2 框線(border) 172

13.2.1 設定框線樣式(border-style) 173

13.2.2 屬性值的簡寫形式 174

13.2.3 框線與背景 176

13.3 設定內邊距(padding) 177

13.4 設定外邊距(margin) 178

13.5 盒子之間的關係 179

13.5.1 HTML與DOM 180

13.5.2 標準文檔流 183

13.5.3 div標記與span標記 184

13.6 盒子在標準流中的定位原則 187

13.6.1 行內元素之間的水平margin 187

13.6.2 塊級元素之間的豎直margin 188

13.6.3 嵌套盒子之間的margin 189

13.6.4 margin屬性可以設定為負值 191

13.7 思考題 192

13.8 本章小結 196

第14章 盒子的浮動與定位 197

14.1 盒子的浮動 197

14.1.1 準備代碼 197

14.1.2 案例1——設定第1個浮動的div 199

14.1.3 案例2——設定第2個浮動的div 199

14.1.4 案例3——設定第3個浮動的div 199

14.1.5 案例4——改變浮動的方向 200

14.1.6 案例5——再次改變浮動的方向 200

14.1.7 案例6——全部向左浮動 201

14.1.8 案例7——使用clear屬性清除浮動的影響 202

14.1.9 案例8——擴展盒子的高度 203

14.2 盒子的定位 204

14.2.1 靜態定位(static) 204

14.2.2 相對定位(relative) 205

14.2.3 絕對定位(absolute) 209

14.2.4 固定定位(fixed) 214

14.3 z-index空間位置 214

14.4 盒子的display屬性 215

14.5 本章小結 216

第15章 用CSS設定表格樣式 217

15.1 控制表格 217

15.1.1 表格中的標記 217

15.1.2 設定表格的框線 219

15.1.3 確定表格的寬度 222

15.1.4 其他與表格相關的標記 223

15.2 美化表格 224

15.2.1 搭建HTML結構 224

15.2.2 整體設定 225

15.2.3 設定單元格樣式 226

15.2.4 斑馬紋效果 227

15.2.5 設定列樣式 227

15.3 設定滑鼠指針經過時整行變色提示的表格 232

15.3.1 在Firefox和IE 7中實現滑鼠指針經過時整行變色 232

15.3.2 在IE 6中實現滑鼠指針經過時整行變色 233

15.3.3 最終合併代碼 234

15.4 輔助:使用jQuery實現更多效果 236

15.4.1 用jQuery實現斑馬紋效果 237

15.4.2 用jQuery實現“前3行”特殊樣式 239

15.4.3 用jQuery實現漸變背景色表格效果 240

15.4.4 用jQuery實現滑鼠指針經過變色效果 241

15.5 案例——日曆 241

15.5.1 搭建HTML結構 241

15.5.2 設定整體樣式和表頭樣式 244

15.5.3 設定日曆單元格樣式 245

15.6 本章小結 248

第16章 用CSS設定連結與導航選單 249

16.1 豐富的超連結特效 250

16.2 創建按鈕式超連結 252

16.3 製作螢光燈效果的選單 253

16.3.1 HTML框架 254

16.3.2 設定容器的CSS樣式 254

16.3.3 設定選單項的CSS樣式 255

16.4 控制滑鼠指針 257

16.5 設定項目列表樣式 257

16.5.1 列表的符號 258

16.5.2 圖片符號 260

16.6 創建簡單的導航選單 261

16.6.1 簡單的豎直排列選單 261

16.6.2 橫豎自由轉換選單 264

16.7 設定圖片翻轉效果 265

16.8 套用滑動門技術的玻璃效果選單 266

16.8.1 基本思路 266

16.8.2 設定選單整體效果 267

16.8.3 使用“滑動門”技術設定玻璃材質背景 268

16.8.4 進一步解決的問題 269

16.9 滑鼠指針經過時給圖片增加框線 270

16.10 本章小結 272

第17章 用CSS建立表單 273

17.1 表單的用途和原理 273

17.2 表單輸入類型 274

17.2.1 文本輸入框 274

17.2.2 單選按鈕 274

17.2.3 複選按鈕 275

17.2.4 密碼輸入框 275

17.2.5 按鈕 276

17.2.6 多行文本框 277

17.2.7 列表框 277

17.3 CSS與表單 278

17.3.1 表單中的元素 278

17.3.2 像文字一樣的按鈕 281

17.3.3 多彩的下拉選單 283

17.4 案例——“數獨”遊戲網頁 284

17.4.1 搭建基本表格 285

17.4.2 設定表格樣式 286

17.4.3 加入文本輸入框 287

17.4.4 設定文本輸入框的樣式 287

17.5 對齊文本框和旁邊的圖像按鈕 289

17.6 本章小結 290

第18章 網頁樣式綜合案例——靈活的電子相冊 291

18.1 搭建框架 291

18.2 陣列模式 293

18.3 單列模式 298

18.4 改進陣列模式 301

18.5 IE 6兼容 304

18.6 雙向聯動模式 306

18.6.1 在Firefox中實現 306

18.6.2 IE 6兼容 311

18.6.3 改變方向 312

18.7 本章小結 314

第4部分 CSS布局篇

第19章 固定寬度布局剖析與製作 317

19.1 向報紙學習排版思想 317

19.2 CSS排版觀念 319

19.2.1 兩列布局 320

19.2.2 三列布局 320

19.2.3 多列布局 321

19.2.4 布局結構的表達式與結構圖 321

19.3 圓角框 325

19.3.1 準備圖像 325

19.3.2 搭建HTML結構 326

19.3.3 放置背景圖像 328

19.3.4 設定樣式並修復缺口 329

19.4 單列布局 330

19.4.1 放置第一個圓角框 331

19.4.2 設定圓角框的CSS樣式 331

19.4.3 放置其他圓角框 334

19.5 “1-2-1”固定寬度布局 335

19.5.1 準備工作 336

19.5.2 絕對定位法 337

19.5.3 浮動法 339

19.6 “1-3-1”固定寬度布局 341

19.7 “1-((1-2)+1)-1”固定寬度布局 343

19.8 本章小結 344

第20章 變寬度網頁布局剖析與製作 345

20.1 “1-2-1”變寬度網頁布局 345

20.1.1 “1-2-1”等比例變寬布局 345

20.1.2 “1-2-1”單列變寬布局 348

20.2 “1-3-1”寬度適應布局 352

20.2.1 “1-3-1”三列寬度等比例布局 352

20.2.2 “1-3-1”單側列寬度固定的變寬布局 352

20.2.3 “1-3-1”中間列寬度固定的變寬布局 353

20.2.4 進一步的思考 355

20.2.5 “1-3-1”雙側列寬度固定的變寬布局 356

20.2.6 “1-3-1”中列和側列寬度固定的變寬布局 358

20.3 變寬布局方法總結 359

20.4 分列布局背景色問題 360

20.4.1 設定固定寬度布局的列背景色 360

20.4.2 設定特殊寬度變化布局的列背景色 364

20.4.3 設定單列寬度變化布局的列背景色 364

20.5 CSS排版與傳統的表格方式排版的分析 365

20.6 瀏覽器的兼容性問題 368

20.7 CSS布局頁面的調試技巧 368

20.7.1 技巧1:設定背景色或者框線,確定錯誤範圍 369

20.7.2 技巧2:刪除無關代碼,暴露核心矛盾 369

20.7.3 技巧3:先用Firefox調試,然後使它兼容IE 369

20.7.4 技巧4:善於利用工具,提高調試效率 370

20.7.5 技巧5:善於提問,尋求幫助 370

20.8 本章小結 370

第21章 網頁布局綜合案例——兒童用品網上商店 371

21.1 案例概述 371

21.2 內容分析 372

21.3 HTML結構設計 374

21.4 原型設計 377

21.5 頁面方案設計 380

21.6 布局設計 383

21.6.1 整體樣式設計 383

21.6.2 頁頭部分 384

21.6.3 內容部分 386

21.6.4 頁腳部分 389

21.7 細節設計 389

21.7.1 頁頭部分 389

21.7.2 內容部分 395

21.7.3 左側的主要內容列 395

21.7.4 右邊欄 398

21.8 CSS布局的優點 402

21.9 互動效果設計 403

21.9.1 次導航欄 403

21.9.2 主導航欄 404

21.9.3 賬號區 404

21.9.4 圖像框線 405

21.9.5 產品分類 407

21.10 遵從Web標準的設計流程 407

21.11 從“網頁”到“網站” 408

21.11.1 歷史回顧 408

21.11.2 不完善的辦法 408

21.11.3 伺服器出場 409

21.11.4 CMS出現 409

21.11.5 具體操作 409

21.12  本章小結 410

附錄A 網站發布與管理 411

A.1 在Internet上建立自己的Web站點 411

A.1.1 製作網站內容 411

A.1.2 申請域名 411

A.1.3 信息發布 411

A.2 租用虛擬主機空間 412

A.2.1 了解基本的技術名詞 412

A.2.2 選擇和租用虛擬主機 413

A.3 向伺服器上傳網站內容 414

A.3.1 使用Dreamweaver上傳檔案 414

A.3.2 使用IE瀏覽器上傳檔案 415

A.3.3 使用專業FTP工具上傳檔案 416

A.4 網站管理 418

A.4.1 修改密碼 418

A.4.2 集團信箱管理 419

A.4.3 注意事項 420

附錄B CSS英文小字典 421

相關詞條

相關搜尋

熱門詞條

聯絡我們