CSS3+DIV網頁樣式與佈局案例課堂

劉玉紅

  • 出版商: 清華大學
  • 出版日期: 2015-01-01
  • 定價: $390
  • 售價: 8.5$332
  • 語言: 簡體中文
  • ISBN: 7302386153
  • ISBN-13: 9787302386155
  • 相關分類: CSS

下單後立即進貨 (約4週~6週)

  • CSS3+DIV網頁樣式與佈局案例課堂-preview-1
CSS3+DIV網頁樣式與佈局案例課堂-preview-1

相關主題

商品描述

本書作者根據自己在長期教學中積累的豐富的網頁設計教學經驗,完整、詳盡地介紹了CSS 3 + DIV網頁樣式與佈局的技術。 全書共分為24章,前19章分別介紹了開發網站的準備工作、HTML 5技術、CSS樣式入門、CSS樣式基本語法、CSS 3的高級特性、控制網頁字體和段落樣式、控制網頁圖片樣式、控制網頁背景和邊框樣式、美化網頁瀏覽效果、控製表格與表單樣式、控制列表樣式、使用CSS 3濾鏡美化網頁元素、CSS定位與DIV佈局核心技術、CSS + DIV盒子的浮動與定位、固定寬度網頁佈局剖析與製作、自動縮放網頁佈局剖析與製作、CSS 3與JavaScript的搭配應用、CSS與XML的綜合應用、CSS與Ajax的綜合應用。最後5章介紹了5個綜合性網站的例子。通過學習案例,使讀者進一步鞏固所學的知識,提高實戰能力。 本書內容豐富、全面,圖文並茂,步驟清晰,通俗易懂,專業性強,使讀者能理解CSS 3 + DIV網頁樣式與佈局的技術,並能解決實際生活或工作中的問題,真正做到知其然更知其所以然。通過重點章節,條理清晰、系統地介紹了讀者希望瞭解的網頁設計技巧。 本書涉及面廣泛,幾乎囊括了CSS 3 + DIV網頁樣式與佈局的所有重要知識,適合所有的網頁設計初學者快速入門,同時也適合想全面瞭解CSS 3 + DIV網頁樣式與佈局的設計人員閱讀。

目錄大綱

目  錄 

第1章  製作網頁的準備工作 1

1.1  認識網頁和網站 2

1.1.1  什麽是網頁 2

1.1.2  什麽是網站 3

1.2  網頁中需要包含的要素 3

1.2.1  需要HTML文件 3

1.2.2  需要DIV層 4

1.2.3  需要CSS定義的網頁樣式 4

1.2.4  需要JavaScript設置網頁動畫 5

1.2.5  需要域名與服務器空間 5

1.3  一個簡單網頁的基本構成 6

1.3.1  head部分 6

1.3.2  body部分 6

1.3.3  註釋部分 7

1.4  製作網頁的總體流程 8

1.4.1  網頁規劃 8

1.4.2  搜集資料 8

1.4.3  使用Photoshop設計網頁的總體效果 9

1.4.4  通過切圖,得到網頁素材文件 9

1.4.5  搭建網頁DIV層 10

1.4.6  定義CSS和JavaScript效果 11

1.4.7  測試網頁 11

1.5  網站種類與網頁佈局方式 12

1.5.1  網站的種類 12

1.5.2  網頁佈局方式 13

1.6  綜合示例——在Photoshop CS6中構建網頁結構 15

1.7  上機練習——使用Photoshop製作縱向導航條 16

1.8  專家答疑 18

第2章  網頁實現技術——HTML 5 21

2.1  HTML 5的基本概念 22

2.1.1  HTML 5簡介 22

2.1.2  HTML 5文件的基本結構 22

2.1.3  認識HTML 5標記 23

2.2  HTML 5文件的編寫方法 23

2.2.1  使用記事本手工編寫HTML文件 24

2.2.2  使用Dreamweaver CS6編寫HTML文件 24

2.3  HTML 5的基本標記 27

2.3.1  字符標記 27

2.3.2  超級鏈接標記 28

2.3.3  列表標記 30

2.3.4  製作純文本網頁 31

2.4  HTML 5的段落和圖片標記 32

2.4.1  常用段落和圖片標記 32

2.4.2  文字和圖片混合排版 33

2.5  HTML 5的表單標記 34

2.5.1  常用的表單控件 34

2.5.2  多行文本標記和下拉列表 36

