《基於Web標準的網頁設計與製作》是2015年清華大學出版社出版的圖書，作者是唐四薪。
基本介紹
內容簡介,編輯推薦,前 言,目 錄,
內容簡介
全書遵循Web標準，強調原理性與實用性，技術與美工並重，注重介紹網頁設計與製作中的基本理論和前沿技術，摒棄了一些過時的網頁製作技術。
《基於Web標準的網頁設計與製作》可作為高等院校各專業“網頁設計與製作”課程的教材，也可作為網頁設計、網站製作的培訓類教材，還可供網頁設計和開發人員參考使用。
《基於Web標準的網頁設計與製作》(第2版)全面介紹了基於Web標準的網頁設計與製作技術，採用“原理+實例+綜合案例”的編排方式，所有實例都根據所涉及的原理編排在相關的原理之後，使讀者能迅速理解有關原理的用途。《基於Web標準的網頁設計與製作》分為7章，內容包括網頁與網站的相關知識、HTML語言和XHTML標準、CSS網頁樣式和布局設計、Fireworks美工設計、網站開發和網頁設計的過程與案例，以及JavaScript和jQuery前台腳本編程技術。
《基於Web標準的網頁設計與製作》(第2版)已於2015年7月上市，該版本增加了HTML5等新內容，對JavaScript部分進行了重寫，對章節順序進行了調整，使內容編排更為合理。
編輯推薦
傳統網頁製作課程往往只是單純的講授如何使用DreamWeaver等工具製作HTML頁面，而在現今的企業實際項目開發中則需要開發人員基於WEB標準進行網頁設計，這就造成了課程與實踐的脫節。本書從網頁的“結構”、“表現”、 “行為”三方面闡述如何構建一個符合WEB標準的站點，以及如何綜合運用XHMTL、CSS、JavaScript等具體技術進行網頁設計與開發。
前 言
隨著網際網路技術10年來的飛速發展，各行各業都需要在網際網路上推廣宣傳自己，網頁設計技術對許多人來說已經成為一項基本的計算機套用技能。網頁設計技術在發展過程中也經歷了巨大的變革，從最初Microsoft的網頁製作軟體FrontPage到Macromedia公司的網頁製作“三劍客” （Dreamweaver、Fireworks和Flash）軟體被普遍接受，到2005年Macromedia公司被Adobe公司收購，原有的網頁製作“三劍客”的稱號逐漸淡出。近年來，網頁製作“三劍客”這一名詞有了新的內涵，那就是指XHTML、CSS和JavaScript，它們代表了網頁的結構、表現和行為三個層面。
本書系統地介紹了遵循Web標準的網頁設計方法，Web標準給網頁設計帶來的變化不僅反映在大量使用CSS編碼進行布局，更重要的是使整個網頁設計的過程也發生重大的改變。正如在本書第6章的設計案例中將看到的，在還沒有考慮網頁外觀之前就已經將網頁的HTML代碼寫出來了，這對於表格布局的網頁是不可想像的。通過這種方式實現了“結構”和“表現”相分離，就是Web標準最大的原則和優勢。使得設計師在最初考慮網頁內容時不需要考慮網頁的外觀。
網頁設計這門課程的特點是入門比較簡單，但它的知識結構龐雜，想要成為一名有用的網頁設計師是需要較長時間的理論學習和大量的實踐操作及項目實訓的，學習網頁設計有兩點最重要，一是要務必重視對原理的掌握；二是在理解原理的基礎上一定要多練習、多實踐，通過練習和實踐總能發現很多實際的問題。本書在編寫過程中注重“原理”和“實用”，這表現在所有的實例都是按照其涉及的原理分類，而不是按照套用的領域分類，將這些實例編排在原理講解之後，就能使讀者迅速理解原理的用途，同時由於加深了對原理的理解，可以對實例舉一反三。
在測試網頁時，一定要使用不同的瀏覽器進行測試，建議讀者至少應安裝IE 6和Firefox兩種瀏覽器，這不僅因為製作出各種瀏覽器兼容的網頁是網頁設計的一項基本要求，更重要的是通過分析不同瀏覽器的顯示效果可以對網頁設計的各種原理有更深入的理解。
本書的內容包含了Web前端開發技術的各個方面，如果要將整本書的內容講授完畢，大約需要90學時的課時。如果只有50學時左右的理論課課時，可主要講授本書前四章的內容，後面的內容供學生自學，考慮到“因材施教”的目的，本書的部分內容（在節名後注有“*”號）主要供學有餘力的學生自學。
本書為教師提供了教學用多媒體課件、實例源檔案和習題參考答案。
本書由唐四薪承擔主要編寫任務，參加編寫的還有魏書堤、徐雨明、劉艷波、陳溪輝、戴小新、黃大足、鄒賽和譚曉蘭等。唐四薪編寫了第1、2、4、5、6、7章和第3章的部分內容。魏書堤、徐雨明、劉艷波、陳溪輝、戴小新、黃大足、鄒賽和譚曉蘭編寫了第3章的部分內容。
本書是作者多年從事網頁設計工作及近年來從事網頁設計教學的經驗總結，在編寫過程中，我的學生眭艷鳳、郭文靜、田夢潔、石靈智、何嫻、葉艷、練小祥、容莉莉等提出了很多有創意的想法和建議，為本書的編寫提供了幫助，在此向他們及所有關心本書編寫工作的人士表示感謝。
由於本人水平和教學經驗有限，書中錯誤和不妥之處在所難免，歡迎廣大讀者和同行批評指正。
目 錄
第1章 網頁設計概述 10
1.1 初識網頁設計 10
1.1.1 什麼是網頁 10
1.1.2 網頁設計的兩個基本問題 11
1.1.3 網頁設計語言——HTML簡介 12
1.1.4網頁製作軟體 13
1.2 網站的建立 13
1.2.1 網站的特徵 14
1.2.2 在Dreamweaver中建立站點 14
1.3 Web伺服器與瀏覽器 16
1.3.1 Web伺服器的作用 17
1.3.2瀏覽器的種類和作用 17
1.4 靜態網頁和動態網頁 18
1.5 URL的含義和結構 20
1.6 域名與主機的關係 21
習 題 1 22
第2章HTML 22
2.1 HTML概述 22
2.1.1 HTML文檔的結構 23
2.1.2 Dreamweaver的開發界面 24
2.1.3使用DW新建HTML檔案 24
2.1.4 HTML標記 25
2.1.5 常見的HTML標記及屬性 26
2.2在網頁中添加文本 26
2.2.1 文本格式標記 27
2.2.2文本的換行和空格 28
2.2.3 文本中的字元實體 29
2.2.4字型標記 30
2.2.5創建列表 31
2.3 利用DW代碼視圖提高效率 32
2.3.1 代碼提示 32
2.3.2 拆分視圖和代碼快速定位 33
2.3.3 DW中的常用快捷鍵 34
2.4 插入圖像 34
2.4.1 img＞標記 35
2.4.2 網頁中支持的圖像格式 35
2.5 創建超連結 37
2.5.1 超連結標記a＞ 37
2.5.2 絕對URL與相對URL 38
2.5.3 超連結的種類（href屬性的取值） 40
2.5.4 超連結目標的打開方式 40
2.5.5 超連結製作的原則 41
2.5.6 DW中超連結屬性面板的使用 41
2.6插入flash及多媒體元素 42
2.6.1 插入flash的方法 42
2.6.2 插入視頻或音頻檔案 43
2.6.3 HTML 5新增的多媒體標記 44
2.7 創建表格 46
2.7.1 表格標記（table＞） 46
2.7.2 行tr＞和單元格標記（td＞、th＞） 48
2.7.3 在DW中操作表格的方法 51
2.7.4製作固定寬度的表格 52
2.7.5 特殊效果表格的製作 53
2.7.6 用普通表格與布局表格進行網頁布局 55
2.7.7 表格布局綜合案例——製作太陽能網站 57
2.8 創建表單 59
2.8.1form＞標記及其屬性 59
2.8.2 input/＞標記 61
2.8.3 select＞和option＞標記 63
2.8.4 多行文本域標記textarea＞ 64
2.8.5 表單數據的傳遞過程 64
2.8.6表單中的按鈕 66
2.8.7 表單的輔助標記 66
2.8.8 HTML5新增的表單標記和屬性 66
2.9 框架標記* 69
2.9.1 框架的作用 70
2.9.2 frameset＞標記 70
2.9.3 frame /＞標記 71
2.9.4嵌入式框架標記iframe＞ 72
2.10 頭部標記* 73
習題 74
第3章XHTML與Web標準 75
3.1 XHTML與HTML的區別 75
3.1.1 文檔類型的含義和選擇 75
3.1.2 XHTML與HTML的重要區別 76
3.2 Web標準 77
3.2.1 傳統HTML的缺點 77
3.2.2 Web標準的含義 78
3.2.3 Web標準的優勢 80
3.3 HTML元素的概念 80
3.3.1 行內元素和塊級元素 81
3.3.2 div和span標記 82
3.4 HTML5簡介* 82
3.4.1 HTML5新增的標記 83
3.4.2 HTML5語法的改進 84
習題 85
第4章 CSS 86
4.1 CSS基礎 86
4.1.1 CSS的語法 86
4.1.2 在HTML中引入CSS的方法 87
4.1.3 選擇器的分類 88
4.1.4 CSS文本修飾 91
4.1.5 偽類選擇器及其套用 92
4.2 CSS的特性 93
4.2.1 CSS的層疊性 93
4.2.2 CSS的繼承性 95
4.2.3 選擇器的組合 97
4.2.4 CSS 2.1新增選擇器簡介 102
4.3 CSS設計和書寫技巧* 106
4.3.1 CSS樣式總體設計原則 106
4.3.2 DW對CSS的可視化編輯支持 107
4.3.3 CSS屬性的值和單位 109
4.3.4 瀏覽器的私有CSS屬性 110
4.4盒子模型及標準流下的定位 111
4.4.1 盒子模型基礎 111
4.4.2 盒子模型的套用 115
4.4.3 盒子在標準流下的定位原則 117
4.5 背景的控制 121
4.5.1 CSS的背景屬性 122
4.5.2背景的基本運用技術 123
4.5.3 滑動門技術－背景的高級運用 126
4.5.4 背景圖案的翻轉－控制背景的顯示區域 130
4.5.5 CSS圓角設計 131
4.6 盒子的浮動 135
4.6.1 盒子浮動後的特點 135
4.6.2 浮動的清除 137
4.6.3 浮動的瀏覽器解釋問題 138
4.6.4 浮動的套用舉例 142
4.7 相對定位和絕對定位 147
4.7.1 定位屬性和偏移屬性 147
4.7.2 相對定位 148
4.7.3 相對定位的套用舉例 148
4.7.4 絕對定位 150
4.7.5 絕對定位的套用舉例 152
4.7.6 DW中定位屬性面板介紹 161
4.7.7 與position屬性有關的CSS屬性 162
4.8 CSS+div布局 166
4.8.1 分欄布局的種類 167
4.8.2 固定寬度布局 168
4.8.3 CSS布局的案例——重構太陽能網站 168
4.8.4 可變寬度布局 172
4.8.5 HTML5 新增的文檔結構標記 176
4.8.6 CSS 3新增功能和屬性一瞥* 177
4.9 CSS瀏覽器的兼容問題* 178
習 題 180
第5章 Fireworks 182
5.1 Fireworks基礎 182
5.1.1 矢量圖和點陣圖的概念 182
5.1.2 認識Fireworks的界面 183
5.1.3 新建、打開和導入檔案 184
5.1.4畫布和圖像的調整 185
5.2 操作對象 188
5.2.1選擇、移動和對齊對象 189
5.2.2 變形和扭曲 189
5.2.3 改變對象的疊放次序 191
5.2.4 設定對象的不透明度 191
5.2.5 操作對象的快捷鍵 192
5.3 編輯點陣圖 192
5.3.1 創建和取消選區 192
5.3.2 複製和移動選區中的內容 196
5.3.3 編輯選區中的像素區域 197
5.4 繪製矢量圖形 199
5.4.1 創建矢量圖形 199
5.4.2 填充和筆觸屬性 200
5.4.3 自由形狀工具 203
5.4.4 調整矢量線條 205
5.4.5 路徑的切割和組合 206
5.4.6 路徑和選區的相互轉換 208
5.5 文本對象的使用 210
5.5.1 文本編輯和修飾的過程舉例 210
5.5.2 特殊文字效果製作舉例 212
5.5.3 將文本附加到路徑 213
5.6 蒙版 214
5.6.1 使用“貼上於內部”創建矢量蒙版 214
5.6.2 創建圖層蒙版 220
5.7 簡單GIF動畫的製作* 223
5.7.1 使用補間實例製作動畫 223
5.7.2 製作遮罩動畫 224
5.8 切片及導出 225
5.8.1 切片的作用 226
5.8.2 切片的基本操作 226
5.8.3 切片的實例 228
習 題 231
第6章 網站開發和網頁設計過程 233
6.1網站開發的過程 233
6.1.1 基本任務和角色 233
6.1.2 網站開發過程的各環節 234
6.2 遵循Web標準的網頁設計步驟 237
6.2.1網頁設計步驟概述 237
6.2.2 內容分析 239
6.2.3 HTML結構設計 240
6.2.4 原型設計 243
6.2.5 網頁效果圖設計 245
6.2.6 布局設計 247
6.2.7 視覺設計 252
6.2.8 互動效果設計 260
6.2.9 CSS布局的優點 262
6.3 網站的風格設計 262
6.3.1 網站風格設計的基本原則 263
6.3.2 網頁色彩的搭配 263
6.3.3 網頁版式設計 271
6.4 網站的欄目規劃和目錄結構設計 274
6.4.1 網站的欄目規劃 274
6.4.2 網站的目錄結構設計 275
6.5 網站的導航設計* 276
6.5.1 導航的實現方法 277
6.5.2 導航的設計策略 278
6.6 網站的環境準備* 278
6.6.1 架設網站的基本條件 278
6.6.2 購買主機空間和域名 279
6.6.3 配置主機空間和域名 279
6.6.4 上傳網站 280
習 題 6 281
第7章 JavaScript 282
7.1 JavaScript簡介 282
7.1.1 JavaScript的特點 282
7.1.2 JavaScript的用途 282
7.1.3 JavaScript的代碼結構 283
7.1.4 事件監聽程式 285
7.1.5 開發和調試JavaScript的工具 286
7.2 JavaScript語言基礎 287
7.2.1 JavaScript的變數 287
7.2.2 JavaScript的運算符 288
7.2.3 JavaScript數據類型 290
7.2.4 數組（array） 292
7.2.5 JavaScript語句 294
7.2.6 函式 298
7.3 對象 299
7.3.1 JavaScript對象 299
7.3.2 with語句 301
7.3.3 this關鍵字 301
7.3.4 JavaScript的內置對象 302
7.4 瀏覽器對象模型BOM 303
7.4.1 window對象 303
7.4.2定時操作函式 305
7.4.3 location對象 308
7.4.4 history對象 309
7.4.5 document對象 309
7.4.6 screen對象 311
7.5 文檔對象模型DOM 312
7.5.1 網頁中的DOM模型 312
7.5.2 DOM編程引例 313
7.5.3 訪問指定節點 316
7.5.4 訪問和設定元素的HTML屬性 319
7.5.5 訪問和設定元素的內容 321
7.5.6 訪問和設定元素的CSS屬性 321
7.5.7 創建和替換元素節點 324
7.5.8 用DOM控制表單 325
7.6 事件處理 327
7.6.1 事件流 327
7.6.2 處理事件的兩種方法 328
7.6.3 瀏覽器中的常用事件 330
7.6.4 事件對象 333
7.6.5 DOM和事件編程實例 335
7.7 JavaScript外掛程式套用舉例 340
7.7.1 使用Highslide製作lightbox效果 340
7.7.2 使用pxiviewer製作圖片輪顯效果 342
7.8 jQuery框架使用入門* 343
7.8.1 jQuery框架的功能 343
7.8.2下載並使用jQuery 344
7.8.3 jQuery中的“$” 345
7.8.4 jQuery對象與DOM對象 348
7.8.5 jQuery的選擇器 349
7.8.6 jQuery中的常用方法 352
7.8.7 jQuery的套用舉例 353
7.8.8 jQuery的外掛程式套用舉例* 360
習 題 362
參考文獻 364
