無懈可擊的Web設(shè)計(jì)(第3版)將指導(dǎo)您采用標(biāo)準(zhǔn)設(shè)計(jì)策略來滿足以各種方式瀏覽網(wǎng)頁的各類用戶的需要,。每章首先列舉一個(gè)沿用傳統(tǒng)HTML技術(shù)的實(shí)例,,然后指出該實(shí)例的局限性,,并利用XHTML和CSS對(duì)其進(jìn)行重構(gòu),。從中您將學(xué)會(huì)如何用簡(jiǎn)潔高效的HTML標(biāo)記和CSS來取代臃腫的代碼,,從而創(chuàng)建加載速度極快,、能供所有用戶使用的網(wǎng)站,。本書最后將前面各章討論的所有頁面組件珠聯(lián)璧合地結(jié)合在一起,制作了一個(gè)頁面模板,。這一版全面潤(rùn)色和更新了上一版本,,介紹了CSS 3和HTML 5方法,并重新設(shè)計(jì)了“新響應(yīng)設(shè)計(jì)”等多個(gè)案例,。 目錄
第1章 靈活的文字1 11 常見的方法3 12 為什么這樣設(shè)計(jì)不是無懈可擊的4 13 權(quán)衡我們的選擇6 131 長(zhǎng)度單位6 132 表示“相對(duì)大小”的關(guān)鍵字6 133 百分比值7 134 表示“絕對(duì)大小”的關(guān)鍵字7 14 無懈可擊的方法7 141 關(guān)鍵字8 142 放棄像素級(jí)別的精確度8 15 為什么這樣設(shè)計(jì)是無懈可擊的9 16 接下來的操作9 161 設(shè)置基準(zhǔn)值9 162 使用百分比值來獲取不同的尺寸10 17 結(jié)合使用關(guān)鍵字和百分比值13 171 設(shè)定一個(gè)中間的關(guān)鍵字基準(zhǔn)值13 172 慎用嵌套百分比值15 173 百分比值的一致性試驗(yàn)17 18 通過em實(shí)現(xiàn)靈活的文字18 19 rem單位19 110 本章小結(jié)21 第2章 可伸縮的導(dǎo)航欄23 21 常見的方法24 211 功能強(qiáng)大的選項(xiàng)卡25 目 錄 X 無懈可擊的Web設(shè)計(jì)——使用HTML 5和CSS 3提高網(wǎng)站的靈活性與適應(yīng)性(第3版) 212 通常的翻轉(zhuǎn)效果 26 22 為什么這樣設(shè)計(jì)不是無懈可擊的 26 221 堆積如山的代碼 26 222 不方便使用 27 223 可伸縮性的問題 27 224 不夠靈活 27 23 無懈可擊的方法 27 231 無樣式的導(dǎo)航列表 29 232 兩幅小圖片 29 233 應(yīng)用樣式 30 234 采用浮動(dòng)來解決問題 31 235 為選項(xiàng)卡定形 32 236 對(duì)齊背景圖片 32 237 增加底邊 34 238 懸停變換 35 239 選中狀態(tài)35 24 為什么這樣設(shè)計(jì)是無懈可擊的 36 25 使用CSS 3漸變而不使用圖片實(shí)現(xiàn) 37 26 通過em來實(shí)現(xiàn) 40 27 其他示例 42 271 MOZILLAORG 42 272 斜杠 43 273 ESPNCOM的搜索欄 43 28 本章小結(jié) 45 第3章 可擴(kuò)展的行47 31 常見的方法 48 32 為什么這樣設(shè)計(jì)不是無懈可擊的 50 321 非必要的圖片 50 322 固定的行高 50 323 臃腫的代碼 51 33 無懈可擊的方法 51 331 HTML 代碼結(jié)構(gòu) 51 目 錄XI 332 標(biāo)識(shí)出各部分 52 333 沒有添加樣式時(shí)的情形 53 334 添加背景 54 335 安排內(nèi)容的位置 54 336 消失的背景 55 337 添加更多細(xì)節(jié) 56 338 四個(gè)圓角 58 339 文本和鏈接的細(xì)節(jié) 60 3310 最后一步 62 3311 針對(duì)IE7進(jìn)行的修改63 34 為什么這樣設(shè)計(jì)是無懈可擊的 64 341 代碼結(jié)構(gòu)與設(shè)計(jì)效果的分離 65 342 不再有固定不變的高度 65 35 通過border-radius實(shí)現(xiàn) 66 36 另一個(gè)自適應(yīng)擴(kuò)展例子 68 361 HTML 代碼 69 362 創(chuàng)建兩幅圖片 69 363 添加 CSS 70 364 自動(dòng)擴(kuò)展 71 37 本章小結(jié) 72 第4章 巧妙的浮動(dòng)效果73 41 常見的方法 75 42 為什么這樣設(shè)計(jì)不是無懈可擊的 76 43 無懈可擊的方法 77 431 對(duì)HTML代碼無止境的抉擇 77 432 使用定義列表 78 433 HTML代碼結(jié)構(gòu) 79 434 沒有添加樣式時(shí)的情形 80 435 為外圍容器添加樣式 80 436 標(biāo)識(shí)圖片 81 437 應(yīng)用基本的樣式 82 438 給圖片定位 86 XII 無懈可擊的Web設(shè)計(jì)——使用HTML 5和CSS 3提高網(wǎng)站的靈活性與適應(yīng)性(第3版) 439 反向浮動(dòng) 86 4310 為任意長(zhǎng)度的說明文字做準(zhǔn)備 89 4311 浮動(dòng)自清除 90 4312 尾聲 92 4313 切換浮動(dòng)方向 94 4314 表格效果 96 4315 更換背景圖片 99 4316 應(yīng)用box-shadow 101 4317 其他清除浮動(dòng)元素的方法 103 4318 通過生成的內(nèi)容進(jìn)行清除 104 44 為什么這樣設(shè)計(jì)是無懈可擊的 107 45 本章小結(jié) 108 第5章 牢固的方框109 51 常見的方法 111 52 為什么這樣設(shè)計(jì)不是無懈可擊的 113 53 無懈可擊的方法 114 531 HTML 代碼結(jié)構(gòu) 115 532 圖片策略 115 533 應(yīng)用樣式 117 54 為什么這樣設(shè)計(jì)是無懈可擊的 119 55 通過CSS 3實(shí)現(xiàn) 120 56 其他圓角實(shí)現(xiàn)技術(shù) 124 57 框提示 132 571 單圓角 132 572 圓角提示 135 573 無懈可擊的箭頭 136 574 CSS 中的限制孕育了技術(shù)上的創(chuàng)新 137 58 本章小結(jié) 138 第6章 頁面在缺失圖片或CSS的情況下仍然易讀139 61 常見的方法 140 62 為什么這樣設(shè)計(jì)不是無懈可擊的 143 目 錄XIII 63 無懈可擊的方法 144 64 為什么這樣設(shè)計(jì)是無懈可擊的 146 65 使用樣式或禁用樣式 148 66 常見的方法 149 67 無懈可擊的方法 150 68 Dig Dug 測(cè)試 152 69 無懈可擊的工具 153 691 Favelet 154 692 Web Developer Extension 156 693 Web Accessibility 工具欄 158 694 Firebug 158 695 將驗(yàn)證作為一種工具 159 610 本章小結(jié) 162 第7章 可轉(zhuǎn)換的表格 163 71 常見的方法 164 72 為什么這樣設(shè)計(jì)不是無懈可擊的 166 73 無懈可擊的方法 167 731 HTML 代碼結(jié)構(gòu) 168 732 應(yīng)用樣式 174 74 為什么這樣設(shè)計(jì)是無懈可擊的 186 75 本章小結(jié) 187 第8章 流動(dòng)布局和彈性布局 189 81 常見的方法 190 82 為什么這樣設(shè)計(jì)不是無懈可擊的 192 821 大量的代碼 192 822 噩夢(mèng)般的維護(hù)工作 193 823 并非最佳的內(nèi)容順序 193 83 無懈可擊的方法 194 831 HTML 代碼結(jié)構(gòu) 194 832 創(chuàng)建欄:浮動(dòng)與定位 195 833 應(yīng)用樣式 197 XIV 無懈可擊的Web設(shè)計(jì)——使用HTML 5和CSS 3提高網(wǎng)站的靈活性與適應(yīng)性(第3版) 834 gutter 201 835 欄的內(nèi)邊距 203 836 設(shè)置寬度的最大值和最小值 209 837 滑動(dòng)人造欄 213 838 三欄布局 216 84 為什么這樣設(shè)計(jì)是無懈可擊的 223 85 基于em的布局 224 851 一個(gè)彈性布局的例子 224 852 HTML 代碼 226 853 CSS 228 854 一致性是最理想的 230 855 注意滾動(dòng)條 230 86 本章小結(jié) 231 第9章 構(gòu)成一個(gè)整體 233 91 目標(biāo) 234 92 為什么這樣設(shè)計(jì)是無懈可擊的 235 921 流動(dòng)的布局 236 922 靈活的文字 237 923 即使沒有圖片和CSS也可以使用頁面 238 924 國(guó)際化 240 93 構(gòu)建過程 240 931 HTML 代碼結(jié)構(gòu) 241 932 基本樣式 242 933 布局結(jié)構(gòu) 242 934 靈活的網(wǎng)格 244 935 設(shè)置max-width 244 936 頁頭 247 937 靈活的圖片 249 938 側(cè)邊欄 251 939 CSS 3的多欄布局 255 9310 媒體查詢的魔力 256 94 本章小結(jié) 264附錄D Excel快捷鍵 745
|