2.5.3  用戶註冊頁面 37

2.6  HTML 5的表格標記 38

2.6.1  表格標記 38

2.6.2  製作季度報表 40

2.7  綜合示例——製作網站首頁 41

2.8  上機練習——簡單的HTML 5網頁 45

2.9  專家答疑 45

第3章  CSS 3樣式入門 47

3.1  CSS概述 48

3.1.1  CSS的功能 48

3.1.2  瀏覽器與CSS 48

3.1.3  CSS的發展歷史 49

3.2  CSS 3的常用單位 49

3.2.1  顏色單位 49

3.2.2  長度單位 53

3.3  編輯和瀏覽CSS 54

3.3.1  手工編寫CSS 54

3.3.2  用Dreamweaver編寫CSS 55

3.4  在HTML 5中調用CSS的方法 56

3.4.1  行內樣式 56

3.4.2  內嵌樣式 57

3.4.3  鏈接樣式 59

3.4.4  導入樣式 60

3.5  調用方法的優先級問題 61

3.5.1  行內樣式和內嵌樣式比較 61

3.5.2  內嵌樣式和鏈接樣式比較 62

3.5.3  鏈接樣式和導入樣式 62

3.6  綜合示例——製作學生信息統計表 63

3.7  專家答疑 65

第4章  CSS樣式的基本語法 67

4.1  CSS基礎語法 68

4.1.1  CSS構造規則 68

4.1.2  CSS的註釋 68

4.2  CSS的常用選擇器 69

4.2.1  標簽選擇器 69

4.2.2  類選擇器 70

4.2.3  ID選擇器 71

4.2.4  選擇器的聲明 71

4.3  綜合示例——製作炫彩網站Logo 72

4.4  專家答疑 75

第5章   CSS 3的高級特性 77

5.1  復合選擇器 78

5.1.1  全局選擇器 78

5.1.2  “交集”選擇器 79

5.1.3  “並集”選擇器 79

5.1.4  繼承(後代)選擇器 80

5.2  CSS 3新增的選擇器 81

5.2.1  屬性選擇器 81

5.2.2  結構偽類選擇器 83

5.2.3  UI元素狀態偽類選擇器 84

5.2.4  偽類選擇器 86

5.3  CSS的繼承特性 87

5.3.1  繼承關系 87

5.3.2  CSS繼承的運用 88

5.4  CSS的層疊特性 89

5.4.1  同一選擇器被多次定義的處理 89

5.4.2  同一標簽運用不同類型選擇器的處理 90

5.5  綜合示例——製作新聞菜單 91

5.6  專家答疑 94

第6章  使用CSS 3控制網頁字體與段落的樣式 95

6.1  通過CSS控制字體樣式 96

6.1.1  控制字體類型 96

6.1.2  定義字體大小 97

6.1.3  定義字體風格 98

6.1.4  控制文字的粗細 99

6.1.5  將小寫字母轉為大寫字母 100

6.1.6  設置字體的復合屬性 101

6.1.7  定義文字的顏色 102

6.2  CSS 3中新增的文本高級樣式 103

6.2.1  添加文本的陰影效果 103

6.2.2  設置文本的溢出效果 104

6.2.3  控制文本的換行 105

6.2.4  設置字體尺寸 106

6.3  通過CSS控制文本間距與對齊方式 107

6.3.1  設置單詞之間的間隔 108

6.3.2  設置字符之間的間隔 108

6.3.3  為文本添加下劃線、上劃線、刪除線 109

6.3.4  設置垂直對齊方式 110

6.3.5  轉換文本的大小寫 112

6.3.6  設置文本的水平對齊方式 113

6.3.7  設置文本的縮進效果 115

6.3.8  設置文本的行高 116

6.3.9  文本的空白處理 116

6.3.10  文本的反排 118

6.4  綜合示例——設置網頁標題 119

6.5  上機練習——製作新聞頁面 121

6.6  專家答疑 122

第7章  使用CSS控制網頁圖片的樣式 123

7.1  圖片縮放 124

7.1.1  通過描述標記width和height來縮放圖片 124

7.1.2  使用CSS 3中的max-width和max-height縮放圖片 124

7.1.3  使用CSS 3中的width和height縮放圖片 125

7.2  設置圖片的對齊方式 126

7.2.1  設置圖片橫向對齊 126

7.2.2  設置圖片縱向對齊 127

