內容簡介
《CSS與HTML Web設計實踐指南》主要介紹如何利用CSS和HTML技術進行Web設計。《CSS與HTML Web設計實踐指南》首先從Web技術的發展和基礎知識開始,詳細地介紹了字型樣式、圖像、連結與導航、表格等方面的知識,然後說明了解決不同瀏覽器之間兼容性問題的方法,最後通過圖庫、網上商店、公司主頁三個實例闡述了整合的方法。《CSS與HTML Web設計實踐指南》根據實際的工作需要來組織各種知識,有效地融合了CSS和HTML等技術細節。
《CSS與HTML Web設計實踐指南》是一本針對Web設計工作的實用參考手冊,不管是初學者還是資深設計人員都能夠從中獲益。
作者簡介
Craig Grannell是一位著名的Web設計師和作家,多年來一直高舉著Web標準的旗幟。他最初接受的是藝術方面的訓練,在1990年中期進入了數字媒體的世界。他在不同領域創造了許多創新性項目,從視頻和基於裝置的音頻作品到奇特的現場演出,他有時藉助於計算機、電視、視頻設備和PA系統的幫助,有時則是憑藉著自己的智慧。他的那些具有創造力的有趣的藝術作品,往往蘊含著一種隱晦且具有諷刺意味的特徵,容易引起觀眾的共鳴,從而在許多頂尖的歐洲媒體藝術節上獲得榮譽。
但是,Crai9很快就意識到他必須選擇正確的生活道路。幸運的是,Web吸引了他。一開始他只是通過線上作品展示網站來推廣他的藝術作品,後來Web逐漸成為他自己的一種創造性的媒體,在此之後他就一直投身於這項工作。在這段時間中,他還創建了SnubCommunications組織,這是一個從事設計和寫作工作的組織,其客戶包括Rebellion Developments(2000 AD的出版商)、IDG UK(MacworM、PCAdvisor、DigitalArts等雜誌的出版商)以及SwimRecords等企業。
包括你現在拿著的這本書在內,Crai9已經創作了Web Designer's Reference和許多與
Dreamweaver相關的書籍,包括Foundation Web Design with Dreamweaver 8。此外,他還在Computer Art、MacFormat、net/Prnctical Web Design、4Talent、MacUser、Cre@te Online等多個出版物上發表了許多文章。
在不設計網站的時候,Craig常常花時間通過其eclecticaudi0項目跟蹤全球的超級明星。
編輯推薦
這是一本特殊的書,它將教你如何設計出遵循標準的、美觀的、可用性高的網站,而且不會讓你看到太多無聊的基礎知識、理論或者難以理解的細節內容。《CSS與HTML Web設計實踐指南》教你:使用語義標籤創建遵循標準並且結構完整的網頁:
使用CSS創建美觀的頁面布局、排版樣式和導航欄;
在時尚設計和Web標準中尋求平衡;
學習如何修復常見的瀏覽器缺陷,確保所有用戶都能正常訪問你的網頁;
了解與XHTML元素和屬性、CSS屬性和值、瀏覽器等相關的內容。
目錄
第1章 Web設計入門. 1
1.1 Internet簡史 2
1.2 為什麼建立一個網站 3
1.3 觀眾的要求 4
1.4 Web設計概述 5
1.5 HTML和XHTML簡介 6
1.5.1 HTML標記和元素概念簡介 6
1.5.2 嵌套標記 7
1.5.3 Web標準與XHTML 7
1.5.4 語義標示 8
1.6 CSS簡介 9
1.6.1 使設計與內容分離 9
1.6.2 CSS規則 10
1.6.3CSS選擇符類型 11
1.6.4 為網頁添加樣式 13
1.6.5css盒子模型說明 15
1.7 創建樣板(boilerplate) 16
1.8 實現網站內容 21
1.8.1 信息架構和網站地圖 22
1.8.2 基本網頁結構和布局 22
1.8.3 Web設計的局限性 24
第2章 網頁基礎 26
2.1 從基礎開始 27
2.2 文檔默認值 27
2.2.1 DOCTYPE聲明解說 29
2.2.2 局部DTD 30
2.2.3 XML聲明是什麼樣的 31
2.3 head(報頭)部分 31
2.3.1 頁面標題 32
2.3.2 meta標記和搜尋引擎 33
2.3.3 連線外部文檔 34
2.4 body(主體)部分 38
2.4.1 CSS中內容的外邊距和內邊距 38
2.4.2 將所有元素的內外邊距設定為0 39
2.4.3 使用盒子的CSS簡寫 39
2.4.4 設定默認字型和字型顏色 40
2.5 網頁背景 41
2.5.1 CSS中的網頁背景 41
2.5.2 網頁背景概念 44
2.6 關閉你的文檔 51
2.7 命名你的檔案 52
2.8 添加注釋 52
2.9 網頁基本檢查列表 53
第3章 使用字型樣式 54
3.1 排版技術簡介 55
3.2 舊的文本樣式設計方法 56
3.3 一個新的開始:語義標示 57
3.3.1 段落和標題 58
3.3.2 邏輯和物理的樣式 58
3.3.3 結構良好的標示的重要性 61
3.4 使用CSS設定文本樣式 62
3.4.1 定義字型顏色 63
3.4.2 定義字型 63
3.4.3 為文本使用圖像 68
3.4.4 定義字型大小和行高 70
3.4.5 定義字型樣式.字型灰度和字型大小寫轉換 73
3.4.6 用於字型屬性的CSS簡寫 74
3.4.7 控制文本元素邊距 75
3.4.8 將文本縮進用於與印刷類似的段落 75
3.4.9 設定字元間距和字間距 76
3.4.10 使用text-transform控制大小寫 77
3.4.11 使用類和span創建備選項 77
3.4.12 樣式化語義標示 78
3.4.13 使用CSS創建段首大字和插入引用 86
3.5 使用列表 94
3.5.1 無序列表 94
3.5.2 排序列表 94
3.5.3 定義列表 95
3.5.4 嵌套列表 95
3.5.5 使用CSS樣式化列表 96
3.5.6 列表的外邊距和內邊距 98
3.5.7 用於導航的行內列表 99
3.5.8 創造性地使用列表 99
第4章 使用圖像 104
4.1 簡介 105
4.2 色彩理論 105
4.2.1 色輪 105
4.2.2 加色和減色系統 105
4.2.3 使用色輪創建配色方案 106
4.2.4 使用十六進制值 108
4.2.5 網路安全顏色 108
4.3 選擇圖像格式 109
4.3.1 JPEG 109
4.3.2 GIF 110
4.3.3 GIF89:透明的GIF 111
4.3.4 PNG 112
4.3.5 其他圖像格式 113
4.4 常見的Web圖像錯誤 113
4.4.1 為正文使用圖形 113
4.4.2 不從原始圖像開始處理 114
4.4.3 改寫原始文檔 114
4.4.4 雜亂的背景 114
4.4.5 缺乏對比 115
4.4.6 使用錯誤的圖像格式 115
4.4.7 在HTML中重新設定尺寸 115
4.4.8 沒有平衡質量和檔案尺寸 116
4.4.9 文本覆蓋及圖像分割 116
4.4.10 盜用圖像和設計 117
4.5 在XHTML中使用圖像 117
4.5.1 使用備用文本提高可訪問性 117
4.5.2 基於連結的圖像的描述性備用文本 118
4.5.3 用於界面圖像的空alt屬性118
4.5.4 對提示條套用備用文本和標題文本 118
4.6 在處理圖像時使用CSS 119
4.6.1 套用CSS圖像框線 119
4.6.2 使用CSS使文本環繞圖像 121
4.6.3 顯示隨機圖像 122
第5章 使用連結及創建導航 127
5.1 Web導航簡介 128
5.2 導航類型 128
5.2.1 內聯導航 128
5.2.2 網站導航 128
5.2.3 基於搜尋的導航 129
5.3 創建網頁連結並加上樣式 130
5.3.1絕對連結130
5.3.2 相對連結 131
5.3.3 根目錄相對連結 131
5.3.4 頁面內部連結 132
5.3.5 與段落標識符的向後兼容性 132
5.3.6 頁面頂端連結 133
5.3.7 連結狀態 134
5.3.8 使用CSS定義連結狀態 134
5.3.9 正確排列連結狀態 135
5.3.10 a和a:link之間的差別 136
5.3.11 使用CSS編輯連結樣式 136
5.3.12 多重連結狀態:層疊 138
5.3.13 增強的連結可訪問性和易用性.. 140
5.3.14 連結目標 146
5.4 連結和圖像 147
5.4.1 為圖像添加彈出框 148
5.4.2 圖像映射 152
5.4.3 使用CSS模擬圖像映射 153
5.5 使用JavaScript增強連結 158
5.5.1 創建一個彈出式視窗 158
5.5.2 創建線上圖庫 160
5.5.3 可收縮的頁面內容 164
5.6 創建導航欄 169
5.6.1 為導航欄使用列表 169
5.6.2 使用行內列表 175
5.6.3 具備翻滾效果的圖形化導航 183
5.7 Web導航應該做的和不應該做的 200
第6章 表格:自然(以及W3C)的需求 201
6.1 表格的大爭論 202
6.2 表格如何工作 202
6.2.1 添加一個框線 203
6.2.2 單元格間隔和內邊距 203
6.2.3 跨越行和單元格 203
6.2.4 設定大小和對齊方式 204
6.3 創建容易理解的表格 206
6.3.1 標題和摘要 206
6.3.2 使用表頭 206
6.3.3 行組 207
6.3.4 範圍和表頭 207
6.3.5 建立一個表格 209
6.4 設定表格樣式 212
6.4.1 添加表格框線 212
6.4.2 添加分隔條 216
6.5 用於布局的表格 218
第7章 使用CSS進行頁面設計 220
7.1 Web布局 221
7.1.1 格線和方框 221
7.1.2 使用欄目 221
7.1.3 固定設計vs.流式設計 222
7.1.4 布局設計技術:表格vs.CSS 223
7.1.5 符合邏輯的元素放置 223
7.2 CSS布局設計工作流程 224
7.2.1 布局剖析:表格vs.CSS 224
7.2.2 創建頁面結構 224
7.2.3 盒子格式 225
7.3 CSS布局:一個盒子 226
7.4 嵌套的盒子:boxout 232
7.5 使用多重盒子和欄目的高級布局 236
7.5.1 使用兩個結構化div 236
7.5.2 在包裝器中放置欄目及清除浮動內容 243
7.5.3 使用工具條和多個boxout 247
7.5.4 創建兩側的工具條 251
7.5.5 自動調整布局 256
7.6 可滾動的內容區域 258
7.6.1 使用框架 259
7.6.2 使用iframe 260
7.6.3 使用CSS的可滾動內容區域 261
第8章 獲取用戶反饋 263
8.1 用戶反饋簡介 264
8.1.1 使用mailto:URL 264
8.1.2 地址編碼 264
8.2 使用表單 265
8.2.1 創建一個表單 265
8.2.2 添加控制項 265
8.2.3 增強表單的可訪問性 267
8.3 表單的CSS樣式和布局 268
8.3.1 添加表單樣式 268
8.3.2 使用CSS的高級表單布局 271
8.4 傳送反饋 273
8.4.1 配置nmsFormMail 274
8.4.2 腳本伺服器許可權 275
8.4.3 用PHP傳送表單數據 276
8.4.4 使用E-mail傳送表單數據 279
8.5 聯絡頁面的布局設計 280
8.6 使用微格式改進聯絡信息 281
8.7 詳細聯絡信息結構回歸 286
第9章 處理瀏覽器的古怪行為 289
9.1 最終測試 290
9.2 消除常見錯誤 290
9.3 瀏覽器測試套件292
9.4 處理InternetExplorer的常見bug 296
9.4.1 過時的CSS文檔hack技巧 296
9.4.2條件注釋297
9.4.3 處理捨入誤差299
9.4.4 alt文本覆蓋標題文本 300
9.4.5 InternetExplorer5.x常見問題的修復 300
9.4.6 InternetExplorer6和InternetExplorer5的常見問題修復 301
9.4.7 修復hasLayout問題 306
9.5 針對其他瀏覽器 307
第10章 整合所有內容 309
10.1裝配部件310
10.2 管理樣式單 310
10.3 創建一個作品展示布局 311
10.3.1 關於設計和所需的圖像 311
10.3.2 裝配圖庫 312
10.3.3 設定圖庫樣式 313
10.3.4 為InternetExplorer做特別的處理 315
10.4 創建一個線上店鋪 315
10.4.1 關於設計和所需的圖像 315
10.4.2 裝配店鋪 316
10.4.3 設定店鋪樣式 318
10.4.4 店鋪布局所用的字型和修復 320
10.5 創建一個商業網站 323
10.5.1 關於設計和所需的圖像 323
10.5.2 裝配商業網站 324
10.5.3 設定商業網站樣式 325
10.6 用於列印的樣式單 327
附錄A XHTML參考手冊 332
A.1標準屬性333
A.1.1 核心屬性 333
A.1.2 鍵盤屬性 333
A.1.3 語言屬性 334
A.2 事件屬性 334
A.2.1 核心事件 334
A.2.2 表單元素事件 335
A.2.3 視窗事件 335
A.3 XHTML元素和屬性 336
附錄B Web色彩參考手冊 359
B.1 顏色值 360
B.2 顏色名稱 360
附錄C 實體參考手冊 362
C.1 XHTML中使用的字元 363
C.2 標點和符號 363
C.2.1 引號 363
C.2.2 分隔設定和非列印字元 364
C.2.3 標點符號 364
C.2.4 符號 365
C.3 歐洲語言所用字元 365
C.4 數學.科技和希臘字元 368
C.4.1 常用數學字元 369
C.4.2 高級數學和技術符號 369
C.4.3 希臘字元 371
C.5 箭頭.菱形和撲克牌花色 373
C.6 轉換非標準的Microsoft字元集 373
附錄D CSS參考手冊 375
D.1 CSS盒子模型 376
D.2 共用CSS值 377
D.3 CSS屬性和值 377
D.4 基本選擇符 389
D.5 偽類 390
D.6偽元素390
D.7 CSS樣板檔案及管理 390
附錄E 瀏覽器指南 393
E.1 Firefox 394
E.2 InternetExplorer 394
E.3 Opera 395
E.4 Safari 395
E.5 其他瀏覽器 396
附錄F軟體指南397
F.1 Web設計軟體 398
F.2 圖形設計軟體 398
F.3 我的工具箱... 399
……