本書內(nèi)容包括:使用文本、鏈接、圖像、表格和表單來構(gòu)建HTML頁面;使用CSS調(diào)整顏色、背景、頁面布局以及格式化文本,甚至是實現(xiàn)簡單的動畫效果;學(xué)習(xí)JavaScript的工作原理及其在Web設(shè)計中的重要性;創(chuàng)建并優(yōu)化Web圖像,加快圖像下載速度。
這書是一本完整的Web 設(shè)計和制作的入門指南。全書716頁,詳解WEB前端基礎(chǔ)知識,如HTML、CSS、JavaScript、Web圖像制作等等,帶領(lǐng)讀者學(xué)習(xí)網(wǎng)站開發(fā)的全過程。無論你是一名初學(xué)者還是想進(jìn)一步提高自己的網(wǎng)頁設(shè)計技能,本書都能為你提供極具參考性的信息。
Jennifer Niederst Robbins 資深Web設(shè)計師,有25年行業(yè)經(jīng)驗,在Web設(shè)計方面有獨到的見解與認(rèn)識,全球第一個商業(yè)Web網(wǎng)站——O’Reilly的“全球網(wǎng)絡(luò)導(dǎo)航器”(Global Network Navigator,GNN)的設(shè)計者。她是Artifact Conference的創(chuàng)始人和組織者,該會議致力于解決與移動Web設(shè)計相關(guān)的問題。她是全美廣受歡迎的會議演講者,著有Web Design in a Nutshell和HTML5 Pocket Reference。
【第一部分 開始起步7】
從哪里開始9
它需要一個團(tuán)隊(網(wǎng)站創(chuàng)建角色)10
為Web設(shè)計做準(zhǔn)備19
你學(xué)會了什么25
自我測驗25
互聯(lián)網(wǎng)與Web26
提供你的信息27
關(guān)于瀏覽器27
網(wǎng)頁地址(URL)29
網(wǎng)頁結(jié)構(gòu)31
小結(jié)36
自我測驗37
各種設(shè)備40
與標(biāo)準(zhǔn)一致41
逐步提高42
自適應(yīng)Web設(shè)計43
可訪問性:所有用戶一個網(wǎng)站46
網(wǎng)站性能:連接速度的要求48
自我測驗50
【第二部分 HTML結(jié)構(gòu)53】
-
第4章 創(chuàng)建簡單網(wǎng)頁55
創(chuàng)建網(wǎng)頁的步驟55
啟動文本編輯器56
第1步:從內(nèi)容開始58
第2步:HTML文檔結(jié)構(gòu)化61
第3步:確定文本元素64
第4步:添加圖像67
第5步:使用樣式表改變外觀70
當(dāng)網(wǎng)頁出錯時72
驗證你的文檔73
自我測驗74
元素回顧:HTML文檔結(jié)構(gòu)75
段落76
標(biāo)題77
主題中斷78
列表79
更多內(nèi)容元素82
組織網(wǎng)頁內(nèi)容85
內(nèi)聯(lián)元素綜述91
泛型元素div和span100
使用ARIA提高可訪問性104
字符轉(zhuǎn)義107
小結(jié)109
自我測驗112
元素回顧:文本元素112
href屬性115
鏈接到Web上的網(wǎng)頁117
站內(nèi)鏈接118
以新瀏覽器窗口為目標(biāo)127
郵件鏈接129
電話鏈接129
自我測驗130
元素回顧:鏈接131
圖像格式簡介133
img元素134
添加SVG圖像139
自適應(yīng)圖像標(biāo)記146
小結(jié)158
自我測驗158
元素回顧:圖像159
如何使用表格161
最小表結(jié)構(gòu)162
表頭165
合并單元格165
表格可訪問性166
行和列組168
小結(jié)170
自我測驗172
元素回顧:表格172
表單如何工作174
表單元素176
變量和內(nèi)容178
重要表單控件綜述179
表單可訪問性功能197
表單布局和設(shè)計201
自我測驗202
元素回顧:表單203
窗口中的窗口207
多用途嵌入器209
視頻和音頻210
畫布219
自我測驗223
元素回顧:嵌入式媒體223
【第三部分 表現(xiàn)層的CSS227】
CSS的優(yōu)點229
樣式表如何工作231
大概念235
CSS計量單位241
開發(fā)者工具就在瀏覽器中244
繼續(xù)使用CSS246
自我測驗247
基本字體屬性249
使用CSS3的高級排版功能265
改變文本顏色267
更多選擇器類型268
文本行設(shè)置274
下劃線和其他“修飾”277
改變字母大小寫278
空格279
文本陰影280
改變列表的數(shù)字編號284
自我測驗286
CSS回顧:字體和文本屬性288
指定顏色值290
前景色297
背景色298
裁剪背景299
使用不透明度300
偽類選擇器301
偽元素選擇器306
屬性選擇器308
背景圖像309
快捷背景屬性323
漸變327
外部樣式表334
小結(jié)339
自我測驗339
CSS回顧:色彩和背景屬性341
元素盒子342
指定盒子尺寸343
填充348
邊框352
空白邊362
分配顯示類型365
盒子陰影368
自我測驗369
CSS回顧:盒子屬性369
普通流372
浮動373
用CSS形狀進(jìn)行精美文本環(huán)繞383
定位基礎(chǔ)390
相對定位391
絕對定位392
固定定位400
自我測驗401
CSS回顧:浮動和定位屬性402
-
第16章 使用Flexbox和網(wǎng)格進(jìn)行CSS布局403
使用CSS Flexbox的靈活盒子403
CSS網(wǎng)格布局432
自我測驗463
CSS回顧:布局屬性466
-
第17章 自適應(yīng)Web設(shè)計469
為什么要使用RWD470
自適應(yīng)秘訣470
選擇斷點477
自適應(yīng)設(shè)計481
關(guān)于測試492
更多的RWD資源494
自我測驗495
CSS過渡497
CSS變換507
關(guān)鍵幀動畫515
小結(jié)520
自我測驗521
CSS回顧:過渡、變換和動畫522
對表單設(shè)置樣式524
對表格設(shè)置樣式527
重置和Normalize.css530
圖像替換技術(shù)532
CSS Sprite533
CSS特性檢測535
小結(jié)539
自我測驗539
CSS回顧:表格屬性541
-
第20章 現(xiàn)代Web開發(fā)工具542
熟悉命令行542
CSS的強(qiáng)大工具:處理器546
構(gòu)建工具:Grunt和Gulp552
使用Git和Github進(jìn)行版本控制554
小結(jié)560
自我測驗561
【第四部分 JavaScript行為563】
關(guān)于JavaScript565
給網(wǎng)頁添加JavaScript568
腳本剖析569
瀏覽器對象582
事件582
綜合應(yīng)用584
學(xué)習(xí)更多關(guān)于JavaScript的知識585
自我測驗588
DOM簡介589
polyfill597
JavaScript庫599
小結(jié)603
自我測驗603
【第五部分 Web圖像605】
圖像來源607
格式簡介610
圖像尺寸和分辨率620
圖像資產(chǎn)策略623
favicon627
小結(jié)630
自我測驗630
將圖像保存為Web格式632
使用透明度637
自適應(yīng)圖像制作技巧640
圖像優(yōu)化650
自我測驗660
使用XML繪圖663
SVG作為XML的特性670
SVG工具675
SVG制作技巧677
自適應(yīng)SVG681
SVG的進(jìn)一步探索687
自我測驗687
我們學(xué)完了688
【第六部分 附錄689】
附錄A 自我測驗答案691
附錄B HTML5全局屬性705
附錄C CSS選擇器的第3級和第4級707
附錄D 從HTML 到HTML5710