7.3  圖文混排 129

7.3.1  設置文字的環繞效果 129

7.3.2  設置圖片與文字的間距 130

7.4  綜合示例——製作學校宣傳單 132

7.5  上機練習——製作簡單的圖文混排網頁 134

7.6  專家答疑 135

第8章  使用CSS控制網頁背景與邊框樣式 137

8.1  使用CSS控制網頁背景 138

8.1.1  設置背景顏色 138

8.1.2  設置背景圖片 139

8.1.3  背景圖片的重復 140

8.1.4  背景圖片的顯示 142

8.1.5  背景圖片的位置 143

8.2  CSS 3中新增的控制網頁背景的屬性 145

8.2.1  背景圖片大小 145

8.2.2  背景顯示區域 146

8.2.3  背景圖像的裁剪區域 148

8.2.4  背景復合屬性 149

8.3  使用CSS控制邊框樣式 150

8.3.1  設置邊框的樣式 150

8.3.2  設置邊框的顏色 152

8.3.3  設置邊框的線寬 153

8.3.4  設置邊框的復合屬性 155

8.4  CSS 3中新增的邊框圓角效果 155

8.4.1  設置圓角邊框 156

8.4.2  指定兩個圓角半徑 156

8.4.3  繪制四個角的圓角邊框 157

8.4.4  繪制不同種類的邊框 159

8.5  綜合示例——製作簡單的公司主頁 161

8.6  上機練習——製作簡單的生活資訊主頁 164

8.7  專家答疑 165

第9章  使用CSS 3美化網頁瀏覽效果 167

9.1  使用CSS 3美化超鏈接 168

9.1.1  改變超級鏈接的基本樣式 168

9.1.2  設置帶有提示信息的超級鏈接 169

9.1.3  設置超級鏈接的背景圖 170

9.1.4  設置超級鏈接的按鈕效果 171

9.2  使用CSS 3美化鼠標特效 172

9.2.1  使用CSS 3控制鼠標箭頭 172

9.2.2  設置鼠標變換式超鏈接 174

9.2.3  設置網頁頁面滾動條 175

9.3  綜合示例1——圖片版本的

超級鏈接 177

9.4  綜合示例2——關於鼠標特效 178

9.5  上機練習——製作一個簡單的導航欄 181

9.6  專家答疑 182

第10章  使用CSS控製表格和表單的樣式 185

10.1  美化表格樣式 186

10.1.1  設置表格邊框的樣式 186

10.1.2  設置表格邊框的寬度 188

10.1.3  設置表格邊框的顏色 189

10.2  美化表單樣式 190

10.2.1  美化表單中的元素 190

10.2.2  美化提交按鈕 192

10.2.3  美化下拉菜單 193

10.3  綜合示例——製作用戶登錄頁面 195

10.4  上機練習——製作用戶註冊頁面 197

10.5  專家答疑 199

第11章  使用CSS控制列表樣式 201

11.1  使用CSS控制項目列表 202

11.1.1  美化無序列表 202

11.1.2  美化有序列表 203

11.1.3  美化自定義列表 205

11.1.4  製作圖片列表 206

11.1.5  縮進圖片列表 207

11.1.6  列表復合屬性 209

11.2  使用CSS製作網頁菜單 210

11.2.1  製作無需表格的菜單 210

11.2.2  製作水平和垂直菜單 212

11.3  綜合示例——模擬soso導航欄 214

11.4  上機練習——將段落轉變成列表 217

11.5  專家答疑 219

第12章  使用CSS 3濾鏡美化網頁元素 221

12.1  濾鏡概述 222

12.2  基本濾鏡 222

12.2.1  通道(Alpha)濾鏡 223

12.2.2  模糊(Blur)濾鏡 225

12.2.3  色彩(Chroma)濾鏡 226

12.2.4  投影(DropShadow)濾鏡 227

12.2.5  水平翻轉(FlipH)濾鏡 229

12.2.6  垂直翻轉(FlipV)濾鏡 229

12.2.7  光暈(Glow)濾鏡 230

12.2.8  灰度(Gray)濾鏡 231

12.2.9  反相(Invert)濾鏡 232

12.2.10  遮罩(Mask)濾鏡 233

12.2.11  波浪(Wave)濾鏡 233

12.2.12  陰影(Shadow)濾鏡 235

12.2.13  X-ray濾鏡 236

12.3  高級濾鏡 236

