《網站開發案例課堂：CSS3+DIV網頁樣式與布局案例課堂》作者根據自己在長期教學中積累的豐富的網頁設計教學經驗，完整、詳盡地介紹了CSS 3 + DIV網頁樣式與布局的技術。
《網站開發案例課堂：CSS3+DIV網頁樣式與布局案例課堂》共分為24章，前19章分別介紹了開發網站的準備工作、HTML 5技術、CSS樣式入門、CSS樣式基本語法、CSS 3的高級特性、控制網頁字體和段落樣式、控制網頁圖片樣式、控制網頁背景和邊框樣式、美化網頁瀏覽效果、控制表格與表單樣式、控制列表樣式、使用CSS 3濾鏡美化網頁元素、CSS定位與DIV布局核心技術、CSS + DIV盒子的浮動與定位、固定寬度網頁布局剖析與制作、自動縮放網頁布局剖析與制作、CSS 3與JavaScript的搭配應用、CSS與XML的綜合應用、CSS與Ajax的綜合應用。最后5章介紹了5個綜合性網站的例子。通過學習案例，使讀者進一步鞏固所學的知識，提高實戰能力。
《網站開發案例課堂：CSS3+DIV網頁樣式與布局案例課堂》內容豐富、全面，圖文并茂，步驟清晰，通俗易懂，專業性強，使讀者能理解CSS 3 + DIV網頁樣式與布局的技術，并能解決實際生活或工作中的問題，真正做到知其然更知其所以然。通過重點章節，條理清晰、系統地介紹了讀者希望了解的網頁設計技巧。
《網站開發案例課堂：CSS3+DIV網頁樣式與布局案例課堂》涉及面廣泛，幾乎囊括了CSS 3 + DIV網頁樣式與布局的所有重要知識，適合所有的網頁設計初學者快速入門，同時也適合想全面了解CSS 3 + DIV網頁樣式與布局的設計人員閱讀。
伴隨著Web 2.0潮流的盛行，傳統的表格布局模式正逐漸被網頁標準化CSS + DIV的設計方式取代，對最新CSS 3的學習也成為網頁設計師的必修功課。本書專門針對網頁樣式與布局的初學者，幫助他們快速提高實戰水平。
1. 本書特色
(1)知識全面：由淺入深，涵蓋了所有的CSS 3 + DIV知識點，幫助讀者快速掌握網頁設計方面的技能。
(2)圖文并茂：在介紹案例的過程中，每一個操作均有對應的插圖。圖文結合的方式使讀者在學習過程中能夠直觀、清晰地看到操作的過程及效果，便于更快地理解和掌握。
(3)易學易用：顛覆傳統“看”書的觀念，變成一本能“操作”的圖書。
(4)案例豐富：把知識點融會于系統的案例實訓中，并且結合經典案例進行講解和拓展，進而實現“知其然，并知其所以然”的效果。
(5)貼心提示：本書對讀者在學習過程中可能會遇到的疑難問題以“提示”和“注意”等形式進行說明，以免讀者在學習的過程中走彎路。
(6)超值贈送：除了本書的素材和結果外，還附贈封面所述的大量的資源，讀者可以全面掌握網頁設計方方面面的知識。
2. 讀者對象
本書不僅適合網頁設計初級讀者入門學習，也可作為中、高級用戶的參考手冊。書中大量的實例模擬真實的網頁設計案例，對讀者的工作有現實的借鑒作用。
3. 作者團隊
本書作者劉玉紅長期從事網站設計與開發工作。胡同夫、梁云亮、王攀登、王婷婷、陳偉光、包慧利、孫若淞、肖品、王維維和劉海松等人參與了本書的編寫工作。
本書雖然傾注了編者的努力，但由于水平有限，書中難免存在疏漏之處，懇請讀者批評指正。讀者如果遇到問題或有意見和建議，敬請與我們聯系，我們將全力提供幫助。
編 者
第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 521
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 瀏覽器與CSS48
3.1.3 CSS的發展歷史49
3.2 CSS 3的常用單位49
3.2.1 顏色單位49
3.2.2 長度單位53
3.3 編輯和瀏覽CSS54
3.3.1 手工編寫CSS54
3.3.2 用Dreamweaver編寫CSS55
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 綜合示例——制作炫彩網站Logo72
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 定義DIV270
14.1.1 什么是DIV270
14.1.2 創建DIV270
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 什么是JavaScript336
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 Dreamweaver348
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使用CSS381
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 什么是Ajax396
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
第1章
制作網頁的
準備工作
隨著Internet的發展與普及，越來越多的人開始在網上通信、工作、購物、娛樂，甚至在網絡上建立自己的網站。網站代表了企業和個人的形象，正確的布局可以讓網站的結構更加合理，使網站變得更加美觀。
1.1 認識網頁和網站
現在，網站已經成為越來越重要的信息發布途徑。擁有自己的網站，可以說是每個網頁創作者的夢想。要學習網站建設，首先應當認識一下網頁和網站，了解它們的相關概念。
1.1.1 什么是網頁
網頁是Internet中最基本的信息單位，是把文字、圖形、聲音及動畫等各種多媒體信息相互鏈接起來而構成的一種信息表達方式。
通常情況下，網頁中有文字和圖像等基本信息，有些網頁中還有聲音、動畫和視頻等多媒體內容。
網頁一般由站標、導航欄、廣告欄、信息區和版權區等部分組成，如圖1-1所示。
在訪問一個網站時，首先看到的網頁一般稱為該網站的首頁。有些網站的首頁具有歡迎訪問者的作用。首頁只是網站的開場頁，單擊頁面上的文字或圖片，即可打開網站主頁，而首頁也隨之關閉，如圖1-2所示。
圖1-1 網頁的外觀
圖1-2 網站的首頁
網站主頁與首頁的區別在于：主頁設有網站的導航欄，是所有網頁的鏈接中心。但多數網站的首頁與主頁通常合為一個頁面，即省略了首頁而直接顯示主頁，在這種情況下，它們指的是同一個頁面，如圖1-3所示。
圖1-3 網站主頁與首頁合二為一
1.1.2 什么是網站
網站就是在Internet上通過超級鏈接的形式構成的相關網頁的集合。簡單地說，網站是一種通信工具，人們可以通過網頁瀏覽器來訪問網站，獲取自己需要的資源或享受網絡提供的服務。例如，人們可以通過淘寶網站查找自己需要的信息，如圖1-4所示。
圖1-4 淘寶網站
1.2 網頁中需要包含的要素
在互聯網中，網頁是一個文件，存儲在某一臺與互聯網相連的計算機或服務器中，使用統一資源定位符（URL）來識別和訪問，本節就來介紹網頁中需要包含的要素。
1.2.1 需要HTML文件
HTML（Hypertext Marked Language），即超文本標記語言，是一種用來制作超文本文檔的簡單標記語言，是應用非常廣泛的網頁格式，也是用來顯示Web頁面的語言之一。
網頁中所有定義的色彩、文字、表格，甚至是視頻等元素的網頁相關代碼，都是編寫在HTML文件中的，可以說HTML就是網站展示聲音、圖片、文字等元素的平臺。圖1-5展示了淘寶網首頁的HTML相關代碼。
圖1-5 淘寶網首頁的HTML相關代碼
1.2.2 需要DIV層
標記是一個區塊容器標記，在
標記中，可以放置其他的一些HTML元素，例如段落
、標題
、表格、圖片和表單等。然后使用CSS 3相關的屬性把div容器標記中的元素作為一個獨立的對象進行修飾，這樣就不會影響到其他HTML元素了。
形象地講，在HTML網頁文件中，DIV就相當于一個“圈地者”，它將網頁分成若干個小區域，每一個DIV在網頁上占據了一定的位置，在這個位置上，用戶可以放置特定的內容。圖1-6中的“手機數碼”區域，就是先用DIV圈出一塊地方，然后在上面放置“手機數碼”的分類信息，其他區域也是這樣來放置網頁元素的，最后合在一起，就整合出了一個完美的網頁了。
圖1-6 網頁上的“手機數碼”區域及其他區域
1.2.3 需要CSS定義的網頁樣式
在網頁中，設計者將DIV元素都放置好了，要想給瀏覽者呈現出一個豐富多彩的網頁效果，還需要利用CSS來定義網頁樣式。
在設計網頁的過程中，CSS扮演了一個“美術家”的角色，利用CSS，可以定義網頁文字、圖片以及視頻等元素的顯示方式，使其能夠更貼切地接近我們的要求。如圖1-7所示的網頁中就使用了CSS來定義網頁樣式。
圖1-7 使用了CSS來定義網頁樣式
CSS樣式一般是作用在DIV上的，它需要與DIV一起構成網頁上的一個模塊，而網頁又是由多個DIV構成的，因此，從狹義上講，HTML + DIV + CSS組合起來，就能構成一個網站。
1.2.4 需要JavaScript設置網頁動畫
JavaScript是一種為了使網頁能夠具有交互性，能夠包含更多活躍的元素，而嵌入在網頁中的技術，它使我們的網頁能夠表現得內容更加生動，使網頁的效果更加醒目。
JavaScript作為一種可以給網頁增加交互性的腳本語言，擁有近20年的發展歷史。它的簡單、易學易用特性，使其立于不敗之地。使用JavaScript可以很容易地制作出很多網頁動畫效果，如漂亮的時鐘、廣告效果的跑馬燈等。
圖1-8中，網頁里的廣告圖片會自動地切換，而且單擊圖片左右兩側的箭頭時，廣告也會切換。這種效果就是用JavaScript腳本控制的。
圖1-8 網頁里的廣告圖片效果
1.2.5 需要域名與服務器空間
一個網站開發完成后，要想運營，需要給網站申請一個域名。申請域名的方法很多，用戶可以登錄域名服務商的網站，根據提示申請域名。域名有免費域名和收費域名兩種，用戶可以根據實際的需要進行選擇。
域名注冊成功之后，還需要申請網站空間，應根據不同的網站類型選擇不同的空間。網站空間有免費空間和收費空間兩種。對于個人網站的用戶來說，可以先申請免費空間使用。免費空間只需向空間的服務提供商提出申請，在得到答復后，按照說明上傳主頁即可，主頁的域名和空間都不用操心。對于商業網站而言，用戶需要考慮空間和安全性等因素，為此可以選擇收費網站。
使用免費空間美中不足的是：網站的空間有限，提供的服務一般，空間不是非常穩定，域名不能隨心所欲地選擇。
域名與網站是一一對應的關系，用戶只需要在瀏覽器里輸入某個域名，就能進入到對應的站點中。例如，在瀏覽器的地址欄中輸入“www.baidu.com”這個域名，就能進入百度網站，如圖1-9所示。
圖1-9 進入百度網站
1.3 一個簡單網頁的基本構成
任何一個網頁的內容都包含在和這對標簽之內，在這對標簽中，通常包含三個要素，分別是head部分、body部分以及注釋部分。
1.3.1 head部分
頭標記head用于說明文檔頭部的相關信息，一般包括標題信息、元信息、定義CSS樣式和腳本代碼等。HTML的頭部信息以結束，語法格式如下：
...
元素的作用范圍是整篇文檔，定義在HTML語言頭部的內容往往不會在網頁上直接顯示。在head標記中，一般可以設置title和meta等標記的內容。
1.3.2 body部分
網頁所要顯示的內容都放在網頁的主體標記內，主體標記以開始，以標記結束，語法格式如下。
...
主體標記是HTML文件的重點所在，HTML的所有標記都將放在這個標記內。然而它并不僅僅是一個形式上的標記，它本身也可以控制網頁的背景顏色或背景圖像。
注意，在構建HTML結構時，標記不允許交錯出現，否則會造成錯誤。例如，下列代碼中出現了交錯：
注釋語句元素由前后兩半部分組成，前半部分由一個左尖括號、一個半角感嘆號和兩個連字符頭組成，后半部分由兩個連字符和一個右尖括號組成。例如：
網頁
頁面注釋不但可以對HTML中一行或多行代碼進行解釋說明，而且能夠注釋掉某些代碼。如果希望某些HTML代碼在瀏覽器中不顯示，可以將這部分內容放在之間。例如，修改上述代碼，如下所示：
……
修改后的代碼，將
標記作為注釋內容處理，在瀏覽器中將不會顯示這部分內容。
?
1.4 ?制作網頁的總體流程
對于一個網站來說，除了網頁內容外，還要對網站進行整體規劃設計。格局凌亂的網站的內容再精彩，也不能說是一個好網站。
要設計出一個精美的網站，前期的規劃是必不可少的。
1.4.1 ?網頁規劃
規劃站點就像設計師設計大樓一樣，圖紙設計好了，才能建成一座漂亮的樓房。規劃站點就是對站點中所使用的素材和資料進行管理和規劃，對網站中欄目的設置、顏色的搭配、版面的設計、文字圖片的運用等進行規劃。
一般情況下，將站點中所用的圖片和按鈕等圖形元素放在images文件夾中，HTML文件放在根目錄下，而動畫和視頻等放在flash文件夾中。對站點中的素材進行詳細的規劃，便于日后管理。
1.4.2 ?搜集資料
確定了網站風格和布局后，就要開始搜集素材了。常言道：“巧婦難為無米之炊”，要讓自己的網站有聲有色、能吸引人，就要盡量搜集素材，包括文字、圖片、音頻、動畫及視頻等，搜集到的素材越充分，制作網站就越容易。素材既可以從圖書、報刊、光盤及多媒體上得來，也可以從網上搜集，還可以自己制作，然后把搜集到的素材去粗取精，選出制作網頁所需的素材。如圖1-10所示就是百度圖庫里面的精彩圖片。
?
圖1-10 ?搜索素材圖片
不過，在搜集圖片素材時，一定要注意圖片的大小，因為在網絡中傳輸時，圖片的容量越小，傳輸的速度就越快，所以應盡量搜集容量小、畫面精美的圖片。
?
1.4.3 ?使用Photoshop設計網頁的總體效果
制作網頁是一個復雜而細致的過程，一定要按照先大后小、先簡單后復雜的順序來制作。所謂先大后小，就是在制作網頁時，先把大的結構設計好，然后再逐步完善小的結構設計。所謂先簡單后復雜，就是先設計出簡單的內容，然后再設計復雜的內容，以便出現問題能及時修改。使用Photoshop可以設計網頁的總體效果。如圖1-11所示，就是使用Photoshop制作出的網頁效果。
?
圖1-11 ?使用Photoshop制作出的網頁總體效果
1.4.4 ?通過切圖，得到網頁素材文件
在得到網頁的總體效果后，還需要通過切圖，得到網頁素材文件，最常用的切圖工具仍然是Photoshop。切圖并保存素材文件的操作步驟如下。
?打開Photoshop軟件，在工作界面中選擇“文件”→“打開”菜單命令，在打開的對話框中選擇制作好的網頁總體效果圖，如圖1-12所示。
?在工具箱中單擊“切片工具”按鈕 ，根據需要，在網頁中選擇需要切割的圖片，如圖1-13所示。
?
圖1-12 ?打開網頁效果圖 ?
圖1-13 ?選擇切片
?選擇“文件”→“存儲為Web所用格式”菜單命令，彈出“存儲為Web和設備所用格式”對話框，在其中選中所有切片圖像，如圖1-14所示。
?單擊“存儲”按鈕，即可打開“將優化結果存儲為”對話框，單擊“切片”后面的下三角按鈕，從彈出的下拉列表中選擇“所有切片”選項，如圖1-15所示。
?
圖1-14 ?“存儲為Web和設備所用格式”對話框 ?
圖1-15 ? “將優化結果存儲為”對話框
?單擊“保存”按鈕，即可將所有切片中的圖像保存起來，如圖1-16所示。
?
圖1-16 ?開始進行切片并保存
? 在切圖過程中，如果有格式一致的重復項，我們只需切一次，其他重復項我們通過調整table表格，使它正常，這樣做的好處有兩點，一是避免重復勞動，二是保證每個重復項表格圖片大小統一或一致。
1.4.5 ?搭建網頁DIV層
開發網站的首要任務就是搭建網頁DIV層，搭建DIV的方法是在HTML里的body部分，先用一些空白的DIV層說明某個位置應該放某個特定的模塊。
如圖1-17所示，我們通過Photoshop得到了網頁的整體效果后，下面就可以在HTML頁面中用DIV搭建起其中的“產品分類”、“聯系我們”、“友情鏈接”等模塊，最后再向DIV層添加相應的內容，來實現效果了。
?
圖1-17 ?DIV效果演示
1.4.6 ?定義CSS和JavaScript效果
搭建好網頁的DIV層后，就能在網頁中通過HTML標簽來定義頁面的效果了。在搭建的過程中，需要使用CSS來定義樣式，用JavaScript來定義動態的效果。
CSS的作用主要是定義網頁中的各個部分以及元素的樣式，比如圖片的大小、文字的顯示方式、邊框的樣式等。
JavaScript的作用主要是定義網頁動態效果，通過JavaScript的設置，可以使網頁變得更加靈活、親切，能夠吸引更多的眼球。如圖1-18所示，這是在某頁面中添加了JavaScript腳本，實現的效果就是圖片自動循環切換。
?
圖1-18 ?某頁面添加JavaScript腳本實現的效果
1.4.7 ?測試網頁
網頁制作完畢，上傳到網站之后，要在瀏覽器中打開網站，逐一對站點中的網頁進行測試，發現問題要及時修改，然后重新上傳。
1. 文字、圖片的測試
網頁的主要元素就是文字與圖片，在網頁中，適當的圖片和動畫既能起到廣告宣傳的作用，又能起到美化頁面的作用。一個網頁的元素可以包括圖片、動畫、邊框、顏色、字體、背景、按鈕等。測試的內容主要包括以下幾個部分：
? 要確保圖形有明確的用途，圖片或動畫不要胡亂地堆在一起，以免浪費傳輸時間。
? 驗證所有頁面字體的風格是否一致，以及文字表述信息是否有誤。
? 背景顏色應該與字體顏色和前景顏色相搭配。
? 圖片的大小和質量也是一個很重要的因素，一般采用JPG或GIF壓縮。
2. 測試鏈接
一個網頁中，一般存在有多個超級鏈接，測試鏈接的主要內容可分為三個方面：
? 測試所有鏈接是否按指示的那樣確實鏈接到了該鏈接的頁面。
? 測試所鏈接的頁面是否存在。
? 保證Web應用系統上沒有孤立的頁面。所謂孤立頁面，是指沒有鏈接指向該頁面，只有知道正確的URL地址才能訪問。
3. 瀏覽器兼容性測試
瀏覽器是Web客戶端最核心的構件，來自不同廠商的瀏覽器對Java、JavaScript、 ActiveX、plug-ins或不同的HTML規格有不同的支持。例如，ActiveX是Microsoft的產品，是為Internet Explorer而設計的，JavaScript是Netscape的產品，Java是Sun的產品等。另外，框架和層次結構風格在不同的瀏覽器中也有不同的顯示，甚至根本不顯示。不同的瀏覽器對安全性和Java的設置也不一樣。
測試瀏覽器兼容性的一個方法是創建一個兼容性矩陣。在這個矩陣中，測試不同廠商、不同版本的瀏覽器對某些構件和設置的適應性。
1.5 ?網站種類與網頁布局方式
當用戶在網絡中遨游時，一個個精彩的網頁會呈現在我們面前。網頁的精彩因素有哪些呢？色彩的搭配、文字的變化、圖片的處理等，這些當然是不可忽略的因素，除了這些，還有一個重要的因素，那就是網頁的布局設計。
1.5.1 ?網站的種類
按照內容形式的不同，網站可以分為門戶網站、職能網站、專業網站和個人網站。
1．門戶網站
門戶網站是指涉及領域非常廣泛的綜合性網站，如國內著名的三大門戶網站：網易、搜狐和新浪。如圖1-19所示為網易網站的首頁。
2．職能網站
職能網站是指一些公司為展示其產品或對其所提供的售后服務進行說明而建立的網站。如圖1-20所示為聯想集團的中文官方網站。
?
?
-->
新書資訊