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