12.3.1  光照(Light)濾鏡 237

12.3.2  漸隱(BlendTrans)濾鏡 238

12.3.3  切換(RevealTrans)濾鏡 240

12.4  專家答疑 241

第13章  CSS定位與DIV佈局核心技術 243

13.1  瞭解塊級元素和行內級元素 244

13.1.1  塊級元素和行內級元素的應用 244

13.1.2  div元素和span元素的區別 246

13.2  盒子模型 247

13.2.1  盒子模型的概念 247

13.2.2  定義網頁的border區域 247

13.2.3  定義網頁的padding區域 249

13.2.4  定義網頁的margin區域 250

13.3  CSS 3新增的彈性盒模型 253

13.3.1  定義盒子的佈局取向(box-orient) 254

13.3.2  定義盒子佈局的順序(box-direction) 255

13.3.3  定義盒子佈局的位置(box-ordinal-group) 257

13.3.4  定義盒子的彈性空間(box-flex) 258

13.3.5  管理盒子的空間(box-pack和box-align) 260

13.3.6  盒子空間的溢出管理(box-lines) 262

13.4  綜合示例——圖文排版效果 263

13.5  上機練習——淘寶導購菜單 265

13.6  專家解惑 268

第14章  CSS + DIV盒子的浮動與定位 269

14.1  定義DIV 270

14.1.1  什麽是DIV 270

14.1.2  創建DIV 270

14.2  盒子的定位 271

14.2.1  靜態定位 271

14.2.2  相對定位 272

14.2.3  絕對定位 273

14.2.4  固定定位 274

14.2.5  盒子的浮動 275

14.3  其他CSS佈局定位方式 277

14.3.1  溢出(overflow)定位 277

14.3.2  隱藏(visibility)定位 279

14.3.3  z-index空間定位 280

14.4  新增的CSS 3多列佈局 282

14.4.1  設置列寬度 282

14.4.2  設置列數 283

14.4.3  設置列間距 285

14.4.4  設置列邊框樣式 286

14.5  綜合示例——定位網頁的佈局樣式 288

14.6  上機練習——製作陰影文字效果 291

14.7  專家答疑 292

第15章  固定寬度網頁佈局的剖析與製作 293

15.1  CSS的排版觀念 294

15.1.1  將頁面用DIV分塊 294

15.1.2  設置各塊的位置 294

15.1.3  用CSS定位 295

15.2  固定寬度網頁剖析與佈局 299

15.2.1  網頁單列佈局模式 299

15.2.2  網頁1-2-1型佈局模式 303

15.2.3  網頁1-3-1型佈局模式 305

15.3  專家答疑 309

第16章  自動縮放網頁佈局的剖析與製作 311

16.1  自動縮放網頁1-2-1型佈局模式 312

16.1.1  網頁1-2-1等比例變寬佈局 312

16.1.2  網頁1-2-1單列變寬佈局 313

16.2  自動縮放網頁1-3-1型佈局模式 314

16.2.1  網頁1-3-1三列寬度等比例佈局 314

16.2.2  網頁1-3-1單側列寬度固定的變寬佈局 314

16.2.3  網頁1-3-1中間列寬度固定的變寬佈局 317

16.2.4  網頁1-3-1雙側列寬度固定的變寬佈局 320

16.2.5  網頁1-3-1中列和左側列寬度固定的變寬佈局 324

16.3  分列佈局背景色的使用 327

16.3.1  設置固定寬度佈局的列背景色 327

16.3.2  設置特殊寬度變化佈局的列背景色 329

16.4  綜合案例——單列寬度變化佈局 330

16.5  上機練習——多列等比例寬度變化佈局 332

16.6  專家答疑 334

第17章  CSS 3和JavaScript的搭配應用 335

17.1  JavaScript的語法基礎 336

17.1.1  什麽是JavaScript 336

17.1.2  數據類型 336

17.1.3  變量 338

17.1.4  運算符的簡單應用 338

17.1.5  流程控制語句的簡單應用 341

17.1.6  函數的簡單應用 344

17.2  常見的JavaScript編寫工具 347

17.2.1  記事本工具 347

17.2.2  Dreamweaver 348

17.3  JavaScript在HTML中的使用 349

17.3.1  在HTML網頁頭中嵌入JavaScript代碼 349

17.3.2  在HTML網頁中嵌入JavaScript代碼 350

17.3.3  在HTML網頁元素的事件中嵌入JavaScript代碼 351

17.3.4  在HTML中調用已經存在的JavaScript文件 352

17.3.5  通過JavaScript偽URL引入JavaScript腳本代碼 353

17.4  JavaScript與CSS 3的結合使用 354

17.4.1  設置動態內容 354

17.4.2  改變動態樣式 355

17.4.3  動態定位網頁元素 357

17.4.4  設置網頁元素的顯示與隱藏 359

17.5  HTML 5、CSS 3和JavaScript的 搭配應用 360

17.5.1  設定左右移動的圖片 360

17.5.2  製作顏色選擇器 363

17.5.3  製作跑馬燈效果 365

17.6  綜合示例——製作樹形導航菜單 366

17.7  上機練習——製作滾動的菜單 371

17.8  專家答疑 373

第18章  CSS與XML的綜合運用 375

18.1  XML語法基礎 376

18.1.1  XML的基本應用 376

18.1.2  XML文檔的組成和聲明 377

18.1.3  XML元素介紹 379

18.2  用CSS修飾XML文件 381

18.2.1  XML使用CSS 381

18.2.2  設置字型屬性 382

18.2.3  設置色彩屬性 383

18.2.4  設置邊框屬性 384

18.2.5  設置文本屬性 385

18.3  綜合示例1——招聘廣告 387

18.4  綜合示例2——圖文混排頁面 389

18.5  上機練習——古詩欣賞 391

18.6  專家答疑 394

第19章  CSS與Ajax的綜合應用 395

19.1  Ajax概述 396

19.1.1  什麽是Ajax 396

19.1.2  Ajax的關鍵元素 398

19.1.3  CSS在Ajax應用中的

 地位 399

19.2  Ajax快速入門 400

19.2.1  全面剖析XMLHttpRequest對象 400

19.2.2  發出Ajax請求 402

19.2.3  處理服務器響應 403

19.3  綜合示例——製作自由拖動的網頁 405

19.4  上機練習——製作加載條 410

19.5  專家答疑 411

第20章  商業門戶類網站賞析 413

20.1  整體設計 414

20.1.1  顏色應用分析 414

20.1.2  架構佈局分析 415

20.2  主要模塊設計 416

20.2.1  網頁整體樣式插入 416

20.2.2  網頁局部的樣式 417

20.2.3  頂部模塊樣式代碼分析 427

20.2.4  中間主體代碼分析 428

20.2.5  底部模塊分析 432

20.3  網站調整 432

20.3.1  部分內容調整 432

20.3.2  模塊調整 433

20.3.3  調整後預覽測試 435

第21章  製作娛樂休閑類網頁 437

21.1  整體設計 438

21.1.1  應用設計分析 438

21.1.2  架構佈局分析 439

21.2  主要模塊設計 440

21.2.1  網頁整體樣式插入 440

21.2.2  頂部模塊代碼分析 441

21.2.3  視頻模塊代碼分析 442

21.2.4  評論模塊代碼分析 444

21.2.5  熱門推薦模塊代碼分析 445

21.2.6  底部模塊分析 447

21.3  網頁調整 448

21.3.1  部分內容調整 448

21.3.2  調整後預覽測試 449

第22章  製作圖像影音類網頁 451

22.1  整體設計 452

22.1.1  顏色應用分析 452

22.1.2  架構佈局分析 452

22.2  主要模塊設計 454

22.2.1  樣式代碼分析 454

22.2.2  頂部模塊樣式代碼分析 462

22.2.3  網站主體模塊代碼分析 464

22.2.4  底部模塊分析 468

22.3  網站調整 469

22.3.1  部分內容調整 469

22.3.2  模塊調整 470

22.3.3  調整後預覽測試 476

第23章  製作企業門戶類網頁 477

23.1  構思佈局 478

23.1.1  設計分析 478

23.1.2  排版架構 478

23.2  主要模塊設計 479

23.2.1  Logo與導航菜單 479

23.2.2  Banner區 481

23.2.3  資訊區 481

23.2.4  版權信息 484

第24章  製作在線購物類網頁 487

24.1  整體佈局 488

24.1.1  設計分析 488

24.1.2  排版架構 488

24.2  主要模塊設計 489

24.2.1  Logo與導航區 489

24.2.2  Banner與資訊區 491

24.2.3  產品類別區域 492

24.2.4  頁腳區域 494